/* ==========================================================================
   GHOST RIDER — SPIRIT OF VENGEANCE  ·  design system
   Palette: coal / iron / bone / hellfire / blood / brass / blue-flame
   Type:    Big Shoulders Display (display)  ·  Barlow (text)
   Rule 1:  the background video is the protagonist. Content lives on bounded
            iron plates or floats with heavy shadow. Never a full-page veil.
   ========================================================================== */

@font-face{font-family:"Big Shoulders";src:url("../fonts/BigShouldersDisplay.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/Barlow-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/Barlow-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/Barlow-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/Barlow-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/Barlow-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/BarlowCondensed-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --coal:#0a0908;
  --iron:#1a1714;
  --iron-2:#241f1a;
  --iron-edge:#3a3128;
  --bone:#ede4d3;
  --bone-2:#c9bda8;
  --bone-3:#9a8f7c;
  --hellfire:#ff7a18;
  --hellfire-2:#ffb347;
  --blood:#b3121b;
  --brass:#c9a24a;
  --blue-flame:#5fa8ff;

  --display:"Big Shoulders",Impact,"Arial Narrow",sans-serif;
  --text:"Barlow","Segoe UI",Helvetica,Arial,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;

  --plate-w:41rem;
  --gutter:clamp(1.1rem,4vw,3.5rem);
  --nav-h:4.5rem;

  --shadow-text:0 1px 2px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.75),0 0 40px rgba(0,0,0,.6);
  --shadow-plate:0 30px 60px -20px rgba(0,0,0,.85),0 2px 0 rgba(255,255,255,.04) inset;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--coal);color:var(--bone);
  font-family:var(--text);font-size:1.0625rem;line-height:1.6;
  overflow-x:hidden;min-height:100vh;
}
body.nav-open{overflow:hidden}
img,video,svg{max-width:100%;display:block}
a{color:var(--hellfire-2);text-decoration:none}
a:hover{color:#fff}
p{margin:0 0 1.1em}
h1,h2,h3,h4{font-family:var(--display);line-height:.92;margin:0;font-weight:800;letter-spacing:.005em;text-wrap:balance}
h1{font-size:clamp(3.4rem,9vw,8.5rem);font-weight:900}
h2{font-size:clamp(2.4rem,5.4vw,4.6rem)}
h3{font-size:clamp(1.6rem,3vw,2.4rem)}
h4{font-size:1.35rem;font-weight:700}
ul,ol{padding-left:1.2em;margin:0 0 1.1em}
li{margin-bottom:.35em}
strong{font-weight:600;color:#fff}
em{color:var(--bone)}
hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--brass),transparent);margin:2.5rem 0;opacity:.6}
blockquote{margin:0;font-family:var(--display);font-weight:600}
:focus-visible{outline:2px solid var(--hellfire-2);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--hellfire);color:#000;padding:.6rem 1rem;z-index:1000;font-weight:600}
.skip:focus{left:1rem;top:1rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------------------------------
   Persistent background video
   -------------------------------------------------------------------------- */
.bg-video{
  position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--coal);
}
.bg-video video,.bg-video img{
  position:absolute;top:50%;left:50%;width:100%;height:100%;
  transform:translate(-50%,-50%);object-fit:cover;object-position:var(--vid-pos,50% 50%);
  transition:object-position 1.2s var(--ease);
}
.bg-video .video-poster{opacity:1;transition:opacity .8s ease}
.bg-video.is-playing .video-poster{opacity:0}
/* Autoplay-blocked control: a small igniter instead of a static frame */
.play-gate{
  position:fixed;right:1.25rem;bottom:4.4rem;z-index:60;display:none;align-items:center;gap:.6rem;
  background:var(--iron);border:1px solid var(--iron-edge);color:var(--bone);padding:.6rem .9rem .6rem .7rem;
  font-family:var(--cond);font-size:1rem;letter-spacing:.04em;cursor:pointer;box-shadow:var(--shadow-plate)
}
.play-gate.is-visible{display:inline-flex}
.play-gate svg{width:18px;height:18px;fill:var(--hellfire)}
.play-gate:hover{border-color:var(--hellfire)}

