/* ==========================================================================
   COGLANDS landing site
   Build Industry. Forge Nations.

   1. Tokens          6. Premise          11. History
   2. Reset & base    7. Pillars          12. Trailer
   3. Primitives      8. Player-built     13. Devlog
   4. Navigation      9. Industry         14. CTA / FAQ
   5. Hero           10. Nations & map    15. Footer & responsive
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --background-primary: #090A0D;
  --background-secondary: #0E1015;
  --background-elevated: #15171D;
  --background-soft: #1B1D24;

  --purple-dark: #34144E;
  --purple-primary: #8D46C7;
  --purple-bright: #A95FE3;
  --purple-light: #C891F0;

  --brass-dark: #80551D;
  --brass-primary: #C58A32;
  --brass-light: #E3B65C;

  --ink: #EDEBF2;
  --ink-soft: #A9A5B8;
  --ink-dim: #6E6A7D;

  --hair: rgba(197, 138, 50, 0.20);
  --hair-soft: rgba(237, 235, 242, 0.08);

  --display: "Big Shoulders Display", "Big Shoulders", "Oswald", ui-sans-serif, sans-serif;
  --body: "Sora", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --r: 8px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── 2. Reset & base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--background-primary);
  color: var(--ink);
  font: 400 clamp(1rem, .95rem + .25vw, 1.1875rem)/1.7 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--purple-light);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--purple-primary); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200; padding: .75rem 1.5rem;
  background: var(--purple-primary); color: #fff;
  font: 500 .875rem var(--mono); letter-spacing: .04em;
  border-radius: 0 0 var(--r) var(--r);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ── 3. Primitives ─────────────────────────────────────────────────────── */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.section { padding-block: clamp(5rem, 11vw, 9.5rem); }

.eyebrow {
  font: 500 .75rem/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-primary);
  margin-bottom: 1.25rem;
}
.eyebrow--wide { letter-spacing: .34em; color: var(--brass-light); }
.eyebrow--wide span { color: var(--purple-primary); margin-inline: .35em; }

.h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 1.4rem + 4vw, 4rem);
  line-height: .94;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.h2--xl { font-size: clamp(3rem, 1.4rem + 5.6vw, 5.25rem); }

.lede {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-top: 1.5rem;
}

.section p + p { margin-top: 1.15rem; }
.section-head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-head--center { text-align: center; }
.section-head--center .lede { margin-inline: auto; }
.section-head--split {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}

/* buttons */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1.05rem 2.1rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 .9375rem/1 var(--body);
  letter-spacing: .02em;
  border: 1px solid transparent;
  border-radius: var(--r);
  transition: transform .18s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--purple {
  --btn-bg: var(--purple-primary); --btn-fg: #fff;
  box-shadow: 0 0 0 1px rgba(201, 145, 240, .28), 0 14px 34px -14px rgba(141, 70, 199, .9);
}
.btn--purple:hover {
  --btn-bg: var(--purple-bright);
  box-shadow: 0 0 0 1px rgba(201, 145, 240, .5), 0 20px 44px -14px rgba(141, 70, 199, 1);
}

.btn--brass {
  border-color: rgba(197, 138, 50, .55);
  --btn-fg: var(--brass-light);
  background: rgba(197, 138, 50, .06);
}
.btn--brass:hover { border-color: var(--brass-primary); background: rgba(197, 138, 50, .14); }

.btn--ghost {
  border-color: var(--hair-soft);
  background: rgba(237, 235, 242, .03);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: rgba(237, 235, 242, .28); background: rgba(237, 235, 242, .07); }

.btn--sm { padding: .7rem 1.35rem; font-size: .875rem; }
.btn--lg { padding: 1.25rem 2.6rem; font-size: 1rem; }

.link-arrow {
  font: 500 .875rem var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass-primary);
  border-bottom: 1px solid var(--hair);
  padding-bottom: .35rem;
  transition: color .2s, border-color .2s;
}
.link-arrow::after { content: " →"; }
.link-arrow:hover { color: var(--brass-light); border-color: var(--brass-primary); }

/* framed imagery: the cinematic treatment lives here, not on the image */
.frame {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--background-secondary);
}
.frame::after {
  /* Keeps the caption legible without flattening the art underneath it. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(9,10,13,.82) 0%, rgba(9,10,13,0) 30%),
    radial-gradient(120% 80% at 70% 10%, rgba(141,70,199,.18), transparent 62%);
}
.frame__art { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
/* Direct child only: this is the swapped-in screenshot filling the slot. Left
   unscoped it also catches the crest inside a .plate and stretches it. */
.frame__art > img { width: 100%; height: 100%; object-fit: cover; }
.frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.25rem 1.5rem;
  font: 400 .8125rem var(--mono);
  letter-spacing: .06em; color: var(--ink-dim);
}

