/* ═══════════════════════════════════════════════════════════════════════
   Cantica Divina — homepage.

   Ordered: reset · fonts · tokens · base type · primitives · hero ·
   sections · signature (the ledger) · footer · responsive · reduced motion.

   Shares its typeface trio and its colour vocabulary with inferno.css so the
   two pages read as one work. Where inferno.css swaps four "world" palettes
   as you descend, this page holds one — Inferno — and lets the other two
   realms appear only as cold slivers behind the sealed gates.
   ═════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-prose);
  font-weight: 300;
  font-size: clamp(18px, 1.15vw + 14px, 22px);
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Fonts ──────────────────────────────────────────────────────────── */
@font-face { font-family: 'Manufacturing Consent'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/manufacturing-consent-400.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/cinzel-400.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/cinzel-600.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/cinzel-700.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/cormorant-300.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/cormorant-400.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/cormorant-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/cormorant-400i.woff2') format('woff2'); }

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Inferno — the page's own realm */
  --ink:        #080405;
  --ink-2:      #0e0607;
  --surface:    #140809;
  --surface-2:  #1c0c0b;
  --ember:      #ff3b1f;
  --ember-deep: #8b0000;
  --gold:       #b8860b;
  --gold-lit:   #ffb238;
  --text:       #d9d4cc;
  --text-dim:   #93887c;
  --text-faint: #5f574e;
  --rule:       rgba(184, 134, 11, .18);

  /* The two sealed realms. Present only inside the gates and along the
     ledger's colour arc — never as a section background. */
  --violet:     #7a4fa0;
  --brass:      #c9b83a;
  --ice:        #9fc7e8;

  --font-display: 'Manufacturing Consent', cursive;
  --font-ui:      'Cinzel', serif;
  --font-prose:   'Cormorant Garamond', serif;

  --shell:   1180px;
  --measure: 60ch;
  --gutter:  clamp(20px, 5vw, 60px);
  --bay:     clamp(66px, 6.4vw, 104px);   /* vertical rhythm between sections */

  --ease: cubic-bezier(.22, .61, .36, 1);
}

::selection { background: var(--ember-deep); color: #f5f0e6; }

a { color: var(--text); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--ember); }

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

img, svg, video, picture { display: block; max-width: 100%; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100%; left: 50%; z-index: 100;
  transform: translateX(-50%);
  padding: 14px 26px;
  background: var(--surface-2);
  border: 1px solid var(--gold);
  font-family: var(--font-ui); font-size: 13px;
  letter-spacing: .3em; text-transform: uppercase;
}
.skip-link:focus { top: 12px; }

#ember-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ── Base type ──────────────────────────────────────────────────────── */
.display {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 74px);
  line-height: 1.02;
  color: #cfc8bd;
  text-shadow: 0 0 30px rgba(139, 0, 0, .35);
}
.display--xl { font-size: clamp(64px, 11vw, 148px); line-height: .9; }
.display--sm { font-size: clamp(30px, 3.4vw, 44px); }

.eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--live { color: var(--gold-lit); }

.lede {
  margin: 0 0 22px;
  font-size: clamp(19px, 1.5vw + 12px, 25px);
  line-height: 1.85;
  color: var(--text);
}
.lede--accent {
  font-style: italic;
  color: var(--gold-lit);
}
.lede--center { max-width: var(--measure); margin-inline: auto; color: var(--text-dim); }

/* ── Primitives ─────────────────────────────────────────────────────── */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--prose { max-width: calc(var(--measure) + 2 * var(--gutter)); }

.section { position: relative; z-index: 2; padding-block: var(--bay); }
.section__head { max-width: var(--measure); margin: 0 0 clamp(34px, 3.6vw, 54px); }

/* Sections whose body is centred get a centred head, so the two don't fight. */
.section--gates .section__head,
.section--keepers .section__head { margin-inline: auto; text-align: center; }

