/* ==================================================================================================
   STARTUP AZORES — the public site's design system.

   Source of truth: docs/design/Design Document.dc.html. That document rejects six alternative
   directions and records why, and the decisive finding was that swapping palette and typeface
   changed nothing because the STRUCTURE stayed constant. So the rules below are not decoration.
   Loosening them reproduces work that was already thrown away.

   THE FIVE RULES, in the order they are most often broken:

   1. NO ACCENT COLOUR. The system is monochrome. Hierarchy is carried by size, weight and value
      alone. That is what makes the greyed right-hand comparison column read as "the worse option"
      without a word spent explaining it. Do not add a hue.
   2. NO MEDIA QUERIES. Every size is a clamp(); every multi-column arrangement is
      repeat(auto-fit, minmax(min(100%, Npx), 1fr)), so columns collapse on their own content width
      rather than at an arbitrary breakpoint. spec/design/no_media_queries_spec.rb fails the build
      over one.
   3. NO CARDS, SHADOWS OR ROUNDED CORNERS. Structure is hairline rules and whitespace, plus
      inverted black panels and full-bleed photographic bands. Nothing else.
   4. TWO FACES, STRICTLY DIVIDED. Source Serif 4 sets everything a reader reads, INCLUDING the
      figures. Archivo is confined to small functional text and never appears above ~15px. The
      strictness is doing the job an accent colour would otherwise do: the reader learns that
      sans-serif means "this is a label, not the content".
   5. LARGE NUMERALS ARE WEIGHT 300. A 92px figure at 300 reads considered rather than loud. The
      weight is a review parameter (config/startup_azores.yml), applied as --sa-figure-weight.

   Scoped under .ni rather than :root so the kit's Terminal system (application.css) can keep
   serving the signed-in surfaces, which the design document deliberately leaves undesigned.
   ================================================================================================== */

.ni {
  /* --- Palette. Seven roles, and every value in the site is one of them. ------------------- */
  --sa-paper:          #fbfbfa;  /* page ground, and text inside inverted panels */
  --sa-ink:            #141414;  /* headings, figures, heavy rules, dark panels */
  --sa-body:           #3f3f3d;  /* running text */
  --sa-nav-idle:       #6a6a67;  /* inactive nav link */
  --sa-muted:          #8a8a86;  /* labels, kickers, table headers */
  --sa-faint:          #9d9d98;  /* secondary metadata, dates */
  --sa-recessive:      #b3b3af;  /* the mainland column, step numerals, bullets */
  --sa-link-rule:      #b9b9b6;  /* default link underline */
  --sa-rule-strong:    #dcdcd8;  /* section divisions, input and ghost borders */
  --sa-rule:           #ececea;  /* row dividers, hairlines */
  --sa-hover-soft:     #f0f0ee;  /* selected or hovered option */
  --sa-hover-card:     #f4f4f2;  /* ask-card hover */
  --sa-rule-dark:      #33332f;  /* hairline INSIDE dark panels */
  --sa-link-rule-dark: #55555a;  /* link underline on dark panels */
  --sa-field:          #fff;     /* input background: the only pure white in the system */

  --sa-serif: "Source Serif 4", Georgia, serif;
  --sa-sans:  Archivo, system-ui, sans-serif;

  /* Overridden inline from config/startup_azores.yml (figure_weight, 200 to 600). */
  --sa-figure-weight: 300;

  --sa-measure: 1140px;   /* the page's own width */
  --sa-gutter: clamp(16px, 4vw, 52px);
  --sa-section-y: clamp(26px, 5vw, 60px);
  --sa-section-y-end: clamp(30px, 6vw, 80px);
}

/* --- Scoped reset -----------------------------------------------------------------------------
   Propshaft bundles every stylesheet into one file, so the kit's Terminal system is in the same
   cascade as this one. It styles bare elements for a DARK ground: `h1..h4 { color: bone-bright }`
   is near-white, and `p { max-width: var(--measure) }` imposes a measure this system sets per
   block. Correct there, wrong here.

   `:where()` contributes no specificity, so `.ni :where(h1)` scores (0,1,0): enough to beat the
   kit's bare `h1` (0,0,1), and a tie with the .sa-h1 component classes below, which source order
   then resolves in the component's favour. Keep this block above them. */
