/* Onyx & Aurum — home page. Tokens only; no literal colors below :root. */

/* ---- Hero: the lockup, large, on the bare ground ---- */
.hero { padding-top: clamp(4rem, 10vw, 8.5rem); padding-bottom: clamp(3rem, 7vw, 6rem); text-align: center; }
.hero .kicker { justify-content: center; }
.hero .kicker::before { display: none; }
.hero-rule { display: block; width: 72px; height: 9px; margin: 0.9rem auto 1.4rem;
  background:
    linear-gradient(var(--accent), var(--accent)) top / 100% 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 100% 3px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom / 100% 1px no-repeat; }
/* Deco hero (Gus, 2026-09-24): faint gold rays rising behind the wordmark and stepped corner brackets.
   Decorative only (aria-hidden), drawn from .claude/scripts/oa_deco.py. Buttons keep their shape. */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0;
  width: min(1100px, 150vw); aspect-ratio: 2 / 1; transform: translateX(-50%);
  background: url("/assets/img/deco/hero-rays.svg") center bottom / contain no-repeat;
  opacity: 0.1;
}
.hero-deco {
  position: absolute; z-index: -1; pointer-events: none;
  inset: clamp(12px, 3vw, 32px);
  --c: clamp(28px, 4vw, 44px);
  background:
    url("/assets/img/deco/corner-tl.svg") top left / var(--c) no-repeat,
    url("/assets/img/deco/corner-tr.svg") top right / var(--c) no-repeat,
    url("/assets/img/deco/corner-bl.svg") bottom left / var(--c) no-repeat,
    url("/assets/img/deco/corner-br.svg") bottom right / var(--c) no-repeat;
  opacity: 0.85;
}
.hero-mark {
  font-size: clamp(2.6rem, 8.5vw, 6rem); line-height: 1.02; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin: 0; text-wrap: balance;
}
.hero-mark .amp { letter-spacing: 0; padding: 0 0.06em; }

/* The wordmark as brushed metal (craft pass, 2026-09-11).
   `color` deliberately STAYS --accent and only the fill goes transparent, and
   --surface is restated as the element's background-color. Both are for the
   contrast instrument, not for looks: the kit audit reads an element's own
   gradient as its backdrop, which for clipped TEXT is the wrong backdrop (the
   real one is the page ground) and made the mark report 1.45:1. Declaring the
   true ground and the true ink makes the check measure what a reader sees.
   Both are clipped to the glyphs, and the ramp is opaque, so neither paints.
   Measured independently: the ramp's darkest stop (A8843A) on --surface is
   5.58:1, i.e. the mark clears AA as body text, not just as large display. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-mark {
    background-color: var(--surface);
    background-image: var(--gold-brushed);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.hero-sub { margin: 0.6rem 0 0; font-size: var(--fs-200); letter-spacing: 0.36em; text-transform: uppercase; color: var(--ink-muted); }
.hero-lede { margin: 2rem auto 0; max-width: 36ch; font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--ink-soft); text-wrap: balance; }
.hero .cta-row { justify-content: center; margin-top: 2.2rem; }

/* Phones: the lockup of record never breaks. With text-wrap: balance the mark split into "ONYX &" / "AURUM"
   at 390px (design audit 2026-09-16, P1-02). Below 600px it is held to ONE line and sized to the viewport
   instead. Measured 2026-09-16 in Chromium: "ONYX & AURUM" at 0.08em tracking is ~8.95x its font-size wide, so
   9vw fills 87-92% of the column at every width from 320 to 600 (257 of 280px at 320, 314 of 350px at 390)
   and never overflows. Re-measure if the tracking or the face changes. */
@media (max-width: 600px) {
  .hero-mark { white-space: nowrap; font-size: 9vw; letter-spacing: 0.08em; text-wrap: nowrap; }
}

/* ---- Menu preview on the home page ---- */
.menu-preview .menu-desc { display: none; }
.menu-preview .menu-row { padding: 1rem 0; }

/* ---- Teasers: two hairline columns ----
   No bottom rule: the section after this one always opens on its own full-width hairline (the pre-open
   access section, or the footer once it is gone), so a bottom rule here stacked a second divider
   ~100px above it at desktop and ~64px on phones (screenshot review, 2026-09-27). */
.teasers { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); border-top: 1px solid var(--line); }
.teaser { padding: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.8rem, 4vw, 3rem) 0; border-right: 1px solid var(--line); }
.teaser + .teaser { padding-left: clamp(1.5rem, 3vw, 2.5rem); }
.teaser:last-child { border-right: 0; }
.teaser h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: 0.02em; }
.teaser p { color: var(--ink-soft); }
.teaser a { color: var(--accent); text-decoration: none; letter-spacing: 0.04em; }
.teaser a:hover { color: var(--ink); }

/* ---- Reveal on load for the hero only ---- */
/* 2026-09-11: halved. At 900ms + a 480ms last delay the wordmark was still
   invisible 1.4s in, which is longer than a link-preview screenshotter waits,
   so an OG capture could come back as a blank black page. Worst case is now
   ~0.86s and the mark itself lands at 170ms. */
@media (prefers-reduced-motion: no-preference) {
  .hero > .wrap > * { animation: rise 560ms var(--ease) both; }
  .hero > .wrap > :nth-child(2) { animation-delay: 60ms; }
  .hero > .wrap > :nth-child(3) { animation-delay: 110ms; }
  .hero > .wrap > :nth-child(4) { animation-delay: 170ms; }
  .hero > .wrap > :nth-child(5) { animation-delay: 230ms; }
  .hero > .wrap > :nth-child(6) { animation-delay: 300ms; }
  @keyframes rise { from { opacity: 0.001; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 860px) {
  /* `.teaser + .teaser` above (0,2,0) outranked a bare `.teaser` here and left the second teaser indented
     24px on phones (design audit 2026-09-16, P1-04). */
  .teaser, .teaser + .teaser { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; }
  .teaser:last-child { border-bottom: 0; }
}