/* Homepage. The working Chassis Check sits beside the record it leads to. */

/* Hero */
.md-hero { padding: clamp(20px, 3vh, 64px) 0; }
@media (min-width: 961px) {
  /* The hero is one screen, its content centred so it never presses against the menu. */
  .md-hero { min-height: calc(100svh - var(--header-h)); display: grid; align-content: center; }
  .md-tl { min-height: calc(100svh - var(--header-h)); display: grid; align-content: center; }
}
.md-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 112px);
  align-items: center;
}
.md-hero-copy { padding-top: 0; }
.md-hero-copy .md-display { max-width: 12ch; font-size: clamp(3rem, min(1.2rem + 5vw, 10.5vh), 6rem); }
.md-hero-copy .md-lead { margin-top: clamp(20px, 2.4vw, 32px); }
.md-hero-form { margin-top: clamp(28px, min(4vw, 5vh), 52px); max-width: 560px; }


/* Step two, opened in place */
.md-flow-step { animation: md-step-in 520ms var(--ease-out) both; }
@keyframes md-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.md-contact { display: grid; gap: 22px; }
.md-contact-car {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px; background: var(--paper); border: 1px solid var(--rule);
}
.md-contact-car .md-mono { font-size: 0.75rem; color: var(--ink-3); }
.md-contact-sn { font-family: var(--mono); font-weight: 400; font-size: 1.25rem; letter-spacing: 0.2em; }
.md-contact-car .md-link-button { margin-left: auto; font-size: 0.875rem; color: var(--ink-3); }
.md-contact-car .md-link-button:hover { color: var(--burgundy); }
.md-field { margin: 0; border: 0; min-width: 0; }
.md-field input[type="email"], .md-question textarea {
  width: 100%; min-height: 56px; padding: 0 16px;
  border: 1px solid var(--ink); border-radius: 2px; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.4 var(--sans);
}
.md-question textarea { min-height: 84px; margin-top: 12px; padding: 14px 16px; resize: vertical; }
.md-field input:focus, .md-question textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(94, 1, 9, 0.16); }
.md-field input[aria-invalid="true"] { border-color: var(--burgundy); }
/* Seven choices wrap as chips; each row stretches to the form's width. Sharing material comes last: it is the one
   choice about giving rather than asking, and on phones it takes the last row on its own. */
.md-choice { padding: 0; }
.md-choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.md-choice-row label {
  position: relative; display: block; flex: 1 1 auto; margin: 0; padding: 0;
  font: 500 0.9375rem/1.25 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink);
}
.md-choice-row input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.md-choice-row span {
  display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 14px; text-align: center;
  border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--paper);
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.md-choice-row label:hover span { border-color: var(--ink); }
.md-choice-row input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.md-choice-row input:focus-visible + span { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.md-choice.is-invalid span { border-color: var(--burgundy); }
@media (max-width: 640px) {
  .md-choice-row { display: grid; grid-template-columns: 1fr 1fr; }
  .md-choice-row label:last-child { grid-column: 1 / -1; }
}
.md-question summary .md-question-optional { color: var(--ink-3); font-weight: 400; margin-left: 6px; }
.md-contact-submit { width: 100%; min-height: 58px; }
.md-contact-submit[aria-busy="true"] { opacity: 0.75; cursor: progress; }
.md-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.md-receipt { padding: 28px clamp(20px, 3vw, 32px); background: var(--paper); border: 1px solid var(--ink); border-top: 4px solid var(--burgundy); }
.md-receipt-ref { font-size: 0.75rem; color: var(--ink-3); }
.md-receipt-ref span { color: var(--ink); }
.md-receipt-title { margin-top: 12px; font-family: var(--serif); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); line-height: 1.05; }
.md-receipt-title:focus { outline: none; }
.md-receipt p:not(.md-receipt-ref) { margin-top: 10px; color: var(--ink-2); }
.md-receipt .md-receipt-preview { font-size: 0.875rem; color: var(--ink-3); }
.md-receipt .md-arrow-link { margin-top: 20px; }

.md-shows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.md-shows li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.4; }
.md-shows li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 9px; height: 9px; background: var(--ink); }
.md-shows li:last-child::before { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
.md-flow-active .md-shows { display: none; }

.md-where { margin-top: 20px; border-top: 1px solid var(--rule); }
.md-contact .md-where { margin-top: 0; }
.md-where summary {
  display: flex; align-items: center; gap: 10px; padding: 14px 0 0;
  list-style: none; cursor: pointer; color: var(--ink-2); font-size: 0.9375rem; font-weight: 500;
}
.md-where summary::-webkit-details-marker { display: none; }
.md-where summary::before {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 220ms var(--ease-out);
}
.md-where[open] summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.md-where summary:hover { color: var(--burgundy); }
.md-where p { padding-top: 10px; max-width: 52ch; color: var(--ink-3); font-size: 0.9375rem; }

/* The specimen: a filled record sheet with the car parked on its top edge.
   When a visitor types a number, their own blank card comes forward. */
.md-specimen { position: relative; margin: 0; display: grid; width: 100%; max-width: max(440px, calc((100svh - var(--header-h) - 96px) * 0.86)); justify-self: end; }
.md-ex { grid-area: 1 / 1; display: grid; grid-template-rows: auto auto; visibility: hidden; transition: visibility 0s linear 900ms; }
.md-ex.is-active { visibility: visible; transition-delay: 0s; }
.md-ex > picture, .md-ex > .md-sheet { grid-area: 1 / 1; }
.md-ex > .md-sheet { align-self: stretch; display: flex; flex-direction: column; }
.md-ex > .md-sheet .md-years { margin-top: auto; padding-top: 8px; }
.md-sheet .md-years-over { margin-top: 6px; }
.md-sheet .md-years-field { height: clamp(32px, 3vw, 44px); }
.md-ex > .md-specimen-caption { grid-area: 2 / 1; }
/* Changing examples: the next car drives in from the right and the last one leaves to the left; the lines swap in turn.
   A swipe back reverses the direction (--dir). While a finger drags, the car follows it (--drag). */
.md-specimen { --dir: 1; --drag: 0px; touch-action: pan-y pinch-zoom; }
/* Cars waiting off to the side must never widen the page. */
.md-hero { overflow-x: clip; }
.md-ex .md-specimen-car { translate: 0 var(--lift, 0); transition: transform 1300ms cubic-bezier(0.16, 1, 0.3, 1) 380ms, opacity 800ms cubic-bezier(0.33, 1, 0.68, 1) 380ms; }
.md-ex.is-active .md-specimen-car { transform: translateX(var(--drag)); }
.md-ex:not(.is-active) .md-specimen-car { opacity: 0; transform: translateX(calc(var(--dir) * 96px)); }
/* The last car clears first; the next one starts as it is almost gone, so the two barely cross. */
.md-ex.is-leaving .md-specimen-car { opacity: 0; transform: translateX(calc(var(--dir) * -96px)); transition: transform 700ms cubic-bezier(0.5, 0, 0.75, 0), opacity 420ms cubic-bezier(0.5, 0, 0.75, 0); }
.md-specimen.is-dragging .md-ex.is-active .md-specimen-car { transition: none; }
/* The words do the same: the last card's lines leave in 180ms, the next card's arrive from 360ms. */
.md-ex .md-sheet > *:not(.md-sheet-head), .md-ex .md-entries li, .md-ex > .md-specimen-caption { transition: opacity 180ms ease-in, transform 180ms ease-in, background-color 380ms var(--ease-out); }
.md-ex:not(.is-active) .md-sheet > *:not(.md-sheet-head), .md-ex:not(.is-active) > .md-specimen-caption { opacity: 0; transform: translateY(6px); }
.md-ex.is-active .md-sheet > *:not(.md-sheet-head), .md-ex.is-active > .md-specimen-caption { transition: opacity 520ms var(--ease-out) 360ms, transform 640ms var(--ease-out) 360ms, background-color 380ms var(--ease-out); }
.md-ex.is-active .md-sheet-title { transition-delay: 380ms; }
.md-ex.is-active .md-sheet-meta { transition-delay: 420ms; }
.md-ex.is-active .md-entries { transition-delay: 470ms; }
.md-ex.is-active .md-years { transition-delay: 540ms; }
.md-ex:not(.is-active) .md-sheet { box-shadow: none; }
.md-ex.is-leaving .md-sheet { z-index: 0; }
.md-ex.is-active .md-sheet { z-index: 1; }
.md-sheet-title.is-long { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem); }
.md-specimen-foot { grid-area: 2 / 1; display: flex; align-items: center; gap: 16px; margin-top: 8px; }
/* Three long bars; the current one fills from left to right while its example shows. */
/* Three bars across the card's full width, in the brand burgundy. The current one fills while its example plays. */
.md-ex-dots { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* The buttons are 44px tall to tap; the negative margin keeps the caption's line where it was. */
.md-ex-dots button { display: flex; align-items: center; width: 100%; height: 44px; margin-block: -8px; padding: 0; border: 0; background: none; cursor: pointer; }
.md-ex-dots i { display: block; width: 100%; height: 3px; background: rgba(94, 1, 9, 0.16); overflow: hidden; position: relative; }
.md-ex-dots i::after { content: ""; position: absolute; inset: 0; background: var(--burgundy); transform: scaleX(0); transform-origin: left; }
.md-ex-dots button[aria-current="true"] i::after { transform: scaleX(var(--ex-progress, 1)); }
.md-ex-dots button:hover i { background: rgba(94, 1, 9, 0.32); }
.md-specimen picture { align-self: start; position: relative; z-index: 2; margin-top: -11%; pointer-events: none; }
.md-specimen-car {
  width: 84%; margin: 0 auto;
  filter: drop-shadow(0 12px 9px rgba(40, 18, 8, 0.24));
  pointer-events: none;
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
}
.md-sheet, .md-yours {
  position: relative;
  margin-top: 20%;
  padding: clamp(46px, 4vw, 58px) clamp(20px, 2.6vw, 36px) clamp(20px, 2.2vw, 28px);
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(40, 30, 10, 0.06), 0 40px 80px -48px rgba(50, 25, 10, 0.5);
}
.md-sheet { transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out), filter 420ms var(--ease-out); }
.md-sheet::before, .md-yours::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid #c9c2b1; pointer-events: none;
}
.md-specimen-caption { margin-top: 14px; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.5; }
.md-specimen-caption a { color: var(--ink); font-weight: 600; }
.md-caption-yours { display: none; color: var(--ink-3); font-size: 0.8125rem; }
.md-specimen-caption a:hover { color: var(--burgundy); }