/* Empty image slot, held until real in-game captures exist. It is meant to read
   as a reserved frame rather than as illustration, so it stays flat: blueprint
   grid, the crest, and a line naming the shot that belongs here. Delete this
   block once every SWAP slot holds a real <img>. */
.plate {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center; gap: 1rem;
  padding: 2rem;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(52,20,78,.5), transparent 66%),
    linear-gradient(180deg, var(--background-elevated), var(--background-primary));
}
.plate::before {
  /* blueprint grid, faded out at the edges so it never reads as a table */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(197,138,50,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,138,50,.09) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(78% 68% at 50% 48%, #000 25%, transparent 100%);
          mask-image: radial-gradient(78% 68% at 50% 48%, #000 25%, transparent 100%);
}
.plate__mark { position: relative; width: 46px; height: auto; opacity: .5; }
.plate__note {
  position: relative;
  max-width: 24ch; text-align: center;
  font: 400 .75rem/1.6 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
}

/* reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ── 4. Navigation ─────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              backdrop-filter .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(9, 10, 13, .78);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--hair);
}
.nav__inner {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.nav__brand { display: flex; align-items: center; gap: .7rem; }
/* logo-nav is the flatter lockup: its lettering is about 28% of the artwork
   height against 20% in the full logo, which is what makes the word survive at
   nav scale. Height-constrained, since the bar is what it has to fit. */
.nav__logo {
  height: 58px; width: auto;
  transition: filter .25s var(--ease);
}
.nav__brand:hover .nav__logo { filter: brightness(1.12); }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav__links > a:not(.btn) {
  font-size: .9375rem; color: var(--ink-soft);
  position: relative; padding-block: .4rem;
  transition: color .2s;
}
.nav__links > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--purple-bright);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__links > a:not(.btn):hover { color: var(--ink); }
.nav__links > a:not(.btn):hover::after { transform: scaleX(1); }
.nav__cta { margin-left: .4rem; }

.nav__toggle {
  display: none; width: 44px; height: 44px;
  background: none; border: 1px solid var(--hair-soft);
  border-radius: 6px; cursor: pointer;
  padding: 0; place-items: center; gap: 5px;
}
.nav__toggle span {
  display: block; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── 5. Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: grid; place-items: center;
  padding: clamp(7rem, 14vh, 10rem) var(--gutter) clamp(5rem, 10vh, 7rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__scene { position: absolute; inset: 0; z-index: -1; }
.hero__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 60% at 50% 92%, rgba(52, 20, 78, .75), transparent 70%),
    linear-gradient(180deg, #090A0D 0%, #0E1015 45%, #14101F 100%);
}
.hero__glow {
  position: absolute; left: 50%; bottom: 8%;
  width: min(120vw, 1500px); aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(141, 70, 199, .42), transparent 74%);
  filter: blur(24px);
  animation: breathe 11s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.07); }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* A band of light low on the horizon. It gives the hero depth without drawing
   anything literal, so a real screenshot can slot in above it unchanged. */
.hero__haze {
  position: absolute; left: 50%; bottom: 0;
  width: 130%; height: 46%;
  transform: translateX(-50%);
  will-change: transform;
  background:
    radial-gradient(60% 100% at 30% 100%, rgba(52,20,78,.55), transparent 70%),
    radial-gradient(50% 100% at 76% 100%, rgba(128,85,29,.22), transparent 72%);
  filter: blur(30px);
}

.hero__particles {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 32%, rgba(227,182,92,.7), transparent),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(201,145,240,.6), transparent),
    radial-gradient(1px 1px at 42% 62%, rgba(237,235,242,.5), transparent),
    radial-gradient(1.5px 1.5px at 88% 54%, rgba(227,182,92,.45), transparent),
    radial-gradient(1px 1px at 24% 78%, rgba(201,145,240,.5), transparent),
    radial-gradient(1.5px 1.5px at 62% 40%, rgba(237,235,242,.35), transparent);
  animation: drift 26s linear infinite;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-40px, -70px, 0); }
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 50% 40%, rgba(9,10,13,.72), transparent 78%),
    linear-gradient(180deg, rgba(9,10,13,.85) 0%, transparent 26%, transparent 62%, var(--background-primary) 99%);
}

