/* Maranello Data design system: the site set as a document.
   Sand paper, near-black ink and burgundy from the October brand book;
   Ancizar Serif for headlines, Inter Tight for reading, Cutive Mono for data. */

:root {
  --sand: #f6f4ed;
  --sand-deep: #ece8dc;
  --paper: #fdfcf8;
  --ink: #0b0d0a;
  --ink-2: #3d3c37;
  --ink-3: #66625a;
  --rule: #d8d2c3;
  --rule-strong: #a9a291;
  --burgundy: #5e0109;
  --burgundy-hover: #7a0a14;
  --on-burgundy: #f6f4ed;
  --on-burgundy-2: #e6cfcb;
  --on-ink-2: #c9c5b9;

  --serif: "Ancizar", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Cutive Mono", "Courier New", ui-monospace, monospace;

  --gutter: clamp(20px, 4.2vw, 64px);
  --rail: 1440px;
  --section: clamp(72px, 9vw, 152px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 72px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scrollbar-color: var(--rule-strong) var(--sand);
  background: var(--sand);
}

body.md {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--burgundy);
  overflow-x: clip;
}

:where(.md) ::selection { background: var(--burgundy); color: var(--on-burgundy); }

:where(.md) [hidden] { display: none !important; }

:where(.md) img { display: block; max-width: 100%; height: auto; }

:where(.md) a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

:where(.md) :focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: 1px;
}

:where(.md) :where(h1, h2, h3) { margin: 0; font-weight: 400; text-wrap: balance; }
:where(.md) p { margin: 0; text-wrap: pretty; }
:where(.md) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

@media (min-width: 961px) { .md-keep { white-space: nowrap; } }

.md-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.md-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--ink); color: var(--sand);
  font-weight: 600; text-decoration: none;
}
.md-skip:focus { top: 12px; }

