/* authored.css — the five authored-event pages.
 *
 * Built entirely on the Bento 2026 tokens in tokens.css so the authored pages
 * sit inside the same visual world as the rest of the site. Every class is
 * prefixed `au-` so nothing here can collide with base.html.
 *
 * Layout is a single measured column. Long-form history is read top to bottom,
 * not scanned in panels, so the column is capped near 68 characters and the
 * apparatus (glossary, sources) sits below the argument rather than beside it.
 */

/* ------------------------------------------------------- type system
 *
 * One face and one heading ladder for every authored page (overview, essay,
 * 200/500/1000 summaries, timeline). Times New Roman is a system font, so it
 * costs no request. Every heading is bold and set in full ink; the eyebrow
 * labels (ABSTRACT, IN BRIEF, THE ARGUMENT ...) use the same face, bold and
 * full ink, at a size that reads as a label without shouting over the h2.
 *
 *   --au-h1     page title
 *   --au-h2     section heading (essay sections, summary sections, phases)
 *   --au-h3     sub-heading (sub-sections, phases in the essay, figures)
 *   --au-label  eyebrow / inline label
 */
:root {
  --au-serif: var(--font-serif);   /* Times New Roman; the stack lives in tokens.css */
  --au-heading-color: var(--bento-ink);
  --au-heading-weight: 700;
  --au-h1: clamp(2.4rem, 5vw, 3.4rem);
  --au-h2: 2rem;
  --au-h3: 1.5rem;
  --au-label: 1.125rem;
  --au-label-tracking: 0.08em;
}

/* ------------------------------------------------------------------ shell */

.au-page {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-10);
}

/* The breadcrumb was deleted rather than restyled. It named Home, the event
 * and the current page - and the tab strip immediately below already names
 * every page of the event and marks the current one, so the trail was a
 * second, smaller copy of navigation the reader already had. */

/* -------------------------------------------------------------------- nav
 *
 * The island is the site-wide one (bento.css). These pages add one thing to
 * it: a second row under the brand row holding the Save control and the
 * section tabs. The row is a single line: Save stays pinned at its left,
 * behind a hairline divider, and only the tab strip beside it scrolls
 * sideways when the tabs are wider than the pill, so nothing ever wraps or
 * drops to a third line. Every control in the row is a true 44px pill (the
 * site-wide touch-target floor), and the row is sized for that.
 *
 * When the island contracts the row is shed with everything else that is
 * .nav-fold; its height collapses to zero while the bar keeps its own fixed
 * height, so the page under the bar does not move.
 *
 * --au-nav-h is that fixed bar height: the bar's 12px top and bottom padding,
 * the pill's 10px padding, border and 44px brand row, plus the 63px sub-row
 * (8 margin + 1 rule + 10 padding + 44 content). Phones use 8px pill padding,
 * hence the second value.
 */
:root { --au-nav-h: 153px; }
@media (max-width: 768px) { :root { --au-nav-h: 149px; } }
html { scroll-padding-top: calc(var(--au-nav-h) + var(--sp-2)); }

/* The reading pages keep the 16px root. base.css raises the site to 17px to
   make card copy legible; here the measure, the line height and the column
   width were all set together for long-form, and widening the type would
   just cost lines per screen. A reader who wants it bigger still has the
   text-size control, whose html.font-sm/lg rules outrank this one. */
html { font-size: 100%; }

.site-nav--event { height: var(--au-nav-h); }

.nav-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  height: 55px;
  margin-top: var(--sp-2);
  padding-top: 10px;
  border-top: 1px solid var(--bento-line);
  overflow: hidden;
  transition: height var(--nav-dur) var(--nav-ease),
              margin-top var(--nav-dur) var(--nav-ease),
              padding-top var(--nav-dur) var(--nav-ease),
              border-color var(--nav-dur) var(--nav-ease),
              opacity var(--nav-dur) var(--nav-ease),
              visibility 0s linear 0s;
}

html.nav-collapsed .is-collapsible .nav-sub {
  height: 0;
  margin-top: 0;
  padding-top: 0;
  border-top-color: transparent;
  transition: height var(--nav-dur) var(--nav-ease),
              margin-top var(--nav-dur) var(--nav-ease),
              padding-top var(--nav-dur) var(--nav-ease),
              border-color var(--nav-dur) var(--nav-ease),
              opacity calc(var(--nav-dur) * 0.55) ease,
              visibility 0s linear var(--nav-dur);
}
/* <=340px hides the contract toggle and keeps the island expanded
   (bento.css), so the sub-row must stay open there too. */
@media (max-width: 340px) {
  html.nav-collapsed .is-collapsible .nav-sub {
    height: 55px;
    margin-top: var(--sp-2);
    padding-top: 10px;
    border-top-color: var(--bento-line);
  }
}

/* ------------------------------------------------------------ save button */

.au-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Hairline between the pinned Save control and the scrolling tabs. */
.au-actions::after {
  content: "";
  width: 1px;
  height: 24px;
  margin-left: var(--sp-3);
  background: var(--bento-line);
}