.hero__content { position: relative; text-align: center; max-width: 62rem; }
.hero__crest {
  width: clamp(84px, 10vw, 124px); height: auto;
  margin: 0 auto 1.6rem;
  filter: drop-shadow(0 10px 36px rgba(141, 70, 199, .5));
  animation: rise-in .9s var(--ease) both;
}
.hero__title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(3.4rem, 1.2rem + 9vw, 6.5rem);
  line-height: .88; letter-spacing: -.02em; text-transform: uppercase;
  margin-block: .3em .55em;
}
.hero__title .line { display: block; animation: rise-in .9s var(--ease) both; }
.hero__title .line:nth-child(1) { animation-delay: .1s; }
.hero__title .line--brass {
  background: linear-gradient(96deg, var(--brass-light) 0%, var(--brass-primary) 46%, var(--purple-light) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation-delay: .2s;
}
.hero .eyebrow--wide { animation: rise-in .9s var(--ease) .05s both; }
.hero__sub {
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.375rem);
  color: var(--ink-soft); max-width: 44ch; margin-inline: auto;
  animation: rise-in .9s var(--ease) .3s both;
}
.hero__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  margin-top: 2.75rem;
  animation: rise-in .9s var(--ease) .4s both;
}
.hero__status {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem 2.25rem; margin-top: 2.75rem;
  font: 400 .8125rem var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim);
  animation: rise-in .9s var(--ease) .5s both;
}
.hero__status li { display: flex; align-items: center; gap: .6rem; }
.hero__status strong { color: var(--ink-soft); font-weight: 500; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot--live { background: var(--purple-bright); box-shadow: 0 0 0 4px rgba(169,95,227,.16); animation: pulse 2.6s ease-in-out infinite; }
.dot--soon { background: var(--brass-primary); box-shadow: 0 0 0 4px rgba(197,138,50,.14); }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(169,95,227,0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } }

.hero__scroll {
  position: absolute; bottom: 2.25rem; left: 50%; transform: translateX(-50%);
  width: 24px; height: 44px;
}
.hero__scroll-rail {
  position: absolute; inset: 0;
  border: 1px solid var(--hair); border-radius: 12px;
}
.hero__scroll-rail::after {
  content: ""; position: absolute; left: 50%; top: 8px;
  width: 2px; height: 8px; margin-left: -1px; border-radius: 1px;
  background: var(--brass-primary);
  animation: scrolldot 2.2s var(--ease) infinite;
}
@keyframes scrolldot {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(18px); }
}

/* ── 6. Premise ────────────────────────────────────────────────────────── */
.premise { background: var(--background-primary); position: relative; }
.premise__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1.05fr .95fr; align-items: center;
}
.premise__text p { color: var(--ink-soft); }
.premise__text .h2 { margin-bottom: 2rem; }
.premise__figure { align-self: stretch; }
.premise__figure .frame__art { aspect-ratio: 4 / 5; height: 100%; }

/* ── 7. Pillars ────────────────────────────────────────────────────────── */
.pillars {
  background: var(--background-secondary);
  border-block: 1px solid var(--hair-soft);
  position: relative;
}
.pillars::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(197,138,50,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,138,50,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 50% 40%, #000, transparent 78%);
}
.pillars__grid {
  position: relative;
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: var(--hair-soft);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r);
  overflow: hidden;
}
.pillar {
  position: relative;
  background: var(--background-secondary);
  padding: clamp(1.75rem, 3vw, 2.6rem);
  transition: background-color .35s var(--ease);
}
.pillar::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--brass-primary), var(--purple-primary));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.pillar:hover { background: var(--background-elevated); }
.pillar:hover::before { transform: scaleX(1); }
.pillar__icon {
  display: grid; place-items: center;
  width: 58px; height: 58px; margin-bottom: 1.5rem;
  color: var(--brass-primary);
  border: 1px solid var(--hair);
  background: rgba(197, 138, 50, .05);
  /* voxel-cut corner */
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: color .3s, border-color .3s;
}
.pillar__icon svg { width: 34px; height: 34px; }
.pillar:hover .pillar__icon { color: var(--purple-light); border-color: rgba(169,95,227,.45); }
.pillar__title {
  font: 700 clamp(1.5rem, 1.2rem + .7vw, 1.9rem)/1 var(--display);
  letter-spacing: .01em; text-transform: uppercase;
  margin-bottom: .85rem;
}
.pillar p { color: var(--ink-soft); font-size: .9875rem; line-height: 1.65; }
.pillar--quote {
  display: grid; place-items: center; text-align: center;
  background: linear-gradient(150deg, rgba(52,20,78,.5), var(--background-secondary) 70%);
}
.pillar--quote p {
  font: 300 clamp(1.1rem, 1rem + .5vw, 1.35rem)/1.5 var(--body);
  color: var(--ink); max-width: 26ch; text-wrap: balance;
}
.pillar--quote::before { display: none; }

