/* ==========================================================================
   605 Markets

   A warm off-white ground, one green accent, hairlines instead of boxes.

   Three faces, and the split between them is the whole visual argument:
     Newsreader       -- everything that is writing: headlines, standfirsts,
                         pull quotes, the titles in a listing. Light weight.
     IBM Plex Mono    -- everything that is apparatus: navigation, labels,
                         bylines, dates, buttons. Always uppercase, always
                         letter-spaced, never large.
     Helvetica/Arial  -- body copy, and nothing else.

   Colour carries information or it is not there. Each desk has one colour
   (Desk.color) and it appears on the kicker above a headline and on the pin
   on the map. The accent marks links, buttons, and the active state. There
   are no rounded corners, no shadows, and no decoration in this file.

   The conventions here are written up in CLAUDE.md at the repository root.
   ========================================================================== */

:root {
  --ground:      #faf9f6;
  --ground-2:    #f1efe9;                  /* a cell under the pointer */
  --tint:        #edf3ee;                  /* the newsletter section, faintly green */
  --text:        #1f2422;
  --headline:    #15191a;
  --headline-2:  #0f1312;

  --accent:      #0f7a4a;                  /* the 605 green, dark enough to read */
  --accent-hover:#0b5f39;
  --accent-dim:  rgba(15, 122, 74, 0.35);
  --accent-tint: rgba(15, 122, 74, 0.06);
  --down:        #b33a2e;                  /* a claim moving the wrong way */

  --muted-1: rgba(21, 25, 26, 0.74);
  --muted-2: rgba(21, 25, 26, 0.64);
  --muted-3: rgba(21, 25, 26, 0.5);
  --muted-4: rgba(21, 25, 26, 0.44);
  --muted-5: rgba(21, 25, 26, 0.36);

  --hairline:   rgba(21, 25, 26, 0.11);
  --hairline-2: rgba(21, 25, 26, 0.15);
  --hairline-3: rgba(21, 25, 26, 0.24);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;

  --pad: 28px;             /* the page's side padding, everywhere */
  --label-col: 240px;      /* the label column of a section */
  --prose: 680px;          /* the reading column on an article */
  --nav-h: 112px;

  /* The desk colour. Set inline (style="--desk:#…") on anything that belongs
     to a desk; everything below reads it. */
  --desk: var(--accent);
}

/* --- Reset ---------------------------------------------------------------- */

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

html { background: var(--ground); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

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

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::selection { background: rgba(15, 122, 74, 0.28); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.15; }
p { margin: 0; }
input, button, select, textarea { font: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 14px;
}
.skip-link:focus { left: 0; }

.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;
}

/* --- Apparatus type ------------------------------------------------------- */

/* The mono label. Every piece of apparatus on the site is one of these, at one
   of three sizes. Colour is set by context. */
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
}
.label-sm { font-size: 10px; letter-spacing: 0.12em; }
.label-xs { font-size: 9.5px; letter-spacing: 0.13em; }

/* The kicker above a headline: which desk this belongs to. */
.kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--desk);
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
}
.kicker .dim { color: var(--muted-3); }
a.kicker:hover { color: var(--accent-hover); }

