/* ============================================================================
   Follow the Builds · site.css
   The scrollcraft engine css is the floor; this is the brand. Choreography for
   the layered scenes is pure CSS driven by the engine's --sc-p (0..1 per act).
   ========================================================================== */

:root {
  /* Brand: the logo's yellow on a shop-floor off-black. One hue of accent,
     two lightnesses (paper grounds need the deep stop for text). */
  --sc-canvas:     #141210;
  --sc-surface:    #1f1c18;
  --sc-ink:        #f1ebdd;
  --sc-ink-soft:   #b7ad9a;
  --sc-accent:     #ffc900;
  --sc-accent-ink: #141210;
  --accent-deep:   #7a5b00;
  --paper:         #efe8da;
  --paper-2:       #e4dccb;
  --paper-ink:     #1b1815;
  --paper-soft:    #574f44;
  --green:         #16211b;
  --steel:         #2a2723;

  --sc-font-display: "League Gothic", "Oswald", "Arial Narrow", sans-serif;
  --sc-font-text:    "Barlow", system-ui, sans-serif;
  --sc-font-mono:    "Barlow", system-ui, sans-serif;
  --sc-track-tight:  0.004em;
  --sc-track-snug:   0.006em;
  --sc-shadow-color: 30 30% 3%;
  --r: 4px;
  --bar-h: 64px;
}

body { background: var(--sc-canvas); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--sc-accent); color: var(--sc-accent-ink); padding: 10px 14px; border-radius: var(--r); font-weight: 700; }
.skip:focus { top: 12px; }
[data-sc-progress] { display: none; } /* the tach is the progress */

/* ------------------------------------------------------------- shared type */
.tag {
  margin: 0;
  font: 600 var(--sc-t-xs)/1.2 var(--sc-font-text);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-accent);
}
.tag--ink { color: var(--accent-deep); }
.caption { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); color: var(--paper-soft); }
.caption--light { color: var(--sc-ink-soft); }
.price { font-variant-numeric: tabular-nums; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 700 0.95rem/1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--sc-e1), inset 0 1px 0 rgb(255 255 255 / .35);
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #ffd83d; } }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { background: #6d6556; color: #2a2621; cursor: not-allowed; box-shadow: none; }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: .8rem; }
.btn--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1.5px var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: rgb(241 235 221 / .08); } }
.btn--block { width: 100%; }
.textlink {
  font-weight: 600; color: inherit; text-decoration: underline;
  text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: .3em;
  transition: text-decoration-color 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .textlink:hover { text-decoration-color: currentColor; } }

/* ---------------------------------------------------------------- the bar */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 80; height: var(--bar-h);
  display: flex; align-items: center; gap: var(--sc-5);
  padding-inline: clamp(12px, 3vw, 32px);
  background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
  color: var(--sc-ink);
  box-shadow: 0 1px 0 rgb(255 201 0 / .9), 0 4px 0 -1px var(--sc-canvas), 0 5px 0 -1px rgb(255 201 0 / .5);
}
.bar__mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.bar__mark img { width: 34px; height: auto; }
.bar__mark span { font: 400 1.65rem/1 var(--sc-font-display); letter-spacing: .02em; text-transform: uppercase; }
.bar__nav { display: flex; gap: clamp(12px, 2vw, 28px); margin-left: auto; }
.bar__nav a { color: inherit; text-decoration: none; font-weight: 600; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; padding: 8px 2px; border-bottom: 2px solid transparent; transition: border-color 140ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover { border-color: var(--sc-accent); } }
.bar__nav a[aria-current="page"] { border-color: var(--sc-accent); }
.bar__end { display: flex; align-items: center; gap: 12px; }
.cart-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r); background: transparent; color: inherit; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .cart-btn:hover { background: rgb(241 235 221 / .08); } }
.cart-btn__n { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--sc-accent); color: var(--sc-accent-ink); font: 700 .72rem/19px var(--sc-font-text); text-align: center; }
@media (max-width: 760px) {
  .bar__nav a:not([href$="shop.html"]) { display: none; }
  .bar__cta { display: none; }
  .bar__mark span { font-size: 1.35rem; }
}

/* ================================================================= GEAR N ==
   The shop door. Planes, back to front:
   plate (inpainted, blurred) < "One hour at a time" < shell cutout < dust
   < jambs + lintel < yellow roll-up door < copy.
   Plate and shell share one box and one pivot (the tyre contact line), and the
   shell always scales faster than the plate, so the inpainted hole behind it
   can never be exposed.                                                     */
