/* ==========================================================================
   ARGUMANT — "THEREFORE"
   The page is set as a proof: premises, an inference bar, a therefore-mark,
   a conclusion. One 2px mark carries every state on the page.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  /* surfaces */
  --ledger:  #E4E9E7;   /* page field. Cool accounting stock. Never on an exhibit. */
  --docket:  #F1F4F2;   /* the one raised surface. Always carries a 1px --slate border. */

  /* ink */
  --iron:    #171B1A;   /* headings, body, inference bars, rails */
  --slate:   #57635E;   /* secondary text, mono labels, control borders (5.11:1) */
  --carbon:  #C7CFCB;   /* STRUCTURE ONLY. Never text, never a control border. */
  --red:     #A32D22;   /* the therefore-mark, plaques, the reader's own words,
                           the primary button, the focus ring. Nothing else. */

  /* spacing, 4px base */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:40px; --s-8:56px; --s-9:72px; --s-10:96px; --s-11:120px; --s-12:160px;

  /* frame */
  --frame:1080px;
  --pad:24px;
  --rail:72px;
  --measure-col:720px;
  --measure-prose:34em;
  --measure-stmt:30em;
  --exhibit-max:840px;
  --nav-h:72px;

  /* type */
  --f-display:"Zodiak", Georgia, "Times New Roman", serif;
  --f-body:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:"Martian Mono", "MonoFallback", ui-monospace, Menlo, Consolas, monospace;

  --t-hero:clamp(2rem, 5.6vw + 0.4rem, 4.25rem);
  --t-h2:clamp(1.75rem, 2.4vw + 0.6rem, 2.5rem);
  --t-concl:clamp(1.375rem, 1.2vw + 0.9rem, 1.75rem);
  --t-stmt:clamp(1.0625rem, 0.6vw + 0.9rem, 1.5rem);
  --t-lead:clamp(1.0625rem, 0.35vw + 0.98rem, 1.25rem);
  --t-body:1.0625rem;
  --t-small:0.9375rem;
  --t-mono:0.8125rem;
  --t-step:0.75rem;
  --t-label:0.6875rem;

  --lh-hero:0.98; --lh-h2:1.06; --lh-concl:1.24; --lh-stmt:1.4;
  --lh-body:1.66; --lh-mono:1.8;

  --tr-hero:-0.022em; --tr-h2:-0.015em; --tr-concl:-0.01em;
  --tr-stmt:-0.008em; --tr-label:0.14em;

  --r:2px;

  --focus-ring:2px solid var(--red);
  --focus-offset:3px;

  /* motion */
  --ease-draw:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.33,1,.68,1);
  --t-bar:420ms; --t-reveal:300ms; --t-state:180ms;
  --d-plaque:260ms; --d-mark:340ms; --d-concl:380ms;
}

/* Absorbs the metric jump if Martian Mono's wdth axis never arrives. */
@font-face{
  font-family:"MonoFallback";
  src:local("Menlo"), local("Consolas"), local("DejaVu Sans Mono"), local("Liberation Mono");
  size-adjust:96%; ascent-override:92%; descent-override:24%;
}

/* ----------------------------------------------------------------- base -- */
*{ box-sizing:border-box }

html{
  background:var(--ledger);
  color:var(--iron);
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  font:400 var(--t-body)/var(--lh-body) var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,p,ul,ol,figure,fieldset{ margin:0 }
ul,ol{ padding:0; list-style:none }
fieldset{ border:0; padding:0; min-width:0 }
b,strong{ font-weight:600 }
i,em{ font-style:normal; font-weight:600 }   /* no italic anywhere on this page */
table{ border-collapse:collapse; width:100% }
button{ font:inherit; color:inherit }

:where(a,button,summary,input,textarea):focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
}
main:focus{ outline:none }

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