/* Writing, at the sizes it comes in. */
.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--headline-2);
}
.display-sm {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--headline-2);
}
.standfirst {
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--muted-2);
  max-width: 60ch;
}
.copy { font-size: 16.5px; line-height: 1.72; color: rgba(21, 25, 26, 0.76); }
.copy + .copy { margin-top: 20px; }
.copy a { border-bottom: 1px solid var(--accent-dim); }
.copy a:hover { border-bottom-color: var(--accent); }
.small { font-size: 13.5px; line-height: 1.7; color: rgba(21, 25, 26, 0.46); max-width: 66ch; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 13px 22px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.btn:hover { background: var(--accent); color: #fff; }
.btn-solid { background: var(--accent); color: #fff; }
.btn-solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-muted { border-color: var(--hairline-3); color: var(--muted-1); }
.btn-muted:hover { background: transparent; border-color: rgba(15, 122, 74, 0.5); color: var(--accent); }
.btn-sm { padding: 7px 13px; font-size: 11px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* --- Navigation ----------------------------------------------------------- */

/* The header: the logo small and centred, the section links in a row
   beneath it, one hairline under the lot. */
.nav {
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--hairline);
}

/* The logo (templates/_logo.html): the wordmark with the chart line rising
   behind it into the arrow. Manrope is loaded for this alone; the green is
   the logo's own, not the site accent. */
.wordmark { display: block; padding: 16px 0 8px; color: var(--headline); line-height: 0; }
.wordmark:hover { color: var(--headline); }
.wordmark .logo { display: block; height: 44px; width: auto; margin: 0 auto; overflow: visible; }
.logo-text {
  font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 44px;
  letter-spacing: -0.02em;
  fill: currentColor;
  /* A thin halo in the ground colour under the fill, so the line breaks
     slightly around the letters it passes behind. */
  paint-order: stroke;
  stroke: var(--ground);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 2px 0 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-links a { color: var(--muted-1); }
.nav-links a:hover { color: var(--headline); }
.nav-links a[aria-current="page"] { color: var(--accent); }
.nav-links .btn-sm { color: var(--accent); }
.nav-links .btn-sm:hover { color: #fff; }

/* --- Messages ------------------------------------------------------------- */

.flash {
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.flash.error { color: var(--down); }

.draft-flag {
  padding: 9px var(--pad);
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.draft-flag a { color: #fff; text-decoration: underline; }

/* --- Sections (label | content) ------------------------------------------- */

.section {
  display: flex;
  gap: 40px 60px;
  flex-wrap: wrap;
  padding: 70px var(--pad);
  border-bottom: 1px solid var(--hairline);
}
.section:last-of-type { border-bottom: 0; }
/* The one tinted section: the newsletter, on a faint green. */
.section-tint { background: var(--tint); }

.section-label {
  flex: 0 0 var(--label-col);
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.5;
}

.section-body { flex: 1 1 520px; max-width: 760px; min-width: 0; }
.section-body-wide { max-width: 900px; }
.section-body > * + * { margin-top: 22px; }
.section-body > .copy + .copy { margin-top: 20px; }

.strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px var(--pad);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-3);
  flex-wrap: wrap;
}
/* The strip with no words: only its line, so no second rule under it. */
.strip-bare { border-bottom: 0; }
.strip-line { flex: 1; height: 1px; background: var(--hairline-2); min-width: 40px; }

/* --- The map -------------------------------------------------------------- */

.hero {
  position: relative;
  height: calc(100vh - var(--nav-h));
  /* Tall enough for the line about the club and the full card, picture
     included, to sit in the left column without touching. */
  min-height: 680px;
  max-height: 780px;
  overflow: hidden;
  background: var(--ground);
}

.hero .map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .map .sphere { fill: #edf0ea; stroke: var(--hairline-3); stroke-width: 1; }
.hero .map .country { fill: #d4d9d0; stroke: rgba(21, 25, 26, 0.28); stroke-width: 0.5; transition: fill 0.2s ease; }
.hero .map .country:hover { fill: #c3cac0; }
/* A country lights up in its desk's colour while its piece is the one on
   the card, and a little under the pointer; the rest of the world stays quiet. */
.hero .map .tint { fill-opacity: 0; stroke-opacity: 0; stroke-width: 0.8; cursor: pointer; transition: fill-opacity 0.25s ease, stroke-opacity 0.25s ease; }
.hero .map .tint:hover { fill-opacity: 0.2; stroke-opacity: 0.6; }
.hero .map .tint.on { fill-opacity: 0.34; stroke-opacity: 0.9; }
.hero .map .pin { cursor: pointer; }
.hero .map .pin rect { transition: transform 0.2s ease; }
/* The place name shows for the piece on the card and under the pointer;
   forty-five labels at once would cover the map. */
.hero .map .pin text {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: currentColor;
  paint-order: stroke;
  stroke: var(--ground);
  stroke-width: 3px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hero .map .pin:hover text, .hero .map .pin.on text { opacity: 1; }
.hero .map .pin rect { opacity: 0.75; }
.hero .map .pin:hover rect, .hero .map .pin.on rect { opacity: 1; }

/* The left column of the hero: the line about the club at the top, the card
   at the bottom, never overlapping. The band itself lets the pointer through
   to the map; only its children catch it. */
.hero-band {
  position: absolute;
  left: 22px;
  top: 24px;
  bottom: 22px;
  width: min(410px, calc(100% - 44px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
}
.hero-band > * { pointer-events: auto; }

.hero-intro { display: grid; gap: 12px; }
.hero-intro-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.hero-intro-line {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--headline);
}

.hero-legend {
  position: absolute;
  right: 22px;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: right;
}

.hero-hint {
  position: absolute;
  right: 22px;
  bottom: 22px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-5);
}

.hero-card {
  position: relative;
  width: 100%;
  display: grid;
  gap: 10px;
  padding: 18px 20px 16px;
  border: 1px solid var(--hairline-2);
  background: rgba(250, 249, 246, 0.95);
  color: var(--text);
  transition: opacity 0.3s ease, border-color 0.3s ease;
}
.hero-card.fade { opacity: 0; }
.hero-card:hover { color: var(--text); border-color: var(--desk); }
.hero-card img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border: 1px solid var(--hairline); }
.hero-card-desk { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--desk); }
.hero-card-desk .dim { color: var(--muted-4); }
.hero-card-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--headline);
}
.hero-card-dek { font-size: 12.5px; line-height: 1.6; color: var(--muted-3); }
.hero-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 11px;
  margin-top: 2px;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.hero-card:hover .hero-card-meta .go { color: var(--headline); }

/* --- Newsletter ----------------------------------------------------------- */

.signup { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
.signup input[type="email"] {
  flex: 1 1 240px;
  padding: 14px 16px;
  border: 1px solid rgba(21, 25, 26, 0.3);
  background: #fff;
  color: var(--headline);
  font-size: 15px;
  outline: none;
}
.signup input::placeholder { color: var(--muted-4); }
.signup input:focus { border-color: var(--accent); }
.signup .btn { padding: 14px 24px; }

.note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-4);
  line-height: 1.7;
}

/* --- The desk grid and other hairline grids ------------------------------- */

.desk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--hairline-2);
  border-left: 1px solid var(--hairline-2);
}
.desk-grid a, .desk-grid > div {
  background: var(--ground);
  border-right: 1px solid var(--hairline-2);
  border-bottom: 1px solid var(--hairline-2);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text);
}
.desk-grid a:hover { background: var(--ground-2); color: var(--text); }
.desk-grid .n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: rgba(21, 25, 26, 0.4); }
.desk-grid .name { font-size: 13.5px; line-height: 1.3; color: rgba(21, 25, 26, 0.8); }

/* --- Listings: the grid of cells ------------------------------------------ */

/* Hairlines are drawn on the cells, not painted behind them, so a row with
   one piece in it does not leave a lit rectangle where the others would be. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.cell {
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--text);
  min-height: 100%;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.cell:hover { background: var(--ground-2); color: var(--text); }

.cell-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid var(--hairline);
  background: var(--ground-2);
}
.cell-thumb-empty { display: block; }

.cell-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 18px;
  flex: 1;
}

.cell-kicker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.cell-kicker .desk { color: var(--desk); }
.cell-kicker .no { color: var(--muted-5); }

.cell-title {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.26;
  color: var(--headline);
}
.cell-dek { font-size: 13px; line-height: 1.6; color: rgba(21, 25, 26, 0.58); }
.cell-flag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--down); }

.cell-meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(21, 25, 26, 0.38);
}

.empty {
  padding: 30px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-4);
}

/* --- Page heads, filters, search ----------------------------------------- */

.page { padding: 48px var(--pad) 64px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 36px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.page-head .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.page-head .eyebrow .dim { color: var(--muted-3); }
.page-head .eyebrow .rule { width: 34px; height: 1px; background: rgba(15, 122, 74, 0.4); }
.page-head .intro {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted-2);
  max-width: 46ch;
}

.filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.filters a {
  padding: 6px 11px;
  border: 1px solid rgba(21, 25, 26, 0.24);
  color: rgba(21, 25, 26, 0.53);
}
.filters a:hover { color: var(--headline); border-color: var(--hairline-3); }
.filters a[aria-current="true"] {
  color: var(--desk);
  border-color: var(--desk);
  background: var(--accent-tint);
}
.filters .sep { width: 1px; height: 18px; background: var(--hairline-2); margin: 0 6px; }
.filters-row { padding-bottom: 26px; border-bottom: 1px solid var(--hairline); margin-bottom: 0; }
.filters-row + .filters-row { padding-top: 12px; }
.results { padding-top: 26px; }

.search {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1 1 300px;
  max-width: 420px;
  border: 1px solid rgba(21, 25, 26, 0.26);
  padding: 12px 15px;
  background: #fff;
}
.search .mark { font-family: var(--mono); font-size: 12px; color: rgba(21, 25, 26, 0.44); }
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--headline);
  font-size: 14px;
  outline: none;
}
.search input::placeholder { color: var(--muted-4); }
.search .count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(21, 25, 26, 0.38);
  white-space: nowrap;
}
.search button { display: none; }

