/* C085 Eyes Closed: "Curtain Call". Self-host fonts in fonts/. */
@font-face{font-family:"Instrument Serif";src:local("Instrument Serif"),url(fonts/InstrumentSerif-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Instrument Serif";src:local("Instrument Serif Italic"),url(fonts/InstrumentSerif-Italic.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"Space Grotesk";src:local("Space Grotesk"),url(fonts/SpaceGrotesk-Variable.woff2) format("woff2");font-weight:300 700;font-display:swap}
:root{--ec-velvet:#0E0B10;--ec-velvet-2:#1B141E;--ec-chalk:#F1EEE6;--ec-chalk-dim:#A9A39A;--ec-board:#22302B;--ec-red:#8E1B2A;--ec-red-hi:#B8283B;--ec-gold:#D9B26A;
 --ec-serif:"Instrument Serif",Didot,"Times New Roman",serif;--ec-sans:"Space Grotesk",system-ui,sans-serif;--ec-lift:900ms}
.ec{margin:0;min-height:100dvh;background:var(--ec-velvet);color:var(--ec-chalk);font-family:var(--ec-sans)}
.ec-stage{max-width:1200px;margin:0 auto;padding:18px 16px 28px;display:grid;gap:18px}
@media(min-width:900px){.ec-stage{grid-template-columns:360px 1fr;gap:48px;padding:44px 56px;align-items:center}}
.ec-title{font:italic 400 clamp(46px,7vw,96px)/.9 var(--ec-serif);margin:0}
.ec-prompt{font:400 clamp(28px,4vw,44px)/1.1 var(--ec-serif)}
.ec-prompt em{color:var(--ec-gold)}
.ec-proscenium{position:relative;border:10px solid var(--ec-velvet-2);outline:2px solid var(--ec-gold);outline-offset:-14px;background:var(--ec-board);overflow:hidden}
.ec-proscenium canvas,.ec-proscenium svg{display:block;width:100%;aspect-ratio:1/1;touch-action:none}
@media(min-width:900px){.ec-proscenium canvas,.ec-proscenium svg{aspect-ratio:4/3}}
.ec-board-tex{background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.05),transparent 60%),var(--ec-board)}
/* curtain: pleated stage red, covers board while drawing */
.ec-curtain{position:absolute;inset:0;z-index:2;transform-origin:top;transition:transform var(--ec-lift) cubic-bezier(.6,-.1,.3,1.15);
 background:repeating-linear-gradient(90deg,var(--ec-red) 0 18px,var(--ec-red-hi) 26px,var(--ec-red) 34px,#5E0F1B 44px);
 box-shadow:inset 0 -26px 0 -10px var(--ec-gold);display:grid;place-items:center;pointer-events:none}
.ec-curtain span{font:italic 400 28px var(--ec-serif);color:var(--ec-chalk);background:rgba(14,11,16,.55);padding:6px 16px}
.ec-curtain.is-up{transform:translateY(-101%)}
.ec-chip{font:500 14px var(--ec-sans);padding:10px 14px;min-height:44px;border:1.5px solid var(--ec-chalk-dim);background:transparent;color:var(--ec-chalk);cursor:pointer;border-radius:2px}
.ec-chip[aria-pressed=true]{border-color:var(--ec-gold);color:var(--ec-gold)}
.ec-btn{font:600 15px var(--ec-sans);letter-spacing:.06em;text-transform:uppercase;padding:14px 22px;min-height:48px;border:0;background:var(--ec-chalk);color:var(--ec-velvet);cursor:pointer}
.ec-btn--ghost{background:transparent;color:var(--ec-chalk);box-shadow:inset 0 0 0 1.5px var(--ec-chalk-dim)}
.ec-btn:focus-visible,.ec-chip:focus-visible{outline:3px solid var(--ec-gold);outline-offset:3px}
.ec-row{display:flex;flex-wrap:wrap;gap:10px}
.ec-fine{font-size:13px;color:var(--ec-chalk-dim);max-width:44ch}
.ec-strip{display:flex;gap:10px;overflow-x:auto}
.ec-strip figure{margin:0;flex:none;width:120px;border:2px solid var(--ec-velvet-2);outline:1px solid var(--ec-gold)}
.ec-strip figcaption{font:italic 14px var(--ec-serif);color:var(--ec-chalk-dim);padding:2px 6px}
/* motion: chalk draw-on */
.ec-chalkline{stroke:var(--ec-chalk);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:url(#chalk)}
.ec-chalkline.is-drawn{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);animation:ec-draw 1400ms ease-out 500ms forwards}
@keyframes ec-draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.ec-curtain{transition:opacity 150ms}.ec-curtain.is-up{transform:none;opacity:0}.ec-chalkline.is-drawn{animation:none;stroke-dashoffset:0}}
/* --- build additions (Engineer) --- */
*{box-sizing:border-box}[hidden]{display:none!important}
.ec-nav{font:500 12px var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-chalk-dim);text-decoration:none}
.ec-nav:focus-visible{outline:3px solid var(--ec-gold)}
.ec-side{display:grid;gap:14px;align-content:start}
.ec-lede{font-size:17px;line-height:1.5;max-width:34ch;margin:0}
.ec-field{width:100%;font:16px var(--ec-sans);padding:12px;border:1.5px solid var(--ec-chalk-dim);background:transparent;color:var(--ec-chalk)}
.ec-field:focus{outline:none;border-color:var(--ec-gold)}
.ec-msg{min-height:1.3em;font:italic 22px var(--ec-serif);margin:0;color:var(--ec-gold)}
.ec-label{font:500 12px var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-chalk-dim);margin:0}
.ec-strip canvas{display:block;width:100%;aspect-ratio:1/1;background:var(--ec-board)}
.ec-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ec-chalk);color:var(--ec-velvet);padding:10px 16px;font:14px var(--ec-sans);z-index:9}
.ec-proscenium canvas{cursor:crosshair}
.ec-kbhint{margin:10px 0 0}

/* visitor-text wrap: long unbroken words never widen the page */
body{overflow-wrap:anywhere}
input,textarea{min-width:0;max-width:100%}