/* Wormy's Descent — marketing site (wormy.cobaltforgegames.com)
   Palette matches the game's "Subterranean Glass" UI: warm dark earth + amber. */

:root {
  --bg: #151009;
  --bg2: #1e1710;
  --panel: #241b12;
  --line: #3a2d1e;
  --cream: #f5ebdc;
  --muted: #b9a88f;
  --amber: #f5a623;
  --amber-deep: #c97e12;
  --red: #e04a35;
  --radius: 18px;
  --display: "Baloo 2", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}
/* height:auto is REQUIRED alongside the width/height attributes on every <img>. The attributes
   reserve space (no layout shift), but without this max-width:100% would shrink the width while
   the height attribute pinned the height — stretching every scaled image vertically. */
img { max-width: 100%; height: auto; display: block; }
/* Images are wrapped in <picture> to serve WebP with a PNG/JPG fallback. display:contents keeps
   the wrapper from generating a box, so the <img> stays the direct flex/grid item and every
   existing layout rule (.feature-icons, .skins-row, .cards) behaves exactly as before. */
picture { display: contents; }
/* CRITICAL: display:contents promotes EVERY child of <picture> into the parent layout — including
   the <source> element, which then becomes a phantom grid/flex item (it broke the finale grid and
   opened gaps in .feature-icons and .skins-row). Hiding it costs nothing: the browser's image
   selection reads the DOM, not CSS, so WebP is still chosen. */
picture > source { display: none; }
a { color: var(--amber); text-decoration: none; }

/* Keyboard focus — the site had no authored focus style at all, so keyboard users got the
   browser default over near-black. Amber ring, offset so it reads on every surface. */
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Anchor targets must clear the fixed nav (65px) instead of hiding under it. */
[id] { scroll-margin-top: 84px; }

/* Skip link — first thing a keyboard user meets. */
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--amber); color: #241500;
  font-family: var(--display); font-weight: 700;
  padding: .7rem 1.4rem; border-radius: 0 0 12px 12px;
  transition: transform .15s;
}
.skip-link:focus { transform: translate(-50%, 0); }

h1, h2, h3 { font-family: var(--display); line-height: 1.15; }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-size: 1.25rem; }
p + p { margin-top: .8em; }
strong { color: var(--cream); }

.kicker {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .4rem;
}
.kicker.center { text-align: center; }
.lede { color: var(--muted); max-width: 720px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(21, 16, 9, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(245, 166, 35, .12);
}
.nav-brand {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--cream);
}
.nav-brand em { color: var(--amber); font-style: normal; }
.nav-brand img { border-radius: 8px; }
.nav-links { display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.5rem); }
.nav-links a { color: var(--muted); font-weight: 700; font-size: .95rem; transition: color .15s; }
.nav-links a:hover { color: var(--cream); }
.nav-links .nav-cta {
  background: var(--amber); color: #241500;
  padding: .35rem 1rem; border-radius: 999px;
}
.nav-links .nav-cta:hover { background: #ffc14e; color: #241500; }
/* 44x44 minimum touch target (was 36.8x41.8). */
.nav-burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 46px; height: 46px; padding: 0;
  align-items: center; justify-content: center; flex-direction: column;
}
.nav-burger span { display: block; width: 24px; height: 3px; margin: 3px 0; background: var(--cream); border-radius: 2px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 7rem 1.2rem 3rem;
}
/* The warm sunrise cross-section — the game's whole premise in one image, and the north star's
   "warmth carved out of darkness" in the frame every visitor sees first. Softly blurred: it is
   atmosphere, not detail, which also lets a 700px-wide asset fill a desktop viewport cleanly and
   keeps the headline legible over it. */
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
}
.hero-bg::before {
  content: ""; position: absolute; inset: -4%;
  /* image-set serves WebP where supported and falls back to the JPEG elsewhere. */
  background: image-set(url("../assets/img/story_side.webp") type("image/webp"),
                        url("../assets/img/story_side.jpg")  type("image/jpeg")) center 22% / cover no-repeat;
  background-color: var(--bg);
  filter: blur(2px) saturate(1.08);
}
/* Warm-tinted scrim (brown, not black) — dark enough to carry cream text, light enough that the
   sunrise still reads. The whole point of this image is warmth in the first frame. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(28,18,8,.10) 0%, rgba(24,17,9,.52) 62%, rgba(21,16,9,.92) 100%),
    linear-gradient(to bottom, rgba(21,16,9,.60) 0%, rgba(26,18,9,.16) 26%, rgba(24,17,9,.34) 58%, var(--bg) 97%);
}
.hero-art {
  position: relative; height: clamp(150px, 24vw, 230px); margin-bottom: .8rem;
  display: flex; justify-content: center; align-items: flex-end;
}
.hero-wormy { height: 100%; width: auto; filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)); animation: bob 3.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
.hero h1 {
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  font-weight: 800;
  text-shadow: 0 4px 24px rgba(0,0,0,.6);
}
.hero h1 span { color: var(--amber); }
.tagline {
  margin-top: .6rem;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--cream);   /* was #e9dcc6 — measured 4.46:1 over the hero, fractionally under AA */
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
}
.hero-ctas { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }

/* Honest launch-stage line. Turns "coming soon" from a broken promise into a stated stage. */
.status-strip {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem;
  font-size: .92rem; font-weight: 600; color: var(--muted);
  padding: .4rem .9rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(21, 16, 9, .55);
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(245, 166, 35, .55);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 166, 35, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(245, 166, 35, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); }
}
.finale .status-strip { margin-top: 1.1rem; }
.btn {
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  padding: .72rem 1.5rem; border-radius: 999px;
  transition: transform .12s, background .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(180deg, #ffc14e, var(--amber));
  color: #241500;
  box-shadow: 0 6px 18px rgba(245, 166, 35, .35);
}
.btn-ghost { border: 2px solid rgba(245, 235, 220, .5); color: var(--cream); background: rgba(0,0,0,.25); }
.btn-ghost:hover { border-color: var(--cream); }

.hero-stats {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.2rem, 5vw, 3.5rem);
  margin-top: clamp(2rem, 6vh, 4rem);
  padding: 1rem 1.6rem;
  background: rgba(30, 23, 16, .72);
  border: 1px solid rgba(245, 166, 35, .18);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
}
.hero-stats li { display: flex; flex-direction: column; align-items: center; min-width: 88px; }
.hero-stats strong { font-family: var(--display); font-size: 1.6rem; color: var(--amber); }
.hero-stats span { font-size: .82rem; color: var(--muted); }

/* ---------- sections ---------- */
.section { padding: clamp(3.5rem, 9vw, 6.5rem) clamp(1.2rem, 5vw, 3rem); max-width: 1200px; margin: 0 auto; }
.section-dark {
  max-width: none;
  background: var(--bg2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-dark > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.section-head { margin-bottom: 2.4rem; }
.section-head .lede { margin-top: .7rem; }

/* story — a single centred prose column. The measure is capped near 68ch so the paragraphs stay
   comfortable to read rather than running the full 1200px container. */
.story-block { max-width: 68ch; margin: 0 auto; }
/* Heading centred, prose left-aligned: centred multi-line paragraphs give both edges a ragged
   shape and are noticeably harder to scan, especially on a phone. */
.story-block .kicker,
.story-block h2 { text-align: center; }
.story-block .kicker { margin-bottom: .5rem; }
.story-block h2 { margin-bottom: 1.3rem; }
.story-block p { text-align: left; }
.split-text p { color: var(--muted); }
.split-text p strong, .split-text p em { color: var(--cream); }
.split-text h2 { margin-bottom: .8rem; }

/* ---------- realms ---------- */
.realms { list-style: none; display: flex; flex-direction: column; gap: clamp(2.2rem, 5vw, 3.4rem); }
/* .realm's 2-col grid moved to .realm-head - see THE DESCENT block below. */
.realm-depth {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--display); font-size: .85rem; color: var(--muted);
}
.realm-depth i { flex: 1; width: 4px; margin: .4rem 0; border-radius: 2px; background: linear-gradient(to bottom, transparent, var(--rc)); }
.realm-depth span:last-child { color: var(--rc); font-weight: 700; }
.realm-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background-size: cover; background-position: center;
  min-height: 190px;
  display: flex; align-items: flex-end;
}
.realm-tile { background-size: 220px; image-rendering: auto; }
.realm-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(14,10,6,.92) 0%, rgba(14,10,6,.72) 55%, rgba(14,10,6,.25) 100%);
}
.realm-body { position: relative; padding: 1.4rem 1.6rem; max-width: 640px; }
.realm-body h3 { color: var(--rc); font-size: 1.35rem; }
.realm-body h3 small { display: block; color: var(--cream); font-size: .95rem; opacity: .85; }
.realm-body p { color: #d8cbb4; margin-top: .45rem; font-size: .98rem; }
.realm-meta { font-size: .85rem !important; color: var(--muted) !important; }

/* ---------- guides & bosses ---------- */
.cards.guides { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(0,0,0,.45); }
.card img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; }
.card figcaption { padding: .8rem .9rem 1rem; }
.card figcaption strong { font-family: var(--display); display: block; }
.card figcaption span { font-size: .85rem; color: var(--muted); line-height: 1.4; display: block; }

