/* ==========================================================================
   SOM Institute — Solar Operations Maturity Institute · Variant 2 "Grid"
   Instrument / engineering. One strict grid, ink on paper, one electric accent.
   Design tokens first; nothing below hard-codes a colour, face or frame size.
   ========================================================================== */

:root {
  /* ---- palette ---------------------------------------------------------- */
  --ink:      #121416;  /* near-black charcoal: text on light, dark surfaces          */
  --ink-2:    #1B1E21;  /* raised dark surface (hover on dark)                         */
  --ink-3:    #2C3035;  /* hairline rules on dark (decorative)                         */
  --ink-4:    #3D4248;  /* empty meter tracks / dim cells on dark (decorative)         */
  --paper:    #F3F2ED;  /* paper-white: the page                                       */
  --paper-2:  #E8E6DF;  /* alternate band, hover                                       */
  --paper-3:  #CFCCC3;  /* hairline rules on paper (decorative)                        */
  --graphite: #4E5359;  /* secondary text on paper        6.9:1 on --paper             */
  --mist:     #A9AEB4;  /* secondary text on dark         8.3:1 on --ink               */
  --accent:   #C8F03C;  /* THE accent. Only ever a fill behind ink (14.1:1) or a mark
                           on ink (14.1:1). Never text or a thin line on paper (1.2:1). */

  /* ---- roles (light context; .on-dark swaps them) ----------------------- */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--graphite);
  --rule: var(--paper-3);
  --rule-strong: var(--ink);
  --hover: var(--paper-2);
  --focus: var(--ink);
  --focus-halo: var(--paper);
  --meter-track: var(--paper-3);
  --meter-fill: var(--ink);

  /* ---- type -------------------------------------------------------------- */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cond: "IBM Plex Sans Condensed", "Roboto Condensed", "Arial Narrow", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-label: 0.75rem;                                   /* 12px mono labels */
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-h2: clamp(1.625rem, 1.15rem + 1.8vw, 2.625rem);
  --fs-h1: clamp(2.5rem, 1.2rem + 5.2vw, 4.875rem);

  /* ---- frame ------------------------------------------------------------- */
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1280px;
  --head-h: 72px;           /* desktop masthead height = rail head height        */
  --rail-w: 76px;           /* desktop CTA rail, reserved from the layout         */
  --bar-h: 64px;            /* mobile CTA bar, reserved from the layout           */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

.on-dark {
  --bg: var(--ink);
  --fg: var(--paper);
  --fg-2: var(--mist);
  --rule: var(--ink-3);
  --rule-strong: var(--paper);
  --hover: #202428;
  --focus: var(--accent);
  --focus-halo: var(--ink);
  --meter-track: var(--ink-4);
  --meter-fill: var(--accent);
  background: var(--bg);
  color: var(--fg);
}

/* Level fill: one variable drives every level glyph, meter and ladder. */
[data-l="0"] { --fill: 0%;   --l: 0; }
[data-l="1"] { --fill: 20%;  --l: 1; }
[data-l="2"] { --fill: 40%;  --l: 2; }
[data-l="3"] { --fill: 60%;  --l: 3; }
[data-l="4"] { --fill: 80%;  --l: 4; }
[data-l="5"] { --fill: 100%; --l: 5; }

/* ==========================================================================
   1. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  /* anchors and focused elements never land under the fixed mobile bar */
  scroll-padding-bottom: calc(var(--bar-h) + var(--safe-b) + 16px);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  /* the CTA bar is fixed; reserve its height so it never covers content */
  padding-bottom: calc(var(--bar-h) + var(--safe-b));
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
:where(ul[class], ol[class], nav ul, .foot ul) { list-style: none; padding: 0; margin: 0; }
a { color: inherit; }
button { font: inherit; }
code { font-family: var(--mono); }
main:focus { outline: none; }
[hidden] { display: none !important; }   /* e.g. the model-page view switch stays hidden without JS */

/* ==========================================================================
   2. Type
   ========================================================================== */
h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--fg);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 0.98; letter-spacing: -0.032em; }
h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.022em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.006em; }
p { text-wrap: pretty; }

.label {
  font: 500 var(--fs-label)/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lede { font-size: var(--fs-lede); line-height: 1.55; max-width: 46ch; }
.prose { max-width: 64ch; font-size: 1.0625rem; }
.prose p + p { margin-top: 1em; }
.stack-top { margin-top: 32px; }
@media (min-width: 48em) { .hide-md { display: none; } }

/* the single highlighter stroke (ink text over the accent: 14.1:1) */
.hl {
  background: linear-gradient(to top, transparent 0 0.1em, var(--accent) 0.1em 0.42em, transparent 0.42em);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-inline: 0.04em;
}

/* text links: ink underline; hover lays the accent behind the ink */
.prose a, .sheet a, .sec-foot a, .note a, .foot-contact a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.prose a:hover, .sheet a:hover, .sec-foot a:hover, .note a:hover, .foot-contact a:hover {
  background: var(--accent);
  color: var(--ink);
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   3. Frame
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}

.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;
  left: 8px; top: -200px;
  z-index: 100;
  padding: 15px 18px;
  background: var(--ink);
  color: var(--paper);
  font: 600 14px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: 8px; }

