/* /learn-msc-history: its own sheet, loaded after site.css.
   One idea runs the page: time drawn to scale. Every year on the page sits
   where it belongs between 1968 and today (--mh-now), so the long quiet
   decades and the crowded recent ones can be seen, not just read.
   A year's place is always the same sum:
     (year - 1968) / (now - 1968)
   Script: scripts/learn-msc-history.js. With that script absent every part
   is visible, every mark is drawn and every link still jumps. */

html:has(body.msc-history) {
  --hc-nav-h: 64px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px);
}
.msc-history {
  --mh-now: 2026;              /* the script moves this to the current year */
  --mh-span: calc(var(--mh-now) - 1968);
  --mh-miss: #e89b9b;          /* the missed endpoint, on navy */
  --mh-ease: cubic-bezier(.16, 1, .3, 1);
  --mh-gut: clamp(20px, 4vw, 56px);
}

/* ============ GROUND RULES ============ */
.mh-wrap { max-width: calc(1240px + 2 * var(--mh-gut)); margin-inline: auto; padding-inline: var(--mh-gut); }
/* text fills its column; the column sets the measure */
.msc-history main p { max-width: none; margin: 0; }
/* a part sliding in from the side never widens the page (clip keeps the ruler sticky) */
.msc-history main > section { overflow-x: clip; }
.msc-history main a:not(.btn) { border-bottom: 0; }
.msc-history main :is(ol, ul) { list-style: none; margin: 0; padding: 0; }
.msc-history main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.1; letter-spacing: -.01em;
  margin: 0; max-width: none; text-wrap: wrap;
}
.msc-history main h3 { margin: 0; max-width: none; }
.msc-history main :is(a, .btn, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.msc-history :is(.mh-fail, .mh-gap) a:focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.msc-history main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }
.msc-history main abbr { text-decoration: none; }

/* a term another page explains */
.mh-term { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--accent-blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.mh-term:hover { color: var(--accent-blue-hover); text-decoration-style: solid; }

/* the four kinds of paper: one mark each, the same in the drawing and the list */
.mh-k--f { fill: var(--ink); }
.mh-k--c { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
.mh-k--r { fill: var(--accent-blue); }
.mh-k--m { fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (mh-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
@keyframes mh-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes mh-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes mh-line { from { transform: scaleX(0); } }
@keyframes mh-pop { from { transform: translate(-50%, -50%) scale(0); } 70% { transform: translate(-50%, -50%) scale(1.5); } }
@keyframes mh-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mh-land { from { opacity: 0; transform: translate(-10px, -26px) rotate(-7deg); } }
@keyframes mh-stamp { from { opacity: 0; transform: scale(1.7) rotate(-14deg); } 60% { opacity: 1; transform: scale(.94) rotate(0); } }
@keyframes mh-fill { from { transform: scaleY(0); } }
@keyframes mh-unfold { from { opacity: 0; transform: translateY(-8px); } }
@keyframes mh-march { to { stroke-dashoffset: -22; } }
@keyframes mh-ping { from { box-shadow: 0 0 0 0 rgba(45, 110, 177, .45); } to { box-shadow: 0 0 0 12px rgba(45, 110, 177, 0); } }
@keyframes mh-slide { from { opacity: 0; transform: translateX(28px); } }

.mh-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--mh-ease); }
.mh-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
/* these stay put and bring their parts in instead */
.mh-js :is([data-r="era"], [data-r="rows"], [data-r="stack"], [data-r="vials"], [data-r="pair"], [data-r="stamp"], [data-r="slots"], [data-r="trail"]):not(.is-in) { opacity: 1; transform: none; }

/* ============ HERO ============ */
.mh-hero { padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 72px); }
.mh-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4.3vw, 3.9rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 52px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.mh-hero__h1 > .h-lead, .mh-hero__h1 > em { display: inline-block; }
.mh-hero__h1 > em { color: var(--accent-blue); }
.mh-hero__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.mh-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.6; color: var(--ink); }
.mh-hero__lede { margin-top: 18px !important; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }

.mh-toc { border-top: 1px solid var(--border-strong); }
.mh-toc__list a {
  position: relative; display: flex; align-items: center; min-height: 48px; padding: 10px 34px 10px 0;
  font-size: 16px; line-height: 1.35; color: var(--ink);
  transition: color 200ms, padding-left 360ms var(--mh-ease);
}
.mh-toc__list li { border-bottom: 1px solid var(--border); }
.mh-toc__list a::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -7px;
  border-right: 2px solid var(--accent-blue); border-bottom: 2px solid var(--accent-blue);
  transform: rotate(45deg); opacity: .5; transition: opacity 200ms, transform 360ms var(--mh-ease);
}
.mh-toc__list a:hover, .mh-toc__list a:focus-visible { color: var(--accent-blue-hover); padding-left: 8px; }
.mh-toc__list a:hover::after, .mh-toc__list a:focus-visible::after { opacity: 1; transform: translateY(3px) rotate(45deg); }

/* the whole span on one line: 1968 at the left edge, this year at the right */
.mh-span { margin: clamp(36px, 5vw, 64px) 0 0; }
.mh-span__axis { position: relative; height: 158px; }
.mh-span__axis > * { position: absolute; left: calc((var(--yr) - 1968) / var(--mh-span) * 100%); }
.mh-span__line { left: 0 !important; right: 0; top: 116px; height: 2px; background: var(--ink); transform-origin: left; }
.mh-span__tick { top: 117px; width: 1px; height: 9px; background: var(--border-strong); }
.mh-span__tick b { position: absolute; top: 14px; left: 0; transform: translateX(-50%); font: 400 13px/1 var(--font-body); color: var(--ink-muted); }
.mh-span__dot { top: 117px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px #fff; transform: translate(-50%, -50%); }
/* the right-hand end of the line is this year, and says so */
.mh-span__now { top: 131px; transform: translateX(-100%); font: 600 13px/1 var(--font-body); color: var(--ink); }
/* pointing at a line of the contents shows which years that part is about */
.mh-span__band { left: calc((var(--from) - 1968) / var(--mh-span) * 100%) !important; width: calc((var(--to) - var(--from)) / var(--mh-span) * 100%); top: 109px; height: 16px; border-radius: 3px; background: rgba(45, 110, 177, .2); opacity: 0; transition: opacity 260ms; }
.mh-span__dot { transition: background-color 260ms, opacity 260ms, scale 420ms var(--mh-ease); }
.mh-span.is-asked .mh-span__dot { opacity: .22; }
.mh-span.is-asked .mh-span__dot.is-on { opacity: 1; background: var(--accent-blue); scale: 1.5; }
.mh-span.is-asked .mh-span__band.is-on { opacity: 1; }
/* a name stands on its year: low or high, so neighbours never touch */
.mh-span__flag { bottom: 41px; padding-bottom: 16px; transform: translateX(-50%); text-align: center; font-size: 14px; line-height: 1.25; color: var(--ink-muted); white-space: nowrap; }
.mh-span__flag b { display: block; font: 400 1.5rem/1 var(--font-display); color: var(--ink); margin-bottom: 3px; }
.mh-span__flag::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 1px; height: 9px; background: var(--ink); }
.mh-span__flag--up { padding-bottom: 62px; }
.mh-span__flag--up::after { height: 55px; }
.mh-span__flag--first { transform: none; text-align: left; }
.mh-span__flag--first::after { left: 0; }
.mh-span__flag--last { transform: translateX(-100%); text-align: right; }
.mh-span__flag--last::after { left: auto; right: 0; }

/* first paint: the heading, the answer, then sixty years run left to right */
.mh-js .mh-hero__h1 > * { animation: mh-up 900ms var(--mh-ease) both; }
.mh-js .mh-hero__h1 > em { animation-delay: 110ms; }
.mh-js .mh-hero__text > * { animation: mh-up 900ms var(--mh-ease) 240ms both; }
.mh-js .mh-hero__text > :last-child { animation-delay: 340ms; }
.mh-js .mh-toc__list li { animation: mh-rise 800ms var(--mh-ease) both; animation-delay: calc(480ms + var(--i, 0) * 70ms); }
.mh-toc__list li:nth-child(2) { --i: 1; } .mh-toc__list li:nth-child(3) { --i: 2; } .mh-toc__list li:nth-child(4) { --i: 3; }
.mh-toc__list li:nth-child(5) { --i: 4; } .mh-toc__list li:nth-child(6) { --i: 5; }
.mh-js .mh-span__line { animation: mh-line 2200ms linear 700ms both; }
/* each mark appears as the line reaches its year */
.mh-js .mh-span__axis > :not(.mh-span__line) { --at: calc(700ms + (var(--yr) - 1968) / var(--mh-span) * 2200ms); }
.mh-js .mh-span__dot { animation: mh-pop 420ms var(--mh-ease) var(--at) both; }
.mh-js .mh-span__tick { animation: mh-rise 500ms ease var(--at) both; }
.mh-js .mh-span__flag { animation: mh-rise 700ms var(--mh-ease) var(--at) both; }
.mh-js .mh-span__now { animation: mh-rise 700ms var(--mh-ease) 2900ms both; }
.mh-js .mh-span__band { --at: 0ms; }