.skip{
  position:absolute; top:8px; left:8px; z-index:100;
  transform:translateY(-200%);
  background:var(--docket); color:var(--iron);
  border:1px solid var(--slate); border-radius:var(--r);
  padding:14px 18px; text-decoration:none;
  font:600 var(--t-label)/1 var(--f-mono); letter-spacing:var(--tr-label); text-transform:uppercase;
}
.skip:focus{ transform:translateY(0) }

/* ------------------------------------------------------------ the mark -- */
/* One 2px bar. Hover and keyboard focus get an identical signal. */
.draw{ position:relative }
.draw::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
}
.draw--inset::after{ left:12px; right:12px; bottom:8px }
.draw:hover::after,
.draw:focus-visible::after{ transform:scaleX(1) }
@media (prefers-reduced-motion:no-preference){
  .draw::after{ transition:transform var(--t-state) var(--ease-draw) }
}

/* --------------------------------------------------------------- layout -- */
.section{ padding-block:var(--s-11) }
.section > .wrap{
  max-width:var(--frame); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:var(--rail) minmax(0,1fr);
}
.section > .wrap > *{ grid-column:2 }
/* The column cap is the DEFAULT, not an override. Authored as
   `.section > .wrap > *` it scored 0-2-0 and beat every component's own
   max-width, collapsing the whole measure system to a flat 720px.
   :where() zeroes the ancestors so a single class still wins. */
:where(.section > .wrap) > *{ max-width:var(--measure-col) }
.section > .wrap > .exhibit{
  grid-column:1 / -1; margin-left:var(--s-6); max-width:var(--exhibit-max);
}
/* Tables keep the prose's left edge — a borderless table bled left reads as a
   mistake, not as a sheet — but share the exhibits' right edge at 1076px. */
.section > .wrap > .bleed{ grid-column:2; max-width:800px }

/* the scope rail — the proof runs the length of the page */
main{ position:relative }
.rail{
  position:absolute; top:0; bottom:0; width:1.5px; z-index:0;
  /* flush with the frame's padding edge, so every hanging mark clears it */
  left:calc(50% - min(100%, var(--frame)) / 2 + var(--pad));
  background:var(--carbon); pointer-events:none;
}
.rail__fill{
  position:absolute; inset:0; background:var(--iron);
  transform:scaleY(var(--p, 1)); transform-origin:top;
}
.section{ position:relative; z-index:1 }

/* ------------------------------------------------------------------ nav -- */
.nav{
  position:sticky; top:0; z-index:50;
  height:var(--nav-h);
  background:var(--ledger);          /* opaque. There is no glass on this page. */
  border-bottom:1px solid var(--carbon);
}
.nav__inner{
  max-width:var(--frame); margin-inline:auto; padding-inline:var(--pad);
  height:100%; display:flex; align-items:center; gap:var(--s-6);
}
.wordmark{
  display:inline-flex; align-items:center; text-decoration:none; color:var(--iron);
  margin-right:auto;
  padding-block:12px;   /* 30px logo + 24px carries the link to a 54px target */
}
/* The drawn logo is the only navy and teal on the page furniture. It is set to
   30px in a 72px bar: the mark lands at ~33px, the size it stops mudding. */
.wordmark__logo{ display:block; width:144px; height:auto }
.nav__links{ display:flex; gap:var(--s-6) }
.nav__link{
  color:var(--slate); text-decoration:none;
  font:600 var(--t-label)/1 var(--f-mono); font-variation-settings:"wdth" 100;
  letter-spacing:var(--tr-label); text-transform:uppercase;
  padding-block:14px;
}
.nav__link:hover,
.nav__link:focus-visible{ color:var(--iron) }
.nav__link.is-here{ color:var(--iron) }
.nav__link.is-here::after{ transform:scaleX(1) }