/* --- The issue ------------------------------------------------------------ */

.issue-lead {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border: 1px solid var(--hairline-2);
  margin-bottom: 26px;
  min-height: 340px;
  color: var(--text);
}
.issue-lead:hover { color: var(--text); border-color: var(--desk); }
.issue-lead img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
.issue-lead .cell-thumb-empty { min-height: 340px; }
.issue-lead-body {
  padding: 34px 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.issue-lead-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--headline-2);
}
.issue-lead-dek { font-size: 15px; line-height: 1.65; color: rgba(21, 25, 26, 0.68); max-width: 46ch; }
.issue-lead-meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.issue-lead-meta .go { color: var(--accent); }

.editors-note {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted-2);
  max-width: 60ch;
  margin-bottom: 30px;
}
.editors-note p + p { margin-top: 1em; }

/* --- The article ---------------------------------------------------------- */

.article { max-width: 900px; margin: 0 auto; padding: 0 var(--pad); }

.article-head { padding: 52px 0 34px; border-bottom: 1px solid var(--hairline); }
.article-head .kicker { margin-bottom: 22px; }
.article-head h1 {
  max-width: 22ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--headline-2);
  margin-bottom: 20px;
}
.article-head .standfirst { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.48; margin-bottom: 28px; }

.byline {
  display: flex;
  align-items: baseline;
  gap: 8px 28px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.byline a { color: rgba(21, 25, 26, 0.75); }
.byline a:hover { color: var(--accent); }
.byline a.go { color: var(--accent); }

.cover { margin: 34px 0 42px; }
.cover img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border: 1px solid var(--hairline-2); }
.cover-credit {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(21, 25, 26, 0.38);
}

