:root{
  --bg:#f6f4ee; --bg-elev:#fff; --text:#1f1a11; --muted:#6f6658; --line:#e8dcc7;
  --gold:#c8a046; --gold-ink:#a88634; --btn-bg:#e9dfc9; --btn-fg:#fff;
  --shadow:0 10px 20px rgba(31,26,17,.08),0 2px 6px rgba(31,26,17,.06);
  --radius:18px; --card-radius:22px; --speed:.5s;
}
[data-theme=night]{
  --bg:#b9934a; --bg-elev:#6e5520; --text:#fff4da; --muted:#f2e1b3; --line:rgba(255,235,182,.35);
  --gold:#ffe09a; --gold-ink:#fff3c6; --btn-bg:rgba(255,255,255,.15); --btn-fg:#2c1e07;
  --shadow:0 16px 32px rgba(51,34,9,.45),0 2px 6px rgba(51,34,9,.35);
}
html{background:var(--bg);color:var(--text);font:16px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji}
*{box-sizing:border-box} body{margin:0;transition:background-color var(--speed) ease,color var(--speed) ease}
.container{max-width:1200px;padding:24px;margin:auto}
header{position:sticky;top:0;backdrop-filter:saturate(140%) blur(6px);background:color-mix(in hsl,var(--bg) 94%, transparent);z-index:10}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:28px;height:28px;display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.04))}
.logo--moon{display:none}[data-theme=night] .logo--sun{display:none}[data-theme=night] .logo--moon{display:block}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.theme{display:flex;gap:8px;background:var(--bg-elev);border:1px solid var(--line);padding:6px;border-radius:999px;box-shadow:var(--shadow)}
.theme button{appearance:none;border:0;background:transparent;padding:8px 12px;border-radius:999px;display:flex;gap:8px;align-items:center;cursor:pointer;color:var(--text);font-weight:600}
.theme button[aria-pressed=true]{background:var(--btn-bg);outline:1px solid color-mix(in srgb,var(--gold) 48%, transparent)}
.theme svg{width:18px;height:18px;opacity:.9}
.lang{display:flex;gap:10px;align-items:center;font-weight:600}
.lang a{color:var(--text);opacity:.6;text-decoration:none;padding:6px 10px;border-radius:999px}
.lang a[aria-current=true]{opacity:1;background:var(--btn-bg);border:1px solid var(--line)}
.hero{padding:40px 0 10px}
.title{font-family:Spectral,Georgia,'Times New Roman',serif;font-size:clamp(28px,5vw,48px);line-height:1.1;margin:0 0 12px;color:var(--gold-ink)}
.lead{color:var(--muted);max-width:80ch;margin:0 0 20px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;font-weight:700;border:1px solid var(--line);background:var(--gold);color:var(--btn-fg);box-shadow:var(--shadow);text-decoration:none}
.btn.secondary{background:var(--bg-elev);color:var(--text)}
.section{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--card-radius);padding:18px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.grid{grid-template-columns:1fr 1fr}}@media (max-width:640px){.grid{grid-template-columns:1fr}}
.book{display:flex;gap:16px;padding:14px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--bg-elev) 80%,var(--gold) 0%);align-items:center}
.cover{flex:0 0 98px;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#c9b07a21;display:grid;place-items:center;position:relative;border:1px solid color-mix(in srgb,var(--gold) 40%, transparent);box-shadow:var(--shadow)}
.cover img{width:100%;height:100%;object-fit:cover}
.cover::after{position:absolute;top:8px;left:8px;font-size:16px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.meta{display:flex;flex-direction:column;gap:8px;min-width:0}.meta h4{margin:0;font-size:18px}.meta p{margin:0;color:var(--muted)}
.actions{margin-top:4px}.chip{display:inline-flex;padding:10px 14px;border-radius:12px;background:var(--bg-elev);border:1px solid var(--line);text-decoration:none;color:var(--text);font-weight:700;box-shadow:var(--shadow)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}@media (max-width:900px){.duo{grid-template-columns:1fr}}
footer{color:var(--muted);font-size:14px;padding:24px 0 40px}