/*
  SogaStudio design system: COMPONENTS (WO-2026-4372)
  Load AFTER soga-tokens.css.

  Written against the class names staging.soga-studio.com ALREADY uses
  (header.site, nav.site, .home-hero, .home-section, .grid2, .cell,
  .eyebrow, .lede, main.page, .answer, table.gates, dl.glossary, .next,
  .contact-wrap, .form-group, .btn-submit, .form-status, footer.site).
  So it replaces /assets/soga.css with no markup change, except:
    1. the header logo (text -> the WO-2026-4371 SVG), and
    2. OPTIONAL: class="on-dark" on one section, for a dark band.
  Both are listed in README.md › "Applying it".
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--fg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Links ─────────────────────────────────────────────────────── */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
a:hover { color: var(--fg); text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}

/* ─── Header + nav ──────────────────────────────────────────────── */
header.site {
  padding: var(--space-6) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  max-width: calc(var(--content) + 2 * var(--gutter));
  width: 100%;
}

/* The logo is the WO-2026-4371 horizontal lockup as an <img>.
   28px tall on desktop, 24px under 860px. Never below 96px wide. */
.logo { display: inline-flex; line-height: 0; text-decoration: none; }
.logo img, .logo svg { height: 28px; width: auto; display: block; }

nav.site { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
nav.site a {
  position: relative;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--muted);
  text-decoration: none;
  padding: var(--space-1) 0;
}
nav.site a:hover { color: var(--fg); }
/* Current page: ink, plus the brand dot under the word */
nav.site a[aria-current="page"] { color: var(--fg); }
nav.site a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: -6px;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: var(--radius-dot); background: var(--mark);
}

/* ─── Type ──────────────────────────────────────────────────────── */
/* Eyebrow: Plex Mono caps, led by the round dot. The one place the dot
   repeats on a page, so it reads as a system cue, not decoration. */
.eyebrow {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: var(--space-5);
}
.eyebrow::before {
  content: ""; flex: none;
  width: 7px; height: 7px; border-radius: var(--radius-dot);
  background: var(--mark);
  margin-top: calc((1.6em - 7px) / 2);   /* centred on the FIRST line when it wraps */
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin-bottom: var(--space-6);
}
/* Mirrors the wordmark: regular word, the key phrase steps to bold */
h1 strong { font-weight: var(--fw-bold); color: var(--fg); }

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: var(--space-7) 0 var(--space-4);
  max-width: 28ch;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: var(--space-6) 0 var(--space-2);
}

p, li { font-size: var(--fs-body); color: var(--muted); }
p { margin-bottom: var(--space-4); max-width: var(--measure); }
ul, ol { margin: 0 0 var(--space-4) 22px; max-width: var(--measure); }
li { margin-bottom: var(--space-2); }
li::marker { color: var(--mark); }
strong { color: var(--fg); font-weight: var(--fw-bold); }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--muted);
  max-width: 640px;
  margin-bottom: var(--space-7);
}

/* ─── Page shells ───────────────────────────────────────────────── */
main.page { flex: 1; padding: var(--space-6) var(--gutter) 80px; max-width: 900px; }

.home-hero {
  padding: var(--space-7) var(--gutter) var(--space-8);
  max-width: calc(var(--content) + 2 * var(--gutter));
}
.home-section {
  padding: var(--space-8) var(--gutter);
  border-top: 1px solid var(--border);
  max-width: calc(var(--content) + 2 * var(--gutter));
}
.home-section h2 { margin-top: 0; }

/* Dark band: full-bleed, no top rule, ground switches via tokens */
.home-section.on-dark {
  max-width: none;
  border-top: 0;
  background: var(--bg);
  color: var(--fg);
}
.home-section.on-dark > * { max-width: var(--content); }
.home-section.on-dark p { max-width: var(--measure); }

/* ─── Home hero on ink, with the work-order mark (WO-2026-4413) ─── */
/* Option C2 from WO-2026-4405, picked by Mike 2026-10-13. A full-bleed
   dark band (.hero-band.on-dark) behind the hero; text left, the mark
   right on desktop. The mark (the logo's dot + rail-i) is HTML, not SVG,
   so the words in the bars are real text: sharp, readable on a phone,
   and they wrap. Each bar puts the plain words first and the work-order
   tag (Plex Mono caps) on the right. Finished rows are paper, the gated
   row stops at the terracotta dot, waiting rows are dimmed.
   Contrast (token file): ink on paper 17.04:1, ink-2 on paper 6.48:1,
   terracotta-warm on ink 6.31:1. On-dark-2 / on-dark-3 on #3a3632 are
   ~6.7:1 / ~4.7:1, estimates, not tool measurements. */
