/* 🚀 SpeakSlava · Оповіда́ч v1 · Stories — the look ("рушни́к": white linen, forest ink, one red thread)
   Made by 📜🔥🇺🇦 ОПОВІДА́Ч · 2026-09-26. Own file; the shared engine files are untouched. */
@font-face{font-family:"Charis SIL";src:url("fonts/CharisSIL-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Charis SIL";src:url("fonts/CharisSIL-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Fixel Text";src:url("fonts/FixelText-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fixel Text";src:url("fonts/FixelText-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --linen:#F8F8F5; --ink:#1F2B25; --quiet:#5C6862; --faded:#6F7973; --hair:#DADDD6; --thread:#A8322D; --stitch-off:#D3D7D0;
  --serif:"Charis SIL","Gentium Plus",Georgia,serif; --sans:"Fixel Text","Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--linen);color:var(--ink)}
body{font-family:var(--sans);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--thread);outline-offset:3px;border-radius:4px}
.uk{font-family:var(--serif)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

[hidden]{display:none!important}

/* the embroidered band (red rhombuses, one black centre stitch) */
.band{display:flex;justify-content:space-between;width:100%;height:16px}
.band svg{width:16px;height:16px;flex:none}

/* ---------- opening page ---------- */
.open{min-height:100vh;min-height:100dvh;max-width:560px;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 28px max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
.open .top{height:48px;display:flex;align-items:center}
.open .top .home{margin-left:-14px}
.open .body{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:24px}
.open .author{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--quiet)}
.open h1{margin:6px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(52px,17vw,76px);line-height:1.02;letter-spacing:-.5px}
.open .en{margin-top:12px;font-size:15px;color:var(--quiet)}
.open .band{margin:40px 0 36px}
.open .act{font-family:var(--serif);font-size:25px}
.open .act-en{margin-top:2px;font-size:14px;color:var(--quiet)}
.cast{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.cast li{display:flex;flex-direction:column;gap:1px}
.cast .who{font-family:var(--serif);font-style:italic;font-size:20px}
.cast .about{font-size:14px;color:var(--quiet)}
.open .foot{display:flex;flex-direction:column;gap:6px;padding-top:20px}
.btn-main{min-height:56px;border-radius:28px;background:var(--ink);color:var(--linen);text-decoration:none;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer}
.about-play{font-size:15px;color:var(--thread)}
.about-play summary{min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;list-style:none}
.about-play summary::-webkit-details-marker{display:none}
.about-play p{margin:0 0 6px;font-size:14px;line-height:1.55;color:var(--ink)}
.credit{margin-top:14px;font-size:12px;line-height:1.5;color:var(--quiet);text-align:center}

/* ---------- reading page ---------- */
.read{max-width:640px;margin:0 auto;min-height:100vh;min-height:100dvh}
.bar-top{position:sticky;top:0;z-index:5;height:calc(60px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 10px 0;display:flex;align-items:center;justify-content:space-between;background:var(--linen)}
.icon-btn{width:44px;height:44px;border-radius:22px;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;color:var(--ink)}
.running{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--quiet)}
.aa{font-family:var(--serif);font-size:19px}
.scene{padding:8px 28px calc(200px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:22px}
.scene-head{padding:8px 0 4px}
.scene-head .act{font-family:var(--serif);font-size:22px}
.scene-head .act-en{font-size:13px;color:var(--quiet)}
.line{display:flex;flex-direction:column;gap:3px;border:none;background:none;padding:0;text-align:left;cursor:pointer;width:100%}
.line .who{font-family:var(--serif);font-style:italic;font-size:14px}
.line .txt{font-family:var(--serif);font-size:21px;line-height:1.45;color:var(--faded)}
.line.now{gap:8px;padding:6px 0}
.line.now .who{font-size:17px}
.words{display:flex;flex-wrap:wrap;column-gap:12px;row-gap:12px;align-items:flex-start}
.w{display:inline-flex;flex-direction:column;gap:2px}
.w .u{font-family:var(--serif);font-size:29px;line-height:1.3;color:var(--ink);white-space:nowrap}
.line.flash .w .u{color:var(--thread)}
.w .g{font-size:12.5px;line-height:1.2;color:var(--quiet);white-space:nowrap}
.line .nat{font-size:16px;line-height:1.45;color:var(--quiet);margin-top:2px}
.line .old{font-size:13px;color:var(--quiet)}
.line .old b{font-weight:400;font-family:var(--serif);color:var(--ink)}
.no-gloss .w .g{display:none}
.no-gloss .words{row-gap:0;column-gap:9px}
.no-gloss .w .u{line-height:1.42}
.no-en .line .nat{display:none}
.end{margin:18px 0 0;padding-top:22px;border-top:1px solid var(--hair);font-size:14px;line-height:1.55;color:var(--quiet)}
.end .band{margin-bottom:18px}
.load-msg{font-size:16px;line-height:1.5;color:var(--quiet)}
.ctrls.no-play{gap:96px}

.bar-bottom{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--linen);border-top:1px solid var(--hair);padding:16px 28px max(22px,env(safe-area-inset-bottom))}
.bar-bottom .inner{max-width:584px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.stitches{display:flex;justify-content:space-between;align-items:center}
.stitches svg{width:14px;height:14px;flex:none}
.ctrls{display:flex;align-items:center;justify-content:center;gap:40px}
.ctrls .icon-btn{width:48px;height:48px;border-radius:24px}
.ctrls .icon-btn[disabled]{opacity:.3;cursor:default}
.play{width:64px;height:64px;border-radius:32px;border:1.5px solid var(--ink);background:none;display:flex;align-items:center;justify-content:center;cursor:pointer}

/* the Aa sheet */
.scrim{position:fixed;inset:0;z-index:9;background:rgba(31,43,37,.28)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--linen);border-top:1px solid var(--hair);border-radius:20px 20px 0 0;padding:20px 28px max(28px,env(safe-area-inset-bottom))}
.sheet .inner{max-width:584px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.sheet h2{margin:0;font-size:17px;font-weight:700}
.sheet .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.done{min-height:44px;padding:0 4px;border:none;background:none;color:var(--thread);font-size:16px;font-weight:700;cursor:pointer}
.sw{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:none;border-bottom:1px solid var(--hair);background:none;padding:0;text-align:left;cursor:pointer;font-size:16px;width:100%}
.sw .track{width:44px;height:26px;border-radius:13px;background:var(--stitch-off);position:relative;flex:none;transition:background .15s}
.sw .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:10px;background:var(--linen);transition:left .15s}
.sw[aria-pressed="true"] .track{background:var(--ink)}
.sw[aria-pressed="true"] .track::after{left:21px}
.sheet h3{margin:18px 0 0;font-size:17px}
.voice-row{min-height:52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--hair)}
.voice-row .who{font-family:var(--serif);font-style:italic;font-size:18px}
.voice-btn{min-height:44px;border:none;background:none;font-size:16px;cursor:pointer;display:flex;align-items:center;gap:6px}
.speeds{display:flex;gap:10px;margin-top:6px}
.speeds button{flex:1;min-height:44px;border-radius:22px;border:1px solid var(--hair);background:none;cursor:pointer;font-size:15px}
.speeds button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--linen)}
.sheet .note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--quiet)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}