/* Yorick static reader.

   Extracted from generate.mjs so pages link it once instead of inlining it
   into every one of them. Tokens come from constants/theme.ts; text metrics
   from app/perform.tsx. Light-only, like the app.

   The per-character highlight rules are NOT here: they depend on which
   characters appear in a given scene, so each page carries its own small
   <style> block for those. */

:root{--bg:#f5f0e8;--ink:#1a1a1a;--ink-strong:#000;--accent:#8b7355;--deep:#4a2c17;--rule:#c4b49a;--muted:#5f5a52;--surface:#ede7d9;--on-accent:#f5f0e8;--art-filter:none;--pad:1.25rem}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:'Cormorant',Georgia,'Times New Roman',serif;font-size:1.25rem;line-height:1.5;margin:0}
.page{max-width:46rem;margin:0 auto;padding:1.5rem var(--pad) 4rem}
a{color:var(--deep)}
/* brand row */
.brand{display:flex;align-items:baseline;gap:.6rem;justify-content:space-between;padding-bottom:.5rem}
.brand .name{font-weight:700;font-size:1.3rem;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--ink-strong)}
.breadcrumb{font-size:.9rem;color:var(--muted)}
.breadcrumb a{color:var(--muted)}
/* folio header — mirrors PlayFolioHeader */
.folio-head{text-align:center;padding:.5rem 0 0}
.folio-art{display:block;margin:0 auto;width:auto;max-width:100%;height:auto;filter:var(--art-filter)}
.folio-art.ornament{margin-top:.4rem}
h1{font-weight:700;font-size:1.75rem;line-height:1.2;letter-spacing:.04em;color:var(--deep);text-align:center;margin:1rem 0 .2rem}
.location{font-style:italic;font-size:1.05rem;color:var(--muted);text-align:center;margin:.1rem 0 0}
.famous-link{text-align:center;font-size:1.05rem;margin:.8rem 0 0}
.preview-note{text-align:center;font-size:.95rem;font-style:italic;color:var(--muted);margin:.5rem 0 0}
/* folio divider — mirrors FolioDivider (rough rule + diamond) */
.folio-divider{position:relative;height:20px;display:flex;align-items:center;justify-content:center;margin:1.2rem 0;user-select:none}
.folio-divider span{color:var(--rule);font-size:14px;line-height:1;position:relative}
.folio-divider svg,.rough-svg{position:absolute;inset:0;pointer-events:none}
/* rough-bordered elements — mirrors RoughBorder/RoughButton */
[data-rough]{position:relative}
[data-rough]>:not(.rough-svg){position:relative}
.rough-btn{font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:0;cursor:pointer;color:var(--ink);background:none;text-transform:uppercase;letter-spacing:.09em;font-weight:600;font-size:.85rem;padding:.5rem 1rem;white-space:nowrap}
.rough-btn.primary{background:var(--accent);color:var(--on-accent)}
.rough-btn:hover{opacity:.75}
/* cast picker */
.cast-picker{padding:1rem 1.1rem;margin:1.6rem 0 2.2rem}
.cast-picker p{margin:0 0 .7rem;font-size:1.05rem;font-style:italic;color:var(--muted);text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center}
.chip{font-size:.78rem;padding:.4rem .85rem}
.chip.active{background:var(--accent);color:var(--on-accent)}
/* stage directions — perform stageDirText: italic 16 muted */
.stage{text-align:center;color:var(--muted);margin:1.8rem 0;font-size:1rem}
.stage.embedded{text-align:right;margin:.35rem 0;font-size:.95rem}
/* speeches — metrics from perform lineRowStyles */
.speech{margin:0 0 1.9rem;padding-left:var(--pad);border-left:3px solid transparent}
.speech-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.15rem}
.speaker{font-weight:600;font-size:.85rem;letter-spacing:.115em;text-transform:uppercase;color:var(--ink);margin:0}
.inline-sd,.you-tag{font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:.85rem;color:var(--muted);margin-left:.4rem}
.you-tag{display:none}
.speech-actions{display:flex;gap:.5rem}
.listen{font-size:.72rem;padding:.35rem .8rem}
.listen .icon{font-size:.85em}
.listen[data-state="loading"]{opacity:.55}
.listen[data-state="playing"]{background:var(--accent);color:var(--on-accent)}
.listen[data-state="unavailable"],.listen[data-state="demo"]{opacity:.4;cursor:default}
.rehearse{display:none;font-size:.72rem;padding:.35rem .8rem}
.pline{margin:0;font-size:1.25rem;line-height:1.875rem;position:relative;text-indent:-1.4rem;padding-left:1.4rem}
.pline[data-n]::before{content:attr(data-n);position:absolute;left:-2.9rem;top:.3em;font-size:.8rem;color:var(--rule);text-indent:0;width:2rem;text-align:right}
/* footnotes — perform tooltip: surface bg, 1px accent border, r8 */
.fnref{font-family:inherit;font-size:.62em;vertical-align:super;line-height:1;border:0;background:none;color:var(--accent);cursor:pointer;padding:0 .12em;font-weight:700}
.fnref:hover{color:var(--deep)}
.fnbody{font-size:1rem;line-height:1.5rem;color:var(--ink);background:var(--surface);border:1px solid var(--accent);border-radius:8px;margin:.45rem 0 .55rem;padding:.5rem .8rem}
.fn-num{font-weight:700;color:var(--accent)}
/* annotations */
.notes{margin:.8rem 0 0;border:1px solid var(--accent);border-radius:8px;background:var(--surface)}
.notes summary{cursor:pointer;padding:.5rem .9rem;font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);list-style-position:inside}
.notes[open] summary{border-bottom:1px solid var(--rule)}
.notes-body{padding:.3rem 1rem .8rem}
.notes-body h4{margin:.8rem 0 .1rem;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);font-weight:600}
.notes-body p{margin:.1rem 0 .3rem;font-size:1.1rem;line-height:1.5rem}
/* CTA cards */
.cta-card{text-align:center;padding:1.7rem 1.5rem 1.9rem;margin:2.6rem 0}
.cta-card h2{margin:0 0 .5rem;font-size:1.5rem;font-weight:600;color:var(--ink-strong)}
.cta-card p{margin:0 auto 1.2rem;max-width:33rem;font-size:1.15rem;line-height:1.5}
.cta-button{font-size:.95rem;padding:.7rem 1.6rem}
.cta-card .store-links{margin:1.1rem auto 0;font-size:.95rem;color:var(--muted)}
.store-links a{color:inherit}
/* dialog */
dialog{background:var(--bg);color:var(--ink);border:0;max-width:26rem;padding:2rem 1.8rem;text-align:center;font-family:inherit}
dialog::backdrop{background:rgba(26,20,12,.55)}
dialog .skull{color:var(--accent);font-size:1.4rem;margin:0}
dialog h2{margin:.3rem 0 .6rem;font-size:1.5rem;font-weight:600;color:var(--ink-strong)}
dialog p{font-size:1.1rem;line-height:1.5;margin:.4rem 0}
dialog .soon{color:var(--muted);font-style:italic}
dialog .stub-note{font-size:.85rem;color:var(--muted)}
dialog .close{margin-top:1rem}
/* footer */
footer{margin-top:3rem;font-size:.95rem;line-height:1.5;color:var(--muted)}
footer p{margin:.3rem 0}
@media (max-width: 900px){.pline[data-n]::before{display:none}}
@media (max-width: 560px){.speech{padding-left:.6rem}body{font-size:1.15rem}.pline{font-size:1.15rem;line-height:1.7rem}}