.hero-band { background: var(--bg); }
.hero-band .home-hero { padding-top: var(--space-8); padding-bottom: var(--space-8); }

.mc {
  --mc-rail: 48px;
  --mc-dot: 64px;
  --mc-gap: 12px;
  display: grid;
  grid-template-columns: var(--mc-rail) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 24px;
  margin: 0;
}
.mc-dot {
  grid-area: 1 / 1;
  width: var(--mc-dot); height: var(--mc-dot);
  border-radius: var(--radius-dot);
  background: var(--soga-terracotta);
}
.mc-head {
  grid-area: 1 / 2;
  align-self: end;
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 2px 16px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: var(--fw-medium);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--soga-on-dark-3);
  padding-bottom: 2px;
}
.mc-head b { font-weight: var(--fw-medium); color: var(--soga-on-dark); }
.mc-rail { grid-area: 2 / 1; background: var(--soga-paper); }

.mc-rows {
  grid-area: 2 / 2;
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: flex; flex-direction: column; gap: var(--mc-gap);
}
.mc-rows > li { margin: 0; font-size: inherit; color: inherit; }

/* One bar. --w sets its length, so the right edge is ragged like the logo's bars. */
.mc-row {
  display: flex; flex-direction: row; align-items: baseline; justify-content: space-between;
  gap: 20px;
  width: var(--w, 100%);
  min-width: max-content;
  padding: 13px 16px 14px;
  background: var(--soga-paper);
}
.mc-j {
  order: 2;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: var(--fw-medium);
  letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.35;
  color: var(--soga-ink-2);
}
.mc-p {
  order: 1;
  font-size: 18px; font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--soga-ink);
}
/* Waiting: dimmed bars */
.mc-row.is-wait { background: var(--soga-dark-line); }
.mc-row.is-wait .mc-j { color: var(--soga-on-dark-3); }
.mc-row.is-wait .mc-p { color: var(--soga-on-dark-2); font-weight: var(--fw-regular); }

/* The gated row: the work stops at the dot and waits for a person */
.mc-gate { display: flex; align-items: center; gap: 12px; }
.mc-gate .mc-row { width: auto; flex: none; }
.mc-gdot {
  flex: none; width: 26px; height: 26px;
  border-radius: var(--radius-dot); background: var(--soga-terracotta);
}
.mc-ask {
  flex: 1 1 auto; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 9px 16px;
  border: 1.5px dashed #6a625a;
}
.mc-ask .mc-j { order: 1; color: var(--soga-on-dark-3); }
.mc-ask .mc-p { order: 2; color: var(--soga-terracotta-warm); font-weight: var(--fw-bold); }

/* Mobile-only head count; the desktop one is hidden on a phone (see Mobile) */
.mc-n-sm { display: none; }

/* ─── Answer block (inner pages) ────────────────────────────────── */
.answer {
  border-left: 3px solid var(--mark);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  margin: 0 0 var(--space-6);
  max-width: var(--measure);
}
.answer p { color: var(--fg); margin: 0; }

/* ─── Cells (the card) ──────────────────────────────────────────── */
/* Ruled, not boxed: a 2px ink rule on top, hairline under. Calm,
   editorial, and it echoes the rail-i's horizontal bars. */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-7);
  margin: var(--space-3) 0 var(--space-5);
}
.cell {
  padding: var(--space-5) 0 var(--space-5);
  border-top: 2px solid var(--fg);
}
.cell h3 { margin-top: 0; }
.cell p { font-size: var(--fs-card); margin: 0 0 var(--space-2); }
.cell p:last-child { margin-bottom: 0; }

/* ─── Table + glossary (inner pages) ────────────────────────────── */
table.gates { border-collapse: collapse; width: 100%; max-width: 760px; margin: var(--space-2) 0 var(--space-5); }
table.gates th, table.gates td {
  text-align: left; vertical-align: top;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-card); color: var(--muted);
}
table.gates th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--fg);
  border-bottom: 2px solid var(--fg);
}

dl.glossary dt { font-weight: var(--fw-medium); color: var(--fg); margin-top: var(--space-5); }
dl.glossary dd { color: var(--muted); max-width: var(--measure); }

