/* ============================================================
   Author umbrella site — shared styles
   Genre palettes are swapped via a body class:
   .world-vesper (sci-fi) · .world-eveline (portal fantasy) · .world-mira (romance)
   The umbrella home uses the neutral "studio" palette in :root.
   ============================================================ */
:root{
  --bg:#0c0d12; --bg2:#15171f; --panel:#181b24;
  --ink:#ece9e1; --muted:#9a9aa6;
  --gold:#d7b46a; --accent:#c98a4b; --accent2:#6fb7d4;
  --line:rgba(215,180,106,.16);
  --sans:'Oswald','Bebas Neue','Arial Narrow',Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
}
.world-vesper{--bg:#070b14;--bg2:#0f1626;--panel:#141d30;--accent:#c4633a;--accent2:#9fd8ee;--gold:#d9b46a;--line:rgba(95,180,212,.18)}
.world-eveline{--bg:#081210;--bg2:#0d1c1a;--panel:#102420;--accent:#33b9b0;--accent2:#ffd56a;--gold:#ffd56a;--line:rgba(51,185,176,.18)}
.world-mira{--bg:#0c1019;--bg2:#141b2a;--panel:#1b2233;--accent:#8b2635;--accent2:#c9a24b;--gold:#ecd08a;--line:rgba(201,162,75,.20)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);line-height:1.7}
h1,h2,h3,.brand{font-family:var(--sans);text-transform:uppercase;letter-spacing:.05em;line-height:1.12;margin:0}
a{color:var(--accent2);text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.kicker{text-align:center;font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.center{text-align:center}

/* nav */
nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{font-size:19px;color:#fff;font-weight:700}
.brand b{color:var(--accent)}
.navlinks a{font-family:Arial,sans-serif;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-left:20px}
.navlinks a:hover{color:var(--accent2)}
@media(max-width:760px){.navlinks{display:none}}

/* buttons */
.btn{font-family:Arial,sans-serif;font-size:13px;letter-spacing:.10em;text-transform:uppercase;padding:13px 24px;border-radius:5px;display:inline-block;font-weight:700;cursor:pointer;transition:transform .15s}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--gold));color:#160d06}
.btn.ghost{border:1px solid var(--accent2);color:var(--accent2)}
.btn:hover{transform:translateY(-1px)}

/* ===== rotating hero ===== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(120% 80% at 50% 120%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),linear-gradient(180deg,var(--bg),var(--bg2))}
.hero .stars{position:absolute;inset:0;opacity:.5;background-image:
  radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#cde,transparent),
  radial-gradient(1px 1px at 40% 70%,#fff,transparent),radial-gradient(1px 1px at 85% 55%,#bcd,transparent),
  radial-gradient(1px 1px at 55% 42%,#fff,transparent),radial-gradient(1px 1px at 12% 80%,#cde,transparent)}
.rotator{position:relative}
.rstage{position:relative;display:grid;grid-template-columns:300px 1fr;gap:46px;align-items:center;padding:64px 22px 30px;max-width:1120px;margin:0 auto}
@media(max-width:820px){.rstage{grid-template-columns:1fr;text-align:center;gap:24px;padding-top:48px}}
.slide{display:none;animation:fade .9s ease}
.slide.on{display:contents}
@keyframes fade{from{opacity:0}to{opacity:1}}
.rcover{justify-self:center;width:300px;max-width:78vw;aspect-ratio:2/3;border-radius:8px;overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.08);transition:transform .3s}
.rcover:hover{transform:translateY(-4px) scale(1.01)}
.rcover img{width:100%;height:100%;object-fit:cover}
.reyebrow{font-family:Arial,sans-serif;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent2);margin:0 0 12px}
.rtitle{font-size:46px;color:#fff;font-weight:700;text-shadow:0 3px 28px rgba(0,0,0,.5)}
@media(max-width:820px){.rtitle{font-size:34px}}
.rsub{font-family:var(--sans);letter-spacing:.10em;font-size:18px;color:var(--gold);margin-top:6px;text-transform:uppercase}
.rhook{font-size:18px;color:#e7e7ee;margin:16px 0 4px;max-width:560px}
@media(max-width:820px){.rhook{margin-inline:auto}}
.rpen{font-family:Arial,sans-serif;letter-spacing:.16em;font-size:12.5px;text-transform:uppercase;color:var(--muted);margin-top:14px}
.rcta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:820px){.rcta{justify-content:center}}
/* rotation controls */
.rctrls{display:flex;align-items:center;justify-content:center;gap:16px;padding:6px 0 30px}
.rarrow{cursor:pointer;color:var(--muted);font-size:26px;line-height:1;background:none;border:none;padding:4px 10px}
.rarrow:hover{color:var(--accent2)}
.rdots{display:flex;gap:9px}
.rdot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer;border:none;padding:0;transition:transform .2s,background .2s}
.rdot.on{background:var(--accent);transform:scale(1.25)}

/* ===== shelf ===== */
section{padding:62px 0;border-top:1px solid var(--line)}
section h2{font-size:30px;color:#fff;text-align:center;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 30px}
.chip{font-family:Arial,sans-serif;font-size:12px;letter-spacing:.10em;text-transform:uppercase;padding:8px 16px;border-radius:30px;border:1px solid var(--line);color:var(--muted);background:none;cursor:pointer}
.chip.on,.chip:hover{color:#fff;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:900px){.shelf{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.shelf{grid-template-columns:repeat(2,1fr)}}
.tile{display:block;color:inherit;position:relative}
.tilecover{aspect-ratio:2/3;border-radius:7px;overflow:hidden;box-shadow:0 14px 36px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.07);transition:transform .2s}
.tile:hover .tilecover{transform:translateY(-5px)}
.tilecover img{width:100%;height:100%;object-fit:cover}
.tilecap{margin-top:10px}
.tilecap .t{font-family:var(--sans);text-transform:uppercase;letter-spacing:.03em;color:#fff;font-size:15px;line-height:1.1}
.tilecap .p{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.badge{position:absolute;top:10px;left:10px;font-family:Arial,sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:20px;font-weight:700;backdrop-filter:blur(4px)}
.badge.live{background:rgba(45,170,120,.92);color:#06140d}
.badge.soon{background:rgba(215,180,106,.92);color:#1a1408}
.badge.vote{background:rgba(196,99,58,.92);color:#fff}

/* ===== CSS-rendered cover (for books without art yet) ===== */
.csscover{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:14% 12%;text-align:center;background:
    radial-gradient(120% 60% at 50% 6%,color-mix(in srgb,var(--accent2) 24%,transparent),transparent 55%),
    radial-gradient(120% 60% at 50% 104%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 60%),
    linear-gradient(180deg,#05080f,#11141f 70%,color-mix(in srgb,var(--accent) 30%,#11141f))}
.csscover .ct{font-family:var(--sans);font-weight:700;text-transform:uppercase;color:#fff;font-size:clamp(18px,3.4vw,30px);line-height:.96;letter-spacing:.03em}
.csscover .cl{width:38px;height:2px;background:var(--accent);margin:9px auto}
.csscover .cg{font-family:Arial,sans-serif;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#dfe6ef;opacity:.85}
.csscover .cp{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ===== worlds cards ===== */
.worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:780px){.worlds{grid-template-columns:1fr}}
.wcard{display:block;color:inherit;background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--bg) 70%,transparent));border:1px solid var(--line);border-radius:14px;padding:28px 24px;text-align:center;transition:transform .2s,border-color .2s}
.wcard:hover{transform:translateY(-4px);border-color:var(--accent)}
.wcard .wname{font-size:23px;color:#fff;margin-bottom:6px}
.wcard .wgenre{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.wcard p{color:var(--muted);font-size:14.5px;margin:0}
.wcard .wgo{display:inline-block;margin-top:14px;font-family:Arial,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}

/* ===== generic content blocks (book template + worlds bios) ===== */
.lead{max-width:760px;margin:0 auto;text-align:center;font-size:18px;color:#e6e3da}
.blurb p{font-size:18px;max-width:760px;margin:0 auto 18px;color:#e6e3da}
.blurb .turn{text-align:center;font-style:italic;color:var(--accent2);font-size:20px;margin-top:24px}
.triad{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:880px){.triad{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.triad{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--bg) 60%,transparent));border:1px solid var(--line);border-radius:12px;padding:22px 18px;text-align:center}
.card .ic{font-size:24px}
.card h3{font-size:18px;color:#fff;margin:8px 0 3px}
.card .role{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.card p{color:var(--muted);font-size:14px;margin:0}
.themes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:860px;margin:0 auto}
@media(max-width:680px){.themes{grid-template-columns:1fr}}
.theme{border-left:2px solid var(--accent);padding:6px 0 6px 18px}
.theme h3{font-size:16px;color:var(--accent2);margin-bottom:4px}
.theme p{margin:0;color:var(--muted);font-size:14px}
.comps{text-align:center;color:var(--muted);font-size:16px;max-width:760px;margin:24px auto 0}
.comps strong{color:var(--ink)}

/* ===== series strip ===== */
.series{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:stretch;max-width:880px;margin:0 auto}
.sbook{width:150px;text-align:center;opacity:.96}
.sbook.future{opacity:.5}
.sbookcover{aspect-ratio:2/3;border-radius:6px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.sbookcover img{width:100%;height:100%;object-fit:cover}
.sbook .sn{font-family:Arial,sans-serif;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:8px}
.sbook .st{font-family:var(--sans);text-transform:uppercase;color:#fff;font-size:13px;margin-top:2px;line-height:1.1}

/* ===== sample reader ===== */
.sample{background:linear-gradient(180deg,color-mix(in srgb,var(--bg2) 70%,#000),var(--bg))}
.reader{max-width:720px;margin:0 auto;background:#eef1f4;color:#1a2230;border-radius:8px;padding:46px 52px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
@media(max-width:560px){.reader{padding:32px 24px}}
.reader .chtag{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);text-align:center;margin-bottom:6px}
.reader h3{font-size:26px;text-align:center;color:#10151f;margin-bottom:26px}
.reader p{font-size:17px;line-height:1.8;margin:0 0 15px;color:#1a2230;font-family:var(--serif)}
.reader p.first::first-letter{font-family:var(--sans);font-size:54px;line-height:.8;float:left;padding:6px 10px 0 0;color:var(--accent);font-weight:700}
.reader .dinkus{text-align:center;color:#9a7a3a;letter-spacing:.5em;margin:22px 0;font-size:18px}
.reader .maxim{text-align:center;letter-spacing:.16em;color:#3a4458;font-family:Arial,sans-serif;font-size:13px;margin:3px 0}
.samplenote{text-align:center;color:var(--muted);font-family:Arial,sans-serif;font-size:13px;margin-top:22px}

/* ===== WIP / voting ===== */
.wipgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
@media(max-width:880px){.wipgrid{grid-template-columns:1fr}}
.wipcard{background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--bg) 60%,transparent));border:1px solid var(--line);border-radius:14px;padding:22px;text-align:left}
.wipcard .wt{font-size:19px;color:#fff;margin-bottom:4px}
.wipcard .wmeta{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.wipcard p{color:var(--muted);font-size:14.5px;margin:0 0 16px}
.votebar{height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:8px}
.votebar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--gold))}
.votepct{font-family:Arial,sans-serif;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:14px}
.votebtn{width:100%;text-align:center}
.pollnote{max-width:680px;margin:26px auto 0;text-align:center;color:var(--muted);font-size:14px;font-family:Arial,sans-serif}

/* ===== newsletter ===== */
.news{max-width:560px;margin:0 auto;text-align:center}
.news form{display:flex;gap:10px;margin-top:18px}
@media(max-width:520px){.news form{flex-direction:column}}
.news input{flex:1;padding:13px 16px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-family:Arial,sans-serif;font-size:14px}
.news p{color:var(--muted);font-size:13px;font-family:Arial,sans-serif}

/* ===== final cta / footer ===== */
.finalcta{background:linear-gradient(180deg,var(--bg2),color-mix(in srgb,var(--accent) 24%,var(--bg)));text-align:center}
footer{padding:30px 0;text-align:center;color:var(--muted);font-family:Arial,sans-serif;font-size:13px;border-top:1px solid var(--line)}
.note{max-width:820px;margin:16px auto 0;font-family:Arial,sans-serif;font-size:12px;color:color-mix(in srgb,var(--muted) 80%,transparent);text-align:center}

/* reduced motion: reveal all rotation slides as a row, hide controls */
@media(prefers-reduced-motion:reduce){
  .rctrls{display:none}
}

/* ===== wow polish (additive) ===== */
.tilecover,.rcover,.sbookcover{transition:transform .35s ease, box-shadow .35s ease}
.tilecover img,.rcover img,.sbookcover img{transition:transform .55s ease}
.tile:hover .tilecover{box-shadow:0 22px 52px rgba(0,0,0,.6), 0 0 28px -6px var(--accent)}
.tile:hover .tilecover img{transform:scale(1.06)}
.rcover:hover{box-shadow:0 30px 72px rgba(0,0,0,.7), 0 0 44px -8px var(--accent)}
.rcover:hover img{transform:scale(1.04)}
.sbook:hover .sbookcover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.55), 0 0 24px -8px var(--accent)}
.wcard:hover{box-shadow:0 18px 46px rgba(0,0,0,.5), 0 0 28px -10px var(--accent)}
.card{transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 16px 34px rgba(0,0,0,.45)}
section h2{position:relative;padding-bottom:14px}
section h2::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:54px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--gold))}
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{content:"";position:absolute;top:0;left:-65%;width:45%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .55s ease}
.btn.primary:hover::after{left:135%}
@media(prefers-reduced-motion:no-preference){
  .rstage{animation:wowup .7s ease both}
}
@keyframes wowup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* ===== series hub: rich book rows ===== */
.seriespromise{max-width:760px;text-align:center;font-size:18px;color:#e6e3da}
.bookrow{display:grid;grid-template-columns:160px 1fr;gap:26px;align-items:center;max-width:860px;margin:0 auto 22px;
  background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--bg) 60%,transparent));border:1px solid var(--line);border-radius:16px;padding:22px;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.bookrow:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 20px 46px rgba(0,0,0,.5),0 0 32px -12px var(--accent)}
.bookrow .bcover{aspect-ratio:2/3;border-radius:8px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08)}
.bookrow .bcover img{width:100%;height:100%;object-fit:cover}
.bnum{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.bookrow h3{font-size:25px;color:#fff;margin:8px 0 3px}
.bookrow .bsub{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--gold);font-size:13px;margin-bottom:10px}
.bstatus{display:inline-block;font-family:Arial,sans-serif;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;border-radius:20px;font-weight:700;margin-bottom:12px}
.bstatus.live{background:rgba(45,170,120,.92);color:#06140d}
.bstatus.soon{background:rgba(215,180,106,.92);color:#1a1408}
.bstatus.plan{background:rgba(255,255,255,.10);color:#cfd2da;border:1px solid var(--line)}
.bookrow p{color:#d7d4cc;font-size:15px;margin:0 0 16px;line-height:1.7}
.bookrow .links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bookrow.future{opacity:.92}
@media(max-width:560px){.bookrow{grid-template-columns:1fr;text-align:center;gap:16px}.bookrow .bcover{max-width:150px;margin:0 auto}.bookrow .links{justify-content:center}}
/* ===== character portraits in cast cards ===== */
.card .cphoto{width:100%;aspect-ratio:4/5;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 12px 28px rgba(0,0,0,.5);margin-bottom:12px}
.card .cphoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.card:hover .cphoto img{transform:scale(1.05)}
/* ===== footer logo ===== */
.footlogo{display:block;width:max-content;max-width:100%;margin:0 auto 16px;background:#f5f1e8;border-radius:16px;padding:16px 26px;box-shadow:0 10px 28px rgba(0,0,0,.4)}
.footlogo img{height:96px;width:auto;display:block}
@media(max-width:520px){.footlogo img{height:72px}}