.md-yours {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  margin: 15% 0 0 clamp(-28px, -2vw, -12px);
  visibility: hidden; opacity: 0; transform: translate(-14px, 26px) rotate(-1.2deg);
  transition: opacity 420ms var(--ease-out), transform 620ms var(--ease-out), visibility 0s linear 620ms;
  box-shadow: 0 1px 2px rgba(40, 30, 10, 0.08), 0 50px 90px -40px rgba(50, 25, 10, 0.55);
}
.md-yours .md-sheet-head .md-mono { color: var(--burgundy); }
.md-yours-sn {
  display: flex; flex-wrap: wrap; gap: 0 0.55em; min-height: 1.6em; margin-top: 14px;
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem); letter-spacing: 0; color: var(--ink);
}
.md-yours-sn span { display: inline-block; animation: md-key 180ms var(--ease-out) both; }
.md-yours-sn .is-caret { width: 0.6em; border-bottom: 2px solid var(--burgundy); animation: md-blink 1s steps(1) infinite; }
@keyframes md-key { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes md-blink { 50% { opacity: 0; } }
.md-yours-title { margin-top: 16px; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1; letter-spacing: -0.02em; }
.md-yours-rows { margin: 22px 0 0; border-top: 1px solid var(--ink); }
.md-yours-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; }
.md-yours-rows dt { color: var(--ink); }
.md-yours-rows dd { margin: 0; color: var(--ink-3); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.md-yours-strip { display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 2px; height: 48px; margin-top: 22px; }
.md-yours-strip li { box-shadow: inset 0 0 0 1px var(--rule-strong); }
.md-yours-foot { margin-top: 12px; color: var(--ink-3); font-size: 0.8125rem; }
.md-specimen.is-sent .md-yours-rows dd { color: var(--burgundy); }

.md-sheet-head { position: absolute; top: 20px; left: clamp(22px, 3vw, 44px); right: clamp(22px, 3vw, 44px); display: flex; justify-content: space-between; align-items: center; color: var(--ink-3); }
.md-sheet-head .md-logo { color: var(--ink); }
.md-sheet-head .md-mono { font-size: 0.75rem; }
.md-sheet-sn { display: flex; justify-content: space-between; margin-top: 8px; font-size: clamp(0.75rem, 0.6rem + 0.5vw, 1rem); letter-spacing: 0; color: var(--ink-2); }
.md-sheet-title { margin-top: 12px; font-family: var(--sans); font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.md-sheet-title span { color: var(--ink-3); }
.md-sheet-meta { margin-top: 6px; color: var(--ink-3); font-size: 0.8125rem; }

.md-entries { margin-top: 16px; border-top: 1px solid var(--ink); }
.md-entries li {
  display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline;
  position: relative; padding: 9px 0; border-bottom: 1px solid var(--rule);
  transition: background-color 380ms var(--ease-out);
}
.md-entries li.is-lit { background: linear-gradient(90deg, rgba(94, 1, 9, 0.07), transparent 85%); }
.md-entry-date { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-3); }
.md-entry-text { font-size: 0.875rem; line-height: 1.4; }
.md-entries li.is-gap .md-entry-text { color: var(--ink-3); font-style: italic; }
.md-entries .md-label { font-size: 0.75rem; letter-spacing: 0.08em; }

/* Authority: who this is, how much it covers and how every fact is marked */
.md-authority { padding: var(--section) 0 clamp(56px, 6vw, 96px); background: var(--ink); color: var(--sand); }
.md-authority ::selection { background: var(--sand); color: var(--ink); }
.md-authority :focus-visible { outline-color: var(--sand); }
.md-authority-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.md-authority-copy { padding-right: clamp(32px, 6vw, 104px); border-right: 1px solid rgba(246, 244, 237, 0.2); }
.md-authority-title { font-family: var(--serif); font-size: clamp(2.4rem, 1.1rem + 2.9vw, 4.5rem); line-height: 1.02; letter-spacing: -0.02em; }
.md-authority-title em { display: block; color: #bdb8ab; }
.md-authority-copy p { margin-top: clamp(24px, 2.6vw, 36px); max-width: 46ch; color: var(--on-ink-2); font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.55; }
.md-authority-copy .md-arrow-link { margin-top: 32px; }
.md-authority-copy .md-arrow-link:hover { color: #fff; }
.md-authority-figure { padding-left: clamp(32px, 6vw, 104px); align-self: center; }
.md-authority-figure .md-mono { font-size: 0.75rem; color: #a8a499; }
.md-authority-number { margin-top: 10px; font-family: var(--serif); font-size: clamp(4.25rem, 2rem + 7vw, 9rem); line-height: 0.88; letter-spacing: -0.035em; font-variant-numeric: lining-nums; }
.md-authority-unit { margin-top: 10px; font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 1.8vw, 3.25rem); line-height: 1; }
.md-authority-note { margin-top: 22px; max-width: 34ch; color: #a8a499; font-size: 0.9375rem; }
.md-marks { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr); gap: clamp(24px, 4vw, 72px); margin-top: clamp(56px, 6vw, 96px); padding-top: 28px; border-top: 1px solid rgba(246, 244, 237, 0.2); }
.md-marks-lead { font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem); line-height: 1.2; max-width: 22ch; }
/* The key: five columns divided by hairlines. Each shows a short run of years with its kind of record in the middle,
   the way it appears on a car's line, then its name and what it means. */
.md-ledger { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.md-key { padding: 4px clamp(12px, 1.4vw, 22px) 0; border-left: 1px solid rgba(246, 244, 237, 0.14); }
.md-key:first-child { padding-left: 0; border-left: 0; }
.md-key-row { position: relative; display: flex; gap: 3px; height: 20px; margin-bottom: 14px; }
.md-key-row i { width: 12px; height: 100%; border-radius: 2px; background: rgba(246, 244, 237, 0.1); }
.md-key-row .md-key-mark { transform-origin: bottom; transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1) calc(160ms + var(--k) * 120ms), opacity 400ms var(--ease-out) calc(160ms + var(--k) * 120ms); }
.md-key-documented .md-key-mark { background: var(--sand); }
.md-key-supported .md-key-mark { background: linear-gradient(var(--sand), var(--sand)) center / 40% 40% no-repeat; box-shadow: inset 0 0 0 1.5px var(--sand); }
.md-key-stated .md-key-mark { background: #b3313b; }
.md-key-disputed .md-key-mark { background: repeating-linear-gradient(135deg, #b3313b 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1.5px #b3313b; }
/* No record: the years stay empty and a bracket names the stretch, as on a car's line. */
.md-key-none .md-key-mark { background: rgba(246, 244, 237, 0.1); }
.md-key-none .md-key-row::before {
  content: ""; position: absolute; left: 15px; width: 42px; top: -7px; height: 4px; border: 1px solid #d08890; border-bottom: 0;
  transform-origin: left; transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1) calc(160ms + var(--k) * 120ms);
}
.md-js .md-ledger:not(.is-in) .md-key-mark { transform: scaleY(0); opacity: 0; }
.md-js .md-ledger:not(.is-in) .md-key-none .md-key-row::before { transform: scaleX(0); }
.md-ledger dt { margin: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); }
.md-ledger dd { margin: 8px 0 0; color: var(--on-ink-2); font-size: 0.9375rem; line-height: 1.45; }

/* What's in a Chassis File: one car's history, told by its own photographs.
   The car drives the timeline on its own; the chapter markers sit on the bar and can be chosen.
   Without script the scenes are a plain list. */
.md-tl { padding: clamp(32px, 4.6vh, 80px) 0; scroll-margin-top: var(--header-h); overflow-x: clip; }
.md-tl-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.md-tl-top .md-body-large { max-width: 100ch; color: var(--ink-2); }
.md-tl-scenes { margin-top: clamp(20px, 3vh, 44px); }
/* The eight parts of a file sit beside one car's scenes. A part fills when the car reaches a scene that holds it. */
.md-tl-body { display: grid; grid-template-columns: minmax(170px, 0.2fr) minmax(0, 1fr); gap: clamp(28px, 3.5vw, 64px); align-items: center; margin-top: clamp(20px, 3vh, 44px); }
.md-tl-body .md-tl-scenes { margin-top: 0; }
.md-tl-parts-title { font-size: 0.75rem; color: var(--ink-3); }
.md-tl-parts ol { margin-top: 10px; border-top: 1px solid var(--ink); }
.md-tl-part {
  display: grid; grid-template-columns: 9px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--rule); transition: grid-template-rows 200ms var(--ease-out);
}
.md-tl-part::before { content: ""; grid-row: 1; align-self: center; width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--rule-strong); transition: background-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.md-tl-part-name { font-size: 0.9375rem; line-height: 1.3; color: var(--ink-3); transition: color 180ms var(--ease-out); }
.md-tl-part-what { grid-column: 2; min-height: 0; overflow: hidden; }
.md-tl-part-what span { display: block; padding-top: 2px; font-size: 0.75rem; line-height: 1.35; color: var(--ink-3); }
.md-tl-part.has-record::before { background: var(--burgundy); box-shadow: none; }
.md-tl-part.has-record .md-tl-part-name { color: var(--ink); }
.md-tl-parts-key { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.75rem; color: var(--ink-3); }
.md-tl-parts-key i { width: 9px; height: 9px; background: var(--burgundy); }
.md-tl-parts-count { display: none; }
.md-tl-date-part { font-family: var(--mono); font-style: normal; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-3); }
.is-player .md-tl-part.has-record:not(.is-found)::before { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-strong); }
.is-player .md-tl-part.has-record:not(.is-found) .md-tl-part-name { color: var(--ink-3); }
.is-player .md-tl-part.is-current .md-tl-part-name { color: var(--burgundy); }
.is-player .md-tl-part.is-current::before { animation: md-part-in 250ms var(--ease-out); }
@keyframes md-part-in { 0% { transform: scale(0.4); } 70% { transform: scale(1.2); } 100% { transform: none; } }
@media (min-width: 961px) {
  /* On wide screens the player shows only the current part's description, so the list stays as tall as a scene. */
  .is-player .md-tl-part { grid-template-rows: auto 0fr; }
  .is-player .md-tl-part.is-current, .is-player .md-tl-part:hover { grid-template-rows: auto 1fr; }
}

