/* Rewards: a page made of paper, where the paper becomes the year. The example documents come from md-paper.css, so
   the same invoice works as a pile in the opening and as the travelling paper in the journey. md-rewards.js holds the
   journey on screen and reveals the paper. Every section is one screen tall. */

.md-rewards ::selection { background: var(--burgundy); color: var(--on-burgundy); }
.md-rewards .md-h2 em, .mr-title em, .mr-proof-title em { color: var(--burgundy); }

.mr-open, .mr-board, .mr-hides, .mr-proof, .mr-owners {
  min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(20px, 5svh, 72px);
}
.mr-actions { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; margin-top: clamp(20px, 3.4svh, 36px); }

/* The opening: the promise, and a shoebox's worth of paper. */
.mr-open-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.mr-title { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, min(1.1rem + 4vw, 8.4svh), 5.25rem); line-height: 1; letter-spacing: -0.025em; }
.mr-title em { display: block; margin-top: 0.12em; }
.mr-lead { max-width: 38ch; margin-top: clamp(16px, 2.6svh, 30px); }
.mr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(20px, 3.4svh, 38px) 0 0; border-top: 1px solid var(--ink); }
.mr-facts div { padding: 12px 14px 0 0; }
.mr-facts div + div { padding-left: 14px; border-left: 1px solid var(--rule); }
.mr-facts dt { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.mr-facts dd { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.4; }
/* The opening document: one real sheet, lying a little askew, with the line that answers a question marked in burgundy. */
.mr-doc { display: grid; justify-items: center; gap: 14px; margin: 0; }
.mr-doc-sheet {
  position: relative; height: min(66svh, 660px); aspect-ratio: 1000 / 1180; rotate: -1.6deg;
  box-shadow: 0 1px 1px rgba(45, 32, 12, 0.12), 0 2px 6px rgba(45, 32, 12, 0.08), 0 40px 60px -34px rgba(45, 32, 12, 0.6);
  transition: rotate 900ms var(--ease-out), translate 900ms var(--ease-out), box-shadow 900ms var(--ease-out);
}
.mr-doc-sheet img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mr-doc:hover .mr-doc-sheet { rotate: -0.6deg; translate: 0 -6px; box-shadow: 0 1px 1px rgba(45, 32, 12, 0.12), 0 2px 6px rgba(45, 32, 12, 0.08), 0 52px 70px -36px rgba(45, 32, 12, 0.62); }
.mr-doc-mark {
  position: absolute; left: 13.6%; top: 51.4%; width: 63%; height: 3.6%; border: 1.5px solid var(--burgundy); border-radius: 3px;
  background: rgba(94, 1, 9, 0.07); mix-blend-mode: multiply; transform-origin: left center;
}
.md-js .mr-doc-mark { transform: scaleX(0); opacity: 0; transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1) 900ms, opacity 300ms ease 900ms; }
.md-js .mr-doc.is-in .mr-doc-mark { transform: none; opacity: 1; }
.mr-doc figcaption { max-width: 44ch; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.45; text-align: center; }
.mr-doc figcaption .md-mono { display: block; margin-bottom: 2px; color: var(--ink-2); font-size: 0.75rem; }
.md-js .mr-doc .mr-doc-sheet { animation: mr-settle 1100ms var(--ease-out) both; animation-delay: 160ms; }
@keyframes mr-settle { from { opacity: 0; transform: translateY(-36px) rotate(5deg); } }