/* ==========================================================================
   4. Masthead + primary nav
   Mobile: brand row, then a five-cell tab bar. Desktop: one 72px row of cells.
   ========================================================================== */
.masthead {
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.masthead-in { display: flex; flex-direction: column; }

/* The lockup (2026-10-07): the mark, the wordmark "SOMInstitute" (outlined Plex
   Mono, S O M I in Bold, the rest in Regular) and the full name as live text.
   Full lockup: the mark spans two lines, the wordmark over the full name. The
   mark's top is the wordmark's cap line and its foot the full name's baseline:
   12.56px cap box + 5px row gap + 9.63px (the baseline of 11px Plex Mono in an
   11px line box) = 27.19px. The compact lockup (960 to 1199px, masthead only)
   is in the media query below the nav rules. */
.brand {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "mark word" "mark desc";
  align-content: center;
  align-items: start;
  justify-content: start;
  justify-items: start;
  column-gap: 8px;
  row-gap: 5px;
  width: fit-content;
  min-height: 60px;
  padding-inline: var(--gutter);
  color: var(--ink);
  text-decoration: none;
}
.lockup-mark { grid-area: mark; width: auto; max-width: none; height: 27.19px; }
.lockup-word { grid-area: word; width: auto; max-width: none; height: 12.56px; overflow: visible; }  /* 18px type; the i dot and the overshoots draw outside the cap box */
.brand-desc {
  grid-area: desc;
  font: 500 11px/11px var(--mono);
  letter-spacing: 0.02em;
  color: var(--graphite);
  white-space: nowrap;
}

.nav ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--paper-3);
}
.nav li + li a { border-left: 1px solid var(--paper-3); }
.nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  height: 100%;
  padding: 6px 4px;
  font: 500 11.5px/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--graphite);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.nav-idx { display: none; font-variant-numeric: tabular-nums; }
.nav-survey { color: var(--ink); }

@media (min-width: 60em) {
  .masthead-in {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    max-width: var(--maxw);
    min-height: var(--head-h);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .brand { min-height: var(--head-h); padding-inline: 0; }
  .nav ul { display: flex; height: 100%; border-top: 0; }
  .nav li { display: flex; }
  .nav a {
    padding: 0 18px;
    font-size: 12px;
    border-left: 1px solid var(--paper-3);
  }
  .nav li:last-child a { border-right: 1px solid var(--paper-3); }
  .nav-idx { display: inline; color: var(--graphite); }
  .nav a[aria-current="page"] .nav-idx { color: var(--mist); }
}
/* Five nav cells beside the rail (2026-10-07). From 960 to 1199px the masthead
   uses the compact lockup (the mark over the wordmark, no full name) and narrows
   the cells, so the row always ends short of the rail; from 1200px the full
   lockup and the padding come back. The compact wordmark is 17px type,
   12 × 0.6 × 17 = 122.4px wide, no wider than the 123.65px lockup it replaced. */
@media (min-width: 60em) and (max-width: 74.99em) {
  .masthead .brand { grid-template-columns: auto; grid-template-areas: "mark" "word"; row-gap: 6px; }
  .masthead .lockup-mark { height: 20px; }
  .masthead .lockup-word { height: 11.87px; }
  .masthead .brand-desc { display: none; }
  .nav a { padding-inline: 14px; }
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 0 18px 0 20px;
  border: 2px solid var(--ink);
  font: 600 13.5px/1.1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.btn-arrow { font-size: 1.2em; line-height: 1; transition: transform .2s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: var(--ink); color: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.on-dark .btn-ghost { color: var(--paper); border-color: var(--paper); }
.on-dark .btn-ghost:hover { background: var(--paper); color: var(--ink); }
.on-dark .btn-primary { border-color: var(--accent); }
.on-dark .btn-primary:hover { background: var(--ink); color: var(--accent); }
.btn-lg { min-height: 60px; padding-inline: 24px 22px; font-size: 14.5px; }

/* ==========================================================================
   6. Hero (index)
   ========================================================================== */
.hero { padding-block: 22px 40px; }
.kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin-bottom: 26px;
  padding-block: 8px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--paper-3);
}
.kicker > span + span::before { content: "/"; margin-inline: 8px; color: var(--graphite); }
.kicker b { font-weight: 600; color: var(--ink); }
.kicker-scale { display: none; font-style: normal; }
@media (max-width: 37.49em) {
  .kicker { font-size: 11px; flex-wrap: nowrap; }
  .kicker > span { white-space: nowrap; }
  .kicker > span:nth-child(n+3) { display: none; }
}
@media (min-width: 37.5em) {
  .kicker { padding-block: 0; }
  .kicker > span { padding: 9px 14px 9px 0; margin-right: 14px; border-right: 1px solid var(--paper-3); }
  .kicker > span:last-of-type { border-right: 0; margin-right: 0; }
  .kicker > span + span::before { content: none; }
}
@media (min-width: 60em) {
  /* the 0-5 scale, as a drawing's scale bar: introduces the glyph used everywhere */
  .kicker-scale { display: flex; align-items: center; gap: 14px; margin-left: auto; color: var(--graphite); }
  .kicker-scale > span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
  .kicker-scale .glyph { width: 11px; height: 11px; border-width: 1.5px; }
}

.hero h1 .ln { display: block; }
.hero h1 .ph { white-space: nowrap; }

.hero-grid { display: grid; gap: 28px; margin-top: 30px; }
.hero-copy { display: grid; gap: 14px; }
.hero-copy p:not(.lede) { max-width: 52ch; color: var(--graphite); }
.hero-act { display: grid; gap: 22px; align-content: start; }

.readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
}
.readout > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 4px;
  padding: 10px 12px 12px 0;
  border-bottom: 1px solid var(--paper-3);
}
.readout > div:nth-child(odd) { border-right: 1px solid var(--paper-3); }
.readout > div:nth-child(even) { padding-left: 12px; }
.readout dt { font: 500 11px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.readout dd { font: 500 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

@media (min-width: 37.5em) and (max-width: 59.99em), (min-width: 75em) {
  .readout { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .readout > div { border-right: 1px solid var(--paper-3); padding-left: 12px; }
  .readout > div:first-child { padding-left: 0; }
  .readout > div:last-child { border-right: 0; }
}
.readout dt { overflow-wrap: normal; hyphens: none; }
@media (min-width: 60em) {
  .hero { padding-block: 26px 52px; }
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: start; margin-top: 34px; }
  .hero-act { padding-top: 6px; }
}

/* ==========================================================================
   7. Plates — dark "display windows" holding a figure
   ========================================================================== */
.plate { padding-block: 26px 30px; }
.plate-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-3);
}
.plate-head h2 { font: 600 var(--fs-label)/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); }
.plate-head h2 .num { color: var(--accent); margin-right: 4px; }
.plate-head .label { flex: 1 1 auto; }
.plate-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.plate-link:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.plate-foot { display: grid; gap: 12px; margin-top: 18px; }
.plate-cap { font-size: var(--fs-small); color: var(--mist); max-width: 72ch; }
.spine-legend { color: var(--mist); }
.spine-legend b { color: var(--accent); font-weight: 600; }

