/* STEPZ GARAGE — night run
   Black + Spirit-livery yellow, taillight red as the one hot accent. Saira is a variable font with a
   width axis: extended italic for the loud stuff, condensed caps (the GARAGE DEPT. merch look) for
   labels — one family, so headlines can stretch and squash on hover like they're under load. */

:root {
  --y: #f5d800;
  --y-rgb: 245, 216, 0;
  --red: #ff2b2b;
  --orange: #ff8a00;
  --white: #f4f6fa;
  --ink-2: rgba(244, 246, 250, 0.64);
  --ink-3: rgba(244, 246, 250, 0.4);
  --bg: #050505;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.2, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --font: 'Saira', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --dir: 1;
  --chamfer: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

*, *::before, *::after { box-sizing: border-box; }
/* overlays set their own display (grid/flex), which would otherwise beat the UA's [hidden] rule and
   leave an invisible full-screen layer swallowing every click */
[hidden] { display: none !important; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--white);
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body { position: fixed; inset: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
b { font-weight: inherit; }
:focus-visible { outline: 2px solid var(--y); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ layers */

#backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#bd-line { position: absolute; left: 0; right: 0; top: var(--car-y, 46vh); height: 0; }
.bd-word { position: absolute; left: 0; top: 0; transform: translateY(-50%); white-space: nowrap; will-change: transform, opacity; }
.bd-track { display: flex; width: max-content; will-change: transform; }
.bd-track span {
  display: block;
  padding-right: 0.3em;
  font-style: italic;
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(110px, 25vh, 300px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: rgba(var(--y-rgb), 0.04);
  -webkit-text-stroke: 1.3px rgba(var(--y-rgb), 0.26);
}
.bd-track span i { font-style: normal; -webkit-text-stroke: 0; color: rgba(var(--y-rgb), 0.28); font-size: 0.32em; vertical-align: 0.9em; margin: 0 0.35em; }
.bd-word.in { animation: bdIn 1.1s var(--ease-out) both; }
.bd-word.out { animation: bdOut 0.65s cubic-bezier(0.55, 0, 0.75, 0.2) both; }
@keyframes bdIn {
  from { opacity: 0; transform: translate(calc(var(--d, 1) * 40vw), -50%) skewX(calc(var(--d, 1) * -16deg)); filter: blur(8px); }
  to { opacity: 1; transform: translate(0, -50%); filter: blur(0); }
}
@keyframes bdOut {
  to { opacity: 0; transform: translate(calc(var(--d, 1) * -40vw), -50%) skewX(calc(var(--d, 1) * 16deg)); filter: blur(8px); }
}

/* the WebGL scene is black + light, so "screen" lets the type behind it show through the dark */
#canvas-container { position: fixed; inset: 0; z-index: 1; mix-blend-mode: screen; touch-action: none; }
#canvas-container canvas { display: block; }

#vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 78% 72% at 50% 44%, transparent 42%, rgba(0, 0, 0, 0.62) 100%);
}

/* darkens whichever side the content panel sits on, so copy stays legible over traffic and type */
#scrim { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#scrim::before, #scrim::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease-out); }
#scrim::before { background: linear-gradient(90deg, rgba(5, 5, 5, 0.93) 0%, rgba(5, 5, 5, 0.72) 30%, rgba(5, 5, 5, 0) 56%); }
#scrim::after { background: linear-gradient(270deg, rgba(5, 5, 5, 0.93) 0%, rgba(5, 5, 5, 0.72) 30%, rgba(5, 5, 5, 0) 56%); }
body[data-side="left"] #scrim::before,
body[data-side="right"] #scrim::after { opacity: 1; }

/* ------------------------------------------------------------------ header */

#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(16px + var(--safe-t)) calc(20px + var(--safe-r)) 0 calc(20px + var(--safe-l));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.ui-on #site-header, body.is-intro #site-header { opacity: 1; }
#site-header > * { pointer-events: auto; }
body.is-intro .header-actions, body.is-intro #shift-lights { opacity: 0; }
.header-actions, #shift-lights { transition: opacity 0.6s ease 0.2s; }

.brand { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.brand-flag {
  width: 16px; height: 16px; flex: 0 0 auto;
  background: repeating-conic-gradient(var(--y) 0 25%, transparent 0 50%) 0 0 / 8px 8px;
  outline: 1px solid rgba(var(--y-rgb), 0.5);
  opacity: 0; transform: scale(0.4) rotate(-90deg);
  transition: opacity 0.4s ease, transform 0.6s var(--ease-out);
}
.brand-name {
  display: inline-block;
  font-style: italic; font-weight: 900; font-stretch: 125%;
  font-size: 17px; line-height: 1; letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
}
.brand-name b { color: var(--y); }
body.brand-on .brand-name { opacity: 1; }
body.brand-on .brand-flag { opacity: 1; transform: none; }
.brand:hover .brand-flag { animation: flagSpin 0.7s var(--ease-out); }
@keyframes flagSpin { from { transform: rotate(-180deg) scale(0.6); } }

.header-actions { display: flex; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 14px;
  border: 1px solid rgba(var(--y-rgb), 0.3);
  background: rgba(8, 8, 8, 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-weight: 700; font-stretch: 110%; font-size: 11px; letter-spacing: 0.16em;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover { background: var(--y); color: #050505; border-color: var(--y); }
.spk { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.spk-body { fill: currentColor; stroke: none; }
.chip[aria-pressed="true"] .spk-off, .chip[aria-pressed="false"] .spk-on { display: none; }
.chip[aria-pressed="true"] .spk-on { animation: spkPulse 1.1s ease-in-out infinite; }
.chip[aria-pressed="true"] { border-color: rgba(var(--y-rgb), 0.7); }
@keyframes spkPulse { 50% { opacity: 0.35; } }
.burger { display: inline-flex; flex-direction: column; gap: 4px; }
.burger i { display: block; width: 16px; height: 2px; background: currentColor; }
.burger i:last-child { width: 10px; align-self: flex-end; }
.x { position: relative; display: inline-block; width: 14px; height: 14px; }
.x::before, .x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 17px; height: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.x::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* shift lights — read the live rpm from the engine model */
#shift-lights {
  position: absolute; left: 50%; top: calc(21px + var(--safe-t)); transform: translateX(-50%);
  display: flex; gap: 6px; padding: 8px 12px;
  border-radius: 99px;
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
#shift-lights i { width: 9px; height: 9px; border-radius: 50%; background: #1d1d1d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); transition: background-color 0.07s, box-shadow 0.07s; }
#shift-lights i.on { background: var(--c); box-shadow: 0 0 6px var(--c), 0 0 14px var(--c); }
#shift-lights.limit i.on { animation: limiter 0.13s steps(1) infinite; }
@keyframes limiter { 50% { background: #1d1d1d; box-shadow: none; } }

/* ------------------------------------------------------------------ intro title */

#title-lockup {
  position: fixed; inset: 0; z-index: 25;
  display: grid; place-content: center; justify-items: center; text-align: center;
  pointer-events: none;
}
#title-text {
  display: inline-block; transform-origin: 0 0;
  font-style: italic; font-weight: 900; font-stretch: 125%;
  font-size: clamp(40px, 8.6vw, 150px); line-height: 1; letter-spacing: 0.01em;
  white-space: nowrap;
  filter: drop-shadow(0 0 26px rgba(var(--y-rgb), 0.16));
}
/* outline-only glass letters: a faint top-lit tint inside a crisp stroke, plus a glint that sweeps
   across the word letter by letter (each letter repeats itself in ::after to carry the glint) */
#title-text .ch {
  display: inline-block; position: relative; opacity: 0;
  color: transparent;
  -webkit-text-stroke: max(1.2px, 0.012em) var(--white);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.1));
  -webkit-background-clip: text; background-clip: text;
}
#title-text .ch.y {
  -webkit-text-stroke-color: var(--y);
  background-image: linear-gradient(180deg, rgba(var(--y-rgb), 0.22), rgba(var(--y-rgb), 0.04) 55%, rgba(var(--y-rgb), 0.12));
}
#title-text .ch[data-ch]::after {
  content: attr(data-ch);
  position: absolute; inset: 0;
  -webkit-text-stroke: 0;
  background: linear-gradient(105deg, transparent 0 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60% 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  animation: glassShine 3.2s ease-in-out infinite;
  animation-delay: calc(1.2s + var(--i) * 55ms);
}
@keyframes glassShine { 0% { background-position: 100% 0; } 38%, 100% { background-position: 0% 0; } }
#title-lockup.show .ch { animation: chIn 1s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes chIn {
  0% { opacity: 0; transform: translateX(64vw) skewX(-36deg) scaleX(1.7); filter: blur(10px); }
  55% { opacity: 1; filter: blur(0); transform: translateX(-1vw) skewX(9deg) scaleX(0.92); }
  100% { opacity: 1; transform: none; }
}
#title-tag {
  margin-top: 18px;
  font-weight: 700; font-stretch: 75%; font-size: clamp(11px, 1.3vw, 16px); letter-spacing: 0.5em;
  color: var(--white); opacity: 0;
}
#title-tag b { color: var(--y); }
#title-lockup.show #title-tag { animation: fadeUp 0.9s var(--ease-out) 0.75s both; }
#title-lockup.gone { display: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ panels (one per tour stop) */

.panel { position: fixed; z-index: 10; visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.6s; }
.panel.is-active { visibility: visible; pointer-events: auto; transition: none; }

/* every animated child slides in from the direction of travel and leaves the other way —
   keyframes rather than transitions, so a direction change and the activation in the same frame
   still start from the new side */
.panel .rv { opacity: 0; }
.panel.is-active .rv { animation: rvIn 0.85s var(--ease-out) both; animation-delay: calc(160ms + var(--i, 0) * 70ms); }
.panel.is-leaving .rv { animation: rvOut 0.42s cubic-bezier(0.5, 0, 0.75, 0) both; }
@keyframes rvIn {
  from { opacity: 0; transform: translateX(calc(var(--dir) * 70px)) skewX(calc(var(--dir) * -12deg)); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes rvOut {
  from { opacity: 1; transform: none; filter: none; }
  to { opacity: 0; transform: translateX(calc(var(--dir) * -70px)) skewX(calc(var(--dir) * 12deg)); filter: blur(6px); }
}

.panel[data-side="left"], .panel[data-side="right"] {
  top: 50%; transform: translateY(-50%);
  width: min(560px, 41vw);
}
.panel[data-side="left"] { left: calc(clamp(28px, 5.5vw, 100px) + var(--safe-l)); }
.panel[data-side="right"] { right: calc(clamp(28px, 5.5vw, 100px) + var(--safe-r)); }
.panel-inner { max-height: calc(100vh - 210px); }

.p-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px;
  font-weight: 700; font-stretch: 85%; font-size: 12px; letter-spacing: 0.34em;
  color: var(--y);
}
.p-num { font-style: italic; font-weight: 900; font-stretch: 125%; font-size: 14px; letter-spacing: 0.04em; color: var(--white); }
.p-rule { width: 46px; height: 1px; background: currentColor; }
/* headlines stay on one line: the solid word and the outlined one side by side. --title-fs is the
   size a headline gets when it fits; app.js (fitTitles) sets --fit below 1 only for the ones that
   would overflow their column */
.p-title {
  --title-fs: clamp(34px, 4.1vw, 72px);
  margin: 0;
  display: flex; flex-wrap: nowrap; column-gap: 0.26em;
  font-style: italic; font-weight: 900; font-stretch: 125%;
  font-size: calc(var(--title-fs) * var(--fit, 1)); line-height: 0.92; letter-spacing: -0.005em;
  white-space: nowrap;
}
.p-title .l { display: block; flex: 0 0 auto; white-space: nowrap; }
.p-title .l.o { color: transparent; -webkit-text-stroke: 1.5px var(--y); }
.p-sub { margin: 16px 0 0; font-weight: 600; font-stretch: 80%; font-size: 13px; letter-spacing: 0.3em; color: var(--ink-2); }
.p-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 22px;
  font-weight: 800; font-stretch: 100%; font-size: 12.5px; letter-spacing: 0.18em; white-space: nowrap;
  color: var(--y);
  background: rgba(8, 8, 8, 0.5);
  border: 1px solid rgba(var(--y-rgb), 0.55);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--y);
  transform: translateX(-102%) skewX(-20deg); transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.btn:hover, .btn:focus-visible { color: #050505; }
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0) skewX(0); }
.btn-solid { background: var(--y); color: #050505; border-color: var(--y); }
.btn-solid::before {
  background: repeating-linear-gradient(-45deg, rgba(5, 5, 5, 0.16) 0 10px, transparent 10px 20px);
  transform: none; opacity: 0; transition: opacity 0.3s;
  background-size: 28.28px 28.28px;
}
.btn-solid:hover::before, .btn-solid:focus-visible::before { transform: none; opacity: 1; animation: hazard 0.6s linear infinite; }
@keyframes hazard { to { background-position: 28.28px 0; } }
.btn-arrow { display: inline-block; transition: transform 0.3s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(5px); }

/* services */
.svc-list { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.svc {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 18px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.svc-n { width: 16px; font-weight: 700; font-stretch: 85%; font-size: 11px; letter-spacing: 0.2em; color: var(--y); }
.svc-name {
  font-weight: 800; font-stretch: 72%; font-size: clamp(26px, 2.5vw, 40px); line-height: 1; letter-spacing: 0.02em;
  transition: font-stretch 0.55s var(--ease-out), color 0.3s;
}
.svc:hover .svc-name { font-stretch: 125%; color: var(--y); }
/* a real photo of each service, always showing (no longer a hover-only thumbnail) */
.svc-peek {
  margin-left: auto; width: clamp(110px, 34%, 190px); height: 62px; flex: 0 0 auto;
  background-size: cover; background-position: center;
  clip-path: var(--chamfer);
  filter: brightness(0.8) saturate(0.9);
  transition: filter 0.4s ease;
}
.svc:hover .svc-peek { filter: none; }

/* rails + cards */
.rail {
  display: flex; gap: 10px;
  margin-top: 24px; padding: 6px 2px 12px;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  cursor: grab;
  touch-action: pan-x;
}
.rail::-webkit-scrollbar { display: none; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.dragging .card { pointer-events: none; }
.card {
  position: relative; overflow: hidden; flex: 0 0 auto;
  width: clamp(124px, 12vw, 196px); aspect-ratio: 2 / 3;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.09);
  clip-path: var(--chamfer);
  scroll-snap-align: start;
}
.card img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.82) saturate(0.9);
  transform: scale(1.06);
  transition: transform 0.9s var(--ease-out), filter 0.4s ease;
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
.card:hover img, .card:focus-visible img { transform: scale(1.15); filter: none; }
.card:hover, .card:focus-visible { border-color: rgba(var(--y-rgb), 0.75); }
.card-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 10px 9px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  font-weight: 700; font-stretch: 75%; font-size: 11px; letter-spacing: 0.16em;
}
/* the checkered cuff from the merch, as a strip across the top of each product card */
.card.merch::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: repeating-conic-gradient(var(--white) 0 25%, #050505 0 50%) 0 0 / 8px 8px;
  opacity: 0.9;
  transform: scaleX(0.25); transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.card.merch:hover::after { transform: none; }

/* merch lookbook: four slots that keep swapping photos (app.js). The incoming shot fades in on top
   of the outgoing one, which stays opaque underneath so the card never dips to black, and settles
   out of a slight zoom. All four fit, so the rail needs no edge fade or grab cursor. */
.merch-rail { -webkit-mask-image: none; mask-image: none; cursor: auto; }
.slot-pic { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; }
.slot-pic.in { opacity: 1; }
.slot-pic:not(.in) img { transform: scale(1.14); }

/* film strip for the gallery */
.film .card { padding: 15px 0; background-color: #101010; border-color: transparent; aspect-ratio: auto; height: clamp(200px, 20vw, 310px);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255, 255, 255, 0.7) 5px 12px, transparent 12px 18px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255, 255, 255, 0.7) 5px 12px, transparent 12px 18px);
  background-size: 100% 6px, 100% 6px; background-repeat: no-repeat; background-position: 0 4px, 0 calc(100% - 4px);
}
.film .card img { height: 100%; }

/* hover tilt with a moving glare — JS writes --rx/--ry/--gx/--gy from the pointer */
.tilt { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease-out), border-color 0.3s; }
.tilt.tilting { transition: transform 0.08s linear, border-color 0.3s; }
.tilt::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.2), transparent 50%);
  opacity: 0; transition: opacity 0.3s;
  mix-blend-mode: screen;
}
.tilt:hover::before { opacity: 1; }