/* -------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 var(--s-5); border:1px solid transparent;
  border-radius:var(--r); text-decoration:none; cursor:pointer;
  font:600 var(--t-mono)/1 var(--f-mono); font-variation-settings:"wdth" 100;
  letter-spacing:.08em; text-transform:uppercase; text-align:center;
}
.btn--primary{ background:var(--red); color:var(--docket) }
.btn--ghost{ color:var(--iron); background:none; padding-inline:0 }
.btn--sm{ min-height:40px; padding:0 20px }
.btn--block{ width:100%; margin-top:var(--s-2) }
.btn:active{ transform:translateY(1px) }
.btn__short{ display:none }

.link{ color:var(--iron); text-decoration:none }
.midcta{ margin-top:var(--s-8) }
.midcta .link{
  display:inline-block; padding-block:13px;   /* standalone link, so 44px tall */
  font:600 var(--t-mono)/1 var(--f-mono); font-variation-settings:"wdth" 100;
  letter-spacing:.08em; text-transform:uppercase;
}
.midcta .link::after{ bottom:9px }

/* --------------------------------------------- the inference bar (sig.) -- */
.infer{
  position:relative; display:block; height:2px;
  margin:var(--s-8) 0 var(--s-6);
  max-width:var(--measure-col);
}
.infer__bar{
  position:absolute; inset:0; background:var(--iron);
  transform:scaleX(1); transform-origin:left;
}
.infer__plaque{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  background:var(--ledger); padding:0 10px; color:var(--red);
  font:600 var(--t-label)/1 var(--f-mono); font-variation-settings:"wdth" 100;
  letter-spacing:var(--tr-label); text-transform:uppercase; white-space:nowrap;
}
.exhibit .infer__plaque{ background:var(--docket) }
.exhibit .infer{ max-width:none }

.conclusion{
  position:relative;
  font:400 var(--t-concl)/var(--lh-concl) var(--f-display);
  letter-spacing:var(--tr-concl); max-width:22ch;
}
.conclusion__mark{
  position:absolute; left:-42px; top:0;
  color:var(--red); font-size:1.25rem; line-height:inherit;
}
/* The hero conclusion spans exactly the measure its inference bar spans —
   a real relationship, where the authored 15ch was a magic number that landed
   6px off 720 and cost a whole extra line for it. */
.conclusion--hero{
  font-weight:500; font-size:var(--t-hero); line-height:var(--lh-hero);
  letter-spacing:var(--tr-hero); max-width:var(--measure-col);
}
.conclusion--hero .conclusion__mark{ font-size:3rem; left:-56px; top:.06em }
.exhibit .conclusion__mark{ left:-30px }
.conclusion--close{ max-width:20ch }

/* the bracket — "these are the reader's words" */
.bracket{ position:relative }
.bracket::before{
  content:""; position:absolute; left:-18px; top:.42em; bottom:.42em;
  width:1px; background:var(--red);
}
.bracket > li{ position:relative }
.bracket > li::before{
  content:""; position:absolute; left:-18px; top:.66em;
  width:8px; height:1px; background:var(--red);
}

/* ------------------------------------------------------------- 01 hero -- */
.section--hero{
  min-height:min(88vh, 940px);
  display:flex; align-items:center;
  padding-top:var(--s-10); padding-bottom:var(--s-11);
}
.section--hero > .wrap{ width:100% }

.eyebrow{
  font:600 var(--t-label)/1.5 var(--f-mono); font-variation-settings:"wdth" 100;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--slate);
  margin-bottom:var(--s-5);
}
.stack-stmt{ max-width:var(--measure-stmt); display:grid; gap:var(--s-4) }
.stack-stmt > li{
  font-size:var(--t-stmt); line-height:var(--lh-stmt);
  letter-spacing:var(--tr-stmt);
}
.section--hero .infer{ margin-top:var(--s-7) }
.conclusion--hero{ margin-top:var(--s-6) }

