/* ffs.one — surreal fake-newspaper front page.
   Newsprint palette, heavy serif headlines, deliberately wonky layout.
   The chaos comes from rotation, clashing sizes, and misplaced bits — but
   the REAL cards and the noticeboard stay legible so the portfolio works. */

:root {
  --ink: #14110d;
  --paper: #f4efe3;
  --paper-2: #ece2cd;
  --paper-3: #e3d8be;
  --red: #bf261d;
  --blue: #223f96;
  --rule: #14110d;
  --hair: #d8cbb0;   /* warm light hairline — the Guardian-style rules between stories/columns */
  --serif: Georgia, "Times New Roman", Times, serif;
  --condensed: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.45;
  padding: 0 clamp(0.75rem, 3vw, 2.5rem) 3rem;
}

/* ---------- Masthead ---------- */

.masthead {
  border-bottom: 5px double var(--rule);
  padding: 1rem 0 0.75rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.masthead__flags {
  display: grid;
  grid-template-columns: 1fr;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
}
.masthead__date { text-align: center; white-space: nowrap; }

.masthead__network {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  border-top: 1px solid var(--hair);
  margin-top: 0.5rem;
  padding-top: 0.4rem;
}
.network__kicker {
  color: var(--red);
  font-weight: 800;
}
.network__badge {
  font-weight: 800;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 0.15rem 0.45rem;
}
.network__badge--soon {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  opacity: 0.65;
  cursor: default;
}

/* On a phone the "Also in the group:" label is what breaks this strip. Measured:
   at 560px and above the label and all three badges sit on one line (31px tall);
   below it the label alone is enough to push the badges onto a second row (61px),
   and because the label leads the group, what is centred is label-plus-badges —
   so the badges themselves sit visibly off to the right.
   Dropping the label on mobile fixes both at once: one row again, and the badges
   are now the whole content, so `justify-content: center` centres what you
   actually see. The badges still say what they are. */
@media (max-width: 560px) {
  .network__kicker { display: none; }
  .masthead__network { justify-content: center; text-align: center; }
}

.masthead__title {
  margin: 0.2rem 0;
  font-size: clamp(3rem, 13vw, 8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.9;
}
.masthead__dot { color: var(--red); }

.masthead__strap {
  margin: 0.4rem 0 0;
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(0.6rem, 1.6vw, 0.85rem);
  border-top: 1px solid var(--rule);
  padding-top: 0.4rem;
}

/* ---------- Sideways breaking banner ---------- */

.breaking {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  padding: 0.4rem 0.9rem;
  margin: 0.75rem 0 1.5rem;
  font-family: var(--condensed);
}
.breaking__label {
  background: var(--red);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 0.05rem 0.5rem;
  text-transform: uppercase;
}
.breaking__text { font-style: italic; }

/* ---------- Layout ---------- */

.layout {
  display: grid;
  /* REAL noticeboard hidden for now — feed spans full width.
     To restore, revert to: 1fr minmax(220px, 300px) and remove `hidden` on the aside. */
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}

/* The non-nonsense: real projects as a Guardian-style feature strip, sitting in
   the space above the News line. Ruled off with hairline dividers between items. */
.realrow {
  border-top: 2px solid var(--blue);
  border-bottom: 1px solid var(--hair);
  padding: 0.55rem 0 0.95rem;
  margin-bottom: 0.4rem;
}
.realrow__label {
  margin: 0 0 0.55rem;
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--blue);
}
.realrow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}
.realrow__item {
  padding-left: 1.25rem;
  border-left: 1px solid var(--hair);
}
.realrow__item:first-child { border-left: 0; padding-left: 0; }
.realrow__kicker {
  display: block;
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 0.2rem;
}
.realrow__name {
  margin: 0 0 0.25rem;
  font-weight: 900;
  font-size: 1.12rem;
  line-height: 1.08;
}
.realrow__name-link { color: inherit; text-decoration: none; }
.realrow__name-link:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; }
.realrow__blurb { margin: 0 0 0.35rem; font-size: 0.85rem; line-height: 1.4; }
.realrow__meta {
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--blue);
}
@media (max-width: 640px) {
  .realrow__item { padding-left: 0; border-left: 0; }
}

/* The ruled feed, separated from the real-projects row above by a rule line. */
.frontband {
  border-top: 2px solid var(--ink);
  padding-top: 0.9rem;
}

/* ---------- Feed (chaotic newspaper columns) ---------- */

/* Guardian-style ruled grid: the lead spans the full width, then the remaining
   stories sit in a real 3-column grid so their rows align. Each story carries a
   top rule for the horizontal dividers; a column gap stands in for the verticals. */
.feed__loading {
  font-style: italic;
  opacity: 0.6;
}
.feed__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;        /* every row = the height of the tallest card */
  column-gap: 2rem;
  row-gap: 1.4rem;
}
/* Vertical hairline dividers between the three columns. */
.feed__grid > .card { padding-left: 1rem; border-left: 1px solid var(--hair); }
.feed__grid > .card:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
@media (max-width: 900px) {
  .feed__grid { grid-template-columns: repeat(2, 1fr); }
  .feed__grid > .card { padding-left: 1rem; border-left: 1px solid var(--hair); }
  .feed__grid > .card:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .feed__grid { grid-template-columns: 1fr; }
  .feed__grid > .card { padding-left: 0; border-left: 0; }
}

.card {
  display: block;
  width: 100%;
  margin: 0 0 1.4rem;
  padding: 0.7rem 0 0;
  border-top: 2px solid var(--ink);
}
/* Grid cards stretch to the row height, so drop the bottom margin. */
.feed__grid > .card { margin-bottom: 0; }
.card--wide { border-top-color: var(--red); }

/* Lead story: spans the full width of the ruled grid, headline/standfirst on the
   left with a big image floated right (the Guardian front-page lead). */
