/* CM Bulletin — institutional broadsheet grammar, venture-market pace.

   The reference points are the wire services and the financial dailies, but
   deliberately quieter than any of them: one accent colour, one display face,
   hairline rules doing the work that borders and boxes do elsewhere, and
   white space instead of density. Nothing on the page competes with a
   headline. */

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

/* The text family sets everything the publication says — headlines, deks, body
   and labels. See brand.py, which subsets each weight. Self hosted: no external
   request, so the page renders the same offline and nothing about the reader
   leaks to a font CDN.

   font-display: swap means the page paints in the fallback serif first rather
   than holding text invisible while four weights load. */
@font-face { font-family: "CMB"; src: url("fonts/house-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CMB"; src: url("fonts/house-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "CMB"; src: url("fonts/house-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "CMB"; src: url("fonts/house-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* The display face sets the name of the publication and nothing else, so it is
   subset to that and is a few kilobytes. font-display: block here, not swap:
   the nameplate is one short line at the top of the page, and seeing it repaint
   from the fallback into Playfair is more conspicuous than a beat of nothing. */
@font-face { font-family: "CMB Display"; src: url("fonts/display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "CMB Display"; src: url("fonts/display-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }

:root {
  --paper: #F6F1E7;
  --ink: #14343B;
  --ink-soft: #5F7073;
  --rule: #DFD5C3;
  --accent: #0F6E78;
  /* Two families with one job each: --display sets the name of the publication,
     --serif and --sans set everything the publication says. */
  --display: "CMB Display", "CMB", Georgia, "Times New Roman", serif;
  --serif: "CMB", Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans: "CMB", Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --shadow: 0 1px 2px rgba(18, 23, 31, .06);
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }

/* One label style, used for every piece of furniture on the page: the nav, the
   bylines, the section heads, the kickers. Consistency here is most of what
   separates a clean page from a busy one. */
.label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

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

.masthead { padding-top: 26px; border-bottom: 2px solid var(--ink); }
.masthead__rule { height: 2px; background: var(--ink); }
.masthead__wordmark {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 18px 0 30px;
}
/* Spaced caps at the display face's bold weight, matching the footer lockup.
   Conrad moved it back here in August 2026 after a spell in mixed-case regular:
   the name is now set the same way at the top of the page and at the bottom,
   which is the point — one mark, stated twice, rather than two settings of it.

   Sized in vw so it holds the measure at every width, and allowed to break to
   two lines on a phone: nowrap here pushed the page wider than the viewport.
   The ceiling is lower than the mixed-case setting carried because caps plus
   .06em tracking make a materially wider line out of the same 24 characters. */
.masthead__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(19px, 4.3vw, 56px);
  letter-spacing: .06em;
  /* Caps carry no descenders, so the line box is tighter than the mixed-case
     setting needed and the leading comes in to match. */
  line-height: 1.16;
  margin: 0;
  text-wrap: balance;
}
/* Fallback only: if the brand folder has not been built there is no webfont,
   and the raster wordmark stands in. White artwork on transparency, so one
   file serves both themes — brightness(0) drives it to black on the cream
   ground, and is exact in a way invert() would not be. */
.masthead__logo { width: min(620px, 88%); margin: 0 auto; filter: brightness(0); }

/* Utility links only, held to the top right so nothing sits between the rule
   and the name. The date, the issue number and the ticker band were all
   removed in August 2026 — every one of them was furniture the reader did not
   ask for, competing with the one thing the top of the page is for. */
.masthead__nav {
  padding: 10px 0 0;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.masthead__nav a { text-decoration: none; }
.masthead__nav a:hover, .masthead__nav a[aria-current="page"] { color: var(--accent); }

/* ---------- section band ---------- */

/* Departments, not navigation. The band sits between the heavy rule that
   closes the masthead and a hairline of its own — the furniture a broadsheet
   puts above its section fronts — so it reads as the foot of the nameplate
   rather than as an interface bolted underneath it.

   No chips, no boxes, no fill, and no colour per section. The current section
   is the accent plus a 2px underline and nothing else. Every label is the same
   .label style used for every other piece of furniture on the page, which is
   most of what stops six items reading as a menu. */
.sections { border-bottom: 1px solid var(--rule); }
.sections__list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  padding: 13px 2px 11px;
  /* `safe center` rather than `center`: a centred flex row that overflows puts
     its leading items past the scroll origin, where they cannot be reached. The
     safe keyword falls back to flex-start exactly when that would happen, and a
     browser that does not know the keyword drops the declaration and starts at
     flex-start anyway — the behaviour we want in that case too. */
  justify-content: safe center;
  /* Six labels sit on one line on a desktop and scroll on a phone. A hamburger
     is the conventional answer and the wrong one here: it is interface on a
     page that deliberately has none, and it hides the section names that are
     the whole reason the band exists. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sections__list::-webkit-scrollbar { display: none; }
.sections__list a {
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.sections__list a:hover { color: var(--accent); }
/* The issue is a different kind of destination from a department, so it is set
   apart by a rule rather than by a second type style — one label style still
   does the whole band. */
.sections__rule { width: 1px; height: 15px; background: var(--rule); flex: none; }
/* The underline sits on the hairline rather than above it, so the current
   section reads as a tab cut into the rule instead of a button. */
.sections__list a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- section fronts ---------- */

/* No standfirst. The section name over the board says what the front is, and a
   paragraph explaining that Markets contains markets was furniture. */
.front-head { padding: 38px 0 0; }
.front-head h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 4.2vw, 38px); line-height: 1.12; letter-spacing: -.015em; margin: 0; }

/* Board left, the section's own reporting right. They answer different
   questions and a reader arrives wanting one or the other; stacked, the news
   sat under forty rows of numbers and was never reached.

   Stacks below 940px with the board first — on a phone the reference is the
   thing worth having above the fold, and the news reads perfectly well beneath
   it. The rule between the columns is a border on the fixed-width left column
   rather than a pseudo-element in the gap: the front page needs the pseudo
   because its columns are fractional and a border would make them ragged, but
   this column is a fixed 380px and cannot go ragged. */
.front-split { display: grid; gap: 30px; align-items: start; padding-top: 6px; }
@media (min-width: 940px) {
  .front-split { grid-template-columns: 380px minmax(0, 1fr); gap: 46px; }
  .front-board { border-right: 1px solid var(--rule); padding-right: 26px; }
}

/* Tighter than the full-width board was. The sparkline goes first: least
   precise of the four columns, most expensive in width — the same trade the
   board already makes on a phone. */
.front-board .board { padding-top: 0; }
.front-board .board__spark { display: none; }
.front-board .board__row { grid-template-columns: 1fr 72px 64px; gap: 10px; padding: 6px 0; }
.front-board .board__name { font-size: 13.5px; }
.front-board .board__last, .front-board .board__pct { font-size: 13px; }
.front-board .board__group { padding: 17px 0 6px; }

/* In a column this width the 132px date gutter costs more than it returns, so
   the date sits above the headline as a kicker instead. */
.front-news .archive { padding: 0; }
.front-news .archive__row { grid-template-columns: 1fr; gap: 3px; padding: 16px 0; }
.front-news .archive__date { padding-top: 0; }
.front-news .empty { padding: 20px 0; color: var(--ink-soft); }

/* ---------- the wire ---------- */

/* Third-party industry news. Every row links out and carries the publisher's
   name above the headline, because a reader should know whose reporting they
   are about to open before they open it — and because nothing here is ours
   except the one-line summary. The site never hosts the article itself. */
.wire__note { color: var(--ink-soft); font-weight: 500; letter-spacing: .08em; }
.wire__row { padding: 15px 0; border-top: 1px solid var(--rule); }
.wire__row:first-of-type { border-top: 0; padding-top: 17px; }
.wire__meta { color: var(--accent); margin-bottom: 5px; }
.wire__dot { margin: 0 7px; color: var(--rule); }
.wire__title { font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.32; margin: 0; }
.wire__title a { text-decoration: none; }
/* The outbound arrow is the affordance. It says "this leaves the site" without
   a line of explanatory text, and it is the honest signal for a link to
   somebody else's reporting. */
.wire__title a::after { content: " \2197"; color: var(--accent); font-size: .82em; }
.wire__title a:hover { color: var(--accent); }
.wire__dek { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 5px 0 0; }

/* Full measure — News (wire) and Financings (tracker), neither of which has a
   board to sit beside. */
.front-wide { padding-top: 14px; }

/* News runs its wire in two columns. One column of eight stories at this
   measure is a long scroll of short items; two fills the page the way a
   section front should. The head spans both, so the rule under it is
   continuous rather than broken in the middle. */
@media (min-width: 940px) {
  .front-wide--two .wire { display: grid; grid-template-columns: 1fr 1fr; column-gap: 46px; }
  .front-wide--two .wire > .board__head { grid-column: 1 / -1; }
  /* Grid fills row-wise, so items one and two are both at the top of the page
     and both need the rule suppressed — :first-of-type only catches one. */
  .front-wide--two .wire__row:nth-of-type(2) { border-top: 0; padding-top: 17px; }
}

/* ---------- placement tracker ---------- */

/* Financings carries indexes, not a wire. Three lines per row — who, on what
   terms, and the dates that matter — because a financing is not a headline and
   compressing it to one would lose the part a reader came for. */
.track { padding-bottom: 30px; }
.track + .track { padding-top: 12px; }
.track__row { padding: 15px 0; border-top: 1px solid var(--rule); }
.track__row:first-of-type { border-top: 0; padding-top: 17px; }
.track__name { font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.3; }
.track__tick { margin-left: 10px; color: var(--accent); font-weight: 600; }
.track__terms { font-size: 14.5px; color: var(--ink-soft); margin-top: 3px; }
.track__foot { margin-top: 6px; color: var(--ink-soft); }

/* Three columns: what was announced, what comes free of its hold, what comes
   due. They are three questions about the same dataset and a reader arrives
   with one of them. Two columns at the tablet width, one on a phone — three
   equal columns below about 1000px leaves each too narrow for a company name
   and a ticker on one line. */
/* The two calendars, side by side under the sheet. */
.front-halves { display: grid; gap: 30px 46px; align-items: start; padding-top: 34px; }
@media (min-width: 900px) {
  .front-halves { grid-template-columns: 1fr 1fr; }
  .front-halves > div:first-child { border-right: 1px solid var(--rule); padding-right: 44px; }
  .front-halves .track__row { max-width: none; }
}

/* ---------- the deal sheet ---------- */

/* Column set taken from the daily financings summary Leede circulates, because
   it is the shape the market already reads: total, price, whether the unit
   carries a half warrant, a full one or none, the instrument, and who brokered
   it. Tabular figures and right-aligned money, so a column of sizes can be
   compared down rather than read across. */
.sheet { padding-bottom: 6px; }
/* The one table on the site wide enough to need it. Scrolls in its own box so
   the page itself never scrolls sideways. */
.sheet__scroll { overflow-x: auto; }
.sheet__table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.sheet__table th { text-align: left; padding: 13px 14px 9px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.sheet__table td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.sheet__table tr:last-child td { border-bottom: 0; }
.sheet__co { font-family: var(--serif); font-weight: 700; font-size: 15.5px; }
.sheet__tick { color: var(--accent); font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.sheet__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.sheet__num { text-align: right; }
/* Where a board's figures came from, and — more to the point — what they do not
   say. The CSE block needs this: a share count that moved is not a placement,
   and the sentence under the table is what stops the table implying it was. */
.sheet__note { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin: 12px 0 0; max-width: 62ch; }
/* The Financings front now stacks three of these — the exchange record, the CSE
   share moves, then the wire-sourced sheet — so every adjacency needs the gap,
   not just sheet-to-sheet. Without the .track+.sheet pair the third block rides
   up against the second on any day the CSE block is non-empty. */
.sheet + .sheet, .sheet + .track, .track + .sheet { padding-top: 34px; }

/* The Bulletin's own entries, below the split and clearly separated from it. */
.front-own { padding-top: 40px; }

/* ---------- wire item page ---------- */

/* A signpost, not a copy. The page carries the headline, our sentence, who
   published it and when — then hands the reader to the publisher. The panel is
   the only boxed element on the site, and it is boxed on purpose: it is the
   moment the reader leaves, and it should not be missable. */
.stub { max-width: 660px; margin: 0 auto; padding: 44px 0 10px; }
.stub__kicker { margin-bottom: 14px; color: var(--accent); }
.stub__kicker a { text-decoration: none; }
.stub__kicker a:hover { text-decoration: underline; }
.stub__title { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 4vw, 36px); line-height: 1.16; letter-spacing: -.014em; margin: 0 0 14px; }
.stub__meta { color: var(--ink-soft); margin-bottom: 24px; }
.stub__dek { font-family: var(--serif); font-size: 19px; line-height: 1.62; margin: 0 0 30px; }
.stub__out { border: 1px solid var(--rule); padding: 24px 26px 20px; }
.stub__cta {
  display: inline-block;
  font-weight: 700;
  font-size: 17px;
  color: var(--accent);
  text-decoration: none;
}
.stub__cta:hover { text-decoration: underline; }
.stub__note { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 14px 0 0; }

/* ---------- section boards ---------- */

/* The same grammar as the rail — name, sparkline, last, change — but given the
   measure it never had in a sidebar. One row style repeated the whole way down,
   so a board of forty rows is a long table rather than a new layout each time
   the reader scrolls. Numbers are tabular and right-aligned; the eye compares a
   column of changes far faster than it reads them. */
.board { padding: 26px 0 4px; }
.board__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ink);
}
.board__group { padding: 21px 0 7px; color: var(--accent); }
.board__row {
  display: grid;
  grid-template-columns: 1fr auto 92px 84px;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  border-top: 1px solid var(--rule);
}
.board__row:first-of-type { border-top: 0; }
.board__name { font-size: 15px; }
.board__spark { line-height: 0; }
/* Lining figures in a fixed column: a change of 1.10% and one of 11.00% have to
   sit under each other or the column stops being scannable. */
.board__last, .board__pct { text-align: right; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.board__pct { font-weight: 600; }
/* The sparkline is the first thing to go on a narrow screen. It is the least
   precise of the four columns and the most expensive in width. */
@media (max-width: 620px) {
  .board__row { grid-template-columns: 1fr 78px 72px; }
  .board__spark { display: none; }
  .board__name { font-size: 14px; }
}

/* Sends the reader from the front-page rail to the full Markets board. */
.rail__more { display: inline-block; margin-top: 18px; color: var(--accent); text-decoration: none; }
.rail__more:hover { text-decoration: underline; }

/* Still used for the ticker on an article's meta rail. */
.tickerband__item { color: var(--accent); font-weight: 600; letter-spacing: .08em; font-size: 11.5px; }

/* ---------- shared article furniture ---------- */

/* Kickers are plain letterspaced type rather than bordered chips. Chips read
   as interface; a newspaper section label reads as editorial. */
.tags { margin: 0 0 12px; color: var(--accent); }
.tags span + span::before { content: " · "; color: var(--rule); }

.byline { margin: 0; }

a.stretch { text-decoration: none; }
a.stretch:hover { color: var(--accent); }

/* ---------- lead story ---------- */

.lead { display: grid; gap: 30px; padding: 40px 0 42px; }
@media (min-width: 860px) { .lead { grid-template-columns: 1.22fr 1fr; align-items: start; gap: 44px; } }
.lead__figure { margin: 0; }
.lead__figure img { aspect-ratio: 1200 / 630; object-fit: cover; }
.lead__caption { font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 12px; }
.lead__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 3.9vw, 42px);
  line-height: 1.1;
  letter-spacing: -.012em;
  margin: 0 0 16px;
}
.lead__dek { font-family: var(--serif); font-size: 19.5px; line-height: 1.52; color: var(--ink-soft); margin: 0 0 20px; }

/* ---------- front page: issue index + markets rail ---------- */

/* The split is the front page. Editorial holds the wider column; the rail is
   a fixed-width instrument panel beside it, separated by a hairline rather
   than a box. Below 900px the rail drops under the issue rather than
   squeezing — a market table at 300px wide is unreadable either way. */
.front { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }
@media (min-width: 900px) { .front { grid-template-columns: 1.55fr 1fr; gap: 40px; } }

.issue { min-width: 0; }
.issue__head { border-bottom: 1px solid var(--rule); padding-bottom: 9px; margin: 26px 0 0; }

.item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.item__no { color: var(--accent); font-weight: 600; font-size: 13px; padding-top: 5px; font-variant-numeric: tabular-nums; }
.item__kicker { color: var(--accent); margin-bottom: 6px; }
.item__title { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 7px; }
.item__dek { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 8px; }

/* ---------- markets rail ---------- */

.rail { min-width: 0; }
@media (min-width: 900px) { .rail { border-left: 1px solid var(--rule); padding-left: 26px; } }
.rail__head { border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin: 26px 0 0; display: flex; flex-direction: column; gap: 3px; }
.rail__stamp { font-size: 10px; letter-spacing: .08em; }
.rail__group { font-size: 9.5px; color: var(--accent); margin: 15px 0 5px; }
.rail__row {
  display: grid;
  grid-template-columns: 1fr 62px auto auto;
  gap: 9px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
}
.rail__name { font-size: 12.5px; }
.rail__spark { display: block; line-height: 0; }
/* Tabular figures keep the decimal points in a column; proportional numerals
   would make the levels look ragged even when they are aligned. */
.rail__last, .rail__pct { font-variant-numeric: tabular-nums; text-align: right; }
.rail__last { font-size: 12.5px; }
.rail__pct { font-size: 11.5px; min-width: 58px; }
.rail__pct.up { color: #0F6E78; }
.rail__pct.dn { color: #A4442E; }

/* ---------- section heads ---------- */

.section-head {
  border-top: 2px solid var(--ink);
  padding-top: 9px;
  margin: 12px 0 26px;
}

/* ---------- story grid ---------- */

.grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.card__figure { margin: 0 0 15px; }
.card__figure img { aspect-ratio: 1200 / 630; object-fit: cover; }
.card__title { font-family: var(--serif); font-weight: 700; font-size: 20.5px; line-height: 1.24; letter-spacing: -.005em; margin: 0 0 9px; }
.card__dek { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 11px; }

/* Hairline gutters instead of empty space: the column rule is the oldest
   device in newspaper layout for separating stories without boxing them.
   The rule is drawn in the gap by a pseudo-element rather than as a border on
   the card, so every column keeps exactly the same content width — otherwise
   the first and last cards are wider than the middle one and their images
   come out a different height, which shows immediately as a ragged row. */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); column-gap: 44px; row-gap: 40px; }
  .card { position: relative; }
  .card::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 2px;
    bottom: 2px;
    border-left: 1px solid var(--rule);
  }
  .card:nth-child(2n + 1)::before { display: none; }
}
@media (min-width: 980px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .card:nth-child(2n + 1)::before { display: block; }
  .card:nth-child(3n + 1)::before { display: none; }
}