.ni :where(h1, h2, h3, h4, h5, h6) {
  color: inherit; font: inherit; margin: 0; letter-spacing: inherit; line-height: inherit;
}
.ni :where(p, figure, blockquote) { margin: 0; max-width: none; }
.ni :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

/* --- Ground ------------------------------------------------------------------------------- */
body.ni {
  margin: 0;
  background: var(--sa-paper);
  color: var(--sa-ink);
  font-family: var(--sa-serif);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  /* Guards the 100vw full-bleed breakouts, which are otherwise a horizontal scrollbar. */
  overflow-x: hidden;
  /* Clears the fixed bottom bar so the last line of every page stays readable. */
  padding-bottom: 68px;
}

.ni *, .ni *::before, .ni *::after { box-sizing: border-box; }
.ni ::selection { background: var(--sa-ink); color: var(--sa-paper); }

.ni a {
  color: var(--sa-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sa-link-rule);
}
.ni a:hover { border-bottom-color: var(--sa-ink); }
.ni a:focus-visible,
.ni button:focus-visible,
.ni input:focus-visible { outline: 2px solid var(--sa-ink); outline-offset: 2px; }

.ni button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.ni input { font-family: inherit; }
.ni img { max-width: 100%; display: block; }

/* --- Layout ------------------------------------------------------------------------------- */
.sa-wrap { max-width: var(--sa-measure); margin: 0 auto; padding-inline: var(--sa-gutter); }
/* "How we rank" is the one narrow page: five rules read as editorial, not as a data table. */
.sa-wrap--narrow { max-width: 840px; }
.sa-main { padding-block: var(--sa-section-y) var(--sa-section-y-end); }

/* Measures. Prose is capped well inside the page width so line length stays readable no matter
   how wide the viewport gets. */
.sa-m20 { max-width: 20em; }  .sa-m23 { max-width: 23em; }
.sa-m24 { max-width: 24em; }  .sa-m30 { max-width: 30em; }
.sa-m32 { max-width: 32em; }  .sa-m34 { max-width: 34em; }
.sa-m36 { max-width: 36em; }  .sa-m46 { max-width: 46em; }

/* The only multi-column primitive. `min(100%, Npx)` is what lets a column collapse on its own
   content width instead of at a breakpoint; N is tuned per use, never a device size. */
.sa-cols { display: grid; gap: clamp(18px, 3vw, 36px); }
.sa-cols--130 { grid-template-columns: repeat(auto-fit, minmax(min(50%, 130px), 1fr)); }
.sa-cols--150 { grid-template-columns: repeat(auto-fit, minmax(min(50%, 150px), 1fr)); }
.sa-cols--170 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.sa-cols--180 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.sa-cols--240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.sa-cols--250 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.sa-cols--260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.sa-cols--270 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.sa-cols--290 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

/* --- Type ---------------------------------------------------------------------------------- */
/* Display leading is face-specific: 1.04 to 1.06 is tuned for Source Serif 4's descenders. An
   earlier face at these values produced genuine ink collision between lines. Do not carry these
   numbers to another typeface without re-checking them. */
.sa-h1 {
  font-weight: 300;
  font-size: clamp(34px, 6.4vw, 82px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0;
}
.sa-h1--section { font-size: clamp(32px, 5.8vw, 70px); line-height: 1.05; letter-spacing: -0.03em; }
.sa-h1--list    { font-size: clamp(34px, 6vw, 74px);   line-height: 1.04; letter-spacing: -0.032em; }
.sa-h1--rank    { font-size: clamp(32px, 5.6vw, 66px); letter-spacing: -0.03em; }
.sa-h1--quiz    { font-size: clamp(30px, 5.4vw, 60px); line-height: 1.08; letter-spacing: -0.03em; }
.sa-h1--result  { font-size: clamp(32px, 5.8vw, 68px); line-height: 1.06; letter-spacing: -0.03em; }

.sa-h2 {
  font-weight: 400;
  font-size: clamp(21px, 2.8vw, 30px);
  line-height: 1.17;
  letter-spacing: -0.02em;
  margin: 0;
}
.sa-h2--large { font-size: clamp(28px, 4.6vw, 54px); line-height: 1.1; letter-spacing: -0.026em; }
.sa-h2--mid   { font-size: clamp(23px, 3.2vw, 34px); letter-spacing: -0.022em; }
.sa-h3 { font-family: var(--sa-sans); font-weight: 600; font-size: 15.5px; margin: 0; }

.sa-kicker {
  font-family: var(--sa-sans);
  font-size: 13px;
  color: var(--sa-muted);
  margin: 0 0 clamp(10px, 1.6vw, 16px);
}
.sa-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.6; color: var(--sa-body); margin: 0; }
.sa-body { font-size: 17px; line-height: 1.66; color: var(--sa-body); margin: 0; }
.sa-body--sm { font-size: 16.5px; line-height: 1.62; }