.btn {
  display: inline-block;
  padding: 15px 34px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  border: 1px solid;
  transition: color .3s var(--ease), background-color .3s var(--ease),
              border-color .3s var(--ease), box-shadow .3s var(--ease),
              transform .3s var(--ease);
}
.btn--primary {
  color: #ffd9c8;
  border-color: var(--ember-deep);
  background: linear-gradient(180deg, #2b0605, #140202);
  box-shadow: 0 0 32px rgba(139, 0, 0, .38), inset 0 0 20px rgba(139, 0, 0, .3);
}
.btn--primary:hover {
  color: #fff2ea;
  border-color: var(--ember);
  background: linear-gradient(180deg, #8b0000, #3d0000);
  box-shadow: 0 0 44px rgba(255, 60, 20, .55), inset 0 0 18px rgba(255, 120, 40, .3);
  transform: translateY(-2px);
}
.btn--ghost {
  color: var(--text-dim);
  border-color: var(--rule);
  background: transparent;
}
.btn--ghost:hover {
  color: var(--gold-lit);
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* ═══════════════ HERO ═══════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(44px, 7vh, 72px) var(--gutter) clamp(60px, 9vh, 88px);
  overflow: hidden;
  isolation: isolate;
}
.hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__video.is-live { opacity: 1; }

.hero__smoke {
  position: absolute; inset: -12%; z-index: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 115%, rgba(139, 0, 0, .55) 0%, rgba(80, 10, 5, .3) 35%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 20% 105%, rgba(179, 40, 0, .35) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 108%, rgba(120, 10, 10, .4) 0%, transparent 65%),
    linear-gradient(180deg, #060608 0%, #0a0508 55%, #16060a 100%);
  animation: smokeDrift 20s ease-in-out infinite;
  transition: opacity 1.6s var(--ease);
}
.hero__glow {
  position: absolute; inset: -12%; z-index: 0;
  background: radial-gradient(ellipse 60% 30% at 50% 110%, rgba(255, 90, 20, .2) 0%, transparent 70%);
  animation: emberGlow 6s ease-in-out infinite;
}
/* Tuned against the actual hero video, which goes bright across the middle
   where the tagline and lead sit. Without this the copy loses contrast on the
   ice; the vignette keeps the edges dark without flattening the centre. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 68% 58% at 50% 45%, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .68) 100%),
    linear-gradient(180deg, rgba(4, 2, 2, .5) 0%, rgba(4, 2, 2, .3) 45%, rgba(4, 2, 2, .62) 100%),
    rgba(0, 0, 0, .3);
}

.hero__inner {
  position: relative; z-index: 3;
  width: 100%;
  max-width: 880px;
  text-align: center;
}

.hero__wordmark { margin: 0 0 20px; }
.hero__wordmark img {
  width: min(360px, 74vw);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 0 26px rgba(139, 0, 0, .5));
}

.hero__tagline {
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(15px, 1.9vw, 23px);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #c9c1b6;
}

/* The claim is the thesis of the whole project — set as three struck beats,
   divided by hairlines rather than punctuation. */
.hero__claim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.6vw, 30px);
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(26px, 4.2vw, 48px);
  line-height: 1.1;
  color: var(--gold-lit);
  text-shadow: 0 0 26px rgba(255, 178, 56, .3);
}
.hero__claim span { position: relative; }
.hero__claim span + span::before {
  content: "";
  position: absolute;
  left: calc(clamp(14px, 2.6vw, 30px) / -2);
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
}

.hero__lead {
  margin: 0 auto 30px;
  max-width: 58ch;
  font-size: clamp(16px, .9vw + 12px, 20px);
  font-style: italic;
  line-height: 1.7;
  color: #b3aa9e;
}