/* ==========================================================================
   8. The matrix — shared
   Every body cell carries data-l; the meter on its top edge fills to level/5.
   Hovering a cell lights its row and its column: a crosshair.
   ========================================================================== */
.mx { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.mx th, .mx td { text-align: left; vertical-align: top; font-weight: inherit; }
.mx td { position: relative; transition: background-color .12s var(--ease); }
.mx td::before,
.mx td::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  pointer-events: none;
}
.mx td::before { right: 0; background: var(--meter-track); }
.mx td::after { width: var(--fill); background: var(--meter-fill); }

.mx-n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mx-i { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--fg-2); font-variant-numeric: tabular-nums; }

/* crosshair (pointer devices only; content never depends on it) */
@media (hover: hover) {
  .mx tbody tr:hover > * { background: var(--hover); }
  .mx td:hover { box-shadow: inset 0 0 0 1px var(--fg-2); }
  .on-dark .mx td:hover { box-shadow: inset 0 0 0 1px var(--accent); }
  .mx:has(td[data-l="0"]:hover) [data-l="0"],
  .mx:has(td[data-l="1"]:hover) [data-l="1"],
  .mx:has(td[data-l="2"]:hover) [data-l="2"],
  .mx:has(td[data-l="3"]:hover) [data-l="3"],
  .mx:has(td[data-l="4"]:hover) [data-l="4"],
  .mx:has(td[data-l="5"]:hover) [data-l="5"] { background: var(--hover); }
}

/* ---- 8a. Brief matrix (index hero plate, on dark) ----------------------- */
.mx--brief { margin-top: 4px; }
.mx--brief .mx-corner { width: 33%; padding: 12px 8px 10px 0; vertical-align: bottom; }
.mx--brief thead th { padding: 12px 0 10px; border-bottom: 1px solid var(--paper); vertical-align: bottom; }
.mx--brief thead .mx-n { display: block; font-size: 1.125rem; line-height: 1; color: var(--accent); text-align: center; }
.mx--brief tbody th { padding: 0; border-bottom: 1px solid var(--ink-3); vertical-align: middle; }
.mx--brief tbody th a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 8px 6px 0;
  font: 600 13px/1.2 var(--sans);
  color: var(--paper);
  text-decoration: none;
}
.mx--brief tbody th a:hover span:last-child { text-decoration: underline; text-underline-offset: 0.25em; }
.mx--brief td { height: 44px; border-left: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3); }
.mx--brief td::before, .mx--brief td::after { top: auto; bottom: 50%; transform: translateY(50%); height: 6px; left: 22%; }
.mx--brief td::before { right: 22%; }
.mx--brief td::after { width: calc(56% * var(--l) / 5); }

