/* Violence District guide. Direction: poster.
   Type: Big Shoulders (display) + Public Sans (text), as dealt.
   Palette: dealt navy/pink redrawn to the subject's own colours, graphite ground,
   bone ink, blood accent, keeping the dealt proportions (one ground, one ink, one accent). */

:root {
  --bg: #0b0b0d;
  --surface: #141418;
  --surface-2: #1c1c22;
  --surface-3: #26262e;
  --ink: #f4f4f1;
  --muted: #9a978f;
  --accent: #d7263d;
  --accent-soft: #7e1626;
  --accent-ink: #0b0b0d;

  --step-small: 1rem;
  --step-body: 1.125rem;
  --step-lead: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --step-head: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
  --step-display: clamp(2.8rem, 1rem + 7vw, 7rem);

  --display: "Big Shoulders", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --text: "Public Sans", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  --gap-section: clamp(72px, 12vw, 168px);
  --radius: 2px;
  --wrap: 1180px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-reveal: 800ms;
}

/* Light theme. Same roles as the dark sheet, redrawn for a bone ground: the accent
   deepens so it still carries on white, and the tone steps stay steps, not lines. */
:root[data-theme="light"] {
  --bg: #f2f2f0;
  --surface: #ffffff;
  --surface-2: #e9e9e6;
  --surface-3: #dcdcd9;
  --ink: #131317;
  --muted: #5b5b62;
  --accent: #c81e35;
  --accent-soft: #f3d6db;
  --accent-ink: #ffffff;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  transition: background-color 220ms ease, color 220ms ease;
  font-family: var(--text);
  font-size: var(--step-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto is load-bearing: without it the width/height attributes on <img> win,
   and a landscape picture is forced into a portrait box and cropped to a slice. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

::selection { background: var(--accent); color: var(--accent-ink); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: var(--step-head); }

h3 { font-size: var(--step-lead); line-height: 1.05; }

p { margin: 0 0 1em; }

.lead {
  font-size: var(--step-lead);
  line-height: 1.32;
  max-width: 32ch;
  text-wrap: pretty;
}

.note { color: var(--ink); font-size: var(--step-small); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px var(--gutter);
  background: var(--bg);
}

.nav__mark {
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav__links::-webkit-scrollbar { display: none; }

.nav__links a {
  font-size: var(--step-small);
  text-decoration: none;
  color: var(--muted);
  white-space: nowrap;
  padding: 6px 0;
}

.nav__links a:hover { color: var(--ink); }

.btn {
  font-family: var(--text);
  font-size: var(--step-small);
  font-weight: 600;
  border: 0;
  border-radius: var(--radius);
  padding: 12px 20px;
  background: var(--surface-3);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  transition: background-color 160ms ease, transform 160ms ease;
}

.btn:hover { background: #32323c; }
.btn:active { transform: scale(0.97); }

.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: #e5344a; }

.btn--ghost { background: transparent; color: var(--ink); padding-inline: 12px; }
.btn--ghost:hover { background: var(--surface-2); }

/* an icon-only control: the sun offers light, the moon offers dark */
.btn--icon { padding-inline: 11px; }
.icon { width: 19px; height: 19px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.icon--moon { display: none; }
:root[data-theme="light"] .icon--sun { display: none; }
:root[data-theme="light"] .icon--moon { display: block; }

/* ---------- hero : card over a dim room ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 84px var(--gutter) 40px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

:root[data-theme="light"] .hero__bg img { filter: brightness(0.5) contrast(1.05); }

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: brightness(0.62) contrast(1.05);
  animation: drift 32s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(0, -1.5%, 0); }
}

.hero__card {
  position: relative;
  z-index: 1;
  width: min(100%, 820px);
  background: var(--surface);
  padding: clamp(22px, 3.4vw, 34px);
  display: grid;
  gap: 22px;
}

.hero__title {
  font-size: var(--step-display);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  line-height: 0.84;
}

.hero__title span { display: block; }

.hero__facts {
  display: grid;
  gap: 2px;
  font-size: var(--step-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.hero__support { color: var(--ink); max-width: 34ch; margin: 0; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.hero__credit { font-size: var(--step-small); color: var(--muted); margin-left: auto; }

/* ---------- the game's own art: one sliding strip ---------- */

.gallery { display: grid; gap: 18px; }

.gallery__track {
  display: flex;
  gap: clamp(16px, 2.2vw, 28px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.gallery__track::-webkit-scrollbar { display: none; }

/* The strip is a real control in its own right — the arrows are not the only way
   through the pictures — so it gets its own focus ring. */
.gallery__track:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.slide {
  flex: 0 0 min(100%, 720px);
  scroll-snap-align: start;
  margin: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-2);
}

.slide figcaption { font-size: var(--step-small); line-height: 1.5; max-width: 52ch; }

.gallery__bar { display: flex; align-items: center; gap: 14px; }

.gallery__count {
  margin: 0;
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  min-width: 4ch;
}

.gallery__slash { padding-inline: 5px; }

.gallery__hint { font-size: var(--step-small); color: var(--muted); margin-left: auto; }

.gallery__bar .btn:disabled { opacity: 0.32; cursor: default; }
.gallery__bar .btn:disabled:hover { background: transparent; }

.credit { margin: 28px 0 0; color: var(--muted); font-size: var(--step-small); }

/* ---------- sections ---------- */

.section {
  position: relative;
  z-index: 3;
  padding-block: var(--gap-section);
  background: transparent;
}

.section.section--field { background: var(--surface); }

.section__head {
  display: grid;
  gap: 14px;
  max-width: 62ch;
  margin-bottom: clamp(32px, 6vw, 64px);
}

.section__head p { margin: 0; color: var(--ink); max-width: 62ch; }

.sheet {
  background: var(--surface);
  padding: clamp(24px, 4vw, 56px);
}

.sheet--alt { background: var(--surface-2); }

/* ---------- roster ---------- */

.roster {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

.roster__list {
  display: grid;
  gap: 6px;
  position: sticky;
  top: 84px;
}

.roster__pick {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--muted);
  font: inherit;
  font-size: var(--step-small);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.roster__pick img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  object-position: 50% 18%;
  background: var(--surface-2);
}

.roster__pick:hover { background: var(--surface-2); color: var(--ink); }
.roster__pick[aria-current="true"] { background: var(--accent); color: #fff; }

.roster__name { font-family: var(--display); font-size: 1.1rem; text-transform: uppercase; line-height: 1; }

.detail { display: grid; gap: 28px; }

.detail__top {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: end;
}

.detail__portrait { background: var(--surface-2); aspect-ratio: 1 / 1; }
.detail__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }

.detail__meta { display: grid; gap: 12px; }

.detail__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: var(--step-small);
  color: var(--ink);
}

.detail__stats b { color: var(--ink); font-weight: 600; }

.detail__block { display: grid; gap: 12px; }

.detail__block p { max-width: 62ch; }

/* The hub's killer panel is a signpost now: the numbers, the tier, and the way out to
   the killer's own page. The long copy lives on that page, not here. */
.detail__tier {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface);
}

.detail__block h4 {
  font-size: var(--step-body);
  letter-spacing: 0.01em;
  color: var(--muted);
  text-transform: none;
  font-family: var(--text);
  font-weight: 600;
}

.entry {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
}

/* The text column is placed, not inherited from child order. If an icon is absent
   (or its file 404s and removes itself), the text must still land in the 1fr
   column: otherwise it falls into the 44px icon column and wraps one word per
   line, which is what The Butcher's two powers did before their art existed. */
.entry > div { grid-column: 2; }
.entry--noicon > div { grid-column: 1; }

/* A fixed 44px box around every row icon. When the art is unpublished the box
   stays as a quiet tile, so the row keeps one left edge and no broken-image
   glyph appears in the text flow. */
.entry__icon {
  width: 44px;
  height: 44px;
  display: block;
  background: var(--surface-2);
}

.entry img { width: 44px; height: 44px; object-fit: contain; }
.entry__icon img { width: 100%; height: 100%; }

.entry__name { font-weight: 600; display: block; margin-bottom: 2px; }

.entry__text { margin: 0; color: var(--ink); font-size: var(--step-small); line-height: 1.5; max-width: 62ch; }

.entry__text b, .entry__text strong { color: var(--ink); font-weight: 600; }

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

/* an item whose official art is not published yet keeps the icon column, so every
   row in the list still shares one left edge instead of one entry sitting flush. */
.entry__slot { width: 44px; height: 44px; background: var(--surface-2); }

.maskgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px clamp(20px, 3vw, 40px); }

.mask {
  display: grid;
  gap: 8px;
  padding-block: 10px;
}

.mask img { width: 56px; height: 56px; object-fit: contain; }
.mask span { font-weight: 600; font-size: var(--step-small); }
.mask p { margin: 0; color: var(--ink); font-size: var(--step-small); line-height: 1.45; max-width: 62ch; }

/* ---------- generic lists ---------- */

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 40px); }

.econ { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(20px, 3vw, 40px); }

.list { display: grid; gap: 0; }

.list__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
}

