/* About (Our method): the approved page in the landing page's design. The headline and the film, why we do this,
   how we do it, the evidence example, the next step (MDC and Forensics) and the practical questions.
   Every section is one screen tall (md-system.css); md-system.js scales a section down a little on unusual screens. */
.ab-evidence, .ab-next {
  min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(20px, 5svh, 72px);
}
.ab-h2 { margin-top: 12px; font-family: var(--serif); font-size: clamp(2.1rem, min(1.2rem + 2.7vw, 7.4svh), 3.75rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.018em; }
.ab-h2 em { display: block; color: var(--burgundy); }
.ab-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; padding-bottom: clamp(14px, 2.4svh, 26px); border-bottom: 1px solid var(--ink); }
.ab-head-text { max-width: 42ch; color: var(--ink-2); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.5; }

/* The landing: the headline rises in, and the film panel shows its top edge at the bottom of the first screen. */
.ab-hero {
  --peek: clamp(110px, 21svh, 230px);
  min-height: calc(var(--screen) - var(--peek)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
  padding-block: clamp(24px, 5svh, 72px) clamp(20px, 4svh, 56px); text-align: center;
}
.ab-hero-copy { display: grid; justify-items: center; }
.ab-title { margin-top: clamp(14px, 2.4svh, 26px); font-family: var(--serif); font-size: clamp(3rem, min(1.4rem + 5.6vw, 12.5svh), 8rem); line-height: 0.92; letter-spacing: -0.03em; }
.ab-title span, .ab-title em { display: block; }
.ab-title em { color: var(--burgundy); }
.ab-lead { max-width: 42ch; margin-top: clamp(16px, 3svh, 34px); }
@keyframes ab-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.md-js .ab-rise { animation: ab-rise 1200ms var(--ease-out) both; }
.md-js .ab-title .ab-rise:first-child { animation-delay: 120ms; }
.md-js .ab-title em.ab-rise { animation-delay: 280ms; }
.md-js .ab-lead.ab-rise { animation-delay: 460ms; }

/* The film opens: clipped to the page's column on landing, the full width of the screen once it reaches the top. */
.ab-film-section {
  --open: 0;
  --side: max(var(--gutter), calc((100% - var(--rail)) / 2));
  min-height: var(--screen); display: grid; align-content: start; padding-bottom: clamp(12px, 2.4svh, 32px);
}
.ab-film { margin: 0; }
.ab-film-frame {
  position: relative; overflow: hidden; height: calc(var(--screen) - clamp(56px, 9svh, 100px));
  background: radial-gradient(110% 90% at 76% 34%, #82101b 0%, var(--burgundy) 48%, #330005 100%); color: var(--on-burgundy);
  clip-path: inset(0 calc(var(--side) * (1 - var(--open))));
}
.ab-film-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 0, 2, 0.35), transparent 22%, transparent 62%, rgba(20, 0, 2, 0.55));
}
@keyframes ab-film-in { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
.md-js .ab-film-frame { animation: ab-film-in 1500ms var(--ease-out) 520ms both; }
.ab-film-crest {
  position: absolute; right: 4%; top: 50%; height: 118%; aspect-ratio: 495 / 514.5; opacity: 0.1; z-index: 0;
  background: var(--on-burgundy); -webkit-mask: var(--emblem) center / contain no-repeat; mask: var(--emblem) center / contain no-repeat;
  translate: calc((1 - var(--open)) * 6%) calc(-50% + (1 - var(--open)) * 9%); scale: calc(0.94 + var(--open) * 0.08);
}
.ab-film-inner { position: relative; z-index: 1; height: 100%; }
.ab-film-status {
  position: absolute; top: clamp(18px, 3.4svh, 34px); left: calc(var(--gutter) + clamp(18px, 2.4vw, 40px));
  display: inline-flex; align-items: center; gap: 10px; font-size: 0.75rem; letter-spacing: 0.16em; color: var(--on-burgundy-2);
}
.ab-film-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d9b8b4; }
.ab-film-play {
  position: absolute; left: 50%; top: 47%; display: grid; place-items: center; width: clamp(72px, 12svh, 124px); aspect-ratio: 1; translate: -50% -50%;
  border: 1px solid rgba(246, 244, 237, 0.7); border-radius: 50%;
}
.ab-film-play::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(246, 244, 237, 0.5); border-radius: 50%; animation: ab-pulse 3.2s var(--ease-out) infinite; }
@keyframes ab-pulse { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
.ab-film-play svg { width: 30%; fill: var(--on-burgundy); translate: 8% 0; }
.ab-film-title { position: absolute; left: calc(var(--gutter) + clamp(18px, 2.4vw, 40px)); right: var(--gutter); bottom: clamp(20px, 4svh, 44px); }
.ab-film-title .md-mono { font-size: 0.75rem; letter-spacing: 0.16em; color: var(--on-burgundy-2); }
.ab-film-title h2 { margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, min(1.2rem + 3.4vw, 9svh), 5.5rem); line-height: 0.95; letter-spacing: -0.02em; }
.ab-film-title h2 em { display: block; color: #d9b8b4; }
.ab-film figcaption { margin-top: 12px; color: var(--ink-3); font-size: 0.8125rem; }

/* Why we do this: a manifesto, one thought per line. The lines light one after another as the section rises
   (md-about.js sets --lit) and are all lit once it reaches the top. The note on new archives sits beside them. */
.ab-manifesto { min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(24px, 6svh, 88px); }
.ab-manifesto-inner {
  display: grid; grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "kicker lines" "foot lines"; column-gap: clamp(32px, 6vw, 120px);
}
.ab-manifesto-inner > .md-kicker { grid-area: kicker; padding-top: 0.9em; }
.ab-lines { grid-area: lines; }
.ab-line {
  --lit: 1;
  max-width: 24ch; font-family: var(--serif); font-size: clamp(1.9rem, min(0.9rem + 2.5vw, 5.6svh), 3.6rem); line-height: 1.1; letter-spacing: -0.02em;
  opacity: calc(0.14 + 0.86 * var(--lit)); translate: 0 calc((1 - var(--lit)) * 14px); transition: opacity 180ms linear, translate 180ms linear;
}
.ab-line + .ab-line { margin-top: clamp(8px, 1.7svh, 20px); }
.ab-line.is-close { font-style: italic; color: var(--burgundy); }
.ab-manifesto-foot { grid-area: foot; align-self: end; display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rule-strong); }
.ab-manifesto-foot p:not(.md-mono) { max-width: 26ch; color: var(--ink-2); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.45; }
.ab-manifesto-foot .md-mono { font-size: 0.75rem; line-height: 1.6; letter-spacing: 0.16em; color: var(--ink-3); }
@media (max-width: 960px) {
  .ab-manifesto-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "kicker" "lines" "foot"; }
  .ab-manifesto-inner > .md-kicker { padding-top: 0; }
  .ab-lines { margin-top: clamp(16px, 3svh, 32px); }
  .ab-manifesto-foot { margin-top: clamp(22px, 4svh, 44px); }
  .ab-manifesto-foot p:not(.md-mono) { max-width: 44ch; }
}