.card--splash {
  border-top: 3px solid var(--red);
  border-bottom: 1px solid var(--hair);
  padding: 0.9rem 0 1.4rem;
  margin-bottom: 1.8rem;
  /* Full-width lead row: story text one side, picture 50% the other. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.card--splash .card__media { width: 100%; margin: 0; }
/* Too narrow for two columns: stack the picture above the text. */
@media (max-width: 760px) {
  .card--splash { grid-template-columns: 1fr; gap: 0.6rem; }
}

.card__kicker {
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 0.25rem;
}
.card__category {
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.6rem;
  border: 1px solid var(--ink);
  padding: 0.05rem 0.35rem;
  display: inline-block;
  margin-bottom: 0.4rem;
}
.card__headline {
  margin: 0.1rem 0 0.5rem;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.01em;
  font-size: 1.35rem;
}
.card--splash .card__headline { font-size: clamp(1.7rem, 3.4vw, 2.45rem); }
.card--splash .card__blurb { font-size: 1.1rem; max-width: 60ch; }
.card__blurb {
  margin: 0.4rem 0 0.5rem;
  font-size: 0.95rem;
}
.card__byline {
  font-style: italic;
  font-size: 0.78rem;
  opacity: 0.75;
}
/* Guardian-style timestamp line (echoes their "2m ago"). */
.card__meta {
  margin: 0.3rem 0 0;
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.66rem;
  opacity: 0.6;
}

/* "photo that isn't here" gag */
.card__photo {
  border: 1px solid var(--ink);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0,0,0,0.06) 8px, rgba(0,0,0,0.06) 9px);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.35);
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.62rem;
  margin: 0.5rem 0;
}
.card__caption {
  font-size: 0.68rem;
  font-style: italic;
  opacity: 0.7;
  margin: -0.25rem 0 0.4rem;
}
.card__sponsor {
  margin-top: 0.6rem;
  border-top: 1px dashed var(--ink);
  padding-top: 0.35rem;
  font-family: var(--condensed);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

/* ---------- REAL project cards (planted in the feed) ---------- */

.card--real {
  border: 2.5px solid var(--red);
  border-top-width: 6px;
  background: #fffdf6;
  padding: 0.9rem 1rem 1rem;
  position: relative;
  overflow: hidden;
}
.card--real .card__kicker { color: var(--blue); }
.card__stamp {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--red);
  color: #fff;
  font-family: var(--condensed);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 0.62rem;
  padding: 0.15rem 0.6rem;
  text-transform: uppercase;
}
.card__realtag {
  display: inline-block;
  border: 2px solid var(--red);
  color: var(--red);
  font-family: var(--condensed);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  margin-bottom: 0.4rem;
}
.card__link {
  display: inline-block;
  margin-top: 0.6rem;
  text-decoration: none;
  font-family: var(--condensed);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: #fff;
  background: var(--red);
  padding: 0.45rem 0.9rem;
  border: 2px solid var(--red);
}
.card__link:hover { background: #a01f18; border-color: #a01f18; }
.card__link--soon {
  background: var(--paper-3);
  color: var(--ink);
  border-color: var(--ink);
  cursor: default;
  opacity: 0.85;
}
.card__link--soon:hover { background: var(--paper-3); border-color: var(--ink); }

/* ---------- Noticeboard (the reliable portfolio spine) ---------- */

.noticeboard {
  position: sticky;
  top: 1rem;
  background: #fff7c2;
  border: 1px solid rgba(0,0,0,0.25);
  padding: 1.25rem 1.1rem 1.1rem;
}
.noticeboard__pin {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
}
.noticeboard__title {
  margin: 0.2rem 0 0.1rem;
  font-weight: 900;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.noticeboard__sub {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-style: italic;
  opacity: 0.7;
}
.noticeboard__list { list-style: none; margin: 0; padding: 0; }
.noticeboard__item {
  border-top: 1px dashed rgba(0,0,0,0.35);
  padding: 0.55rem 0;
}
.noticeboard__item-name {
  font-weight: 800;
  font-size: 0.98rem;
  display: block;
}
.noticeboard__item-blurb {
  font-size: 0.76rem;
  opacity: 0.8;
  margin: 0.1rem 0 0.35rem;
}
.noticeboard__link {
  font-family: var(--condensed);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  text-decoration: none;
  color: #fff;
  background: var(--red);
  padding: 0.2rem 0.5rem;
  border: 1.5px solid var(--ink);
}
.noticeboard__link--soon {
  background: transparent;
  color: var(--ink);
  border-style: dashed;
  opacity: 0.75;
}
.noticeboard__foot {
  margin: 0.85rem 0 0;
  font-family: var(--condensed);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

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

.footer {
  border-top: 5px double var(--rule);
  margin-top: 2.5rem;
  padding-top: 1rem;
  text-align: center;
}
.footer__disclaimer {
  font-size: 0.82rem;
  max-width: 46ch;
  margin: 0 auto 0.5rem;
}
.footer__real { color: var(--red); }
.footer__meta {
  font-family: var(--condensed);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}
/* Build stamp: "v1.0.0 · a1b2c3d · 2026-08-08". Deliberately dim — it is for a
   bug report, not for the reader — but kept monospaced and full-opacity enough
   to stay legible in a screenshot. Breaks onto its own line on narrow screens. */
.footer__build {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}
@media (max-width: 40rem) {
  .footer__build { display: block; margin: 0.35rem 0 0; }
}

/* Fine-print legal fiction notice — the "don't take me to court" line. */
.footer__legal {
  font-size: 0.62rem;
  line-height: 1.4;
  max-width: 60ch;
  margin: 0.75rem auto 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  opacity: 0.5;
}

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

@media (max-width: 720px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .noticeboard {
    position: static;
    order: -1;
    margin-bottom: 1.5rem;
  }
  .feed { column-width: auto; columns: 1; }
}

/* ---------- Controls bar (breaking + buttons) ---------- */

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  /* Align with the centred content column instead of hugging the page edges. */
  max-width: 1120px;
  margin: 0.75rem auto 1.5rem;
}
.controls .breaking { margin: 0; }
/* The BREAKING strap is decorative (the markup carries aria-hidden), and on a
   phone it is the most expensive decoration on the page: measured at 390px it
   wraps to two lines and takes 59px of the 106px controls bar, immediately above
   the fold. Dropped below 560px — the same breakpoint the masthead group strip
   uses — which puts the first headline that much closer to the top. */
@media (max-width: 560px) {
  .controls .breaking { display: none; }
  /* With BREAKING gone the bar is one button, so the desktop 0.75/1.5rem margins
     are framing empty space. */
  .controls { margin: 0.4rem auto 0.5rem; gap: 0.4rem; }
  /* The feed's own rule sat immediately above the lead card's 3px red rule — two
     lines a few pixels apart, doing one job. The red one is the informative half
     (it marks the lead), so the grey one goes and its 0.9rem of clearance with
     it. */
  .frontband { border-top: 0; padding-top: 0.25rem; }
}
.controls__buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.btn-ctl {
  font-family: var(--condensed);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}
.btn-ctl:hover { background: var(--ink); color: var(--paper); }
.btn-ctl:active { background: var(--paper-2); color: var(--ink); }

/* ---------- Story media (generated images / video) ---------- */

.card__media {
  margin: 0.5rem 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--paper-2);
}
.card__img,
.card__video {
  display: block;
  width: 100%;
  height: auto;
  /* faint newsprint ink treatment so photos sit in the paper */
  filter: contrast(1.05) saturate(0.92);
}
.card__media--motion { position: relative; }
/* the empty-frame gag keeps its own border, so drop the wrapper's */
.card__media > .card__photo { border: none; }

/* Grid tiles only: lock media to one aspect ratio so a portrait photo can't
   stretch grid-auto-rows and leave dead whitespace under its row-mates. The
   splash lead and article hero are single, standalone images with no row to
   distort, so they keep their natural aspect ratio. */
.feed__grid .card__media { aspect-ratio: 16 / 10; }
.feed__grid .card__img,
.feed__grid .card__video { height: 100%; object-fit: cover; }

@media (max-width: 720px) {
  .controls { flex-direction: column; align-items: stretch; }
  .controls__buttons { justify-content: stretch; }
  .btn-ctl { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .card__link { transition: none; }
  .card__video { /* still allowed to loop; browsers honour user autoplay prefs */ }
}

/* ================= Feed card links ================= */
.card__headline-link { color: inherit; text-decoration: none; }
.card__headline-link:hover { color: var(--red); text-decoration: underline; text-decoration-thickness: 2px; }

/* Whole story card is a single click target (stretched-link pattern) */
.card--clickable {
  position: relative;
  cursor: pointer;
}
.card--clickable:hover .card__headline-link { color: var(--red); }
.card--clickable .card__headline-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ================= Article pages ================= */

.masthead--small { padding-top: 0.75rem; }
.masthead--small .masthead__title { font-size: clamp(2.2rem, 8vw, 4rem); }
.masthead__back, .masthead__homelink { color: inherit; text-decoration: none; }
.masthead__back:hover { color: var(--red); }
.masthead__homelink:hover .masthead__dot { color: var(--ink); }

/* Article page uses the Guardian/BBC layout: a wide 1120px frame (matching the
   section + index columns and the controls bar, so the left edge and the 🎲 New
   nonsense button line up on every page), with the running text in a ~720px
   reading column LEFT-aligned inside it, and the headline + hero running wider.
   The max-widths are caps, not fixed widths — on a phone each block simply fills
   the viewport, giving a full-width single column with no horizontal overflow. */
.article {
  max-width: 1120px;
  margin: 1rem auto 0;
  padding: 0;
}
.article > * { max-width: 720px; }
.article > .article__head,
.article > .article__media { max-width: 940px; }
.article__loading { font-style: italic; opacity: 0.6; text-align: center; }

.article__kicker {
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.09em;
  font-size: 0.72rem; font-weight: 700; color: var(--red); margin-bottom: 0.25rem;
}
.article__category {
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.62rem; border: 1px solid var(--ink); padding: 0.05rem 0.4rem;
  display: inline-block; margin-bottom: 0.5rem;
}
.article__headline {
  font-size: clamp(1.9rem, 5.5vw, 3.1rem); font-weight: 900; line-height: 1.02;
  letter-spacing: -0.01em; margin: 0.3rem 0 0.5rem;
}
.article__standfirst {
  font-size: 1.18rem; font-style: italic; line-height: 1.35;
  color: rgba(20, 17, 13, 0.82); margin: 0 0 0.7rem;
}
.article__meta {
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.72rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding: 0.35rem 0; margin: 0 0 1.1rem;
}
.article__dateline { opacity: 0.7; }

.article__media { margin: 0 0 1.1rem; }
.article__media .card__caption { font-size: 0.72rem; }

.article__body-p { font-size: 1.05rem; line-height: 1.62; margin: 0 0 1rem; }

.article__quote {
  clear: both; margin: 1.4rem 0; padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 5px solid var(--red);
  font-size: 1.5rem; font-weight: 700; font-style: italic; line-height: 1.25;
}

.article__prop { clear: both; margin: 1.3rem 0; }
.article__prop-label {
  display: inline-block; font-family: var(--condensed); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem;
  background: var(--ink); color: var(--paper); padding: 0.1rem 0.5rem; margin-bottom: 0.3rem;
}
.article__prop-text { margin: 0; }
.article__classified {
  border: 2px dashed var(--ink); padding: 0.8rem 1rem; background: var(--paper-2);
  font-family: var(--condensed); font-size: 0.95rem; max-width: 22rem;
}
.article__correction {
  border: 1px solid var(--ink); border-left: 6px solid var(--red);
  padding: 0.7rem 1rem; background: #fffdf6; font-style: italic; font-size: 0.9rem;
}
.article__continued {
  text-align: right; font-family: var(--condensed); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.72rem; opacity: 0.7;
}
/* FLASH was a bare red badge with no text under it — the label WAS the whole
   prop, which is why a third of articles looked like they were missing
   something. It is now a proper box: the badge survives as the label, and the
   line it was always supposed to introduce sits beneath it. */
.article__flash { border-top: 3px solid var(--red); border-bottom: 3px solid var(--red); padding: 0.6rem 0; }
.article__flash .article__prop-label { background: var(--red); color: #fff; }
.article__flash .article__prop-text {
  font-family: var(--condensed); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em;
}

/* STOP PRESS: the loudest of them — the one that used to be nothing at all. */
.article__stoppress {
  border: 3px solid var(--ink); padding: 0.8rem 1rem; background: var(--paper-3);
}
.article__stoppress .article__prop-text {
  font-family: var(--condensed); font-weight: 700; font-size: 1.05rem; line-height: 1.3;
}

/* Harvested from the weather section: a forecast sliver, boxed like a met panel. */
.article__outlook {
  border: 1px dotted var(--ink); padding: 0.7rem 1rem; background: var(--paper-2);
  max-width: 24rem; font-size: 0.92rem;
}
.article__outlook .article__prop-label { background: var(--blue); }

/* Harvested from the TV listings: set as a listing, ragged right, condensed. */
.article__tonight {
  border-left: 6px solid var(--ink); padding: 0.5rem 0 0.5rem 0.9rem;
  font-family: var(--condensed); font-size: 0.95rem; max-width: 26rem;
}

/* Harvested from the facts section, which stamps its own items TRUE in blue. */
.article__truefact {
  border: 1px solid var(--hair); border-top: 3px solid var(--blue);
  padding: 0.7rem 1rem; background: #fffdf6; font-size: 0.95rem;
}
.article__truefact .article__prop-label { background: var(--blue); }

/* Harvested from the money briefs: rules top and bottom, like a market strip. */
.article__index {
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  padding: 0.5rem 0; font-family: var(--condensed); font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.article__index .article__prop-label { background: var(--red); }

/* Harvested from the puzzle page: a clue, boxed like a grid square. */
.article__puzzle {
  border: 2px solid var(--ink); border-right-width: 6px; border-bottom-width: 6px;
  padding: 0.7rem 1rem; background: var(--paper); font-size: 0.92rem; max-width: 24rem;
}

.article__more {
  clear: both; margin: 2rem 0 0; border-top: 5px double var(--rule); padding-top: 0.8rem;
}
.article__more-title {
  font-family: var(--condensed); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 1rem; margin: 0 0 0.6rem;
}
.article__more-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.article__more-item { border-top: 1px dashed rgba(20,17,13,0.35); padding-top: 0.5rem; }
.article__more-kicker {
  display: block; font-family: var(--condensed); text-transform: uppercase;
  letter-spacing: 0.09em; font-size: 0.6rem; color: var(--red);
}
.article__more-link { color: inherit; text-decoration: none; font-weight: 800; font-size: 1.02rem; }
.article__more-link:hover { color: var(--red); text-decoration: underline; }

.article__back {
  display: inline-block; margin: 1.6rem 0 0; font-family: var(--condensed);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem;
  color: #fff; background: var(--ink); padding: 0.5rem 1rem; text-decoration: none;
  border: 2px solid var(--ink);
}
.article__back:hover { background: var(--red); border-color: var(--red); }

.article--notfound { text-align: center; }

/* One clean Guardian-style article layout: full-width hero, single-column serif
   body, a red drop-cap on the opening paragraph. (The old wonky v1–v5 variants
   were collapsed into this; article.js no longer sets an .article--vN class.) */
.article__body > .article__body-p:first-child::first-letter {
  float: left; font-size: 3.6rem; line-height: 0.72; font-weight: 900;
  padding: 0.15rem 0.35rem 0 0; color: var(--red);
}

/* Same red opening drop cap, applied site-wide to the first paragraph of any
   section body. section.js's paras() helper tags only that first paragraph with
   .lead-cap, so exactly one drop cap opens each body (motoring, reviews,
   obituaries, letters, garden profiles, real pages, puzzles). */
.lead-cap::first-letter {
  float: left; font-size: 3.6rem; line-height: 0.72; font-weight: 900;
  padding: 0.15rem 0.35rem 0 0; color: var(--red);
}

/* ================= Reproduced artifact ================= */
/* The story subject's own document (catalogue / blog / spreadsheet / petition),
   reproduced in full as a straight-faced amateur page. A base "reproduced
   document" frame, then a skin per kind. Stays within the 820px article column,
   wraps long text, no fixed heights — never scrolls the page sideways. */
.artifact {
  margin: 1.8rem 0; padding: 1rem 1.1rem 1.2rem; max-width: 100%;
  border: 1px solid var(--rule); background: var(--paper-2, #efe9dd);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12); overflow-wrap: break-word;
}
.artifact__eyebrow {
  display: block; font-family: var(--condensed); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.66rem; opacity: 0.55; margin-bottom: 0.5rem;
}
.artifact__title { margin: 0 0 0.2rem; font-size: 1.25rem; line-height: 1.2; }
.artifact__intro { margin: 0 0 0.9rem; font-size: 0.92rem; opacity: 0.8; }
.artifact__entries { display: block; }
.artifact__entry { margin: 0 0 0.9rem; }
.artifact__entry-head { font-weight: 800; }
.artifact__entry-text { margin: 0.15rem 0; }
.artifact__entry-meta { font-size: 0.75rem; opacity: 0.6; }
.artifact__footer {
  margin-top: 1rem; padding-top: 0.6rem; border-top: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 0.72rem; opacity: 0.6;
}

/* --blog: a naive early-2000s personal blog. */
.artifact--blog {
  background: #fbfbf4; font-family: "Trebuchet MS", Verdana, sans-serif;
}
.artifact--blog .artifact__title { color: #1a3e8c; font-weight: 700; }
.artifact--blog .artifact__entry { border-bottom: 1px dashed rgba(0, 0, 0, 0.18); padding-bottom: 0.9rem; }
.artifact--blog .artifact__entry:last-child { border-bottom: 0; }
.artifact--blog .artifact__entry-head {
  color: #1a3e8c; text-decoration: underline; font-weight: 700; font-size: 1.02rem;
}
.artifact--blog .artifact__entry-meta { font-style: italic; }
.artifact--blog .artifact__entry-meta::after { content: " · 0 comments"; }
.artifact--blog .artifact__footer {
  text-align: center; text-transform: uppercase; letter-spacing: 0.06em;
  font-family: var(--condensed);
}

/* --cards: an index-card stack, each card slightly off-square. */
.artifact--cards .artifact__entries {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
}
.artifact--cards .artifact__entry {
  flex: 1 1 14rem; margin: 0; background: #fffef8; border: 1px solid rgba(0, 0, 0, 0.35);
  padding: 0.7rem 0.8rem 0.8rem; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}
.artifact--cards .artifact__entry:nth-child(odd) { transform: rotate(-0.5deg); }
.artifact--cards .artifact__entry:nth-child(even) { transform: rotate(0.4deg); }
.artifact--cards .artifact__entry-head {
  border-bottom: 1px solid #c0392b; padding-bottom: 0.25rem; margin-bottom: 0.4rem;
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem;
}

/* --ledger: a monospace lined-paper account book. */
.artifact--ledger {
  font-family: ui-monospace, "Courier New", monospace; background: #fdfdf6;
}
.artifact--ledger .artifact__entry {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
  margin: 0; padding: 0.35rem 0.2rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.artifact--ledger .artifact__entry-head { min-width: 5rem; }
.artifact--ledger .artifact__entry-text { flex: 1 1 12rem; margin: 0; }
.artifact--ledger .artifact__entry-meta { margin-left: auto; text-align: right; }

/* --list: a numbered petition / complaint log. */
.artifact--list .artifact__entries { counter-reset: art; padding-left: 0; }
.artifact--list .artifact__entry {
  list-style: none; position: relative; padding-left: 2.2rem; counter-increment: art;
}
.artifact--list .artifact__entry::before {
  content: counter(art) "."; position: absolute; left: 0; top: 0;
  font-weight: 800; font-family: var(--condensed); color: var(--red);
}

/* ================= Section nav bar ================= */
.sectionnav {
  border-top: 1px solid var(--rule);
  border-bottom: 3px double var(--rule);
  margin: 0 0 0.75rem;
}
/* The bar WRAPS rather than scrolling, at every width. It was previously one
   nowrap row in an `overflow-x: auto` container, which on a 390px phone meant
   ~1030px of content — 2.6 screens — with no fade or arrow at the edge, so nine
   of the thirteen sections were invisible and nothing on screen said they were
   there. Wrapping is unconditional, not inside the 720px query, because the
   content is ~1030px wide: anything narrower than that scrolled, which included
   tablets and any part-width desktop window. `justify-content: center` means a
   nav that does fit is still a single centred row, exactly as before, so this
   costs nothing at full width. Adding sections now costs vertical space instead
   of silently hiding them — the failure is visible, which is the point. */
.sectionnav__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  justify-content: center;
  padding: 0.35rem 0.25rem;
  /* balanceSectionNav (js/shared.js) narrows this to even out the wrapped rows;
     the auto margins keep the narrowed bar centred in the page rather than
     hard against the left edge. No effect until a max-width is set. */
  margin: 0 auto;
}
.sectionnav__link {
  font-family: var(--condensed);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.74rem;
  text-decoration: none;
  color: var(--ink);
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.sectionnav__link:hover { color: var(--red); border-bottom-color: var(--red); }
.sectionnav__link.is-active {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* An `external: true` nav entry is a sibling site, not a section of the paper, so it
   carries a small ↗ and never takes the active underline — there is no page here for
   it to be active on. */
.sectionnav__link--external::after {
  content: "\2197";
  font-size: 0.72em;
  margin-left: 0.2em;
  vertical-align: 0.15em;
  opacity: 0.65;
}
.sectionnav__link--external:hover::after { opacity: 1; }

/* -- "About" dropdown: the site's only nested nav item. The menu is appended to
   <body> and positioned with `position: fixed` (top/left set by JS from the button's
   getBoundingClientRect() — see buildAboutDropdown in js/shared.js) rather than nested
   under #sectionnav. That was originally forced: the container's `overflow-x: auto`
   made overflow-y clip too, silently cutting off an absolutely-positioned menu nested
   inside it. The overflow is gone now that the bar wraps, so the constraint has lifted,
   but the fixed menu is kept — it is working, escapes any future clipping ancestor by
   construction, and re-nesting it would change the node count render-check asserts. -- */
.sectionnav__dropbtn {
  background: none; border: none; cursor: pointer;
  border-bottom: 3px solid transparent;
}
.sectionnav__dropbtn:hover,
.sectionnav__dropbtn[aria-expanded="true"] {
  color: var(--red); border-bottom-color: var(--red);
}
.sectionnav__dropmenu {
  display: none;
  position: fixed; z-index: 500;
  min-width: 10rem;
  background: #fffdf6; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  flex-direction: column; padding: 0.25rem 0;
}
.sectionnav__dropmenu.is-open { display: flex; }
.sectionnav__droplink {
  display: block;
  font-family: var(--condensed); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.74rem;
  text-decoration: none; color: var(--ink);
  padding: 0.45rem 0.9rem; white-space: nowrap;
}
.sectionnav__droplink:hover { color: var(--red); background: var(--paper-2); }

/* ================= Section pages (shared chrome) ================= */
.section { max-width: 1120px; margin: 1rem auto 0; padding: 0; }
.section__loading { font-style: italic; opacity: 0.6; text-align: center; }
.section__head { border-bottom: 5px double var(--rule); margin-bottom: 1.25rem; padding-bottom: 0.5rem; }
.section__title {
  margin: 0; font-weight: 900; letter-spacing: -0.01em; line-height: 0.95;
  font-size: clamp(2rem, 7vw, 3.6rem); text-transform: uppercase;
}
.section__tagline {
  margin: 0.2rem 0 0; font-family: var(--condensed); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.82rem; color: var(--red);
}
.section__lede { font-size: 1.05rem; font-style: italic; opacity: 0.85; }
.section--notfound { text-align: center; }
.section--notfound .section__title { color: var(--red); }

/* shared format bits */
.fmt__tag {
  display: inline-block; font-family: var(--condensed); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem;
  color: var(--red); border: 1px solid var(--red); padding: 0.05rem 0.4rem; margin-bottom: 0.4rem;
}
.fmt__media { margin: 0.5rem 0; overflow: hidden; border: 1px solid var(--ink); background: var(--paper-2); }
.fmt__media .card__img, .fmt__media .card__video { display: block; width: 100%; height: auto; filter: contrast(1.05) saturate(0.92); }
.fmt__media > .card__photo { border: none; }
.fmt__quote {
  margin: 0.8rem 0 0; padding-left: 0.9rem; border-left: 4px solid var(--red);
  font-style: italic; font-weight: 700; font-size: 1.1rem;
}

/* masonry-style column layouts for list-y sections */
.fmt--letters, .fmt--smallads, .fmt--toptips, .fmt--facts,
.fmt--obituaries {
  column-width: 300px; column-gap: 1.75rem;
}
.fmt--letters > *, .fmt--smallads > *, .fmt--toptips > *, .fmt--facts > *,
.fmt--obituaries > * {
  break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 1.4rem;
}

/* ---- Sport: a directory of real sports ---- */
.fmt--sport { display: grid; gap: 1.5rem; }

/* A full page for one real sport: kicker, title, where, deadpan intro, then media.
   Same hard-offset-shadow frame as the rest of the site, capped like an article
   column since this is a single full-width page, not a grid tile. */
.realpage {
  border: 2px solid var(--ink); background: #fffdf6; box-shadow: 6px 6px 0 var(--ink);
  max-width: 760px; padding: 0.9rem 1.1rem 1.2rem;
}
.realpage__kicker {
  display: inline-block; background: var(--blue); color: var(--paper);
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; margin-bottom: 0.35rem;
}
.realpage__title { margin: 0.1rem 0 0.15rem; font-weight: 900; font-size: 2rem; line-height: 1; }
.realpage__where {
  display: block; font-family: var(--condensed); text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 0.8rem; font-weight: 700; opacity: 0.7; margin-bottom: 0.5rem;
}
a.realpage__where--map { color: var(--blue); opacity: 0.85; text-decoration: none; }
a.realpage__where--map:hover { opacity: 1; text-decoration: underline; }

/* Tiny country/home-nation flags on the sport directory. Self-hosted SVGs
   (flag-icons, MIT) render identically on every browser — flag EMOJI would
   degrade to bare "GB"/"JP" text in Chrome/Edge on Windows. */
img.flag {
  display: inline-block;
  height: 0.78em;
  width: auto;
  vertical-align: baseline;
  margin-right: 0.15em;
  border-radius: 1px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}
/* Placeholder tile for sports with no free-licensed photo: a large, faded flag. */
.sporthub__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--paper-2, #efe9dd);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.sporthub__flagart {
  width: 42%;
  max-width: 96px;
  height: auto;
  opacity: 0.5;
  border-radius: 2px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2);
}
.sporthub__nophoto {
  font-family: var(--condensed, "Arial Narrow", sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.55;
}
.realpage__p { margin: 0 0 0.7rem; font-size: 1.02rem; line-height: 1.5; }
.realpage__p:first-of-type { font-size: 1.12rem; font-weight: 600; }

/* "Actually Real, We Checked" — the outbound-link fallback keeps this old idiom. */
.sport-realspot {
  border: 2px solid var(--ink); background: #fffdf6;
  box-shadow: 5px 5px 0 var(--blue); padding: 0.7rem 0.9rem 0.8rem; margin: 0.4rem 0 0.6rem;
}
.sport-realspot__kicker {
  display: inline-block; background: var(--blue); color: var(--paper);
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; margin-bottom: 0.35rem;
}
.sport-realspot__name { margin: 0.1rem 0 0.1rem; font-weight: 900; font-size: 1.2rem; line-height: 1.1; }
.sport-realspot__where {
  display: block; font-family: var(--condensed); text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 0.75rem; font-weight: 700; opacity: 0.7; margin-bottom: 0.3rem;
}
.sport-realspot__blurb { margin: 0 0 0.5rem; font-size: 0.92rem; }
.sport-realspot__link {
  display: inline-block; font-family: var(--condensed); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 700; font-size: 0.8rem;
  color: var(--paper); background: var(--ink); text-decoration: none; padding: 0.2rem 0.6rem;
}
.sport-realspot__link:hover { background: var(--blue); }

/* ---- Sport: sub-nav tabs + hub ---- */
.sportnav {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  border-bottom: 3px solid var(--ink); padding-bottom: 0.5rem; margin: 0.2rem 0 0.9rem;
}
.sportnav__tab {
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.03em;
  font-weight: 700; font-size: 0.8rem; text-decoration: none;
  color: var(--ink); background: var(--paper-2);
  border: 1.5px solid var(--ink); padding: 0.22rem 0.6rem;
}
.sportnav__tab:hover { background: var(--paper-3); }
.sportnav__tab.is-active { background: var(--ink); color: var(--paper); }
/* Single "back to Sport landing" button shown on an individual sport page in
   place of the old full tab bar. */
.sportnav__back {
  display: inline-block; font-family: var(--condensed); text-transform: uppercase;
  letter-spacing: 0.03em; font-weight: 700; font-size: 0.8rem; text-decoration: none;
  color: var(--ink); background: var(--paper-2); border: 1.5px solid var(--ink);
  padding: 0.22rem 0.6rem; margin: 0.2rem 0 0.9rem;
}
.sportnav__back:hover { background: var(--ink); color: var(--paper); }
.sport-lede {
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 700; font-size: 0.9rem; opacity: 0.8; margin: 0 0 0.8rem;
}

.sporthub { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.9rem; }
.sporthub__card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  border: 2px solid var(--ink); background: #fffdf6; box-shadow: 5px 5px 0 var(--ink);
  padding: 0; overflow: hidden; transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.sporthub__card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--red); }
.sporthub__media { margin: 0; border-bottom: 2px solid var(--ink); background: var(--paper-2); aspect-ratio: 16 / 10; overflow: hidden; }
.sporthub__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sporthub__name { font-weight: 900; font-size: 1.15rem; line-height: 1.05; padding: 0.55rem 0.7rem 0.1rem; }
.sporthub__tag {
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 0.74rem; font-weight: 700; opacity: 0.7; padding: 0 0.7rem 0.4rem;
}
.sporthub__meta {
  margin-top: auto; font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 0.72rem; font-weight: 700; color: var(--paper); background: var(--ink);
  padding: 0.25rem 0.7rem;
}

/* ---- Motoring: garage hub + per-car page ----
   Same card idiom as the Sport hub; a car with no image yet shows a tidy placeholder. */
.motorhub { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.9rem; }
.motorhub__card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  border: 2px solid var(--ink); background: #fffdf6; box-shadow: 5px 5px 0 var(--ink);
  padding: 0; overflow: hidden; transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.motorhub__card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--red); }
.motorhub__media { margin: 0; border-bottom: 2px solid var(--ink); background: var(--paper-2); aspect-ratio: 16 / 10; overflow: hidden; }
.motorhub__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.motorhub__media--empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2, #efe9dd); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.motorhub__nophoto {
  font-family: var(--condensed, "Arial Narrow", sans-serif); font-size: 0.72rem;
  letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.55; padding: 0 0.6rem; text-align: center;
}
.motorhub__name { font-weight: 900; font-size: 1.15rem; line-height: 1.05; padding: 0.55rem 0.7rem 0.1rem; }
.motorhub__tag {
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 0.74rem; font-weight: 700; opacity: 0.7; padding: 0 0.7rem 0.4rem;
}
.motorhub__meta {
  margin-top: auto; font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 0.72rem; font-weight: 700; color: var(--paper); background: var(--ink);
  padding: 0.25rem 0.7rem;
}
/* Back link on a car's own page, mirroring the article-page back button. */
.motorback {
  display: inline-block; margin: 0 0 1rem; font-family: var(--condensed);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem;
  color: #fff; background: var(--ink); padding: 0.4rem 0.9rem; text-decoration: none;
  border: 2px solid var(--ink);
}
.motorback:hover { background: var(--red); border-color: var(--red); }

/* Extra photo gallery on a car page (e.g. the ridiculous interior tech). */
.motorgal { margin: 1.4rem 0 0; border-top: 1px dotted var(--ink); padding-top: 0.8rem; }
.motorgal__head {
  margin: 0 0 0.7rem; font-family: var(--condensed); text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.95rem; font-weight: 800;
}
.motorgal__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; }
.motorgal__fig {
  margin: 0; border: 2px solid var(--ink); background: #fffdf6; box-shadow: 4px 4px 0 var(--ink);
}
.motorgal__btn {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.motorgal__btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.motorgal__img { display: block; width: 100%; height: auto; border-bottom: 2px solid var(--ink); }
.motorgal__cap {
  padding: 0.4rem 0.6rem 0.5rem; font-size: 0.82rem; line-height: 1.35;
  font-family: var(--condensed); font-weight: 600;
}

/* Lightbox: a gallery photo expanded over a dimmed backdrop (built in js/section.js). */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(20, 17, 13, 0.85); cursor: zoom-out; }
.lightbox__fig {
  position: relative; z-index: 1; margin: 0; max-width: min(1000px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column; background: var(--paper); border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink); padding: 0.4rem;
}
.lightbox__img {
  display: block; margin: 0 auto; width: auto; height: auto; max-width: 100%; max-height: 82vh; object-fit: contain;
}
.lightbox__cap {
  padding: 0.5rem 0.3rem 0.2rem; font-family: var(--condensed); font-weight: 600;
  font-size: 0.9rem; line-height: 1.35;
}
.lightbox__cap[hidden] { display: none; }
.lightbox__close {
  position: absolute; top: 0.4rem; right: 0.6rem; z-index: 2;
  width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; border: 2px solid var(--ink); cursor: pointer;
  font-size: 1.4rem; line-height: 1;
}
.lightbox__close:hover { background: var(--red); border-color: var(--red); }

/* ---- Real media block (embedded video / licence-cleared photo / true fact) ---- */
.real-embed {
  position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 100%;
  margin: 0.5rem 0 0.3rem; border: 2px solid var(--ink); background: #000; overflow: hidden;
}
.real-embed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.real-figure { margin: 0.5rem 0 0.3rem; }
.real-figure__img {
  display: block; width: 100%; max-width: 100%; height: auto;
  border: 2px solid var(--ink); background: var(--paper-2);
}
.real-credit {
  margin: 0.2rem 0 0.5rem; font-size: 0.72rem; font-style: italic; opacity: 0.75;
}
.real-credit__link { color: inherit; }
.real-fact { margin: 0.4rem 0 0.5rem; font-size: 0.9rem; }
.real-fact__flag {
  display: inline-block; background: var(--blue); color: var(--paper);
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 0.66rem; font-weight: 700; padding: 0.05rem 0.4rem; margin-right: 0.35rem;
  vertical-align: middle;
}

/* Promote the real event: a row of genuine outbound links (official / YouTube / etc.). */
.real-links__head {
  margin: 0.5rem 0 0.3rem; font-family: var(--condensed); text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.74rem; font-weight: 800; opacity: 0.8;
}
.real-links { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.8rem; }
.realpage .real-links { padding-bottom: 0.7rem; border-bottom: 1px solid var(--ink); }
.real-links__chip {
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.03em;
  font-weight: 700; font-size: 0.76rem; text-decoration: none;
  color: var(--paper); background: var(--blue); border: 1.5px solid var(--blue);
  padding: 0.18rem 0.55rem;
}
.real-links__chip:hover { background: var(--ink); border-color: var(--ink); }

/* ---- Letters ---- */
.letter {
  display: flex; flex-direction: column; border: 2px solid var(--ink);
  background: #fffdf6; box-shadow: 5px 5px 0 var(--ink); padding: 0;
  transition: box-shadow 0.08s ease;
}
/* static article, not a link — the shadow presses in rather than lifting,
   same convention as .culture-card */
.letter:hover { box-shadow: 3px 3px 0 var(--ink); }
.letter__body { padding: 0.7rem 0.85rem 0.85rem; }
.letter__title { margin: 0.2rem 0 0.4rem; font-weight: 900; font-size: 1.15rem; }
.letter__p { margin: 0 0 0.5rem; }
.letter__sign {
  margin: 0.3rem 0 0; text-align: right; font-style: italic; font-weight: 700; font-size: 0.85rem;
}
.letter--poem { background: var(--paper-2); }
.letter__poem-body { display: block; margin: 0.3rem 0; font-style: italic; }
.letter__poem-line { display: block; line-height: 1.5; }
/* full-bleed photo on top, mirrors .culture-card .fmt__media */
.letter--view .fmt__media {
  margin: 0; border: 0; border-bottom: 2px solid var(--ink); background: var(--paper-2);
  aspect-ratio: 16 / 10; overflow: hidden;
}
.letter--view .fmt__media .card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.letter__caption { margin: 0.3rem 0 0; font-style: italic; }

/* Readers' Gallery and reader photos borrow the view card's full-bleed media.
   The gallery uses a square crop because the pictures are of framed-ish objects
   shot head-on, where 16/10 would slice the top and bottom off the work. */
.letter--artwork .fmt__media,
.letter--readerphoto .fmt__media {
  margin: 0; border: 0; border-bottom: 2px solid var(--ink); background: var(--paper-2);
  aspect-ratio: 16 / 10; overflow: hidden;
}
.letter--artwork .fmt__media { aspect-ratio: 1 / 1; }
.letter--artwork .fmt__media .card__img,
.letter--readerphoto .fmt__media .card__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Wall label: medium in italic caps under the title, the way a gallery prints it */
.letter--artwork { background: var(--paper-2); }
.letter__medium {
  margin: 0 0 0.4rem; font-style: italic; font-size: 0.85rem; color: var(--ink);
  letter-spacing: 0.02em;
}
.letter__note { margin: 0; font-size: 0.9rem; }

/* The paper correcting itself — set apart from the reader letters around it */
.letter--correction { background: var(--paper-3); }
.letter--correction .letter__p:last-child { margin-bottom: 0; }

.letter__stars {
  margin: 0 0 0.4rem; font-size: 1.05rem; letter-spacing: 0.08em; color: var(--red);
}
/* Agony column — the red accent moves from a left-border (which would fight
   the shared outer frame) to a full-width rule under the tag */
.letter--agony .fmt__tag {
  display: block; border: none; border-bottom: 3px solid var(--red);
  padding: 0.05rem 0 0.4rem; margin-bottom: 0.5rem;
}
.letter__question { margin: 0.2rem 0; font-style: italic; }
.letter__answer { margin: 0.4rem 0 0; }

/* ---- Property listings ---- */
.fmt--listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.listing {
  border: 2px solid var(--ink); background: #fffdf6; box-shadow: 5px 5px 0 var(--ink);
  transition: box-shadow 0.08s ease;
}
.listing:hover { box-shadow: 3px 3px 0 var(--ink); }
.listing .fmt__media {
  margin: 0; border: none; border-bottom: 2px solid var(--ink);
  aspect-ratio: 16 / 10; overflow: hidden;
}
.listing .fmt__media .card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing__body { padding: 0.7rem 0.9rem 0.9rem; }
.listing__price {
  display: inline-block; background: var(--ink); color: var(--paper); font-weight: 800;
  font-family: var(--condensed); font-size: 0.9rem; padding: 0.1rem 0.5rem; margin-bottom: 0.3rem;
}
.listing__title { margin: 0.1rem 0 0.3rem; font-weight: 900; font-size: 1.15rem; line-height: 1.05; }
.listing__blurb { margin: 0 0 0.5rem; font-size: 0.92rem; }
.listing__features { margin: 0; padding-left: 1.1rem; font-size: 0.82rem; font-style: italic; opacity: 0.85; }

/* ---- Weather ---- */
.fmt--forecast { display: grid; gap: 0.1rem; max-width: 640px; }
.forecast { display: flex; align-items: center; gap: 0.9rem; border-bottom: 1px dashed var(--ink); padding: 0.6rem 0.2rem; }
.forecast__symbol { font-size: 1.7rem; }
.forecast__body { flex: 1; }
.forecast__region { font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; font-size: 0.82rem; }
.forecast__text { margin: 0.1rem 0 0; font-size: 0.95rem; }
.forecast__temp { font-weight: 900; font-size: 1.2rem; }

/* ---- Obituaries ---- */
.obit {
  display: flex; flex-direction: column; border: 2px solid var(--ink);
  background: #fffdf6; box-shadow: 5px 5px 0 var(--ink); padding: 0;
  transition: box-shadow 0.08s ease;
}
.obit:hover { box-shadow: 3px 3px 0 var(--ink); }
.obit .fmt__media {
  margin: 0; border: 0; border-bottom: 2px solid var(--ink); background: var(--paper-2);
  aspect-ratio: 16 / 10; overflow: hidden;
}
.obit .fmt__media .card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.obit__body { padding: 0.7rem 0.85rem 0.85rem; }
.obit__name { margin: 0.3rem 0 0.1rem; font-weight: 900; font-size: 1.3rem; }
.obit__dates { margin: 0 0 0.5rem; font-family: var(--condensed); letter-spacing: 0.05em; font-size: 0.78rem; opacity: 0.75; }
.obit__p { margin: 0 0 0.6rem; font-size: 0.95rem; }
/* a dignified closing line — small caps, centred, ruled — instead of the
   site's default red-bar pull-quote */
.obit .fmt__quote {
  margin: 0.7rem 0 0; padding: 0.4rem 0; border: none;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  font-style: italic; font-weight: 700; font-size: 0.92rem;
  text-align: center; font-variant: small-caps; letter-spacing: 0.03em;
}

/* ---- Horoscopes ---- */
/* A proper "Your Stars" page: one even card per sign in a uniform grid. Each card
   leads with a masthead-style TITLE BAR — a zodiac medallion + the real ZODIAC NAME
   (Libra, Aries, …) with the household "sign" as its subtitle — then the bespoke
   photo fusing the sign with its reading, then the reading. Cards carry the site's
   hard offset shadow and lift on hover. auto-fill drops columns on narrow screens. */
.fmt--horoscopes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.35rem;
}
.horo {
  border: 1.5px solid var(--ink); background: var(--paper);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color 0.12s ease;
}
.horo:hover { border-color: var(--red); }
/* masthead-style title bar: unmistakable label for the sign */
.horo__head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: var(--paper-2);
  border-bottom: 3px double var(--ink);
}
/* zodiac glyph as a struck medallion */
.horo__glyph {
  flex: none; width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: 1.5px solid var(--ink); border-radius: 50%;
  background: var(--paper); color: var(--red);
  font-size: 1.3rem; line-height: 1;
}
.horo__title { display: flex; flex-direction: column; min-width: 0; text-align: left; }
/* the real zodiac name (Libra, Aries, …) — the prominent label */
.horo__zodiac {
  font-family: var(--serif); font-weight: 700; font-size: 1.14rem; line-height: 1.02;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink);
}
/* the real birth-date range for this zodiac sign, so readers can find their own */
.horo__range {
  margin-top: 0.1rem; font-family: var(--condensed); font-weight: 700; font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--red);
}
/* the household "sign" — the joke, shown as an italic subtitle under the zodiac name */
.horo__sign {
  margin: 0.1rem 0 0; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 0.86rem; line-height: 1.15; opacity: 0.8; text-transform: none;
}
.horo__dates {
  margin-top: 0.14rem; font-family: var(--condensed); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.09em; opacity: 0.6;
}
/* full-width photo (fuses the sign with its reading); fixed height keeps cards even */
.horo .fmt__media { margin: 0; overflow: hidden; border: 0; border-bottom: 1px solid var(--ink); background: var(--paper-3); }
.horo .card__img { width: 100%; height: 160px; object-fit: cover; display: block; }
.horo__text {
  margin: 0; padding: 0.8rem 0.85rem 0.9rem;
  font-family: var(--serif); font-size: 0.9rem; line-height: 1.5; text-align: left;
}
.horo__text::before { content: "✶ "; color: var(--red); font-weight: 700; }

