/* ============================================================
   HELL FORGED BOOKS — main.css
   Charcoal / steel / blood-red · Cinzel / Spectral / Inter
   ============================================================ */

:root{
  /* Core palette */
  --ink:        #08080a;
  --char:       #0e0e12;
  --char-2:     #14141a;
  --steel:      #8b8f98;
  --steel-dim:  #5c606a;
  --bone:       #e8e4dc;
  --bone-dim:   #c9c4ba;
  --blood:      #a31221;
  --blood-hi:   #c2293a;
  --hairline:   rgba(232,228,220,.08);
  --hairline-2: rgba(232,228,220,.14);

  /* House / city accents — sigil-true, muted for the dark field */
  --draconi:  #8b6fb3;   /* royal purple on black void   */
  --sabre:    #b13a3a;   /* blood stripes on black       */
  --veisik:   #6f9fc4;   /* white star on dark blue      */
  --provak:   #c9962e;   /* gold hammer on orange-black  */
  --vicestatt:#d44a6f;   /* sin-city neon crimson        */
  --purgatory:#7d8794;   /* checkpoint steel             */
  --seraphel: #4aa37c;   /* serpent green                */

  --font-display:'Cinzel', serif;
  --font-body:   'Spectral', Georgia, serif;
  --font-ui:     'Inter', system-ui, sans-serif;

  --max: 1180px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* v12: any element targeted by a #hash anchor clears the sticky header */
:target{ scroll-margin-top:5.5rem; }
section[id], article[id]{ scroll-margin-top:5.5rem; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone-dim);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--bone); text-decoration:none; }
a:hover{ color:var(--blood-hi); }
:focus-visible{ outline:2px solid var(--blood-hi); outline-offset:3px; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--blood); color:var(--bone); padding:.6rem 1rem;
  font-family:var(--font-ui); font-size:.85rem;
}
.skip-link:focus{ left:0; }

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--bone);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .6em;
  letter-spacing:.015em;
}
h1{ font-size:clamp(2.4rem, 6vw, 4.2rem); }
h2{ font-size:clamp(1.7rem, 3.6vw, 2.6rem); }
h3{ font-size:clamp(1.2rem, 2.2vw, 1.5rem); }
p{ margin:0 0 1.1em; }
strong{ color:var(--bone); }
em{ font-style:italic; }

.eyebrow{
  font-family:var(--font-ui);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blood-hi);
  margin:0 0 1rem;
}
.eyebrow .sep{ color:var(--steel-dim); padding:0 .35em; }

.lede{ font-size:clamp(1.05rem, 1.8vw, 1.25rem); color:var(--bone-dim); max-width:62ch; }

blockquote{
  margin:1.6rem 0;
  padding:1rem 0 1rem 1.4rem;
  border-left:2px solid var(--blood);
  font-style:italic;
  color:var(--bone);
  font-size:1.08em;
}
blockquote cite{
  display:block; margin-top:.6rem;
  font-family:var(--font-ui); font-style:normal;
  font-size:.78rem; letter-spacing:.08em; color:var(--steel);
}
.rhyme{
  font-family:var(--font-display);
  font-size:clamp(1.05rem, 2vw, 1.3rem);
  line-height:1.9;
  color:var(--bone);
  border-left:0;
  padding-left:0;
  text-align:center;
}