/* Ember canvas floats above the video, below the content */
#embers{position:fixed;inset:0;z-index:1;pointer-events:none}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);
  transition:background .4s ease,box-shadow .4s ease;
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--hellfire) 18%,var(--brass) 50%,var(--hellfire) 82%,transparent 100%);
  opacity:0;transition:opacity .4s ease
}
.site-header.is-scrolled{background:linear-gradient(180deg,rgba(10,9,8,.94),rgba(10,9,8,.72));box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.site-header.is-scrolled::after{opacity:.7}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-shadow:var(--shadow-text)}
.brand .flame{width:26px;height:30px;flex:none;filter:drop-shadow(0 0 8px rgba(255,122,24,.8))}
.brand-word{font-family:var(--display);font-weight:900;font-size:1.65rem;letter-spacing:.06em;line-height:1}
.brand-word small{display:block;font-family:var(--cond);font-weight:600;font-size:.62rem;letter-spacing:.34em;color:var(--hellfire-2);margin-top:.15rem}
.nav-desktop{display:flex;align-items:center;gap:.25rem}
.nav-desktop>li{list-style:none;position:relative}
.nav-desktop{margin:0;padding:0}
.nav-desktop>li>a,.nav-desktop>li>button{
  font-family:var(--cond);font-weight:600;font-size:1.05rem;letter-spacing:.06em;color:var(--bone);
  padding:.65rem .8rem;display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;cursor:pointer;
  text-shadow:var(--shadow-text);border-bottom:2px solid transparent;transition:color .2s,border-color .2s
}
.nav-desktop>li>a:hover,.nav-desktop>li>button:hover,.nav-desktop>li.is-active>a,.nav-desktop>li.is-active>button{color:#fff;border-bottom-color:var(--hellfire)}
.nav-desktop .chev{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2}
.menu{
  position:absolute;top:calc(100% + .35rem);left:0;min-width:15rem;background:var(--iron);border:1px solid var(--iron-edge);
  padding:.5rem 0;box-shadow:var(--shadow-plate);opacity:0;visibility:hidden;transform:translateY(6px);transition:all .22s var(--ease);
  list-style:none;margin:0;z-index:5
}
.menu.wide{min-width:32rem;columns:2;column-gap:0;padding:.6rem .4rem}
.menu li{margin:0;break-inside:avoid}
.menu a{display:block;padding:.5rem 1.1rem;color:var(--bone-2);font-family:var(--text);font-size:.98rem;transition:background .15s,color .15s;position:relative}
.menu a:hover,.menu a.is-active{background:rgba(255,122,24,.09);color:#fff}
.menu a.is-active::before{content:"";position:absolute;left:0;top:.55rem;bottom:.55rem;width:3px;background:var(--hellfire)}
.nav-desktop>li:hover>.menu,.nav-desktop>li:focus-within>.menu,.nav-desktop>li.is-open>.menu{opacity:1;visibility:visible;transform:none}
.nav-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn{
  width:2.6rem;height:2.6rem;display:inline-grid;place-items:center;background:rgba(10,9,8,.55);border:1px solid rgba(237,228,211,.18);
  color:var(--bone);cursor:pointer;transition:border-color .2s,background .2s;backdrop-filter:blur(2px)
}
.icon-btn:hover{border-color:var(--hellfire);color:#fff}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.burger{display:none}
.burger span{display:block;width:18px;height:2px;background:currentColor;margin:2.5px 0;transition:transform .25s,opacity .2s}

/* Mobile drawer */
.nav-mobile{
  position:fixed;inset:0;z-index:200;background:var(--coal);transform:translateX(100%);transition:transform .38s var(--ease);
  overflow-y:auto;padding:var(--nav-h) var(--gutter) 3rem;visibility:hidden
}
.nav-mobile.is-open{transform:none;visibility:visible}
.nav-mobile .close{position:absolute;top:.95rem;right:var(--gutter)}
.nav-mobile h3{font-family:var(--cond);font-weight:600;font-size:.85rem;letter-spacing:.22em;color:var(--hellfire-2);margin:1.6rem 0 .4rem;padding-bottom:.35rem;border-bottom:1px solid var(--iron-edge)}
.nav-mobile ul{list-style:none;padding:0;margin:0;columns:2;column-gap:1rem}
.nav-mobile li{margin:0;break-inside:avoid}
.nav-mobile a{display:block;padding:.5rem 0;font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--bone)}
.nav-mobile a.is-active{color:var(--hellfire)}

/* Search overlay */
.search-overlay{
  position:fixed;inset:0;z-index:300;background:var(--coal);display:none;padding:min(12vh,7rem) var(--gutter) 2rem;overflow-y:auto
}
.search-overlay.is-open{display:block}
.search-box{max-width:46rem;margin:0 auto}
.search-box input{
  width:100%;background:var(--iron);border:1px solid var(--iron-edge);border-bottom:2px solid var(--hellfire);color:#fff;
  font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,4vw,2.6rem);padding:.7rem 1rem;letter-spacing:.02em
}
.search-box input::placeholder{color:var(--bone-3)}
.search-hint{color:var(--bone-3);font-size:.9rem;margin:.6rem .2rem}
.search-results{list-style:none;padding:0;margin:1.2rem 0 0}
.search-results li{margin:0;border-top:1px solid var(--iron-edge)}
.search-results a{display:block;padding:.85rem .4rem;color:var(--bone)}
.search-results a:hover{background:rgba(255,122,24,.08)}
.search-results .sr-title,.search-results .sr-crumb,.search-results .sr-snip{display:block}
.search-results .sr-title{font-family:var(--display);font-weight:700;font-size:1.5rem;color:#fff}
.search-results .sr-crumb{font-family:var(--cond);font-size:.85rem;letter-spacing:.12em;color:var(--hellfire-2)}
.search-results .sr-snip{color:var(--bone-2);font-size:.95rem;margin-top:.15rem}
.search-results mark{background:rgba(255,122,24,.35);color:#fff;padding:0 .1em}
.search-overlay .close{position:absolute;top:1rem;right:var(--gutter)}

/* --------------------------------------------------------------------------
   Page skeleton
   -------------------------------------------------------------------------- */
main{position:relative;z-index:2}
.page{padding-top:var(--nav-h)}

/* Breadcrumbs */
.crumbs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .55rem;font-family:var(--cond);font-size:.95rem;letter-spacing:.08em;text-shadow:var(--shadow-text)}
.crumbs li{margin:0;color:var(--bone-2)}
.crumbs li+li::before{content:"/";margin-right:.55rem;color:var(--hellfire)}
.crumbs a{color:var(--bone-2)}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:#fff}

/* Page hero: title floats over the video with heavy shadow, no panel */
.hero{
  min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;justify-content:flex-end;
  padding:2rem var(--gutter) clamp(2rem,6vh,4.5rem);position:relative
}
.hero.short{min-height:min(62svh,40rem)}
.hero .crumbs{margin-bottom:1.1rem}
.hero h1{text-shadow:var(--shadow-text);max-width:14ch;color:#fff}
.hero .lede{
  max-width:38rem;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.5;color:var(--bone);text-shadow:var(--shadow-text);margin:1.2rem 0 0;font-weight:500
}
.hero .lede.wide{max-width:46rem}
.hero.align-right{align-items:flex-end;text-align:right}
.hero.align-right h1{max-width:12ch}
.hero.align-center{align-items:center;text-align:center;justify-content:center}
.hero.align-center h1{max-width:16ch}
.hero .kicker{
  font-family:var(--cond);font-weight:600;font-size:clamp(.95rem,1.4vw,1.15rem);letter-spacing:.2em;color:var(--hellfire-2);
  text-shadow:var(--shadow-text);margin-bottom:.6rem
}
/* Hot-metal headline: gradient text on the inner span, shadow on the wrapper
   (a filter on the clipped element itself breaks background-clip in Chromium) */
.ignite-wrap{display:inline-block;filter:drop-shadow(0 3px 3px rgba(0,0,0,.95)) drop-shadow(0 0 26px rgba(255,90,0,.4))}
.ignite{
  display:inline-block;
  background:linear-gradient(180deg,#fff 0%,#ffe6c9 35%,var(--hellfire-2) 55%,var(--hellfire) 78%,var(--blood) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.scroll-cue{
  position:absolute;right:var(--gutter);bottom:clamp(2rem,6vh,4.5rem);font-family:var(--cond);letter-spacing:.24em;font-size:.8rem;color:var(--bone-2);
  writing-mode:vertical-rl;text-shadow:var(--shadow-text);display:flex;align-items:center;gap:.6rem
}
.scroll-cue::after{content:"";width:1px;height:3.5rem;background:linear-gradient(180deg,var(--hellfire),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--cond);font-weight:600;font-size:1.05rem;letter-spacing:.1em;
  padding:.85rem 1.4rem;color:#000;background:var(--hellfire);border:0;cursor:pointer;position:relative;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - .7rem) 0,100% .7rem,100% 100%,.7rem 100%,0 calc(100% - .7rem));transition:transform .2s var(--ease),background .2s
}
.btn::before{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-110%);transition:transform .6s var(--ease)
}
.btn:hover{color:#000;background:var(--hellfire-2);transform:translateY(-1px)}
.btn:hover::before{transform:translateX(110%)}
.btn.ghost{background:rgba(10,9,8,.6);color:#fff;box-shadow:0 0 0 1px rgba(237,228,211,.35) inset;backdrop-filter:blur(3px)}
.btn.ghost:hover{background:rgba(10,9,8,.8);box-shadow:0 0 0 1px var(--hellfire) inset}
.btn svg{width:16px;height:16px;fill:currentColor}

/* --------------------------------------------------------------------------
   Iron plates — the bounded content surface
   -------------------------------------------------------------------------- */
.band{padding:clamp(2.2rem,6vh,5rem) var(--gutter);position:relative}
.band.tight{padding-top:1rem;padding-bottom:1rem}
.plate{
  background:var(--iron);color:var(--bone);border:1px solid var(--iron-edge);position:relative;
  padding:clamp(1.4rem,3vw,2.6rem);max-width:var(--plate-w);box-shadow:var(--shadow-plate);
  background-image:
    radial-gradient(120% 60% at 0% 0%,rgba(255,122,24,.10),transparent 60%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 2px,transparent 2px 6px);
}
.plate::before{ /* scorched top edge */
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:linear-gradient(90deg,var(--blood),var(--hellfire) 30%,var(--brass) 60%,transparent)
}
.plate.right{margin-left:auto}
.plate.right{background-image:radial-gradient(120% 60% at 100% 0%,rgba(255,122,24,.10),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 2px,transparent 2px 6px)}
.plate.right::before{background:linear-gradient(270deg,var(--blood),var(--hellfire) 30%,var(--brass) 60%,transparent)}
.plate.center{margin-inline:auto}
.plate.wide{max-width:58rem}
.plate.full{max-width:none}
.plate h2,.plate h3{color:#fff;margin-bottom:.7rem}
.plate h2{font-size:clamp(2rem,4vw,3.4rem)}
.plate p:last-child{margin-bottom:0}
.plate .lead{font-size:1.15rem;color:#fff;font-weight:500}
.plate .fig{margin:1.3rem 0 0;color:var(--bone-3);font-size:.9rem}
.plate.inverse{background:var(--bone);color:#2a2419;border-color:#d9cdb5}
.plate.inverse h2,.plate.inverse h3,.plate.inverse strong{color:#12100d}
.plate.inverse::before{background:linear-gradient(90deg,var(--blood),var(--hellfire) 40%,transparent)}
.plate.inverse a{color:var(--blood)}
.plate.blue{border-color:#2c4a73;background-image:radial-gradient(120% 60% at 0% 0%,rgba(95,168,255,.14),transparent 60%)}
.plate.blue::before{background:linear-gradient(90deg,#1f4f9a,var(--blue-flame) 40%,transparent)}
.plate.cosmic{border-color:#4a3273;background-image:radial-gradient(120% 60% at 0% 0%,rgba(178,114,255,.16),transparent 60%)}
.plate.cosmic::before{background:linear-gradient(90deg,#4b2a8a,#c99bff 40%,transparent)}

/* A headline that floats beside a plate — layout "shout + plate" */
.shout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--plate-w));gap:2rem var(--gutter);align-items:end
}
.shout.flip{grid-template-columns:minmax(0,var(--plate-w)) minmax(0,1fr)}
.shout.flip .plate{order:-1}
.shout h2{text-shadow:var(--shadow-text);color:#fff;font-size:clamp(3rem,8vw,7.4rem);font-weight:900;line-height:.86;max-width:9ch}
.shout .sub{font-family:var(--cond);font-size:1.1rem;letter-spacing:.14em;color:var(--hellfire-2);text-shadow:var(--shadow-text);margin-top:.9rem}
.shout.flip h2{text-align:right;margin-left:auto}

/* Pull-quote drifting over the video */
.drift{
  max-width:34rem;font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1;
  color:#fff;text-shadow:var(--shadow-text);padding:0 var(--gutter)
}
.drift cite{display:block;font-family:var(--cond);font-weight:600;font-size:.95rem;letter-spacing:.2em;color:var(--hellfire-2);margin-top:.9rem;font-style:normal}
.drift.right{margin-left:auto;text-align:right}

/* Rows of stats without a panel */
.stats{display:flex;flex-wrap:wrap;gap:1.4rem 3rem;padding:0 var(--gutter)}
.stats div{text-shadow:var(--shadow-text)}
.stats b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,5vw,4.2rem);line-height:.9;color:#fff}
.stats span{font-family:var(--cond);letter-spacing:.14em;font-size:.9rem;color:var(--hellfire-2)}

/* --------------------------------------------------------------------------
   Component patterns (each page uses a distinct composition)
   -------------------------------------------------------------------------- */

/* Rider roster: alternating profile plates with big numerals */
.roster{display:grid;gap:clamp(2rem,5vh,4rem)}
.roster .rider{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--plate-w));gap:1.5rem var(--gutter);align-items:center}
.roster .rider:nth-child(even){grid-template-columns:minmax(0,var(--plate-w)) minmax(0,1fr)}
.roster .rider:nth-child(even) .plate{order:-1}
.roster .rider:nth-child(even) .who{text-align:right}
.who{text-shadow:var(--shadow-text)}
.who .era{font-family:var(--cond);letter-spacing:.2em;color:var(--hellfire-2);font-size:.95rem}
.who h2{font-size:clamp(3rem,7vw,6.6rem);color:#fff;line-height:.86;font-weight:900}
.who .alias{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.9rem);color:var(--bone-2);margin-top:.4rem}
.who .alias.blue{color:var(--blue-flame)}
.who .alias.cosmic{color:#c99bff}

/* Facts list (definition rows) inside plates */
.facts{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;margin:1.2rem 0 0;font-size:.98rem}
.facts dt{font-family:var(--cond);letter-spacing:.1em;color:var(--hellfire-2);font-weight:600;padding-top:.05rem}
.facts dd{margin:0;color:var(--bone)}

/* Spec sheet — powers page (gauges instead of cards) */
.spec{display:grid;gap:1.1rem;max-width:var(--plate-w)}
.spec .row{display:grid;grid-template-columns:11rem 1fr;gap:.6rem 1.2rem;align-items:start;padding:1rem 0;border-top:1px solid var(--iron-edge)}
.spec .row:first-child{border-top:0}
.spec .row h3{font-size:1.6rem;color:#fff}
.spec .gauge{height:6px;background:#2f2820;position:relative;margin:.5rem 0 .3rem;max-width:16rem}
.spec .gauge i{position:absolute;inset:0;width:var(--v,50%);background:linear-gradient(90deg,var(--blood),var(--hellfire),var(--hellfire-2));box-shadow:0 0 10px rgba(255,122,24,.6)}
.spec .gauge-label{font-family:var(--cond);font-size:.82rem;letter-spacing:.14em;color:var(--bone-3)}
.spec p{margin:0;font-size:.98rem}

/* Ledger — villains / characters listed as ledger entries (wanted-book feel) */
.ledger{max-width:58rem}
.ledger .entry{
  display:grid;grid-template-columns:5.5rem 1fr;gap:1rem var(--gutter);padding:1.4rem 0;border-top:1px solid rgba(237,228,211,.22);position:relative
}
.ledger .entry:last-child{border-bottom:1px solid rgba(237,228,211,.22)}
.ledger .entry .no{font-family:var(--display);font-weight:900;font-size:3rem;line-height:.9;color:var(--hellfire);text-shadow:var(--shadow-text)}
.ledger .entry h3{color:#fff;text-shadow:var(--shadow-text);font-size:2rem}
.ledger .entry .tag{font-family:var(--cond);letter-spacing:.14em;font-size:.85rem;color:var(--hellfire-2);text-shadow:var(--shadow-text);margin:.15rem 0 .6rem;display:block}
.ledger .entry .plate{padding:1.1rem 1.3rem;max-width:44rem}
.ledger .entry .plate p{font-size:.98rem}

/* Timeline — vertical chain rail */
.rail{position:relative;max-width:52rem;padding-left:3.4rem}
.rail::before{
  content:"";position:absolute;left:1.15rem;top:0;bottom:0;width:4px;
  background:repeating-linear-gradient(180deg,var(--brass) 0 14px,transparent 14px 20px);
  box-shadow:0 0 12px rgba(201,162,74,.35)
}
.rail .tick{position:relative;padding:0 0 2.4rem}
.rail .tick::before{
  content:"";position:absolute;left:-2.85rem;top:.55rem;width:16px;height:16px;border-radius:50%;
  background:var(--hellfire);box-shadow:0 0 0 4px var(--coal),0 0 18px rgba(255,122,24,.9)
}
.rail .tick.major::before{width:22px;height:22px;left:-3.05rem;top:.4rem;background:radial-gradient(circle,#fff,var(--hellfire) 45%,var(--blood))}
.rail .year{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,4vw,3.4rem);line-height:.9;color:#fff;text-shadow:var(--shadow-text)}
.rail .tick h3{font-size:1.5rem;color:var(--hellfire-2);text-shadow:var(--shadow-text);margin:.2rem 0 .5rem}
.rail .tick .plate{padding:1rem 1.25rem;max-width:36rem}
.rail .tick .plate p{font-size:.97rem}

/* Vehicles — spec plates in a garage grid */
.garage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.2rem;max-width:66rem}
.garage .plate{max-width:none;display:flex;flex-direction:column}
.garage .plate h3{font-size:1.9rem}
.garage .plate .owner{font-family:var(--cond);letter-spacing:.14em;color:var(--hellfire-2);font-size:.85rem;margin-bottom:.8rem;display:block}
.garage .plate p{font-size:.96rem}
.garage .plate .facts{margin-top:auto;padding-top:1rem;font-size:.9rem}

/* Armory — weapons as a two-column ordnance list */
.armory{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.2rem;max-width:66rem}
.armory .item{display:grid;grid-template-columns:3.4rem 1fr;gap:1rem;align-items:start}
.armory .glyph{width:3.4rem;height:3.4rem;display:grid;place-items:center;border:1px solid var(--brass);background:rgba(10,9,8,.7);color:var(--hellfire-2)}
.armory .glyph svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.armory .plate{max-width:none;padding:1.1rem 1.3rem}
.armory .plate h3{font-size:1.7rem}
.armory .plate p{font-size:.96rem}

/* Storylines — spine list: big titles on the video, details on hover/expand */
.spines{max-width:58rem}
.spines details{border-top:1px solid rgba(237,228,211,.22)}
.spines details:last-child{border-bottom:1px solid rgba(237,228,211,.22)}
.spines summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;padding:1.1rem 0;
  text-shadow:var(--shadow-text)
}
.spines summary::-webkit-details-marker{display:none}
.spines summary h3{font-size:clamp(1.7rem,3.6vw,2.7rem);color:#fff;transition:color .2s}
.spines summary .meta{font-family:var(--cond);letter-spacing:.12em;font-size:.9rem;color:var(--hellfire-2);text-align:right;white-space:nowrap}
.spines summary:hover h3,.spines details[open] summary h3{color:var(--hellfire-2)}
.spines .plate{margin-bottom:1.4rem;padding:1.2rem 1.4rem;max-width:44rem}
.spines .plate p{font-size:.98rem}

/* Multiverse — branching Earths */
.branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem;max-width:70rem}
.branches .plate{max-width:none;padding:1.2rem 1.3rem}
.branches .earth{font-family:var(--display);font-weight:900;font-size:2.3rem;line-height:.9;color:var(--hellfire);margin-bottom:.15rem}
.branches h3{font-size:1.45rem}
.branches p{font-size:.95rem}

/* Hell — descending strata */
.strata{max-width:48rem;margin-left:auto}
.strata .layer{padding:1.4rem 0 1.4rem 1.6rem;border-left:2px solid var(--blood);position:relative;margin-left:.5rem}
.strata .layer::before{content:"";position:absolute;left:-7px;top:1.55rem;width:12px;height:12px;background:var(--blood);transform:rotate(45deg);box-shadow:0 0 14px var(--blood)}
.strata .layer h3{color:#fff;text-shadow:var(--shadow-text);font-size:2rem}
.strata .layer .plate{margin-top:.7rem;padding:1rem 1.25rem;max-width:40rem}
.strata .layer .plate p{font-size:.96rem}

/* Movies — film slates */
.slates{display:grid;gap:2rem;max-width:64rem}
.slate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:1.5rem var(--gutter);align-items:start}
.slate .marquee{text-shadow:var(--shadow-text)}
.slate .marquee .year{font-family:var(--display);font-weight:900;font-size:clamp(4rem,10vw,8rem);line-height:.85;color:var(--hellfire)}
.slate .marquee h2{color:#fff;font-size:clamp(2.2rem,4.6vw,3.8rem)}
.slate .marquee .dir{font-family:var(--cond);letter-spacing:.14em;color:var(--bone-2);margin-top:.4rem}
.slate .plate{max-width:none}
.slate .plate p{font-size:.98rem}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));grid-auto-flow:dense;gap:.6rem;max-width:80rem;margin-inline:auto}
.gallery figure{margin:0;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--iron);border:1px solid var(--iron-edge);cursor:zoom-in}
.gallery figure.tall{grid-row:span 2;aspect-ratio:auto}
.gallery figure.wide{grid-column:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .4s}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.6rem .8rem;font-family:var(--cond);letter-spacing:.1em;font-size:.85rem;
  color:#fff;background:linear-gradient(0deg,rgba(10,9,8,.9),transparent);text-shadow:0 1px 2px #000
}
.lightbox{position:fixed;inset:0;z-index:400;background:rgba(10,9,8,.96);display:none;place-items:center;padding:2rem}
.lightbox.is-open{display:grid}
.lightbox img{max-height:86vh;max-width:96vw;box-shadow:0 30px 80px rgba(0,0,0,.9);border:1px solid var(--iron-edge)}
.lightbox .cap{position:absolute;bottom:1.5rem;left:0;right:0;text-align:center;font-family:var(--cond);letter-spacing:.14em;color:var(--bone-2)}
.lightbox .close{position:absolute;top:1rem;right:1rem}
.lightbox .prev,.lightbox .next{position:absolute;top:50%;transform:translateY(-50%)}
.lightbox .prev{left:1rem}.lightbox .next{right:1rem}

/* Videos page */
.theater{max-width:64rem;margin-inline:auto}
.theater video{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--iron-edge);box-shadow:var(--shadow-plate)}
.chapters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.6rem;margin-top:.8rem}
.chapters button{
  text-align:left;background:var(--iron);border:1px solid var(--iron-edge);color:var(--bone);padding:.7rem .9rem;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:center;transition:border-color .2s
}
.chapters button:hover,.chapters button.is-active{border-color:var(--hellfire)}
.chapters button .t{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--hellfire)}
.chapters button .l{font-size:.92rem;color:var(--bone)}
.theater .bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}

/* Quotes wall — big lettering over the video, staggered */
.wall{display:grid;gap:clamp(2rem,6vh,4.5rem);max-width:70rem;margin-inline:auto}
.wall .q{max-width:36rem;text-shadow:var(--shadow-text)}
.wall .q:nth-child(even){margin-left:auto;text-align:right}
.wall .q p{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:.95;color:#fff;margin:0}
.wall .q .src{font-family:var(--cond);letter-spacing:.16em;font-size:.9rem;color:var(--hellfire-2);margin-top:.7rem}
.wall .q .ctx{font-size:.95rem;color:var(--bone-2);max-width:30rem;margin-top:.5rem}
.wall .q:nth-child(even) .ctx{margin-left:auto}

/* Trivia — numbered fragments in a masonry-ish grid */
.trivia{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:60rem;align-items:start}
.trivia .plate{max-width:none;padding:1.1rem 1.3rem}
.trivia .plate .n{font-family:var(--display);font-weight:900;font-size:2.2rem;color:var(--hellfire);line-height:.9;margin-bottom:.4rem}
.trivia .plate p{font-size:.96rem}

/* News */
.news{max-width:52rem}
.news article{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem var(--gutter);padding:1.3rem 0;border-top:1px solid rgba(237,228,211,.22)}
.news article:last-child{border-bottom:1px solid rgba(237,228,211,.22)}
.news time{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1;color:var(--hellfire);text-shadow:var(--shadow-text)}
.news time small{display:block;font-family:var(--cond);font-size:.8rem;letter-spacing:.16em;color:var(--bone-2);margin-top:.3rem}
.news h3{color:#fff;text-shadow:var(--shadow-text);font-size:1.7rem}
.news .plate{margin-top:.6rem;padding:1rem 1.25rem;max-width:42rem}
.news .plate p{font-size:.96rem}
.news .src{font-family:var(--cond);letter-spacing:.1em;font-size:.82rem;color:var(--bone-3)}

/* Home — destination index */
.destinations{max-width:80rem;margin-inline:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.7rem}
.dest{
  display:block;padding:1.2rem 1.2rem 1.1rem;background:var(--iron);border:1px solid var(--iron-edge);color:var(--bone);position:relative;overflow:hidden;
  transition:border-color .25s,transform .25s var(--ease)
}
.dest::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--blood),var(--hellfire));transition:width .35s var(--ease)}
.dest:hover{border-color:var(--hellfire);transform:translateY(-2px);color:var(--bone)}
.dest:hover::after{width:100%}
.dest .dt{display:block;font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:.95;color:#fff;margin-top:.3rem}
.dest .dd{display:block;font-size:.92rem;color:var(--bone-2);margin-top:.4rem}
.dest .dn{display:block;font-family:var(--cond);letter-spacing:.16em;font-size:.78rem;color:var(--hellfire-2)}

/* Related links strip */
.related{padding:0 var(--gutter);max-width:58rem}
.related h2{font-size:1.2rem;font-family:var(--cond);font-weight:600;letter-spacing:.2em;color:var(--hellfire-2);text-shadow:var(--shadow-text);margin-bottom:.7rem}
.related ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.related li{margin:0}
.related a{
  display:inline-block;padding:.55rem .9rem;background:rgba(10,9,8,.72);border:1px solid rgba(237,228,211,.22);color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.02em;transition:border-color .2s,background .2s
}
.related a:hover{border-color:var(--hellfire);background:rgba(10,9,8,.9)}

/* Split / two-column text inside a plate */
.cols{columns:2;column-gap:2rem}
.cols p{break-inside:avoid}

/* Tables */
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;margin:.6rem 0 0}
.tbl th{text-align:left;font-family:var(--cond);letter-spacing:.1em;font-weight:600;color:var(--hellfire-2);padding:.5rem .6rem .5rem 0;border-bottom:1px solid var(--iron-edge)}
.tbl td{padding:.5rem .6rem .5rem 0;border-bottom:1px solid rgba(58,49,40,.6);vertical-align:top;color:var(--bone)}
.tbl tr:last-child td{border-bottom:0}

/* Scroll reveal — single subtle rise, not per-card confetti */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.btn::before{display:none}.scroll-cue::after{animation:none}}

/* Page transition veil: a quick hellfire wipe */
.veil{
  position:fixed;inset:0;z-index:500;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,8,0) 0%,rgba(10,9,8,.98) 18%,rgba(10,9,8,.98) 82%,rgba(10,9,8,0) 100%);
  transform:translateY(-110%);transition:transform .42s var(--ease)
}
.veil.in{transform:translateY(0)}
.veil.out{transform:translateY(110%);transition:transform .5s var(--ease)}
.veil::after{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,transparent,var(--hellfire),var(--hellfire-2),var(--hellfire),transparent);
  box-shadow:0 0 30px 6px rgba(255,122,24,.6)
}
main.is-leaving{opacity:0;transition:opacity .3s}
main.is-entering{animation:enter .6s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   Footer — rendered on a solid iron base, video stays visible above it
   -------------------------------------------------------------------------- */
.site-footer{
  position:relative;z-index:2;margin-top:clamp(3rem,8vh,6rem);background:var(--iron);border-top:1px solid var(--iron-edge);
  padding:3rem var(--gutter) 2rem;color:var(--bone-2)
}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--blood),var(--hellfire),var(--brass),transparent)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:2rem;max-width:84rem;margin:0 auto}
.foot-grid h4{font-family:var(--cond);font-weight:600;font-size:.85rem;letter-spacing:.22em;color:var(--hellfire-2);margin-bottom:.7rem}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin:0 0 .35rem}
.foot-grid a{color:var(--bone-2);font-size:.95rem}
.foot-grid a:hover{color:#fff}
.foot-brand p{font-size:.95rem;max-width:26rem;color:var(--bone-3)}
.foot-legal{max-width:84rem;margin:2.5rem auto 0;padding-top:1.2rem;border-top:1px solid var(--iron-edge);font-size:.82rem;color:var(--bone-3);display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between}
.to-top{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:60;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s
}
.to-top.is-visible{opacity:1;visibility:visible}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .nav-desktop>li>a,.nav-desktop>li>button{padding:.65rem .55rem;font-size:.98rem}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:980px){
  .nav-desktop{display:none}
  .burger{display:inline-grid}
  .shout,.shout.flip,.roster .rider,.roster .rider:nth-child(even){grid-template-columns:1fr}
  .shout .plate,.shout.flip .plate,.roster .rider .plate,.roster .rider:nth-child(even) .plate{order:0}
  .shout.flip h2,.roster .rider:nth-child(even) .who{text-align:left;margin-left:0}
  .slate{grid-template-columns:1fr}
  .cols{columns:1}
  .trivia{grid-template-columns:1fr}
  .menu.wide{columns:1}
}
@media (max-width:640px){
  :root{--nav-h:3.9rem}
  body{font-size:1rem}
  .brand-word{font-size:1.35rem}
  .hero{padding-bottom:2.4rem}
  .hero h1{max-width:none}
  .scroll-cue{display:none}
  .spec .row{grid-template-columns:1fr}
  .ledger .entry{grid-template-columns:1fr;gap:.3rem}
  .ledger .entry .no{font-size:2rem}
  .news article{grid-template-columns:1fr}
  .rail{padding-left:2.4rem}
  .rail::before{left:.55rem}
  .rail .tick::before{left:-2.15rem}
  .rail .tick.major::before{left:-2.35rem}
  .facts{grid-template-columns:1fr;gap:.1rem}
  .facts dd{margin-bottom:.5rem}
  .foot-grid{grid-template-columns:1fr 1fr}
  .gallery figure.wide{grid-column:span 1}
  .nav-mobile ul{columns:1}
  .wall .q:nth-child(even){text-align:left;margin-left:0}
  .wall .q:nth-child(even) .ctx{margin-left:0}
  .strata .layer{margin-left:0}
  .spines summary{grid-template-columns:1fr}
  .spines summary .meta{text-align:left}
}
@media print{
  .bg-video,#embers,.site-header,.nav-mobile,.search-overlay,.play-gate,.to-top{display:none!important}
  body{background:#fff;color:#000}
  .plate{background:#fff;color:#000;border-color:#999;box-shadow:none}
}