.md-rail { width: 100%; max-width: calc(var(--rail) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

.md-mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Type */
.md-display {
  font-family: var(--serif);
  font-size: clamp(3.1rem, 1.4rem + 5.4vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
}
.md-h2 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.25rem + 2.7vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
}
.md-lead {
  font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 34ch;
}
.md-body-large { font-size: clamp(1.08rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }

/* Logo: the supplied wordmark used as a mask so it takes the surrounding ink. */
.md-logo { display: inline-flex; color: var(--ink); text-decoration: none; }
.md-logo-mark {
  display: block;
  width: 136px;
  aspect-ratio: 832 / 261;
  background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.md-logo-small .md-logo-mark { width: 84px; }
.md-logo-large .md-logo-mark { width: clamp(160px, 18vw, 220px); }

/* Buttons and links */
.md-button {
  --bg: var(--burgundy);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 52px; padding: 0 1.5rem;
  border: 0; border-radius: 2px;
  background: var(--bg); color: var(--on-burgundy);
  font: 600 1rem/1 var(--sans); letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 1px 2px rgba(40, 0, 4, 0.18);
  transition: background-color 180ms var(--ease-out), transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.md-button:hover { --bg: var(--burgundy-hover); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 8px 18px -10px rgba(60, 0, 6, 0.55); }
.md-button:active { transform: translateY(1px); }
.md-button-small { min-height: 42px; padding: 0 1.1rem; font-size: 0.9375rem; }

.md-arrow-link {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: gap 200ms var(--ease-out), color 200ms var(--ease-out);
}
.md-arrow-link::after {
  content: ""; width: 0.9em; height: 0.6em;
  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-arrow-link:hover { gap: 0.85em; color: var(--burgundy); }

.md-link-button {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
}

/* Evidence labels: one mark per standing, shared by the ledger, entries and the year strip. */
.md-label {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
}
.md-label::before { content: ""; width: 0.72em; height: 0.72em; flex: none; }
.md-label-documented::before, .is-documented { background: var(--ink); }
.md-label-supported::before, .is-supported { background: linear-gradient(var(--ink), var(--ink)) center / 45% 45% no-repeat; box-shadow: inset 0 0 0 1.5px var(--ink); }
.md-label-stated::before, .is-stated { background: var(--burgundy); }
.md-label-disputed::before, .is-disputed { background: repeating-linear-gradient(135deg, var(--burgundy) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1.5px var(--burgundy); }
.md-label-none::before, .is-none { box-shadow: inset 0 0 0 1px var(--rule-strong); }

/* The header, menu and footer also appear on older pages without body.md, so they carry their own base. */
:where(.md-header, .md-menu, .md-footer) { font-family: var(--sans); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }
:is(.md-header, .md-menu, .md-footer) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:is(.md-header, .md-menu, .md-footer) :where(p, h2) { margin: 0; font-weight: 400; }
:where(.md-header, .md-menu, .md-footer) :where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
:is(.md-header, .md-menu, .md-footer) :where(li)::before { content: none; }

/* Notice and header */
.md-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--sand) 94%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease-out), background-color 240ms var(--ease-out);
}
.md-header.is-scrolled { border-bottom-color: var(--rule); background: var(--sand); }
.md-header-inner { display: flex; align-items: center; gap: 28px; min-height: var(--header-h); }
.md-header .md-logo { margin-right: auto; padding: 6px 0; }
.md-nav ul { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.md-nav a {
  position: relative; display: inline-block; padding: 10px 0;
  font-size: 0.9375rem; font-weight: 500; text-decoration: none; color: var(--ink-2);
  transition: color 180ms var(--ease-out);
}
.md-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
.md-nav a:hover, .md-nav a[aria-current="page"] { color: var(--ink); }
.md-nav a:hover::after, .md-nav a[aria-current="page"]::after { transform: scaleX(1); }

.md-menu-button, .md-menu-close {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  align-items: center; justify-content: center;
  border: 0; background: none; color: var(--ink); cursor: pointer;
}
.md-menu-icon { position: relative; display: block; width: 22px; height: 10px; }
.md-menu-icon span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 260ms var(--ease-out); }
.md-menu-icon span:first-child { top: 0; }
.md-menu-icon span:last-child { bottom: 0; }
.md-menu-icon.is-open span:first-child { transform: translateY(4.25px) rotate(45deg); }
.md-menu-icon.is-open span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

.md-menu {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0 var(--gutter) max(28px, env(safe-area-inset-bottom));
  border: 0; background: var(--sand); color: var(--ink);
  flex-direction: column;
}
.md-menu[open] { display: flex; animation: md-menu-in 320ms var(--ease-out); }
.md-menu::backdrop { background: rgba(11, 13, 10, 0.3); }
.md-menu-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); border-bottom: 1px solid var(--rule); }
.md-menu-close { display: inline-flex; }
.md-menu-list { margin-top: 12px; }
.md-menu-list li { border-bottom: 1px solid var(--rule); }
.md-menu-list a { display: block; padding: 16px 0; font-family: var(--serif); font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.1; text-decoration: none; }
.md-menu-foot { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; }
.md-menu-foot .md-button { width: 100%; }
.md-menu-foot p { color: var(--ink-3); text-align: center; font-size: 0.9375rem; }
/* The way into Your records: quiet, beside the main action. */
.md-header-records { flex: none; font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color 180ms var(--ease-out); }
.md-header-records:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.md-menu-records { justify-self: center; color: var(--ink-2); font-size: 0.9375rem; text-underline-offset: 4px; }
@keyframes md-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .md-nav ul { gap: clamp(14px, 1.8vw, 28px); }
}
@media (max-width: 960px) {
  .md-nav { display: none; }
  .md-header-records { display: none; }
  .md-menu-button { display: inline-flex; }
  .md-header-inner { gap: 12px; }
}
@media (max-width: 520px) {
  :root { --header-h: 62px; }
  .md-header-cta { display: none; }
  .md-header .md-logo-mark { width: 116px; }
}

/* Footer */
.md-footer { padding: clamp(56px, 7vw, 96px) 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--sand); }
.md-footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; }
.md-footer-line { margin-top: 18px; font-family: var(--serif); font-size: 1.375rem; font-style: italic; color: var(--ink-2); }
.md-footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.md-footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.md-social { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--rule-strong); border-radius: 50%; color: var(--ink); transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out); }
.md-social svg { width: 20px; height: 20px; }
.md-footer-soon { align-self: center; margin-left: 6px; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 560px) { .md-footer-soon { flex-basis: 100%; margin-left: 0; } }
.md-social[href]:hover { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.md-social:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.md-nowrap { white-space: nowrap; }
.md-footer-nav h2 { margin-bottom: 14px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.md-footer-nav li + li { margin-top: 8px; }
.md-footer-nav a, .md-footer-nav .md-link-button { text-decoration: none; color: var(--ink-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.md-footer-nav a:hover, .md-footer-nav .md-link-button:hover { color: var(--burgundy); text-decoration: underline; }
.md-footer-legal { display: flex; justify-content: space-between; gap: 24px; margin-top: clamp(48px, 6vw, 80px); padding-top: 20px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 0.8125rem; }
.md-footer-legal p:first-child { max-width: 72ch; }
/* Phones: each footer link is a full row to tap. */
@media (max-width: 640px) {
  .md-footer-nav { row-gap: 24px; }
  .md-footer-nav h2 { margin-bottom: 2px; }
  .md-footer-nav li + li { margin-top: 0; }
  .md-footer-nav a, .md-footer-nav .md-link-button { display: flex; align-items: center; min-height: 44px; }
}
@media (max-width: 860px) {
  .md-footer-top { grid-template-columns: 1fr; }
  .md-footer-legal { flex-direction: column; }
}
@media (max-width: 520px) {
  .md-footer-nav { grid-template-columns: 1fr 1fr; }
  .md-footer-nav > div:nth-child(3) { grid-column: 1 / -1; }
}


/* Year strips: a row of years with the records in them. Each mark is one record.
   A dated record is a block in its year; a record that covers a period is one bar across it; records in the same year stack. */
.md-years-title { margin-top: 24px; font-size: 0.75rem; color: var(--ink-3); }
.md-years { --n: 26; --rows: 3; }
.md-years-over, .md-years-axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.md-years-over { position: relative; margin-top: 12px; }
.md-years-over > * { grid-row: 1; }
.md-years-gap {
  position: relative; padding-bottom: 9px; text-align: center; white-space: nowrap;
  font-family: var(--serif); font-style: italic; font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.125rem); line-height: 1.2; color: var(--burgundy);
}
.md-years-gap::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 6px;
  border: 1px solid var(--burgundy); border-bottom: 0;
}
.md-years-read {
  position: absolute; bottom: 4px; max-width: 100%; opacity: 0; pointer-events: none;
  font-size: 0.8125rem; line-height: 1.3; color: var(--ink); transition: opacity 180ms var(--ease-out);
}
.md-years.is-reading .md-years-read { opacity: 1; }
.md-years.is-reading .md-years-gap { visibility: hidden; }
.md-years-field { position: relative; height: clamp(36px, 3.6vw, 52px); margin-top: 6px; }
.md-years-strip, .md-years-marks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; }
.md-years-marks { grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); }
.md-year { border-radius: 2px; background: rgba(11, 13, 10, 0.06); }
.md-mark { position: relative; border-radius: 2px; transform-origin: bottom; transition: opacity 380ms var(--ease-out); }
.md-mark[tabindex] { cursor: pointer; }
.md-mark[tabindex]:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.md-years-field:has(.md-mark.is-lit) .md-mark:not(.is-lit) { opacity: 0.3; }
/* While a record is lit the gap steps back; while the gap is the subject, the records step back instead. */
.md-years-gap, .md-years-gap::after { transition: color 380ms var(--ease-out), border-color 380ms var(--ease-out); }
.md-years:has(.md-mark.is-lit) .md-years-gap { color: rgba(94, 1, 9, 0.35); }
.md-years:has(.md-mark.is-lit) .md-years-gap::after { border-color: rgba(94, 1, 9, 0.3); }
.md-years.is-gap-lit .md-mark { opacity: 0.3; }
.md-years-axis { margin-top: 8px; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-3); white-space: nowrap; }
.md-years-axis span:nth-child(2) { justify-self: center; }
.md-years-axis span:last-child { justify-self: end; }
.md-years-note { margin-top: 6px; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-3); }
.md-years-compact .md-years-over { display: none; }
.md-years-compact .md-years-field { height: 36px; margin-top: 14px; }
.md-years-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-2); }
.md-years-key li { display: inline-flex; align-items: center; gap: 8px; }
.md-years-key i { display: block; width: 10px; height: 10px; }

