@font-face{font-family:Geist;src:url(/assets/fonts/geist-latin-wght-normal.woff2)}@font-face{font-family:DM;src:url(/assets/fonts/DMSerifDisplay-Regular.ttf)}
:root{color-scheme:dark;--ink:#f3f0e9;--gold:#e9d5a1;--muted:#b8b2a7}
*{box-sizing:border-box}body{margin:0;background:#131311;color:var(--ink);font:17px/1.55 Geist,Arial,sans-serif}
header,main,footer{width:min(1140px,90%);margin:auto}header{padding:24px 0;border-bottom:1px solid #484538}a{color:var(--gold);text-underline-offset:4px}header a,footer a{text-decoration:none}a:hover{text-decoration:underline}a:focus-visible,button:focus-visible{outline:3px solid #fff;outline-offset:4px}
.intro{padding:clamp(32px,6vw,86px) 0;display:grid;grid-template-columns:1.05fr 1fr;gap:7%;align-items:center}.brand{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--muted)}h1,h2{font:normal clamp(58px,8vw,110px)/1 DM,Georgia,serif;letter-spacing:-.05em;margin:16px 0}h1 span{color:var(--gold)}.lead{font-size:clamp(20px,2.1vw,29px);line-height:1.34;max-width:32ch}.actions{display:flex;flex-wrap:wrap;gap:10px}.actions a{font-weight:650;text-decoration:none;padding:12px 15px;border-radius:5px}.primary{background:linear-gradient(115deg,#efdfb6,#d2b575);color:#191711}.secondary{border:1px solid #a79975}.note{color:var(--muted);font-size:.94rem;max-width:48ch}
figure{margin:0;border:1px solid #50483a;background:radial-gradient(ellipse at 25% 10%,#4a3a2b,#211f1b 75%);border-radius:12px;overflow:hidden}.scene{height:292px;position:relative;isolation:isolate;overflow:hidden}.eyebrow{position:absolute;top:18px;left:6%;color:#dbccb1;font-size:.85rem}
.letter,.result{position:absolute;left:10%;right:10%;top:74px;background:#f2e3c8;color:#32271c;border-radius:5px;padding:16px 22px;box-shadow:0 9px 25px #0005;transition:transform .8s ease,opacity .65s ease}.back{height:130px;transform:rotate(-8deg);background:#bba584}.front{transform:rotate(2deg)}.scene small,.scene strong,.scene span,.scene b{display:block}.scene strong{font:normal 29px/1.08 DM,Georgia,serif;margin:.3em 0}.scene span{font-size:14px}.scene small{letter-spacing:.12em;font-size:11px;font-weight:700;color:#714025}.result{background:#efece4;transform:translateY(150px) rotate(7deg);opacity:0}.result b{font-size:24px;margin-top:8px}.result i{font:14px Geist,Arial,sans-serif}.scene[data-stage="1"] .letter{transform:translate(-25%,-35px) rotate(-12deg);opacity:0}.scene[data-stage="1"] .result{transform:none;opacity:1}
figcaption{display:flex;align-items:center;justify-content:space-between;padding:10px 6%;gap:10px;background:#171714;color:#ece5d6;font-size:14px}button{background:transparent;border:1px solid #655d4d;color:var(--ink);padding:8px;border-radius:3px;cursor:pointer}
.reading{border-top:1px solid #50483a;padding:35px 0 60px;max-width:800px}.reading h2{font-size:clamp(36px,5vw,62px)}.reading ol{padding-left:28px}.reading li{padding:.7em 0 .7em .4em}.reading li::marker{color:var(--gold)}h3{margin:.4em 0;font-size:1.2em}li p,aside p{margin:.3em 0}blockquote,aside{margin:1.2em 0;padding:16px 20px;background:#201f1a;border-left:2px solid var(--gold)}footer{border-top:1px solid #484538;padding:22px 0 35px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}
@media(max-width:760px){.intro{grid-template-columns:1fr;gap:22px}.lead{margin:.6em 0 1em}header{padding:13px 0}.scene{height:260px}.intro{padding:24px 0}.actions a{padding:10px}.reading{padding-top:20px}}
@media(prefers-reduced-motion:reduce){.letter,.result{transition:none}}