/* Agent Ladder launch page, in the teaser thumbnail's visual language:
   the painted plate, paper slabs with a hard shadow, one amber pill.
   Colour values are styles/tokens.css's; the wordmark rules are
   styles/foundation.css's. The painting and the slabs are pictures and stay
   light in both themes; the canvas, eyebrows and reading copy follow the
   theme. */

@font-face { font-family: 'Jost Wordmark'; font-style: normal; font-weight: 500; font-display: block; src: url('jost-wordmark-500.woff2?v=dfe9fdb6') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('barlow-semi-condensed-400.woff2?v=d03a7a5f') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('barlow-semi-condensed-500.woff2?v=0d751379') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('barlow-semi-condensed-600.woff2?v=f158417e') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('barlow-semi-condensed-800.woff2?v=a4f4f353') format('woff2'); }

/* ── Tokens: light on bare :root, dark twice so a toggle wins both ways ── */
:root {
  color-scheme: light;
  --t-canvas: #e9e8e4;
  --t-paper: #fdfcf9;
  --t-ink: #151817;
  --t-ink-soft: #565b57;
  --t-primary: #155766;
  --t-action: #ffb000;
  --t-action-strong: #e89b00;
  --t-action-on: #151817;
  --t-rule-soft: #dcdad3;

  /* Fixed picture colours: the slabs are paper with ink on them in both
     themes, like the thumbnail. */
  --slab-paper: #fdfcf9;
  --slab-ink: #151817;
  --slab-soft: #565b57;
  --slab-shadow: rgba(21, 24, 23, 0.55);
  --amber: #ffb000;
  --amber-on: #151817;

  --ladder-beginners: #c9a23a;
  --ladder-agent: #0e6b82;
  --ladder-managers: #1f6f2c;
  --ladder-builders: #9c3f22;
  --ladder-operators: #8a5426;

  --font-sans: 'Barlow Semi Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-wordmark-stack: 'Jost Wordmark', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --t-canvas: #141312;
    --t-paper: #1e1e1b;
    --t-ink: #f4f2eb;
    --t-ink-soft: #cbc9c2;
    --t-primary: #78c7d2;
    --t-action: #e8b043;
    --t-action-strong: #f3c261;
    --t-action-on: #151817;
    --t-rule-soft: #3a3a34;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --t-canvas: #141312;
  --t-paper: #1e1e1b;
  --t-ink: #f4f2eb;
  --t-ink-soft: #cbc9c2;
  --t-primary: #78c7d2;
  --t-action: #e8b043;
  --t-action-strong: #f3c261;
  --t-action-on: #151817;
  --t-rule-soft: #3a3a34;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--t-canvas); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--t-canvas);
  color: var(--t-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--t-primary); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--t-action); outline-offset: 3px; }

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

.skip {
  position: absolute; left: var(--gutter); top: -3rem; z-index: 5;
  padding: 0.5rem 0.75rem; background: var(--slab-paper); color: var(--slab-ink);
  font-weight: 600; text-decoration: none; box-shadow: 3px 3px 0 var(--slab-shadow);
}
.skip:focus { top: 0.75rem; }

/* ── Wordmark (styles/foundation.css), at the thumbnail's tracking ─────── */
.wordmark {
  display: inline-flex; align-items: center;
  font-family: var(--font-wordmark-stack);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--slab-ink);
}
.wordmark-word { display: inline-block; }
.wordmark-agent { margin-right: 0.62em; }
.wordmark-glyph { display: block; width: 0.74em; height: 0.79em; margin: 0 0.02em 0 -0.025em; flex: 0 0 auto; transform: translateY(0.015em); }

