/* Existing site tokens and layout remain authoritative. */
#hero.ascii-hero{background:#191a17;color:#f2ede5;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,4vw,64px);min-height:calc(100svh - var(--outer-gap)*2);overflow:hidden;isolation:isolate}
.ascii-topline{display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#aaa99f;z-index:2}
.ascii-status{display:flex;align-items:center;gap:8px}.ascii-status:before{content:'';width:6px;height:6px;border-radius:50%;background:#ffb200}
.ascii-stage{position:relative;width:100%;height:clamp(260px,43vh,490px);flex:1;min-height:260px;margin:20px auto;max-width:1100px;pointer-events:auto}
.ascii-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s}
.ascii-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-weight:900;font-size:clamp(70px,13vw,190px);line-height:.85;letter-spacing:-.08em;text-align:center;color:#ffb200}
.ascii-stage.is-ready canvas{opacity:1}.ascii-stage.is-ready .ascii-fallback{visibility:hidden}
.ascii-footer{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;z-index:2;width:100%}
#hero .ascii-copy h1{font-family:var(--display);font-size:clamp(32px,3.5vw,50px);line-height:1.2;letter-spacing:-.04em;margin:0 0 12px;color:#f2ede5}
.ascii-copy p{font-size:clamp(14px,1.15vw,17px);line-height:1.8;color:#c0beb5;max-width:560px;margin:0}.ascii-copy .ascii-role{color:#f2ede5;margin-bottom:6px}
.ascii-controls{display:flex;gap:14px;flex-direction:column;align-items:flex-end}.ascii-controls .button{background:#ffb200;border-color:#ffb200;color:#171714;min-width:150px}
.ascii-pause{border:0;background:transparent;color:#b4b2a7;padding:8px 0;font:inherit;font-size:12px;cursor:pointer;min-height:36px}.ascii-pause:hover{color:#ffb200}.ascii-pause[hidden]{display:none}
.ascii-hint{font-size:10px;letter-spacing:.07em;color:#898a7d;margin:12px 0 0;min-height:15px}
@media(hover:hover) and (pointer:fine){.work-series-all span,.button span[aria-hidden]{display:inline-block;transition:transform .3s ease}.work-series-all:hover span,.button:hover span[aria-hidden]{transform:translate(3px,-2px)}.preview-card img{transition:transform .45s ease}.preview-card:hover img{transform:scale(1.025)}}
@media(max-width:1024px){#hero.ascii-hero{min-height:calc(100svh - 64px - var(--outer-gap)*2)}.ascii-stage{height:38vh}}
@media(max-width:600px){#hero.ascii-hero{padding:26px 24px;min-height:calc(100svh - 84px);gap:8px}.ascii-topline{font-size:9px;letter-spacing:.05em}.ascii-stage{min-height:210px;height:31vh;margin:12px auto;flex:1}.ascii-footer{grid-template-columns:1fr;gap:20px}.ascii-controls{align-items:center;flex-direction:row;justify-content:space-between}.ascii-controls .button{min-width:140px}.ascii-copy p{font-size:14px}.ascii-hint{display:none}.ascii-copy h1{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.ascii-stage canvas,.work-series-all span,.button span[aria-hidden],.preview-card img{transition:none!important}.preview-card:hover img{transform:none}}

@keyframes ascii-copy-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){.ascii-copy h1{animation:ascii-copy-enter .55s ease-out both}.ascii-copy p{animation:ascii-copy-enter .55s .1s ease-out both}.ascii-controls .button{animation:ascii-copy-enter .55s .2s ease-out both}}