/* ---------- Header / nav ---------- */
.site-head{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:1.5rem;
  padding:.85rem var(--pad);
  background:rgba(8,8,10,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-size:1.05rem; color:var(--bone);
  letter-spacing:.04em; white-space:nowrap;
}
.brand img{ width:32px; height:32px; }
.brand b{ font-weight:700; }
.brand span{ color:var(--steel); font-weight:400; }

.nav-toggle{
  margin-left:auto;
  background:none; border:1px solid var(--hairline-2); color:var(--bone);
  font-size:1.1rem; padding:.3rem .65rem; cursor:pointer; display:none;
}
.site-nav{ margin-left:auto; display:flex; align-items:center; gap:1.6rem; }
.site-nav a{
  font-family:var(--font-ui); font-size:.84rem; font-weight:500;
  letter-spacing:.06em; color:var(--bone-dim);
}
.site-nav a:hover,.site-nav a[aria-current="page"]{ color:var(--bone); }
.site-nav a[aria-current="page"]{ border-bottom:1px solid var(--blood-hi); padding-bottom:2px; }
.btn-cta{
  background:var(--blood); color:var(--bone) !important;
  padding:.55rem 1.15rem; letter-spacing:.08em;
  border:1px solid transparent;
}
.btn-cta:hover{ background:var(--blood-hi); }

@media (max-width: 880px){
  .nav-toggle{ display:block; }
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--char); border-bottom:1px solid var(--hairline-2);
    display:none; padding:.5rem 0;
  }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding:.8rem var(--pad); width:100%; }
  .btn-cta{ margin:.5rem var(--pad) .75rem; width:auto; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-ui); font-size:.84rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.85rem 1.6rem; border:1px solid var(--blood);
  color:var(--bone); background:var(--blood);
}
.btn:hover{ background:var(--blood-hi); border-color:var(--blood-hi); color:var(--bone); }
.btn.ghost{ background:transparent; border-color:var(--hairline-2); color:var(--bone-dim); }
.btn.ghost:hover{ border-color:var(--bone-dim); color:var(--bone); background:transparent; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
section{ padding:clamp(3.5rem, 8vw, 6.5rem) 0; }
section.tight{ padding:clamp(2.25rem, 5vw, 3.5rem) 0; }
.rule-top{ border-top:1px solid var(--hairline); }

.split{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}
.split.rev > :first-child{ order:2; }
@media (max-width: 820px){
  .split{ grid-template-columns:1fr; }
  .split.rev > :first-child{ order:0; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(4.5rem, 11vw, 8.5rem) 0;
  border-bottom:1px solid var(--hairline);
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:.28;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.92) 78%, var(--ink) 100%);
}
.hero .wrap{ position:relative; z-index:1; }

/* ---------- Figures / galleries ---------- */
figure{ margin:0; }
.plate{
  border:1px solid var(--hairline-2);
  background:var(--char);
  padding:.6rem;
}
.plate img{ width:100%; }
.plate figcaption,
.gallery figcaption{
  font-family:var(--font-ui); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel); padding:.7rem .3rem .25rem;
  display:flex; gap:.6rem; align-items:baseline;
}
figcaption .tag{ color:var(--blood-hi); }

/* v16: uniform grid — equal-sized tiles, no ragged masonry gaps.
   Each tile is a fixed 3:2 frame; images fill it (cover). Lightbox shows full. */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:1.1rem;
  margin-top:2.2rem;
}
.gallery figure{
  border:1px solid var(--hairline); background:var(--char); padding:.5rem;
  margin:0;
}
.gallery img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  object-position:center 30%;
  display:block; background:#0a0a0e;
}
/* All tiles uniform 3:2 so grid rows align perfectly. Portrait images are
   framed to their upper portion (faces/figures); full image opens in lightbox. */

/* Full-body character portraits in mixed galleries: show the whole figure
   (contained / pillarboxed), not a cropped mid-body band. Add class="tall". */
.gallery figure.tall img{ object-fit:contain; object-position:center; }

/* Character grid: uniform portrait tiles for all-character rows — full figure, no crop. */
.char-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:1.1rem; margin-top:2.2rem;
}
.char-grid figure{ border:1px solid var(--hairline); background:var(--char); padding:.5rem; margin:0; }
.char-grid img{ width:100%; aspect-ratio:2/3; object-fit:cover; display:block; background:#0a0a0e; }
.char-grid figcaption{
  font-family:var(--font-ui); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel); padding:.7rem .3rem .25rem; display:flex; gap:.6rem; align-items:baseline;
}
@media (max-width: 620px){ .char-grid{ grid-template-columns:1fr 1fr; gap:.7rem; } }

/* On small screens: single column, natural height — no cropping */
@media (max-width: 620px){
  .gallery{ grid-template-columns:1fr; }
  .gallery img{ aspect-ratio:auto; height:auto; object-fit:contain; }
}

[data-lightbox]{ cursor:zoom-in; }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(8,8,10,.94);
  display:none; align-items:center; justify-content:center;
  padding:2rem;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(1100px, 92vw); max-height:86vh; width:auto; height:auto;
  border:1px solid var(--hairline-2); }
.lightbox figcaption{
  position:absolute; bottom:1.4rem; left:0; right:0; text-align:center;
  font-family:var(--font-ui); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--steel);
}
.lightbox-close{
  position:absolute; top:1rem; right:1.2rem;
  background:none; border:1px solid var(--hairline-2);
  color:var(--bone); font-size:1.2rem; padding:.35rem .8rem; cursor:pointer;
}
.lightbox-close:hover{ border-color:var(--blood-hi); color:var(--blood-hi); }

