@charset "utf-8";
/* moasstimeline.com - certificate / transfer-agent ledger visual language.
   Generated by build/generate.py. Do not edit public/assets/site.css directly. */

:root {
  --paper:    #E6E7E1;
  --paper-2:  #DCDED6;
  --ink:      #16211C;
  --intaglio: #1E5245;
  --steel:    #33556F;
  --stamp:    #A83226;   /* reserved: Jan-Feb 2021 restriction window only */
  --rule:     #C3C6BC;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Rail geometry. The hairline sits at --rail-x inside the rail column. */
  --rail-col: 84px;
  --rail-x:   26px;
  --tick-max: 50px;
  --tick-den: 16;   /* linear scale to the true monthly maximum */
  --date-col: 172px;
  --measure:  68ch;

  /* Sticky chrome above the timeline. --bar-h is the year index; --year-h is
     the year marker that pins beneath it. Anchor clearance is derived from
     both, so these are the single source of truth for scroll-margin-top. */
  --bar-h:  46px;
  --year-h: 66px;
  --anchor-clear: calc(var(--bar-h) + var(--year-h) + 22px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  font-synthesis-weight: none;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--steel); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--intaglio); }

:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 2px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--intaglio); color: var(--paper);
  padding: 10px 16px; z-index: 50; font-family: var(--mono); font-size: 13px;
}
.skip:focus { left: 8px; top: 8px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- header */
.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-head .wrap {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  align-items: baseline; padding-top: 18px; padding-bottom: 16px;
}
.brand {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--intaglio); text-decoration: none;
}
.brand:hover { color: var(--intaglio); }
.head-id { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* The archive seal. Struck into the paper: double hairline, square corners,
   engraved caps. Deliberately not a rounded status pill. --intaglio only. */
.seal {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--rule);
  color: var(--intaglio);
  text-align: center;
  border-radius: 0;
}
.seal-a {
  font-family: var(--display); font-weight: 800; font-size: 10.5px;
  letter-spacing: .19em; text-transform: uppercase; line-height: 1.3;
}
.seal-b, .seal-c {
  font-family: var(--mono); font-weight: 400; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.seal-b { font-weight: 500; }
.seal-c { color: var(--steel); }

.foot-closed {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: var(--intaglio); margin: 0 0 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.site-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; }
.site-nav a {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: var(--steel);
  padding: 2px 0; border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: var(--intaglio); border-bottom-color: var(--intaglio);
}

/* ------------------------------------------------------------------ type */
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 800;
  letter-spacing: -.015em; line-height: 1.12; color: var(--intaglio);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(30px, 5.2vw, 46px); text-transform: uppercase; }
h2 { font-size: clamp(21px, 3vw, 27px); text-transform: uppercase; }
h3 { font-size: 19px; }
/* Some entries render a bare 138-character URL as visible link text. Without
   this it is a single unbreakable token ~829px wide, which makes the whole
   document scroll horizontally at 360px. break-word only breaks when the run
   genuinely cannot fit. */
.prose, .tl-prose, .tl-title, .postlist a, .reg-title, .page-body {
  overflow-wrap: break-word;
}
/* WordPress list markup carries the UA's 40px indent; at 360px that plus a
   long URL pushes the list past the viewport. */
.page-body ul, .page-body ol { padding-left: 1.2em; }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1em; }
.prose img { margin: 1.2em 0; border: 1px solid var(--rule); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose blockquote {
  margin: 1.4em 0; padding: .2em 0 .2em 1.1em;
  border-left: 3px solid var(--rule); color: #33413a;
}
.sc-title { margin-top: 1.4em; }
.sc-image { margin: 1.2em 0; }

.btn {
  display: inline-block; font-family: var(--mono); font-size: 13px;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  color: var(--paper); background: var(--intaglio);
  padding: 11px 20px; border: 1px solid var(--intaglio);
}
.btn:hover { background: transparent; color: var(--intaglio); }

.accordion { margin: 1.4em 0; max-width: var(--measure); }
.accordion details {
  border-top: 1px solid var(--rule); padding: 12px 0;
}
.accordion details:last-child { border-bottom: 1px solid var(--rule); }
.accordion summary {
  cursor: pointer; font-family: var(--mono); font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--intaglio);
}

