@import url("../../tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + var(--space-md)); }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  padding-bottom: 4.75rem;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.2em; }
a:active { color: var(--color-accent-deep); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled, button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; margin: 0; overflow-wrap: anywhere; min-width: 0; }
h1, h2 { letter-spacing: -0.035em; line-height: 1.12; }
h3 { letter-spacing: -0.015em; line-height: 1.25; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
section[id] { scroll-margin-top: calc(var(--bar-h) + var(--space-lg)); }
::selection { background: var(--color-gold); color: var(--color-coal); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.skip-link {
  background: var(--color-coal);
  color: var(--color-paper);
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  position: fixed;
  transform: translateY(-160%);
  transition: transform var(--dur-short) var(--ease-out);
  z-index: var(--z-tooltip);
}
.skip-link:focus { transform: none; }
.visually-hidden {
  block-size: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}
.container { inline-size: min(100%, var(--container)); margin-inline: auto; padding-inline: clamp(var(--space-md), 4vw, var(--space-xl)); }
.narrow { max-inline-size: 52rem; }
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--paper-2 { background: var(--color-paper-2); color: var(--color-ink); }
.section--coal { background: var(--color-coal); color: var(--color-paper); }
.section-head { display: grid; gap: var(--space-md); margin-block-end: var(--space-xl); max-inline-size: 54rem; }
.section-head h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl)); }
.section-head p { color: var(--color-muted); max-inline-size: 64ch; }
.section--coal .section-head p { color: var(--color-rule); }
.meta-line { color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.rule-title { align-items: end; border-block-end: var(--rule-bold) solid var(--color-ink); display: flex; gap: var(--space-md); justify-content: space-between; padding-block-end: var(--space-sm); }

.site-header { inset: 0 0 auto; position: fixed; transform: translateY(0); transition: transform var(--dur-long) var(--ease-out); z-index: var(--z-sticky); }
.site-header.is-compact { transform: translateY(calc(var(--banner-h) * -1)); }
.site-header.is-dismissed { transform: none; }
.site-header.is-dismissed .notice-bar { display: none; }
.notice-bar {
  align-items: center;
  background: var(--color-coal);
  block-size: var(--banner-h);
  color: var(--color-paper);
  display: flex;
  justify-content: center;
  padding-inline: var(--space-md);
  position: relative;
}
.notice-bar p { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-bar a { align-items: center; color: var(--color-gold); display: inline-flex; font-weight: 700; min-block-size: 2.75rem; white-space: nowrap; }
.notice-close {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-paper);
  cursor: pointer;
  display: flex;
  inline-size: 2.75rem;
  inset-inline-end: var(--space-xs);
  justify-content: center;
  min-block-size: 2.75rem;
  position: absolute;
}
.nav-shell { background: var(--color-paper); border-block-end: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); }
.nav-inner { align-items: center; block-size: var(--bar-h); display: grid; gap: var(--space-lg); grid-template-columns: auto minmax(0, 1fr) auto; }
.brand { align-items: center; display: inline-flex; font-family: var(--font-display); font-size: var(--text-md); font-weight: 800; gap: var(--space-xs); min-block-size: 2.75rem; text-decoration: none; white-space: nowrap; }
.brand-mark { border: var(--rule-hair) solid var(--color-gold-deep); color: var(--color-gold-deep); display: grid; font-family: var(--font-display); font-size: var(--text-sm); inline-size: 2rem; min-block-size: 2rem; place-items: center; transform: rotate(-3deg); }
.nav-links { align-items: center; display: none; gap: clamp(var(--space-sm), 2vw, var(--space-lg)); justify-content: center; }
.nav-links a { align-items: center; display: inline-flex; font-size: var(--text-sm); font-weight: 700; min-block-size: 2.75rem; min-inline-size: 2.75rem; padding-block: var(--space-sm); text-decoration: none; white-space: nowrap; }
.nav-links a[aria-current="page"], .nav-links a:hover { color: var(--color-accent-deep); }
.nav-actions { align-items: center; display: flex; gap: var(--space-xs); justify-self: end; }
.menu-toggle { background: transparent; border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); cursor: pointer; min-block-size: 2.75rem; padding-inline: var(--space-sm); white-space: nowrap; }
.mobile-menu { background: var(--color-paper); border-block-end: var(--rule-bold) solid var(--color-ink); display: none; padding: var(--space-md); }
.mobile-menu.is-open { display: grid; }
.mobile-menu a { border-block-end: var(--rule-hair) solid var(--color-rule-2); font-weight: 700; min-block-size: 3rem; padding-block: var(--space-sm); text-decoration: none; white-space: nowrap; }