.ctas{ display:flex; align-items:center; gap:var(--s-6); margin-top:var(--s-7); flex-wrap:wrap }
.micro{ font-size:.875rem; line-height:1.5; color:var(--slate); margin-top:var(--s-4) }
.lead{
  font-size:var(--t-lead); line-height:1.55; max-width:32em; margin-top:var(--s-7);
}
.lead--tight{ margin-top:var(--s-4) }

/* ----------------------------------------------------------- 02 axioms -- */
.h2{
  font:400 var(--t-h2)/var(--lh-h2) var(--f-display);
  letter-spacing:var(--tr-h2); max-width:18ch;
}
.axioms{ margin-top:var(--s-9); display:grid; gap:44px }
.axiom{ position:relative }
.axiom__mark{
  position:absolute; left:-56px; top:.3em;
  font:600 var(--t-label)/1 var(--f-mono); font-variation-settings:"wdth" 100;
  letter-spacing:.06em; color:var(--slate);
}
.axiom__stmt{
  font-weight:600; font-size:1.1875rem; line-height:1.3; letter-spacing:-0.005em;
}
.axiom__body{ max-width:var(--measure-prose); margin-top:var(--s-2) }

/* --------------------------------------------------- 03 / 04 the tables -- */
.tbl-scroll{ margin-top:var(--s-9) }
.tbl th{
  text-align:left; padding:0 var(--s-5) var(--s-3) 0;
  font:600 var(--t-label)/1.4 var(--f-mono); font-variation-settings:"wdth" 100;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--slate);
  border-bottom:1px solid var(--slate);
}
.tbl td{
  padding:28px var(--s-5) 28px 0; vertical-align:top;
  border-bottom:1px solid var(--carbon);
}
.tbl th:last-child,.tbl td:last-child{ padding-right:0 }
.tbl tbody tr{ position:relative }
.tbl tbody tr::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--iron); transform:scaleX(0); transform-origin:left;
}
.tbl tbody tr:hover::after,
.tbl tbody tr:focus-within::after{ transform:scaleX(1) }
@media (prefers-reduced-motion:no-preference){
  .tbl tbody tr::after{ transition:transform var(--t-state) var(--ease-draw) }
}

.tbl--domains td:nth-child(1){ width:44% }
.tbl--domains td:nth-child(2){ width:38% }
.tbl--domains td:nth-child(3){ width:18% }
.td-say{ font-size:var(--t-body); line-height:1.5 }
.tbl--domains td b{ font-weight:600; font-size:1.1875rem; line-height:1.35; display:block }
.tbl--domains td span{
  display:block; margin-top:6px; font-size:var(--t-small); line-height:1.5; color:var(--slate);
}
.td-num{
  font:400 var(--t-mono)/1.5 var(--f-mono); font-variation-settings:"wdth" 87.5;
  font-variant-numeric:tabular-nums; color:var(--slate);
}

.tbl--modes{ margin-top:0 }
.tbl--modes th:nth-child(1),.tbl--modes td:nth-child(1){ width:46% }
.tbl--modes td{ padding-block:var(--s-5) }
/* Not red. These are the studio's own failure taxonomy, not the reader's
   words — five sentences of it was the largest red mass on the page, and it
   made red mean "bad thing" on top of its five real jobs. Weight carries it. */
.td-break{ font-weight:600; line-height:1.5 }
.kbd{
  font:400 .8125em/1 var(--f-mono); font-variation-settings:"wdth" 87.5;
  letter-spacing:.01em;
}

.note{
  font-size:var(--t-small); line-height:1.55; color:var(--slate);
  max-width:var(--measure-prose); margin-top:var(--s-4);
}
.note--wide{ margin-top:var(--s-7) }
#failure-modes .infer{ margin-top:var(--s-9) }

/* ---------------------------------------------------------- 05 exhibits -- */
.exhibit{
  background:var(--docket); border:1px solid var(--slate); border-radius:var(--r);
  padding:var(--s-7);
}
.proof{ margin-top:var(--s-9) }
.proof + .proof{ margin-top:var(--s-8) }