.next { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.next a { font-weight: var(--fw-medium); }

/* ─── Buttons ───────────────────────────────────────────────────── */
/* Primary: ink fill (17.04:1). Hover: deep terracotta fill (6.40:1).
   On dark: paper fill, hover warm terracotta with ink text (6.31:1). */
.btn, .btn-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  border-radius: var(--radius-1);
  padding: 14px var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover, .btn-submit:hover:not(:disabled) {
  background: var(--accent); border-color: var(--accent); color: var(--soga-paper);
}
.on-dark .btn:hover, .on-dark .btn-submit:hover:not(:disabled) { color: var(--soga-ink); }
.btn-submit { width: 100%; margin-top: var(--space-2); }
.btn-submit:disabled { opacity: 0.4; cursor: default; }

/* Secondary: outline */
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn--ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

/* ─── Forms ─────────────────────────────────────────────────────── */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
.form-group { margin-bottom: var(--space-4); }
label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);   /* ink-2, not ink-3: labels are required reading */
  margin-bottom: var(--space-2);
}
input, textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-1);
  padding: var(--space-3) 14px;
  font-size: var(--fs-body);   /* 16px: stops iOS zoom-on-focus */
  font-family: inherit;
  color: var(--fg);
  -webkit-appearance: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--subtle); }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
textarea { resize: vertical; min-height: 128px; }
.form-status { margin-top: var(--space-4); font-size: var(--fs-small); display: none; }
.form-status.success { color: var(--soga-success); display: block; }
.form-status.error { color: var(--soga-error); display: block; }

/* ─── Footer ────────────────────────────────────────────────────── */
/* Dark, full-bleed, closes every page. Carries the color-dark logo
   only if the markup adds it; the text footer works as is. */
footer.site {
  margin-top: auto;
  padding: var(--space-7) var(--gutter);
  background: var(--soga-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
}
footer.site span, footer.site a {
  font-size: 13px; color: var(--soga-on-dark-3); text-decoration: none;
}
footer.site a:hover { color: var(--soga-terracotta-warm); }

/* ─── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --gutter: 24px; }
  header.site { padding: var(--space-5) var(--gutter); gap: var(--space-4); }
  .logo img, .logo svg { height: 24px; }
  nav.site { gap: var(--space-1) var(--space-4); width: 100%; }
  .home-hero { padding-top: var(--space-5); padding-bottom: var(--space-7); }
  .home-section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .grid2, .contact-wrap { grid-template-columns: 1fr; gap: 0; }
  .contact-wrap { gap: var(--space-6); }
  .lede { font-size: 17px; }
  footer.site { flex-direction: column; }

  /* The C2 mark (.mc), now in the team section: 5 bars, not 8 (WO-2026-4413).
     The gated row stays. */
  .hero-band .home-hero { padding-top: var(--space-5); padding-bottom: var(--space-7); }
  .mc { --mc-rail: 26px; --mc-dot: 34px; --mc-gap: 7px; gap: 12px; }
  .mc-head { font-size: 10px; }
  .mc-n-lg, .mc-rows > .mc-sm-hide { display: none; }
  .mc-n-sm { display: inline; }
  .mc-row {
    min-width: 0; width: max(var(--w, 100%), 90%);
    flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 6px 12px 7px;
  }
  .mc-j { order: 1; font-size: 10px; }
  .mc-p { order: 2; font-size: 14px; }
  .mc-gate { flex-wrap: wrap; gap: 7px 10px; }
  .mc-gate .mc-row { flex: 1 1 auto; }
  .mc-gdot { width: 20px; height: 20px; }
  .mc-ask { flex: 1 1 100%; align-items: flex-start; padding: 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ═══ Home hero E3: the owner's desk (WO-2026-4422) ═══════════════
   Mike picked E3 from WO-2026-4415 on 2026-10-13, with generic lanes:
   Sales · Production · Inventory · Distribution · Accounting & HR.
   The H1 runs full width, then a dark panel: five lanes side by side,
   each its own small rail. Paper bars = done, dark bars = queued, a
   numbered terracotta circle = where a lane stops for the owner's yes,
   and "Needs your yes" lists those three along the bottom.
   Lanes and jobs are ILLUSTRATIVE, not records.
   The C2 mark (.mc above) now sits lower, in the "For the people who
   do the work" section (.team-wrap). The C2-hero layout rules
   (.home-hero.has-art, .hero-art) were removed by WO-2026-4432. */
.x-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: var(--fw-medium);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--soga-on-dark-3);
}
.x-head b { font-weight: var(--fw-medium); color: var(--soga-on-dark); }
.x-head .x-need { color: var(--soga-terracotta-warm); }
.x-mono {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: var(--fw-medium);
  letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.35;
}
.x-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.x-list > li { margin: 0; font-size: inherit; color: inherit; }

