:root{--night:#0d1322;--deep:#131b2e;--panel:#1a2339;--line:rgba(242,234,216,.13);--vellum:#f2ead8;--dim:#b9b2a3;--mute:#8d8778;--dawn:#e0a84b;--wine:#8c2b3c;
  --disp:"Cormorant Garamond",Georgia,serif;--body:"Source Serif 4",Georgia,serif;--ui:Inter,system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--vellum);font:18px/1.7 var(--body)}
a{color:inherit}
:focus-visible{outline:2px solid var(--dawn);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.top{position:sticky;top:0;z-index:20;background:rgba(13,19,34,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:60px;flex-wrap:wrap}
.home{font:600 13px var(--ui);letter-spacing:.28em;text-transform:uppercase;text-decoration:none}
.chnav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;max-width:100%;scrollbar-width:none}
.chnav a{font:600 13px var(--ui);text-decoration:none;color:var(--dim);min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px}
.chnav a:hover{background:var(--panel);color:var(--vellum)}
.chnav a[aria-current]{background:var(--dawn);color:#1a1206}
.head{padding:48px 0 26px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px;align-items:end}
.kick{font:600 14px var(--ui);color:var(--c)}
h1{font:600 clamp(40px,6vw,72px)/1 var(--disp);margin:8px 0 14px}
.theme{color:#e4dccb;margin:0;max-width:62ch}
.head blockquote{margin:0;padding-left:18px;border-left:2px solid var(--c);font-style:italic;color:var(--dim);font-size:17px}
.head cite{display:block;margin-top:6px;font:600 13px var(--ui);font-style:normal;color:var(--c)}
.tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none;position:sticky;top:60px;z-index:10;background:var(--night);padding-top:6px}
.tabs button{appearance:none;border:0;background:none;color:var(--dim);font:600 15px var(--ui);padding:12px 14px 14px;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--vellum)}
.tabs button[aria-selected=true]{color:var(--vellum);border-bottom-color:var(--dawn)}
.panel{padding:26px 0 70px}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
.bar .what{font:600 15px var(--ui);margin-right:auto}
.bar .what small{display:block;font-weight:500;color:var(--mute);font-size:13px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font:600 14px var(--ui);text-decoration:none;white-space:nowrap}
.btn svg{width:15px;height:15px;fill:currentColor}
.btn.dawn{background:var(--dawn);color:#1a1206}.btn.dawn:hover{background:#ebbb66}
.btn.ghost{border:1px solid rgba(242,234,216,.35)}.btn.ghost:hover{border-color:var(--vellum)}
.btn.wine{background:var(--wine);color:#fff}
.pdf .status{font:500 13px var(--ui);color:var(--mute);margin:-8px 0 12px}
.pages{display:grid;gap:18px;max-width:900px;margin-inline:auto}
.pg{background:#f7f2e6;border-radius:6px;box-shadow:0 14px 40px rgba(0,0,0,.35);overflow:hidden;display:grid;place-items:center;color:#8d8778;font:500 13px var(--ui)}
.pg.done{background:#fff}
.pages.wide{max-width:1100px}
.film{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.notes{max-width:72ch;margin-inline:auto;background:#fffdf8;color:#2a2420;border-radius:12px;padding:34px clamp(18px,4vw,44px);font-size:17px}
.notes h2{font:600 30px var(--disp);color:#6e1f2b;margin:26px 0 8px}
.notes h2:first-child{margin-top:0}
.notes h3{font:600 22px var(--disp);color:#6e1f2b;margin:20px 0 6px}
.notes strong{color:#6e1f2b}
.notes ul,.notes ol{padding-left:22px}
.notes li{margin:0 0 6px}
.pager{display:flex;justify-content:space-between;gap:12px;padding:30px 0 60px;border-top:1px solid var(--line)}
.pager a{text-decoration:none;font:600 15px var(--ui);color:var(--dim)}.pager a:hover{color:var(--vellum)}
.pager b{display:block;font:600 22px var(--disp);color:var(--vellum)}
@media (max-width:820px){.head{grid-template-columns:1fr;gap:20px}.chnav{margin-left:0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}