/* =====================================================================
   THE BLOOD RECKONING SAGA — bespoke "epic" series microsite
   Gothic post-apocalyptic fantasy: near-black, oxblood crimson, glowing
   blood-glyph orange, gold leaf. Cinematic banner hero, bloodline cast,
   the seven-book arc, companions, and the wider Chronicles arcs.
   Built from the Chronicles of the Forgotten Blood series bible.
   ===================================================================== */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/fraunces-400.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/fraunces-600.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/fraunces-400-italic.woff2') format('woff2');}

body[data-page="blood-reckoning"]{
  --void:#0c0605; --panel:#150a09; --panel-2:#1d0e0c; --line:rgba(216,80,60,.18);
  --ink:#f3e7e2; --muted:#b39189; --crimson:#c0392b; --crimson-2:#e0584a; --glyph:#ff6a2c; --gold:#d9a84a;
  --serif:'Fraunces',Georgia,serif; --sans:'Archivo',system-ui,sans-serif;
  background:var(--void); color:var(--ink); padding-top:var(--nav-h); font-family:var(--sans);
  line-height:1.7; overflow-x:hidden;
}
body[data-page="blood-reckoning"]::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(60vw 50vh at 50% -8%,rgba(255,106,44,.16),transparent 60%),
    radial-gradient(50vw 50vh at 50% 108%,rgba(192,57,43,.20),transparent 60%),var(--void);
}
.br{max-width:1180px;margin-inline:auto;padding-inline:clamp(18px,4vw,44px)}
.br-narrow{max-width:760px}
body[data-page="blood-reckoning"] h1,body[data-page="blood-reckoning"] h2,body[data-page="blood-reckoning"] h3{font-family:var(--serif);font-weight:600;line-height:1.08}
.br-kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;color:var(--gold);font-weight:600}
.br-rule{display:flex;align-items:center;gap:1rem;color:var(--crimson);justify-content:center}
.br-rule::before,.br-rule::after{content:"";height:1px;width:54px;background:linear-gradient(90deg,transparent,var(--crimson))}
.br-rule::after{background:linear-gradient(90deg,var(--crimson),transparent)}
.br-em{color:var(--glyph)}

/* ---- HERO (banner) ------------------------------------------------- */
.br-hero{position:relative;min-height:min(90vh,820px);display:flex;align-items:center;overflow:hidden;text-align:center}
.br-hero .bg{position:absolute;inset:0;z-index:-1}
.br-hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.br-hero .bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(95% 78% at 50% 60%,rgba(12,6,5,.82),rgba(12,6,5,.34) 54%,transparent 78%),
  radial-gradient(120% 90% at 50% 30%,transparent,rgba(12,6,5,.55) 70%,var(--void)),
  linear-gradient(0deg,var(--void),transparent 45%)}
.br-hero .inner{position:relative;z-index:1;width:100%}
.br-hero .crumb a{color:var(--gold);font-weight:600;font-size:.85rem;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.br-hero h1{font-size:clamp(2.6rem,7vw,5.4rem);margin:.6rem 0 .2rem;text-shadow:0 4px 40px rgba(0,0,0,.85)}
.br-hero .tagline{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.7rem);color:var(--ink);max-width:34ch;margin:1rem auto 0;text-shadow:0 2px 20px rgba(0,0,0,.9)}
.br-hero .codex{margin-top:1.6rem;font-family:var(--mono,monospace);font-size:.86rem;color:var(--glyph);letter-spacing:.04em;text-shadow:0 2px 16px rgba(0,0,0,.92)}
.br-hero .cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2rem}
.btn-blood{display:inline-flex;align-items:center;gap:.5em;background:linear-gradient(180deg,var(--crimson-2),var(--crimson));color:#fff;font-weight:700;
  padding:.95em 1.7em;border-radius:5px;box-shadow:0 14px 40px -12px rgba(192,57,43,.7);transition:transform .18s,box-shadow .18s}
.btn-blood:hover{transform:translateY(-2px);box-shadow:0 22px 54px -14px rgba(255,106,44,.7)}
.btn-bone{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--line);color:var(--ink);font-weight:600;padding:.95em 1.6em;border-radius:5px;transition:.18s}
.btn-bone:hover{border-color:var(--glyph);color:var(--glyph)}

/* ---- PREMISE ------------------------------------------------------- */
.br-premise{padding:clamp(56px,8vw,120px) 0;text-align:center}
.br-premise h2{font-size:clamp(1.9rem,4.4vw,3.1rem);margin:1rem auto;max-width:22ch}
.br-premise p{color:var(--muted);max-width:62ch;margin:0 auto;font-size:1.1rem}