.hero-down { margin: var(--space-5) 0 0; font-size: var(--fs-small); }
.hero-down a { font-weight: var(--fw-medium); }

/* "Draft" tag on copy that waits for Mike's copy gate */
.draft {
  display: inline-block; vertical-align: middle;
  margin-left: 8px; padding: 2px 7px 1px;
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-medium);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid currentColor; border-radius: var(--radius-1);
}

.home-hero.e3 { padding-bottom: var(--space-7); }
.e3 h1 { max-width: none; }
.e3 .lede { margin-bottom: 0; }
.e3-panel {
  margin: var(--space-2) 0 var(--space-7);
  padding: 28px 32px 26px;
  background: var(--soga-dark);
  border-radius: var(--radius-2);
}
.e3-panel .x-head { padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--soga-dark-line); }
.e3 .x-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.e3 .x-col {
  position: relative;
  display: flex; flex-direction: column;
  padding-left: 22px;
}
.e3 .x-col::before {   /* each lane is a rail of its own */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 8px; background: var(--soga-paper);
}
.e3 .x-name { font-size: 16px; font-weight: var(--fw-medium); color: var(--soga-on-dark); line-height: 1.25; }
.e3 .x-tag { color: var(--soga-on-dark-3); margin: 2px 0 12px; overflow-wrap: anywhere; }
.e3 .x-stack { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.e3 .x-stack i { display: block; height: 12px; width: var(--w, 100%); background: var(--soga-paper); }
.e3 .x-stack i.q { background: var(--soga-dark-line); }
.e3 .x-stop {
  position: relative; z-index: 1;   /* above the lane's rail (a positioned ::before) */
  display: flex; align-items: center; gap: 8px;
  margin: 3px 0 3px -33px;    /* the circle sits on this lane's rail: 22px pad, 8px rail, 30px circle */
  font-size: 13px; font-weight: var(--fw-bold); color: var(--soga-terracotta-warm); line-height: 1.25;
}
.e3 .x-num {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--radius-dot);
  background: var(--soga-terracotta); box-shadow: 0 0 0 4px var(--soga-dark);
  font-family: var(--font-mono); font-size: 13px; color: var(--soga-ink);
}
.e3 .x-count { margin-top: 12px; color: var(--soga-on-dark-3); }
.e3 .x-desk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  margin-top: 22px; padding-top: 16px; border-top: 1px dashed #6a625a;
}
.e3 .x-desk > .x-mono { color: var(--soga-on-dark-3); }
.e3 .x-desk .x-list { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.e3 .x-desk li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--soga-on-dark); }
.e3 .x-desk .x-num { width: 22px; height: 22px; font-size: 11px; box-shadow: none; }

/* The worker view: the C2 mark as a card, speaking to the employee */
.team-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  gap: var(--space-7); align-items: center;
}
.team-wrap h2 { margin-top: 0; }
.team-art { margin: 0; padding: 28px 28px 30px; background: var(--bg); border-radius: var(--radius-2); }
.team-art .mc { --mc-rail: 36px; --mc-dot: 48px; gap: 20px; }
.team-art .mc-p { font-size: 16px; }
.team-art .mc-row { padding: 11px 14px 12px; gap: 16px; }

/* Mobile: one compact row per lane (name, then its bars and circle on
   the same line), so the panel is short and the lede reaches the first
   screen. The decision words live in "Needs your yes". */
