/* Layout: one narrow reading column (max 640px) with full-bleed ivory bands; the fan is the only image on the site. */
:root{
  --bg:#F6F1E8; --bg2:#EFE7DA; --fg:#2B2825; --fg2:#5F5850; --line:#D9CFBF;
  --gold:#B2955A; --blush:#A87F76; --blush2:#E6C9C2; --ink:#2B2825; --card:#FBF8F2;
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif; --body:'EB Garamond',Georgia,serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#1E1B19; --bg2:#262220; --fg:#EDE6DA; --fg2:#B8AE9F; --line:#3C3630; --gold:#CDB47E; --blush:#D9B3AA; --blush2:#5A4540; --ink:#EDE6DA; --card:#282421; color-scheme:dark } }
:root[data-theme="dark"]{ --bg:#1E1B19; --bg2:#262220; --fg:#EDE6DA; --fg2:#B8AE9F; --line:#3C3630; --gold:#CDB47E; --blush:#D9B3AA; --blush2:#5A4540; --ink:#EDE6DA; --card:#282421; color-scheme:dark }
*{box-sizing:border-box}
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased }
.wrap{ max-width:640px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-block:0 }
.band{ padding-block:48px }
.band.alt{ background:var(--bg2) }
h1,h2,h3{ font-family:var(--display); font-weight:500; line-height:1.08; margin:0; text-wrap:balance }
h1{ font-size:clamp(40px,9vw,64px); letter-spacing:.02em }
h2{ font-size:clamp(28px,6vw,38px) }
h3{ font-size:22px; font-weight:600 }
p{ margin:0 }
.eyebrow{ font-family:var(--display); text-transform:uppercase; letter-spacing:.32em; font-size:12px; color:var(--gold); font-weight:500 }
.lead{ font-size:20px; color:var(--fg2); font-style:italic; font-family:var(--display); font-size:22px; line-height:1.35 }
.rule{ width:44px; height:1px; background:var(--gold) }
.stack{ display:flex; flex-direction:column; gap:18px }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 28px; border-radius:2px; border:1px solid var(--ink); background:var(--ink); color:var(--bg); font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; text-decoration:none; transition:transform .15s }
.btn:hover{ transform:translateY(-1px) } .btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }
.btn.ghost{ background:transparent; color:var(--fg); border-color:var(--line) }
.btn.gold{ background:transparent; color:var(--fg); border-color:var(--gold) }
.small{ font-size:15px; color:var(--fg2) }
nav.top{ display:flex; justify-content:space-between; align-items:center; padding-block:18px; border-bottom:1px solid var(--line) }
nav.top a{ color:var(--fg); text-decoration:none; font-family:var(--display); letter-spacing:.2em; text-transform:uppercase; font-size:13px }
nav.top .brand{ font-weight:700; letter-spacing:.14em; font-size:15px }
nav.top .links{ display:flex; gap:18px }
.view[hidden]{display:none}
/* fan */
.fanbox{ display:flex; justify-content:center; padding-block:8px }
.fanbox svg{ width:min(100%,520px); height:auto }
/* quiz */
.q{ display:flex; flex-direction:column; gap:14px }
.q .num{ font-family:var(--display); color:var(--gold); letter-spacing:.3em; font-size:12px; text-transform:uppercase }
.q h2{ font-size:clamp(24px,5.5vw,32px) }
.opts{ display:flex; flex-direction:column; gap:10px; margin-top:8px }
.opt{ text-align:left; padding:16px 18px; border:1px solid var(--line); background:var(--card); color:var(--fg); font-family:var(--body); font-size:17px; line-height:1.4; border-radius:2px; cursor:pointer; transition:border-color .15s, transform .15s }
.opt:hover{ border-color:var(--gold); transform:translateX(2px) } .opt:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
.progress{ height:1px; background:var(--line); position:relative } .progress i{ position:absolute; left:0; top:0; height:1px; background:var(--gold); transition:width .3s }
/* result */
.tex{ display:grid; grid-template-columns:1fr; gap:22px }
.swatch{ width:100%; aspect-ratio:3/1; max-width:100%; border-radius:2px }
.portrait{ display:flex; flex-direction:column; gap:14px }
.portrait .k{ font-family:var(--display); font-weight:600; font-size:19px; margin-top:6px } .portrait .k::before{ content:""; display:block; width:28px; height:1px; background:var(--gold); margin-bottom:8px }
.pull{ font-family:var(--display); font-style:italic; font-size:26px; line-height:1.3; text-align:center; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.form{ display:flex; flex-direction:column; gap:10px }
.form input{ font:inherit; padding:14px 16px; border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:2px; min-width:0 }
.form input:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
.note{ font-size:14px; color:var(--fg2) }
.share{ display:flex; flex-direction:column; gap:10px; align-items:flex-start }
.share canvas{ width:min(100%,270px); height:auto; border:1px solid var(--line); max-width:100% }
.bookcard{ display:grid; grid-template-columns:120px 1fr; gap:20px; align-items:center; padding:20px; border:1px solid var(--line); background:var(--card) }
.bookcard .cov{ width:120px; max-width:100% }
@media (max-width:460px){ .bookcard{ grid-template-columns:1fr } }
/* book page */
.lines{ display:flex; flex-direction:column; gap:6px }
.lines a{ font-family:var(--display); font-size:21px; font-style:italic; color:var(--fg); text-decoration:none; padding:10px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:12px }
.lines a span{ font-style:normal; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); white-space:nowrap }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px } @media (max-width:560px){ .grid3{ grid-template-columns:1fr } }
.spread{ aspect-ratio:2/3; max-width:100%; border:1px solid var(--line); background:var(--bg2); position:relative; overflow:hidden; font-family:var(--display) }
.spread .t{ position:absolute; left:14px; right:14px; bottom:16px; font-size:16px; line-height:1.15 } .spread .t small{ display:block; letter-spacing:.25em; text-transform:uppercase; font-size:9px; color:var(--gold); margin-bottom:6px }
.spread.dark{ color:#EDE6DA } .spread.dark .t small{ color:#CDB47E }
.faq details{ border-bottom:1px solid var(--line); padding:12px 0 } .faq summary{ cursor:pointer; font-family:var(--display); font-size:20px; font-weight:600; list-style:none } .faq summary::-webkit-details-marker{display:none} .faq details p{ margin-top:8px; color:var(--fg2) }
.price{ font-family:var(--display); font-size:44px; font-weight:500 } .price small{ font-size:16px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg2); margin-left:8px }
.toast{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:2px; font-family:var(--display); letter-spacing:.08em; font-size:15px; max-width:calc(100% - 32px); text-align:center }
.proto-hidden{ position:fixed; top:env(safe-area-inset-top,0px); right:max(12px,env(safe-area-inset-right,0px)); background:var(--gold); color:#2B2825; font-family:var(--display); font-size:10px; letter-spacing:.22em; text-transform:uppercase; padding:4px 8px; z-index:20 }
.chapter p{ margin-bottom:14px; text-indent:1.3em } .chapter p:first-of-type{ text-indent:0 }
.fade{ position:relative } .fade::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:120px; background:linear-gradient(transparent, var(--bg)) }
footer{ padding-block:32px; border-top:1px solid var(--line); color:var(--fg2); font-size:14px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap }
.trust{ display:flex; gap:14px 22px; flex-wrap:wrap; font-size:15px; color:var(--fg2) }
.cta-box{ display:flex; flex-direction:column; gap:14px; padding:22px 20px; border:1px solid var(--gold); background:var(--card) }
.cta-box .btn{ align-self:flex-start }
.buybar{ position:fixed; left:0; right:0; bottom:0; z-index:15; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px)); background:var(--bg); border-top:1px solid var(--line); font-size:15px; color:var(--fg2) }
.buybar b{ color:var(--fg); font-family:var(--display); font-size:17px }
.buybar .btn{ padding:12px 18px; font-size:14px }
body{ padding-bottom:76px }
/* book shot on home: real cover + two real pages */
.hero-book{ display:grid; grid-template-columns:1fr; gap:28px; align-items:start; margin-top:14px }
@media (min-width:600px){ .hero-book{ grid-template-columns:260px 1fr } }
.bookshot{ position:relative; width:100%; max-width:300px; aspect-ratio:1/1.25; margin:0 auto }
.bookshot img{ position:absolute; max-width:100%; border:1px solid #DDD3C3; }
.bookshot .cov{ left:0; top:0; width:68%; z-index:3; box-shadow:12px 16px 34px rgba(43,40,37,.25); transform:rotate(-3deg) }
.bookshot .pg1{ right:0; top:9%; width:48%; z-index:2; box-shadow:8px 10px 24px rgba(43,40,37,.18); transform:rotate(5deg) }
.bookshot .pg2{ right:6%; bottom:0; width:50%; z-index:1; box-shadow:8px 10px 24px rgba(43,40,37,.16); transform:rotate(-2deg) }
.inside{ margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:8px; font-size:16px } .inside li::marker{ color:var(--gold) } .inside b{ font-family:var(--display); font-weight:600; font-size:1.08em }
.ws-preview{ border:1px solid var(--line); background:var(--card); padding:22px 20px; font-size:15px }
.ws-preview .ws-h{ font-family:var(--display); font-weight:600; font-size:19px; margin-bottom:12px } .ws-preview .ws-h::before{ content:""; display:block; width:28px; height:1px; background:var(--gold); margin-bottom:8px }
.ws-preview ol{ margin:0; padding-left:1.4em; display:flex; flex-direction:column; gap:14px } .ws-preview li{ padding-bottom:14px; background:repeating-linear-gradient(to bottom,transparent 0,transparent 25px,var(--line) 25px,var(--line) 26px) 0 1.6em/100% 26px repeat-y } .ws-preview li::marker{ font-family:var(--display); font-weight:600; color:var(--gold) }
.ws-preview .ws-note{ margin-top:12px; color:var(--fg2); font-style:italic; font-family:var(--display); font-size:16px }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important } }

.ok{ padding:16px 18px; border:1px solid var(--gold); background:var(--card); font-family:var(--display); font-size:18px }
.err{ color:#9A3B2E; font-size:14px }
.legal h2{ font-size:24px; margin-top:28px } .legal p, .legal li{ color:var(--fg2); font-size:16px }
.cookie{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom,0px)); background:var(--card); border:1px solid var(--line); padding:10px 14px; font-size:13px; color:var(--fg2); max-width:calc(100% - 32px); z-index:14; display:flex; gap:12px; align-items:center }
.cookie button{ font:inherit; background:none; border:1px solid var(--line); padding:6px 10px; cursor:pointer; color:var(--fg) }