/* The Minutes — the record of what was said, where, and when.
   One stylesheet for the homepage and every person page. */

:root {
  --paper:       #ffffff;
  --tint:        #faf8f5;
  --ink:         #16120f;
  --body:        #413a34;
  --muted:       #7d746c;
  --faint:       #a49a91;
  --rule:        #ebe6df;
  --rule-strong: #d9d2c8;
  /* The accent. One value; everything below is mixed from it.
     ---------------------------------------------------------------------
     Change this line and the headline phrase, every link, the active chip,
     the live dot, the carousel dots and every tint move with it. They used
     to be four hardcoded hexes agreeing with each other by hand, which is
     why the old red survived in three places nobody thought to grep.

     color-mix against --paper rather than fixed tints, so a tint is always
     the accent diluted rather than a colour that merely looked right beside
     the last accent.

     On this particular teal: the brighter #0E9F8A is the same hue and
     saturation and scores 3.31:1 on white, which clears WCAG AA for large
     display text and fails it for small. The accent is what links are painted
     in, and links are small text -- so it is darkened to 4.54:1 rather than
     kept bright and quietly unreadable. If you want the brighter one back,
     the honest version of that change is to stop using the accent for link
     text, not to lower the bar. */
  --accent:      #0C8574;
  --accent-soft: color-mix(in srgb, var(--accent) 8%,  var(--paper));
  --accent-tint: color-mix(in srgb, var(--accent) 14%, var(--paper));
  --accent-rule: color-mix(in srgb, var(--accent) 24%, var(--paper));
  --flag:        #7a5c12;
  --flag-bg:     #fdf8e9;
  --flag-rule:   #ecdfba;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
           Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
           "Liberation Mono", monospace;

  --measure: 44rem;
  --wide:    66rem;

  /* The nav is sticky, so it owns the top of the viewport on every page.
     Anything else that sticks has to start below it or it slides under.
     One number, used by both the rail's offset and its height. */
  --nav-h:   3.75rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 6rem;
}
.page--wide { max-width: var(--wide); }

/* ---------------------------------------------------------------- masthead */

.masthead {
  display: inline-block;
  font-family: var(--serif);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2.5rem;
}
.masthead:hover { color: var(--accent); text-decoration: none; }

.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.75rem, 9vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}

.tagline {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 38rem;
  margin: 1.25rem 0 0;
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}

/* ------------------------------------------------------------ preview flag */

.preview-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
  background: var(--flag-bg);
  border: 1px solid var(--flag-rule);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 2.5rem;
  font-size: 0.875rem;
  color: var(--flag);
}
.preview-banner strong {
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* -------------------------------------------------------------- person head */

h1.person-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.125rem, 6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
}

.role {
  font-size: 1rem;
  color: var(--muted);
  margin: 0.75rem 0 0;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin: 2.5rem 0 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stats > div { display: flex; flex-direction: column; gap: 0.35rem; }
.stat-label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.stat-value {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.section {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  margin: 3.5rem 0 0;
}

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

.appearance { margin-top: 2.75rem; }

.appearance-head { margin-bottom: 2rem; }

.appearance-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.appearance-meta {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ----------------------------------------------------------------- quotes */

.quote {
  margin: 0 0 2.5rem;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--rule-strong);
}
.quote:last-child { margin-bottom: 0; }

.quote--unverified { border-left-color: var(--flag-rule); }

.quote p {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 0.875rem;
}

.quote-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.quote-meta .sep { color: var(--rule-strong); }

.stamp {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
}
a.stamp {
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
}
a.stamp:hover { text-decoration: none; background: var(--accent-tint); }
span.stamp { color: var(--ink); }

.tag {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

.tag--unverified {
  color: var(--flag);
  background: var(--flag-bg);
  border-color: var(--flag-rule);
  text-transform: uppercase;
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  font-weight: 600;
}

/* ------------------------------------------------------------ people grid */

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

/* The <li> is the grid item; make the card fill it so cards in a row line up
   however long the name or role runs. */
.people-grid > li { display: flex; }
.people-grid > li > * { flex: 1 1 auto; }

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
  min-height: 10.5rem;
  padding: 1.375rem 1.375rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.card { border-color: var(--rule-strong); }
a.card:hover {
  border-color: var(--rule-strong);
  box-shadow: 0 2px 14px rgba(22, 18, 15, 0.07);
  transform: translateY(-1px);
  text-decoration: none;
}

.card-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3125rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}
.card-role {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0.4rem 0 0;
}

.card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: 0.75rem;
}
.card-foot strong {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.card--soon { background: var(--tint); border-style: dashed; }
.card--soon .card-name { color: var(--body); }

.pill {
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}

/* ----------------------------------------------------------------- misc */

.empty {
  font-size: 0.9375rem;
  color: var(--muted);
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1rem 1.125rem;
  margin: 1.5rem 0 0;
}

footer {
  margin-top: 5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--faint);
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 640px) {
  .page { padding: 2.5rem 1.125rem 4rem; }
  .stats { gap: 1.5rem 2rem; }
  .quote { padding-left: 1.125rem; }
  .quote p { font-size: 1.125rem; }
  .people-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ==========================================================================
   Person page v2: orientation before evidence.
   Header, Next up, Themes, then Minutes as Line over Receipt.
   ========================================================================== */

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

.block { margin-top: 3.25rem; }

.section-note {
  margin-left: 0.6rem;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--faint);
  font-weight: 400;
}

/* ------------------------------------------------------------- avatars */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tint);
  border: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--lg { width: 6rem; height: 6rem; font-size: 1.75rem; }
.avatar--empty { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-rule); }

/* -------------------------------------------------------- person header */

.person-head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "avatar text" "action action";
  gap: 1.25rem 1.5rem;
  align-items: start;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}
.person-head .avatar--lg { grid-area: avatar; }
.person-head-text { grid-area: text; min-width: 0; }
.person-head-action { grid-area: action; }

.last-seen {
  margin: 0.85rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.follow { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.follow-input {
  flex: 1 1 13rem;
  min-width: 0;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}
.follow-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn {
  display: inline-block;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 6px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--accent); border-color: var(--accent); text-decoration: none; }

.follow-note { margin: 0.55rem 0 0; font-size: 0.75rem; color: var(--faint); }

/* ------------------------------------------------------------- next up */

.empty--row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.events { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.event {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.event-date {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--ink);
  min-width: 3.5rem;
}
.event-title { flex: 1 1 14rem; color: var(--ink); }
.event-meta { font-size: 0.75rem; color: var(--muted); }

/* -------------------------------------------------------------- themes */

.theme {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule);
}
.theme:first-child { border-top: 1px solid var(--rule); }
.theme-tag {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--ink);
}
.theme-count {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.empty-detail { display: block; margin-top: 0.3rem; font-size: 0.8125rem; color: var(--faint); }

/* ------------------------------------------------- minutes: Line + Receipt */

.minutes { list-style: none; margin: 1.5rem 0 0; padding: 0; }

.entry {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.entry:first-child { border-top: 1px solid var(--rule); }

.line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.line-text {
  flex: 1 1 18rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}
.line-text--missing { font-weight: 400; color: var(--muted); font-style: italic; }

.tag--entry { align-self: center; }

/* the unverified marker: a dot, with the explanation on hover and focus */
.dot {
  position: relative;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--flag);
  opacity: 0.75;
  cursor: help;
}
.dot::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--paper);
  background: var(--ink);
  border-radius: 4px;
  padding: 0.3rem 0.55rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 5;
}
.dot:hover::after, .dot:focus::after, .dot:focus-visible::after { opacity: 1; }
.dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.receipt { margin-top: 0.9rem; }
.receipt[open] > .receipt-toggle { margin-bottom: 0.65rem; }

.receipt-toggle {
  display: none;                 /* desktop: the Receipt is simply there */
  list-style: none;
  cursor: pointer;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
}
.receipt-toggle::-webkit-details-marker { display: none; }
.receipt-toggle::after { content: " +"; }
.receipt[open] > .receipt-toggle::after { content: " −"; }

.receipt .quote { margin-bottom: 0.6rem; }
.receipt .quote p { font-size: 1.125rem; }
/* line the meta up with the quote it belongs to, past the rule */
.receipt .quote-meta { padding-left: calc(1.5rem + 2px); }

/* ------------------------------------------------------- homepage cards */

.card-top { display: flex; align-items: flex-start; gap: 0.85rem; min-width: 0; }
.card-top > span:last-child { min-width: 0; }

.card--seat {
  background: repeating-linear-gradient(
    135deg, var(--tint), var(--tint) 8px, #f5f2ed 8px, #f5f2ed 16px
  );
  border-style: solid;
  border-color: var(--rule);
}
.seat-top { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.seat-badge {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0.12rem 0.4rem;
}
.seat-name {
  margin: 0;
  font-family: var(--sans);           /* an office is not a name */
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--body);
}

/* ----------------------------------------------------------- footer bits */

footer p { margin: 0 0 0.6rem; }
footer p:last-child { margin-bottom: 0; }
.footnote { color: var(--faint); }
.credits { font-size: 0.75rem; color: var(--faint); }

/* --------------------------------------------------------------- mobile */

@media (min-width: 641px) {
  /* Avatar and name on the first row, Follow beneath the name in the same
     column. A three-column header starves the name at this measure, and a
     name is the one thing on the page that must never wrap awkwardly. */
  .person-head {
    grid-template-areas: "avatar text" ".      action";
    align-items: start;
  }
  .person-head-action { max-width: 26rem; }
  .follow-input { flex: 1 1 12rem; }
}