.proof__label{
  font:600 var(--t-label)/1.4 var(--f-mono); font-variation-settings:"wdth" 100;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--slate);
}
.proof__given{
  margin-top:var(--s-4); max-width:var(--measure-prose); line-height:1.55;
}
.proof__given-key{
  font:600 var(--t-label)/1 var(--f-mono); font-variation-settings:"wdth" 100;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--red);
  margin-right:10px;
}
.steps{
  margin-top:var(--s-6); counter-reset:step;
  border-top:1px solid var(--carbon);
  padding-left:var(--s-6);
  border-left:0;
}
/* Rules run the full width of the list; the right padding, not a max-width,
   holds the measure — otherwise the separators stop mid-panel and read ragged. */
.steps > li{
  counter-increment:step; position:relative;
  padding:var(--s-4) var(--s-9) var(--s-4) 28px;
  border-bottom:1px solid var(--carbon);
  line-height:1.55;
}
.steps > li::before{
  content:"0" counter(step); position:absolute; left:0; top:calc(var(--s-4) + .18em);
  font:500 var(--t-step)/1.3 var(--f-mono); font-variation-settings:"wdth" 75;
  font-variant-numeric:tabular-nums; color:var(--slate);   /* ordinal, not argument */
}
/* the nested rail inside each exhibit */
.steps{ position:relative }
.steps::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1.5px; background:var(--iron);
}
.proof .infer{ margin-top:var(--s-7); margin-bottom:var(--s-5) }
.tags,.still{
  font:600 var(--t-label)/1.5 var(--f-mono); font-variation-settings:"wdth" 100;
  letter-spacing:.12em; text-transform:uppercase; color:var(--slate);
}
.tags{ margin-top:var(--s-6) }
.still{ margin-top:var(--s-2) }

/* ----------------------------------------------------------- 06 method -- */
.deriv{ margin-top:var(--s-9); border-top:1px solid var(--carbon) }
.deriv__row{
  display:grid; grid-template-columns:320px 1fr; gap:var(--s-5);
  padding-block:var(--s-6); border-bottom:1px solid var(--carbon);
  position:relative;
}
.deriv__row::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--iron); transform:scaleX(0); transform-origin:left;
}
.deriv__row:hover::after{ transform:scaleX(1) }
@media (prefers-reduced-motion:no-preference){
  .deriv__row::after{ transition:transform var(--t-state) var(--ease-draw) }
}
.deriv__file{
  font:500 var(--t-mono)/1.6 var(--f-mono); font-variation-settings:"wdth" 87.5;
  letter-spacing:.02em; overflow-wrap:anywhere;
}
.deriv__gloss{ max-width:var(--measure-prose); line-height:1.6 }

/* ------------------------------------------------------------ 07 stack -- */
/* Fixed gutters, not percentages: `gap` resolves against the grid container
   but `padding-left` resolves against the 40% column, so the divider sat
   24px from one side and 61px from the other. */
.stack{
  margin-top:var(--s-9);
  display:grid; grid-template-columns:52% 1fr; gap:var(--s-7);
}
.stack__no{ border-left:1px solid var(--carbon); padding-left:var(--s-7) }
.inv{ display:grid }
.inv > li{ padding-block:var(--s-4); border-bottom:1px solid var(--carbon) }
.inv > li:last-child{ border-bottom:0; padding-bottom:0 }
.inv > li:first-child{ padding-top:0 }
.inv__tech{
  display:block;
  font:400 var(--t-mono)/1.5 var(--f-mono); font-variation-settings:"wdth" 87.5;
  color:var(--slate); margin-bottom:6px; overflow-wrap:anywhere;
}
.inv__cost{ display:block; line-height:1.55 }
.stack__no-head{
  font:600 var(--t-label)/1.5 var(--f-mono); font-variation-settings:"wdth" 100;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--slate);
  margin-bottom:var(--s-4);
}
.nolist{ display:grid; gap:var(--s-4) }
.nolist > li{ font-weight:500; line-height:1.6 }

