:root {
  color-scheme: dark;
  --night: #030914;
  --night-soft: #07111d;
  --panel: #0b141e;
  --parchment: #efe5d1;
  --parchment-muted: #c8bba4;
  --gold: #b38a3f;
  --gold-bright: #d1ad63;
  --gold-soft: rgba(179, 138, 63, .64);
  --gold-faint: rgba(179, 138, 63, .18);
  --ember: #9b522f;
  --display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --interface: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--night); }
body { margin: 0; background: var(--night); color: var(--parchment); font-family: var(--display); overflow-x: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.story-flow {
  --threshold-progress: 0;
  --hero-fade: 0;
  --room-reveal: 0;
  --warmth: 0;
  --frame-open: 0;
  --image-layout: 0;
  --caption-reveal: 0;
  --route-reveal: 0;
  position: relative;
  background: linear-gradient(180deg, var(--night), #07101a 42%, #0a1015);
}

.story-sticky {
  z-index: 0;
  height: 100svh;
  position: sticky;
  top: 0;
}

.story-content {
  z-index: 1;
  margin-top: -100svh;
  position: relative;
  pointer-events: none;
}

.threshold-track {
  height: 115svh;
  pointer-events: none;
}

.scene {
  isolation: isolate;
  background: var(--night);
  place-items: center;
  width: 100%;
  height: 100svh;
  padding: clamp(80px, 11vh, 132px) clamp(54px, 8vw, 150px);
  display: grid;
  position: relative;
  overflow: hidden;
}

.mountain-layer,
.scene::after {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.mountain-layer {
  z-index: -3;
  background: linear-gradient(rgba(247,241,231,.02), rgba(21,21,20,.08)), url("assets/chronicleborn-hero-eastern-approach-4k.webp") center / cover no-repeat;
  opacity: calc(1 - var(--room-reveal) * .88);
  filter: brightness(calc(1 - var(--room-reveal) * .35)) blur(calc(var(--room-reveal) * 1.5px));
  transform: scale(calc(1 + var(--room-reveal) * .025));
  will-change: opacity, filter, transform;
}

.scene::after {
  content: "";
  z-index: 0;
  background:
    radial-gradient(transparent 28%, rgba(1,5,10,.18) 66%, rgba(1,4,9,.72) 100%),
    linear-gradient(90deg, rgba(1,4,9,.32), transparent 28% 70%, rgba(1,4,9,.38));
  opacity: calc(1 - var(--room-reveal) * .18);
}

.threshold-warmth {
  z-index: 0;
  position: absolute;
  inset: -4%;
  pointer-events: none;
  opacity: var(--warmth);
  background:
    radial-gradient(circle at 18% 82%, rgba(215,125,69,.44), rgba(155,76,39,.14) 27%, transparent 58%),
    radial-gradient(circle at 50% 52%, rgba(225,181,108,.12), transparent 47%),
    linear-gradient(rgba(5,9,12,.08), rgba(5,8,10,.34));
  mix-blend-mode: screen;
  filter: blur(8px);
  transform: scale(calc(.58 + var(--warmth) * .42));
  will-change: opacity, transform;
}

.route-line {
  z-index: 1;
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: calc(var(--route-reveal) * .48);
  fill: var(--gold);
}

.route-line path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.15;
  stroke-dasharray: .012 .014;
  stroke-dashoffset: calc(1 - var(--route-reveal));
  vector-effect: non-scaling-stroke;
}

.route-line circle { opacity: var(--route-reveal); }

.edmund-presence {
  z-index: -1;
  position: absolute;
  overflow: hidden;
  margin: 0;
  top: calc(var(--image-layout) * 7svh);
  left: calc(50% - var(--image-layout) * 44vw);
  width: calc(76vw - var(--image-layout) * 38vw);
  height: calc(100svh - var(--image-layout) * 14svh);
  opacity: var(--room-reveal);
  transform: translateX(calc((1 - var(--image-layout)) * -50%)) scale(calc(1.035 - var(--image-layout) * .035));
  border: 1px solid rgba(201,164,92,calc(var(--image-layout) * .24));
  box-shadow: 0 30px 90px rgba(0,0,0,calc(var(--image-layout) * .45));
  will-change: top, left, width, height, opacity, transform;
}

.edmund-presence::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 58%, rgba(7,14,22,.78) 100%), linear-gradient(0deg, rgba(2,5,8,.74), transparent 38%);
}