/* media */
.media-wrap { display: flex; gap: 14px; margin-top: 22px; align-items: flex-start; }
.reel {
  position: relative; overflow: hidden; flex: 0 0 auto;
  width: clamp(150px, 12.5vw, 196px); aspect-ratio: 9 / 16;
  background: #0c0c0c;
  border: 1px solid rgba(var(--y-rgb), 0.4);
  border-radius: 14px;
  box-shadow: 0 0 40px rgba(var(--y-rgb), 0.08);
}
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.6)); }
.reel-bars { position: absolute; top: 9px; left: 9px; right: 9px; z-index: 2; display: flex; gap: 4px; }
.reel-bars i { position: relative; flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.reel-bars i::after { content: ''; position: absolute; inset: 0; background: var(--y); transform-origin: left; transform: scaleX(var(--p, 0)); }
.reel-hud {
  position: absolute; top: 20px; left: 10px; right: 10px; z-index: 2;
  display: flex; justify-content: space-between;
  font-weight: 700; font-stretch: 85%; font-size: 10px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums;
}
.rec { display: inline-flex; align-items: center; gap: 5px; }
.rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: recBlink 1.2s steps(1) infinite; }
@keyframes recBlink { 50% { opacity: 0.15; } }
.reel-zone { position: absolute; top: 0; bottom: 0; z-index: 3; }
.reel-prev { left: 0; width: 30%; }
.reel-play { left: 30%; width: 40%; }
.reel-next { right: 0; width: 30%; }
.reel-expand {
  position: absolute; left: 0; right: 0; bottom: 11px; z-index: 2; text-align: center;
  font-weight: 700; font-stretch: 85%; font-size: 9px; letter-spacing: 0.26em;
  text-shadow: 0 1px 6px #000;
}
.media-grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 250px; }
.media-grid .card { width: 100%; aspect-ratio: 3 / 4; }