@media (max-width: 640px) {
  .avatar--lg { width: 4.5rem; height: 4.5rem; font-size: 1.375rem; }
  .person-head { gap: 1rem 1.1rem; }
  .follow { width: 100%; }
  .follow-input { flex: 1 1 100%; }
  .btn { width: 100%; text-align: center; }

  /* Receipts collapse: the Line carries the page, the Receipt is on demand. */
  .receipt-toggle { display: block; }

  /* Tags are desktop-only; on a phone the Line has to stand alone. */
  .tag--entry { display: none; }

  .line-text { font-size: 1rem; }
  .receipt .quote p { font-size: 1.0625rem; }
  .receipt .quote-meta { padding-left: calc(1.125rem + 2px); }

  .dot::after { white-space: normal; width: 11rem; }
}

/* ==========================================================================
   Edit code additions: theme direction, What changed, also-said-on, more.
   ========================================================================== */

.theme-right { display: flex; align-items: baseline; gap: 0.65rem; }

.dir {
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 3px;
  padding: 0.12rem 0.4rem;
  border: 1px solid transparent;
  cursor: help;
  min-width: 4.1rem;
  text-align: center;
}
.dir--rising  { color: #1f6b45; background: #eef7f1; border-color: #cfe6da; }
.dir--new     { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-rule); }
.dir--fading  { color: var(--muted); background: var(--tint); border-color: var(--rule); }
.dir--steady  { color: var(--faint); background: var(--paper); border-color: var(--rule); }

/* --------------------------------------------------------- what changed */

.delta {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.25rem;
  margin-top: 1.25rem;
  background: var(--tint);
}
.delta-text {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}
.delta-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.delta-side {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.85rem 0.9rem;
}
.delta-when {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.quote--sm { margin: 0; padding-left: 0; border-left: 0; }
.quote--sm p { font-size: 0.9375rem; line-height: 1.5; margin: 0; }

/* -------------------------------------------------------- also said on */

.also {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
  padding-left: calc(1.5rem + 2px);
  font-size: 0.75rem;
  color: var(--muted);
}

/* ------------------------------------------------------- "more" control */

.more { margin-top: 1.5rem; }
.more-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.45rem 1rem;
}
.more-toggle::-webkit-details-marker { display: none; }
.more-toggle:hover { border-color: var(--ink); }
.more-toggle::after { content: "+"; font-weight: 700; }
.more[open] > .more-toggle::after { content: "−"; }
.more-note {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--faint);
}
.minutes--more { margin-top: 0.5rem; }
.minutes--more .entry:first-child { border-top: 0; }

@media (max-width: 640px) {
  .delta-pair { grid-template-columns: 1fr; }
  .also { padding-left: calc(1.125rem + 2px); }
  .theme-right { flex-wrap: wrap; gap: 0.35rem 0.6rem; }
}

.note {
  margin: 0.9rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--faint);
}

/* ==========================================================================
   Themes as expandable rows; Follow confirmation.
   ========================================================================== */

.themes { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.themes > li { border-bottom: 1px solid var(--rule); }
.themes > li:first-child { border-top: 1px solid var(--rule); }

/* The whole row is the <summary>, so a click anywhere on it toggles. */
.theme-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
  transition: background .12s ease;
}
.theme-head::-webkit-details-marker { display: none; }
.theme-head:hover .theme-sentence { color: var(--accent); }
.theme-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.theme-head-text { flex: 1 1 auto; min-width: 0; }

.theme-sentence {
  display: block;
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: color .12s ease;
}

.theme-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.theme-label {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
}

.chev {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  color: var(--muted);
  border: 1px solid var(--rule);
  transition: transform .18s ease, color .12s ease, border-color .12s ease;
}
.theme-head:hover .chev { color: var(--accent); border-color: var(--rule-strong); }
.theme[open] > .theme-head .chev { transform: rotate(180deg); }

/* ------------------------------------------------- expanded theme body */

.theme-body {
  padding: 0.25rem 0 1.5rem;
  margin-left: 0.9rem;
  border-left: 2px solid var(--rule);
  padding-left: 1.35rem;
}

.theme-quote + .theme-quote {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.theme-quote .line-text {
  flex: none;
  margin: 0 0 0.7rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.theme-quote .quote { margin-bottom: 0.6rem; }
.theme-quote .quote p { font-size: 1.0625rem; }
.theme-quote .quote-meta { padding-left: calc(1.5rem + 2px); }

.more--themes { margin-top: 1.25rem; }
.themes--more { margin-top: 0.75rem; }
.themes--more > li:first-child { border-top: 0; }

/* a quote jumped to from a theme gets a moment of emphasis */
.entry--targeted {
  animation: target-flash 1.6s ease-out;
  scroll-margin-top: 1.5rem;
}
.entry { scroll-margin-top: 1.5rem; }
@keyframes target-flash {
  0%, 45% { background: var(--accent-soft); }
  100%    { background: transparent; }
}

.following {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f6b45;
}
.following::before { content: "✓ "; }
.follow--failed .follow-input { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .entry--targeted { animation: none; background: var(--accent-soft); }
}

@media (max-width: 640px) {
  .theme-sentence { font-size: 1.0625rem; }
}


@media (max-width: 640px) {
  .theme-sentence { font-size: 1.0625rem; }
  .theme-head { gap: 0.75rem; }
  .theme-body { margin-left: 0; padding-left: 1.125rem; }
  .theme-quote .quote-meta { padding-left: calc(1.125rem + 2px); }
}

/* ==========================================================================
   Posts, and the said / post source label.
   ========================================================================== */

.src {
  display: inline-block;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  vertical-align: 0.1em;
  margin-right: 0.15rem;
}
.src--said { color: var(--faint);  background: var(--tint);     border: 1px solid var(--rule); }
.src--post { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-rule); }
/* Reported speech reached us through a journalist. It gets the flag palette
   the page already uses for "read this with a caveat", not the neutral one. */
.src--reported { color: var(--flag);  background: var(--flag-bg); border: 1px solid var(--flag-rule); }
/* Their own byline: first party, the same weight as a post. */
.src--wrote    { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-rule); }

.theme-quote .src { margin-bottom: 0.4rem; }

.posts { list-style: none; margin: 1.5rem 0 0; padding: 0; }

.post {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.post:first-child { border-top: 1px solid var(--rule); }

.post .line-text {
  flex: none;
  display: block;
  margin: 0 0 0.9rem;
}

/* The embed replaces this blockquote once widgets.js runs. Until then, and
   forever if the script is blocked, it has to stand on its own. */
.post .twitter-tweet {
  margin: 0 0 0.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule-strong);
  border-radius: 6px;
  background: var(--tint);
  font-size: 0.875rem;
  word-break: break-word;
}
.post .twitter-tweet a { color: var(--accent); }
.post iframe { max-width: 100% !important; }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ==========================================================================
   Then and now.
   The label and the two statements carry the row. Nothing else is asserted;
   the model's sentence appears only on a pair a human approved.
   ========================================================================== */

.tn { list-style: none; margin: 1.5rem 0 0; padding: 0; }

.tn-row { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.tn-row:first-child { border-top: 1px solid var(--rule); }

.tn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.tn-topic {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
}
.tn-gap { font-variant-numeric: tabular-nums; }

.tn-label {
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
  border: 1px solid transparent;
}
.tn-label--consistent { color: var(--faint);  background: var(--paper);      border-color: var(--rule-strong); }
.tn-label--evolved    { color: #1f5c7a;       background: #eef4f8;           border-color: #cfe0ea; }
.tn-label--reversed   { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-rule); }

.tn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.tn-side {
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.9rem 1rem;
}
.tn-when {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
  margin-bottom: 0.5rem;
}
.tn-side .quote--sm { margin: 0.5rem 0 0.6rem; }
.tn-side .quote--sm p { font-size: 0.9375rem; }

.tn-reason {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
  padding-left: 0.9rem;
  border-left: 2px solid var(--rule);
}

@media (max-width: 640px) {
  .tn-pair { grid-template-columns: 1fr; }
}

/* A theme drawn only from posts. Ranked below anything spoken, and it says so. */
.posts-only {
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-rule);
  border-radius: 3px;
  padding: 0.12rem 0.4rem;
}

.more--evidence { margin-top: 1.25rem; }
.more--evidence .more-toggle { font-size: 0.6875rem; padding: 0.35rem 0.8rem; }
.theme-body-more { margin-top: 1rem; }
.theme-body-more .theme-quote:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ==========================================================================
   Front page.
   ========================================================================== */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 20;
}
.nav-mark {
  font-family: var(--serif);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.nav-mark:hover { color: var(--accent); text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; font-size: 0.875rem; }
.nav-links a { color: var(--body); }
.nav-links a:hover { color: var(--accent); text-decoration: none; }
.nav-soon { color: var(--faint); display: inline-flex; align-items: baseline; gap: 0.4rem; }
.soon {
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
}

/* The first fold's own rules used to be repeated here, from a homepage two
   designs ago. Every declaration in them was overridden further down, so the
   block was invisible in the file and had no effect on the page -- until
   somebody edited it, expecting it to. `.fold` is defined once now, with the
   four folds at the end. */

.search { position: relative; max-width: 34rem; }
.search-icon {
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}
.search input {
  width: 100%;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: 0.95rem 1rem 0.95rem 3rem;
  -webkit-appearance: none;
}
.search input::placeholder { color: var(--faint); }
.search input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 2px 18px rgba(22, 18, 15, 0.08);
}