.list__row + .list__row { background-image: none; }

.list__row img { width: 40px; height: 40px; object-fit: contain; }

.pair { display: grid; gap: 6px; }
.pair dt { font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; }
.pair dd { margin: 0; color: var(--ink); font-size: var(--step-small); max-width: 62ch; }

dl.stack { display: grid; gap: 18px; margin: 0; }

.price {
  font-size: var(--step-small);
  color: var(--accent);
  font-weight: 600;
}

.dense {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 clamp(20px, 3vw, 40px);
}

/* ---------- filter ---------- */

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; align-items: center; }

.chip {
  font: inherit;
  font-size: var(--step-small);
  background: var(--surface-2);
  color: var(--muted);
  border: 0;
  border-radius: var(--radius);
  padding: 9px 14px;
  cursor: pointer;
  min-height: 40px;
  transition: background-color 160ms ease, color 160ms ease;
}

.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent); color: #fff; }

.field {
  font: inherit;
  font-size: var(--step-small);
  background: var(--surface-2);
  color: var(--ink);
  border: 0;
  border-radius: var(--radius);
  padding: 11px 14px;
  min-height: 40px;
  min-width: 180px;
}

/* ---------- stats ---------- */

.stats { display: grid; gap: clamp(28px, 5vw, 56px); }

