/* ===========================================================
   SOLESIDO — cinematic layer
   Loads after styles.css. Additive: no markup changes required,
   no existing class renamed. Deleting this file restores the
   original look exactly.
   =========================================================== */

:root {
  /* Display face with real character. Palatino Linotype and Constantia
     both ship on Windows, so the intended look lands for this audience
     with no webfont download and no CDN. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", Constantia, Georgia, serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui,
               -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-label: "Segoe UI Variable Small", "Segoe UI", system-ui, sans-serif;

  /* Deeper ground, warmer brass. More contrast top-to-bottom. */
  --deep: #050B07;
  --deep-2: #0A130D;
  --brass-lit: #E7BE64;
  --leaf-lit: #93D06E;

  --lift-1: 0 1px 2px rgba(0,0,0,.34), 0 8px 22px rgba(0,0,0,.30);
  --lift-2: 0 2px 5px rgba(0,0,0,.36), 0 20px 50px rgba(0,0,0,.38);
  --lift-3: 0 6px 14px rgba(0,0,0,.40), 0 40px 96px rgba(0,0,0,.52);

  --edge: rgba(240,216,144,.16);
  --edge-lit: rgba(240,216,144,.34);

  --ease: cubic-bezier(.16,.84,.30,1);
}

/* ---------- Ground & atmosphere ---------------------------- */

body {
  background: var(--deep);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A whisper of grain over the whole page. Stops the large flat
   greens from banding and gives the dark areas some tooth. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
</filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ---------- Typography: give it real scale ----------------- */

h1, h2, h3,
.hero-copy-inner h1, .section-heading h2, .bulletin-body h2,
.feature-copy h2, .guide-book-body h2, .creator-copy h2,
.final-cta h2, .economy-card h3, .resource-body h3, .chain-copy h3,
.arrivals-copy h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.022em;
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Sized against the hero panel, not the viewport: the panel is roughly
   half the screen, so viewport-relative units overshoot badly here. */
.hero-copy-inner h1 {
  font-size: clamp(40px, 3.9vw, 68px);
  line-height: 1.0;
  letter-spacing: -.032em;
  margin-bottom: .3em;
}
.section-heading h2,
.arrivals-copy h2 {
  font-size: clamp(36px, 4.3vw, 68px);
  line-height: 1.04;
}
/* These two live in half-width columns, so they need their own scale —
   the full-width size wraps them to four ragged lines. */
.feature-copy h2 { font-size: clamp(32px, 3.2vw, 52px); line-height: 1.06; }
.section-heading--split h2 { font-size: clamp(34px, 3.5vw, 56px); }
.section-heading--split { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .62fr); }

.final-cta h2 { font-size: clamp(38px, 4.8vw, 78px); line-height: 1.02; }

.section-heading > p, .section-heading--split > p,
.feature-copy p, .hero-lead, .creator-copy p,
.guide-book-body > p, .arrivals-copy p {
  max-width: 62ch;
  font-size: clamp(16px, 1.15vw, 18.5px);
  line-height: 1.66;
  color: var(--ink-soft);
}

/* The creator section is the one PARCHMENT panel on an otherwise dark page, so
   the shared dark-background ink above must not reach it -- same specificity,
   later file, it was winning and rendering the story at 1.12:1 (invisible).
   Ratios below are measured against the panel's own #e7dcc0. */