@media (max-width: 860px) {
  .x-sm-hide { display: none; }
  .e3 h1 { margin-bottom: 16px; }
  .e3-panel { padding: 14px 14px 14px; margin: 0 0 var(--space-5); }
  .e3-panel .x-head { font-size: 10px; padding-bottom: 9px; margin-bottom: 10px; }
  .e3 .x-cols { grid-template-columns: 1fr; gap: 6px; }
  .e3 .x-col { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 3px; padding-left: 12px; min-height: 20px; }
  .e3 .x-col::before { width: 4px; }
  .e3 .x-col > .x-name { flex: 0 0 9em; font-size: 13px; line-height: 1.2; }
  .e3 .x-tag, .e3 .x-count { display: none; }
  .e3 .x-stack { flex: none; flex-direction: row; align-items: center; gap: 3px; }
  .e3 .x-stack i { width: 12px; height: 8px; }
  .e3 .x-stop { margin: 0 4px; font-size: 0; gap: 0; }
  .e3 .x-num { width: 18px; height: 18px; font-size: 10px; box-shadow: none; }
  .e3 .x-desk { margin-top: 10px; padding-top: 9px; gap: 6px 0; }
  .e3 .x-desk > .x-mono { flex: 0 0 100%; font-size: 10px; }
  .e3 .x-desk .x-list { flex-direction: column; gap: 4px; }
  .e3 .x-desk li { font-size: 13px; line-height: 1.3; }
  .e3 .x-desk .x-num { width: 18px; height: 18px; font-size: 10px; }

  .team-wrap { grid-template-columns: 1fr; gap: var(--space-5); }
  .team-art { padding: 20px 18px 22px; }
  .team-art .mc { --mc-rail: 26px; --mc-dot: 34px; gap: 12px; }
  .team-art .mc-p { font-size: 14px; }
  .team-art .mc-row { padding: 6px 12px 7px; gap: 1px; }
}

/* ═══ The MARGIN RAIL, site-wide (WO-2026-4415, applied WO-2026-4422) ═══
   Moved in from soga-rail.css so every page that loads this file gets it,
   with no markup change. Mike's look on staging is the yes or no on it:
   to turn it off, delete this block (to the end of the file).
   Mike 2026-10-13: "Not overbearing, just subtle. But as they spend more
   time, it makes more sense."
   Draws a thin rail down the left gutter of every band (hero, sections,
   inner page); a small hollow ring beside each section eyebrow (home) and
   each h2 (inner pages); and one solid terracotta dot at #contact, the one
   point that needs the reader's yes. Line and ring come from --fg at low
   strength, so the rail follows every ground on its own.
   Desktop only (>= 1024px). Pure CSS: no image, font or script. */
@media (min-width: 1024px) {
  :root {
    --rail-x: calc(var(--gutter) / 2);   /* centre of the left gutter: 28px */
    --rail-w: 2px;
    --rail-strength: 10%;                /* the line. Low on purpose */
    --rail-ring-strength: 26%;           /* the ring edge, a little firmer */
  }

  .hero-band,
  .home-section,
  main.page {
    position: relative;
    --rail-line: color-mix(in srgb, var(--fg) var(--rail-strength), transparent);
  }
  .hero-band::before,
  .home-section::before,
  main.page::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: calc(var(--rail-x) - var(--rail-w) / 2);
    width: var(--rail-w);
    background: var(--rail-line);
    pointer-events: none;
  }
  /* The rail starts at the hero: the work begins below the header */
  .hero-band::before { top: var(--space-8); }

  /* Decision points: a hollow ring on the rail, level with the heading.
     Home: the section eyebrow. Inner pages: each h2. */
  .home-section > .eyebrow:first-child,
  main.page h2 { position: relative; }

  .home-section > .eyebrow:first-child::after,
  main.page h2::after {
    content: "";
    position: absolute;
    width: 9px; height: 9px;
    border-radius: var(--radius-dot);
    background: var(--bg);   /* covers the line, so the ring reads hollow */
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) var(--rail-ring-strength), transparent);
    pointer-events: none;
  }
  /* The eyebrow starts at the content edge, which is one gutter in */
  .home-section > .eyebrow:first-child::after {
    left: calc(-1 * var(--gutter) + var(--rail-x) - 4.5px);
    top: calc((1.6em - 9px) / 2);
  }
  main.page h2::after {
    left: calc(-1 * var(--gutter) + var(--rail-x) - 4.5px);
    top: calc(0.625em - 4.5px);   /* first line of the h2 */
  }

  /* The one point that needs the reader's yes: the contact section */
  #contact > .contact-wrap .eyebrow:first-child,
  #contact > .eyebrow:first-child { position: relative; }
  #contact > .contact-wrap > div:first-child > .eyebrow:first-child::after {
    content: "";
    position: absolute;
    left: calc(-1 * var(--gutter) + var(--rail-x) - 5.5px);
    top: calc((1.6em - 11px) / 2);
    width: 11px; height: 11px;
    border-radius: var(--radius-dot);
    background: var(--mark);
  }
  /* The rail ends at that dot, not under the form */
  #contact::before { bottom: auto; height: calc(var(--space-8) + 10px); }
}