.results {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 0.5rem);
  list-style: none;
  margin: 0; padding: 0.35rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(22, 18, 15, 0.12);
  z-index: 30;
  max-height: 24rem;
  overflow-y: auto;
}
.result > a, .result > span {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: 7px;
  color: inherit;
  text-decoration: none;
}
.result > a:hover, .result.is-active > a, .result.is-active > span { background: var(--tint); }
.result--nopage > span { cursor: default; }
.result--none { padding: 0.85rem 0.7rem; color: var(--muted); font-size: 0.875rem; }
.result-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.result-name { font-family: var(--serif); font-size: 1rem; color: var(--ink); }
.result-role {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-meta { font-size: 0.6875rem; color: var(--faint); flex: 0 0 auto; }
.result-soon {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.5625rem;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
}

.avatar--sm { width: 2.125rem; height: 2.125rem; font-size: 0.75rem; }
.avatar--xs { width: 1.75rem; height: 1.75rem; font-size: 0.625rem; }

/* --------------------------------------------------------------- chips */

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.75rem; }
.chips-label {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
  margin-right: 0.25rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.7rem 0.25rem 0.25rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--body);
  text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.chip:hover { border-color: var(--rule-strong); background: var(--tint); text-decoration: none; }
.chip-name { font-size: 0.8125rem; white-space: nowrap; }

/* ------------------------------------------------------ latest minutes */

.latest { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.latest-row { border-bottom: 1px solid var(--rule); }
.latest-row:first-child { border-top: 1px solid var(--rule); }
.latest-link {
  display: block;
  padding: 1.1rem 0;
  color: inherit;
  text-decoration: none;
}
.latest-link:hover .latest-line { color: var(--accent); }
.latest-line {
  display: block;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  transition: color .12s ease;
}
.latest-line--plain { color: var(--body); }
.latest-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.latest-person { font-weight: 600; color: var(--body); }
.latest-meta .dot { margin-top: 0; }

/* ------------------------------------------------ then and now, compact */

.tn-compact { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.tn-compact li { border-bottom: 1px solid var(--rule); }
.tn-compact li:first-child { border-top: 1px solid var(--rule); }
.tn-compact a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 0;
  color: inherit;
  text-decoration: none;
  font-size: 0.875rem;
}
.tn-compact a:hover .tnc-person { color: var(--accent); }
.tnc-person { font-weight: 600; color: var(--ink); }
.tnc-topic { color: var(--muted); }
.tnc-gap { margin-left: auto; font-size: 0.75rem; color: var(--faint); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- lanes */

.lane {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 2.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.lane-count {
  font-size: 0.6875rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}
.lane + .people-grid { margin-top: 1rem; }

/* -------------------------------------------------------------- footer */

.foot-follow {
  padding: 1.75rem 0 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.foot-follow .follow { max-width: 26rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* -------------------------------------------------------------- mobile */

@media (max-width: 640px) {
  .nav { padding: 0.9rem 1.125rem; }
  .nav-links { gap: 1rem; font-size: 0.8125rem; }
  .fold { padding: 2.5rem 0 2.25rem; }
  .search { max-width: none; }
  .search input { font-size: 1rem; padding: 0.85rem 0.9rem 0.85rem 2.8rem; }
  .chips { gap: 0.4rem; }
  .tnc-gap { margin-left: 0; width: 100%; }
  .result-role { max-width: 9rem; }
}

/* ==========================================================================
   Front page v2: one headline, one subhead, one call to action, and the
   product shown rather than described.
   ========================================================================== */

.fold .wordmark { max-width: 16ch; letter-spacing: -0.03em; }
.fold .wordmark em {
  font-style: italic;
  color: var(--accent);
  /* The italic of a text serif sits a shade small beside its roman. */
  font-size: 1.02em;
}
.fold .tagline { max-width: 46ch; margin-bottom: 2.75rem; }

/* ------------------------------------------------------------ demo card */

.demo {
  margin-top: 3rem;
  padding: 1.6rem 1.75rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 2px 24px rgba(22, 18, 15, 0.055);
}
.demo-tag {
  display: inline-block;
  font-size: 0.5625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
  margin-bottom: 1.1rem;
}
.demo-line {
  margin: 0 0 0.9rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}
.demo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.demo-more {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ---------------------------------------------------- credibility strip */

.strip {
  padding: 2.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* `.counters`, `.steps` and `.step-n` used to be defined here too, for a
   homepage that no longer exists. They are now defined once, at the end of
   this file, with the four folds. Two definitions of the same class in one
   stylesheet is not a style question: the old `.steps li` kept painting a
   2px black rule above every step in the new fold 3, because the new block
   never thought to override a border it did not know about.
   The rest of the dead rules from that homepage are still below; see
   `test_homepage.py::test_no_class_is_defined_twice`. */

.sources { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.sources-label {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
  margin-bottom: 0.6rem;
}
.sources-list {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--muted);
}

/* -------------------------------------------------------- feature bands */

.bands { padding: 1rem 0; }
.band {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 3rem;
  align-items: start;
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.band:last-child { border-bottom: 0; }
.band-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.75rem;
}
.band-text p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; max-width: 34ch; }
.band-demo { min-width: 0; }
.band-demo .theme { border: 1px solid var(--rule); border-radius: 10px; padding: 0 1.1rem; }
.band-demo .theme-head { padding: 1.1rem 0; }
.band-demo .theme-body { padding-bottom: 1.2rem; }

/* ------------------------------------------------------------ how it works */


/* ---------------------------------------------------------------- faq */

.faq .q {
  border-bottom: 1px solid var(--rule);
}
.faq .q:first-of-type { border-top: 1px solid var(--rule); margin-top: 1.5rem; }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 0;
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--faint);
  font-family: var(--sans);
  font-size: 1.125rem;
  flex: 0 0 auto;
}
.faq .q[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--accent); }
.faq .q p {
  margin: 0 0 1.25rem;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------------------------------------------------------- closing cta */

.cta {
  padding: 4.5rem 0 4rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.cta h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1.75rem;
}
.cta .search { margin: 0 auto; }

/* -------------------------------------------------------------- mobile */

@media (max-width: 900px) {
  .band { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.75rem 0; }
  .steps { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 640px) {
  .fold { padding: 3rem 0 2.5rem; }
  .fold .wordmark { max-width: none; }
  .demo { padding: 1.25rem 1.1rem; margin-top: 2.25rem; }
  .strip { padding: 2rem 0; }
  .cta { padding: 3rem 0 2.5rem; }
}

/* ==========================================================================
   Two-column hero.
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: 1fr 26rem;
  gap: 4rem;
  align-items: start;
  padding: 4rem 0 3rem;
}

.hero-left { min-width: 0; }

.live {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.live-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.hero .wordmark {
  max-width: 15ch;
  font-size: clamp(2.5rem, 5.2vw, 3.75rem);
  letter-spacing: -0.03em;
}
.hero .wordmark em { font-style: italic; color: var(--accent); font-size: 1.02em; }
.hero .tagline { max-width: 46ch; margin: 1.25rem 0 2rem; font-size: 1.0625rem; }

.hero-note { margin: 1.1rem 0 0; font-size: 0.875rem; color: var(--muted); max-width: 42ch; }

/* ------------------------------------------------------ search + button */

.search--inline { display: flex; gap: 0.5rem; align-items: stretch; max-width: 34rem; }
.search--inline .search-field { flex: 1 1 auto; position: relative; min-width: 0; }
.search-field { position: relative; }
.search--inline .search-go { flex: 0 0 auto; white-space: nowrap; padding: 0 1.25rem; }

/* ----------------------------------------------------------- hero card */

.hero-card {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 2px 24px rgba(22, 18, 15, 0.055);
  padding: 1.25rem 1.25rem 1.1rem;
  position: sticky;
  top: 5rem;
}
.hc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule);
}
.hc-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.0625rem;
  color: var(--ink);
}
.hc-seeall { font-size: 0.75rem; font-weight: 600; }

.hc-list { list-style: none; margin: 0; padding: 0; }
.hc-list li { border-bottom: 1px solid var(--rule); }
.hc-list li:last-child { border-bottom: 0; }
.hc-list a {
  display: block;
  padding: 0.85rem 0;
  color: inherit;
  text-decoration: none;
}
.hc-list a:hover .hc-line { color: var(--accent); }
.hc-line {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  transition: color .12s ease;
}
.hc-line .dot { display: inline-block; margin: 0 0.3rem 0 0; vertical-align: 0.05em; }
.hc-meta {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: -0.01em;
  color: var(--muted);
}

.btn--block {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}

/* ----------------------------------------------------------- lane chips */

.lanebar {
  padding: 0.25rem 0 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.lane-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lane-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--body);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.lane-chip span {
  font-size: 0.6875rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.lane-chip:hover { border-color: var(--rule-strong); }
.lane-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.lane-chip.is-on span { color: rgba(255, 255, 255, 0.65); }

.lane-group[hidden] { display: none; }

/* -------------------------------------------------------------- mobile */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 0 2rem; }
  .hero-card { position: static; }
}

@media (max-width: 640px) {
  .hero { padding: 2rem 0 1.5rem; gap: 2rem; }
  .hero .wordmark { max-width: none; }
  .search--inline { flex-direction: column; max-width: none; }
  .search--inline .search-go { width: 100%; padding: 0.7rem 1rem; }
  .lane-chips { gap: 0.4rem; }
  .lane-chip { font-size: 0.75rem; padding: 0.35rem 0.75rem; }
}

/* The closing call to action reuses the hero's inline search, centred. */
.cta .search--inline { margin: 0 auto; }
.cta .search-field { text-align: left; }
@media (max-width: 640px) { .cta .search--inline { max-width: none; } }

/* ==========================================================================
   Static pages: pricing, about, sources, corrections, submit, terms, privacy.
   ========================================================================== */

.doc-head { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--rule); }
.doc-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.125rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.doc-standfirst {
  margin: 1.1rem 0 0;
  max-width: 52ch;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--muted);
}