/* ---------- Record / card grids ---------- */
.records{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  margin-top:2.2rem;
}
.record{
  border:1px solid var(--hairline); background:var(--char);
  padding:1.5rem 1.4rem; display:block;
}
.record:hover{ border-color:var(--hairline-2); background:var(--char-2); color:inherit; }
.record .eyebrow{ margin-bottom:.55rem; }
.record h3{ margin-bottom:.45rem; }
.record p{ font-size:.95rem; color:var(--steel); margin:0; }

/* ---------- House dossiers ---------- */
.house{
  border:1px solid var(--hairline);  background:var(--char);
  margin-top:1.6rem; overflow:hidden;
  display:grid; grid-template-columns:minmax(220px, 300px) 1.6fr;
}
@media (max-width: 860px){ .house{ grid-template-columns:1fr; } }
.house .banner{
  background:#0a0a0e;
  display:flex; align-items:center; justify-content:center;
  padding:1.25rem;
}
.house .banner img{
  width:auto; height:auto;
  max-width:100%; max-height:520px;
  object-fit:contain;
}
@media (max-width: 860px){
  .house .banner{ padding:1.25rem 1.25rem .5rem; }
  .house .banner img{ max-height:min(58vh, 460px); }
}
.house .body{ padding:clamp(1.4rem,3vw,2.2rem); border-left:3px solid var(--accent, var(--blood)); }
.house .motto{ font-style:italic; color:var(--bone); margin-bottom:1.2rem; }
.house dl{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr));
  gap:.9rem 1.4rem; margin:0 0 1.3rem;
  font-family:var(--font-ui);
}
.house dt{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-dim); }
.house dd{ margin:0; font-size:.92rem; color:var(--bone-dim); }
.house.draconi{ --accent:var(--draconi); }
.house.sabre{   --accent:var(--sabre); }
.house.veisik{  --accent:var(--veisik); }
.house.provak{  --accent:var(--provak); }

/* ---------- City dossiers ---------- */
.city{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem,4vw,3.2rem); align-items:center;
  padding:clamp(2.2rem,5vw,3.4rem) 0;
  border-top:1px solid var(--hairline);
  scroll-margin-top:5.5rem;
}
.city:nth-of-type(even) > figure{ order:2; }
@media (max-width: 820px){
  .city{ grid-template-columns:1fr; }
  .city:nth-of-type(even) > figure{ order:0; }
}
.city .meta{
  font-family:var(--font-ui); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel);
  display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin:0 0 1rem;
}
.city .meta b{ color:var(--c, var(--blood-hi)); font-weight:600; }
.city h3{ font-size:clamp(1.5rem,3vw,2rem); }
.city .noimg{
  border:1px dashed var(--hairline-2); min-height:220px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:.75rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel-dim);
}

/* ============================================================
   INTERACTIVE ATLAS (hotspots on the artwork)
   ============================================================ */
.atlas-shell{
  border:1px solid var(--hairline-2);
  background:var(--char);
  margin-top:2.4rem;
  overflow-x:auto;
}
.atlas-stage{
  position:relative;
  min-width:720px;          /* keeps tap targets usable; shell scrolls on small screens */
}
.atlas-stage > img{ display:block; width:100%; height:auto; }

.atlas-lines{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}
.atlas-lines line{
  stroke:var(--blood-hi); stroke-width:1.6;
  filter:drop-shadow(0 0 4px rgba(194,41,58,.65));
}
.atlas-lines circle{
  fill:none; stroke:var(--blood-hi); stroke-width:1.6;
  filter:drop-shadow(0 0 6px rgba(194,41,58,.7));
}
/* v10 — surface tether: dashed bone line up to the city it shadows */
.atlas-lines line.surface{
  stroke:rgba(232,228,220,.78); stroke-width:1.3;
  stroke-dasharray:6 6;
  filter:drop-shadow(0 0 3px rgba(232,228,220,.35));
}
.atlas-lines circle.surface-dot{
  fill:#0a0a0e; stroke:var(--bone); stroke-width:1.5;
  filter:drop-shadow(0 0 5px rgba(232,228,220,.55));
}
.atlas-lines text{
  text-anchor:middle;
  paint-order:stroke;
  stroke:rgba(8,8,10,.92); stroke-width:6px; stroke-linejoin:round;
  text-transform:uppercase;
  pointer-events:none;
}
.atlas-lines text.surface-eyebrow{
  font-family:var(--font-ui); font-size:14px; font-weight:600;
  letter-spacing:4px; fill:var(--blood-hi);
}
.atlas-lines text.surface-label{
  font-family:var(--font-ui); font-size:24px; font-weight:600;
  letter-spacing:2.5px; fill:var(--bone);
}
@media (prefers-reduced-motion: no-preference){
  .atlas-lines .fade{
    opacity:0;
    animation:atlasFade .5s ease-out .18s forwards;
  }
  @keyframes atlasFade{ to{ opacity:1; } }
}
@media (prefers-reduced-motion: no-preference){
  .atlas-lines line.draw{
    stroke-dasharray:var(--len) var(--len);
    stroke-dashoffset:var(--len);
    animation:atlasDraw .45s ease-out forwards;
  }
  @keyframes atlasDraw{ to{ stroke-dashoffset:0; } }
}

