/* ============================================================
   StudioCW Motorsports — site.css
   Gallery print room on a Paper ground. Ink type, one Signal-Gold
   accent used only as a FILLED chip / button (ink text on top).
   The expanding filmstrip is the hero. Everything else is quiet.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --paper:#FAFAFA;
  --white:#FFFFFF;
  --ink:#0E0E0E;
  --graphite:#1C1C1C;
  --gold:#F5DF4D;
  --gold-press:#ECD43A;

  /* muted text — both verified >= 4.5:1 on Paper */
  --muted:#5E5E5E;   /* body-muted */
  --faint:#6B6B6B;   /* faintest allowed */

  --line:rgba(14,14,14,.14);   /* hairline rules (graphic, never text) */
  --line-soft:rgba(14,14,14,.08);

  /* filmstrip geometry */
  --frame-h: clamp(320px, 56vh, 600px);
  --active-w: min(calc(var(--frame-h) * 1.5), 47vw);  /* ~3:2, capped */
  --sliver-w: clamp(40px, 5.6vw, 96px);
  --strip-gap: clamp(6px, .7vw, 12px);
  --radius: 8px;                                   /* slightly rounded photo corners */
  --shadow-sliver: 0 3px 12px rgba(14,14,14,.10);  /* lift each frame off the Paper ground */
  --shadow-active: 0 22px 55px rgba(14,14,14,.22); /* the active frame lifts forward more */
  --active-grow: 1.15;                             /* active is this much TALLER than the slivers (slivers keep full height) */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-expo */
  --dur: 820ms;

  --pad-x: clamp(18px, 5vw, 72px);

  /* semantic z-index scale */
  --z-base:1;
  --z-frame:2;
  --z-arrow:5;
  --z-sheet:12;
  --z-header:20;
  --z-skip:60;
  --z-cursor:100;   /* custom cursor rides above everything; pointer-events:none */

  --font-brand:"Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

html{ height:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(15px, .55vw + 13px, 17px);
  line-height:1.55;
  font-feature-settings:"cv05" 1, "ss01" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;            /* content pages scroll vertically */
}
/* the HOME page is a single, non-scrolling viewport: wheel/trackpad drives the carousel */
body.home{ height:100%; overflow:hidden; overscroll-behavior:none; }

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

:where(a, button, input, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:3px;
}

.skip{
  position:fixed; top:10px; left:10px; z-index:var(--z-skip);
  transform:translateY(-160%);
  background:var(--ink); color:var(--paper);
  padding:.6rem 1rem; border-radius:6px;
  font-size:.85rem; font-weight:600; text-decoration:none;
  transition:transform .18s var(--ease);
}
.skip:focus{ transform:translateY(0); }

/* ============================================================
   INTRO LOADER — brief Ink entrance, 0 -> 100, then reveals the work
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:90;
  background:var(--ink); color:var(--paper);
  display:grid; place-items:center;
  transition:opacity .6s var(--ease);
}
.intro__mark{ position:absolute; top:clamp(20px,3vh,28px); left:var(--pad-x); width:26px; height:26px; }
.intro__count{
  font-variant-numeric:tabular-nums; font-weight:300;
  font-size:clamp(3rem, 12vw, 6rem); letter-spacing:-0.04em; line-height:1;
}
.intro.is-done{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .intro{ display:none; } }

/* ============================================================
   HEADER
   ============================================================ */
.masthead{
  position:sticky; top:0; z-index:var(--z-header);   /* scrolling content pages */
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--line-soft);
}
body.home .masthead{ position:fixed; left:0; right:0; }   /* overlay the single-viewport home */
.masthead__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(14px, 3vw, 40px);
  padding:.9rem var(--pad-x);
}

.lockup{
  display:inline-flex; align-items:center; gap:.55rem;
  text-decoration:none; color:var(--ink);
}
.lockup__img{ height:26px; width:26px; display:block; }   /* the small CW mark, never re-typeset */
.lockup__label{
  font-size:.62rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
  padding-left:.6rem; margin-left:.1rem;
  border-left:1px solid var(--line);
  line-height:1;
}