.draft-flag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--flag-bg);
  border: 1px solid var(--flag-rule);
  border-radius: 6px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--flag);
  max-width: 62ch;
}
.draft-flag strong {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

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

.prose { max-width: 62ch; padding-top: 2rem; }
.prose h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 2.5rem 0 0.75rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.7; color: var(--body); }
.prose a { font-weight: 500; }
.prose code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
}
.fill-me {
  color: var(--muted);
  font-style: italic;
  background: var(--flag-bg);
  border: 1px dashed var(--flag-rule);
  border-radius: 5px;
  padding: 0.6rem 0.8rem;
  display: inline-block;
}

.rules { list-style: none; margin: 0 0 1.25rem; padding: 0; max-width: 62ch; }
.rules li {
  padding: 0.7rem 0 0.7rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  position: relative;
}
.rules li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.35rem;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--rule-strong);
}
.rules li:last-child { border-bottom: 0; }
.rules strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- pricing */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2.5rem 0 1rem;
  align-items: stretch;
}
.tier {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.5rem 1.4rem 1.4rem;
  background: var(--paper);
}
.tier--now { border-color: var(--ink); box-shadow: 0 2px 20px rgba(22, 18, 15, 0.06); }
.tier-head { padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule); }
.tier-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--ink);
}
.tier-price {
  margin: 0.6rem 0 0.35rem;
  font-family: var(--serif);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tier-price span { font-size: 0.9375rem; color: var(--faint); font-family: var(--sans); }
.tier-state {
  margin: 0;
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
}
.tier--now .tier-state { color: #1f6b45; }

.tier-list { list-style: none; margin: 1.1rem 0 1.5rem; padding: 0; flex: 1 1 auto; }
.tier-list li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--body);
}
.tier-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.95rem;
  width: 0.5rem; height: 0.28rem;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.tier-foot .follow-input { width: 100%; margin-bottom: 0.5rem; }

/* --------------------------------------------------------------- sources */

.conns { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.conn { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.conn:first-child { border-top: 1px solid var(--rule); }
.conn-head { display: flex; align-items: center; gap: 0.6rem; }
.conn-id { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink); }
.conn-covers { margin: 0.3rem 0 0; font-size: 0.875rem; color: var(--body); max-width: 56ch; }
/* Planned connectors are listed so the page is not a half-truth, but they are
   not what is running, and should not read as though they are. */
.conn--planned .conn-id,
.conn--planned .conn-covers { color: var(--faint); }

.srclist { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.srclist li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule);
}
.srclist li:first-child { border-top: 1px solid var(--rule); }
.srclist-name { font-size: 0.9375rem; color: var(--ink); }
.srclist-note { font-size: 0.75rem; color: var(--faint); }

/* ----------------------------------------------------------- form fields */

form.correction { max-width: 34rem; margin-top: 1.5rem; }
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--faint); }
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 7px;
  padding: 0.6rem 0.75rem;
  -webkit-appearance: none;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--ink);
}

.corrlog { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.corrlog li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.corr-date {
  flex: 0 0 6rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--faint);
}
.corr-note { flex: 1 1 20rem; color: var(--body); }
/* The reason a withdrawn quote went, set below the words rather than beside
   them: the words are what a reader may have carried away, and the reason is
   why they should not. */
/* "then Governor of the Federal Reserve" beside a quote's date. Set like the
   rest of the meta line rather than highlighted: it is a correction to what
   the page header would otherwise imply, not a decoration. */
.role-then { font-style: italic; }

.corr-note em {
  display: block;
  margin-top: 0.25rem;
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--faint);
}

@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .doc-head { padding: 2.25rem 0 1.75rem; }
  .corr-date { flex: 0 0 auto; }
}

/* ==========================================================================
   Person page: full-width header band, then a 2fr / 1fr grid in 1120px.
   ========================================================================== */

.preview-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  align-items: baseline;
  justify-content: center;
  padding: 0.45rem 1.25rem;
  background: var(--flag-bg);
  border-bottom: 1px solid var(--flag-rule);
  font-size: 0.75rem;
  color: var(--flag);
}
.preview-bar strong {
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
}

.shell { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem 5rem; }

.pheader { border-bottom: 1px solid var(--rule); background: var(--paper); }
.pheader-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
}
.avatar--72 { width: 72px; height: 72px; font-size: 1.375rem; }
.pheader-text { min-width: 0; }
.pheader .person-name { font-size: clamp(1.75rem, 3.4vw, 2.375rem); }
.pheader .role { margin-top: 0.35rem; font-size: 0.9375rem; }

.pstats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  color: var(--muted);
}

.pheader-action { justify-self: end; }
.pheader-action .follow { max-width: 22rem; }

/* ------------------------------------------------------------- the grid */

.cols {
  display: grid;
  /* Rail first, record second. The rail is first in the DOM too, so the mobile
     stack falls out of source order with no reordering. */
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
  padding-top: 2.5rem;
}
.col-main { min-width: 0; }
/* The rail scrolls on its own, so a long record on the right never drags a
   short rail off the screen. It sticks below the nav, is capped at what is
   left of the viewport, and scrolls inside that box. The wheel goes to
   whatever is under the cursor: over the rail the rail moves, over the record
   the page moves. `auto` is the default, spelled out because it is a decision
   -- the rail hands off to the page once it has reached its own end, rather
   than stopping the wheel dead there the way `contain` would. */
.col-side {
  min-width: 0;
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  max-height: calc(100vh - var(--nav-h) - 3rem);
  overflow-y: auto;
  overscroll-behavior-y: auto;
  /* The scrollbar gutter is paid for out of the 48px column gap, so the rail's
     content keeps its full column width whether or not a bar is showing. */
  padding-right: 0.75rem;
  margin-right: -0.75rem;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;      /* Firefox: hidden at rest */
}
.col-side:hover,
.col-side:focus-within { scrollbar-color: var(--rule-strong) transparent; }

/* WebKit: the track keeps its 8px whatever happens, so nothing reflows on
   hover -- only the thumb appears. The transparent border plus content-box
   clip is what makes a 4px thumb inside an 8px track. */
.col-side::-webkit-scrollbar { width: 8px; }
.col-side::-webkit-scrollbar-track { background: transparent; }
.col-side::-webkit-scrollbar-thumb {
  background: transparent;
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 4px;
}
.col-side:hover::-webkit-scrollbar-thumb,
.col-side:focus-within::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  background-clip: content-box;
}

.col-main .block:first-child { margin-top: 0; }

/* ------------------------------------------------------- at a glance */

.glance {
  margin-top: 0;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--tint);
}
.glance-h { margin: 0 0 0.9rem; }
.glance-list { margin: 0; }
.glance-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.35rem 1rem;
  align-items: baseline;
  padding: 0.65rem 0;
  border-top: 1px solid var(--rule);
}
.glance-row:first-child { border-top: 0; padding-top: 0; }
.glance-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.glance-val { margin: 0; min-width: 0; }
.glance-where {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.glance-line {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.glance-line:hover { color: var(--accent); border-color: currentColor; text-decoration: none; }

/* ----------------------------------------------------- section folds */
/* `pfold`, not `fold`: the homepage already owns `.fold` for its bands. */

.pfold { margin-top: 2.5rem; border-top: 1px solid var(--rule-strong); }
.pfold-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
}
.pfold-head::-webkit-details-marker { display: none; }
.pfold-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink);
}
.pfold-count {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  color: var(--faint);
}
.pfold-head:hover .pfold-name { color: var(--accent); }
.pfold-head:hover .chev { color: var(--accent); border-color: var(--rule-strong); }
.pfold[open] > .pfold-head .chev { transform: rotate(180deg); }
.pfold-body {
  padding-bottom: 1.75rem;
  /* A jump link targets the body, because that is the part a closed <details>
     hides and so the part a browser will reveal. Landing there would put the
     header off the top of the screen, so leave room for it: the sticky nav,
     the header row, and a little air. With scripting on the handler scrolls to
     the header itself and this never comes into play. */
  scroll-margin-top: calc(var(--nav-h) + 4.75rem);
}
.pfold-note {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--faint);
}
/* The section heading is now the fold header, so whatever comes first inside
   the body no longer needs to clear one. */
.pfold-body > *:first-child { margin-top: 0; }

/* --------------------------------------------------- themes, compact */

.col-main .themes > li { border-bottom: 1px solid var(--rule); }
.col-main .theme-head { padding: 12px 0; gap: 0.75rem; }
.col-main .theme-sentence { font-size: 20px; line-height: 1.4; }
.col-main .theme-meta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: -0.01em;
  margin-top: 0.3rem;
}
.col-main .theme-label { font-family: var(--mono); letter-spacing: 0; }