/* sponsorship decal sheet */
.decals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; max-width: 470px; }
.decal {
  position: relative; display: grid; place-items: center;
  height: 62px;
  border: 1.5px dashed rgba(var(--y-rgb), 0.5);
  font-weight: 600; font-stretch: 75%; font-size: 12px; letter-spacing: 0.22em; color: var(--ink-2);
  transition: transform 0.45s var(--ease-out), border-color 0.3s, color 0.3s, background-color 0.3s;
  overflow: hidden;
}
.decal b { color: var(--y); font-weight: 800; margin-right: 0.4em; }
.decal.d1 { border-radius: 99px; }
.decal.d2 { transform: skewX(-12deg); }
.decal.d3 { clip-path: var(--chamfer); border-style: solid; border-color: rgba(var(--y-rgb), 0.25); background: rgba(var(--y-rgb), 0.05); }
.decal.d4 { transform: rotate(-3deg); }
.decal.d5 { border-radius: 10px; }
.decal.d6 { transform: rotate(2.5deg); border-radius: 99px 0 99px 0; }
.decal::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(var(--y-rgb), 0.28) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: decalShine 5s ease-in-out infinite;
}
.decal.d2::after { animation-delay: 0.5s; } .decal.d3::after { animation-delay: 1s; }
.decal.d4::after { animation-delay: 1.5s; } .decal.d5::after { animation-delay: 2s; } .decal.d6::after { animation-delay: 2.5s; }
@keyframes decalShine { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }
.decals:hover .decal { border-color: var(--y); color: var(--white); }

