:root {
  --night: #070a18;
  --night-2: #0c1330;
  --ink: #0b0d19;
  --paper: #f7f2e9;
  --white: #fffdf8;
  --gold: #b6eaff;
  --gold-deep: #b6eaff;
  --garnet: #9d2d48;
  --aqua: #78d8df;
  --muted: #aab0c7;
  --line: rgba(255,255,255,.15);
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1240px;
  --sign-accent: #d34c98;
  --sign-soft: #f8d5e9;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--white); font: 1rem/1.65 var(--sans); overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }
button, select { font: inherit; }
blockquote, figure { margin: 0; }
h1, h2, h3, p { text-wrap: balance; }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--paper); color: var(--ink); padding: .75rem 1rem; border-radius: 999px; }
.skip-link:focus { top: 1rem; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 30; min-height: 76px; display: grid; grid-template-columns: minmax(190px,1fr) auto minmax(90px,1fr); align-items: center; gap: 1.5rem; padding: .75rem max(1.25rem,calc((100vw - var(--max))/2)); border-bottom: 1px solid transparent; transition: .3s ease; }
.site-header.scrolled, .solid-header { background: rgba(7,10,24,.93); border-color: var(--line); backdrop-filter: blur(18px); }
.brand { display: inline-grid; justify-self: start; text-decoration: none; line-height: 1.05; }
.brand-kicker { color: var(--gold); text-transform: uppercase; letter-spacing: .2em; font-size: .68rem; font-weight: 800; }
.brand-title { font: 1.45rem var(--serif); }
.nav { display: flex; align-items: center; gap: clamp(1rem,2.5vw,2.3rem); }
.nav a, .header-action { color: rgba(255,255,255,.84); text-decoration: none; font-size: .86rem; }
.nav a:hover, .nav a:focus-visible, .header-action:hover, .header-action:focus-visible { color: var(--gold); }
.header-action { justify-self: end; padding: .48rem .9rem; border: 1px solid rgba(150,222,255,.52); border-radius: 999px; }