.edmund-presence img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 20%;
  filter: saturate(.82) contrast(1.02) blur(calc((1 - var(--room-reveal)) * 7px));
  transform: scale(calc(1.045 - var(--room-reveal) * .045));
}

.edmund-presence figcaption {
  z-index: 1;
  position: absolute;
  left: clamp(26px, 3vw, 48px);
  bottom: clamp(28px, 4vw, 58px);
  display: flex;
  flex-direction: column;
  opacity: var(--caption-reveal);
  transform: translateY(calc((1 - var(--caption-reveal)) * 14px));
  text-shadow: 0 2px 12px #000;
}

.edmund-presence .name { font-size: clamp(2rem, 3.2vw, 3.7rem); line-height: 1; }
.edmund-presence .role { color: var(--gold-bright); font: 600 .7rem/1.4 var(--interface); letter-spacing: .18em; text-transform: uppercase; margin-top: 8px; }

.frame { z-index: 2; pointer-events: none; border: 1px solid var(--gold-soft); position: absolute; inset: clamp(18px, 2.25vw, 38px); box-shadow: inset 0 0 0 5px rgba(201,164,92,.05); opacity: calc(1 - var(--threshold-progress)); }
.frame::before { content: ""; border: 1px solid rgba(201,164,92,.34); position: absolute; inset: 7px; }
.corner { aspect-ratio: 1; opacity: .78; width: clamp(30px, 3.5vw, 58px); position: absolute; }
.corner::before, .corner::after { content: ""; border: 1px solid var(--gold-soft); border-radius: 48% 0; position: absolute; inset: 0; transform: rotate(18deg) scale(.72); }
.corner::after { transform: rotate(48deg) scale(.48); }
.corner-tl { top: -2px; left: -2px; }
.corner-tr { top: -2px; right: -2px; transform: scaleX(-1); }
.corner-bl { bottom: -2px; left: -2px; transform: translateX(calc(var(--frame-open) * -12vw)) scaleY(-1); }
.corner-br { bottom: -2px; right: -2px; transform: translateX(calc(var(--frame-open) * 12vw)) scale(-1); }
.compass { aspect-ratio: 1; z-index: 2; border: 1px solid var(--gold-soft); background: radial-gradient(circle, var(--gold) 0 5%, transparent 7%); width: clamp(26px, 2.5vw, 44px); position: absolute; left: 50%; opacity: calc(1 - var(--threshold-progress)); transform: translateX(-50%) rotate(45deg); }
.compass::before, .compass::after { content: ""; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); height: 1px; position: absolute; inset: 45% -65%; }
.compass::after { transform: rotate(90deg); }
.compass-top { top: calc(clamp(18px, 2.25vw, 38px) - clamp(13px, 1.25vw, 22px)); }
.compass-bottom { bottom: calc(clamp(18px, 2.25vw, 38px) - clamp(13px, 1.25vw, 22px)); opacity: calc(1 - var(--frame-open)); transform: translateX(-50%) translateY(calc(var(--frame-open) * 22px)) rotate(45deg); }

.hero-content { z-index: 1; text-align: center; filter: drop-shadow(0 4px 18px rgba(0,0,0,.76)) blur(calc(var(--hero-fade) * 2px)); flex-direction: column; align-items: center; width: min(82vw, 1050px); display: flex; position: relative; opacity: calc(1 - var(--hero-fade)); transform: translateY(calc(-1vh - var(--hero-fade) * 28px)) scale(calc(1 - var(--hero-fade) * .035)); will-change: opacity, transform, filter; }
.logo { width: min(72vw, 980px); height: auto; display: block; }
.divider { width: min(38vw, 430px); color: var(--gold); align-items: center; gap: 10px; margin: clamp(20px, 3.1vh, 34px) 0 clamp(14px, 2.1vh, 22px); display: flex; }
.divider::before, .divider::after { content: ""; background: linear-gradient(90deg, transparent, var(--gold)); flex: 1; height: 1px; }
.divider::after { transform: scaleX(-1); }
.divider span { font-size: clamp(10px, 1vw, 14px); transform: rotate(45deg); }
.tagline { color: var(--parchment); letter-spacing: .02em; text-shadow: 0 2px 14px rgba(0,0,0,.9); margin: 0; font-size: clamp(1.45rem, 3.25vw, 3.25rem); font-weight: 400; line-height: 1.1; }
.coming-soon { color: var(--gold); letter-spacing: .36em; text-transform: uppercase; margin: clamp(18px, 3vh, 34px) 0 0; font-size: clamp(.7rem, 1.05vw, .95rem); font-weight: 600; line-height: 1; }