/* social */
.handle {
  display: inline-block; margin-top: 18px;
  font-style: italic; font-weight: 900; font-stretch: 125%;
  font-size: clamp(24px, 2.9vw, 48px); line-height: 1; letter-spacing: -0.01em;
  color: var(--y);
  text-shadow: 0 0 30px rgba(var(--y-rgb), 0.35);
  transition: color 0.25s, letter-spacing 0.5s var(--ease-out);
}
.handle:hover { color: var(--white); letter-spacing: 0.02em; }
.social-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; max-width: 420px; }
.social-feed .card { width: 100%; aspect-ratio: 1; }

/* ------------------------------------------------------------------ hero rail */

#hero {
  left: 0; right: 0; bottom: calc(96px + var(--safe-b));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.hero-hint {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-weight: 700; font-stretch: 85%; font-size: 10.5px; letter-spacing: 0.34em;
  color: var(--ink-3);
}
.hint-wheel { position: relative; width: 14px; height: 22px; border: 1.5px solid var(--ink-3); border-radius: 8px; }
.hint-wheel i { position: absolute; left: 50%; top: 4px; width: 2px; height: 5px; margin-left: -1px; border-radius: 2px; background: var(--y); animation: wheelHint 1.6s ease-in-out infinite; }
@keyframes wheelHint { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(7px); opacity: 0; } 100% { opacity: 0; } }
.index-rail {
  display: flex; gap: 12px;
  max-width: min(96vw, 1220px);
  padding: 10px 30px 16px;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
  touch-action: pan-x;
}
.index-rail::-webkit-scrollbar { display: none; }
.index-card {
  position: relative; overflow: hidden; flex: 0 0 auto;
  width: clamp(112px, 9.8vw, 148px); aspect-ratio: 3 / 4;
  background: #0b0b0b;
  border: 1px solid rgba(var(--y-rgb), 0.22);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  scroll-snap-align: center;
  opacity: 0; translate: 0 26px;
  transition: opacity 0.6s ease, translate 0.8s var(--ease-out), transform 0.6s var(--ease-out), border-color 0.3s;
}
#hero.is-active .index-card { opacity: 1; translate: 0 0; transition-delay: calc(var(--i) * 60ms + 120ms), calc(var(--i) * 60ms + 120ms), 0s, 0s; }
#hero.is-active .index-card.tilting { transition: opacity 0.6s, translate 0.8s, transform 0.08s linear, border-color 0.3s; }
.index-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.4) brightness(0.6) contrast(1.1);
  transform: scale(1.1);
  transition: transform 0.9s var(--ease-out), filter 0.5s ease;
}
.index-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.2) 58%, rgba(0, 0, 0, 0.05)); }
.ic-num {
  position: absolute; top: 9px; left: 12px; z-index: 2;
  font-style: italic; font-weight: 900; font-stretch: 125%; font-size: 24px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--y);
  transition: color 0.3s;
}
.ic-text { position: absolute; left: 12px; right: 8px; bottom: 11px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.ic-name { font-weight: 800; font-stretch: 78%; font-size: 15px; line-height: 1; letter-spacing: 0.07em; transition: font-stretch 0.5s var(--ease-out), color 0.3s; }
.ic-sub { font-weight: 600; font-stretch: 75%; font-size: 9px; letter-spacing: 0.2em; color: rgba(var(--y-rgb), 0.8); }
.index-card:hover, .index-card:focus-visible { border-color: var(--y); }
.index-card:hover img, .index-card:focus-visible img { transform: scale(1.2); filter: none; }
.index-card:hover .ic-num, .index-card:focus-visible .ic-num { color: var(--y); }
.index-card:hover .ic-name, .index-card:focus-visible .ic-name { font-stretch: 112%; color: var(--y); }

/* ------------------------------------------------------------------ finish */

#outro {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 640px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.flag { position: relative; display: flex; width: 216px; height: 144px; margin-bottom: 30px; filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.12)); }
.flag::before { content: ''; position: absolute; left: -8px; top: -6px; width: 4px; height: 240px; background: linear-gradient(#bbb, #555); border-radius: 2px; }
.flag i {
  flex: 1;
  background: repeating-conic-gradient(var(--white) 0 25%, #0b0b0b 0 50%) 0 0 / 36px 36px;
  background-position: calc(var(--c) * -18px) 0;
  animation: wave 1.5s ease-in-out infinite;
  animation-delay: calc(var(--c) * -0.11s);
}
@keyframes wave { 0%, 100% { transform: translateY(-5px) skewY(-5deg); filter: brightness(1); } 50% { transform: translateY(5px) skewY(5deg); filter: brightness(0.62); } }
.outro-kicker { margin: 0; font-weight: 700; font-stretch: 85%; font-size: 12px; letter-spacing: 0.5em; color: var(--ink-2); }
.outro-credit {
  margin: 10px 0 0;
  font-style: italic; font-weight: 900; font-stretch: 125%; font-size: clamp(28px, 4vw, 54px); letter-spacing: 0.04em;
  color: var(--y);
  text-shadow: 0 0 8px rgba(var(--y-rgb), 0.8), 0 0 30px rgba(var(--y-rgb), 0.5);
}
#outro .p-actions { justify-content: center; margin-top: 30px; }

/* ------------------------------------------------------------------ gearbox */

#tour-nav {
  position: fixed; left: 50%; bottom: calc(16px + var(--safe-b)); transform: translateX(-50%); z-index: 12;
  display: flex; align-items: stretch; gap: 10px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s ease;
}
body.ui-on #tour-nav { opacity: 1; pointer-events: auto; }
.paddle {
  width: 58px; height: 58px; display: grid; place-items: center;
  background: var(--y); color: #050505;
  clip-path: var(--chamfer);
  box-shadow: 0 0 22px rgba(var(--y-rgb), 0.35);
  transition: background-color 0.2s, opacity 0.2s, transform 0.15s;
}
.paddle svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.paddle:hover:not(:disabled) { background: var(--white); }
.paddle:active:not(:disabled) { transform: scale(0.93); }
.paddle:disabled { opacity: 0.2; cursor: default; }
#tour-next.nudge { animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(5px); } 90% { transform: translateX(-1px); } }

#gear {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 168px; height: 58px; padding: 0 14px 0 12px;
  background: rgba(8, 8, 8, 0.72);
  border: 1px solid rgba(var(--y-rgb), 0.3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  clip-path: var(--chamfer);
}
.gear-window { position: relative; flex: 0 0 auto; width: 34px; height: 42px; overflow: hidden; }
.gear-window .g {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-style: italic; font-weight: 900; font-stretch: 125%; font-size: 36px; line-height: 1;
  color: var(--y);
  text-shadow: 0 0 18px rgba(var(--y-rgb), 0.55);
}
.gear-window .g.in { animation: gIn 0.5s var(--ease-out) both; }
.gear-window .g.out { animation: gOut 0.32s ease-in both; }
@keyframes gIn { from { transform: translateY(calc(var(--d, 1) * 105%)); opacity: 0; } }
@keyframes gOut { to { transform: translateY(calc(var(--d, 1) * -105%)); opacity: 0; } }
.gear-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.gear-label { font-weight: 700; font-stretch: 80%; font-size: 8.5px; letter-spacing: 0.3em; color: var(--ink-3); white-space: nowrap; }
#gear-count { color: var(--ink-2); margin-left: 4px; font-variant-numeric: tabular-nums; }
#gear-name { font-weight: 800; font-stretch: 82%; font-size: 13px; line-height: 1; letter-spacing: 0.12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gear-progress { position: relative; height: 2px; background: rgba(255, 255, 255, 0.12); }
#gear-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--y); box-shadow: 0 0 8px var(--y); transition: width 0.8s var(--ease-out); }

/* ------------------------------------------------------------------ menu */

#menu {
  position: fixed; inset: 0; z-index: 60;
  background: #050505;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.65s var(--ease-io);
}
#menu.open { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
#menu::before {
  content: ''; position: absolute; right: -10vmin; bottom: -10vmin; width: 60vmin; height: 60vmin;
  background: repeating-conic-gradient(rgba(var(--y-rgb), 0.07) 0 25%, transparent 0 50%) 0 0 / 7vmin 7vmin;
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 100% 100%, #000, transparent 70%);
  pointer-events: none;
}
.menu-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column;
  padding: calc(16px + var(--safe-t)) calc(20px + var(--safe-r)) calc(22px + var(--safe-b)) calc(clamp(20px, 6vw, 110px) + var(--safe-l));
}
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-kicker { font-weight: 700; font-stretch: 85%; font-size: 11px; letter-spacing: 0.4em; color: var(--y); }
.menu-list { list-style: none; margin: auto 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0px, 0.4vh, 6px); }
.menu-list li { opacity: 0; transform: translateX(-60px) skewX(14deg); }
#menu.open .menu-list li { animation: menuIn 0.75s var(--ease-out) both; animation-delay: calc(0.14s + var(--i) * 0.05s); }
@keyframes menuIn { from { opacity: 0; transform: translateX(-60px) skewX(14deg); } to { opacity: 1; transform: none; } }
.menu-list button { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 30px); width: 100%; padding: 1px 0; }
.m-g { width: 2ch; flex: 0 0 auto; font-style: italic; font-weight: 800; font-stretch: 110%; font-size: clamp(13px, 1.5vw, 18px); color: var(--y); }
.m-name {
  font-style: italic; font-weight: 900; font-stretch: 75%;
  font-size: clamp(32px, 7.4vh, 92px); line-height: 0.98; letter-spacing: -0.005em;
  color: transparent; -webkit-text-stroke: 1.2px rgba(244, 246, 250, 0.5);
  transition: font-stretch 0.55s var(--ease-out), color 0.25s, -webkit-text-stroke-color 0.25s, transform 0.55s var(--ease-out);
}
.menu-list button:hover .m-name, .menu-list button:focus-visible .m-name { font-stretch: 125%; color: var(--white); -webkit-text-stroke-color: var(--white); transform: translateX(12px); }
.menu-list button.current .m-name { color: var(--y); -webkit-text-stroke-color: var(--y); }
.menu-foot { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; font-weight: 700; font-stretch: 90%; font-size: 11px; letter-spacing: 0.24em; color: var(--ink-3); }
.menu-foot a { color: var(--white); transition: color 0.2s; }
.menu-foot a:hover { color: var(--y); }
.menu-peek {
  position: fixed; left: 0; top: 0; z-index: 1;
  width: clamp(160px, 16vw, 250px); aspect-ratio: 3 / 4; object-fit: cover;
  pointer-events: none;
  clip-path: var(--chamfer);
  opacity: 0;
  transform: translate(var(--px, 50vw), var(--py, 50vh)) translate(-50%, -50%) rotate(-5deg) scale(0.85);
  transition: opacity 0.3s ease, transform 0.45s var(--ease-out);
}
#menu.peeking .menu-peek { opacity: 0.85; transform: translate(var(--px, 50vw), var(--py, 50vh)) translate(-50%, -50%) rotate(-5deg) scale(1); }

