/* ====== Tokens ====== */
:root{
  --black: #0a0707;
  --black-soft: #150d0d;
  --black-card: #1c1212;
  --blood: #b81d24;
  --blood-bright: #e22a32;
  --blood-deep: #5c0c10;
  --bone: #ece3d8;
  --bone-dim: #cdbfb2;
  --ash: #6b5852;
  --ash-line: #2c1f1e;

  --display: 'Cormorant Garamond', serif;
  --caps: 'Cinzel', serif;
  --body: 'EB Garamond', serif;
  --mono: 'JetBrains Mono', monospace;

  --maxw: 1100px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

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

::selection{ background:var(--blood-deep); color:var(--bone); }

a{ color:inherit; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--blood); color:var(--bone);
  padding:0.75rem 1.25rem; z-index:200;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--blood-bright); outline-offset:3px; }

/* film grain overlay */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:100; opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ====== Nav ====== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:150;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.75rem;
  background:linear-gradient(to bottom, rgba(10,7,7,0.92), rgba(10,7,7,0));
  transition:background 0.3s ease;
}
.nav.scrolled{ background:rgba(10,7,7,0.92); border-bottom:1px solid var(--ash-line); backdrop-filter:blur(6px); }
.nav__mark{
  font-family:var(--caps); letter-spacing:0.25em; font-size:0.95rem; color:var(--bone); text-decoration:none;
}
.nav__links{ display:flex; align-items:center; gap:1.9rem; }
.nav__links a{
  text-decoration:none; color:var(--bone-dim); font-family:var(--caps); font-size:0.72rem;
  letter-spacing:0.15em; text-transform:uppercase; transition:color 0.2s ease;
}
.nav__links a:hover{ color:var(--blood-bright); }
.nav__cta{
  border:1px solid var(--blood); padding:0.5rem 1rem !important; color:var(--bone) !important;
}
.nav__cta:hover{ background:var(--blood); }
.nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:0.4rem; position:relative; z-index:5; }
.nav__toggle span{ width:22px; height:2px; background:var(--bone); display:block; transition:transform 0.28s ease, opacity 0.2s ease; transform-origin:center; }
.nav__toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2){ opacity:0; }
.nav__toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ====== Hero ====== */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden; text-align:center;
  padding:6rem 1.5rem 4rem;
}

.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(8,3,3,0.55) 0%, rgba(8,3,3,0.25) 35%, rgba(8,3,3,0.55) 68%, var(--black) 96%),
    linear-gradient(to right, rgba(8,3,3,0.55), rgba(8,3,3,0.1) 30%, rgba(8,3,3,0.1) 70%, rgba(8,3,3,0.55));
}
.hero__scythe{
  position:absolute;
  top:14%;
  left:50%;
  width:min(640px, 78vw);
  height:160px;
  z-index:1;
  perspective:1400px;
  pointer-events:none;
  transform:translateX(-50%);
}
.hero__scythe img{
  position:absolute;
  top:50%; left:50%;
  width:100%;
  max-width:640px;
  transform:translate(-50%,-50%) rotate(-68deg);
  filter:drop-shadow(0 0 28px rgba(184,29,36,0.55)) drop-shadow(0 18px 30px rgba(0,0,0,0.6));
  animation:scytheSpin 9s linear infinite;
  transform-style:preserve-3d;
  will-change:transform;
  opacity:0.92;
  pointer-events:auto;
  cursor:pointer;
}
.hero__scythe img.is-lit{
  animation:scytheSpin 9s linear infinite, scytheGlow 1.6s ease-in-out infinite;
}
@keyframes scytheSpin{
  0%{   transform:translate(-50%,-50%) rotate(-68deg) rotateY(0deg); }
  100%{ transform:translate(-50%,-50%) rotate(-68deg) rotateY(360deg); }
}
@keyframes scytheGlow{
  0%, 100%{
    filter:drop-shadow(0 0 40px rgba(226,42,50,0.75)) drop-shadow(0 0 80px rgba(184,29,36,0.55)) drop-shadow(0 18px 30px rgba(0,0,0,0.6));
  }
  50%{
    filter:drop-shadow(0 0 60px rgba(226,42,50,1)) drop-shadow(0 0 130px rgba(184,29,36,0.85)) drop-shadow(0 18px 30px rgba(0,0,0,0.6)) brightness(1.25);
  }
}
@media (prefers-reduced-motion: reduce){
  .hero__scythe img{ animation:none; }
  .hero__scythe img.is-lit{ animation:none; filter:drop-shadow(0 0 50px rgba(226,42,50,0.9)) drop-shadow(0 0 100px rgba(184,29,36,0.7)) drop-shadow(0 18px 30px rgba(0,0,0,0.6)); }
}
@media (max-width:760px){
  .hero__scythe{ top:10%; height:110px; }
}

