:root {
  --bg: #eaf5fb;
  --bg-raised: #ffffff;
  --bg-sunken: #d8ebf5;
  --ink: #1c2b3a;
  --ink-soft: #5b6b7a;
  --border: #d7e6ef;
  --brand: #f2b705;
  --brand-text: #8a6200;
  --brand-ink: #1c2b3a;
  --accent-cosmic: #9a6fd6;
  --accent-teal: #1f9e9e;
  --radius: 18px;
  --font-display: 'Fredoka', 'Segoe UI', sans-serif;
  --font-body: 'Nunito', 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  padding: 24px 20px;
  background:
    radial-gradient(circle at 10% 6%, rgba(154, 111, 214, 0.2) 0%, transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(31, 158, 158, 0.18) 0%, transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(242, 183, 5, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, #0d1420 0%, #141a2b 45%, #0d1420 100%);
  background-attachment: fixed;
}

img {
  max-width: 100%;
}

a {
  color: var(--brand-text);
}

/* ─── Page frame ──────────────────────────────────────────────────────── */
/* A thin illustrated accent wrapping header + main + footer as one
   continuous column, top to bottom. The backdrop behind it is the same dark
   atmosphere as body, so there's no separate "outside the frame" zone —
   just the white content floating on one continuous background. */

.page-frame {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 5px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 0 0 1.5px rgba(31, 158, 158, 0.65),
    0 0 14px rgba(31, 158, 158, 0.25),
    0 20px 60px rgba(10, 15, 25, 0.45);
}

@media (max-width: 700px) {
  body {
    padding: 0;
    background-attachment: scroll;
  }

  .page-frame {
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
}

/* ─── Header ──────────────────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  border-radius: 16px 16px 0 0;
}

@media (max-width: 700px) {
  .site-header {
    border-radius: 0;
  }
}

.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.brand__mark {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.site-nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 14px;
}

.site-nav a:hover {
  color: var(--brand-text);
}

/* ─── Footer ──────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
  border-radius: 0 0 16px 16px;
}

@media (max-width: 700px) {
  .site-footer {
    border-radius: 0;
  }
}

.site-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 20px 48px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--ink-soft);
  font-size: 13px;
}

.site-footer__credit {
  margin: 0;
}

.site-footer__copy {
  margin: 0;
}

/* ─── Layout shells ───────────────────────────────────────────────────── */

main {
  margin: 0;
  padding: 40px 48px;
  background: var(--bg-raised);
}

@media (max-width: 700px) {
  main {
    padding: 24px 20px;
  }
}

.section-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 6px;
}

.section-note {
  color: var(--ink-soft);
  margin: 0 0 24px;
}

/* ─── Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(640px, 88vh);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  overflow: hidden;
  text-align: center;
  border-radius: var(--radius);
  background-image: url('/videos/hero-zero-flight-poster.jpg');
  background-size: cover;
  background-position: center;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

@media (max-width: 700px) {
  .hero__video {
    display: none;
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(8, 12, 20, 0.6) 0%, rgba(8, 12, 20, 0.34) 55%, rgba(8, 12, 20, 0.08) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__scrim {
    animation: heroScrimOut 5s ease-out forwards;
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.hero__eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  margin: 0 0 18px;
}

.hero__mark {
  display: block;
  width: 128px;
  height: auto;
  margin: 0 auto 14px;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.5));
}

.hero__title {
  margin: 0;
}

/* Text wordmark until new lockup art exists (the old image read "Zero's Destiny"). */
.hero__wordmark {
  display: block;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #e8ffff 0%, #8ff3f0 55%, #4fd6d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(20, 60, 70, 0.9)) drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 13px 26px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.button--primary {
  background: var(--brand);
  color: var(--brand-ink);
}

.button--primary:hover {
  filter: brightness(1.08);
}

/* Hero text fades in, holds, then fades out completely by t=5s — timed to
   when Zero enters frame in the video, so nothing overlaps him. */
@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow {
    animation: heroTextInOut 4.9s ease-out 0.1s both;
  }

  .hero__mark {
    animation: heroTextInOut 4.8s ease-out 0.2s both;
  }

  .hero__title {
    animation: heroTextInOut 4.7s ease-out 0.3s both;
  }
}

@keyframes heroTextInOut {
  0% { opacity: 0; transform: translateY(12px); }
  10% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes heroScrimOut {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── Teaser strip (home) ─────────────────────────────────────────────── */

.teaser {
  padding: 40px 0 56px;
}

/* ─── Illustrated card corners + edges (shared by royal-card + charter-card) ─ */
/* Each card is ONE continuous frame, not a stacked banner+body: a flat fill
   color, four corner-ornament images (compass rose, anchor, scrollwork —
   cropped straight from the source art's actual corners), and four tiled
   edge-strip images running the straight borders between them — all pinned
   to the card's own edges so nothing is ever cropped or stretched, at any
   card height. This went through two earlier, wrong designs: (1) a single
   `background-image` with `background-size: cover`, which crops the border
   differently depending on container-vs-image aspect ratio; (2) a flat CSS
   `box-shadow` line standing in for the straight edges, which was much
   thinner/plainer than the source art's actual ornate repeating border
   pattern (a navy/gold fleur-de-lis band, not a hairline) — it technically
   didn't crop anything, but visually read as the illustrated border being
   "covered up," because most of it was just missing. The edge-strip images
   (`*-edge-top/bottom/left/right.jpg`) are real crops of that pattern,
   cropped at the pattern's actual repeat period (found via autocorrelation
   on the source pixels: ~145px horizontal, ~142px vertical for the charter
   card) so `background-repeat` tiles them with no visible seam. See
   `reference/*-source.png` for the ground truth this is matching. */

.card-corner {
  position: absolute;
  width: 90px;
  height: 90px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

.card-corner--tl { top: 0; left: 0; }
.card-corner--tr { top: 0; right: 0; }
.card-corner--bl { bottom: 0; left: 0; }
.card-corner--br { bottom: 0; right: 0; }

/* Edge strips sit between the four corners, tiled along their length. Each
   card sets its own thickness per axis below, since the source art's border
   isn't the same thickness on every side (real, not a bug — matches the
   reference art). z-index:1 keeps them under the corners (z-index:2) at the
   four points where they'd otherwise overlap. */
.card-edge {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.card-edge--top,
.card-edge--bottom {
  left: 90px;
  right: 90px;
  background-repeat: repeat-x;
}

.card-edge--top { top: 0; }
.card-edge--bottom { bottom: 0; }

.card-edge--left,
.card-edge--right {
  top: 90px;
  bottom: 90px;
  background-repeat: repeat-y;
}

.card-edge--left { left: 0; }
.card-edge--right { right: 0; }

@media (max-width: 600px) {
  .card-corner {
    width: 60px;
    height: 60px;
  }

  .card-edge--top,
  .card-edge--bottom {
    left: 60px;
    right: 60px;
  }

  .card-edge--left,
  .card-edge--right {
    top: 60px;
    bottom: 60px;
  }
}

/* Flow content (carousel row, email form) must never sit under the corner
   ornaments — they're position:absolute with z-index:2 (and edges z-index:1),
   so anything of theirs behind one gets visually clipped since absolutely
   positioned elements paint above static-flow content by default. Side/
   bottom padding is kept >= the corner size (with a small margin) for
   exactly that reason; top padding doesn't need the same because the title
   graphic already clears the top corners on its own. */
.royal-card,
.charter-card {
  padding: 14px 98px 98px;
}

@media (max-width: 600px) {
  .royal-card,
  .charter-card {
    padding: 10px 66px 66px;
  }

  .royal-card {
    padding-top: 16px;
  }
}

/* ─── Royal card (home, Characters) ──────────────────────────────────── */
/* Colors sampled directly from the Royal Spire / Chamber of Draws artwork
   on the Aurelia Coast map: deep violet glass, bright cyan glow, warm
   gold/bronze trim. */

.royal-card {
  position: relative;
  background: #1f1741;
  box-shadow: 0 20px 50px rgba(10, 8, 20, 0.35);
}

.royal-card .card-corner--tl { background-image: url('/images/cards/monarch-card-corner-tl.png'); }
.royal-card .card-corner--tr { background-image: url('/images/cards/monarch-card-corner-tr.png'); }
.royal-card .card-corner--bl { background-image: url('/images/cards/monarch-card-corner-bl.png'); }
.royal-card .card-corner--br { background-image: url('/images/cards/monarch-card-corner-br.png'); }

.royal-card .card-edge--top,
.royal-card .card-edge--bottom {
  height: 16.4px;
  background-image: url('/images/cards/monarch-card-edge-top.jpg');
  background-size: auto 16.4px;
}

.royal-card .card-edge--bottom {
  background-image: url('/images/cards/monarch-card-edge-bottom.jpg');
}

.royal-card .card-edge--left,
.royal-card .card-edge--right {
  width: 20.5px;
  background-image: url('/images/cards/monarch-card-edge-left.jpg');
  background-size: 20.5px auto;
}

.royal-card .card-edge--right {
  background-image: url('/images/cards/monarch-card-edge-right.jpg');
}

@media (max-width: 600px) {
  .royal-card .card-edge--top,
  .royal-card .card-edge--bottom {
    height: 10.9px;
    background-size: auto 10.9px;
  }

  .royal-card .card-edge--left,
  .royal-card .card-edge--right {
    width: 13.6px;
    background-size: 13.6px auto;
  }
}

.royal-card__title {
  position: relative;
  z-index: 1;
  width: min(500px, 90%);
  aspect-ratio: 1032 / 300;
  margin: 0 auto 12px;
  background-image: url('/images/cards/monarch-card-title.png');
  background-size: 100% 100%;
}

.royal-card .section-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  color: #f5f0ff;
  text-align: center;
  margin: 0;
  font-size: clamp(13px, 2vw, 22px);
}

.royal-card .teaser-carousel {
  margin-top: 4px;
}

.royal-card .teaser-chip {
  color: #f5f0ff;
}

.royal-card .teaser-carousel__arrow {
  background: rgba(33, 29, 61, 0.9);
  border-color: rgba(126, 232, 240, 0.45);
  color: #f5f0ff;
}

.royal-card .teaser-chip__number {
  border-color: #211d3d;
}

/* ─── Charter card (home, Follow along) ──────────────────────────────── */
/* Cream parchment + navy + gold, echoing the "Aurelia Coast" title banner
   treatment on the map — the realm's closest thing to an official seal. */

.charter-card {
  position: relative;
  background: #f9f1dd;
  box-shadow: 0 20px 50px rgba(60, 45, 20, 0.18);
}

.charter-card .card-corner--tl { background-image: url('/images/cards/notice-card-corner-tl.png'); }
.charter-card .card-corner--tr { background-image: url('/images/cards/notice-card-corner-tr.png'); }
.charter-card .card-corner--bl { background-image: url('/images/cards/notice-card-corner-bl.png'); }
.charter-card .card-corner--br { background-image: url('/images/cards/notice-card-corner-br.png'); }

.charter-card .card-edge--top,
.charter-card .card-edge--bottom {
  height: 28.6px;
  background-image: url('/images/cards/notice-card-edge-top.jpg');
  background-size: auto 28.6px;
}

.charter-card .card-edge--bottom {
  background-image: url('/images/cards/notice-card-edge-bottom.jpg');
}

.charter-card .card-edge--left,
.charter-card .card-edge--right {
  width: 38.9px;
  background-image: url('/images/cards/notice-card-edge-left.jpg');
  background-size: 38.9px auto;
}

.charter-card .card-edge--right {
  background-image: url('/images/cards/notice-card-edge-right.jpg');
}

@media (max-width: 600px) {
  .charter-card .card-edge--top,
  .charter-card .card-edge--bottom {
    height: 19.1px;
    background-size: auto 19.1px;
  }

  .charter-card .card-edge--left,
  .charter-card .card-edge--right {
    width: 25.9px;
    background-size: 25.9px auto;
  }
}

.charter-card__title {
  position: relative;
  z-index: 1;
  width: min(520px, 90%);
  aspect-ratio: 1092 / 280;
  margin: 0 auto 12px;
  background-image: url('/images/cards/notice-card-title.png');
  background-size: 100% 100%;
}

.charter-card .section-title {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 4px));
  width: 55%;
  color: #1b2a4a;
  text-align: center;
  margin: 0;
  font-size: clamp(13px, 2vw, 22px);
}

.charter-card .section-note {
  color: #6b5636;
}

.teaser-carousel {
  position: relative;
  margin: 18px auto 0;
  /* Exactly six chips' worth of width (6 × 128px chip + 5 × 24px gap + 8px strip
     padding), so the carousel window never slices a seventh character mid-frame —
     scroll to reveal the rest instead. */
  max-width: 896px;
}

.teaser-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding: 4px;
  padding: 4px 4px 12px;
  scrollbar-width: none;
}

.teaser-strip::-webkit-scrollbar {
  display: none;
}

.teaser-chip {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 128px;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.15s;
}

.teaser-chip:hover {
  transform: translateY(-4px);
}

.teaser-chip__portrait-wrap {
  position: relative;
  width: 128px;
  height: 128px;
  flex: 0 0 auto;
}

.teaser-chip__portrait {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--chip-color, var(--brand));
  display: block;
  box-shadow: 0 6px 16px rgba(20, 45, 65, 0.12);
}