/* ============ CONTENTS BAR (follows the reader) ============ */
.msc-history .hc-bar {
  /* under the phone menu's sheet (55) and backdrop (50), over the page */
  position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49;
  height: var(--hc-bar-h);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--mh-ease), visibility 0s 360ms;
}
.msc-history .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--mh-ease); }
body.msc-history.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.msc-history .hc-bar__track {
  max-width: calc(1240px + 2 * var(--mh-gut)); margin: 0 auto; padding: 0 var(--mh-gut);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.msc-history .hc-bar__track::-webkit-scrollbar { display: none; }
.msc-history .hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color 200ms;
}
.msc-history .hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--mh-ease);
}
.msc-history .hc-bar__track a:hover, .msc-history .hc-bar__track a[aria-current] { color: var(--ink); }
.msc-history .hc-bar__track a:hover::after { transform: scaleX(.35); }
.msc-history .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.msc-history .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.msc-history .hc-bar__progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0));
}
/* the track can run wider than a phone: its ends fade where more is waiting */
.msc-history .hc-bar::before, .msc-history .hc-bar::after {
  content: ""; position: absolute; top: 2px; bottom: 0; width: 28px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 200ms;
}
.msc-history .hc-bar::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.msc-history .hc-bar::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.msc-history .hc-bar.has-left::before, .msc-history .hc-bar.has-right::after { opacity: 1; }

/* ============ THE FIVE ERAS ============ */
.mh-eras { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.mh-eras__intro { margin-block: clamp(20px, 3vw, 36px) clamp(40px, 5vw, 72px); }
.mh-eras__lead { font-family: var(--font-display); font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.3; color: var(--ink); }
.mh-eras__intro p + p { margin-top: 16px !important; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.mh-eras__grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 6vw, 104px); align-items: start; }