/* ------------------------------------------------------------------ lightbox */

#lightbox {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  background: rgba(3, 3, 3, 0.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity 0.35s ease;
}
#lightbox.open { opacity: 1; }
.lb-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lb-stage img, .lb-stage video {
  max-width: min(84vw, 1100px); max-height: 78vh; object-fit: contain;
  background: #0a0a0a;
  border: 1px solid rgba(var(--y-rgb), 0.4);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.lb-stage img[hidden], .lb-stage video[hidden] { display: none; }
.lb-stage .swap-in { animation: lbIn 0.6s var(--ease-out) both; }
@keyframes lbIn { from { opacity: 0; transform: translateX(calc(var(--d, 1) * 70px)) skewX(calc(var(--d, 1) * -7deg)); filter: blur(10px); } }
.lb-stage figcaption { display: flex; gap: 18px; font-weight: 600; font-stretch: 85%; font-size: 11px; letter-spacing: 0.2em; color: var(--ink-2); text-transform: uppercase; text-align: center; padding: 0 70px; }
#lb-count { color: var(--y); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-btn {
  position: absolute; width: 52px; height: 52px; display: grid; place-items: center;
  color: var(--y);
  background: rgba(8, 8, 8, 0.6);
  border: 1px solid rgba(var(--y-rgb), 0.4);
  clip-path: var(--chamfer);
  transition: background-color 0.2s, color 0.2s;
}
.lb-btn:hover { background: var(--y); color: #050505; }
.lb-btn svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: square; }
.lb-close { top: calc(16px + var(--safe-t)); right: calc(18px + var(--safe-r)); }
.lb-prev { left: calc(18px + var(--safe-l)); top: 50%; transform: translateY(-50%); }
.lb-next { right: calc(18px + var(--safe-r)); top: 50%; transform: translateY(-50%); }
.lb-single .lb-prev, .lb-single .lb-next { display: none; }

