/* Relief screens: home, races and the studio. Tokens and components come from system.css. */

/* ---------- screens ---------- */
.view { display: none; }
[data-view="home"] #home, [data-view="races"] #races { display: block; animation: fade 0.5s both; }
[data-view="studio"] #studio { display: block; }
[data-view="studio"] .nav, [data-view="studio"] .foot { display: none; }
[data-view="races"] .nav-cta { display: none; }
html[data-view="home"] { background: #000; }

/* ---------- shared: course thumbnails ---------- */
.thumb { position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: var(--bg); }
.thumb::before { content: ""; position: absolute; inset: -20%; background: repeating-radial-gradient(circle at 32% 38%, transparent 0 13px, rgba(0, 0, 0, 0.04) 13px 14px), repeating-radial-gradient(circle at 78% 74%, transparent 0 17px, rgba(0, 0, 0, 0.028) 17px 18px); }
.thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.thumb path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.thumb circle { fill: var(--fg); }
.card:hover .thumb path { animation: draw 1.8s cubic-bezier(0.6, 0, 0.2, 1) both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- shared: the framed piece (studio Framed view and the home page) ---------- */
.mode-frame #mount, .frame {
  background: #fbfaf7; color: #1d1d1f; text-align: center;
  padding: calc(var(--side) * 0.14) calc(var(--side) * 0.14) calc(var(--side) * 0.1);
  border: calc(var(--side) * 0.032) solid #161618;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.45), 0 14px 28px -14px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 8px 18px rgba(0, 0, 0, 0.1);
}
.mode-frame #view, .frame-view { position: relative; width: var(--side); height: var(--side); }
.mode-frame #view::after, .frame-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 1px 4px rgba(0, 0, 0, 0.25); }
.mode-frame #plate, .frame-plate { margin-top: calc(var(--side) * 0.07); }
.mode-frame .p-name, .frame .p-name { font-size: calc(var(--side) * 0.034); font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; margin-right: -0.34em; }
.mode-frame .p-race, .frame .p-race { font-size: calc(var(--side) * 0.03); margin-top: 0.75em; }
.mode-frame .p-meta, .frame .p-meta { font-size: calc(var(--side) * 0.022); color: #6e6e73; margin-top: 0.35em; }
.mode-frame .p-time, .frame .p-time { font-size: calc(var(--side) * 0.062); font-weight: 600; letter-spacing: -0.015em; margin-top: 0.35em; font-variant-numeric: tabular-nums; }
.mode-frame .p-splits { font-size: calc(var(--side) * 0.021); color: #6e6e73; font-variant-numeric: tabular-nums; }
.mode-frame .p-note { font-size: calc(var(--side) * 0.024); color: #6e6e73; margin-top: 0.7em; font-style: italic; }

/* ---------- home: splash ---------- */
/* A fresh visit opens on the line alone on black. app.js flushes orange through the
   second sentence, then flies each word to its place while everything else fades in. */
html.intro { overflow: hidden; }
.intro #hero-line .w { opacity: 0; }
.intro .nav, .intro .hero .lead, .intro .hero .cta-row, .intro .hero-price, .intro .hero-cap, .intro .hero-stage { opacity: 0; }
.intro .hero .lead, .intro .hero .cta-row { transform: translateY(18px); }
.nav, .hero .lead, .hero .cta-row, .hero-price, .hero-cap, .hero-stage { transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.intro-out .hero .lead { transition-delay: 0.95s; }
.intro-out .hero .cta-row { transition-delay: 1.1s; }
.intro-out .hero-price { transition-delay: 1.25s; }
.intro-out .hero-stage { transition-duration: 2.4s; transition-delay: 0.3s; }

/* ---------- home: hero ---------- */
/* The hero is a tall track with a screen pinned inside it. app.js writes --s (0 to 1)
   as you scroll the track: the copy lifts away and the journey fades out behind it. */
.hero { position: relative; height: 150svh; text-align: center; }
.hero-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 76px)); }
.hero-copy { position: relative; z-index: 2; opacity: calc(1 - var(--s, 0) * 2.6); transform: translateY(calc(var(--s, 0) * -80px)); }
.hero .display { font-size: clamp(36px, 5vw, 76px); line-height: 1.04; }
.hero .display span { display: block; }
.hero .display span:first-child { color: var(--fg-faint); }
.hero .display .w { display: inline-block; font-style: normal; transform-origin: 0 0; will-change: transform; }
.hero .lead { max-width: 560px; margin: 24px auto 0; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.hero-price { margin-top: 16px; color: var(--fg-soft); }
.finale-price { max-width: 520px; margin: 18px auto 0; }
/* The city fades up out of the black over most of the screen, on an eased curve so there
   is no visible edge. --s (scroll) fades the whole journey out as the next section arrives. */
.hero-stage {
  --a: 26%; --l: 66%; --o: calc(1 - var(--s, 0));
  --fade: linear-gradient(to bottom,
    transparent var(--a),
    rgba(0, 0, 0, calc(var(--o) * 0.03)) calc(var(--a) + var(--l) * 0.15),
    rgba(0, 0, 0, calc(var(--o) * 0.12)) calc(var(--a) + var(--l) * 0.3),
    rgba(0, 0, 0, calc(var(--o) * 0.28)) calc(var(--a) + var(--l) * 0.45),
    rgba(0, 0, 0, calc(var(--o) * 0.5)) calc(var(--a) + var(--l) * 0.6),
    rgba(0, 0, 0, calc(var(--o) * 0.73)) calc(var(--a) + var(--l) * 0.75),
    rgba(0, 0, 0, calc(var(--o) * 0.92)) calc(var(--a) + var(--l) * 0.9),
    rgba(0, 0, 0, var(--o)) calc(var(--a) + var(--l)));
  position: absolute; inset: 0; -webkit-mask-image: var(--fade); mask-image: var(--fade);
}
#hero-view { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
#hero-view.ready { opacity: 1; }
#hero-view.swap { opacity: 0; transition-duration: 0.6s; }
#hero-view #gl { pointer-events: none; }
.hero-cap { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2; pointer-events: none; }
#gl { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
/* The next section rides up over the pinned hero like a sheet. */
.sheet { position: relative; z-index: 3; display: grid; align-items: center; min-height: 100svh; margin-top: -50svh; border-radius: 40px 40px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100svh; }
  .sheet { min-height: 0; margin-top: 0; border-radius: 0; }
}

/* ---------- terms and refunds ---------- */
.legal { padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 96px)); }
.legal .h1 { margin-top: 10px; }
.legal .lead { margin-top: 18px; }
.legal .h3 { margin-top: 40px; }
.legal p:not(.label):not(.lead) { margin-top: 10px; color: var(--fg-soft); }
.legal a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- home: the idea ---------- */
.statement-text { font-size: clamp(27px, 3.7vw, 50px); font-weight: 600; line-height: 1.14; letter-spacing: -0.035em; color: var(--fg-faint); }
/* app.js writes --in (the block rising in) and each word's --w (grey to ink) from the
   scroll position, so it plays backwards when you scroll up. */