/* the ruler stays beside the reader while the list scrolls past */
.mh-rule { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); margin: 0; }
.mh-rule__axis { position: relative; height: clamp(280px, calc(100vh - var(--hc-nav-h) - var(--hc-bar-h) - 150px), 600px); }
.mh-rule__axis > * { position: absolute; top: calc((var(--yr) - 1968) / var(--mh-span) * 100%); }
.mh-rule__line { top: 0 !important; bottom: 0; left: 62px; width: 2px; background: var(--ink); }
.mh-rule__tick { left: 53px; width: 9px; height: 1px; background: var(--border-strong); }
.mh-rule__tick b { position: absolute; right: 15px; top: 0; transform: translateY(-50%); font: 400 13px/1 var(--font-body); color: var(--ink-muted); }
.mh-rule__era {
  top: calc((var(--from) - 1968) / var(--mh-span) * 100% + 2px) !important;
  height: calc((var(--to) - var(--from)) / var(--mh-span) * 100% - 4px);
  left: 78px; right: 0; display: flex; align-items: center; padding-left: 14px;
  border-left: 3px solid var(--border-strong); transition: border-color 300ms;
}
.mh-rule__era b { font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--ink-muted); transition: color 300ms; }
.mh-rule__era.is-on { border-left-color: var(--accent-blue); }
.mh-rule__era.is-on b { color: var(--ink); }
.mh-rule__dot { left: 63px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px #fff; transform: translate(-50%, -50%); transition: background-color 240ms, transform 360ms var(--mh-ease); }
.mh-rule__dot.is-lit { background: var(--accent-blue); transform: translate(-50%, -50%) scale(1.35); }
/* a ring that rides the ruler to the year being read */
.mh-rule__here { top: 0 !important; left: 63px; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid var(--accent-blue); border-radius: 50%; opacity: 0; transform: translateY(var(--mh-y, 0px)); transition: transform 520ms var(--mh-ease), opacity 300ms; }
.mh-rule__here b { display: none; }
.mh-js .mh-rule.is-live .mh-rule__here { opacity: 1; }
.mh-rule figcaption { margin-top: 18px; padding-left: 62px; font-size: 14px; color: var(--ink-muted); }

.mh-era + .mh-era { margin-top: clamp(36px, 4vw, 56px); }
.mh-era__head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; padding-bottom: 14px; }
.mh-era__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border-strong); transform-origin: left; transition: transform 1100ms var(--mh-ease) 120ms; }
.mh-era h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; color: var(--ink); }
.mh-era__yrs { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.mh-ev { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 16px; align-items: baseline; padding: 16px 0 16px 14px; border-bottom: 1px solid var(--border); font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.mh-ev b { font: 400 1.35rem/1.2 var(--font-display); color: var(--ink); transition: color 240ms; }
.mh-ev::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 2px; background: var(--accent-blue); transform: scaleY(0); transform-origin: top; transition: transform 420ms var(--mh-ease); }
.mh-ev.is-lit::before { transform: scaleY(1); }
.mh-ev.is-lit b { color: var(--accent-blue-hover); }
/* an era's rule is drawn, then its three events step in from the right */
.mh-js [data-r="era"]:not(.is-in) .mh-era__head::after { transform: scaleX(0); }
.mh-js [data-r="era"]:not(.is-in) :is(.mh-era__head > *, .mh-ev) { opacity: 0; }
.mh-js [data-r="era"].is-in .mh-era__head > * { animation: mh-rise 700ms var(--mh-ease) both; }
.mh-js [data-r="era"].is-in .mh-ev { animation: mh-slide 760ms var(--mh-ease) both; }
.mh-js [data-r="era"].is-in .mh-ev:nth-child(1) { animation-delay: 160ms; }
.mh-js [data-r="era"].is-in .mh-ev:nth-child(2) { animation-delay: 280ms; }
.mh-js [data-r="era"].is-in .mh-ev:nth-child(3) { animation-delay: 400ms; }

/* ============ TWELVE PAPERS ============ */
.mh-papers { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.mh-papers__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 88px); align-items: center; margin-block: clamp(20px, 3vw, 36px) clamp(28px, 4vw, 48px); }
.mh-papers__head p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.mh-papers__fig { margin: 0; }
.mh-stack { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; }
.mh-sheet__p { fill: #fff; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.mh-sheet__fold { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.mh-sheet__l { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-linecap: round; }
.mh-sheet { transform-box: fill-box; transform-origin: 50% 100%; }
.mh-js [data-r="stack"]:not(.is-in) .mh-sheet { opacity: 0; }
.mh-js [data-r="stack"].is-in .mh-sheet { animation: mh-land 620ms var(--mh-ease) both; animation-delay: calc(var(--i) * 85ms); }
.mh-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font-size: 14px; color: var(--ink-muted); }
.mh-key span, .mh-paper__kind { display: inline-flex; align-items: center; gap: 8px; }
.mh-key svg, .mh-paper__kind svg { width: 12px; height: 12px; flex: none; overflow: visible; }

.mh-papers__list { border-top: 1px solid var(--border-strong); }
.mh-papers__list--rest { border-top: 0; }
.mh-paper { display: grid; grid-template-columns: 96px minmax(0, 5fr) minmax(0, 5fr) 148px; gap: 4px clamp(18px, 2.4vw, 36px); align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--border); }
.mh-paper__yr { font: 400 clamp(1.6rem, 2.2vw, 2rem)/1 var(--font-display); color: var(--ink); }
.mh-paper p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.mh-paper h3 { font-family: var(--font-body); font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.mh-paper__kind { font-size: 14px; color: var(--ink-muted); }
/* the first three rows are counted in, year first */
.mh-js [data-r="rows"]:not(.is-in) .mh-paper { opacity: 0; }
.mh-js [data-r="rows"].is-in .mh-paper { animation: mh-rise 720ms var(--mh-ease) both; animation-delay: calc(var(--i) * 110ms); }

/* "Read more": only a control on a phone, where the script folds it */
.mh-fold > summary { display: none; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); transition: color 200ms; }
.mh-fold > summary::-webkit-details-marker { display: none; }
.mh-fold > summary:hover { color: var(--accent-blue); }
.mh-fold.is-fold > summary { display: inline-flex; }
.mh-fold[open] .mh-fold__more, .mh-fold:not([open]) .mh-fold__less { display: none; }
.mh-chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms var(--mh-ease); }
.mh-fold > summary:hover .mh-chev { transform: translateY(3px); }
.mh-fold[open] .mh-chev { transform: rotate(180deg); }
.mh-fold[open] > summary:hover .mh-chev { transform: rotate(180deg) translateY(3px); }
.mh-fold.is-fold[open] > :not(summary) { animation: mh-unfold 420ms var(--mh-ease) both; }

