/* Shared stylesheet for AURUM's public site — the waitlist landing, support,
   privacy and terms pages.
 *
 * Follows DESIGN.md rather than inventing a marketing look: the same
 * Bricolage Grotesque, the same near-black/white base, and red held back for
 * the wordmark and a small fixed set of accents. Dark is the default, not an
 * alternative — this is a nightlife product.
 *
 * Deliberately one stylesheet across four pages instead of the per-file
 * <style> block waitlist.html used to carry. Four copies of a palette is four
 * places for it to drift, and DESIGN.md's decisions log already records two
 * separate passes spent re-syncing tokens across pages by hand. */

:root {
    /* Brand red, sampled from the founder's artwork rather than matched by
       eye — the mode across all four supplied assets sits at #B22222, with a
       faint vertical ramp (#C72727 to #931E1E) that is invisible at UI size.
       Spent on the mark and nothing else: the semantic reds (errors, the
       taken-table state) keep --accent, which is tuned for legibility. */
    --brand:#B22222;
  --bg: #0A0A0A;
  --surface: #161616;
  --surface2: #202020;
  --line: #2E2E2E;
  --text: #F7F7F5;
  --muted: #9B9B9B;
  --white: #FBF6F2;
  /* Red is no longer a brand colour. What survives is semantic only:
     a failed field, and the taken-table status on the floor map.
     Nothing decorative uses it. */
  --danger: #E31C42;
  --danger-soft: #FF6B85;
  --ok: #6B8F6B;
  --maxw: 1100px;
  /* 8px base unit, per DESIGN.md */
  --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px;
  /* Radius, per the 2026-07-27 tightening: sharp tags, not capsules */
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------------------------------------------------------------- chrome -- */

.sitehead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--s3) var(--s3);
}
.sitehead nav, .sitefoot nav { display: flex; gap: var(--s3); flex-wrap: wrap; }
.sitehead nav a, .sitefoot nav a {
  color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 700;
  transition: color 150ms ease-out;
}
.sitehead nav a:hover, .sitefoot nav a:hover { color: var(--text); }

/* The one place red is always spent, per DESIGN.md — the three-stop gradient
   wordmark. Nothing else on these pages uses a gradient. */
.wordmark {
  font-weight: 800; font-size: 20px; letter-spacing: -.02em; text-decoration: none;
    /* The mark: uppercase AURÙM, Bricolage Grotesque 800, painted with the
       lacquer gradient. Read off the landing page's own rule rather than
       eyeballed — see DESIGN.md, 2026-08-17. The flat --brand colour is
       declared here unconditionally and the gradient only replaces it where
       the clip works, because transparent text with no clip is an invisible
       logo. Kept identical across every page that draws the mark. */
    font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-weight:800;letter-spacing:.02em;
    color:var(--brand,#B22222);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wordmark{background-image:var(--mark-grad,linear-gradient(112deg,#8C1A1B 0%,#DE3330 42%,#F2564F 100%));
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.wordmark.small { font-size: 16px; }

.sitefoot {
  max-width: var(--maxw); margin: var(--s8) auto 0;
  padding: var(--s3);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
}

/* ---------------------------------------------------------------- typography */

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }

.hero h1 {
  font-size: clamp(44px, 9vw, 96px);
  line-height: .95; letter-spacing: -.035em;
  margin: 0 0 var(--s3);
}
.hero .sub {
  color: var(--muted); font-size: clamp(16px, 2.2vw, 19px); line-height: 1.55;
  margin: 0 0 var(--s4); max-width: 30em;
}

/* ---------------------------------------------------------------- landing -- */

.hero { max-width: var(--maxw); margin: 0 auto; padding: var(--s6) var(--s3) var(--s8); }

.signup { display: flex; gap: 12px; flex-wrap: wrap; max-width: 520px; }
.signup input[type=email] {
  flex: 1 1 240px; min-width: 0;
  background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 15px 16px; color: var(--text); font: inherit;
}
.signup input[type=email]::placeholder { color: var(--muted); }
.signup input[type=email]:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* Primary action is flat white-on-black. No gradient, no gloss, no colored
   glow — DESIGN.md is explicit about all three. */
.btn {
  font: inherit; font-weight: 800; font-size: 15px;
  padding: 15px 24px; border-radius: var(--r-sm); border: none; cursor: pointer;
  background: var(--white); color: #000;
  transition: opacity 150ms ease-out, transform 100ms ease-out;
}
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.99); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.formnote { color: var(--muted); font-size: 12.5px; margin-top: 12px; max-width: 40em; }
.formnote a { color: var(--text); }
.error-msg { color: var(--danger-soft); font-size: 13px; font-weight: 700; margin-top: 10px; min-height: 18px; }