.hero__content{ position:relative; z-index:2; max-width:780px; }
.eyebrow{
  font-family:var(--caps); font-size:0.72rem; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--blood-bright); margin:0 0 1rem;
}
.hero__title{ margin:0; }
.hero__title-small{
  display:block; font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.1rem, 2.4vw, 1.6rem); color:var(--bone-dim); letter-spacing:0.05em;
}
.hero__title-big{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(2.6rem, 8vw, 5.4rem); color:var(--bone); line-height:1.02;
  text-shadow:0 0 40px rgba(184,29,36,0.45);
  margin-top:0.2rem;
}
.hero__subtitle{
  font-family:var(--display); font-style:italic; font-size:clamp(1rem,2vw,1.3rem);
  color:var(--blood-bright); margin:1.1rem 0 0.4rem;
}
.hero__author{
  font-family:var(--caps); font-size:0.78rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--ash); margin:0 0 2.2rem;
}
.hero__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.btn{
  display:inline-block; padding:0.85rem 1.9rem; font-family:var(--caps); font-size:0.74rem;
  letter-spacing:0.18em; text-transform:uppercase; text-decoration:none; border:1px solid var(--blood);
  transition:all 0.25s ease;
}
.btn--primary{ background:var(--blood); color:var(--bone); }
.btn--primary:hover{ background:var(--blood-bright); border-color:var(--blood-bright); }
.btn--ghost{ color:var(--bone); }
.btn--ghost:hover{ background:rgba(184,29,36,0.15); }

.hero__scroll{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
}
.hero__scroll span{
  width:1px; height:42px; background:linear-gradient(to bottom, transparent, var(--blood-bright));
  animation:scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse{ 0%,100%{ opacity:0.3; } 50%{ opacity:1; } }
.hero__scroll p{
  margin:0; font-family:var(--caps); font-size:0.62rem; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--ash);
}

/* ====== Sections ====== */
.section{
  max-width:var(--maxw); margin:0 auto; padding:7rem 1.75rem;
}
.section--alt{ background:var(--black-soft); max-width:none; }
.section--alt > *{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }

.section__head{ margin-bottom:3rem; }
.section__head h2{
  font-family:var(--display); font-weight:600; font-size:clamp(1.8rem,4vw,2.7rem);
  color:var(--bone); margin:0.2rem 0 0.8rem;
}
.section__lede{ max-width:560px; color:var(--ash); font-style:italic; }

.motif{ margin-top:0.5rem; }
.motif__svg{ width:64px; height:32px; opacity:0.85; }
.motif__horn{ fill:none; stroke:var(--blood); stroke-width:3; stroke-linecap:round; }
.motif__halo{ fill:none; stroke:var(--bone); stroke-width:2; opacity:0.85; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ====== Synopsis ====== */
.synopsis{ max-width:680px; font-size:1.18rem; }
.synopsis p{ margin:0 0 1.3rem; color:var(--bone-dim); }
.synopsis__drop::first-letter{
  font-family:var(--display);
  font-weight:700;
  float:left;
  font-size:5rem;
  line-height:4rem;
  padding-right:0.55rem;
  margin-top:0.12rem;
  color:var(--blood-bright);
}
.synopsis__final{
  font-family:var(--display); font-style:italic; font-size:1.4rem; color:var(--bone);
  border-left:2px solid var(--blood); padding-left:1.2rem; margin-top:2rem !important;
}

/* ====== Heir card ====== */
.heir-card{
  display:grid; grid-template-columns:280px 1fr; gap:3rem; align-items:start;
}
.heir-card__portrait{
  position:relative; aspect-ratio:3/4; border:1px solid var(--ash-line); background:
    repeating-linear-gradient(135deg, var(--black-card), var(--black-card) 10px, var(--black-soft) 10px, var(--black-soft) 20px);
  display:flex; align-items:center; justify-content:center; padding:1.5rem; text-align:center;
  width:100%; cursor:pointer; overflow:hidden; font:inherit; color:inherit;
}
.heir-card__lock{
  font-family:var(--display); font-style:italic; color:var(--ash); font-size:1rem;
  position:relative; z-index:2; transition:opacity 0.4s ease;
}
.heir-card__hint{
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--caps); font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--blood-bright); transition:opacity 0.4s ease;
}
.heir-card__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%;
  opacity:0; transform:scale(1.04); transition:opacity 0.6s ease, transform 0.6s ease;
}
.heir-card__portrait:hover{ border-color:var(--blood); }
.heir-card__portrait[aria-pressed="true"] .heir-card__img{ opacity:1; transform:scale(1); }
.heir-card__portrait[aria-pressed="true"] .heir-card__lock,
.heir-card__portrait[aria-pressed="true"] .heir-card__hint{ opacity:0; pointer-events:none; }
.facts{ margin:0 0 2.2rem; display:grid; gap:0.9rem; }
.facts div{ display:flex; justify-content:space-between; border-bottom:1px solid var(--ash-line); padding-bottom:0.6rem; gap:1rem; }
.facts dt{ font-family:var(--caps); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ash); margin:0; }
.facts dd{ margin:0; color:var(--bone); font-family:var(--mono); font-size:0.95rem; text-align:right; }
.heir-card__empty{
  border:1px dashed var(--ash-line); padding:1.4rem 1.6rem; background:var(--black-card);
}
.heir-card__empty p{ margin:0 0 0.4rem; color:var(--bone-dim); }
.heir-card__empty-sub{ color:var(--ash) !important; font-size:0.92rem; font-style:italic; }

