:root{color-scheme:dark;font-family:Geist,system-ui,sans-serif;background:#0a1022;color:#f5f6ff;--muted:#c2c8db;--border:#414b69;--gold:#ffdc9d}*{box-sizing:border-box}body{margin:0}a{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.wrap{width:min(100% - 32px,1160px);margin-inline:auto}header,nav,footer,.actions,.brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap}header{justify-content:space-between;padding-block:16px}.brand{text-decoration:none;font-size:1.25rem;font-weight:600}.brand img{border-radius:8px}.brand small{display:block;font-size:.75rem;color:var(--muted)}nav a{text-decoration:none}nav a:hover{text-decoration:underline}.skip{position:absolute;left:16px;top:-100px}.skip:focus{top:16px;z-index:5}.film{position:relative}.film.scrub{height:220svh}.stage{position:relative;isolation:isolate;min-height:640px;display:grid;align-items:center;background:#101a34;overflow:hidden}.scrub .stage{position:sticky;top:0;min-height:min(780px,100svh)}.backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.stage::after{content:"";position:absolute;inset:0;background:#070d20a8;z-index:-1}video.backdrop{opacity:0}.scrub video.backdrop{opacity:1}.hero{padding-block:48px}.eyebrow{color:var(--gold);font-size:.875rem;font-weight:600;letter-spacing:.06em}h1,h2,h3,p{margin:0 0 16px;text-wrap:pretty}h1{font-size:3.75rem;line-height:1;font-weight:600;letter-spacing:-.05em}h2{font-size:3rem;line-height:1;font-weight:600;letter-spacing:-.035em}h3{font-size:1.25rem}p,li{line-height:1.5;color:var(--muted)}.hero p:not(.eyebrow){font-size:1.25rem;color:#fff}.actions{margin-top:32px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:var(--gold);color:#151323;border:1px solid transparent;border-radius:8px;padding:8px 12px;line-height:1.5;font-family:inherit;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s cubic-bezier(.22,1,.36,1)}.button:hover{background:#fff0c9}.button:active{transform:scale(.98)}.secondary{background:#181d38dc;color:white;border-color:var(--border)}.secondary:hover{background:#293355}.section{padding-block:64px;border-bottom:1px solid var(--border)}.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:center}.statement{padding-block:48px}.statement p{font-size:2.25rem;line-height:2.5rem;color:var(--gold);font-weight:600}.preview,form,figure{border:1px solid var(--border);border-radius:16px;background:#151e38;padding:24px;margin:0}.preview p{display:flex;justify-content:space-between;gap:8px}.preview span,figcaption{color:var(--gold);font-size:.875rem}figure img{display:block;width:100%;height:auto;border-radius:8px}figcaption{padding-top:8px}details{border-bottom:1px solid var(--border);padding-block:16px}summary{cursor:pointer;font-weight:600}details p{margin-top:12px;margin-bottom:0}form{align-self:stretch}form h2{font-size:1.875rem;line-height:2.25rem}label{display:block;margin-bottom:16px}input{display:block;width:100%;padding:12px;margin-top:8px;border:1px solid var(--border);border-radius:8px;background:#0a1022;color:white;font:inherit}footer{padding-block:32px;justify-content:space-between;color:var(--muted)}@media(max-width:700px){.split{grid-template-columns:1fr}.section{padding-block:40px}h1,h2{font-size:2.25rem;line-height:2.5rem}.stage{min-height:480px}.statement p{font-size:1.875rem;line-height:2.25rem}}@media(prefers-reduced-motion:reduce){.button{transition:none}.film.scrub{height:auto}.scrub video.backdrop{display:none}}

header.wrap { gap: 12px 28px; padding-block: 10px }
header .brand { gap: 12px }
header .brand img { width: clamp(58px, 7vw, 86px); height: auto; border-radius: 20% }
header nav { gap: clamp(12px, 4vw, 32px) }
.hero { padding-block: 32px }
.hero-mark {
  display: block;
  width: clamp(120px, 15vw, 190px);
  height: auto;
  border-radius: 20%;
  box-shadow: 0 0 48px #259aff3a;
  margin-bottom: 22px;
}
.film.has-chapter .hero-mark { display: none }
.film.has-chapter .hero h1 { display: block; position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden }
#journey {
  padding-block: clamp(48px, 8vw, 100px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(24px, 7vw, 100px);
}
#journey h2 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(2.25rem, 6vw, 4.5rem) }
.journey-steps { display: block; margin: 0; padding-inline-start: 30px }
.journey-steps li { padding: 14px 0 14px 10px; border-bottom: 1px solid var(--border) }
.journey-steps li::marker { color: var(--gold); font-weight: 600 }
.journey-steps strong { display: block }
@media (max-width: 700px) {
  #journey { grid-template-columns: 1fr }
  .film.has-chapter .hero .actions { gap: 8px }
  .film.has-chapter .hero .button { font-size: .875rem }
}



.film .stage { display: block; min-height: 0; overflow: visible; background: transparent }
.film .stage::after { content: none }
.film .hero { padding-block: clamp(24px, 5vw, 64px) }
.film-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
  align-items: center;
  gap: 32px;
  padding-block: 20px 38px;
}
.film-layout video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #06132e;
}
.scene-note {
  position: relative;
  padding: 20px;
  border-inline-start: 2px solid var(--gold);
  border-radius: 0 12px 12px 0;
  background: #6f95d01e;
  backdrop-filter: blur(12px);
}
.scene-note::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 32px;
  border-top: 1px solid var(--gold);
}
.scene-note h2 { font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.1 }
.scene-note p:last-child { margin-bottom: 0 }
@media (max-width: 700px) {
  .film-layout { grid-template-columns: 1fr; gap: 14px }
  .scene-note { border-inline-start: 0; border-top: 2px solid var(--gold); border-radius: 0 0 12px 12px }
  .scene-note::before { display: none }
}

