/* =========================================================================
   Stepansky Medical-Surgical Encyclopedia — stylesheet
   Black/white/gray, sans-serif, high readability.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --bg: #ffffff;
  --bg-alt: #f6f6f6;
  --ink: #141414;
  --ink-1: #2a2a2a;
  --ink-2: #555555;
  --ink-3: #888888;
  --rule: #e4e4e4;
  --rule-strong: #cfcfcf;
  --accent: #141414;
  --hover: #000000;
  --selection: #ffe96a;

  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --measure: 38rem;

  --sans: Arial, Helvetica, sans-serif;
  --mono: Arial, Helvetica, sans-serif;
}

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

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

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  font-feature-settings: "kern", "liga", "calt", "ss01";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Sticky-footer layout: pin the Mailman brand bar to the bottom of the
     viewport on short pages while letting it sit naturally below content
     on tall ones. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* Never let the body itself exceed the viewport width. */
  max-width: 100vw;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--hover);
}

::selection {
  background: var(--selection);
  color: var(--ink);
}

/* ---------- masthead (one blue header) ---------- */
/* Layout:
     row 1 (thin, top): Mailman logo only, right-aligned
     row 2: Brand · Sponsored by Center for History...   [hamburger / nav links]
   Row 2 is forced to a single line — items shrink before they wrap. */
.masthead {
  background: #0077c8;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.masthead__topline {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.35rem var(--gutter) 0;
  display: flex;
  justify-content: flex-end;
}
.masthead__school {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.masthead__logo {
  height: 1.35rem;
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
}
.masthead__sponsor-line {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.78rem;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.masthead__eyebrow {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
  flex: 0 0 auto;
}
.masthead__center {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.masthead__center:hover {
  border-bottom-color: #fff;
  color: #fff;
}
.masthead__sep {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 300;
  flex: 0 0 auto;
  margin: 0 0.15rem;
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.55rem var(--gutter) 0.7rem;
  flex-wrap: nowrap; /* one line — items shrink, sponsor truncates if needed */
}
.masthead__inner > .brand {
  flex: 0 0 auto;
}
.masthead__inner > .masthead__nav {
  margin-left: auto;
  flex: 0 0 auto;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  text-decoration: none;
  color: #fff;
}

.brand__name {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: #fff;
  white-space: nowrap;
}
.brand:hover {
  color: #fff;
  opacity: 0.9;
}

.masthead__nav {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.nav-link {
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.1s, border-color 0.1s;
}

.nav-link:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.7);
}

.nav-link.is-active {
  color: #fff;
  border-bottom-color: #fff;
}

/* ---------- shell ---------- */
/* Push the colophon + brandbar to the bottom on short pages. */
main.shell { flex: 1 0 auto; }

.shell {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter) 4rem;
}

.section {
  margin-bottom: 2.5rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin: 0 0 0.9rem;
}

.display {
  font-family: var(--sans);
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.8rem;
  color: var(--ink);
}

.display__rule {
  font-weight: 700;
}

.lede {
  font-family: var(--sans);
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 36rem;
  margin: 0;
  line-height: 1.5;
}

.display__subtitle {
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink-2);
  margin: 0.4rem 0 0;
  letter-spacing: 0.005em;
}

.display__version {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
  margin: 0.3rem 0 0;
}

.entry__colon {
  font-weight: 700;
  color: var(--ink);
}

.about-body p {
  margin: 0 0 1.2em;
  line-height: 1.65;
  max-width: 42rem;
}

/* About page: tone down the masthead so it doesn't dominate the bio. */
.page--about .display {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}
.page--about .eyebrow {
  font-size: 0.7rem;
}