/* ------------------------------------------------------- 08 objections -- */
.objs{ margin-top:var(--s-9); display:grid; gap:48px }
.obj{ max-width:var(--measure-col) }
.bracket--solo::before{ top:.3em; bottom:auto; height:calc(100% - .6em) }
.obj__q{
  font:400 var(--t-concl)/var(--lh-concl) var(--f-display);
  letter-spacing:var(--tr-concl); max-width:24ch;
}
.obj__a{ margin-top:var(--s-3); max-width:var(--measure-prose); line-height:1.6 }

/* ----------------------------------------------------------- 09 contact -- */
.section--close{ padding-bottom:var(--s-12) }
.stack-stmt--close{ margin-top:var(--s-5) }
.contact{
  margin-top:var(--s-9);
  display:grid; grid-template-columns:58% 1fr; gap:8%;
}
.field{ margin-bottom:var(--s-5) }
.flabel{
  display:block; margin-bottom:var(--s-2);
  font:600 var(--t-label)/1.4 var(--f-mono); font-variation-settings:"wdth" 100;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--slate);
}
.finput{
  display:block; width:100%; padding:14px;
  font:400 var(--t-body)/1.5 var(--f-body); color:var(--iron);
  background:var(--docket); border:1px solid var(--slate); border-radius:var(--r);
}
.finput:hover{ border-color:var(--iron) }
textarea.finput{ resize:vertical; min-height:120px }
.fhelp{ margin-top:var(--s-2); font-size:var(--t-small); line-height:1.5; color:var(--slate) }
.contact__aside{ align-self:start }
.contact__promise{ line-height:1.6 }
.contact__mail{ margin-top:var(--s-4); font-size:var(--t-small) }
.contact__aside .note{ margin-top:var(--s-5) }
.form__done{
  font:400 var(--t-concl)/var(--lh-concl) var(--f-display);
  letter-spacing:var(--tr-concl); max-width:22ch;
}
.form__done-note{ margin-top:var(--s-4); font-size:var(--t-small); color:var(--slate) }

/* ---------------------------------------------------------------- foot -- */
.foot{
  position:relative;
  border-top:1px solid var(--carbon);
  padding-block:var(--s-10);
  text-align:center;
}
.foot__mark{ color:var(--red); font-size:1rem; line-height:1 }
.foot__name{ margin-top:var(--s-4); line-height:0 }
.foot__logo{ width:176px; height:auto; display:inline-block }
.foot__meta{
  margin-top:var(--s-4);
  font:400 var(--t-label)/1.8 var(--f-mono); font-variation-settings:"wdth" 100;
  letter-spacing:.1em; text-transform:uppercase; color:var(--slate);
}
.foot__line{ margin-top:var(--s-4); font-size:var(--t-small) }

/* ================================================================ motion ==
   Default state is the finished state. Motion is additive and opted into by
   the `js` class, so no-JS and reduced-motion both render a complete page.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js .infer__bar{
    transform:scaleX(0);
    transition:transform var(--t-bar) var(--ease-draw);
  }
  .js .infer__plaque,
  .js .conclusion__mark{
    opacity:0; transition:opacity 200ms var(--ease-out);
  }
  .js .conclusion{
    opacity:0; transform:translateY(8px);
    transition:opacity var(--t-reveal) var(--ease-out),
               transform var(--t-reveal) var(--ease-out);
  }
  .js .infer__plaque{ transition-delay:var(--d-plaque) }
  .js .conclusion__mark{ transition-delay:var(--d-mark) }
  .js .conclusion{ transition-delay:var(--d-concl) }

  .js .is-proved .infer__bar{ transform:scaleX(1) }
  .js .is-proved .infer__plaque,
  .js .is-proved .conclusion__mark{ opacity:1 }
  .js .is-proved .conclusion{ opacity:1; transform:none }
}

/* ============================================================ responsive ==
   1024px  rail collapses, hanging marks go inline
    900px  nav links drop, tables reflow, two-column panels stack
    640px  padding and type floors
    420px  the plaque falls beneath its bar
   ========================================================================== */