/* ------------------------------------------------------------------ stacked layout (phones, tablets) */

/* The screen splits in two: the car in a band under the header (app.js fits it there), the panel
   from --stack-top down to the gearbox. Everything in the panel is centered, the headline sits right
   under the car, and the photos grow to fill whatever height is left.
   --stack-top: under the header plus about half the width (how tall the car draws on a portrait
   screen), but always leaving the panel at least 44% of the height (300px minimum). */
@media (max-width: 959px) {
  :root {
    --stack-top: max(calc(var(--safe-t) + 150px), min(calc(var(--safe-t) + 100px + 50vw), calc(100% - 86px - var(--safe-b) - max(44%, 300px))));
    /* merch: the film takes the car's place, so the panel starts as low as its four lookbook cards
       allow at their natural 2:3 size (196px = eyebrow, headline, sub, rail padding and button) */
    --merch-top: max(var(--stack-top), calc(100% - 86px - var(--safe-b) - 196px - (100vw - 62px - var(--safe-l) - var(--safe-r)) * 0.375));
  }
  #scrim::before, #scrim::after { background: linear-gradient(0deg, rgba(5, 5, 5, 0.96) 0%, rgba(5, 5, 5, 0.82) 42%, rgba(5, 5, 5, 0) 66%); }
  .panel[data-side="left"], .panel[data-side="right"] {
    left: calc(16px + var(--safe-l)); right: calc(16px + var(--safe-r));
    top: var(--stack-top); bottom: calc(86px + var(--safe-b));
    transform: none; width: auto;
    display: flex; flex-direction: column;
  }
  #panel-merch[data-side] { top: var(--merch-top); }
  /* a column whose one photo block (list, rail, reel + grid, feed) takes the leftover height; it
     only scrolls on screens too short for the minimum sizes */
  .panel-inner {
    flex: 1 1 auto; min-height: 0; max-height: none;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
  }
  .panel-inner::-webkit-scrollbar { display: none; }
  .p-eyebrow { margin-bottom: 10px; font-size: 10.5px; }
  .p-title { --title-fs: clamp(30px, 9.6vw, 50px); align-self: stretch; justify-content: center; }
  .p-title .l.o { -webkit-text-stroke-width: 1.2px; }
  .p-sub { margin-top: 10px; font-size: 10.5px; letter-spacing: 0.24em; }
  .p-actions { justify-content: center; margin-top: 14px; gap: 8px; }
  .btn { height: 42px; padding: 0 16px; font-size: 11px; letter-spacing: 0.15em; }
  .svc-list, .rail, .media-wrap, .social-feed { align-self: stretch; flex: 1 1 0; }

  /* services: three rows share the height, each with a big photo of the work */
  .svc-list { display: flex; flex-direction: column; margin-top: 14px; min-height: 120px; }
  .svc { flex: 1 1 0; min-height: 40px; padding: 5px 0; gap: 14px; text-align: left; }
  .svc-name { font-size: clamp(22px, 4.6vw, 34px); }
  .svc-peek { align-self: stretch; height: auto; width: clamp(110px, 44%, 360px); filter: brightness(0.9) saturate(0.95); }

  /* rails: the cards are as tall as the rail and keep their shape */
  .rail { margin-top: 14px; min-height: 120px; }
  .rail .card { height: 100%; width: auto; aspect-ratio: 2 / 3; }
  .film .card { height: 100%; aspect-ratio: 5 / 8; padding: 13px 0; }
  /* the four lookbook slots always fit side by side (they get narrower than 2:3 rather than spill) */
  .merch-rail { justify-content: center; }
  .merch-rail .card { max-width: calc((100% - 30px) / 4); }

  /* media: the reel at full height, the four photos in a 2 x 2 grid beside it */
  .media-wrap { margin-top: 14px; gap: 10px; min-height: 120px; align-items: stretch; }
  .reel { height: 100%; width: auto; border-radius: 10px; }
  .reel-hud { top: 17px; left: 8px; right: 8px; font-size: 8px; letter-spacing: 0.08em; }
  #reel-tc { display: none; }
  .reel-expand { font-size: 7.5px; letter-spacing: 0.18em; }
  .media-grid { max-width: none; gap: 6px; grid-template-rows: 1fr 1fr; }
  .media-grid .card { aspect-ratio: auto; height: 100%; }

  .decals { width: min(100%, 640px); max-width: none; margin-top: 16px; gap: 8px; }
  .decal { height: clamp(46px, 8.5vw, 76px); font-size: clamp(10px, 1.45vw, 13px); letter-spacing: 0.16em; }
  .handle { margin-top: 12px; font-size: clamp(24px, 8vw, 40px); }
  .social-feed { display: flex; justify-content: center; gap: 8px; max-width: none; margin-top: 14px; min-height: 100px; }
  .social-feed .card { height: 100%; width: auto; aspect-ratio: 1; max-width: calc((100% - 16px) / 3); }

  /* home: the seven section cards as a centered 4 + 3 grid filling the space under the car */
  #hero {
    left: calc(16px + var(--safe-l)); right: calc(16px + var(--safe-r));
    top: var(--stack-top); bottom: calc(84px + var(--safe-b)); gap: 10px;
  }
  .index-rail {
    flex: 1 1 0; min-height: 0; width: 100%; max-width: none;
    flex-wrap: wrap; justify-content: center; align-content: stretch; gap: 10px;
    padding: 0; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .index-card { width: calc((100% - 30px) / 4); height: calc((100% - 10px) / 2); aspect-ratio: auto; }
  .ic-num { top: 10px; left: 12px; font-size: clamp(20px, 4.2vw, 36px); }
  .ic-text { left: 12px; bottom: 12px; gap: 5px; }
  .ic-name { font-size: clamp(10.5px, 2.4vw, 20px); }
  .ic-sub { font-size: clamp(8px, 1.3vw, 11px); }
  .hero-hint { font-size: 9px; letter-spacing: 0.26em; }

  #shift-lights { top: calc(62px + var(--safe-t)); gap: 4px; padding: 6px 9px; }
  #shift-lights i { width: 6px; height: 6px; }
  #sound-toggle .chip-label { display: none; }
  .chip { height: 36px; padding: 0 12px; }
  .brand-name { font-size: 15px; }
  #tour-nav { gap: 8px; bottom: calc(14px + var(--safe-b)); }
  .paddle { width: 54px; height: 54px; }
  #gear { width: 164px; height: 54px; }
  #gear-name { font-stretch: 72%; letter-spacing: 0.08em; }
  .flag { width: 168px; height: 112px; margin-bottom: 22px; }
  .flag::before { height: 190px; }
  .flag i { background-size: 28px 28px; background-position: calc(var(--c) * -14px) 0; }
  .lb-prev, .lb-next { top: auto; bottom: calc(18px + var(--safe-b)); transform: none; }
  .lb-stage img, .lb-stage video { max-width: 92vw; max-height: 70vh; }
  .lb-stage figcaption { padding: 0 16px; flex-direction: column; gap: 6px; }
  .menu-peek { display: none; }
}

