/* ════════════════════════════════════════════════════════
   OHÁ — CORE DESIGN SYSTEM (shared across all pages)
   tokens · reset · logo · nav · buttons · marquee · strip
   reveal-motion · grain · footer · responsive base
   ════════════════════════════════════════════════════════ */

/* ── LOGO (verified wordmark PNGs in /assets) ── */
:root{
  --logo-black: url("oha-mark-black.png");
  --logo-white: url("oha-mark-white.png");
}
.logomark{ display:inline-block; background:var(--logo-black) center/contain no-repeat; width:1em; aspect-ratio:441/326; font-size:1em; vertical-align:baseline; }
.logomark--white{ background-image:var(--logo-white); }
.logomark span{ position:absolute; left:-99999px; }
.logoimg{ display:block; width:100%; height:auto; }

/* ── TOKENS ── */
:root{
  --bg:#FAF8F3; --bg-cream:#EFE7DA; --bg-oak:#C09975;
  --burgundy:#5C1A2A; --burgundy-2:#6B2A38;
  --ink:#1A1A1A; --ink-2:#3A3A3A; --ink-mute:#6B5F50;
  --noir:#0B0A09; --noir-2:#15120F;
  --rule:#1A1A1A14; --rule-strong:#1A1A1A33; --rule-light:#FAF8F31F;
  --ease:cubic-bezier(.2,.7,.1,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --type-display:"Antonio","Helvetica Neue",system-ui,sans-serif;
  --type-serif:"Instrument Serif","Times New Roman",serif;
  --type-body:"Inter",system-ui,-apple-system,sans-serif;
  --max:1440px;
}

/* ── RESET / BASE ── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; } /* Lenis owns smooth scroll — CSS smooth fights it */
html,body{ background:var(--bg); color:var(--ink); }
body{ font-family:var(--type-body); font-weight:400; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
img{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--burgundy); color:var(--bg); }
.t-eyebrow{ font-size:11px; letter-spacing:0.25em; text-transform:uppercase; color:var(--ink-mute); }

/* ── NAV (shared base) ── */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:22px 32px; mix-blend-mode:difference; color:#FAF8F3; pointer-events:none; }
.nav > *{ pointer-events:auto; }
.nav__left{ display:flex; gap:32px; }
.nav__right{ display:flex; justify-content:flex-end; gap:32px; }
.nav__mark{ font-family:var(--type-display); font-weight:700; font-size:24px; letter-spacing:-0.02em; justify-self:center; display:inline-flex; align-items:center; gap:4px; }
.nav__mark .logomark{ width:46px; height:34px; background-size:contain; background-image:var(--logo-white); }
.nav a:not(.nav__mark){ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; opacity:.78; transition:opacity .3s var(--ease); }
.nav a:not(.nav__mark):hover{ opacity:1; }
.nav__cta{ justify-self:end; border:1px solid currentColor; padding:10px 18px; }
.nav__back::before{ content:"← "; }
.nav__event{ display:inline-flex; align-items:center; gap:8px; }
.nav__event::before{ content:""; width:6px; height:6px; border-radius:50%; background:#FAF8F3; animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.65); } }

/* ── BUTTONS ── */
.btn{ display:inline-flex; align-items:center; gap:14px; padding:18px 34px; font-size:11px; letter-spacing:0.3em; text-transform:uppercase; font-weight:500; transition:background .4s var(--ease-out), color .4s var(--ease-out), transform .4s var(--ease-out), border-color .4s var(--ease-out); }
.btn--solid{ background:var(--bg); color:var(--ink); }
.btn--solid:hover{ background:var(--burgundy); color:var(--bg); transform:translateY(-2px); }
.btn--solid::after{ content:"→"; transition:transform .4s var(--ease-out); }
.btn--solid:hover::after{ transform:translateX(5px); }
.btn--dark{ background:var(--ink); color:var(--bg); }
.btn--dark:hover{ background:var(--burgundy); color:var(--bg); transform:translateY(-2px); }
.btn--dark::after{ content:"→"; transition:transform .4s var(--ease-out); }
.btn--dark:hover::after{ transform:translateX(5px); }
.btn--ghost{ border:1px solid currentColor; }
.btn--ghost:hover{ opacity:.62; transform:translateY(-2px); }
.btn[disabled], .btn.is-disabled{ opacity:.38; pointer-events:none; }

/* ── MARQUEE ── */
.marquee{ overflow:hidden; padding:22px 0; }
.marquee__track{ display:flex; gap:64px; white-space:nowrap; width:max-content; animation:marquee 46s linear infinite; font-family:var(--type-display); font-weight:600; letter-spacing:-0.02em; font-size:clamp(34px,5vw,60px); line-height:1; }
.marquee__track span{ opacity:.42; }
.marquee__track span::after{ content:" · "; opacity:.4; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ── EDITORIAL FULL-BLEED STRIP ── */
.strip{ position:relative; height:64vh; overflow:hidden; }
.strip img{ width:100%; height:100%; object-fit:cover; }
.strip__overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,0) 45%, rgba(0,0,0,.18)); }
.strip__caption{ position:absolute; bottom:48px; left:48px; color:#FAF8F3; max-width:560px; }
.strip__caption .e{ font-size:11px; letter-spacing:0.25em; text-transform:uppercase; opacity:.8; margin-bottom:14px; display:block; }
.strip__caption .l{ font-family:var(--type-serif); font-style:italic; font-size:clamp(28px, 3.6vw, 54px); line-height:1.1; }

/* ── REVEAL MOTION (progressive: hidden only when JS is active, so
      no-JS / crawlers / SEO see full content) ── */
html.js .reveal{ opacity:0; transform:translateY(30px); transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
html.js .reveal.in{ opacity:1; transform:none; }
.reveal-slow{ transition-duration:1.7s; }
html.js .reveal-blur{ filter:blur(8px); transition:opacity 1.3s var(--ease-out), transform 1.3s var(--ease-out), filter 1.3s var(--ease-out); }
html.js .reveal-blur.in{ filter:blur(0); }
html.js .reveal-stagger > *{ opacity:0; transform:translateY(30px); transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
html.js .reveal-stagger.in > *{ opacity:1; transform:none; }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.06s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.16s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.26s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.36s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.46s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.56s; }
.reveal-stagger.in > *:nth-child(7){ transition-delay:.66s; }

/* ── GRAIN OVERLAY (atmosphere) ── */
.grain::after{ content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── FOOTER ── */
.foot{ background:var(--ink); color:var(--bg); padding:80px 32px 32px; }
.foot__inner{ max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; font-size:10px; letter-spacing:0.25em; text-transform:uppercase; opacity:.75; }
.foot__inner a:hover{ opacity:.6; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; filter:none !important; }
  .marquee__track{ animation:none; }
  *{ scroll-behavior:auto !important; }
}

/* ── RESPONSIVE BASE ── */
@media (max-width: 900px){
  .nav{ grid-template-columns:1fr 1fr; padding:18px 22px; }
  .nav__mark{ justify-self:start; }
  .nav__right{ justify-self:end; }
  .strip__caption{ left:24px; right:24px; bottom:32px; }
}