/* ------------------------------------------------------------- minutes */

.col-main .entry { padding: 20px 0; }
.col-main .line-text {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.col-main .quote p { font-size: 17px; line-height: 1.55; }
.col-main .quote-meta { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: -0.01em; }

/* ---------------------------------------------------------- right rail */

.rail { margin-bottom: 2rem; }
.rail-h {
  margin: 0 0 0.85rem;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
}
.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
}
.rail-list li:first-child { border-top: 1px solid var(--rule); }
.rail-name { color: var(--body); min-width: 0; }
.rail-n {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--faint);
  flex: 0 0 auto;
}

/* The whole row is the target, so the click area matches what it looks like. */
.rail--jump .rail-list li { padding: 0; }
.jump-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0;
  color: inherit;
  text-decoration: none;
}
.jump-link:hover { text-decoration: none; }
.jump-link:hover .rail-name { color: var(--accent); }
.jump-link:hover .rail-n { color: var(--muted); }

.rail-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rail-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--body);
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
}
.rail-chip span { font-family: var(--mono); font-size: 0.625rem; color: var(--faint); }

.rail-posts { list-style: none; margin: 0; padding: 0; }
.rail-posts li { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.rail-posts li:last-child { border-bottom: 0; margin-bottom: 0; }
.rail-post-line {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.rail-posts .twitter-tweet {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule-strong);
  border-radius: 5px;
  background: var(--tint);
  font-size: 0.75rem;
  word-break: break-word;
}
.rail-post-meta { margin: 0; font-size: 0.6875rem; color: var(--muted); }

.col-side .empty { font-size: 0.8125rem; padding: 0.8rem 0.9rem; }
.col-side .empty--row { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.col-side .section { margin-top: 0; }
.col-side .block { margin-top: 0; margin-bottom: 2rem; }

/* --------------------------------------------------------- reported */

.reported { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.rep { padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.rep:last-child { border-bottom: 0; }
.rep .src { margin-bottom: 0.45rem; }
.rep .quote { margin-top: 0.5rem; }
.rep-title {
  color: var(--muted);
  /* A headline can be long, and this line is metadata rather than the headline. */
  max-width: 34ch;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* ------------------------------------------------------ appearances */

.apps { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.app:last-child { border-bottom: 0; }

.embed {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.embed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.embed-play {
  appearance: none;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.embed-mark {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--paper);
  background: rgba(22, 18, 15, 0.72);
  transition: background .12s ease, transform .12s ease;
}
.embed-play:hover .embed-mark { background: var(--accent); transform: scale(1.06); }
.embed-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.embed-fallback,
.embed-fallback-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
}

.app-meta { min-width: 0; }
.app-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--ink);
}
.app-line {
  margin: 0.45rem 0 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.app-none { color: var(--faint); }


/* -------------------------------------------------------------- mobile */

@media (max-width: 800px) {
  .cols { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 2rem; }
  /* Stacked: the rail is just the first thing on the page. No sticking,
     no height cap, no scroll area of its own -- one page, one scroll. */
  .col-side {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    margin-right: 0;
  }
  .pheader-in {
    grid-template-columns: auto 1fr;
    grid-template-areas: "avatar text" "action action";
    padding: 1.75rem 1.125rem;
    gap: 1rem 1.25rem;
  }
  .pheader-in .avatar--72 { grid-area: avatar; }
  .pheader-text { grid-area: text; }
  .pheader-action { grid-area: action; justify-self: stretch; }
  .pheader-action .follow { max-width: none; }
  .shell { padding: 0 1.125rem 3rem; }
  .avatar--72 { width: 56px; height: 56px; font-size: 1.125rem; }
  .col-main .theme-sentence { font-size: 18px; }
  .glance { padding: 1rem 1rem 0.75rem; }
  .glance-row { grid-template-columns: 1fr; gap: 0.2rem; }
  .pfold-name { font-size: 1.125rem; }
  /* One column: a 260px still beside two lines of metadata reads worse than
     the image full width with the metadata under it. */
  .app { grid-template-columns: 1fr; gap: 0.85rem; }
  .rep-title { max-width: 100%; white-space: normal; }
}

/* Five nav items do not fit 390px in one line. Let the bar wrap rather than
   push the page sideways: a horizontal scrollbar on a phone is worse than a
   second row. */
.nav { flex-wrap: wrap; }
.nav-links { flex-wrap: wrap; row-gap: 0.35rem; }

@media (max-width: 460px) {
  .nav { padding: 0.75rem 1.125rem; gap: 0.5rem; }
  .nav-links { gap: 0.85rem; font-size: 0.8125rem; width: 100%; }
  .nav-soon .soon { display: none; }   /* the word "Brief" already reads as pending */
  .nav-soon { opacity: 0.55; }
}


/* ------------------------------------------------- topic and quote pages */

.shell--topic { padding-top: 2.5rem; }
/* The header band already announced the subject; the first heading under it
   does not need three and a half rems of throat-clearing as well. */
.shell--topic .block:first-of-type { margin-top: 0; }
.shell--topic .block:first-of-type .section { margin-top: 0; }
.topic-eyebrow {
  margin: 0 0 0.15rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.topic-eyebrow a { color: inherit; }
.topic-foot { margin-top: 2.5rem; font-size: 0.875rem; color: var(--muted); }
/* A topic chip that goes somewhere should look like it does. */
.rail-chip--link { text-decoration: none; }
.rail-chip--link:hover { border-color: var(--rule-strong); color: var(--accent); }

.topiclist { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.topicrow { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.topicrow:first-child { border-top: 1px solid var(--rule); }
.topicrow-tag {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--ink);
}
.topicrow-people { margin: 0.35rem 0 0; font-size: 0.875rem; }
.topicrow-n {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--faint);
  margin-left: 0.3rem;
}

.quote-page { max-width: 40rem; margin: 3rem auto 0; }
.quote-page-who {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.quote--lead p { font-size: 1.375rem; line-height: 1.5; }
.quote-page-meta { margin: 1rem 0 0; font-size: 0.875rem; }
.quote-page-foot {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--faint);
}

/* ---------------------------------------------------------------------------
   Sources row
   ---------------------------------------------------------------------------
   Six words under the claim they support. A quiet band rather than a feature
   strip: it is orientation, not a pitch, and it sits between the hero and the
   record without competing with either.
   ------------------------------------------------------------------------ */

.srcrow {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.75rem 0;
}
.srcrow-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.srcrow-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  padding: 0.2rem 0;
}
.srcrow-list a:hover { color: var(--accent); text-decoration: none; }
.srcicon { flex: 0 0 auto; opacity: 0.8; }
.srcrow-list a:hover .srcicon { opacity: 1; }

@media (max-width: 640px) {
  /* Six items wrap to three lines at 390px and read as a list rather than a
     row, so they scroll sideways instead -- one line, still all six. */
  .srcrow-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .srcrow-list::-webkit-scrollbar { display: none; }
  .srcrow-list li { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------------
   At a glance, in the hero card
   ---------------------------------------------------------------------------
   The same three lines the person page opens with. Sits above Latest minutes
   inside the existing card rather than beside it, so the column keeps one
   border and one shadow instead of becoming a stack of boxes.
   ------------------------------------------------------------------------ */

/* The deck stacks its slides, so the card does not resize as it cycles and
   the page below it does not jump every eight seconds. Height comes from the
   tallest slide, which is what `grid` with everything in cell 1,1 gives. */
.hcg-deck {
  display: grid;
  padding-bottom: 0.85rem;
  margin-bottom: 0.35rem;
}
.hc-glance {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 520ms ease;
}
.hc-glance.is-on { opacity: 1; visibility: visible; }
/* Without JavaScript nothing adds .is-on, so the first slide has to show on
   its own. A carousel that degrades to an empty box is worse than no
   carousel. */
.hc-glance:first-child { opacity: 1; visibility: visible; }
.hcg-deck.js .hc-glance:first-child:not(.is-on) { opacity: 0; visibility: hidden; }

.hcg-dots {
  grid-area: 2 / 1;
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  padding-top: 0.9rem;
}
.hcg-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rule-strong);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.hcg-dot:hover { background: var(--faint); }
.hcg-dot.is-on { background: var(--accent); transform: scale(1.35); }
.hcg-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* A rotation nobody asked for is exactly what this setting is about. The
   script also checks it and stops the timer; this is the belt to that
   braces, for the fade itself. */
@media (prefers-reduced-motion: reduce) {
  .hc-glance { transition: none; }
  .hcg-dot { transition: none; }
}

.hcg-who {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
.hcg-who:hover { text-decoration: none; }
.hcg-who:hover .hcg-name { color: var(--accent); }
.hcg-id { display: block; min-width: 0; }
.hcg-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--ink);
}
.hcg-role {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hcg-list { margin: 0; }
.hcg-row {
  display: grid;
  grid-template-columns: 3.9rem 1fr;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
}
.hcg-row dt {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 0.15rem;
}
.hcg-row dd { margin: 0; min-width: 0; }
.hcg-where {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.hcg-row dd a {
  color: var(--body);
  font-size: 0.875rem;
  line-height: 1.4;
}
.hcg-row dd a:hover { color: var(--accent); text-decoration: none; }
.hcg-more {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
   Most active / Most covered
   ------------------------------------------------------------------------ */

.twoup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  padding: 2rem 0 0;
}
.twoup-window {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin-left: 0.5rem;
}
.ranklist {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  counter-reset: rank;
}
.ranklist li { counter-increment: rank; border-top: 1px solid var(--rule); }
.ranklist li:last-child { border-bottom: 1px solid var(--rule); }
.ranklist a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0;
  color: var(--ink);
}
.ranklist a::before {
  content: counter(rank);
  flex: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.ranklist a:hover { text-decoration: none; color: var(--accent); }
.rank-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-n {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Three ways to use it
   ------------------------------------------------------------------------ */

.way-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}
.way {
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.1rem 1.15rem 1.15rem;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.way--now { border-color: var(--rule-strong); background: var(--tint); }
.way-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}
.way-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--ink);
}
.way-tag {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}
.way-tag--now {
  color: var(--accent);
  border-color: var(--accent-soft);
  background: var(--accent-soft);
}
.way p {
  margin: 0 0 0.9rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--body);
  flex: 1 1 auto;
}
.way-link {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--accent);
}

@media (max-width: 900px) {
  .twoup { grid-template-columns: 1fr; gap: 1.75rem; }
  .way-list { grid-template-columns: 1fr; }
}

.rank-caption {
  margin: 0.35rem 0 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--faint);
}
.rank-caption + .ranklist { margin-top: 0.6rem; }

/* ==========================================================================
   The stripped homepage, /now and /people
   ==========================================================================

   The front page has one job: get a reader to a person, or to the newest
   thing anybody said. Everything below is the fold, the NOW list and the row
   of names, and nothing else -- the browsing furniture moved to /people.
   ========================================================================== */



/* The masthead is full-bleed: the background and rule span the viewport when
   the page scrolls under it, and the mark sits the same 1.5rem from the left
   on every page. `.nav--home` used to pad this bar in to the front page's
   content column, because the front page had no mark and the links would
   otherwise have floated mid-window with the column stranded in the middle.
   The mark is on every page now and it is the fixed identity, so it does not
   move as a reader goes from the front page to a person: the site has three
   column widths and a mark that tracked each one would shift sideways on
   every navigation. */

/* ------------------------------------------------------------------ fold */

/* One block. The padding here used to be the third `.fold { padding }` in
   the file and the `max-width` used to sit two hundred lines above it, in a
   rule whose other half was dead -- so the fold's width came from a block
   that read as superseded. */



.search--hero { max-width: none; }

/* ------------------------------------------------------------- NOW list */

.nowblock { padding-top: 0.5rem; }

.now-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 0.6rem;
}
.now-head .section { margin: 0; border: 0; padding: 0; }
.now-all { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.now-all:hover { color: var(--accent); }

.nowlist { list-style: none; margin: 0; padding: 0; }
.nowrow { border-bottom: 1px solid var(--rule); }

.nowrow-link {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 1rem 0;
  color: inherit;
  text-decoration: none;
}
.nowrow-link:hover { text-decoration: none; }
.nowrow-link:hover .nowrow-line { color: var(--accent); }

.avatar--now { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; }

.nowrow-body { min-width: 0; }

.nowrow-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.nowrow-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}
.nowrow-when {
  font-size: 0.75rem;
  color: var(--faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The summary is the row. Two lines at most: a third turns a list of five
   into a page of prose and the eye stops scanning it. */
.nowrow-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0.2rem 0 0.4rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.42;
  color: var(--body);
  transition: color .12s ease;
}
.nowrow-line .dot { vertical-align: middle; margin-right: 0.15rem; }

.nowchip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 0;
}
.nowchip .srcicon { flex: 0 0 auto; color: var(--faint); }
.nowchip-kind {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.6875rem;
  color: var(--faint);
}
.nowchip-show {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nowlist--full .nowrow-line { -webkit-line-clamp: 3; }

.nowempty { padding: 2rem 0; }
.nowempty-last { margin: 0.75rem 0 1.5rem; color: var(--muted); font-size: 0.9375rem; }

/* --------------------------------------------------- most on record row */

.toprow {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  line-height: 2;
  color: var(--muted);
}
.toprow a { color: var(--body); }
.toprow a:hover { color: var(--accent); }
.toprow .sep { margin: 0 0.45rem; color: var(--faint); }
.toprow-all { color: var(--muted); }

@media (max-width: 640px) {
  .page--home { padding-left: 1.15rem; padding-right: 1.15rem; }
  .fold { padding: 2rem 0 2rem; }

  /* Full width, and 1rem so iOS does not zoom the viewport on focus. */
  .search--hero { max-width: none; width: 100%; }
  .search--hero input { font-size: 1rem; width: 100%; }

  .nowrow-link { grid-template-columns: 2.25rem 1fr; gap: 0.75rem; }
  .avatar--now { width: 2.25rem; height: 2.25rem; }
  .nowrow-line { font-size: 1rem; }
  .nowrow-top { flex-wrap: wrap; gap: 0.35rem; }
}

/* ------------------------------------------------------- the /now filter */

.nowfilter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  flex-wrap: wrap;
}
.nowfilter-label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
  margin-right: 0.25rem;
}
.nowfilter-btn {
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--body);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.nowfilter-btn:hover { border-color: var(--rule-strong); background: var(--tint); }
.nowfilter-btn.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.nowfilter-none { color: var(--muted); padding: 1.5rem 0; }