/* The one authored motion: the records arrive, left to right, the first time a strip is seen. */
.md-js .md-years:not(.is-in) .md-mark:not(.md-fill-target) { transform: scaleY(0); }
.md-js .md-years.is-in .md-mark:not(.md-fill-target) { animation: md-year-in 640ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(200ms + var(--i) * 34ms); }
.md-js .md-years:not(.is-in) .md-years-gap { opacity: 0; }
.md-js .md-years.is-in .md-years-gap { animation: md-fade 600ms var(--ease-out) 1.3s both; }
@keyframes md-year-in { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes md-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }


/* A year found: an illustrative strip where one missing year comes back on record. */
.md-fill { margin: 0; }
.md-fill-card {
  position: relative; padding: clamp(24px, 3vw, 36px);
  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-fill-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid #c9c2b1; pointer-events: none; }
.md-fill-head { display: flex; justify-content: space-between; color: var(--ink-3); }
.md-fill-head .md-mono { font-size: 0.75rem; }
.md-fill-car { margin-top: 14px; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1.1; letter-spacing: -0.015em; }
.md-fill-car span { color: var(--ink-3); }
.md-fill .md-years-over { margin-top: 18px; }
.md-fill .md-years-gap { display: grid; }
.md-fill .md-years-gap > span { grid-area: 1 / 1; transition: opacity 400ms var(--ease-out); }
.md-fill .md-years-gap .is-after { opacity: 0; }
.md-fill.is-found .md-years-gap .is-before { opacity: 0; }
.md-fill.is-found .md-years-gap .is-after { opacity: 1; }
.md-fill-target { position: relative; transition: background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.md-fill:not(.is-found) .md-fill-target { background: transparent; outline: 1.5px dashed var(--burgundy); outline-offset: -1.5px; }
.md-fill.is-found .md-fill-target { background: var(--ink); box-shadow: none; animation: md-found 700ms var(--ease-out); }
@keyframes md-found { 0% { transform: scaleY(0.2); } 60% { transform: scaleY(1.12); } 100% { transform: scaleY(1); } }
.md-fill-note {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline;
  margin-top: 18px; padding: 14px 16px; border: 1px solid var(--ink); background: var(--sand);
  max-height: 16rem; overflow: hidden;
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), max-height 600ms var(--ease-out), margin-top 600ms var(--ease-out), padding 600ms var(--ease-out);
}
.md-fill-note .md-mono { font-size: 0.75rem; }
.md-fill-note p { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.875rem; }
.md-fill-note .md-label { font-size: 0.75rem; }
.md-fill.is-pending .md-fill-note { opacity: 0; transform: translateY(8px); }
/* Stacked on narrow screens, the note takes no room while the year is missing; the card opens when the document arrives. */
@media (max-width: 960px) {
  .md-fill.is-pending .md-fill-note { max-height: 0; margin-top: 0; padding-block: 0; border-color: transparent; }
}
.md-fill.is-found .md-fill-note { opacity: 1; transform: none; transition-delay: 350ms; }
.md-fill figcaption { margin-top: 12px; color: var(--ink-3); font-size: 0.8125rem; }

/* Shared sections: questions and the closing band */
/* FAQ */
.md-faq { padding: var(--section) 0; }
.md-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.md-faq-grid .md-h2 { position: sticky; top: calc(var(--header-h) + 32px); }
.md-faq-list { border-top: 1px solid var(--ink); }
.md-faq-list details { border-bottom: 1px solid var(--rule); }
.md-faq-list summary {
  position: relative; display: block; padding: 22px 48px 22px 0;
  list-style: none; cursor: pointer;
  font-size: clamp(1.08rem, 1rem + 0.3vw, 1.25rem); font-weight: 500;
}
.md-faq-list summary::-webkit-details-marker { display: none; }
.md-faq-list summary::before, .md-faq-list summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 1.5px; background: currentColor;
  transition: transform 260ms var(--ease-out);
}
.md-faq-list summary::after { transform: rotate(90deg); }
.md-faq-list details[open] summary::after { transform: rotate(0deg); }
.md-faq-list details.is-closing summary::after { transform: rotate(90deg); }
/* While an answer is open its section holds the content where it stood and grows downward (md-system.js sets --held). */
main > section.is-held { align-content: start; }
main > section.is-held > :first-child { margin-top: var(--held); }
.md-faq-list summary:hover { color: var(--burgundy); }
.md-faq-list details p { padding: 0 48px 24px 0; color: var(--ink-2); max-width: 62ch; }