/* The journey, held on screen while you scroll. Without script it shows its end state. */
.mr-journey { position: relative; --hole: var(--sand-deep); background: var(--sand-deep); border-block: 1px solid var(--rule); }
.mr-journey-stage { min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(20px, 4.4svh, 64px); }
.mr-journey-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 104px); align-items: center; }
.mr-journey-copy .md-h2 em { display: block; }
.mr-beats { position: relative; display: grid; gap: clamp(6px, 1.6svh, 18px); margin-top: clamp(18px, 4svh, 44px); padding-left: 22px; }
.mr-beats::before, .mr-beats::after { content: ""; position: absolute; left: 0; top: 4px; width: 2px; }
.mr-beats::before { bottom: 4px; background: var(--rule-strong); }
.mr-beats::after { height: calc((100% - 8px) * var(--p, 1)); background: var(--burgundy); }
.mr-beat { transition: opacity 450ms var(--ease-out); }
.mr-beat-go { display: flex; align-items: baseline; gap: 12px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mr-beat-go:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 4px; }
.mr-beat-n { flex: none; width: 1.6rem; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--burgundy); }
.mr-beat-title { font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); font-weight: 600; line-height: 1.3; }
.mr-beat-text { margin-top: 4px; padding-left: calc(1.6rem + 12px); max-width: 42ch; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.mr-journey-note { margin-top: clamp(16px, 3svh, 32px); max-width: 46ch; color: var(--ink-3); font-size: 0.8125rem; }

.mr-scene { --desk-h: clamp(240px, 42svh, 500px); display: grid; gap: clamp(14px, 3svh, 34px); }
.mr-record { position: relative; padding: clamp(54px, 8svh, 70px) clamp(16px, 2vw, 28px) clamp(14px, 2svh, 22px); background: var(--paper); box-shadow: 0 1px 1px rgba(45, 32, 12, 0.08), 0 20px 36px -26px rgba(45, 32, 12, 0.5); }
.mr-record-head { position: absolute; top: 14px; left: clamp(16px, 2vw, 28px); right: clamp(16px, 2vw, 28px); display: flex; justify-content: space-between; color: var(--ink-3); font-size: 0.75rem; letter-spacing: 0.12em; }
.mr-record-years { position: relative; }
.mr-record .md-years-field { height: clamp(34px, 5svh, 52px); margin-top: 0; }
.mr-scene .md-year.is-gap { background: rgba(94, 1, 9, 0.07); }
.mr-record-axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: start; margin-top: 8px; color: var(--ink-3); font-size: 0.75rem; letter-spacing: 0.08em; white-space: nowrap; }
.mr-record-axis > span:last-child { justify-self: end; }
.mr-record-gap { display: grid; justify-items: center; padding-top: 5px; text-transform: none; border-top: 1px dashed rgba(94, 1, 9, 0.45); font-family: var(--serif); font-style: italic; font-size: 0.9375rem; letter-spacing: 0; color: var(--burgundy); }
.mr-record-gap > span { grid-area: 1 / 1; transition: opacity 450ms var(--ease-out); }
.mr-record-gap .is-before { opacity: 0; }
.mr-tag {
  position: absolute; z-index: 1; bottom: calc(100% + 12px); translate: -50% 0; display: flex; align-items: baseline; gap: 6px; padding: 6px 10px 7px;
  background: var(--burgundy); color: var(--on-burgundy); border-radius: 2px; white-space: nowrap;
  box-shadow: 0 10px 18px -10px rgba(60, 0, 6, 0.6);
}
.mr-tag::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 12px; background: var(--burgundy); }
.mr-tag-amount { font-family: var(--serif); font-size: 1.25rem; line-height: 1; }
.mr-tag-on { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--on-burgundy-2); }
.is-tag-start .mr-tag { translate: -14px 0; }
.is-tag-start .mr-tag::after { left: 14px; }
.is-live:not(.is-seen) .is-tag-start .mr-tag { translate: -14px -18px; }
.is-tag-start .mr-record-head { justify-content: flex-end; gap: 1.6em; }
.mr-scene-desk { position: relative; height: var(--desk-h); }
.mr-journey-invoice { position: absolute; left: 4%; top: 0; width: auto; height: 100%; rotate: -3deg; }
.mr-stamp {
  position: absolute; z-index: 1; right: 7cqi; bottom: 15%; display: grid; justify-items: center; gap: 1.4cqi; padding: 2.4cqi 4.6cqi 2.2cqi;
  border: 1.1cqi solid var(--burgundy); outline: 0.4cqi solid var(--burgundy); outline-offset: 0.9cqi; rotate: -11deg;
  color: var(--burgundy); text-transform: uppercase; mix-blend-mode: multiply; mask-image: var(--ink-mask); mask-size: 180px;
}
.mr-stamp-word { font-family: var(--serif); font-size: 9cqi; line-height: 1; letter-spacing: 0.12em; }
.mr-stamp-line { font-family: var(--mono); font-size: 2.6cqi; letter-spacing: 0.16em; }
/* At rest the payout sits beside the stamped invoice; in the journey it takes the invoice's place once it has gone. */
.mr-payout { position: absolute; left: calc(4% + var(--desk-h) * 0.76 + clamp(20px, 3vw, 56px)); top: 50%; translate: 0 -50%; display: grid; justify-items: start; gap: 8px; padding-top: clamp(14px, 2.4svh, 24px); border-top: 1px solid var(--ink); min-width: min(100%, 22rem); }
.mr-payout-amount { font-family: var(--serif); font-size: clamp(4rem, min(2rem + 5vw, 16svh), 8.5rem); line-height: 0.86; letter-spacing: -0.035em; color: var(--burgundy); font-variant-numeric: tabular-nums; }
.mr-payout-to { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem); }
.mr-payout-note { margin-top: 6px; color: var(--ink-3); font-size: 0.75rem; letter-spacing: 0.1em; }