.place{
  display:inline-flex; align-items:baseline; gap:.55rem;
  justify-self:center; color:var(--muted);
}
.place__clock{
  font-size:.8rem; font-weight:500; letter-spacing:.04em;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.place__city{
  font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint);
}

.nav{ display:inline-flex; gap:clamp(14px, 2vw, 30px); justify-self:end; }
.nav a{
  position:relative;
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  padding:.3rem 0;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1.5px;
  background:var(--ink);
  transition:right .4s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after{ right:0; }

@media (max-width: 600px){
  /* narrow header: drop the clock + MOTORSPORTS label, flex space-between so
     nothing can overlap or overrun the viewport */
  .masthead__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .place{ display:none; }
  .lockup{ min-width:0; flex:0 1 auto; }
  .lockup__label{ display:none; }
  .nav{ flex:0 0 auto; gap:clamp(12px, 4vw, 20px); }
  .nav a{ letter-spacing:.1em; }
}

/* ============================================================
   STAGE — the gallery is the hero
   ============================================================ */
.stage{
  height:100svh;                           /* exactly one screen: no page scroll, wheel feeds the carousel */
  display:grid;
  grid-template-rows:1fr auto;
  grid-template-columns:minmax(0, 1fr);   /* clamp the track; the filmstrip's
                                             max-content must never blow out the grid */
  padding:clamp(72px, 10vh, 104px) var(--pad-x) clamp(18px, 3vh, 40px);   /* top clears the fixed masthead */
  gap:clamp(16px, 3vh, 40px);
}

.stage__field{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(8px, 1.5vw, 22px);
  min-height:0; min-width:0;
}

.strip-wrap{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  display:flex; justify-content:center; align-items:center;
  overflow:hidden;           /* clip peeking slivers, never a body scroll */
}

/* Fallback (no-JS / pre-boot): a centered flex row of real photos.
   engine.js swaps this for the live pos-driven mode by adding .is-live. */
.strip{
  display:flex;
  gap:var(--strip-gap);
  height:var(--frame-h);
  width:100%;
  justify-content:center;
  align-items:stretch;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}

/* Live mode: one scalar `pos` drives width + position per frame. Slides are
   absolutely placed and translated by JS; no CSS transitions on width/transform. */
.strip.is-live{
  display:block;
  position:relative;
  width:100%;
  height:calc(var(--frame-h) * var(--active-grow));  /* taller box so the active can grow up while slivers keep full height */
  overflow:visible;              /* strip-wrap clips; slivers bleed past the edges */
  cursor:grab;
  touch-action:pan-y;            /* horizontal drag is ours, vertical scrolls the page */
  -webkit-user-select:none; user-select:none;
  transition:opacity .42s var(--ease);
}
.strip.is-live.is-dragging{ cursor:grabbing; }

/* ---- slides ---- */
.slide{
  margin:0;
  flex:0 0 var(--sliver-w);      /* fallback sizing */
  height:100%;
  min-width:0;
}
.slide.is-active{ flex-basis:var(--active-w); }   /* fallback only */

.strip.is-live .slide{
  position:absolute; top:auto; bottom:0; left:0;   /* bottom-aligned baseline: the active grows UP only */
  flex:none;
  width:var(--sliver-w);         /* JS overrides width + height + transform every frame */
  will-change:transform, width, height;
}

.slide__hit{
  position:relative;
  display:block;
  width:100%; height:100%;
  padding:0; margin:0;
  border:none; background:none;
  cursor:inherit;
  overflow:hidden;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sliver);
  outline-offset:2px;
}
.strip.is-live .slide__hit{ cursor:pointer; }     /* a sliver invites a click-to-center */
.strip.is-live .slide.is-active .slide__hit{ box-shadow:var(--shadow-active); }  /* active lifts forward */