/* ---- TV listings ---- */
.fmt--schedule { display: grid; gap: 0; max-width: 720px; }
.listing-row { display: flex; gap: 0.9rem; border-bottom: 1px dotted rgba(0,0,0,0.4); padding: 0.5rem 0.2rem; }
.listing-row__time { font-family: var(--condensed); font-weight: 800; font-size: 0.95rem; min-width: 3.2rem; }
.listing-row__body { flex: 1; }
.listing-row__title { font-weight: 800; }
.listing-row__chan { font-family: var(--condensed); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--red); }
.listing-row__desc { margin: 0.1rem 0 0; font-size: 0.85rem; font-style: italic; opacity: 0.8; }

/* ---- Puzzles ---- */
.fmt--puzzles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.puzzle { border: 2px dashed var(--ink); padding: 0.8rem 1rem; background: #fffdf6; }
.puzzle__title { margin: 0.1rem 0 0.4rem; font-weight: 900; font-size: 1.1rem; }
.puzzle__clues { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.puzzle__clues li { margin: 0 0 0.25rem; }
.puzzle__p { margin: 0.3rem 0 0; font-size: 0.92rem; }

/* ---- Small ads ---- */
.smallad { border-bottom: 1px solid rgba(0,0,0,0.35); padding: 0.45rem 0; font-family: var(--condensed); }
.smallad__cat {
  display: block; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.62rem; color: var(--red);
}
.smallad__text { font-size: 0.92rem; }

/* ---- Top tips (Viz-style) ---- */
/* a running tips column — numbered like a real "101 tips" newspaper feature,
   not just 54 identical boxes */
.fmt--toptips { counter-reset: toptip; }
.toptip {
  border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); background: var(--paper-2);
  padding: 0.7rem 0.9rem; transition: box-shadow 0.08s ease; counter-increment: toptip;
}
.toptip:hover { box-shadow: 3px 3px 0 var(--ink); }
.toptip__label {
  display: inline-block; background: var(--red); color: #fff; font-family: var(--condensed);
  font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.64rem;
  padding: 0.1rem 0.5rem; margin-bottom: 0.35rem; font-variant-numeric: tabular-nums;
}
.toptip__label::after { content: " No." counter(toptip, decimal-leading-zero); }
.toptip__text { margin: 0; font-size: 0.98rem; }
.toptip__sign { margin: 0.3rem 0 0; text-align: right; font-style: italic; font-size: 0.78rem; opacity: 0.8; }

/* ---- Facts (the one true section) ---- */
.fact { position: relative; border: 2px solid var(--blue); background: #fbfdff; padding: 0.9rem 1rem 0.8rem; overflow: hidden; }
.fact__stamp {
  position: absolute; top: 0; right: 0;
  background: var(--blue); color: #fff; font-family: var(--condensed); font-weight: 800;
  letter-spacing: 0.14em; font-size: 0.6rem; padding: 0.12rem 0.6rem; text-transform: uppercase;
}
.fact__text { margin: 0; font-size: 1rem; font-weight: 700; }
.fact__note { margin: 0.4rem 0 0; font-size: 0.82rem; font-style: italic; opacity: 0.8; }

/* ---- Cookery (recipes) ---- */
.fmt--recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem; }
.recipe { border: 2px solid var(--ink); background: #fffdf6; padding: 0.8rem 1rem 1rem; }
.recipe__title { margin: 0.15rem 0 0.2rem; font-weight: 900; font-size: 1.35rem; line-height: 1.05; }
.recipe__meta { margin: 0 0 0.5rem; font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; opacity: 0.75; }
.recipe .fmt__media { margin: 0 0 0.6rem; }
.recipe__cols { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.recipe__subhead { margin: 0 0 0.25rem; font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; color: var(--red); border-bottom: 1px solid var(--ink); }
.recipe__ingredients ul { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; }
.recipe__ingredients li { margin: 0 0 0.15rem; }
.recipe__method ol { margin: 0; padding-left: 1.2rem; font-size: 0.9rem; }
.recipe__method li { margin: 0 0 0.35rem; }
.recipe__note { margin: 0.6rem 0 0; font-size: 0.82rem; font-style: italic; opacity: 0.8; border-top: 1px dotted var(--ink); padding-top: 0.4rem; }

/* ---- Motoring ---- */
.fmt--motoring { display: grid; gap: 1.75rem; }
/* Same frame + full-bleed hero as the rest of the site's card idiom; the gallery
   figures below already use this device (a 4px offset shadow), so the main
   article shell now matches instead of being a bare border-top. */
.motor {
  border: 2px solid var(--ink); background: #fffdf6; box-shadow: 6px 6px 0 var(--ink);
  max-width: 760px; padding: 0;
}
.motor .fmt__media {
  margin: 0; border: 0; border-bottom: 2px solid var(--ink); background: var(--paper-2);
  aspect-ratio: 16 / 10; overflow: hidden;
}
.motor .fmt__media .card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.motor__body { padding: 0.9rem 1.1rem 1.2rem; }
.motor__model { margin: 0.2rem 0 0.2rem; font-weight: 900; font-size: 1.5rem; line-height: 1.05; }
.motor__head { display: flex; align-items: baseline; gap: 0.8rem; margin: 0 0 0.5rem; }
.motor__stars { font-size: 1.15rem; letter-spacing: 0.1em; color: var(--red); }
.motor__price { font-family: var(--condensed); font-weight: 800; font-size: 0.9rem; }
.motor__p { margin: 0 0 0.6rem; }
.motor__specs { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: 0; margin: 1rem 0; border-top: 2px solid var(--ink); }
.motor__specs dt { font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; opacity: 0.8; padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px dotted rgba(17, 17, 17, 0.25); align-self: start; }
.motor__specs dd { margin: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.35; padding: 0.6rem 0; border-bottom: 1px dotted rgba(17, 17, 17, 0.25); }

/* ---- Garden ---- */
.fmt--garden { display: grid; gap: 1.1rem; max-width: 760px; }
.garden-qa {
  display: flex; flex-direction: column; border: 2px solid var(--ink);
  background: #fffdf6; box-shadow: 5px 5px 0 var(--ink); padding: 0;
  transition: box-shadow 0.08s ease;
}
.garden-qa:hover { box-shadow: 3px 3px 0 var(--ink); }
.garden-qa__body { padding: 0.7rem 0.85rem 0.85rem; }
/* the green accent moves from a left-border (which would fight the shared
   outer frame) to a full-width rule under the tag, same device as Letters/agony */
.garden-qa .fmt__tag {
  display: block; border: none; border-bottom: 3px solid #3c7a3c; color: #3c7a3c;
  padding: 0.05rem 0 0.4rem; margin-bottom: 0.5rem;
}
.garden-qa__q { margin: 0.2rem 0; font-style: italic; }
.garden-qa__who { margin: 0 0 0.3rem; text-align: right; font-size: 0.78rem; opacity: 0.75; }
.garden-qa__a { margin: 0; }
/* jobs stay a lightweight checklist row, not a card — a shadow-box around a
   single line would be absurd. Numbered instead, like a real weekend jobs list. */
.fmt--garden { counter-reset: garden-job; }
.garden-job { display: flex; gap: 0.6rem; align-items: baseline; border-bottom: 1px dashed var(--ink); padding: 0.4rem 0; counter-increment: garden-job; }
.garden-job__bullet { color: #3c7a3c; }
.garden-job__bullet::before { content: counter(garden-job) ". "; font-weight: 800; }
.garden-job__text { font-size: 0.95rem; }
.garden-plant {
  display: flex; flex-direction: column; border: 2px solid var(--ink);
  background: #fffdf6; box-shadow: 5px 5px 0 var(--ink); padding: 0;
  transition: box-shadow 0.08s ease;
}
.garden-plant:hover { box-shadow: 3px 3px 0 var(--ink); }
.garden-plant .fmt__media {
  margin: 0; border: 0; border-bottom: 2px solid var(--ink); background: var(--paper-2);
  aspect-ratio: 16 / 10; overflow: hidden;
}
.garden-plant .fmt__media .card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.garden-plant__body { padding: 0.7rem 0.85rem 0.85rem; }
.garden-plant__name { margin: 0 0 0.05rem; font-weight: 900; font-size: 1.2rem; }
.garden-plant__latin { font-style: italic; font-size: 0.82rem; opacity: 0.7; }
.garden-plant__p { margin: 0.35rem 0 0; font-size: 0.92rem; }

/* ---- Culture (the arts pages: tabbed hub of subgroups) ---- */
.fmt--culture { display: block; }
/* sub-nav tabs — same idiom as the Sport tab bar */
.culturenav { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 3px solid var(--ink); padding-bottom: 0.5rem; margin: 0.2rem 0 1rem; }
.culturenav__tab {
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.03em;
  font-weight: 700; font-size: 0.8rem; text-decoration: none;
  color: var(--ink); background: var(--paper-2); border: 1.5px solid var(--ink); padding: 0.22rem 0.6rem;
}
.culturenav__tab:hover { background: var(--paper-3); }
.culturenav__tab.is-active { background: var(--ink); color: var(--paper); }
/* overview: one block per subgroup, its heading linking through to the tab */
.culture-group { margin: 0 0 2rem; }
.culture-cat-head {
  display: flex; align-items: center; gap: 0.6rem; text-decoration: none;
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 800; font-size: 1rem; color: var(--ink);
  border-bottom: 2px solid var(--ink); padding-bottom: 0.25rem; margin: 0 0 0.9rem;
}
.culture-cat-head::after { content: "›"; margin-left: auto; color: var(--red); }
.culture-cat-head:hover { color: var(--red); }
.culture-more {
  display: inline-block; margin: 0.9rem 0 0; text-decoration: none;
  font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 700; font-size: 0.78rem; color: var(--ink); border-bottom: 2px solid var(--red);
}
.culture-more:hover { color: var(--red); }
/* card grid — fixed columns (not auto-fill) so the :nth-child spans below can
   reliably find a trailing orphan card and widen it to close the row, like a
   column-filler piece in print, instead of leaving a dead gap. */
.culture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: start; }
.culture-grid > .culture-card:nth-child(3n + 1):last-child { grid-column: span 3; }
.culture-grid > .culture-card:nth-child(3n + 2):last-child { grid-column: span 2; }
.culture-grid > .culture-card:nth-child(3n + 1):last-child .culture-card__body,
.culture-grid > .culture-card:nth-child(3n + 2):last-child .culture-card__body {
  max-width: 34rem;
}
@media (max-width: 900px) {
  .culture-grid { grid-template-columns: repeat(2, 1fr); }
  .culture-grid > .culture-card:nth-child(3n + 1):last-child,
  .culture-grid > .culture-card:nth-child(3n + 2):last-child { grid-column: auto; }
  .culture-grid > .culture-card:nth-child(2n + 1):last-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  .culture-grid { grid-template-columns: 1fr; }
  .culture-grid > .culture-card:nth-child(2n + 1):last-child { grid-column: auto; }
}
.culture-card {
  display: flex; flex-direction: column; border: 2px solid var(--ink);
  background: #fffdf6; box-shadow: 5px 5px 0 var(--ink); padding: 0;
  transition: box-shadow 0.08s ease;
}
/* static article, not a link — the shadow presses in rather than lifting, so
   it reads as tactile without borrowing the hub cards' "this is a link" hover */
.culture-card:hover { box-shadow: 3px 3px 0 var(--ink); }
.culture-card--gigs, .culture-card--comedy { background: var(--paper); }
.culture-card__body { padding: 0.7rem 0.85rem 0.85rem; }
.culture-card__title { margin: 0.15rem 0 0.3rem; font-weight: 900; font-size: 1.25rem; line-height: 1.08; }
.culture-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0 0 0.5rem; }
.culture-card__stars { font-size: 1.05rem; letter-spacing: 0.08em; color: var(--red); }
.culture-card__when { font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; font-size: 0.74rem; opacity: 0.85; }
/* full-bleed media, on top of the body — mirrors the Sport hub's treatment */
.culture-card .fmt__media { margin: 0; border: 0; border-bottom: 2px solid var(--ink); background: var(--paper-2); aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.culture-card .fmt__media .card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.culture-card__cover-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1rem 0.8rem 0.6rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0) 100%);
}
.culture-card__cover-caption--vertical {
  left: auto; bottom: auto; top: 0; right: 0;
  padding: 0.7rem 0.55rem;
  background: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 0.7;
}
.culture-card__cover-band { font-family: var(--condensed); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.05rem; line-height: 1.05; color: #fff; }
.culture-card__cover-album { font-family: var(--condensed); font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; color: rgba(255,255,255,0.85); }
.culture-card__cover-caption--vertical .culture-card__cover-album { font-size: 1.1rem; letter-spacing: 0.2em; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 10px rgba(0,0,0,0.4); }
.culture-card__p { margin: 0 0 0.5rem; font-size: 0.92rem; line-height: 1.5; }
/* the site-wide drop cap (css ~line 703) is 3.6rem, sized for a full-width
   article — too big for a 280px card; this is the sane in-card default,
   Books re-enlarges it as its own signature device below. */
.culture-card__p.lead-cap::first-letter { font-size: 2.3rem; line-height: 1; }
.culture-card .fmt__quote { margin: 0.2rem 0 0; }

/* ---- Culture: per-cat typesetting devices (newspaper typesetting only —
   never a picture of a ticket/playbill/plaque; every cat stays the same
   ink/paper/red/serif/condensed newspaper as every other section) ---- */

/* Gigs — a gig-guide listings column: the meta line reads as a shaded strip */
.culture-card--gigs .culture-card__when {
  background: var(--paper-2); padding: 0.15rem 0.5rem; display: inline-block;
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}

/* Comedy — never has a photo; a marquee initial on the act name plus a boxed
   "billed as" meta strip carry the visual weight a photo would have. One big-
   type move per card, so the drop cap is suppressed in favour of the initial. */
.culture-card--comedy .culture-card__title::first-letter { color: var(--red); font-size: 1.7em; font-weight: 900; }
.culture-card--comedy .culture-card__meta { border-top: 1px dashed var(--ink); border-bottom: 1px dashed var(--ink); padding: 0.3rem 0; }
.culture-card--comedy .culture-card__body { padding: 1rem 1rem 1.15rem; }
.culture-card--comedy .culture-card__p.lead-cap::first-letter { float: none; font-size: inherit; font-weight: inherit; color: inherit; padding: 0; line-height: inherit; }
.culture-card--comedy .fmt__quote { font-size: 1.25rem; margin-top: 0.5rem; }

/* Theatre — a programme title page: centred, ruled above */
.culture-card--theatre .culture-card__body { border-top: 2px solid var(--ink); padding-top: 0.7rem; }
.culture-card--theatre .fmt__tag { display: block; width: max-content; margin-left: auto; margin-right: auto; }
.culture-card--theatre .culture-card__title { text-align: center; }
.culture-card--theatre .culture-card__meta { justify-content: center; }

/* Art — the meta line runs as a caption under the photo, like a gallery wall
   label; review prose gets a hanging indent instead of a drop cap. */
.culture-card--art .fmt__media { aspect-ratio: auto; overflow: visible; }
.culture-card--art .fmt__media .card__img { aspect-ratio: 16 / 10; height: auto; }
.culture-card__art-caption {
  display: block; font-family: var(--condensed); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--paper-2); padding: 0.45rem 0.55rem; margin: 0;
}
.culture-card--art .culture-card__title { text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.1rem; }
.culture-card--art .culture-card__p { text-indent: -0.6rem; padding-left: 0.6rem; }
.culture-card--art .culture-card__p.lead-cap::first-letter { float: none; font-size: inherit; font-weight: inherit; color: inherit; padding: 0; line-height: inherit; }