.act-door { --p: var(--sc-p, 0); --door: min(calc(var(--p) / 0.5), 1); background: #0c0b0a; }
.door-stage { background: #0c0b0a; }
.scene {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, calc(100svh * 1.532));
  aspect-ratio: 2500 / 1632;
  translate: -50% -50%;
  pointer-events: none;
}
.scene > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.scene--shell { --ax: 64.3%; --ay: 95.8%; translate: -54% -46%; }
.scene--shell .scene__plate {
  transform-origin: var(--ax) var(--ay);
  transform: scale(calc(1.03 + var(--p) * 0.05));
  filter: brightness(.66) saturate(.9);
}
.scene--shell .scene__subject {
  transform-origin: var(--ax) var(--ay);
  transform: scale(calc(1.03 + var(--p) * 0.17));
  filter: brightness(.92);
}
.door-beat {
  position: absolute; z-index: 2; margin: 0;
  left: var(--sc-gutter); top: calc(var(--bar-h) + 5svh);
  font: 400 clamp(4rem, 12.5vw, 13rem)/.86 var(--sc-font-display);
  text-transform: uppercase; color: var(--sc-ink);
  transform: translate3d(0, calc(var(--p) * -4svh), 0);
}
.door-beat span { display: block; }
.scene--front { z-index: 3; }
.dust { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.jamb {
  position: absolute; top: 0; bottom: 0; z-index: 6; width: 6.5vw; min-width: 28px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / .06), transparent 30%, rgb(0 0 0 / .35) 100%),
    repeating-linear-gradient(180deg, #2c2925 0 3px, #26231f 3px 7px);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .4);
}
.jamb--l { left: 0; transform: translate3d(calc(var(--door) * -100%), 0, 0) scaleY(calc(1 + var(--p) * .08)); }
.jamb--r { right: 0; transform: translate3d(calc(var(--door) * 100%), 0, 0) scaleY(calc(1 + var(--p) * .08)); background: linear-gradient(270deg, rgb(255 255 255 / .06), transparent 30%, rgb(0 0 0 / .35) 100%), repeating-linear-gradient(180deg, #2c2925 0 3px, #26231f 3px 7px); }
.lintel {
  position: absolute; left: 0; right: 0; top: 0; z-index: 8; height: calc(var(--bar-h) + 2svh);
  background: linear-gradient(180deg, #1c1a17, #2a2622);
  box-shadow: 0 6px 14px -6px rgb(0 0 0 / .7);
  transform: translate3d(0, calc(var(--door) * -100%), 0);
}
.door {
  position: absolute; z-index: 7; left: 0; right: 0; top: 0;
  height: 60svh;
  transform: translate3d(0, calc(var(--door) * -112%), 0);
  box-shadow: 0 22px 40px -12px rgb(0 0 0 / .75);
}
.door__slats {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(0 0 0 / .18), transparent 12%, transparent 88%, rgb(0 0 0 / .22)),
    repeating-linear-gradient(180deg,
      #ffc900 0 30px, #f0b800 30px 33px, #8a6a00 33px 34px, #ffe066 34px 36px, #ffc900 36px 38px);
}
.door__paint {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 17%;
  color: var(--sc-accent-ink);
}
.door__title {
  margin: 0;
  font: 400 clamp(3.6rem, 11.5vw, 11rem)/.84 var(--sc-font-display);
  letter-spacing: .01em; text-transform: uppercase;
  text-wrap: balance;
}
.door__stencil { margin: .6em 0 0; font: 700 clamp(.78rem, 1.1vw, 1rem)/1.2 var(--sc-font-text); letter-spacing: .28em; text-transform: uppercase; }
.door__rail { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: linear-gradient(#3a352e, #1a1815); }
.door__handle { position: absolute; left: 50%; top: -14px; width: 84px; height: 10px; margin-left: -42px; border-radius: 2px; background: linear-gradient(#5b554c, #2f2b26); box-shadow: 0 2px 3px rgb(0 0 0 / .5); }
.door-scrim { z-index: 9; }
.door-copy { position: absolute; z-index: 10; left: var(--sc-gutter); bottom: clamp(2rem, 8svh, 5.5rem); max-width: min(34rem, 80vw); }
.door-copy__lede { margin: 0 0 var(--sc-5); font-size: var(--sc-t-lg); line-height: 1.4; font-weight: 500; text-wrap: pretty; }
.door-copy__ctas { display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; }

/* ================================================================ GEAR 1 == */
.act-stall { background: var(--sc-canvas); }
.stall { background: var(--sc-canvas); }
.stall__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(241 235 221 / .07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(241 235 221 / .07) 1px, transparent 1px),
    linear-gradient(rgb(241 235 221 / .03) 1px, transparent 1px),
    linear-gradient(90deg, rgb(241 235 221 / .03) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  mask-image: radial-gradient(120% 90% at 30% 55%, #000 30%, transparent 85%);
}
.stall__q { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); top: 50%; margin: 0; translate: 0 -50%; max-width: 62rem; }
.stall__line {
  margin: var(--sc-4) 0 0;
  font: 400 clamp(2.8rem, 7vw, 7rem)/.92 var(--sc-font-display);
  text-transform: uppercase; color: var(--sc-ink); text-wrap: balance;
}
.stall__turn {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); top: 50%; translate: 0 -50%; margin: 0;
  max-width: 60rem;
  font: 400 clamp(2.8rem, 7vw, 7rem)/.92 var(--sc-font-display); text-transform: uppercase;
}
.stall__turn em { font-style: normal; color: var(--sc-accent); display: block; }

/* ================================================================ GEAR 2 ==
   Hard cut to paper. Restate `color` with the tokens (inherited computed value). */
.ground-paper {
  --sc-canvas: var(--paper); --sc-ink: var(--paper-ink); --sc-ink-soft: var(--paper-soft);
  --sc-hairline: rgb(27 24 21 / .14);
  background: var(--paper); color: var(--paper-ink);
  position: relative; z-index: 2;
}
.ground-paper ::selection { background: var(--sc-accent); color: var(--paper-ink); }
.ground-paper .sc-body { color: var(--paper-soft); }
.origin {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 6rem); row-gap: var(--sc-6); align-items: start;
}
.origin__text { grid-row: span 2; padding-top: var(--sc-4); }
.origin__title {
  font: 400 clamp(3.2rem, 7.4vw, 7.6rem)/.88 var(--sc-font-display);
  text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; margin-top: var(--sc-5) !important;
}
.origin__lede { font-size: var(--sc-t-lg); line-height: 1.45; font-weight: 500; max-width: 40ch; margin: 0; text-wrap: pretty; }
.origin__sign {
  display: inline-block; margin-top: var(--sc-6) !important;
  font: 400 clamp(2rem, 3.4vw, 3rem)/1 var(--sc-font-display); text-transform: uppercase;
  background: linear-gradient(transparent 58%, var(--sc-accent) 58%, var(--sc-accent) 92%, transparent 92%);
  padding-inline: .1em;
}
.origin__media { margin: 0; }
.origin__frame { overflow: hidden; border-radius: var(--r); box-shadow: var(--sc-e3); background: var(--paper-2); }
.origin__frame img { width: 100%; height: auto; transform-origin: 50% 50%; scale: 1.12; }
.origin__media--small { width: 72%; margin: -14% 0 0 -4%; position: relative; z-index: 1; }
.origin__media--small .origin__frame { outline: 8px solid var(--paper); }
.origin__media--small img { scale: 1; }

/* ================================================================ GEAR 3 == */
.act-hour { background: var(--green); }
.hour {
  background: var(--green);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center;
  column-gap: clamp(2rem, 6vw, 6rem);
  padding: calc(var(--bar-h) + 2svh) var(--sc-gutter) 4svh;
}
.hour__title { margin: 0; font: 400 clamp(3rem, 6.6vw, 6.4rem)/.9 var(--sc-font-display); text-transform: uppercase; }
.hour__lede { margin: var(--sc-4) 0 var(--sc-6); max-width: 36ch; font-size: var(--sc-t-lg); line-height: 1.42; color: var(--sc-ink); }
.phases { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.phase {
  display: grid; grid-template-columns: 4.4rem 9rem 1fr; align-items: baseline; gap: var(--sc-4);
  padding: var(--sc-4) 0; border-bottom: 1px solid var(--sc-hairline);
}
.phase__min { font: 400 3.2rem/1 var(--sc-font-display); color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.phase__name { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; }
.phase__what { color: var(--sc-ink-soft); }
.hour__dial { display: grid; justify-items: center; text-align: center; gap: var(--sc-3); }
.dial { width: min(40vw, 54svh, 460px); height: auto; overflow: visible; }
.dial__bezel { fill: #0f1712; stroke: #3a463c; stroke-width: 2; }
.dial__track { fill: none; stroke: rgb(241 235 221 / .08); stroke-width: 12; }
.dial__arc {
  fill: none; stroke-width: 12; stroke-dasharray: var(--len) 60; stroke-dashoffset: calc(var(--a) * -1);
  transform: rotate(-90deg); transform-origin: 100px 100px; transform-box: view-box;
}
.dial__arc--plan { stroke: var(--sc-ink-soft); }
.dial__arc--focus { stroke: var(--sc-accent); }
.dial__arc--sweep { stroke: var(--sc-ink); }
.dial__ticks line { stroke: rgb(241 235 221 / .5); stroke-width: .8; }
.dial__ticks line.is-major { stroke: var(--sc-ink); stroke-width: 1.6; }
.dial__ticks text { fill: var(--sc-ink-soft); font: 400 9px var(--sc-font-display); text-anchor: middle; dominant-baseline: central; }
.dial__hand { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(calc(min(calc(var(--sc-p, 0) / .64), 1) * 360deg)); }
.dial__hand line { stroke: var(--sc-ink); stroke-width: 2.4; stroke-linecap: round; }
.dial__hand circle { fill: var(--sc-accent); }
.dial__read { margin: var(--sc-3) 0 0; font: 400 clamp(2.6rem, 5vw, 4.4rem)/1 var(--sc-font-display); text-transform: uppercase; }
.dial__n { color: var(--sc-accent); }
.dial__sub { margin: 0 0 var(--sc-3); color: var(--sc-ink-soft); max-width: 30ch; }
.hour .btn--ghost { position: relative; }

/* ================================================================ GEAR 4 ==
   The peak. Plate and car share a pivot at the tyre contact line; the car grows
   faster than the plate, so it drives toward you through the words.         */
.act-drive { --p: var(--sc-p, 0); --in: min(calc(var(--p) / 0.2), 1); background: #0d0c0b; }
.drive { background: #0d0c0b; }
.scene--fastback {
  --ax: 55.6%; --ay: 87.6%; --w: 118vw;
  width: var(--w); aspect-ratio: 2500 / 1147; translate: none;
  left: calc(50vw - var(--w) * .556);
  top: calc(86svh - var(--w) / 2.18 * .876);
}
.scene--fastback .scene__plate {
  transform-origin: var(--ax) var(--ay);
  transform: scale(calc(.985 + var(--p) * .035));
  opacity: var(--in);
  filter: brightness(.72) saturate(.85);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 78%, transparent 100%);
}
.scene--fastback .scene__subject {
  transform-origin: var(--ax) var(--ay);
  transform: scale(calc(.985 + var(--p) * .13));
  opacity: var(--in);
}
.scene__glint {
  position: absolute; inset: 0; overflow: hidden;
  transform-origin: var(--ax) var(--ay);
  transform: scale(calc(.985 + var(--p) * .13));
  mask: url("../img/peak-fastback-subject.webp") center / 100% 100% no-repeat;
  -webkit-mask: url("../img/peak-fastback-subject.webp") center / 100% 100% no-repeat;
  mix-blend-mode: screen; opacity: .55;
}
.scene__glint::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(100deg, transparent 0, rgb(255 244 214 / .55) 50%, transparent 100%);
  transform: translate3d(calc(-110% + var(--p) * 360%), 0, 0) skewX(-12deg);
}
.drive__word {
  position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--bar-h) + 3svh); margin: 0;
  display: flex; justify-content: center; gap: .16em;
  font: 400 clamp(5rem, 15vw, 18rem)/.84 var(--sc-font-display); text-transform: uppercase;
  color: var(--sc-ink);
  opacity: min(calc(var(--p) / 0.08), 1);
  transform: translate3d(0, calc(var(--p) * -1.5svh), 0);
}
.drive__word span:last-child { color: var(--sc-accent); }
.drive-scrim { z-index: 4; opacity: calc(var(--in) * .9); }
.drive__copy { position: absolute; z-index: 5; left: var(--sc-gutter); bottom: clamp(1.5rem, 6svh, 4.5rem); max-width: 36rem; }
.drive__lede { margin: 0; font-size: var(--sc-t-lg); line-height: 1.42; font-weight: 500; text-wrap: pretty; }

/* ================================================================ CRUISE == */
.act-garage { background: var(--sc-canvas); }
.garage { background: var(--sc-canvas); display: flex; align-items: center; }
.rail { gap: clamp(1.5rem, 3vw, 3rem); padding: calc(var(--bar-h) + 2rem) var(--sc-gutter) 2rem; align-items: center; }
.rail__lead { flex: 0 0 clamp(16rem, 24vw, 22rem); }
.rail__title { margin: 0 0 var(--sc-4); font: 400 clamp(3rem, 6vw, 6rem)/.9 var(--sc-font-display); text-transform: uppercase; }
.rail__lead .sc-body { margin-bottom: var(--sc-5); }
.lot { flex: 0 0 clamp(17rem, 30vw, 27rem); margin: 0; }
.lot__img { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--sc-surface); box-shadow: var(--sc-e2); padding: 0; border: 0; }
.lot__img img { width: 100%; height: 100%; object-fit: cover; }
.lot__name { margin: var(--sc-4) 0 var(--sc-1); font: 400 2rem/1 var(--sc-font-display); text-transform: uppercase; }
.lot__label { margin: 0; color: var(--sc-ink-soft); }
.lot__label a { color: var(--sc-ink); }
.yt { position: relative; cursor: pointer; }
.yt__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; margin: -25px 0 0 -36px; border-radius: 10px; background: var(--sc-accent); box-shadow: var(--sc-e2); transition: transform 140ms var(--sc-ease-out); }
.yt__play::after { content: ""; position: absolute; left: 29px; top: 15px; border: 10px solid transparent; border-left: 16px solid var(--sc-accent-ink); border-right: 0; }
@media (hover: hover) and (pointer: fine) { .yt:hover .yt__play { transform: scale(1.06); } }
.yt iframe { width: 100%; height: 100%; border: 0; }

/* =============================================================== KEY OFF == */
.act-keyoff { padding-top: var(--sc-section); }
.keyoff { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.keyoff__title { font: 400 clamp(3.4rem, 8vw, 8rem)/.86 var(--sc-font-display); text-transform: uppercase; }
.signup { margin-top: var(--sc-6) !important; max-width: 34rem; }
.signup__label { display: block; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin-bottom: var(--sc-2); }
.signup__row { display: flex; gap: var(--sc-2); }
.signup input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 14px;
  border: 1.5px solid var(--paper-ink); border-radius: var(--r); background: #f8f3e8; color: var(--paper-ink);
}
.signup input::placeholder { color: #8b8274; }
.signup input:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 2px; }
.signup__msg { min-height: 1.6em; margin: var(--sc-3) 0 0; color: var(--paper-soft); }
.keyoff__h3 { margin: 0 0 var(--sc-4); font: 400 2.4rem/1 var(--sc-font-display); text-transform: uppercase; }
.minishop { list-style: none; margin: 0 0 var(--sc-5); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-4); }
.minishop a { display: grid; gap: 4px; text-decoration: none; color: inherit; font-weight: 600; font-size: .92rem; line-height: 1.25; }
.minishop img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); background: #fff; margin-bottom: 6px; transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .minishop a:hover img { transform: translateY(-3px); } }
.minishop .price { font-weight: 500; color: var(--paper-soft); }
.keyoff__sign {
  grid-column: 1 / -1; margin: var(--sc-8) 0 0; padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline);
  font: 400 clamp(2.6rem, 6vw, 5.6rem)/.9 var(--sc-font-display); text-transform: uppercase;
}
.foot {
  display: flex; flex-wrap: wrap; gap: var(--sc-6) clamp(2rem, 6vw, 5rem); align-items: flex-start;
  max-width: var(--sc-maxw); margin: var(--sc-7) auto 0; padding: var(--sc-6) var(--sc-gutter) calc(var(--sc-8) + 150px);
  font-size: var(--sc-t-sm);
}
.foot__id { display: flex; gap: 12px; align-items: flex-start; margin-right: auto; }
.foot__id img { width: 36px; height: auto; }
.foot__id p { margin: 0; line-height: 1.5; }
.foot__nav, .foot__social { display: flex; flex-direction: column; gap: 6px; }
.foot a { color: inherit; }

/* ===================================================== THE CLUSTER (signature)
   Scroll is the throttle. Needle and knob are written by site.js.          */
.cluster {
  position: fixed; z-index: 70; right: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px; border-radius: 10px;
  background: #11100e; color: var(--sc-ink);
  box-shadow: var(--sc-e3), inset 0 1px 0 rgb(255 255 255 / .07), inset 0 0 0 1px rgb(255 255 255 / .05);
  transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out);
}
.cluster.is-parked { opacity: 0; transform: translateY(12px); pointer-events: none; }
.cluster__tach { position: relative; width: 104px; height: 104px; flex: none; }
.tach { width: 100%; height: 100%; }
.tach__face { fill: #0b0a09; stroke: #3b3731; stroke-width: 2.5; }
.tach__red { fill: none; stroke: var(--sc-accent); stroke-width: 6; }
.tach__ticks line { stroke: var(--sc-ink); stroke-width: 1.4; }
.tach__ticks line.is-minor { stroke-width: .8; opacity: .55; }
.tach__ticks text { fill: var(--sc-ink); font: 400 11px var(--sc-font-display); text-anchor: middle; dominant-baseline: central; }
.tach__needle { transform-box: view-box; transform-origin: 60px 60px; }
.tach__needle line { stroke: #ff7a3d; stroke-width: 2.6; stroke-linecap: round; }
.tach__hub { fill: #2c2925; stroke: #57514a; }
.cluster__gear { position: absolute; left: 50%; top: 67%; translate: -50% -50%; font: 400 1.5rem/1 var(--sc-font-display); color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.cluster__rpm { position: absolute; left: 50%; top: 33%; translate: -50% -50%; font: 600 .42rem/1 var(--sc-font-text); letter-spacing: .12em; color: var(--sc-ink-soft); white-space: nowrap; }
.cluster__lamp { position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #3a2f10; box-shadow: inset 0 1px 2px rgb(0 0 0 / .6); transition: background-color 90ms linear; }
.cluster__lamp.is-on { background: var(--sc-accent); box-shadow: inset 0 -1px 2px rgb(0 0 0 / .3), 0 2px 6px -1px rgb(255 201 0 / .6); }
.cluster__timer { position: absolute; left: 50%; bottom: -4px; translate: -50% 100%; padding: 3px 7px; border-radius: 3px; background: var(--sc-accent); color: var(--sc-accent-ink); font: 700 .7rem/1 var(--sc-font-text); letter-spacing: .06em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gate { position: relative; width: 96px; height: 64px; flex: none; }
.gate__slots { position: absolute; inset: 0; overflow: visible; }
.gate__slots path { fill: none; stroke: #3d3832; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.gate__knob { fill: var(--sc-ink); stroke: #11100e; stroke-width: 2; }
.gate__g {
  position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); translate: -50% -50%;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 400 1rem/1 var(--sc-font-display); color: var(--sc-ink-soft); text-decoration: none;
  transition: color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.gate__g[style*="--y:8"] { top: -6px; }
.gate__g[style*="--y:56"] { top: 70px; }
@media (hover: hover) and (pointer: fine) { .gate__g:hover { color: var(--sc-accent); background: rgb(255 201 0 / .1); } }
.gate__g.is-on { color: var(--sc-accent); }
.cluster__where { position: absolute; right: 14px; bottom: calc(100% + 6px); margin: 0; font: 700 .68rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); background: #11100e; padding: 5px 8px; border-radius: 4px; box-shadow: var(--sc-e1); opacity: 0; transition: opacity 200ms var(--sc-ease-out); pointer-events: none; }
.cluster__where.is-on { opacity: 1; }
.cluster { padding-block: 16px; }

@media (max-width: 760px) {
  .cluster { right: 12px; bottom: 12px; padding: 6px; gap: 0; border-radius: 50%; }
  .cluster__tach { width: 68px; height: 68px; }
  .tach__ticks text { display: none; }
  .cluster__rpm { display: none; }
  .cluster__gear { top: 64%; font-size: 1.2rem; }
  .gate { position: absolute; right: 0; bottom: calc(100% + 10px); width: 140px; height: 100px; padding: 18px 22px; background: #11100e; border-radius: 10px; box-shadow: var(--sc-e3); display: none; }
  .gate__slots { inset: 18px 22px; width: 96px; height: 64px; }
  .gate__g { margin: 18px 0 0 22px; width: 34px; height: 34px; }
  .cluster.is-open .gate { display: block; }
}

/* ============================================================ CART DRAWER == */
.drawer-scrim { position: fixed; inset: 0; z-index: 120; background: rgb(8 7 6 / .55); opacity: 0; pointer-events: none; transition: opacity 240ms var(--sc-ease-out); }
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; z-index: 130; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--paper-ink);
  box-shadow: -20px 0 50px -20px rgb(0 0 0 / .6);
  transform: translate3d(104%, 0, 0); transition: transform 300ms var(--sc-ease-drawer);
  visibility: hidden;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgb(27 24 21 / .14); }
.drawer__title { margin: 0; font: 400 2rem/1 var(--sc-font-display); text-transform: uppercase; }
.drawer__x { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 1.6rem; cursor: pointer; border-radius: var(--r); }
.drawer__x:hover { background: rgb(27 24 21 / .06); }
.drawer__body { flex: 1; overflow: auto; padding: 8px 20px; }
.drawer__empty { color: var(--paper-soft); padding: 24px 0; }
.line { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgb(27 24 21 / .1); align-items: start; }
.line img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r); background: #fff; }
.line__name { margin: 0; font-weight: 700; line-height: 1.25; }
.line__opts { margin: 2px 0 8px; color: var(--paper-soft); font-size: .88rem; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid rgb(27 24 21 / .3); border-radius: var(--r); }
.qty button { width: 34px; height: 32px; border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; color: inherit; }
.qty button:hover { background: rgb(27 24 21 / .06); }
.qty span { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.line__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.line__rm { display: block; margin-top: 6px; border: 0; background: none; padding: 0; color: var(--paper-soft); text-decoration: underline; cursor: pointer; font-size: .82rem; }
.drawer__foot { padding: 16px 20px 22px; border-top: 1px solid rgb(27 24 21 / .14); }
.drawer__sum { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; }
.drawer__note { margin: 0 0 14px; color: var(--paper-soft); font-size: .85rem; }
.drawer__msg { margin: 10px 0 0; font-size: .9rem; color: #7a2e12; }
.drawer .btn:focus-visible { outline-color: var(--paper-ink); }
.toast { position: fixed; z-index: 140; left: 50%; bottom: 24px; translate: -50% 0; padding: 12px 16px; border-radius: var(--r); background: var(--paper-ink); color: var(--paper); font-weight: 600; box-shadow: var(--sc-e3); opacity: 0; transform: translateY(8px); transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out); pointer-events: none; }
.toast.is-on { opacity: 1; transform: none; }

/* ============================================================ INNER PAGES == */
.page { padding-top: var(--bar-h); }
.page-head { padding: clamp(3rem, 8vw, 7rem) var(--sc-gutter) clamp(2rem, 4vw, 3.5rem); max-width: var(--sc-maxw); margin: 0 auto; }
.page-head__title { margin: 0; font: 400 clamp(3.6rem, 10vw, 9rem)/.84 var(--sc-font-display); text-transform: uppercase; }
.page-head__lede { margin: var(--sc-4) 0 0; max-width: 46ch; font-size: var(--sc-t-lg); line-height: 1.42; }

/* shop: a catalog. Every object carries the same label schema. */
.catalog { list-style: none; margin: 0 auto; padding: 0 var(--sc-gutter) var(--sc-9); max-width: var(--sc-maxw); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 3vw, 2.5rem); }
.obj { grid-column: span 4; }
.obj:nth-child(5n+1) { grid-column: span 7; }
.obj:nth-child(5n+2) { grid-column: span 5; margin-top: 18%; }
.obj__open { display: block; width: 100%; padding: 0; border: 0; background: #fff; border-radius: var(--r); overflow: hidden; cursor: pointer; box-shadow: var(--sc-e2); }
.obj__open img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform 300ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .obj__open:hover img { transform: scale(1.03); } }
.obj__label { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; margin-top: var(--sc-4); }
.obj__name { margin: 0; font: 400 clamp(1.8rem, 2.6vw, 2.4rem)/.95 var(--sc-font-display); text-transform: uppercase; }
.obj__price { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.obj__facts { grid-column: 1 / -1; margin: 4px 0 0; color: var(--sc-ink-soft); font-size: .95rem; }
.swatches { display: flex; gap: 6px; margin-top: 10px; grid-column: 1 / -1; }
.swatch { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }

/* product sheet (dialog) */
.sheet { width: min(1080px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: 8px; background: var(--paper); color: var(--paper-ink); box-shadow: var(--sc-e3); overflow: auto; }
.sheet::backdrop { background: rgb(8 7 6 / .6); }
.sheet[open] { animation: sheet-in 260ms var(--sc-ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.sheet__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.sheet__media { background: #fff; position: sticky; top: 0; align-self: start; }
.sheet__main { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.thumbs { display: flex; gap: 6px; padding: 10px; overflow-x: auto; background: var(--paper-2); }
.thumbs button { flex: none; width: 58px; height: 58px; padding: 0; border: 2px solid transparent; border-radius: var(--r); background: #fff; cursor: pointer; overflow: hidden; }
.thumbs button[aria-current="true"] { border-color: var(--paper-ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.sheet__info { padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 16px; }
.sheet__x { position: absolute; right: 10px; top: 10px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); color: var(--paper-ink); font-size: 1.5rem; cursor: pointer; box-shadow: var(--sc-e1); }
.sheet__title { margin: 0; padding-right: 40px; font: 400 clamp(2.4rem, 4vw, 3.4rem)/.9 var(--sc-font-display); text-transform: uppercase; }
.sheet__price { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; }
.sheet__facts { margin: 0; color: var(--paper-soft); }
.opt { border: 0; margin: 0; padding: 0; }
.opt legend { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; margin-bottom: 8px; padding: 0; }
.opt legend span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--paper-soft); font-size: .9rem; margin-left: 6px; }
.opt__row { display: flex; flex-wrap: wrap; gap: 8px; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt label { min-width: 48px; min-height: 42px; padding: 0 12px; display: inline-grid; place-items: center; border: 1.5px solid rgb(27 24 21 / .28); border-radius: var(--r); cursor: pointer; font-weight: 600; transition: border-color 120ms var(--sc-ease-out), background-color 120ms var(--sc-ease-out); }
.opt label:hover { border-color: var(--paper-ink); }
.opt input:checked + label { border-color: var(--paper-ink); background: var(--paper-ink); color: var(--paper); }
.opt input:focus-visible + label { outline: 2px solid var(--paper-ink); outline-offset: 2px; }
.opt label.is-color { gap: 8px; grid-auto-flow: column; }
.opt label .dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); }
.sheet__add { display: flex; gap: 10px; align-items: stretch; }
.sheet .qty { border-color: rgb(27 24 21 / .35); }
.sheet .qty button { height: 46px; }
.sheet details { border-top: 1px solid rgb(27 24 21 / .14); padding-top: 12px; }
.sheet summary { cursor: pointer; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; }
.sheet details ul { margin: 10px 0 0; padding-left: 18px; color: var(--paper-soft); font-size: .92rem; }
.sheet table { margin-top: 10px; border-collapse: collapse; font-size: .88rem; width: 100%; }
.sheet th, .sheet td { padding: 6px 8px; border-bottom: 1px solid rgb(27 24 21 / .1); text-align: left; }
.sheet .btn:focus-visible { outline-color: var(--paper-ink); }

/* how-to */
.guides { max-width: var(--sc-maxw); margin: 0 auto; padding: 0 var(--sc-gutter) var(--sc-9); display: grid; gap: clamp(3rem, 7vw, 6rem); }
.guide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.guide:nth-child(even) .guide__media { order: 2; }
.guide__media { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--sc-e2); }
.guide__media img { width: 100%; height: auto; }
.guide__title { margin: 8px 0 12px; font: 400 clamp(2.4rem, 4.4vw, 4rem)/.9 var(--sc-font-display); text-transform: uppercase; }
.guide p { max-width: 52ch; }
.guide .btn { margin-top: 8px; }
.disclose { max-width: var(--sc-maxw); margin: 0 auto; padding: 0 var(--sc-gutter) var(--sc-8); color: var(--sc-ink-soft); font-size: .85rem; }
.page .foot { color: var(--sc-ink); }

/* ================================================================= MOBILE == */
@media (max-width: 860px) {
  /* Phone art direction: the shell sits low, whole enough to read as a car;
     the dark bay above it carries the type. */
  .scene--shell { --sw: 205vw; width: var(--sw); translate: none; left: calc(50vw - var(--sw) * .6); top: calc(100svh - var(--sw) / 1.532 - 6svh); }
  .scene--shell .scene__plate { mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  .door-copy, .drive__copy { bottom: 96px; }
  .drive-scrim { inset: auto 0 0 0; height: 36svh; }
  /* Copy spans the full width on a phone: a band, denser, only under the copy. */
  .door-scrim { inset: auto 0 0 0; height: 52svh; background: linear-gradient(to top, rgb(12 11 10 / .96) 0%, rgb(12 11 10 / .86) 45%, rgb(12 11 10 / .4) 75%, transparent 100%); }
  .cluster__where { right: calc(100% + 8px); bottom: 50%; translate: 0 50%; }
  .door { height: 50svh; }
  .door__paint { bottom: 16%; }
  .door-beat { z-index: 5; top: calc(var(--bar-h) + 3svh); font-size: 21vw; }
  .jamb { width: 18px; min-width: 0; }
  .door-copy { right: var(--sc-gutter); max-width: none; }
  .stall__line, .stall__turn { font-size: clamp(2.5rem, 11vw, 4rem); }
  .origin { grid-template-columns: 1fr; }
  .origin__text { grid-row: auto; }
  .origin__media--small { width: 70%; margin: -20% 0 0 auto; }
  .hour { grid-template-columns: 1fr; align-content: center; row-gap: var(--sc-5); padding-top: calc(var(--bar-h) + 1rem); }
  .hour__lede { margin-bottom: var(--sc-4); font-size: var(--sc-t-base); }
  .phase { grid-template-columns: 3rem 1fr; padding: 8px 0; }
  .phase__min { font-size: 2.2rem; }
  .phase__what { grid-column: 2; font-size: .9rem; }
  .hour__dial { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: var(--sc-4); align-items: center; }
  .dial { width: 34vw; grid-row: span 3; }
  .dial__read { font-size: 2.2rem; margin: 0; }
  .dial__sub { font-size: .88rem; margin: 0; }
  .hour .btn--ghost { grid-column: 1 / -1; justify-self: stretch; }
  .scene--fastback { --w: 176vw; left: calc(50vw - var(--w) * .58); top: calc(68svh - var(--w) / 2.18 * .876); }
  .drive__word { flex-wrap: wrap; justify-content: flex-start; padding-inline: var(--sc-gutter); top: calc(var(--bar-h) + 2svh); font-size: 23vw; line-height: .82; column-gap: .16em; row-gap: 0; transform: translate3d(0, calc(var(--p) * -2svh), 0); }
  .drive__copy { right: var(--sc-gutter); }
  .keyoff { grid-template-columns: 1fr; }
  .signup__row { flex-direction: column; }
  .obj, .obj:nth-child(5n+1), .obj:nth-child(5n+2) { grid-column: 1 / -1; margin-top: 0; }
  .sheet__grid { grid-template-columns: 1fr; }
  .sheet__media { position: static; }
  .guide { grid-template-columns: 1fr; }
  .guide:nth-child(even) .guide__media { order: 0; }
}
@media (max-width: 860px) and (min-width: 560px) {
  .obj, .obj:nth-child(5n+1), .obj:nth-child(5n+2) { grid-column: span 6; }
}

/* ========================================================= REDUCED MOTION ==
   Fewer and gentler, not zero. Every layered scene holds its resolved,
   readable composition; the door is open, the car is parked.               */
@media (prefers-reduced-motion: reduce) {
  /* The door holds at its opening frame: h1 on the door, the shell beneath. */
  .door, .lintel, .jamb { transform: none !important; }
  .scene--shell .scene__plate, .scene--shell .scene__subject,
  .scene--fastback .scene__plate, .scene--fastback .scene__subject, .scene__glint { transform: none; opacity: 1; }
  .scene__glint { display: none; }
  .door-beat, .drive__word { transform: none; opacity: 1; }
  .dial__hand { transform: rotate(360deg); }
  .origin__frame img { scale: 1; }
}

/* how-to parts list */
.partlist { columns: 2; column-gap: 2rem; margin: var(--sc-4) 0 var(--sc-5); padding-left: 1.1em; color: var(--sc-ink); }
.partlist li { break-inside: avoid; margin-bottom: 4px; }
.partlist li::marker { color: var(--sc-accent); }
@media (max-width: 560px) { .partlist { columns: 1; } }

@media (prefers-reduced-motion: reduce) { .door-beat { display: none; } }

/* very narrow windows: the logo mark alone carries the brand */
.bar__mark span { white-space: nowrap; }
@media (max-width: 340px) { .bar__mark span { display: none; } }