/* ------------------------------------------------------------- page shell */
.page-head { padding: 46px 0 10px; }
.page-head .kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--steel); margin: 0 0 10px;
}
main { padding-bottom: 72px; }
.page-body { padding-top: 8px; }

/* --------------------------------------------------------------- timeline */
.tl-intro { padding: 34px 0 10px; border-top: 1px solid var(--rule); }
.tl-caption {
  font-family: var(--mono); font-size: 12px; line-height: 1.7;
  letter-spacing: .03em; color: var(--steel); margin: 0; max-width: 62ch;
}
.tl-legend { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.tl-legend .bar { height: 3px; background: var(--intaglio); }
.tl-legend .lab {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--steel);
}

/* ------------------------------------------------------------ year index */
.tl-shell { position: relative; }

/* Fixed height on purpose: --bar-h is what the year markers pin beneath and
   what anchor clearance is derived from, so it must be deterministic rather
   than whatever the content happens to measure. */
.year-bar {
  position: sticky; top: 0; z-index: 8;
  height: var(--bar-h); box-sizing: border-box;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.year-bar > .wrap { height: 100%; }
/* Year strip scrolls; the toggle stays pinned so it cannot scroll out of
   reach at narrow widths. */
.bar-inner { display: flex; align-items: center; gap: 14px; }
.year-nav { flex: 1 1 auto; min-width: 0; height: 100%; }
/* Hidden without JS so no dead controls are offered. */
.bar-tools { display: none; }
.js .bar-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.search-wrap { position: relative; display: flex; align-items: center; }
.search-input {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 0;
  padding: 4px 22px 4px 8px; width: 170px; height: 26px;
  -webkit-appearance: none; appearance: none;
}
.search-input::placeholder { color: var(--steel); opacity: .75; }
.search-input::-webkit-search-cancel-button { display: none; }
.search-input:focus { border-color: var(--steel); outline-offset: 1px; }
.search-clear {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 0 4px;
  font-family: var(--mono); font-size: 14px; line-height: 1; color: var(--steel);
}
.search-clear:hover { color: var(--intaglio); }

.result-count {
  margin: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--steel);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.result-count.is-filtered { color: var(--intaglio); }

.view-toggle { flex: 0 0 auto; display: flex; }
.vt-btn {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--steel); background: transparent;
  border: 1px solid var(--rule); padding: 4px 9px;
  cursor: pointer; border-radius: 0; margin: 0;
}
.vt-btn + .vt-btn { border-left: 0; }
.vt-btn:hover { color: var(--intaglio); }
.vt-btn.is-on {
  color: var(--paper); background: var(--intaglio); border-color: var(--intaglio);
}
.year-list {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0 24px;
  height: 100%; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; overflow-y: hidden;
  /* Scrollbar hidden so it cannot eat into the fixed height; the strip still
     scrolls at narrow widths. */
  scrollbar-width: none;
}
.year-list::-webkit-scrollbar { display: none; }
.year-link {
  display: inline-flex; align-items: baseline; gap: 6px;
  text-decoration: none; white-space: nowrap; padding: 2px 1px;
}
.yl-y {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--steel);
}
.yl-n {
  font-family: var(--mono); font-weight: 400; font-size: 11.5px;
  font-variant-numeric: tabular-nums; color: var(--steel);
}
.yl-sep { color: var(--rule); }
.year-link:hover .yl-y, .year-link:hover .yl-n { color: var(--intaglio); }
.year-link.is-current .yl-y { color: var(--intaglio); font-weight: 800; }
.year-link.is-current .yl-n { color: var(--intaglio); }

/* The rail: one continuous hairline for the whole timeline. Nothing may
   break it - year markers redraw it over their own background. */
.timeline { position: relative; padding-bottom: 40px; }
.timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: var(--rail-x); width: 1px; background: var(--rule);
}

.tl-year {
  /* Pins BELOW the year bar, not at 0, so the two never overlap. */
  position: sticky; top: var(--bar-h); z-index: 6;
  scroll-margin-top: var(--bar-h);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0 9px; margin-top: 30px;
  display: flex; align-items: baseline; gap: 14px;
}
.tl-year::before {           /* keep the rail continuous through the marker */
  content: ""; position: absolute; top: 0; bottom: -1px;
  left: var(--rail-x); width: 1px; background: var(--rule);
}
.tl-year .y {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4.6vw, 42px); letter-spacing: -.02em;
  color: var(--intaglio); line-height: 1; margin-left: calc(var(--rail-col) - 6px);
}
.tl-year .n {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .08em; color: var(--steel); font-variant-numeric: tabular-nums;
}
.tl-year.is-current .n { color: var(--intaglio); }