.statement-text { color: var(--fg); opacity: var(--in, 1); transform: translateY(calc((1 - var(--in, 1)) * 48px)); }
.statement-text .w { font-style: normal; opacity: calc(0.16 + 0.84 * var(--w, 1)); }

/* ---------- home: how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { padding: 12px 12px 34px; border-radius: var(--r-lg); background: var(--surface); }
.step > :not(.art) { margin-left: 16px; margin-right: 16px; }
.step-n { display: block; margin-top: 26px; font-size: 13px; font-weight: 600; color: var(--accent); }
.step .h3 { margin-top: 8px; }
.step p { margin-top: 8px; font-size: 15px; color: var(--fg-soft); }
.art { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; background: var(--bg); overflow: hidden; }
/* The pointer in the looping step art (app.js moves it). */
.cursor { position: absolute; left: 0; top: 0; z-index: 2; width: 17px; transform: translate(110%, 110%); transition: transform 0.85s cubic-bezier(0.65, 0, 0.25, 1); pointer-events: none; }
.cursor svg { display: block; width: 100%; fill: var(--fg); stroke: var(--bg); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); transform-origin: 20% 10%; transition: transform 0.14s var(--ease); }
.cursor.press svg { transform: scale(0.8); }

.art-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: center; padding: 0 9%; }
.art-pick .thumb { border-radius: 14px; background: var(--surface); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.art-pick .thumb.hover { transform: translateY(-3px); box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.35); }
.art-pick .thumb::before { display: none; }
.art-pick .thumb path { stroke: var(--fg-faint); stroke-width: 2; }
.art-pick .thumb circle { display: none; }
.art-pick .thumb.on { box-shadow: 0 0 0 2px var(--fg); }
.art-pick .thumb.on path { stroke: var(--accent); stroke-width: 2.6; }
.art-pick.live .thumb.on path { animation: draw 1.4s cubic-bezier(0.6, 0, 0.2, 1) both; }

