/* Normwerk, Rev. B: sheet 01, the cover. Hero, proof strip, work ledger, process, dev rows. */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  /* Rev. C: the proof strip moved out into its own inversion band, so the hero is
     now sized by its content. The rhythm below is tuned so the CTA clears the fold
     on a 650px viewport, which is a 900px browser window with its chrome. */
  padding-top: var(--s-3);
}
.hero-grid {
  row-gap: 0;
}
.hero-kicker {
  grid-column: 1 / -4;
  align-self: center;
}
.hero-pagemark {
  grid-column: -4 / -1;
  text-align: right;
  color: var(--graphite);
  align-self: center;
}
.hero-h1 {
  grid-column: 1 / -4;
  margin-top: var(--s-3);
  font-size: var(--fs-display);
}
.hero-h1 .h1-line {
  display: block;
}
.hero-deck {
  grid-column: 1 / 9;
  margin-top: var(--s-3);
  max-width: 64ch;
}
.hero-cta {
  grid-column: 1 / 9;
  margin-top: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.hero-cta-micro {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-cta-micro .cta-micro {
  margin-top: 0;
}
.hero-rail {
  grid-column: -4 / -1;
  grid-row: 2 / span 3;
  margin-top: var(--s-5);
  border-left: var(--rule-w) solid var(--hairline);
  padding-left: var(--gutter);
  align-self: start;
}
@media (max-width: 989px) {
  .hero-kicker,
  .hero-h1,
  .hero-deck,
  .hero-cta {
    grid-column: 1 / -1;
  }
  .hero-pagemark {
    display: none;
  }
  .hero-rail {
    grid-column: 1 / -1;
    grid-row: auto;
    border-left: 0;
    padding-left: 0;
    margin-top: var(--s-5);
  }
}

/* Record of Work (rail ledger) */
.row-title {
  color: var(--graphite);
  margin-bottom: var(--s-2);
}
.rofw-row {
  display: block;
  padding: var(--s-2) 0;
  text-decoration: none;
}
.rofw-files {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: 1.5;
  display: block;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}
.rofw-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.rofw-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--graphite);
}

/* Double-strike collapse */
.ds {
  position: relative;
  display: inline-block;
}
.ds-ghost {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  user-select: none;
}
/* Default = resolved state: one static low-opacity ghost (also the reduced-motion and no-JS state) */
.ds-ghost-1 {
  transform: translateY(-0.18em);
  opacity: 0.08;
  color: var(--ink);
}
.ds-ghost-2 {
  transform: translateY(-0.36em);
  opacity: 0;
  color: var(--werk-orange);
}

/* ---------- Proof strip ---------- */
.strip {
  margin-top: var(--s-5);
  border-top: var(--rule-w) solid var(--ink);
  border-bottom: var(--rule-w) solid var(--ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr auto; /* shared numeral and caption tracks: one baseline across cells */
}
.strip-cell {
  padding: var(--s-3);
  padding-top: var(--s-5);
  min-height: 170px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: var(--s-1);
}
.strip-num {
  align-self: end;
}
.strip-cap {
  align-self: start;
}
.strip-cell + .strip-cell {
  border-left: var(--rule-w) solid var(--hairline);
}
.strip-num {
  font-size: clamp(2.5rem, 3.4vw, 4rem);
  white-space: nowrap;
}
.strip-num .unit {
  font-size: 0.45em;
  font-variation-settings: "wdth" 105;
  letter-spacing: 0;
}
.strip-cap {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--graphite);
}
@media (max-width: 749px) {
  .strip {
    grid-template-columns: 1fr 1fr;
  }
  .strip-cell {
    min-height: 120px;
    padding: var(--s-2);
    padding-top: var(--s-4);
  }
  .strip-cell:nth-child(3) {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: var(--rule-w) solid var(--hairline);
    min-height: 0;
    padding-top: var(--s-3);
  }
}

/* REMOVED 2026-07-29: .swap / .swap-old / .swap-strike, the styling for "the
   20 hrs to 5 min swap". Dead twice over. No markup has ever carried the
   classes, and the claim they existed to render (20 hrs to 5 min) was
   confirmed unverified and dropped in the Rev. E purge. Retiring a claim is
   repo-wide, and CSS that can still draw it is part of the repo. */