.au-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 44px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--bento-btn-text);
  background: var(--bento-tan-100);
  border: 1px solid var(--bento-tan-200);
  border-radius: var(--r-pill);
  padding: 0 var(--sp-4);
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
              transform var(--dur-fast) var(--ease-spring);
}
.au-save:hover { background: var(--bento-tan-200); }
.au-save:active { transform: scale(0.97); }
.au-save svg { width: 15px; height: 15px; flex: none; }
.au-save[aria-pressed="true"] {
  background: var(--bento-tan-200);
  border-color: var(--bento-tan-300);
  color: var(--bento-btn-text);
}
.au-save[aria-pressed="true"] svg { fill: currentColor; }
.au-save[aria-busy="true"] { opacity: 0.62; cursor: progress; }

.au-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--bento-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--bento-line);
  padding-bottom: 2px;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.au-ghost:hover { color: var(--bento-ink); border-bottom-color: var(--bento-tan-300); }

/* The save result is announced to screen readers and shown as a toast
   (authored.js); it takes no room in the bar. */
.au-save-msg {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- tab strip */

.au-tabs {
  position: relative;               /* offsetParent for the active-tab centring in authored.js */
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  /* Shrinks to the room left beside Save and scrolls inside it. The inline
     padding equals the fade below, so at either end of the scroll the first
     and last pill sit clear of the mask instead of being washed out by it. */
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.au-tabs::-webkit-scrollbar { display: none; }
/* Centre the pills when they fit; when they do not, start at the left edge
   and scroll (auto margins, unlike justify-content, never clip the start). */
.au-tabs > :first-child { margin-left: auto; }
.au-tabs > :last-child  { margin-right: auto; }
.au-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  flex-shrink: 0;
  height: 44px;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--bento-ink-soft);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 0 var(--sp-4);
  transition: background var(--dur-fast) var(--ease-ui), color var(--dur-fast) var(--ease-ui),
              transform var(--dur-fast) var(--ease-ui);
}
.au-tab:hover { background: var(--bento-sand); color: var(--bento-ink); }
.au-tab:active { transform: scale(0.96); }
.au-tab:focus-visible { outline-offset: -2px; }
.au-tab.is-active {
  background: var(--bento-tan-200);
  box-shadow: inset 0 0 0 1px var(--bento-tan-300);
  color: var(--bento-btn-text);
  font-weight: 700;
}
.au-tab.is-locked { opacity: 0.62; }
.au-tab.is-locked svg { width: 12px; height: 12px; }

@media (max-width: 768px) {
  .au-tab { font-size: 0.8125rem; padding: 0 14px; }
}
/* On phones Save keeps its label - the bookmark icon alone would read as the
   My Bookmarks button directly above it - and just trims its padding so the
   tab strip beside it keeps as much room as possible. */
@media (max-width: 480px) {
  .au-save { padding: 0 14px; }
  .au-actions::after { margin-left: 10px; }
}

/* ---------------------------------------------------------------- masthead
 *
 * Two stacked bands, each doing one job:
 *
 *   .au-masthead-id     what this page is, what event it belongs to, how the
 *                       event is classified
 *   .au-facts           the four fixed facts, as one ruled panel
 *
 * The Save control and the tab strip used to live in this header; they now
 * sit in the island nav above (.au-nav) instead.
 *
 * The facts used to be a bare auto-fit grid at a 150px minimum, which put
 * "1 September 1939 to 2 September 1945" on two ragged lines while the three
 * short cells beside it sat almost empty. They are now a single bordered panel
 * whose cells are separated by rules, with the date cell given room to hold its
 * line, so the group reads as one object.
 */

.au-masthead {
  border-bottom: 1px solid var(--bento-line);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.au-masthead-id { margin-bottom: var(--sp-5); }

.au-kicker {
  font-family: var(--au-serif);
  font-size: var(--au-label);
  font-weight: var(--au-heading-weight);
  letter-spacing: var(--au-label-tracking);
  text-transform: uppercase;
  color: var(--au-heading-color);
  margin: 0 0 var(--sp-2);
}

.au-title {
  font-family: var(--au-serif);
  font-weight: var(--au-heading-weight);
  font-size: var(--au-h1);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--au-heading-color);
  text-wrap: balance;
  margin: 0;
}

/* The column count is stated at each width rather than left to auto-fit,
   because the dividing rules have to know which cell begins a row. auto-fit
   can silently produce three columns at one viewport and two at the next, and
   no nth-child selector is right for both. */
.au-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 var(--sp-5);
  background: var(--bento-cream);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.au-fact {
  min-width: 0;
  padding: var(--sp-4);
  border-top: 1px solid var(--bento-line);
}
.au-fact:first-child { border-top: 0; }

@media (min-width: 560px) {
  .au-facts { grid-template-columns: 1fr 1fr; }
  .au-fact { border-left: 1px solid var(--bento-line); }
  .au-fact:nth-child(-n + 2) { border-top: 0; }
  .au-fact:nth-child(2n + 1) { border-left: 0; }
}

@media (min-width: 780px) {
  /* One row, however many facts the document happens to carry. Flex rather
     than a fixed column template: a document with no timeline would leave a
     fixed four-column grid with an empty cell, whereas flex simply divides
     the row between the cells that exist. The date cell is given the larger
     share because its value is a phrase, not a word or a count. */
  .au-facts { display: flex; }
  .au-fact { flex: 1 1 0; border-top: 0; border-left: 1px solid var(--bento-line); }
  .au-fact--wide { flex-grow: 1.7; }
  .au-fact:first-child { border-left: 0; }
}
.au-facts dt {
  font-family: var(--au-serif);
  font-size: 1rem;
  font-weight: var(--au-heading-weight);
  letter-spacing: var(--au-label-tracking);
  text-transform: uppercase;
  color: var(--au-heading-color);
  margin-bottom: var(--sp-1);
}
.au-facts dd {
  margin: 0;
  font-family: var(--au-serif);
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--bento-ink);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.au-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
}
.au-tags li {
  font-family: var(--au-serif);
  font-size: 0.9375rem;
  color: var(--bento-ink-soft);
  background: var(--bento-sand);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-pill);
  padding: 3px 12px;
}

/* -------------------------------------------------------------- long prose */

.au-body p,
.au-body li {
  font-family: var(--au-serif);
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--bento-ink);
}
.au-body p { margin: 0 0 var(--sp-4); }
.au-body strong { font-weight: 700; color: var(--bento-ink); }
.au-body em { font-style: italic; }

/* ── Highlighter ───────────────────────────────────────────────────────────
   The stroke a reader draws through a printed textbook. It is a background,
   not a box: the gradient stops short of the cap height and runs past the
   baseline, so the words sit ON the ink rather than inside a filled label,
   and the two soft ends read as where the pen was set down and lifted.
   The text keeps its own colour — a highlighter never recolours what it
   marks — which is what keeps a marked phrase readable inside the sentence.
   box-decoration-break: clone re-draws those ends on every wrapped line, so
   a phrase broken across two lines is two strokes and not one stretched one.
   The default <mark> in every browser paints its own yellow and its own
   black; both are overridden here so the accessibility themes stay in
   control through the tokens. */
.au-body mark.au-hl,
mark.au-hl {
  background: linear-gradient(
    to bottom,
    transparent 8%,
    var(--bento-highlight) 8%,
    var(--bento-highlight) 92%,
    var(--bento-highlight-edge) 92%
  );
  color: var(--bento-highlight-ink);
  padding: 0.06em 0.22em;
  margin: 0 -0.06em;
  border-radius: 0.28em 0.5em 0.35em 0.45em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* A highlighted phrase may also be a key term, in which case it carries both
   the stroke and the weight. The weight stays; the colour override does not,
   so the pair reads as one mark rather than two competing ones. */
.au-body mark.au-hl strong,
.au-body strong mark.au-hl { color: inherit; }

@media print {
  /* Printers render the gradient as a muddy band. On paper the stroke becomes
     a flat tint, which is what a photocopied textbook page looks like anyway. */
  mark.au-hl { background: var(--bento-highlight); }
}

.au-section { margin-bottom: var(--sp-8); }

.au-section > h2,
.au-cards-heading {
  font-family: var(--au-serif);
  font-weight: var(--au-heading-weight);
  font-size: var(--au-h2);
  line-height: 1.2;
  color: var(--au-heading-color);
  text-wrap: balance;
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--bento-ink);
}

/* Sub-headings used to be set as 12px uppercase micro-labels - smaller than
 * the prose beneath them, which read as a caption rather than as a heading.
 * Every heading on these pages now outranks its own body text in size, so the
 * hierarchy is legible before a word of it is read. */
.au-section h3 {
  font-family: var(--au-serif);
  font-size: var(--au-h3);
  font-weight: var(--au-heading-weight);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--au-heading-color);
  text-wrap: balance;
  margin: var(--sp-6) 0 var(--sp-3);
}
.au-section h3:first-of-type { margin-top: var(--sp-4); }

.au-section ol,
.au-section ul { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.au-section li { margin-bottom: var(--sp-3); }

.au-abstract,
.au-thesis {
  border-left: 3px solid var(--bento-tan-300);
  background: var(--bento-cream);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  margin-bottom: var(--sp-6);
}
.au-abstract p:last-child,
.au-thesis p:last-child { margin-bottom: var(--sp-3); }

.au-abstract-label,
.au-thesis-label {
  font-family: var(--au-serif) !important;
  font-size: var(--au-label) !important;
  font-weight: var(--au-heading-weight);
  letter-spacing: var(--au-label-tracking);
  text-transform: uppercase;
  color: var(--au-heading-color) !important;
  margin: 0 0 var(--sp-2) !important;
}

.au-thesis p { font-family: var(--au-serif); font-size: 1.25rem; line-height: 1.6; }

.au-roadmap { color: var(--bento-ink-soft); font-size: 1.0625rem !important; }

/* ── Contents index ────────────────────────────────────────────────────────
   The essay is long, so it opens with the same thing a printed monograph
   opens with: a list of what is inside and where. It is generated from the
   document, so a section that carries no content is never listed. Numbering
   is used because an essay genuinely is a sequence — the argument is built in
   this order — rather than as decoration. */
.au-index {
  margin: 0 0 var(--sp-7);
  padding: var(--sp-5);
  background: var(--bento-cream);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-sm);
}
.au-body .au-index-label {
  font-family: var(--au-serif);
  font-size: var(--au-label);
  font-weight: var(--au-heading-weight);
  letter-spacing: var(--au-label-tracking);
  text-transform: uppercase;
  color: var(--au-heading-color);
  margin: 0 0 var(--sp-4);
}
.au-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 620px) {
  .au-index-list { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); }
}
.au-index-list li { margin: 0; }
.au-index-list a {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: 0.45rem 0;
  font-family: var(--au-serif);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--bento-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.au-index-list a:hover,
.au-index-list a:focus-visible {
  color: var(--bento-ink);
  border-bottom-color: var(--bento-tan-300);
}
.au-index-n {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bento-ink);
}

/* Landing on an anchor should not tuck the heading under the site header. */
.au-essay > [id] { scroll-margin-top: var(--sp-7); }

/* phases */

.au-phase {
  border-top: 1px solid var(--bento-line);
  padding-top: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.au-phase > h3 {
  font-family: var(--au-serif) !important;
  font-size: var(--au-h3) !important;
  font-weight: var(--au-heading-weight);
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--au-heading-color) !important;
  margin: 0 0 var(--sp-1) !important;
}
.au-phase-dates {
  font-family: var(--au-serif) !important;
  font-size: 1rem !important;
  color: var(--bento-ink-soft);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--sp-4) !important;
}
.au-phase-actors,
.au-turning {
  font-size: 1.0625rem !important;
  color: var(--bento-ink-soft);
}
.au-turning {
  background: var(--bento-sand);
  border-radius: var(--r-xs);
  padding: var(--sp-3) var(--sp-4);
}

.au-inline-label {
  display: inline-block;
  font-family: var(--au-serif);
  font-size: 1rem;
  font-weight: var(--au-heading-weight);
  letter-spacing: var(--au-label-tracking);
  text-transform: uppercase;
  color: var(--au-heading-color);
  margin-right: var(--sp-2);
}

/* key figures */

.au-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.au-figure {
  background: var(--bento-white);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
}
.au-figure h3 {
  font-family: var(--au-serif) !important;
  font-size: var(--au-h3) !important;
  font-weight: var(--au-heading-weight);
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--au-heading-color) !important;
  margin: 0 0 2px !important;
}
.au-figure-role {
  font-size: 1rem !important;
  color: var(--bento-ink-soft);
  margin-bottom: var(--sp-3) !important;
}
.au-figure p { font-size: 1.0625rem !important; line-height: 1.6; }

/* apparatus */

.au-aside {
  background: var(--bento-cream);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.au-glossary dt { font-family: var(--au-serif); font-size: 1.1875rem; font-weight: 700; color: var(--bento-ink); margin-top: var(--sp-3); }
.au-glossary dd { margin: 2px 0 0; font-family: var(--au-serif); color: var(--bento-ink-soft); font-size: 1.0625rem; line-height: 1.6; }

.au-cites li { font-size: 1rem !important; line-height: 1.6; color: var(--bento-ink-soft); }

.au-actor-list { list-style: none; padding: 0; }
.au-actor-list li {
  border-bottom: 1px solid var(--bento-line);
  padding: var(--sp-2) 0;
  font-size: 1.0625rem;
}
.au-actor-list li:last-child { border-bottom: 0; }

/* -------------------------------------------------------------- hub cards */

.au-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.au-card {
  display: block;
  text-decoration: none;
  background: var(--bento-white);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) ease,
              border-color var(--dur-fast) ease;
}
.au-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--bento-tan-200);
}
.au-card--wide { grid-column: 1 / -1; }
.au-card.is-locked { opacity: 0.66; }
.au-card p { margin: 0; font-family: var(--au-serif); }
.au-body .au-card-kind {
  font-size: var(--au-label);
  font-weight: var(--au-heading-weight);
  letter-spacing: var(--au-label-tracking);
  text-transform: uppercase;
  color: var(--au-heading-color);
  margin-bottom: var(--sp-2) !important;
}
.au-body .au-card-title {
  font-family: var(--au-serif) !important;
  font-size: var(--au-h3);
  font-weight: var(--au-heading-weight);
  line-height: 1.25;
  color: var(--au-heading-color);
  margin-bottom: var(--sp-2) !important;
}
.au-body .au-card-note { font-size: 1.0625rem; line-height: 1.6; color: var(--bento-ink-soft); margin-bottom: var(--sp-3) !important; }
.au-body .au-card-meta {
  font-size: 0.9375rem;
  color: var(--bento-ink-soft);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- summary */

.au-sumhead { margin-bottom: var(--sp-6); }
.au-sumhead p { font-family: var(--au-serif); margin: 0; }
.au-body .au-sumhead-tier {
  font-family: var(--au-serif) !important;
  font-size: var(--au-h2);
  font-weight: var(--au-heading-weight);
  line-height: 1.2;
  color: var(--au-heading-color);
  margin-bottom: var(--sp-2) !important;
}
.au-body .au-sumhead-note { font-size: 1.0625rem; color: var(--bento-ink-soft); margin-bottom: var(--sp-1) !important; }
.au-body .au-sumhead-count { font-size: 0.9375rem; color: var(--bento-ink-soft); font-variant-numeric: tabular-nums; }

.au-sum-block {
  border-top: 1px solid var(--bento-line);
  padding-top: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.au-sum-block h2 {
  font-family: var(--au-serif);
  font-size: var(--au-h2);
  font-weight: var(--au-heading-weight);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--au-heading-color);
  text-wrap: balance;
  margin: 0 0 var(--sp-3);
}

.au-nextprev {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  border-top: 1px solid var(--bento-line);
  padding-top: var(--sp-5);
  margin-top: var(--sp-7);
}

/* --------------------------------------------------------------- timeline */

.au-tl-intro p {
  font-family: var(--au-serif);
  font-size: 1.125rem;
  color: var(--bento-ink-soft);
  margin: 0 0 var(--sp-5);
}

/* The numbers at the top: span, entries, phases, turning points, people. */
.au-tl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
}
.au-tl-stat {
  background: var(--bento-white);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin: 0;
}
.au-tl-stat--span { grid-column: span 2; background: var(--bento-cream); }
.au-tl-stat--key dd:first-of-type { color: var(--bento-ink); }
.au-tl-stat dt {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bento-ink-soft);
}
.au-tl-stat dd {
  margin: 2px 0 0;
  font-family: var(--au-serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--au-heading-color);
  font-variant-numeric: tabular-nums;
}
.au-tl-stat .au-tl-stat-sub {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bento-ink-soft);
}
.au-tl-stat-dash { margin: 0 0.12em; color: var(--bento-tan-300); }

/* Key figures who appear in the chronology, with the role the author gave
   them. With the script running, each one filters the timeline. */
.au-tl-people { margin: 0 0 var(--sp-6); }
.au-tl-people h2 {
  font-family: var(--au-serif);
  font-weight: var(--au-heading-weight);
  font-size: 1.375rem;
  color: var(--au-heading-color);
  margin: 0 0 var(--sp-1);
}
.au-body .au-tl-people-note {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--bento-ink-soft);
  margin: 0 0 var(--sp-3);
}
.au-tl-people-list {
  list-style: none;
  margin: 0;
  padding: var(--sp-1) 2px var(--sp-3);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 260px);
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.au-tl-person {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  scroll-snap-align: start;
  background: var(--bento-white);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease,
              transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) ease;
}
.au-tl-person[role="button"] { cursor: pointer; }
@media (hover: hover) {
  .au-tl-person[role="button"]:hover {
    border-color: var(--bento-tan-300);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
  }
}
.au-tl-person[role="button"]:active { transform: scale(0.98); }
.au-tl-person.is-on { background: var(--bento-sand); border-color: var(--bento-ink); }
.au-tl-person-initial {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--au-serif);
  font-size: 1.125rem;
  font-weight: 700;
  background: var(--bento-ink);
  color: var(--bento-cream);
}
.au-tl-person.is-on .au-tl-person-initial { background: var(--bento-tan-300); color: var(--bento-ink); }
.au-tl-person-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.au-tl-person-name {
  font-family: var(--au-serif);
  font-size: 1.0625rem;
  color: var(--bento-ink);
  line-height: 1.25;
}
.au-tl-person-role {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--bento-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.au-tl-person-hits {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bento-ink);
  font-variant-numeric: tabular-nums;
}

/* Controls. Not sticky: with every phase as a chip it can be several rows
   tall, so the compact scrubber below is what follows the reader. */
.au-tl-bar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--bento-cream);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.au-tl-search { position: relative; }
.au-tl-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--bento-ink-soft);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}
.au-tl-search input {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--bento-ink);
  background: var(--bento-white);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-pill);
  padding: 10px 16px 10px 42px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.au-tl-search input:focus {
  outline: none;
  border-color: var(--bento-tan-300);
  box-shadow: 0 0 0 3px var(--bento-tan-100);
}
.au-tl-filters,
.au-tl-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

.au-chip {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--bento-ink-soft);
  background: var(--bento-white);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
              border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.au-chip:hover { border-color: var(--bento-tan-200); color: var(--bento-ink); }
.au-chip:active { transform: scale(0.96); }
.au-chip.is-on {
  background: var(--bento-tan-200);
  border-color: var(--bento-tan-300);
  color: var(--bento-btn-text);
  font-weight: 700;
}
.au-chip-n { opacity: 0.65; font-variant-numeric: tabular-nums; margin-left: 4px; }
.au-chip--alt { background: var(--bento-sand); }
.au-chip--who {
  background: var(--bento-highlight);
  border-color: var(--bento-highlight);
  color: var(--bento-ink);
  font-weight: 600;
}
.au-chip--who:not([hidden]) { animation: au-tl-pop var(--dur-base) var(--ease-spring); }
.au-tl-count {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--bento-ink-soft);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* The scrubber: one tick per entry, tall and dark for turning points. It sits
   in the flow at the head of the timeline, an overview and a jump bar, and
   scrolls away with the page: pinned under the nav it covered the text. */
