/* Methodology, version 2 (2026-11-04, evening), sized in the reference's own pixels (--u, see page.css): the chapters rail
   beside Measure and its five surface tiles, the question set with an example on tissue over the seven kinds, the three
   records numbered in red, the real sample report on a stack of sheets, Limits on the wine band, and the close in one line.
   Version 1: archive/subpages-v1-2026-11-04/. */

/* ---------- head: four sheets of tissue fanned to the right ---------- */
.mt-head__sheets { width: 52%; }
.mt-head__sheets .sheet { aspect-ratio: 3 / 2; }
.mt-head__cross { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }

/* ---------- chapters and Measure ---------- */
.mt-top { display: grid; grid-template-columns: 17% 1fr; gap: calc(30 * var(--u)); padding-block: calc(28 * var(--u)) calc(40 * var(--u)); }
.mt-rail { position: relative; padding-right: calc(16 * var(--u)); border-right: 1px solid var(--rule); align-self: stretch; }
.mt-rail__t { margin-bottom: calc(16 * var(--u)); border: 0; padding: 0; font-family: Consolas, "Courier New", ui-monospace, monospace; font-weight: 700; letter-spacing: .16em; color: #182124; }
.mt-rail ol { position: relative; display: grid; gap: calc(2 * var(--u)); }
.mt-rail ol::before { content: ""; position: absolute; left: 3.5px; top: calc(14 * var(--u)); bottom: calc(14 * var(--u)); width: 1.5px; background: #182124; }
.mt-rail a { position: relative; display: flex; align-items: center; min-height: calc(30 * var(--u)); padding: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(20 * var(--u)); font: 400 calc(12.5 * var(--u)) / 1.25 var(--read); color: #182124; }
.mt-rail a::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; border: 1.5px solid #182124; background: var(--ground); }
.mt-rail a[aria-current] { font-weight: 700; color: var(--hd); }
.mt-rail a[aria-current]::before { background: var(--hd); border-color: var(--hd); width: 10px; height: 10px; margin-top: -5px; left: -1px; }
.mt-rail a:hover { color: var(--hd); }

.mt-tiles { margin-top: calc(22 * var(--u)); }
.mt-tiles__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(10 * var(--u)); }
.mt-tile { position: relative; width: 100%; height: 100%; min-height: calc(102 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(8 * var(--u));
  border: 0; border-radius: 1px; cursor: pointer; text-align: center; color: #14191B;
  background: linear-gradient(rgb(253 249 242 / .5), rgb(253 249 242 / .5)), var(--sheet-a); background-size: auto, 600px; background-color: #F7F3EC;
  box-shadow: 0 1px 1px rgb(21 31 34 / .1), 4px 8px 16px -10px rgb(13 22 25 / .35); transition: transform .3s steps(3, end); }
.mt-tile svg { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.mt-tile b { font: 700 calc(17 * var(--u)) / 1.08 var(--display); letter-spacing: -.01em; color: #14191B; }
.mt-tile:hover { transform: translateY(-3px); }
.mt-tile[aria-pressed="true"]::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: calc(8 * var(--u)); height: 2px; background: var(--ink-red); }
.mt-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.mt-lines { margin-top: calc(12 * var(--u)); max-width: calc(700 * var(--u)); }
.mt-line { font: 400 calc(13 * var(--u)) / 1.4 var(--read); color: var(--ink-2); }

/* ---------- the question set ---------- */
.mt-q { padding-block: calc(34 * var(--u)) calc(40 * var(--u)); }
.mt-q__grid { display: grid; grid-template-columns: 28% 1fr; gap: calc(30 * var(--u)); align-items: center; }
.mt-q__checks { margin-top: calc(18 * var(--u)); }
.mt-ask { padding: calc(30 * var(--u)) calc(46 * var(--u)) calc(30 * var(--u)) calc(34 * var(--u)); --cut: polygon(0 4%, 100% 0, 96% 100%, 1% 97%); }
.mt-ask__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: calc(14 * var(--u)); }
.mt-ask__q { font: italic 400 calc(26 * var(--u)) / 1.12 var(--serif); letter-spacing: -.01em; color: #14191B; }
/* the quotation marks are the page's, not the words' (the approved line has none) */
.mt-ask__q::before { content: "\201C"; } .mt-ask__q::after { content: "\201D"; }
.mt-ask__a { margin-top: calc(16 * var(--u)); padding-top: calc(14 * var(--u)); border-top: 1px solid rgb(42 62 68 / .15); font: 400 calc(15.5 * var(--u)) / 1.45 var(--serif); color: #14191B; }
.mt-ask__cap { margin-top: calc(10 * var(--u)); max-width: 52%; font: italic 400 calc(10.5 * var(--u)) / 1.4 var(--serif); color: var(--muted); }
.mt-ask__note { right: calc(30 * var(--u)); top: auto; bottom: calc(16 * var(--u)); }
.mt-ask .label--tape, .mt-ask .stamp, .mt-recs .label--tape { font-size: calc(10 * var(--u)); }

/* the card behind the tissue: the three records that one answer makes */
.mt-recs { padding: calc(26 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)) calc(var(--fw) + var(--bw) - 100% + 26 * var(--u)); }
.mt-recs__list { margin-top: calc(16 * var(--u)); }
.mt-recs__list div { position: relative; padding: calc(10 * var(--u)) 0 calc(10 * var(--u)) calc(30 * var(--u)); border-top: 1px solid rgb(42 62 68 / .15); }
.mt-recs__list div::before { content: ""; position: absolute; left: 0; top: calc(12 * var(--u)); width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-radius: 50%; border: 1.5px solid var(--ink-red);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356808C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.6'/%3E%3C/svg%3E") center / 100% no-repeat; }
.mt-recs__list dt { font: 700 calc(18 * var(--u)) / 1.2 var(--display); color: var(--hd); }
.mt-recs__list dd { margin: 3px 0 0; font: 400 calc(13 * var(--u)) / 1.35 var(--read); color: var(--ink); }

/* the seven kinds of question, on a strip of paper under the example */
.mt-kinds { margin-top: calc(30 * var(--u)); padding: calc(20 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u)); transform: rotate(-.35deg); }
.mt-kinds__head { display: flex; align-items: center; gap: calc(16 * var(--u)) calc(22 * var(--u)); flex-wrap: wrap; }
.mt-kinds__head .stamp { font-size: calc(10 * var(--u)); }
.mt-kinds__note { flex: 1 1 calc(300 * var(--u)); font: italic 400 calc(11.5 * var(--u)) / 1.4 var(--serif); color: var(--muted); }
.mt-kinds__list { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: calc(16 * var(--u)); }
.mt-kinds__list div { padding: calc(4 * var(--u)) calc(12 * var(--u)); border-left: 1px solid rgb(42 62 68 / .15); }
.mt-kinds__list div:first-child { padding-left: 0; border-left: 0; }
.mt-kinds__list dt { font: 700 calc(10 * var(--u)) / 1.5 var(--read); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-red); }
.mt-kinds__list dd { margin: calc(4 * var(--u)) 0 0; font: italic 400 calc(13 * var(--u)) / 1.3 var(--serif); color: #14191B; }
.mt-kinds__list dd span { display: block; margin-top: calc(4 * var(--u)); font: 400 calc(10 * var(--u)) var(--read); font-style: normal; color: var(--muted); }

/* ---------- what we record (the reference's "How we count") ---------- */
.mt-rec { padding-block: calc(34 * var(--u)) calc(36 * var(--u)); }
.mt-rec__grid { display: grid; grid-template-columns: 36% 1fr; gap: calc(40 * var(--u)); align-items: center; }
.mt-rec__words { padding-right: calc(40 * var(--u)); border-right: 1px solid var(--rule); }
.mt-steps { display: grid; gap: calc(14 * var(--u)); }
.mt-steps li { display: grid; grid-template-columns: calc(40 * var(--u)) 1fr; align-items: center; column-gap: calc(12 * var(--u)); }
.mt-steps__n { display: grid; place-items: center; width: calc(27 * var(--u)); height: calc(27 * var(--u)); border-radius: 50%; border: 1.5px solid var(--ink-red); font: 600 calc(14 * var(--u)) / 1 var(--display); color: var(--ink-red); }
.mt-steps span:last-child { font: 400 calc(14 * var(--u)) / 1.35 var(--read); color: var(--ink); max-width: calc(560 * var(--u)); }

/* ---------- the audit, on paper (the reference's "What you receive") ---------- */
.mt-paper { padding-block: calc(34 * var(--u)) calc(44 * var(--u)); }
.mt-paper__grid { display: grid; grid-template-columns: 42% 1fr; gap: calc(40 * var(--u)); align-items: center; }
.mt-paper .kicker { margin-bottom: calc(8 * var(--u)); }
.mt-pages { display: grid; gap: calc(2 * var(--u)); margin-top: calc(16 * var(--u)); }
.mt-pages li { position: relative; z-index: 0; }
.mt-pages button { position: relative; display: grid; grid-template-columns: calc(30 * var(--u)) 1fr; column-gap: calc(10 * var(--u)); width: 100%; padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.mt-pages button::before { content: ""; position: absolute; inset: 0 calc(-10 * var(--u)) 0 calc(-12 * var(--u)); z-index: -1; background: #F9F4ED var(--sheet-a); background-size: 700px; box-shadow: 0 1px 2px rgb(21 31 34 / .1), 4px 8px 14px -8px rgb(13 22 25 / .3);
  clip-path: inset(0 100% 0 0); transition: clip-path .4s steps(5, end); }
.mt-pages button[aria-pressed="true"]::before { clip-path: inset(0 0 0 0); }
.mt-pages__n { grid-row: span 2; display: grid; place-items: center; width: calc(21 * var(--u)); height: calc(21 * var(--u)); margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--ink-red);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356808C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.6'/%3E%3C/svg%3E") center / 100% no-repeat; font-size: 0; }
.mt-pages b { font: 700 calc(15 * var(--u)) / 1.25 var(--display); color: var(--hd); }
.mt-pages span:last-child { margin-top: 2px; font: 400 calc(12 * var(--u)) / 1.36 var(--read); color: var(--ink); }
.mt-pages button:focus-visible { outline-offset: 4px; }
.mt-fan { position: relative; margin: 0; }
.mt-fan__stage { position: relative; width: min(100%, calc(560 * var(--u))); aspect-ratio: 1.3; margin-left: auto; }
/* the loose sheets the pages lie on */
.mt-fan__under { position: absolute; inset: 4% 2% 6% 4%; background: #F6F1EA var(--sheet-b); background-size: 700px; box-shadow: 0 1px 2px rgb(21 31 34 / .12), 8px 16px 26px -14px rgb(13 22 25 / .4); }
.mt-fan__under--a { transform: rotate(-4deg); }
.mt-fan__under--b { transform: rotate(-1.5deg) translate(2%, 3%); background-color: #F9F4EC; }
.mt-fan__pg { position: absolute; left: 10%; top: 6%; width: 40%; cursor: pointer; transition: transform .45s steps(5, end); transform-origin: 50% 90%; }
.mt-fan__pg img { width: 100%; background: #fff; box-shadow: 0 1px 2px rgb(13 22 25 / .25), 6px 12px 22px -10px rgb(13 22 25 / .45); }
.mt-fan__pg[data-pos="0"] { z-index: 3; transform: rotate(-3deg); }
.mt-fan__pg[data-pos="1"] { z-index: 2; transform: translate(62%, 4%) rotate(2deg); }
.mt-fan__pg[data-pos="2"] { z-index: 1; transform: translate(118%, 8%) rotate(6deg); }
.mt-fan__cap { width: min(100%, calc(560 * var(--u))); margin: calc(12 * var(--u)) 0 0 auto; }
.mt-fan__cap p { font: italic 400 calc(11.5 * var(--u)) / 1.45 var(--serif); color: var(--muted); }

/* ---------- limits, on the wine band ---------- */
.mt-limits { padding-block: calc(34 * var(--u)); }
.mt-limits__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 27% 1fr; gap: calc(36 * var(--u)); align-items: center; }
.mt-limits__title { font-size: calc(48 * var(--u)); line-height: 1; letter-spacing: -.02em; color: var(--ivory); padding-right: calc(30 * var(--u)); border-right: 1px solid rgb(248 245 239 / .3); align-self: stretch; display: flex; align-items: center; }
.mt-limits__body { max-width: calc(560 * var(--u)); }
.mt-limits__lead { font: 700 calc(22 * var(--u)) / 1.2 var(--display); color: var(--ivory); letter-spacing: -.01em; }
.mt-limits__text { margin-top: calc(6 * var(--u)); font: 400 calc(15.5 * var(--u)) / 1.4 var(--read); color: #F8F3ED; }
.mt-limits__more { display: grid; grid-template-columns: 1fr 1fr; gap: calc(26 * var(--u)); margin-top: calc(16 * var(--u)); padding-top: calc(12 * var(--u)); border-top: 1px solid rgb(248 245 239 / .2); }
.mt-limits__more b { display: block; font: 700 calc(14 * var(--u)) / 1.25 var(--display); color: var(--ivory); }
.mt-limits__more span { display: block; margin-top: 3px; font: 400 calc(12.5 * var(--u)) / 1.4 var(--read); color: #F8F3ED; }
.mt-limits__sheet { position: absolute; z-index: 1; right: -4vw; top: 50%; width: 18vw; aspect-ratio: 4 / 3; transform: translateY(-50%) rotate(-18deg);
  background: url(../media/paper/tissue-fibres.webp) 0 0 / 720px, linear-gradient(rgb(241 234 229 / .5), rgb(241 234 229 / .5)); box-shadow: -12px 16px 30px -12px rgb(0 0 0 / .45); }
.mt-limits__sheet .reg { color: var(--ink-red); }

/* ---------- the close in one line: the heading, a slanted rule, the offer, the button ---------- */
.mt-close { padding-block: calc(36 * var(--u)) calc(40 * var(--u)); }
.mt-close__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; align-items: center; justify-content: space-between; gap: calc(30 * var(--u)); }
.mt-close__title { font-size: calc(40 * var(--u)); line-height: 1; letter-spacing: -.02em; color: var(--hd); }
.mt-close__text { position: relative; max-width: calc(380 * var(--u)); padding-left: calc(30 * var(--u)); font: 400 calc(14.5 * var(--u)) / 1.4 var(--read); color: var(--ink); }
.mt-close__text::before { content: ""; position: absolute; left: 0; top: -8%; bottom: -8%; width: 1.5px; background: var(--ink-red); transform: rotate(14deg); opacity: .7; }
.mt-close__text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- tablets ---------- */
@media (max-width: 1100px) {
  .mt-top { grid-template-columns: 1fr; }
  .mt-rail { display: none; }
  .mt-tiles__row { grid-template-columns: repeat(3, 1fr); }
  .mt-q__grid, .mt-rec__grid, .mt-paper__grid { grid-template-columns: 1fr; }
  .mt-reveal { --fw: 74% !important; --bw: 74% !important; }
  .mt-rec__words { border-right: 0; padding-right: 0; }
  .mt-close__row { grid-template-columns: 1fr; justify-items: start; }
  .mt-close__text { padding-left: 0; }
  .mt-close__text::before { display: none; }
  .mt-fan__stage, .mt-fan__cap { margin-left: 0; }
}
/* ---------- phones ---------- */
@media (max-width: 760px) {
  .mt-head__sheets { width: 90%; }
  .mt-tiles__row { grid-template-columns: 1fr 1fr; }
  .mt-tiles__row li:last-child { grid-column: span 2; }
  .mt-tile { min-height: 104px; }
  .mt-tile svg { width: 36px; height: 36px; }
  .mt-tile b { font-size: 1.1rem; }
  .mt-reveal { --fw: 92% !important; --bw: 92% !important; }
  .mt-ask { padding: 24px 22px 22px; }
  .mt-ask__q { font-size: 1.5rem; }
  .mt-ask__note { display: none; }
  .mt-ask__cap { max-width: none; }
  .mt-kinds__list { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .mt-kinds__list div { padding-left: 0; border-left: 0; }
  .mt-recs { padding-left: 22px; }
  .mt-steps li { grid-template-columns: 40px 1fr; }
  .mt-steps span:last-child { grid-column: 2; }
  .mt-limits__grid { grid-template-columns: 1fr; }
  .mt-limits__title { border-right: 0; padding-right: 0; font-size: 2.4rem; }
  .mt-limits__more { grid-template-columns: 1fr; }
  .mt-limits__sheet { width: 44vw; right: -22vw; top: 12%; opacity: .5; }
  .mt-close__title { font-size: 2.2rem; }
}

/* ---------- version 3 (2026-11-04, Jonah: "missing personality"): the reference's handwriting ---------- */
.mt-ask__q-note { right: calc(18 * var(--u)); top: calc(62 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.02; }
.mt-ask__q-note .note__arrow { position: absolute; right: 100%; top: 30%; width: calc(34 * var(--u)); height: calc(20 * var(--u)); }
.mt-ask__q { padding-right: calc(120 * var(--u)); }
.mt-slide-note { left: 74%; bottom: calc(-52 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.02; }
.mt-slide-note .note__arrow { position: absolute; right: 100%; bottom: 40%; width: calc(40 * var(--u)); height: calc(32 * var(--u)); }
.mt-reveal { margin-bottom: calc(40 * var(--u)); }
.mt-fan__note { right: calc(-4 * var(--u)); top: calc(-34 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.02; z-index: 6; }
.mt-fan__note .note__arrow { position: absolute; left: -36%; top: 70%; width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
@media (max-width: 1100px) { .mt-ask__q-note, .mt-slide-note, .mt-fan__note { display: none; } .mt-ask__q { padding-right: 0; } }

/* ---------- version 4 (2026-11-06; Fable's comparison with the live site, Jonah: "Build all five"): the approved lines the
   concept had left out, placed without a wall. Scope under the lede; why these five above the tiles; the arithmetic folded
   on a narrower sheet under the seven kinds; Improve on the audit document; a Prove row; and Limits as the approved four,
   the 30% commitment's definition printed on the band's ivory sheet (it was a blank sheet). ---------- */
.mt-inline { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgb(86 128 140 / .7); }
.mt-inline:hover { text-decoration-color: currentColor; }
.mt-nw { white-space: nowrap; }
.mt-scope { margin-top: calc(18 * var(--u)); max-width: calc(600 * var(--u)); font: 400 calc(13.5 * var(--u)) / 1.45 var(--read); color: var(--ink-2); }
.mt-scope .label { margin-right: .7em; padding-bottom: calc(4 * var(--u)); font-size: calc(10 * var(--u)); }
.mt-measure__more { margin-top: calc(10 * var(--u)); max-width: calc(720 * var(--u)); font: 400 calc(13.5 * var(--u)) / 1.5 var(--read); color: var(--ink-2); }

/* Technical detail: a narrower sheet laid a little askew under the strip; closed, it is one line; it opens in four held frames */
.mt-td { position: relative; width: min(calc(100% - 60 * var(--u)), calc(760 * var(--u))); margin: calc(26 * var(--u)) 0 0 calc(60 * var(--u)); transform: rotate(-1deg);
  background: #F6F1EA var(--sheet-b); background-size: 700px; box-shadow: 0 1px 2px rgb(21 31 34 / .12), 8px 16px 26px -14px rgb(13 22 25 / .4); }
.mt-td__sum { display: flex; align-items: center; gap: calc(16 * var(--u)); min-height: 48px; padding: calc(14 * var(--u)) calc(22 * var(--u)); cursor: pointer; list-style: none; }
.mt-td__sum::-webkit-details-marker { display: none; }
.mt-td__sum .label--tape { flex: none; font-size: calc(10 * var(--u)); }
.mt-td__lead { flex: 1; font: 400 calc(14 * var(--u)) / 1.4 var(--read); color: var(--ink); }
.mt-td__lead strong, .mt-td__b strong { font-weight: 700; color: var(--hd); }
.mt-td__chev { flex: none; width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: none; stroke: var(--hd); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s steps(3, end); }
.mt-td[open] .mt-td__chev { transform: rotate(180deg); }
.mt-td__sum:focus-visible { outline: 2px solid var(--hd); outline-offset: 3px; }
.mt-td__b { display: grid; gap: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u)); border-top: 1px solid var(--rule); }
.mt-td__b > p { max-width: 60ch; padding-top: calc(10 * var(--u)); font: 400 calc(13.5 * var(--u)) / 1.55 var(--read); color: var(--ink); }
.mt-td[open] .mt-td__b { animation: mt-td-open .5s steps(4, end) both; }
@keyframes mt-td-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.mt-mx { margin: calc(6 * var(--u)) 0 0; max-width: calc(640 * var(--u)); }
.mt-mx__lead { font: 700 calc(13.5 * var(--u)) / 1.4 var(--display); color: var(--hd); }
.mt-mx__t { width: 100%; margin-top: calc(10 * var(--u)); border-collapse: collapse; font: 400 calc(12.5 * var(--u)) / 1.35 var(--read); color: var(--ink); }
.mt-mx__t th, .mt-mx__t td { padding: calc(8 * var(--u)) calc(12 * var(--u)); border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.mt-mx__t thead th { border-top: 0; font: 600 calc(10 * var(--u)) / 1.3 var(--read); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-red); }
.mt-mx__t tbody th { font-weight: 600; }
.mt-mx__t td { font-weight: 600; color: var(--hd); }
.mt-mx__t td.mt-mx__no { color: var(--muted); font-weight: 400; font-style: italic; }

/* Improve, on the audit document: a second lede and the delivery line under the caption */
.mt-paper__more { margin-top: calc(10 * var(--u)); max-width: calc(600 * var(--u)); font: 400 calc(13.5 * var(--u)) / 1.5 var(--read); color: var(--ink-2); }
.mt-fan__cap .mt-fan__deliv { margin-top: calc(6 * var(--u)); font: 400 calc(12 * var(--u)) / 1.45 var(--read); color: var(--ink); }
.mt-fan__deliv b { margin-right: .5em; font: 600 calc(10 * var(--u)) / 1.2 var(--read); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-red); }

/* Prove: the words left, a printed ivory slip right, its two readings as cut strips drawn to one scale (0 to 25%) */
.mt-prove { padding-block: calc(34 * var(--u)) calc(44 * var(--u)); border-top: 1px solid var(--rule); }
.mt-prove__grid { display: grid; grid-template-columns: 5fr 7fr; gap: calc(50 * var(--u)); align-items: center; }
.mt-prove .kicker { margin-bottom: calc(6 * var(--u)); }
.mt-prove__text { margin-top: calc(10 * var(--u)); max-width: calc(520 * var(--u)); font: 400 calc(13.5 * var(--u)) / 1.5 var(--read); color: var(--ink-2); }
.mt-slip { position: relative; margin: 0; padding: calc(26 * var(--u)) calc(30 * var(--u)) calc(18 * var(--u)); transform: rotate(-1.5deg); }
.mt-slip__label { font-size: calc(10 * var(--u)); }
.mt-slip__t { margin-top: calc(10 * var(--u)); font: 700 calc(17 * var(--u)) / 1.25 var(--display); color: var(--hd); max-width: 30ch; }
.mt-slip__body { display: grid; grid-template-columns: auto 1fr; gap: calc(26 * var(--u)); align-items: center; margin-top: calc(16 * var(--u)); }
.mt-slip__num { display: grid; }
.mt-slip__v { font: 600 calc(76 * var(--u)) / .9 var(--display); letter-spacing: -.03em; color: #1D4E5F; }
.mt-slip__u { margin-top: calc(4 * var(--u)); font: italic 400 calc(15 * var(--u)) / 1.2 var(--serif); color: var(--ink-2); }
.mt-slip__strips { display: grid; gap: calc(12 * var(--u)); }
.mt-slip__strips li { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.mt-slip__strips i { flex: none; height: calc(30 * var(--u)); width: calc(var(--v) / 25 * 70%); background: #D7CFBF var(--strip-tex); background-size: 900px; background-blend-mode: multiply;
  box-shadow: var(--edge), 2px 4px 6px -3px rgb(18 27 30 / .3); clip-path: polygon(0 4%, 100% 0, 98.5% 100%, 1% 96%); }
.mt-slip__strips li.is-lead i { background-color: #1D4E5F; }
.mt-slip__strips span { font: 600 calc(13 * var(--u)) / 1.2 var(--read); color: var(--ink); white-space: nowrap; }
.mt-slip__cap { margin-top: calc(16 * var(--u)); padding-top: calc(10 * var(--u)); border-top: 1px solid var(--rule); font: 400 calc(13 * var(--u)) / 1.5 var(--read); color: var(--ink-2); }
.mt-slip__cap strong { color: var(--ink); }
.mt-slip__links { display: flex; flex-wrap: wrap; gap: 0 calc(28 * var(--u)); margin-top: calc(4 * var(--u)); }

/* Limits: the title, the lead and three short ones in a row, and the commitment printed on the ivory sheet at the right */
.mt-limits { padding-block: calc(40 * var(--u)); overflow: hidden; }
.mt-limits__grid { grid-template-columns: 15% minmax(0, 1fr) 35%; gap: calc(36 * var(--u)); align-items: center; }
.mt-limits__body { max-width: none; }
/* the three short ones as ruled rows, the claim left and its line right (three narrow columns read as a newspaper) */
.mt-limits__more { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
.mt-limits__more li { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: calc(20 * var(--u)); padding: calc(12 * var(--u)) 0; border-top: 1px solid rgb(248 245 239 / .2); }
.mt-limits__more li:first-child { border-top: 0; }
.mt-limits__more li span { margin-top: 0; }
.mt-commit { position: relative; padding: calc(24 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u)); transform: rotate(-2.5deg); color: #182124;
  background: url(../media/paper/tissue-fibres.webp) 0 0 / 720px, linear-gradient(rgb(246 241 235 / .96), rgb(246 241 235 / .96));
  box-shadow: -12px 16px 30px -12px rgb(0 0 0 / .5); clip-path: polygon(0 1.5%, 100% 0, 99.2% 100%, .6% 98.8%); }
/* a sheet of legal text reads better nearly level: -1.5deg, not the -2.5deg first tried */
.mt-commit { transform: rotate(-1.5deg); }
.mt-commit .reg { color: var(--ink-red); }
.mt-commit__t { font: 700 calc(16 * var(--u)) / 1.25 var(--display); color: var(--hd); padding-right: calc(30 * var(--u)); }
.mt-commit p:not(.mt-commit__t) { margin-top: calc(8 * var(--u)); font: 400 calc(11.5 * var(--u)) / 1.5 var(--read); color: #182124; }
.mt-commit .mt-inline { color: #182124; }

@media (max-width: 1100px) {
  .mt-td { width: 100%; margin-left: 0; }
  .mt-prove__grid { grid-template-columns: 1fr; }
  .mt-limits__grid { grid-template-columns: 1fr; }
  .mt-limits__title { border-right: 0; padding-right: 0; }
  .mt-commit { max-width: 40rem; }
}
@media (max-width: 760px) {
  .mt-td { transform: rotate(-.5deg); }
  .mt-td__sum { flex-wrap: wrap; gap: 10px; }
  .mt-td__lead { flex-basis: calc(100% - 40px); }
  .mt-mx__t th, .mt-mx__t td { padding: 8px 6px; }
  .mt-slip { transform: rotate(-.8deg); padding: 22px 18px 14px; }
  .mt-slip__body { grid-template-columns: 1fr; gap: 14px; }
  .mt-slip__v { font-size: 4rem; }
  .mt-limits__more { grid-template-columns: 1fr; }
  .mt-limits__more li { grid-template-columns: 1fr; gap: 4px; }
  .mt-commit { transform: rotate(-1deg); }
  .mt-commit p:not(.mt-commit__t) { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .mt-td[open] .mt-td__b { animation: none; } }