/* Status Post — shared stylesheet.
   Tokens and the room palette come from the original single-file landing page. */

/* Fonts are served from this origin, not from Google.
   /legal/privacy says "no third-party trackers", and a webfont request hands the
   host the reader's IP and the URL they are reading — on a site whose whole
   proposition is that nobody can tell who is reading the Recovery Room. Both
   families are variable, one file per subset, covering the full weight range. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #EEF0EA;
  --paper-alt: #E3E6DC;
  --ink: #1D2333;
  --ink-soft: #4A5266;
  --line: rgba(29, 35, 51, 0.18);
  --line-soft: rgba(29, 35, 51, 0.28);
  --cta: #B8842A;
  --cta-hover: #9C6F20;
  --off-duty: #6E8F6A;
  --moonlight: #A8672F;
  --recovery: #B06E82;
  --huddle: #47698A;
  --consult: #3D8580;
  --flag: #8A3B2B;
  --max: 1120px;
  --gutter: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display, nav, button, .plaque, summary, label,
.btn-primary, .btn-text, .nav-link, .discharge-heading, th, .tag {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
}

a { color: var(--ink); }

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

img { max-width: 100%; }

[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 10;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- header and nav ---------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px var(--gutter) 0;
}

.wordmark {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2.2vw, 24px);
  font-size: 0.92rem;
}

.nav-link {
  text-decoration: none;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}
.nav-link:hover { border-bottom-color: var(--ink); }
.nav-link[aria-current="page"] { border-bottom-color: var(--cta); }

.nav-link.is-upcoming { color: var(--ink-soft); cursor: default; }
.nav-soon {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line-soft);
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 2px;
}

.btn-primary {
  display: inline-block;
  background: var(--cta);
  color: var(--ink);
  border: none;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.btn-primary:hover { background: var(--cta-hover); }
.nav-cta { padding: 9px 18px; }

/* ---------- generic page furniture ---------- */
.band { padding: clamp(48px, 8vw, 88px) var(--gutter); }
.band-alt { background: var(--paper-alt); }
.band-inner { max-width: var(--max); margin: 0 auto; }
.measure { max-width: 68ch; }


/* An element that is both .band-inner and .prose used to take the container's
   centring AND prose's narrow measure, so the body floated in the middle of the
   page while the heading above it sat at the left edge. Every prose page was
   subtly misaligned. Hold the container at full width and put the reading
   measure on its children instead. */
.band-inner.prose { max-width: var(--max); }
.band-inner.prose > * { max-width: 68ch; }
.band-inner.prose > .table-wrap,
.band-inner.prose > .badge-gallery,
.band-inner.prose > .split { max-width: none; }

.page-head {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) var(--gutter) clamp(20px, 3vw, 36px);
}
.page-head h1 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin: 0 0 18px;
}
.page-head .lede {
  font-size: 1.18rem;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0;
}

.plaque {
  display: inline-block;
  border: 1.5px solid var(--ink);
  padding: 6px 14px;
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  transform: rotate(-1.2deg);
  margin-bottom: 26px;
  background: var(--paper);
}
.plaque.plain { transform: none; }

.crumb {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px var(--gutter) 0;
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.crumb a { color: var(--ink-soft); }

h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 12px; }
h3 { font-size: 1.15rem; margin: 32px 0 8px; }

.prose { max-width: 68ch; }
.prose p, .prose li { color: var(--ink-soft); }
.prose p:first-child { margin-top: 0; }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.1rem; }
.prose li { margin-bottom: 8px; }

.instruction { color: var(--ink-soft); margin: 0 0 40px; font-style: italic; }

/* ---------- callouts ---------- */
.note {
  border-left: 4px solid var(--huddle);
  background: var(--paper-alt);
  padding: 18px 22px;
  margin: 28px 0;
  max-width: 68ch;
  font-size: 0.98rem;
}
.note h3 { margin-top: 0; font-size: 1rem; }
.note.flag { border-left-color: var(--flag); }
.note.draft { border-left-color: var(--cta); }
.note p:last-child { margin-bottom: 0; }