.au-tl-scrub {
  position: relative;
  z-index: 5;
  background: var(--bento-cream);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-sm);
  box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.25);
  padding: var(--sp-2) var(--sp-3) 0;
  margin-bottom: var(--sp-6);
}
.au-tl-now {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  min-width: 0;
}
.au-tl-now-date { color: var(--bento-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.au-tl-now-phase {
  color: var(--bento-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.au-tl-now-n { color: var(--bento-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-tl-ticks {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
  height: 44px;
  padding: 8px 0 10px;
  box-sizing: border-box;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* The strip is aria-hidden (pointer-only; keyboards use j/k), and
   accessibility-2026.css turns pointer events off on every aria-hidden node,
   which left the ticks untappable. Two classes outrank that rule. */
.au-tl-scrub .au-tl-ticks { pointer-events: auto; }
.au-tl-tick {
  flex: 0 1 7px;
  min-width: 2px;
  height: 38%;
  border-radius: 2px;
  background: var(--bento-tan-200);
  transition: height var(--dur-fast) ease, background var(--dur-fast) ease,
              opacity var(--dur-base) ease;
}
.au-tl-tick.is-alt { background: var(--bento-tan-100); }
.au-tl-tick[data-significance="major"] { height: 66%; background: var(--bento-tan-300); }
.au-tl-tick[data-significance="critical"] { height: 100%; background: var(--bento-ink); }
.au-tl-tick.is-off { opacity: 0.18; }
.au-tl-tick.is-hover { height: 100%; }
.au-tl-tick.is-active {
  height: 100%;
  background: var(--bento-ink);
  box-shadow: 0 0 0 2px var(--bento-cream), 0 0 0 3.5px var(--bento-tan-300);
}
.au-tl-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  max-width: min(360px, 92%);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bento-cream);
  background: var(--bento-ink);
  border-radius: var(--r-xs);
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* The rail, and the fill that follows the reader down it. */
.au-tl-list {
  --tl-pad: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--tl-pad);
  position: relative;
}
.au-tl-list::before,
.au-tl-list::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
}
.au-tl-list::before { background: var(--bento-line); }
.au-tl-list::after {
  background: linear-gradient(180deg, var(--bento-tan-300), var(--bento-ink));
  transform-origin: top;
  transform: scaleY(var(--tl-progress, 0));
}

.au-tl-phase { margin: var(--sp-7) 0 var(--sp-4); }
.au-tl-phase:first-child { margin-top: 0; }
.au-body .au-tl-phase-kicker {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bento-ink-soft);
  margin: 0 0 var(--sp-1);
}
.au-tl-phase h2 {
  font-family: var(--au-serif);
  font-weight: var(--au-heading-weight);
  font-size: var(--au-h2);
  line-height: 1.2;
  color: var(--au-heading-color);
  margin: 0;
  text-wrap: balance;
}
.au-body .au-tl-phase-span {
  font-family: var(--au-serif);
  font-size: 1rem;
  color: var(--bento-ink-soft);
  font-variant-numeric: tabular-nums;
  margin: 2px 0 0;
}

/* "40 years later": the silence between two entries, sitting on the rail. */
.au-tl-gap { margin: var(--sp-2) 0 var(--sp-4) calc(-1 * var(--tl-pad)); }
.au-tl-gap[hidden] { display: none; }
.au-tl-gap span {
  display: inline-block;
  position: relative;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  font-style: italic;
  color: var(--bento-ink-soft);
  background: var(--bento-cream);
  border: 1px dashed var(--bento-tan-200);
  border-radius: var(--r-pill);
  padding: 3px 12px;
}

.au-tl-item { position: relative; margin-bottom: var(--sp-3); }
.au-tl-item[hidden] { display: none; }

.au-tl-card {
  background: var(--bento-white);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-base) ease,
              transform var(--dur-base) var(--ease-spring);
}
@media (hover: hover) {
  .au-tl-card:hover {
    border-color: var(--bento-tan-200);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
  }
}
.au-tl-card[open] { box-shadow: var(--shadow-card); }
.au-tl-item.is-active .au-tl-card { border-color: var(--bento-tan-300); }
.au-tl-item[data-significance="critical"] .au-tl-card { border-left: 3px solid var(--bento-ink); }
.au-tl-item.is-flash .au-tl-card { animation: au-tl-flash 1.6s var(--ease-out); }

.au-tl-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--sp-3);
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-xs);
}
.au-tl-head::-webkit-details-marker { display: none; }
.au-tl-head:active .au-tl-headline { opacity: 0.7; }

.au-tl-node {
  position: absolute;
  top: calc(var(--sp-4) + 8px);
  left: calc(8px - var(--tl-pad));
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bento-white);
  border: 2px solid var(--bento-tan-300);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast) ease;
  z-index: 1;
}
.au-tl-item[data-significance="major"] .au-tl-node { background: var(--bento-tan-300); }
.au-tl-item[data-significance="critical"] .au-tl-node {
  width: 16px;
  height: 16px;
  background: var(--bento-ink);
  border-color: var(--bento-ink);
  box-shadow: 0 0 0 3px var(--bento-cream);
}
.au-tl-item.is-active .au-tl-node {
  transform: translate(-50%, -50%) scale(1.35);
  animation: au-tl-pulse 2s var(--ease-out) infinite;
}

.au-tl-date {
  font-family: var(--au-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bento-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.au-tl-headline {
  font-family: var(--au-serif);
  font-size: var(--au-h3);
  font-weight: var(--au-heading-weight);
  line-height: 1.3;
  color: var(--au-heading-color);
  min-width: 0;
  transition: opacity var(--dur-fast) ease;
}
.au-tl-tags { display: inline-flex; align-items: center; gap: var(--sp-2); align-self: center; }
.au-tl-flag {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bento-cream);
  background: var(--bento-ink);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  white-space: nowrap;
}
.au-tl-flag--major { color: var(--bento-ink); background: var(--bento-tan-100); }
.au-tl-chev {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--bento-ink-soft);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Plus when closed, minus when open: the vertical bar folds away. */
.au-tl-chev .pm-v { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-base) var(--ease-spring); }
.au-tl-card[open] .au-tl-chev .pm-v { transform: scaleY(0); }

