/* 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;
}

.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; }
.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;
}
.article__flash {
  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.8rem;
  padding: 0.3rem 0.8rem; margin: 1.2rem 0;
}

.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;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sectionnav__inner {
  display: flex;
  gap: 0.15rem;
  justify-content: center;
  min-width: max-content;
  padding: 0.35rem 0.25rem;
}
.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);
}

/* -- "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, because that container's `overflow-x: auto` forces overflow-y to
   clip too, which silently clipped an absolutely-positioned menu nested inside it. -- */
.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; }
/* 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; }
  .sectionnav__inner { justify-content: flex-start; }
}

/* "NEW TODAY" flag on stories the daily job published on today's calendar date */
.card--fresh { position: relative; }
.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;
}