/* ═══════════════════════════════════════════════════════════════════════════
   XXVII|SEVENTEEN — Front Door
   Two registers in one document:
     INK   — the threshold. Brand "Bold tier" palette (handoff §2).
             Header, hero, the why, the send, the confirmation, the footer.
     PAPER — the instrument. Modernist tokens from the prototype design system
             (light ground, single red accent, flat, 0 radius, 2px rules).
             The five waypoints a man actually works through.
   Dark threshold → lit working pages → dark close.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* — Ink register · brand Bold tier — */
  --ink: #0b0b0d;
  --ink-raise: #111116;
  --ink-card: #131318;
  --ink-rule: #22222a;
  --ink-rule-lit: #33333f;
  --orange: #ff8200;
  --orange-soft: #ff9b33;
  --orange-deep: #e67400;
  --steel: #3d6e96;
  --grey: #8b8589;
  --grey-lit: #b5b2b4;
  --white: #fff;
  --red: #c1121f;

  /* — Paper register · Modernist tokens — */
  --paper: #f3f2f2;
  --paper-surface: #eae9e9;
  --paper-ink: #201e1d;
  --paper-divider: rgba(32, 30, 29, 0.4);
  --accent: #ec3013;

  --n-100: #f8f4f4;
  --n-200: #eae7e7;
  --n-300: #d7d3d3;
  --n-400: #bab6b6;
  --n-500: #9b9797;
  --n-600: #7d7979;
  --n-700: #605d5d;
  --n-800: #444141;
  --n-900: #2d2b2b;

  --a-100: #fff2ef;
  --a-200: #ffe0d9;
  --a-300: #ffc4b8;
  --a-400: #ff9783;
  --a-500: #ff563c;
  --a-600: #dd2b0f;
  --a-700: #ae1800;
  --a-800: #7c1405;
  --a-900: #4d170e;

  /* — Type — */
  --display: "League Spartan", system-ui, -apple-system, sans-serif;
  --text: "Archivo", system-ui, -apple-system, sans-serif;

  --shell: min(1120px, calc(100% - 48px));
  --gutter: 132px;

  font-family: var(--text);
  color: var(--white);
  background: var(--ink);
  font-synthesis: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
/* No background here on purpose: :root paints the canvas ink, which leaves the
   fixed .survey layer at z-index -1 free to sit between the canvas and the page. */