@media (max-width: 47.99em) {
  .mx--brief .mx-w, .mx--brief .mx-t {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (min-width: 48em) {
  .mx--brief .mx-corner { width: 15%; }
  .mx--brief thead th { padding: 14px 12px 12px; }
  .mx--brief thead th.mx-corner { padding-left: 0; }
  .mx--brief thead .mx-n { text-align: left; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); margin-bottom: 8px; }
  .mx--brief .mx-w { display: block; font: 500 11px/1.25 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--mist); min-height: 2.5em; }
  .mx--brief tbody th { vertical-align: top; }
  .mx--brief tbody th a { font-size: 14px; padding-block: 14px 12px; align-items: flex-start; flex-direction: column; gap: 4px; }
  .mx--brief td { height: auto; padding: 15px 12px 16px; }
  .mx--brief td::before, .mx--brief td::after { top: 0; bottom: auto; transform: none; height: 3px; left: 0; }
  .mx--brief td::before { right: 0; }
  .mx--brief td::after { width: var(--fill); }
  .mx--brief .mx-t { display: block; font: 500 14px/1.3 var(--cond); color: var(--paper); }
}
@media (min-width: 75em) {
  .mx--brief .mx-corner { width: 16%; }
  .mx--brief .mx-t { font-size: 15px; }
  .mx--brief td { padding: 16px 14px 18px; }
}

/* meters fill on first paint (skipped entirely under reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .mx--brief td::after { animation: meter .9s var(--ease) both; animation-delay: calc(var(--l) * 90ms + 150ms); }
  @keyframes meter { from { width: 0; } }
}

/* ---- 8b. Full matrix (model page, on paper) ------------------------------ */
.mx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.seg { display: inline-flex; border: 2px solid var(--ink); }
.seg button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.seg button + button { border-left: 2px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button:not([aria-pressed="true"]):hover { background: var(--paper-2); }

.jump { margin-bottom: 28px; }
.jump ul { display: flex; flex-wrap: wrap; gap: 6px; }
.jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--paper-3);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
}
.jump a:hover { border-color: var(--ink); background: var(--paper-2); }
.jump .num { color: var(--graphite); }

.mx--full .mx-t { display: block; font: 600 15px/1.25 var(--cond); color: var(--ink); }
.mx--full .mx-d { display: block; margin-top: 6px; font: 400 14px/1.45 var(--cond); color: var(--graphite); }
.mx--full.is-titles .mx-d { display: none; }
.mx--full .mx-area { display: block; font: 600 1.125rem/1.2 var(--sans); letter-spacing: -0.01em; }
.mx--full .mx-cov { display: block; margin-top: 6px; font: 400 14px/1.45 var(--sans); color: var(--graphite); max-width: 48ch; }
.mx--full.is-titles .mx-cov { display: none; }
.mx-lv { display: flex; align-items: center; gap: 8px; font: 500 11px/1.2 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--graphite); }
.mx-lv .mx-n { font-size: 1.375rem; color: var(--ink); letter-spacing: 0; }

/* level glyph: a square cell filled to level/5 — the mark's own unit */
.glyph {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  background: linear-gradient(to top, currentColor 0 var(--fill), transparent var(--fill) 100%);
}