/* The countdown block — the gate of Hell as a framed inscription. */
.gate {
  display: inline-block;
  padding: clamp(20px, 2.6vw, 30px) clamp(24px, 4vw, 46px);
  border: 1px solid rgba(179, 0, 0, .48);
  background: rgba(6, 3, 3, .58);
  backdrop-filter: blur(5px);
  box-shadow: 0 0 46px rgba(0, 0, 0, .55), inset 0 0 28px rgba(139, 0, 0, .14);
}
.gate__eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--gold);
}
.countdown { display: flex; gap: clamp(14px, 2.6vw, 26px); justify-content: center; flex-wrap: wrap; }
.countdown.is-done { display: none; }
.countdown__cell { text-align: center; min-width: 62px; }
.countdown__num {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(28px, 4.6vw, 44px);
  line-height: 1;
  color: var(--ember);
  text-shadow: 0 0 18px rgba(255, 45, 18, .6);
  font-variant-numeric: tabular-nums;
}
.countdown__unit {
  display: block;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.gate__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* The sole action left in the gate — sized up and given a slow pulse so it
   reads as the one thing to do, not just another button in a row. */
.btn--presave {
  padding: 18px 44px;
  font-size: 14px;
  animation: presavePulse 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn--presave { animation: none; }
}

.gate__note {
  margin: 16px 0 0;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.socials-group { margin-top: 34px; }

.socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 28px);
  font-size: 19px;
}
.socials a { color: #8d857b; }
.socials a:hover {
  color: var(--ember);
  filter: drop-shadow(0 0 12px rgba(255, 60, 20, .8));
  transform: translateY(-3px);
}
.socials a { transition: color .25s var(--ease), transform .25s var(--ease), filter .25s var(--ease); }

.socials__label {
  margin: 22px 0 14px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-faint);
}
.socials--streaming a:hover {
  color: var(--gold-lit);
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, .7));
}

.hero__scroll {
  position: absolute;
  bottom: 26px; left: 50%;
  z-index: 3;
  margin-left: -14px;
  font-size: 26px;
  color: #8d857b;
  animation: bounceArrow 2s ease-in-out infinite;
}

/* ═══════════════ SECTIONS ═══════════════ */

.section--narrative {
  text-align: center;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 50%, var(--ink) 100%);
}
.section--narrative .eyebrow,
.section--pillars .section__head,
.section--cantos .section__head,
.section--gates .section__head,
.section--keepers .section__head { }

.rule-flame {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 46px;
  color: var(--ember-deep);
}
.rule-flame__line {
  width: clamp(48px, 9vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember-deep));
}
.rule-flame__line:last-child { background: linear-gradient(90deg, var(--ember-deep), transparent); }

/* ── Album ──────────────────────────────────────────────────────────── */
.section--album {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(139, 0, 0, .16) 0%, transparent 65%),
    #060304;
  border-block: 1px solid rgba(184, 134, 11, .1);
}
.album {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: clamp(40px, 6vw, 78px);
  align-items: center;
}
.album__art img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--gold);
  outline: 1px solid rgba(139, 0, 0, .5);
  outline-offset: 7px;
  box-shadow: 0 0 60px rgba(139, 0, 0, .32), 0 14px 46px rgba(0, 0, 0, .85);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.album__art:hover img {
  transform: scale(1.015);
  box-shadow: 0 0 90px rgba(255, 60, 20, .3), 0 14px 46px rgba(0, 0, 0, .85);
}
.album__subtitle {
  margin: -6px 0 28px;
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.7vw, 22px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.album__single {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 28px;
}
.album__single-tag {
  padding: 5px 12px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-lit);
  border: 1px solid var(--gold);
}
.album__single a {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--text);
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
}
.album__single a:hover { color: var(--gold-lit); }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin: 36px 0;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.facts__item { padding: 16px 18px; background: #0a0405; }
.facts dt {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.facts dd {
  margin: 7px 0 0;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--gold-lit);
}

.album__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Live / tour ────────────────────────────────────────────────────── */
.section--tour {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(184, 134, 11, .07) 0%, transparent 70%),
    var(--ink-2);
  border-block: 1px solid var(--rule);
}
.section--tour .section__head { margin-inline: auto; text-align: center; }
.tour-widget {
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .6);
  padding: clamp(18px, 3vw, 38px);
}

/* ── Pillars ────────────────────────────────────────────────────────── */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.pillar {
  padding: clamp(30px, 3.6vw, 46px);
  background: var(--ink);
  transition: background-color .5s var(--ease);
}
.pillar:hover { background: var(--surface); }
.pillar__title {
  margin: 0 0 16px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: .06em;
  color: var(--gold-lit);
}
.pillar p { margin: 0; font-size: 18px; line-height: 1.8; color: var(--text-dim); }