/* ------------------------------------------------------------ collisions */
/* Three or more people on one subject in a week. It sits above the feed on
   /now because it is the more interesting fact: not what was said, but that
   everybody said it about the same thing. */

.collision {
  border: 1px solid var(--accent-rule);
  border-radius: 12px;
  background: var(--accent-soft);
  padding: 1.5rem 1.5rem 0.75rem;
  margin: 0 0 2rem;
}
.collision-head {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}
.collision-tag {
  font-style: italic;
  color: var(--accent);
  white-space: nowrap;
}
.collision-count {
  margin: 0.35rem 0 1rem;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
}
.collision-list { list-style: none; margin: 0; padding: 0; }
.collision-list > li + li { border-top: 1px solid var(--accent-rule); }

.collision-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 0;
  color: inherit;
  text-decoration: none;
}
.collision-row:hover { text-decoration: none; }
.collision-row:hover .collision-line { color: var(--accent); }
.collision-row .avatar--now { width: 2.25rem; height: 2.25rem; }

.collision-body { min-width: 0; }
.collision-name {
  display: block;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--ink);
}
.collision-line {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--body);
  transition: color .12s ease;
}

@media (max-width: 640px) {
  .collision { padding: 1.15rem 1.15rem 0.5rem; }
  .collision-head { font-size: 1.125rem; }
}

/* The shareable face of a Then and now pair, and the page it opens. */
.tn-share { margin: 0.75rem 0 0; font-size: 0.8125rem; }
.tn-share a { color: var(--muted); }
.tn-share a:hover { color: var(--accent); }
.flip-when {
  margin: 1.75rem 0 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
}

/* ------------------------------------------------------------- coverage */
/* What is on the record by source type, and when each was last looked at.
   The claim is completeness for the sources we watch, never for the person,
   and the footnote says so because a panel like this reads as completeness
   unless it explicitly refuses to be. */

.cov-list { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }
.cov-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.cov-row--none { color: var(--faint); }
.cov-label { font-weight: 600; color: var(--ink); }
.cov-row--none .cov-label { font-weight: 400; color: var(--faint); }
.cov-n { font-variant-numeric: tabular-nums; color: var(--body); }
/* The two share their type but not their placement, so `grid-column` is not
   in the shared rule: it was set to `1 / -1` there and overridden to `2` on
   the very next line, leaving the group rule saying something about
   `.cov-checked` that was not true of it. */
.cov-dates, .cov-checked {
  font-size: 0.6875rem;
  color: var(--faint);
}
.cov-dates { grid-column: 1 / -1; }
.cov-checked { grid-column: 2; text-align: right; margin-top: -0.9rem; }
.cov-note {
  grid-column: 1 / -1;
  font-size: 0.6875rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.cov-gaps { margin: 0.9rem 0 0; font-size: 0.75rem; line-height: 1.6; color: var(--muted); }
.cov-gaps-h {
  display: inline-block;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
  margin-right: 0.35rem;
}
.cov-gap-when { color: var(--faint); }
.cov-gap-note { display: block; color: var(--faint); font-size: 0.6875rem; }
.cov-claim {
  margin: 0.9rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  font-size: 0.6875rem;
  color: var(--faint);
}

/* --------------------------------------------- a post that became a minute */

.entry--post .post-embed { margin: 0.75rem 0 0; }
.tag--x {
  background: var(--accent-soft);
  border-color: var(--accent-rule);
  color: var(--accent);
  font-weight: 600;
}
.promoted-why { color: var(--faint); font-variant-numeric: tabular-nums; }

/* "Said on X first": the same subject, posted before it was said aloud. */
.said-first { margin: 0.4rem 0 0; font-size: 0.75rem; }
.said-first a { color: var(--muted); }
.said-first a:hover { color: var(--accent); }

/* ==========================================================================
   The homepage's four folds
   ==========================================================================

   1 the job, 2 the proof, 3 the method, 4 the roster. Separated by hairlines
   on white -- no tinted or dark bands. A band of colour is the usual way to
   say "new section", and on a page whose entire argument is that it is a
   record rather than a pitch, a coloured band reads as a pitch. One rule and
   the space around it does the same work quietly.
   ========================================================================== */

.fold2,
.fold3,
.fold4 {
  border-top: 1px solid var(--rule);
  padding-top: 2.25rem;
  margin-top: 2.5rem;
}

/* The fold's own rule and padding are the separation. `.section` carries a
   3.5rem top margin for headings that stand alone in a column, and adding it
   to a fold that has already paid for the gap put 100px of white between the
   hairline and the word under it. */
.fold2 > .section,
.fold4 .section { margin-top: 0; }
.fold3 > .section { margin-top: 0; }

/* One rule, not two. The NOW list closes with a border under its last row,
   and the call to action underneath was drawing its own on top of it -- two
   hairlines twenty pixels apart, which looks like a rendering fault rather
   than a divider. The list's own closing rule does the job. */
.nowblock + .cta-follow { border-top: 0; padding-top: 1.75rem; margin-top: 1.75rem; }

/* ----------------------------------------------------------- fold 1 CTA */

.cta-follow {
  border-top: 1px solid var(--rule);
  margin-top: 2.5rem;
  padding-top: 2rem;
}
.cta-head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 1.125rem;
  max-width: 34ch;
}
.follow--cta {
  display: flex;
  gap: 0.5rem;
  max-width: 30rem;
}
.follow--cta .follow-input { flex: 1 1 auto; min-width: 0; }
.cta-note {
  font-size: 0.75rem;
  color: var(--faint);
  margin: 0.75rem 0 0;
}