.tl-month { position: relative; }
.tl-quiet { position: relative; height: 26px; }

/* Invisible touch target around the tick. 24px tall, no paint of its own, so
   the drawn mark is untouched - .tick sits at 4px + 10px = the same 14px it
   occupied before this element existed. */
.tick-hit {
  position: absolute; top: 4px; left: 0;
  width: var(--rail-col); height: 24px;
  display: block; text-decoration: none;
  /* Must sit above .tl-entry. Both are positioned with z-index auto, and the
     entry comes later in DOM order, so without this it paints over the hit
     area and the rail is dead to mouse and touch while still being
     keyboard-focusable. The area it covers is the entry's empty rail column,
     so nothing else becomes unclickable. */
  z-index: 2;
}

/* Density tick: linear, count / true-max * --tick-max. Drawn on the rail.
   Length, colour and scale are NOT changed by making it interactive. */
.tick {
  position: absolute; top: 10px; left: calc(var(--rail-x) + 1px);
  height: 3px; background: var(--intaglio);
  width: calc(var(--n) / var(--tick-den) * var(--tick-max));
}

/* Month + count, revealed on hover and focus only. Absolutely positioned and
   visibility:hidden at rest, so it neither shifts layout nor paints. */
.tick-lab {
  position: absolute; z-index: 7;
  left: calc(var(--rail-x) + var(--tick-max) + 10px);
  top: 50%; transform: translateY(-50%);
  white-space: nowrap; pointer-events: none;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--intaglio); background: var(--paper);
  border: 1px solid var(--rule); padding: 2px 7px;
  opacity: 0; visibility: hidden;
  transition: opacity .12s ease;
}
.tick-hit:hover .tick-lab,
.tick-hit:focus-visible .tick-lab { opacity: 1; visibility: visible; }
/* Deliberately no hover/focus restyling of .tick itself: its length, colour
   and scale are the encoding and must not shift. The label is the affordance. */

.tl-entry {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail-col) var(--date-col) minmax(0, 1fr);
  gap: 0 18px;
  padding: 22px 0;
  border-bottom: 1px solid transparent;
  /* Clear BOTH sticky layers - the year bar and the year marker pinned
     under it - plus breathing room. Measured, not guessed. */
  scroll-margin-top: var(--anchor-clear);
}
.tl-entry.is-brief { padding: 12px 0; }

/* Landing target: quiet, in --steel. Never --stamp. */
.tl-entry:target {
  background: rgba(51, 85, 111, .07);
  box-shadow: inset 3px 0 0 var(--steel);
  transition: background .45s ease;
}
.tl-entry:target .tl-title { color: var(--steel); }

.tl-date { grid-column: 2; margin: 0; padding-top: 2px; }
.tl-date time {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em;
  color: var(--steel); font-variant-numeric: tabular-nums;
  display: block;
}
.tl-body { grid-column: 3; min-width: 0; }

.tl-title {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: .005em; text-transform: uppercase; line-height: 1.25;
  margin: 0 0 .45em; color: var(--intaglio);
}
.tl-title a { color: inherit; text-decoration: none; }
.tl-title a:hover { text-decoration: underline; }

.tl-figure { margin: 0 0 14px; }
.tl-figure img { border: 1px solid var(--rule); background: var(--paper-2); }
.tl-prose { max-width: var(--measure); }
.tl-prose p { margin: 0 0 .8em; }
.tl-prose p:last-child { margin-bottom: 0; }
/* Source citations. The archive's whole claim rests on these, so they are
   shown on every entry that has one - body-less ones included. */
.tl-sources {
  margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 12px;
}
.tl-src-lab {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rule);
}
.tl-src {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em;
  color: var(--steel); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 1px;
}
.tl-src:hover { color: var(--intaglio); border-bottom-color: var(--intaglio); }
.tl-src.is-video::before { content: "\25B8\00A0"; }
.is-brief .tl-sources { margin-top: 7px; }