/* stacked: one block per area, its six levels listed (phones and tablets) */
@media (max-width: 68.74em) {
  .mx--full, .mx--full tbody, .mx--full tr, .mx--full th, .mx--full td { display: block; }
  .mx--full thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .mx--full tr { border-top: 2px solid var(--ink); margin-bottom: 40px; scroll-margin-top: 12px; }
  .mx--full tbody th { padding: 16px 0 18px; }
  .mx--full tbody th .mx-i { display: block; margin-bottom: 8px; }
  .mx--full td {
    padding: 14px 0 18px;
    border-top: 1px solid var(--paper-3);
  }
  .mx--full td::before { display: none; }
  .mx--full td::after { height: 3px; }
  .mx--full .mx-lv { margin-bottom: 8px; }
  .mx--full .mx-d { margin-top: 4px; }
}
@media (min-width: 37.5em) and (max-width: 68.74em) {
  .mx--full tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .mx--full tbody th { grid-column: 1 / -1; }
  .mx--full td { padding-right: 8px; }
}
@media (min-width: 48em) and (max-width: 68.74em) {
  .mx--full tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* table: the full grid, header row pinned while you read down it */
@media (min-width: 68.75em) {
  .jump { display: none; }
  .mx--full { border-top: 2px solid var(--ink); }
  .mx--full thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 16px 12px 12px;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    box-shadow: 0 1px 0 var(--ink);
    vertical-align: bottom;
  }
  .mx--full thead th.mx-corner { width: 17%; padding-left: 0; }
  .mx--full thead .mx-n { display: block; font-size: 2rem; line-height: 1; margin-bottom: 10px; }
  .mx--full thead .glyph { width: 16px; height: 16px; margin-bottom: 10px; }
  .mx--full thead .mx-w { display: block; font: 500 11px/1.25 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--graphite); min-height: 2.5em; }
  .mx--full tbody th { padding: 20px 16px 22px 0; border-bottom: 1px solid var(--ink); }
  .mx--full tbody th .mx-i { display: block; margin-bottom: 10px; }
  .mx--full td { --pad: 12px; padding: 26px var(--pad) 22px; border-left: 1px solid var(--paper-3); border-bottom: 1px solid var(--ink); }
  /* the meter sits inside the cell, on the text column, clear of the row rule */
  .mx--full td::before { top: 10px; left: var(--pad); right: var(--pad); }
  .mx--full td::after { top: 10px; left: var(--pad); width: calc((100% - 2 * var(--pad)) * var(--l) / 5); }
  .mx--full .mx-lv { display: none; }
  .mx--full tbody tr { scroll-margin-top: 150px; }
}
@media (min-width: 80em) {
  .mx--full td { --pad: 14px; }
  .mx--full .mx-t { font-size: 16px; }
}

/* ==========================================================================
   9. Sections
   ========================================================================== */
.sec { padding-block: 52px 64px; border-top: 2px solid var(--ink); }
.sec--flush { border-top: 0; }
.sec-head { display: grid; gap: 14px; margin-bottom: 32px; }
.sec-idx { display: flex; align-items: baseline; gap: 12px; }
.sec-idx .num { font-size: 0.8125rem; font-weight: 600; color: var(--fg); padding: 2px 6px; border: 1px solid var(--rule-strong); line-height: 1.2; }
.sec-intro { max-width: 60ch; color: var(--fg-2); }
.sec-foot { margin-top: 22px; max-width: 70ch; color: var(--fg-2); }

/* the column ruler: twelve ticks under every section rule, quarters taller */
.sec > .wrap { position: relative; }
@media (min-width: 60em) {
  .sec > .wrap::before {
    content: "";
    position: absolute;
    top: -64px;
    left: var(--gutter); right: var(--gutter);
    height: 9px;
    background:
      repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 25%) top left / 100% 9px no-repeat,
      repeating-linear-gradient(to right, var(--paper-3) 0 1px, transparent 1px calc(100% / 12)) top left / 100% 5px no-repeat;
    border-right: 1px solid var(--ink);
    pointer-events: none;
  }
}
@media (min-width: 60em) {
  .sec { padding-block: 64px 80px; }
  .sec-head { grid-template-columns: 25% minmax(0, 1fr); column-gap: 0; row-gap: 14px; margin-bottom: 40px; }
  .sec-head > :not(.sec-idx) { grid-column: 2; }
  .sec-idx { grid-row: 1 / span 2; flex-direction: column; gap: 12px; padding-top: 6px; }
  .sec-body--offset { margin-left: 25%; }
}

/* ==========================================================================
   10. Cells, notes, datasheets
   ========================================================================== */
.cells {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 2px solid var(--rule-strong);
  border-left: 1px solid var(--rule);
}
.cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 20px 20px 24px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cell .label { margin-bottom: 2px; }
.cell p:not(.label) { color: var(--fg-2); }
.cell-n { font: 500 1.75rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--fg); letter-spacing: -0.02em; }

@media (min-width: 37.5em) {
  .cells--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48em) {
  .cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 68.75em) {
  .cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.quote { font-size: 1.0625rem; line-height: 1.45; color: var(--fg) !important; }
.path-key {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1.5px solid var(--fg);
  font: 600 14px/1 var(--mono);
  color: var(--fg);
}
.path-who { font: 500 12px/1.4 var(--mono); letter-spacing: 0.03em; color: var(--fg-2) !important; }

.note {
  display: grid;
  gap: 6px;
  margin-top: -1px;
  padding: 16px 20px 18px;
  border: 1px solid var(--rule);
  border-top: 1px solid var(--rule-strong);
  background: var(--hover);
}
.note p:not(.label) { max-width: 72ch; }
@media (min-width: 48em) {
  .note { grid-template-columns: 25% minmax(0, 1fr); column-gap: 0; align-items: baseline; padding-inline: 0; }
  .note > .label { padding-inline: 20px 16px; }
  .note > :not(.label) { padding-right: 20px; }
}

/* datasheet: label | value rows on a ruled sheet */
.sheet { border-top: 2px solid var(--rule-strong); }
.sheet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--rule);
}
.sheet dt { font: 500 var(--fs-label)/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); padding-top: 2px; }
.sheet dd { max-width: 70ch; }
.sheet-n {
  display: inline-block;
  min-width: 2.2ch;
  margin-right: 10px;
  font: 500 1.375rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  vertical-align: -0.08em;
}
.sheet-num { display: flex; align-items: baseline; gap: 12px; }
.sheet-num .sheet-n { margin-right: 0; flex: none; }
.sheet-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sheet-list li {
  padding: 3px 8px;
  border: 1px solid var(--rule);
  font: 500 12.5px/1.5 var(--mono);
  letter-spacing: 0.02em;
}
@media (min-width: 37.5em) {
  .sheet-row { grid-template-columns: minmax(150px, 3fr) minmax(0, 9fr); column-gap: 24px; }
}
@media (min-width: 60em) {
  .sheet-row { grid-template-columns: 25% minmax(0, 1fr); column-gap: 0; }
  .sheet-row dt { padding-right: 16px; }
}