.atlas-hotspot{
  position:absolute; transform:translate(-50%,-50%);
  width:34px; height:34px; padding:0;
  background:transparent; border:0; cursor:pointer;
  border-radius:50%;
}
.atlas-hotspot::before{               /* pulsing outer ring */
  content:""; position:absolute; inset:4px;
  border:1.5px solid rgba(232,228,220,.85);
  border-radius:50%;
  box-shadow:0 0 10px rgba(194,41,58,.55), inset 0 0 6px rgba(194,41,58,.35);
}
.atlas-hotspot::after{                /* core dot */
  content:""; position:absolute; left:50%; top:50%;
  width:6px; height:6px; transform:translate(-50%,-50%);
  background:var(--bone); border-radius:50%;
  box-shadow:0 0 8px rgba(194,41,58,.9);
}
@media (prefers-reduced-motion: no-preference){
  .atlas-hotspot::before{ animation:hotspotPulse 2.6s ease-in-out infinite; }
  @keyframes hotspotPulse{
    0%,100%{ transform:scale(1); opacity:.75; }
    50%{ transform:scale(1.28); opacity:1; }
  }
}
.atlas-hotspot:hover::before,
.atlas-hotspot:focus-visible::before{ border-color:var(--blood-hi); opacity:1; }
.atlas-hotspot.active::before{ animation:none; transform:scale(1.3); border-color:var(--blood-hi); }

.atlas-popup{
  position:absolute; transform:translate(-50%,-50%);
  z-index:5; display:none;
  background:rgba(10,10,14,.94);
  border:1px solid var(--hairline-2);
  border-left:3px solid var(--blood);
  padding:.85rem 1.1rem .9rem;
  box-shadow:0 12px 34px rgba(0,0,0,.65);
  text-align:left; white-space:nowrap;
}
.atlas-popup.open{ display:block; }
.atlas-popup .name{
  display:block;
  font-family:var(--font-display); font-size:1.25rem; letter-spacing:.04em;
  color:var(--bone); line-height:1.2;
}
.atlas-popup .surface{
  display:block; margin-top:.2rem;
  font-family:var(--font-ui); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.atlas-popup .go{
  display:block; margin-top:.45rem;
  font-family:var(--font-ui); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blood-hi);
}
.atlas-popup a{ text-decoration:none; }
.atlas-popup a:hover .name{ color:#fff; }
.atlas-popup a:hover .go{ color:var(--bone); }

/* v10 — caption line that sits above the interactive map */
.atlas-caption{
  font-family:var(--font-ui); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel);
  margin:2.4rem 0 0;
  display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap;
}
.atlas-caption .tag{ color:var(--blood-hi); }
.atlas-caption + .atlas-shell{ margin-top:.8rem; }

.atlas-note{
  font-family:var(--font-ui); font-size:.76rem; letter-spacing:.08em;
  color:var(--steel); padding:.9rem .3rem 0;
}
.atlas-note b{ color:var(--bone-dim); font-weight:600; }

.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;
}

/* ---------- Forms ---------- */
.enlist-form{
  display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem;
}
.enlist-form input[type="email"]{
  flex:1 1 260px;
  background:var(--char-2); border:1px solid var(--hairline-2);
  color:var(--bone); font-family:var(--font-ui); font-size:.95rem;
  padding:.85rem 1rem;
}
.enlist-form input::placeholder{ color:var(--steel-dim); }
.form-note{
  font-family:var(--font-ui); font-size:.78rem; color:var(--steel-dim); margin-top:.8rem;
}
.form-msg{ font-family:var(--font-ui); font-size:.85rem; color:var(--blood-hi); margin-top:.7rem; display:none; }
.form-msg.show{ display:block; }

