/* Reading and control text use the local system sans stack. Display type and
   original character art retain their own visual language. Load after the scene CSS. */
:root {
  --reading-font: Arial, Helvetica, sans-serif;
  --reading-color: #c8c1ce;
  --caption-color: #aaa2b2;
}
body { font-family: var(--reading-font); font-size: 16px; line-height: 1.55; }
button, a { touch-action: manipulation; }
button { font-family: var(--reading-font); }
.masthead, .chapter-nav, .chapter-label, .edition-label, .act-label,
.scene-footer, .character-id, .launch-status, .fine-print,
.campaign-downloads, footer { font-family: var(--reading-font); }
.collection-link, .motion-toggle, .ink-link, .outline-button,
.scene-footer button, .campaign-downloads button { font-size: 14px; }
.collection-link, .motion-toggle, .replay-link { min-height: 44px; display: inline-flex; align-items: center; }
.collection-link { color: #c8c1ce; }
.motion-toggle { gap: 10px; letter-spacing: .04em; }
.motion-label, .is-reduced .motion-label { display: inline; font-size: 14px; }
.chapter-nav { gap: 3px; }
.chapter-nav a { min-width: 44px; min-height: 44px; font-size: 12px; opacity: .76; }
.chapter-nav a.active { opacity: 1; }
.chapter-label, .hero-ink > .chapter-label, .edition-label,
.edition-label span, .act-label { font-size: 12px; line-height: 1.55; letter-spacing: .06em; }
.edition-label { color: #c8c1ce; }
.edition-label span { color: #aaa2b2; letter-spacing: .04em; }
.hero-caption { line-height: 1.12; color: #b7aebe; }
.ink-link { line-height: 1.5; min-height: 44px; }
.scene-footer, .scroll-prompt { font-size: 12px; line-height: 1.5; letter-spacing: .03em; }
.scene-footer { color: #aaa2b2; }
.scene-footer button { color: #c8c1ce; }
.act-label { color: #aaa2b2; }
.misfits-stage .act-label, .misfits-stage .scene-footer { color: #454a42; }
.line-two { color: #65715d; }
.character-id { font-size: 12px; line-height: 1.45; letter-spacing: .035em; color: #30362c; padding: 6px 9px; }
.misfits-caption .ink-link { font-size: 14px; }
.token-stage { min-height: 900px; }
.token-intro { font-family: var(--reading-font); font-size: 16px; line-height: 1.6; color: #c8c1ce; }
.launch-status { font-size: 12px; line-height: 1.6; letter-spacing: .035em; color: #c8c1ce; }
.status-mark { flex-shrink: 0; }
.outline-button { min-height: 60px; line-height: 1.4; letter-spacing: .04em; }
.fine-print { font-size: 13px; line-height: 1.6; color: #aaa2b2; }
.campaign-heading > p { font-family: var(--reading-font); font-size: 16px; line-height: 1.6; color: #b8b0c0; }
.campaign-downloads { gap: 32px; }
.campaign-downloads button { line-height: 1.5; gap: 18px; }
.campaign-downloads span { font-size: 12px; color: #aaa2b2; }
footer { font-size: 12px; line-height: 1.6; color: #aaa2b2; align-items: center; }
footer a { min-height: 44px; display: inline-flex; align-items: center; }
dialog > p:not(.chapter-label) { font-family: var(--reading-font); font-size: 16px; line-height: 1.6; color: #c8c1ce; }
dialog .dialog-note { font-size: 13px !important; color: #aaa2b2 !important; }
.close-dialog { min-width: 44px; min-height: 44px; }
.pencil-note { font-size: 17px; line-height: 1.2; color: #b7aebe; }
.handwritten { font-size: 20px; line-height: 1.3; }
@media (max-width: 760px) {
  .masthead { gap: 8px; }
  .small-wordmark { font-size: 22px; }
  .masthead .collection-link { font-size: 12px; line-height: 1.3; max-width: 124px; }
  .motion-toggle { padding: 8px 0 8px 6px; gap: 6px; }
  .motion-icon { gap: 2px; }
  .motion-label, .is-reduced .motion-label { display: inline; font-size: 14px; letter-spacing: 0; max-width: 76px; text-align: left; line-height: 1.25; }
  .chapter-nav { right: 7px; }
  .chapter-nav a { font-size: 12px; min-width: 34px; min-height: 44px; }
  .edition-label { font-size: 12px; line-height: 1.55; top: 96px; }
  .edition-label span, .chapter-label, .hero-ink > .chapter-label,
  .act-label, .token-copy > .chapter-label { font-size: 12px; }
  .edition-label span { display: block; max-width: 290px; }
  .hero-ink > .chapter-label { max-width: 300px; }
  .hero-caption { font-size: 24px; line-height: 1.1; }
  .descend { font-size: 14px; margin-top: 8px; }
  .pencil-note { font-size: 15px; }
  .scene-footer { font-size: 12px; line-height: 1.4; gap: 8px 16px; flex-wrap: wrap; bottom: 15px; }
  .scene-footer button { font-size: 14px; }
  .scroll-prompt { font-size: 12px; }
  .misfits-stage .scene-footer { font-size: 12px; }
  .misfits-stage .scene-footer > span:first-child { max-width: 230px; }
  .character-id { font-size: 12px; line-height: 1.4; width: 140px; max-width: 140px; white-space: normal; }
  .punk .character-id { left: 25%; }
  .misfits-caption .ink-link { font-size: 14px; }
  .token-stage, .is-reduced .token-stage { min-height: 970px; }
  .token-copy { left: 10%; right: 10%; top: 44%; }
  .token-intro { font-size: 16px; line-height: 1.55; }
  .launch-status { font-size: 12px; line-height: 1.5; max-width: 290px; }
  .fine-print { font-size: 13px; line-height: 1.6; margin-top: 14px; }
  .outline-button { font-size: 14px; min-width: 250px; }
  .handwritten { font-size: 16px; }
  .campaign-heading > p { font-size: 16px; line-height: 1.55; }
  .campaign-downloads button { font-size: 14px; flex-wrap: wrap; gap: 3px 12px; padding-block: 18px; }
  .campaign-downloads span { font-size: 12px; }
  footer { font-size: 12px; gap: 8px 20px; }
  dialog > p:not(.chapter-label) { font-size: 16px; }
}
dialog{max-height:calc(100svh - 32px);overflow-y:auto;overflow-x:hidden}
dialog .close-text{min-width:0;max-width:100%;width:100%;gap:12px;text-align:left}
@media(max-width:760px){dialog h2{font-size:clamp(38px,13.8vw,54px)}dialog{padding-inline:22px}}

.mosaic-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:12px;color:#aaa2b2}.mosaic-controls button{font-size:14px;min-height:44px;color:#c8c1ce;padding:4px 0}.mosaic-controls button:hover{color:var(--acid)}.mosaic-controls button:disabled{opacity:.5;cursor:wait}@media(max-width:760px){.mosaic-controls{align-items:flex-start;flex-direction:column;gap:0}.mosaic-controls>span{font-size:11px}}