/* Archivo, and never above ~15px. Every use of the sans face goes through one of these. */
.sa-label { font-family: var(--sa-sans); font-size: 12.5px; color: var(--sa-muted); }
/* Large figures carry negative tracking, and a small sans label sitting INSIDE one inherits it:
   "a month" renders as "amonth". The figure needs the tracking and the label does not, so the
   label takes it back. */
[class*="sa-figure"] .sa-label,
[class*="sa-figure"] .sa-meta { letter-spacing: normal; }
.sa-label--lg { font-size: 13.5px; }
.sa-meta { font-family: var(--sa-sans); font-size: 13px; color: var(--sa-faint); }
.sa-note { font-family: var(--sa-sans); font-size: 13px; line-height: 1.7; color: var(--sa-muted); }

/* --- Figures ------------------------------------------------------------------------------- */
/* GOTCHA, recorded in the design document: a figure sized in vw inside a fractional column
   overflows its cell at tablet widths, because the figure scales to the VIEWPORT while its
   container is a third of it. Every clamp here is tuned against the narrowest column the figure
   actually occupies, not against the page. */
.sa-figure {
  font-weight: var(--sa-figure-weight);
  font-size: clamp(42px, 7vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.038em;
}
.sa-figure--recessive { color: var(--sa-recessive); }
.sa-figure--count { font-weight: 300; font-size: clamp(32px, 5vw, 60px); letter-spacing: -0.034em; }
.sa-figure--fact  { font-weight: 300; font-size: clamp(30px, 4.6vw, 54px); letter-spacing: -0.03em; }
.sa-figure--stat  { font-weight: 300; font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.028em; }
.sa-figure--price { font-weight: 300; font-size: clamp(32px, 4.6vw, 54px); letter-spacing: -0.03em; }
.sa-figure--cell  { font-weight: 300; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.024em; }
.sa-figure--bar   { font-weight: 300; font-size: clamp(20px, 3vw, 32px); letter-spacing: -0.028em; }

/* --- Rules --------------------------------------------------------------------------------- */
.sa-rule-top      { border-top: 1px solid var(--sa-rule); }
.sa-rule-top--ink { border-top: 1px solid var(--sa-ink); }
.sa-rule-bottom      { border-bottom: 1px solid var(--sa-rule); }
.sa-rule-bottom--ink { border-bottom: 1px solid var(--sa-ink); }
.sa-rule-bottom--strong { border-bottom: 1px solid var(--sa-rule-strong); }

/* --- Chrome: page tabs are a prototype affordance and are NOT reproduced. The header sits at
       top:0 accordingly. ---------------------------------------------------------------------- */
.sa-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--sa-paper);
  border-bottom: 1px solid var(--sa-rule);
}
.sa-header__inner {
  max-width: var(--sa-measure); margin: 0 auto;
  padding: 18px var(--sa-gutter) 16px;
  display: flex; align-items: baseline; gap: clamp(12px, 3vw, 30px); flex-wrap: wrap;
}
.sa-wordmark { border: none; font-weight: 600; font-size: 19px; letter-spacing: -0.012em; white-space: nowrap; }
.sa-header__spacer { flex: 1; min-width: 8px; }
.sa-nav { display: flex; gap: clamp(12px, 2.2vw, 26px); flex-wrap: wrap; align-items: baseline; }
.sa-nav__link {
  font-family: var(--sa-sans); font-size: 14.5px; color: var(--sa-nav-idle);
  border-bottom: 1px solid transparent; padding-bottom: 2px; white-space: nowrap;
}
.sa-nav__link:hover { color: var(--sa-ink); border-bottom-color: var(--sa-ink); }
.sa-nav__link[aria-current="page"] { color: var(--sa-ink); border-bottom-color: var(--sa-ink); }