/* The flat boss gallery and its .mercy-chip were removed on 2026-09-02: the roster now lives
   inside each realm block (see THE DESCENT below), so every boss is grouped with the depth it
   guards rather than pooled into one grid of 25. */

/* ---------- features ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.feature {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
}
.feature-icons { display: flex; gap: .45rem; margin-bottom: .9rem; }
.feature-icons img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.feature h3 { margin-bottom: .4rem; color: var(--amber); }
.feature p { color: var(--muted); font-size: .97rem; }

.skins { margin-top: 3rem; }
.skins-row {
  list-style: none;
  /* flex-start, not flex-end: bottom-aligning made a one-line label (Geode Mantle) sit lower
     than the two-line ones and pushed its artwork out of line with the rest of the row. */
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(.4rem, 2vw, 1.4rem); margin-top: 1rem; flex-wrap: wrap;
}
.skins-row li { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.skins-row img { width: clamp(100px, 16vw, 170px); filter: drop-shadow(0 10px 22px rgba(0,0,0,.5)); transition: transform .18s; }
.skins-row li:hover img { transform: translateY(-8px) scale(1.05); }
/* The skins were unlabelled — their names existed only in alt text. */
.skins-row span {
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  color: var(--muted); text-align: center; max-width: 12ch; line-height: 1.25;
}

/* Sticky mobile CTA — between the hero and the finale the page ran ~15 phone screens with no
   path to the store. Sits in the thumb zone, revealed by main.js once the hero scrolls away. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none;
  padding: .7rem clamp(1rem, 4vw, 2rem) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(21, 16, 9, .93);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(245, 166, 35, .18);
  transform: translateY(110%);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.sticky-cta .btn { display: block; text-align: center; width: 100%; padding: .8rem 1rem; }
.sticky-cta.visible { transform: translateY(0); }

/* ---------- how to play ---------- */
.steps { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; counter-reset: step; }
.step {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
}
.step-n {
  flex: 0 0 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #ffc14e, var(--amber-deep));
  color: #241500; font-family: var(--display); font-weight: 800; font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(245, 166, 35, .3);
}
/* inline-flex + wrap: a heading that wraps (step 3 on mobile) no longer orphans its icon
   to the far right of the second line. */
.step h3 { color: var(--cream); display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.step p { color: var(--muted); font-size: .96rem; margin-top: .35rem; }
.inline-ic { width: 26px; height: 26px; object-fit: contain; display: inline-block; }

.fieldguide { margin-top: 2.6rem; }
.fieldguide h3 { color: var(--amber); margin-bottom: 1rem; font-size: 1.4rem; }
.fieldguide table {
  width: 100%; border-collapse: collapse;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; font-size: .95rem;
}
.fieldguide th, .fieldguide td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.fieldguide th { font-family: var(--display); color: var(--amber); background: rgba(245,166,35,.06); }
.fieldguide td:first-child { font-weight: 700; white-space: nowrap; }
.fieldguide td { color: var(--muted); }
.fieldguide tr:last-child td { border-bottom: 0; }
/* object-fit keeps the non-square icons (torch, elixir, shields) in proportion inside the
   square box instead of being squashed to fit it. */
.fieldguide .ic { width: 22px; height: 22px; object-fit: contain; display: inline-block; vertical-align: -5px; }

/* ---------- finale ---------- */
.finale { padding-top: clamp(3rem, 8vw, 5rem); }
.finale-inner {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  background: radial-gradient(ellipse at 30% 40%, rgba(245,166,35,.12), transparent 65%), var(--panel);
  border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.4);
  padding: clamp(1.6rem, 5vw, 3.5rem);
}
.finale-skin { max-height: 420px; width: auto; margin: 0 auto; filter: drop-shadow(0 0 42px rgba(245, 200, 90, .35)); }
.finale-text p { color: var(--muted); }
.finale-text h2 { margin-bottom: .7rem; }
.finale .hero-ctas { justify-content: flex-start; }

/* ---------- footer ---------- */
.footer {
  text-align: center; padding: 2.2rem 1rem 2.8rem;
  color: var(--muted); font-size: .9rem;
  border-top: 1px solid var(--line);
}
.footer p + p { margin-top: .3rem; }
/* Legal links were 19px tall and separated by "·" — under the 44px touch minimum and hard to
   hit with a thumb. Padded into real targets; the interpuncts are no longer needed. */
.footer p:last-child {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .2rem 1rem; margin-top: .6rem;
}
.footer p:last-child a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .3rem;
}