/* Closing */
.md-closing { padding: var(--section) 0; background: var(--ink); color: var(--sand); }
.md-closing ::selection { background: var(--sand); color: var(--ink); }
.md-closing-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: end; }
.md-closing-type { min-height: 1.4em; margin-bottom: 22px; color: #a8a499; font-size: 0.875rem; letter-spacing: 0.24em; }
.md-closing-type .is-caret { display: inline-block; width: 0.6em; margin-left: 2px; border-bottom: 2px solid currentColor; animation: md-blink 1s steps(1) infinite; }
.md-closing-title { font-family: var(--serif); font-size: clamp(2.8rem, 1.4rem + 4.6vw, 5.75rem); line-height: 0.98; letter-spacing: -0.025em; }
.md-closing-title em { display: block; color: #bdb8ab; }
.md-closing :focus-visible { outline-color: var(--sand); }
/* The closing with questions: the form beneath the title, the questions beside them, on ink. */
.md-closing-questions-on .md-closing-grid { align-items: center; }
.md-closing-questions-on .md-closing-main .md-check { margin-top: clamp(22px, 4svh, 48px); }
.md-closing-questions-title { margin-bottom: 12px; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: #a8a499; }
.md-closing .md-faq-list { border-top-color: rgba(246, 244, 237, 0.55); }
.md-closing .md-faq-list details { border-bottom-color: rgba(246, 244, 237, 0.16); }
.md-closing .md-faq-list summary { padding-block: clamp(11px, 1.8svh, 17px); font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.0625rem); }
.md-closing .md-faq-list summary:hover { color: #fff; }
.md-closing .md-faq-list details p { padding-bottom: 16px; color: var(--on-ink-2); font-size: 0.9375rem; }
@media (max-width: 640px) {
  .md-closing.md-closing-questions-on { padding-block: clamp(16px, 3svh, 28px); }
  .md-closing-questions-on .md-closing-grid { gap: 22px; }
  .md-closing-questions-on .md-closing-main .md-check { margin-top: 14px; }
  .md-closing-questions-title { margin-bottom: 8px; }
  .md-closing .md-faq-list summary { padding: 10px 36px 10px 0; font-size: 0.9375rem; line-height: 1.3; }
  .md-closing .md-faq-list details p { padding-right: 0; font-size: 0.875rem; }
}
@media (max-width: 960px) {
  .md-faq-grid, .md-closing-grid { grid-template-columns: 1fr; }
  .md-faq-grid .md-h2 { position: static; }
}

/* Shared page layer: the Chassis Check form, one screen per section and the closing band, used by every redesigned page. */
/* The Chassis Check form: the number set like the entry card's typed chassis line. */
.md-check-label, .md-field label, .md-field legend {
  display: block; margin-bottom: 10px; padding: 0;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.md-check-row {
  display: flex; align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  box-shadow: 0 18px 40px -28px rgba(50, 30, 10, 0.45);
  transition: box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.md-check-row:focus-within { box-shadow: 0 0 0 3px rgba(94, 1, 9, 0.16), 0 18px 40px -28px rgba(50, 30, 10, 0.45); }
.md-check-input {
  flex: 1; min-width: 0;
  padding: 0 18px; min-height: 64px;
  border: 0; background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); letter-spacing: 0.2em; text-transform: uppercase;
}
.md-check-input::placeholder { color: #8f8a7e; letter-spacing: 0.12em; text-transform: none; }
.md-check-input:focus { outline: none; }
.md-check-button { min-height: auto; margin: 6px; padding-inline: 1.35rem; }
.md-check-hint { margin-top: 12px; color: var(--ink-3); font-size: 0.9375rem; }
.md-check-hint a { color: inherit; }
.md-check-error { margin-top: 12px; color: var(--burgundy); font-weight: 500; font-size: 0.9375rem; }
.md-check-error a { font-weight: 600; }
.md-check-error:focus { outline: none; }
.md-check.has-error .md-check-row { border-color: var(--burgundy); }
/* Closing form on ink */
.md-check-dark .md-check-label { color: var(--on-ink-2); }
.md-check-dark .md-check-row { background: transparent; border-color: rgba(246, 244, 237, 0.7); box-shadow: none; }
.md-check-dark .md-check-row:focus-within { box-shadow: 0 0 0 3px rgba(246, 244, 237, 0.2); }
.md-check-dark .md-check-input { color: var(--sand); }
.md-check-dark .md-check-input::placeholder { color: #8e8b82; }
.md-check-dark .md-check-button { --bg: var(--sand); color: var(--burgundy); box-shadow: none; }
.md-check-dark .md-check-button:hover { --bg: #fff; }
.md-check-dark .md-check-hint { color: var(--on-ink-2); }
.md-check-dark .md-check-error { color: #f0b9b3; }
.md-closing :focus-visible { outline-color: var(--sand); }
@media (max-width: 640px) {
  .md-check-row { flex-direction: column; }
  .md-check-input { min-height: 58px; }
  .md-check-button { margin: 0 6px 6px; min-height: 50px; }
}

/* One screen per section. A section marked .md-screen is as tall as the screen below the header, never taller, with its
   content centred. Large type and gaps follow the screen's height as well as its width. A section marked .md-fit that
   still spills over on an unusual screen is scaled down a little by md-system.js, never below 78%. */
:root { --screen: calc(100svh - var(--header-h)); --flow: clamp(40px, 10vw, 64px); }
.md-screen { min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(20px, 5svh, 72px); }
.md-stories { min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(20px, 5svh, 72px); }
.md-faq { min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(20px, 5svh, 72px); }
.md-faq-list summary { padding-block: clamp(12px, 2.4svh, 22px); }
.md-closing { min-height: var(--screen); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(20px, 5svh, 72px); }
.md-closing-title { font-size: clamp(2.6rem, min(1.4rem + 4.6vw, 11svh), 5.75rem); }
.md-kicker { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }

/* Stories, shared by the homepage and the Stories page: a cover and its contents, like the opening spread of a magazine. The cover photograph slowly settles,
   its title rises in, and the matching line in the contents turns burgundy. */
.md-stories-grid {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-areas: "head head" "cover contents";
  column-gap: clamp(28px, 3.6vw, 64px); row-gap: clamp(16px, 3svh, 36px);
}
.md-stories-head { grid-area: head; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: clamp(12px, 2svh, 22px); border-bottom: 1px solid var(--ink); }
.md-stories-kicker { font-size: 0.75rem; letter-spacing: 0.14em; color: var(--ink-3); }
.md-stories-head .md-h2 { margin-top: 6px; }
.md-cover { --cap: 38px; grid-area: cover; position: relative; height: clamp(260px, min(67svh, calc(100svh - 300px)), 820px); overflow: hidden; background: var(--ink); }
.md-cover-story { position: absolute; inset: 0; display: block; color: var(--sand); text-decoration: none; opacity: 0; visibility: hidden; transition: opacity 800ms var(--ease-out), visibility 0s linear 800ms; }
.md-cover-story.is-active { z-index: 1; opacity: 1; visibility: visible; transition-delay: 0s; }
.md-cover-story img { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - var(--cap)); object-fit: cover; scale: 1.07; transition: scale 7s cubic-bezier(0.2, 0.6, 0.3, 1); }
.md-cover-story.is-active img { scale: 1; }
.md-cover-shade { position: absolute; inset: 0 0 var(--cap); background: linear-gradient(180deg, rgba(11, 13, 10, 0) 22%, rgba(11, 13, 10, 0.38) 52%, rgba(11, 13, 10, 0.86) 100%); }
/* The chassis and the photograph's source sit in a caption strip under the image, like a magazine caption. */
.md-cover-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px 18px; min-height: var(--cap); padding: 0 2px; background: var(--sand); border-top: 1px solid var(--ink); color: var(--ink-2); }
.md-cover-caption .md-mono { font-size: 0.75rem; letter-spacing: 0.08em; }
.md-cover-caption .md-mono + .md-mono { color: var(--ink-3); text-align: right; }
.md-cover-text { position: absolute; left: 0; right: 0; bottom: var(--cap); display: grid; justify-items: start; gap: 10px; padding: clamp(18px, 3vw, 44px); }
.md-cover-title { max-width: 16ch; font-family: var(--serif); font-size: clamp(2rem, min(1.2rem + 2.8vw, 7svh), 4rem); line-height: 1; letter-spacing: -0.02em; }
.md-cover-dek { max-width: 44ch; color: rgba(246, 244, 237, 0.84); font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem); line-height: 1.45; }
.md-cover-read { display: inline-flex; gap: 8px; margin-top: 4px; padding-bottom: 3px; border-bottom: 1px solid currentColor; font-size: 0.9375rem; font-weight: 600; }
.md-cover-read::after { content: "→"; }
.md-cover-story .md-cover-text > * { opacity: 0; transform: translateY(12px); transition: opacity 160ms ease-in, transform 160ms ease-in; }
.md-cover-story.is-active .md-cover-text > * { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out) 320ms, transform 700ms var(--ease-out) 320ms; }
.md-cover-story.is-active .md-cover-text > :nth-child(2) { transition-delay: 380ms; }
.md-cover-story.is-active .md-cover-text > :nth-child(3) { transition-delay: 450ms; }
.md-cover-caption { transition: opacity 300ms var(--ease-out); }
.md-cover-story:not(.is-active) .md-cover-caption { opacity: 0; }
.md-cover-story:hover .md-cover-read { color: #fff; }
.md-contents { position: relative; grid-area: contents; display: grid; grid-template-rows: repeat(var(--count, 6), minmax(0, 1fr)); }
.md-contents li { position: relative; z-index: 1; border-bottom: 1px solid var(--rule); }
/* The story on the cover is being viewed: a soft band with a burgundy edge sits behind its line and glides to the next
   one when the cover turns. A hairline along its foot fills while the cover waits to turn, and stops while held. */
.md-contents::before, .md-contents::after {
  content: ""; position: absolute; left: -14px; right: 0; top: 0; pointer-events: none;
  transform: translateY(var(--glow-y, 0px)); transition: transform 700ms var(--ease-out), height 700ms var(--ease-out);
}
.md-contents::before { height: var(--glow-h, 0px); border-left: 2px solid var(--burgundy); background: rgba(94, 1, 9, 0.045); opacity: 0; }
.md-contents.is-placed::before { opacity: 1; transition: transform 700ms var(--ease-out), height 700ms var(--ease-out), opacity 500ms var(--ease-out); }
.md-contents::after { left: 0; right: 0; height: 1px; translate: 0 calc(var(--glow-h, 0px) - 1px); background: var(--burgundy); transform-origin: left; scale: 0 1; }
.md-contents.is-turning::after { transform: translateY(var(--glow-y, 0px)); animation: md-turn var(--turn, 6500ms) linear forwards; }
.md-contents.is-paused::after { animation-play-state: paused; }
@keyframes md-turn { from { scale: 0 1; } to { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) {
  .md-contents::before { transition: none; }
  .md-contents::after { display: none; }
}
.md-contents a {
  display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); column-gap: 12px; align-content: center; height: 100%; padding: 8px 0;
  color: var(--ink); text-decoration: none;
}
.md-contents-n { grid-row: 1 / span 2; align-self: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 0.8rem + 1.6svh, 1.9rem); color: var(--ink-3); transition: color 300ms var(--ease-out); }
.md-contents-sn { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-3); }
.md-contents-title { margin-top: 2px; font-family: var(--serif); font-size: clamp(1.1rem, min(0.85rem + 0.8vw, 3.1svh), 1.65rem); line-height: 1.15; transition: color 300ms var(--ease-out); }
.md-contents a:hover .md-contents-title, .md-contents a[aria-current="true"] .md-contents-title,
.md-contents a:hover .md-contents-n, .md-contents a[aria-current="true"] .md-contents-n { color: var(--burgundy); }
.md-cover-gap { font-family: var(--serif); font-style: italic; font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.125rem); color: #e8cbc6; }
/* A band beneath the spread: where the stories lead next, in one line and one link. */
.md-stories-banded .md-stories-grid { grid-template-areas: "head head" "cover contents" "band band"; }
.md-stories-banded .md-cover { height: clamp(240px, min(57svh, calc(100svh - 400px)), 740px); }
.md-stories-band {
  grid-area: band; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 6px clamp(20px, 3vw, 48px);
  padding-top: clamp(12px, 2svh, 20px); border-top: 1px solid var(--ink);
}
.md-stories-band-title { font-family: var(--serif); font-size: clamp(1.25rem, min(1rem + 0.8vw, 3.6svh), 1.75rem); line-height: 1.15; color: var(--burgundy); }
.md-stories-band-text { max-width: 66ch; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.md-stories-band .md-arrow-link { justify-self: end; white-space: nowrap; }

/* Phones and tablets: the cover above, the contents below, both within one screen. */
@media (max-width: 960px) {
  .md-stories-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "cover" "contents"; row-gap: 14px; }
  .md-stories-banded .md-stories-grid { grid-template-areas: "head" "cover" "contents" "band"; }
  .md-stories-banded .md-cover { height: clamp(180px, 24svh, 360px); }
  .md-stories-band { grid-template-columns: minmax(0, 1fr) auto; }
  .md-stories-band-title { grid-column: 1 / -1; }
  .md-cover { height: clamp(200px, 38svh, 460px); }
  .md-contents { grid-template-rows: none; }
  .md-contents a { padding: 9px 0; }
}
@media (max-width: 640px) {
  .md-stories-banded .md-cover { height: clamp(160px, 22svh, 260px); }
  .md-stories-band { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 10px; }
  .md-stories-band .md-arrow-link { justify-self: start; }
  .md-stories-band-title { font-size: 1.2rem; }
  .md-stories-band-text { font-size: 0.875rem; line-height: 1.45; }
  .md-stories-head .md-h2 { font-size: clamp(1.6rem, 7vw, 2rem); }
  .md-stories-head { gap: 16px; }
  .md-stories-head .md-arrow-link { font-size: 0.875rem; }
  .md-cover-dek, .md-cover-read { display: none; }
  .md-cover-title { font-size: clamp(1.5rem, 6.6vw, 1.9rem); }
  .md-cover-text { gap: 6px; padding: 16px; }
  .md-cover { --cap: 46px; }
  .md-cover-caption { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
  .md-cover-caption .md-mono { font-size: 0.75rem; }
  .md-cover-caption .md-mono + .md-mono { text-align: left; }
  .md-contents a { grid-template-columns: 2.1rem minmax(0, 1fr); padding: 8px 0; }
  .md-contents-sn { display: none; }
  .md-contents-n { grid-row: auto; font-size: 1.15rem; }
  .md-contents-title { font-size: 1.0625rem; }
}
@media (max-width: 640px) and (max-height: 760px) {
  .md-cover { height: clamp(180px, 36svh, 300px); }
  .md-contents a { padding: 6px 0; }
  .md-contents-title { font-size: 1rem; }
}

/* Ink button for light grounds */
.md-button-ink { --bg: var(--ink); color: var(--sand); }
.md-button-ink:hover { --bg: #23251f; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .md *, .md *::before, .md *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
}

@media print {
  .md-header, .md-menu, .md-footer-nav, #cookie-consent { display: none !important; }
}

/* Phones and tablets: every page scrolls as one piece. A section is as tall as what it holds (never taller than the
   screen), its first line sits --flow under its top, and the gap between sections is the same everywhere, so a tall
   phone shows no empty bands and headings keep one distance from the header. Scenes that play while they hold the
   screen keep it: the Rewards journey, the About film, the Register line-up, the photographed chapters of Stories. */
@media (max-width: 960px) {
  :root body :is(.md-screen, .md-stories, .md-faq, .md-closing,
    .ab-hero, .ab-manifesto, .ab-how, .ab-evidence, .ab-next,
    .mr-open, .mr-board, .mr-hides, .mr-proof, .mr-owners,
    .dl-open, .dl-what, .dl-does, .dl-get, .dl-cost,
    .st-coda, .rg-hero, .rg-scale, .ck-hero, .ck-how, .or-main, .or-next,
    .ac-signin, .ac-welcome, .ac-desk, .ac-screen) {
    min-height: 0; align-content: start; padding-block: var(--flow);
  }
}

/* Phones and tablets: the first thing on every page, its kicker, title or picture, sits exactly --flow under the
   header (or under a file's own bar), never pushed further down to fill the screen. On the homepage the title stays
   under the logo and the form keeps its place at the foot of the first screen. */
@media (max-width: 960px) {
  :root body :is(.st-intro, .fo-head, .fo-mapview .fo-journey) { padding-top: var(--flow); }
  :root body .md-hero .md-hero-copy { padding-top: var(--flow); }
  :root body .md-hero .md-hero-copy .md-display { margin-top: 0; }
}

/* Phones: the closing band takes more room than the other sections, so its few words and the form can breathe. */
@media (max-width: 640px) {
  :root body .md-closing { padding-block: clamp(72px, 20vw, 104px); }
  .md-closing-grid, .md-closing-questions-on .md-closing-grid { gap: 56px; }
  .md-closing-type { margin-bottom: 28px; }
  .md-closing-title { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .md-closing-questions-on .md-closing-main .md-check { margin-top: 36px; }
  .md-closing-questions-title { margin-bottom: 14px; }
  .md-closing .md-faq-list summary { padding-block: 16px; font-size: 1rem; }
}