.film-frame { position: relative; min-width: 0 }
.scene-marker { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.scene-marker path, .scene-marker circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 2px #06132e);
}
.scene-marker[hidden] { display: none }
.scene-note::before { content: none }


/* Keep the scene guide in its own row below the picture. */
.film-layout { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 }
.film .stage { background: #06132e }
.film-frame { width: 100%; min-height: 0 }
.film-layout video { border-radius: 0; object-fit: contain }
.scene-note { width: min(100%, 1160px); margin-inline: auto; padding: 12px 20px }
.scene-note h2 { font-size: clamp(1.1rem, 2vw, 1.5rem) }
.scene-note .eyebrow, .scene-note h2 { margin-bottom: 4px }

.story-copy > .hero { padding-block: clamp(32px, 7vw, 72px) }



body.film-backdrop { isolation: isolate }
.film-backdrop .scroll-film { height: calc(100svh - 110px) }
.film-backdrop .stage { position: static; background: transparent }
.film-backdrop .film-frame {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #06132e;
}
.film-backdrop .film-frame video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.film-backdrop .film-closing video { object-fit: contain }
.film-backdrop .scene-marker { display: none }
.film-backdrop header { background: #08122688; padding-inline: 12px }
.film-backdrop header .brand img { width: 58px; border-radius: 22%; box-shadow: 0 0 16px #259aff55 }
.film-backdrop .scene-note {
  position: fixed;
  inset: auto 0 0;
  z-index: 1;
  width: 100%;
  max-width: none;
  padding: 12px 20px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, #08122685);
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.film-backdrop .scene-note .eyebrow, .film-backdrop #scene-detail { display: none }
.film-backdrop .scene-note h2 { color: #ffffffc9; font-size: .9375rem; text-shadow: 0 1px 4px #000 }
.film-backdrop .film-closing .scene-note h2 { visibility: hidden }
.film-play { font-size: .875rem; pointer-events: auto }
.film-play[hidden] { display: none }
.film-backdrop .story-copy {
  position: relative;
  width: min(640px, calc(100% - 32px));
  margin-inline: auto 0;
  padding: 8px 4px 76px;
}
.film-backdrop .story-copy > .hero,
.film-backdrop .story-copy > .section,
.film-backdrop footer {
  background: #08122688;
  border-radius: 12px;
  padding-inline: clamp(16px, 3vw, 34px);
  margin-bottom: 30vh;
}
.film-backdrop .story-copy .split { grid-template-columns: 1fr }
.film-backdrop footer { margin-bottom: 0 }
@media (max-width: 760px) {
  .film-backdrop .story-copy { margin-inline: auto }
}

.film-backdrop .story-copy h1 { font-size: clamp(2rem, 5vw, 3.25rem) }
.film-backdrop .story-copy h2 { font-size: clamp(1.65rem, 3vw, 2.25rem) }
.film-backdrop .story-copy p,
.film-backdrop .story-copy li { color: #e7eeffcf; font-size: .9375rem }
.film-backdrop .story-copy h1,
.film-backdrop .story-copy h2,
.film-backdrop .story-copy p,
.film-backdrop .story-copy li { text-shadow: 0 1px 4px #040a19 }

.film-backdrop header {
  background: transparent;
}
header .brand img {
  display: block;
  width: clamp(64px, 7vw, 92px);
  height: auto;
  border-radius: 22%;
  mask-image: radial-gradient(ellipse closest-side, black 82%, transparent 100%);
}
.film-backdrop header .brand img {
  width: clamp(64px, 7vw, 92px);
  filter: drop-shadow(0 0 7px #53b6ff71);
}

header .brand {
  position: fixed;
  inset: max(10px, env(safe-area-inset-top)) auto auto max(12px, env(safe-area-inset-left));
  z-index: 4;
}
header.wrap {
  min-height: 72px;
  padding-inline-start: 64px;
  justify-content: flex-end;
}
header .brand img,
.film-backdrop header .brand img {
  width: clamp(48px, 5vw, 66px);
}
.film-backdrop .story-copy > .hero,
.film-backdrop .story-copy > .section,
.film-backdrop footer { background: #08122672 }
.film-backdrop .story-copy h1 { font-size: clamp(1.55rem, 3.1vw, 2.3rem); line-height: 1.12 }
.film-backdrop .story-copy h2 { font-size: clamp(1.18rem, 2.2vw, 1.6rem); line-height: 1.2 }
.film-backdrop .story-copy p,
.film-backdrop .story-copy li { color: #e7eeffc2; font-size: .9rem }
.film-backdrop .scene-note h2 { font-size: .875rem; color: #ffffffbd }


.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  justify-content: space-between;
  gap: 6px 20px;
  padding: 8px clamp(14px, 4vw, 48px);
  background: #081226b8;
  border-bottom: 1px solid #a2b5d443;
  backdrop-filter: blur(12px);
}
.film-backdrop .site-header { background: #081226b8; padding-inline: clamp(14px, 4vw, 48px) }
.site-header .brand { position: static; gap: 6px; font-size: 1.1rem }
.site-header nav { gap: clamp(10px, 3vw, 28px) }
.site-header nav a { font-size: .875rem; color: #eef2ffd9 }
.header-cta {
  border: 1px solid #ffdc9d80;
  border-radius: 999px;
  padding: 8px 13px;
  color: var(--gold);
  text-decoration: none;
  font-size: .875rem;
}
.scroll-story :is(section, form)[id] { scroll-margin-top: 120px }
.chapter-rail {
  position: fixed;
  z-index: 4;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 2px;
  padding: 6px 10px 6px 16px;
  border: 1px solid #8296be44;
  border-radius: 10px;
  background: #081226bc;
  backdrop-filter: blur(10px);
}
.chapter-progress {
  position: absolute;
  inset: 9px auto 9px 6px;
  width: 2px;
  background: #9ba9cb44;
}
.chapter-progress::after {
  content: "";
  display: block;
  height: calc(var(--page-progress, 0) * 100%);
  background: var(--gold);
}
.chapter-rail a {
  padding: 5px 3px;
  font-size: .75rem;
  color: #eef2ffca;
  text-decoration: none;
}
.chapter-rail a[aria-current] { color: var(--gold); font-weight: 650 }
.chapter-rail[hidden] { display: none }
@media (max-width: 760px) {
  .site-header nav { order: 3; width: 100%; justify-content: center }
  .chapter-rail {
    inset: auto 50% 58px auto;
    transform: translateX(50%);
    grid-auto-flow: column;
    padding: 7px 9px 3px;
    gap: 7px;
  }
  .chapter-progress { inset: 3px 9px auto; width: auto; height: 2px }
  .chapter-progress::after { height: 100%; width: calc(var(--page-progress, 0) * 100%) }
  .film-backdrop .story-copy { padding-bottom: 120px }
}