/* ---------- reveal animation ----------
   Scoped to .js-enabled (set by an inline script in <head>). Without JS the content is simply
   visible instead of the page being a hero above a blank void. */
.js-enabled .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.js-enabled .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-enabled .reveal { opacity: 1; transform: none; transition: none; }
  .hero-wormy { animation: none; }
  .status-dot { animation: none; }
  .sticky-cta { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .cards.guides { grid-template-columns: repeat(3, 1fr); }
  .features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav-links {
    position: fixed; top: 65px; right: 0; left: 0;   /* was 58px — the nav actually measures 65 */
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(21, 16, 9, .97);
    border-bottom: 1px solid var(--line);
    display: none; padding: .6rem 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .8rem 1.6rem; min-height: 44px; display: flex; align-items: center; }
  /* the drawer CTA was the smallest target in the menu at 36px tall */
  .nav-links .nav-cta { margin: .5rem 1.6rem; justify-content: center; min-height: 46px; }
  .nav-burger { display: block; }
  .realm { grid-template-columns: 56px 1fr; }
  .steps { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .cards.guides { grid-template-columns: repeat(2, 1fr); }
  .finale-inner { grid-template-columns: 1fr; text-align: center; }
  .finale-skin { max-height: 300px; }
  .finale .hero-ctas { justify-content: center; }
  .finale .status-strip { margin-left: auto; margin-right: auto; }

  /* HAZARD FIELD GUIDE -> STACKED CARDS.
     The table was min-width:560px inside a ~337px column with no scroll affordance, so every
     row clipped mid-sentence and the whole "Your answer" column was invisible. Same markup,
     re-laid out as one card per hazard using each cell's data-label. */
  .fieldguide table { display: block; background: none; border: 0; border-radius: 0; }
  .fieldguide thead { display: none; }
  .fieldguide tbody { display: block; }
  .fieldguide tr {
    display: block;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1rem 1.1rem; margin-bottom: .9rem;
  }
  .fieldguide td { display: block; padding: 0; border: 0; }
  .fieldguide td:first-child {
    white-space: normal;
    font-family: var(--display); font-size: 1.1rem; color: var(--amber);
    margin-bottom: .4rem;
  }
  .fieldguide td:not(:first-child) { margin-top: .55rem; }
  .fieldguide td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-family: var(--display); font-weight: 700; font-size: .72rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); opacity: .75; margin-bottom: .15rem;
  }
  .fieldguide tr:last-child td { border-bottom: 0; }

  /* The five companions left a lone ragged cell in a 2-column grid. */
  .cards.guides { grid-template-columns: repeat(2, 1fr); }
  .cards.guides .card:last-child { grid-column: 1 / -1; }
  .cards.guides .card:last-child img { aspect-ratio: 2 / 1; object-position: center 30%; }

  .sticky-cta { display: block; }
}