/* Books — the drop cap, enlarged: it's suppressed/downscaled everywhere else
   on this page, so here it becomes Books' own signature. Verdict restyled as
   a right-aligned critic's signoff instead of the red-rule pull-quote. */
.culture-card--books .culture-card__p.lead-cap::first-letter { font-size: 2.6rem; }
.culture-card--books .fmt__quote {
  border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 0.4rem; margin-top: 0.6rem;
  text-align: right; font-style: italic; font-weight: 400; font-size: 0.85rem;
}

/* Film — the star rating becomes a badge chip on the still; title set italic,
   the house style for a film title in running prose. */
.culture-card--film .culture-card__title { font-style: italic; }
.culture-card__film-badge {
  position: absolute; left: 0; bottom: 0; background: var(--ink); color: var(--paper);
  font-size: 0.85rem; letter-spacing: 0.08em; padding: 0.2rem 0.5rem; font-family: var(--serif);
}

/* Dance — an "in brief" kicker, airy leading, a double rule under the title,
   a subtle ink-wash tonal shift on the still. */
.culture-card--dance .culture-card__title { border-bottom: 1px solid var(--ink); box-shadow: 0 3px 0 var(--ink); padding-bottom: 0.3rem; }
.culture-card--dance .culture-card__stars::before { content: "IN BRIEF · "; font-family: var(--condensed); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--ink); }
.culture-card--dance .culture-card__p { line-height: 1.78; }
.culture-card--dance .fmt__media .card__img { filter: contrast(1.1) saturate(0.75) sepia(0.06); }