.tag {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line-soft);
  padding: 3px 8px;
  color: var(--ink-soft);
}

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: 26px 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--line);
}
th { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
td { color: var(--ink-soft); }
td:first-child { color: var(--ink); }
td .no { color: var(--flag); font-weight: 600; }

/* ---------- hero (home) ---------- */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(36px, 7vw, 84px) var(--gutter) clamp(48px, 8vw, 96px);
}
.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 17ch;
  margin: 0 0 22px;
}
.hero .subhead {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0 0 34px;
}

/* The hero settles by moving, never by appearing. Text parked at opacity 0 behind a
   delay means the first painted frame is an empty page — which is what a link preview,
   a slow phone and a stalled stylesheet all get. */
@media (prefers-reduced-motion: no-preference) {
  .hero .plaque, .hero h1, .hero .subhead, .hero .btn-primary {
    animation: settle-in 0.45s ease both;
  }
  .hero .plaque { animation-delay: 0.02s; }
  .hero h1 { animation-delay: 0.08s; }
  .hero .subhead { animation-delay: 0.16s; }
  .hero .btn-primary { animation-delay: 0.24s; }
}
@keyframes settle-in {
  from { transform: translateY(7px); }
  to { transform: translateY(0); }
}

.vision p {
  max-width: 60ch;
  margin: 0 auto;
  font-size: 1.3rem;
  line-height: 1.7;
}
.vision p + p { margin-top: 1.15em; }

/* ---------- room cards ---------- */
/* Five rooms, five colours. They used to be 4px of left border on an otherwise
   identical card, which is the most distinctive thing the product has, spent on
   almost nothing. Each card now carries a wash of its own colour and a solid rule
   across the top. The wash is deliberate rather than the colour at full strength:
   ink on a saturated Huddle blue fails contrast, ink on a 12% tint does not. */
.room-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
/* The first room is the default room. Give it the weight to say so. */
.room-card:first-child { grid-column: span 2; }

@media (max-width: 900px) {
  .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-card:first-child { grid-column: span 2; }
}
@media (max-width: 620px) {
  .room-grid { grid-template-columns: 1fr; }
  .room-card:first-child { grid-column: span 1; }
}

a.room-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid color-mix(in srgb, var(--room-color, var(--ink)) 30%, var(--line));
  border-top: 6px solid var(--room-color, var(--ink));
  padding: 20px 22px 24px;
  background: color-mix(in srgb, var(--room-color, var(--ink)) 9%, var(--paper));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.room-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--room-color, var(--ink)) 45%, transparent);
}

.room-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.room-name {
  color: var(--room-color, var(--ink));
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
}
.room-toggle { font-size: 1.3rem; color: var(--room-color, var(--ink)); line-height: 1; }
.room-teaser { display: block; color: var(--ink-soft); margin-top: 8px; font-size: 1rem; }
.room-detail { margin: 16px 0 0; padding-top: 16px; border-top: 1px dashed var(--line-soft); font-size: 0.98rem; color: var(--ink-soft); }
.room-card.is-held { opacity: 0.82; }

.room-hero { border-left: 6px solid var(--room-color, var(--ink)); padding-left: clamp(16px, 3vw, 28px); }

/* ---------- standing orders ---------- */
.standing-orders .plaque { margin-bottom: 22px; }
.standing-orders h2 { max-width: 24ch; }
.orders-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 760px) {
  .orders-list { grid-template-columns: 1fr; }
}
.order {
  border: 1px solid var(--line);
  border-left: 4px solid var(--room-color, var(--ink));
  padding: 22px 24px;
  background: var(--paper);
}
.order h3 { font-size: 1.12rem; margin: 0 0 8px; color: var(--room-color, var(--ink)); }
.order p { margin: 0 0 8px; color: var(--ink-soft); font-size: 1rem; }
.order p:last-child { margin-bottom: 0; }
.order .more { font-size: 0.92rem; }