body { margin: 0; font-size: 17px; line-height: 1.55; letter-spacing: -0.003em; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
::selection { background: var(--orange); color: var(--ink); }

/* Display type is brand-locked: League Spartan, 900, uppercase, tight. */
h1, h2, h3, .wordmark, .key, .submit-button, .walk-option strong {
  font-family: var(--display);
}

/* ── The survey ───────────────────────────────────────────────────────────
   The ground under the whole ink register. It is a survey sheet: contours for
   the country a man is actually walking, tables of men set in rings and joined
   by routes between them, and two blades crossed at the centre throwing sparks
   — Proverbs 27:17, drawn rather than quoted. Generated by tools/make-field.mjs.

   Fixed, so the page travels across the map instead of dragging it along, and
   held at z-index -1 so every section sits on top of it without any section
   needing to know it is there. The paper register is opaque and masks it, which
   is the point: the map is the threshold, the paper is the work.

   Anchored at 48% / 52% — the crossing of the blades — so that on a phone, where
   `cover` crops hard, what survives in frame is the iron and the reference. */
.survey {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/field-ink.svg") 48% 52% / cover no-repeat;
  opacity: 0.62;
}

/* Paper tooth over the whole page — reads as noise on ink, as stock on paper. */
.grain {
  position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.shell { width: var(--shell); margin-inline: auto; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.paper :focus-visible { outline-color: var(--accent); }

/* ── Masthead ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 60; height: 74px;
  display: flex; align-items: center;
  padding: 0 max(24px, calc((100% - 1120px) / 2));
  border-bottom: 2px solid var(--ink-rule);
  background: rgba(11, 11, 13, 0.88);
  backdrop-filter: blur(16px);
}

.wordmark {
  display: inline-flex; align-items: baseline; text-decoration: none;
  font-size: 21px; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase;
}
.wordmark i { padding: 0 5px; color: var(--grey); font-style: normal; font-weight: 400; }
.wordmark strong { color: var(--orange); font-weight: 900; }

.tagline {
  margin-left: auto; color: var(--orange);
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
}

/* ── Hero — the threshold ─────────────────────────────────────────────── */

.hero {
  position: relative; display: grid; align-items: center; overflow: hidden;
  min-height: min(780px, calc(100svh - 74px));
  border-bottom: 2px solid var(--ink-rule);
}
.hero-inner { position: relative; z-index: 2; padding: 108px 0 96px; }

.eyebrow, .section-index {
  margin: 0 0 22px; color: var(--orange);
  font-size: 11px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase;
}

/* The numeral inside a section label is set as display type, not as a word —
   a man should be able to see where he is from across the room. */
.section-index b {
  display: inline-block; vertical-align: -0.14em; margin-left: 2px;
  font-family: var(--display); font-size: 1.72em; font-weight: 900;
  letter-spacing: -0.02em;
}

/* One line, always. The mark is XXVII|SEVENTEEN — SEVENTEEN never drops beneath
   XXVII (handoff §2). The size is capped against a measured width: at League
   Spartan 900 with -0.055em tracking the full mark runs 7.79em, so the widest it
   can ever be inside the 1120px shell is 138px, and 9.6vw stays under that at
   every viewport above the 760px breakpoint. */
.hero h1 {
  margin: 0; white-space: nowrap;
  font-size: min(9.6vw, 138px); font-weight: 900;
  line-height: 0.94; letter-spacing: -0.055em; text-transform: uppercase;
}
.hero h1 i { padding: 0 0.03em; color: var(--grey); font-style: normal; font-weight: 400; }
.hero h1 strong { color: var(--orange); font-weight: 900; }

blockquote { margin: 56px 0 0; padding: 4px 0 3px 26px; border-left: 3px solid var(--orange); }
blockquote p { margin: 0; font-size: clamp(18px, 2.4vw, 25px); font-weight: 500; line-height: 1.34; }
blockquote cite {
  display: block; margin-top: 12px; color: var(--grey);
  font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
}

.start-link {
  display: inline-flex; align-items: center; gap: 16px; margin-top: 56px;
  color: var(--white); font-size: 11px; font-weight: 800; letter-spacing: 0.2em;
  text-decoration: none; text-transform: uppercase;
}
.start-link span {
  display: grid; width: 38px; height: 38px; place-items: center;
  border: 2px solid var(--orange); color: var(--orange);
  transition: transform 0.25s ease, background 0.25s ease;
}
.start-link:hover span { transform: translateY(5px); background: rgba(255, 130, 0, 0.12); }

/* Spotlight. The survey runs edge to edge behind the hero; this pool of ink
   sits over it and deepens toward the left, so the words hold the light and the
   map stays legible out to the right — the man in front, the ground behind. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(
    118% 92% at 16% 44%,
    rgba(11, 11, 13, 0.94) 0%,
    rgba(11, 11, 13, 0.74) 36%,
    rgba(11, 11, 13, 0.2) 72%,
    rgba(11, 11, 13, 0) 100%
  );
}

.hero-ghost {
  position: absolute; right: -30px; bottom: -90px; color: transparent;
  font-family: var(--display); font-size: clamp(160px, 28vw, 380px);
  font-weight: 900; letter-spacing: -0.08em; line-height: 1;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
}

/* ── The why ──────────────────────────────────────────────────────────── */

.why {
  display: grid; grid-template-columns: 1fr 1fr; gap: 88px;
  padding-block: 120px; border-bottom: 2px solid var(--ink-rule);
}
.why .section-index { grid-column: 1 / -1; margin-bottom: -58px; }
.why h2, .send-section h2, .confirmation h2 {
  margin: 0; font-size: clamp(34px, 5vw, 64px); font-weight: 900;
  letter-spacing: -0.035em; line-height: 0.96; text-transform: uppercase;
}
.why-copy { display: grid; gap: 20px; }
.why-copy p { margin: 0; color: #d3d1d2; font-size: 17.5px; }

/* ═══ PAPER REGISTER ═══════════════════════════════════════════════════ */

/* The paper register is opaque — it masks the survey behind it on purpose. What
   carries through instead is the plotting sheet's control crosses, so the two
   registers read as the same document held under different light. */
.paper {
  position: relative;
  background: url("/assets/survey-tile.svg") 0 0 / 160px 160px repeat, var(--paper);
  color: var(--paper-ink);
  color-scheme: light;
  border-top: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
}

/* Faint modular grid — Modernist keeps its structure visible. */
.paper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  width: min(1120px, calc(100% - 48px)); margin-inline: auto; left: 0; right: 0;
  background-image: repeating-linear-gradient(
    90deg, var(--paper-divider) 0 1px, transparent 1px calc(100% / 4)
  );
  opacity: 0.1;
}

.paper h2 {
  margin: 0; color: var(--paper-ink);
  font-size: clamp(32px, 4.6vw, 58px); font-weight: 900;
  letter-spacing: -0.035em; line-height: 0.96; text-transform: uppercase;
}
.paper .section-index { color: var(--accent); }
.paper ::selection { background: var(--accent); color: var(--paper); }

/* ── The route ────────────────────────────────────────────────────────── */

.route { position: relative; }
.route::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 10px;
  width: 2px; background: var(--n-300);
}

.waypoint { position: relative; padding: 104px 0 100px var(--gutter); }
.waypoint + .waypoint { border-top: 2px solid var(--paper-divider); }

/* Ordinal set flush in the gutter. Solid, not a hairline outline — the number
   is the milestone marker on the route, so it carries weight. */
.waypoint::before {
  content: attr(data-ord);
  position: absolute; left: 34px; top: 92px;
  font-family: var(--display); font-size: 76px; font-weight: 900;
  line-height: 0.8; letter-spacing: -0.06em; color: var(--n-900);
}

/* The current waypoint's number goes accent as a man reaches it. */
.waypoint:focus-within::before { color: var(--accent); }

.route-node {
  position: absolute; left: 3px; top: 110px; z-index: 1;
  width: 16px; height: 16px; background: var(--accent);
  box-shadow: 0 0 0 6px var(--paper);
}

.section-intro { max-width: 640px; margin: 16px 0 46px; color: var(--n-700); font-size: 16.5px; }

/* ── Fields ───────────────────────────────────────────────────────────── */

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }
.field-grid.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid.compact { max-width: 780px; margin-top: 46px; }

.field-grid label, .long-fields label, legend {
  color: var(--n-800); font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.field-grid b, legend b { color: var(--accent); }

.paper input, .paper select, .paper textarea {
  display: block; width: 100%; margin-top: 9px; padding: 13px 14px;
  border: 1px solid var(--n-400); border-bottom-width: 2px; border-radius: 0; outline: 0;
  background: var(--paper-surface); color: var(--paper-ink);
  font-size: 16px; letter-spacing: -0.005em;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.paper input:hover, .paper select:hover, .paper textarea:hover { border-color: var(--n-600); }
.paper input:focus, .paper select:focus, .paper textarea:focus {
  border-color: var(--accent); border-bottom-color: var(--accent); background: var(--n-100);
}
.paper input::placeholder, .paper textarea::placeholder { color: var(--n-600); }

fieldset { margin: 38px 0 0; padding: 0; border: 0; }
legend { margin-bottom: 14px; }

.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  padding: 11px 15px; border: 1px solid var(--n-400); background: transparent;
  color: var(--n-700); font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.choice:hover { border-color: var(--n-700); color: var(--paper-ink); background: var(--n-200); }
.choice.active { border-color: var(--accent); background: var(--a-100); color: var(--a-700); }

/* ── Waypoint 02 · the walk ───────────────────────────────────────────── */

.walk-options { position: relative; display: grid; max-width: 760px; }
.walk-options::before {
  content: ""; position: absolute; top: 24px; bottom: 24px; left: 8px;
  width: 2px; background: var(--n-300);
}
.walk-option {
  position: relative; display: grid; grid-template-columns: 18px 158px 1fr; gap: 20px;
  align-items: start; padding: 15px 18px 15px 0;
  border: 1px solid transparent; background: transparent; color: var(--paper-ink);
  text-align: left; cursor: pointer; transition: background 0.18s, border-color 0.18s;
}
.walk-option:hover { background: var(--n-200); }
.walk-option.active { border-color: var(--accent); background: var(--a-100); }
.walk-dot {
  position: relative; z-index: 1; width: 16px; height: 16px; margin-top: 4px;
  border: 2px solid var(--n-600); background: var(--paper);
}
.walk-option.active .walk-dot { border-color: var(--accent); background: var(--accent); }
.walk-option strong { font-size: 15px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.walk-option small { color: var(--n-700); font-size: 14.5px; line-height: 1.45; }

/* ── Waypoint 03 · the topic engine ───────────────────────────────────── */

.scale-key { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 38px; }
.scale-key > div {
  padding: 20px; border: 1px solid var(--n-300); border-top: 3px solid var(--n-400);
  background: var(--paper-surface);
}
.scale-key > div:nth-child(1) { border-top-color: var(--steel); }
.scale-key > div:nth-child(2) { border-top-color: var(--orange); }
.scale-key > div:nth-child(3) { border-top-color: var(--red); }
.scale-key p { margin: 12px 0 0; color: var(--n-700); font-size: 14px; }

.key {
  display: inline-block; padding: 7px 11px; color: var(--white);
  font-size: 10px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
}
.key.interested { background: var(--steel); }
.key.struggling { background: var(--orange); color: var(--ink); }
.key.urgent { background: var(--red); }

.microcopy { margin: 14px 0 0; color: var(--n-600); font-size: 13px; }

.marks-rail {
  position: sticky; top: 74px; z-index: 40; margin-top: 40px;
  padding: 14px 0 12px; border-bottom: 2px solid var(--paper-ink);
  background: rgba(243, 242, 242, 0.95); backdrop-filter: blur(12px);
}
.marks-rail > div:first-child {
  display: flex; justify-content: space-between; gap: 20px; color: var(--n-700);
  font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
}
.marks-rail strong { color: var(--paper-ink); }

/* Ten discrete marks, not a continuous bar — the cap is the point. */
.meter {
  height: 6px; margin-top: 10px; background: var(--n-300);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%);
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%);
}
.meter i { display: block; width: 0; height: 100%; background: var(--accent); transition: width 0.25s ease; }
.marks-rail p {
  height: 16px; margin: 7px 0 -2px; color: var(--accent);
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}

.topic-cluster { margin-top: 54px; }
.cluster-heading {
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  padding: 0 0 12px; border-bottom: 2px solid var(--paper-ink);
}
.cluster-heading h3 {
  margin: 0; font-size: 17px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}
/* The roman numeral leads the cluster at full display weight — same reasoning
   as the waypoint ordinals: numbers are the wayfinding, so they are set loud. */
.cluster-heading h3 span {
  display: inline-block; vertical-align: -0.1em; padding-right: 18px;
  color: var(--accent); font-size: 1.5em; font-weight: 900; letter-spacing: -0.01em;
}
.cluster-heading small {
  color: var(--n-600); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}

.topic-row {
  display: grid; grid-template-columns: minmax(230px, 1fr) auto; gap: 24px; align-items: center;
  padding: 16px 12px 16px 0; border-bottom: 1px solid var(--n-300);
  transition: opacity 0.2s ease, background 0.2s ease;
}
.topic-row:hover { background: var(--n-200); }
.topic-name p { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.topic-name small {
  display: block; margin-top: 5px; color: var(--n-600);
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}

.topic-actions { display: flex; gap: 7px; }
.topic-button {
  padding: 9px 12px; border: 1px solid var(--n-400); background: var(--paper);
  color: var(--n-700); font-size: 10px; font-weight: 900; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.topic-button:hover { border-color: var(--n-800); color: var(--paper-ink); }
.topic-button.active[data-value="1"] { border-color: var(--steel); background: var(--steel); color: var(--white); }
.topic-button.active[data-value="2"] { border-color: var(--orange); background: var(--orange); color: var(--ink); }
.topic-button.active[data-value="3"] { border-color: var(--red); background: var(--red); color: var(--white); }
.topic-row.disabled { opacity: 0.36; }
.topic-row.disabled:hover { background: none; }

/* ── Waypoint 05 · long form ──────────────────────────────────────────── */

.long-fields { display: grid; max-width: 760px; gap: 30px; }
.long-fields label { color: var(--paper-ink); font-size: 16px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; }
.long-fields textarea { min-height: 130px; resize: vertical; }

/* ═══ BACK TO INK ══════════════════════════════════════════════════════ */

.send-section { background: linear-gradient(150deg, var(--ink-raise) 0%, var(--ink) 68%); }
.send-section .shell { padding-block: 88px 118px; }
.send-section p:not(.section-index) { max-width: 660px; margin: 20px 0 0; color: #d3d1d2; }

.consent {
  display: flex; max-width: 700px; gap: 15px; align-items: flex-start;
  margin-top: 34px; color: var(--grey-lit); font-size: 14.5px; line-height: 1.5; cursor: pointer;
}
.consent input {
  flex: 0 0 auto; width: 19px; height: 19px; margin: 2px 0 0;
  accent-color: var(--orange);
}
.honeypot { position: absolute; left: -10000px; }

.form-message {
  display: none; max-width: 700px; margin-top: 26px; padding: 14px 16px;
  border: 1px solid var(--red); border-left-width: 4px;
  background: rgba(193, 18, 31, 0.1); color: #ffb9be; font-size: 14.5px;
}
.form-message.visible { display: block; }
/* The same slot carries good news too — a restored draft is not an error. */
.form-message.quiet {
  border-color: var(--steel); background: rgba(61, 110, 150, 0.12); color: #bcd3e6;
}

/* Modernist: a button wider than its label starts flush left. */
.submit-button {
  display: flex; min-width: 292px; justify-content: space-between; align-items: center;
  margin-top: 32px; padding: 19px 22px; border: 0; background: var(--orange); color: var(--ink);
  font-size: 17px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
  text-align: left; cursor: pointer; transition: background 0.18s, transform 0.18s;
}
.submit-button:hover { background: var(--orange-soft); transform: translateY(-2px); }
.submit-button:active { background: var(--orange-deep); transform: none; }
.submit-button:disabled { opacity: 0.6; cursor: wait; transform: none; }
.submit-button i { font-size: 24px; font-style: normal; }

.confirmation { padding-block: 120px 160px; }
.confirmation h2 { color: var(--orange); font-size: clamp(60px, 10vw, 116px); }
.confirmation > div { display: grid; max-width: 640px; gap: 16px; margin-top: 34px; }
.confirmation p { margin: 0; color: #d3d1d2; }
.confirmation > strong {
  display: block; margin-top: 44px; color: var(--orange);
  font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
}
/* Shown only when the response is held on the device waiting for signal. */
.queued-note {
  padding: 16px 18px; border-left: 4px solid var(--steel);
  background: rgba(61, 110, 150, 0.12); color: #d8e4ee !important;
}

/* Installed as an app: no browser chrome, so the page pays for the notch,
   the home indicator, and the rounded display corners itself. */
.is-app body { padding-top: env(safe-area-inset-top); }
.is-app .shell,
.is-app .route { padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right)); }
.is-app footer .footer-inner { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.is-app .site-header { padding-top: 6px; }

footer { border-top: 2px solid var(--ink-rule); }
.footer-inner { display: flex; justify-content: space-between; align-items: baseline; padding-block: 46px 76px; }
.footer-inner p { margin: 0; text-align: right; }
.footer-inner p strong, .footer-inner p span { display: block; }
.footer-inner p strong { color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.footer-inner p span { margin-top: 6px; color: var(--grey); font-size: 11px; letter-spacing: 0.08em; }

/* ── Motion ───────────────────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --gutter: 84px; }
  .waypoint::before { left: 22px; top: 90px; font-size: 50px; }
  .paper::before { display: none; }
}

@media (max-width: 760px) {
  :root { --shell: min(100% - 30px, 1120px); --gutter: 34px; }
  body { font-size: 16px; }
  html { scroll-padding-top: 74px; }

  .site-header { height: 62px; padding-inline: 15px; }
  .wordmark { font-size: 17px; }
  .tagline { font-size: 9px; letter-spacing: 0.16em; }

  .hero { min-height: 660px; }
  .hero-inner { padding: 86px 0 74px; }
  /* 10.8vw keeps the full mark on one line down to 320px with room to spare —
     the measured ceiling at this shell width is ~11.6vw. */
  .hero h1 { font-size: 10.8vw; }
  blockquote { margin-top: 44px; padding-left: 18px; }
  .survey { opacity: 0.5; }

  .why { grid-template-columns: 1fr; gap: 28px; padding-block: 82px; }
  .why .section-index { margin-bottom: 0; }
  .why-copy p { font-size: 16px; }

  .route::before { left: 7px; }
  .waypoint { padding: 76px 0 74px var(--gutter); }
  .waypoint::before { display: none; }
  .route-node { left: 0; top: 84px; width: 15px; height: 15px; }

  .field-grid, .field-grid.thirds { grid-template-columns: 1fr; }
  .walk-option { grid-template-columns: 18px 104px 1fr; gap: 14px; padding-right: 6px; }
  .walk-option small { font-size: 13px; }

  .scale-key { grid-template-columns: 1fr; }
  .marks-rail { top: 62px; }
  .topic-row { grid-template-columns: 1fr; gap: 12px; padding-right: 0; }
  .topic-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
  .topic-button { padding: 12px 5px; }
  .cluster-heading h3 { font-size: 14px; }
  .cluster-heading h3 span { padding-right: 12px; }

  .send-section .shell { padding-block: 70px 92px; }
  .submit-button { width: 100%; min-width: 0; }
  .footer-inner { align-items: flex-start; }
  .footer-inner .wordmark { font-size: 15px; }
}

@media (max-width: 420px) {
  .walk-option { grid-template-columns: 18px 1fr; }
  .walk-option small { grid-column: 2; }
  .cluster-heading small { display: none; }
  .footer-inner { display: grid; gap: 26px; }
  .footer-inner p { text-align: left; }
}