.tl-more {
  display: inline-block; margin-top: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none; color: var(--steel);
  border-bottom: 1px solid var(--rule); padding-bottom: 2px;
}
.tl-more:hover { color: var(--intaglio); border-bottom-color: var(--intaglio); }

/* -- the one loud element: Jan-Feb 2021 buy-restriction window only ------ */
.is-stamp .tl-date time { color: var(--stamp); font-weight: 500; }
.is-stamp .tl-marker {
  position: absolute; left: calc(var(--rail-x) - 3px); top: 26px;
  width: 7px; height: 7px; background: var(--stamp); border-radius: 50%;
}
.entry-stamp .entry-date { color: var(--stamp); font-weight: 500; }

/* --------------------------------------------------------- entry / posts */
.entry-head { padding: 44px 0 6px; }
.entry-date {
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em;
  color: var(--steel); font-variant-numeric: tabular-nums; margin: 0 0 14px;
  text-transform: uppercase;
}
.entry-figure { margin: 0 0 26px; max-width: var(--measure); }
.entry-figure img { border: 1px solid var(--rule); background: var(--paper-2); }

.pager {
  display: flex; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--rule); margin-top: 46px; padding-top: 18px;
}
.pager a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  text-decoration: none; color: var(--steel); max-width: 46%;
}
.pager a:hover { color: var(--intaglio); }
.pager .lab { display: block; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rule); margin-bottom: 4px; }

.postlist { list-style: none; padding: 0; margin: 1.5em 0; max-width: var(--measure); }
.postlist li { border-top: 1px solid var(--rule); padding: 16px 0; }
.postlist li:last-child { border-bottom: 1px solid var(--rule); }
.postlist a {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  text-transform: uppercase; text-decoration: none; color: var(--intaglio);
}
.postlist a:hover { text-decoration: underline; }
.postlist .d {
  display: block; font-family: var(--mono); font-size: 12px;
  color: var(--steel); margin-top: 4px; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- footer */
.site-foot {
  border-top: 1px solid var(--rule); background: var(--paper-2);
  padding: 30px 0 44px; margin-top: 40px;
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: baseline; }
.site-foot a, .site-foot p {
  font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--steel);
}
.site-foot p { margin: 0; }
.site-foot .cr { margin-left: auto; }

/* ------------------------------------------------------------------- 404 */
.nf { padding: 90px 0 60px; text-align: center; }
/* Not --stamp: that ink is reserved for the Jan-Feb 2021 window alone. */
.nf .code {
  font-family: var(--mono); font-size: 13px; letter-spacing: .3em;
  color: var(--steel); margin: 0 0 14px;
}
.nf p.msg { max-width: 46ch; margin: 0 auto 26px; }

/* ------------------------------------------------------------- filtering */
/* No animation on filter: rows appear and disappear instantly. */
.is-filtered-out { display: none !important; }

/* Ticks are DIMMED, never removed - the rail's shape stays readable. */
.tick-hit.is-dim .tick { opacity: .22; }
.tick-hit.is-dim { pointer-events: none; }

.year-link.is-dim .yl-y,
.year-link.is-dim .yl-n { opacity: .32; }
.reg-year.is-dim, .tl-year.is-dim { opacity: .38; }

.search-empty {
  display: none;
  max-width: 1080px; margin: 26px auto 40px; padding: 0 24px;
  font-family: var(--body); font-size: 16px; color: var(--ink);
}
.search-empty.is-on { display: block; }
.se-clear {
  font: inherit; background: none; border: 0; padding: 0;
  color: var(--steel); text-decoration: underline; cursor: pointer;
}
.se-clear:hover { color: var(--intaglio); }

/* -------------------------------------------------------- register view */
/* Both views ship in the HTML. Register is hidden by default, so with JS off
   the page is the complete timeline and nothing here is reachable. */
.register { display: none; }
.view-register .register { display: block; }
.view-register .timeline { display: none; }
.view-register .tl-intro { display: none; }   /* rail caption: no rail here */

.reg-year {
  position: sticky; top: var(--bar-h); z-index: 6;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  padding: 9px 0 6px; margin-top: 16px;
  display: flex; align-items: baseline; gap: 12px;
}
.ry-y {
  font-family: var(--display); font-weight: 800; font-size: 24px;
  letter-spacing: -.01em; color: var(--intaglio); line-height: 1;
}
.ry-n {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em;
  color: var(--steel); font-variant-numeric: tabular-nums;
}