/* phones: lookbook cards are too narrow for their labels (the lightbox caption still names each
   piece), and the home cards drop their sub-lines */
@media (max-width: 599px) {
  .merch-rail .card-label { display: none; }
  .ic-num { top: 8px; left: 8px; }
  .ic-text { left: 8px; right: 5px; bottom: 9px; }
  .ic-name { font-stretch: 70%; letter-spacing: 0.03em; }
  .ic-sub { display: none; }
}

@media (max-width: 380px) {
  .brand-name { font-size: 13px; }
  .brand { gap: 8px; }
  #gear { width: 138px; }
  .paddle { width: 50px; height: 50px; }
}

/* shorter desktop/tablet windows: keep the side panel clear of the gearbox */
@media (min-width: 960px) and (max-height: 860px) {
  .panel[data-side="left"], .panel[data-side="right"] { top: calc(50% - 24px); }
  .panel-inner { max-height: calc(100vh - 230px); }
  .p-title { --title-fs: min(4.1vw, 7.6vh); }
  .reel { width: clamp(120px, 17vh, 196px); }
  .media-grid { max-width: 210px; }
  .card { width: clamp(108px, 15.5vh, 152px); }
  .film .card { height: clamp(170px, 26vh, 250px); }
  .svc { padding: 6px 0; }
  .svc-peek { height: 54px; }
  .p-actions { margin-top: 20px; }
}