.teaser-chip__number {
  position: absolute;
  bottom: 2px;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--chip-color, var(--brand));
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  border: 2px solid var(--bg-raised);
}

.teaser-chip__name {
  text-align: center;
}

.teaser-carousel__arrow {
  position: absolute;
  top: 48px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  box-shadow: 0 6px 16px rgba(20, 45, 65, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 2;
}

.teaser-carousel__arrow:hover {
  transform: scale(1.08);
}

.teaser-carousel__arrow.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.teaser-carousel__arrow--prev {
  left: -8px;
}

.teaser-carousel__arrow--next {
  right: -8px;
}

@media (max-width: 480px) {
  .teaser-carousel__arrow--prev {
    left: -4px;
  }

  .teaser-carousel__arrow--next {
    right: -4px;
  }
}

/* ─── CTA band ────────────────────────────────────────────────────────── */

.cta-band {
  padding: 40px 0 64px;
  margin-top: 24px;
}

/* ─── Email capture ───────────────────────────────────────────────────── */

.email-capture {
  max-width: 420px;
}

.email-capture__label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}

.email-capture__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.email-capture__input {
  flex: 1 1 220px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--bg-raised);
  color: var(--ink);
}

.email-capture__input::placeholder {
  color: var(--ink-soft);
}

.email-capture__input:focus {
  outline: 2px solid var(--brand-text);
  outline-offset: 1px;
}