.stat { display: grid; gap: 4px; }
.stat__num { font-family: var(--display); font-size: var(--step-display); line-height: 0.85; }
.stat__label { color: var(--ink); font-size: var(--step-small); }

/* ---------- mistakes: a list on the page, not another box ---------- */

.mistakes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px clamp(24px, 4vw, 64px);
  margin: 0;
  padding-left: 1.4em;
  font-size: var(--step-body);
  max-width: 90ch;
}

.mistakes li { padding-left: 6px; max-width: 62ch; }
.mistakes li::marker { font-family: var(--display); font-size: 1.35em; color: var(--accent); }

/* ---------- faq ---------- */

.faq { display: grid; gap: 26px; max-width: 74ch; }
.faq h3 { font-family: var(--text); text-transform: none; font-size: var(--step-lead); font-weight: 600; line-height: 1.25; }
.faq p { color: var(--ink); margin: 8px 0 0; max-width: 62ch; }

/* ---------- builds ---------- */

.build { display: grid; gap: 10px; padding-block: clamp(18px, 2.6vw, 26px); }
.build h3 { font-size: var(--step-lead); }
.build__perks { display: flex; flex-wrap: wrap; gap: 6px; }
.build__perks span { background: var(--surface-3); padding: 6px 10px; font-size: var(--step-small); }
.build p { margin: 0; color: var(--ink); font-size: var(--step-small); max-width: 62ch; }

/* ---------- footer ---------- */

/* ---------- tier list ---------- */

.tiers { display: grid; gap: clamp(14px, 2.2vw, 24px); }

.tier {
  display: grid;
  grid-template-columns: clamp(84px, 9vw, 128px) minmax(0, 1fr);
  background: var(--surface);
  align-items: stretch;
}

.tier__letter {
  font-family: var(--display);
  font-size: clamp(3.2rem, 5.6vw, 5rem);
  line-height: 1;
  display: grid;
  place-items: center;
  padding-block: 18px;
  background: var(--surface-2);
  color: var(--muted);
}

/* The palette carries one accent, so the bands step through tone instead of
   inventing a gold and a silver. Only the top band is allowed the red. */
.tier--s .tier__letter { background: var(--accent); color: #fff; }
.tier--a .tier__letter { background: var(--surface-3); color: var(--ink); }
.tier--b .tier__letter { background: var(--surface-2); color: var(--muted); }

.tier__body { padding: clamp(18px, 2.4vw, 30px); display: grid; gap: 16px; }

.tier__label {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  color: var(--muted);
}

.tier__picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(16px, 2vw, 24px) clamp(20px, 3vw, 40px);
}

.tcard { display: grid; gap: 10px; align-content: start; }

.tcard__top { display: flex; align-items: center; gap: 14px; }

.tcard__art {
  width: 64px;
  height: 64px;
  flex: none;
  object-fit: cover;
  object-position: 50% 20%;
  background: var(--surface-2);
}

.tcard__meta { display: grid; gap: 4px; }
.tcard h3 { font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; line-height: 1; }
.tcard p { margin: 0; color: var(--ink); font-size: var(--step-small); line-height: 1.5; max-width: 62ch; }

.buy {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: buy;
  display: grid;
}

.buystep {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding-block: clamp(16px, 2.4vw, 24px);
}

.buystep + .buystep { border-top: 1px solid var(--surface-3); }

.buystep::before {
  counter-increment: buy;
  content: counter(buy);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--display);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--accent);
  align-self: center;
}