/* ---------- the rest of the issue, as a list ---------- */

.digest { margin: 46px 0 0; }
.digest__row { display: grid; gap: 4px 28px; padding: 17px 0; border-top: 1px solid var(--rule); }
.digest__row:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 720px) { .digest__row { grid-template-columns: 132px 1fr; } }
.digest__meta { padding-top: 3px; }
.digest__title { font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.3; margin: 0 0 4px; }
.digest__dek { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* ---------- article page ---------- */

.article { max-width: 700px; margin: 0 auto; padding: 42px 0 8px; }
.article__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(31px, 5vw, 46px);
  line-height: 1.09;
  letter-spacing: -.018em;
  margin: 0 0 18px;
}
.article__dek {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.article__meta { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 10px 0; display: flex; gap: 8px 18px; flex-wrap: wrap; }
.article__figure { margin: 32px 0 30px; }
.article__caption { font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 12px; }
.article__caption .label { font-style: normal; display: block; margin-top: 6px; }
.article__body { font-family: var(--serif); font-size: 19.5px; line-height: 1.7; }
.article__body p { margin: 0 0 24px; }
/* A lede paragraph rather than a drop cap. The drop cap belonged to a feature
   page; on a 200-word disclosure item it was decoration. */
.article__body p:first-of-type { font-size: 21px; line-height: 1.6; }

.note { border-top: 1px solid var(--accent); padding: 16px 0 0; margin: 34px 0; }
.note h3 { margin: 0 0 10px; color: var(--accent); }
.note ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.note li { margin-bottom: 7px; }

.sources { border-top: 1px solid var(--rule); margin-top: 36px; padding-top: 18px; }
.sources h3 { margin: 0 0 12px; }
.sources ul { margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.sources li { margin-bottom: 8px; word-break: break-word; }
.sources a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); }
.sources a:hover { border-bottom-color: var(--accent); }

.alsoread { border-top: 2px solid var(--ink); margin-top: 46px; padding-top: 9px; }
.alsoread h3 { margin: 0 0 18px; }
.alsoread__list { display: grid; gap: 18px; }
@media (min-width: 720px) { .alsoread__list { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.alsoread__title { font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.28; margin: 6px 0 0; }

.backlink { display: inline-block; margin: 34px 0 0; color: var(--accent); text-decoration: none; }

/* ---------- archive ---------- */

.archive { max-width: 820px; margin: 0 auto; padding: 38px 0; }
.archive__row { display: grid; gap: 4px 28px; padding: 19px 0; border-top: 1px solid var(--rule); }
.archive__row:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 700px) { .archive__row { grid-template-columns: 132px 1fr; } }
.archive__date { padding-top: 4px; }
/* One block per past issue. The date is stated once, at the head of its issue,
   rather than repeated down a gutter beside every entry in it — the grouping is
   what carries the date now, and the rule under it is what makes a block read
   as an issue rather than as a run of unrelated rows. */
.archive__issue { margin: 0 0 40px; }
.archive__issue .archive__row { grid-template-columns: 1fr; }
.archive__issue-date {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 9px; border-bottom: 2px solid var(--ink); margin: 0;
}
.archive__count { color: var(--ink-soft); font-weight: 400; }
.archive__title { font-family: var(--serif); font-weight: 700; font-size: 19.5px; line-height: 1.3; margin: 0 0 4px; }
.archive__dek { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

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

.prose { max-width: 660px; margin: 0 auto; padding: 42px 0; }
.prose h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 4.4vw, 40px); line-height: 1.12; letter-spacing: -.015em; margin: 0 0 22px; }
.prose h2 { font-family: var(--serif); font-weight: 700; font-size: 21px; margin: 36px 0 10px; }
.prose p, .prose li { font-family: var(--serif); font-size: 18px; line-height: 1.7; }
.prose a { color: var(--accent); }

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

.footer { border-top: 2px solid var(--ink); margin-top: 64px; padding: 28px 0 64px; display: grid; gap: 24px; }
@media (min-width: 760px) { .footer { grid-template-columns: 1.6fr 1fr; gap: 48px; } }
.footer__brand { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .06em; }
.footer__meta { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin: 12px 0 0; max-width: 64ch; }
.footer__links { display: grid; gap: 9px; align-content: start; }
.footer__links a { text-decoration: none; }
.footer__links a:hover { color: var(--accent); }
@media (min-width: 760px) { .footer__links { justify-items: end; } }


.empty { text-align: center; padding: 90px 0; color: var(--ink-soft); font-family: var(--serif); font-style: italic; }