/* Held: the page carries the beats. --p is the progress through the section, data-beat the beat on screen. */
.mr-snaps { display: none; }
.mr-journey.is-pinned { --step: clamp(300px, 56svh, 620px); height: calc(var(--screen) + var(--beats) * var(--step)); }
.mr-journey.is-pinned .mr-journey-stage { position: sticky; top: var(--header-h); height: var(--screen); overflow: hidden; }
.mr-journey.is-pinned .mr-snaps { display: block; position: absolute; inset: 0; pointer-events: none; }
.mr-journey.is-pinned .mr-snap { position: absolute; left: 0; width: 1px; height: 1px; top: calc(var(--i) * var(--step) + var(--step) * 0.45 + 16px); scroll-snap-align: start; }
html.mr-snapping { scroll-snap-type: y proximity; }
.is-live .mr-beat:not(.is-current) { opacity: 0.36; }
.is-live .mr-beat.is-current .mr-beat-title { color: var(--ink); }
.is-live .mr-tag { transition: opacity 500ms var(--ease-out) 200ms, translate 700ms var(--ease-out) 200ms; }
.is-live:not(.is-seen) .mr-tag { opacity: 0; translate: -50% -18px; }
.is-live .mr-journey-invoice { transition: opacity 600ms var(--ease-out), translate 900ms cubic-bezier(0.2, 0.8, 0.2, 1), rotate 900ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 1000ms cubic-bezier(0.7, 0, 0.25, 1); }
.is-live[data-beat="1"] .mr-journey-invoice { opacity: 0; translate: 0 38%; rotate: 7deg; }
.is-live[data-beat="4"] .mr-journey-invoice { opacity: 0; rotate: 0deg; transform: translate(var(--fly-x, 0px), var(--fly-y, 0px)) scale(0.05); transition: opacity 420ms ease-in 560ms, rotate 500ms var(--ease-out), transform 1000ms cubic-bezier(0.7, 0, 0.25, 1); }
.is-live .mr-stamp { transition: opacity 180ms ease-out, scale 520ms cubic-bezier(0.3, 1.5, 0.5, 1); }
.is-live:is([data-beat="1"], [data-beat="2"]) .mr-stamp { opacity: 0; scale: 1.8; }
.is-live .mr-found { transition: scale 600ms cubic-bezier(0.3, 1.4, 0.5, 1) 900ms, opacity 200ms linear 900ms; transform-origin: bottom; }
.is-live:not([data-beat="4"]) .mr-found { opacity: 0; scale: 1 0; transition-delay: 0ms; }
.is-live .md-year.mr-target { transition: outline-color 300ms, background-color 300ms; }
.is-live:not([data-beat="4"]) .md-year.mr-target { outline: 1.5px dashed var(--burgundy); outline-offset: -1.5px; background: rgba(94, 1, 9, 0.12); }
.is-live:not([data-beat="4"]) .mr-record-gap .is-before { opacity: 1; }
.is-live:not([data-beat="4"]) .mr-record-gap .is-after { opacity: 0; }
.is-live[data-beat="4"] .mr-record-gap > span { transition-delay: 1000ms; }
.is-live .mr-payout { left: 4%; transition: opacity 600ms var(--ease-out), translate 800ms var(--ease-out); }
.is-live:not([data-beat="4"]) .mr-payout { opacity: 0; translate: 0 calc(-50% + 18px); }
.is-live[data-beat="4"] .mr-payout { transition-delay: 450ms; }