.art-make { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.dots { display: flex; gap: 9px; }
.dots i { width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.3s var(--ease); }
.dots i.on { outline-color: var(--fg); }
.art-plate { margin-top: 6px; padding: 10px 26px 8px; border-radius: 12px; text-align: center; background: var(--tile, transparent); color: var(--plate-fg, inherit); transition: background 0.6s var(--ease), color 0.6s var(--ease); }
.art-plate span { color: var(--ink, inherit); transition: color 0.5s var(--ease); }
.art-plate b { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; margin-right: -0.34em; }
.art-plate span { display: block; font-size: 38px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }

.art-keep { display: flex; align-items: center; justify-content: center; gap: 9%; }
.art-keep .thumb { background: none; border-radius: 0; }
.art-keep .thumb::before, .art-keep .thumb circle { display: none; }
.art-keep .thumb path { stroke-width: 3; }
.mini-phone { position: relative; width: 22%; aspect-ratio: 9 / 17; display: grid; align-items: center; border: 3px solid var(--fg); border-radius: 16px; background: var(--surface); }
.mini-bar { position: absolute; left: 16%; right: 16%; bottom: 9%; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: left; }
.art-keep:not(.live) .mini-bar { display: none; }
.art-keep.live .thumb path { stroke-dashoffset: 1; }
.art-keep.live .mini-bar { transform: scaleX(0); }
.mini-frame { width: 36%; padding: 5%; border: 5px solid var(--fg); background: #fbfaf7; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.4); }

/* ---------- home: film and frame ---------- */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bento-card { display: flex; flex-direction: column; border-radius: 36px; overflow: hidden; }
.bento-card.wall { background: linear-gradient(180deg, #f1f1f3, #e4e4e8); }
.bento-art { display: grid; place-items: center; height: clamp(440px, 46vw, 620px); }
.bento-copy { padding: 0 clamp(24px, 3.4vw, 48px) clamp(32px, 3.6vw, 52px); }
.bento-copy p { margin-top: 12px; max-width: 440px; color: var(--fg-soft); }
img[data-still] { opacity: 0; transition: opacity 1s var(--ease); }
img[data-still][src] { opacity: 1; }

.phone { width: clamp(200px, 19vw, 250px); aspect-ratio: 9 / 18.5; padding: 9px; border-radius: 44px; background: #1c1c1e; box-shadow: inset 0 0 0 1.5px #3a3a3c, 0 40px 80px -30px #000; }
.phone-screen { height: 100%; display: flex; flex-direction: column; align-items: center; padding: 9% 0 0; border-radius: 35px; overflow: hidden; background: #f5f5f7; color: #1d1d1f; text-align: center; }
.phone-logo { height: 13%; width: auto; }
.phone-tile { width: 112%; max-width: none; aspect-ratio: 1; margin: -9% 0 -8%; }
.phone-text b { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; margin-right: -0.3em; }
.phone-text span { display: block; margin-top: 6px; font-size: 10px; font-weight: 500; }
.phone-text small { display: block; margin-top: 1px; font-size: 8px; color: #6e6e73; }
.phone-text strong { display: block; margin-top: 6px; font-size: 27px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }

.frame { --side: clamp(170px, 19vw, 270px); }
.frame-view img { width: 100%; height: 100%; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; margin-top: clamp(56px, 7vw, 96px); }
.fact svg { width: 28px; height: 28px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fact .h3 { margin-top: 18px; font-size: 19px; }
.fact p { margin-top: 8px; font-size: 15px; color: var(--fg-soft); }

/* ---------- home: collection ---------- */
.section-head.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.rail { --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); display: flex; gap: 20px; overflow-x: auto; padding: 8px var(--edge) 44px; scroll-snap-type: x mandatory; scroll-padding-left: var(--edge); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail .card { flex: none; width: 280px; scroll-snap-align: start; }

/* ---------- home: finale ---------- */
.finale { text-align: center; padding: clamp(96px, 13vw, 184px) 0; }
@keyframes pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }

/* ---------- races ---------- */
.races-head { padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 76px)); padding-bottom: 28px; }
.races-head .lead { margin-top: 14px; max-width: 560px; }
.filters-wrap { position: sticky; top: var(--nav-h); z-index: 5; background: var(--glass); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
.filters .search { width: 280px; }
#count { margin-left: auto; }
.chiprow { display: flex; gap: 6px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.chiprow::-webkit-scrollbar { display: none; }
.chiprow.sub { animation: rise 0.35s var(--ease) both; }
.sub .chip { height: 30px; font-size: 12.5px; background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); }
.sub .chip.on { background: var(--solid); box-shadow: none; }

#grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding-top: 14px; padding-bottom: 88px; }
.empty-note { grid-column: 1 / -1; padding: 28px 4px 4px; }
.empty-note b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.empty-note span { display: block; font-size: 15px; color: var(--fg-soft); margin-top: 6px; }

.card-alt { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 320px; padding: 28px; background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); }
.card-alt:hover { background: var(--surface); }
.card-alt b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.card-alt span { font-size: 14px; line-height: 1.45; color: var(--fg-soft); }
.alt-icon { width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; display: grid; place-items: center; background: var(--solid); color: var(--on-solid); font-size: 22px; line-height: 1; }
.req { display: flex; gap: 8px; margin-top: 12px; }
.req .field { flex: 1; min-width: 0; }
.req .btn { height: 42px; }

/* ---------- studio ---------- */
#studio { position: fixed; inset: 0; overflow: hidden; }
#stage { position: absolute; inset: 0 388px 0 0; }
.stage-logo { position: absolute; top: 18px; left: 22px; z-index: 3; }
.stage-logo img { height: 46px; width: auto; }

.mode-film #piece, .mode-film #mount, .mode-film #view { position: absolute; inset: 0; }
.mode-film #plate { position: absolute; left: 32px; bottom: 104px; z-index: 2; pointer-events: none; }
.mode-film .p-name { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.mode-film .p-race { font-size: 17px; font-weight: 500; margin-top: 6px; }
.mode-film .p-meta { font-size: 13px; color: var(--fg-soft); margin-top: 3px; }
.mode-film .p-time { font-size: 48px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; margin-top: 10px; font-variant-numeric: tabular-nums; }
.mode-film .p-splits { font-size: 13px; color: var(--fg-soft); margin-top: 2px; font-variant-numeric: tabular-nums; }
.mode-film .p-note { font-size: 15px; color: var(--fg-soft); margin-top: 10px; font-style: italic; }

.mode-frame #piece { position: absolute; inset: 40px 0 100px; display: grid; place-items: center; }
.mode-frame #mount { --side: min(48vh, 42vw, 460px); animation: rise 0.7s var(--ease) both; }
#plate .placeholder { color: var(--fg-faint); }
#plate div:empty { display: none; }

#transport { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: min(640px, calc(100% - 64px)); z-index: 3; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.72); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
#play, #spin { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; transition: transform var(--fast) var(--ease), background var(--fast), color var(--fast); }
#play:active, #spin:active { transform: scale(0.92); }
#play { background: var(--solid); }
#play::before { content: ""; width: 0; height: 0; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; transform: translateX(2px); }
#play.playing::before { width: 10px; height: 12px; border: 0; border-left: 3.5px solid #fff; border-right: 3.5px solid #fff; transform: none; }
#spin { background: transparent; color: var(--fg-faint); }
#spin.on { color: var(--fg); background: var(--control); }
#spin.on svg { animation: turn 3s linear infinite; }
#spin:disabled { opacity: 0.3; cursor: default; }
#spin:disabled svg { animation: none; }
/* The timeline fills with the route colour as the film plays (--p is set from app.js). */
#scrub { flex: 1; min-width: 0; height: 4px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 4px; outline-offset: 8px; cursor: pointer; background: linear-gradient(90deg, var(--accent) calc(var(--p, 0) * 100%), rgba(0, 0, 0, 0.14) 0); }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.1); cursor: grab; }
#scrub::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); cursor: grab; }

/* ---------- studio: panel ---------- */
#panel { position: absolute; top: 14px; right: 14px; bottom: 14px; width: 360px; overflow-y: auto; padding: 18px 22px; border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px); box-shadow: var(--shadow-3); }
#panel section { margin-bottom: 26px; }
#panel .label { margin-bottom: 12px; }
.stack > * + * { margin-top: 8px; }
.stack > .switch { margin: 14px 2px; }

.race-head { display: flex; align-items: center; gap: 12px; padding: 4px 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--hairline); }
.mini { position: relative; width: 54px; height: 54px; flex: none; }
.mini .thumb { border-radius: 12px; }
.mini .thumb::before { background-size: 50%; }
.race-text { flex: 1; min-width: 0; }
.race-text b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.race-text span { display: block; font-size: 12.5px; color: var(--fg-soft); margin-top: 2px; }
.seg.wide { margin: -6px 0 24px; }
.seg.wide:empty { display: none; }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sw { position: relative; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); outline: 2px solid transparent; outline-offset: 2px; cursor: pointer; transition: outline-color var(--fast), transform var(--fast) var(--ease); }
.sw:hover { transform: scale(1.1); }
.sw.on { outline-color: var(--fg); }
/* Pick your own: always a hue wheel; once chosen, your colour sits in the middle. */
.sw-custom { --wheel: conic-gradient(#ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #5856d6, #af52de, #ff2d55, #ff3b30); background: radial-gradient(circle, #fff 0, rgba(255, 255, 255, 0) 70%), var(--wheel); }
.sw-custom.on { background: radial-gradient(circle, var(--c) 0 34%, #fff 36% 46%, transparent 48%), var(--wheel); }
.sw-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.leg { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.leg > span { width: 34px; font-size: 12.5px; color: var(--fg-soft); flex: none; }
.leg .swatches { gap: 7px; flex-wrap: nowrap; }
.leg .sw { width: 23px; height: 23px; }
.hint { margin-top: 12px; }

.cam-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cam-row .btn { padding: 0 8px; }
#cam-hint button, #film-note button { padding: 0; border: 0; background: none; font: inherit; color: var(--fg); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

#splits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#splits:empty { display: none; }
#splits .field { padding: 0 12px; }

.actions .btn-accent { height: 50px; font-size: 16px; }
.film-size { margin-top: 18px; }
.actions #export { margin-top: 16px; }
#film-note { margin-top: 10px; }
.film-size .seg { margin-top: 8px; }
#format-note { margin-top: 6px; color: var(--fg-faint); }
.actions .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
#credit { font-size: 10.5px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1000px) {
  .steps { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .bento { grid-template-columns: 1fr; }
  .bento-art { height: clamp(430px, 96vw, 600px); }
  .phone { width: clamp(200px, 50vw, 250px); }
  .frame { --side: clamp(170px, 46vw, 270px); }
  .facts { grid-template-columns: 1fr 1fr; }
}

[data-view="studio"] .toast { bottom: 96px; }

@media (max-width: 900px) {
  [data-view="studio"] .toast { bottom: 24px; }
  #studio { position: static; overflow: visible; }
  #stage { position: relative; inset: auto; height: min(66svh, 600px); }
  .mode-film #view { inset: 44px 0 200px; }
  #panel { position: static; width: auto; margin: 0 12px 12px; }
  .stage-logo { top: 12px; left: 16px; }
  .stage-logo img { height: 40px; }
  .mode-film #plate { left: 20px; bottom: 88px; }
  .mode-film .p-name { font-size: 26px; }
  .mode-film .p-race { font-size: 15px; margin-top: 4px; }
  .mode-film .p-time { font-size: 36px; margin-top: 6px; }
  .mode-frame #piece { inset: 66px 0 84px; }
  .mode-frame #mount { --side: min(36svh, 58vw); }
  #transport { bottom: 16px; width: calc(100% - 24px); gap: 8px; }
}

@media (max-width: 640px) {
  .hero-pin { padding-top: calc(var(--nav-h) + 30px); }
  .hero-stage { --a: 38%; --l: 56%; }
  .sheet { border-radius: 28px 28px 0 0; }
  .hero .lead { margin-top: 18px; }
  .cta-row { margin-top: 26px; }
  .section-head.split { flex-direction: column; align-items: flex-start; }
  .facts { grid-template-columns: 1fr; gap: 32px; }
  .rail { gap: 12px; }
  .rail .card { width: 232px; }

  .filters-wrap { position: static; }
  .filters .search { width: 100%; }
  .filters .field { font-size: 16px; }
  .filters select.field { flex: 1; min-width: 0; padding: 0 30px 0 14px; background-position: right 12px center; }
  #count { display: none; }
  #grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  #grid .card { padding: 6px; border-radius: 20px; }
  #grid .thumb { border-radius: 15px; }
  #grid .card-body { padding: 12px 6px 6px; }
  #grid .card-body b { font-size: 15px; }
  #grid .card-alt { grid-column: 1 / -1; min-height: 0; padding: 24px; border-radius: var(--r-lg); }
}

/* Style: Contour draws the film flat on its own canvas over the 3D one (contour.js). */
#flat { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.style-contour.mode-film #flat { display: block; }
.style-contour.mode-film #gl, .style-contour.mode-film #spin { visibility: hidden; }
.style-contour #grp-camera { display: none; }
/* Style: Follow flies the camera along the route, so the turn controls do not apply. */
.style-follow.mode-film #spin { visibility: hidden; }
.style-follow #grp-camera { display: none; }

/* Tile: the water row under the land colours (hidden when a course has no water). */
.waters { margin-top: 14px; }

/* Plate: find your result in the official results (results.js). */
.lookup { display: grid; gap: 8px; padding-bottom: 6px; }
.lookup .hint { margin-top: 0; }
.lookup-label { color: var(--fg-soft); font-weight: 500; margin-bottom: -2px; }
.lookup-list { display: grid; border-radius: var(--r-sm); overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--hairline), 0 12px 30px -18px rgba(0, 0, 0, 0.3); }
.lookup-list:empty { display: none; }
.lookup-list button { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 13px; border: 0; background: none; text-align: left; font-size: 14px; cursor: pointer; }
.lookup-list button + button { border-top: 1px solid var(--hairline); }
.lookup-list button:hover, .lookup-list button:focus-visible { background: var(--control); outline: none; }
.lookup-list b { font-weight: 600; }
.lookup-list small { flex: none; color: var(--fg-soft); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Panel: grouped sections, with film size and the buttons pinned to the foot so they are always in reach. */
#panel .group .label { margin-bottom: 10px; }
#panel .group-body .hint { margin-top: 0; }
#panel .actions { position: sticky; bottom: -18px; z-index: 2; margin: 0 -22px -18px; padding: 16px 22px 18px; border-top: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
#panel .actions .film-size { margin-top: 0; }
@media (max-width: 900px) { #panel .actions { position: static; margin: 0; padding: 16px 0 0; background: none; backdrop-filter: none; } }

/* Text colours: headline (name, race, time) and details (distances, splits, own line). */
#plate .p-name, #plate .p-race, #plate .p-time { color: var(--plate-head, inherit); }
#plate .p-meta, #plate .p-splits, #plate .p-note { color: var(--plate-body, var(--fg-soft)); }
#plate .p-name.placeholder { color: var(--fg-faint); }
#text-inks { display: grid; gap: 2px; }
#text-inks .leg > span { width: 62px; }
.actions-more { padding: 18px 0 8px; border-top: 1px solid var(--hairline); }
.actions-more .pair { margin-top: 0; }
.actions-more #credit { margin-top: 12px; }
#panel .actions .hint:empty { display: none; }