.md-tl-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.md-tl-print {
  justify-self: center; display: flex; flex-direction: column; gap: 10px; width: fit-content; max-width: 100%; margin: 0;
  padding: 12px 12px 14px; background: #fbf8f0;
  box-shadow: 0 1px 2px rgba(40, 30, 10, 0.12), 0 24px 40px -22px rgba(40, 25, 10, 0.5);
  transform: rotate(var(--tilt, 0deg));
}
.md-tl-print img { display: block; width: auto; max-width: 100%; height: auto; max-height: clamp(220px, 30vh, 360px); }
.md-tl-print figcaption { max-width: 38ch; color: var(--ink-3); font-size: 0.75rem; line-height: 1.4; }
.md-tl-date { display: flex; align-items: baseline; gap: 14px; font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 1rem + 1vw, 2rem); color: var(--burgundy); }
.md-tl-line { margin-top: 14px; font-family: var(--serif); font-size: clamp(1.9rem, 1.1rem + 2.2vw, 3.25rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 17ch; }
.md-tl-detail { margin-top: 16px; color: var(--ink-2); font-size: 1.0625rem; max-width: 44ch; }
.md-tl-meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 18px; color: var(--ink-3); font-size: 0.875rem; }
.md-tl-meta .md-label { font-size: 0.75rem; color: var(--ink); }
.md-tl-meta a { color: var(--burgundy); font-weight: 600; }
.md-tl-road { margin-top: clamp(16px, 2.6vh, 32px); }
.md-tl-track { position: relative; }
.md-tl-field { position: relative; height: 24px; }
.md-tl-years, .md-tl-marks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(49, minmax(0, 1fr)); gap: 3px; }
.md-tl-marks { grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr)); row-gap: 2px; pointer-events: none; }
.md-tl-marks li { border-radius: 2px; }
.md-tl-years li { border-radius: 2px; background: rgba(11, 13, 10, 0.06); }
.md-tl-axis { display: flex; justify-content: space-between; height: 22px; padding-top: 8px; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-3); }
.md-tl-markers, .md-tl-now { display: none; }
.md-tl-caption { margin-top: 18px; color: var(--ink-3); font-size: 0.8125rem; }
.md-tl-caption a { color: var(--ink); font-weight: 600; }

/* The player */
.md-tl.is-player .md-tl-scenes { display: grid; }
.is-player .md-tl-scene { grid-area: 1 / 1; padding: 0; border: 0; visibility: hidden; transition: visibility 0s linear 300ms; }
.is-player .md-tl-scene.is-active { visibility: visible; transition-delay: 0s; }
.is-player .md-tl-print { opacity: 0; transform: translateX(32px) rotate(calc(var(--tilt) + 4deg)); transition: opacity 250ms var(--ease-out), transform 380ms var(--ease-out); }
/* The old scene's words leave quickly; the new scene's words arrive only after they have gone, so two stories never overlap. */
.is-player .md-tl-copy > * { opacity: 0; transform: translateY(8px); transition: opacity 70ms ease-in, transform 70ms ease-in; }
.is-player .md-tl-scene.is-active .md-tl-print { opacity: 1; transform: rotate(var(--tilt)); }
.is-player .md-tl-scene.is-active .md-tl-copy > * { opacity: 1; transform: none; transition: opacity 210ms var(--ease-out) 100ms, transform 300ms var(--ease-out) 100ms; }
.is-player .md-tl-scene.is-active .md-tl-copy > :nth-child(2) { transition-delay: 135ms; }
.is-player .md-tl-scene.is-active .md-tl-copy > :nth-child(3) { transition-delay: 170ms; }
.is-player .md-tl-scene.is-active .md-tl-copy > :nth-child(4) { transition-delay: 205ms; }
.is-player .md-tl-scene.is-leaving .md-tl-print { opacity: 0; transform: translateX(-40px) rotate(calc(var(--tilt) - 5deg)); }
/* How long the scene stays: a thin line under the text fills while it plays. */
.is-player .md-tl-copy::after {
  content: ""; display: block; width: min(240px, 60%); height: 2px; margin-top: 24px;
  background: linear-gradient(var(--burgundy), var(--burgundy)) left / calc(var(--dwell, 0) * 100%) 100% no-repeat, var(--rule);
  opacity: 0; transition: opacity 300ms var(--ease-out);
}
.is-player.is-running .md-tl-scene.is-active .md-tl-copy::after { opacity: 1; }

.is-player .md-tl-track { padding-top: 96px; }
.is-player .md-tl-years li { background: rgba(11, 13, 10, 0.05); transition: background-color 340ms var(--ease-out); }
.is-player .md-tl-years li.is-passed { background: rgba(11, 13, 10, 0.1); }
/* Every record is on the strip from the start, faint; each one darkens as the story reaches it. */
.is-player .md-tl-marks li { opacity: 0.22; transition: opacity 320ms var(--ease-out); }
.is-player .md-tl-marks li.is-passed { opacity: 1; }
/* Pointing at the strip: the records of that year come up in full and are read out where the gap is named. */
.md-tl-field { cursor: default; }
.md-tl-read {
  position: absolute; top: 0; z-index: 2; max-width: 70%; padding-bottom: 9px; opacity: 0; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 0.875rem; line-height: 1.2; color: var(--ink); transition: opacity 180ms var(--ease-out);
}
.md-tl.is-reading .md-tl-read { opacity: 1; }
.md-tl.is-reading .md-tl-gap { visibility: hidden; }
.is-player .md-tl-marks li.is-read { opacity: 1; box-shadow: 0 0 0 1.5px var(--burgundy); }
.is-player .md-tl-years li.is-passed.is-silent { background: rgba(94, 1, 9, 0.1); }
.is-player .md-tl-years li.is-flash { animation: md-tl-flash 490ms var(--ease-out); }
@keyframes md-tl-flash { 0% { background: rgba(94, 1, 9, 0.32); } 100% { background: rgba(94, 1, 9, 0.1); } }

/* The chapter pins: small squares under the bar, like the records on it. The one being told turns burgundy and names
   its year; the ones already told turn ink. */
.is-player .md-tl-field { margin-bottom: 34px; }
.is-player .md-tl-markers { display: block; position: absolute; left: 0; right: 0; bottom: 22px; height: 34px; z-index: 3; }
.md-tl-marker {
  position: absolute; left: calc(var(--at) * 100%); top: 2px; width: 24px; height: 22px; padding: 0; margin-left: -12px;
  border: 0; background: none; cursor: pointer;
}
.md-tl-marker::before {
  content: ""; position: absolute; left: 50%; top: 5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 2px;
  background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--rule-strong);
  transition: background-color 210ms var(--ease-out), box-shadow 210ms var(--ease-out), transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.md-tl-marker::after {
  content: attr(data-label); position: absolute; left: 50%; top: 20px; translate: -50% 4px; white-space: nowrap;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--burgundy);
  opacity: 0; transition: opacity 180ms var(--ease-out), translate 210ms var(--ease-out); pointer-events: none;
}
.md-tl-marker:hover::before { box-shadow: inset 0 0 0 1.5px var(--ink); }
.md-tl-marker.is-past::before { background: var(--ink); box-shadow: none; }
.md-tl-marker[aria-current="step"]::before { background: var(--burgundy); box-shadow: none; transform: scale(1.3); }
.md-tl-marker[aria-current="step"]::after { opacity: 1; translate: -50% 0; }
.md-tl-marker.is-end::after { translate: calc(-100% + 12px) 0; }
.md-tl-marker:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; border-radius: 2px; }

.is-player .md-tl-gap {
  display: block; position: absolute; top: 0; left: calc(100% * var(--gap-start, 5) / 49); width: calc(100% * var(--gap-span, 41) / 49); padding-bottom: 9px;
  text-align: center; font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--burgundy); white-space: nowrap;
  opacity: 0; transform: translateY(6px); transition: opacity 210ms var(--ease-out), transform 210ms var(--ease-out);
}
.is-player .md-tl-gap::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 6px; border: 1px solid var(--burgundy); border-bottom: 0; }
.is-player.show-gap .md-tl-gap { opacity: 1; transform: none; }

/* A quiet word when the story is paused by a tap. */
.is-player .md-tl-copy::before {
  content: "Paused"; position: absolute; right: 0; bottom: -2px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  opacity: 0; transition: opacity 300ms var(--ease-out);
}
.is-player.is-paused .md-tl-scene.is-active .md-tl-copy::before { opacity: 1; }
.is-player .md-tl-copy { position: relative; }
.is-player .md-tl-scenes { cursor: pointer; }
.is-player .md-tl-scenes a { cursor: pointer; }

/* Phone chapter buttons: hidden on wide screens, where the chapters sit under the strip. */
.md-tl-steps { display: none; }