/* ==========================================================================
   11. Partners (text wordmarks only — logos to be supplied)
   One rule for all four: same face, size, weight and cell (brief §8.3).
   From 60em, when the ruler shows, they are one row of four cells, three
   columns each, with every cell edge on a quarter tick.
   ========================================================================== */
.partners { grid-template-columns: minmax(0, 1fr); }
.partner { justify-content: center; min-height: 76px; }
.partner-name {
  font: 600 clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem)/1.15 var(--sans);
  letter-spacing: -0.015em;
  color: var(--fg);
  text-wrap: balance;
}
@media (min-width: 37.5em) {
  .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner { min-height: 104px; }
}
@media (min-width: 60em) {
  .partners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .partner { min-height: 120px; }
}

/* the datasheet footnote under a partner row */
.footnote { max-width: none; margin-top: 14px; font-size: var(--fs-small); line-height: 1.55; }
.footnote > .label {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  line-height: 1.35;
}

/* ==========================================================================
   12. Page heads (about, model, history, privacy)
   ========================================================================== */
.page-head { padding-block: 22px 44px; }
.page-head h1 { max-width: 18ch; font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.25rem); }
.page-head-grid { display: grid; gap: 28px; margin-top: 30px; }
.page-head .lede + p { margin-top: 14px; max-width: 54ch; color: var(--graphite); }
@media (min-width: 60em) {
  .page-head { padding-block: 26px 56px; }
  .page-head-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: start; margin-top: 36px; }
}
.sheet--plate { border-top-width: 2px; }
.sheet--plate .sheet-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 11px 0 12px; }
@media (min-width: 37.5em) {
  .sheet--plate .sheet-row { grid-template-columns: 130px minmax(0, 1fr); column-gap: 16px; }
}

/* ==========================================================================
   13. The spine (model + about)
   ========================================================================== */