.sa-langs {
  display: flex; align-items: baseline; gap: 2px;
  border-left: 1px solid var(--sa-rule); padding-left: clamp(12px, 2vw, 22px);
}
.sa-langs__link {
  border: none; padding: 4px 7px; font-family: var(--sa-sans); font-size: 13.5px;
  font-weight: 400; color: var(--sa-faint); border-bottom: 1px solid transparent;
}
.sa-langs__link[aria-current="true"] { font-weight: 600; color: var(--sa-ink); border-bottom-color: var(--sa-ink); }

/* --- Footer -------------------------------------------------------------------------------- */
.sa-footer { border-top: 1px solid var(--sa-ink); background: var(--sa-paper); }
.sa-footer__inner {
  max-width: var(--sa-measure); margin: 0 auto;
  padding: clamp(26px, 4vw, 44px) var(--sa-gutter);
  display: grid; gap: clamp(22px, 4vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.sa-footer__head { font-family: var(--sa-sans); font-size: 12.5px; color: var(--sa-muted); margin-bottom: 14px; }
.sa-footer__links { display: grid; gap: 9px; justify-items: start; }
.sa-footer__links a { font-size: 16px; }
.sa-footer__legal { font-family: var(--sa-sans); font-size: 12.5px; color: var(--sa-faint); }

/* --- The persistent bar. Carries the annual difference across all six screens. -------------- */
.sa-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--sa-paper); border-top: 1px solid var(--sa-ink);
  padding: 13px var(--sa-gutter);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: clamp(10px, 3vw, 24px);
}
.sa-bar__spacer { flex: 1; min-width: 8px; }

/* --- Buttons. Four variants, no more. Minimum height is 44 to 58px throughout. -------------- */
.sa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sa-sans); font-size: 14.5px; font-weight: 500;
  padding: 13px 20px; min-height: 46px; border: 1px solid transparent;
  cursor: pointer; text-align: center;
}
.ni .sa-btn--primary { background: var(--sa-ink); color: var(--sa-paper); }
.ni .sa-btn--primary:hover { background: var(--sa-body); color: var(--sa-paper); }
.ni .sa-btn--secondary { background: transparent; color: var(--sa-ink); border-color: var(--sa-ink); }
.ni .sa-btn--secondary:hover { background: var(--sa-ink); color: var(--sa-paper); }
.ni .sa-btn--ghost { background: transparent; color: var(--sa-body); border-color: var(--sa-rule-strong); }
.ni .sa-btn--ghost:hover { border-color: var(--sa-ink); color: var(--sa-ink); }
.ni .sa-btn--inverted { background: var(--sa-paper); color: var(--sa-ink); }
.ni .sa-btn--inverted:hover { background: var(--sa-rule-strong); color: var(--sa-ink); }
.sa-btn--block { display: flex; width: 100%; min-height: 50px; }
/* A button is a target, not a link in prose, so it drops the link underline entirely. */
.ni a.sa-btn, .ni a.sa-btn:hover { border-bottom-color: transparent; }

/* The ask cards are links too, and they must not pick up the prose underline on their border. */
.ni a.sa-ask, .ni a.sa-ask:hover { border-bottom-color: var(--sa-rule); }

/* --- Inverted panel. The one surface that is not paper. ------------------------------------ */
.sa-panel {
  background: var(--sa-ink); color: var(--sa-paper);
  padding: clamp(22px, 3vw, 38px);
}
.sa-panel .sa-body, .sa-panel .sa-lede { color: var(--sa-faint); }
.sa-panel .sa-label, .sa-panel .sa-note { color: var(--sa-muted); }
.sa-panel a { color: var(--sa-paper); border-bottom-color: var(--sa-link-rule-dark); }
.sa-panel a:hover { border-bottom-color: var(--sa-paper); }
.sa-panel__row { border-top: 1px solid var(--sa-rule-dark); padding: 13px 0; }

/* --- The signature comparison. Left is the Azores in full ink; right is the mainland,
       desaturated. The recession IS the argument, so it is never restyled. ------------------- */