/* The offer: one lead price, then what can follow it */
/* The offer: the pitch and how it works on the left, one file card on the right that carries the decision. */
.md-offer { padding: var(--section) 0; border-top: 1px solid var(--rule); }
.md-offer-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); grid-template-areas: "head card" "how card";
  grid-template-rows: auto 1fr; column-gap: clamp(40px, 7vw, 120px); align-items: start;
}
.md-offer-head { grid-area: head; }
.md-offer-lead { margin-top: 18px; max-width: 40ch; color: var(--ink-2); font-size: 1.1875rem; line-height: 1.5; }
.md-offer-how { grid-area: how; margin-top: clamp(32px, 4vw, 56px); }
.md-offer-how-title { font-size: 0.75rem; color: var(--ink-3); }
.md-offer-how ol { margin-top: 12px; border-top: 1px solid var(--ink); }
.md-offer-how li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.md-offer-how-n { font-family: var(--serif); font-style: italic; font-size: 1.75rem; line-height: 1; color: var(--burgundy); }
.md-offer-how h3 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.md-offer-how p { margin-top: 4px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.md-offer-how .md-arrow-link { margin-top: 24px; }

.md-offer-card {
  --pad: clamp(24px, 3.4vw, 48px);
  grid-area: card; position: relative; padding: clamp(26px, 3vw, 44px) var(--pad) 0;
  background: var(--paper); border: 1px solid var(--rule); border-top: 5px solid var(--burgundy);
  box-shadow: 0 1px 2px rgba(40, 30, 10, 0.06), 0 40px 80px -48px rgba(50, 25, 10, 0.5);
}
.md-offer-kicker { font-size: 0.75rem; letter-spacing: 0.14em; color: var(--burgundy); }
.md-offer-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 18px; }
.md-offer-card-head h3 { margin-top: 0.15em; font-family: var(--serif); font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; }
.md-offer-price { display: grid; justify-items: end; gap: 10px; text-align: right; }
.md-offer-amount { font-family: var(--serif); font-size: clamp(3.4rem, 2.4rem + 3vw, 5.25rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: lining-nums; }
.md-offer-terms { color: var(--ink-3); font-size: 0.9375rem; white-space: nowrap; }
.md-offer-list { display: grid; gap: 12px; margin-top: 26px; }
.md-offer-list li { position: relative; padding-left: 36px; font-size: 1.125rem; line-height: 1.35; }
.md-offer-list li::before {
  content: ""; position: absolute; left: 5px; top: 0.12em; width: 7px; height: 13px;
  border-right: 2px solid var(--burgundy); border-bottom: 2px solid var(--burgundy); transform: rotate(45deg);
}
.md-offer-depends { margin-top: 16px; color: var(--ink-3); font-size: 0.9375rem; }
.md-offer-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; margin-top: 24px; padding: 0 22px 0 26px;
  background: var(--burgundy); color: var(--on-burgundy); font: 500 1.1875rem/1.2 var(--sans); text-decoration: none;
  transition: background-color 180ms var(--ease-out);
}
.md-offer-cta:hover { background: var(--burgundy-hover); }
.md-offer-arrow { flex: none; transition: transform 220ms var(--ease-out); }
.md-offer-cta:hover .md-offer-arrow, .md-offer-plus:hover .md-offer-arrow { transform: translate(2px, -2px); }
.md-offer-assure { margin-top: 12px; color: var(--ink); font-size: 0.9375rem; }
.md-offer-plus {
  display: grid; gap: 8px; margin: 26px calc(-1 * var(--pad)) 0; padding: 24px var(--pad) 26px;
  border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none;
}
.md-offer-plus-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.md-offer-plus-head strong { font-family: var(--serif); font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.1rem); font-weight: 400; line-height: 1.1; color: var(--burgundy); }
.md-offer-plus-head > span { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.85rem); color: var(--burgundy); white-space: nowrap; }
.md-offer-plus-text { font-size: 1rem; line-height: 1.5; }
.md-offer-plus-note { color: var(--ink-3); font-size: 0.9375rem; line-height: 1.5; }
.md-offer-foot { margin: 0 calc(-1 * var(--pad)); padding: 22px var(--pad) 4px; background: var(--sand-deep); border-top: 1px solid var(--rule); }
.md-offer-foot > p { font-size: 1rem; line-height: 1.5; }
.md-offer-before { margin-top: 18px; border-top: 1px solid var(--rule-strong); }
.md-offer-before summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; list-style: none; cursor: pointer; font-weight: 600; }
.md-offer-before summary::-webkit-details-marker { display: none; }
.md-offer-before summary::after { content: "+"; color: var(--burgundy); font-size: 1.5rem; font-weight: 400; line-height: 1; transition: transform 220ms var(--ease-out); }
.md-offer-before[open] summary::after { transform: rotate(45deg); }
.md-offer-before p { max-width: 62ch; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.md-offer-before p + p { margin-top: 10px; }
.md-offer-before p:last-child { padding-bottom: 20px; }
@media (max-width: 960px) {
  .md-offer-grid { grid-template-columns: 1fr; grid-template-areas: "head" "card" "how"; grid-template-rows: auto; }
  .md-offer-card { margin-top: 32px; }
}
@media (max-width: 640px) {
  .md-offer-lead { font-size: 1.0625rem; }
  .md-offer-card { --pad: 20px; margin-top: 24px; padding-top: 22px; }
  .md-offer-card-head h3 { font-size: 1.75rem; }
  .md-offer-amount { font-size: 3rem; }
  .md-offer-terms { font-size: 0.8125rem; white-space: normal; max-width: 9rem; }
  .md-offer-list { gap: 10px; margin-top: 20px; }
  .md-offer-list li { padding-left: 30px; font-size: 1.0625rem; }
  .md-offer-cta { min-height: 58px; margin-top: 18px; padding: 0 18px 0 20px; font-size: 1.0625rem; }
}

/* Readers */
.md-readers { padding: var(--section) 0; }
.md-reader-list { margin-top: clamp(36px, 4vw, 64px); border-top: 1px solid var(--ink); }
.md-reader-list li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: clamp(18px, 2vw, 28px) 0; border-bottom: 1px solid var(--rule); }
.md-reader-who { font-size: 0.75rem; color: var(--ink-3); }
.md-reader-list p { font-family: var(--serif); font-size: clamp(1.4rem, 1.05rem + 1.2vw, 2.25rem); line-height: 1.18; letter-spacing: -0.01em; max-width: 34ch; }
.md-reader-list p a { font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; white-space: nowrap; margin-left: 0.4em; vertical-align: 0.25em; }
.md-reader-list p a:hover { color: var(--burgundy); }

/* Rewards on the homepage: the owner's side, with the found-year illustration */

/* Makers */
.md-makers { padding: var(--section) 0; background: var(--burgundy); color: var(--on-burgundy); }
.md-makers ::selection { background: var(--sand); color: var(--burgundy); }
.md-makers-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.md-emblem {
  display: block; width: min(100%, 340px); aspect-ratio: 495 / 514.5; justify-self: center;
  background: var(--on-burgundy);
  -webkit-mask: var(--emblem) center / contain no-repeat;
  mask: var(--emblem) center / contain no-repeat;
}
.md-makers .md-body-large { margin-top: 20px; color: var(--on-burgundy-2); }
.md-makers-list { margin: 28px 0 0; border-top: 1px solid rgba(246, 244, 237, 0.5); max-width: 560px; }
.md-makers-list div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(246, 244, 237, 0.2); }
.md-makers-list dt { font-family: var(--serif); font-size: 1.375rem; line-height: 1.2; }
.md-makers-list dd { margin: 0; color: var(--on-burgundy-2); align-self: center; }
.md-makers-figure { margin-top: 24px; color: var(--on-burgundy-2); font-size: 0.9375rem; max-width: 52ch; }
.md-makers .md-arrow-link { margin-top: 28px; }
.md-makers .md-arrow-link:hover { color: #fff; }
.md-makers :focus-visible { outline-color: var(--sand); }


/* The visitor's card comes forward only where both papers fit side by side with the form. */
@media (min-width: 961px) {
  .md-specimen.is-yours .md-yours { visibility: visible; opacity: 1; transform: rotate(-1.2deg); transition-delay: 0s; }
  .md-specimen.is-yours .md-sheet { opacity: 0.55; transform: translate(14px, -10px) scale(0.98); filter: saturate(0.6); }
  .md-specimen.is-yours .md-specimen-car { opacity: 0; transform: translateX(24px); }
  .md-specimen.is-yours .md-caption-example, .md-specimen.is-yours .md-ex-dots { visibility: hidden; }
  .md-specimen.is-yours .md-caption-yours { display: inline; }
}
@media (max-width: 960px) {
  .md-yours { display: none; }
}
@media (min-width: 961px) and (max-height: 760px) {
  .md-hero .md-shows { display: none; }
  .md-hero .md-sheet-meta { display: none; }
  .md-hero .md-entries li { padding: 5px 0; }
  .md-hero .md-sheet .md-years-field { height: 26px; }
}
/* Short laptop windows: keep the whole example sheet in the first screen. A wider sheet wraps its lines less and
   comes out shorter, so it fills its column rather than shrinking with the window's height. */
@media (min-width: 961px) and (max-height: 880px) {
  .md-hero-copy { padding-top: 0; }
  .md-hero { padding-block: 12px; }
  .md-specimen { max-width: 640px; }
  .md-specimen-foot { margin-top: 4px; }
  .md-tl { padding-block: 22px; }
  .md-tl-scenes { margin-top: 18px; }
  .md-tl-body { margin-top: 18px; }
  .md-tl-part { padding: 4px 0; }
  .md-tl-part-name { font-size: 0.875rem; }
  .md-tl-parts ol { margin-top: 8px; }
  .md-tl-parts-key { margin-top: 8px; }
  .md-tl-print img { max-height: 26vh; }
  .md-tl-line { font-size: clamp(1.7rem, 1rem + 2vw, 2.6rem); }
  .md-tl-top { gap: 6px; }
  .md-tl-top .md-body-large { font-size: 1rem; }
  .md-tl-body { margin-top: 12px; }
  .md-tl-top .md-h2 { font-size: clamp(2rem, 6.4svh, 3rem); }
  .md-tl-part { padding: 3px 0; }
  .md-tl-road { margin-top: 14px; }
  .is-player .md-tl-track { padding-top: 80px; }
  .is-player .md-tl-gap { top: -6px; }
  .md-tl-caption { margin-top: 6px; }
  .md-specimen-car { width: 64%; }
  .md-sheet { margin-top: 13%; padding-top: 50px; padding-bottom: 16px; }
  .md-entry-text { font-size: 0.8125rem; }
  .md-sheet-head { top: 16px; }
  .md-sheet-sn { display: none; }
  .md-sheet-title { margin-top: 4px; font-size: 1.75rem; }
  .md-entries { margin-top: 12px; }
  .md-entries li { padding: 7px 0; }
  .md-sheet .md-years-field { height: 30px; }
  .md-sheet .md-years-over { margin-top: 8px; }
  .md-specimen-caption { margin-top: 10px; }
}

/* Responsive */

@media (max-width: 960px) {
  .md-hero-grid, .md-authority-grid, .md-marks, .md-file-intro, .md-tl-top, .md-makers-grid, .md-faq-grid, .md-closing-grid, .md-offer-grid { grid-template-columns: 1fr; }
  .md-hero { padding-top: 0; }
  .md-hero-grid { gap: clamp(48px, 9svh, 88px); }
  /* The first screen holds the promise and the form, nothing else. The example begins below the fold. */
  .md-hero-copy { display: flex; flex-direction: column; min-height: calc(100svh - var(--header-h)); padding: clamp(20px, 5svh, 48px) 0 clamp(20px, 4svh, 36px); }
  .md-hero-form { margin-top: auto; padding-top: clamp(28px, 6svh, 64px); }
  .md-hero-copy .md-display { margin-top: auto; font-size: clamp(2.75rem, min(14vw, 7.4svh), 4.5rem); }
  .md-hero-copy .md-display { max-width: 11ch; }
  .md-specimen { max-width: 640px; }
  .md-shows { display: none; }
  .md-faq-grid .md-h2 { position: static; }
  .md-emblem { width: 160px; justify-self: start; }
  .md-specimen { justify-self: start; max-width: 640px; }
  .md-authority-copy { padding: 0 0 40px; border-right: 0; border-bottom: 1px solid rgba(246, 244, 237, 0.2); }
  .md-authority-figure { padding: 40px 0 0; }
  .md-key { padding-inline: 10px; }
  .md-ledger dd { font-size: 0.8125rem; line-height: 1.4; }
}
@media (max-width: 640px) {
  /* On phones the car and its bar come first, so the moving part is in view while the scene changes. */
  .md-tl > .md-rail { display: flex; flex-direction: column; }
  .md-tl-top { order: 1; }
  .md-tl-road { order: 2; margin-top: 20px; }
  .md-tl-scenes { order: 3; margin-top: 28px; }
  .md-tl-caption { order: 4; }
  .md-tl-top .md-body-large { font-size: 1rem; margin-top: 8px; }
    .md-tl { padding-top: 48px; }
  .md-tl-scene { grid-template-columns: 1fr; gap: 14px; }
  .md-tl-print { padding: 8px 8px 10px; }
  .md-tl-print img { max-height: 22svh; }
  .md-tl-print figcaption { margin-top: 6px; font-size: 0.75rem; }
  .md-tl-date { font-size: 1.25rem; }
  .md-tl-line { margin-top: 8px; font-size: clamp(1.45rem, 6.4vw, 1.85rem); }
  .md-tl-detail { margin-top: 10px; font-size: 0.9375rem; }
  .md-tl-meta { margin-top: 12px; font-size: 0.8125rem; }
  /* Phones: the car, its bar and the scene share one screen. Scenes slide like cards in the direction of travel, and a swipe moves between them. */
  .is-player .md-tl-scenes { overflow-x: clip; touch-action: pan-y pinch-zoom; }
  .is-player .md-tl-scene { transform: translateX(calc(var(--dir, 1) * 106%)); transition: transform 270ms var(--ease-out), visibility 0s linear 270ms; }
  .is-player .md-tl-scene.is-active { transform: none; transition: transform 270ms var(--ease-out), visibility 0s; }
  .is-player .md-tl-scene.is-leaving { transform: translateX(calc(var(--dir, 1) * -106%)); }
  .is-player .md-tl-print, .is-player .md-tl-scene.is-leaving .md-tl-print { opacity: 1; transform: rotate(var(--tilt)); transition: none; }
  /* On phones the chapters are buttons under the strip; the strip itself stays, one thin block a year. */
  .is-player .md-tl-markers { display: none; }
  .is-player .md-tl-axis { padding-top: 6px; }
  .is-player .md-tl-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 14px; border-top: 1px solid var(--rule); }
  .md-tl-steps button {
    min-height: 44px; padding: 10px 2px 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-3);
    font: 400 0.75rem/1.2 var(--mono); letter-spacing: 0.06em; white-space: nowrap; cursor: pointer;
    transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
  }
  .md-tl-steps button.is-past { color: var(--ink); }
  .md-tl-steps button[aria-current="step"] { color: var(--burgundy); border-bottom-color: var(--burgundy); }
  .md-ledger { grid-template-columns: 1fr 1fr; }
  .md-key { padding-left: 0; border-left: 0; }
  .md-entries li { grid-template-columns: minmax(0, 1fr) auto; }
  .md-entry-date { grid-column: 1; }
  .md-entries .md-label { grid-column: 2; grid-row: 1; }
  .md-entry-text { grid-column: 1 / -1; }
  .md-sheet-sn { font-size: 0.75rem; }
  .md-entries li { grid-template-columns: minmax(0, 1fr) auto; }
  .md-reader-list li { grid-template-columns: 1fr; gap: 8px; }
  .md-years-gap { font-size: 0.875rem; }
  .md-makers-list div { grid-template-columns: 1fr; gap: 2px; }
  .md-yours { margin-left: 0; }
  .md-yours-rows div { flex-direction: column; gap: 2px; }
}