.eyebrow, .mini-label { margin: 0 0 1rem; color: var(--gold); text-transform: uppercase; letter-spacing: .18em; font-size: .74rem; font-weight: 800; }
h2 { margin: 0; font: 500 clamp(2.75rem,5vw,5rem)/1.02 var(--serif); letter-spacing: -.035em; }
.button { min-height: 47px; display: inline-flex; align-items: center; justify-content: center; padding: .72rem 1.15rem; border: 0; border-radius: 999px; text-decoration: none; cursor: pointer; font-size: .86rem; font-weight: 750; letter-spacing: .025em; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #241604; background: linear-gradient(135deg,#b6eaff,var(--gold)); box-shadow: 0 10px 34px rgba(150,222,255,.18); }
.button-ghost { border: 1px solid rgba(255,255,255,.4); background: rgba(7,10,24,.35); }
.button-dark { color: var(--gold); background: var(--ink); }

.home-hero { min-height: 780px; display: grid; grid-template-columns: minmax(0,.82fr) minmax(520px,1.18fr); gap: clamp(2rem,5vw,5rem); align-items: center; padding: 8.5rem max(1.5rem,calc((100vw - var(--max))/2)) 5rem; background: radial-gradient(circle at 18% 20%,rgba(32,116,139,.25),transparent 28%),linear-gradient(145deg,#070a18,#0a1029); isolation: isolate; position: relative; }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; background-image: radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(150,222,255,.8) 0 1px,transparent 1.5px); background-size: 101px 101px,157px 157px; mask-image: linear-gradient(to right,black,transparent 82%); }
.home-hero-copy { max-width: 620px; }
.home-hero h1 { margin: 0; font: 500 clamp(4.2rem,7.4vw,8rem)/.84 var(--serif); letter-spacing: -.055em; }
.home-hero h1 em { color: var(--gold); font-size: .82em; font-weight: 400; }
.hero-lede { max-width: 600px; margin: 2rem 0 0; color: #d6d9e6; font: clamp(1.16rem,1.7vw,1.5rem)/1.52 var(--serif); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero-note { margin: 2.4rem 0 0; color: #8e96b0; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; }
.hero-map { position: relative; overflow: hidden; border: 1px solid rgba(150,222,255,.28); background: #090c20; box-shadow: 0 36px 110px rgba(0,0,0,.46); }
.hero-map img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.hero-map figcaption, .book-cover figcaption { position: absolute; inset: auto .75rem .75rem; padding: .58rem .72rem; color: #b6eaff; background: rgba(7,10,24,.79); font-size: .76rem; backdrop-filter: blur(10px); }

.watch-section { display: grid; grid-template-columns: minmax(300px,.65fr) minmax(0,1.35fr); gap: clamp(3rem,7vw,7rem); align-items: center; padding: clamp(6rem,10vw,9rem) max(1.5rem,calc((100vw - var(--max))/2)); background: linear-gradient(135deg,#10172d,#0b1024); }
.watch-copy { max-width: 520px; }
.watch-copy p:last-child { color: #bbc1d1; }
.video-shell { position: relative; padding: .55rem; border: 1px solid rgba(150,222,255,.35); background: linear-gradient(145deg,rgba(150,222,255,.1),transparent); box-shadow: 0 32px 100px rgba(0,0,0,.42); }
.video-shell video { width: 100%; aspect-ratio: 16/9; background: #000; }

.discover-section { color: var(--ink); background: var(--paper); padding: clamp(6rem,10vw,9rem) max(1.5rem,calc((100vw - var(--max))/2)); }
.discover-section .eyebrow, .discover-section .mini-label { color: var(--garnet); }
.section-heading { max-width: 760px; margin: 0 auto 3.5rem; text-align: center; }
.section-heading > p:last-child { color: #5d6170; margin: 1rem 0 0; }
.finder-grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.birthday-card { padding: clamp(1.5rem,3vw,2.4rem); border: 1px solid #d7ccbc; background: #fffdf8; box-shadow: 0 18px 55px rgba(32,24,20,.08); }
.pal-card { background: #f4ecdf; }
.finder-heading { display: flex; gap: .9rem; align-items: center; }
.finder-heading > span { display: grid; place-items: center; width: 52px; aspect-ratio: 1; border-radius: 50%; color: var(--garnet); background: #f5e4e6; font-size: 1.3rem; }
.finder-heading .mini-label { margin: 0; font-size: .64rem; }
.finder-heading h3 { margin: .15rem 0 0; font: 500 1.55rem var(--serif); }
.date-fields { display: grid; grid-template-columns: 1.4fr .8fr; gap: .7rem; margin: 1.6rem 0 1rem; }
.date-fields label { display: grid; gap: .35rem; color: #68645d; text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; font-weight: 750; }
.date-fields select { width: 100%; min-height: 48px; padding: 0 .75rem; border: 1px solid #cfc3b2; border-radius: 0; color: #222633; background: #fff; font-size: .9rem; text-transform: none; letter-spacing: 0; }
.birthday-card .button { width: 100%; }
.finder-result { margin-top: 1rem; padding: 1.1rem; display: grid; grid-template-columns: 62px 1fr; gap: 1rem; align-items: center; border: 1px solid color-mix(in srgb,var(--result-accent),transparent 55%); background: color-mix(in srgb,var(--result-accent),white 88%); }
.finder-result[hidden] { display: none; }
.result-symbol { color: var(--result-accent); font: 3rem/1 var(--serif); text-align: center; }
.finder-result .mini-label { margin: 0; color: var(--result-accent); font-size: .6rem; }
.finder-result h3 { margin: .15rem 0 0; font: 600 1.5rem var(--serif); }
.finder-result p:not(.mini-label) { margin: .1rem 0 .5rem; color: #5f5c59; font-size: .82rem; }
.finder-result a { color: var(--result-accent); font-size: .82rem; font-weight: 800; }
.all-signs { max-width: 1100px; margin: 4rem auto 0; padding-top: 2rem; border-top: 1px solid #d3c7b7; }
.all-signs > p { color: #777063; text-align: center; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; }
.sign-link-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.sign-link-grid a { min-height: 44px; display: inline-flex; align-items: center; gap: .42rem; padding: .55rem .8rem; border: 1px solid #cabdac; border-radius: 999px; color: #343640; text-decoration: none; font-size: .8rem; font-weight: 700; transition: .2s ease; }
.sign-link-grid a span { color: var(--sign-accent,var(--tile-accent)); font-size: 1.15rem; }
.sign-link-grid a:hover, .sign-link-grid a:focus-visible { border-color: var(--sign-accent,var(--tile-accent)); color: var(--sign-accent,var(--tile-accent)); transform: translateY(-1px); }

.book-feature { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(390px,.9fr); gap: clamp(3rem,7vw,7rem); align-items: center; padding: clamp(6rem,10vw,9rem) max(1.5rem,calc((100vw - var(--max))/2)); background: radial-gradient(circle at 86% 10%,rgba(94,59,137,.25),transparent 28%),var(--night); }
.book-cover { position: relative; overflow: hidden; border: 1px solid rgba(150,222,255,.34); box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.book-cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.book-copy { max-width: 620px; }
.book-copy h2 { font-size: clamp(2.55rem,4vw,4.1rem); }
.book-copy > p:not(.eyebrow):not(.book-lede):not(.book-promise) { color: #bec4d4; }
.book-lede { color: #f2edf4; font: 1.16rem/1.55 var(--serif); }
.book-copy strong { color: var(--gold); }
.book-promise { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(150,222,255,.3); color: var(--gold); font: 1.05rem/1.5 var(--serif); }

.contact-section { color: var(--ink); background: var(--paper); display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(3rem,8vw,8rem); align-items: center; padding: clamp(6rem,10vw,9rem) max(1.5rem,calc((100vw - var(--max))/2)); }
.contact-section .eyebrow, .contact-section .mini-label { color: var(--garnet); }
.contact-copy { max-width: 760px; }
.contact-copy > p:last-child { max-width: 660px; color: #575b68; }
.contact-card { padding: 2rem; border: 1px solid #d3c7b7; background: #fffdf8; box-shadow: 0 18px 55px rgba(32,24,20,.08); }
.contact-card .mini-label { margin-bottom: .4rem; }
.contact-card h3 { margin: 0 0 1rem; font: 500 2rem var(--serif); }
.contact-card > a { display: block; margin: .35rem 0; color: var(--garnet); }
.social-links { display: flex; gap: .7rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid #ddd2c2; }
.social-links a { color: #555966; font-size: .82rem; }
.footer { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem max(1.5rem,calc((100vw - var(--max))/2)); color: #858da8; background: #050711; border-top: 1px solid var(--line); font-size: .74rem; }
.footer a { text-decoration: none; }

/* Sign landing page */
.sign-page { background: var(--paper); color: var(--ink); }
.sign-hero { min-height: 650px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; padding: 9rem max(1.5rem,calc((100vw - var(--max))/2)) 5rem; color: var(--white); background: radial-gradient(circle at 78% 38%,color-mix(in srgb,var(--sign-accent),transparent 45%),transparent 30%),linear-gradient(145deg,#070a18,#101632); }
.sign-hero-copy { max-width: 740px; }
.back-link { display: inline-block; margin-bottom: 2.3rem; color: #b8bfd3; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.24); font-size: .82rem; }
.sign-hero .eyebrow { color: var(--sign-soft); }
.sign-hero h1 { margin: 0; font: 500 clamp(5rem,9vw,9rem)/.8 var(--serif); letter-spacing: -.06em; }
.sign-hero h1 em { display: block; margin-top: 1rem; color: var(--sign-soft); font-size: .26em; font-weight: 400; letter-spacing: .01em; }
.sign-role { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 2rem 0; color: #d9ddea; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; }
.sign-role i { width: 18px; height: 1px; background: var(--sign-accent); }
.sign-hero blockquote { max-width: 620px; padding-left: 1.2rem; border-left: 2px solid var(--sign-accent); color: #eff0f6; font: italic clamp(1.2rem,2vw,1.55rem)/1.5 var(--serif); }
.sign-glyph-wrap { justify-self: center; width: min(420px,80%); aspect-ratio: 1; display: grid; place-items: center; position: relative; border: 1px solid color-mix(in srgb,var(--sign-accent),transparent 55%); border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--sign-accent),transparent 60%),transparent 68%); }
.sign-glyph-wrap::before, .sign-glyph-wrap::after { content: ""; position: absolute; border: 1px solid color-mix(in srgb,var(--sign-accent),transparent 72%); border-radius: 50%; }
.sign-glyph-wrap::before { inset: 10%; }.sign-glyph-wrap::after { inset: -8% 27%; transform: rotate(50deg); }
.sign-glyph-wrap > span { color: var(--sign-soft); font: clamp(6rem,12vw,11rem)/1 var(--serif); text-shadow: 0 0 45px color-mix(in srgb,var(--sign-accent),transparent 20%); }
.sign-profile { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem,7vw,7rem); align-items: start; padding: clamp(6rem,9vw,9rem) max(1.5rem,calc((100vw - var(--max))/2)); }
.sign-profile .eyebrow { color: var(--sign-accent); }
.sign-story h2 { font-size: clamp(2.5rem,4vw,4.2rem); }
.sign-story > p:last-child { color: #575c6b; font: 1.06rem/1.72 var(--sans); }
.growth-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #d5cabb; }
.growth-grid article { min-height: 180px; padding: 1.5rem; }
.growth-grid article:nth-child(odd) { border-right: 1px solid #d5cabb; }
.growth-grid article:nth-child(-n+2) { border-bottom: 1px solid #d5cabb; }
.growth-grid span { color: var(--sign-accent); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 800; }
.growth-grid p { margin: .7rem 0 0; color: #383c48; font: 1.13rem/1.5 var(--serif); }
.explore-more { display: grid; grid-template-columns: .6fr 1.4fr; gap: 3rem; align-items: center; padding: clamp(5rem,8vw,7rem) max(1.5rem,calc((100vw - var(--max))/2)); border-top: 1px solid #d5cabb; background: #eee4d5; }
.explore-more .eyebrow { color: var(--sign-accent); }
.explore-more h2 { font-size: clamp(2.3rem,4vw,3.8rem); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 4px; }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }.nav { display: none; }
  .home-hero { grid-template-columns: 1fr; min-height: 0; }.home-hero-copy { max-width: 760px; }.hero-map { max-width: 900px; }
  .watch-section, .book-feature, .contact-section, .sign-profile, .explore-more { grid-template-columns: 1fr; }
  .watch-copy, .book-copy, .contact-copy, .sign-story { max-width: 800px; }
  .sign-hero { grid-template-columns: 1fr .6fr; }
  .sign-glyph-wrap { width: min(300px,90%); }
}

@media (max-width: 720px) {
  .site-header { min-height: 68px; padding: .65rem 1rem; }.brand-title { font-size: 1.1rem; }.brand-kicker { font-size: .56rem; }.header-action { font-size: .74rem; }
  .home-hero { padding: 7.5rem 1.25rem 4rem; gap: 3rem; }.home-hero h1 { font-size: clamp(3.7rem,18vw,6rem); }.hero-lede { font-size: 1.12rem; }
  .watch-section, .discover-section, .book-feature, .contact-section, .sign-profile, .explore-more { padding-left: 1.25rem; padding-right: 1.25rem; }
  h2 { font-size: clamp(2.5rem,13vw,4rem); }
  .finder-grid { grid-template-columns: 1fr; }.date-fields { grid-template-columns: 1fr 1fr; }
  .sign-link-grid { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: .5rem .2rem 1rem; scroll-snap-type: x mandatory; }.sign-link-grid a { flex: 0 0 auto; scroll-snap-align: start; }
  .sign-hero { grid-template-columns: 1fr; min-height: 0; padding: 8rem 1.25rem 4rem; }.sign-hero h1 { font-size: clamp(4.3rem,22vw,7rem); }.sign-glyph-wrap { width: 220px; justify-self: start; margin-left: 1rem; }
  .growth-grid { grid-template-columns: 1fr; }.growth-grid article { min-height: 0; border-bottom: 1px solid #d5cabb; }.growth-grid article:nth-child(odd) { border-right: 0; }.growth-grid article:last-child { border-bottom: 0; }
  .footer { flex-direction: column; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Homepage flow: intro, wheel and spotlight, trailer, book. */
.home-hero { min-height: 0; grid-template-columns: minmax(0,1fr); padding-top: 8.5rem; padding-bottom: 2.5rem; }
.home-hero-copy { max-width: 850px; }
.home-hero h1 { font-size: clamp(3.7rem,6.5vw,6.5rem); }
.home-hero .hero-lede { max-width: 760px; }
.book-feature { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: clamp(2rem,5vw,5rem); }
.book-feature .book-cover { width: 100%; max-width: 420px; justify-self: center; }
@media(max-width:1050px) { .book-feature { grid-template-columns: 1fr; } .book-feature .book-cover { width: 75%; max-width: 420px; } }
@media(max-width:720px) { .home-hero { padding-top: 7rem; padding-bottom: 2rem; } .book-feature .book-cover { width: 82%; max-width: 340px; } }

/* Ice-blue starlight accents and supplied brand artwork. */
:root { --gold:#b6eaff; --gold-deep:#65c8f3; }
.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; }
.brand-logo { position:relative; display:block; width:230px; height:49px; overflow:hidden; }
.brand-logo img { position:absolute; width:145%; max-width:none; height:auto; left:50%; top:50%; transform:translate(-50%,-42%); mix-blend-mode:screen; }
.home-hero-copy { max-width:1050px; width:100%; }
.hero-title-frame { position:relative; width:100%; aspect-ratio:1920/480; overflow:hidden; mix-blend-mode:screen; }
.hero-title-frame video,.hero-title-frame img { position:absolute; top:50%; left:0; width:100%; height:auto; transform:translateY(-50%); }
.hero-title-frame [hidden] { display:none!important; }
.home-hero .hero-lede { max-width:76ch; font-size:clamp(1.12rem,1.6vw,1.4rem); margin-top:1.2rem; }
.eyebrow,.mini-label,.book-promise,.book-copy strong,.header-action { text-shadow:0 0 16px #78d8ff55; }
.header-action { color:var(--gold); border-color:#9adeff80; box-shadow:0 0 18px #78d8ff22,inset 0 0 12px #78d8ff12; }
.button-primary { background:linear-gradient(135deg,#dcf6ff,#96deff); color:#082035; box-shadow:0 0 26px #78d8ff55; }
@media(max-width:720px) { .brand-logo { width:190px; height:42px; } .home-hero { padding-top:7rem; } .hero-title-frame { aspect-ratio:1920/650; } }

/* Watch, read and studio sections with supplied campaign artwork. */
.trailer-label { font:1.3rem/1.4 var(--serif); color:#b6eaff!important; text-shadow:0 0 15px #78d8ff55; }
.book-feature { grid-template-columns:1fr; gap:2rem; }
.book-feature .book-copy { max-width:900px; }
.book-feature .book-copy h2 { font-size:clamp(2rem,4vw,3.5rem); }
.book-feature .book-cover { max-width:1000px; width:100%; justify-self:start; }
.book-feature .book-cover img { object-fit:contain; height:auto; }
.sandstone-section { display:flex; flex-direction:column; gap:0; background:#000; color:#fff; padding-top:4rem; padding-bottom:4rem; text-align:center; }
.sandstone-logo-frame { position:relative; width:min(460px,100%); aspect-ratio:640/430; overflow:hidden; }
.sandstone-logo-frame img { position:absolute; width:280%; max-width:none; height:auto; left:50%; top:0; transform:translate(-50%,-16%); }
.sandstone-copy { font:clamp(1.1rem,2vw,1.6rem)/1.45 var(--serif); max-width:640px; margin:1.5rem auto 2.5rem; }
.sandstone-email { color:#fff; border:1px solid #fff; padding:1.4rem 1.8rem; font-size:clamp(.7rem,2vw,.9rem); text-decoration:underline; overflow-wrap:anywhere; }
.sandstone-section .social-links { border:0; margin-top:1.5rem; gap:1.5rem; }
.sandstone-section .social-links a { color:#b6eaff; font-size:.95rem; }
@media(max-width:720px) { .book-feature .book-cover { width:100%; max-width:1000px; } .sandstone-logo-frame { width:min(360px,100%); } .sandstone-copy { margin-top:1rem; } }

/* Compact module spacing, retaining mobile controls and fixed-header clearance. */
.home-hero { padding-bottom:1.25rem; }
.watch-section,.book-feature { padding-top:clamp(2.5rem,5vw,4rem); padding-bottom:clamp(2.5rem,5vw,4rem); }
.sandstone-section { padding-top:2.5rem; padding-bottom:2.5rem; }
@media(max-width:720px) {
 .home-hero { padding-bottom:1rem; }
 .watch-section,.book-feature { padding-top:2rem; padding-bottom:2rem; }
 .watch-section { gap:1.75rem; }
 .sandstone-section { padding-top:2rem; padding-bottom:2rem; }
}

.home-hero-copy { margin-inline:auto; text-align:center; }
.home-hero .hero-lede { margin-left:auto; margin-right:auto; }

/* Clamp near-black compression tones before blending the title animation. */
.hero-title-frame video,.hero-title-frame img { filter:contrast(1.25); }

.character-directory { max-width:1000px; margin:0 auto; padding:1.25rem; color:#b6eaff; }
.character-directory summary { cursor:pointer; font-size:.9rem; }
.character-directory nav { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.character-directory a { padding:8px 12px; border:1px solid #b6eaff44; border-radius:20px; text-decoration:none; }
.character-page { background:#070a18; color:#fffdf8; }
.character-main { max-width:1200px; margin:auto; padding:8rem 1.5rem 3rem; }
.character-layout { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.character-layout h1 { font:clamp(3rem,7vw,5.5rem)/1.1 var(--serif); color:#b6eaff; margin:0 0 12px; }
.character-layout h2 { font:1.7rem/1.3 var(--serif); }
.character-layout video { width:100%; border-radius:18px; background:#080910; }
.character-facts { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.character-facts > div { padding:12px; border:1px solid #b6eaff33; border-radius:10px; }
.character-facts dt { color:#b6eaff; font-weight:700; font-size:.8rem; }
.character-facts dd { margin:4px 0 0; font-size:.9rem; }
@media(max-width:800px) { .character-layout { grid-template-columns:1fr; gap:1.5rem; } .character-main { padding-top:7rem; } }

/* Match the welcome animation's black background. */
.home-hero { background:#000; }
.home-hero::before { content:none; }