@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800;900&family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root { font-family: 'DM Sans', sans-serif; color: #22221f; background: #f3f0e9; font-synthesis: none; --paper: #f3f0e9; --ink: #22221f; --orange: #f05a28; --rule: #d5d2c9; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, .car-stage:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }
.page { max-width: 1800px; margin: 0 auto; min-height: 100svh; padding: 0 4.1vw 30px; display: flex; flex-direction: column; }
.masthead { min-height: 86px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); }
.wordmark { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 31px; letter-spacing: -2px; display: flex; align-items: center; gap: 9px; line-height: 1; }
.car-mark { display: block; width: 48px; height: 30px; margin-top: 3px; }
.edition, .issue, .collection-heading, .car-type { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: .055em; }
.edition { position: absolute; left: 50%; transform: translateX(-50%); }
.issue { display: flex; align-items: center; gap: 15px; }
.status-dot { width: 7px; height: 7px; background: var(--orange); border-radius: 50%; }
main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
h1 { margin: 42px 0 30px; line-height: 0; width: 100%; }
.racing-title { display: block; width: 100%; height: auto; overflow: visible; }
.racing-title text { font-family: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif; font-size: 170px; font-weight: 900; letter-spacing: -3px; fill: #111; transform: skewX(-12deg); transform-origin: 25px 148px; }
.collection-heading { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--rule); padding: 13px 0 0; }
.cross { font-size: 17px; line-height: 10px; vertical-align: -1px; color: var(--orange); margin-right: 9px; }
.interaction-hint { display: flex; gap: 7px; align-items: center; color: #76746d; font-size: 9px; }
.interaction-hint svg { width: 20px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.cars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.car-card { min-width: 0; position: relative; padding: 0 25px; }
.car-card:first-child { padding-left: 0; }
.car-card:last-child { padding-right: 0; }
.car-card + .car-card { border-left: 1px solid var(--rule); }
.car-stage { width: 100%; height: clamp(195px, 22vh, 285px); position: relative; cursor: grab; touch-action: pan-y; border-radius: 2px; }
.car-stage:active { cursor: grabbing; }
.car-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.model-index { position: absolute; left: 1px; top: 5px; font-family: 'Space Mono', monospace; font-size: 10px; color: #96938a; }
.car-caption { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 12px; }
.car-type { font-size: 8px; color: #77746b; letter-spacing: .065em; }
h2 { font-size: clamp(18px, 1.7vw, 25px); font-weight: 600; letter-spacing: -.045em; margin: 5px 0 0; }
.color-swatch { width: 13px; height: 13px; border-radius: 50%; background: var(--car-color); box-shadow: inset 0 0 0 1px #00000008; margin-right: 2px; }
.notice { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 16px; font-size: 13px; z-index: 20; text-align: center; }
.fallback { display: grid; place-items: center; height: 100%; font-size: 13px; color: #77746b; text-align: center; padding: 24px; }
@media (min-width: 1600px) { h1 { margin-top: 45px; margin-bottom: 45px; } .car-stage { height: 28vh; max-height: 320px; } }
@media (max-height: 790px) and (min-width: 761px) { .masthead { min-height: 58px; } h1 { margin-top: 28px; margin-bottom: 24px; } .cars { margin-top: 10px; } .car-stage { height: 23vh; min-height: 110px; } }
@media (max-width: 760px) { .page { padding: 0 6vw 30px; } .masthead { min-height: 72px; } .edition { display: none; } h1 { margin: 38px 0 30px; } .cars { margin-top: 10px; } .car-card { padding: 0 12px; } .car-stage { height: 190px; } .car-type { display: none; } h2 { font-size: 16px; letter-spacing: -.035em; } .color-swatch { width: 9px; height: 9px; } .car-caption { gap: 5px; } }
@media (max-width: 560px) { .page { min-height: 100svh; padding: 0 5.5vw 30px; } main { justify-content: flex-start; } h1 { margin: 34px 0 26px; } .collection-heading { font-size: 9px; padding-top: 11px; } .interaction-hint { font-size: 8px; gap: 4px; } .cars { grid-template-columns: 1fr; gap: 0; margin-top: 9px; } .car-card, .car-card:first-child, .car-card:last-child { padding: 0; display: grid; grid-template-columns: 57% 43%; align-items: center; } .car-card + .car-card { border-left: 0; border-top: 1px solid var(--rule); } .car-stage { height: clamp(130px, 18.7svh, 175px); } .model-index { top: 10px; font-size: 9px; } .car-caption { padding-left: 15px; } h2 { font-size: 20px; } .car-type { display: block; font-size: 6px; letter-spacing: .01em; } .color-swatch { flex-shrink: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }