:root {
  --navy-950: #03111e;
  --navy-900: #07192b;
  --navy-850: #0a2238;
  --navy-800: #0d2a44;
  --navy-700: #123a5c;
  --sky: #2472a8;
  --gold: #e6b75a;
  --gold-bright: #ffd77c;
  --cream: #fff7e7;
  --paper: #f7f1e4;
  --ink: #12202d;
  --muted: #667381;
  --line: rgba(230, 183, 90, 0.34);
  --white-line: rgba(255,255,255,0.18);
  --shadow: 0 22px 55px rgba(2, 14, 25, 0.22);
  --radius: 22px;
  --shell: min(1180px, calc(100vw - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f4f0e8;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 1000;
  padding: 12px 16px;
  background: #fff;
  color: #000;
  border-radius: 8px;
}
.skip-link:focus { top: 16px; }

.shell { width: var(--shell); margin-inline: auto; }
.section { padding: 96px 0; position: relative; }
.kicker {
  margin: 0 0 10px;
  color: var(--gold);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
h2 { font-size: clamp(2.4rem, 5vw, 4.9rem); margin-bottom: 22px; }
h3 { font-size: clamp(1.35rem, 2.2vw, 2rem); }
p { font-size: 1.04rem; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 76px;
  display: flex;
  align-items: center;
  padding: 0 max(20px, calc((100vw - 1180px) / 2));
  background: rgba(3, 17, 30, 0.87);
  border-bottom: 1px solid rgba(230,183,90,0.25);
  backdrop-filter: blur(16px);
  color: #fff;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--gold-bright);
  min-width: 190px;
}
.brand img { color: var(--gold-bright); width: 34px; height: 43px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.08rem; letter-spacing: 0.1em; }
.brand small { color: #fff; letter-spacing: 0.16em; font-size: 0.58rem; }
.main-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.main-nav a {
  text-decoration: none;
  color: rgba(255,255,255,0.84);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.main-nav a:hover, .main-nav a:focus-visible { color: var(--gold-bright); }
.main-nav .nav-cta {
  padding: 10px 16px;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  border-radius: 999px;
}
.menu-button {
  display: none;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  padding: 9px 14px;
}

.hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  position: relative;
  color: #fff;
  background:
    radial-gradient(circle at 68% 15%, rgba(45,131,188,0.34), transparent 25%),
    linear-gradient(155deg, #0b2a45 0%, #09223b 48%, #061a2c 100%);
  overflow: hidden;
  padding-top: 76px;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4,18,31,0.24), transparent 58%), linear-gradient(0deg, rgba(3,17,30,0.45), transparent 45%);
  pointer-events: none;
}
.hero-sky { position: absolute; inset: 0; overflow: hidden; }
.stars {
  position: absolute;
  inset: 0;
  opacity: 0.7;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255,215,124,0.8) 0 1px, transparent 1.4px);
  background-position: 0 0, 34px 25px;
  background-size: 76px 76px, 118px 118px;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
.cloud {
  position: absolute;
  width: 650px;
  height: 210px;
  border-radius: 50%;
  filter: blur(32px);
  background: rgba(142,190,220,0.14);
}
.cloud-a { right: 5%; top: 8%; transform: rotate(-9deg); }
.cloud-b { left: 20%; top: 30%; transform: rotate(7deg); opacity: 0.5; }
.city {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 9%;
  height: 40%;
  background-repeat: repeat-x;
  background-position: bottom;
  filter: drop-shadow(0 0 14px rgba(32,111,164,0.25));
}
.city-back {
  opacity: 0.65;
  background-image:
    linear-gradient(to top, rgba(255,215,124,0.6) 0 2px, transparent 2px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(210,236,255,0.12) 18px 20px),
    linear-gradient(90deg, #102c45 0 8%, transparent 8% 10%, #0f2b45 10% 18%, transparent 18% 21%, #133753 21% 32%, transparent 32% 36%, #12324e 36% 48%, transparent 48% 52%, #153b58 52% 65%, transparent 65% 68%, #11334f 68% 82%, transparent 82% 85%, #143955 85% 100%);
  clip-path: polygon(0 100%,0 45%,5% 45%,5% 28%,9% 28%,9% 50%,15% 50%,15% 18%,19% 18%,19% 42%,24% 42%,24% 35%,30% 35%,30% 10%,33% 10%,33% 38%,38% 38%,38% 25%,45% 25%,45% 48%,52% 48%,52% 15%,55% 15%,55% 40%,61% 40%,61% 30%,67% 30%,67% 4%,70% 4%,70% 47%,76% 47%,76% 20%,82% 20%,82% 39%,89% 39%,89% 13%,93% 13%,93% 44%,100% 44%,100% 100%);
}
.city-front {
  height: 31%;
  opacity: 0.88;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(255,222,150,0.35) 28px 31px),
    linear-gradient(90deg, #071b2e 0 14%, transparent 14% 17%, #0a2136 17% 29%, transparent 29% 33%, #0b243b 33% 50%, transparent 50% 53%, #08213a 53% 66%, transparent 66% 69%, #0a2239 69% 83%, transparent 83% 86%, #081d31 86% 100%);
  clip-path: polygon(0 100%,0 30%,9% 30%,9% 6%,14% 6%,14% 45%,22% 45%,22% 17%,28% 17%,28% 52%,36% 52%,36% 2%,41% 2%,41% 42%,48% 42%,48% 23%,56% 23%,56% 49%,63% 49%,63% 10%,68% 10%,68% 38%,76% 38%,76% 21%,84% 21%,84% 44%,91% 44%,91% 5%,96% 5%,96% 31%,100% 31%,100% 100%);
}
.roof {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  background: linear-gradient(180deg, #17334a, #071522 65%);
  box-shadow: inset 0 2px rgba(255,255,255,0.12), 0 -40px 80px rgba(31,101,147,0.18);
}
.roof::after {
  content: "";
  position: absolute;
  inset: 12px 0 0;
  background: repeating-linear-gradient(90deg, transparent 0 110px, rgba(255,255,255,0.05) 110px 112px);
}
.searchlight { position: absolute; right: 10%; bottom: 10%; width: 420px; height: 620px; }
.beam {
  position: absolute;
  width: 560px;
  height: 200px;
  right: 85px;
  bottom: 75px;
  transform-origin: right center;
  transform: rotate(-48deg);
  background: linear-gradient(90deg, rgba(255,246,210,0.02), rgba(255,246,210,0.16) 40%, rgba(255,246,210,0.65));
  clip-path: polygon(0 40%,100% 0,100% 100%,0 60%);
  filter: blur(2px);
}
.lamp {
  position: absolute;
  right: 0;
  bottom: 30px;
  width: 135px;
  height: 105px;
  border-radius: 50%;
  border: 10px solid #263c4d;
  background: radial-gradient(circle, #fffef0 0 38%, #d8ba78 39% 47%, #15293a 48%);
  box-shadow: 0 0 45px rgba(255,224,156,0.8), -18px 28px 0 2px #0a1722;
  transform: rotate(-17deg);
}
.signal {
  position: absolute;
  right: 300px;
  top: 0;
  width: 190px;
  height: 230px;
  color: #fff8dc;
  filter: drop-shadow(0 0 14px rgba(255,245,207,0.95));
  opacity: 0.92;
  animation: signalPulse 4s ease-in-out infinite;
}
.signal img { width: 100%; height: 100%; }
@keyframes signalPulse { 50% { opacity: 0.72; transform: scale(1.025); } }
.hero-content { position: relative; z-index: 2; padding: 80px 0 160px; }
.hero-content > * { max-width: 660px; }
.hero h1 { margin: 0; font-size: clamp(4rem, 10vw, 8.8rem); letter-spacing: -0.055em; }
.hero h1 span { display: block; color: #fff; font-size: 0.54em; letter-spacing: 0.03em; }
.hero h1 { color: var(--gold-bright); }
.hero-name { font-size: clamp(1.25rem, 2.3vw, 1.9rem); font-weight: 800; margin: 16px 0 10px; }
.hero-copy { max-width: 580px; color: rgba(255,255,255,0.85); font-size: 1.12rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.button {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  min-height: 50px;
  padding: 13px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .text-button:focus-visible, .menu-button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #ffdc87; outline-offset: 3px; }
.button-gold { background: var(--gold-bright); color: #142231; box-shadow: 0 10px 25px rgba(255,211,118,0.2); }
.button-gold:hover { background: #ffe4a2; }
.button-clear { color: #fff; border-color: rgba(255,255,255,0.45); background: rgba(5,19,32,0.18); }
.button-clear:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.button.small { min-height: 42px; padding: 9px 18px; }
.scroll-prompt {
  position: absolute;
  z-index: 4;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scroll-prompt b { display: block; font-size: 1.25rem; animation: nudge 1.5s infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }

.story-intro { background: var(--paper); }
.story-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 70px;
  align-items: end;
}
.story-intro-grid > p { color: var(--muted); font-size: 1.13rem; padding-bottom: 10px; }
.story-strip {
  margin-top: 54px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(17,50,76,0.14);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
}
.story-strip article { padding: 30px; min-height: 260px; position: relative; }
.story-strip article + article { border-left: 1px solid rgba(17,50,76,0.12); }
.story-strip span { color: var(--gold); font-size: 0.85rem; font-weight: 900; letter-spacing: 0.12em; }
.story-strip h3 { margin: 50px 0 14px; }
.story-strip p { color: var(--muted); font-size: 0.96rem; }

.cinematic-panel {
  background: linear-gradient(135deg, #0d2b45, #0a2035 65%, #0c2e49);
  color: #fff;
  overflow: hidden;
}
.cinematic-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 20%, rgba(44,132,187,0.24), transparent 35%), radial-gradient(circle at 90% 90%, rgba(230,183,90,0.14), transparent 30%);
}
.cinematic-grid { position: relative; display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 58px; align-items: center; }
.cinematic-copy p { color: rgba(255,255,255,0.76); }
.cinematic-image { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 28px 70px rgba(0,0,0,0.35); }
.cinematic-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 60%; }
.cinematic-image figcaption { padding: 12px 16px; background: #061725; color: rgba(255,255,255,0.64); font-size: 0.83rem; }
.text-button { padding: 0; border: 0; background: none; color: var(--gold-bright); font-weight: 900; cursor: pointer; }
.text-button span { display: inline-block; transition: transform 180ms ease; }
.text-button:hover span { transform: translateX(6px); }

.mervin-section { background: #fff; }
.section-heading { max-width: 870px; }
.section-heading.centered { text-align: center; margin-inline: auto; }
.section-heading.centered > p:last-child { max-width: 780px; margin-inline: auto; color: var(--muted); }
.section-heading.split { display: grid; grid-template-columns: 1.1fr 0.9fr; max-width: none; gap: 80px; align-items: end; }
.section-heading.split > p { color: var(--muted); padding-bottom: 12px; }
.personality-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 54px; margin-top: 58px; align-items: center; }
.portrait-feature { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--navy-900); }
.portrait-feature img { width: 100%; height: 600px; object-fit: cover; object-position: center 20%; }
.portrait-feature figcaption { color: #fff; padding: 14px 18px; font-size: 0.86rem; }
.personality-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.personality-cards article { padding: 24px; border-radius: 18px; background: #f3f6f8; border: 1px solid #e3e9ed; min-height: 148px; }
.personality-cards b { display: block; font-size: 1.15rem; color: var(--navy-800); margin-bottom: 8px; }
.personality-cards span { color: var(--muted); }

.years-section { background: #f2eee6; }
.memory-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 50px; }
.memory-card { margin: 0; position: relative; overflow: hidden; border-radius: 18px; min-height: 410px; box-shadow: var(--shadow); background: var(--navy-900); }
.memory-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.memory-card:hover img { transform: scale(1.035); }
.memory-card figcaption { position: absolute; inset: auto 0 0; padding: 70px 22px 20px; color: #fff; background: linear-gradient(transparent, rgba(2,14,24,0.92)); }
.memory-card strong, .memory-card span { display: block; }
.memory-card strong { font-size: 1.2rem; }
.memory-card span { color: rgba(255,255,255,0.76); font-size: 0.9rem; }
.memory-card.childhood { grid-column: span 5; }
.memory-card.seated { grid-column: span 4; }
.memory-card.portrait { grid-column: span 3; }
.memory-card.childhood img { object-position: center; }
.memory-card.seated img { object-position: center 22%; }
.memory-card.portrait img { object-position: center; }

.fandom-section {
  background: linear-gradient(180deg, #0b2a45, #061928);
  color: #fff;
  overflow: hidden;
}
.fandom-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.8) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 30%, rgba(255,213,125,0.8) 0 1px, transparent 1.4px);
  background-size: 100px 100px, 145px 145px;
  opacity: 0.22;
}
.fandom-section .shell { position: relative; }
.fandom-heading > p:last-child { color: rgba(255,255,255,0.76); }
.fandom-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.fandom-card { min-height: 420px; padding: 34px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.18); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 22px 55px rgba(0,0,0,0.22); }
.fandom-card::before { content: ""; position: absolute; inset: 0; opacity: 0.8; }
.fandom-card.urban::before { background: linear-gradient(150deg, rgba(13,46,75,0.1), rgba(2,11,19,0.85)), repeating-linear-gradient(90deg, transparent 0 35px, rgba(255,255,255,0.05) 35px 37px), linear-gradient(0deg, #0f3553, #1d5f8a); clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
.fandom-card.cosmic::before { background: radial-gradient(circle at 75% 20%, rgba(255,231,174,0.8) 0 3%, transparent 3.5%), radial-gradient(circle at 35% 35%, rgba(76,159,214,0.62), transparent 25%), linear-gradient(145deg, #14395e, #150f2d 60%, #050e1b); }
.fandom-card.original::before { background: radial-gradient(circle at 50% 25%, rgba(230,183,90,0.42), transparent 20%), linear-gradient(145deg, #173d59, #081d31 60%, #020b13); }
.fandom-card > * { position: relative; }
.fandom-number { position: absolute; top: 24px; right: 26px; color: rgba(255,255,255,0.45); font-weight: 900; letter-spacing: 0.1em; }
.fandom-card h3 { font-size: 2.1rem; margin-bottom: 14px; }
.fandom-card p { color: rgba(255,255,255,0.76); }
.cosplay-callout { margin-top: 22px; display: grid; grid-template-columns: 1fr 180px; gap: 40px; align-items: center; padding: 36px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.06); }
.cosplay-callout h3 { margin-bottom: 10px; }
.cosplay-callout p:last-child { color: rgba(255,255,255,0.72); }
.cosplay-symbol { color: var(--gold-bright); width: 130px; margin-inline: auto; filter: drop-shadow(0 0 18px rgba(255,215,124,0.35)); }

.surprise-section { background: linear-gradient(135deg, #fff4d6, #f6db9a 48%, #f4c865); overflow: hidden; }
.surprise-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 54px; align-items: center; position: relative; }
.surprise-copy .kicker { color: #92640f; }
.surprise-copy p { color: #5c4a2d; }
.surprise-stage { min-height: 520px; border-radius: 28px; background: linear-gradient(180deg, #1e4d73, #0b263f 60%, #071725); position: relative; overflow: hidden; box-shadow: 0 28px 70px rgba(88,54,5,0.26); border: 8px solid rgba(255,255,255,0.7); }
.surprise-stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,0.35) 50%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,0.25) 50%, transparent 50.5%); }
.glass-lines { position: absolute; inset: 0; opacity: 0; background: repeating-conic-gradient(from 5deg at 50% 45%, rgba(255,255,255,0.9) 0 0.8deg, transparent 1deg 18deg); transition: opacity 500ms ease; }
.hero-silhouette { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); width: 300px; height: 310px; }
.hero-silhouette .body { position: absolute; left: 104px; top: 28px; width: 92px; height: 240px; border-radius: 48px 48px 22px 22px; background: linear-gradient(90deg, #111c27, #30465a 48%, #0b131d); box-shadow: 0 0 22px rgba(230,183,90,0.24); }
.hero-silhouette .body::before { content: ""; position: absolute; width: 72px; height: 72px; border-radius: 50%; background: #152536; left: 10px; top: -38px; }
.hero-silhouette .body::after { content: "14"; position: absolute; left: 27px; top: 70px; color: var(--gold-bright); font-weight: 900; font-size: 1.45rem; }
.cape-left, .cape-right { position: absolute; top: 38px; width: 140px; height: 220px; background: linear-gradient(135deg, #101a25, #263d52); }
.cape-left { left: 0; clip-path: polygon(100% 0,100% 100%,0 72%); }
.cape-right { right: 0; clip-path: polygon(0 0,100% 72%,0 100%); }
.surprise-words { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, rgba(255,232,167,0.9), rgba(230,183,90,0.28) 40%, rgba(6,23,37,0.25) 75%); color: #fff; opacity: 0; transform: scale(0.85); transition: opacity 500ms ease, transform 500ms ease; }
.surprise-words strong { font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(4rem,8vw,7rem); color: #fff2be; text-shadow: 0 5px 0 #8d5e08, 0 0 25px rgba(255,215,124,0.7); letter-spacing: 0.02em; }
.surprise-words span { font-size: clamp(1.3rem,3vw,2.1rem); font-weight: 900; }
.surprise-stage.revealed { background: linear-gradient(180deg, #3f7fb0, #1c506f 45%, #0d2c42); }
.surprise-stage.revealed .glass-lines { opacity: 0.7; }
.surprise-stage.revealed .hero-silhouette { animation: entrance 700ms ease both; }
.surprise-stage.revealed .surprise-words { display: grid; opacity: 1; transform: scale(1); }
@keyframes entrance { from { transform: translate(-50%,-50%) scale(0.35) rotate(-8deg); } to { transform: translate(-50%,-50%) scale(1) rotate(0); } }
.confetti, .dialog-confetti { position: absolute; inset: 0; pointer-events: none; opacity: 0.45; background-image: linear-gradient(45deg, transparent 48%, #f3b82d 48% 52%, transparent 52%), linear-gradient(-30deg, transparent 48%, #2e85b9 48% 52%, transparent 52%), linear-gradient(80deg, transparent 48%, #fff 48% 52%, transparent 52%); background-size: 80px 90px, 110px 100px, 130px 120px; }

.tributes-section { background: #0a2339; color: #fff; }
.tributes-section .section-heading.split > p { color: rgba(255,255,255,0.72); }
.tribute-layout { margin-top: 52px; display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 24px; }
.tribute-form { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: #0f2f4b; box-shadow: 0 24px 55px rgba(0,0,0,0.22); }
.tribute-form label, .tribute-form legend { font-weight: 750; color: #fff; }
.tribute-form label > span { color: var(--gold-bright); }
.field-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.tribute-form input, .tribute-form textarea { width: 100%; margin-top: 7px; border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; background: #082037; color: #fff; padding: 13px 14px; }
.tribute-form textarea { resize: vertical; }
.tribute-form input::placeholder, .tribute-form textarea::placeholder { color: rgba(255,255,255,0.45); }
.tribute-form > label, .tribute-form > .field-grid, .tribute-form fieldset { display: block; margin-bottom: 18px; }
.upload-field { border: 1px dashed rgba(255,255,255,0.28); border-radius: 14px; padding: 16px; }
.upload-field input { padding: 10px 0 0; border: 0; background: transparent; }
.upload-field small { display: block; color: rgba(255,255,255,0.62); margin-top: 8px; font-weight: 500; }
.tribute-form fieldset { border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 14px 16px; }
.choice { display: inline-flex; align-items: center; gap: 9px; margin-right: 18px; font-weight: 600 !important; }
.choice input { width: auto; margin: 0; }
.choice.consent { display: flex; margin-bottom: 20px; }
.form-status { min-height: 28px; margin: 16px 0 0; color: var(--gold-bright); }
.tribute-side { border-radius: var(--radius); overflow: hidden; background: #f7f1e4; color: var(--ink); display: grid; grid-template-rows: 340px 1fr; }
.tribute-side > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tribute-side > div { padding: 28px; }
.tribute-side p { color: var(--muted); }
.tribute-side ul { padding-left: 20px; color: var(--muted); }
.approved-block { margin-top: 64px; }
.approved-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 24px; }
.approved-heading h3 { margin-bottom: 0; }
.approved-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.tribute-card { border: 1px solid var(--line); border-radius: 18px; background: #0e304d; overflow: hidden; }
.tribute-media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #061827; }
.tribute-card video { width: 100%; aspect-ratio: 4 / 3; background: #000; }
.tribute-card-body { padding: 22px; }
.tribute-card h4 { margin: 0 0 4px; color: var(--gold-bright); font-size: 1.1rem; }
.tribute-card p { color: rgba(255,255,255,0.78); white-space: pre-wrap; }
.tribute-card small { color: rgba(255,255,255,0.5); }
.empty-state { grid-column: 1 / -1; padding: 34px; border: 1px dashed rgba(255,255,255,0.26); border-radius: 18px; color: rgba(255,255,255,0.62); text-align: center; }

.celebration-section { background: var(--paper); }
.celebration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.celebration-grid > div > p:last-child { color: var(--muted); }
.event-details { margin: 0; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.event-details div { display: grid; grid-template-columns: 120px 1fr; padding: 20px 24px; }
.event-details div + div { border-top: 1px solid #e7e0d4; }
.event-details dt { font-weight: 900; color: var(--navy-700); }
.event-details dd { margin: 0; color: var(--muted); }
.site-footer { background: #03111e; color: #fff; padding: 44px 0; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 30px; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 14px; color: var(--gold-bright); }
.footer-brand img { color: var(--gold-bright); }
.footer-brand strong, .footer-brand span { display: block; }
.footer-brand span { color: rgba(255,255,255,0.65); font-size: 0.82rem; }
.footer-grid > p { margin: 0; color: rgba(255,255,255,0.64); font-size: 0.9rem; }
.footer-grid > a { color: var(--gold-bright); }

.story-dialog { width: min(960px, calc(100vw - 28px)); max-height: calc(100svh - 28px); padding: 0; border: 1px solid var(--line); border-radius: 24px; background: #061a2c; color: #fff; box-shadow: 0 30px 100px rgba(0,0,0,0.55); }
.story-dialog::backdrop { background: rgba(1,8,14,0.82); backdrop-filter: blur(7px); }
.story-dialog-inner { padding: 26px; position: relative; }
.dialog-close { position: absolute; right: 18px; top: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.2); color: #fff; font-size: 1.6rem; cursor: pointer; }
.story-progress { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 6px 58px 20px 0; }
.story-progress span { height: 4px; background: rgba(255,255,255,0.2); border-radius: 999px; }
.story-progress span.complete { background: var(--gold-bright); }
.story-slides { min-height: 570px; }
.story-slide { display: none; text-align: center; }
.story-slide.active { display: block; }
.story-slide h2 { margin: 12px 0 14px; font-size: clamp(2.6rem,6vw,5.2rem); }
.story-slide > p:last-child { color: rgba(255,255,255,0.74); max-width: 650px; margin-inline: auto; }
.mini-sky { height: 330px; border-radius: 18px; position: relative; overflow: hidden; background: linear-gradient(145deg,#123c5d,#071a2b); }
.mini-sky::before { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: repeating-linear-gradient(90deg,#071825 0 42px,#0f314a 42px 75px); clip-path: polygon(0 100%,0 45%,8% 45%,8% 20%,14% 20%,14% 55%,23% 55%,23% 28%,29% 28%,29% 52%,37% 52%,37% 9%,44% 9%,44% 49%,53% 49%,53% 23%,62% 23%,62% 55%,70% 55%,70% 11%,78% 11%,78% 43%,86% 43%,86% 18%,94% 18%,94% 48%,100% 48%,100% 100%); }
.mini-sky img { position: absolute; width: 110px; color: var(--gold-bright); right: 26%; top: 26px; filter: drop-shadow(0 0 16px rgba(255,215,124,0.7)); }
.mini-beam { position: absolute; right: 8%; bottom: 15%; width: 430px; height: 90px; transform: rotate(-32deg); transform-origin: right center; background: linear-gradient(90deg, transparent, rgba(255,244,205,0.58)); clip-path: polygon(0 40%,100% 0,100% 100%,0 60%); }
.hidden-door { height: 330px; border-radius: 18px; position: relative; overflow: hidden; display: grid; place-items: center; background: repeating-linear-gradient(90deg,#1f2931 0 90px,#2f3b44 90px 94px); }
.hidden-door span { position: absolute; inset: 28px 30%; border: 2px solid rgba(230,183,90,0.6); background: linear-gradient(90deg,#101b25,#2a3c49,#101b25); box-shadow: 0 0 0 1000px rgba(0,0,0,0.15); }
.hidden-door img { width: 110px; color: var(--gold-bright); z-index: 1; }
.story-photo { width: 100%; height: 330px; object-fit: cover; object-position: center 60%; border-radius: 18px; }
.story-slide.final { min-height: 530px; place-content: center; position: relative; overflow: hidden; border-radius: 18px; background: radial-gradient(circle,#f8d67d,#d89b2f 32%,#174e76 65%,#081c2d); }
.story-slide.final.active { display: grid; }
.story-slide.final h2 { font-size: clamp(4.5rem,12vw,9rem); color: #fff1b8; text-shadow: 0 6px 0 #8b5900; z-index: 1; }
.story-slide.final p { z-index: 1; color: #fff !important; font-weight: 700; }
.story-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; }
.story-controls span { color: rgba(255,255,255,0.65); }

@media (max-width: 1020px) {
  .main-nav { position: fixed; inset: 76px 14px auto; display: none; flex-direction: column; align-items: stretch; padding: 20px; border-radius: 18px; background: #061827; border: 1px solid var(--line); box-shadow: var(--shadow); }
  .main-nav.open { display: flex; }
  .menu-button { display: block; }
  .searchlight { right: -8%; opacity: 0.8; }
  .hero-content > * { max-width: 610px; }
  .story-strip { grid-template-columns: repeat(2,1fr); }
  .story-strip article:nth-child(3) { border-left: 0; border-top: 1px solid rgba(17,50,76,0.12); }
  .story-strip article:nth-child(4) { border-top: 1px solid rgba(17,50,76,0.12); }
  .cinematic-grid, .personality-layout, .tribute-layout, .surprise-grid { grid-template-columns: 1fr; }
  .cinematic-image { order: -1; }
  .portrait-feature img { height: 560px; }
  .fandom-cards { grid-template-columns: 1fr; }
  .fandom-card { min-height: 320px; }
  .approved-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 740px) {
  :root { --shell: min(100% - 28px, 1180px); }
  .section { padding: 70px 0; }
  .site-header { height: 68px; padding-inline: 14px; }
  .main-nav { inset: 68px 10px auto; }
  .brand { min-width: auto; }
  .hero { min-height: 900px; padding-top: 68px; align-items: start; }
  .hero-content { padding-top: 90px; }
  .hero h1 { font-size: clamp(3.8rem,18vw,6rem); }
  .hero-copy { max-width: 95%; }
  .searchlight { width: 330px; height: 520px; right: -90px; bottom: 80px; opacity: 0.75; }
  .signal { right: 240px; width: 130px; height: 165px; }
  .beam { width: 400px; }
  .city { bottom: 11%; }
  .story-intro-grid, .section-heading.split, .celebration-grid, .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .story-strip { grid-template-columns: 1fr; }
  .story-strip article + article { border-left: 0; border-top: 1px solid rgba(17,50,76,0.12); }
  .story-strip article { min-height: auto; }
  .story-strip h3 { margin-top: 25px; }
  .personality-cards, .field-grid, .approved-grid { grid-template-columns: 1fr; }
  .portrait-feature img { height: 500px; }
  .memory-grid { grid-template-columns: 1fr; }
  .memory-card, .memory-card.childhood, .memory-card.seated, .memory-card.portrait { grid-column: auto; min-height: 430px; }
  .cosplay-callout { grid-template-columns: 1fr; }
  .cosplay-symbol { display: none; }
  .surprise-stage { min-height: 430px; }
  .tribute-form { padding: 22px; }
  .tribute-side { grid-template-rows: 300px 1fr; }
  .approved-heading { align-items: start; flex-direction: column; }
  .footer-grid { text-align: center; }
  .footer-brand { justify-content: center; }
  .story-dialog-inner { padding: 18px; }
  .story-slides { min-height: 600px; }
  .mini-sky, .hidden-door, .story-photo { height: 290px; }
  .story-controls .button { padding-inline: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; }
}