/* ── 8. Player-built world ─────────────────────────────────────────────── */
.empty { background: var(--background-primary); }
.compare { position: relative; }
.compare__viewport {
  position: relative; overflow: hidden;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  --split: 50%;
}
.compare__side { position: absolute; inset: 0; }
.compare__side--before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.compare__tag {
  position: absolute; bottom: 1.5rem; z-index: 3;
  font: 400 .8125rem/1.5 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.compare__tag--left { left: 1.75rem; }
.compare__tag--right { right: 1.75rem; text-align: right; }
.compare__day {
  display: block;
  font: 800 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1 var(--display);
  letter-spacing: .02em; color: var(--ink); margin-bottom: .3rem;
}
.compare__tag--right .compare__day { color: var(--brass-light); }

.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--split);
  width: 2px; margin-left: -1px; z-index: 4;
  background: linear-gradient(180deg, transparent, var(--brass-light) 12%, var(--brass-light) 88%, transparent);
  pointer-events: none;
}
.compare__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(9,10,13,.85); border: 1px solid var(--brass-primary);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 30px -6px rgba(197,138,50,.6);
}
.compare__grip::before, .compare__grip::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-block: 5px solid transparent;
}
.compare__grip::before { left: 11px; transform: translateY(-50%); border-right: 7px solid var(--brass-light); }
.compare__grip::after  { right: 11px; transform: translateY(-50%); border-left: 7px solid var(--brass-light); }

.compare__range {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  appearance: none; background: none;
}
.compare__range::-webkit-slider-thumb { appearance: none; width: 60px; height: 100%; }
.compare__range::-moz-range-thumb { width: 60px; height: 100%; border: 0; }
.compare figcaption {
  margin-top: 1.25rem; text-align: center;
  font: 400 .8125rem var(--mono); letter-spacing: .06em; color: var(--ink-dim);
}

/* The two halves of the slider carry a temperature difference so the drag reads
   as a change even while both sides are still empty plates: cold for the
   untouched world, warm purple for the built one. */