.au-tl-detail {
  border-top: 1px solid var(--bento-line);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
}
.au-tl-detail p {
  font-family: var(--au-serif);
  font-size: 1.125rem;
  line-height: 1.68;
  color: var(--bento-ink);
  margin: 0 0 var(--sp-3);
}
.au-tl-meta { margin-bottom: var(--sp-3); }
.au-tl-where,
.au-tl-who { color: var(--bento-ink-soft) !important; font-size: 1.0625rem !important; }
.au-tl-detail .au-tl-where { margin-bottom: var(--sp-2); }
.au-tl-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.au-tl-actors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}
.au-body .au-tl-actor,
.au-tl-actor-btn > span {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--bento-ink);
  background: var(--bento-sand);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 3px 10px;
}
.au-body .au-tl-actor:has(> .au-tl-actor-btn) { background: none; padding: 0; border: 0; }
.au-tl-actor.is-figure,
.au-tl-actor.is-figure .au-tl-actor-btn > span { font-weight: 600; border-color: var(--bento-tan-200); }
.au-tl-actor-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.au-tl-actor-btn > span { transition: background var(--dur-fast) ease, transform var(--dur-fast) ease; }
.au-tl-actor-btn:hover > span { background: var(--bento-tan-100); }
.au-tl-actor-btn:active > span { transform: scale(0.95); }
.au-tl-roles {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bento-cream);
  border-radius: var(--r-xs);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--bento-ink-soft);
}
.au-body .au-tl-roles li { font: inherit; color: inherit; }
.au-tl-roles li + li { margin-top: 4px; }
.au-tl-roles b { color: var(--bento-ink); font-weight: 600; }
.au-tl-why {
  background: var(--bento-cream);
  border-left: 2px solid var(--bento-tan-300);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  padding: var(--sp-3);
}

/* Earlier / Later: plain anchor links, so the reading flow works with the
   script off; the script turns them into an open-and-glide. Each shows only
   its direction and date; the neighbour's headline is in the title. */
.au-tl-step {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.au-tl-step-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  max-width: calc(50% - var(--sp-1));
  flex: 1 1 0;
  font-family: var(--font-ui);
  text-decoration: none;
  color: var(--bento-ink);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-xs);
  padding: 6px 12px;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease,
              transform var(--dur-fast) ease;
}
.au-tl-step-link:hover { border-color: var(--bento-tan-300); background: var(--bento-cream); }
.au-tl-step-link:active { transform: scale(0.98); }
.au-tl-step-link--next { margin-left: auto; text-align: right; }
.au-tl-step-dir {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bento-ink-soft);
}
.au-tl-step-what {
  font-size: 0.875rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.au-body .au-tl-empty {
  font-family: var(--au-serif);
  color: var(--bento-ink-soft);
  text-align: center;
  padding: var(--sp-7) 0;
}

/* Opening a card glides rather than snaps, where the browser can animate to
   height:auto. Elsewhere it simply opens, as before. */
@supports selector(::details-content) {
  .au-tl-card { interpolate-size: allow-keywords; }
  .au-tl-card::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 380ms var(--ease-out), content-visibility 380ms allow-discrete;
  }
  .au-tl-card[open]::details-content { block-size: auto; }
}
.au-tl-card[open] .au-tl-detail > * { animation: au-tl-rise 420ms var(--ease-out) both; }
.au-tl-card[open] .au-tl-detail > :nth-child(2) { animation-delay: 50ms; }
.au-tl-card[open] .au-tl-detail > :nth-child(3) { animation-delay: 100ms; }
.au-tl-card[open] .au-tl-detail > :nth-child(4) { animation-delay: 150ms; }
.au-tl-card[open] .au-tl-detail > :nth-child(n+5) { animation-delay: 200ms; }

@keyframes au-tl-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes au-tl-pop  { from { transform: scale(0.85); opacity: 0; } }
@keyframes au-tl-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200, 144, 31, 0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(200, 144, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 144, 31, 0); }
}
@keyframes au-tl-flash {
  0%, 25% { box-shadow: 0 0 0 3px var(--bento-highlight), var(--shadow-card); }
}

/* ------------------------------------------------------------- animations */

/* Entries start visible. The script adds `.au-anim` to the timeline (and
 * `.au-tl-anim` to <html>) only when it is running, so a reader with
 * JavaScript off never gets a page of permanently invisible entries. */
