/* ═══════════════════════════════════════════════════════════════════════════
   Deltawing Labs — site layer.
   Implements "Deltawing Labs Site - Field.dc.html" against the DW design system.
   Every value here is carried over from that render; the additions are the ones a
   mockup cannot express: breakpoints, focus states, reduced motion, and print.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Shell ─────────────────────────────────────────────────────────── */

html { background: #0b0b0a; }

/* The ambient layers — section blooms, the depth deck, the margin rail — are
   allowed to overhang the column, and must not hand the page a horizontal
   scrollbar for it. `clip` rather than `hidden`: clip forbids all scrolling
   in the axis without creating a scroll container, so position:sticky in the
   nav keeps working. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

body {
  margin: 0;
  background: #0b0b0a;
  color: #f4f1ea;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter Tight', system-ui, sans-serif;
  overflow-wrap: break-word;
}

main { flex: 1; }

/* The render sets every margin explicitly. Clear the UA defaults so it can. */
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dt, dd, ol, ul, fieldset {
  margin: 0;
  padding: 0;
}
ol, ul { list-style: none; }

/* Tabular figures on every mono role, as the system requires. */
.t-data, .t-kicker, .t-nav, .t-wordmark, .t-col, .t-doc { font-variant-numeric: tabular-nums; }

/* ── Legibility override ────────────────────────────────────────────────────
   The dark sheet's --faint is rgba(bone, 0.38), which measures 3.2:1 against
   this ground — below WCAG AA, and it carries every mono label on the site at
   9–12px. Raised to 0.52 → 5.1:1. Scoped here rather than in tokens/colors.css
   so the design-system copy stays byte-faithful and this stays one visible
   line; the same change belongs upstream when the console sheets are revised.
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] { --faint: rgba(244, 241, 234, 0.52); }

/* Prose links only. Chrome elements opt out below. */
a { color: #f4f1ea; text-decoration: none; border-bottom: 1px solid rgba(244,241,234,.3); }
a:hover { color: var(--signal); border-color: var(--signal); }
.nav-link, .brand, .btn, .foot-link, .quiet-link { border-bottom: 0; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #0b0b0a;
  border: 1px solid var(--signal);
  color: var(--signal);
  padding: 12px 18px;
  font: 500 10px/1.2 var(--mono);
  letter-spacing: var(--track-kicker-lg);
  text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ── 02 · Navigation ────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(11,11,10,.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav__in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #f4f1ea;
  flex: none;
}
.brand .t-wordmark { font-size: 14px; }
.brand svg { display: block; width: 21px; height: 21px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-link {
  color: var(--muted);
  font-size: 11px;
  transition: color var(--dur-sm) var(--ease);
}
.nav-link:hover { color: #f4f1ea; }
.nav-link--signal { color: var(--signal); }
.nav-link--signal:hover { color: var(--signal); opacity: .8; }
.nav-link[aria-current="page"] { color: #f4f1ea; }

/* Home — the quiet way back. Full-strength bone with the mark as its marker:
   brighter than the muted links, apart from the red Contact, and readable
   because it stays type on ground rather than type in a box. Its href carries
   #home, which tells intro.js to stand down — the wordmark stays the
   ceremonial door and replays the reveal; this one just goes home. */
.nav-link--home {
  color: #f4f1ea;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-link--home::before {
  content: '';
  width: 9px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  transition: background var(--dur-sm) var(--ease);
}
.nav-link--home:hover { color: #ffffff; box-shadow: inset 0 -1px 0 rgba(244, 241, 234, .8); }

/* ── 03 · Buttons — ported from DS Button.jsx ───────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-weight: var(--w-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--r-ctl);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  padding: 14px 22px;
  font-size: 12px;
  line-height: 1.2;
  background: transparent;
  transition:
    background var(--dur-sm) var(--ease),
    border-color var(--dur-sm) var(--ease),
    color var(--dur-sm) var(--ease);
}
.btn--signal { color: var(--signal); border: 1px solid var(--signal); }
.btn--signal:hover { background: var(--signal-quiet); color: var(--signal); }
.btn--ghost { color: var(--text); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--hover); border-color: var(--text); color: var(--text); }
.btn:active { opacity: .72; }

.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Inline text link, the "Cockpit →" treatment. */
.quiet-link {
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
}
.quiet-link:hover { color: #f4f1ea; border-bottom-color: #f4f1ea; }

/* ── 04 · Hero field ────────────────────────────────────────────────────── */

/* § 00 fills the viewport on landing — the next section is a scroll away, not
   a sliver at the bottom edge. The 68px is the nav's row height, subtracted so
   the section's own bottom rule lands exactly on the fold rather than below
   it. Below 900px the rail reflows and the field goes back to auto height, so
   the subtraction never applies where the nav wraps. */
.field {
  position: relative;
  height: calc(100vh - 68px);
  min-height: 640px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
@supports (height: 100svh) {
  /* Discount mobile browser chrome so the fold is the real fold. */
  .field { height: calc(100svh - 68px); }
}
.field__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.field__in {
  position: absolute;
  inset: 0;
  pointer-events: none;
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px clamp(24px, 4vw, 48px) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.field__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.field__stamp {
  color: var(--faint);
  letter-spacing: .18em;
}
.field__stamp--r { text-align: right; line-height: 1.9; }

.field__body { max-width: 940px; }

/* The mark holds the right of the section, opposite the copy — the sheet's own
   hero composition. Centred with auto margins rather than a translate, so the
   entrance animation keeps sole ownership of `transform`. Width and height are
   both set because `margin: auto` needs a definite height to centre against.
   Kept below full strength: at 250px a solid bone triangle would outweigh the
   field it sits on. */
.field__mark {
  position: absolute;
  right: clamp(24px, 4vw, 48px);
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: clamp(120px, 15vw, 250px);
  height: clamp(120px, 15vw, 250px);
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .8));
  animation:
    dwmarkin .7s var(--ease) .18s both,
    dwmark 15s ease-in-out .9s infinite;
}
@keyframes dwmarkin {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: .5; transform: none; }
}
@keyframes dwmark {
  0%, 100% { opacity: .5; }
  50%      { opacity: .68; }
}
.field__lede {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 17px;
  max-width: 42ch;
  line-height: 1.55;
}
.field__h1 {
  margin: 0;
  font-size: clamp(46px, 6.6vw, 78px);
  line-height: .98;
  letter-spacing: -.03em;
  max-width: 14ch;
}
.field__pair {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field__pair > :first-child { color: var(--muted); }
.field__sub {
  margin: 32px 0 0;
  max-width: 56ch;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
}
.field__cta { pointer-events: auto; }

.pulse { animation: dwpulse 1.7s infinite; }

@keyframes dwrise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dwpulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

.rise { animation: dwrise .6s var(--ease) both; }
.rise-1 { animation-delay: .10s; }
.rise-2 { animation-delay: .18s; }
.rise-3 { animation-delay: .26s; }
.rise-4 { animation-delay: .34s; }

/* ── 05 · Sections ──────────────────────────────────────────────────────── */

.sec {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: 88px 0;
  border-bottom: 1px solid var(--line);
}
.sec--tight { padding: 80px 0; }
.sec--end { border-bottom: 0; padding-bottom: 104px; }
.sec--top { border-top: 1px solid var(--line); border-bottom: 0; padding: 64px 0; }

/* The section rail. Was --muted 10px mono and read as decoration rather than
   as the label it is; taken to full text colour and one step up in size. */
.sec__k {
  position: sticky;
  top: 100px;
  align-self: start;
  margin: 0;
  color: var(--text);
  font-size: 11px;
  letter-spacing: 0.2em;
}

.lede-p {
  margin: 0 0 40px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.65;
}
.body-p {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.65;
}
.body-p:first-child { margin-top: 0; }
.body-p--muted { color: var(--muted); }
.body-p--loose { line-height: 1.7; }

.close-h {
  margin: 48px 0 0;
  max-width: 22ch;
}
.close-p {
  margin: 34px 0 0;
  max-width: 50ch;
  font-weight: 400;
}

/* ── 06 · § 01 Why now ──────────────────────────────────────────────────── */

.dates { border-top: 1px solid var(--line); }

.date {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 140px;
  gap: 20px;
  align-items: baseline;
  padding: 20px 10px 20px 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  transition: background 140ms var(--ease);
}
.date.is-on { background: var(--selected); }
.date__d { color: var(--muted); transition: color 140ms var(--ease); }
.date.is-on .date__d { color: #f4f1ea; }
.date__t { max-width: 52ch; font-size: 16px; line-height: 1.65; }
.date__t sup {
  font: var(--w-regular) 9px/1 var(--mono);
  color: var(--faint);
  padding-left: 3px;
}
.date__t sup a { color: inherit; border-bottom: 0; }
.date__t sup a:hover { color: var(--signal); }
.date__tag {
  text-align: right;
  letter-spacing: .16em;
  color: var(--faint);
  transition: color 140ms var(--ease);
}
.date.is-on .date__tag { color: #f4f1ea; }

.sources-block {
  margin-top: 48px;
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
  max-width: 68ch;
}
.sources {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: src;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sources li {
  counter-increment: src;
  color: var(--muted);
  text-transform: none;
  letter-spacing: .03em;
  line-height: 1.6;
}
.sources li::before { content: counter(src) " · "; }
.sources li:target { color: #f4f1ea; }
.standing {
  margin: 28px 0 0;
  color: var(--faint);
  line-height: 1.9;
}

/* ── 07 · § 02 Beliefs ──────────────────────────────────────────────────── */

.beliefs { border-top: 1px solid var(--line); }

.belief {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 34px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: opacity 180ms var(--ease);
}
.belief:last-of-type { border-bottom: 1px solid var(--line); }
.belief__t { max-width: 34ch; }
/* Dim the siblings of whichever row is hovered or focused. */
.beliefs:where(:hover, :focus-within) .belief:not(:hover, :focus-within) { opacity: .3; }

.after-list { padding-top: 28px; }

/* ── 08 · § 03 The problem ──────────────────────────────────────────────── */

.ptable { border-top: 1px solid #f4f1ea; }

.prow {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 160px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  transition: background 140ms var(--ease);
}
.prow--head { border-bottom: 1px solid var(--line); }
.prow:last-of-type { border-bottom: 1px solid var(--line); }
.prow.is-on { background: var(--selected); }

.prow--head > * { padding: 12px 16px; color: var(--faint); }
.prow--head > :first-child { padding: 12px 16px 12px 0; }
.prow--head > :last-child { padding: 12px 0 12px 16px; }

.prow__q { padding: 18px 16px 18px 0; font-size: 15px; }
.prow__w { padding: 18px 16px; font-size: 15px; color: var(--muted); }
.prow__o {
  padding: 18px 0 18px 16px;
  color: var(--muted);
  transition: color 140ms var(--ease);
}
.prow.is-on .prow__o { color: #f4f1ea; }

/* ── 09 · § 04 The tree ─────────────────────────────────────────────────── */

.tree {
  margin-top: 44px;
  border: 1px solid var(--line);
  padding: 28px 26px;
}
.tree__k { color: var(--faint); margin-bottom: 22px; }

.tree__row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 10px 8px 10px 0;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background 140ms var(--ease);
}
.tree__row.is-on { background: var(--selected); }
.tree__level { color: var(--faint); transition: color 140ms var(--ease); }
.tree__row.is-on .tree__level { color: #f4f1ea; }
.tree__val { color: var(--muted); transition: color 140ms var(--ease); }
.tree__row.is-on .tree__val { color: #f4f1ea; }

.tree__note {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.6;
}

.mega--sec {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.02;
  max-width: 17ch;
  letter-spacing: -.025em;
}

/* ── 10 · § 05 What we are building ─────────────────────────────────────── */

.products { border-top: 1px solid var(--line); }

.product {
  padding: 30px 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
}
.product:last-of-type { border-bottom: 1px solid var(--line); }
.product__meta { color: var(--muted); margin-top: 8px; }
.product__b { margin: 0; max-width: 56ch; font-size: 15px; line-height: 1.65; }

.machine { margin-top: 52px; }
.machine__k { color: var(--faint); margin-bottom: 16px; }
.machine__box { border: 1px solid var(--line); }

.step {
  display: grid;
  grid-template-columns: 44px 80px minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; }
.step--next { background: var(--hover); }
.step__n { color: var(--faint); align-self: center; }
.step__tag { align-self: center; color: #f4f1ea; }
.step--next .step__tag { color: var(--faint); }
.step__b {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  max-width: 58ch;
}

.legend {
  color: var(--faint);
  margin-top: 14px;
  line-height: 1.9;
}

/* ── 11 · § 06 What we will not claim ───────────────────────────────────── */

.claims { border-top: 1px solid var(--line); }

.claim {
  padding: 26px 0;
  border-bottom: 1px solid var(--line-soft);
}
.claim:last-of-type { border-bottom: 1px solid var(--line); }
.claim__h { font-weight: 400; }
.claim__b {
  color: var(--muted);
  margin-top: 8px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.6;
}

/* ── 12 · Three-up column set (criteria, deployment) ────────────────────── */

.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.trio--gap { margin-top: 40px; }
.trio > * { padding: 24px; }
.trio > :first-child { padding-left: 0; border-right: 1px solid var(--line-soft); }
.trio > :nth-child(2) { border-right: 1px solid var(--line-soft); }
.trio > :last-child { padding-right: 0; }
.trio__k { color: var(--faint); margin-bottom: 10px; }
.trio__k--signal { color: var(--signal); }
.trio__b { font-size: 14px; line-height: 1.6; }

.mega--partners {
  margin: 0;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.04;
  max-width: 22ch;
  letter-spacing: -.025em;
}

/* ── 13 · Interior page heads ───────────────────────────────────────────── */

.pagehead {
  border-bottom: 1px solid var(--line);
  background-image: radial-gradient(rgba(244,241,234,.11) 1px, transparent 1px);
  background-size: 26px 26px;
}
.pagehead__in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 92px clamp(24px, 4vw, 48px) 84px;
}
.pagehead--plain {
  border-bottom: 0;
  background-image: none;
}
.pagehead--plain .pagehead__in { padding-bottom: 40px; }

.pagehead__doc { color: var(--faint); margin-bottom: 44px; }
.pagehead__h1 {
  margin: 0;
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1;
  max-width: 18ch;
  letter-spacing: -.028em;
}
.pagehead__h1--short { max-width: 15ch; }
.pagehead__h1--sm {
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.02;
  max-width: 18ch;
  letter-spacing: -.026em;
}
.pagehead__lede {
  margin: 28px 0 0;
  max-width: 58ch;
  font-size: 17px;
  color: var(--muted);
  line-height: 1.6;
}

/* ── 14 · Doctrine / limits lists ───────────────────────────────────────── */

.entry {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: 52px 0;
  border-bottom: 1px solid var(--line-soft);
}
/* Doctrine's entries carry no ordinal, but they keep the shared two-column
   geometry: the rail column stays, empty, and the commitment sits in the same
   reading column as every other subpage's body copy. Without this the lone
   child would auto-place into the 200px rail column. Scoped above the 900px
   collapse, where .entry goes single-column and column 2 stops existing. */
@media (min-width: 901px) {
  [data-page="doctrine"] .entry > div { grid-column: 2; }
}
.entry__n { color: var(--faint); margin: 0; }
.entry__h { max-width: 26ch; }
.entry__b {
  margin: 18px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.cost {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
  max-width: 62ch;
}
.cost__k { color: var(--signal); }
.cost__v { font-size: 15px; line-height: 1.6; }

.page-cta { padding: 64px 0 104px; }

/* ── 15 · Cockpit ───────────────────────────────────────────────────────── */

.pull {
  margin: 30px 0;
  border-left: 1px solid var(--signal);
  padding: 6px 0 6px 22px;
}
.pull > * { font-weight: 400; max-width: 40ch; }

.crumb { color: var(--muted); margin-bottom: 30px; }

.leaflist { border-top: 1px solid var(--line); }
.leaf {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
}
.leaf__d { font-size: 15px; color: var(--muted); max-width: 56ch; line-height: 1.6; }

.mechlist { border-top: 1px solid var(--line); }
.mech {
  padding: 26px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mech__h { font-weight: 400; }
.mech__b {
  margin: 10px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* ── 16 · Avax ──────────────────────────────────────────────────────────── */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
}
.duo > * { padding: 26px; }
.duo > :first-child { border-right: 1px solid var(--line); }
.duo__k { margin-bottom: 14px; color: #f4f1ea; }
.duo__b { font-size: 15px; line-height: 1.65; color: var(--muted); }

.room {
  margin-top: 34px;
  border-left: 1px solid var(--line);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.room__k { color: var(--faint); }
.room__l { font-size: 15px; color: var(--muted); max-width: 56ch; }
.room__end { font-weight: 400; }

.queue { border-top: 1px solid var(--line); }
.qrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 140px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}
.qrow--head { padding: 12px 0; border-bottom: 1px solid var(--line); }
.qrow--head > * { color: var(--faint); }
.qrow:last-of-type { border-bottom: 1px solid var(--line); }
.qrow__age { color: var(--muted); }
.qrow__own { text-align: right; color: var(--muted); }
.qrow__mv--signal { color: var(--signal); }

.qstate {
  margin-top: 16px;
  color: var(--faint);
  letter-spacing: .14em;
}

.excerpt {
  margin-top: 26px;
  border: 1px solid var(--line);
  padding: 22px 24px;
  line-height: 1.9;
}
.excerpt span { color: var(--muted); }

/* ── 17 · About ─────────────────────────────────────────────────────────── */

.concept { border-top: 1px solid var(--line); }
.concept__row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 22px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-soft);
}
.concept__row:last-child { border-bottom: 1px solid var(--line); }
.concept__n { color: var(--faint); padding-top: 6px; }
.concept__h { font-weight: 400; max-width: 30ch; }
.concept__b {
  margin: 10px 0 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.standing-detail {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}
.standing-detail dt { color: var(--faint); margin-bottom: 8px; }
.standing-detail dd { margin: 0; }
.standing-detail > div { min-width: 0; }

.aside {
  margin-top: 44px;
  border-left: 1px solid var(--line);
  padding-left: 24px;
  max-width: 58ch;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.aside p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

/* ── 18 · Contact ───────────────────────────────────────────────────────── */

.contact {
  max-width: 1240px;
  margin: 0 auto;
  padding: 92px clamp(24px, 4vw, 48px) 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.contact__lede {
  margin: 28px 0 0;
  max-width: 54ch;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.65;
}
.contact__note {
  margin: 18px 0 0;
  max-width: 54ch;
  font-size: 16px;
  line-height: 1.65;
}
.contact__meta {
  margin-top: 48px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact__meta .t-kicker { color: var(--faint); }
.contact__direct {
  color: var(--muted);
  text-transform: none;
  letter-spacing: .03em;
}

.form {
  border: 1px solid var(--line);
  padding: 32px;
}
.form__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.field-set {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.field-set label { color: var(--muted); }

.form input,
.form textarea {
  background: transparent;
  color: #f4f1ea;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 9px 11px;
  font: var(--w-regular) var(--fs-ui)/1.45 var(--sans);
  outline: none;
  width: 100%;
  transition: border-color var(--dur-sm) var(--ease);
}
.form textarea {
  font: var(--w-regular) 12px/1.6 var(--mono);
  padding: 12px;
  resize: vertical;
  min-height: 132px;
}
.form input:focus,
.form textarea:focus { border-color: #f4f1ea; }
.form input:focus-visible,
.form textarea:focus-visible { outline: none; }
.form :user-invalid { border-color: var(--signal); }

.form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.form__foot .t-kicker { color: var(--faint); }

.form__status {
  margin: 0;
  color: var(--signal);
  line-height: 1.7;
  text-transform: none;
  letter-spacing: .03em;
}
.form__status:empty { display: none; }

/* ── 19 · Stub pages ────────────────────────────────────────────────────── */

.stub { padding: 92px clamp(24px, 4vw, 48px) 160px; }
.stub__rule {
  margin-top: 36px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  max-width: 56ch;
  color: var(--faint);
}

/* ── 20 · Footer ────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.foot__in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px clamp(24px, 4vw, 48px) 48px;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.foot__id {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.foot__lock {
  display: flex;
  align-items: center;
  gap: 11px;
}
.foot__lock .t-wordmark { font-size: 12px; }
.foot__stamp { color: var(--faint); line-height: 1.9; }
.foot__stamp a { color: inherit; border-bottom-color: var(--line); }
.foot__stamp a:hover { color: var(--signal); border-bottom-color: var(--signal); }

.foot__links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.foot-link {
  color: var(--muted);
  transition: color var(--dur-sm) var(--ease);
}
.foot-link:hover { color: #f4f1ea; }

.foot__bar { border-top: 1px solid var(--line-soft); }
.foot__bar-in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px clamp(24px, 4vw, 48px);
  text-align: center;
}
.foot__bar .t-data {
  color: var(--faint);
  letter-spacing: .16em;
}
.foot__bar strong { font-weight: inherit; color: var(--signal); }

/* ═══════════════════════════════════════════════════════════════════════════
   21 · Responsive. The render is a desktop board; these are the reflows it
   implies. Nothing here changes a value above the breakpoint.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wide screens · the rail moves into the page margin ─────────────────────
   Past ~1400px the column is capped at 1240 and everything outside it is dead
   space. The section label migrates out into it — the offset is the exact
   distance from the rail column to the viewport edge, so it slides further out
   as the window widens and sits still at 1240 where there is no margin to use.
   Only the label moves; the measure, the nav and the footer stay where they
   are, so nothing else in the page shifts under it.
   ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1500px) {
  /* The label is sized to whatever margin the window actually has, then centred
     inside it — the offset is half the distance from the viewport edge to the
     rail column, minus half the label. It lands optically centred at every
     width rather than pinned to an arbitrary gutter figure.

     The glass pane was tried here and dropped — the frames on the mono kickers
     read as ornament rather than as labels, and the sheet forbids ornament.
     The depth is carried by the parallax alone: the label travels a step
     slower than the copy beside it, which is how the two sit at different
     apparent distances without any furniture drawn around them. */
  .sec__k,
  .entry__n {
    --dw-railw: min(250px, calc((100vw - 1240px) / 2 + 20px));
    width: var(--dw-railw);
    margin-left: calc(-1 * (((100vw - 1240px) / 2 + 48px + var(--dw-railw)) / 2));

    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 22px 20px;
    text-align: center;

    font-size: clamp(14px, 1.02vw, 18px);
    line-height: 1.5;
    letter-spacing: 0.16em;
    color: var(--text);
  }

  /* Out in the margin the label stops being sticky. A pinned label reads as
     chrome; letting it travel with its section, a step slower than the copy,
     is what turns that difference in rate into the parallax between one
     section and the next. */
  .sec__k {
    position: static;
    translate: 0 var(--dw-klag, 0px);
  }
}

@media (max-width: 1080px) {
  .sec, .entry { grid-template-columns: 160px minmax(0, 1fr); }
  .product { grid-template-columns: 140px minmax(0, 1fr); }
  .leaf { grid-template-columns: 190px minmax(0, 1fr); }
  .tree__row { grid-template-columns: 180px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  /* Kicker rails become headings above their section. */
  .sec, .entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 56px 0;
  }
  .sec--end { padding-bottom: 72px; }
  .sec--top { padding: 48px 0; }
  .sec__k { position: static; }

  .contact {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .pagehead__in { padding: 64px clamp(24px, 4vw, 48px) 56px; }
  .pagehead__doc { margin-bottom: 32px; }
  .page-cta { padding: 48px 0 72px; }

  .field { height: auto; min-height: 0; max-height: none; }
  /* One column below this width — there is no right half for the mark to hold,
     and the nav already carries it. */
  .field__mark { display: none; }
  .field__in {
    position: relative;
    inset: auto;
    padding-top: 40px;
    padding-bottom: 56px;
    gap: 48px;
  }
  .field__top { flex-direction: column; gap: 10px; }
  .field__stamp--r { text-align: left; }

  /* Date rows: number + date on one line, statement below, tag last. */
  .date {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 20px 10px 20px 0;
  }
  .date__t { max-width: none; }
  .date__tag { text-align: left; }

  /* The problem table stops being a table. */
  .prow--head { display: none; }
  .prow {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 0;
  }
  .prow__q { padding: 0 0 12px; }
  .prow__w, .prow__o { padding: 0 0 6px; }
  .prow__w::before, .prow__o::before {
    content: attr(data-label);
    display: block;
    font: var(--w-regular) var(--fs-col)/1.2 var(--mono);
    letter-spacing: var(--track-col);
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 4px;
  }
  .prow.is-on { background: transparent; }

  .tree { padding: 22px 20px; }
  .tree__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tree__val { padding-left: 0 !important; }

  .product { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .step { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 20px; padding: 20px; }
  .step__tag { grid-column: 2; align-self: start; }
  .step__body { grid-column: 2; }

  .trio { grid-template-columns: minmax(0, 1fr); }
  .trio > * {
    padding: 22px 0;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line-soft);
  }
  .trio > :last-child { border-bottom: 0; }

  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo > :first-child { border-right: 0; border-bottom: 1px solid var(--line); }

  .leaf { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .concept__row { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .cost { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .qrow { grid-template-columns: minmax(0, 1fr) 96px; gap: 4px 12px; }
  .qrow__own { grid-column: 1 / -1; text-align: left; }
  .qrow--head { display: none; }

  .standing-detail { gap: 28px 40px; }
  .stub { padding: 64px clamp(24px, 4vw, 48px) 104px; }
}

@media (max-width: 620px) {
  .nav__in {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .nav__links { justify-content: flex-start; gap: 16px; }

  /* Long mono CTAs must be allowed to break rather than overflow. */
  .btn {
    white-space: normal;
    text-align: center;
    width: 100%;
  }
  .btn-row { gap: 10px; }

  .field__pair { margin-top: 28px; }
  .field__sub { margin-top: 24px; }

  .date { gap: 6px; }
  .concept__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .belief__t { max-width: none; }
  .step { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .step__tag, .step__body { grid-column: 1; }
  .qrow { grid-template-columns: minmax(0, 1fr); }
  .form { padding: 22px; }
  .aside, .room { padding-left: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22 · Known contrast exception — NOT fixed here, deliberately.

   Measured against the page ground (#0b0b0a):
     --text    17.5 : 1   pass
     --muted    6.6 : 1   pass
     --signal   5.2 : 1   pass
     --faint    3.2 : 1   FAILS WCAG 2.1 AA (4.5:1) for text under 18.66px

   --faint carries the mono stamps, column labels and the § kickers, all of
   which are 9–12px, so "large text" (3:1) does not apply to them. The token
   is a design-system value shared with the console and print sheets, so
   changing it here would silently fork the system. The fix belongs in
   tokens/colors.css: raising the dark-sheet alpha from 0.38 to 0.48 clears
   AA at 4.55:1; 0.50 gives 4.85:1 with more headroom.

   To apply it at the site layer instead, uncomment:

   [data-theme="dark"] { --faint: rgba(244,241,234,0.50); }
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 23 · Motion, forced colors, print ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rise { animation: none; opacity: 1; transform: none; }
  .pulse { animation: none; }
  .field__mark { animation: none; opacity: .5; transform: none; }
}

@media (forced-colors: active) {
  .date.is-on, .prow.is-on, .tree__row.is-on { forced-color-adjust: none; }
  .btn { border: 1px solid ButtonBorder; }
}

@media print {
  .nav, .field__canvas, .skip, .btn-row, .page-cta { display: none; }
  html, body { background: #fff; color: #000; }
  .field { height: auto; min-height: 0; border-bottom: 1px solid #000; }
  .field__in { position: relative; inset: auto; }
  .sec, .entry { grid-template-columns: 160px minmax(0, 1fr); break-inside: avoid; }
  .sec__k { position: static; }
  a { border-bottom: 0; }
}