/* ---------- filter bar ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.filter-chip {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 7px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter-empty { color: var(--ink-soft); font-style: italic; padding: 20px 0; }

/* ---------- list of links (huddle library, trust index) ---------- */
.stack { margin-top: 8px; }
.stack-item { padding: 26px 0; border-top: 1px dashed var(--line-soft); }
.stack-item:last-child { border-bottom: 1px dashed var(--line-soft); }
.stack-item h3 { font-size: 1.15rem; margin: 0 0 8px; }
.stack-item h3 a { text-decoration: none; }
.stack-item h3 a:hover { text-decoration: underline; }
.stack-item p { margin: 0; color: var(--ink-soft); max-width: 68ch; font-size: 1.02rem; }
.stack-item .tag { margin-bottom: 10px; }
.external-note { color: var(--ink-soft); font-style: italic; font-size: 0.85rem; margin: 6px 0 0; }

/* ---------- forms ---------- */
.signup-form { max-width: 460px; margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; }
.field .optional { font-weight: 400; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family: 'Source Serif 4', serif;
  font-size: 1.05rem;
  padding: 10px 2px;
  border: none;
  border-bottom: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  border-radius: 0;
}
.field input::placeholder { color: var(--line-soft); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--cta); }
.field-check { flex-direction: row; align-items: flex-start; gap: 10px; }
.field-check input { flex: none; margin-top: 6px; }
.field-check label { font-weight: 400; font-size: 0.95rem; line-height: 1.5; }
.signup-form .btn-primary { align-self: flex-start; margin-top: 6px; }

.form-note { margin-top: 16px; font-size: 0.92rem; color: var(--ink-soft); max-width: 52ch; }
.form-note.error { color: var(--flag); }

/* ---------- rate check ---------- */
.rate-check-teaser .split { align-items: center; }
.rate-check-preview {
  border: 1px solid var(--line);
  border-left: 4px solid var(--cta);
  background: var(--paper);
  padding: 26px 24px;
}
.rate-check-preview .rate-result-label { font-style: italic; text-transform: none; letter-spacing: 0; }
.rate-check-layout { align-items: start; }
.rate-check-layout .signup-form { max-width: none; }
.rate-result {
  border: 1px solid var(--line);
  border-left: 4px solid var(--cta);
  background: var(--paper-alt);
  padding: 28px 26px;
  position: sticky;
  top: 24px;
}
.rate-result-label {
  display: block;
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.rate-result-figure {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--ink);
  display: block;
  margin-bottom: 14px;
}
.rate-result-unit { font-size: 1.2rem; color: var(--ink-soft); margin-left: 4px; }
.rate-result-summary { color: var(--ink-soft); font-size: 1rem; margin: 0 0 18px; }
.rate-result .table-wrap { margin: 0; }
.rate-result table { font-size: 0.88rem; }
.rate-result td { padding: 8px 0; }
.rate-result td:last-child { text-align: right; color: var(--ink); font-weight: 600; }
@media (max-width: 880px) { .rate-result { position: static; margin-top: 8px; } }