/* ---------- Footer ---------- */
.site-foot{
  border-top:1px solid var(--hairline);
  padding:3.5rem 0 2.5rem;
  background:var(--char);
}
.foot-grid{
  display:grid; gap:2.5rem;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
}
@media (max-width: 920px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 760px){ .foot-grid{ grid-template-columns:1fr; } }
.site-foot img{ width:46px; margin-bottom:1rem; }
.site-foot h4{
  font-family:var(--font-ui); font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel); font-weight:600;
}
.site-foot ul{ list-style:none; margin:0; padding:0; }
.site-foot li{ margin:.45rem 0; }
.site-foot a{ font-family:var(--font-ui); font-size:.9rem; color:var(--bone-dim); }
.site-foot a:hover{ color:var(--bone); }
.foot-blurb{ font-size:.95rem; color:var(--steel); max-width:34ch; }
.legal{
  margin-top:2.8rem; padding-top:1.4rem;
  border-top:1px solid var(--hairline);
  font-family:var(--font-ui); font-size:.78rem; color:var(--steel-dim);
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:space-between;
}

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:90;
  width:46px; height:46px;
  background:var(--char-2); border:1px solid var(--hairline-2);
  color:var(--bone-dim); font-size:1.15rem; line-height:1;
  cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top:hover{ color:var(--blood-hi); border-color:var(--blood-hi); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

/* ---------- Saga timeline (EoB page) ---------- */
.saga{ margin-top:2rem; }
.saga h4{ font-family:var(--font-ui); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); margin:2.2rem 0 1rem; }
.saga ol{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.saga li{
  display:grid; grid-template-columns:3.2rem 1fr auto; gap:1.1rem; align-items:baseline;
  border:1px solid var(--hairline); background:var(--char);
  padding:1rem 1.2rem;
}
.saga .num{ font-family:var(--font-display); font-size:1.25rem; color:var(--blood-hi); }
.saga .t{ font-family:var(--font-display); color:var(--bone); }
.saga .s{ font-family:var(--font-ui); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-dim); }

/* ---------- Pillars / value props ---------- */
.pillars{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); margin-top:2.2rem; }
.pillar{ border:1px solid var(--hairline); background:var(--char); padding:1.7rem 1.5rem; }
.pillar h3{ font-size:1.15rem; margin-bottom:.5rem; }
.pillar p{ font-size:.95rem; color:var(--steel); margin:0; }

/* ---------- Books page ---------- */
.book-row{
  display:grid; grid-template-columns:minmax(220px,.75fr) 1.6fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
@media (max-width: 780px){ .book-row{ grid-template-columns:1fr; } }
.book-row .cover{ max-width:340px; border:1px solid var(--hairline-2); }

/* ---------- Utility ---------- */
.center{ text-align:center; }
.center .lede,.center .eyebrow{ margin-left:auto; margin-right:auto; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.small{ font-size:.92rem; color:var(--steel); }

/* ---------- Visions city nav (sticky jump bar) — v16 ---------- */
.city-nav{
  position:sticky; top:56px; z-index:90;
  background:rgba(10,10,14,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.city-nav .wrap{
  display:flex; gap:.4rem; flex-wrap:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:.7rem clamp(1rem,4vw,2rem);
  scrollbar-width:none;
}
.city-nav .wrap::-webkit-scrollbar{ display:none; }
.city-nav a{
  flex:0 0 auto;
  font-family:var(--font-ui); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--steel);
  text-decoration:none; padding:.35rem .7rem;
  border:1px solid transparent; border-radius:2px;
  white-space:nowrap; transition:color .15s, border-color .15s;
}
.city-nav a:hover{ color:var(--bone); border-color:var(--hairline-2); }
.city-nav a:first-child{ color:var(--blood-hi); }

/* v16: Visions city sections clear BOTH the header and the sticky city-nav */
.city-nav ~ section[id]{ scroll-margin-top:115px; }
#atlas{ scroll-margin-top:115px; }

/* ---------- Hero variant: full-bleed image (v16) ---------- */
/* Used on Visions & Archive so they feel distinct from the anchor-style home/About heroes */
.hero.hero--bleed{
  padding:clamp(6rem, 16vw, 11rem) 0 clamp(4rem, 9vw, 7rem);
  min-height:52vh; display:flex; align-items:flex-end;
}
.hero.hero--bleed .hero-bg{ opacity:.55; }
.hero.hero--bleed .hero-bg::after{
  background:linear-gradient(180deg, rgba(8,8,10,.30) 0%, rgba(8,8,10,.62) 55%, rgba(8,8,10,.95) 92%, var(--ink) 100%);
}