.btn {
  align-items: center;
  border: var(--rule-bold) solid var(--color-ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  gap: var(--space-xs);
  justify-content: center;
  min-block-size: 2.875rem;
  padding-inline: var(--space-lg);
  position: relative;
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}
.btn--primary { background: var(--color-accent); border-color: var(--color-accent-deep); color: var(--color-accent-ink); overflow: hidden; }
.btn--primary::after {
  background: var(--color-paper);
  content: "";
  inset: -30% auto -30% -18%;
  opacity: 0.28;
  position: absolute;
  transform: skewX(-20deg) translateX(-220%);
  transition: transform var(--dur-long) var(--ease-out);
  inline-size: 20%;
}
.btn--secondary { background: var(--color-paper); color: var(--color-ink); }
.btn--gold { background: var(--color-gold); border-color: var(--color-gold-deep); color: var(--color-coal); }
.btn[aria-disabled="true"], .btn:disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none; }
.btn[data-state="loading"]::before { border: var(--rule-bold) solid currentColor; border-block-start-color: transparent; border-radius: var(--radius-round); content: ""; inline-size: 1rem; block-size: 1rem; animation: spin 1s linear infinite; }
.btn[data-state="error"] { background: var(--color-error); border-color: var(--color-error); color: var(--color-paper); }
.btn[data-state="success"] { background: var(--color-success); border-color: var(--color-success); color: var(--color-paper); }
@keyframes spin { to { transform: rotate(1turn); } }
@media (hover: hover) and (pointer: fine) {
  .btn:not(.btn--primary):hover { transform: translateY(-1px); }
  .btn--primary:hover::after { transform: skewX(-20deg) translateX(700%); }
}
.btn:active { transform: translateY(1px); }

.hero { min-block-size: 47rem; padding-block-start: calc(var(--banner-h) + var(--bar-h)); position: relative; }
.hero-media { inset: 0; overflow: hidden; position: absolute; }
.hero-media img { block-size: 100%; inline-size: 100%; object-fit: cover; object-position: center; transform: scale(1.035); animation: hero-breathe 18s var(--ease-in-out) infinite alternate; }
.hero-media::after { background: linear-gradient(90deg, var(--color-overlay) 0%, var(--color-overlay-soft) 58%, var(--color-overlay) 100%); content: ""; inset: 0; position: absolute; }
@keyframes hero-breathe { to { transform: scale(1.055); } }
.hero-inner { align-items: end; display: grid; min-block-size: calc(47rem - var(--banner-h) - var(--bar-h)); padding-block: var(--space-2xl) var(--space-3xl); position: relative; z-index: var(--z-raised); }
.hero-copy { color: var(--color-paper); display: grid; gap: var(--space-lg); max-inline-size: 54rem; }
.hero-logo { inline-size: min(26rem, 76%); max-block-size: 10rem; object-fit: cover; object-position: center; }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tag { background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-round); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; padding: var(--space-2xs) var(--space-sm); white-space: nowrap; }
.hero .tag { background: var(--color-coal); border-color: var(--color-gold); color: var(--color-paper); }
.hero h1 { font-size: var(--text-display); max-inline-size: 16ch; text-shadow: 0 1px 1px var(--color-coal); }
.hero-subtitle { font-size: clamp(var(--text-base), 2vw, var(--text-md)); max-inline-size: 48ch; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero-facts { border-block-start: var(--rule-hair) solid var(--color-gold); display: grid; gap: var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block-start: var(--space-md); }
.hero-fact { display: grid; gap: var(--space-3xs); }
.hero-fact dt { color: var(--color-rule); font-size: var(--text-sm); }
.hero-fact dd { font-weight: 800; margin: 0; }
.dialogue-box { background: var(--color-coal); border: var(--rule-hair) solid var(--color-gold); color: var(--color-paper); display: grid; gap: var(--space-sm); margin-block-start: calc(var(--space-xl) * -1); margin-inline: auto; max-inline-size: 70rem; padding: var(--space-lg); position: relative; z-index: var(--z-raised); }
.dialogue-name { color: var(--color-gold); font-family: var(--font-display); font-weight: 800; }
.choice-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.choice-row a { background: var(--color-coal-2); border: var(--rule-hair) solid var(--color-gold-deep); color: var(--color-paper); font-size: var(--text-sm); font-weight: 700; min-block-size: 2.75rem; padding: var(--space-xs) var(--space-sm); text-decoration: none; white-space: nowrap; }

.info-grid { border-block: var(--rule-bold) solid var(--color-ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-item { border-block-end: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-2xs); padding: var(--space-md); }
.info-item dt { color: var(--color-muted); font-size: var(--text-sm); }
.info-item dd { font-weight: 800; margin: 0; }

.story-layout { display: grid; gap: var(--space-xl); }
.story-copy { display: grid; gap: var(--space-lg); font-size: var(--text-md); line-height: 1.8; max-inline-size: 64ch; }
.story-figure { align-self: start; margin: 0; position: relative; }
.story-figure img { aspect-ratio: 4 / 3; inline-size: 100%; object-fit: cover; }
.story-figure figcaption { background: var(--color-coal); color: var(--color-paper); font-size: var(--text-sm); padding: var(--space-sm); }

.quest-map { background: var(--color-paper-2); border: var(--rule-bold) solid var(--color-ink); display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); position: relative; }
.map-node { background: var(--color-paper); border-block-end: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-xs); min-block-size: 9rem; padding: var(--space-lg); position: relative; }
.map-node:last-child { border-block-end: 0; }
.map-node h3 { font-size: var(--text-lg); }
.map-node p { color: var(--color-muted); }
.map-node::before { background: var(--color-gold); border: var(--rule-bold) solid var(--color-coal); block-size: 0.75rem; content: ""; inline-size: 0.75rem; position: absolute; inset-block-start: var(--space-lg); inset-inline-end: var(--space-lg); transform: rotate(45deg); }
.map-node--choice { background: var(--color-coal); color: var(--color-paper); }
.map-node--choice p { color: var(--color-rule); }
.map-node--choice::before { background: var(--color-accent); border-color: var(--color-paper); }
.map-legend { border-block-start: var(--rule-hair) solid var(--color-rule); display: flex; flex-wrap: wrap; font-size: var(--text-sm); gap: var(--space-lg); padding-block-start: var(--space-md); }
.map-key { align-items: center; display: flex; gap: var(--space-xs); }
.map-key::before { background: var(--color-gold); border: var(--rule-hair) solid var(--color-coal); block-size: 0.65rem; content: ""; inline-size: 0.65rem; transform: rotate(45deg); }
.map-key--choice::before { background: var(--color-accent); }