/* ---------- What I Do: the three case studies ----------
   Rev. H.3: three cards ABREAST. This was three stacked .ledger-row rows, each
   one 8ch numeral | prose | meta across the full sheet, so a reader met one
   project per screen-width and had to scroll to discover there were three.
   The number of them is the claim this section makes, so it should be the first
   thing read, not the last.

   Each card is its own three-row grid (numeral / body / meta) with the body on
   1fr, so every .work-meta pins to the foot of its card and the three cards
   bottom-align however unevenly the prose runs. That is THE PAIR RULE applied to
   a grid rather than to a two-column row: the mismatch between three columns of
   different length is absorbed by the row that is allowed to stretch, and the
   thing that must line up (the link out) is anchored to the bottom edge. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--gutter);
  margin-top: var(--s-5);
}
/* The ledger hairline runs under the whole set, not under each card: three
   short underlines side by side read as three unfinished tables. */
.work-grid .ledger-row {
  border-bottom: 0;
}
.work-row {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s-2);
  padding: var(--s-4) 0;
}
/* The vertical rule between cards, drawn on the gap rather than as a border on
   the card, so the outer edges of the set stay clean. */
.work-grid .work-row + .work-row {
  border-left: var(--rule-w) solid var(--hairline);
  padding-left: var(--gutter);
  margin-left: calc(var(--gutter) / -2);
}
/* The status chip sits at the card HEAD, beside the folio number, not in the
   foot with the link. Abreast, the foot version read badly: card 01 stacked a
   chip above its link while 02 and 03 had one item each, so three cards that
   measured flush at the bottom still had their last lines on three different
   levels. Head status + foot link gives every card the same skeleton, and a
   card with no page to open (03) simply has an empty foot, which is honest.

   align-items: baseline, not center: a chip is a bordered box with its own
   padding and the numeral is bare 24px type, so centring the BOXES prints the
   two texts on different lines. Same lesson as the Rev. H.1 numeral rows. */