/* The open questions: one ledger, one row of years for every car. */
.mr-board-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: 16px clamp(32px, 5vw, 96px); align-items: end; padding-bottom: clamp(12px, 2svh, 22px); }
.mr-board-head .md-h2 em { display: block; }
.mr-board-note { max-width: 46ch; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.mr-ledger { margin-top: clamp(6px, 1.4svh, 16px); }
.mr-row, .mr-ledger-axis { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1.45fr) minmax(0, 1.25fr) 9.75rem; column-gap: clamp(18px, 2.2vw, 40px); align-items: center; }
.mr-ledger-axis { padding-bottom: 8px; border-bottom: 1px solid var(--ink); color: var(--ink-3); font-size: 0.75rem; letter-spacing: 0.08em; }
.mr-ledger-years { grid-column: 2; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.mr-ledger-years span { white-space: nowrap; }
.mr-ledger-years span:last-child { justify-self: end; }
.mr-rows { border-bottom: 1px solid var(--ink); }
.mr-row { position: relative; padding-block: clamp(6px, 1.25svh, 14px); border-top: 1px solid var(--rule); transition: background-color 300ms var(--ease-out); }
.mr-row:first-child { border-top: 0; }
.mr-row:hover { background: rgba(253, 252, 248, 0.6); }
.mr-row-car a { display: grid; gap: 2px; color: inherit; text-decoration: none; }
.mr-row-car .md-mono { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.mr-row-model { font-family: var(--serif); font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.15; transition: color 200ms var(--ease-out); }
.mr-row-car a:hover .mr-row-model { color: var(--burgundy); }
.mr-row-strip .md-years-over { margin-top: 0; }
.mr-row-strip .md-years-gap { font-size: 0.75rem; }
.mr-row-strip .md-years-field { height: clamp(18px, 2.8svh, 30px); margin-top: 4px; }
.mr-row-strip .md-year.is-unbuilt { background: transparent; box-shadow: inset 0 -1px 0 var(--rule); }
.mr-row-strip .md-year.is-gap { background: rgba(94, 1, 9, 0.08); }
.mr-row:hover .md-year.is-gap { background: rgba(94, 1, 9, 0.15); }
.mr-row-ends { display: none; }
.mr-row-q { font-family: var(--serif); font-weight: 400; font-size: clamp(1rem, min(0.86rem + 0.45vw, 2.7svh), 1.3rem); line-height: 1.15; text-wrap: balance; }
.mr-row-wanted { margin-top: 3px; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.4; }
.mr-row-act { display: grid; justify-items: end; gap: 5px; text-align: right; }
.mr-row-link { font-size: 0.9375rem; white-space: nowrap; }
.mr-row-status { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); }
.mr-board-more { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: clamp(12px, 2.4svh, 24px); color: var(--ink-3); font-size: 0.8125rem; }

/* Where paper hides: four documents on the desk, each with the person who usually has it. */
.mr-hides { --hole: var(--sand-deep); background: var(--sand-deep); border-block: 1px solid var(--rule); }
.mr-hides-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 16px clamp(32px, 5vw, 96px); align-items: end; padding-bottom: clamp(12px, 2svh, 22px); border-bottom: 1px solid var(--ink); }
.mr-hides-head .md-h2 em { display: block; }
.mr-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 56px); margin-top: clamp(14px, 3svh, 40px); }
.mr-spec-desk { display: flex; align-items: flex-end; justify-content: center; height: clamp(170px, 34svh, 360px); }
.mr-spec .mr-paper { width: auto; max-width: 100%; transition: translate 600ms var(--ease-out), rotate 600ms var(--ease-out), box-shadow 600ms var(--ease-out); }
.mr-spec .mr-snapshot { height: 76%; aspect-ratio: 1.12; rotate: 4deg; }
/* Real paper: a scan or a photograph of the document fills the sheet, at its own proportions. */
.mr-scan img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.02); }
.mr-journey-invoice.mr-scan { aspect-ratio: 778 / 1028; }
.mr-spec .mr-scan-receipt { height: 84%; aspect-ratio: 702 / 1118; rotate: -3deg; }
.mr-spec .mr-scan-book { height: 64%; aspect-ratio: 1197 / 920; rotate: 2deg; }
.mr-spec .mr-scan-invoice { height: 94%; aspect-ratio: 755 / 1081; rotate: -1.5deg; }
.mr-spec:hover .mr-paper { translate: 0 -10px; rotate: 0deg; box-shadow: 0 1px 1px rgba(45, 32, 12, 0.1), 0 40px 56px -28px rgba(45, 32, 12, 0.6); }
.mr-spec > h3 { margin-top: clamp(14px, 2.4svh, 24px); font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.55rem); line-height: 1.1; }
.mr-spec > p { margin-top: 6px; max-width: 32ch; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.mr-hides-note { margin-top: clamp(14px, 2.6svh, 28px); color: var(--ink-3); font-size: 0.8125rem; }
.md-js .mr-hides:not(.is-in) .mr-spec .mr-paper { opacity: 0; translate: 0 40px; rotate: 0deg; }
.md-js .mr-hides .mr-spec .mr-paper { transition: opacity 700ms var(--ease-out), translate 1000ms var(--ease-out), rotate 1000ms var(--ease-out), box-shadow 600ms var(--ease-out); }
.md-js .mr-hides.is-in .mr-spec:nth-child(2) .mr-paper { transition-delay: 90ms; }
.md-js .mr-hides.is-in .mr-spec:nth-child(3) .mr-paper { transition-delay: 180ms; }
.md-js .mr-hides.is-in .mr-spec:nth-child(4) .mr-paper { transition-delay: 270ms; }
.md-js .mr-hides.is-in .mr-spec:hover .mr-paper { transition-delay: 0ms; }

/* A real recovery: two prints and the story. */
.mr-proof { --hole: var(--sand); }
.mr-proof-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 104px); align-items: center; }
.mr-proof-desk { position: relative; height: min(64svh, 600px); }
.mr-print { position: absolute; width: 84%; left: 0; top: 2%; background: #fdfcf7; rotate: -2deg; }
.mr-print > .mr-sheet { padding: 2.2cqi 2.2cqi 0; }
.mr-print img { display: block; width: 100%; height: auto; }
.mr-print figcaption { padding: 1.6cqi 0.4cqi 2.2cqi; color: var(--ink-3); font-size: max(0.75rem, 1.9cqi); line-height: 1.4; }
.mr-print:not(.is-second) figcaption { max-width: 54%; }
.mr-print.is-second { z-index: 1; width: 42%; left: auto; right: 0; top: auto; bottom: 0; rotate: 3.5deg; }
.mr-proof-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, min(1rem + 2.4vw, 6.6svh), 3.75rem); line-height: 1.02; letter-spacing: -0.02em; }
.mr-proof-title em { display: block; }
.mr-proof-copy > p:not(.mr-proof-note) { margin-top: clamp(14px, 2.6svh, 26px); max-width: 46ch; color: var(--ink-2); line-height: 1.55; }
.mr-proof-dates { margin-top: clamp(14px, 2.6svh, 24px); border-top: 1px solid var(--ink); }
.mr-proof-dates li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; }
.mr-proof-dates .md-mono { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-3); padding-top: 3px; }
.mr-proof-note { margin-block: clamp(12px, 2.4svh, 22px); color: var(--ink-3); font-size: 0.875rem; max-width: 46ch; }
.md-js .mr-proof:not(.is-in) .mr-print { opacity: 0; translate: 0 40px; rotate: 0deg; }
.md-js .mr-proof .mr-print { transition: opacity 700ms var(--ease-out), translate 1000ms var(--ease-out), rotate 1000ms var(--ease-out); }
.md-js .mr-proof.is-in .mr-print.is-second { transition-delay: 200ms; }