.aside-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(21, 25, 26, 0.46);
}
.aside-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-2);
  border-bottom: 1px solid rgba(21, 25, 26, 0.15);
  padding-bottom: 7px;
}
.aside-row .src { color: rgba(21, 25, 26, 0.38); text-align: right; }
.prose-reasoning { margin-top: -16px; }
.prose-references { margin-top: 8px; }
.prose-references > .references:first-child { margin-top: 0; }
.sources { margin-top: 44px; border: 1px solid var(--hairline-2); padding: 18px 18px 16px; }
.sources-list { display: grid; gap: 9px; margin-top: 12px; }

.authors { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline); display: grid; gap: 18px; }
.author-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}
.author-row img, .author-row-empty {
  width: 56px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border: 1px solid var(--hairline-2);
  background: var(--ground-2);
}
.author-row-text { display: flex; flex-direction: column; gap: 4px; }
.author-row-name { font-size: 15.5px; color: var(--headline); }
.author-row-name:hover { color: var(--accent); }
.author-row-role { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-3); }
.author-row-links {
  display: flex;
  gap: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.author-row-links a { color: var(--muted-3); }
.author-row-links a:hover { color: var(--accent); }

/* The body of a piece. Everything it can contain is listed in
   newsroom/sanitize.py; this styles exactly that vocabulary. */
.prose {
  font-size: 18px;
  line-height: 1.72;
  color: rgba(21, 25, 26, 0.82);
  padding-top: 4px;
}
.prose > * + * { margin-top: 24px; }
.prose h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--headline);
  margin-top: 40px;
}
.prose h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: var(--headline);
  margin-top: 32px;
}
.prose h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-top: 32px; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose a { color: var(--accent); border-bottom: 1px solid var(--accent-dim); }
.prose a:hover { border-bottom-color: var(--accent); }
.prose strong, .prose b { font-weight: 600; color: var(--headline); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.5em; }
.prose hr { border: 0; border-top: 1px solid var(--hairline); margin: 40px 0; }
.prose code { font-family: var(--mono); font-size: 0.85em; }

.prose blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--desk);
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.42;
  font-weight: 300;
  color: var(--headline);
}
.prose blockquote p + p { margin-top: 0.6em; }

.prose figure { margin: 36px 0; }
.prose figure img { width: 100%; border: 1px solid var(--hairline); }
.prose figcaption, .prose .figure-caption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--muted-3);
}
.prose figure > p + p { margin-top: 0; }
.prose .figure-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}

.prose .table-wrap { margin: 32px 0; overflow-x: auto; border-top: 1px solid var(--hairline-3); }
.prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
.prose th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--muted-2);
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--hairline-3);
  vertical-align: bottom;
}
.prose td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}

