/* Novella — reading page. Per-story colours come from --accent --deep --paper --glow */
:root{
  --serif:"Noto Serif Thai",Georgia,serif; --sans:"IBM Plex Sans Thai",system-ui,sans-serif;
  --fs:19px; --bg:var(--paper); --fg:#2B231C; --soft:#6E5A47; --rule:rgba(74,58,44,.18); --card:rgba(255,252,246,.7);
}
[data-theme="dark"]{--bg:#1C1712;--fg:#E9DFCF;--soft:#B5A58F;--rule:rgba(233,223,207,.16);--card:rgba(255,255,255,.04)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs)/1.9 var(--serif);transition:background .3s,color .3s}
a{color:var(--accent)}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:20}
.progress span{display:block;height:100%;width:0;background:var(--accent)}
.topbar{position:fixed;top:3px;left:0;right:0;z-index:15;display:flex;align-items:center;gap:12px;padding:8px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);font-family:var(--sans);font-size:.85rem;transform:translateY(-110%);transition:transform .3s}
.topbar.show{transform:none}
.back{color:var(--soft);text-decoration:none}
.tb-title{flex:1;text-align:center;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools{display:flex;gap:6px}
.tools button{font:inherit;background:transparent;color:var(--fg);border:1px solid var(--rule);border-radius:999px;padding:4px 10px;cursor:pointer}
.tools button:hover{border-color:var(--accent);color:var(--accent)}
.toc{position:fixed;top:52px;right:16px;z-index:16;background:var(--bg);border:1px solid var(--rule);border-radius:14px;padding:16px 20px;box-shadow:0 12px 40px rgba(0,0,0,.18);font-family:var(--sans);max-width:320px}
.toc ol{list-style:none;margin:0;padding:0}.toc li{margin:6px 0}
.toc a{text-decoration:none;color:var(--fg)}.toc a span{color:var(--accent);font-weight:600}
.toc-h{font:600 .75rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:0 0 8px}

/* cover — earth tones per story */
.cover{min-height:100vh;display:grid;place-items:center;text-align:center;color:#F6EEDF;padding:80px 24px;position:relative;overflow:hidden;
  background:var(--cover-img,none) center/cover, radial-gradient(ellipse at 50% 120%,var(--accent) 0%,var(--deep) 62%)}
.cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.05) 40%,rgba(0,0,0,.35));pointer-events:none}
.motif-topo .cover::after{content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;
  background:repeating-radial-gradient(circle at 70% 80%,transparent 0 22px,var(--glow) 23px 24px)}
.motif-waves .cover::after{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;
  background:repeating-linear-gradient(170deg,transparent 0 18px,var(--glow) 19px 20px)}
.motif-grid .cover::after{content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;
  background:linear-gradient(var(--glow) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,var(--glow) 1px,transparent 1px) 0 0/40px 40px}
.cover-in{position:relative;z-index:1;max-width:760px}
.led{display:inline-block;font:500 .75rem/1 ui-monospace,monospace;letter-spacing:.2em;color:var(--glow);border:1px solid color-mix(in srgb,var(--glow) 50%,transparent);padding:8px 14px;border-radius:4px;margin:0 0 28px;animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}
.kicker{font:500 .9rem var(--sans);letter-spacing:.08em;color:var(--glow);margin:0 0 10px}
.cover h1{font-size:clamp(2.4rem,7vw,4.6rem);line-height:1.2;margin:0 0 18px;font-weight:700;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.sub{font-size:1.05rem;opacity:.9;max-width:62ch;margin:0 auto 14px;font-family:var(--sans);font-weight:300}
.cover-meta{font:400 .85rem var(--sans);opacity:.75;margin:0 0 34px}
.epigraph{margin:0 auto 40px;max-width:52ch;font-style:italic;border-left:2px solid var(--glow);padding:4px 0 4px 18px;text-align:left}
.epigraph p{margin:0}.epigraph cite{display:block;font:normal .8rem var(--sans);opacity:.7;margin-top:6px}
.scroll{color:#F6EEDF;text-decoration:none;font:400 .85rem var(--sans);opacity:.8;animation:bob 2.4s ease-in-out infinite;display:inline-block}
@keyframes bob{50%{transform:translateY(6px)}}

/* story */
.story{max-width:40em;margin:0 auto;padding:40px 24px 80px}
.act{padding-top:56px}
.act-head{text-align:center;margin:0 0 40px;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.act-kicker{font:600 .75rem var(--sans);letter-spacing:.3em;color:var(--accent);margin:0}
.act-num{font-size:1rem;color:var(--soft);margin:4px 0}
.act-head h2{font-size:clamp(1.7rem,4vw,2.3rem);margin:0;line-height:1.35}
.act-sub{color:var(--soft);font-style:italic;margin:.4em 0 0;font-size:.95em}
.prose p{margin:0 0 1.15em;text-align:justify;text-justify:inter-character}
.scene{font:600 .85rem var(--sans);letter-spacing:.06em;color:var(--accent);margin:2.4em 0 1em;padding-top:1.2em;border-top:1px dashed var(--rule)}
.scene-tag{font-weight:400;color:var(--soft)}
.case{margin:2em 0;background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:8px;padding:16px 20px;font:400 .88em/1.7 var(--sans)}
.case figcaption{font-weight:600;font-size:.8em;letter-spacing:.06em;color:var(--accent);margin-bottom:8px;text-transform:uppercase}
.case ul{margin:0;padding-left:1.1em}.case li{margin:.25em 0}
.memory{margin:2em 0;padding:18px 22px;background:color-mix(in srgb,var(--glow) 18%,transparent);border-radius:10px;font:300 .85em/1.8 var(--sans);color:var(--soft)}
.pull{margin:2em 0;font-size:1.25em;line-height:1.6;border-left:3px solid var(--accent);padding-left:20px;color:var(--fg)}
.pull cite{display:block;font:normal .6em var(--sans);color:var(--soft)}
.img{margin:2em 0}.img img{width:100%;border-radius:8px}.img figcaption{font:.8em var(--sans);color:var(--soft);text-align:center}
.orn{border:0;text-align:center;margin:2.4em 0}.orn::after{content:"⁂";color:var(--accent);font-size:1.3em}
.endline{text-align:center!important;color:var(--accent);letter-spacing:.3em;margin-top:3em!important}
.story-end{margin-top:56px;padding-top:28px;border-top:1px solid var(--rule);font-family:var(--sans);font-size:.88rem;color:var(--soft)}
.tags span{display:inline-block;border:1px solid var(--rule);border-radius:999px;padding:2px 12px;margin:0 6px 6px 0}
.credit{font-size:.82rem}
.end-nav{display:flex;gap:12px;margin-top:20px}
.end-nav a{flex:1;text-align:center;padding:12px;border:1px solid var(--rule);border-radius:999px;text-decoration:none;color:var(--fg)}
.end-nav a:hover{border-color:var(--accent);color:var(--accent)}

@media (max-width:600px){.prose p{text-align:left}.tb-title{display:none}.toc{left:12px;right:12px;max-width:none}}
@media print{.topbar,.progress,.toc,.scroll,.end-nav{display:none}.cover{min-height:auto;color:#000;background:none}.cover::after,.cover::before{display:none}.act{break-before:page}body{background:#fff;color:#000}}