.au-anim .au-tl-item,
.au-anim .au-tl-phase,
.au-anim .au-tl-gap,
.au-tl-anim .au-tl-stat,
.au-tl-anim .au-tl-person {
  opacity: 0;
  transform: translateY(14px);
}
.au-anim .au-tl-gap { transform: scaleX(0.6); transform-origin: left; }
.au-anim .au-tl-item.is-in,
.au-anim .au-tl-phase.is-in,
.au-anim .au-tl-gap.is-in,
.au-tl-anim .au-tl-stat.is-in,
.au-tl-anim .au-tl-person.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) ease calc(var(--i, 0) * 45ms),
              transform var(--dur-slow) var(--ease-spring) calc(var(--i, 0) * 45ms);
}
.au-tl-anim .au-tl-stat:nth-child(2) { --i: 1; }
.au-tl-anim .au-tl-stat:nth-child(3) { --i: 2; }
.au-tl-anim .au-tl-stat:nth-child(4) { --i: 3; }
.au-tl-anim .au-tl-stat:nth-child(5) { --i: 4; }
/* Once in, hover and press feedback need their own quick transitions back. */
.au-tl-anim .au-tl-person.is-in {
  transition: opacity var(--dur-slow) ease calc(var(--i, 0) * 45ms),
              transform var(--dur-base) var(--ease-spring),
              border-color var(--dur-fast) ease, background var(--dur-fast) ease,
              box-shadow var(--dur-base) ease;
}

@media (prefers-reduced-motion: reduce) {
  .au-anim .au-tl-item,
  .au-anim .au-tl-phase,
  .au-anim .au-tl-gap,
  .au-tl-anim .au-tl-stat,
  .au-tl-anim .au-tl-person { opacity: 1; transform: none; }
  .au-card:hover,
  .au-tl-card:hover { transform: none; }
  .au-tl-item.is-active .au-tl-node { animation: none; }
  .au-tl-card::details-content { transition: none; }
  .au-tl-list::after { transform: none; opacity: 0; }
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 640px) {
  :root { --au-h2: 1.75rem; --au-h3: 1.375rem; --au-label: 1rem; }
  .au-page { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
  .au-tl-list { --tl-pad: var(--sp-5); }
  /* A long date beside a "Turning point" flag is wider than a phone's card,
     so the flag takes its own row: date and chevron, flag, headline. The
     tags wrapper steps aside so the flag and chevron are placed separately. */
  .au-tl-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "date chev" "flag flag" "head head";
    gap: var(--sp-1) var(--sp-2);
  }
  .au-tl-date { grid-area: date; min-width: 0; white-space: normal; }
  .au-tl-tags { display: contents; }
  .au-tl-flag { grid-area: flag; justify-self: start; }
  .au-tl-chev { grid-area: chev; align-self: center; }
  .au-tl-headline { grid-area: head; }
  .au-tl-node { top: calc(var(--sp-3) + 10px); }
  .au-tl-card { padding: var(--sp-3); }
  .au-tl-stat--span { grid-column: 1 / -1; }
  .au-tl-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .au-tl-stat dd { font-size: 1.625rem; }
  .au-tl-scrub { border-radius: var(--r-xs); }
  .au-tl-count { margin-left: 0; width: 100%; }
  .au-figures { grid-template-columns: 1fr; }
}

/* Anything that can outgrow the column scrolls inside itself, never the page. */
.au-body table,
.au-body pre { display: block; max-width: 100%; overflow-x: auto; }

/* --------------------------------------- names the shell actually uses */

.au-save-icon { width: 16px; height: 16px; flex: none; }
.au-lock { width: 12px; height: 12px; flex: none; }

.au-foot {
  border-top: 1px solid var(--bento-line);
  margin-top: var(--sp-9);
  padding-top: var(--sp-4);
}
.au-foot p {
  font-family: var(--au-serif);
  font-size: 0.9375rem;
  color: var(--bento-ink-soft);
  margin: 0;
}
.au-foot a { color: var(--bento-ink-soft); }

/* -------------------------------------- remaining structures in essay.html */

/* A numbered cause list is a ranking, not decoration: the author ordered them
   from the deepest structural cause to the most proximate, so the numbers
   carry that order and are worth showing. */
.au-cause-list { counter-reset: cause; list-style: none; padding-left: 0; }
.au-cause-list > li {
  position: relative;
  padding-left: var(--sp-7);
  margin-bottom: var(--sp-4);
}
.au-cause-list > li::before {
  counter-increment: cause;
  content: counter(cause);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bento-line);
  border-radius: 50%;
  background: var(--bento-sand);
  font-family: var(--au-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bento-ink);
}

.au-phase-head { margin-bottom: var(--sp-4); }

.au-view-list { list-style: none; padding-left: 0; }
.au-view-list > li {
  border-left: 2px solid var(--bento-line);
  padding-left: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.au-glossary-row { margin-bottom: var(--sp-3); }
.au-glossary-row dt { margin-top: 0; }

.au-related { list-style: none; padding-left: 0; }
.au-related > li { border-bottom: 1px solid var(--bento-line); padding: var(--sp-2) 0; }
.au-related > li:last-child { border-bottom: 0; }
.au-related a { color: var(--bento-ink); text-decoration: none; border-bottom: 1px solid var(--bento-tan-200); }
.au-related a:hover { border-bottom-color: var(--bento-tan-300); }

/* The intro and the conclusion are the two sections a reader most often jumps
   to, so each gets a little more air than the body sections between them. */
.au-section--intro { margin-bottom: var(--sp-9); }
.au-section--conclusion { margin-top: var(--sp-9); }

/* Signed-out reader at an event overview: the sign-in card that replaces the
   content (templates/authored/hub_gated.html) is styled and animated by
   signin_wall.css, which /login shares. */