.sa-cmp__head {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(18px, 3vw, 36px);
  border-top: 1px solid var(--sa-ink); border-bottom: 1px solid var(--sa-rule-strong);
  padding: 14px 0;
}
.sa-cmp__row { border-bottom: 1px solid var(--sa-rule); padding: clamp(22px, 3.4vw, 40px) 0; }
.sa-cmp__pair {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(18px, 3vw, 36px);
}
.sa-cmp__there { border-left: 1px solid var(--sa-rule); padding-left: clamp(14px, 3vw, 36px); }
.sa-cmp__note { margin-top: 10px; }
.sa-cmp__note--there { color: var(--sa-faint); }

/* --- Stat strip: cells between two heavy rules. -------------------------------------------- */
.sa-stats { border-top: 1px solid var(--sa-ink); border-bottom: 1px solid var(--sa-ink); }
.sa-stats__cell { border-right: 1px solid var(--sa-rule); padding: clamp(18px, 2.6vw, 26px) clamp(14px, 2vw, 22px) clamp(18px, 2.6vw, 26px) 0; }
.sa-stats__cell:last-child { border-right: none; }

/* --- Data tables. CSS grid, not <table>: the four-column shape has to reflow to 2x2 on a phone,
       which a table cannot do without losing its header association. Header cells are labelled
       with role="row"/"columnheader" in the markup so it still reads as a table to a screen
       reader. --------------------------------------------------------------------------------- */
.sa-table__head {
  display: grid; gap: 8px 20px; padding: 12px 0;
  border-bottom: 1px solid var(--sa-ink);
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 150px), 1fr));
}
.sa-table__row {
  display: grid; gap: 8px 20px; padding: clamp(14px, 2vw, 18px) 0;
  border-bottom: 1px solid var(--sa-rule); align-items: baseline;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 150px), 1fr));
}
.sa-table--tight .sa-table__head,
.sa-table--tight .sa-table__row { grid-template-columns: repeat(auto-fit, minmax(min(50%, 130px), 1fr)); }

/* --- Numbered list: a large recessive numeral beside the text. ------------------------------ */
.sa-steps__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  border-top: 1px solid var(--sa-rule); padding: clamp(20px, 3vw, 32px) 0;
}
.sa-steps__n { font-weight: 300; font-size: clamp(28px, 4vw, 48px); color: var(--sa-recessive); min-width: 1.4em; line-height: 1; }
.sa-steps__n--sm { font-size: clamp(24px, 3.2vw, 38px); }
.sa-steps__n--rank { font-size: clamp(26px, 3.6vw, 42px); }
/* The result timeline adds a right-hand "when" column. */
.sa-steps__item--timed { grid-template-columns: auto minmax(0, 1fr) auto; }
.sa-steps__when { font-family: var(--sa-sans); font-size: 13px; color: var(--sa-faint); white-space: nowrap; padding-top: 5px; }

/* --- Bullet list. The prototype used an em dash as the marker; the house copy rule bans long
       dashes in anything a reader sees, so the marker is the middot, which is already in this
       design's vocabulary (the footer legal line, "The list · empty"). Grid, colour and spacing
       are unchanged. ------------------------------------------------------------------------- */
.sa-bullets__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 7px 0; }
.sa-bullets__mark { color: var(--sa-recessive); }
.sa-bullets--ruled .sa-bullets__item { border-top: 1px solid var(--sa-rule); padding: 16px 0; }

/* --- Chip -------------------------------------------------------------------------------- */
.sa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-chip { font-family: var(--sa-sans); font-size: 13px; color: var(--sa-body); border: 1px solid var(--sa-rule); padding: 6px 10px; }

/* --- Ask card: a button that fills its cell, with the call to action pinned to the bottom. -- */
.sa-ask {
  display: flex; flex-direction: column; text-align: left;
  background: transparent; border: none;
  border-right: 1px solid var(--sa-rule); border-bottom: 1px solid var(--sa-rule);
  padding: clamp(20px, 3vw, 32px) clamp(16px, 2.5vw, 30px) clamp(20px, 3vw, 32px) 0;
}
.sa-ask:hover { background: var(--sa-hover-card); }
.sa-ask__spacer { flex: 1; min-height: 14px; }

/* --- The qualifier ------------------------------------------------------------------------- */
.sa-pips { display: flex; gap: 4px; }
.sa-pips__pip { flex: 1; height: 3px; background: var(--sa-rule); }
.sa-pips__pip--on { background: var(--sa-ink); }