.spine {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-left: 1px solid var(--paper-3);
}
.spine li {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  min-height: 108px;
  padding: 16px 16px 18px;
  border-right: 1px solid var(--paper-3);
  border-bottom: 1px solid var(--paper-3);
}
.spine li::after { /* the meter, as in the matrix */
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 3px;
  width: var(--fill);
  background: var(--ink);
}
.spine-top { display: flex; align-items: center; justify-content: space-between; }
.spine-n { font: 500 2.25rem/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.spine .glyph { width: 18px; height: 18px; border-width: 2px; }
.spine-w { font: 600 1.0625rem/1.2 var(--sans); align-self: end; }
@media (min-width: 48em) { .spine { grid-template-columns: repeat(3, minmax(0, 1fr)); } .spine li { min-height: 132px; } }
@media (min-width: 68.75em) {
  .spine { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .spine li { min-height: 150px; }
}

/* ==========================================================================
   14. Steps and formulae (about, model)
   ========================================================================== */
.steps .cell { gap: 8px; }
.step-n { display: flex; align-items: center; justify-content: space-between; }
.step-n .num { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.cells--5 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48em) { .cells--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em) { .cells--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.formula { border-top: 2px solid var(--ink); }
.formula > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--paper-3);
}
.formula dt { font: 500 var(--fs-label)/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); padding-top: 4px; }
.formula code {
  display: inline-block;
  font: 600 1.125rem/1.3 var(--mono);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.formula dd p { margin-top: 4px; color: var(--graphite); max-width: 60ch; }
@media (min-width: 37.5em) {
  .formula > div { grid-template-columns: minmax(150px, 3fr) minmax(0, 9fr); column-gap: 24px; }
}
@media (min-width: 60em) {
  .formula > div { grid-template-columns: 25% calc(100% / 3) minmax(0, 1fr); column-gap: 0; align-items: baseline; }
  .formula dt, .formula code { padding-right: 16px; }
  .formula dd { display: contents; }
  .formula dd p { margin-top: 0; }
}

/* ==========================================================================
   15. Groups (about: who it helps)
   ========================================================================== */
.group + .group { margin-top: 40px; }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.group-head h3 { font-size: 1.25rem; }

.readers .cell { min-height: 0; padding-block: 18px 20px; }
.readers h3 { font-size: 1.25rem; }

/* privacy: the one action, given its own cell */
.contact-cell {
  display: grid;
  gap: 8px;
  padding: 18px 20px 20px;
  border: 1px solid var(--paper-3);
  border-top: 2px solid var(--ink);
  align-content: start;
}
.contact-cell a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
  font: 500 clamp(1rem, 0.9rem + 0.5vw, 1.25rem)/1.3 var(--mono);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.contact-cell a:hover { background: var(--accent); text-decoration-thickness: 2px; }
.contact-cell p:not(.label) { font-size: var(--fs-small); color: var(--graphite); }

/* ==========================================================================
   16. Closing band
   ========================================================================== */
.cta-band { padding-block: 52px 56px; }
.cta-in { display: grid; gap: 26px; }
.cta-in h2 { max-width: 22ch; margin-top: 12px; color: var(--paper); }
.cta-in .label { color: var(--mist); }
@media (min-width: 60em) {
  .cta-band { padding-block: 72px; }
  .cta-in { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; column-gap: 48px; }
  .cta-in .btn { justify-self: start; }
}

/* ==========================================================================
   17. Footer
   ========================================================================== */
.foot { padding-block: 44px 28px; border-top: 2px solid var(--ink); }
.foot-top { display: grid; gap: 18px; padding-bottom: 28px; border-bottom: 1px solid var(--ink-3); }
.foot .brand { padding: 0; min-height: 44px; color: var(--paper); }
.foot .brand-desc { color: var(--mist); }   /* the footer always shows the full lockup */
.foot-top p { color: var(--mist); max-width: 52ch; font-size: var(--fs-small); }

/* the ownership line: the brief's §8.2 short form, verbatim, in small type */
.foot-partners { padding-block: 18px 20px; border-bottom: 1px solid var(--ink-3); }
.foot-credit { font: 500 0.9375rem/1.9 var(--sans); color: var(--fg); }
.foot-credit [data-partner] { white-space: nowrap; }
.foot-credit .label { margin-right: 2px; }
.foot-sep { margin-inline: 4px; color: var(--fg-2); }

.foot-grid { display: grid; gap: 28px; padding-top: 24px; }
.foot-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.foot-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--ink-3);
  font: 500 12.5px/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
}
.foot-nav a:hover { color: var(--accent); }
.foot-contact { display: grid; gap: 8px; align-content: start; }
.foot-contact p:not(.label) { color: var(--mist); font-size: var(--fs-small); max-width: 46ch; }
.foot-contact > a { color: var(--paper); font: 500 1rem/1.4 var(--mono); display: inline-flex; align-items: center; min-height: 44px; width: fit-content; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--ink-3); }
.foot-base .label { color: var(--mist); }