/* 01 · How we do it: three steps beside real pieces that drift into one record (md-about.js sets --p),
   with why it matters beneath the picture. */
.ab-how { min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(20px, 5svh, 72px); overflow-x: clip; background: var(--paper); border-block: 1px solid var(--rule); }
.ab-how-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5.4vw, 104px); align-items: center; }
.ab-how-lead { max-width: 44ch; margin-top: 14px; color: var(--ink-2); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }
.ab-how-steps { margin-top: clamp(18px, 3.4svh, 36px); border-top: 1px solid var(--ink); }
.ab-how-steps li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 14px; align-items: baseline; padding: clamp(10px, 1.9svh, 18px) 0; border-bottom: 1px solid var(--rule); }
.ab-how-n { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.2rem); line-height: 1; color: var(--burgundy); }
.ab-how-steps h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, min(1.05rem + 1vw, 4svh), 2rem); line-height: 1.05; }
.ab-how-steps p { margin-top: 4px; max-width: 46ch; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.ab-how-why { margin-top: clamp(16px, 3svh, 28px); max-width: 34ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.3; color: var(--burgundy); }
.ab-how-side .md-arrow-link { margin-top: clamp(12px, 2svh, 20px); }

.ab-how-stage { --p: 1; margin: 0; }
.ab-how-desk { position: relative; height: clamp(260px, 50svh, 560px); }
.ab-how-file {
  position: absolute; inset: 6% 4% 4%; padding: clamp(14px, 2.4svh, 24px) clamp(14px, 1.8vw, 24px);
  background: var(--sand-deep); border: 1px solid var(--rule);
  box-shadow: 0 40px 80px -50px rgba(50, 25, 10, calc(0.55 * var(--p)));
  opacity: calc(0.25 + 0.75 * var(--p));
}
.ab-how-file::before { content: ""; position: absolute; inset: 8px; border: 1px solid #d9d2c1; pointer-events: none; }
.ab-how-file-head { display: flex; justify-content: space-between; gap: 12px; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-2); }
.ab-how-file-head span + span { color: var(--burgundy); opacity: var(--p); }
.ab-how-strip { position: absolute; left: clamp(14px, 1.8vw, 24px); right: clamp(14px, 1.8vw, 24px); bottom: clamp(14px, 2.4svh, 24px); opacity: calc((var(--p) - 0.55) * 2.2); }
.ab-how-strip .md-years-field { height: clamp(22px, 3.4svh, 34px); }
.ab-piece {
  position: absolute; z-index: 1; height: auto; background: #fbf8f1; padding: 5px 5px 14px;
  box-shadow: 0 1px 2px rgba(40, 25, 10, 0.18), 0 26px 40px -24px rgba(40, 25, 10, 0.6);
  translate: calc(var(--dx) * (1 - var(--p))) calc(var(--dy) * (1 - var(--p)));
  rotate: calc(var(--r0) * (1 - var(--p)) + var(--r1) * var(--p));
}
.ab-piece.is-a { --dx: -26%; --dy: -34%; --r0: -11deg; --r1: -2.5deg; left: 9%; top: 13%; width: 44%; }
.ab-piece.is-b { --dx: 30%; --dy: -40%; --r0: 9deg; --r1: 2deg; right: 7%; top: 19%; width: 47%; }
.ab-piece.is-c { --dx: -18%; --dy: 52%; --r0: 7deg; --r1: -1deg; left: 20%; bottom: 31%; width: 40%; }
.ab-piece-card { display: grid; gap: 4px; padding: clamp(10px, 1.6svh, 16px) clamp(12px, 1.2vw, 16px); background: var(--paper); border: 1px solid var(--rule); }
.ab-piece-card .md-mono { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-3); }
.ab-piece-date { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); color: var(--burgundy); }
.ab-piece-text { font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); line-height: 1.4; }
.ab-piece-card .md-label { font-size: 0.75rem; margin-top: 4px; }
.ab-how-stage figcaption { margin-top: 10px; color: var(--ink-3); font-size: 0.8125rem; }

