
:root{color-scheme:dark;--night:#17101e;--night-2:#1e1429;
--panel:#241830;--surface:#2a1c38;--surface-hi:#33234a;
--ink:#f4ecdc;--muted:#cdbcd6;--line:#4a3560;--line-soft:#38284c;
--wine:#e08a9c;--wine-deep:#edaebc;--wine-solid:#7e2133;
--wine-solid-deep:#5c1624;--gold:#dcb26a;--soft-gold:#e8cd8f;
--shadow:0 24px 70px rgba(0,0,0,.55);
--glow:0 18px 50px rgba(0,0,0,.5),0 0 70px rgba(220,178,106,.16);
--display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
--body:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
::selection{background:var(--wine-solid);color:var(--ink)}
body{margin:0;color:var(--ink);font-family:var(--body);
line-height:1.55;font-size:17px;
background:radial-gradient(1100px 480px at 85% -80px,rgba(220,178,106,.10),rgba(220,178,106,0) 60%),
radial-gradient(900px 620px at -10% 34%,rgba(126,33,51,.16),rgba(126,33,51,0) 60%),
var(--night)}
a{color:var(--wine);transition:color .18s ease}
a:hover{color:var(--wine-deep)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
header.site{background:var(--night);border-bottom:1px solid var(--line);
box-shadow:0 6px 24px rgba(0,0,0,.35);
position:sticky;top:0;z-index:20}
.nav-inner{display:flex;align-items:center;gap:18px;max-width:1120px;
margin:0 auto;padding:12px 20px}
.brand{font-family:var(--display);font-size:26px;font-weight:700;
color:var(--ink);text-decoration:none;letter-spacing:.02em}
.brand small{display:block;font-size:11px;font-family:var(--body);
letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
nav.main{margin-left:auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
nav.main a{color:var(--ink);text-decoration:none;font-size:15px}
nav.main a:hover{color:var(--gold)}
nav.main a[aria-current="page"]{color:var(--gold);
border-bottom:2px solid var(--gold)}
.vip-button{background:linear-gradient(160deg,var(--wine-solid),var(--wine-solid-deep));
color:var(--ink)!important;padding:8px 14px;
border:1px solid #a03a4e;border-radius:999px;font-weight:600;
transition:transform .18s ease,box-shadow .18s ease}
.vip-button:hover{transform:translateY(-1px);
box-shadow:0 10px 24px rgba(0,0,0,.45)}
.hero{position:relative;padding:64px 0 44px;overflow:hidden;
background:radial-gradient(620px 380px at 78% 30%,rgba(220,178,106,.16),rgba(220,178,106,0) 65%),
radial-gradient(720px 520px at 8% 92%,rgba(126,33,51,.32),rgba(126,33,51,0) 65%),
linear-gradient(180deg,#201430 0%,var(--night) 90%);
border-bottom:1px solid var(--line-soft)}
.hero-grid{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:center}
.hero img{width:100%;border-radius:10px;box-shadow:var(--glow);
border:1px solid rgba(220,178,106,.35);
animation:heroFloat 9s ease-in-out infinite}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.eyebrow{letter-spacing:.18em;text-transform:uppercase;font-size:12px;
color:var(--gold);font-weight:700;margin:0 0 8px;
display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--gold);flex:none}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:.2em 0 .4em}
h1{font-size:44px} h2{font-size:32px} h3{font-size:22px}
.lede{font-size:20px;color:var(--ink)}
.hook{font-style:italic;font-size:19px;color:var(--soft-gold)}
.button{display:inline-block;
background:linear-gradient(160deg,var(--wine-solid),var(--wine-solid-deep));
color:var(--ink);
text-decoration:none;padding:12px 22px;border-radius:999px;font-weight:600;
border:1px solid #a03a4e;box-shadow:0 10px 26px rgba(0,0,0,.35);
transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.button:hover{transform:translateY(-2px);
box-shadow:0 16px 34px rgba(0,0,0,.45);color:var(--ink)}
.button.secondary{background:transparent;color:var(--gold);
border-color:var(--gold);box-shadow:none}
.button.secondary:hover{background:rgba(220,178,106,.12);color:var(--soft-gold)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
section{padding:34px 0}
main>section:nth-of-type(even){
background:linear-gradient(180deg,rgba(220,178,106,.045),rgba(220,178,106,0) 30%),var(--night-2);
border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.section-head{margin-bottom:18px}
.section-index{letter-spacing:.18em;text-transform:uppercase;font-size:12px;
color:var(--gold);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:linear-gradient(180deg,var(--surface-hi),var(--surface) 42%);
border:1px solid var(--line-soft);border-radius:14px;
overflow:hidden;display:flex;flex-direction:column;
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-5px);border-color:var(--gold);
box-shadow:0 22px 44px rgba(0,0,0,.5)}
.card>a{display:block;overflow:hidden}
.card img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;
transition:transform .45s ease}
.card:hover img{transform:scale(1.035)}
.card .pad{padding:12px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:19px;margin:0}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--gold)}
.meta{font-size:13.5px;color:var(--muted)}
.badge{display:inline-block;background:rgba(220,178,106,.14);color:var(--soft-gold);
border:1px solid rgba(220,178,106,.4);
border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;
letter-spacing:.04em}
.badge.complete{background:rgba(220,178,106,.2);color:var(--soft-gold)}
.card .spacer{flex:1}
.text-link{font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;
padding:3px 11px;font-size:13px;text-decoration:none;color:var(--ink);
transition:border-color .18s ease,color .18s ease,transform .18s ease}
.chip:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}
.book-layout{display:grid;grid-template-columns:320px 1fr;gap:38px;padding:40px 0}
.book-layout img.cover{width:100%;border-radius:10px;box-shadow:var(--glow);
border:1px solid rgba(220,178,106,.28)}
.series-banner{
background:radial-gradient(560px 300px at 85% 0%,rgba(220,178,106,.13),rgba(220,178,106,0) 60%),
linear-gradient(140deg,#341631 0%,#22122e 55%,#2b101d 100%);
border:1px solid var(--line);border-radius:18px;
padding:30px 30px 8px;margin:14px 0 8px}
.series-banner .book-layout{padding:16px 0 24px}
.buyblock{background:linear-gradient(180deg,var(--surface-hi),var(--surface));
border:1px solid var(--line);border-left:3px solid var(--gold);
border-radius:12px;padding:18px;margin:20px 0}
.crumbs{font-size:14px;color:var(--muted);padding-top:18px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold)}
.prevnext{display:flex;justify-content:space-between;gap:14px;
border-top:1px solid var(--line-soft);padding:16px 0 30px;margin-top:10px}
.controls{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
.controls input[type=search],.controls select{padding:10px 12px;font-size:16px;
border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.controls input[type=search]{flex:1;min-width:220px}
.controls input[type=search]::placeholder{color:#9d8aa8}
.signup{background:linear-gradient(150deg,#3d0f22 0%,#2a1226 55%,#1e1429 100%);
color:var(--ink);border-top:1px solid var(--line);padding:44px 0}
.signup h2{color:var(--ink)}
.signup .section-index{color:var(--soft-gold)}
.signup .button{background:linear-gradient(160deg,var(--soft-gold),var(--gold));
border-color:var(--soft-gold);color:#2a1608}
.signup .button:hover{background:linear-gradient(160deg,#f0d79c,var(--soft-gold));color:#2a1608}
.field{margin-bottom:12px}
.field label{display:block;font-size:14px;margin-bottom:4px}
.field input{width:100%;padding:10px;border-radius:8px;border:1px solid var(--line);
background:var(--night);color:var(--ink);font-size:16px}
.form-panel{background:var(--panel);color:var(--ink);border:1px solid var(--line);
border-radius:12px;padding:20px}
.signup-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
footer.site{background:#120b18;border-top:1px solid var(--line);
padding:28px 0 40px;color:var(--muted);font-size:14.5px}
footer.site nav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--gold)}
ol.reading,ul.reading{line-height:1.9}
.path-card{background:linear-gradient(180deg,var(--surface-hi),var(--surface) 55%);
border:1px solid var(--line-soft);
border-radius:12px;padding:20px;margin-bottom:18px;
display:grid;grid-template-columns:110px 1fr;gap:18px;
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.path-card:hover{transform:translateY(-3px);border-color:var(--gold);
box-shadow:0 18px 38px rgba(0,0,0,.45)}
.path-card img{width:110px;border-radius:8px;
box-shadow:0 10px 26px rgba(0,0,0,.45)}
.hidden-card{display:none}
.loadmore{margin:20px 0}
@media (max-width:760px){.hero-grid,.book-layout,.signup-grid{grid-template-columns:1fr}
.hero{padding:40px 0 28px}
.hero img,.book-layout img.cover{max-width:280px}h1{font-size:34px}
.series-banner{padding:20px 18px 4px}
.path-card{grid-template-columns:84px 1fr}.path-card img{width:84px}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
@media print{header.site,footer.site,.actions,.controls{display:none}
body{background:#fff;color:#201719;font-size:12pt}
.hero,main>section,.series-banner,.card,.path-card,.buyblock{background:none}}