/* ═══════════════ SIGNATURE — the descent ledger ═══════════════
   Twelve rows on one continuous rail. Each row carries --t, its position
   along the album's arc; the rail segment and the canto number take a colour
   mixed from that position, so the gradient from the gold of the Dark Wood to
   the ice of Judecca is produced by the data itself, not painted on top. */
.section--cantos {
  background: linear-gradient(180deg, #060304 0%, #0a0507 40%, #06060b 100%);
}

.ledger { margin: 0; padding: 0; list-style: none; }

.canto {
  --tone: var(--ember);
  position: relative;
  display: grid;
  grid-template-columns: 12px 126px 1fr auto;
  align-items: baseline;
  gap: clamp(12px, 1.8vw, 24px);
  padding: clamp(15px, 1.5vw, 20px) clamp(10px, 1.6vw, 22px);
  border-bottom: 1px solid rgba(255, 255, 255, .045);
  transition: background-color .5s var(--ease), transform .5s var(--ease);
}
.canto:first-child { border-top: 1px solid rgba(255, 255, 255, .045); }

@supports (color: color-mix(in oklab, red, blue)) {
  .canto {
    --mix-ember:  clamp(0%, calc(var(--t) * 200%), 100%);
    --mix-violet: clamp(0%, calc((var(--t) - .5) * 333%), 100%);
    --mix-ice:    clamp(0%, calc((var(--t) - .8) * 500%), 100%);
    --tone: color-mix(in oklab,
              color-mix(in oklab,
                color-mix(in oklab, var(--gold), var(--ember) var(--mix-ember)),
                var(--violet) var(--mix-violet)),
              var(--ice) var(--mix-ice));
  }
}

/* The rail: one segment per row. Stacked, they draw the full arc. */
.canto__rail {
  grid-column: 1;
  position: absolute;
  left: clamp(10px, 1.6vw, 22px);
  top: 0; bottom: 0;
  width: 1px;
  background: var(--tone);
  opacity: .38;
  transition: opacity .5s var(--ease), box-shadow .5s var(--ease);
}
.canto__rail::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--tone);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.canto__num {
  grid-column: 2;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: .16em;
  color: var(--tone);
  opacity: .72;
  transition: opacity .45s var(--ease), text-shadow .45s var(--ease);
}

.canto__main { grid-column: 3; display: flex; flex-direction: column; gap: 4px; }
.canto__title {
  font-family: var(--font-prose);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 27px);
  line-height: 1.3;
  color: #bdb4a8;
  transition: color .45s var(--ease);
}
.canto__zone {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.canto__genre {
  grid-column: 4;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: right;
  transition: color .45s var(--ease);
}

.canto.is-active { background: rgba(255, 255, 255, .022); }
.canto.is-active .canto__rail { opacity: 1; box-shadow: 0 0 14px 1px var(--tone); }
.canto.is-active .canto__rail::after { opacity: 1; transform: scale(1); }
.canto.is-active .canto__num { opacity: 1; text-shadow: 0 0 16px var(--tone); }
.canto.is-active .canto__title { color: #efe7dc; }
.canto.is-active .canto__genre { color: var(--tone); }

.ledger__foot { margin: 38px 0 0; text-align: center; }

/* ── Sealed gates ───────────────────────────────────────────────────── */
.section--gates {
  background: linear-gradient(180deg, #06060b 0%, #07070d 100%);
}
.sealed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
  max-width: 760px;
  margin-inline: auto;
}
/* Deliberately smaller type and lower contrast than any Inferno block:
   these are doors, not destinations. */
.sealed__gate {
  --seal: var(--violet);
  position: relative;
  padding: clamp(34px, 4vw, 48px) clamp(24px, 3vw, 34px) clamp(28px, 3.4vw, 38px);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .012);
  overflow: hidden;
  transition: border-color .6s var(--ease), background-color .6s var(--ease);
}
.sealed__gate--paradiso { --seal: var(--ice); }
.sealed__gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in oklab, var(--seal), transparent 82%) 0%, transparent 70%);
  opacity: .5;
  transition: opacity .6s var(--ease);
}
.sealed__gate:hover { border-color: color-mix(in oklab, var(--seal), transparent 55%); }
.sealed__gate:hover::before { opacity: 1; }