@media (min-width: 48em) {
  .foot-top { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 40px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
}
@media (min-width: 60em) {
  .foot { padding-block: 56px 32px; }
}

/* ==========================================================================
   18. The CTA dock — always on screen
   Phone/tablet: a fixed bar along the bottom edge (body reserves its height).
   Desktop (60em+): a fixed rail on the right edge (body reserves its width).
   ========================================================================== */
.dock {
  position: fixed;
  z-index: 40;
  left: 0; right: 0; bottom: 0;
  background: var(--accent);
  border-top: 2px solid var(--ink);
  padding-bottom: var(--safe-b);
}
.dock-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) calc(var(--bar-h) - 2px);
  align-items: stretch;
  height: calc(var(--bar-h) - 2px);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.dock-ladder {
  align-self: center;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) 14px;
}
.dock-ladder i {
  display: block;
  width: 9px; height: 9px;
  border: 1.5px solid currentColor;
  background: linear-gradient(to top, currentColor 0 var(--fill), transparent var(--fill) 100%);
}
.dock-copy { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.dock-text { font: 600 15px/1.1 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.dock-meta { font: 500 11px/1.2 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-go {
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--accent);
  font: 600 26px/1 var(--mono);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.dock-go span { transition: transform .2s var(--ease); }
.dock-link:hover { background: var(--ink); color: var(--accent); }
.dock-link:hover .dock-go { background: var(--accent); color: var(--ink); }
.dock-link:hover .dock-go span { transform: translateX(3px); }

@media (max-width: 22.5em) {          /* 360px and below: drop the meta line's tail */
  .dock-ladder { padding-right: 12px; gap: 2px; }
  .dock-ladder i { width: 8px; height: 8px; }
  .dock-text { font-size: 14px; letter-spacing: 0.05em; }
}

@media (min-width: 60em) {
  body { padding-bottom: 0; padding-right: var(--rail-w); }
  html { scroll-padding-bottom: 0; }

  .dock {
    top: 0; left: auto; right: 0; bottom: 0;
    width: var(--rail-w);
    border-top: 0;
    border-left: 2px solid var(--ink);
    padding-bottom: 0;
  }
  .dock-link {
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--head-h) minmax(0, 1fr) auto;
    justify-items: center;
  }
  .dock-go {
    grid-row: 1;
    width: 100%;
    font-size: 30px;
    background: transparent;
    color: var(--ink);
    border-bottom: 2px solid var(--ink);
  }
  .dock-link:hover .dock-go { background: transparent; color: var(--accent); border-bottom-color: var(--accent); }
  .dock-copy {
    grid-row: 2;
    flex-direction: row-reverse;      /* vertical-rl: text column sits to the right */
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    padding-top: 28px;
  }
  .dock-text, .dock-meta { writing-mode: vertical-rl; }
  .dock-text { font-size: 16px; letter-spacing: 0.16em; }
  .dock-meta { font-size: 11px; letter-spacing: 0.12em; overflow: visible; }
  .dock-ladder {
    grid-row: 3;
    flex-direction: column-reverse;   /* level 0 at the bottom, 5 at the top: a ladder */
    align-items: center;
    gap: 4px;
    padding: 0 0 24px;
  }
  .dock-ladder i { width: 14px; height: 14px; border-width: 2px; }
}

@media (min-width: 60em) and (max-height: 600px) {   /* short laptop screens: keep the rail's words */
  .dock-ladder { display: none; }
  .dock-copy { padding-top: 18px; }
}
@media (min-width: 60em) and (max-height: 430px) {
  .dock-meta { display: none; }
}

/* ==========================================================================
   19. Focus — always visible, two-tone so it reads on paper, ink or accent
   ========================================================================== */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-halo);
}
.dock-link:focus-visible { outline: 3px solid var(--ink); outline-offset: -8px; box-shadow: none; }
.dock-link:hover:focus-visible { outline-color: var(--accent); }
.btn-primary:focus-visible { outline-color: var(--ink); }
.on-dark .btn-primary:focus-visible { outline-color: var(--accent); }
.nav a:focus-visible { outline-offset: -5px; box-shadow: none; }
.nav a[aria-current="page"]:focus-visible { outline-color: var(--accent); }
.mx--brief tbody th a:focus-visible { outline-offset: 0; }

/* ==========================================================================
   20. Motion & print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .dock, .skip, .mx-tools { display: none !important; }
  body { padding: 0 !important; background: #fff; }
  .on-dark { background: #fff; color: #000; --fg: #000; --fg-2: #333; --rule: #bbb; --meter-fill: #000; --meter-track: #ccc; }
  .mx--full thead th { position: static; }
}

/* ==========================================================================
   21. Model history (history.html) — 2026-10-07
   Built from the existing parts: sections on the ruler, datasheets, cells,
   notes, the level glyph. New here: a two-cell grid, a ruled list for "kept /
   changed", and Table 01 (the two ladders) with its column edges on the ruler.
   ========================================================================== */
@media (min-width: 48em) { .cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ruled { border-top: 1px solid var(--rule-strong); }
.ruled li { padding: 11px 0 12px; border-bottom: 1px solid var(--rule); }
.ruled li:last-child { border-bottom: 0; padding-bottom: 0; }
.ruled b { font-weight: 600; }

.ladders { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ladders caption { caption-side: top; padding-bottom: 12px; text-align: left; }
.ladders-c1 { width: 20%; }
.ladders-c2 { width: 34%; }
.ladders th, .ladders td {
  padding: 13px 10px 14px;
  text-align: left;
  vertical-align: top;
  font-weight: inherit;
  border-bottom: 1px solid var(--paper-3);
}
.ladders td, .ladders thead th + th { border-left: 1px solid var(--paper-3); }
.ladders thead th {
  padding-block: 12px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font: 600 var(--fs-label)/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: bottom;
}
.ladders-sub { display: block; font-weight: 500; color: var(--graphite); }
.ladders-lv { display: flex; align-items: center; gap: 10px; }
.ladders-lv .mx-n { font-size: 1.375rem; line-height: 1; }
.ladders-name { display: block; font: 600 0.9375rem/1.3 var(--sans); }
.ladders-none { display: block; font: 500 0.9375rem/1.3 var(--mono); color: var(--graphite); }
.ladders-note {
  display: block;
  margin-top: 4px;
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--graphite);
}
.ladders .is-added > * { background: var(--paper-2); }   /* level 0: the row the SOM Institute model added */
@media (max-width: 22.49em) {                             /* below 360px */
  .ladders th, .ladders td { padding-inline: 8px; }
  .ladders-name, .ladders-none { font-size: 0.875rem; }
}
@media (min-width: 48em) {
  .ladders th, .ladders td { padding: 15px 14px 16px; }
  .ladders-name, .ladders-none { font-size: 1.0625rem; }
}
@media (min-width: 60em) {
  .ladders-c1, .ladders-c2 { width: 25%; }   /* column edges on the 25% and 50% ticks */
}