@import url("tokens.css");

html,
body {
  overflow-x: clip;
}

html {
  scroll-padding-block-start: var(--nav-height);
  background: var(--color-paper);
}

body {
  min-width: 0;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
}

:root {
  --ink: var(--color-paper);
  --ink-soft: var(--color-paper-2);
  --panel: var(--color-paper-2);
  --panel-light: var(--color-paper-3);
  --paper: var(--color-ink);
  --paper-soft: var(--color-ink-2);
  --muted: var(--color-muted);
  --gold: var(--color-accent);
  --gold-bright: var(--color-accent-strong);
  --gold-dim: var(--color-muted);
  --red: var(--color-vermilion);
  --red-hot: var(--color-vermilion-bright);
  --line: var(--color-rule-2);
  --line-hot: var(--color-rule);
  --max: var(--content-max);
  --nav-h: var(--nav-height);
  --serif: var(--font-display);
  --sans: var(--font-body);
  --ease: var(--ease-out);
}

img,
video {
  max-width: 100%;
}

a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}

a,
button,
.button,
.battle-tab,
.faq-item summary {
  min-height: 2.75rem;
}

a,
button,
.button,
.nav-cta,
.footer-links a,
.battle-tab strong,
.faq-item summary {
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

button:active:not(:disabled),
a:active:not([aria-disabled="true"]),
.faq-item summary:active {
  color: var(--color-ink);
}

button:disabled,
.button[aria-disabled="true"],
a[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.wrap {
  width: min(var(--content-max), calc(100% - (var(--page-gutter) * 2)));
}

.skip-link {
  z-index: var(--z-tooltip);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-body);
}

/* N9 · Edge-aligned minimal. The trailer, not the navigation, owns the fold. */
.site-nav {
  position: relative;
  z-index: var(--z-sticky);
  min-height: var(--nav-height);
  background: var(--color-paper);
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
  box-shadow: none;
  backdrop-filter: none;
}

.site-nav__inner {
  min-height: var(--nav-height);
  gap: var(--space-lg);
}

.brand {
  gap: var(--space-sm);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.brand__mark {
  width: var(--space-sm);
  height: var(--space-sm);
  background: var(--color-vermilion);
  box-shadow: none;
}

.nav-utilities {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-inline-start: auto;
}

.language-switcher {
  margin: 0;
  padding: var(--space-3xs);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}

.language-switcher button {
  min-height: 2.25rem;
  color: var(--color-muted);
  font-family: var(--font-label);
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

.language-switcher button:is(:hover, :focus-visible) {
  color: var(--color-ink);
}

.language-switcher button.is-selected,
.language-switcher button[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.nav-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-button);
  color: var(--color-accent-strong);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.nav-cta:is(:hover, :focus-visible),
.button:is(:hover, :focus-visible) {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.nav-cta:active,
.button:active {
  transform: translateY(1px);
}

.button--gold {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: none;
}

.button--gold:is(:hover, :focus-visible) {
  background: var(--color-accent-strong);
  box-shadow: none;
}

.button--red {
  background: transparent;
  color: var(--color-vermilion-bright);
  border-color: var(--color-vermilion);
}

/* Marquee Hero · supplied trailer is the subject, kept at native 16:9 with no crop. */
.hero--trailer {
  display: block;
  min-height: 0;
  overflow: visible;
  background: var(--color-media);
  border-block-end: var(--rule-strong) solid var(--color-accent);
}

.trailer-marquee {
  width: 100%;
  background: var(--color-media);
}

.trailer-marquee__frame {
  display: grid;
  place-items: center;
  width: 100%;
  height: min(calc(100svh - var(--nav-height) - var(--space-2xl)), 56.25vw);
  min-height: 24rem;
  overflow: hidden;
  background: var(--color-media);
}

.trailer-video--hero {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--color-media);
}

.trailer-marquee__caption {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  align-items: baseline;
  gap: var(--space-lg);
  width: min(var(--content-max), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  padding-block: var(--space-md) var(--space-lg);
}

.trailer-marquee__caption h1 {
  min-width: 0;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: normal;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.trailer-marquee__caption h1 small {
  display: block;
  margin-block-start: var(--space-2xs);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.trailer-marquee__caption p {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-xs);
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* F4 · The repository's causal architecture is presented as one player-facing sequence. */
.campaign-spine {
  padding-block: var(--space-4xl) var(--space-3xl);
  background: var(--color-paper-2);
}

.campaign-spine__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(18rem, 0.82fr);
  align-items: start;
  gap: clamp(var(--space-2xl), 8vw, var(--space-4xl));
}

.campaign-spine__statement {
  max-width: 46rem;
}

.campaign-spine__statement h2,
.section-heading h2,
.split-layout__copy h2,
.cta-card h2,
.site-footer__statement {
  min-width: 0;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-style: normal;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.campaign-spine__statement h2 em,
.section-heading h2 em,
.split-layout__copy h2 em {
  color: var(--color-accent);
  font-style: normal;
}

.campaign-spine__statement > p:not(.hero__fine) {
  max-width: 62ch;
  margin-block: var(--space-xl);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.6;
}

.campaign-spine__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.campaign-spine__steps li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
}

.campaign-spine__steps li > span {
  color: var(--color-vermilion-bright);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.campaign-spine__steps strong {
  display: block;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.1;
}

.campaign-spine__steps p {
  margin: var(--space-xs) 0 0;
  color: var(--color-muted);
  line-height: 1.55;
}

.hero__actions {
  gap: var(--space-sm);
}

.hero__fine {
  color: var(--color-muted);
}

/* S2 · Section heads hang in negative space; decorative eyebrows are suppressed. */
.section-heading {
  display: block;
  max-width: 58rem;
  margin: 0;
  padding-block: var(--space-3xl) var(--space-xl);
}

.section-heading--center {
  margin-inline: auto;
  text-align: start;
}

.section-heading .kicker,
.split-layout__copy > .kicker {
  display: none;
}

.section-heading__lede {
  max-width: 62ch;
  margin: var(--space-lg) 0 0;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.6;
}

.section {
  color: var(--color-ink-2);
}

.section--field,
.section--campaign,
.section--faq,
.section--houses {
  background: var(--color-paper);
}

.section--china,
.section--embers,
.section--destiny {
  background: var(--color-paper-2);
}

.media-frame,
.battle-console,
.china-brief,
.faq-list,
.cta-card {
  border-color: var(--color-rule);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.battle-console__intel,
.china-brief__item,
.cta-card {
  background: var(--color-paper-2);
}

.battle-tab,
.battle-readout,
.faq-item summary,
.faq-item p,
.check-list li,
.lead,
.proof-line,
.duel-callout p {
  font-family: var(--font-body);
}

.battle-tab {
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}

.battle-tab.is-selected {
  background: var(--color-paper-3);
}

.faces figure,
.faces img {
  transition: none;
}

.faces figure:hover {
  transform: none;
}

.faces figure:is(:hover, :focus-within) img {
  border-color: var(--color-vermilion-bright);
  box-shadow: none;
}

.faq-item summary::after {
  border-radius: var(--radius-button);
}

.site-footer {
  padding-block: var(--space-3xl) var(--space-xl);
  background: var(--color-paper-2);
  border-block-start: var(--rule-strong) solid var(--color-accent);
}

.site-footer__grid {
  gap: var(--space-xl);
}

.site-footer__statement {
  max-width: 24ch;
}

.site-footer__grid > div:nth-child(2) {
  padding-block-start: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.footer-links {
  gap: var(--space-sm) var(--space-lg);
}

.footer-links a {
  color: var(--color-muted);
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 60rem) {
  .campaign-spine__grid,
  .trailer-marquee__caption {
    grid-template-columns: minmax(0, 1fr);
  }

  .trailer-marquee__caption p {
    justify-content: flex-start;
  }
}

@media (max-width: 40rem) {
  :root {
    --page-gutter: var(--space-md);
    --nav-height: 3.75rem;
  }

  .brand span:last-child {
    display: none;
  }

  .nav-utilities {
    gap: var(--space-sm);
  }

  .nav-cta {
    padding-inline: var(--space-sm);
    font-size: var(--text-xs);
  }

  .language-switcher__label {
    display: none;
  }

  .trailer-marquee__frame {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .trailer-marquee__caption {
    gap: var(--space-sm);
    padding-block: var(--space-md);
  }

  .trailer-marquee__caption h1 {
    font-size: var(--text-lg);
  }

  .trailer-marquee__caption p span:last-child {
    flex-basis: 100%;
  }

  .campaign-spine {
    padding-block: var(--space-3xl);
  }

  .campaign-spine__statement h2,
  .section-heading h2,
  .split-layout__copy h2,
  .cta-card h2,
  .site-footer__statement {
    font-size: clamp(2.5rem, 12vw, 3.5rem);
  }

  .campaign-spine__statement > p:not(.hero__fine),
  .section-heading__lede {
    font-size: var(--text-base);
  }

  .campaign-spine__grid {
    gap: var(--space-2xl);
  }

  .hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__actions .button {
    width: 100%;
  }

  .battle-tab small {
    display: none;
  }

  .section-heading {
    padding-block: var(--space-2xl) var(--space-lg);
  }
}

@media (max-width: 22rem) {
  .nav-cta {
    display: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover,
  .button:hover {
    transform: translateY(-1px);
  }
}

@media (pointer: coarse) {
  .nav-cta,
  .button,
  .language-switcher button,
  .battle-tab,
  .faq-item summary {
    min-height: 3rem;
  }
}

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

  .nav-cta:is(:hover, :active),
  .button:is(:hover, :active) {
    transform: none;
  }
}