.plate--before { background: linear-gradient(180deg, #16202A 0%, #0C1116 100%); }
.plate--after  { background: linear-gradient(180deg, #2A1740 0%, #0B0C12 100%); }

/* ── 9. Industry ───────────────────────────────────────────────────────── */
.industry {
  position: relative; overflow: hidden;
  padding-block: clamp(6rem, 13vw, 11rem);
  background:
    radial-gradient(80% 70% at 84% 8%, rgba(52,20,78,.7), transparent 66%),
    linear-gradient(180deg, var(--background-primary), var(--background-secondary) 50%, var(--background-primary));
  border-block: 1px solid var(--hair-soft);
}
.industry__bg { position: absolute; inset: 0; color: var(--brass-primary); pointer-events: none; }
/* .07 rather than the .055 this sat at while the cogs turned on a timer. Scroll
   -driven rotation is only worth having if it reads, and coupling it to the
   reader's own input makes it far more noticeable than a slow constant spin,
   so it can afford to stay near the floor of visibility. Tune here. */
.industry__cog { position: absolute; opacity: .07; }
/* The animation shorthands below are the fallback for browsers without
   scroll-driven timelines. Where they are supported, the @supports block at
   the end of this section takes over. */
.industry__cog--a { width: 46vw; max-width: 620px; top: -12%; right: -10%; animation: spin 80s linear infinite; }
.industry__cog--b { width: 26vw; max-width: 340px; bottom: -6%; left: -6%; animation: spin 60s linear infinite reverse; }
.industry__belt {
  /* faded out across the middle so it never cuts through the body copy */
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(197,138,50,.28) 0 14px, transparent 14px 28px);
  opacity: .3;
  mask-image: linear-gradient(90deg, #000, transparent 22%, transparent 78%, #000);
}

/* ── Scroll-driven machinery ───────────────────────────────────────────────
   Create is a mod about rotation: every machine in it is powered by something
   turning. Cogs spinning on a timer say nothing about that, because they turn
   whether or not anyone is there. So the section drives them instead — the
   reader's scroll is the axle. Stop scrolling and the machine stops with you.

   Both cogs and the belt hang off ONE named view timeline declared on
   .industry, rather than each tracking its own position. That matters: the
   cogs sit in opposite corners, so per-element timelines would start and
   finish at different scroll points and the two would visibly drift apart.

   Their rotation counts are the inverse of their rendered widths — 46vw and
   26vw, a ratio of about 1.77, giving 360deg against 637deg in the opposite
   direction. That is how real gears behave: the small one turns further. It
   is a detail almost nobody will consciously register, and the pair would
   look subtly wrong without it. */
.industry {
  view-timeline-name: --industry-run;
  view-timeline-axis: block;
}

@keyframes cog-drive-a { to { transform: rotate(360deg); } }
@keyframes cog-drive-b { to { transform: rotate(-637deg); } }
/* 336px is twelve full 28px periods of the belt's repeating gradient, so the
   travel loops seamlessly however far through the section you are. */
@keyframes belt-drive  { to { background-position-x: 336px; } }

@supports (animation-timeline: view()) {
  .industry__cog--a,
  .industry__cog--b,
  .industry__belt {
    /* Longhands, not the shorthand: omitting a duration from `animation`
       resets it to 0s, and a progress timeline needs `auto` to map the
       animation across the timeline's range. The shorthand would also
       reinstate the `infinite` and `reverse` values set above. */
    animation-duration: auto;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-timeline: --industry-run;
    /* The whole pass: from the section's top edge entering the bottom of the
       viewport to its bottom edge leaving the top. */
    animation-range: cover 0% cover 100%;
  }

  .industry__cog--a { animation-name: cog-drive-a; }
  .industry__cog--b { animation-name: cog-drive-b; }
  .industry__belt   { animation-name: belt-drive; }
}
.industry__inner {
  position: relative;
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1fr 1.1fr; align-items: center;
}
/* .industry is not a .section, so it needs its own paragraph rhythm */
.industry__text p:not(.lede):not(.eyebrow) { color: var(--ink-soft); }
.industry__text p + p { margin-top: 1.15rem; }
.industry__text .h2 { margin-bottom: 1.5rem; }
.industry__list { margin-top: 2.5rem; }
.industry__list li {
  display: flex; gap: 1.1rem; align-items: baseline;
  padding: 1rem .25rem;
  border-top: 1px solid var(--hair-soft);
  font-size: .9875rem; color: var(--ink-soft);
}
.industry__list li:last-child { border-bottom: 1px solid var(--hair-soft); }
.industry__list span {
  font: 500 .75rem var(--mono); color: var(--brass-primary);
  letter-spacing: .1em; flex: none;
}
.industry__figure .frame__art { aspect-ratio: 3 / 2; }

/* ── 10. Nations, diplomacy & map ──────────────────────────────────────── */
.nations { background: var(--background-primary); }
.nations__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: .95fr 1.05fr; align-items: center;
}
.nations__text p:not(.eyebrow) { color: var(--ink-soft); }
.nations__text .h2 { margin-bottom: 1.75rem; }
.nations__figure .frame__art { aspect-ratio: 5 / 4; }

/* progression ladder: players → settlements → towns → nations.
   The accent bar warms from deep purple to brass as the stakes rise. */
.ladder { margin-top: 2.5rem; }
.ladder li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num name" "num desc";
  align-items: baseline;
  gap: .2rem 1.25rem;
  padding: 1.05rem 0 1.05rem 1.25rem;
  border-top: 1px solid var(--hair-soft);
}
.ladder li:last-child { border-bottom: 1px solid var(--hair-soft); }
.ladder li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem; bottom: 1.05rem;
  width: 2px; background: var(--purple-dark);
}
.ladder li:nth-child(2)::before { background: var(--purple-primary); }
.ladder li:nth-child(3)::before { background: var(--purple-bright); }
.ladder li:nth-child(4)::before { background: var(--brass-light); }
.ladder__num {
  grid-area: num; align-self: center;
  font: 500 .75rem var(--mono); letter-spacing: .1em; color: var(--brass-primary);
}
.ladder__name {
  grid-area: name;
  font: 700 clamp(1.2rem, 1.05rem + .5vw, 1.45rem)/1 var(--display);
  letter-spacing: .02em; text-transform: uppercase;
}
.ladder__desc { grid-area: desc; font-size: .875rem; color: var(--ink-soft); }

.diplomacy {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(52,20,78,.55), transparent 70%),
    var(--background-secondary);
  border-block: 1px solid var(--hair-soft);
}
.treaty {
  max-width: 62rem; margin-inline: auto;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: linear-gradient(150deg, rgba(21,23,29,.9), rgba(14,16,21,.9));
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.treaty__crest { color: var(--brass-primary); flex: none; }
.treaty__crest svg { width: clamp(52px, 7vw, 80px); height: auto; }
.treaty__crest--r { color: var(--purple-light); }
.treaty__doc { text-align: center; }
.treaty__label {
  font: 500 .6875rem var(--mono); letter-spacing: .26em;
  text-transform: uppercase; color: var(--brass-primary);
}
.treaty__title {
  font: 700 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1.05 var(--display);
  text-transform: uppercase; margin: .6rem 0 1.75rem;
}
.treaty__terms { display: grid; gap: .7rem; text-align: left; max-width: 46ch; margin-inline: auto; }
.treaty__terms li {
  display: flex; gap: .9rem; font-size: .9375rem; color: var(--ink-soft);
  padding-bottom: .7rem; border-bottom: 1px solid var(--hair-soft);
}
/* wide enough for "IV." without colliding with the clause text */
.treaty__terms span { font: 500 .8125rem var(--mono); color: var(--brass-primary); flex: none; width: 3.5ch; }
.treaty__foot {
  margin-top: 1.5rem;
  font: 400 .75rem var(--mono); letter-spacing: .1em; color: var(--ink-dim);
}
.diplomacy__chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin-top: 2.5rem;
}
.diplomacy__chips li {
  padding: .5rem 1.1rem;
  font: 400 .8125rem var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--hair-soft); border-radius: 4px;
  background: rgba(237,235,242,.02);
}

