/* Napoleon Pinocchio — original visual short story, PUB v1.0 */
:root{color-scheme:dark;--paper:#fff1d6;--gold:#e5be81;--ink:#0e1725;--cyan:#9fdbeb;--muted:#bed0e0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(ellipse at 75% -7%,#453655 0%,transparent 35%),radial-gradient(ellipse at 0% 48%,#183c49 0%,transparent 40%),linear-gradient(125deg,#060e1a,#162238 67%,#090e17);color:#f9f1e7;line-height:1.66}
a{color:inherit}a:hover{color:#ffe0a3}
a:focus-visible{outline:3px solid #d7ffff;outline-offset:4px}
.top{border-bottom:1px solid #72654c;background:rgba(7,17,29,.92)}
.wrap{width:min(1180px,calc(100% - 32px));margin:auto}
.top .wrap{display:flex;gap:13px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-size:12px;font-weight:800;letter-spacing:.13em;color:var(--gold);text-transform:uppercase;text-decoration:none}
.langs{display:flex;gap:8px;flex-wrap:wrap}
.langs a{font-size:12px;font-weight:700;padding:7px 12px;text-decoration:none;background:#142b3c;border:1px solid #668399;border-radius:30px}
.langs .sel{color:#111f2b;background:#f3d499;border-color:#f3d499}
.hero{text-align:center;padding:57px 0 22px}
.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--gold);font-weight:800;text-transform:uppercase}
h1{font:700 clamp(35px,7vw,82px)/1.04 Georgia,serif;letter-spacing:.025em;margin:16px 0 12px;text-shadow:0 12px 34px #0007}
h1 em{color:#f3c98b;font-style:normal}
.lede{font:italic clamp(18px,2.8vw,27px)/1.36 Georgia,serif;color:#f2d7b2;margin:8px auto;max-width:870px}
.note{font-size:14px;color:var(--muted);max-width:770px;margin:17px auto}
.actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:24px auto 18px}
.pill{display:inline-block;border:1px solid #c9ac79;border-radius:40px;padding:11px 17px;text-decoration:none;font-size:13px;font-weight:800;line-height:1.25;color:#fbead2;background:#273244}
.pill.primary{background:#f1cf94;color:#152233;border-color:#f1cf94}
.pill:hover{background:#2b4e62;color:#fff;text-decoration:none}
.pill.primary:hover{background:#ffe5b8;color:#152233}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;padding:20px 0 35px}
.artcard{border:1px solid #826b4c;border-radius:15px;background:linear-gradient(135deg,#132135,#0c1524);padding:12px;box-shadow:0 20px 50px #0007;min-width:0}
.artcard figure{margin:0}
.artcard img,.poster img{width:100%;height:auto;display:block;border-radius:7px;box-shadow:0 9px 30px #000b}
.artcard figcaption{display:flex;justify-content:space-between;align-items:center;gap:9px;flex-wrap:wrap;margin:9px 4px 2px;color:#d4b887;font:700 13px Arial}
.artcard h2{font:400 27px Georgia,serif;color:#fff;margin:17px 6px 4px}
.artcard p{color:#c4d6e2;margin:4px 6px 13px;font-size:13px}
.artcard .actions{justify-content:flex-start;margin:12px 6px 7px}
.poster{border:1px solid #a88d63;border-radius:14px;background:#0f1726;padding:9px;margin:26px 0 12px;box-shadow:0 18px 44px #0009}
.poster a{display:block}
.poster figcaption{font:13px Arial;color:#c9d4de;padding:10px 6px 3px;text-align:center}
.reading{margin:40px auto 53px;padding:clamp(18px,3vw,35px);max-width:910px;background:linear-gradient(145deg,#132638,#111b2f);border:1px solid #6a7c85;border-radius:14px}
.reading h2{font:400 29px Georgia,serif;margin:0 0 13px;color:#f4d8a7}
.reading details{border-top:1px solid #44596b;padding:14px 0}
.reading details:last-of-type{border-bottom:1px solid #44596b}
.reading summary{cursor:pointer;color:#f7ddad;font-weight:750}
.reading p{color:#e0e7ed;line-height:1.65;margin:12px 4px}
.legal{font-size:12px;color:#bacbd6;text-align:center;max-width:800px;margin:14px auto 29px}
footer{margin-top:12px;border-top:1px solid #495e70;padding:28px 0 42px;color:#c9dbdf;text-align:center;font:13px/1.85 Georgia,serif}
footer a{color:#b5e9ff}
footer strong{color:#f4d19a}
@media(max-width:760px){.gallery{grid-template-columns:1fr;gap:17px}.hero{padding:33px 0 18px}.artcard h2{font-size:24px}.top .wrap{justify-content:center}.poster{margin-top:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}