.creator-copy > p             { color: #524b3b; }  /* 6.34:1 */
.creator-copy .section-kicker { color: #3f5a2b; }  /* 5.68:1 -- was #5a783f at 3.67:1 */
.creator-copy em              { color: #604725; }  /* 6.35:1 */
.creator-copy .text-link      { color: #5a3f1d; }  /* 7.12:1 */

.hero-lead { font-size: clamp(17px, 1.3vw, 21px); color: #E3EADF; max-width: 54ch; }
.hero-lead strong { color: var(--brass-lit); font-weight: 600; }

/* The base sheet shouts: dozens of 9–10px, 900-weight, wide-tracked
   uppercase labels all competing. Bring them down to a whisper. */
.section-kicker, .eyebrow, .bulletin-kicker, .world-strip span,
.chain-tabs span, .image-stamp, .capture-note, .economy-card span,
.creator-photo span, .window-titlebar, .chain-status, .screen-label,
.gallery-controls span, .capture-corner {
  font-family: var(--font-label);
  font-weight: 650;
  letter-spacing: .09em;
}
.section-kicker {
  font-size: 11.5px;
  color: var(--brass-lit);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* A short brass rule before each kicker — a consistent editorial tell. */
.section-kicker::before {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-lit));
  flex: none;
}
.world-strip span { font-size: 10.5px; letter-spacing: .1em; }
.window-titlebar { font-size: 10.5px; letter-spacing: .13em; }
.chain-tabs span { font-size: 10px; }

.world-strip strong, .chain-data dd, .arrivals-facts b {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
blockquote { font-family: var(--font-display); font-style: italic; letter-spacing: -.006em; }

/* ---------- Hero: cinematic ------------------------------- */

.hero { position: relative; }
/* Deep vignette so the panel edges melt into the page instead of
   sitting on a flat rectangle of screenshot. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 20%, transparent 30%, rgba(3,8,5,.62) 100%),
    linear-gradient(180deg, rgba(3,8,5,.55) 0%, transparent 22%, transparent 62%, var(--deep) 99%);
}
.hero-image { transform: scale(1.06); transform-origin: 50% 35%; }

.hero-copy.game-window { box-shadow: var(--lift-3); }
.hero-bulletin.game-window { box-shadow: var(--lift-3); }

.hero-logo { filter: drop-shadow(0 18px 34px rgba(0,0,0,.55)); }

/* ---------- Depth on every card --------------------------- */

.capture, .economy-card, .ecology-pair figure,
.gallery-rail button, .mini-ledger > div, .arrivals-media {
  box-shadow: var(--lift-1);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.capture:hover, .economy-card:hover, .ecology-pair figure:hover,
.gallery-rail button:hover {
  transform: translateY(-6px);
  box-shadow: var(--lift-3);
}
.game-window { box-shadow: var(--lift-2); }

/* Scrim under every caption so text never fights the artwork. */
.capture figcaption, .ecology-pair figcaption {
  background: linear-gradient(180deg, rgba(6,13,9,.86), rgba(6,13,9,.97));
}

.game-button { transition: transform .24s var(--ease), filter .24s var(--ease), box-shadow .24s var(--ease); }
.game-button:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: var(--lift-1); }
.game-button:active { transform: translateY(0); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brass-lit);
  outline-offset: 3px;
}

/* ---------- Rhythm ---------------------------------------- */

.section { padding-block: clamp(104px, 12vw, 190px); }
.section-heading { margin-bottom: clamp(48px, 6vw, 84px); }
.world-strip { border-block: 1px solid var(--edge); background: var(--deep-2); }

/* ---------- Header ---------------------------------------- */

.site-header { backdrop-filter: blur(14px) saturate(1.2); }
.header-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--leaf-lit);
  background: linear-gradient(180deg, rgba(147,208,110,.24), rgba(147,208,110,.09));
  color: var(--brass-pale);
  font-family: var(--font-label);
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}
.header-cta:hover {
  background: linear-gradient(180deg, rgba(147,208,110,.4), rgba(147,208,110,.16));
  transform: translateY(-1px); box-shadow: var(--lift-1);
}
.header-cta > span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--leaf-lit);
  box-shadow: 0 0 0 3px rgba(147,208,110,.2);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .header-cta > span { animation: pulse 2.6s var(--ease) infinite; }
  @keyframes pulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(147,208,110,.20); }
    50%     { box-shadow: 0 0 0 7px rgba(147,208,110,.03); }
  }
}
@media (max-width: 1120px) { .header-cta { display: none; } }

/* ---------- Gazette panel --------------------------------- */

/* The lorry is absolutely positioned bottom-right of this panel, so the
   last rules must reserve its footprint or the text runs underneath it. */
.bulletin-rule:nth-last-child(2) span,
.bulletin-rule:last-of-type span { padding-right: 150px; }
@media (max-width: 860px) {
  .bulletin-rule:nth-last-child(2) span,
  .bulletin-rule:last-of-type span { padding-right: 118px; }
}

/* ---------- Reveal choreography --------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); }
  .reveal.is-visible {
    opacity: 1; transform: none;
    transition: opacity .85s var(--ease), transform .85s var(--ease);
  }
  /* Children of a revealed group stagger in behind it. */
  .stagger > * { opacity: 0; transform: translateY(22px); }
  .stagger.is-visible > * {
    opacity: 1; transform: none;
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  .stagger.is-visible > *:nth-child(2) { transition-delay: .10s; }
  .stagger.is-visible > *:nth-child(3) { transition-delay: .20s; }
  .stagger.is-visible > *:nth-child(4) { transition-delay: .30s; }
  .stagger.is-visible > *:nth-child(5) { transition-delay: .40s; }
}

