/* ════════════════════════════════════════════════════════════════
   THE SUNDERING VOWS — site styles
   Palette and type taken from the cover art: ash, bone, ember.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* ground */
  --void:      #05050a;
  --ash-deep:  #090a10;
  --ash:       #0e0f16;
  --ash-lift:  #14151e;
  --stone:     #22232e;
  --stone-hi:  #32343f;

  /* light */
  --bone:      #ece6d9;
  --bone-dim:  #b7b0a1;
  --bone-far:  #7d776b;

  /* fire */
  --ember:     #d9682c;
  --ember-hi:  #ff9a4d;
  --ember-lo:  #7d2f0e;
  --ember-glow: rgba(255,138,61,.30);

  /* the Hollow */
  --silver:    #c3ccd8;
  --violet:    #6d5a86;

  --shell:     min(1200px, 92vw);
  --shell-n:   min(760px, 92vw);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  --f-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-body:    "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-ui:      ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ─────────────  reset / base  ───────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--bone-dim);
  font-family:var(--f-body);
  font-size:clamp(17px,.55vw + 15.2px,20px);
  line-height:1.78;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,picture,svg{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:400; color:var(--bone); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
::selection{ background:rgba(217,104,44,.35); color:#fff; }

:focus-visible{
  outline:2px solid var(--ember-hi);
  outline-offset:3px;
  border-radius:2px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ember); color:#120a04; padding:.7rem 1.1rem;
  font-family:var(--f-ui); font-size:14px; text-decoration:none;
}
.skip:focus{ left:1rem; top:1rem; }

.nowrap{ white-space:nowrap; }
.shell{ width:var(--shell); margin-inline:auto; }
.shell--narrow{ width:var(--shell-n); }

/* ─────────────  shared type  ───────────── */
.eyebrow{
  font-family:var(--f-display);
  font-size:clamp(10px,.28vw + 9px,12px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ember);
  margin:0 0 1.1rem;
  opacity:.92;
}
.hero .eyebrow{
  /* sits over the brightest part of the fracture field, so it needs its own
     ground rather than the ember colour used elsewhere */
  color:#f2e7d8;
  opacity:.96;
  text-shadow:0 0 20px rgba(4,4,8,1), 0 0 10px rgba(4,4,8,1), 0 1px 3px rgba(0,0,0,.95);
}
.h-display{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(2.1rem,4.4vw,3.6rem);
  line-height:1.08;
  letter-spacing:.012em;
  color:var(--bone);
  margin:0 0 1.2rem;
}
.h-display .amp{
  display:inline-block;
  font-size:.52em;
  letter-spacing:.24em;
  color:var(--bone-far);
  vertical-align:middle;
  padding:0 .1em;
}
.lede{
  font-size:clamp(1.03rem,.5vw + .92rem,1.28rem);
  line-height:1.78;
  color:var(--bone-dim);
  max-width:62ch;
}
.rule{
  width:100%; height:1px; margin:1.9rem 0;
  background:linear-gradient(90deg,var(--ember-lo),rgba(217,104,44,.18) 38%,transparent 78%);
}
.sechead{ margin-bottom:clamp(2.6rem,5vw,4.2rem); }
.sechead--center{ text-align:center; }
.sechead--center .lede{ margin-inline:auto; }

/* ─────────────  buttons  ───────────── */
.btn{
  --bg:transparent;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-display);
  font-size:clamp(12px,.22vw + 11.2px,13.5px);
  letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--bone);
  padding:1.02em 1.7em;
  border:1px solid var(--stone-hi);
  background:var(--bg);
  position:relative; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease),
             transform .4s var(--ease), box-shadow .5s var(--ease);
}
.btn svg{ transition:transform .4s var(--ease); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,var(--ember-lo),var(--ember));
  opacity:0; transition:opacity .45s var(--ease);
}
.btn:hover,.btn:focus-visible{
  color:#fff; border-color:var(--ember);
  box-shadow:0 0 34px -8px var(--ember-glow);
}
.btn:hover::before,.btn:focus-visible::before{ opacity:.22; }
.btn:hover svg{ transform:translateX(4px); }
.btn:active{ transform:translateY(1px); }