/* Owners: the terms on a reward slip, with a stub that tears off. */
.mr-owners { --hole: var(--sand-deep); background: var(--sand-deep); border-block: 1px solid var(--rule); }
.mr-owners-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 104px); align-items: center; }
.mr-owners-copy .md-h2 { margin-top: 12px; }
.mr-owners-copy .md-h2 em { display: block; }
.mr-owners-copy .md-body-large { margin-top: 16px; }
.mr-slip { display: grid; grid-template-columns: clamp(56px, 6vw, 84px) minmax(0, 1fr); background: var(--paper); rotate: -1.2deg; box-shadow: 0 1px 1px rgba(45, 32, 12, 0.1), 0 30px 50px -28px rgba(45, 32, 12, 0.55); }
.mr-slip-stub {
  position: relative; display: flex; justify-content: space-between; padding: 22px 0; writing-mode: vertical-rl; rotate: 180deg;
  background: #f1ecdf; color: var(--ink-3); font-size: 0.75rem; letter-spacing: 0.18em; text-align: center; align-items: center;
}
.mr-slip-stub::after {
  /* The perforation, punched through to the desk. */
  content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 8px;
  background: radial-gradient(circle, var(--hole) 2.6px, transparent 3.2px) center / 8px 13px repeat-y;
}
.mr-slip-body { padding: clamp(20px, 3.4svh, 40px) clamp(20px, 2.8vw, 44px); }
.mr-slip-title { font-family: var(--serif); font-size: clamp(1.4rem, 1.15rem + 0.8vw, 2rem); line-height: 1.1; }
.mr-slip-field { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: end; gap: 14px; margin-top: clamp(10px, 2svh, 18px); }
.mr-slip-field .md-mono { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ink-3); }
.mr-slip-blank { height: 1.4em; border-bottom: 1px solid var(--ink-3); }
.mr-terms { margin: clamp(16px, 3svh, 28px) 0 0; border-top: 1px solid var(--ink); }
.mr-terms div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 14px; padding: clamp(8px, 1.4svh, 13px) 0; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; }
.mr-terms dt { font-weight: 600; }
.mr-terms dd { margin: 0; color: var(--ink-2); }
.md-js .mr-owners:not(.is-in) .mr-slip { opacity: 0; translate: 0 36px; rotate: 0deg; }
.md-js .mr-owners .mr-slip { transition: opacity 700ms var(--ease-out), translate 1000ms var(--ease-out), rotate 1000ms var(--ease-out); }