/* ---------- Immigration section --------------------------- */

.arrivals {
  position: relative;
  padding-block: clamp(104px, 12vw, 190px);
  padding-inline: max(22px, calc((100% - var(--max-width)) / 2));
  background:
    radial-gradient(110% 80% at 12% 0%, rgba(49,88,58,.40), transparent 60%),
    var(--deep-2);
  border-block: 1px solid var(--edge);
}
.arrivals-inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}
@media (max-width: 1000px) { .arrivals-inner { grid-template-columns: 1fr; } }

.arrivals-copy h2 { margin: 16px 0 24px; }
.arrivals-copy p + p { margin-top: 1em; }

.arrivals-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 1px; margin-top: 34px;
  background: var(--edge); border: 1px solid var(--edge);
}
.arrivals-facts > div { background: var(--deep); padding: 18px 18px 16px; }
.arrivals-facts b {
  display: block; font-size: clamp(26px,2.6vw,38px); line-height: 1;
  color: var(--brass-lit);
}
.arrivals-facts span {
  display: block; margin-top: 8px;
  font-family: var(--font-label); font-size: 10.5px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
}

/* The story column runs far longer than a 16:9 clip. Letting the clip
   ride along keeps it on screen for the whole read instead of leaving
   a hole beneath it. */
.arrivals-media {
  position: sticky;
  top: calc(var(--header-height) + 26px);
  border: 1px solid var(--edge-lit);
  background: var(--deep); box-shadow: var(--lift-3); overflow: hidden;
}
@media (max-width: 1000px) { .arrivals-media { position: static; } }
.arrivals-media video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16/9; object-fit: cover; background: var(--deep);
}
.arrivals-media figcaption {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-top: 1px solid var(--edge);
  font-family: var(--font-label); font-size: 10.5px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
}
.arrivals-media figcaption::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--leaf-lit); box-shadow: 0 0 0 3px rgba(147,208,110,.18); flex: none;
}

/* ---------- Final call ------------------------------------ */

.final-cta > img:first-child { transform: scale(1.05); }
.final-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(90% 70% at 50% 55%, transparent 20%, rgba(3,8,5,.72) 100%);
}

/* ---------- Short viewports: keep the hero buttons above the fold ----------
   On a 1366x768 laptop the hero stack ran 47px past the fold, so both calls to
   action landed off-screen. The constraint is vertical, not horizontal, so this
   is scoped by height rather than width: tighten the stack only when there is
   genuinely not enough room, and leave tall screens exactly as designed. */
@media (min-width: 1000px) and (max-height: 860px) {
  .hero-copy-inner { padding: clamp(20px, 2.4vw, 34px) clamp(26px, 3.4vw, 46px) clamp(22px, 2.6vw, 34px); }
  .hero-logo       { width: clamp(200px, 22vw, 262px); margin: 0 0 -22px -10px; }
  .hero-copy-inner h1 { font-size: clamp(36px, 3.1vw, 50px); margin-bottom: .22em; }
  .hero-lead       { margin-top: 15px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; max-width: 50ch; }
  .hero-actions    { margin-top: 18px; }
  .capture-note    { margin-top: 14px; }
  .eyebrow         { margin-bottom: 9px; }
}

/* Below ~700px tall there is no room for the scroll cue without it colliding
   with the buttons; the hero panel itself is still fully readable. */
@media (min-width: 1000px) and (max-height: 700px) {
  .hero-scroll { display: none; }
}

/* ---------- Intrinsic width/height attributes must not drive real height ----
   Every <img> now carries width/height so the browser can reserve the right box
   before the bytes arrive (no layout shift). The base sheet sets max-width but
   not height, so without this those attributes would win wherever CSS sizes an
   image by width alone -- which stretched the Gazette lorry and the hero
   wordmark. Rules that deliberately set height (object-fit covers) are more
   specific and still win. */
img { height: auto; }

/* ---------- Small glyphs on green need more weight than brass gives them ----
   Measured on the real backgrounds: the chain step numbers ran 3.21:1 on the
   active tab and the button glyphs 3.99:1 on the primary green. The step
   numbers are not decorative -- they are inside the tab's accessible name
   ("1 Fell") -- so both are lifted to a paler cream that still reads brass. */
.chain-tabs b  { color: #F5E4B0; }   /* 5.40:1 on #42633a */
.game-button b { color: #FAF0D2; }   /* 4.93:1 on #4d713d */