@media (max-width:1024px){
  .rail{
    left:0; width:3px; background:var(--iron);
  }
  .rail__fill{ display:none }
  .section > .wrap{ grid-template-columns:minmax(0,1fr) }
  .section > .wrap > *{ grid-column:1 }
  .section > .wrap > .bleed,
  .section > .wrap > .exhibit{ grid-column:1; margin-left:0; max-width:100% }

  .conclusion{ max-width:26ch }
  .conclusion__mark,
  .conclusion--hero .conclusion__mark,
  .exhibit .conclusion__mark{
    position:static; font-size:inherit; margin-right:.34em;
  }
  .conclusion--hero .conclusion__mark{ font-size:.8em }

  .axiom__mark{ position:static; display:inline-block; margin-right:10px }
  .axiom__stmt{ display:inline }

  .bracket::before{
    left:0; top:0; bottom:0; width:2px;
  }
  .bracket{ padding-left:16px }
  .bracket > li::before{ display:none }
  .bracket--solo::before{ height:100% }

}

@media (max-width:900px){
  .nav__links{ display:none }
  .btn--sm{ min-height:44px }   /* it is the only action in the bar here */

  .tbl-scroll{ overflow-x:visible }
  /* Gone from the a11y tree too: td::before already repeats every header on
     every row, so keeping the thead announced each string twice. The
     visually-hidden <caption> still names the table. */
  .tbl thead{ display:none }
  .tbl tr{ display:block; padding-block:var(--s-5); border-bottom:1px solid var(--carbon) }
  .tbl td{
    display:block; width:auto !important; padding:0 0 var(--s-4) 0; border-bottom:0;
  }
  .tbl td:last-child{ padding-bottom:0 }
  .tbl td::before{
    content:attr(data-label); display:block; margin-bottom:6px;
    font:600 var(--t-label)/1.4 var(--f-mono); font-variation-settings:"wdth" 100;
    letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--slate);
  }

  /* the desktop measure-holding padding is far too expensive here */
  .steps > li{ padding-right:var(--s-5) }

  .stack,.contact{ grid-template-columns:1fr; gap:var(--s-7) }
  .stack__no{
    border-left:0; padding-left:0; border-top:1px solid var(--carbon); padding-top:var(--s-6);
  }
  .deriv__row{ grid-template-columns:1fr; gap:var(--s-2) }
  .h2{ max-width:22ch }
}

@media (max-width:640px){
  :root{ --pad:20px; --s-11:88px; --s-12:104px }
  .section--hero{ min-height:0; padding-top:var(--s-9) }
  .ctas{ flex-direction:column; align-items:stretch; gap:var(--s-3) }
  /* No border: carbon is structure only, and a control it can't legally draw
     is not worth inventing a component for. The draw-mark carries it. */
  .btn--ghost{ padding-inline:var(--s-5) }
  .btn--ghost::after{ left:var(--s-5); right:var(--s-5); bottom:14px }
  .exhibit{ padding:20px }
  .steps{ padding-left:16px }
  .steps > li{ padding-left:0; padding-right:0 }
  .steps > li::before{ position:static; display:block; margin-bottom:4px }
  .objs{ gap:var(--s-7) }
  .axioms{ gap:var(--s-7) }
}

@media (max-width:420px){
  /* the only structural change the signature component makes */
  .infer{ height:auto }
  .infer__bar{ position:static; display:block; height:2px }
  .infer__plaque{
    position:static; transform:none; display:block;
    padding:0; margin-top:10px; text-align:right;
  }
}

@media (max-width:375px){
  .nav .btn__long{ display:none }
  .nav .btn__short{ display:inline }
}