@layer route {
/* ═══════════════════════════════════════════════════════════════════
   ROUTE: FRONT PAGE — "The Broadsheet"
   Type-led. The lead is set in display serif at editorial scale; art
   supports rather than leads. Everything below is a rhythm of rules
   and headlines rather than a wall of boxes.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Newswire ticker ──────────────────────────────────────────────── */
/* The marquee needs horizontal room to read as a wire. On a phone it
   shows two or three words at a time, animates continuously in the
   reader's peripheral vision, and costs a composited layer on the
   scroll path. Hidden below 48rem — the headlines it carries are all
   in The Rundown further down the same page. */
.fp-wire-strip {
  display: none;
  border-block-end: 1px solid var(--rule);
  background: var(--surface);
  overflow: hidden;
}
@media (width > 48rem) {
  .fp-wire-strip { display: block; }
}
.fp-wire-strip__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  block-size: 2.75rem;
}
.fp-wire-strip__label {
  flex: none;
  position: relative;
  z-index: 2;
  padding-inline-end: var(--s-4);
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--tdn-red);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.fp-wire-strip__label::before {
  content: "";
  inline-size: 0.5em; block-size: 0.5em;
  border-radius: 50%;
  background: currentColor;
  animation: tdn-pulse 2s var(--ease) infinite;
}
/* The track has to scroll inside its own clipping box. In 4.0.0 the
   label and the track were flex siblings sharing one overflow context,
   so translating the track slid the headlines straight over the
   "Newswire" label. */
.fp-wire-strip__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 3rem), transparent);
}
.fp-wire-strip__track {
  display: flex;
  width: max-content;
  gap: var(--s-8);
  white-space: nowrap;
  animation: tdn-marquee 90s linear infinite;
}
.fp-wire-strip:hover .fp-wire-strip__track,
.fp-wire-strip:focus-within .fp-wire-strip__track { animation-play-state: paused; }
@keyframes tdn-marquee { to { translate: -50% 0; } }
.fp-wire-strip__item {
  font-size: var(--step--1);
  color: var(--fg-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.fp-wire-strip__item .tdn-kicker { flex: none; }
@media (prefers-reduced-motion: reduce) {
  .fp-wire-strip__track { animation: none; }
  .fp-wire-strip__viewport { overflow-x: auto; scrollbar-width: none; }
}

/* ── The front: lead + wire + most read ───────────────────────────── */
.fp-front {
  display: grid;
  gap: var(--gap-card) clamp(1.5rem, 0.5rem + 3vw, 3rem);
  padding-block-start: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
@media (width >= 60rem) {
  .fp-front {
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    align-items: start;
  }
  .fp-front__lead   { grid-column: 1; }
  .fp-front__aside  { grid-column: 2; grid-row: 1 / span 2; }
  .fp-front__wire   { grid-column: 1; }
}

/* ── Lead package ─────────────────────────────────────────────────────
   The picture sits beside the headline rather than under it in a
   cinematic band. The band was a magazine convention that assumes wide
   landscape photography; this library is publicity stills and artist
   portraits, so it was cropping the lead to 28% of the frame.

   The slot takes its ratio from the image itself (--lead-ratio, set
   per-post in front-page.php and clamped in tdn_image_ratio), so a
   portrait reads as a portrait and a landscape as a landscape. */
.fp-lead {
  position: relative;
  display: grid;
  gap: var(--s-5);
}
.fp-lead__text {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  min-width: 0;
}
/* 4.0.0 set this to --step-6, which resolves against the VIEWPORT.
   At 1440px that is 76.8px inside a 774px column — a five-line
   headline that pushed the dek and byline off the first screen. The
   lead column is roughly 60% of the page, so the scale is capped to
   suit the column it actually occupies. */
.fp-lead__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.875rem, 1.35rem + 2.2vw, 3.5rem);
  line-height: var(--lh-flat);
  letter-spacing: -0.018em;
  color: var(--fg);
  text-wrap: balance;
}
.fp-lead__headline a:hover { color: var(--accent); }
.fp-lead__dek {
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3rem);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  max-inline-size: 46ch;
}
.fp-lead__art {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-sunken);
  /* The image's own ratio, or 4:3 when there is no metadata to read. */
  aspect-ratio: var(--lead-ratio, 4 / 3);
  order: -1;
}
.fp-lead__art img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Faces sit in the upper half of a publicity still far more often
     than dead centre, so a portrait crops from slightly above middle. */
  object-position: 50% 42%;
}

@media (width >= 60rem) {
  .fp-lead {
    /* Text takes the majority; the art column is capped so a modest
       source file is never stretched across it. At 1240px the art lands
       around 320px, comfortably inside a 768px `medium_large`. */
    grid-template-columns: minmax(0, 1fr) clamp(15rem, 25%, 24rem);
    column-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    align-items: center;
  }
  .fp-lead__text { grid-column: 1; grid-row: 1; }
  .fp-lead__art  { grid-column: 2; grid-row: 1; order: 0; }

  /* A lead with no picture should not leave a gap where one would be. */
  .fp-lead:not(:has(.fp-lead__art)) { grid-template-columns: minmax(0, 1fr); }
}

