:root{color-scheme:dark;--bg:#071318;--panel:#0d2229;--panel2:#102932;--line:#1d4951;--ink:#d5e7e7;--muted:#9db9bb;--cyan:#77e4dd;--gold:#e7bf87}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at 82% 0%,#11333b 0%,var(--bg) 55%);color:var(--ink);font:16px/1.65 Georgia,"Times New Roman",serif}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem max(1.25rem,calc((100vw - 1180px)/2));border-bottom:1px solid var(--line);font:600 .84rem/1.2 system-ui,sans-serif;letter-spacing:.04em}
.brand{font-size:1rem;color:var(--gold)}.header nav{display:flex;flex-wrap:wrap;gap:1.1rem}
.hero{max-width:1180px;margin:auto;padding:4.7rem 1.5rem 2.8rem;position:relative}
.kicker{font:.73rem/1.5 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
h1{font-size:clamp(2.6rem,6vw,5.25rem);line-height:1.13;font-weight:500;letter-spacing:-.04em;color:var(--cyan);max-width:900px;margin:.5rem 0 1.1rem}
.hero p{max-width:750px;font-size:1.2rem;color:#c2d8d8}
.epigraph{border-left:2px solid var(--gold);padding-left:1.2rem;color:var(--gold)!important;font-style:italic}
.site-layout{max-width:1180px;margin:auto;padding:0 1.5rem 5rem;display:grid;grid-template-columns:215px minmax(0,1fr);gap:2rem;align-items:start}
.sidebar{position:sticky;top:1.2rem;padding:1.1rem;border:1px solid var(--line);background:var(--panel);border-radius:12px}
.sidebar p{margin:.1rem 0 1rem;font:600 .8rem system-ui,sans-serif;color:var(--muted)}
#search{border:1px solid var(--line);background:#081a20;color:var(--ink);padding:.75rem;width:100%;border-radius:8px;font:14px system-ui,sans-serif}
.letters{display:flex;flex-wrap:wrap;gap:.32rem;margin:1rem 0}.letters button{border:1px solid var(--line);background:#0a1b21;color:var(--cyan);border-radius:5px;padding:.25rem .42rem;cursor:pointer;font:600 12px system-ui,sans-serif}
.letters button.active{color:#071318;background:var(--cyan)}
#count{font:.8rem system-ui,sans-serif;color:var(--muted)}
.entries{min-width:0}
.chapter{font:600 .74rem/1.4 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:2rem 0 1rem}
.entry{scroll-margin-top:18px;padding:1.5rem 1.65rem 1.4rem;border:1px solid var(--line);border-radius:12px;background:linear-gradient(140deg,var(--panel),#0a1b21);margin-bottom:1rem}
.entry:target,.entry.focused{border-color:var(--gold);box-shadow:0 0 0 1px #e7bf8755}
.entry h2{color:var(--cyan);font-size:clamp(1.5rem,3vw,2.15rem);font-weight:500;line-height:1.2;margin:.25rem 0 .65rem}
.meta{font:600 .69rem/1.45 system-ui,sans-serif;letter-spacing:.11em;color:var(--gold);text-transform:uppercase}
.body-copy{font-size:1.06rem;line-height:1.72;white-space:normal}.body-copy p{margin:.85rem 0}
.source{font:.76rem/1.55 system-ui,sans-serif;color:var(--muted);padding-top:.6rem}
.flip{display:inline-flex;align-items:center;gap:.6rem;border:1px solid #47878b;padding:.6rem .9rem;border-radius:7px;font:600 .83rem/1.3 system-ui,sans-serif;margin-top:1rem;background:#13343a}
.flip:hover{background:#215057;text-decoration:none}
footer{max-width:1180px;margin:auto;padding:1.2rem 1.5rem 3rem;border-top:1px solid var(--line);color:var(--muted);font:13px/1.6 system-ui,sans-serif}
.covers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;max-width:1050px;margin:1rem auto 4rem;padding:0 1.5rem}
.cover{border:1px solid var(--line);border-radius:14px;padding:3.4rem 2rem;min-height:350px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(155deg,#12333b 0%,#0a1b21 80%)}
.cover:nth-child(2){background:linear-gradient(155deg,#30281f 0%,#0a1b21 80%)}
.cover h2{font-size:clamp(2rem,4vw,3rem);font-weight:500;line-height:1.12;color:var(--cyan);margin:1.6rem 0}.cover:nth-child(2) h2{color:var(--gold)}
.cover p{max-width:360px}.cover a{font:600 .86rem system-ui,sans-serif}
.note{max-width:1020px;margin:0 auto 4rem;padding:0 1.5rem;color:var(--muted)}
.empty{text-align:center;padding:3rem;color:var(--muted);border:1px dashed var(--line);border-radius:12px}
@media(max-width:740px){.site-layout{display:block}.sidebar{position:static;margin-bottom:1.5rem}.covers{grid-template-columns:1fr}.header{padding:1rem}.hero{padding:3rem 1.25rem 2rem}.entry{padding:1.2rem}.sidebar p{margin-bottom:.4rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}