.email-capture__button {
  border-radius: 999px;
  border: none;
  background: var(--brand);
  color: var(--brand-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  cursor: pointer;
}

.email-capture__button:hover {
  filter: brightness(1.1);
}

/* ─── Page header (team / world / updates) ───────────────────────────── */

.page-header {
  padding: 48px 0 32px;
}

.page-header__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--ink);
}

.page-header__lead {
  color: var(--ink-soft);
  margin: 0;
}

/* ─── Character card grid (team page) ────────────────────────────────── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
  padding-bottom: 64px;
}

.flip-card {
  position: relative;
  aspect-ratio: 848 / 1264;
  perspective: 1600px;
  cursor: pointer;
  scroll-margin-top: 90px;
  border-radius: var(--radius);
}

.flip-card:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 4px;
  border-radius: var(--radius);
}

.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card[aria-pressed="true"] .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card:hover .flip-card__inner {
  transform: translateY(-4px);
}

.flip-card[aria-pressed="true"]:hover .flip-card__inner {
  transform: rotateY(180deg) translateY(-4px);
}

.flip-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 45, 65, 0.18);
  display: flex;
  flex-direction: column;
}

.flip-card__face--front {
  background-size: cover;
  background-position: center;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 0 16px 26px;
}

.flip-card__face--back {
  transform: rotateY(180deg);
  background-image: url('/images/cards/card-template.jpg');
  background-size: cover;
  background-position: center;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 36px 22px 24px;
}

.flip-card__face--back::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 20, 0.74);
}

.flip-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card-color, var(--brand));
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.flip-card__flip-hint {
  position: absolute;
  top: 14px;
  left: 16px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.flip-card__title {
  position: relative;
}

.flip-card__name {
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65), 0 0 24px rgba(0, 0, 0, 0.4);
  margin: 0;
}

.flip-card__vocation {
  font-family: var(--font-display);
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 600;
  color: var(--brand);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  margin: 4px 0 0;
}

.flip-card__back-name {
  position: relative;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
}

.flip-card__tagline {
  position: relative;
  flex: 0 0 auto;
  font-style: italic;
  color: #fff;
  font-size: 15px;
  margin: 0;
}

.flip-card__bio {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

.flip-card__bio::-webkit-scrollbar {
  width: 5px;
}

.flip-card__bio::-webkit-scrollbar-track {
  background: transparent;
}

.flip-card__bio::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}

/* ─── Prose (world page) ──────────────────────────────────────────────── */

