@font-face { font-family: "Brand"; src: url("brand.otf"); font-display: swap; }
@font-face { font-family: "Aston"; src: url("aston-script.ttf"); font-display: swap; }
@font-face { font-family: "Copper"; src: url("copperplate.ttf"); font-display: swap; }

/* 5th House Creative palette, see Business/5th House Creative/visual-identity.md */
:root {
  --deep: #510000; --wine: #6E1F2B; --sand: #EAD5BE; --bone: #F4EFEB;
  --cream: #F6EEE1; --gold: #B8925A; --red: #B4202E; --ink: #1E1414;
  --muted: #6b5550; --line: #d9c2a8;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--sand); color: var(--ink); font: 15px/1.55 "Montserrat", -apple-system, Helvetica, sans-serif; }

header { background: var(--deep); text-align: center; padding: 22px 16px 26px; }
header img { width: 230px; max-width: 70%; display: block; margin: 0 auto; }
header .who { color: var(--cream); font: 12px/1.4 "Copper", serif; letter-spacing: .14em; margin-top: 12px; opacity: .85; }

nav { position: sticky; top: 0; z-index: 5; background: var(--wine); display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; justify-content: safe center; }
nav button { flex: none; color: var(--cream); background: transparent; cursor: pointer; font: 12px/1 "Copper", serif; letter-spacing: .1em; padding: 9px 13px; border-radius: 99px; border: 1px solid rgba(246,238,225,.25); }
nav button:hover { background: rgba(246,238,225,.12); }
nav button.on { background: var(--cream); color: var(--deep); border-color: var(--cream); }
nav .count { background: var(--gold); color: var(--deep); border-radius: 99px; padding: 1px 6px; margin-left: 4px; font: 600 10px "Montserrat"; }

main { max-width: 760px; margin: 0 auto; padding: 8px 16px 60px; min-height: 60vh; }
.page { display: none; padding-top: 30px; animation: fade .25s ease; }
.page.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.eyebrow { font: 12px/1 "Copper", serif; letter-spacing: .16em; color: var(--wine); }
h1, h2 { font-family: "Brand", Georgia, serif; font-weight: 400; color: var(--deep); margin: 6px 0 12px; line-height: 1.05; }
h1 { font-size: 40px; margin-top: 22px; }
h1 .script { font-size: 1.05em; margin-right: 4px; }
h2 { font-size: 30px; }
h3 { margin: 6px 0 4px; font-size: 17px; }
.script { font-family: "Aston", cursive; color: var(--gold); text-transform: none; }
.card { background: var(--bone); border-radius: 14px; padding: 18px; margin: 12px 0; border: 1px solid var(--line); }
.muted { color: var(--muted); font-size: 13px; }
.empty-note { color: var(--muted); font-style: italic; }
.pre { white-space: pre-line; }

.btn { display: inline-block; border: 0; cursor: pointer; border-radius: 99px; padding: 11px 20px; font: 600 13px/1 "Montserrat"; text-decoration: none; }
.btn-cream { background: var(--cream); color: var(--deep); }
.btn-wine { background: var(--wine); color: var(--cream); }
.btn-line { background: transparent; color: var(--wine); border: 1.5px solid var(--wine); }
.btn-gold { background: var(--gold); color: var(--deep); }
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.tag { display: inline-block; font: 10px/1 "Copper", serif; letter-spacing: .1em; padding: 4px 8px; border-radius: 99px; margin-bottom: 3px; }
.t-shoot, .t-change { background: var(--wine); color: var(--cream); }
.t-call, .t-ok { background: var(--gold); color: var(--deep); }
.t-pay { background: var(--deep); color: var(--cream); }
.t-in, .t-wait { background: var(--sand); color: var(--wine); }
.t-late { background: var(--red); color: #fff; }
.purpose { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.due { color: var(--red); font-weight: 600; font-size: 13px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--deep); color: var(--cream); padding: 12px 20px; border-radius: 99px; font-weight: 600; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 20; }
.toast.on { opacity: 1; }

footer { background: var(--deep); text-align: center; padding: 26px 16px; color: var(--cream); font: 11px "Copper", serif; letter-spacing: .12em; }
footer img { width: 64px; display: block; margin: 0 auto 10px; }

input.i, select.i, textarea.i { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: 14px "Montserrat"; color: var(--ink); }
label.f { display: block; font: 11px/1 "Copper", serif; letter-spacing: .1em; color: var(--muted); margin: 14px 0 6px; }

@media (max-width: 520px) {
  nav { justify-content: flex-start; }
  h1 { font-size: 32px; } h2 { font-size: 25px; }
}