/* Press (client, 2026-08-17) — an archive, set as a ledger.

   103 pieces across 49 publications, so the only thing that matters here is that a
   reader can scan four years of it quickly and land on the one they want. Rows with a
   hairline between them, year headings as rules, no cards: a card wall of 103 items is
   unreadable and a card adds nothing to a headline and a source.

   Same grammar as /happenings on purpose — rule-headings, stretched row links, tracked
   caps for meta — so the two archive-shaped pages on this site read as one system. */

.section--tight-top { padding-top: clamp(14px, 1.9vw, 22px); }

/* The bottom margin here was the lede's; it stays on the h now the lede is gone, so
   the first year heading does not collide with the title. */
.press__h {
  margin: 0 0 clamp(24px, 3.4vw, 38px);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  line-height: 1.08;
}

/* Year headings carry a hairline to the container edge, the device the Happenings
   sections use. More space above than below, so a year binds to the rows under it. */
.press__year {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  margin: clamp(26px, 3.4vw, 42px) 0 clamp(4px, 0.8vw, 8px);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}
.press__year:first-of-type { margin-top: 0; }
.press__year::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

.press__list { list-style: none; margin: 0; padding: 0; }
.press__row {
  position: relative;
  padding: clamp(11px, 1.4vw, 15px) 0;
  border-bottom: 1px solid var(--line);
}

/* The whole row is the target, via the stretched-link pattern the Happenings rows use.
   The anchor stays on the headline so its accessible name is the headline, and each
   article is one tab stop rather than three.

   AND IT IS THE ONE THING ON THIS PAGE SET IN THE BODY SANS, DELIBERATELY.
   Audrey is the display face everywhere else, but base.css only ever sets it in TRACKED
   CAPS for a reason it states itself: its lowercase reads thin and awkward. A press
   headline can be neither. It cannot be uppercased — these are other publishers'
   headlines quoted verbatim, and 103 rows of shouting is slower to read, not faster —
   and it cannot stay in mixed-case Audrey, which is exactly the register the house rule
   warns off (Renato, 2026-08-20: "difficult to read in this font format"). Montserrat at
   500 is the site's reading face doing the job it is for. /happenings solves the same
   collision the other way, by uppercasing its own short event titles; that option is not
   available here. */
.press__link {
  display: block;
  max-width: 68ch;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.6vw, 1.06rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.press__link::after { content: ""; position: absolute; inset: 0; }
.press__row:hover .press__link { color: var(--accent); }
/* Guarded inside :has() so a browser without support keeps the headline's own ring
   rather than losing the focus indicator entirely. */
.press__row:has(.press__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 5px; }
.press__row:has(.press__link:focus-visible) .press__link { outline: none; }

.press__meta {
  margin: 5px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.press__outlet { color: var(--ink-2); }
.press__byline::before { content: "by "; }

/* THE ERA LABEL IS NOT DECORATION. Amelia's opened in 2023, so a 2021 piece is coverage
   of Stacey's catering company and the page has to say so. Set in the accent rather than
   the muted grey precisely so it is not skimmed past. */
.press__era {
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.68rem;
  align-self: center;
}

@media (prefers-reduced-motion: reduce) {
  .press__link { transition: none; }
}