/* "What Yorick is" — the boilerplate that travels with every page so a search
   result or an LLM summary has something to say about the product, not just
   about the scene. Quiet by design: it must not compete with the text. */
.about{margin:2.5rem 0 0;padding:1.4rem 1.3rem;border:1px solid var(--rule);background:var(--surface)}
.about h2{margin:0 0 .6rem;font-size:1.25rem;font-weight:600;color:var(--deep);text-align:left}
.about p{margin:0 0 .7rem;font-size:1.02rem;line-height:1.55;color:var(--ink)}
.about p:last-child{margin-bottom:0;font-size:.95rem;color:var(--muted)}

/* Editorial layer — monologue collections. Rows rather than cards: the title is
   the famous line, which is what the visitor is scanning for. */
.mono-list{margin:1.5rem 0 0;padding:0;list-style:none}
.mono{padding:1rem 0;border-bottom:1px solid var(--rule)}
.mono:last-child{border-bottom:0}
.mono-title{font-size:1.2rem;font-weight:600;color:var(--deep);text-decoration:none}
.mono-title:hover{text-decoration:underline}
.mono-meta{margin:.25rem 0 0;font-size:.95rem;color:var(--muted)}
.mono-opens{margin:.35rem 0 0;font-size:1rem;font-style:italic;color:var(--ink)}
/* The positional anchor sits inside the article without affecting layout. */
.anchor{display:block;height:0;overflow:hidden}

/* Controls sit AFTER the speech text, not in its header.
   A textContent pass over an <article> concatenates everything inside it, so
   buttons in the header landed mid-sentence in extracted text:
   "Nick Bottom Awaking- your part >ListenRehearse -> When my cue comes...".
   That is noise in exactly the channel this reader exists to serve. Below the
   lines they read as what they are, and the visual result is the same. */
.speech-actions{display:flex;gap:.5rem;margin:.5rem 0 0;flex-wrap:wrap}