/* ---- quote band ---------------------------------------------------- */
.br-band{padding:clamp(48px,8vw,110px) 0;text-align:center;background:linear-gradient(180deg,var(--panel),var(--void));border-block:1px solid var(--line)}
.br-band blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.3;max-width:26ch;margin:0 auto}
.br-band cite{display:block;font-family:var(--sans);font-style:normal;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:1.2rem}

/* ---- BLOODLINES / CAST --------------------------------------------- */
.br-cast{padding:clamp(56px,8vw,120px) 0}
.br-head{text-align:center;max-width:680px;margin:0 auto clamp(28px,4vw,52px)}
.br-head h2{font-size:clamp(2rem,4.6vw,3.4rem);margin:.8rem 0}
.br-head p{color:var(--muted)}
.cast-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)}
@media(max-width:900px){.cast-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.cast-grid{grid-template-columns:repeat(2,1fr)}}
.cast{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--panel);transition:transform .3s,border-color .3s,box-shadow .3s}
.cast:hover{transform:translateY(-5px);border-color:var(--glyph);box-shadow:0 24px 50px -28px rgba(255,106,44,.5)}
.cast .ph{aspect-ratio:533/800;overflow:hidden}
.cast .ph img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:saturate(.92)}
.cast .c-body{padding:14px 16px 18px}
.cast .role{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:var(--glyph)}
.cast h3{font-family:var(--serif);font-size:1.25rem;margin:.2rem 0 .35rem}
.cast p{color:var(--muted);font-size:.86rem}

/* ---- BOOK ARC (reading order) -------------------------------------- */
.br-books{padding:clamp(56px,8vw,120px) 0;background:linear-gradient(180deg,var(--panel),var(--void));border-block:1px solid var(--line)}
.arc-list{display:flex;flex-direction:column;gap:clamp(14px,2vw,20px)}
.arc-book{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,34px);align-items:center;
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:clamp(16px,2.4vw,24px);transition:border-color .25s,transform .25s}
.arc-book:hover{border-color:var(--crimson);transform:translateX(4px)}
.arc-book .cv{width:clamp(78px,9vw,104px);aspect-ratio:2/3;object-fit:cover;border-radius:3px;box-shadow:0 12px 26px -12px rgba(0,0,0,.7)}
.arc-book .num{font-family:var(--serif);font-size:1.5rem;color:var(--crimson-2);min-width:1.6em;text-align:center}
.arc-book .b-body h3{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.55rem)}
.arc-book .b-body .tl{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:.98rem;margin:.2rem 0 .3rem}
.arc-book .b-body p{color:var(--muted);font-size:.86rem;max-width:54ch}
.arc-book .b-side{text-align:right;display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.badge{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3em .7em;border-radius:3px}
.badge.live{background:var(--crimson);color:#fff}
.badge.soon{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.btn-amz{font-size:.82rem;font-weight:700;color:var(--gold);border-bottom:2px solid var(--crimson);padding-bottom:1px;white-space:nowrap}
.btn-amz:hover{color:var(--glyph)}
@media(max-width:640px){.arc-book{grid-template-columns:auto 1fr}.arc-book .b-side{grid-column:1/-1;flex-direction:row;align-items:center;text-align:left}}

/* ---- COMPANIONS + ARCS --------------------------------------------- */
.br-extra{padding:clamp(56px,8vw,110px) 0}
.comp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px)}
@media(max-width:760px){.comp-grid{grid-template-columns:1fr}}
.comp{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px}
.comp img{width:70px;aspect-ratio:2/3;object-fit:cover;border-radius:3px}
.comp h3{font-family:var(--serif);font-size:1.05rem}.comp p{color:var(--muted);font-size:.8rem;margin:.2rem 0 .4rem}
.arc-mini{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:1.4rem}
@media(max-width:820px){.arc-mini{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.arc-mini{grid-template-columns:repeat(2,1fr)}}
.arc-mini figure{border-radius:6px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.arc-mini img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;filter:brightness(.88) saturate(.95);transition:.3s}
.arc-mini figure:hover img{filter:brightness(1) saturate(1)}
.arc-mini figcaption{padding:.5rem .5rem .55rem;font-family:var(--sans);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);text-align:center}

/* ---- CTA ----------------------------------------------------------- */
.br-cta{padding:clamp(60px,9vw,130px) 0;text-align:center}
.br-cta h2{font-size:clamp(2rem,5vw,3.2rem);margin:1rem 0}
.br-cta p{color:var(--muted);max-width:50ch;margin:0 auto 2rem}
.br-cta .cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}