/* What turns up: one shelf of real material, laid straight, the pictures clean to their edges. md-home.js glides it to
   the next piece that answered a question and stops that piece in the middle, marked by a short burgundy rule. Two lines
   beneath ask and answer it, with the way into that car's file. The rest of the shelf steps back while a piece is read. */
.md-finds {
  --item-h: clamp(140px, 43svh, 540px);
  min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
  padding: clamp(16px, 3svh, 40px) 0; overflow: hidden; background: var(--sand-deep); border-block: 1px solid var(--rule);
}
.md-finds-inner { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.md-finds-head, .md-finds-foot { text-align: center; }
.md-finds-title { font-family: var(--serif); font-size: clamp(2.2rem, min(1.2rem + 4.2vw, 8.4svh), 5.75rem); font-weight: 400; line-height: 1; letter-spacing: -0.025em; text-wrap: balance; }
.md-finds-mission { max-width: 62rem; margin: clamp(10px, 1.6svh, 16px) auto 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, min(0.95rem + 0.7vw, 3.4svh), 1.6rem); line-height: 1.3; color: var(--ink-2); text-wrap: balance; }

.md-wall { position: relative; margin-top: clamp(22px, 6svh, 80px); overflow: hidden; touch-action: pan-y; }
@supports (overflow: clip) { .md-wall { overflow: visible; overflow-x: clip; } }
.md-wall::before, .md-wall::after {
  content: ""; position: absolute; z-index: 3; top: -12px; bottom: -12px; left: 0; width: 9%; pointer-events: none;
  background: linear-gradient(90deg, var(--sand-deep), rgba(236, 232, 220, 0));
}
.md-wall::after { left: auto; right: 0; transform: scaleX(-1); }
.md-wall-belt { display: flex; width: max-content; will-change: transform; -webkit-user-select: none; user-select: none; }
.md-wall-set { display: flex; align-items: flex-end; gap: clamp(20px, 3vw, 52px); padding: 8px clamp(9px, 1.1vw, 18px) 18px; }
.md-wall-item {
  position: relative; flex: none; outline: none; transform-origin: 50% 100%;
  transition: opacity 800ms var(--ease-out), translate 800ms var(--ease-out), scale 800ms var(--ease-out);
}
.md-wall-item { cursor: pointer; }
.md-finds.is-reading .md-wall-item:not(.is-current):hover { opacity: 0.85; }
.md-wall-item:not(.is-current):hover .md-find-print { box-shadow: 0 2px 4px rgba(40, 25, 10, 0.14), 0 26px 40px -24px rgba(40, 25, 10, 0.55); }
/* Under the hand the shelf answers at once: no piece lifts, and the step back is quick. */
.md-finds.is-dragging .md-wall { cursor: grabbing; }
.md-finds.is-dragging .md-wall-item { transition-duration: 260ms; }
/* While a piece is read it comes forward: a little larger, lifted, with a deeper shadow. The others step back. */
.md-finds.is-reading .md-wall-item:not(.is-current) { opacity: 0.5; }
.md-wall-item.is-current { z-index: 2; translate: 0 -6px; scale: 1.08; }
.md-wall-item .md-find-print { transition: box-shadow 800ms var(--ease-out); }
.md-wall-item.is-current .md-find-print { box-shadow: 0 2px 4px rgba(40, 25, 10, 0.16), 0 34px 48px -26px rgba(40, 25, 10, 0.6); }
.md-wall-item::after {
  content: ""; position: absolute; left: 50%; bottom: -14px; width: 32px; height: 2px; margin-left: -16px;
  background: var(--burgundy); transform: scaleX(0); transition: transform 500ms var(--ease-out);
}
.md-wall-item.is-current::after { transform: scaleX(1); transition-delay: 200ms; }
.md-wall { cursor: grab; }
.md-wall:active { cursor: grabbing; }
.md-wall-item:focus-visible .md-find-print { outline: 2px solid var(--burgundy); outline-offset: 3px; }
/* The pictures, clean to their edges: every piece the same height, a soft shadow beneath. */
.md-find-print { overflow: hidden; border-radius: 2px; box-shadow: 0 1px 2px rgba(40, 25, 10, 0.16), 0 18px 30px -22px rgba(40, 25, 10, 0.5); }
.md-find-print img { display: block; width: auto; max-width: none; height: calc(var(--item-h) + 11px); }