.btn--primary{
  color:#1a0d05;
  border-color:transparent;
  background:linear-gradient(118deg,#f0913f,var(--ember) 46%,#a8400f);
  box-shadow:0 12px 42px -18px rgba(255,138,61,.75), inset 0 1px 0 rgba(255,225,190,.45);
}
.btn--primary::before{ background:linear-gradient(118deg,#ffb268,#e5763a 46%,#c24c12); }
.btn--primary:hover,.btn--primary:focus-visible{
  color:#160b03; border-color:transparent;
  box-shadow:0 16px 54px -16px rgba(255,138,61,.85), inset 0 1px 0 rgba(255,225,190,.6);
}
.btn--primary:hover::before,.btn--primary:focus-visible::before{ opacity:1; }

.btn--ghost{ border-color:rgba(183,176,161,.26); color:var(--bone-dim); }
.btn--ghost:hover,.btn--ghost:focus-visible{ color:var(--bone); }

.btn--lg{ padding:1.15em 2.2em; }
.btn--sm{ padding:.72em 1.15em; font-size:11px; letter-spacing:.16em; }

/* ─────────────  ambient layers  ───────────── */
.emberfield{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.85;
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 34%,rgba(3,3,6,.55) 82%,rgba(2,2,4,.92) 100%);
}
main,.topbar,.foot{ position:relative; z-index:2; }

/* progress hairline */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:90;
  background:rgba(120,110,100,.1);
}
.progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#8d3a14,var(--ember),var(--ember-hi));
  box-shadow:0 0 14px var(--ember-glow);
  transition:width .12s linear;
}

/* ─────────────  top bar  ───────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.4rem);
  padding:.85rem clamp(1rem,4vw,2.4rem);
  background:rgba(6,6,11,.72);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid rgba(180,170,155,.07);
  transform:translateY(-105%);
  opacity:0;
  transition:transform .6s var(--ease-out), opacity .5s var(--ease);
}
.topbar.is-visible{ transform:none; opacity:1; }
.topbar__mark{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--bone);
  font-family:var(--f-display); font-size:12.5px;
  letter-spacing:.24em; text-transform:uppercase;
  white-space:nowrap;
}
.topbar__mark svg{ color:var(--ember); flex:none; }
.topbar__nav{
  display:flex; gap:clamp(.9rem,2vw,1.8rem);
  margin-left:auto;
  font-family:var(--f-display);
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
}
.topbar__nav a{
  text-decoration:none; color:var(--bone-far);
  padding:.35rem 0; position:relative;
  transition:color .35s var(--ease);
}
.topbar__nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--ember); transition:right .4s var(--ease);
}
.topbar__nav a:hover,.topbar__nav a:focus-visible,.topbar__nav a.is-current{ color:var(--bone); }
.topbar__nav a:hover::after,.topbar__nav a.is-current::after{ right:0; }
.topbar .btn--sm{ flex:none; }
@media (max-width:1080px){ .topbar__nav{ display:none; } .topbar .btn--sm{ margin-left:auto; } }

/* ═════════════════════════  HERO  ═════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  text-align:center;
  padding:clamp(9rem,26vh,15rem) 1.2rem clamp(3.5rem,7vh,5rem);
  overflow:hidden;
  isolation:isolate;
}
.hero__sky{ position:absolute; inset:0; z-index:-1; }
.hero__sky::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 20%, #221e22 0%, #141319 34%, #0a0a10 66%, #040407 100%),
    linear-gradient(180deg,#0c0b11,#05050a);
}
.hero__sky::after{  /* dusty coppery glow off the Wound */
  content:""; position:absolute; inset:0;
  background:radial-gradient(56% 44% at 50% 20%, rgba(201,96,31,.2), rgba(120,50,14,.07) 46%, transparent 74%);
  mix-blend-mode:screen;
}