/* ── Slabs and pills ──────────────────────────────────────────────────── */
.slab {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  background: var(--slab-paper);
  color: var(--slab-ink);
  box-shadow: 3px 3px 0 var(--slab-shadow);
}
.pill {
  display: inline-flex; align-items: center;
  padding: 0.55em 0.9em;
  font-weight: 800;
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem);
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--slab-shadow);
}
.pill-paper { background: var(--slab-paper); color: var(--slab-ink); }
.pill-amber { background: var(--amber); color: var(--amber-on); }
.pill-wordmark { padding: 0.75rem 1.1rem 0.7rem 1.25rem; letter-spacing: 0; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(2.5rem + env(safe-area-inset-top, 0px)) 3.5rem;
}
.hero-art {
  position: absolute; inset: 0; z-index: -1;
  background: #4d8fd1 url('hero.jpg?v=e25a4cda') no-repeat;
  background-size: cover;
  /* Rin and the ladder live in the right half of the plate; anchoring the
     picture to the right keeps them on screen as the viewport narrows. */
  background-position: center 40%;
}
.hero-art::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 9rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--t-canvas) 100%);
}
.hero-copy {
  position: relative;
  width: min(560px, 100% - 8vw - var(--gutter));
  margin-left: 8vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}
.slab-big {
  white-space: nowrap;
  padding: 0.12em 0.32em 0.1em;
  font-size: clamp(3.5rem, 8vw, 7.375rem);
  letter-spacing: 0.02em;
}
.slab-small {
  margin-top: 0.35rem;
  padding: 0.35em 0.6em 0.3em;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 2.125rem);
  letter-spacing: 0.06em;
}
.pills { margin: 0.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cta-row { margin: 0.25rem 0 0; }
.cta {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.9em 1.4em 0.85em;
  background: var(--amber);
  color: var(--amber-on);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--slab-shadow);
}
.cta:hover { background: #e89b00; }
.cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--slab-shadow); }
.cta-play { width: 0.9em; height: 0.9em; }

@media (max-width: 719px) {
  /* The portrait painting: Rin and the flames in the top half, calm sky and
     the small spaceport below. The copy sits over that calm half. */
  .hero { align-items: flex-end; padding-block: calc(1.5rem + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)); }
  .hero-art { background-image: url('hero-mobile.jpg?v=6f325cf8'); background-position: center top; }
  .hero-art::after { height: 6rem; }
  .hero-copy { width: calc(100% - 48px); margin-left: 24px; gap: 0.85rem; }
  .pill { white-space: normal; text-align: left; }
  .slab-big { font-size: clamp(3.25rem, 14vw, 4.5rem); }
  .slab-small { font-size: clamp(1.125rem, 5vw, 1.5rem); }
}
@media (max-width: 479px) {
  .cta-row { width: 100%; }
  .cta { width: 100%; justify-content: center; min-height: 48px; }
}
@media (max-width: 399px) {
  /* Below 400 px the second slab may wrap rather than overflow. */
  .slab-big { white-space: normal; }
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.teaser {
  padding: clamp(2.5rem, 6vw, 4.5rem) max(16px, var(--gutter));
}
.ladders { padding: 0 0 clamp(2.5rem, 6vw, 4.5rem); }
.teaser { background: var(--t-paper); }
.eyebrow {
  margin: 0 auto 1.25rem;
  max-width: 1120px;
  color: var(--t-primary);
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
}
.player { max-width: 1120px; margin: 0 auto; }
.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #151817;
  border: 10px solid #ffffff;
  box-shadow: 3px 3px 0 var(--slab-shadow);
}
.frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cover {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  background: #151817; cursor: pointer; display: block;
}
.cover > img { width: 100%; height: 100%; object-fit: cover; }
.cover:focus-visible { outline-offset: -4px; }
.play {
  position: absolute; left: 50%; top: 50%;
  width: clamp(4rem, 8vw, 6rem); height: clamp(4rem, 8vw, 6rem);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 3px 3px 0 var(--slab-shadow);
}
.play::after {
  content: ''; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 0.95rem 0 0.95rem 1.6rem;
  border-color: transparent transparent transparent var(--amber-on);
}
.cover:hover .play { background: #e89b00; }
.caption {
  max-width: 1120px; margin: 0.75rem auto 0;
  padding: 0.3rem 0.7rem; width: fit-content;
  background: var(--amber); color: var(--amber-on); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9375rem;
}
.teaser-line {
  max-width: 1120px;
  margin: 1.25rem auto 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--t-ink-soft);
}