/* On a phone the picture leads, capped so a tall portrait cannot push
   the headline off the first screen. */
@media (width < 60rem) {
  .fp-lead__art { max-block-size: 62vh; }
}
.fp-lead__readthrough {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--accent);
  min-height: var(--target-min);
}
.fp-lead__readthrough::after { content: "→"; transition: translate var(--t-fast) var(--ease); }
.fp-lead:hover .fp-lead__readthrough::after { translate: 3px 0; }

/* Secondary wire under the lead */
.fp-wire {
  display: grid;
  gap: 0;
  border-block-start: 2px solid var(--fg);
  margin-block-start: var(--s-4);
}
.fp-wire__item {
  position: relative;
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-block-end: 1px solid var(--rule-soft);
}
@media (width >= 40rem) {
  .fp-wire { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); }
  .fp-wire__item:nth-child(odd) { border-inline-end: 1px solid var(--rule-soft); padding-inline-end: var(--s-8); }
}
.fp-wire__headline { font-size: var(--step-1); line-height: var(--lh-tight); }

/* Most read rail */
.fp-mostread {
  padding: var(--s-6);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  display: grid;
  gap: var(--s-5);
}
.fp-mostread__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.fp-mostread__title {
  font-family: var(--font-head);
  font-size: var(--step-2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}
.fp-mostread__window { font-size: var(--step--2); color: var(--fg-faint); text-transform: uppercase; letter-spacing: var(--tracking-kicker); font-weight: 700; }
.fp-mostread__list { counter-reset: mostread; display: grid; gap: var(--s-5); }
.fp-mostread__item {
  position: relative;
  counter-increment: mostread;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.fp-mostread__item::before {
  content: counter(mostread);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 0.9;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}
.fp-mostread__headline { font-size: var(--step-0); line-height: var(--lh-snug); font-weight: 700; }
.fp-mostread__meta { display: flex; align-items: center; gap: var(--s-2); margin-block-start: 0.3em; }
.fp-mostread__bar {
  grid-column: 2;
  block-size: 3px;
  border-radius: 2px;
  background: var(--rule);
  overflow: hidden;
  margin-block-start: var(--s-2);
}
.fp-mostread__bar span {
  display: block;
  block-size: 100%;
  inline-size: var(--share, 0%);
  background: linear-gradient(90deg, var(--tdn-red), var(--tdn-gold));
  border-radius: inherit;
}
.fp-hot {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--tdn-red);
}

/* ── The Rundown: dense river ─────────────────────────────────────── */
.fp-rundown { display: grid; gap: 0; }
.fp-rundown__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  gap: var(--s-5);
  align-items: start;
  padding-block: var(--s-6);
  border-block-end: 1px solid var(--rule-soft);
}
@media (width >= 48rem) {
  .fp-rundown__item { grid-template-columns: 8rem minmax(0, 1fr) 12rem; }
  .fp-rundown__stamp { grid-column: 1; }
  .fp-rundown__body  { grid-column: 2; }
  .fp-rundown__art   { grid-column: 3; }
}
.fp-rundown__stamp {
  display: none;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  padding-block-start: 0.3em;
}
@media (width >= 48rem) { .fp-rundown__stamp { display: block; } }
.fp-rundown__body { display: grid; gap: var(--s-2); min-width: 0; }
.fp-rundown__headline { font-size: var(--step-1); }
.fp-rundown__dek {
  font-size: var(--step--1);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fp-rundown__art {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-sunken);
}
.fp-rundown__art img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ── Category sections ────────────────────────────────────────────── */
.fp-cat { display: grid; gap: var(--gap-card); }
@media (width >= 52rem) {
  .fp-cat { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .fp-cat__list { border-inline-start: 1px solid var(--rule); padding-inline-start: var(--gap-card); }
}
.fp-cat__lead { position: relative; display: grid; gap: var(--s-3); }
.fp-cat__lead-art {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-sunken);
}
.fp-cat__lead-art img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--t-slow) var(--ease-out); }
.fp-cat__lead:hover .fp-cat__lead-art img { scale: 1.035; }
.fp-cat__lead-headline { font-size: var(--step-3); font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); }
.fp-cat__lead-dek { font-size: var(--step--1); color: var(--fg-muted); line-height: var(--lh-snug); }
.fp-cat__list { display: grid; gap: 0; align-content: start; }

/* Section rule takes the category colour. */
.fp-section .tdn-section__head { border-block-end-color: var(--cat, var(--fg)); }
.fp-section .tdn-section__title { color: var(--fg); }

/* Paged (page 2+) heading */
.fp-paged__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: var(--lh-tight);
}
.fp-paged__standfirst { color: var(--fg-muted); font-size: var(--step-0); margin-block-start: var(--s-2); }
}