/* ---------- timeline year jumper (right sidebar, sticky) ---------- */
.timeline-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 2.5rem;
  align-items: start;
}
.timeline-layout > .body { max-width: none; }
.year-jump-wrap {
  position: sticky;
  /* Clear the sticky blue masthead (logo strip + main row ≈ 4.5rem). */
  top: 4.75rem;
  padding: 0.95rem 1rem 1.05rem;
  border: 1px solid var(--rule, #e5e5e5);
  border-radius: 0.5rem;
  background: var(--bg, #fff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  z-index: 5;
  /* Vertical scroll gestures should pass through the widget so a drag
     started on it scrolls the page rather than getting captured. */
  touch-action: pan-y;
}
/* The input itself: same — let vertical scrolls bubble. */
.year-jump {
  touch-action: pan-y;
}
.year-jump-label {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3, #777);
  margin: 0 0 0.45rem;
}
.year-jump {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule, #ccc);
  border-radius: 0.35rem;
  background: #fff;
  color: var(--ink, #111);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.year-jump:focus {
  border-color: #0077c8;
  box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.18);
}
@media (max-width: 800px) {
  .timeline-layout { grid-template-columns: 1fr; }
  /* DOM order has events first then the jumper. On mobile we want the
     jumper visible at the top of the timeline, sticking just below the
     blue masthead so it's always within reach as the user scrolls. */
  .year-jump-wrap {
    order: -1;
    position: sticky;
    top: 3.4rem; /* mobile masthead is shorter (no top logo strip on phones) */
    margin-bottom: 1rem;
    padding: 0.6rem 0.8rem;
  }
  .year-jump {
    font-size: 0.9rem;
    padding: 0.45rem 0.6rem;
  }
  .year-jump-label {
    font-size: 0.65rem;
    margin-bottom: 0.3rem;
  }
}
.year-jump:focus {
  border-color: var(--ink, #111);
  box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.18);
}
.event--flash {
  animation: yearjump-flash 1.4s ease-out;
}
@keyframes yearjump-flash {
  0%   { background: #fff6c9; box-shadow: -0.6rem 0 0 #fff6c9, 0.6rem 0 0 #fff6c9; }
  100% { background: transparent; box-shadow: none; }
}

/* ---------- bibliography back-link (deep-arrival) ---------- */
.bib-item__back {
  display: inline-block;
  margin-left: 0.6rem;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #fff;
  background: #0077c8;
  padding: 0.15em 0.55em;
  border-radius: 0.25rem;
  text-decoration: none;
  vertical-align: 0.18em;
}
.bib-item__back:hover {
  background: #1d4f91;
  text-decoration: none;
}

/* ---------- search page ---------- */
/* Search-page-specific overrides: bump shell to viewport-sized so the
   input can fill the visible content area, not the 72rem cap that the
   other pages use. */
.page--search .shell {
  max-width: none;
  width: 100%;
}
.search-shell {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.search-input-wrap {
  margin: 0 0 1.4rem;
  width: 100%;
  position: relative;
}
.search-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1.18rem;
  padding: 0.95rem 1.2rem 0.95rem 3rem;
  border: 1px solid var(--rule, #d6d6d6);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #111);
  outline: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.search-input::placeholder {
  color: #888;
}
.search-input:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.search-input:focus {
  border-color: #0077c8;
  box-shadow: 0 2px 14px rgba(0, 119, 200, 0.22);
}
.search-input__icon {
  position: absolute;
  top: 50%;
  left: 1.05rem;
  transform: translateY(-50%);
  width: 1.15rem;
  height: 1.15rem;
  color: #777;
  pointer-events: none;
}
.search-input:focus ~ .search-input__icon,
.search-input-wrap:focus-within .search-input__icon {
  color: #0077c8;
}
.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
  color: var(--ink-2, #555);
}
.search-filters label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}
.search-status {
  font-size: 0.85rem;
  color: var(--ink-2, #555);
  margin: 0 0 0.6rem;
}
.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.search-result__link {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule, #e5e5e5);
  border-radius: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.1s;
}
.search-result__link:hover {
  border-color: var(--ink, #111);
}
.search-result__badge {
  display: inline-block;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.15em 0.55em;
  border-radius: 0.25rem;
  margin-right: 0.5rem;
  vertical-align: 0.12em;
  color: #fff;
  background: #6b7a86;
}
.search-result__badge--enc { background: #1d4f91; }
.search-result__badge--tl  { background: #0077c8; }
.search-result__badge--bib { background: #4a4a4a; }
.search-result__title {
  font-weight: 600;
  font-size: 1.04rem;
}
.search-result__qual {
  font-weight: 500;
  color: var(--ink-2, #555);
}
.search-result__snippet {
  margin: 0.35rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-2, #444);
  line-height: 1.5;
}
.search-result mark {
  background: #fff6c9;
  color: inherit;
  padding: 0 0.05em;
  border-radius: 0.15rem;
}

/* ---------- sponsorship brand bar (Columbia Mailman) ---------- */
/* Color: Mailman Academic Primary, Pantone 3005c, #0077C8 */
.brandbar {
  background: #0077C8;
  color: #fff;
  padding: 1.4rem 1.5rem;
  margin-top: 0;
}
.brandbar__inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.brandbar__author {
  margin: 0;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  flex: 0 0 auto;
}
.brandbar__center {
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 22rem;
}
.brandbar__center:hover {
  text-decoration: none;
}
.brandbar__center-eyebrow {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
}
.brandbar__center-name {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 0.05em;
  width: max-content;
  max-width: 100%;
}
.brandbar__center:hover .brandbar__center-name {
  border-bottom-color: #fff;
}
.brandbar__initiative {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.01em;
  margin-top: 0.05rem;
}
.brandbar__school {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.brandbar__logo {
  height: 2.25rem;
  width: auto;
  /* The source SVG is Mailman blue; invert to white for the blue bar. */
  filter: brightness(0) invert(1);
  display: block;
}
@media (max-width: 600px) {
  .brandbar__inner { gap: 1.2rem; }
  .brandbar__logo { height: 1.85rem; }
  .brandbar__center-name { font-size: 0.95rem; }
}

/* ---------- layout rail + body ---------- */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 960px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 13rem;
    gap: 3.5rem;
  }
}

.body {
  max-width: 46rem;
  min-width: 0;
}

.rail {
  position: sticky;
  top: 4.5rem;
  align-self: start;
  padding-left: 1rem;
  border-left: 1px solid var(--rule);
}

.rail__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin: 0 0 0.7rem;
}

.rail__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem 0.5rem;
}

.rail__stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rail__link {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.15rem 0;
  border-bottom: 1px solid transparent;
}

.rail__link--wide {
  font-size: 0.72rem;
}

.rail__link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- index cards / stats ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin: 0 0 2.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.25rem 0;
}

.stat {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.25rem 0.4rem;
  border-radius: 0.3rem;
  transition: background 0.12s, transform 0.12s;
}
.stat:hover, .stat:focus-visible {
  background: var(--rule, #f3f3f3);
  text-decoration: none;
  outline: none;
}
.stat:hover .stat__num {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.stat__num {
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  line-height: 1;
  font-feature-settings: "tnum";
  color: var(--ink);
  letter-spacing: -0.02em;
}

.stat__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin: 0.4rem 0 0;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 760px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.4rem 1.4rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.12s, background 0.12s;
}

.card:hover {
  border-color: var(--ink);
  background: var(--bg-alt);
}

.card__kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin: 0 0 0.5rem;
}

.card__title {
  font-family: var(--sans);
  font-size: 1.35rem;
  margin: 0 0 0.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card__body {
  font-size: 0.92rem;
  margin: 0 0 1rem;
  color: var(--ink-2);
  line-height: 1.55;
}

.card__cta {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin: auto 0 0;
}

.prose {
  border-top: 1px solid var(--rule);
  padding-top: 1.8rem;
  max-width: var(--measure);
}

.prose p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-1);
}

/* remove the old decorative drop cap in favor of clean reading */
.drop-cap::first-letter {
  font-weight: 700;
}

/* ---------- alphabet / era sections ---------- */
.alpha-section {
  margin: 0 0 2.8rem;
  scroll-margin-top: 5rem;
}

.alpha-heading {
  font-family: var(--sans);
  margin: 0 0 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  border-bottom: 1px solid var(--rule-strong);
  padding: 0 0 0.5rem;
}

.alpha-heading__letter {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  flex: 0 0 auto;
  letter-spacing: -0.01em;
}

.alpha-heading__letter--wide {
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.1em;
  color: var(--ink);
}

/* ---------- bibliography ---------- */
.bib-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: bib;
}

.bib-item {
  counter-increment: bib;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.8rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-1);
  scroll-margin-top: 5rem;
}

.bib-item::before {
  content: counter(bib);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-top: 0.2rem;
  font-feature-settings: "tnum";
}

.bib-item__text {
  color: var(--ink-1);
}

/* ---------- timeline events ---------- */
.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.event {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.2rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  /* Hash-link targets must scroll into view below the sticky masthead. */
  scroll-margin-top: 5rem;
}

@media (max-width: 680px) {
  .event {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

.event__date {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  padding-top: 0.18rem;
  font-feature-settings: "tnum";
}

.event__body {
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--ink-1);
}

/* ---------- encyclopedia entries ---------- */
.entry-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.entry {
  padding: 0.2rem 0 1.1rem;
  border-bottom: 1px solid var(--rule);
}

.entry__head {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.entry__headword {
  font-weight: 700;
  color: var(--ink);
}

.entry__qual {
  font-weight: 500;
  color: var(--ink-2);
}

.entry__body {
  font-size: 0.95rem;
  line-height: 1.64;
  margin: 0;
  color: var(--ink-1);
}

/* ---------- Entry of the Day ---------- */
.eotd {
  margin: 0 0 3rem;
}

.eotd__eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin: 0 0 0.8rem;
}

.eotd__card {
  display: block;
  padding: 1.6rem 1.6rem 1.5rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}

.eotd__card:hover {
  border-color: var(--ink);
  background: var(--bg-alt);
}

.eotd__headword {
  font-family: var(--sans);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.25rem;
  line-height: 1.15;
}

.eotd__qual {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink-2);
  margin: 0 0 0.85rem;
  font-style: italic;
  line-height: 1.4;
}

.eotd__body {
  font-family: var(--sans);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-1);
  margin: 0 0 1rem;
}

.eotd__more {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin: 0;
}

/* ---------- Drill-down histogram (full-width, in flow) ---------- */

.drill {
  width: 100%;
  background: var(--bg);
  border-top: 1px solid var(--rule-strong);
  margin-top: 2rem;
}

.drill__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem var(--gutter) 0.5rem;
  min-height: 1.6rem;
  border-bottom: 1px solid var(--rule);
}

.drill__crumbs {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.drill__crumbs .crumb {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.drill__crumbs .crumb.is-current {
  color: var(--ink);
  font-weight: 600;
}

.drill__crumbs .crumb-sep {
  color: var(--ink-3);
}

.drill__zoom {
  display: flex;
  gap: 0.35rem;
}

.drill__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.drill__btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.drill__btn:disabled {
  color: var(--rule-strong);
  border-color: var(--rule);
  cursor: default;
  opacity: 0.65;
}

.drill__btn svg {
  display: block;
}

.drill__hint {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--ink-3);
  margin: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.drill__stage {
  position: relative;
  padding: 1.2rem var(--gutter) 1.4rem;
}

.drill__bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 120px;
  width: 100%;
}

.drill-bar {
  flex: 0 0 2px;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.drill-bar::before {
  content: "";
  display: block;
  width: 100%;
  height: var(--h, 6%);
  background: var(--ink-2);
  transition: background 0.08s, transform 0.08s;
  transform-origin: bottom;
}

.drill__bars[data-level="2"] .drill-bar::before {
  height: 100%;
}

.drill-bar:hover::before,
.drill-bar.is-active::before {
  background: var(--ink);
  transform: scaleX(3);
}

.drill__pop {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  width: 460px;
  background: #141414;
  color: #f2f2f2;
  padding: 0.8rem 0.95rem 0.9rem;
  font-family: var(--sans);
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.12s, transform 0.12s;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.32);
  border-radius: 2px;
}

.drill__pop.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.drill-pop__title {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.1rem;
  color: #fff;
  letter-spacing: -0.005em;
}

.drill-pop__sub {
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9a9a9a;
  margin: 0 0 0.65rem;
}

.drill-pop__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drill-pop__list li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.5rem;
  padding: 0.28rem 0;
  border-top: 1px solid #2a2a2a;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #e5e5e5;
}

.drill-pop__list li:first-child {
  border-top: 0;
}

.drill-pop__date {
  font-family: var(--mono);
  color: #b9b9b9;
  font-size: 0.62rem;
  padding-top: 0.1rem;
}

.drill-pop__more {
  grid-template-columns: 1fr !important;
  color: #9a9a9a;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.drill-pop__body {
  font-size: 0.78rem;
  line-height: 1.55;
  color: #eaeaea;
  margin: 0;
}

/* encyclopedia entry anchor room */
.entry {
  scroll-margin-top: 5rem;
}

/* Deep-link target highlight intentionally disabled —
   no tinted background on entries arrived at via #anchor. */

/* ---------- citation links + tooltip ---------- */
.cite {
  position: relative;
  color: inherit;
  text-decoration: underline dotted var(--ink-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: help;
}

.cite:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.cite:hover::after {
  content: attr(data-cite);
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 50;
  display: block;
  width: max-content;
  max-width: 26rem;
  padding: 0.7rem 0.85rem;
  background: #141414;
  color: #f4f4f4;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: none;
  white-space: normal;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

/* flip tooltip to the right edge when near the viewport right */
.cite:hover::before {
  content: "";
  position: absolute;
  top: calc(100% + 0.15rem);
  left: 0.35rem;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #141414;
  z-index: 51;
  pointer-events: none;
}

/* bibliography entries are the anchor targets — leave room under the sticky masthead */
.bib-item {
  scroll-margin-top: 5rem;
}

/* Deep-link target highlight intentionally disabled. */

/* ---------- Per-entry actions toolbar ---------- */
.entry-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
  align-items: center;
}
/* On the timeline, .event is a 2-col grid (date | body). Default DOM order
   would drop the toolbar into the narrow date column and force it to stack
   vertically. Span it under the body column instead. */
.event > .entry-actions {
  grid-column: 2;
}
.entry-action {
  font-family: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.5;
  white-space: nowrap;
  transition: color 80ms, border-color 80ms;
}
.entry-action:hover,
.entry-action:focus-visible {
  color: var(--ink);
  border-color: var(--ink-2);
  outline: none;
}
.entry-action:disabled {
  cursor: default;
  opacity: 0.7;
}

/* Print one entry: hide everything else, show only the targeted entry. */
@media print {
  body.print-one-entry .masthead,
  body.print-one-entry .colophon,
  body.print-one-entry .brandbar,
  body.print-one-entry .alpha-heading,
  body.print-one-entry .year-jump-wrap,
  body.print-one-entry .entry-actions {
    display: none !important;
  }
  body.print-one-entry .entry-list > *:not(.is-print-target),
  body.print-one-entry .bib-list > *:not(.is-print-target),
  body.print-one-entry .event-list > *:not(.is-print-target) {
    display: none !important;
  }
  body.print-one-entry .alpha-section:not(:has(.is-print-target)) {
    display: none !important;
  }
  body.print-one-entry .is-print-target {
    page-break-inside: avoid;
  }
}

/* ---------- Single-entry standalone page ---------- */
.single {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.4rem 4rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-1);
}
.single__masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.7rem;
  margin-bottom: 2rem;
  font-size: 0.78rem;
}
.single__brand {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.single__brand .brand__mark {
  font-family: var(--serif, Georgia, serif);
  margin-right: 0.2em;
  color: var(--ink);
}
.single__back {
  color: var(--ink-3);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.single__back:hover {
  color: var(--ink);
}
.single__head {
  font-size: 1.7rem;
  line-height: 1.25;
  margin: 0 0 0.4rem;
  color: var(--ink);
  font-weight: 600;
}
.single__qual {
  font-size: 1rem;
  color: var(--ink-2);
  font-style: italic;
  margin: 0 0 1.4rem;
}
.single__body {
  margin-top: 1.2rem;
}
.single__body p {
  margin: 0 0 1em;
}
.single__body--bib {
  font-size: 0.98rem;
}
.single__foot {
  margin-top: 3rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 0.75rem;
}
.single__foot a {
  color: var(--ink-2);
}
@media print {
  .single__masthead,
  .single__foot { border-color: #ccc; }
  .single__back { display: none; }
}

/* ---------- Drill widget: phone responsiveness ---------- */
@media (max-width: 640px) {
  .drill__head {
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    padding: 0.55rem var(--gutter) 0.55rem;
  }
  /* "hover · click to drill in · …" is meaningless on touch — drop it. */
  .drill__hint {
    display: none;
  }
  .drill__crumbs {
    font-size: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
  }
  .drill__zoom {
    margin-left: auto;
    flex: 0 0 auto;
  }
  /* Larger tap targets per Apple HIG; min 36px square. */
  .drill__btn {
    width: 36px;
    height: 36px;
  }
  .drill__btn svg {
    width: 18px;
    height: 18px;
  }
  .drill__stage {
    padding: 0.7rem var(--gutter) 1rem;
  }
  .drill__bars {
    height: 88px;
  }
  /* Fatten bars slightly for finger tapping; the drill is still legible
     at 50–60 bars across a phone screen. */
  .drill-bar {
    flex: 0 0 4px;
  }
  /* On hover/active the scaleX(3) → 12px wide highlight is fine. */

  /* Popup: tighter typography so it fits a single phone column. */
  .drill__pop {
    padding: 0.7rem 0.8rem 0.8rem;
  }
  .drill-pop__title {
    font-size: 0.98rem;
  }
  .drill-pop__sub {
    font-size: 0.55rem;
    margin-bottom: 0.5rem;
  }
  .drill-pop__list li {
    grid-template-columns: 2.7rem 1fr;
    gap: 0.4rem;
    font-size: 0.7rem;
  }
  .drill-pop__date {
    font-size: 0.6rem;
  }
  .drill-pop__body {
    font-size: 0.74rem;
    line-height: 1.5;
  }
}

/* ---------- Citations: replace hover-tooltip with native title on touch ---------- */
@media (hover: none) {
  /* Touch devices can't "hover," so the ::after preview never fires.
     Long-press already shows the data-cite via its title attribute when
     present — but we don't currently set title=. Fall back to suppressing
     the hover-style tooltip so it doesn't hide off-screen on tap. */
  .cite::after,
  .cite::before {
    display: none !important;
  }
}

/* ---------- Mobile hamburger menu ---------- */
/* Hide the toggle button on desktop. */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 2px;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  align-items: center;
  flex-direction: column;
  gap: 4px;
  width: 36px;
  height: 36px;
  justify-content: center;
}
.nav-toggle__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  transition: transform 0.18s, opacity 0.12s;
}
@media (max-width: 720px) {
  /* Show the toggle, hide the inline nav. */
  .nav-toggle {
    display: inline-flex;
  }
  .masthead__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: #0077c8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
    padding: 0.4rem var(--gutter) 0.8rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.18s ease-out, opacity 0.14s;
  }
  body.nav-open .masthead__nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .masthead__nav .nav-link {
    padding: 0.7rem 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .masthead__nav .nav-link:last-child {
    border-bottom: 0;
  }
  /* Animate the icon → close (X). */
  body.nav-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  body.nav-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }
  body.nav-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .masthead {
    /* Anchor the absolute-positioned nav panel. */
    position: sticky;
  }
  .masthead__inner {
    gap: 0.6rem;
    padding: 0.7rem var(--gutter);
  }
  .brand__name {
    font-size: 0.78rem;
  }
}

