/* Hallmark · macrostructure: Long Document with full-bleed pixel vignettes · tone: arcade noir, playful
 * theme: studied-DNA (source: https://critterscult.com/) · genre: playful · nav: N9 edge-aligned · footer: Ft5 statement scene
 * DNA kept: pixel art carries the picture, crisp mono carries the words; one narrow column; eyebrow + gold headline;
 *           hairline-ruled lists; scenes dither into the page instead of sitting in boxes
 * DNA changed: moss-black → night purple; blue body → lavender; single Roboto Mono → Departure Mono display + IBM Plex Mono body
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 */
@import url("tokens.css");

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{background:var(--color-paper);-webkit-text-size-adjust:100%}
body{background:var(--color-paper);color:var(--color-ink);font:400 var(--text-md)/1.65 var(--font-body);min-height:100vh}
img,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
canvas{image-rendering:pixelated}
a{color:var(--color-accent);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
::selection{background:var(--color-accent);color:var(--color-on-accent)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:10;background:var(--color-paper);border-bottom:var(--rule) solid var(--color-paper-3)}
.nav-in{max-width:var(--wide);margin:0 auto;padding:var(--space-xs) var(--space-sm);display:flex;align-items:center;gap:var(--space-md)}
.brand{font:var(--text-px-2)/1 var(--font-display);color:var(--color-ink);letter-spacing:0;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .r{color:var(--color-red)} .brand .b{color:var(--color-blue)}
.nav-links{display:flex;gap:var(--space-md);font-size:var(--text-sm);margin-left:auto}
.nav-links a{color:var(--color-ink-2);white-space:nowrap}
.nav-links a:hover{color:var(--color-accent);text-decoration:none}
.state{display:inline-flex;align-items:center;gap:var(--space-2xs);font:var(--text-px-1)/1 var(--font-display);text-transform:uppercase;letter-spacing:.08em;
  padding:6px 8px;color:var(--color-ink);background:var(--color-paper-2);white-space:nowrap;
  clip-path:polygon(var(--px) 0,calc(100% - var(--px)) 0,100% var(--px),100% calc(100% - var(--px)),calc(100% - var(--px)) 100%,var(--px) 100%,0 calc(100% - var(--px)),0 var(--px))}
.state i{width:6px;height:6px;background:currentColor;display:block}
.state.on{color:var(--color-green)} .state.dry{color:var(--color-accent)} .state.soon{color:var(--color-blue)} .state.off{color:var(--color-red)}
.state.on i{animation:blink 1.2s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}
@media (max-width:40rem){.nav-links{display:none}.state{margin-left:auto}}

/* ---------- hero scene ---------- */
.scene{width:100%;height:clamp(15rem,34vw,24rem)}
.hero-copy{text-align:center;padding:var(--space-md) var(--space-sm) 0}
.hero-copy h1{font:var(--text-px-3)/1.2 var(--font-display);color:var(--color-accent);font-weight:400}
.hero-copy p{margin-top:var(--space-2xs);color:var(--color-ink-2)}
@media (max-width:40rem){.hero-copy h1{font-size:var(--text-px-2)}}

/* the live status line: the arena's HUD, set in words */
.hud{max-width:var(--wide);margin:var(--space-xl) auto var(--space-sm);padding:0 var(--space-sm);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2xs) var(--space-md);
  font:var(--text-px-1)/1.4 var(--font-display);text-transform:uppercase;letter-spacing:.08em;color:var(--color-ink-2)}
.hud b{font-weight:400;color:var(--color-ink)} .hud .gold{color:var(--color-accent)} .hud .red{color:var(--color-red)}

/* ---------- arena ---------- */
.arena{max-width:var(--wide);margin:0 auto;padding:0 var(--space-sm)}
.arena canvas{width:100%;height:auto;aspect-ratio:2/1}
.ringside{max-width:var(--wide);margin:var(--space-md) auto 0;padding:0 var(--space-sm);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--space-lg);align-items:start}
.corner h3{font:var(--text-px-2)/1.2 var(--font-display);font-weight:400;overflow-wrap:anywhere}
.corner.red h3{color:var(--color-red)} .corner.blue h3{color:var(--color-blue);text-align:right}
.corner .role{font:var(--text-px-1)/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-2);margin-bottom:var(--space-2xs)}
.corner.blue .role,.corner.blue .meta{text-align:right}
.corner q{display:block;margin-top:var(--space-2xs);color:var(--color-ink);quotes:"“" "”";overflow-wrap:anywhere}
.corner.blue q{text-align:right}
.corner .meta{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--color-ink-2)}
.vs{font:var(--text-px-3)/1 var(--font-display);color:var(--color-accent);padding-top:var(--space-md)}
@media (max-width:40rem){
  .ringside{grid-template-columns:minmax(0,1fr);gap:var(--space-sm)}
  .corner.blue h3,.corner.blue .role,.corner.blue .meta,.corner.blue q{text-align:left}
  .vs{padding:0;font-size:var(--text-px-2)}
}
.clip-link{display:block;text-align:center;margin-top:var(--space-md);font-size:var(--text-sm)}