/* --------------------------------------------------------------- fold 2 */

/* A rail rather than a wrapping grid. Twelve faces in a grid is a directory
   and reads as a list of everyone; twelve in a row that runs off the edge
   reads as a sample of more, which is the true claim. */
.faces {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0 0 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.faces li { flex: 0 0 auto; scroll-snap-align: start; }
.face {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 6.5rem;
  color: inherit;
  text-decoration: none;
}
.face .avatar { width: 52px; height: 52px; }
.face .avatar img { width: 52px; height: 52px; }
.face-name {
  font-family: var(--serif);
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--ink);
  margin-top: 0.6rem;
}
.face-line {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 0.2rem;
}
.face:hover { text-decoration: none; }
.face:hover .face-name { color: var(--accent); }

.counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem 1.5rem;
  margin: 0;
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
}
.counters > div { min-width: 0; }

/* The four figures sit on one baseline. "Quotes checked against audio" is the
   only label long enough to wrap, and with each cell laid out plainly
   top-down its number dropped 16px below the other three -- four numbers on
   two baselines, which reads as a rendering fault rather than as a row.

   Reserving two lines for every label is the fix rather than pushing the
   values to the bottom of a stretched cell, because one cell carries a note
   *under* its number: bottom-aligning would have lifted that number above the
   other three instead, trading one misalignment for another.
   `test_homepage.py` measures the four tops at both widths. */
.counters dt {
  font-size: 0.75rem;
  line-height: 1.35;
  min-height: 2.7em;                 /* two lines at this line-height */
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.counters dd {
  font-family: var(--serif);
  font-size: 1.875rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
/* "3 hours ago" is prose, not a figure, and at the numerals' size it shouts
   over the three real numbers beside it. */
.counters dd.counter-soft { font-size: 1.125rem; line-height: 1.35; }
.counter-note {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--faint);
  margin: 0.4rem 0 0;
}

/* --------------------------------------------------------------- fold 3 */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  counter-reset: none;
}
.steps li { min-width: 0; }
.step-n {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--faint);
  border-top: 1px solid var(--rule-strong);
  padding-top: 0.6rem;
  margin-bottom: 0.75rem;
}
.steps h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.steps p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}

/* --------------------------------------------------------------- fold 4 */

.fold4-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.fold4 .lane-chips { margin: 1.25rem 0 0.5rem; }
.fold4 .lane-group { margin-top: 1.75rem; }
.fold4 .lane {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.fold4 .lane-count {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  margin-left: 0.5rem;
}

/* The rail. Cards keep their own width and the row scrolls, so a lane with
   nine people is nine cards deep rather than three rows tall -- the roster
   stays one gesture wide however long it gets. */
.lane-rail {
  display: flex;
  gap: 0.875rem;
  list-style: none;
  margin: 0;
  padding: 0 0 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.lane-rail > li {
  flex: 0 0 16rem;
  max-width: 16rem;
  scroll-snap-align: start;
}
.card--rail { height: 100%; min-height: 9.5rem; }

/* Visible, thin, and only where a rail actually overflows. A scrollbar that
   is invisible until touched leaves no sign that there is more to the right,
   which on a roster is the whole point of the row. */
.faces::-webkit-scrollbar,
.lane-rail::-webkit-scrollbar { height: 6px; }
.faces::-webkit-scrollbar-thumb,
.lane-rail::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 999px;
}
.faces::-webkit-scrollbar-track,
.lane-rail::-webkit-scrollbar-track { background: transparent; }
.faces, .lane-rail { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }

/* ---------------------------------------------------------------- mobile */

@media (max-width: 640px) {
  .fold2, .fold3, .fold4 { padding-top: 2rem; margin-top: 2.25rem; }

  .cta-head { font-size: 1.1875rem; }
  /* Stacked, and the button full width: a 44px target beside a shrinking
     field is how the field ends up too narrow to read your own address in. */
  .follow--cta { flex-direction: column; max-width: none; }
  .follow--cta .btn { width: 100%; }

  /* Two columns, not four. Four columns of 30px numerals on a 390px screen
     wraps "Quotes checked against audio" to four lines and the row stops
     scanning as a row. */
  .counters { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; }
  .counters dd { font-size: 1.625rem; }

  /* One step at a time. Three columns at this width gives each step a
     14-character measure. */
  .steps { grid-template-columns: 1fr; gap: 1.5rem; }

  .lane-rail > li { flex-basis: 14.5rem; max-width: 14.5rem; }
  .face { width: 5.5rem; }
  .faces { gap: 1.125rem; }
}

/* ==========================================================================
   The front page
   ==========================================================================

   Three questions, in order, and each one gets a band of the page.

   1. Who do you cover?   The fold: what this is on the left, six faces on the
                          right, divided by a hairline. Six rather than
                          thirty-one because the fold is a shop window; the
                          whole roster is one screen below, which is
                          sequencing rather than hiding.
   2. What is an entry?   One complete entry, in full, with the verbatim as
                          the largest text on the page. The product
                          demonstrated rather than described.
   3. Is it current?      A freshness line under the tiles, the dates on every
                          row, and Now beside the roster.

   The two rules behind the fold's line-up are enforced in build.py, not here:
   a person needs rendered quotes and a photograph to appear. A face is a
   promise that the page behind it is worth opening, and a monogram among five
   faces reads as a broken image rather than as somebody we have not
   photographed yet.
   ========================================================================== */

/* Tighter at the top than a document page: the fold is the first thing, and
   a two-inch gap under the masthead reads as a page that has not loaded. */
.page--home { padding-top: 1.75rem; max-width: var(--home-measure); }
/* 46rem was the measure of a single centred column of prose, and it was the
   root of what was wrong with the old front page: it put the content in about
   380px of a 1440px window. This page is two columns twice over, and both
   want width. */
.page--home { --home-measure: 74rem; }

/* ------------------------------------------------------------------ fold */

.fold {
  display: grid;
  /* 40/60. The left column is four short elements and the right one carries a
     quotation at 19px; giving the wider half to the thing being read is the
     whole reason the rail became a card. */
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: 0 3.25rem;
  padding: 2.75rem 0 2.5rem;
  border-bottom: 1px solid var(--rule);
  /* Centred, not top-aligned. The left column is four short elements and the
     rail is eight rows; aligned to the top they read as two columns that
     happen to share a page, and centred they read as one. */
  align-items: center;
}
.fold-say { min-width: 0; }
.fold-head {
  margin: 0 0 1.1rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.fold-head em { font-style: italic; color: var(--accent); }
.fold-offer {
  margin: 0 0 0.9rem;
  font-size: 1.06rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  max-width: 34ch;
}

/* The sign-up, inline. One field and one button on one line, because the
   whole ask is an email address and a form that looks like a form with
   several parts reads as a form with several parts. */
/* One form, two places: the fold and the second ask below the worked
   example. The rules are on `.signup` rather than on either position, so the
   two cannot drift into looking like different offers. */
.signup { display: flex; gap: 0.5rem; max-width: 25rem; }
.signup-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.7rem 0.85rem;
}
.signup-input:focus { outline: none; border-color: var(--accent); }
.signup-input::placeholder { color: var(--faint); }
.signup-go {
  flex: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 2px;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
}
.signup-go:hover { background: var(--accent); }

/* The second ask. Pitch left, field right, on one line where there is room. */
.ask {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 2.25rem;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
}
.ask-pitch p { margin: 0; font-size: 1.06rem; line-height: 1.4; font-weight: 600; }
.ask-pitch small {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.8125rem;
  color: var(--faint);
  font-weight: 400;
}
.ask-form .signup { max-width: none; }

.btn--big { padding: 0.7rem 1.35rem; font-size: 0.95rem; border-radius: 2px; }
/* `.nav-links a` sets a colour and is the more specific selector, so a button
   in the nav rendered as dark grey text on a near-black fill -- legible only
   if you already knew what it said. The button has to win in its own bar. */
.nav-links a.btn { color: var(--paper); }
.nav-links a.btn:hover { color: var(--paper); background: var(--accent); border-color: var(--accent); }
/* `flex: none` because at the phone breakpoint `.nav-links` goes full width
   and wraps; the button lands alone on the second row and, as a flex item on
   a full-width line, grew into a black bar the width of the screen. It is a
   button, not a banner. */
.btn--nav {
  padding: 0.4rem 0.9rem;
  font-size: 0.8125rem;
  border-radius: 2px;
  /* `@media (max-width: 640px) .btn { width: 100% }` is right for the follow
     form's submit, which is the last thing in a stacked column, and wrong for
     a button in the masthead: `.nav-links` goes full width at that breakpoint
     and the button wrapped onto its own line as a black bar the width of the
     phone. Overridden here rather than narrowed there, because the footer
     button still wants it. */
  width: auto;
  flex: none;
  align-self: center;
}
.fold-sub {
  margin: 0.7rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--faint);
  max-width: 34ch;
}