/* ---- Money ---- */
.fmt--money { display: grid; gap: 1.1rem; max-width: 760px; }
.money-ticker { border: 2px solid var(--ink); background: #fffdf6; padding: 0.6rem 0.8rem 0.8rem; }
.money-ticker__title { margin: 0 0 0.3rem; font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; }
.money-ticker__grid { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.money-ticker__grid th { text-align: left; font-family: var(--condensed); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.05em; border-bottom: 2px solid var(--ink); padding: 0.2rem 0.4rem; }
.money-ticker__grid td { padding: 0.28rem 0.4rem; border-bottom: 1px dotted rgba(0,0,0,0.3); }
.money-ticker__name { font-weight: 700; }
.money-ticker__price { text-align: right; font-variant-numeric: tabular-nums; }
.money-ticker__chg { font-weight: 800; font-variant-numeric: tabular-nums; }
.money-ticker__chg.is-up { color: #1c7a3c; }
.money-ticker__chg.is-down { color: var(--red); }
.money-ticker__note { font-size: 0.72rem; font-style: italic; opacity: 0.7; }
.money-advice { border-left: 5px solid var(--blue); padding: 0.3rem 0 0.4rem 0.9rem; }
.money-advice__q { margin: 0.2rem 0; font-style: italic; }
.money-advice__who { margin: 0 0 0.3rem; text-align: right; font-size: 0.78rem; opacity: 0.75; }
.money-advice__a { margin: 0; }
.money-brief { display: flex; gap: 0.6rem; align-items: baseline; border-bottom: 1px dashed var(--ink); padding: 0.4rem 0; }
.money-brief__tag { font-family: var(--condensed); font-weight: 800; text-transform: uppercase; font-size: 0.62rem; color: var(--red); min-width: 4.5rem; }
.money-brief__text { font-size: 0.92rem; }

/* ---- Reviews: a critic's column, boxed like every other hub card on the
   site (Reviews was the one format with no card frame at all), 9 raw
   category strings folded into 4 genres, each with its own typesetting
   device — never a picture of a receipt/dial/ticket, still the same paper. ---- */
.fmt--reviews { display: grid; gap: 1.75rem; }
.review {
  border: 2px solid var(--ink); background: #fffdf6; box-shadow: 5px 5px 0 var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr;   /* text left, picture right */
  align-items: stretch;
}
.review__text { min-width: 0; padding: 1.1rem 1.3rem 1.3rem; }
/* the image bleeds to three of the box's own edges; a rule on the fourth
   (inner) edge is the seam between photo and copy — full-bleed within its
   own column, not the "full card width" treatment Culture's cards use. */
.review .fmt__media { margin: 0; border: 0; border-left: 2px solid var(--ink); background: var(--paper-2); position: relative; overflow: hidden; }
.review .fmt__media .card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review--noimg { grid-template-columns: 1fr; }   /* no picture: text spans full width */
@media (max-width: 640px) {
  .review { grid-template-columns: 1fr; }
  .review .fmt__media { border-left: 0; border-top: 2px solid var(--ink); }
}
.review__subject { margin: 0.2rem 0 0.2rem; font-weight: 900; font-size: 1.4rem; line-height: 1.05; }
.review__head { display: flex; align-items: baseline; gap: 0.8rem; margin: 0 0 0.5rem; }
.review__stars { font-size: 1.15rem; letter-spacing: 0.1em; color: var(--red); }
.review__price { font-family: var(--condensed); font-weight: 800; font-size: 0.9rem; }
.review__p { margin: 0 0 0.6rem; }
.review__sign { margin: 0.3rem 0; text-align: right; font-style: italic; font-size: 0.8rem; opacity: 0.8; }

/* Restaurant / Beverage — the price line promoted into a ruled bill strip */
.review--eatdrink .review__subject { font-size: 1.55rem; }
.review--eatdrink .review__price { display: inline-block; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 0.15rem 0; }
.review--eatdrink .review__price::before { content: "THE DAMAGE: "; color: var(--red); font-weight: 900; }

/* Gadget / Product / Home / Furniture — a consumer-mag verdict callout;
   4 single-item categories share one device rather than each inventing its own */
.review--goods .fmt__quote {
  border: 1px dashed var(--ink); border-left: 4px solid var(--red); background: var(--paper-2);
  padding: 0.5rem 0.8rem; margin: 1rem 0 0; font-style: normal; font-size: 1rem;
}
.review--goods .fmt__quote::before {
  content: "VERDICT"; display: block; font-family: var(--condensed); font-weight: 800;
  letter-spacing: 0.08em; font-size: 0.65rem; color: var(--red); margin-bottom: 0.25rem;
}

/* Days Out — a travel-page practicalities fact-strip */
.review--daysout .fmt__quote {
  border-left: none; border-top: 2px solid var(--ink); padding: 0.5rem 0 0; margin-top: 1rem;
  font-style: normal; font-family: var(--condensed); text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 0.85rem; font-weight: 700;
}
.review--daysout .fmt__quote::before { content: "PRACTICALITIES · "; color: var(--red); }

/* Film — the star rating sits on the still as a badge, same device as
   Culture's Film variant, keeping the two sections' critic vocabulary consistent */
.review__badge {
  position: absolute; left: 0.7rem; bottom: 0.7rem; background: var(--ink); color: var(--paper);
  font-size: 1.05rem; letter-spacing: 0.1em; padding: 0.25rem 0.55rem; border: 2px solid var(--ink);
}

/* No image (incidental, any genre) — narrow to a readable measure and lean
   harder on the drop cap and pull-quote to fill the space a photo would have.
   Source-ordered after the four genre blocks above so it wins the cascade
   for shared properties (e.g. .fmt__quote font-size vs. review--goods). */
.review--noimg .review__text { max-width: 42rem; }
.review--noimg .review__p.lead-cap::first-letter { font-size: 5rem; }
.review--noimg .fmt__quote { font-size: 1.3rem; max-width: 30rem; }

/* ---- Lonely Hearts (personals) ---- */
.fmt--personals { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.personal {
  border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); background: var(--paper);
  padding: 0.7rem 0.9rem 0.8rem; display: flex; flex-direction: column;
  transition: box-shadow 0.08s ease;
}
.personal:hover { box-shadow: 3px 3px 0 var(--ink); }
.personal__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; border-bottom: 1px dotted var(--ink); padding-bottom: 0.3rem; margin-bottom: 0.4rem; }
.personal__ref { font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; color: #fff; background: var(--red); padding: 0.1rem 0.4rem; }
.personal__who { font-family: var(--condensed); font-weight: 700; font-size: 0.82rem; opacity: 0.8; }
/* set in the paper's condensed face, denser than body serif — the "agate type"
   real classified columns use to pack more ads into the space */
.personal__text { margin: 0 0 0.7rem; font-family: var(--condensed); font-size: 0.88rem; line-height: 1.45; flex: 1; }
.personal__reply {
  align-self: flex-start; font-family: var(--condensed); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.68rem; color: var(--ink); background: var(--paper-2);
  border: 1.5px solid var(--ink); padding: 0.3rem 0.6rem; cursor: pointer; transition: background 0.12s, color 0.12s;
}
.personal__reply:hover { background: var(--ink); color: var(--paper); }

/* ---- "Post us yours" submission CTAs (Top Tips / Letters / Small Ads / Lonely Hearts) ---- */
.section-cta-row { margin-top: 1rem; text-align: center; }
.fmt--letters .section-cta-row, .fmt--smallads .section-cta-row, .fmt--toptips .section-cta-row {
  column-span: all; break-inside: avoid; display: block; width: auto;
}
.fmt--personals .section-cta-row { grid-column: 1 / -1; }

/* ---- Masthead grid (about.html) ---- */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem; margin-top: 1.5rem;
}
.team-card {
  border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); background: var(--paper);
  padding: 0 0 0.9rem; transition: box-shadow 0.08s ease; overflow: hidden;
}
.team-card:hover { box-shadow: 3px 3px 0 var(--ink); }
.team-card__media { margin: 0 0 0.7rem; aspect-ratio: 4 / 3; }
.team-card__media .card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card__name {
  margin: 0 0.9rem 0.1rem; font-family: var(--condensed); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.05rem;
}
.team-card__title {
  margin: 0 0.9rem 0.5rem; font-family: var(--condensed); font-weight: 700;
  color: var(--red); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.team-card__bio { margin: 0 0.9rem; font-style: italic; opacity: 0.85; font-size: 0.92rem; }

/* ---- Disclaimer page ---- */
.disclaimer-body { max-width: 42rem; margin: 1.5rem auto 0; }
.disclaimer-body p { margin: 0 0 1.1rem; line-height: 1.6; }
.disclaimer-signoff {
  display: flex; align-items: center; gap: 0.9rem; margin-top: 2rem;
  padding-top: 1.2rem; border-top: 1px dotted var(--ink);
}
.disclaimer-signoff__media { width: 4.5rem; height: 4.5rem; margin: 0; flex: none; }
.disclaimer-signoff__media .card__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.disclaimer-signoff__signed { margin: 0; font-style: italic; opacity: 0.75; }
.disclaimer-signoff__name { margin: 0.1rem 0 0; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; }
.disclaimer-signoff__title { margin: 0; font-family: var(--condensed); color: var(--red); font-size: 0.82rem; }

/* ---- Contact page ---- */
.contact-body { max-width: 34rem; margin: 1.5rem auto 0; text-align: center; }
.contact-profile { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.3rem; }
.contact-profile__media { width: 7rem; height: 7rem; margin: 0 0 0.6rem; }
.contact-profile__media .card__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.contact-profile__name { margin: 0; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; font-size: 1.1rem; }
.contact-profile__title { margin: 0.1rem 0 0; font-family: var(--condensed); color: var(--red); font-size: 0.85rem; }
.contact-copy p { text-align: left; line-height: 1.6; margin: 0 0 1rem; }
.contact-body > .btn-ctl { margin-top: 0.5rem; }

/* ---- Modal (reply to a lonely heart) ---- */
body.modal-open { overflow: hidden; }
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(20, 17, 13, 0.6); }
.modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 12px 34px rgba(20,17,13,0.28);
  padding: 1.2rem 1.3rem 1.3rem;
}
.modal__close {
  position: absolute; top: 0.4rem; right: 0.5rem; background: none; border: none; font-size: 1.6rem;
  line-height: 1; cursor: pointer; color: var(--ink); padding: 0.1rem 0.3rem;
}
.modal__close:hover { color: var(--red); }
.modal__title { font-family: var(--condensed); font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.3rem; margin: 0 1.5rem 0.3rem 0; }
.modal__sub { margin: 0 0 0.9rem; font-size: 0.88rem; opacity: 0.85; }
.modal__form label { display: block; font-family: var(--condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; margin-bottom: 0.7rem; }
.modal__form label small { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.7; }
.modal__form input, .modal__form textarea {
  display: block; width: 100%; margin-top: 0.2rem; padding: 0.45rem 0.55rem; font-family: var(--serif);
  font-size: 0.95rem; border: 1.5px solid var(--ink); background: #fffdf6; color: var(--ink); box-sizing: border-box;
}
.modal__form textarea { resize: vertical; }
.modal__actions { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 0.4rem; }
.btn-ctl--primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn-ctl--primary:hover { background: #a01f18; }
.modal__done { margin: 0.6rem 0 0; font-size: 0.95rem; border-top: 1px dotted var(--ink); padding-top: 0.7rem; }

@media (max-width: 720px) {
  .fmt--letters, .fmt--smallads, .fmt--toptips, .fmt--facts,
  .fmt--obituaries { column-width: auto; columns: 1; }
  /* Trim the gutters (not really the type) so the wrapped bar is 3 rows on a
     390px phone rather than 4 — measured, and worth 33px of above-the-fold space
     for a 0.04rem drop in size. */
  .sectionnav__link, .sectionnav__dropbtn { font-size: 0.70rem; padding: 0.25rem 0.45rem; }
}

/* On a phone the bar becomes a grid of buttons rather than a line of text links.
   Shrinking the type to force two rows was the wrong trade — it bought 28px of
   screen and cost legibility, which is the one thing a nav cannot spend. So the
   type goes back UP (0.62rem -> 0.72rem, nearly the 0.74rem desktop size) and the
   rows are squared off instead: `flex: 1 1 auto` lets every item grow, so each
   row is filled edge to edge and the ragged right-hand end disappears.
   Filling the rows also makes the JS balancer redundant here — it detects the
   grow and stands down (balanceSectionNav in js/shared.js).
   The borders are what make the extra row affordable: a bordered, filled button
   reads as a target at a glance, so three even rows scan faster than two ragged
   ones did. */
@media (max-width: 560px) {
  /* The masthead already closes with a 5px double rule; the nav's own 1px top
     rule sat directly under it, reading as an accidental double line. */
  .sectionnav { border-top: 0; margin-bottom: 0.5rem; }

  .sectionnav__inner { gap: 0.3rem; padding: 0.4rem 0.5rem; }

  .sectionnav__link, .sectionnav__dropbtn {
    flex: 1 1 auto;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.35rem;
    border: 1.5px solid var(--ink);
    border-bottom-width: 1.5px;          /* not the desktop 3px underline slot */
    background: var(--paper-2);
  }
  /* The dropdown's flex child is its wrapper, so the wrapper has to grow and the
     button inside it has to fill the wrapper, or About stays stubbornly narrow. */
  .sectionnav__item--dropdown { flex: 1 1 auto; display: flex; }
  .sectionnav__item--dropdown .sectionnav__dropbtn { width: 100%; }

  .sectionnav__link.is-active,
  .sectionnav__dropbtn[aria-expanded="true"] {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .sectionnav__link:hover { border-color: var(--red); color: var(--red); }
}
/* The narrowest phones fit one item fewer per row, which left a fourth row
   holding one or two items — and since the items grow to fill, a lone item
   becomes a full-width slab. 0.68rem squares it back to 5/4/4, and that is
   still essentially the size this bar shipped at before (0.70rem): the row is
   bought with 0.04rem, not with legibility. */
@media (max-width: 360px) {
  .sectionnav__link, .sectionnav__dropbtn { font-size: 0.68rem; padding: 0.4rem 0.2rem; }
  .sectionnav__inner { gap: 0.22rem; padding: 0.4rem 0.4rem; }
}

/* "NEW TODAY" flag on stories the daily job published on today's calendar date */
.card--fresh { position: relative; }
/* "REAL" flag on the group stories. Blue, not the red of NEW TODAY: red is the
   paper's colour for its own noise, and this badge means the opposite — that for
   once the thing described actually exists. Sits on the left so a story that is
   both real and new shows both badges without them overlapping. */
.card--real { position: relative; }
.card__real {
  position: absolute; top: -0.55rem; left: -0.4rem; z-index: 2;
  background: var(--blue); color: #fff;
  font-family: var(--condensed); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.68rem; line-height: 1;
  padding: 0.28rem 0.5rem;
}

/* Links inside article prose. Underlined and in the paper's red, because on a
   page that is otherwise entirely fictional a live link needs to look
   deliberate. */
.richlink {
  color: var(--red); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.richlink:hover { background: var(--red); color: var(--paper); text-decoration: none; }

/* The outbound box at the foot of a REAL story. */
.article__real {
  clear: both; margin: 1.6rem 0 0;
  border: 2px solid var(--blue); border-left-width: 8px;
  padding: 0.9rem 1.1rem; background: #fffdf6;
}
.article__real-flag {
  display: inline-block; background: var(--blue); color: #fff;
  font-family: var(--condensed); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.66rem; padding: 0.15rem 0.5rem; margin-bottom: 0.45rem;
}
.article__real-note { margin: 0 0 0.6rem; font-size: 0.95rem; }
.article__real-link {
  display: inline-block; font-family: var(--condensed); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem;
  text-decoration: none; color: var(--paper); background: var(--ink);
  border: 2px solid var(--ink); padding: 0.45rem 0.9rem;
}
.article__real-link:hover { background: var(--blue); border-color: var(--blue); }

.card__fresh {
  position: absolute; top: -0.55rem; right: -0.4rem; z-index: 2;
  background: var(--red); color: #fff;
  font-family: var(--condensed); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.68rem; line-height: 1;
  padding: 0.28rem 0.5rem;
}