.prose {
  padding: 8px 0 64px;
  font-size: 17px;
}

.prose p {
  margin: 0 0 18px;
}

.prose h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--brand-text);
  margin: 40px 0 16px;
}

.prose h2:first-child {
  margin-top: 0;
}

.map-figure {
  margin: 0 0 28px;
}

.map-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 8px 30px rgba(20, 45, 65, 0.12);
}

.map-figure figcaption {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 10px;
}

.callout {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-cosmic);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 28px;
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  box-shadow: 0 2px 12px rgba(20, 45, 65, 0.05);
}

.callout__cite {
  display: inline-block;
  margin-top: 8px;
  font-style: normal;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ─── Roadmap (updates page) ──────────────────────────────────────────── */

.roadmap {
  padding-bottom: 16px;
}

.roadmap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.roadmap-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.roadmap-item__status {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.roadmap-item--done .roadmap-item__status {
  background: #e4f6e9;
  color: #1e7a3d;
}

.roadmap-item--progress .roadmap-item__status {
  background: #fff2d9;
  color: #a15c00;
}

.roadmap-item--idea .roadmap-item__status {
  background: #ece8fb;
  color: #6a4fc7;
}

.roadmap-item__text {
  font-size: 15px;
}

/* ─── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .site-header__inner {
    justify-content: center;
    text-align: center;
  }

}

/* ─── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero__scrim,
  .hero__inner,
  .hero__eyebrow,
  .hero__mark,
  .hero__title {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}