/* The rail sits on a hairline rather than in a box: a border on one side
   reads as a division of one page, and a card reads as a widget pasted onto
   it. */
.fold-rail { min-width: 0; padding-left: 3.25rem; border-left: 1px solid var(--rule); }

.rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.45rem;
  margin-bottom: 0.85rem;
}
.rail-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.rail-all { font-family: var(--mono); font-size: 0.65rem; color: var(--accent); }

.rail-nav { display: flex; align-items: center; gap: 0.55rem; }
.rail-pos {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.rail-arw {
  font: inherit;
  line-height: 1;
  border: 1px solid var(--rule);
  border-radius: 2px;
  width: 1.4rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--body);
  background: var(--paper);
  cursor: pointer;
  padding: 0;
}
.rail-arw:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rail-arw:disabled { opacity: 0.35; cursor: default; }

/* Without the script this is a plain list: every card stacked, every link
   live. `.is-live` is added by the script, and only then does anything get
   hidden -- so a page that never runs it never shows one card and two arrows
   that do nothing. */
.carousel { min-width: 0; }
.track { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.carousel.is-live { overflow: hidden; }
/* A flex row, which is what makes every slide the same height: the row lays
   out all of them and stretches each to the tallest, so advancing does not
   change how tall the carousel is and nothing below it moves. `align-items`
   is stated rather than left to the default, because the default is the
   load-bearing part here and a later `align-items: start` would break the
   page in a way nobody would connect to this rule. */
.carousel.is-live .track {
  display: flex;
  align-items: stretch;
  gap: 0;
  transition: transform 0.42s cubic-bezier(0.4, 0.05, 0.2, 1);
}
.carousel.is-live .slide { flex: 0 0 100%; min-width: 0; display: flex; padding: 1px; }
@media (prefers-reduced-motion: reduce) {
  /* No slide, and no auto-advance either -- the script asks the same question
     of matchMedia. Two halves of one request, and honouring only the visible
     half would be worse than honouring neither: the page would still move on
     its own, just abruptly. */
  .carousel.is-live .track { transition: none; }
}

.pcard {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.25rem 1.4rem 0.95rem;
  background: var(--paper);
}
.pcard-top { display: flex; gap: 0.9rem; align-items: center; margin-bottom: 1rem; min-width: 0; }
.pcard-face { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; }
.pcard-face--mono {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
}
.pcard-who { min-width: 0; flex: 1; }
.pcard-name {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard-name:hover { color: var(--accent); }
.pcard-org {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard-ls {
  flex: none;
  align-self: flex-start;
  padding-top: 0.2rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.pcard-ls.is-hot { color: var(--accent); }

/* The line is the largest thing on the card, because it is the thing being
   offered. The rule marks it as quoted material and is the same green as the
   worked example below, which is the same act shown at length. */
.pcard-q {
  margin: 0 0 0.6rem;
  font-size: 1.19rem;
  line-height: 1.42;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
}
.pcard-q p { margin: 0; }
/* A summary is not a quotation and is not set as one: no marks, and the
   colour of body prose rather than of the record. */
.pcard-q--line { color: var(--body); font-size: 1.06rem; }
.pcard-attr {
  margin: 0 0 1rem;
  padding-left: 1.19rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.pcard-attr a { color: var(--accent); }
.pcard-dot { color: var(--rule-strong); margin: 0 0.35rem; }
.pcard-counts {
  margin: auto 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.pcard-counts b { color: var(--ink); font-weight: 600; }

.pcard--more {
  border-style: dashed;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 12rem;
  color: inherit;
}
.pcard--more:hover { border-color: var(--accent); text-decoration: none; }
.pcard-more-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.5;
}
.pcard-more-count {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--serif);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
}

.rail-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.rail-dots { display: flex; gap: 0.375rem; align-items: center; }
.rail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rule-strong);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.rail-dot.is-on { background: var(--accent); }

/* ---------------------------------------------------- one entry, in full */

.worked { padding: 2.25rem 0; border-bottom: 1px solid var(--rule); }
.worked-label {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
}
.wk {
  /* Warm, not tinted with the accent. The rule beside the quotation is green
     and it is the only green in the block; a green panel behind a green rule
     cancels the emphasis it exists to give. */
  background: #faf7ef;
  border: 1px solid #ece5d6;
  border-radius: 3px;
  padding: 1.5rem 1.6rem;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0 1.1rem;
  align-items: start;
}
/* Centred, because this falls back to initials when the person has no
   photograph and a monogram in a 52px circle with no centring renders as a
   letter sliced by the edge of the frame. */
.wk-face {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6ded0;
  color: #8a7c62;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
}
.wk-face img { width: 52px; height: 52px; object-fit: cover; display: block; }
.wk-body { min-width: 0; }
.wk-who { margin: 0 0 0.1rem; font-size: 0.95rem; font-weight: 600; }
.wk-who a { color: var(--ink); }
.wk-role { margin: 0 0 0.9rem; font-size: 0.8125rem; color: var(--faint); }
.wk-line { margin: 0 0 0.9rem; font-size: 1rem; line-height: 1.45; color: var(--muted); max-width: 58ch; }
/* The largest text on the page. Everything around it is apparatus: the
   summary says what it is about and the meta says where it came from, and
   the words are the thing being sold. */
.wk-quote {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 46ch;
}
.wk-meta {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.wk-meta a { color: var(--accent); border-bottom: 1px solid var(--accent-rule); }
.wk-dot { color: var(--accent-rule); margin: 0 0.45rem; }

/* --------------------------------------------------- the roster, and Now */

.lower {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 0 3.25rem;
  padding-top: 2.25rem;
}
.lower-now { border-left: 1px solid var(--rule); padding-left: 3.25rem; min-width: 0; }
.lower-roster { min-width: 0; }

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.45rem;
  margin-bottom: 1rem;
}
.sec-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.sec-count { font-family: var(--mono); font-size: 0.65rem; color: var(--faint); font-variant-numeric: tabular-nums; }

.desk { margin-bottom: 1.6rem; }
.desk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.3rem;
  margin-bottom: 0.75rem;
}
.desk-name { margin: 0; font-size: 0.8125rem; font-weight: 700; }
.desk-count {
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.desk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.1rem;
}
.who-link, .who { min-width: 0; }
.who-link { display: flex; gap: 0.55rem; align-items: flex-start; color: inherit; }
.who-link:hover { text-decoration: none; }
.who-link:hover .who-name { color: var(--accent); }
.who { display: flex; gap: 0.55rem; align-items: flex-start; }
.who-face {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
}
.who-face img { width: 30px; height: 30px; object-fit: cover; display: block; }
.who-face--seat { background: none; border: 1px dashed var(--rule); color: var(--faint); }
.who-text { min-width: 0; }
.who-name { display: block; font-size: 0.875rem; line-height: 1.2; font-weight: 600; color: var(--ink); }
.who-role {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--faint);
  margin-top: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.who-when {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--faint);
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}
.who--seat .who-name { color: var(--faint); font-style: italic; font-weight: 400; }

.nowfeed { list-style: none; margin: 0; padding: 0; }
.nowitem { padding: 0 0 0.9rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--rule); }
.nowitem:last-child { border-bottom: 0; margin-bottom: 0; }
.nowitem-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.3rem; }
.nowitem-who { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.nowitem-when { font-family: var(--mono); font-size: 0.65rem; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nowitem-line { margin: 0 0 0.4rem; font-size: 0.9rem; line-height: 1.48; }
.nowitem-line a { color: var(--body); }
.nowitem-line a:hover { color: var(--accent); }
.nowitem-src { margin: 0; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.nowitem-dot { color: var(--rule); margin: 0 0.35rem; }

@media (max-width: 60rem) {
  .lower { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .lower-now { border-left: 0; padding-left: 0; }
  .entry { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
}
/* The fold holds its two columns until 760px, later than everything else on
   the page.
   ---------------------------------------------------------------------
   It stacked at 960px with the old rail, where the right-hand column was six
   40px rows and got cramped early. A card is one quotation and a face: it
   reads perfectly well in 300px, and stacking it early pushes the sign-up
   form a screen further from the headline on every tablet and every laptop
   in a narrow window. 800px is specifically inside this: two columns. */
@media (max-width: 47.5rem) {
  .fold { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .fold-rail { border-left: 0; padding-left: 0; }
  .ask { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}
@media (max-width: 40rem) {
  .desk-list { grid-template-columns: minmax(0, 1fr); }
}