/* 02 · Check the claims */
.ab-evidence { background: var(--sand-deep); border-block: 1px solid var(--rule); }
.ab-explorer { display: grid; gap: clamp(16px, 3vw, 48px); margin-top: clamp(18px, 3.4svh, 40px); }
.ab-explorer[data-ready] { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: start; }
.ab-tabs { display: grid; border-top: 1px solid var(--ink); }
.ab-tabs button {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; padding: clamp(12px, 2.2svh, 20px) 14px;
  border: 0; border-bottom: 1px solid var(--rule-strong); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.ab-tabs button:hover { background: rgba(253, 252, 248, 0.6); }
.ab-tabs button[aria-selected="true"] { background: var(--paper); box-shadow: inset 3px 0 0 var(--burgundy); }
.ab-tabs strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem); line-height: 1.1; }
.ab-tabs small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 0.875rem; }
.ab-dot { width: 12px; height: 12px; }
.ab-dot.is-stated { background: var(--burgundy); }
.ab-dot.is-documented { background: var(--ink); }
.ab-dot.is-verified { background: var(--ink); box-shadow: inset 0 0 0 2px var(--sand-deep), 0 0 0 1px var(--ink); }
.ab-desk { display: grid; gap: 16px; }
.ab-panel { padding: clamp(20px, 3.2svh, 36px) clamp(20px, 2.6vw, 40px); background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 30px 60px -44px rgba(50, 25, 10, 0.5); }
.ab-panel:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.ab-panel-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.ab-panel h3 { margin-top: clamp(12px, 2svh, 20px); font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, min(1.2rem + 1.4vw, 5svh), 2.6rem); line-height: 1.04; letter-spacing: -0.015em; }
.ab-panel h3 em { display: block; color: var(--burgundy); }
.ab-panel blockquote { margin: clamp(12px, 2svh, 20px) 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.3; }
.ab-panel > p:not(.md-mono) { margin-top: 12px; color: var(--ink-2); }
.ab-record { margin: clamp(12px, 2svh, 20px) 0 0; border-top: 1px solid var(--ink); }
.ab-record div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.ab-record dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ab-record dd { margin: 0; }
.ab-limit { margin-top: clamp(14px, 2.4svh, 22px); padding: 12px 16px; background: var(--sand); border-left: 2px solid var(--ink); }
.ab-limit .md-mono { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.ab-limit p { margin-top: 4px; }
.ab-evidence-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px 32px; flex-wrap: wrap; margin-top: clamp(18px, 3.4svh, 40px); }
.ab-evidence-foot p { max-width: 56ch; color: var(--ink-3); }

