/* Grain shares FlashBan’s homepage visual language. UI stays static; test stimuli are Start-gated. */
@font-face{font-family:"Sofia Sans Extra Condensed";font-weight:900;font-display:swap;src:url("fonts/sofia-sans-extra-condensed-900.woff2") format("woff2")}
@font-face{font-family:"Martian Mono";font-weight:100 800;font-display:swap;src:url("fonts/martian-mono.woff2") format("woff2")}
:root{color-scheme:dark;--ground:#0e0e0e;--panel:#161616;--ink:#edeae3;--muted:#a3a29c;--olive:#b5c48a;--rule:#2a2a2a;--warn:#b5c48a;--display:"Sofia Sans Extra Condensed","Arial Narrow",sans-serif;--mono:"Martian Mono",ui-monospace,monospace;--grain:repeating-conic-gradient(#2c2c28 0 25%,#24241f 0 50%) 0 0 / 4px 4px;--grain-olive:repeating-conic-gradient(#5e6844 0 25%,#4f583a 0 50%) 0 0 / 4px 4px}
*{box-sizing:border-box}html{background:var(--ground);scroll-padding-top:24px}body{margin:0;background:var(--ground);color:var(--ink);font:400 13px/1.65 var(--mono);-webkit-font-smoothing:antialiased}::selection{background:var(--olive);color:var(--ground)}a{color:inherit;text-underline-offset:4px}:focus-visible{outline:3px solid var(--olive);outline-offset:4px}button,a{-webkit-tap-highlight-color:transparent}code{font:inherit;color:var(--ink)}
.skip{position:absolute;left:16px;top:-100px;z-index:10;background:var(--ink);color:var(--ground);padding:12px}.skip:focus{top:12px}
.top{min-height:64px;display:flex;align-items:stretch;border-bottom:1px solid var(--rule)}.brand{display:flex;align-items:center;padding:0 24px;border-right:1px solid var(--rule);text-decoration:none;font:900 32px/1 var(--display);text-transform:uppercase}.top nav{margin-left:auto;display:flex}.top nav a{display:flex;align-items:center;padding:16px 24px;border-left:1px solid var(--rule);text-decoration:none;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.top nav a:hover{background:var(--panel);color:var(--olive)}.tag{display:flex;align-items:center;padding:0 24px;border-left:1px solid var(--rule);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
main{padding:0 24px}.hero{padding:36px 0 32px;border-bottom:1px solid var(--rule)}.eyebrow,.section-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}.hero h1{font:900 clamp(150px,27vw,520px)/.79 var(--display);letter-spacing:-.025em;text-transform:uppercase;margin:28px 0 36px}.hero-bottom{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:70px;align-items:start}.hero-title{font:900 clamp(48px,5vw,90px)/.95 var(--display);text-transform:uppercase;margin:0;max-width:850px}.hero-title span{color:var(--olive)}.lede{font-size:13px;color:var(--muted);max-width:65ch;margin:0 0 18px}.hero-side{min-width:0}
.warning{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;border:1px solid #626d48;background:#181c13;padding:18px 20px;margin:28px 0;color:#c8cdbb;font-size:12px;line-height:1.7}.warning strong{color:var(--olive);font-size:12px;letter-spacing:.04em;text-transform:uppercase}.warning p{margin:0}.controls{display:flex;gap:10px;flex-wrap:wrap}.controls button{min-width:150px}button{font:400 12px/1.3 var(--mono);letter-spacing:.03em;text-transform:uppercase;padding:16px 20px;min-height:48px;border:1px solid var(--ink);background:var(--ink);color:var(--ground);cursor:pointer;border-radius:0}button:hover:not(:disabled){background:var(--olive);border-color:var(--olive);color:var(--ground)}button#stop,button.play{background:transparent;color:var(--ink);border-color:#5a5a54}button:disabled{background:transparent;color:#8f8e87;border-color:#41413d;cursor:not-allowed}#status{min-height:3.3em;margin:14px 0 0;font-size:11px;color:var(--olive);max-width:65ch}
#feed{padding:32px 0}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:18px}.section-head h2,.about h2{font:900 clamp(36px,3.4vw,60px)/1 var(--display);text-transform:uppercase;margin:0}.section-head p{color:var(--muted);font-size:11px;text-transform:uppercase;margin:0}.feed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.card{margin:0;border:1px solid var(--rule);background:var(--panel);min-width:0}.frame{background:var(--grain);line-height:0}.clip{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#222;object-fit:cover}figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px;border-top:1px solid var(--rule);font-size:10px;color:var(--muted)}figcaption span{min-width:0}figcaption b{display:block;color:var(--ink);font:900 28px/1 var(--display);text-transform:uppercase;margin-bottom:5px}figcaption .play{padding:10px 13px;font-size:10px;min-height:40px;flex:none}.fine{font-size:11px;line-height:1.7;color:var(--muted);max-width:105ch;margin:18px 0 0}
/* Idle look of the CSS and script clips: dithered artwork (close greys). During a run the artwork is removed
   so the strobe is flat dark/mid grey, exactly like the other fixtures. */
.sticker { background: radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(0,0,0,0) 22%), repeating-conic-gradient(#3b3b35 0 25%, #2d2d28 0 50%) 0 0 / 4px 4px; }
.sticker::after { content: ""; display: block; width: 34%; aspect-ratio: 1; margin: 0 auto; transform: translateY(42%); border-radius: 50%; background: var(--grain-olive); }
.banner { background: linear-gradient(transparent 62%, transparent 62%), repeating-conic-gradient(#3b3b35 0 25%, #2d2d28 0 50%) 0 0 / 4px 4px; position: relative; }
.banner::after { content: ""; position: absolute; left: 10%; right: 10%; top: 38%; height: 24%; background: var(--grain-olive); }
.sticker.css-run, .banner.running { background: #222; }
.sticker.css-run::after, .banner.running::after { display: none; }
.banner.running.on { background: #777; }
@keyframes grain-strobe {
  0%, 49.99% { background-color: #222; }
  50%, 100% { background-color: #777; }
}
.sticker.css-run { animation: grain-strobe var(--period, 250ms) linear var(--cycles, 12); }


.about{padding:32px 0 42px;border-top:1px solid var(--rule)}.about .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;color:var(--muted);font-size:12px;margin-top:24px}.about .cols p{margin:0}.footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--rule);padding:22px 24px;font-size:11px;color:var(--muted);text-transform:uppercase}.footer a{color:var(--ink)}
@media(min-width:1700px){.hero-bottom{grid-template-columns:1.25fr 1fr}.lede{font-size:14px}figcaption b{font-size:34px}}
@media(max-width:1000px){.hero-bottom{grid-template-columns:1fr 1fr;gap:32px}.feed{grid-template-columns:repeat(2,minmax(0,1fr))}.tag{display:none}.top nav a{padding:16px}.about .cols{gap:24px}.warning{grid-template-columns:160px minmax(0,1fr);gap:16px}}
@media(max-width:600px){main{padding:0 16px}.top{flex-wrap:wrap}.brand{padding:16px}.top nav{flex:1;justify-content:flex-end}.top nav a{padding:14px 10px;font-size:9px}.top nav a:last-child{display:none}.hero{padding-top:24px}.hero h1{font-size:clamp(130px,33vw,198px);margin:28px 0}.hero-bottom{grid-template-columns:1fr;gap:24px}.hero-title{font-size:52px;max-width:430px}.lede{font-size:12px}.warning{grid-template-columns:1fr;gap:8px;padding:16px;font-size:11px}.section-head{align-items:flex-start}.section-head p{max-width:150px;text-align:right;font-size:9px}.feed{grid-template-columns:1fr;gap:18px}.about .cols{grid-template-columns:1fr;gap:20px}.footer{padding:20px 16px;flex-wrap:wrap}figcaption b{font-size:32px}}
@media(prefers-reduced-motion:reduce){.sticker.css-run{animation:none}}
@media(forced-colors:active){.frame{forced-color-adjust:auto}.warning{border-color:CanvasText}button{border-color:ButtonText}}