.sealed__seal {
  position: relative;
  display: block;
  width: 26px; height: 26px;
  margin: 0 auto 22px;
  border: 1px solid var(--seal);
  transform: rotate(45deg);
  opacity: .55;
  animation: sealBreathe 5.5s ease-in-out infinite;
}
/* The breathing glow lives on its own layer and animates opacity alone. Animating
   box-shadow directly on .sealed__seal repainted it on every frame — the compositor
   can't interpolate a shadow, so it was the page's one non-composited animation. */
.sealed__seal::before {
  content: "";
  position: absolute;
  inset: -1px;
  box-shadow: 0 0 18px 0 color-mix(in oklab, var(--seal), transparent 60%);
  opacity: 0;
  will-change: opacity;
  animation: sealGlow 5.5s ease-in-out infinite;
}
.sealed__seal::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: var(--seal);
  opacity: .3;
}
.sealed__title {
  position: relative;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  color: color-mix(in oklab, var(--seal), #ffffff 30%);
}
.sealed__sub {
  position: relative;
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sealed__desc {
  position: relative;
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-dim);
}
.sealed__status {
  position: relative;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--seal), transparent 30%);
}
.sealed__foot {
  margin: 40px 0 0;
  text-align: center;
  font-size: 17px;
  font-style: italic;
  color: var(--text-faint);
}
.sealed__foot a { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }

/* ── Keepers ────────────────────────────────────────────────────────── */
.section--keepers { background: linear-gradient(180deg, #07070d 0%, #080405 100%); }
.keepers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.keeper { position: relative; padding-top: 26px; text-align: center; }
.keeper::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 46px; height: 1px;
  margin-left: -23px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.keeper__mark {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .4em;
  color: var(--gold);
  opacity: .6;
}
.keeper__name {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 36px);
  color: #cfc8bd;
}
.keeper__line { margin: 0; font-size: 18px; line-height: 1.8; color: var(--text-dim); }

/* ── Craft (the AI statement) ───────────────────────────────────────── */
.section--craft {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(184, 134, 11, .07) 0%, transparent 70%),
    #080405;
  border-block: 1px solid var(--rule);
}