.prose .references {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-3);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted-3);
}
.prose .references h2 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(21, 25, 26, 0.46);
  margin: 0 0 12px;
}
.prose .references ul { padding-left: 1.1em; }
.prose .references li { margin-bottom: 0.45em; word-break: break-word; }
.prose .references a { border-bottom: 0; color: var(--muted-2); }
.prose .references a:hover { color: var(--accent); }

/* --- The claim ------------------------------------------------------------ */

.claim {
  border: 1px solid var(--accent-dim);
  margin: 44px 0;
  color: var(--text);
}

.claim-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 15px 24px;
  border-bottom: 1px solid rgba(15, 122, 74, 0.2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}
.claim-head .dim { color: rgba(21, 25, 26, 0.46); }

.claim-body {
  padding: 30px 24px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 44px;
  align-items: start;
}
.claim-left, .claim-right { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.claim-right { gap: 16px; }

.claim-statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: var(--headline-2);
}

.claim-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-4);
  padding: 14px 0;
  border-block: 1px solid var(--hairline);
}
.claim-terms b { font-weight: 500; color: var(--headline); }
.claim-basis { font-size: 14px; line-height: 1.65; color: rgba(21, 25, 26, 0.58); max-width: 56ch; }
.claim-note { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-5); line-height: 1.7; }

.claim-spot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.claim-spot .k { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-4); margin-bottom: 5px; }
.claim-spot .v { font-family: var(--mono); font-size: 30px; line-height: 1; color: var(--headline-2); }
.claim-move { font-family: var(--mono); font-size: 13px; }
.is-up { color: var(--accent); }
.is-down { color: var(--down); }
.is-flat { color: var(--muted-3); }

.chart { display: block; width: 100%; height: 140px; }
.chart .series { fill: none; stroke: var(--desk); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart .fill { fill: var(--desk); fill-opacity: 0.12; }
.chart .rule { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .rule-target { stroke: rgba(15, 122, 74, 0.55); stroke-dasharray: 3 4; }
.chart .rule-entry { stroke: rgba(21, 25, 26, 0.26); }
.chart .rule-date { stroke: rgba(21, 25, 26, 0.2); stroke-dasharray: 2 4; }
.chart .last { fill: var(--desk); }
.chart-compact { height: 44px; }
.chart-empty.chart-compact { height: 44px; font-size: 9px; border-block: 0; border-bottom: 1px solid var(--hairline); }
.chart-empty {
  display: grid;
  place-items: center;
  height: 140px;
  border-block: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.chart-axis {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-5);
}

.progress { height: 5px; background: var(--hairline); position: relative; }
.progress span { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.progress span.is-down { background: var(--down); }
.progress span.is-settled { background: rgba(21, 25, 26, 0.43); }
.progress-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.progress-labels .dim { color: var(--muted-5); }

.claim-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-4);
}

.claim-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 13px 24px;
  border-top: 1px solid rgba(15, 122, 74, 0.2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-4);
}

/* --- The record ----------------------------------------------------------- */

.record { display: flex; flex-direction: column; }

.record-head, .record-row {
  display: grid;
  grid-template-columns: 1.6fr 0.65fr 0.65fr 0.7fr 1.1fr 1fr;
  gap: 20px;
  align-items: center;
  padding: 17px 6px;
  border-bottom: 1px solid rgba(21, 25, 26, 0.15);
}
.record-head {
  padding: 0 6px 12px;
  border-bottom-color: rgba(21, 25, 26, 0.22);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(21, 25, 26, 0.38);
}
.record-row { color: var(--text); }
.record-row:hover { background: rgba(15, 122, 74, 0.05); color: var(--text); }
.record-row .kicker { display: flex; font-size: 9.5px; margin-bottom: 6px; }
.record-row .claim-text { font-family: var(--serif); font-size: 17px; line-height: 1.32; color: rgba(15, 19, 18, 0.92); }
.record-row .mono { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); }
.record-row .mono.strong { color: var(--headline); }
.record-row .when { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(21, 25, 26, 0.5); }
.record-row .track { display: flex; flex-direction: column; gap: 7px; }
.record-row .track .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.record-row .track .progress { height: 4px; }
.record-row .now { color: var(--muted-3); }
.record-row .spark { display: block; min-width: 0; }

/* --- People --------------------------------------------------------------- */

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 22px;
}

/* The roster (research/people.html): no page head, the groups straight
   away. A serif title per group; within a division the desks sit side by
   side as columns, each with a mono sub-title in the desk's colour and its
   people as compact rows (_person_row.html). */