/* The caption: the question the piece in the middle answered, its source and the answer. */
.md-finds-foot { margin-top: clamp(16px, 3.6svh, 48px); }
.md-finds-q { max-width: 40rem; margin: 0 auto; transition: opacity 320ms ease, transform 480ms var(--ease-out); }
.md-finds-q.is-changing { opacity: 0; transform: translateY(5px); }
.md-finds-q-text { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, min(0.9rem + 1.3vw, 3.8svh), 2.1rem); line-height: 1.15; color: var(--burgundy); transition: color 300ms ease; }
.md-finds-q.is-plain .md-finds-q-text { color: var(--ink); }
/* Either side of the caption, a step to the previous or next piece. */
.md-finds-reader { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: clamp(12px, 3vw, 48px); max-width: 64rem; margin: 0 auto; }
.md-finds-step {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer; transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.md-finds-step::before {
  content: ""; width: 16px; height: 11px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.md-finds-step.is-prev::before { transform: scaleX(-1); }
.md-finds-step:hover { border-color: var(--ink); background: var(--ink); color: var(--sand); }
.md-finds-step:active { transform: scale(0.96); }
html:not(.md-js) .md-finds-step { visibility: hidden; }
.md-finds-q-answer { min-height: 2.9em; margin-top: 8px; color: var(--ink-2); font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem); line-height: 1.45; text-wrap: balance; }
.md-finds-q-link { margin-left: 4px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.md-finds-q-link::after { content: " →"; }
.md-finds-q-link:hover { color: var(--burgundy); }

/* Arrival: the shelf slides in once, then md-home.js takes over. Without script it is a row you can scroll. */
.md-finds .md-wall { transition: opacity 1200ms var(--ease-out), translate 1600ms var(--ease-out); }
.md-js .md-finds:not(.is-in) .md-wall { opacity: 0; translate: 6% 0; }
html:not(.md-js) .md-wall { overflow-x: auto; }
html:not(.md-js) .md-wall-set[aria-hidden] { display: none; }
@media (min-width: 1100px) {
  .md-finds-q { max-width: 54rem; }
  .md-finds-q-answer { min-height: 1.45em; }
}
@media (min-width: 961px) and (max-height: 760px) {
  .md-finds { --item-h: clamp(110px, 37svh, 280px); }
  .md-finds-title { font-size: clamp(2.2rem, 8svh, 4.5rem); }
}
@media (max-width: 640px) {
  .md-finds { --item-h: clamp(110px, 30svh, 260px); }
  .md-finds-reader { grid-template-columns: minmax(0, 1fr); }
  .md-finds-step { display: none; }
  .md-wall-set { gap: 14px; padding-inline: 7px; }
  .md-finds-title { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .md-finds-q-text { font-size: 1.25rem; }
  .md-finds-q-answer { font-size: 0.875rem; }
}
@media (max-width: 640px) and (max-height: 760px) {
  .md-finds { --item-h: clamp(96px, 27svh, 190px); }
}

/* Why it matters now: three readers, three benefits of equal weight, one action. */
.md-why { padding: clamp(56px, 7vw, 120px) 0; background: var(--paper); border-block: 1px solid var(--rule); }
.md-why-head em { color: var(--burgundy); }
.md-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 96px); margin-top: clamp(36px, 6.4svh, 92px); padding-bottom: clamp(22px, 3.6svh, 40px); border-bottom: 1px solid var(--rule-strong); }
/* Each reader stands under an ink rule, numbered at its right end. */
.md-why-item { position: relative; padding-top: clamp(16px, 2.6svh, 26px); }
.md-why-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ink); transform-origin: left; }
.md-why-item::after { content: attr(data-n); position: absolute; top: clamp(18px, 2.8svh, 30px); right: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
/* The three share their rows, so the reasons line up even when one title takes two lines. */
@media (min-width: 961px) {
  .md-why-grid { grid-template-rows: repeat(3, auto); }
  .md-why-item { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
}
/* The reader, in their own words: burgundy italic, readable, never shouted. */
.md-why-who { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.45vw, 1.45rem); line-height: 1.2; color: var(--burgundy); }
.md-why-title { margin-top: 4px; font-family: var(--serif); font-size: clamp(2.2rem, 1.5rem + 1.9vw, 3.5rem); font-weight: 400; line-height: 1; letter-spacing: -0.022em; text-wrap: balance; }
.md-why-text { max-width: 28ch; margin-top: clamp(14px, 2.2svh, 22px); color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; }
.md-why-cta { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: clamp(36px, 6.4svh, 80px); }
/* The three arrive in turn, once, as the section comes into view. */
.md-js .md-why-item { opacity: 0; translate: 0 22px; transition: opacity 900ms var(--ease-out), translate 1100ms var(--ease-out); transition-delay: calc(120ms + var(--i) * 150ms); }
.md-js .md-why.is-in .md-why-item { opacity: 1; translate: none; }
.md-js .md-why-item::before { scale: 0 1; transition: scale 1200ms var(--ease-out); transition-delay: calc(var(--i) * 150ms); }
.md-js .md-why.is-in .md-why-item::before { scale: 1 1; }
@media (prefers-reduced-motion: reduce) {
  .md-js .md-why-item::before { scale: 1 1; transition: none; }
}
@media (max-width: 960px) {
  .md-why-grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 3.4svh, 32px); margin-top: clamp(20px, 3.4svh, 32px); }
  .md-why-title { font-size: clamp(1.75rem, 6.6vw, 2.4rem); }
  .md-why-text { max-width: 40ch; margin-top: 6px; font-size: 1rem; }
  .md-why-cta { margin-top: clamp(22px, 3.6svh, 32px); }
  .md-why-cta .md-button { width: 100%; }
}
/* Short phones: the three reasons and the button still share one screen. */
@media (max-width: 640px) and (max-height: 760px) {
  .md-why { padding: 24px 0; }
  .md-why-grid { row-gap: 14px; margin-top: 16px; padding-bottom: 14px; }
  .md-why-item { padding-top: 10px; }
  .md-why-item::after { top: 12px; }
  .md-why-who { font-size: 1.05rem; }
  .md-why-title { font-size: 1.55rem; }
  .md-why-text { margin-top: 4px; font-size: 0.9375rem; }
  .md-why-cta { margin-top: 18px; }
}
@media (max-width: 960px) {
  .md-tl-body { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .md-tl-parts ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; }
}
@media (max-width: 640px) {
  .md-tl-body { order: 3; display: flex; flex-direction: column; margin-top: 18px; }
  /* On phones the eight parts are a compact set of tags below the scene; the scene's date line names its own. */
  .md-tl-parts { order: 4; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); }
  .md-tl-parts ol { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; border-top: 0; }
  .md-tl-part { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--rule); background: var(--paper); }
  .md-tl-part::before { width: 7px; height: 7px; }
  .md-tl-part-what { display: none; }
  .md-tl-part-name { font-size: 0.8125rem; }
  .is-player .md-tl-part.is-current { border-color: var(--burgundy); }
}

/* One screen per section. Each section is as tall as the screen below the header, and never taller.
   Spacing and the large type follow the screen's height as well as its width. A section that still spills over
   on an unusual screen is scaled down a little by md-home.js (.md-fit). */
.md-authority, .md-why, .md-offer, .md-stories, .md-makers, .md-faq, .md-closing {
  min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(20px, 5svh, 72px);
}
.md-authority-title { font-size: clamp(2.2rem, min(1.1rem + 2.9vw, 7.5svh), 4.5rem); }
.md-authority-number { font-size: clamp(3.6rem, min(2rem + 7vw, 15svh), 9rem); }
.md-marks { margin-top: clamp(24px, 6svh, 96px); }

.md-faq-list summary { padding-block: clamp(12px, 2.4svh, 22px); }

/* The offer card on wide screens: a wider card with the checks in two columns, so it fits a laptop screen. */
@media (min-width: 961px) {
  .md-offer-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .md-offer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-top: clamp(16px, 2.6svh, 26px); }
  .md-offer-card { padding-top: clamp(20px, 3.4svh, 44px); }
  .md-offer-card-head { margin-top: clamp(10px, 1.6svh, 18px); }
  .md-offer-amount { font-size: clamp(3.2rem, min(2.4rem + 3vw, 9svh), 5.25rem); }
  .md-offer-cta { min-height: clamp(52px, 7svh, 64px); margin-top: clamp(16px, 2.6svh, 24px); }
  .md-offer-plus { margin-top: clamp(16px, 2.6svh, 26px); padding-block: clamp(14px, 2.4svh, 24px); }
  .md-offer-foot { padding-top: clamp(14px, 2.2svh, 22px); }
  .md-offer-before summary { padding-block: clamp(12px, 2svh, 18px); }
  .md-offer-how li { padding-block: clamp(10px, 1.8svh, 16px); }
}

/* Phones and tablets: the hero card is its own screen. */
@media (max-width: 960px) {
  .md-hero-grid { gap: 0; }
  .md-specimen { min-height: var(--screen); align-content: center; padding-block: 16px; }
}