/* =============================================================================================
   THE DESCENT — the page's spine.
   Each realm now carries its own five bosses, so the roster is evidence of depth instead of a
   flat gallery. The art's own colour progression (earth greens -> stone greys -> crystal
   violets -> magma orange -> the Core's pale light) is doing the real work; the CSS just gets
   out of its way and lets each realm tint its own block through --rc.
   ============================================================================================= */

/* .realm was the 2-column [depth rail | card] grid. That grid moved into .realm-head so the
   roster can sit beneath the whole thing at full width. */
.realm { display: block; }
.realm-head { display: grid; grid-template-columns: 84px 1fr; gap: 1rem; }

/* The five that guard this layer. Indented past the depth rail so the roster reads as belonging
   to the realm card above it rather than to the page. */
.roster {
  list-style: none;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: .7rem;
  margin: .8rem 0 0 calc(84px + 1rem);
}
.roster li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);   /* the documented card radius - a roster cell is a card */
  overflow: hidden;
  transition: transform .18s ease-out, border-color .18s;
}
.roster li:hover { transform: translateY(-5px); }
.roster img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.roster span {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: .82rem; line-height: 1.25;
  text-align: center; padding: .45rem .35rem .15rem;
}
/* No tag underneath -> the name owns the bottom padding itself. */
.roster li > span:last-child { padding-bottom: .6rem; }

/* The marker is a CAPTION LINE, not a floating chip. A chip absolutely positioned over the art
   has to survive "Hold your ground" at every column count; a line under the name simply wraps. */
.roster .tag {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: .72rem; letter-spacing: .02em;
  text-align: center; padding: 0 .3rem .55rem;
}
/* The realm accent, used inside its own realm block only — the sanctioned exception. */
.roster .tag-g { color: var(--rc); }
.roster .is-guardian { border-color: color-mix(in srgb, var(--rc) 55%, var(--line)); }
/* Amber for mercy: this is the product's single most distinctive claim, so it gets the lamp. */
.roster .tag-m { color: var(--amber); }

.roster-note {
  margin: .7rem 0 0 calc(84px + 1rem);
  font-size: .88rem; color: var(--muted);
}
.roster-note strong { color: var(--rc); }

/* The positioning claim, sitting directly under the evidence for it. */
.mercy-note {
  max-width: 68ch; margin: clamp(2.2rem, 6vw, 3.4rem) auto 0;
  padding-top: clamp(1.6rem, 4vw, 2.4rem);
  border-top: 1px solid var(--line);
  text-align: center;
}
.mercy-note .kicker { margin-bottom: .6rem; }
.mercy-note p:not(.kicker) { color: var(--muted); text-align: left; }
.mercy-note strong { color: var(--cream); }

/* ---------- depth gauge ----------
   The page's one authored motion moment: a readout that turns scrolling the descent into
   actually descending. Fixed while the descent section is on screen, colour interpolating
   through the five realm accents. Decorative — every depth it shows is also in the text, so
   it is aria-hidden and carries no information of its own. */
.depth-gauge {
  /* BOTTOM-right, not middle-right. The page column is 1200px inside a 1280 viewport, so there is
     no side gutter to live in - anchored at the vertical centre it landed squarely on top of the
     roster cards. The bottom corner is genuinely free on desktop (.sticky-cta is mobile-only). */
  position: fixed; z-index: 40;
  right: clamp(.7rem, 2.2vw, 1.6rem);
  bottom: clamp(.9rem, 3vw, 2rem);
  padding: .65rem .95rem;
  text-align: right;
  background: rgba(21, 16, 9, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease-out, visibility .35s;
}
.depth-gauge.on { opacity: 1; visibility: visible; }
.depth-gauge-m {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: .9rem; color: var(--muted);
  line-height: 1.1;
}
.depth-gauge-m b {
  font-size: 1.45rem; font-weight: 800;
  color: var(--gaugeC, var(--amber));
  transition: color .5s ease-out;
  font-variant-numeric: tabular-nums;
}
.depth-gauge-realm {
  display: block; margin-top: .15rem;
  font-family: var(--display); font-weight: 700;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}

/* =============================================================================================
   FREE ROAM
   ============================================================================================= */
.freeroam-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center;
}
.freeroam-text p { color: var(--muted); max-width: 60ch; }
.freeroam-text p + p { margin-top: .85rem; }
.freeroam-text strong { color: var(--cream); }