/* the real photograph. object-fit:cover keeps the frame filled at any width. */
.slide__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  background:hsl(0 0% 92%);      /* neutral hold while the photo decodes */
  pointer-events:none;
  -webkit-user-drag:none; user-drag:none;
}

/* ---- arrows ---- */
.arrow{
  flex:0 0 auto;
  z-index:var(--z-arrow);
  width:clamp(38px, 4vw, 48px); height:clamp(38px, 4vw, 48px);
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:var(--white);
  border-radius:50%;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.arrow svg{ width:44%; height:44%; }
.arrow:hover{ border-color:var(--ink); transform:scale(1.05); }
.arrow:active{ transform:scale(.96); }

/* ---- stage footer: caption (L) + readout (R) ---- */
.stage__foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem;
  min-width:0;
}
.caption{
  min-width:0;
  transition:opacity .18s var(--ease);
}
.caption.is-swapping{ opacity:0; }
.caption__title{
  margin:0;
  font-size:clamp(1.02rem, 1.4vw, 1.35rem);
  font-weight:600; letter-spacing:-0.01em; line-height:1.2;
  color:var(--ink);
  text-wrap:balance;
}
/* coming-soon chip: gold fill + Ink text (brand rule: gold as a chip, never gold text) */
.caption__soon{
  display:inline-block; vertical-align:middle;
  margin-left:.6rem; padding:.15em .55em;
  background:var(--gold); color:var(--ink);
  border-radius:6px;
  font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  line-height:1.4; white-space:nowrap;
}
.caption__soon[hidden]{ display:none; }
.caption__meta{
  margin:.35rem 0 0;
  font-size:.82rem; font-weight:400; letter-spacing:.02em;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.readout{
  display:inline-flex; align-items:center; gap:1rem;
  flex:0 0 auto;
}
.view-toggle{
  position:relative;
  width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:var(--white);
  border-radius:8px;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.view-toggle:hover{ border-color:var(--ink); }
.view-toggle svg{ width:20px; height:20px; grid-area:1/1; transition:opacity .28s var(--ease), transform .28s var(--ease); }
.view-toggle svg rect{ fill:currentColor; }
.view-toggle__strip{ opacity:0; transform:scale(.8); }
.view-toggle[aria-pressed="true"] .view-toggle__grid{ opacity:0; transform:scale(.8); }
.view-toggle[aria-pressed="true"] .view-toggle__strip{ opacity:1; transform:scale(1); }

.index{
  margin:0;
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:1rem; font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
/* the ONE legible gold moment in the readout: a filled chip, ink text on gold */
.index__chip{
  display:inline-grid; place-items:center;
  min-width:1.9rem; height:1.9rem; padding:0 .35rem;
  background:var(--gold); color:var(--ink);
  font-weight:600; border-radius:6px;
  line-height:1;
}
.index__total{ color:var(--faint); }

/* ============================================================
   CONTACT SHEET (toggled)
   ============================================================ */
.sheet{
  position:absolute; inset:0; z-index:var(--z-sheet);
  display:flex; flex-direction:column; gap:clamp(16px, 2.4vh, 30px);
  padding:clamp(4px, 1vh, 12px) clamp(2px, 1vw, 10px) clamp(12px, 2vh, 24px);
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--paper);
  opacity:0; transform:scale(.98);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
  pointer-events:none;
}
.sheet[hidden]{ display:none; }
.stage.sheet-open .sheet{ opacity:1; transform:none; pointer-events:auto; }
.stage.sheet-open .strip{ opacity:0; transform:scale(.99); pointer-events:none; }

.sheet__group{ display:flex; flex-direction:column; gap:.7rem; }
.sheet__label{
  margin:0; position:sticky; top:0; z-index:1;
  font-family:var(--font-brand); font-weight:500;
  font-size:.92rem; letter-spacing:.005em; line-height:1;
  color:var(--ink);
  background:var(--paper);
  padding:.2rem 0 .4rem;
  box-shadow:0 1px 0 var(--line-soft);
}
.sheet__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));
  gap:clamp(6px, .8vw, 12px);
}

