:root{--ink:#0f0e0c;--muted:#5f5a51;--gold-ink:#7a5f2e;--red-ink:#8f1d1d;--green-ink:#1d3b2f;--brass-night:#e2a72c;--bone-night:#f8f8f6;--mute-night:#8c8c89;--gold:#b8975a;--red:#8f1d1d;--green:#1d3b2f;--seam:#ddd6c8;--on-red:#ffffff;--paper:#f4f1ea;--panel:#fbf9f4;--wash:#ebe6db;--night:#000000;--t-pawn:#22304a;--t-thrift:#8f1d1d;--t-antique:#1d3b2f;--display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;--body:"DM Sans","Helvetica Neue",Arial,sans-serif;--mono:"DM Mono",ui-monospace,Menlo,monospace;--m-dur-fast:120ms;--m-dur-base:360ms;--m-dur-slow:720ms;--m-ease-spring:cubic-bezier(.34,1.56,.64,1);--m-ease-out:cubic-bezier(.22,.61,.36,1);--m-lift:10px;--m-stagger:90ms}
@font-face{font-family:"Big Shoulders Display";src:url('../fonts/big-shoulders-display-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:"DM Sans";src:url('../fonts/dm-sans-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
*{box-sizing:border-box}body{margin:0;background:var(--night);color:var(--bone-night);font:16px/1.6 var(--body)}a{color:inherit;text-underline-offset:4px}a:hover{color:var(--brass-night)}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--brass-night);outline-offset:5px}.skip{position:absolute;top:-100px;left:1rem;padding:.6rem;background:var(--bone-night);color:var(--ink);z-index:10}.skip:focus{top:1rem}header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem clamp(1rem,5vw,4rem);border-bottom:1px solid var(--gold)}.brand{font:700 clamp(1.2rem,3vw,1.6rem)/1.2 var(--display);text-decoration:none}.brand em{color:var(--brass-night);font-style:normal}.back{font-size:.85rem}main{max-width:1200px;margin:auto;padding:clamp(1.5rem,4vw,3rem)}.intro{max-width:640px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;font-weight:600}.intro .eyebrow{color:var(--brass-night)}.intro h1{font:650 clamp(3.3rem,9vw,6.5rem)/1 var(--display);margin:.6rem 0}.intro>p:last-child{color:var(--mute-night);font-size:1.1rem}.layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:2.5rem;align-items:center}.scene{perspective:1200px;min-height:580px;display:grid;place-items:center;overflow:hidden;touch-action:pan-y;background:radial-gradient(ellipse at 50% 55%,#342a17 0,transparent 66%)}.stack{position:relative;width:min(100%,460px);height:320px;transform-style:preserve-3d;transform:rotateX(-11deg) rotateY(-18deg);--spread:38;cursor:grab}.stack:active{cursor:grabbing}.plane{position:absolute;inset:0;border:1px solid var(--gold);border-radius:3px;padding:clamp(1rem,3vw,2rem);box-shadow:0 20px 50px #0006;backface-visibility:hidden;transform:translateZ(calc(var(--depth)*var(--spread)*1.5px));overflow-wrap:anywhere}.plane h2{font:650 clamp(1.6rem,4vw,2.6rem)/1.1 var(--display);margin:.5rem 0}.plane p{margin:.6rem 0}.plane a{display:inline-block;padding:.45rem 0;min-height:44px;font-weight:600}.place{--depth:1;background:var(--paper);color:var(--ink)}.source{--depth:0;background:var(--green);color:var(--bone-night)}.next{--depth:-1;background:var(--red);color:var(--bone-night)}.mark{float:right;font-family:serif;font-size:2rem;opacity:1}.state{font-size:.75rem}.controls{padding:1.5rem 0;border-top:1px solid var(--gold)}.controls>label:first-of-type{display:block;font-weight:600}input[type=range]{width:100%;min-height:44px;accent-color:var(--paper)}.controls p{font-size:.85rem;color:var(--mute-night)}.flat{display:flex;align-items:center;gap:.7rem;min-height:44px;font-size:.85rem}.flat input{width:20px;height:20px;accent-color:var(--paper)}button{font:inherit;min-height:44px;padding:.5rem 1rem;background:transparent;border:1px solid var(--gold);color:var(--bone-night);cursor:pointer}.is-flat .scene{min-height:0;overflow:visible;background:none}.is-flat .stack{height:auto;transform:none!important;cursor:auto}.is-flat .plane{position:relative;transform:none;margin:1rem 0;box-shadow:none}.is-flat .plane[hidden]{display:none}footer{max-width:1200px;margin:auto;padding:1rem clamp(1rem,5vw,3rem) 2rem;border-top:1px solid var(--gold);color:var(--mute-night);font-size:.8rem}.no-script{padding:1rem;border:1px solid var(--gold)}[hidden]{display:none!important}@media(max-width:760px){.layout{grid-template-columns:1fr;gap:0}.scene{min-height:500px}.stack{width:calc(100% - 50px);height:300px}.controls{padding:1rem 0}.plane{padding:1.1rem}.plane h2{font-size:1.7rem}.back{font-size:.75rem}}@media(prefers-reduced-motion:reduce){.stack{transform:none}.plane{position:relative;transform:none;margin:1rem 0}.stack{height:auto;cursor:auto}.scene{min-height:0;overflow:visible;background:none}.controls #spread{visibility:hidden}.controls label[for=spread]{display:none}}

/* Use the existing site fonts alongside its color roles. */
/* The existing world artwork stays behind opaque, contrasting record panels. */
.scene{position:relative}.world{position:absolute;inset:15% 0;width:100%;height:70%;object-fit:contain;opacity:.18;pointer-events:none}.stack{z-index:1}.actions{display:grid;gap:.7rem;margin-top:1.2rem}.actions a{min-height:44px;padding:.5rem 0;color:var(--brass-night)}.is-flat .world{display:none}@media(prefers-reduced-motion:reduce){.world{display:none}}