/* The close, with the questions beside it. */
.mr-close .md-closing-title { font-size: clamp(2.6rem, min(1.4rem + 4vw, 10svh), 5.5rem); }
.mr-closing-actions { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; margin-top: clamp(22px, 4svh, 44px); }
.mr-button-sand { --bg: var(--sand); color: var(--ink); }
.mr-button-sand:hover { --bg: #fff; color: var(--ink); }
.mr-close .md-arrow-link { color: var(--sand); }

/* Short laptop screens */
@media (min-width: 961px) and (max-height: 760px) {
  .mr-facts dd { font-size: 0.875rem; }
  .mr-row-wanted { display: none; }
  .mr-board { padding-block: 16px; }
  .mr-board-head { padding-bottom: 8px; }
  .mr-board-head .md-h2 { font-size: clamp(2rem, 5.8svh, 2.7rem); }
  .mr-row-model { font-size: 1rem; }
  .mr-beat-text { font-size: 0.875rem; }
  .mr-spec > p { font-size: 0.875rem; }
  .mr-proof-dates li { padding: 6px 0; }
  .mr-terms div { padding: 6px 0; }
}

/* Phones and tablets */
@media (max-width: 960px) {
  .mr-open-grid, .mr-proof-grid, .mr-owners-grid, .mr-board-head, .mr-hides-head { grid-template-columns: minmax(0, 1fr); }
  .mr-open-grid { gap: clamp(8px, 2svh, 24px); }
  .mr-doc-sheet { height: clamp(170px, 28svh, 340px); }
  .mr-doc figcaption { font-size: 0.75rem; }

  /* The journey: the h2, then the scene, then the beat on screen. */
  .mr-journey-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 2.2svh, 24px); }
  .mr-journey-copy { display: contents; }
  .mr-journey-copy .md-h2 { order: 0; }
  .mr-scene { order: 1; --desk-h: clamp(150px, 26svh, 320px); gap: clamp(10px, 2svh, 22px); }
  .mr-beats { order: 2; margin-top: 0; }
  .mr-journey-note { order: 3; margin-top: 0; }
  .mr-record { padding-top: clamp(48px, 7svh, 60px); }
  .is-live .mr-beats { grid-template-columns: minmax(0, 1fr); padding: 14px 0 0; }
  .is-live .mr-beats::before, .is-live .mr-beats::after { top: 0; left: 0; right: auto; bottom: auto; height: 2px; }
  .is-live .mr-beats::before { width: 100%; }
  .is-live .mr-beats::after { width: calc(100% * var(--p, 1)); }
  .is-live .mr-beat { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 400ms var(--ease-out), visibility 0s linear 400ms; }
  .is-live .mr-beat.is-current { visibility: visible; opacity: 1; transition: opacity 500ms var(--ease-out) 120ms, visibility 0s; }
  .is-live .mr-beat-go { pointer-events: none; }

  .mr-ledger-axis { display: none; }
  .mr-rows {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); border-bottom: 0;
  }
  .mr-rows::-webkit-scrollbar { display: none; }
  .mr-row { flex: 0 0 min(84%, 27rem); grid-template-columns: minmax(0, 1fr); row-gap: 12px; align-content: start; padding: 18px; border: 1px solid var(--rule); background: var(--paper); scroll-snap-align: start; }
  .mr-row:first-child { border-top: 1px solid var(--rule); }
  .mr-row-ends { display: flex; justify-content: space-between; margin-top: 6px; color: var(--ink-3); font-size: 0.75rem; letter-spacing: 0.08em; }
  .mr-row-act { justify-items: start; text-align: left; }
  .mr-board-more span { display: none; }

  .mr-specs {
    display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 18px var(--gutter) 4px; scroll-padding-inline: var(--gutter);
  }
  .mr-specs::-webkit-scrollbar { display: none; }
  .mr-spec { flex: 0 0 min(72%, 22rem); scroll-snap-align: start; }
  .mr-spec-desk { height: clamp(160px, 30svh, 320px); }

  .mr-proof-desk { height: clamp(200px, 34svh, 420px); max-width: 560px; width: 100%; justify-self: center; }
  .mr-slip { rotate: 0deg; }
}
@media (max-width: 640px) {
  .mr-doc-sheet { height: clamp(150px, 24svh, 280px); }
  /* Phones keep what can't be read anywhere else: the facts are in the journey and on the slip, the dates in the story. */
  .mr-facts, .mr-proof-dates, .mr-slip-title { display: none; }
  .mr-proof-desk { height: clamp(180px, 29svh, 320px); }
  .mr-slip-body { padding: 14px 18px 16px; }
  .mr-record-head span:first-child { visibility: hidden; }
  .mr-print { width: 66%; }
  .mr-print.is-second { width: 38%; }
  .mr-terms { margin-top: 0; }
  .mr-title { font-size: clamp(2rem, 9.4vw, 2.6rem); }
  .mr-facts { grid-template-columns: minmax(0, 1fr); }
  .mr-facts div, .mr-facts div + div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; padding: 7px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .mr-facts dd { margin: 0; font-size: 0.875rem; }
  .mr-actions { gap: 12px 20px; }
  .mr-payout-amount { font-size: clamp(3rem, 16vw, 4.4rem); }
  .mr-journey:not(.is-live) .mr-payout { min-width: 0; }
  .mr-journey:not(.is-live) .mr-payout-amount { font-size: clamp(2.2rem, 11vw, 3rem); }
  .mr-tag-amount { font-size: 1.05rem; }
  .mr-record-gap { font-size: 0.8125rem; }
  .mr-proof-dates li { grid-template-columns: 7rem minmax(0, 1fr); gap: 10px; padding: 7px 0; font-size: 0.875rem; }
  .mr-slip { grid-template-columns: 40px minmax(0, 1fr); }
  .mr-slip-field { display: none; }
  .mr-terms div { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 10px; font-size: 0.875rem; }
}
/* Short phones: the essentials only. */
@media (max-width: 640px) and (max-height: 760px) {
  .mr-lead, .mr-doc figcaption { display: none; }
  .mr-facts { display: none; }
  .mr-journey-note, .mr-board-note, .mr-hides-head .md-body-large, .mr-hides-note { display: none; }
  .mr-proof-copy > p:not(.mr-proof-note) { display: none; }
  .mr-owners .md-body-large, .mr-owners .md-kicker { display: none; }
  .mr-owners .md-h2 { margin-top: 0; }
  .mr-proof-desk { height: clamp(160px, 27svh, 220px); }
  .mr-print:not(.is-second) figcaption { display: none; }
  .mr-print > .mr-sheet { padding-bottom: 2.2cqi; }
}
@media (prefers-reduced-motion: reduce) {
  .mr-paper, .mr-slip, .mr-print, .mr-tag, .mr-stamp, .mr-payout, .mr-beat { transition: none !important; animation: none !important; }
}