.sheet-cell{
  position:relative; aspect-ratio:3 / 2;
  border:none; padding:0; margin:0;
  background:var(--white); cursor:pointer;
  overflow:hidden; border-radius:2px;
  outline-offset:2px;
}
.sheet-cell__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:filter .2s var(--ease), transform .3s var(--ease);
}
.sheet-cell:hover .sheet-cell__img{ filter:brightness(.94); transform:scale(1.03); }
/* active cell: a gold-and-ink marker ring (graphic, never gold-as-text) */
.sheet-cell[aria-current="true"]{ box-shadow:inset 0 0 0 3px var(--gold), inset 0 0 0 4px var(--ink); }

/* ============================================================
   THE EYE
   ============================================================ */
.eye{
  max-width:60rem;
  margin-inline:auto;
  padding:clamp(64px, 12vh, 140px) var(--pad-x) clamp(48px, 8vh, 96px);
}
.eye__lead{
  margin:0 0 1.4rem;
  font-family:var(--font-brand); font-weight:500;
  font-size:clamp(1.5rem, 3.4vw, 2.6rem);
  letter-spacing:-0.02em; line-height:1;
  color:var(--ink);
}
.eye__body{
  margin:0;
  max-width:62ch;
  font-size:clamp(1.05rem, 1.4vw, 1.35rem);
  line-height:1.62; color:var(--ink);
  text-wrap:pretty;
}
.eye__body--sub{ margin-top:1.4rem; color:var(--muted); }

/* ============================================================
   BOOK
   ============================================================ */
.book{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:clamp(32px, 6vw, 90px);
  align-items:start;
  max-width:78rem; margin-inline:auto;
  padding:clamp(40px, 7vh, 90px) var(--pad-x) clamp(56px, 9vh, 120px);
  border-top:1px solid var(--line-soft);
}
.book__title{
  margin:0 0 1rem;
  font-family:var(--font-brand); font-weight:600;
  font-size:clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing:-0.02em; line-height:1.02;
}
.book__note{
  margin:0 0 1.6rem; max-width:42ch;
  color:var(--muted); font-size:1rem; line-height:1.6;
}
.tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.tag{
  font-size:.78rem; font-weight:500; letter-spacing:.01em;
  color:var(--ink);
  border:1px solid var(--line);
  padding:.4rem .75rem; border-radius:999px;
  background:var(--white);
}