.work-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.work-no {
  font-size: var(--fs-24);
  color: var(--graphite);
}
.work-title {
  font-size: var(--fs-32);
  font-weight: 560;
  font-variation-settings: "wdth" 105;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.work-title a {
  text-decoration: none;
  display: inline-block;
  padding-block: 6px;
  margin-block: -6px;
}
.work-title a:hover {
  color: var(--orange-ink);
}
.work-aud {
  margin-top: var(--s-1);
  color: var(--graphite);
}
.work-copy {
  margin-top: var(--s-2);
  max-width: 58ch;
}
.work-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding-top: var(--s-2);
}
.work-open {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
/* Three abreast needs a wide sheet. Below 990 the columns take the prose under
   about 30ch and the cards start reading as newspaper filler, so they go to one
   column and the vertical rules become the horizontal ones they replaced. */
@media (max-width: 989px) {
  .work-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .work-grid .ledger-row {
    border-bottom: var(--rule-w) solid var(--hairline);
  }
  .work-grid .work-row + .work-row {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }
  .work-copy {
    max-width: 58ch;
  }
}
@media (max-width: 749px) {
  .work-row {
    gap: var(--s-1);
    padding: var(--s-3) 0;
  }
  .work-meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}
.sec-ask {
  margin-top: var(--s-4);
}

/* ---------- How I Build ---------- */
.proc-row {
  display: grid;
  grid-template-columns: 8ch minmax(0, 0.8fr) minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-3) 0;
  align-items: baseline;
}
.proc-no {
  font-size: var(--fs-24);
  color: var(--graphite);
}
.proc-title {
  font-size: var(--fs-24);
  font-weight: 560;
  font-variation-settings: "wdth" 105;
  letter-spacing: -0.01em;
}
.proc-line {
  color: var(--graphite);
}
@media (max-width: 749px) {
  .proc-row {
    grid-template-columns: 8ch 1fr;
  }
  .proc-line {
    grid-column: 2;
  }
}
/* Stack index */
.stack {
  margin-top: var(--s-6);
}
.stack-row {
  display: grid;
  grid-template-columns: 12ch minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-2) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: 1.7;
}
.stack-key {
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--graphite);
}
@media (max-width: 749px) {
  .stack-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---------- In Development ---------- */
.dev-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-4) 0;
}
.dev-capture-block {
  margin-top: var(--s-4);
  max-width: 560px;
}
.dev-title {
  font-size: var(--fs-24);
  font-weight: 560;
  font-variation-settings: "wdth" 105;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.dev-sub {
  margin-top: 4px;
  color: var(--graphite);
}
.dev-copy {
  margin-top: var(--s-2);
  max-width: 52ch;
}
.dev-capture {
  align-self: end;
}
.dev-capture-line {
  margin-bottom: var(--s-2);
  color: var(--graphite);
}
@media (max-width: 749px) {
  .dev-row {
    grid-template-columns: 1fr;
  }
}


/* =====================================================================
   Rev. C additions: the problem, the change table, the fashion route,
   the credential prose, and the proof band restyled for the dark band.
   ===================================================================== */

/* ---- Proof band: now sits inside .band--invert, so it loses the
   paper hairlines and gains breathing room. -------------------------- */
.band--invert .strip {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  /* two shared tracks so the three numerals sit on one baseline and the three
     captions start on one line, the same subgrid idea as the paper version */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: var(--s-5);
  row-gap: 0;
}
.band--invert .strip-cell {
  border: 0;
  padding: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: var(--s-2);
}
.band--invert .strip-num {
  align-self: end;
  font-size: clamp(var(--fs-48), 7vw, var(--fs-96));
  color: var(--on-dark);
}
.band--invert .strip-num .unit {
  font-size: 0.3em;
  font-variation-settings: "wdth" 100;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin-left: 0.3em;
  color: var(--on-dark-dim);
}
.band--invert .strip-cap {
  align-self: start;
  max-width: 34ch;
  /* the display family, not mono: this is three lines of real reading, and mono
     at this length reads as a machine dump rather than a claim worth checking */
  font-family: var(--font-display);
  font-size: var(--fs-16);
  line-height: 1.5;
}
.band-note {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: var(--rule-w) solid var(--on-dark-rule);
  color: var(--on-dark-dim);
}

/* ---- The change table: today against after ------------------------- */
.change {
  margin-top: var(--s-5);
  border-top: var(--rule-w) solid var(--hairline);
}
.change-head,
.change-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  padding-block: var(--s-2);
  border-bottom: var(--rule-w) solid var(--hairline);
}
.change-head {
  padding-block: var(--s-1);
}
.change-head span:last-child {
  color: var(--orange-ink);
}
.change-row > :first-child {
  color: var(--graphite);
}
.change-row > :last-child {
  font-weight: 500;
}

/* ---- The fashion route: one line, not a second door ---------------- */
.route {
  margin-top: var(--s-6);
  border-top: var(--rule-w) solid var(--ink);
  border-bottom: var(--rule-w) solid var(--ink);
  padding-block: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}

/* ---- Credential prose: the block that earns the AI claim ----------- */
.prose {
  margin-top: var(--s-4);
  max-width: 58ch;
  display: grid;
  gap: var(--s-3);
}
.prose p {
  font-size: var(--fs-18);
  line-height: 1.6;
}
.prose p:last-child {
  font-size: clamp(var(--fs-18), 2vw, var(--fs-24));
  font-weight: 560;
  font-variation-settings: "wdth" 105;
  line-height: 1.3;
  color: var(--ink);
  border-left: 2px solid var(--werk-orange);
  padding-left: var(--s-3);
}

/* ---- Stack: demoted from a section to one line of evidence -------- */
.stack-line {
  margin-top: var(--s-4);
  color: var(--graphite);
  max-width: 76ch;
}

@media (max-width: 749px) {
  .band--invert .strip {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: var(--s-4);
  }
  .band--invert .strip-cell {
    display: block;
    grid-row: auto;
  }
  .band--invert .strip-cap {
    margin-top: var(--s-1);
  }
  .change-head,
  .change-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .change-row > :last-child::before {
    content: "\2192 ";
    font-family: var(--font-mono);
    color: var(--orange-ink);
  }
}


/* Rev. C2: the pillars are a full-width band inside the hero grid. Without an
   explicit column they fall into a single 1/12 track and collapse into each
   other, which is exactly what happened on the first render. */
.hero-grid .pillars {
  grid-column: 1 / -1;
}
.hero-deck {
  grid-column: 1 / 9;
}
.hero-cta {
  grid-column: 1 / -1;
  margin-top: var(--s-4);
}