.people-page { padding-top: 36px; }
.people-group { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--hairline); }
.people-page > .people-group:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.people-group-title {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--headline);
}
.people-desks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 28px 28px;
}
.people-sub-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--desk, var(--accent));
}
.person-list { display: grid; gap: 12px; align-content: start; }
.person-list-wide { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px 28px; }

.person-row { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.person-row-portrait { display: block; flex: none; width: 54px; line-height: 0; }
.person-row .person-portrait { width: 54px; }
.person-row .silhouette { width: 50%; }
.person-row .person-text { gap: 3px; padding-top: 1px; min-width: 0; }
.person-row .person-name { font-size: 14px; line-height: 1.3; color: var(--headline); }
.person-row .person-name:hover { color: var(--accent); }
.person-row .person-role { font-size: 9.5px; letter-spacing: 0.07em; line-height: 1.45; }
.person-row .person-linkedin { font-size: 9.5px; margin-top: 1px; }

.person { display: flex; flex-direction: column; gap: 8px; }
.person-link { display: flex; flex-direction: column; gap: 12px; color: var(--text); }
.person-link:hover { color: var(--text); }
.person-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--hairline-2);
  background: var(--ground-2);
}
.person-portrait-empty { display: grid; place-items: center; background: transparent; border-color: var(--hairline); }
.silhouette { width: 44%; height: auto; fill: none; stroke: var(--muted-4); stroke-width: 2.5; stroke-linecap: round; }
.author-row-empty { display: grid; place-items: center; }
.author-row-empty .silhouette { width: 60%; }
.is-placeholder { color: var(--muted-4); cursor: default; }
.is-placeholder.btn { border-color: var(--hairline-3); color: var(--muted-3); }
.is-placeholder.btn:hover { background: transparent; color: var(--muted-3); }
p.is-placeholder { color: var(--muted-3); font-style: italic; }
.person-name { font-size: 14.5px; color: var(--headline); }
.person-link:hover .person-name { color: var(--accent); }
.person-role { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-3); line-height: 1.5; }
.person-text { display: flex; flex-direction: column; gap: 4px; }
.person-linkedin {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.person-linkedin:hover { color: var(--accent); }

.author-head {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.author-head .person-portrait { border-color: rgba(21, 25, 26, 0.22); }
.author-body { display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }
.author-body h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--headline-2);
}

.back {
  display: inline-block;
  margin-bottom: 30px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(21, 25, 26, 0.46);
}
.back:hover { color: var(--accent); }

.subhead {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 46px 0 24px;
}
.subhead h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--headline-2);
}
.subhead .count { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-4); }

/* --- Footer --------------------------------------------------------------- */

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 22px var(--pad) 30px;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.foot-links { display: flex; gap: 10px 22px; flex-wrap: wrap; }
.foot a { color: var(--muted-4); }
.foot a:hover { color: var(--accent); }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 64rem) {
  .claim-body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 52rem) {
  :root { --pad: 20px; }
  .section { padding: 52px var(--pad); gap: 22px; }
  .section-label { flex-basis: 100%; }
  .hero { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; }
  /* The globe is about twice as wide as it is tall; the box matches it. */
  .hero .map { position: relative; height: 56vw; min-height: 0; }
  .hero-band { position: static; width: auto; padding: 20px var(--pad) 24px; gap: 20px; }
  .hero-card { display: none; }
  .hero-legend { display: none; }
  .hero-hint { display: none; }
  .issue-lead { grid-template-columns: minmax(0, 1fr); }
  .issue-lead img, .issue-lead .cell-thumb-empty { min-height: 0; aspect-ratio: 16 / 10; }
  .author-head { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .author-head .person-portrait { max-width: 220px; }
  .record-head { display: none; }
  .record-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 0; }
  .record-row .hide-narrow { display: none; }
  .record-row .spark { display: none; }
  .author-row { grid-template-columns: 56px minmax(0, 1fr); }
  .author-row-links { grid-column: 2; }
  .search { max-width: none; }
  .wordmark { padding: 12px 0 6px; }
  .wordmark .logo { height: 38px; }
}

@media (max-width: 34rem) {
  .wordmark .logo { height: 34px; }
  .nav-links { gap: 10px 16px; font-size: 10.5px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .article-head { padding-top: 36px; }
  .page { padding-top: 36px; }
  .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .claim-body { padding: 24px 18px; }
  .claim-head, .claim-foot { padding-inline: 18px; }
}