@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root {
  --ink: #0a0a11;
  --ink-soft: #14131d;
  --paper: #f2eee7;
  --paper-deep: #ddd5cb;
  --wine: #822e3f;
  --moon: #b9c6e6;
  --line: rgba(242, 238, 231, .19);
  --sans: 'DM Sans', Arial, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.45; }
a { color: inherit; text-underline-offset: 4px; }
button, a { -webkit-tap-highlight-color: transparent; }
img, video { max-width: 100%; }
.skip-link { position: fixed; z-index: 20; left: 16px; top: -60px; padding: 9px 13px; background: var(--paper); color: var(--ink); border-radius: 2px; }
.skip-link:focus { top: 16px; }

.site-header { align-items: center; display: flex; justify-content: space-between; left: 0; padding: 20px 4.7vw; position: absolute; right: 0; top: 0; z-index: 5; }
.brand { align-items: center; display: inline-flex; font-size: 18px; font-weight: 600; gap: 9px; letter-spacing: -.04em; text-decoration: none; }
.brand img { border-radius: 9px; display: block; }
nav { align-items: center; display: flex; gap: 24px; }
nav a { color: rgba(242,238,231,.8); font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
nav a:hover { color: white; }
.header-cta { border: 1px solid var(--line); padding: 9px 11px; }

.hero { align-items: end; display: grid; min-height: max(790px, 100svh); overflow: hidden; position: relative; }
.hero-stage, .hero-scrim { inset: 0; position: absolute; }
 .hero-stage { background: radial-gradient(ellipse at 72% 45%, #292333, #15131c 48%, #09090e 100%); overflow: hidden; }
.hero-slide { display: block; height: 100%; inset-block: 0; left: 73%; object-fit: contain; object-position: center; opacity: 0; position: absolute; transform: translateX(-50%); transition: opacity .55s ease; width: 54%; z-index: 1; }
.hero-slide.is-active { opacity: 1; }
.hero-scrim { background: linear-gradient(90deg, rgba(6,6,12,.5), transparent 50%); pointer-events: none; z-index: 1; }
.hero-copy { align-items: flex-start; display: flex; flex-direction: column; justify-content: flex-end; max-width: 50%; padding: 148px 3vw 96px 7vw; position: relative; z-index: 2; }
.eyebrow { color: var(--moon); font-family: var(--mono); font-size: 10px; letter-spacing: .13em; line-height: 1.3; margin: 0 0 18px; text-transform: uppercase; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.055em; line-height: .94; margin: 0; }
h1 { font-size: clamp(52px, 5.6vw, 91px); max-width: 690px; }
h1 em, h2 em { color: #d4dcf0; font-weight: inherit; }
.hero-intro { color: rgba(242,238,231,.76); font-size: 16px; line-height: 1.55; margin: 30px 0 0; max-width: 420px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 24px; margin-top: 37px; }
.button { align-items: center; border: 1px solid transparent; display: inline-flex; font-size: 12px; font-weight: 600; justify-content: center; letter-spacing: .04em; min-height: 46px; padding: 0 18px; text-decoration: none; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: white; }
.text-link { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.text-link:hover { color: var(--moon); }
.hero-note { border-left: 1px solid rgba(185,198,230,.55); color: rgba(242,238,231,.6); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; line-height: 1.65; margin: 49px 0 0; padding-left: 11px; text-transform: uppercase; }
.character-card video { display: block; height: 100%; object-fit: contain; width: 100%; }
.hero-character { bottom: 57px; display: grid; gap: 4px; margin: 0; position: absolute; right: 5vw; text-align: right; z-index: 2; }
.chapter, .portrait-line { color: rgba(242,238,231,.64); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.portrait-name { font-family: var(--serif); font-size: 42px; letter-spacing: -.05em; line-height: 1; margin: 2px 0 4px; }
.hero-character a { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; margin-top: 13px; text-transform: uppercase; }
.hero-controls { align-items: center; bottom: 24px; display: flex; gap: 13px; left: 5vw; position: absolute; z-index: 3; }
.hero-dots { display: flex; gap: 8px; }
.hero-dot, .hero-pause { align-items: center; background: transparent; border: 0; color: var(--paper); cursor: pointer; display: inline-flex; font-family: var(--mono); justify-content: center; min-height: 44px; min-width: 28px; padding: 0; position: relative; }
.hero-dot::after { background: rgba(242,238,231,.5); bottom: 7px; content: ''; height: 1px; left: 4px; position: absolute; right: 4px; transition: background .2s, transform .2s; }
.hero-dot:hover::after, .hero-dot.is-active::after { background: var(--paper); transform: scaleX(1.45); }
.hero-dot span { font-size: 9px; letter-spacing: .06em; opacity: .65; }
.hero-dot.is-active span { opacity: 1; }
.hero-pause { border: 1px solid rgba(242,238,231,.36); border-radius: 50%; font-size: 13px; height: 32px; min-height: 32px; min-width: 32px; transition: background .2s; width: 32px; }
.hero-pause:hover { background: rgba(242,238,231,.16); }
.sr-only { clip: rect(0,0,0,0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

.promise { align-items: center; background: var(--paper); color: var(--ink); display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 35px; padding: 43px 8vw; }
.promise p { font-family: var(--serif); font-size: clamp(21px,2.3vw,34px); letter-spacing: -.045em; line-height: 1.06; margin: 0; }
.promise p:first-child { color: #6e6662; }
.promise a { border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; padding-bottom: 4px; text-decoration: none; text-transform: uppercase; white-space: nowrap; }

.characters { align-items:center; display:grid; gap:clamp(20px,2vw,40px); grid-template-columns:minmax(260px,.40fr) minmax(0,2.60fr); min-height:100svh; padding:32px 3vw; scroll-margin-top:0; }
.section-intro { display:block; margin:0; max-width:330px; }
.section-intro .eyebrow { padding-top:0; }
h2 { font-size: clamp(46px,5.6vw,80px); }
.section-intro h2 { font-size:clamp(44px,3.55vw,61px); }
.section-intro > p:last-child { color: rgba(242,238,231,.65); font-size:14px; line-height:1.6; margin:27px 0 0; max-width:340px; }
.character-grid { display:grid; gap:10px; grid-template-columns:repeat(5,1fr); margin:0; max-width:none; }
.character-card { aspect-ratio:9/16; background:#20202b; color:white; display:block; overflow:hidden; position:relative; text-decoration:none; }
.character-card::after { background: linear-gradient(0deg, rgba(3,3,8,.86) 1%, rgba(3,3,8,.08) 54%, rgba(3,3,8,.05)); content: ''; inset: 0; position: absolute; transition: background .25s; }
.character-card video { object-position: center; transition: filter .3s ease; }
.character-card:hover video, .character-card:focus-visible video { filter: brightness(1.03); }
.character-card:hover::after { background: linear-gradient(0deg, rgba(3,3,8,.92), rgba(3,3,8,.01) 67%); }
.index { font-family: var(--mono); font-size: 10px; left: 15px; letter-spacing: .1em; position: absolute; top: 15px; z-index: 1; }
.card-copy { bottom: 17px; display: flex; flex-direction: column; left: 15px; position: absolute; right: 14px; z-index: 1; }
.card-copy small { color: var(--moon); font-family: var(--mono); font-size: 8px; letter-spacing: .09em; margin-bottom: 7px; }
.card-copy strong { font-family: var(--serif); font-size: 33px; font-weight: 500; letter-spacing: -.05em; line-height: .9; }
.card-copy em { color: rgba(255,255,255,.72); font-size: 11px; font-style: normal; line-height: 1.35; margin-top: 9px; }
.card-copy b { font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: .07em; margin-top: 18px; opacity: 0; text-transform: uppercase; transition: opacity .2s; }
.character-card:hover .card-copy b, .character-card:focus-visible .card-copy b { opacity: 1; }
.luna video { object-position: 55% center; }
.mara video { object-position: 48% center; }
.kai video { object-position: 52% center; }

.experience { background: #181720; display: grid; grid-template-columns: 1fr 1fr; min-height: 680px; padding: 127px 12vw; }
.experience-sticky { align-self: start; position: sticky; top: 70px; }
.experience-sticky h2 { font-size: clamp(44px,4.8vw,70px); }
.experience-sticky > p:last-child { color: rgba(242,238,231,.63); font-size: 14px; line-height: 1.65; margin: 29px 0 0; max-width: 360px; }
.experience-steps { border-top: 1px solid var(--line); list-style: none; margin: 3px 0 0; padding: 0; }
.experience-steps li { border-bottom: 1px solid var(--line); display: grid; gap: 36px; grid-template-columns: 45px 1fr; padding: 37px 0; }
.experience-steps span { color: var(--moon); font-family: var(--mono); font-size: 10px; }
.experience-steps h3 { font-family: var(--serif); font-size: 31px; font-weight: 500; letter-spacing: -.04em; line-height: 1.02; margin: 0; }
.experience-steps p { color: rgba(242,238,231,.62); font-size: 13px; line-height: 1.6; margin: 13px 0 0; max-width: 360px; }

.beta { background: linear-gradient(127deg, #692a42, #222a4c 130%); min-height: 550px; padding: 118px 12vw; position: relative; }
.beta::after { border: 1px solid rgba(242,238,231,.18); border-radius: 50%; content: ''; height: min(54vw,680px); position: absolute; right: -17vw; top: -21vw; width: min(54vw,680px); }
.beta > * { position: relative; z-index: 1; }
.beta h2 { font-size: clamp(49px,5.8vw,82px); }
.beta > p:not(.eyebrow):not(.beta-note) { color: rgba(242,238,231,.8); font-size: 15px; line-height: 1.6; margin: 28px 0 31px; max-width: 430px; }
.beta-note { color: rgba(242,238,231,.56); font-family: var(--mono); font-size: 9px; letter-spacing: .07em; margin: 14px 0 0; text-transform: uppercase; }

.faq { background: var(--paper); color: var(--ink); display: grid; gap: 80px; grid-template-columns: .86fr 1.14fr; padding: 115px 12vw 122px; }
.faq .eyebrow { color: var(--wine); }
.faq h2 { font-size: clamp(42px,4.5vw,65px); }
.faq-list { border-top: 1px solid rgba(10,10,17,.26); }
details { border-bottom: 1px solid rgba(10,10,17,.26); padding: 21px 0; }
summary { cursor: pointer; font-family: var(--serif); font-size: 24px; letter-spacing: -.035em; list-style: none; padding-right: 28px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-family: var(--sans); font-size: 23px; font-weight: 300; position: absolute; right: 0; top: -2px; }
details[open] summary::after { content: '–'; }
details p { color: #4d4745; font-size: 13px; line-height: 1.6; margin: 14px 36px 2px 0; }

footer { background: #0a0a11; color: rgba(242,238,231,.7); display: grid; gap: 30px; grid-template-columns: 1.2fr .7fr .7fr; padding: 60px 8vw; }
footer .brand { color: var(--paper); }
footer p { font-size: 13px; margin: 15px 0 0; }
.footer-small { color: rgba(242,238,231,.42); font-family: var(--mono); font-size: 8px; letter-spacing: .07em; line-height: 1.7; text-transform: uppercase; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links p, .footer-links a, address { font-family: var(--mono); font-size: 9px; font-style: normal; letter-spacing: .07em; margin: 0; text-decoration: none; text-transform: uppercase; }
.footer-links p { color: var(--moon); margin-bottom: 6px; }
.footer-links a:hover { color: white; }
address { color: rgba(242,238,231,.46); line-height: 1.65; }

:focus-visible { outline: 2px solid var(--moon); outline-offset: 3px; }
@media (max-width: 1000px) { .hero-copy { padding-left: 7vw; } .character-grid { grid-template-columns: repeat(3, 1fr); } .section-intro { grid-template-columns: .7fr 1.3fr; } .section-intro > p:last-child { grid-column: 2; } }
@media (max-width: 720px) { .site-header { padding: 16px 20px; } nav a:not(.header-cta) { display: none; } .header-cta { font-size: 9px; } .hero { display: flex; flex-direction: column-reverse; min-height: 0; } .hero-copy { min-height: 560px; padding: 77px 25px 58px; } h1 { font-size: clamp(50px,15vw,70px); } .hero-portrait { height: 78vh; min-height: 490px; } .hero-portrait video { object-position: 54% 43%; } .hero-portrait figcaption { bottom: 26px; left: 24px; } .hero-edge-label { display: none; } .promise { display: block; padding: 39px 25px; } .promise p + p { margin-top: 12px; } .promise a { display: inline-block; margin-top: 25px; } .characters { padding: 79px 20px 82px; } .section-intro { display: block; margin-bottom: 38px; } .section-intro > p:last-child { margin-top: 25px; } .character-grid { gap: 8px; grid-template-columns: repeat(2, 1fr); } .character-card:last-child { grid-column: 1 / -1; max-width: calc(50% - 4px); } .card-copy strong { font-size: 29px; } .card-copy em { display: none; } .card-copy b { opacity: 1; } .experience { display: block; padding: 78px 25px; } .experience-sticky { position: static; } .experience-steps { margin-top: 48px; } .beta { min-height: 500px; padding: 79px 25px; } .beta::after { height: 94vw; right: -42vw; top: -24vw; width: 94vw; } .faq { display: block; padding: 79px 25px; } .faq-list { margin-top: 48px; } footer { display: block; padding: 49px 25px; } .footer-links, address { margin-top: 38px; } }
@media (max-width: 720px) {
  .hero { display: grid; min-height: 100svh; }
  .hero-copy { min-height: 0; padding: 125px 25px 244px; }
  .hero-slide { object-fit: contain; object-position: center; }
  .hero-character { bottom: 95px; left: 25px; right: 25px; text-align: left; }
  .hero-character .portrait-name { font-size: 36px; }
  .hero-controls { bottom: 17px; left: 21px; }
  .hero-dot { min-width: 30px; }
}
@media (max-width: 1100px) {
  .characters { display:block; min-height:auto; padding:92px 6vw; }
  .section-intro { margin:0 0 42px; max-width:620px; }
  .character-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 720px) {
  .site-header { padding:calc(16px + env(safe-area-inset-top)) 20px 16px; }
  .header-cta { align-items:center; display:inline-flex; min-height:44px; padding:0 12px; }
  .hero-character { bottom:calc(95px + env(safe-area-inset-bottom)); }
  .hero-controls { bottom:calc(17px + env(safe-area-inset-bottom)); }
  .characters { padding:79px 20px 82px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .hero-pause { display: none; } }

/* Keep the original video frame visible and the story entry accessible on phones. */
@media (max-width: 720px) {
  .site-header nav { gap: 10px; }
  .site-header nav a.landing-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 9px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-stage { position: relative; inset: auto; width: 100%; height: min(130vw, 68svh); min-height: 310px; margin-top: calc(76px + env(safe-area-inset-top)); }
  .hero-slide { left: 50%; width: 100%; height: 100%; }
  .hero-scrim { display: none; }
  .hero-copy { max-width: none; min-height: 0; padding: 26px 25px 20px; }
  .hero-copy h1 { font-size: clamp(40px, 11vw, 65px); }
  .hero-intro { margin-top: 20px; }
  .hero-actions { margin-top: 24px; }
  .hero-note { margin-top: 26px; }
  .hero-character { position: static; padding: 10px 25px 4px; text-align: left; }
  .hero-controls { position: static; padding: 0 21px 20px; }
}
@media (max-width: 360px) { .site-header { padding-left: 12px; padding-right: 12px; } .site-header nav { gap: 6px; } .site-header .brand { font-size: 16px; } .header-cta { padding: 0 7px; } }