.scroll-invitation { z-index: 3; color: var(--parchment-muted); font: 600 .72rem/1 var(--interface); letter-spacing: .18em; text-decoration: none; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 9px; position: absolute; bottom: clamp(44px, 6vh, 74px); opacity: calc(1 - var(--hero-fade)); transform: translateY(calc(var(--hero-fade) * 18px)); transition: color .2s ease; }
.scroll-invitation svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.4; animation: invitation 2.2s ease-in-out infinite; }
.scroll-invitation:hover, .scroll-invitation:focus-visible { color: var(--gold-bright); }
@keyframes invitation { 0%, 100% { transform: translateY(0); opacity: .65; } 50% { transform: translateY(5px); opacity: 1; } }

.edmund-section { min-height: 100svh; position: relative; padding: clamp(64px, 8vw, 120px) clamp(20px, 6vw, 96px) clamp(22px, 3vw, 44px); background: transparent; overflow: clip; pointer-events: none; }
.edmund-section::before { content: ""; pointer-events: none; position: absolute; inset: 0; background-image: linear-gradient(rgba(201,164,92,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(201,164,92,.025) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); }
.library-glow { position: absolute; width: min(56vw, 850px); aspect-ratio: 1; left: -18vw; bottom: -32vw; background: radial-gradient(circle, rgba(154,80,42,.22), rgba(154,80,42,.05) 45%, transparent 70%); filter: blur(8px); }
.edmund-frame { position: relative; width: min(1420px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(330px, .82fr) minmax(500px, 1.18fr); background: transparent; }
.edmund-frame::before { display: none; }
.portrait-reserve { min-height: 100%; }
.motion-fallback { display: none; }

.introduction { padding: clamp(48px, 6vw, 94px) clamp(36px, 6vw, 100px); position: relative; background: linear-gradient(135deg, rgba(13,23,30,.94), rgba(7,14,22,.97)); border: 1px solid var(--gold-faint); box-shadow: 0 34px 90px rgba(0,0,0,.28), inset 0 0 0 7px rgba(179,138,63,.025); backdrop-filter: blur(10px); pointer-events: auto; }
.introduction::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(179,138,63,.10); pointer-events: none; }
.eyebrow { color: var(--gold); font: 700 .7rem/1.2 var(--interface); letter-spacing: .23em; text-transform: uppercase; margin: 0 0 16px; }
.introduction h2 { margin: 0; font-weight: 400; font-size: clamp(2.4rem, 4vw, 5rem); line-height: .98; letter-spacing: -.02em; }
.introduction h2 span { color: var(--parchment-muted); display: block; font-size: .58em; margin-top: 12px; letter-spacing: 0; }

.audio-player { display: grid; grid-template-columns: auto minmax(170px, auto) 1fr auto; align-items: center; gap: 14px 18px; margin: 34px 0 40px; padding: 17px 19px; border: 1px solid rgba(201,164,92,.30); background: rgba(3,9,20,.56); }
.play-button { width: 48px; height: 48px; display: grid; place-items: center; color: #07101a; background: var(--gold); border: 0; border-radius: 50%; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.play-button:hover { transform: scale(1.04); background: var(--gold-bright); }
.play-button:focus-visible, .updates-form button:focus-visible, .updates-form input:focus-visible, .audio-progress:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.play-button svg { width: 22px; height: 22px; fill: currentColor; }
.pause-icon { display: none; }
.audio-player.is-playing .play-icon { display: none; }
.audio-player.is-playing .pause-icon { display: block; }
.audio-copy { display: flex; flex-direction: column; gap: 3px; }
.audio-title { font-size: 1.05rem; }
.audio-note { color: #9b9f9f; font: .73rem/1.35 var(--interface); letter-spacing: .04em; }
.progress-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.audio-progress { width: 100%; min-width: 120px; height: 3px; accent-color: var(--gold); cursor: pointer; }
.audio-time { color: var(--parchment-muted); font: .75rem/1 var(--interface); font-variant-numeric: tabular-nums; }

.transcript { color: #d5c8b1; font-size: clamp(1.04rem, 1.22vw, 1.27rem); line-height: 1.72; max-width: 760px; }
.transcript p { margin: 0 0 1.15em; }
.transcript .dry-line { color: var(--parchment); font-style: italic; }
.transcript .closing { color: var(--parchment); margin-bottom: 0; }

.updates-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 42px; padding-top: 30px; border-top: 1px solid rgba(179,138,63,.23); }
.updates-cta p { color: var(--parchment-muted); margin: 0; font-size: 1.05rem; line-height: 1.45; }
.updates-trigger { color: var(--parchment); background: transparent; border: 1px solid var(--gold); padding: 14px 22px; font: 750 .75rem/1 var(--interface); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .2s ease, background .2s ease; }
.updates-trigger:hover { color: #0b0c0c; background: var(--gold-bright); }
.updates-trigger:focus-visible, .dialog-close:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.updates-dialog { width: min(620px, calc(100vw - 32px)); max-width: none; color: #201c16; background: transparent; border: 0; padding: 0; overflow: visible; opacity: 0; transform: translateY(18px) scale(.982); transform-origin: 50% 54%; transition: opacity .28s ease, transform .34s cubic-bezier(.2,.75,.25,1); }
.updates-dialog.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.updates-dialog::backdrop { background: rgba(1,4,8,0); backdrop-filter: blur(0); transition: background .32s ease, backdrop-filter .32s ease; }
.updates-dialog.is-visible::backdrop { background: rgba(1,4,8,.78); backdrop-filter: blur(5px); }
.dialog-shell { position: relative; padding: clamp(38px, 6vw, 64px); border: 1px solid rgba(126,91,33,.55); color: #201c16; background: radial-gradient(circle at 86% 8%, rgba(168,123,46,.13), transparent 28%), linear-gradient(rgba(239,229,209,.96), rgba(228,214,187,.98)); box-shadow: 0 34px 100px rgba(0,0,0,.62), inset 0 0 0 7px rgba(126,91,33,.07); }
.dialog-shell::before { content: ""; pointer-events: none; position: absolute; inset: 10px; border: 1px solid rgba(126,91,33,.20); }
.dialog-close { position: absolute; z-index: 1; top: 15px; right: 18px; width: 38px; height: 38px; color: #554731; background: transparent; border: 0; font: 300 2rem/1 var(--interface); cursor: pointer; }
.dialog-compass { color: #9b712d; margin-bottom: 17px; font-size: 1.55rem; }
.updates-dialog .eyebrow { color: #8a6325; }
.updates-dialog h2 { margin: 0 0 15px; font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 400; line-height: 1; }
.updates-dialog h2 + p { color: #51483c; margin: 0 0 27px; line-height: 1.55; }
.updates-form > label { display: block; color: #5f523f; font: 650 .72rem/1 var(--interface); letter-spacing: .08em; margin-bottom: 10px; }
.form-row { display: flex; align-items: flex-start; }
.form-email-field { display: flex; flex: 1; min-width: 0; }
.form-email-field .form__entry { display: grid; flex: 1; min-width: 0; }
.form-email-field .entry__field { display: flex; min-width: 0; }
.updates-form input { width: 100%; min-width: 0; flex: 1; color: #211d17; background: rgba(255,252,244,.62); border: 1px solid rgba(103,74,28,.40); border-right: 0; padding: 15px 17px; font-family: var(--interface); }
.updates-form input::placeholder { color: #8b8172; }
.updates-form button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #f1e7d3; background: #25221d; border: 1px solid #25221d; padding: 14px 20px; font: 750 .77rem/1 var(--interface); letter-spacing: .05em; white-space: nowrap; cursor: pointer; transition: background .2s ease; }
.updates-form button:hover { background: #4b3b24; }
.consent, .form-message { color: #756a59; font: .7rem/1.45 var(--interface); margin: 9px 0 0; }
.form-message { min-height: 1.1em; color: #76541f; }
.sib-form-message-panel { display: none; margin: 0 0 18px; padding: 12px 14px; border: 1px solid; }
.form-message-error { color: #6d2b26; background: rgba(151,55,45,.08); border-color: rgba(151,55,45,.34); }
.form-message-success { color: #4c5b32; background: rgba(72,101,49,.08); border-color: rgba(72,101,49,.32); }
.entry__error { display: block; margin: 7px 0 0; color: #7a2e27; font: .7rem/1.35 var(--interface); letter-spacing: 0; }
.entry__error:empty { display: none; }
.captcha-shell { min-height: 65px; margin-top: 16px; }
.cf-turnstile { width: 100%; }
.input--hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.progress-indicator__icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; animation: submit-spin .8s linear infinite; }
.sib-hide-loader-icon { display: none; }
.updates-dialog[data-state="pending"] .dialog-compass,
.updates-dialog[data-state="confirmed"] .dialog-compass { margin-bottom: 24px; }
@keyframes submit-spin { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
  .edmund-frame { grid-template-columns: minmax(300px, .72fr) minmax(450px, 1.28fr); }
  .introduction { padding-inline: clamp(30px, 4vw, 58px); }
  .audio-player { grid-template-columns: auto 1fr auto; }
  .audio-progress { grid-column: 2 / -1; }
}

@media (max-width: 760px) {
  .threshold-track { height: 105svh; }
  .scene { padding: 82px 38px; }
  .mountain-layer { background-position: 42%; }
  .edmund-presence {
    top: calc(var(--image-layout) * 2svh);
    left: calc(50% - var(--image-layout) * 50%);
    width: calc(88vw + var(--image-layout) * 12vw);
    height: calc(100svh - var(--image-layout) * 43svh);
    transform: translateX(calc((1 - var(--image-layout)) * -50%));
  }
  .edmund-presence img { object-position: 50% 22%; }
  .edmund-presence figcaption { bottom: 24px; }
  .route-line { opacity: calc(var(--route-reveal) * .34); }
  .hero-content { width: min(84vw, 620px); transform: translateY(-4vh); }
  .logo { width: min(82vw, 620px); }
  .divider { width: min(56vw, 300px); margin-top: 20px; }
  .tagline { font-size: clamp(1.3rem, 6vw, 2rem); }
  .scroll-invitation { bottom: 48px; }
  .edmund-section { padding: 28px 14px 24px; }
  .edmund-frame { display: block; }
  .portrait-reserve { height: 18svh; min-height: 0; }
  .introduction { padding: 40px 25px 34px; }
  .introduction h2 { font-size: clamp(2.55rem, 12vw, 4rem); }
  .audio-player { grid-template-columns: auto 1fr auto; margin: 28px 0 34px; padding: 14px; gap: 12px; }
  .audio-progress { grid-column: 1 / -1; grid-row: 2; }
  .audio-time { grid-column: 3; grid-row: 1; }
  .transcript { font-size: 1.02rem; line-height: 1.65; }
  .updates-cta { align-items: flex-start; flex-direction: column; margin-top: 34px; padding-top: 27px; }
  .form-row { display: grid; gap: 10px; }
  .updates-form input { border-right: 1px solid rgba(103,74,28,.40); }
  .updates-form button { min-height: 48px; }
  .dialog-shell { padding: 38px 24px 30px; }
}

@media (max-height: 560px) {
  .threshold-track { height: 110svh; }
  .scene { padding-block: 54px; }
  .logo { width: min(62vw, 760px); max-height: 26vh; }
  .divider { margin-block: 12px 10px; }
  .coming-soon { margin-top: 14px; }
  .scroll-invitation { display: none; }
}

@media (min-width: 1400px) and (max-height: 1300px) {
  .introduction { padding: 58px 72px 48px; }
  .introduction h2 { font-size: clamp(3rem, 3.4vw, 4.45rem); }
  .audio-player { margin: 24px 0 28px; padding: 14px 17px; }
  .transcript { font-size: 1.08rem; line-height: 1.56; }
  .transcript p { margin-bottom: .82em; }
  .updates-cta { margin-top: 27px; padding-top: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .story-sticky { position: relative; }
  .story-content { margin-top: 0; }
  .threshold-track { display: none; }
  .edmund-presence, .threshold-warmth, .route-line { display: none; }
  .updates-dialog { transition: none; }
  .updates-dialog::backdrop { transition: none; }
  .hero-content, .scroll-invitation, .frame, .compass-bottom { opacity: 1; transform: none; filter: none; }
  .motion-fallback { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 36%; filter: saturate(.82) contrast(1.02); }
  .scroll-invitation svg { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}