.reg-row {
  display: grid;
  grid-template-columns: 3.1rem 10.6rem minmax(0, 1fr) 1.2rem;
  align-items: baseline; gap: 0 12px;
  padding: 3px 8px; text-decoration: none;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: calc(var(--bar-h) + 52px);
}
.reg-group .reg-row:nth-child(even) { background: var(--paper-2); }
.reg-row:hover { background: var(--intaglio); }
.reg-row:hover .reg-n,
.reg-row:hover .reg-date,
.reg-row:hover .reg-title,
.reg-row:hover .reg-arrow { color: var(--paper); }

/* --rule is a hairline colour and fails contrast on --paper. The number is a
   citation handle, so it has to be legible. */
.reg-n {
  font-family: var(--mono); font-size: 11px; color: var(--steel);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.reg-date {
  font-family: var(--mono); font-size: 11.5px; color: var(--steel);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.reg-title {
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  letter-spacing: .01em; text-transform: uppercase; color: var(--intaglio);
  line-height: 1.42;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reg-arrow {
  font-family: var(--mono); font-size: 12px; color: var(--steel);
  text-align: right;
}
/* The one loud element stays confined: register rows never use --stamp. */

/* -------------------------------------------------------------- reveal fx */
.js .reveal { opacity: 0; transform: translateY(10px); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s ease;
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 860px) {
  :root { --date-col: 140px; }
}
@media (max-width: 720px) {
  :root {
    --rail-col: 38px; --rail-x: 13px; --tick-max: 24px; --measure: 100%;
    --bar-h: 76px; --year-h: 53px;
  }
  /* Two rows at this width: year strip, then search + count + toggle. */
  .bar-inner { flex-wrap: wrap; align-content: center; gap: 5px 10px; }
  .year-nav { flex: 1 0 100%; height: auto; }
  .js .bar-tools { flex: 1 0 100%; gap: 8px; }
  .search-wrap { flex: 1 1 auto; min-width: 0; }
  .search-input { width: 100%; min-width: 0; }
  .result-count { font-size: 9px; letter-spacing: .03em; }
  body { font-size: 16.5px; }
  .site-head .wrap { padding-top: 14px; padding-bottom: 12px; }
  /* Seal drops below the title at reduced scale. */
  .head-id { flex-direction: column; align-items: flex-start; gap: 9px; }
  .seal { padding: 6px 11px; }
  .seal-a { font-size: 9.5px; letter-spacing: .16em; }
  .seal-b, .seal-c { font-size: 9px; }
  .site-nav { margin-left: 0; width: 100%; gap: 4px 16px; }
  .tl-entry {
    grid-template-columns: var(--rail-col) minmax(0, 1fr);
    gap: 0 12px; padding: 18px 0;
  }
  .tl-date { grid-column: 2; padding-top: 0; margin-bottom: 5px; }
  .tl-body { grid-column: 2; }
  .tl-year .y { margin-left: var(--rail-col); font-size: 30px; }
  /* tick keeps its 11px offset: hit area 1px + tick 10px within it */
  .tick-hit { top: 1px; }
  .is-stamp .tl-marker { top: 20px; }
  /* Year strip scrolls sideways here rather than stacking into three rows. */
  .year-list { gap: 0 18px; }
  .vt-btn { font-size: 9.5px; padding: 3px 6px; letter-spacing: .06em; }
  /* One line per row: the clock time is dropped so the date still fits
     inline. Two-line rows nearly doubled the length of the register. */
  .reg-row {
    grid-template-columns: 2.2rem 5.3rem minmax(0, 1fr) 0.9rem;
    gap: 0 7px; padding: 3px 2px;
  }
  .rd-t { display: none; }
  .reg-date { font-size: 10.5px; }
  .reg-title { font-size: 11.5px; }
  .reg-n { font-size: 10px; }
  .yl-y { font-size: 12px; }
  .yl-n { font-size: 11px; }
}
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  .tl-title { font-size: 16px; }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-visible {
    opacity: 1; transform: none; transition: none;
  }
  .tl-entry:target { transition: none; }
  .tick-lab { transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .site-nav, .tl-more, .pager { display: none; }
  body { background: #fff; }
}