/* ---------- footer ---------- */
.discharge {
  border-top: 1px solid var(--line);
  margin-top: clamp(48px, 8vw, 96px);
  padding: clamp(40px, 6vw, 64px) var(--gutter) 40px;
}
.discharge-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
}
.discharge h2 { font-size: 1.15rem; margin: 0 0 10px; }
.discharge p { color: var(--ink-soft); max-width: 40ch; margin: 0; }
.discharge-links { display: flex; flex-direction: column; gap: 10px; font-size: 0.95rem; }
.discharge-heading {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.discharge-links .muted { color: var(--ink-soft); font-family: 'Source Serif 4', serif; font-style: italic; }
.fine-print {
  max-width: var(--max);
  margin: 28px auto 0;
  padding: 0 var(--gutter);
  color: var(--ink-soft);
  font-size: 0.82rem;
}

/* Verification badges — rendered from src/badges.json by build.py.

   One mark for every method, deliberately. A more elaborate check for
   license-verified than for peer-vouched would rank the members, and the badge
   is only allowed to state two facts: how someone was verified, and what they
   do. Management titles get a marker, not a promotion — it reads as a
   disclosure, which is what it is. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 4px 11px 4px 8px;
  color: var(--ink);
  background: var(--paper);
  white-space: nowrap;
}

.badge-check {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--consult);
}

.badge-management {
  border-style: dashed;
  border-color: var(--moonlight);
}
.badge-management .badge-check { color: var(--moonlight); }

.badge-gallery { margin: 28px 0 8px; }
.badge-gallery h3 { margin-bottom: 4px; }
.badge-gallery h4 {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 18px 0 8px;
}

.badge-list { list-style: none; padding: 0; margin: 12px 0 0; }
.badge-list > li { margin-bottom: 10px; }

.badge-list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.badge-list-inline > li {
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.badge-list-inline em {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--moonlight);
}

.badge-note {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.badge-group { margin-bottom: 4px; }

/* A page describing mechanism that does not exist yet says so, in one place, in
   the same words every time. build.py fails if a route marked preLaunch in the
   manifest is missing this block, or if a route not so marked still carries one
   after the network opens. */
.note.prelaunch { border-left-color: var(--huddle); }


/* ---------- composition ----------

   Every page was a single column about 700px wide inside a 1280px window, so the
   right half of the site was empty on every screen. That is the whole reason it
   read as a ribbon of text rather than a page. `.split` is the fix: a statement on
   the left, the thing that supports it on the right. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(26px, 4.5vw, 68px);
  align-items: start;
}
.split > * { min-width: 0; }
.split .prose, .split .measure { max-width: none; }
/* Inside a split the column already sets the measure; a second cap just makes
   the headline stack into a narrow tower. */
.split .hero h1, .hero .split h1 { max-width: none; }
.split .subhead { max-width: none; }
/* A heading in the left column of a split is the statement, so let it breathe and
   sit at the top of the pair rather than inheriting a paragraph's top margin. */
.split > h2 { margin-top: 0; max-width: 16ch; }
.page-head .split { align-items: end; }
.page-head .split .lede { margin-bottom: 0; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- how it works ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 15px; align-items: start; }
.step-n {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cta);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}
.step h3 {
  font-size: 1.02rem;
  margin: 4px 0 4px;
}
.step p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- wayfinding ----------

   Pages used to end at the footer with nothing pulling you onward. Rendered from
   the manifest so the order is the IA's, not whatever each page felt like. */
.next-step {
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px var(--gutter) clamp(40px, 6vw, 72px);
}
.next-step-inner { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.next-step .label {
  display: block;
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.next-step a {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--cta);
  padding-bottom: 2px;
}
.next-step a:hover { color: var(--cta-hover); }

/* ---------- jump index for the long pages ---------- */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 0 30px;
}
.jump-label {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.jump a {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.jump a:hover { color: var(--ink); border-bottom-color: var(--cta); }

/* ---------- figures ----------

   No photographs exist yet. This is here so real ones drop in without a layout
   change; nothing renders an empty box in the meantime. */
.figure { margin: 0; }
.figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--paper-alt);
  border: 1px solid var(--line);
}
.figure figcaption {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 9px;
}

/* ---------- gutter reconciliation ----------

   Two conventions were fighting. `.band` puts the gutter on itself and centres a
   `--max` box inside it, so its content starts at (viewport - max) / 2. The
   containers below set `max-width: --max` and then add the gutter *inside* it, so
   their content started one whole gutter further in — every page's heading sat
   56px out from its own body at desktop width. Widening them by two gutters lands
   their content box on the same line as `.band-inner`.

   Last in the file on purpose: these selectors are defined above, so an earlier
   override would lose to them. */
.crumb,
.page-head,
.hero,
.next-step,
.fine-print,
.site-header,
.discharge {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
}