.worldmap { background: var(--background-primary); }
.map {
  position: relative;
  border: 1px solid var(--hair); border-radius: var(--r);
  background: var(--background-secondary);
  overflow: hidden;
}
/* The map is a wide 16:9 render with baked-in labels, so its text cannot be
   scaled up for narrow screens the way the old SVG's could. Below the width
   where those labels stop being readable it scrolls sideways instead. */
.map__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.map__img { width: 100%; height: auto; }

.map__key {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  padding: 1.15rem 1.5rem;
  border-top: 1px solid var(--hair-soft);
  font: 400 .75rem var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim);
}
.map__key li { display: flex; align-items: center; gap: .6rem; }
/* only meaningful once the map overflows its frame, which is the narrow case */
.map__hint { display: none; color: var(--brass-primary); }
.key { width: 14px; height: 8px; border-radius: 2px; }
.key--claim { background: rgba(141,70,199,.35); border: 1px solid rgba(169,95,227,.7); }
.key--rail  { background: var(--brass-light); height: 2px; }
.key--town  { background: var(--purple-light); width: 8px; height: 8px; border-radius: 50%; }
.key--dark  { background: #14161C; border: 1px solid var(--hair-soft); }

/* ── 11. History ───────────────────────────────────────────────────────── */
.history {
  background:
    radial-gradient(50% 40% at 100% 0%, rgba(52,20,78,.4), transparent 70%),
    var(--background-secondary);
  border-block: 1px solid var(--hair-soft);
}
.timeline {
  position: relative;
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  padding-left: clamp(1.75rem, 4vw, 3rem);
  border-left: 1px solid var(--hair);
}
.tl { position: relative; max-width: 62ch; }
.tl::before {
  content: ""; position: absolute;
  left: calc(clamp(1.75rem, 4vw, 3rem) * -1 - 5px);
  top: .55rem; width: 9px; height: 9px;
  background: var(--brass-primary);
  transform: rotate(45deg);
}
.tl__day {
  font: 500 .75rem var(--mono); letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass-primary);
  margin-bottom: .5rem;
}
.tl__title {
  font: 700 clamp(1.35rem, 1.1rem + 1vw, 1.9rem)/1.15 var(--display);
  text-transform: uppercase; letter-spacing: .005em;
  margin-bottom: .5rem;
}
.tl__body { color: var(--ink-soft); font-size: .9875rem; }
.tl--next { opacity: .55; }
.tl--next::before { background: none; border: 1px solid var(--ink-dim); }