/* Accepted: the site's own note laid on the paper, in its type and colours, not ink on somebody's invoice. */
.mr-stamp {
  right: -5cqi; bottom: 21%; justify-items: start; gap: 1.2cqi; padding: 3.2cqi 4.4cqi; rotate: 3deg;
  border: 1px solid var(--ink); outline: 0; background: var(--paper); color: var(--ink); text-transform: none;
  mix-blend-mode: normal; mask-image: none; box-shadow: 0 22px 34px -20px rgba(40, 25, 10, 0.5);
}
.mr-stamp-word { display: inline-flex; align-items: center; gap: 2cqi; font-family: var(--sans); font-weight: 600; font-size: 5.6cqi; letter-spacing: 0; }
.mr-stamp-word::before { content: ""; width: 2.6cqi; height: 2.6cqi; border-radius: 0.4cqi; background: var(--ink); }
.mr-stamp-line { font-size: 2.9cqi; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }

/* The opening sheet, smaller and straight, with three fine lines pointing at what it tells you. Each line runs from a
   numbered point on the sheet to a short note beside it, and they draw in one after another. */
.mr-doc { --note-w: 12.5rem; --reach: 28px; justify-self: center; }
.mr-doc-sheet { height: min(54svh, 520px); rotate: 0deg; margin-right: calc(var(--note-w) + var(--reach) + 8px); }
.mr-doc:hover .mr-doc-sheet { rotate: 0deg; }
.mr-doc figcaption { justify-self: start; text-align: left; }
.mr-doc-notes li { position: absolute; left: var(--x); top: var(--y); right: calc(-1 * var(--reach)); height: 0; }
.mr-doc-dot {
  position: absolute; z-index: 1; left: -9px; top: -9px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--burgundy); color: var(--on-burgundy); font-family: var(--mono); font-size: 0.75rem; box-shadow: 0 0 0 3px rgba(253, 252, 248, 0.85);
}
.mr-doc-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--burgundy); transform-origin: left center; }
.mr-doc-note { position: absolute; left: calc(100% + 8px); top: 0; translate: 0 -50%; display: grid; gap: 3px; width: var(--note-w); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.25; color: var(--ink); }
.mr-doc-note .md-mono, .mr-doc-legend .md-mono { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--burgundy); }
.md-js .mr-doc-notes li > * { opacity: 0; transition: opacity 500ms var(--ease-out), scale 700ms cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(1400ms + var(--i) * 260ms); }
.md-js .mr-doc-line { scale: 0 1; }
.md-js .mr-doc.is-in .mr-doc-notes li > * { opacity: 1; scale: 1 1; }
.mr-doc-legend { display: none; }
@media (prefers-reduced-motion: reduce) {
  .md-js .mr-doc-notes li > * { opacity: 1; scale: 1 1; transition: none; }
}
@media (min-width: 961px) and (max-height: 760px) {
  .mr-doc-sheet { height: min(50svh, 440px); }
}
@media (max-width: 960px) {
  .mr-doc { --note-w: 11rem; }
  .mr-doc-sheet { height: clamp(200px, 30svh, 340px); }
}
/* Phones: the points keep their numbers on the sheet and the notes are read beneath it. */
@media (max-width: 640px) {
  .mr-doc { justify-self: stretch; justify-items: center; }
  .mr-doc-sheet { height: clamp(160px, 22svh, 240px); margin-right: 0; }
  .mr-doc-line, .mr-doc-note { display: none; }
  .mr-doc-notes li { right: auto; }
  .mr-doc-legend { display: grid; gap: 6px; justify-self: stretch; margin-top: 2px; }
  .mr-doc-legend li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; }
  .mr-doc-legend .mr-doc-dot { position: static; }
  .mr-doc-legend li > span:last-child { font-family: var(--serif); font-size: 1rem; line-height: 1.3; }
  .mr-doc-legend .md-mono { display: none; }
  .mr-doc figcaption { display: none; }
}
@media (max-width: 640px) and (max-height: 760px) {
  /* Short phones: the sheet keeps its marked colour line; the three notes wait for a taller screen. */
  .mr-doc-notes, .mr-doc-legend { display: none; }
}