.inquiry{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem 1.2rem;
}
.field{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.field--wide{ grid-column:1 / -1; }
.field label{
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}
.field input, .field textarea{
  width:100%;
  font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  padding:.7rem .8rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:6.5rem; }
.field input::placeholder, .field textarea::placeholder{ color:var(--faint); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(14,14,14,.08);
}

.inquiry__foot{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  margin-top:.3rem;
}
.inquiry__status{
  margin:0; font-size:.85rem; color:var(--muted); min-height:1.2em;
}
.inquiry__status[data-ok="1"]{ color:var(--ink); font-weight:500; }

/* the primary gold moment: filled button, ink text (14:1 contrast) */
.btn-gold{
  appearance:none; border:none; cursor:pointer;
  background:var(--gold); color:var(--ink);
  font-weight:600; font-size:.92rem; letter-spacing:.01em;
  padding:.8rem 1.5rem; border-radius:8px;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.btn-gold:hover{ background:var(--gold-press); }
.btn-gold:active{ transform:translateY(1px); }

/* ============================================================
   FOOTER
   ============================================================ */
.colophon{ border-top:1px solid var(--line-soft); }
.colophon__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  padding:clamp(28px, 4vh, 44px) var(--pad-x);
}
.colophon__mark img{ width:28px; height:28px; }
.colophon__social{ display:inline-flex; gap:clamp(14px, 2.5vw, 30px); flex-wrap:wrap; }
.colophon__social a{
  font-size:.82rem; color:var(--muted); text-decoration:none;
  transition:color .2s var(--ease);
}
.colophon__social a:hover{ color:var(--ink); }
.colophon__meta{
  display:inline-flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  font-size:.8rem; color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.colophon__top{ text-decoration:none; color:var(--muted); }
.colophon__top:hover{ color:var(--ink); }

/* ============================================================
   REVEAL (enhances an already-visible default)
   ============================================================ */
.reveal-armed{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-in{ opacity:1; transform:none; }

/* ============================================================
   CUSTOM CURSOR (progressive: created + positioned by engine.js)
   A small Ink dot that grows into a labeled ring over interactive
   regions. GSAP owns transform (x/y follow, scale, opacity); these
   rules only define the resting shape. Disabled entirely on touch /
   reduced motion / no-GSAP, where the native cursor is never hidden.
   ============================================================ */
.cursor{
  position:fixed; top:0; left:0;
  z-index:var(--z-cursor);
  pointer-events:none;
  will-change:transform;
}
.cursor__ring, .cursor__dot, .cursor__label{
  position:absolute; top:0; left:0;   /* GSAP centers each on the point (xPercent/yPercent -50) */
}
.cursor__ring{
  width:44px; height:44px;
  border:1.5px solid var(--ink);
  border-radius:50%;
}
.cursor__dot{
  width:8px; height:8px;
  background:var(--ink);
  border-radius:50%;
}
.cursor__label{
  font-family:var(--font-body);
  font-size:.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink);          /* Ink text on Paper; never gold-as-text on light */
  white-space:nowrap;
}

/* Hide the native cursor only where the custom one covers, and only once
   engine.js has confirmed the guards pass (adds .has-cursor to <html>).
   Form fields keep the native I-beam so typing affordances stay obvious. */
html.has-cursor, html.has-cursor *{ cursor:none !important; }
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select,
html.has-cursor [contenteditable]{ cursor:auto !important; }

/* Hard guards: even if JS lags, touch + reduced-motion always keep a native
   cursor and hide the custom element. Never leave a user with no cursor. */
@media (hover: none), (pointer: coarse){
  .cursor{ display:none !important; }
  html.has-cursor, html.has-cursor *{ cursor:auto !important; }
}
@media (prefers-reduced-motion: reduce){
  .cursor{ display:none !important; }
  html.has-cursor, html.has-cursor *{ cursor:auto !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  :root{ --frame-h: clamp(300px, 52vh, 480px); --active-w: min(calc(var(--frame-h) * 1.5), 60vw); --sliver-w: clamp(34px, 6.5vw, 70px); }
  .book{ grid-template-columns:1fr; gap:clamp(28px, 5vh, 48px); }
}

@media (max-width: 560px){
  :root{
    --frame-h: clamp(300px, 54vh, 460px);
    --active-w: 76vw;              /* one frame with peeking slivers */
    --sliver-w: 9vw;
    --strip-gap:6px;
  }
  .arrow{ display:none; }                 /* swipe/keys/sheet drive mobile; frame gets full width */
  .stage__foot{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .readout{ align-self:stretch; justify-content:space-between; }
  .inquiry{ grid-template-columns:1fr; }
  .inquiry__foot{ justify-content:flex-start; }
  .btn-gold{ width:100%; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .slide{ will-change:auto; }
  .caption{ transition:opacity 1ms linear; }
  .strip, .strip.is-live{ transition:none; }
  .sheet{ transition:opacity 120ms linear; transform:none; }
  .stage.sheet-open .strip{ transform:none; }
  .sheet-cell__img{ transition:none; }
  .sheet-cell:hover .sheet-cell__img{ transform:none; }
  .view-toggle svg{ transition:opacity 120ms linear; transform:none; }
  .reveal-armed{ transition:opacity 200ms linear; transform:none; }
  .nav a::after{ transition:none; }
  .arrow, .btn-gold{ transition:none; }
}