/* ============ THE 2009 FAILURE ============ */
.mh-fail { background: var(--ink); color: #fff; padding-block: clamp(56px, 7vw, 112px); }
.mh-fail__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 104px); align-items: start; }
.msc-history .mh-fail h2 { color: #fff; margin-bottom: clamp(28px, 4vw, 48px); }
.mh-fail__text p { font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .84); }
.mh-fail__text p + p { margin-top: 18px !important; }

/* one product, 2009 to 2024, a year the same length all the way down */
.mh-path { margin: 0; }
.mh-path__axis { position: relative; height: 380px; margin-block: 30px 24px; }
.mh-path__axis > * { position: absolute; top: calc((var(--yr) - 2009) / 15 * 100%); }
.mh-path__line { top: 0 !important; bottom: 0; left: 21px; width: 2px; background: rgba(255, 255, 255, .2); }
.mh-path__line i { position: absolute; inset: 0; background: var(--accent-ice); transform-origin: top; transform: scaleY(var(--mh-p, 1)); }
.mh-path__mark { left: 0; display: grid; grid-template-columns: 44px auto; column-gap: 18px; align-items: center; transform: translateY(-50%); transition: opacity 400ms; }
.mh-path__mark > i { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); border: 2px solid var(--accent-ice); transition: transform 520ms var(--mh-ease), border-color 300ms; }
.mh-path__mark svg { width: 22px; height: 22px; fill: none; stroke: var(--accent-ice); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mh-path__mark svg path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.mh-path__mark--miss > i { border-color: var(--mh-miss); }
.mh-path__mark--miss svg { stroke: var(--mh-miss); }
.mh-path__mark b { align-self: end; font: 400 1.6rem/1 var(--font-display); color: #fff; }
.mh-path__mark em { align-self: start; margin-top: 4px; font-style: normal; font-size: 16px; line-height: 1.3; color: rgba(255, 255, 255, .8); }
.mh-path__gap { --yr: 2019.5; left: 62px; transform: translateY(-50%); font: italic 300 clamp(1.5rem, 2.4vw, 2.1rem)/1 var(--font-display); color: var(--accent-ice); transition: opacity 600ms 200ms, transform 800ms var(--mh-ease) 200ms; }
/* the line is walked: a mark is made as the reader reaches its year */
.mh-js .mh-path.is-walked .mh-path__mark:not(.is-hit) { opacity: .55; }
.mh-js .mh-path.is-walked .mh-path__mark:not(.is-hit) > i { transform: scale(.72); }
.mh-js .mh-path.is-walked .mh-path__mark:not(.is-hit) svg path { stroke-dashoffset: 1; }
.mh-js .mh-path.is-walked .mh-path__mark.is-hit svg path { animation: mh-draw 460ms var(--mh-ease) 120ms both; }
.mh-js .mh-path.is-walked .mh-path__mark.is-hit svg path + path { animation-delay: 300ms; }
.mh-js .mh-path.is-walked:not(.is-done) .mh-path__gap { opacity: 0; transform: translateY(-50%) translateX(-12px); }

/* ============ THEN AND NOW ============ */
.mh-shift { padding-block: clamp(48px, 6vw, 96px); }
.mh-shift__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 88px); align-items: center; margin-block: clamp(20px, 3vw, 36px) clamp(28px, 4vw, 48px); }
.mh-shift__head p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.mh-shift__fig { margin: 0; }
.mh-vials { display: block; width: 100%; max-width: 460px; height: auto; overflow: visible; }
.mh-vials :is(rect, path) { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mh-vials .mh-vial__fill { stroke: none; fill: var(--border-strong); transform-box: fill-box; transform-origin: 50% 100%; }
.mh-vials .mh-vial--now .mh-vial__fill { fill: var(--accent-ice); }
.mh-vials .mh-vial__tick { stroke: var(--accent-blue); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mh-vials .mh-vials__arrow { stroke: var(--ink-muted); stroke-dasharray: 1; stroke-dashoffset: 0; }
/* three uneven fills, then three alike, each checked */
.mh-js [data-r="vials"]:not(.is-in) :is(.mh-vial__tick, .mh-vials__arrow) { stroke-dashoffset: 1; }
.mh-js [data-r="vials"]:not(.is-in) .mh-vial__fill { transform: scaleY(0); }
.mh-js [data-r="vials"].is-in .mh-vial__fill { animation: mh-fill 800ms var(--mh-ease) both; animation-delay: calc(var(--i) * 140ms); }
.mh-js [data-r="vials"].is-in .mh-vials__arrow { animation: mh-draw 500ms ease 620ms both; }
.mh-js [data-r="vials"].is-in .mh-vial--now .mh-vial__fill { animation-delay: calc(900ms + var(--i) * 140ms); }
.mh-js [data-r="vials"].is-in .mh-vial__tick { animation: mh-draw 420ms var(--mh-ease) both; animation-delay: calc(1700ms + var(--i) * 160ms); }

.mh-shift__cols, .mh-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 48px); }
.mh-shift__cols { padding-bottom: 12px; border-bottom: 1px solid var(--border-strong); font-size: 15px; font-weight: 600; color: var(--ink); }
.mh-shift__cols span:last-child { padding-left: 20px; }
.mh-row { padding: 22px 0; border-bottom: 1px solid var(--border); align-items: start; }
.mh-row > h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.2; color: var(--ink); }
.mh-row p { font-size: 16px; line-height: 1.6; }
.mh-row h4 { margin: 0 0 2px; max-width: none; font-family: var(--font-body); font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.mh-row__then { color: var(--ink-muted); }
.mh-row__then h4 { color: var(--ink-soft); }
.mh-row__now { color: var(--ink-soft); padding-left: 20px; border-left: 3px solid var(--accent-blue); }
.mh-row__now h4 { color: var(--ink); }
/* said aloud on every screen, shown where the columns have no heads */
.mh-row__when { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the two halves of a row close in from either side */
.mh-js [data-r="pair"]:not(.is-in) > * { opacity: 0; }
.mh-js [data-r="pair"] > * { transition: opacity 620ms ease, transform 820ms var(--mh-ease); }
.mh-js [data-r="pair"]:not(.is-in) > .mh-row__then { transform: translateX(-26px); }
.mh-js [data-r="pair"]:not(.is-in) > .mh-row__now { transform: translateX(26px); }
.mh-js [data-r="pair"] > .mh-row__now { transition-delay: 140ms; }

/* ============ APPROVED PRODUCTS ============ */
.mh-ok { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.mh-ok__lede { margin-top: clamp(18px, 2.4vw, 28px) !important; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.mh-ok__grid--rest { margin-top: 0 !important; border-top: 0 !important; }
.mh-ok__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(28px, 5vw, 88px); margin-top: clamp(28px, 4vw, 48px) !important; border-top: 1px solid var(--border-strong); }
.mh-prod { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 22px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--border); }
.mh-seal { width: 56px; height: 56px; overflow: visible; }
.mh-seal__ring { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mh-seal__in { fill: var(--accent-wash); }
.mh-seal__tick { fill: none; stroke: var(--accent-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mh-prod h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.2; color: var(--ink); }
.mh-prod h3 em { font-size: .8em; color: var(--ink-muted); }
.mh-prod__yr { margin-top: 4px !important; font: 400 1.2rem/1.3 var(--font-display); color: var(--ink); }
.mh-prod__where { margin-top: 2px !important; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink-muted); }
.mh-prod__what { margin-top: 10px !important; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.mh-prod__what strong { color: var(--ink); font-weight: 600; }
/* each card is stamped */
.mh-js [data-r="stamp"]:not(.is-in) > div { opacity: 0; transform: translateY(14px); }
.mh-js [data-r="stamp"] > div { transition: opacity 620ms ease, transform 820ms var(--mh-ease); transition-delay: calc(var(--i) * 120ms); }
.mh-js [data-r="stamp"]:not(.is-in) .mh-seal { opacity: 0; }
.mh-js [data-r="stamp"]:not(.is-in) .mh-seal__tick { stroke-dashoffset: 1; }
.mh-js [data-r="stamp"].is-in .mh-seal { animation: mh-stamp 520ms var(--mh-ease) both; animation-delay: calc(200ms + var(--i) * 120ms); }
.mh-js [data-r="stamp"].is-in .mh-seal__tick { animation: mh-draw 420ms var(--mh-ease) both; animation-delay: calc(640ms + var(--i) * 120ms); }
.mh-ok__notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(28px, 5vw, 88px); margin-top: clamp(28px, 4vw, 48px); }
.mh-ok__notes p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }

/* ============ WHAT'S MISSING ============ */
.mh-gap { background: var(--ink); color: #fff; padding-block: clamp(56px, 7vw, 112px); }
.msc-history .mh-gap h2 { color: #fff; }
.mh-gap__lead { hyphens: manual; margin-top: clamp(18px, 2.4vw, 28px) !important; font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1.3; color: #fff; }
/* four places on the list with nothing in them */
.mh-gap__slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px clamp(16px, 3vw, 48px); margin-block: clamp(32px, 4vw, 56px) !important; }
.mh-gap__slots li { display: flex; align-items: center; gap: 16px; font-size: 17px; font-weight: 500; line-height: 1.3; color: #fff; }
.mh-slot { flex: none; width: 56px; height: 56px; overflow: visible; }
.mh-slot__ring { fill: none; stroke: var(--accent-ice); stroke-width: 1.8; stroke-dasharray: 5 6; stroke-linecap: round; }
.mh-gap__slots.is-live .mh-slot__ring { animation: mh-march 2.4s linear infinite; }
.mh-js [data-r="slots"]:not(.is-in) li { opacity: 0; transform: translateY(14px); }
.mh-js [data-r="slots"] li { transition: opacity 620ms ease, transform 820ms var(--mh-ease); transition-delay: calc(var(--i) * 130ms); }
.mh-gap__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(28px, 5vw, 88px); }
.mh-gap__cols p { font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .86); }

/* ============ THE BOTTOM LINE ============ */
.mh-end__band { background: var(--accent-wash); padding-block: clamp(48px, 6vw, 96px); }
/* the four names in the heading, where they sit on the same sixty years */
.mh-end__trail { position: relative; height: 48px; max-width: 640px; margin-bottom: clamp(16px, 2vw, 24px); }
/* this line stops at its last name: 1968 to 2024, 56 years */
.mh-end__trail > * { position: absolute; top: 24px; left: calc((var(--yr) - 1968) / 56 * 100%); }
.mh-end__line { left: 0 !important; right: 0; height: 2px; margin-top: -1px; background: var(--ink); transform-origin: left; }
.mh-end__mk { width: 14px; height: 14px; border-radius: 50%; background: var(--accent-blue); box-shadow: 0 0 0 4px var(--accent-wash); transform: translate(-50%, -50%); }
.mh-js [data-r="trail"]:not(.is-in) .mh-end__line { transform: scaleX(0); }
.mh-js [data-r="trail"]:not(.is-in) .mh-end__mk { transform: translate(-50%, -50%) scale(0); }
.mh-js [data-r="trail"].is-in .mh-end__line { animation: mh-line 1200ms var(--mh-ease) both; }
.mh-js [data-r="trail"].is-in .mh-end__mk { animation: mh-pop 420ms var(--mh-ease) both, mh-ping 900ms ease-out both; animation-delay: calc(200ms + (var(--yr) - 1968) / 56 * 1000ms); }
.mh-end h2 > .h-lead, .mh-end h2 > em { display: inline-block; }
.mh-end h2 em { color: var(--accent-blue-hover); }
.mh-end__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(28px, 5vw, 88px); margin-top: clamp(24px, 3vw, 40px); }
.mh-end__cols p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.mh-end__cols p + p { margin-top: 18px !important; }
.mh-end__cols .mh-end__ask { color: var(--ink); font-weight: 500; }

/* ============ READ ON ============ */
.mh-next { padding-block: clamp(48px, 6vw, 88px); }
.mh-next__list { margin-top: clamp(20px, 3vw, 32px) !important; border-top: 1px solid var(--border-strong); }
.mh-next__list a { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; padding: 14px 4px; color: var(--ink); transition: color 200ms, padding-left 360ms var(--mh-ease); }
.mh-next__list li { border-bottom: 1px solid var(--border); }
.mh-next__t { font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.25; }
.mh-arr { display: inline-block; font-size: 20px; color: var(--accent-blue); transition: transform 360ms var(--mh-ease); }
.mh-next__list a:hover { color: var(--accent-blue-hover); padding-left: 12px; }
.mh-next__list a:hover .mh-arr { transform: translateX(8px); }
.mh-next__up { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }

/* ============ NARROWER ============ */
@media (max-width: 980px) {
  .mh-hero__row, .mh-eras__intro, .mh-papers__head, .mh-shift__head, .mh-fail__grid { grid-template-columns: minmax(0, 1fr); }
  .mh-paper { grid-template-columns: 80px minmax(0, 1fr); }
  .mh-paper > :not(.mh-paper__yr) { grid-column: 2; }
  .mh-paper__why { margin-top: 6px; }
  .mh-paper__kind { margin-top: 8px; }
  .mh-shift__cols { display: none; }
  .mh-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 12px; }
  .mh-row > h3 { grid-column: 1 / -1; }
  .mh-row__when { position: static; display: block; width: auto; height: auto; clip-path: none; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
  .mh-gap__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .mh-eras__grid { grid-template-columns: 58px minmax(0, 1fr); gap: 18px; }
  .mh-rule__line { left: 44px; }
  .mh-rule__tick { left: 37px; width: 7px; }
  .mh-rule__tick b { right: 11px; }
  .mh-rule__dot, .mh-rule__here { left: 45px; }
  .mh-rule__era { left: 52px; padding: 0; }
  .mh-rule__era b { display: none; }
  .mh-rule figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mh-ev { grid-template-columns: minmax(0, 1fr); padding-left: 14px; }
  .mh-era__head { flex-direction: column; }
  .mh-span__axis { height: 150px; }
  .mh-span__flag { font-size: 13px; }
  .mh-span__flag b { font-size: 1.25rem; }
  /* every second decade keeps its label on a narrow line */
  .mh-span__tick:nth-of-type(odd) b { display: none; }
  .mh-ok__grid, .mh-ok__notes, .mh-gap__cols, .mh-end__cols { grid-template-columns: minmax(0, 1fr); }
  .mh-row { grid-template-columns: minmax(0, 1fr); }
  .mh-row__now { padding-left: 16px; }
  .mh-path__axis { height: 340px; }
  .mh-next__up .btn { width: 100%; justify-content: center; }
  .mh-stack { max-width: 320px; }
  .mh-vials { max-width: 340px; }
}
@media (max-width: 420px) {
  .mh-gap__slots li { gap: 12px; font-size: 16px; }
  .mh-slot { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .msc-history main *, .msc-history .hc-bar, .msc-history .hc-bar * { transition-duration: .01ms !important; transition-delay: 0s !important; }
}
@media print {
  .msc-history .hc-bar { display: none; }
  /* paper is captured at once: nothing may still be on its way in (the script has already marked everything shown) */
  .msc-history main *, .msc-history main *::before, .msc-history main *::after { animation: none !important; transition: none !important; }
  .mh-js [data-r] { opacity: 1 !important; }
  /* the line of years is whole on paper, wherever the reader had scrolled to */
  .mh-path__line i { transform: none !important; }
  /* a row, a card or an era is never cut in two by a page edge */
  .mh-paper, .mh-prod, .mh-row, .mh-era, .mh-path, .mh-gap__slots { break-inside: avoid; }
  .msc-history main h2 { break-after: avoid; }
  .msc-history main section { padding-block: 18pt; }
  .mh-toc, .mh-next__up { display: none; }
  .mh-rule { position: static; }
  .mh-fold > summary { display: none !important; }
  .mh-fail, .mh-gap, .mh-end__band { background: none; color: var(--ink); }
  .mh-fail :is(h2, p, b, em), .mh-gap :is(h2, p, li) { color: var(--ink) !important; }
}