/* ---------- first screen: the stage (arena during a fight, poster otherwise) ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage{max-width:var(--wide);margin:var(--space-sm) auto 0;padding:0 var(--space-sm)}
.stage canvas{width:100%;height:auto;aspect-ratio:16/9;image-rendering:pixelated}

/* the arena's LED scoreboard, set in real type */
.board{max-width:var(--wide);margin:var(--space-2xs) auto 0;padding:0 var(--space-sm);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2xs)}
.led{display:flex;flex-direction:column;align-items:center;gap:var(--space-3xs);padding:var(--space-xs) var(--space-sm);min-width:0;
  background-color:var(--color-led);background-image:radial-gradient(circle,rgb(255 255 255 / .06) 1px,transparent 1.2px);background-size:4px 4px;
  box-shadow:inset 0 0 0 2px var(--color-led-edge);
  clip-path:polygon(var(--px) 0,calc(100% - var(--px)) 0,100% var(--px),100% calc(100% - var(--px)),calc(100% - var(--px)) 100%,var(--px) 100%,0 calc(100% - var(--px)),0 var(--px))}
.led span{font:var(--text-px-1)/1 var(--font-display);text-transform:uppercase;letter-spacing:.14em;color:var(--color-ink-2)}
.led b{font:var(--text-px-3)/1 var(--font-display);font-weight:400;text-shadow:0 0 10px currentColor;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.led.green b{color:var(--color-green)} .led.gold b{color:var(--color-accent)} .led.blue b{color:var(--color-blue)} .led.violet b{color:var(--color-violet)}
@media (max-width:48rem){.board{grid-template-columns:repeat(2,minmax(0,1fr))}.led b{font-size:var(--text-px-2)}}
.tagline{text-align:center;margin-top:var(--space-sm);padding:0 var(--space-sm);color:var(--color-ink-2)}

/* tale of the tape: the two corners side by side, like a fight card */
.tape{max-width:46rem;margin:var(--space-xl) auto 0;padding:0 var(--space-sm)}
.tape-title{text-align:center;font:var(--text-px-2)/1 var(--font-display);font-weight:400;color:var(--color-accent);text-transform:uppercase;letter-spacing:.12em}
.tape table{width:100%;margin-top:var(--space-md);border-collapse:collapse;table-layout:fixed}
.tape th{font:var(--text-px-1)/1 var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.14em;padding-bottom:var(--space-xs)}
.tape th.red{text-align:right;color:var(--color-red)} .tape th.blue{text-align:left;color:var(--color-blue)}
.tape td{padding:var(--space-xs) 0;border-top:var(--rule) solid var(--color-rule);overflow-wrap:anywhere;min-width:0}
.tape td:first-child{text-align:right} .tape td:last-child{text-align:left}
.tape td.lbl{width:28%;text-align:center;font:var(--text-px-1)/1 var(--font-display);text-transform:uppercase;letter-spacing:.14em;color:var(--color-ink-2)}
.tape .who b{font:var(--text-px-2)/1.1 var(--font-display);font-weight:400}
.tape .who .red b{color:var(--color-red)} .tape .who .blue b{color:var(--color-blue)}
.pfp{display:inline-block;width:33px;height:33px;vertical-align:middle;margin:0 var(--space-2xs);background:var(--color-paper-3) center/cover no-repeat;image-rendering:pixelated;box-shadow:0 0 0 2px currentColor}
.pfp:empty:not([style]){visibility:hidden}
.quotes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-lg);margin-top:var(--space-md)}
.quotes q{quotes:"“" "”";overflow-wrap:anywhere}
.quotes q.red{text-align:right}
@media (max-width:40rem){.quotes{grid-template-columns:minmax(0,1fr);gap:var(--space-sm)}.quotes q.red{text-align:left}.tape .who b{font-size:var(--text-px-1)}.pfp{width:22px;height:22px}}