/* A real measurement, not an ornament: each band is that realm's true share of the 9,300 m
   (Topsoil 800, Stone 1,500, Deep Rock 2,500, Magma 2,500, Core 2,000), and it runs TOP TO BOTTOM
   because that is the direction of the thing it describes. Reading it is the free run: five realms,
   one uninterrupted column, nothing between them.
   Ink-on-colour is #241500 throughout - checked against all five bands, the tightest being Magma
   at 4.56:1 and Deep Rock at 4.84:1, both clearing 4.5:1 for small text. */
.freeroam-viz { margin: 0; }
.dive {
  list-style: none;
  display: flex; flex-direction: column;
  height: clamp(260px, 40vw, 360px);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.dive li {
  flex: var(--h) 0 0;
  background: var(--sc);
  color: #241500;
  display: flex; align-items: center; gap: .55rem;
  padding: 0 1rem;
  min-height: 0;
}
.dive li b { font-family: var(--display); font-weight: 700; font-size: .95rem; }
/* NO opacity on the metres. Measured against all five bands, ink at 82% fails 4.5:1 on three of
   them - Magma 3.74, Deep Rock 4.00, Stone 4.39 - because fading dark ink toward a mid-tone band
   raises its luminance. At full strength the worst band is Magma at 4.69 and every one passes, so
   the metres are separated from the name by WEIGHT and SIZE instead of by transparency. */
.dive li span { font-size: .8rem; font-weight: 600; }
/* Topsoil is only 8.6% of the dive, so at small heights its label would clip against the band
   below. Hiding the metres there keeps the realm name readable rather than cropping both. */
@media (max-height: 700px), (max-width: 400px) {
  .dive li:first-child span { display: none; }
}
.freeroam-ends {
  display: flex; justify-content: space-between;
  margin-top: .7rem;
  font-family: var(--display); font-weight: 700; font-size: .9rem;
}
.freeroam-ends span:first-child { color: var(--muted); }
.freeroam-ends span:last-child { color: #e9b23d; }

/* A feature that earns the full row rather than being squeezed into a third. */
.feature-wide { grid-column: 1 / -1; }
.feature-icons-row img { width: 46px; height: 46px; }

/* ---------- descent: responsive ---------- */
@media (max-width: 980px) {
  .roster { grid-template-columns: repeat(5, 1fr); gap: .5rem; }
  .roster span { font-size: .72rem; }
  .roster .tag { font-size: .64rem; }
  .feature-wide { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .realm-head { grid-template-columns: 56px 1fr; }
  /* The rail is narrower here and a 5-up roster of 60px thumbnails is unreadable, so the roster
     drops to 3-up and runs full width instead of staying indented under the card. */
  .roster { grid-template-columns: repeat(3, 1fr); margin-left: 0; }
  .roster-note { margin-left: 0; }
  .freeroam-grid { grid-template-columns: 1fr; }
  /* DESKTOP ONLY. Measured at 375x812 the gauge landed inside the sticky CTA's box (gauge
     13,740 75x56 against the CTA's 0,737 375x75) - so it was competing with the one conversion
     surface on the page, and losing, invisibly behind it. Nothing is lost by dropping it: every
     depth it reports is already printed on each realm's rail, and a phone has no spare corner. */
  .depth-gauge { display: none; }
}
@media (max-width: 460px) {
  .roster { grid-template-columns: repeat(2, 1fr); }
  /* Five bosses in a 2-up grid leaves the Guardian alone on the last row — which is exactly
     right, so give it the full width and let it read as the one that closes the chapter. */
  .roster li.is-guardian { grid-column: 1 / -1; }
  .roster li.is-guardian img { aspect-ratio: 2 / 1; object-position: center 32%; }
}

@media (prefers-reduced-motion: reduce) {
  .roster li, .depth-gauge, .depth-gauge-m b { transition: none; }
}