/* 1px gap over an --sa-rule ground draws the hairline separators, so no borders are needed and
   no two adjacent rules can double up. */
.sa-options {
  display: grid; gap: 1px; background: var(--sa-rule);
  border-top: 1px solid var(--sa-rule); border-bottom: 1px solid var(--sa-rule);
}
.sa-option {
  display: flex; gap: 16px; align-items: baseline; width: 100%; text-align: left;
  background: var(--sa-paper); border: none; padding: 17px 18px;
  font-family: var(--sa-serif); font-size: 18px; min-height: 58px; color: var(--sa-ink);
}
.sa-option:hover { background: var(--sa-hover-soft); }
.sa-option[aria-pressed="true"] { background: var(--sa-hover-soft); }
.sa-option__key { font-family: var(--sa-sans); font-size: 12.5px; color: var(--sa-recessive); min-width: 14px; }
.sa-option[aria-pressed="true"] .sa-option__key { color: var(--sa-ink); }

.sa-field {
  flex: 1; min-width: 170px; background: var(--sa-field);
  border: 1px solid var(--sa-rule-strong); padding: 13px 15px;
  font-size: 16px; min-height: 48px; color: var(--sa-ink);
}

/* --- Utilities. Deliberately few: a utility layer is how a system like this stops being one. - */
.sa-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; }
.sa-stack > * + * { margin-top: clamp(10px, 1.4vw, 14px); }
.sa-section { margin-top: clamp(30px, 5vw, 64px); }
.sa-section--tight { margin-top: clamp(20px, 3vw, 34px); }
.sa-recessive { color: var(--sa-recessive); }
.sa-faint { color: var(--sa-faint); }
.sa-nowrap { white-space: nowrap; }
.sa-right { text-align: right; }

/* --- Prose. Only the blog needs it: the six screens compose their type from the classes above,
       but a post's body is rendered markdown and has to style bare elements. Scoped to .sa-prose
       so it cannot leak into a screen. ---------------------------------------------------------- */
.sa-prose { font-size: 17px; line-height: 1.68; color: var(--sa-body); }
.sa-prose > * + * { margin-top: 1em; }
.sa-prose h2 {
  font-family: var(--sa-serif); font-weight: 400; color: var(--sa-ink);
  font-size: clamp(21px, 2.8vw, 30px); line-height: 1.17; letter-spacing: -0.02em;
  margin-top: 1.8em;
}
.sa-prose h3 { font-family: var(--sa-serif); font-weight: 600; color: var(--sa-ink); font-size: 19px; margin-top: 1.6em; }
.sa-prose strong { font-weight: 600; color: var(--sa-ink); }
.sa-prose ul, .sa-prose ol { padding-left: 1.2em; }
.sa-prose ul { list-style: disc; }
.sa-prose ol { list-style: decimal; }
.sa-prose li { margin-top: 0.4em; }
.sa-prose blockquote { border-left: 1px solid var(--sa-rule-strong); padding-left: 18px; color: var(--sa-muted); }
.sa-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
.sa-prose pre {
  background: var(--sa-hover-card); border-top: 1px solid var(--sa-rule);
  border-bottom: 1px solid var(--sa-rule); padding: 16px;
  /* Wide content scrolls inside its own box; the page body must never scroll sideways. */
  overflow-x: auto;
}
.sa-prose table { width: 100%; border-collapse: collapse; }
.sa-prose th, .sa-prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--sa-rule); }
.sa-prose th { font-family: var(--sa-sans); font-size: 12.5px; font-weight: 500; color: var(--sa-muted); }
.sa-prose img { margin-block: 1.4em; }

/* A data table inside prose breaks out of the reading measure. Prose is capped at 30 to 34em so a
   sentence stays readable, and a four-column comparison at that width wraps every cell, which is
   the one place the measure works against the content rather than for it.
   
   `display: block` plus `overflow-x: auto` is what keeps it from pushing the PAGE sideways: on a
   narrow phone the table scrolls inside its own box while the body does not move. The rows and
   cells still lay out as table parts, so the columns stay aligned. `width: max-content` lets it be
   as wide as it needs and no wider, so it does not scroll when it does not have to. */
.sa-prose table {
  display: block;
  width: max-content;
  max-width: min(calc(100vw - 2 * var(--sa-gutter)), var(--sa-measure));
  overflow-x: auto;
}