/* ── 12. Trailer ───────────────────────────────────────────────────────── */
.trailer { background: var(--background-primary); }
.player {
  position: relative;
  border: 1px solid var(--hair); border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(141,70,199,.9);
}
.player__facade {
  display: block; position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit;
}
.player__btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: clamp(68px, 9vw, 96px); aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(141,70,199,.9);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(201,145,240,.5), 0 0 60px -10px rgba(141,70,199,1);
  transition: transform .3s var(--ease), background-color .3s;
}
.player__btn svg { width: 40%; margin-left: 8%; }
.player__facade:hover .player__btn { transform: translate(-50%, -50%) scale(1.08); background: var(--purple-bright); }
.player__label {
  position: absolute; left: 0; right: 0; bottom: 1.75rem;
  font: 500 .8125rem var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-soft);
}
.player__label em { color: var(--brass-primary); font-style: normal; margin-left: .8rem; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── 13. Devlog ────────────────────────────────────────────────────────── */
.devlog { background: var(--background-primary); }
.devlog__grid {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(4, 1fr);
}
.post {
  display: block;
  border-bottom: 1px solid var(--hair-soft);
  padding-bottom: 1.5rem;
  transition: border-color .3s;
}
.post:hover { border-color: var(--brass-primary); }
/* SWAP: devlog thumbnails. A flat tinted plate until each post has its own
   image; keep the box and set a background-image on it. */
.post__art {
  display: block; aspect-ratio: 16 / 10; margin-bottom: 1.25rem;
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--hair-soft);
  background: linear-gradient(150deg, var(--background-soft), var(--background-secondary) 72%);
  transition: transform .5s var(--ease), border-color .3s;
}
.post:hover .post__art { transform: scale(1.02); border-color: var(--hair); }
.post__meta {
  display: block;
  font: 400 .75rem var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: .6rem;
}
.post__meta em { color: var(--brass-primary); font-style: normal; }
.post__title {
  font: 700 1.3rem/1.15 var(--display); text-transform: uppercase;
  margin-bottom: .5rem;
  transition: color .25s;
}
.post:hover .post__title { color: var(--purple-light); }
.post__body { font-size: .875rem; color: var(--ink-soft); line-height: 1.6; }

/* ── 14. CTA & FAQ ─────────────────────────────────────────────────────── */
.cta {
  position: relative; overflow: hidden;
  padding-block: clamp(6rem, 13vw, 10rem);
  text-align: center;
  background: var(--background-secondary);
  border-block: 1px solid var(--hair-soft);
}
.cta__glow {
  position: absolute; left: 50%; top: 40%;
  width: min(140vw, 1400px); aspect-ratio: 2/1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(141,70,199,.35), transparent 70%);
  filter: blur(30px);
}
.cta__inner { position: relative; }
.cta .lede { margin-inline: auto; }
.cta__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  margin-top: 2.75rem;
}
.cta__status {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3.5rem;
  margin-top: 3.5rem; padding-top: 2.5rem;
  border-top: 1px solid var(--hair-soft);
}
.cta__status dt {
  font: 400 .75rem var(--mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: .4rem;
}
.cta__status dd {
  font: 700 1.1rem var(--display); letter-spacing: .05em;
  text-transform: uppercase; color: var(--brass-light);
}

.faq { background: var(--background-primary); }
.faq__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: .8fr 1.2fr;
  align-items: start;
}
.faq__head { position: sticky; top: 120px; }
.qa { border-bottom: 1px solid var(--hair-soft); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 0;
  cursor: pointer; list-style: none;
  font: 400 clamp(1.0625rem, 1rem + .3vw, 1.2rem)/1.4 var(--body);
  transition: color .2s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--purple-light); }
.qa summary::after {
  content: ""; flex: none;
  width: 13px; height: 13px;
  border-right: 1.5px solid var(--brass-primary);
  border-bottom: 1.5px solid var(--brass-primary);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .3s var(--ease);
}
.qa[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.qa[open] summary { color: var(--ink); }
.qa__body { padding-bottom: 1.5rem; }
.qa__body p { color: var(--ink-soft); font-size: .9875rem; max-width: 60ch; }
.qa[open] .qa__body { animation: fade-up .35s var(--ease) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(-6px); } }

/* ── 15. Footer ────────────────────────────────────────────────────────── */
.footer {
  background: var(--background-primary);
  border-top: 1px solid var(--hair-soft);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
}
.footer__inner {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr 1.2fr;
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
.footer__logo { width: clamp(150px, 16vw, 190px); height: auto; margin-bottom: .9rem; }
.footer__tag {
  margin-top: .6rem;
  font: 500 .8125rem var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass-primary);
}
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer__cols h2 {
  font: 500 .75rem var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: 1.1rem;
}
.footer__cols li + li { margin-top: .65rem; }
.footer__cols a { font-size: .9375rem; color: var(--ink-soft); transition: color .2s; }
.footer__cols a:hover { color: var(--purple-light); }
.footer__base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--hair-soft);
  font: 400 .75rem var(--mono); letter-spacing: .08em; color: var(--ink-dim);
}