/* ====== Rank ladder ====== */
.rank-ladder{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--ash-line); border:1px solid var(--ash-line);
}
.rank-ladder__item{
  background:var(--black-card); padding:1.6rem 1rem; display:flex; flex-direction:column; gap:0.5rem; align-items:center;
}
.rank-ladder__item--top{ background:linear-gradient(160deg, var(--blood-deep), var(--black-card)); }
.rank-ladder__num{ font-family:var(--mono); color:var(--blood-bright); font-size:0.85rem; }
.rank-ladder__name{ font-family:var(--display); font-style:italic; color:var(--ash); font-size:1.3rem; }
.empty-note{ margin-top:1.5rem; color:var(--ash); font-style:italic; font-size:0.95rem; }

/* ====== Map ====== */
.map-frame{
  position:relative; aspect-ratio:16/9; max-width:760px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
}
.map-frame__svg{ position:absolute; inset:0; width:100%; height:100%; }
.map-frame__svg rect, .map-frame__svg line{ fill:none; stroke:var(--ash-line); stroke-width:1; }
.map-frame__text{
  position:relative; font-family:var(--display); font-style:italic; color:var(--ash); font-size:1.15rem;
  background:var(--black-soft); padding:0 1rem;
}

/* ====== Characters grid ====== */
.char-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:1px;
  background:var(--ash-line); border:1px solid var(--ash-line);
}
.char-card{
  background:var(--black-card); aspect-ratio:3/4; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0.8rem; transition:background 0.25s ease;
}
.char-card:hover{ background:var(--black-soft); }
.char-card span{
  font-family:var(--display); font-size:2.2rem; color:var(--blood-deep);
}
.char-card p{ margin:0; font-family:var(--caps); font-size:0.65rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ash); }

/* ====== Gallery ====== */
.gallery-frame{
  border:1px dashed var(--ash-line); padding:4rem 2rem; text-align:center;
}
.gallery-frame p{ margin:0 0 0.4rem; font-family:var(--display); font-style:italic; font-size:1.2rem; color:var(--bone-dim); }
.gallery-frame__sub{ color:var(--ash) !important; font-size:0.92rem; }

/* ====== Footer ====== */
.footer{
  text-align:center; padding:6rem 1.75rem 4rem; background:
    radial-gradient(ellipse at top, var(--blood-deep) 0%, var(--black) 60%);
}
.footer__motif{ display:flex; justify-content:center; margin-bottom:1.5rem; }
.footer__motif .motif__svg{ width:80px; height:40px; }
.footer__title{
  font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,4vw,2.4rem); color:var(--bone); margin:0 0 2rem;
}
.footer__links{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; }
.footer__legal{ font-size:0.8rem; color:var(--ash); }

/* ====== Audio toggle ====== */
.audio-toggle{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:160;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,7,7,0.85); border:1px solid var(--ash-line);
  color:var(--ash); cursor:pointer; backdrop-filter:blur(6px);
  transition:border-color 0.25s ease, color 0.25s ease;
}
.audio-toggle:hover, .audio-toggle:focus-visible{ border-color:var(--blood); color:var(--bone); }
.audio-toggle.is-playing{ border-color:var(--blood); color:var(--blood-bright); }
.audio-toggle__icon{
  width:20px; height:20px; position:absolute;
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.audio-toggle__icon--off{ opacity:1; transform:scale(1); }
.audio-toggle__icon--on{ opacity:0; transform:scale(0.85); }
.audio-toggle.is-playing .audio-toggle__icon--on{ opacity:1; transform:scale(1); }
.audio-toggle.is-playing .audio-toggle__icon--off{ opacity:0; transform:scale(0.85); }
@media (max-width:760px){
  .audio-toggle{ right:1rem; bottom:1rem; width:44px; height:44px; }
}

/* ====== Responsive ====== */
@media (max-width: 760px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:78%; max-width:320px; background:var(--black-soft);
    flex-direction:column; align-items:flex-start; padding:6rem 2rem 2rem; gap:1.6rem;
    transform:translateX(100%); transition:transform 0.3s ease; border-left:1px solid var(--ash-line);
  }
  .nav__links.open{ transform:translateX(0); }
  .nav__toggle{ display:flex; }
  .heir-card{ grid-template-columns:1fr; }
  .heir-card__portrait{ aspect-ratio:16/9; }
  .rank-ladder{ grid-template-columns:repeat(2,1fr); }
  .section{ padding:5rem 1.25rem; }
}