.worlds-band {
  position: relative;
  min-height: max(320px, 46vw);
  background: #2a5c9e url('panorama.jpg?v=0f8476f0') no-repeat center top;
  background-size: cover;
}
.worlds-copy {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) 0;
}
.worlds-copy .eyebrow {
  display: inline-block; width: auto; max-width: none; margin: 0 0 0.9rem;
  padding: 0.45em 0.7em; background: var(--slab-paper); color: #155766;
  box-shadow: 2px 2px 0 var(--slab-shadow);
}
.ladders-title {
  margin: 0;
  max-width: 1120px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
}
.slab-mid {
  padding: 0.2em 0.45em 0.16em;
  font-size: clamp(1.625rem, 1.2rem + 2.2vw, 3rem);
  letter-spacing: 0.02em;
}
.ladder-row {
  list-style: none;
  /* The cards overlap the painting's lower edge: half on it, half on the
     canvas. */
  margin: calc(-1 * clamp(5rem, 11vw, 8rem)) auto 0;
  padding: 0 var(--gutter);
  position: relative;
  max-width: calc(1120px + 2 * var(--gutter));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
}
.ladder {
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 0.6rem 0.9rem 1rem;
  background: var(--slab-paper);
  color: var(--slab-ink);
  border-top: 6px solid var(--ladder);
  box-shadow: 3px 3px 0 var(--slab-shadow);
}
.ladder-beginners { --ladder: var(--ladder-beginners); }
.ladder-agent     { --ladder: var(--ladder-agent); }
.ladder-managers  { --ladder: var(--ladder-managers); }
.ladder-builders  { --ladder: var(--ladder-builders); }
.ladder-operators { --ladder: var(--ladder-operators); }
.ladder img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.ladder h3 {
  margin: 0.5rem 0 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.ladder .num { color: var(--ladder); }
.ladder p { margin: 0.35rem 0 0; font-size: 1.125rem; font-weight: 500; line-height: 1.35; color: var(--slab-soft); }

@media (max-width: 1023px) {
  .ladder-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .ladder-row { grid-template-columns: 1fr; gap: 1rem; padding: 0 16px; margin-top: -4.5rem; }
  .worlds-band { min-height: max(320px, 100vw); background-position: center top; }
  .ladder {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 1rem;
    align-items: center;
    padding: 0.6rem 0.9rem 0.75rem;
  }
  .ladder img { grid-row: 1 / span 2; width: 160px; }
  .ladder h3 { margin: 0; align-self: end; font-size: 1.5rem; }
  .ladder p { align-self: start; }
}

/* ── Sign-off ─────────────────────────────────────────────────────────── */
.signoff {
  position: relative;
  min-height: max(360px, 42vw);
  display: flex;
  align-items: center;
  background: #e9a55a url('signoff.jpg?v=5088f527') no-repeat;
  background-size: cover;
  background-position: right 20% top;
}
.signoff-copy {
  width: 100%;
  max-width: calc(1120px + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
}
.signoff-title { margin: 0; font-weight: 800; text-transform: uppercase; line-height: 1; }
.slab-signoff { padding: 0.18em 0.4em 0.14em; font-size: clamp(2rem, 5vw, 4.5rem); letter-spacing: 0.02em; }
.signoff-pill { margin: 0; }
.signoff-pill a { text-decoration: none; min-height: 44px; }
.signoff-pill a:hover { background: #ffffff; }
@media (max-width: 719px) {
  .signoff { align-items: flex-end; min-height: 120vw; }
  .signoff-copy { padding: 1.5rem 16px 24px; }
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.foot {
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--t-rule-soft);
  text-align: center;
}
.foot-eyebrow { margin: 0 auto 1rem; text-align: center; }
.creator { display: inline-block; line-height: 0; }
.creator img { height: 120px; width: 120px; margin: 0 auto; }
.foot-line { margin: 1.25rem 0 0; font-size: 0.9375rem; font-weight: 500; color: var(--t-ink-soft); letter-spacing: 0.02em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta:active { transform: none; }
}