/* ---------- Mobile overflow fixes ---------- */
@media (max-width: 720px) {
  /* Brand-bar copy was forcing its natural full width and bleeding off
     the right edge of phones. Let the centre block shrink properly. */
  .brandbar {
    padding: 1.1rem 1rem;
  }
  .brandbar__inner {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .brandbar__center {
    flex: 1 1 0;
    min-width: 0;
  }
  .brandbar__center-name {
    width: auto;
    font-size: 0.92rem;
    line-height: 1.3;
  }
  .brandbar__center-eyebrow {
    font-size: 0.62rem;
  }
  .brandbar__logo {
    height: 1.5rem;
  }
}

/* Drill bars: don't pin a fixed bar width on mobile or there's no way to
   fit ~50–150 bars in a phone-width container. Let them share width
   equally with a sane minimum. */
@media (max-width: 720px) {
  .drill-bar {
    flex: 1 1 2px;
    min-width: 2px;
    max-width: 6px;
  }
  .drill__bars {
    gap: 1px;
    overflow: hidden; /* belt-and-suspenders against any rounding overflow */
  }
}

/* On phones, hide the top logo strip and the sponsor line — they reappear
   in the bottom blue brandbar on every page. */
@media (max-width: 720px) {
  .masthead__topline,
  .masthead__sponsor-line {
    display: none;
  }
}

/* The squiggle is gone — let the brand be just the wordmark. */
.brand {
  gap: 0;
}