/* ---------- long-document sections ---------- */
.col{max-width:var(--col);margin:0 auto;padding:0 var(--space-sm)}
section.doc{margin-top:var(--space-3xl)}
/* section scenes: 480-px art shown at exactly 2× on wide screens, melting into the page on every edge */
.illo{max-width:calc(60rem + 2 * var(--space-sm));margin:0 auto var(--space-md);padding:0 var(--space-sm)}
.illo img{display:block;width:100%;height:auto;image-rendering:pixelated}
/* phones: the scene runs edge to edge and is cropped to 16:10 around its subject, so it is not a strip */
@media (max-width:40rem){
  .illo{padding:0}
  .illo img{aspect-ratio:16/10;object-fit:cover;object-position:var(--focus,50%) 50%}
}
.eyebrow{font:600 var(--text-sm)/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--color-blue)}
.doc h2{margin-top:var(--space-xs);font:var(--text-px-3)/1.15 var(--font-display);font-weight:400;color:var(--color-accent);overflow-wrap:anywhere;min-width:0}
@media (max-width:40rem){.doc h2{font-size:var(--text-px-2)}}
.doc p{margin-top:var(--space-sm);max-width:var(--measure)}
.doc .lead{color:var(--color-ink)}
.gold{color:var(--color-accent)}
.muted{color:var(--color-ink-2)}

.steps{list-style:none;margin-top:var(--space-md);counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:3ch minmax(0,1fr);gap:var(--space-xs);padding:var(--space-xs) 0}
.steps li::before{content:counter(s);font:var(--text-px-2)/1 var(--font-display);color:var(--color-accent)}

.ca{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);margin-top:var(--space-md)}
.ca code{font:var(--text-sm)/1.4 var(--font-body);color:var(--color-ink);background:var(--color-paper-2);padding:var(--space-2xs) var(--space-xs);overflow-wrap:anywhere;min-width:0}
.btn{font:var(--text-px-1)/1 var(--font-display);text-transform:uppercase;letter-spacing:.1em;padding:10px 14px;border:0;cursor:pointer;
  background:var(--color-accent);color:var(--color-on-accent);white-space:nowrap;
  clip-path:polygon(var(--px) 0,calc(100% - var(--px)) 0,100% var(--px),100% calc(100% - var(--px)),calc(100% - var(--px)) 100%,var(--px) 100%,0 calc(100% - var(--px)),0 var(--px));
  transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.btn:hover{background:var(--color-accent-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:var(--color-paper-3);color:var(--color-ink-2);cursor:not-allowed}
.btn[data-state="success"]{background:var(--color-green)}
.btn.ghost{background:var(--color-paper-2);color:var(--color-accent)}
.btn.ghost:hover{background:var(--color-paper-3)}

/* hairline-ruled rows, the reference's FAQ list turned into data */
.rows{list-style:none;margin-top:var(--space-md);border-top:var(--rule) solid var(--color-rule)}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-sm);align-items:baseline;padding:var(--space-xs) 0;border-bottom:var(--rule) solid var(--color-rule)}
.rows .who{color:var(--color-ink);overflow-wrap:anywhere;min-width:0}
.rows .who .n{color:var(--color-ink-2);margin-right:var(--space-2xs)}
.rows .side{font-size:var(--text-sm);color:var(--color-ink-2);text-align:right;white-space:nowrap}
.rows .quote{display:block;font-size:var(--text-sm);color:var(--color-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows .empty{grid-template-columns:1fr;color:var(--color-ink-2)}
.tag{font:var(--text-px-1)/1 var(--font-display);text-transform:uppercase;letter-spacing:.08em;margin-left:var(--space-2xs)}
.tag.lucky{color:var(--color-green)} .tag.sweep{color:var(--color-accent)} .tag.throne{color:var(--color-red)} .tag.ok{color:var(--color-green)} .tag.no{color:var(--color-red)}
.win{color:var(--color-green)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl)}
@media (max-width:48rem){.split{grid-template-columns:minmax(0,1fr);gap:0}}

/* questions: <details> with the reference's ruled look */
.faq{margin-top:var(--space-md);border-top:var(--rule) solid var(--color-rule)}
.faq details{border-bottom:var(--rule) solid var(--color-rule)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-sm);padding:var(--space-sm) 0;color:var(--color-accent);font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:var(--text-px-2)/1 var(--font-display);color:var(--color-blue)}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--color-accent-2)}
.faq .a{padding-bottom:var(--space-md)}
.faq .a p:first-child{margin-top:0}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3xs) var(--space-sm);margin-top:var(--space-sm);font-size:var(--text-sm)}
.kv dt{color:var(--color-ink-2)} .kv dd{overflow-wrap:anywhere;min-width:0}

/* ---------- footer scene ---------- */
footer{margin-top:var(--space-3xl)}
.foot-scene{display:block;width:calc(100% - 2 * var(--space-sm));max-width:60rem;height:auto;margin:0 auto;image-rendering:pixelated}
@media (max-width:40rem){.foot-scene{width:100%;aspect-ratio:16/10;object-fit:cover}}
.foot-copy{background:var(--color-paper-deep);padding:var(--space-lg) var(--space-sm) var(--space-xl);text-align:center;font-size:var(--text-sm);color:var(--color-ink-2)}
.foot-copy p+p{margin-top:var(--space-2xs)}

@media (prefers-reduced-motion:reduce){
  .state.on i{animation:none}
  .btn{transition:none}
}