@media (max-width: 640px) {
  /* The archive: the figure sits on one line, the five labels in one compact list. */
  .md-authority-title { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .md-authority-copy { padding-bottom: 18px; }
  .md-authority-copy p { margin-top: 12px; font-size: 0.9375rem; line-height: 1.5; }
  .md-authority-copy .md-arrow-link { margin-top: 14px; }
  .md-authority-figure { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding-top: 16px; }
  .md-authority-figure .md-mono, .md-authority-note { grid-column: 1 / -1; }
  .md-authority-number { margin-top: 4px; font-size: clamp(2.75rem, 13vw, 3.5rem); }
  .md-authority-unit { margin-top: 0; font-size: 1.6rem; }
  .md-authority-note { margin-top: 6px; font-size: 0.8125rem; }
  .md-marks { margin-top: 18px; padding-top: 14px; gap: 10px; }
  .md-marks-lead { max-width: none; font-size: 1.05rem; }
  .md-ledger { grid-template-columns: 1fr; gap: 8px; }
  .md-key { display: grid; grid-template-columns: 50px 6.5rem minmax(0, 1fr); gap: 10px; align-items: center; padding: 0; border-left: 0; }
  .md-key-row { gap: 2px; height: 14px; margin: 0; }
  .md-key-row i { width: 8px; }
  .md-key-none .md-key-row::before { left: 10px; width: 28px; top: -5px; height: 3px; }
  .md-ledger dt { font-size: 0.75rem; }
  .md-ledger dd { margin: 0; font-size: 0.8125rem; line-height: 1.35; }

  
  
  

  /* The Chassis File: the photograph takes whatever height the screen has left. */
  .md-tl { min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding: 20px 0; }
  .md-tl-top { gap: 0; }
  .md-tl-top .md-h2 { font-size: clamp(1.45rem, 6.6vw, 2rem); }
  .md-tl-top .md-body-large { margin-top: 6px; font-size: 0.875rem; }
  .md-tl-road { margin-top: 12px; }
  .is-player .md-tl-track { padding-top: 40px; }
  .is-player .md-tl-steps { margin-top: 8px; }
  .md-tl-steps button { min-height: 44px; padding: 6px 2px; }
  .md-tl-body { margin-top: 12px; }
  .md-tl-scene { gap: 10px; }
  .md-tl-print img { max-height: clamp(80px, calc(100svh - 700px), 220px); }
  .md-tl-print figcaption { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  .md-tl-sub-intro { display: none; }
  .md-tl-date { font-size: 1.125rem; }
  .md-tl-line { margin-top: 4px; font-size: clamp(1.3rem, 5.8vw, 1.6rem); }
  .md-tl-detail { margin-top: 6px; font-size: 0.875rem; }
  .md-tl-meta { margin-top: 8px; }
  /* The eight parts become one line of tags to swipe, introduced by the title itself. */
  .md-tl-parts { display: flex; align-items: center; gap: 10px; margin: 12px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter) 0; overflow-x: auto; scrollbar-width: none; }
  .md-tl-parts::-webkit-scrollbar { display: none; }
  .md-tl-parts-title { flex: none; }
  .md-tl-parts ol { flex-wrap: nowrap; margin: 0; }
  .md-tl-part { position: relative; flex: none; }
  .md-tl-parts-key { display: none; }
  .md-tl-caption { display: none; }

  /* The offer: the card carries everything; how it works lives in "Before you begin". */
  .md-offer-lead, .md-offer-how { display: none; }
  .md-offer-card { margin-top: 16px; padding-top: 18px; }
  .md-offer-card-head { margin-top: 6px; }
  .md-offer-price { gap: 4px; }
  .md-offer-terms { max-width: none; white-space: nowrap; }
  .md-offer-list { gap: 6px; margin-top: 14px; }
  .md-offer-list li { font-size: 0.9375rem; }
  .md-offer-assure { font-size: 0.8125rem; }
  .md-offer-plus { gap: 2px; margin-top: 14px; padding-block: 12px 14px; }
  .md-offer-plus-head strong { font-size: 1.4rem; }
  .md-offer-plus-head > span { font-size: 1.3rem; }
  .md-offer-plus-text { font-size: 0.875rem; line-height: 1.45; }
  .md-offer-plus-note { font-size: 0.75rem; }
  .md-offer-foot { padding-top: 12px; }
  .md-offer-foot > p { font-size: 0.8125rem; line-height: 1.45; }
  .md-offer-before { margin-top: 8px; }
  .md-offer-before summary { padding-block: 10px; font-size: 0.9375rem; }
  .md-offer-cta { min-height: 52px; margin-top: 14px; }

  /* Rewards: the words carry it on a phone; the illustration stays on wider screens. */

  
  
  

  /* Who reads the records */
  .md-makers-grid { gap: 18px; }
  .md-emblem { width: clamp(64px, 11svh, 120px); }
  .md-makers .md-body-large { margin-top: 12px; font-size: 1rem; }
  .md-makers-list { margin-top: 16px; }
  .md-makers-list div { padding-block: 9px; }
  .md-makers-list dt { font-size: 1.2rem; }
  .md-makers .md-arrow-link { margin-top: 18px; }

  /* Questions */
  .md-faq-grid { gap: 18px; }
  .md-faq-list summary { padding-block: 13px; font-size: 0.9375rem; }

  /* The hero card on its own screen */
  .md-specimen-car { width: 72%; }
  .md-sheet { padding-top: 46px; padding-bottom: 16px; }
  .md-sheet-title { font-size: 1.6rem; }
  .md-entries li { padding-block: 7px; }
  .md-specimen-caption { margin-top: 8px; font-size: 0.75rem; }
}

/* Short phones: the same sections, with the smallest extras folded away so each still fits one screen. */
@media (max-width: 640px) and (max-height: 760px) {
  .md-tl-top .md-body-large, .md-tl-detail { display: none; }
  .md-offer-kicker { display: none; }
  .md-offer-card-head { margin-top: 0; }
  .md-authority-copy p { font-size: 0.875rem; }
  .md-marks-lead { display: none; }
  .md-marks { margin-top: 12px; padding-top: 10px; }
  .md-hero-copy .md-lead { font-size: 1rem; }
  .md-sheet-meta, .md-sheet-sn { display: none; }
  .md-specimen-car { width: 62%; }
  .md-sheet { margin-top: 14%; padding-top: 42px; }
  .md-sheet-title { margin-top: 2px; font-size: 1.4rem; }
  .md-entry-text { font-size: 0.8125rem; }
  .md-entries li { padding-block: 5px; }
  .md-sheet .md-years-field { height: 26px; }
  .md-hero-form { padding-top: 20px; }
  .md-specimen { zoom: 0.9; }
  .md-specimen-caption { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .md-offer-assure { font-size: 0.75rem; }
  .md-offer-list { gap: 4px; }
  .md-offer-head .md-h2 { font-size: 1.6rem; }
  .md-offer-cta { min-height: 48px; }
  .md-offer-foot > p { font-size: 0.75rem; }
}

/* Wide screens: the offer card checks fit one line each. */
@media (min-width: 961px) {
  /* The offer card: one line per check, shorter extras. */
  .md-offer-list li { font-size: 1rem; }
  .md-offer-plus-text { font-size: 0.9375rem; }
  .md-offer-plus-note { font-size: 0.8125rem; }
  .md-offer-foot > p { font-size: 0.875rem; }
  .md-offer-amount { font-size: clamp(3rem, min(2.4rem + 3vw, 8svh), 5.25rem); }
}

/* Short laptop screens: "How it works" folds into "Before you begin" and the card tightens, so the offer stays one screen. */
@media (min-width: 961px) and (max-height: 820px) {
  .md-offer-how { display: none; }
  .md-offer-grid { grid-template-areas: "head card"; grid-template-rows: auto; align-items: center; }
  .md-offer-kicker { display: none; }
  .md-offer-card-head { margin-top: 0; }
  .md-offer-amount { font-size: 3rem; }
  .md-offer-list li { font-size: 0.9375rem; }
  .md-offer-cta { min-height: 50px; margin-top: 14px; }
  .md-offer-assure { margin-top: 8px; }
  .md-offer-plus { margin-top: 14px; padding-block: 12px; gap: 4px; }
  .md-offer-plus-head strong { font-size: 1.5rem; }
  .md-offer-plus-head > span { font-size: 1.4rem; }
  .md-offer-plus-text { font-size: 0.875rem; }
  .md-offer-foot { padding-top: 12px; }
  .md-offer-foot > p { font-size: 0.8125rem; }
  .md-offer-before { margin-top: 10px; }
  .md-offer-before summary { padding-block: 10px; }
}

/* Tablets: the same one-screen rule. The offer card carries the offer,
   and the file's parts show only the current description, as on wide screens. */
@media (min-width: 641px) and (max-width: 960px) {
  .md-offer-how { display: none; }
  .md-tl { min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: 28px; }
  .is-player .md-tl-part { grid-template-rows: auto 0fr; }
  .is-player .md-tl-part.is-current { grid-template-rows: auto 1fr; }
  .md-tl-parts ol { row-gap: 0; }
  .md-marks { margin-top: 28px; }
}

/* Why Maranello Data exists: an institution's statement, centred on one burgundy screen. */
.md-makers-inner { display: grid; justify-items: center; text-align: center; }
.md-makers .md-emblem { width: clamp(52px, 9svh, 96px); justify-self: center; }
.md-makers-kicker { margin-top: clamp(14px, 2.6svh, 30px); font-size: 0.75rem; letter-spacing: 0.18em; color: var(--on-burgundy-2); }
.md-makers-title { margin-top: clamp(12px, 2.4svh, 28px); font-family: var(--serif); font-size: clamp(2.6rem, min(1.4rem + 6vw, 13svh), 8.5rem); font-weight: 400; line-height: 0.95; letter-spacing: -0.03em; }
.md-makers-title span, .md-makers-title em { display: block; }
.md-makers-title em { color: #d9b8b4; }
.md-makers-lead { max-width: 40ch; margin-top: clamp(14px, 2.6svh, 28px); color: var(--on-burgundy-2); font-size: clamp(1rem, min(0.92rem + 0.45vw, 2.6svh), 1.3rem); line-height: 1.5; }
.md-makers-lead + .md-makers-lead { margin-top: 8px; }
.md-makers-sign { margin-top: clamp(18px, 3.4svh, 40px); padding-top: 14px; border-top: 1px solid rgba(246, 244, 237, 0.3); font-size: 0.75rem; letter-spacing: 0.16em; color: var(--on-burgundy-2); }
.md-makers .md-arrow-link { margin-top: clamp(12px, 2.4svh, 24px); }

/* The words rise in, one after another, the first time the section arrives (md-home.js removes .is-waiting). */
.md-makers-inner > * { transition: opacity 900ms var(--ease-out), translate 1000ms var(--ease-out); }
.md-makers.is-waiting .md-makers-inner > * { opacity: 0; translate: 0 26px; }
.md-makers-inner > :nth-child(2) { transition-delay: 90ms; }
.md-makers-inner > :nth-child(3) { transition-delay: 180ms; }
.md-makers-inner > :nth-child(4) { transition-delay: 320ms; }
.md-makers-inner > :nth-child(5) { transition-delay: 420ms; }
.md-makers-inner > :nth-child(n + 6) { transition-delay: 540ms; }


/* The Chassis File's example as a strip of years, as in a file's record at a glance: one block a year, the records rising
   in as the story reaches them, the silent years tinted and named above them. A burgundy frame steps along the years as
   the story plays and stops on each chapter. The chapters sit under the strip as small blocks (on phones, as buttons);
   the one being told names its year. */
.md-tl-track { padding-top: 30px; }
.md-tl-field { height: clamp(30px, 4.4svh, 48px); }
.md-tl-years, .md-tl-marks { gap: 2px; }
.md-tl-years li.is-gap { background: rgba(94, 1, 9, 0.08); }
.md-tl-gap {
  display: block; position: absolute; top: 0; left: calc(100% * var(--gap-start, 5) / 49); width: calc(100% * var(--gap-span, 41) / 49); padding-bottom: 9px;
  text-align: center; font-family: var(--serif); font-style: italic; font-size: 0.9375rem; line-height: 1.2; color: var(--burgundy); white-space: nowrap;
}
.md-tl-gap::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 5px; border: 1px solid var(--burgundy); border-bottom: 0; }
.is-player .md-tl-track { padding-top: 30px; }
.is-player .md-tl-years li.is-gap { background: rgba(94, 1, 9, 0.05); }
.is-player .md-tl-years li.is-passed.is-gap { background: rgba(94, 1, 9, 0.14); }
.is-player .md-tl-gap { opacity: 0.5; transform: none; transition: opacity 300ms var(--ease-out); }
.is-player.show-gap .md-tl-gap { opacity: 1; }
.is-player .md-tl-now {
  --cw: calc((100% - 96px) / 49);
  display: block; position: absolute; z-index: 2; top: -4px; bottom: -4px; left: calc(var(--col, 0) * (var(--cw) + 2px) - 3px); width: calc(var(--cw) + 6px);
  border: 1.5px solid var(--burgundy); border-radius: 3px; pointer-events: none; transition: left 140ms var(--ease-out);
}
.is-player .md-tl-field { margin-bottom: 0; }
.is-player .md-tl-markers { position: relative; left: auto; right: auto; bottom: auto; height: 32px; margin-top: 8px; }
.md-tl-marker { top: 0; height: 18px; }
.md-tl-marker::before { top: 3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 2px; background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.md-tl-marker::after { top: 17px; }
.md-tl-marker:hover::after { opacity: 1; translate: -50% 0; color: var(--ink-2); }
.md-tl-marker[aria-current="step"]:hover::after { color: var(--burgundy); }
.is-player .md-tl-axis { height: auto; padding-top: 0; }
/* Wide screens name every chapter under its block, so the strip needs no separate axis. */
@media (min-width: 1100px) {
  .md-tl-marker::after { opacity: 1; translate: -50% 0; color: var(--ink-3); }
  .md-tl-marker.is-past::after { color: var(--ink-2); }
  .md-tl-marker[aria-current="step"]::after { color: var(--burgundy); }
  .md-tl-marker.is-end::after { translate: calc(-100% + 12px) 0; }
  .is-player .md-tl-axis { display: none; }
}
@media (max-width: 640px) {
  .is-player .md-tl-track { padding-top: 24px; }
  .md-tl-field { height: 22px; }
  .md-tl-gap { padding-bottom: 7px; font-size: 0.8125rem; }
  .is-player .md-tl-axis { padding-top: 6px; }
  .is-player .md-tl-steps { margin-top: 6px; }
}

/* On a large screen the Chassis File example takes the room it has, inside the rail: the photograph, the line and the
   parts grow with the screen's height, the strip of years stands taller, and the gaps between them open up. */
@media (min-width: 961px) {
  .md-tl-body { margin-top: clamp(20px, 4.6svh, 76px); }
  .md-tl-print { padding: clamp(12px, 1.3svh, 18px) clamp(12px, 1.3svh, 18px) clamp(14px, 1.5svh, 20px); }
  .md-tl-print img { max-height: clamp(220px, 37svh, 540px); }
  .md-tl-date { font-size: clamp(1.35rem, min(1rem + 1vw, 3.1svh), 2.4rem); }
  .md-tl-line { font-size: clamp(1.9rem, min(1.1rem + 2.2vw, 5.4svh), 4.2rem); }
  .md-tl-detail { font-size: clamp(1.0625rem, 1.75svh, 1.25rem); }
  .md-tl-part { padding-block: clamp(5px, 0.75svh, 10px); }
  .md-tl-part-name { font-size: clamp(0.9375rem, 1.55svh, 1.125rem); }
  .md-tl-road { margin-top: clamp(16px, 4.6svh, 72px); }
  .md-tl-field { height: clamp(30px, 5svh, 66px); }
}
@media (min-width: 961px) and (max-height: 760px) {
  .md-tl-body { margin-top: 18px; }
  .md-tl-road { margin-top: 14px; }
}

/* Phones and tablets: one rhythm for the whole page. A section is as tall as what it holds (never taller than the
   screen), its first line sits the same distance under the header as every other section's, and the gap between
   sections is the same everywhere. Nothing is stretched to fill a screen, so a tall phone shows no empty bands and
   the page scrolls as one piece. Desktop keeps its one-screen sections. The exception is the hero: on a phone it is
   still one full screen (the promise low on it, the form at its foot, nothing else), and the example is a screen of
   its own beneath it, so the car is never seen before the visitor scrolls. */
@media (max-width: 960px) {
  .md-authority, .md-finds, .md-why, .md-tl, .md-offer, .md-makers, .md-stories, .md-faq, .md-closing {
    min-height: 0; align-content: start; padding-block: var(--flow);
  }
  .md-hero { padding-bottom: var(--flow); }
  /* The car stands a little above its card; room above keeps it out of the first screen. */
  .md-specimen { padding-top: 64px; }
  .md-finds-inner, .md-tl > .md-rail { align-content: start; }
}
@media (max-width: 640px) {
  /* The eight parts: one short wrapped list under the story, the ones this car's story holds in ink. */
  .md-tl-parts { display: block; margin: 22px 0 0; padding: 14px 0 0; overflow: visible; border-top: 1px solid var(--rule); }
  .md-tl-parts ol { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; border-top: 0; }
  .md-tl-part { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 0; border: 0; background: none; }
  .md-tl-part::before { width: 7px; height: 7px; }
  .md-tl-part-what { display: none; }
  .md-tl-part-name { font-size: 0.8125rem; }
  .is-player .md-tl-part.is-current { border: 0; }
}

/* What's in a Chassis File, on phones: three things, read top to bottom. First the eight parts every file has, as a
   ruled checklist with the count found so far; then one car's story as a single card (the photograph, then the date,
   the line and its source); then the strip of years and the chapters that move it. The part a chapter holds turns
   burgundy in the checklist, so the card's date stands on its own. The whole example fits one phone screen. Desktop
   is unchanged. */
@media (max-width: 640px) {
  .md-tl > .md-rail { display: flex; flex-direction: column; }
  .md-tl-body { display: contents; }
  .md-tl-top { order: 1; gap: 6px; }
  .md-tl-parts { order: 2; }
  .md-tl .md-tl-scenes { order: 3; margin-top: 20px; }
  .md-tl .md-tl-road { order: 4; margin-top: 12px; }
  .md-tl-caption { display: none; }
  .md-tl-top .md-h2 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .md-tl-top .md-body-large { margin-top: 0; font-size: 1.0625rem; color: var(--ink-2); }

  /* The eight parts: two ruled columns, read down, under an ink rule like the desktop list. A part this chapter holds
     is burgundy on a tinted row, a part found earlier has a solid square, one not found an open one. */
  .md-tl-parts { display: block; margin: 18px 0 0; padding: 0; overflow: visible; border: 0; }
  .md-tl-parts-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.75rem; line-height: 1.3; }
  .is-player .md-tl-parts-count { display: block; color: var(--ink); }
  .md-tl-parts ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 0 14px; margin: 8px 0 0; border-top: 1px solid var(--ink); }
  .md-tl-part { display: flex; align-items: center; gap: 10px; margin: 0; padding: 4px 8px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; transition: background-color 200ms var(--ease-out); }
  .md-tl-part::before { flex: none; width: 9px; height: 9px; }
  .md-tl-part-what, .md-tl-parts-key { display: none; }
  .md-tl-part-name { font-size: 0.9375rem; line-height: 1.35; }
  .is-player .md-tl-part.is-found::before { background: var(--ink); box-shadow: none; }
  .is-player .md-tl-part.is-found .md-tl-part-name { color: var(--ink); }
  .is-player .md-tl-part.is-current { background: rgba(94, 1, 9, 0.07); }
  .is-player .md-tl-part.is-current::before { background: var(--burgundy); }
  .is-player .md-tl-part.is-current .md-tl-part-name { color: var(--burgundy); font-weight: 600; }

  /* The card: the photograph full width, then the copy with room to breathe. The source sits at the card's foot in
     every chapter, and the chapter's time runs along its bottom edge. */
  .md-tl-scene { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 0; padding: 0; overflow: hidden; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 1px 2px rgba(45, 32, 12, 0.08), 0 16px 30px -22px rgba(45, 32, 12, 0.45); }
  .md-tl .md-tl-print { width: 100%; max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; transform: none !important; }
  .md-tl .md-tl-print img { width: 100%; max-width: none; height: clamp(112px, 15svh, 168px); max-height: none; object-fit: cover; border-bottom: 1px solid var(--rule); }
  .md-tl .md-tl-print figcaption { display: none; }
  .md-tl-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 20px 22px; }
  .md-tl-date { display: block; padding-right: 72px; font-size: 1.125rem; line-height: 1.3; }
  .md-tl-date-part { display: none; }
  .md-tl-line { margin-top: 6px; max-width: none; font-size: clamp(1.4rem, 6.4vw, 1.7rem); line-height: 1.12; }
  .md-tl-detail { margin-top: 8px; font-size: 1rem; line-height: 1.45; }
  .md-tl-meta { display: block; margin-top: auto; padding-top: 14px; font-size: 0.875rem; line-height: 1.5; }
  .md-tl-meta > * + * { margin-left: 10px; }
  .is-player .md-tl-copy::after { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 3px; margin: 0; }
  .is-player .md-tl-copy::before { top: 25px; right: 20px; bottom: auto; }

  /* The strip of years and the chapters under it. The chapters name the years, so the strip's scale is left out. */
  .is-player .md-tl-track { padding-top: 26px; }
  .md-tl-field { height: 24px; }
  .is-player .md-tl-axis { display: none; }
  .is-player .md-tl-steps { margin-top: 6px; }
  .md-tl-steps button { min-height: 44px; font-size: 0.75rem; }
}
/* The card's second line shows only where the phone is tall enough to keep the example on one screen with it. */
@media (max-width: 640px) and (max-height: 899px) {
  .md-tl-detail { display: none; }
}
/* Phones under 800 points tall: the photograph lower and the card a little tighter. */
@media (max-width: 640px) and (max-height: 800px) {
  .md-tl-parts { margin-top: 16px; }
  .md-tl-part { padding-block: 3px; }
  .md-tl .md-tl-scenes { margin-top: 16px; }
  .md-tl .md-tl-print img { height: 96px; }
  .md-tl-copy { padding: 16px 18px 18px; }
  .is-player .md-tl-copy::before { top: 21px; right: 18px; }
}
/* Short phones: the same three blocks a size smaller, so the example still fits one screen. */
@media (max-width: 640px) and (max-height: 760px) {
  .md-tl-parts { margin-top: 14px; }
  .md-tl-parts-title { font-size: 0.75rem; }
  .md-tl-parts ol { margin-top: 6px; }
  .md-tl-part { padding-block: 2px; }
  .md-tl-part-name { font-size: 0.875rem; }
  .md-tl .md-tl-print img { height: 72px; }
  .md-tl-copy { padding: 14px 16px 16px; }
  .md-tl-date { font-size: 1rem; }
  .md-tl-line { font-size: 1.3rem; }
  .md-tl-meta { padding-top: 10px; }
  .is-player .md-tl-copy::before { top: 17px; right: 16px; }
  .md-tl .md-tl-road { margin-top: 8px; }
}
/* The smallest phones give the section a little less room above and below. */
@media (max-width: 640px) and (max-height: 650px) {
  .md-tl { padding-block: 28px; }
}