/* The next step, on ink */
.ab-next { background: var(--ink); color: var(--sand); }
.ab-next ::selection { background: var(--sand); color: var(--ink); }
.ab-next :focus-visible { outline-color: var(--sand); }
.ab-next-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(32px, 6vw, 112px); align-items: end; }
.ab-next-k { font-size: 0.75rem; letter-spacing: 0.14em; color: #a8a499; }
.ab-next .ab-h2 em { color: #bdb8ab; }
.ab-mdc > p:not(.md-mono) { max-width: 52ch; margin-top: 16px; color: var(--on-ink-2); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }
.ab-measures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(20px, 4svh, 44px); border-top: 1px solid rgba(246, 244, 237, 0.4); }
.ab-measures div { padding-top: clamp(14px, 2.4svh, 24px); }
.ab-range { display: block; font-family: var(--serif); font-size: clamp(3rem, min(2rem + 3vw, 11svh), 6rem); line-height: 0.9; letter-spacing: -0.02em; }
.ab-range span { margin: 0 0.08em; color: #8e8b82; }
.ab-measures p { margin-top: 10px; font-weight: 600; }
.ab-measures small { display: block; margin-top: 2px; font-weight: 400; color: #a8a499; font-size: 0.875rem; }
.ab-next .ab-mdc .ab-mdc-note { margin-top: clamp(16px, 3svh, 28px); color: #a8a499; font-size: 0.875rem; }
.ab-detail { margin-top: 12px; border-top: 1px solid rgba(246, 244, 237, 0.2); }
.ab-detail summary { padding: 12px 0; cursor: pointer; font-weight: 600; list-style-position: inside; }
.ab-detail summary:hover { color: #fff; }
.ab-detail div { display: grid; gap: 10px; max-width: 64ch; padding-bottom: 8px; color: var(--on-ink-2); font-size: 0.9375rem; }
.ab-casework { padding-left: clamp(20px, 3vw, 48px); border-left: 1px solid rgba(246, 244, 237, 0.24); }
.ab-casework h3 { margin-top: 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); line-height: 1.08; }
.ab-casework p:not(.md-mono) { margin-top: 12px; color: var(--on-ink-2); font-size: 0.9375rem; }
.ab-casework .md-arrow-link { margin-top: 18px; }
.ab-next .md-arrow-link:hover { color: #fff; }

/* Your record · In practice */
.ab-practical-intro { align-self: start; }
.ab-practical-intro p:not(.md-kicker) { max-width: 40ch; margin-top: 16px; color: var(--ink-2); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }
.ab-practical-intro .md-button { margin-top: clamp(18px, 3.4svh, 32px); }
.ab-practical .md-faq-list details > p + p { margin-top: -12px; }
.ab-practical .md-faq-list .md-arrow-link { font-size: 0.9375rem; }
.ab-hash { display: grid; gap: 10px; padding: 0 48px 24px 0; color: var(--ink-2); }
.ab-hash label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.ab-hash textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--paper); color: var(--ink); font: 1rem/1.5 var(--sans); resize: vertical; }
.ab-hash textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(94, 1, 9, 0.14); }
.ab-hash #hash-instruction { font-size: 0.8125rem; color: var(--ink-3); }
.ab-hash-label { display: flex; justify-content: space-between; gap: 12px; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.ab-hash output { display: block; padding: 10px 12px; background: var(--sand-deep); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; overflow-wrap: anywhere; color: var(--ink); }
.ab-hash .md-link-button { justify-self: start; font-size: 0.875rem; }
.ab-hash-small { font-size: 0.8125rem; color: var(--ink-3); }

@media (min-width: 961px) and (max-height: 820px) {
  .ab-panel blockquote { font-size: 1.2rem; }
}
@media (max-width: 960px) {
  .ab-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* Tablets keep the steps beside the pieces; the card shows its date and label only. */
  .ab-how-grid { gap: 28px; }
  .ab-how .ab-h2 { font-size: clamp(1.9rem, 4.2vw, 2.4rem); }
  .ab-how-desk { height: clamp(260px, 38svh, 420px); }
  .ab-how-steps li { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 10px; }
  .ab-how-n { font-size: 1.5rem; }
  .ab-how-steps p { font-size: 0.875rem; }
  .ab-piece-text { display: none; }
  .ab-next-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ab-casework { padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(246, 244, 237, 0.24); }
}
/* method.js lays the tabs in a row from 850px down. */
@media (max-width: 850px) {
  .ab-explorer[data-ready] { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ab-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; gap: 6px; }
  .ab-tabs button { grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; padding: 10px; border: 1px solid var(--rule-strong); }
  .ab-tabs button[aria-selected="true"] { box-shadow: inset 0 3px 0 var(--burgundy); }
  .ab-tabs strong { font-size: 1.15rem; }
  .ab-tabs small { font-size: 0.75rem; }
}
@media (max-width: 640px) {
  .ab-title { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .ab-film-title h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .ab-film-crest { right: -30%; }
  .ab-h2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .ab-head-text { font-size: 0.9375rem; }
  .ab-panel { padding: 16px; }
  .ab-panel h3 { font-size: 1.5rem; }
  .ab-panel blockquote { font-size: 1.1rem; }
  .ab-record div { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: 10px; padding: 7px 0; font-size: 0.9375rem; }
  .ab-range { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .ab-mdc > p:not(.md-mono) { font-size: 0.9375rem; }
  .ab-hash { padding-right: 0; }
}
/* Phones: the same content, tighter. */
@media (max-width: 640px) {
  .ab-manifesto { padding-block: clamp(20px, 4svh, 40px); }
  .ab-line { font-size: clamp(1.55rem, min(8vw, 3.9svh), 2.3rem); }
  .ab-manifesto-foot p:not(.md-mono) { font-size: 0.9375rem; }
  .ab-how { padding-block: clamp(16px, 3svh, 32px); }
  /* Stacked: the heading and lead, then the pieces, then the three steps with run-in headings and why it matters. */
  .ab-how .ab-h2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .ab-how-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ab-how-copy, .ab-how-side { display: contents; }
  .ab-how-copy > .md-kicker, .ab-how-copy > .ab-h2, .ab-how-lead, .ab-how-stage { order: -1; }
  .ab-how-why, .ab-how-side .md-arrow-link { order: 1; }
  .ab-how-stage { margin-top: 14px; }
  .ab-how-stage figcaption { margin-top: 6px; font-size: 0.75rem; }
  /* On a phone the two photographs lie across the top of the file, clear of the strip; the index card would cover them. */
  .ab-how-desk { height: clamp(160px, 21svh, 230px); }
  .ab-how-strip .md-years-over { display: none; }
  .ab-piece.is-a { top: -4%; left: 9%; width: 37%; }
  .ab-piece.is-b { top: 0; right: 8%; width: 39%; }
  .ab-piece.is-c { display: none; }
  .ab-how-file-head { font-size: 0.75rem; }
  .ab-how-lead { margin-top: 10px; font-size: 0.9375rem; }
  .ab-how-steps { margin-top: 12px; }
  .ab-how-steps li { grid-template-columns: 2rem minmax(0, 1fr); gap: 8px; padding: 8px 0; }
  .ab-how-n { font-size: 1.3rem; }
  .ab-how-steps h3 { display: inline; margin-right: 0.3em; font-size: 1.2rem; }
  .ab-how-steps p { display: inline; margin: 0; font-size: 0.875rem; }
  .ab-how-why { margin-top: 12px; font-size: 1.1rem; }
  .ab-how-side .md-arrow-link { margin-top: 10px; }
  .ab-evidence, .ab-next { padding-block: clamp(16px, 3svh, 32px); }
  .ab-head { padding-bottom: 12px; }
  .ab-head-text { font-size: 0.875rem; }
  .ab-explorer { margin-top: 12px; }
  .ab-tabs button { padding: 8px; }
  .ab-tabs strong { font-size: 1rem; }
  .ab-tabs small { font-size: 0.75rem; line-height: 1.3; }
  .ab-panel { padding: 14px; }
  .ab-panel h3 { margin-top: 8px; font-size: 1.35rem; }
  .ab-panel blockquote { margin-top: 8px; font-size: 1.05rem; }
  .ab-panel > p:not(.md-mono) { margin-top: 8px; font-size: 0.875rem; }
  .ab-record { margin-top: 8px; }
  .ab-limit { margin-top: 10px; padding: 8px 12px; }
  .ab-evidence-foot { margin-top: 12px; gap: 6px; }
  .ab-evidence-foot p { font-size: 0.8125rem; }
  .ab-next-grid { gap: 16px; }
  .ab-measures { margin-top: 14px; gap: 16px; }
  .ab-measures p { font-size: 0.875rem; }
  .ab-next .ab-mdc .ab-mdc-note { margin-top: 12px; font-size: 0.8125rem; }
  .ab-detail summary { padding: 8px 0; }
  .ab-casework { padding-top: 14px; }
  .ab-casework h3 { margin-top: 6px; font-size: 1.3rem; }
  .ab-casework p:not(.md-mono) { margin-top: 6px; font-size: 0.875rem; }
  .ab-casework .md-arrow-link { margin-top: 10px; }
  .ab-practical .md-faq-grid { gap: 18px; }
  .ab-practical-intro p:not(.md-kicker) { margin-top: 10px; font-size: 0.9375rem; }
  .ab-practical-intro .md-button { min-height: 46px; margin-top: 14px; }
  .ab-practical .md-faq-list summary { padding-block: 11px; font-size: 1rem; }
}
@media (max-width: 640px) and (max-height: 760px) {
  .ab-how-lead { display: none; }
  .ab-how-desk { height: 148px; }
  .ab-mdc > p:not(.md-mono) { font-size: 0.875rem; margin-top: 10px; }
  .ab-range { font-size: 2.4rem; }
  .ab-practical .md-faq-list summary { padding-block: 9px; font-size: 0.9375rem; }
  .ab-lead { font-size: 1.0625rem; }
  .ab-evidence-foot p, .ab-limit p { font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-film-section { --open: 1; }
  .ab-film-play::after { animation: none; opacity: 0; }
  .ab-line { --lit: 1 !important; }
  .ab-how-stage { --p: 1 !important; }
}