.buystep__name { grid-column: 2; font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; line-height: 1; }
.buystep__price { grid-column: 3; font-size: var(--step-small); color: var(--muted); text-align: right; }
.buystep p { grid-column: 2 / 4; margin: 0; color: var(--ink); font-size: var(--step-small); line-height: 1.5; max-width: 62ch; }

/* ---------- killer detail pages ---------- */

.kpage__crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(24px, 5vw, 56px) 0 0;
  font-size: var(--step-small);
  color: var(--muted);
}

.kpage__crumb a { color: var(--muted); }
.kpage__crumb a:hover { color: var(--ink); }
.kpage__crumb span:last-child { color: var(--ink); }

.kpage__grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
  margin-top: clamp(20px, 3vw, 34px);
}

.kpage__art { background: var(--surface-2); aspect-ratio: 1 / 1; }
.kpage__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }

.kpage__intro { display: grid; gap: 16px; align-content: start; }
.kpage__intro h1 { font-size: var(--step-head); }
.kpage__real { margin: 0; color: var(--muted); font-size: var(--step-small); }
.kpage__real b { color: var(--ink); font-weight: 600; }

.kpage__badge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 14px 18px;
  background: var(--surface);
}

.kpage__badge-letter {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  background: var(--surface-3);
  color: var(--ink);
}

.kpage__badge-letter.is-s { background: var(--accent); color: #fff; }
.kpage__badge-letter.is-b { background: var(--surface-2); color: var(--muted); }

.kpage__badge-text { display: grid; gap: 3px; font-size: var(--step-small); color: var(--ink); }
.kpage__badge-text b {
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.kpage__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kpage__lede { margin: 0; color: var(--ink); font-size: var(--step-body); line-height: 1.55; max-width: 62ch; }
.kpage__more { color: var(--accent); font-weight: 600; }
.kpage__more:hover { color: var(--ink); }

.kchips { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }

.kchip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: var(--surface);
}

.kchip:hover { background: var(--surface-2); color: var(--ink); }
.kchip.is-current { background: var(--accent); color: #fff; }
.kchip__tier { flex: none; width: 20px; font-family: var(--display); font-size: 1.35rem; line-height: 1; color: var(--accent); }
.kchip.is-current .kchip__tier { color: #fff; }
.kchip__name { font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; line-height: 1; }

.footer { background: var(--surface); }

.footer__band { background: var(--surface-2); }
.footer__band img { width: 100%; height: auto; aspect-ratio: 1400 / 368; object-fit: cover; filter: brightness(0.68); }

.footer__inner {
  padding-block: clamp(34px, 5vw, 68px);
  display: grid;
  gap: clamp(26px, 4vw, 46px);
}

/* the name returns at full width: the footer is a close, not a sitemap */
.footer__name {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1rem + 8vw, 6.5rem);
  line-height: 0.84;
  text-transform: uppercase;
  margin: 0;
}

.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(22px, 4vw, 48px); }

.footer__cols h3 {
  font-family: var(--text);
  font-size: var(--step-small);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  margin: 0 0 14px;
}

.footer__list { display: grid; gap: 11px; }
.footer__list a { color: var(--ink); text-decoration: none; }
.footer__list a:hover { color: var(--accent); }

.footer__about p { margin: 0 0 12px; font-size: var(--step-small); color: var(--ink); max-width: 46ch; }

.footer__close {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: baseline;
  justify-content: space-between;
}

.footer__close p { margin: 0; font-size: var(--step-small); color: var(--muted); max-width: 68ch; }
.footer__top { font-size: var(--step-small); color: var(--ink); white-space: nowrap; }

/* ---------- reveal motion ---------- */

/* Hero load sequence: four things, one gesture. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] {
    opacity: 0;
    transform: translateY(18px);
    animation: rise var(--t-reveal) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 140ms);
  }
}

@keyframes rise { to { opacity: 1; transform: none; } }

/* Section entrances, once, on entry. */
@media (prefers-reduced-motion: no-preference) {
  .js .rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 620ms var(--ease-out), transform 760ms var(--ease-out);
  }
  .js .rv.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
  .hero__bg img { animation: none; }
}

/* ---------- one layout ---------- */

/* This page is designed at one width and served at one width: the viewport meta
   asks a phone for 980px, so a phone renders the same layout a desktop gets,
   scaled to fit. There are no width-based overrides here on purpose — a fixed
   desktop composition forced into 390px does not survive it, it collapses (the
   roster's 260px column leaves the detail ~90px and every line breaks to one
   word). Anything narrow is a browser-window problem, not a second design. */