/* ── Document pages (rules / privacy / terms) ──────────────────────────── */
.doc {
  padding-block: clamp(7rem, 14vh, 10rem) clamp(4rem, 9vw, 7rem);
  max-width: 46rem;
}
.doc h1 {
  font: 800 clamp(2.6rem, 1.6rem + 3.4vw, 3.8rem)/.95 var(--display);
  text-transform: uppercase; letter-spacing: -.01em;
  margin-bottom: 1.5rem;
}
.doc h2 {
  font: 700 clamp(1.3rem, 1.1rem + .8vw, 1.6rem)/1.2 var(--display);
  text-transform: uppercase;
  margin: 2.75rem 0 .85rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hair-soft);
}
.doc p, .doc li { color: var(--ink-soft); font-size: .9875rem; }
.doc p + p, .doc ul { margin-top: 1rem; }
.doc ul li { padding-left: 1.4rem; position: relative; }
.doc ul li + li { margin-top: .6rem; }
.doc ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; background: var(--brass-primary); transform: rotate(45deg);
}
.doc__draft {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.1rem 1.35rem; margin-bottom: 2.5rem;
  border: 1px solid rgba(197, 138, 50, .4);
  border-radius: var(--r);
  background: rgba(197, 138, 50, .06);
  font: 400 .875rem/1.6 var(--body); color: var(--brass-light);
}
.doc__draft strong {
  font: 500 .75rem var(--mono); letter-spacing: .18em;
  text-transform: uppercase; flex: none; padding-top: .2rem;
}
.doc__back {
  display: inline-block; margin-top: 3.5rem;
  font: 500 .8125rem var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--brass-primary);
}
.doc__back:hover { color: var(--brass-light); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .pillars__grid { grid-template-columns: repeat(2, 1fr); }
  .devlog__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  html { scroll-padding-top: 76px; }

  .nav__toggle { display: grid; }
  .nav__links {
    position: fixed; inset: 68px 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: rgba(9,10,13,.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--hair);
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links > a:not(.btn) {
    padding: 1rem 0; font-size: 1.1rem;
    border-bottom: 1px solid var(--hair-soft);
  }
  .nav__links > a:not(.btn)::after { display: none; }
  .nav__cta { margin: 1.25rem 0 0; justify-content: center; }

  .premise__grid,
  .industry__inner,
  .nations__grid,
  .faq__grid { grid-template-columns: 1fr; }
  .nations__figure { order: 2; }
  .faq__head { position: static; }
  .premise__figure .frame__art { aspect-ratio: 16 / 10; }

  .treaty { grid-template-columns: 1fr; justify-items: center; }
  .treaty__crest--l { order: -1; }
  .treaty__crest--r { display: none; }

  .compare__viewport { aspect-ratio: 4 / 3; }
  .compare__tag--left { left: 1rem; }
  .compare__tag--right { right: 1rem; }

  .timeline { padding-left: 1.5rem; }
  .tl::before { left: -1.5rem; margin-left: -4px; }

  .footer__inner { grid-template-columns: 1fr; }

}

@media (max-width: 620px) {
  .pillars__grid, .devlog__grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero__scroll { display: none; }
  .btn { width: 100%; justify-content: center; }
  .nav__cta { width: auto; }
  .hero__actions, .cta__actions { flex-direction: column; align-items: stretch; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .map__key { gap: .75rem 1.25rem; font-size: .6875rem; }
  .map__img { width: 720px; max-width: none; }
  .map__hint { display: flex; }
  /* Both tags sit along the bottom edge on desktop. At this width their
     descriptor lines are wider than half the viewport and collide, so the
     Day 1 tag moves to the top of the frame. */
  .compare__tag { font-size: .6875rem; max-width: 46%; }
  .compare__tag--left { bottom: auto; top: 1.25rem; }
}

/* ── Motion preferences ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__haze { transform: translateX(-50%) !important; }

  /* The blanket rule above sets animation-duration, which a progress timeline
     ignores in favour of its scroll range — so the machinery would keep
     turning. Switch it off by name instead. */
  .industry__cog,
  .industry__belt {
    animation: none !important;
  }
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
  .nav, .hero__scene, .hero__scroll, .player__btn { display: none; }
  body { background: #fff; color: #000; }
}