.success { display: none; }
.success.show { display: block; }
.success h2 { font-size: 30px; margin: 0 0 10px; color: var(--white); }
.success p { color: var(--muted); margin: 0; }
.hide { display: none; }

/* ------------------------------------------------------------------ blocks -- */

.section { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s3) var(--s8); }
.section > h2 { font-size: clamp(24px, 4vw, 34px); margin: 0 0 var(--s3); }

.cards { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s3);
}
.card h3 { font-size: 17px; margin: 0 0 8px; }
.card p { color: var(--muted); margin: 0; font-size: 14.5px; }

/* Numbered because the booking flow genuinely is a sequence — the steps only
   make sense in order. Not decoration. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); counter-reset: step; }
.steps li {
  display: grid; grid-template-columns: 40px 1fr; gap: var(--s2); align-items: start;
  border-top: 1px solid var(--line); padding-top: var(--s2);
}
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-weight: 800; font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Both the title and the description belong in the wide column. Without this
   they are three grid items in a two-column grid: ::before takes column 1,
   <b> takes column 2, and <span> wraps onto row 2 — into the 40px numeral
   column — which set every description one word per line down a narrow
   ribbon. Pinning both to column 2 fixes it without touching the markup. */
.steps b,
.steps span { grid-column: 2; }
.steps b { display: block; font-size: 16px; margin-bottom: 4px; }
.steps span { color: var(--muted); font-size: 14.5px; }

/* ------------------------------------------------------------------- prose -- */

.prose { max-width: 760px; margin: 0 auto; padding: var(--s4) var(--s3) 0; }
.prose h1 { font-size: clamp(32px, 6vw, 48px); margin: 0 0 var(--s3); }
.prose h2 { font-size: 21px; margin: var(--s6) 0 12px; }
.prose h3 { font-size: 17px; margin: var(--s4) 0 10px; }
.prose p { margin: 0 0 14px; color: #D9D9D7; }
.prose ul { margin: 0 0 18px; padding-left: 22px; color: #D9D9D7; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); font-weight: 800; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: var(--s4) 0; }
.prose a { color: var(--text); }

/* The unreviewed-draft warning that both legal documents carry. Rendered as a
   real notice so it cannot be skimmed past, and deliberately not removable by
   the generator. */
.notice {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255,255,255,.05);
  padding: var(--s2) 18px; margin: 0 0 var(--s3);
  font-size: 14px; color: var(--text);
}

/* A value nobody has supplied yet. Loud on purpose — these pages are the ones
   App Store review reads. */
mark.todo {
  background: rgba(255,255,255,.10); color: var(--danger-soft);
  border-radius: 4px; padding: 0 5px; font-weight: 700;
}

/* ----------------------------------------------------------------- support -- */

.qa { border-top: 1px solid var(--line); padding: var(--s3) 0; }
.qa h3 { margin: 0 0 8px; font-size: 17px; }
.qa p { margin: 0 0 10px; color: var(--muted); }
.qa p:last-child { margin-bottom: 0; }
.contact {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s3); margin-bottom: var(--s4);
}
.contact a { font-weight: 800; color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}