@font-face{font-family:Silkscreen;src:url('/assets/fonts/Silkscreen-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/SpaceGrotesk.woff2') format('woff2');font-weight:300 700;font-display:swap}
:root{--font-ui:'Space Grotesk',Arial,sans-serif}
body{font-family:var(--font-ui)}
.ascii-heading{display:block;width:100%;max-width:100%;margin:0;pointer-events:none}
h1.has-ascii-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.brand{letter-spacing:.04em}.workbench-kicker:before,.style-index:before{content:'> ';opacity:.65}
@media(forced-colors:active){.ascii-heading{display:none}h1.has-ascii-heading{position:static;width:auto;height:auto;margin:0;clip-path:none;white-space:normal}}
h1{font-family:Silkscreen,'Courier New',monospace;font-weight:400;font-size:clamp(42px,5.1vw,72px);line-height:1.15;letter-spacing:-.075em;max-width:13ch;background:none;color:var(--ink);text-wrap:balance}
h2,h3,.workbench-heading h2,.style-copy h3{font-family:var(--font-ui);letter-spacing:-.045em}
.brand{font-family:Silkscreen,monospace;font-size:13px;font-weight:400;letter-spacing:-.06em}
.eyebrow,.workbench-kicker,.style-index,.art-label{font-family:Silkscreen,monospace;letter-spacing:0;font-size:10px}
.lead{font-size:17px;line-height:1.75;max-width:35ch}.hero-primary,.hero-secondary,nav a{font-family:var(--font-ui)}
.hero-stage{overflow:clip}.hero-stage:before{content:'';inset:0;z-index:-2;background-image:linear-gradient(#a8c3b309 1px,transparent 1px),linear-gradient(90deg,#a8c3b309 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(transparent,black 30%,transparent 95%);pointer-events:none}
.hero-stage:after{content:'';inset:8% 5%;z-index:-2;background:radial-gradient(ellipse at 30% 40%,#8370d51a,transparent 55%),radial-gradient(ellipse at 80% 60%,#25b8ba15,transparent 55%);animation:ambient-drift 14s ease-in-out infinite alternate;pointer-events:none}
.hero-copy:before{content:'[ 01 ]';position:absolute;right:13%;top:30px;color:var(--accent);font:10px Silkscreen,monospace;opacity:.45;animation:glyph-drift 9s ease-in-out infinite alternate;pointer-events:none}
.hero-proof{animation:art-arrive 1.2s ease-out both}.hero-copy{animation:copy-arrive .8s ease-out both}
.motion-toggle{position:absolute;bottom:18px;left:0;z-index:2;border:1px solid var(--line);border-radius:20px;background:var(--page);color:var(--muted);padding:7px 12px;font:10px var(--font-ui)}
html[data-motion=paused] .hero-stage:after,html[data-motion=paused] .hero-copy:before{animation-play-state:paused}
@keyframes ambient-drift{from{transform:translate(-2%,0);opacity:.45}to{transform:translate(3%,3%);opacity:1}}
@keyframes glyph-drift{from{transform:translateY(0);opacity:.3}to{transform:translateY(12px);opacity:.65}}
@keyframes art-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:.96;transform:translateY(0)}}
@keyframes copy-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:767px){h1{font-size:clamp(34px,8.8vw,52px);line-height:1.2;max-width:14ch}.lead{font-size:15px}.hero-stage{padding-bottom:55px}.hero-stage:before,.hero-stage:after{display:block}.hero-copy:before{display:none}.brand{font-size:11px}.motion-toggle{bottom:13px}.eyebrow{font-size:9px}}
/* Match the ASCII heading canvas footprint before JS replaces the visible title. */
@media(max-width:515px){.hero-copy h1:not(.has-ascii-heading){min-height:calc((100vw - 36px) * .555)}}
@media(min-width:516px) and (max-width:767px){.hero-copy h1:not(.has-ascii-heading){min-height:min(250px,calc((100vw - 36px) * .391))}}
@media(prefers-reduced-motion:reduce){.hero-stage:after,.hero-copy:before,.hero-copy,.hero-proof{animation:none!important}.motion-toggle{display:none}}
@media(forced-colors:active){.hero-stage:before,.hero-stage:after,.hero-copy:before{display:none}h1{color:CanvasText}}