.feature-grid { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
.feature-card { border-block-start: var(--rule-bold) solid var(--color-ink); display: grid; gap: var(--space-sm); min-block-size: 12rem; padding-block: var(--space-lg); }
.feature-card:nth-child(2n) { background: var(--color-paper-2); padding-inline: var(--space-lg); }
.feature-card h3 { align-items: center; display: flex; font-size: var(--text-lg); gap: var(--space-sm); }
.icon-line { align-items: center; border: var(--rule-hair) solid var(--color-gold-deep); color: var(--color-gold-deep); display: inline-flex; flex: 0 0 auto; inline-size: 2.75rem; justify-content: center; min-block-size: 2.75rem; }
.icon-line svg { block-size: 1.35rem; inline-size: 1.35rem; }
.feature-card p { color: var(--color-muted); }
@media (hover: hover) and (pointer: fine) { .feature-card:hover { box-shadow: 0 0.75rem 1.5rem var(--color-shadow); } }

.media-stage { display: grid; gap: var(--space-md); }
.trailer-card { background: var(--color-coal); color: var(--color-paper); display: grid; grid-template-columns: minmax(0, 1fr); }
.trailer-card img { aspect-ratio: 16 / 9; block-size: 100%; inline-size: 100%; object-fit: cover; }
.trailer-copy { align-content: center; display: grid; gap: var(--space-md); padding: var(--space-lg); }
.trailer-copy p { color: var(--color-rule); }
.gallery-strip { display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-button { background: var(--color-coal); border: 0; cursor: zoom-in; margin: 0; overflow: hidden; padding: 0; position: relative; }
.gallery-button img { aspect-ratio: 4 / 3; inline-size: 100%; object-fit: cover; transition: filter var(--dur-short) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .gallery-button:hover img { filter: brightness(1.08); } }

.route-grid { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
.route-card { border: var(--rule-hair) solid var(--color-gold-deep); display: grid; gap: var(--space-md); padding: var(--space-lg); }
.route-card:nth-child(2) { background: var(--color-coal); color: var(--color-paper); }
.route-card:nth-child(2) p { color: var(--color-rule); }
.route-card > a { align-items: center; display: inline-flex; font-weight: 800; min-block-size: 2.75rem; white-space: nowrap; }
.route-card h3 { color: var(--color-gold-deep); font-size: var(--text-xl); }
.route-card:nth-child(2) h3 { color: var(--color-gold); }

.spec-grid { border: var(--rule-bold) solid var(--color-ink); display: grid; grid-template-columns: minmax(0, 1fr); }
.spec-column { padding: var(--space-lg); }
.spec-column + .spec-column { border-block-start: var(--rule-bold) solid var(--color-ink); }
.spec-column h3 { font-size: var(--text-lg); margin-block-end: var(--space-md); }
.spec-list { display: grid; }
.spec-row { border-block-start: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-2xs); padding-block: var(--space-sm); }
.spec-row dt { color: var(--color-muted); font-size: var(--text-sm); }
.spec-row dd { font-variant-numeric: tabular-nums; font-weight: 700; margin: 0; overflow-wrap: anywhere; }

.audience-grid { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
.audience-card { background: var(--color-paper); border-block-start: var(--rule-bold) solid var(--color-accent-deep); display: grid; gap: var(--space-sm); padding: var(--space-lg); }
.audience-card p { color: var(--color-muted); }

.timeline { border-inline-start: var(--rule-bold) solid var(--color-gold-deep); display: grid; gap: var(--space-xl); margin-inline-start: var(--space-sm); padding-inline-start: var(--space-xl); }
.timeline article { display: grid; gap: var(--space-xs); position: relative; }
.timeline article::before { background: var(--color-gold); border: var(--rule-bold) solid var(--color-coal); border-radius: var(--radius-round); block-size: 1rem; content: ""; inline-size: 1rem; inset-block-start: 0.35rem; inset-inline-start: calc(var(--space-xl) * -1 - 0.58rem); position: absolute; }
.timeline time { color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

.faq-list { border-block-start: var(--rule-bold) solid var(--color-ink); }
.faq-item { border-block-end: var(--rule-hair) solid var(--color-rule); }
.faq-item summary { align-items: center; cursor: pointer; display: flex; font-family: var(--font-display); font-size: var(--text-md); font-weight: 800; gap: var(--space-md); justify-content: space-between; list-style: none; min-block-size: 4rem; padding-block: var(--space-md); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: 0 0 auto; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 400; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { color: var(--color-muted); max-inline-size: 70ch; padding-block: 0 var(--space-lg); }

.final-cta { background: var(--color-coal); color: var(--color-paper); overflow: hidden; padding-block: var(--space-3xl); position: relative; }
.final-cta::before { border: var(--rule-hair) solid var(--color-gold); content: ""; inset: var(--space-lg); pointer-events: none; position: absolute; }
.final-cta-inner { display: grid; gap: var(--space-lg); position: relative; }
.final-cta h2 { font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl)); max-inline-size: 18ch; }
.final-cta p { color: var(--color-rule); max-inline-size: 58ch; }
.fine-print { color: var(--color-rule); font-size: var(--text-sm); }

.page-hero { background: var(--color-coal); color: var(--color-paper); padding-block: calc(var(--banner-h) + var(--bar-h) + var(--space-3xl)) var(--space-2xl); }
.page-hero-grid { align-items: end; display: grid; gap: var(--space-xl); }
.page-hero h1 { font-size: var(--text-display-s); max-inline-size: 15ch; }
.page-hero p { color: var(--color-rule); max-inline-size: 58ch; }
.breadcrumbs { align-items: center; display: flex; flex-wrap: wrap; font-size: var(--text-sm); gap: var(--space-xs); margin-block-end: var(--space-lg); }
.breadcrumbs a { color: var(--color-gold); white-space: nowrap; }
.toc { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-xs); padding: var(--space-lg); }
.toc strong { font-family: var(--font-display); }
.toc a { min-block-size: 2.75rem; padding-block: var(--space-xs); white-space: nowrap; }

.filter-tabs { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-xl); }
.filter-tab { background: var(--color-paper); border: var(--rule-hair) solid var(--color-ink); cursor: pointer; min-block-size: 2.75rem; padding-inline: var(--space-md); white-space: nowrap; }
.filter-tab[aria-selected="true"] { background: var(--color-coal); color: var(--color-paper); }
.gallery-grid { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
.gallery-item { margin: 0; min-width: 0; }
.gallery-item[hidden] { display: none; }
.gallery-item figcaption { color: var(--color-muted); font-size: var(--text-sm); padding-block-start: var(--space-xs); }

.download-grid { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
.download-card { border: var(--rule-bold) solid var(--color-ink); display: grid; gap: var(--space-lg); padding: var(--space-lg); position: relative; }
.download-card--recommended { border-color: var(--color-accent-deep); }
.recommend-badge { background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-sm); font-weight: 800; inset-block-start: 0; inset-inline-end: 0; padding: var(--space-2xs) var(--space-sm); position: absolute; }
.steps { counter-reset: install; display: grid; gap: var(--space-lg); }
.step { border-block-start: var(--rule-bold) solid var(--color-ink); counter-increment: install; display: grid; gap: var(--space-sm); padding-block-start: var(--space-md); }
.step h3::before { color: var(--color-accent-deep); content: counter(install, decimal-leading-zero) ". "; font-variant-numeric: tabular-nums; }
.notice-box { background: var(--color-palm-soft); border: var(--rule-hair) solid var(--color-palm); color: var(--color-ink); padding: var(--space-lg); }

.guide-grid { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
.guide-card { border-block-start: var(--rule-bold) solid var(--color-ink); display: grid; gap: var(--space-sm); padding-block: var(--space-lg); }
.guide-card a { align-items: center; display: inline-flex; font-weight: 800; justify-self: start; min-block-size: 2.75rem; white-space: nowrap; }
.prose { display: grid; gap: var(--space-lg); max-inline-size: 72ch; }
.prose h2 { font-size: var(--text-2xl); padding-block-start: var(--space-xl); }
.prose h3 { font-size: var(--text-lg); padding-block-start: var(--space-md); }
.prose ul, .prose ol { display: grid; gap: var(--space-xs); padding-inline-start: var(--space-lg); }
.prose table { border-collapse: collapse; inline-size: 100%; }
.prose th, .prose td { border-block-end: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm); text-align: start; vertical-align: top; }
.prose th { background: var(--color-paper-2); }

.site-footer { background: var(--color-paper-2); border-block-start: var(--rule-bold) solid var(--color-ink); padding-block-end: 5.5rem; }
.footer-main { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl); }
.footer-intro { display: grid; gap: var(--space-sm); max-inline-size: 34rem; }
.footer-links { display: grid; gap: var(--space-xl); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-links h3 { font-size: var(--text-base); margin-block-end: var(--space-sm); }
.footer-links ul { display: grid; gap: var(--space-xs); list-style: none; }
.footer-links a { align-items: center; display: inline-flex; font-size: var(--text-sm); min-block-size: 2.75rem; min-inline-size: 2.75rem; white-space: nowrap; }
.breadcrumbs a { align-items: center; display: inline-flex; min-block-size: 2.75rem; min-inline-size: 2.75rem; }
.footer-legal { border-block-start: var(--rule-hair) solid var(--color-rule); display: grid; font-size: var(--text-sm); gap: var(--space-xs); padding-block: var(--space-lg); }
.foot-marquee { background: var(--color-coal); color: var(--color-paper); overflow: hidden; }
.foot-marquee-track { animation: foot-marquee 32s linear infinite; display: flex; gap: var(--space-2xl); padding-block: var(--space-md); white-space: nowrap; inline-size: max-content; }
.foot-marquee-track span { font-family: var(--font-display); font-size: var(--text-md); font-weight: 800; letter-spacing: 0.08em; }
.foot-marquee:hover .foot-marquee-track, .foot-marquee:focus-within .foot-marquee-track { animation-play-state: paused; }
@keyframes foot-marquee { to { transform: translateX(-50%); } }

.sticky-cta { align-items: center; background: var(--color-paper); border-block-start: var(--rule-bold) solid var(--color-ink); bottom: 0; display: flex; gap: var(--space-sm); inset-inline: 0; justify-content: space-between; min-block-size: 4.5rem; padding: var(--space-sm) max(var(--space-md), env(safe-area-inset-right)) max(var(--space-sm), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left)); position: fixed; z-index: var(--z-sticky); }
.sticky-cta-copy { display: none; }
.sticky-cta .btn { flex: 1 1 auto; }
.sticky-cta .btn--primary { background: var(--color-gold); border-color: var(--color-gold-deep); color: var(--color-coal); }
.back-to-top { background: var(--color-coal); border: var(--rule-hair) solid var(--color-gold); color: var(--color-paper); cursor: pointer; display: grid; inline-size: 2.875rem; min-block-size: 2.875rem; place-items: center; }

.lightbox { background: transparent; border: 0; inline-size: min(94%, 72rem); max-block-size: 92dvh; padding: 0; }
.lightbox::backdrop { background: var(--color-overlay); }
.lightbox-panel { background: var(--color-coal); color: var(--color-paper); display: grid; gap: var(--space-sm); padding: var(--space-sm); position: relative; }
.lightbox img { inline-size: 100%; max-block-size: 78dvh; object-fit: contain; }
.lightbox figcaption { padding-inline: var(--space-sm); }
.lightbox-close, .lightbox-prev, .lightbox-next { background: var(--color-paper); border: var(--rule-hair) solid var(--color-ink); color: var(--color-ink); cursor: pointer; display: grid; inline-size: 2.875rem; min-block-size: 2.875rem; place-items: center; position: absolute; z-index: var(--z-raised); }
.lightbox-close { inset-block-start: var(--space-md); inset-inline-end: var(--space-md); }
.lightbox-prev { inset-block-start: 50%; inset-inline-start: var(--space-md); }
.lightbox-next { inset-block-start: 50%; inset-inline-end: var(--space-md); }
.video-dialog { background: var(--color-coal); border: var(--rule-hair) solid var(--color-gold); color: var(--color-paper); inline-size: min(94%, 70rem); margin: auto; max-block-size: 90dvh; padding: var(--space-sm); position: fixed; }
.video-dialog::backdrop { background: var(--color-overlay); }
.video-dialog video { aspect-ratio: 16 / 9; inline-size: 100%; }
.video-dialog header { align-items: center; display: flex; justify-content: space-between; padding: var(--space-xs); }
.video-dialog button { background: var(--color-paper); border: var(--rule-hair) solid var(--color-ink); cursor: pointer; min-block-size: 2.75rem; padding-inline: var(--space-sm); white-space: nowrap; }
.video-fallback { color: var(--color-rule); display: none; padding: var(--space-lg); }

@media (min-width: 40rem) {
  .hero-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-strip, .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .feature-card:nth-child(3) { grid-column: 1 / -1; }
  .route-grid, .download-grid, .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-column + .spec-column { border-block-start: 0; border-inline-start: var(--rule-bold) solid var(--color-ink); }
  .sticky-cta-copy { display: grid; font-size: var(--text-sm); }
  .sticky-cta .btn { flex: 0 0 auto; }
  .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  body { padding-bottom: 0; }
  .nav-links { display: flex; }
  .menu-toggle { display: none; }
  .mobile-menu { display: none !important; }
  .hero { min-block-size: 52rem; }
  .hero-inner { min-block-size: calc(52rem - var(--banner-h) - var(--bar-h)); }
  .dialogue-box { grid-template-columns: 8rem minmax(0, 1fr) auto; align-items: center; }
  .info-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .info-item { border-block-end: 0; border-inline-end: var(--rule-hair) solid var(--color-rule); }
  .info-item:last-child { border-inline-end: 0; }
  .story-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .quest-map { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr); grid-template-areas: "family guild kingdom" "town choice truth"; }
  .map-node { border-block-end: var(--rule-hair) solid var(--color-rule); border-inline-end: var(--rule-hair) solid var(--color-rule); }
  .map-node:nth-child(1) { grid-area: family; }
  .map-node:nth-child(2) { grid-area: guild; }
  .map-node:nth-child(3) { grid-area: kingdom; border-inline-end: 0; }
  .map-node:nth-child(4) { grid-area: town; border-block-end: 0; }
  .map-node:nth-child(5) { grid-area: choice; border-block-end: 0; }
  .map-node:nth-child(6) { grid-area: truth; border-block-end: 0; border-inline-end: 0; }
  .feature-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) minmax(0, 1fr); }
  .feature-card:nth-child(3) { grid-column: auto; }
  .trailer-card { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
  .gallery-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-hero-grid { grid-template-columns: 1.3fr 0.7fr; }
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-main { grid-template-columns: 0.8fr 1.2fr; }
  .sticky-cta { border: var(--rule-bold) solid var(--color-ink); bottom: var(--space-md); inset-inline: auto var(--space-md); inline-size: min(36rem, calc(100% - var(--space-xl))); }
  .site-footer { padding-block-end: 0; }
}

@media (min-width: 90rem) {
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
  .hero-media img { animation: none; transform: none; }
  .foot-marquee-track { animation: none; transform: none; }
}