/* the Wound — painted art, screen-blended onto the sky */
.wound{
  position:absolute; left:50%; top:20vh;
  width:clamp(300px,42vw,620px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  will-change:transform;
}
@media (max-height:760px){ .wound{ top:17vh; width:clamp(240px,32vw,430px); } }
.wound::before{          /* soft bloom behind the break */
  content:""; position:absolute; inset:8%;
  background:radial-gradient(circle at 50% 50%, rgba(255,140,60,.20), rgba(150,55,14,.07) 46%, transparent 72%);
  filter:blur(22px);
  animation:haloPulse 9s ease-in-out infinite;
}
@keyframes haloPulse{ 0%,100%{opacity:.75;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
.wound__img{
  width:100%; height:100%;
  object-fit:contain;
  opacity:.94;
  /* The art is opaque — a WebP carrying a baked alpha channel came out seven
     times the size. Screen blending drops its near-black sky to nothing
     against the hero gradient, so no edge shows; the mask is belt-and-braces
     for the corners, where the sky is not quite black. */
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(circle closest-side, #000 68%, rgba(0,0,0,.55) 88%, transparent 100%);
          mask-image:radial-gradient(circle closest-side, #000 68%, rgba(0,0,0,.55) 88%, transparent 100%);
}

/* ridgelines */
.ridge{
  position:absolute; left:-4%; right:-4%; bottom:0;
  width:108%; height:auto;
  will-change:transform;
}
.hero__horizon{
  position:absolute; left:0; right:0; bottom:4%; height:22%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(186,92,32,.15), rgba(110,48,16,.05) 48%, transparent 76%);
  mix-blend-mode:screen; pointer-events:none;
}
.ridge--far{  bottom:9%; opacity:.5; filter:blur(2.4px); }
.ridge--far path{  fill:#191a24; }
.ridge--mid{  bottom:1%;  opacity:.7; filter:blur(1.2px); }
.ridge--mid path{  fill:#0d0e16; }
.ridge--near{ bottom:-11%; }
.ridge--near path{ fill:#05050a; }
.hero__ash{
  position:absolute; inset:auto 0 0 0; height:42%;
  background:
    linear-gradient(180deg,transparent,rgba(30,22,18,.14) 26%,transparent 52%),
    linear-gradient(180deg,transparent 38%,rgba(4,4,8,.6) 76%,var(--void));
}

.hero__inner{ max-width:min(980px,94vw); }

.hero__title{
  font-family:var(--f-display);
  font-weight:600;
  line-height:.94;
  margin:0 0 clamp(1.6rem,3.4vw,2.4rem);
  color:transparent;
  background:linear-gradient(178deg,#fff8ed 6%,#efe4d0 28%,#c8bba4 58%,#8a7f6d 92%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 2px 30px rgba(255,150,80,.16))
         drop-shadow(0 0 22px rgba(4,4,8,.95))
         drop-shadow(0 1px 2px rgba(0,0,0,.9));
}
.hero__title span{ display:block; }
.hero__title-l1{
  font-size:clamp(.92rem,1.9vw,1.45rem);
  letter-spacing:.62em; text-indent:.62em;
  margin-bottom:.55em;
  opacity:.82;
}
.hero__title-l2{ font-size:clamp(2.7rem,9vw,7.4rem); letter-spacing:.015em; }
.hero__title-l3{
  font-size:clamp(2.2rem,7vw,5.8rem);
  letter-spacing:.2em; text-indent:.2em;
  margin-top:-.04em;
}
.hero__tag{
  font-size:clamp(1.12rem,1.8vw,1.6rem);
  font-style:italic; font-weight:300;
  line-height:1.6; color:var(--bone-dim);
  margin:0 0 1.5rem;
}
.hero__byline{
  font-family:var(--f-display);
  font-size:clamp(12px,.4vw + 10.6px,15px);
  letter-spacing:.44em; text-indent:.44em; text-transform:uppercase;
  color:var(--bone-far);
  margin:0 0 clamp(2rem,4vw,2.8rem);
  position:relative; display:inline-block; padding:0 1.6em;
}
.hero__byline::before,.hero__byline::after{
  content:""; position:absolute; top:50%; width:2.2em; height:1px;
  background:linear-gradient(90deg,transparent,rgba(183,176,161,.4));
}
.hero__byline::before{ right:100%; }
.hero__byline::after{ left:100%; transform:scaleX(-1); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }
.hero__meta{
  margin:1.5rem 0 0;
  font-size:.92rem; letter-spacing:.04em; color:var(--bone-far);
}

.scrollcue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  width:26px; height:44px; border:1px solid rgba(183,176,161,.3);
  border-radius:14px; display:grid; place-items:start center; padding-top:8px;
  opacity:.75; transition:opacity .4s var(--ease), border-color .4s var(--ease);
}
.scrollcue:hover{ opacity:1; border-color:var(--ember); }
.scrollcue span{
  width:3px; height:7px; border-radius:2px; background:var(--ember);
  animation:cue 2.1s var(--ease) infinite;
}
@keyframes cue{ 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 70%{opacity:1;transform:translateY(16px)} 100%{opacity:0;transform:translateY(20px)} }

/* ═════════════════════════  PROLOGUE  ═════════════════════════ */
.prologue{
  position:relative;
  padding:clamp(7rem,18vh,13rem) 1.2rem clamp(7rem,18vh,13rem);
  background:
    radial-gradient(70% 50% at 50% 50%, rgba(109,90,134,.08), transparent 70%),
    linear-gradient(180deg,var(--void),#07070d 30%,#07070d 70%,var(--void));
}
.prologue__inner{ width:var(--shell-n); margin-inline:auto; text-align:center; }
.prologue__label{
  font-family:var(--f-display); font-size:11px; letter-spacing:.52em;
  text-transform:uppercase; color:var(--violet); margin-bottom:3.4rem; opacity:.8;
}
.prologue .line{
  font-size:clamp(1.14rem,1.5vw + .7rem,1.72rem);
  font-style:italic; font-weight:300; line-height:1.72;
  color:#9aa0ac;
  margin:0 0 2.1em;
  text-wrap:balance;
}
.prologue .line--em{
  font-style:normal; color:var(--silver);
  font-family:var(--f-display); font-size:clamp(1.15rem,2.4vw,1.9rem);
  letter-spacing:.06em;
}
.prologue .line--ask{
  font-size:clamp(1.5rem,4.2vw,2.9rem);
  color:var(--silver); font-style:italic;
  text-shadow:0 0 42px rgba(160,172,196,.3);
  margin-block:3rem;
}
.prologue .line--yes{ color:var(--bone-dim); font-style:normal; }
.prologue .line--yes span{
  color:var(--ember-hi); font-style:normal;
  text-shadow:0 0 30px var(--ember-glow);
}
.prologue__attr{
  margin-top:3.2rem;
  font-family:var(--f-display); font-size:11.5px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--bone-far);
}

/* ═════════════════════════  THE BOOK  ═════════════════════════ */
.book{
  padding:clamp(5rem,11vh,8.5rem) 0;
  background:linear-gradient(180deg,var(--void),var(--ash) 40%,var(--ash));
  border-top:1px solid rgba(180,170,155,.06);
}
.book__grid{
  display:grid;
  grid-template-columns:minmax(260px,.82fr) 1.18fr;
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start;
}
@media (max-width:900px){
  .book__grid{ grid-template-columns:1fr; }
  .book__art{ max-width:340px; margin-inline:auto; }
}
.book__art{ position:sticky; top:6.5rem; }
@media (max-width:900px){ .book__art{ position:static; } }

.coverwrap{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .7s var(--ease-out);
  will-change:transform;
}
.coverwrap img{
  width:100%;
  border-radius:3px;
  box-shadow:
    0 2px 4px rgba(0,0,0,.6),
    0 18px 40px -12px rgba(0,0,0,.85),
    0 50px 90px -30px rgba(0,0,0,.9),
    0 0 0 1px rgba(200,190,170,.07);
}
.coverwrap__glow{
  position:absolute; inset:-14% -18%;
  background:radial-gradient(50% 44% at 50% 40%, rgba(217,104,44,.4), rgba(217,104,44,.08) 52%, transparent 74%);
  filter:blur(28px); opacity:.55; z-index:-1;
  transition:opacity .7s var(--ease);
}
.coverwrap:hover .coverwrap__glow{ opacity:.95; }
.coverwrap__sheen{
  position:absolute; inset:0; border-radius:3px; pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,236,210,.13) 47%,transparent 60%);
  opacity:0; transition:opacity .6s var(--ease);
  mix-blend-mode:screen;
}
.coverwrap:hover .coverwrap__sheen{ opacity:1; }
.book__formats{
  margin-top:1.4rem; text-align:center;
  font-family:var(--f-display); font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--bone-far);
}
.book__formats i{ color:var(--ember); padding:0 .6em; font-style:normal; }

.book__hook{
  font-family:var(--f-display);
  font-size:clamp(1rem,1.5vw,1.28rem);
  line-height:1.6; letter-spacing:.07em;
  color:var(--ember-hi);
  margin:.4rem 0 0;
}
.book__blurb p{ max-width:60ch; }
.book__blurb strong{ color:var(--bone); font-weight:500; }
.book__buy{ margin-top:2.4rem; }
.book__note{
  margin:1.5rem 0 0;
  font-size:.92rem; line-height:1.7; color:var(--bone-far); max-width:52ch;
}
.book__note span{ color:#635e55; font-size:.9em; }

/* ═════════════════════════  THE WORLD  ═════════════════════════ */
.world{
  padding:clamp(5rem,11vh,8.5rem) 0;
  background:linear-gradient(180deg,var(--ash),var(--ash-deep));
}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:1px;
  background:rgba(180,170,155,.09);
  border:1px solid rgba(180,170,155,.09);
}
.card{
  position:relative;
  background:linear-gradient(165deg,var(--ash-lift),var(--ash-deep));
  padding:clamp(1.8rem,3vw,2.6rem);
  overflow:hidden;
  transition:background .6s var(--ease);
}
.card::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(90% 70% at 50% 110%, rgba(217,104,44,.2), transparent 70%);
  opacity:0; transition:opacity .6s var(--ease); pointer-events:none;
}
.card:hover::after{ opacity:1; }
.card:hover{ background:linear-gradient(165deg,#191a24,#0d0e15); }
.card__num{
  display:block;
  font-family:var(--f-display); font-size:11px; letter-spacing:.3em;
  color:var(--ember); opacity:.75; margin-bottom:1.1rem;
}
.card h3{
  font-family:var(--f-display); font-size:1.24rem; letter-spacing:.05em;
  margin-bottom:.7rem;
}
.card p{ font-size:.98rem; line-height:1.72; color:var(--bone-far); margin:0; }

/* ═════════════════════════  THE MARK  ═════════════════════════ */
.mark{
  padding:clamp(5rem,11vh,8.5rem) 0;
  background:
    radial-gradient(60% 40% at 88% 8%, rgba(125,47,14,.16), transparent 62%),
    var(--ash-deep);
  border-top:1px solid rgba(180,170,155,.06);
}
.mark__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.6rem,6vw,6rem); align-items:start;
}
@media (max-width:860px){ .mark__grid{ grid-template-columns:1fr; } }
.mark__intro{ position:sticky; top:7rem; }
@media (max-width:860px){ .mark__intro{ position:static; } }

.pullquote{ margin:2.6rem 0 0; padding-left:1.6rem; border-left:1px solid var(--ember-lo); }
.pullquote blockquote{ margin:0; }
.pullquote p{
  font-family:var(--f-display); font-size:clamp(1.1rem,1.8vw,1.42rem);
  line-height:1.5; color:var(--bone); letter-spacing:.02em; margin:0 0 .8rem;
}
.pullquote figcaption{
  font-family:var(--f-display); font-size:10.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ember);
}

.steps{
  list-style:none; margin:0; padding:0 0 0 clamp(2rem,4vw,3.2rem);
  position:relative; counter-reset:step;
}
.steps__vein{
  position:absolute; left:0; top:.6rem; bottom:.6rem;
  width:12px; height:auto;
  overflow:visible;
}
.steps__vein path{ filter:drop-shadow(0 0 6px rgba(217,104,44,.5)); }
.step{
  position:relative;
  padding:0 0 clamp(2.2rem,4vw,3rem);
  counter-increment:step;
}
.step:last-child{ padding-bottom:0; }
.step::before{
  content:"";
  position:absolute; left:calc(-1 * clamp(2rem,4vw,3.2rem) + 1px);
  top:.72em; width:10px; height:10px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--ash-deep);
  border:1px solid var(--ember);
  box-shadow:0 0 14px var(--ember-glow);
}
.step h3{
  font-family:var(--f-display); font-size:clamp(1.12rem,1.6vw,1.34rem);
  letter-spacing:.06em; margin-bottom:.55rem;
}
.step p{ color:var(--bone-far); font-size:1rem; max-width:48ch; margin:0; }
.step em{ color:var(--bone-dim); }

/* ═════════════════════════  THE THREE  ═════════════════════════ */
.three{
  padding:clamp(5rem,11vh,8.5rem) 0;
  background:linear-gradient(180deg,var(--ash-deep),var(--void));
}
.trio{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1.2rem,2.4vw,2rem);
}
.figure{
  --accent:var(--ember);
  position:relative;
  padding:clamp(2rem,3.4vw,2.8rem) clamp(1.6rem,2.6vw,2.2rem);
  background:linear-gradient(170deg,rgba(24,25,34,.9),rgba(9,10,16,.9));
  border:1px solid rgba(180,170,155,.08);
  border-top:2px solid var(--accent);
  overflow:hidden;
  transition:transform .6s var(--ease-out), border-color .6s var(--ease);
}
.figure::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(100% 60% at 50% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
  opacity:.5; transition:opacity .6s var(--ease);
}
.figure:hover{ transform:translateY(-5px); }
.figure:hover::before{ opacity:1; }
.figure--maren{  --accent:#c9803c; }
.figure--sorin{  --accent:#9a4a22; }
.figure--vaelor{ --accent:#7a6796; }
.figure__role{
  font-family:var(--f-display); font-size:10.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.7rem;
}
.figure__name{
  font-family:var(--f-display); font-size:clamp(1.5rem,2.6vw,2rem);
  letter-spacing:.04em; margin-bottom:1.1rem;
}
.figure__body{ font-size:1rem; line-height:1.76; color:var(--bone-far); }
.figure__body em{ color:var(--bone-dim); font-style:italic; }
.figure__quote{
  margin:1.4rem 0 0; padding-top:1.3rem;
  border-top:1px solid rgba(180,170,155,.1);
  font-size:1.02rem; line-height:1.62; font-style:italic; color:var(--bone-dim);
}
.figure__quote--em{ color:var(--silver); }

/* ═════════════════════════  EXCERPT  ═════════════════════════ */
.excerpt{
  padding:clamp(5rem,11vh,8.5rem) 0;
  background:var(--void);
  border-top:1px solid rgba(180,170,155,.06);
}
.tabs__list{
  display:flex; justify-content:center; gap:.4rem; margin-bottom:2.2rem;
}
.tabs__tab{
  appearance:none; background:none; cursor:pointer;
  border:1px solid transparent; border-bottom-color:rgba(180,170,155,.14);
  color:var(--bone-far);
  font-family:var(--f-display); font-size:11.5px;
  letter-spacing:.28em; text-transform:uppercase;
  padding:.8em 1.6em;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.tabs__tab:hover{ color:var(--bone-dim); }
.tabs__tab[aria-selected="true"]{
  color:var(--ember-hi);
  border-color:rgba(217,104,44,.3);
  border-bottom-color:var(--ember);
}
.page{
  position:relative;
  padding:clamp(2rem,4vw,3.4rem);
  background:linear-gradient(175deg,rgba(20,21,30,.75),rgba(7,7,12,.75));
  border:1px solid rgba(180,170,155,.09);
  box-shadow:inset 0 1px 0 rgba(255,245,230,.04);
}
.page__head{
  font-family:var(--f-display); font-size:10.5px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--ember);
  margin-bottom:1.8rem; text-align:center;
}
.page__body{
  position:relative;
  font-size:clamp(1.02rem,.4vw + .94rem,1.16rem);
  line-height:1.92; color:var(--bone-dim);
  max-height:22rem; overflow:hidden;
  transition:max-height .8s var(--ease-out);
}
.page__body::after{
  content:""; position:absolute; inset:auto 0 0 0; height:9rem;
  background:linear-gradient(180deg,transparent,rgba(8,8,13,.95));
  transition:opacity .5s var(--ease); pointer-events:none;
}
.page__body.is-open{ max-height:200rem; }
.page__body.is-open::after{ opacity:0; }
.page__body p:first-child::first-letter{
  float:left; font-family:var(--f-display); font-size:3.5em; line-height:.84;
  padding:.06em .1em 0 0; color:var(--ember); font-weight:500;
}
.more{
  display:block; margin:1.6rem auto 0;
  appearance:none; background:none; cursor:pointer;
  border:1px solid rgba(180,170,155,.2); color:var(--bone-dim);
  font-family:var(--f-display); font-size:10.5px;
  letter-spacing:.26em; text-transform:uppercase; padding:.75em 1.5em;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.more:hover{ color:var(--bone); border-color:var(--ember); }
.excerpt__cta{ text-align:center; margin-top:2.4rem; }

/* ═════════════════════════  SERIES  ═════════════════════════ */
.series{
  padding:clamp(5rem,11vh,8.5rem) 0;
  background:linear-gradient(180deg,var(--void),var(--ash-deep));
}
.volumes{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(1.6rem,3.4vw,3rem);
}
.vol{ text-align:center; }
.vol__art{
  position:relative; aspect-ratio:2/3; margin-bottom:1.6rem;
  display:grid; place-items:center;
}
.vol__art img{
  width:100%; height:100%; object-fit:cover; border-radius:2px;
  box-shadow:0 20px 48px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(200,190,170,.08);
  transition:transform .7s var(--ease-out), box-shadow .7s var(--ease);
}
.vol--out:hover .vol__art img{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.95), 0 0 46px -14px var(--ember-glow), 0 0 0 1px rgba(217,104,44,.3);
}
.vol__art--sealed{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 10px,transparent 10px 20px),
    linear-gradient(170deg,#121319,#08080d);
  border:1px solid rgba(180,170,155,.1);
  border-radius:2px;
}
.vol__seal{
  font-family:var(--f-display); font-size:clamp(2.4rem,5vw,3.6rem);
  letter-spacing:.14em; color:#2b2c36;
  text-shadow:0 1px 0 rgba(255,255,255,.04);
}
.vol__num{
  font-family:var(--f-display); font-size:10.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ember); margin-bottom:.6rem;
}
.vol:not(.vol--out) .vol__num{ color:var(--bone-far); }
.vol__title{
  font-family:var(--f-display); font-size:clamp(1.18rem,2vw,1.5rem);
  letter-spacing:.03em; margin-bottom:.9rem;
}
.vol:not(.vol--out) .vol__title{ color:var(--bone-far); font-style:italic; }
.vol__body{
  font-size:.98rem; line-height:1.72; color:var(--bone-far);
  max-width:38ch; margin-inline:auto;
}
.vol__status{
  margin-top:1.1rem;
  font-family:var(--f-display); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:#5d584f;
}
.vol__status--live{
  color:var(--ember-hi);
  text-shadow:0 0 22px var(--ember-glow);
}

/* ═════════════════════════  CLOSER  ═════════════════════════ */
.closer{
  position:relative; text-align:center;
  padding:clamp(6rem,15vh,11rem) 1.2rem;
  background:
    radial-gradient(60% 60% at 50% 100%, rgba(217,104,44,.18), transparent 68%),
    linear-gradient(180deg,var(--ash-deep),#0a0509 60%,var(--void));
  overflow:hidden;
}
.closer::before{
  content:""; position:absolute; left:50%; bottom:-40%;
  width:min(900px,120vw); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,138,61,.15), transparent 62%);
  filter:blur(26px);
  animation:pyre 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pyre{ 0%,100%{opacity:.7;transform:translateX(-50%) scale(1)} 50%{opacity:1;transform:translateX(-50%) scale(1.07)} }
.closer__inner{ position:relative; }
.closer__whisper{
  font-style:italic; font-size:clamp(1.05rem,1.6vw,1.3rem);
  color:var(--silver); opacity:.6; margin-bottom:1rem;
}
.closer .h-display{ font-size:clamp(2.4rem,6.6vw,4.6rem); margin-bottom:1.4rem; }
.closer__sub{ color:var(--bone-far); margin-bottom:2.6rem; }

/* ═════════════════════════  FOOT  ═════════════════════════ */
.foot{
  padding:clamp(3rem,6vh,4.5rem) 0 clamp(2.5rem,5vh,3.5rem);
  background:var(--void);
  border-top:1px solid rgba(180,170,155,.07);
  text-align:center;
}
.foot__title{
  font-family:var(--f-display); font-size:13px; letter-spacing:.42em;
  text-transform:uppercase; color:var(--bone-dim); margin-bottom:.5rem;
}
.foot__by{
  font-family:var(--f-display); font-size:10.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ember); margin-bottom:1.8rem;
}
.foot__note{ font-size:.88rem; color:#5d584f; max-width:46ch; margin-inline:auto; }
.foot__legal{ font-size:.82rem; color:#4a463f; margin-top:1.2rem; }

/* ═════════════════════════  REVEAL  ═════════════════════════ */
/* Hero stagger lives here rather than in style="" attributes, so the page
   works under a Content-Security-Policy without 'unsafe-inline'. */
.hero__inner > .reveal:nth-child(1){ --d:.05s; }
.hero__inner > .reveal:nth-child(2){ --d:.12s; }
.hero__inner > .reveal:nth-child(3){ --d:.34s; }
.hero__inner > .reveal:nth-child(4){ --d:.44s; }
.hero__inner > .reveal:nth-child(5){ --d:.54s; }
.hero__inner > .reveal:nth-child(6){ --d:.64s; }

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .95s var(--ease-out) var(--d,0s), transform .95s var(--ease-out) var(--d,0s);
}
.reveal.is-in{ opacity:1; transform:none; }

/* prologue lines drift in a touch further, for the whisper effect */
.prologue .line{ transform:translateY(34px); filter:blur(3px); transition-duration:1.25s; }
.prologue .line.is-in{ filter:blur(0); }

@media (prefers-reduced-motion:reduce){
  .reveal,.prologue .line{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .wound::before,.scrollcue span,.closer::before{ animation:none !important; }
  .emberfield{ display:none; }
  .coverwrap{ transform:none !important; }
}