/* short landscape phones: the rail and the panels have to share very little height, so home keeps
   its single swipeable row of cards instead of the 4 + 3 grid */
@media (max-height: 520px) and (min-width: 560px) {
  #hero .hero-hint { display: none; }
  .index-rail { flex-wrap: nowrap; overflow-x: auto; align-items: flex-start; }
  .index-card { width: 92px; height: auto; aspect-ratio: 3 / 4; }
  .panel-inner { max-height: calc(100vh - 150px); }
}

/* merch swaps the split: the lookbook gets the big side of the screen, the car the narrow one
   (app.js centers and shrinks the car into whatever width the panel leaves) */
@media (min-width: 960px) {
  #panel-merch[data-side="right"] { width: min(1000px, 56vw); }
  #panel-merch .card { width: min(clamp(140px, 25vh, 290px), calc((100% - 30px) / 4)); }
}
@media (min-width: 960px) and (max-height: 860px) {
  #panel-merch .card { width: min(clamp(130px, 21vh, 230px), calc((100% - 30px) / 4)); }
}

/* merch film: the looping GARAGE DEPT. clip, a 9:16 frame in the car's place (the car fades out at
   this stop). Wide screens center it in the width the lookbook leaves (same numbers as
   #panel-merch's width and right offset); tablets and phones center it in the band above the panel */
#merch-film {
  position: fixed; z-index: 9; aspect-ratio: 9 / 16;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.09);
  clip-path: var(--chamfer);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, var(--mf-y, 0%)) scale(0.96);
  transition: opacity 0.45s ease, transform 0.6s var(--ease-out), visibility 0s linear 0.45s;
}
body.ui-on[data-stop="front-wheel"] #merch-film {
  opacity: 1; visibility: visible;
  transform: translate(-50%, var(--mf-y, 0%));
  transition: opacity 0.7s ease 0.2s, transform 0.9s var(--ease-out) 0.2s, visibility 0s;
}
#merch-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the checkered cuff, as on the lookbook cards */
#merch-film::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: repeating-conic-gradient(var(--white) 0 25%, #050505 0 50%) 0 0 / 8px 8px;
  opacity: 0.9;
  transform: scaleX(0.25); transform-origin: left;
}
@media (min-width: 960px) {
  #merch-film {
    --free: calc(100vw - clamp(28px, 5.5vw, 100px) - var(--safe-r) - min(1000px, 56vw));
    --mf-y: -50%;
    top: 50%; left: calc(var(--free) / 2);
    height: min(72vh, calc(var(--free) * 0.8 * 16 / 9));
  }
}
@media (max-width: 959px) {
  #merch-film {
    top: calc(var(--safe-t) + 92px); left: 50%;
    height: calc(var(--merch-top) - var(--safe-t) - 106px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}