/* ── Newsletter ─────────────────────────────────────────────────────── */
.section--join {
  text-align: center;
  background: linear-gradient(180deg, #080405 0%, #10060a 60%, var(--ink) 100%);
}
.subscribe {
  display: flex;
  margin-top: 34px;
  border: 1px solid var(--ember-deep);
  background: #000;
  box-shadow: 0 0 38px rgba(139, 0, 0, .26), inset 0 0 24px rgba(0, 0, 0, .9);
}
.subscribe__input {
  flex: 1;
  min-width: 0;
  padding: 18px 22px;
  border: none;
  outline: none;
  background: transparent;
  color: #f5f0e6;
  font-family: var(--font-prose);
  font-size: 19px;
}
.subscribe__input::placeholder { color: #6b6560; font-style: italic; }
.subscribe__btn {
  padding: 0 clamp(22px, 3.4vw, 36px);
  border: none;
  border-left: 1px solid var(--ember-deep);
  cursor: pointer;
  background: linear-gradient(180deg, #2a0505, #150202);
  color: var(--ember);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .25em;
  text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.subscribe__btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #8b0000, #3d0000);
  color: #ffe8d6;
  box-shadow: 0 0 30px rgba(255, 60, 20, .55), inset 0 0 14px rgba(255, 120, 40, .3);
}
.subscribe__btn:disabled { opacity: .6; cursor: not-allowed; }

.subscribe__status {
  min-height: 1.6em;
  margin: 20px 0 0;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: .16em;
}
.subscribe__status.is-ok { color: var(--gold); }
.subscribe__status.is-error { color: #ff6b4a; font-family: var(--font-prose); font-size: 17px; letter-spacing: 0; }
.subscribe__note { margin: 18px 0 0; font-size: 16px; font-style: italic; color: var(--text-faint); }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.section--faq { background: #060304; border-top: 1px solid var(--rule); }
.qa { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.qa summary {
  padding: 20px 30px 20px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 18px);
  color: #bdb4a8;
  transition: color .25s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--gold-lit); }
.qa summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.qa[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.qa p {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-dim);
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer {
  position: relative;
  z-index: 2;
  padding-block: 68px 48px;
  text-align: center;
  background: #030202;
  border-top: 1px solid rgba(160, 160, 160, .09);
}
.socials--footer { margin-top: 0; margin-bottom: 32px; font-size: 21px; }
.footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2.6vw, 30px);
  margin-bottom: 30px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.footer__links a { color: var(--text-faint); }
.footer__links a:hover { color: var(--gold-lit); }
.footer__mark {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .28em;
  color: var(--text-faint);
}
.footer__verse { margin: 14px 0 0; font-size: 16px; font-style: italic; color: #453f39; }
.footer__legal { margin: 10px 0 0; font-size: 14px; }
.footer__legal a { color: #453f39; }

/* ═══════════════ MOTION ═══════════════ */

/* Page-load sequence: the hero assembles from the wordmark outward. One
   orchestrated moment, then the page goes quiet. */
[data-seq] { opacity: 0; animation: riseIn 1.15s var(--ease) forwards; }
[data-seq="1"] { animation-delay: .15s; }
[data-seq="2"] { animation-delay: .45s; }
[data-seq="3"] { animation-delay: .68s; }
[data-seq="4"] { animation-delay: .9s; }
[data-seq="5"] { animation-delay: 1.12s; }
[data-seq="6"] { animation-delay: 1.4s; }

/* Scroll reveal — reveal.js adds .is-in. Children stagger via --i. */
[data-reveal] { opacity: 0; transform: translateY(34px); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease);
}
[data-reveal].is-in .pillar,
[data-reveal].is-in .keeper,
[data-reveal].is-in .sealed__gate {
  animation: riseIn .95s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 130ms + 180ms);
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes smokeDrift {
  0%   { transform: translate3d(-4%, 2%, 0) scale(1.05); }
  50%  { transform: translate3d(4%, -3%, 0) scale(1.12); }
  100% { transform: translate3d(-4%, 2%, 0) scale(1.05); }
}
@keyframes emberGlow { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }
@keyframes presavePulse {
  0%, 100% { box-shadow: 0 0 32px rgba(139, 0, 0, .38), inset 0 0 20px rgba(139, 0, 0, .3); }
  50%      { box-shadow: 0 0 52px rgba(255, 60, 20, .55), inset 0 0 22px rgba(255, 90, 30, .35); }
}
@keyframes bounceArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
@keyframes sealBreathe { 0%, 100% { opacity: .4; } 50% { opacity: .8; } }
@keyframes sealGlow    { 0%, 100% { opacity: 0; }  50% { opacity: 1; } }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 900px) {
  .album { grid-template-columns: 1fr; }
  .album__art { max-width: 380px; margin-inline: auto; }
  .album__body { text-align: center; }
  .album__actions, .facts { justify-content: center; }
  .section__head { margin-inline: auto; text-align: center; }
}

@media (max-width: 720px) {
  .canto {
    grid-template-columns: 1fr auto;
    row-gap: 8px;
    padding-left: 26px;
  }
  .canto__rail { left: 2px; }
  .canto__num { grid-column: 1; grid-row: 1; }
  .canto__genre { grid-column: 2; grid-row: 1; }
  .canto__main { grid-column: 1 / -1; grid-row: 2; }
  .hero__claim { font-size: clamp(23px, 7vw, 34px); }
  .hero__claim span + span::before { display: none; }
}

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-seq], [data-reveal] { opacity: 1; transform: none; }
  .hero__video { display: none; }
}