/* THE FRONT PLATE: shared broadsheet structure for /stories and the homepage showcase. */
.fp-plate { color: var(--ink); }
.fp-band { width: 100%; }
.fp-band-lead {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  align-items: stretch;
}
.fp-band-lead.fp-lead-only { grid-template-columns: minmax(0, 1fr); }
.fp-lead { min-width: 0; padding-right: 24px; }
.fp-lead-only .fp-lead { padding-right: 0; }
.fp-rail {
  min-width: 0;
  padding-left: 24px;
  border-left: 1px solid var(--ink-rule);
}
/* THE MACHINE SPEAKS MONO (PLAN-web-vibe.md): the rail's label, its clocks and its UPDATE tag are
   the engine stating facts, so they wear the mono face. The clock is one of ember's named slots. */
.fp-latest-label {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink-rule);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.fp-latest-time {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 6px;
  color: var(--live);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.fp-latest-tag {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fp-latest-item .fp-rail-title { font-size: 16.5px; line-height: 1.25; }
.fp-entry {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* THE HOUSE GRADE (PLAN-web-vibe.md): front-page pictures arrive from everywhere, so the plate
   puts them all through one warm, slightly desaturated pass and a hairline. Article heroes are
   deliberately left ungraded — a story page is a document, not a brand surface. */
.fp-photo {
  display: block;
  width: 100%;
  border: 1px solid var(--ink-rule);
  object-fit: cover;
  filter: saturate(0.82) sepia(0.14) contrast(1.03);
}
/* The lead's picture is the page's one big picture: in the three-column package it carries the
   column, so it is set generously rather than at tile proportions (PLAN-web-edition-ux.md). */
.fp-lead-photo { aspect-ratio: 4 / 3; margin-bottom: 18px; }
.fp-picture-photo { aspect-ratio: 3 / 2; margin-bottom: 14px; }
.fp-title {
  margin: 0;
  color: var(--ink-strong, var(--ink));
  font-family: var(--font-display);
  font-weight: 560;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--hairline);
  text-underline-offset: 3px;
  transition: text-decoration-color 220ms ease;
}
.fp-entry:hover .fp-title,
.fp-entry:focus-visible .fp-title { text-decoration-color: currentColor; }
.fp-lead-title { font-size: clamp(34px, 3vw, 46px); line-height: 1.05; }
.fp-lead.is-typographic .fp-lead-title { font-size: clamp(40px, 3.6vw, 54px); }
.fp-rail-title { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.15; }
.fp-picture-title { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.16; }
.fp-brief-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
/* A dek is written for a human, so it reads in the serif with the headline above it. */
.fp-dek {
  display: -webkit-box;
  overflow: hidden;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  -webkit-box-orient: vertical;
}
.fp-lead-dek { font-size: 15.5px; line-height: 1.45; -webkit-line-clamp: 3; }
.fp-rail-dek { font-size: 13.5px; line-height: 1.45; -webkit-line-clamp: 3; }
.fp-picture-dek { font-size: 13.5px; line-height: 1.45; -webkit-line-clamp: 2; }
.fp-brief-dek { display: none; }
/* THE CLOCK IS THE KICKER: the engine's stamp rides above the headline the way a newspaper sets
   its eyebrow, in mono. The order is CSS-only, so the markup order stays reading order. */
.fp-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fp-meta {
  order: -1;
  margin: 0 0 7px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}
.fp-live {
  order: -2;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--live);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}
.fp-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  animation: fp-live-pulse 2.6s ease-in-out infinite;
}
@keyframes fp-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(156, 82, 64, 0.28); }
  55% { box-shadow: 0 0 0 5px rgba(156, 82, 64, 0); }
}
.fp-rail-entry { padding: 16px 0; }
.fp-rail-entry + .fp-rail-entry { border-top: 1px solid var(--ink-rule); }
.fp-band-pictures,
.fp-band-briefs {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--ink-rule);
}
.fp-band-pictures {
  display: grid;
  grid-template-columns: repeat(var(--fp-picture-count), minmax(0, 1fr));
}
.fp-picture { min-width: 0; padding-right: 20px; }
.fp-picture + .fp-picture {
  padding-left: 20px;
  border-left: 1px solid var(--ink-rule);
}
.fp-picture:last-child { padding-right: 0; }
.fp-band-briefs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fp-brief { min-width: 0; padding: 0 20px 18px; }
.fp-brief:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.fp-brief:nth-child(3n + 2),
.fp-brief:nth-child(3n + 3) { border-left: 1px solid var(--ink-rule); }
.fp-brief:nth-child(3n) { padding-right: 0; }
.fp-brief:nth-child(n + 4) { padding-top: 18px; border-top: 1px solid var(--ink-rule); }

@media (max-width: 1099px) and (min-width: 800px) {
  .fp-band-pictures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-picture:nth-child(3) {
    margin-top: 20px;
    padding-top: 20px;
    padding-left: 0;
    border-top: 1px solid var(--ink-rule);
    border-left: 0;
  }
  .fp-band-briefs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-brief:nth-child(n) { padding-right: 20px; padding-left: 20px; border-left: 0; }
  .fp-brief:nth-child(odd) { padding-left: 0; }
  .fp-brief:nth-child(even) { padding-right: 0; border-left: 1px solid var(--ink-rule); }
  .fp-brief:nth-child(n + 3) { padding-top: 18px; border-top: 1px solid var(--ink-rule); }
}

@media (max-width: 799px) {
  .fp-band-lead { display: block; }
  .fp-lead { padding-right: 0; }
  .fp-lead-photo { aspect-ratio: 3 / 2; margin-bottom: 14px; }
  .fp-lead-title,
  .fp-lead.is-typographic .fp-lead-title { font-size: 26px; line-height: 1.08; }
  .fp-rail {
    margin-top: 24px;
    padding: 18px 0 0;
    border-top: 1px solid var(--ink-rule);
    border-left: 0;
  }
  .fp-rail-title,
  .fp-picture-title,
  .fp-brief-title { font-size: 19px; line-height: 1.16; }
  .fp-band-pictures,
  .fp-band-briefs { display: block; margin-top: 24px; padding-top: 0; }
  .fp-picture,
  .fp-picture + .fp-picture,
  .fp-picture:last-child,
  .fp-brief:nth-child(n) {
    padding: 18px 0 0;
    border-top: 0;
    border-left: 0;
  }
  .fp-picture:first-child,
  .fp-brief:first-child { padding-top: 18px; }
  .fp-picture + .fp-picture,
  .fp-brief + .fp-brief {
    margin-top: 18px;
    border-top: 1px solid var(--ink-rule);
  }
  .fp-brief-title { display: block; overflow: visible; }
  .fp-brief-dek { display: -webkit-box; font-size: 13.5px; line-height: 1.45; -webkit-line-clamp: 3; }
}

/* ═══ THE EDITION UX (PLAN-web-edition-ux.md, 2026-07-29) ═════════════════════════════════════
   THE LEAD PACKAGE is a true three-column broadsheet band: col A the lead, col B ranks 2 and 3
   text-led, col C THE LATEST rail, with a column rule between every pair. The column COUNT rides
   in the markup (fp-cols-N) because a band with nothing to put in col B must close up rather than
   print an empty gutter. Every value here is a token the dark homepage showcase re-points, so the
   same plate reads correctly on cream and on charcoal. */
.fp-col { min-width: 0; }
.fp-cols-1 { grid-template-columns: minmax(0, 1fr); }
.fp-cols-2 { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
.fp-cols-3 { grid-template-columns: minmax(0, 43fr) minmax(0, 26fr) minmax(0, 31fr); }
.fp-col:not(:last-child) { padding-right: clamp(16px, 1.7vw, 26px); }
.fp-col + .fp-col {
  padding-left: clamp(16px, 1.7vw, 26px);
  border-left: 1px solid var(--ink-rule);
}
/* Column B's two entries are separated by the same hairline the rail uses between its rows. */
/* Column B flows from the top: stretching entries apart to fill a tall column manufactured dead
   chasms between headlines (worse than honest whitespace at the column's foot). */
.fp-col-b {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.fp-col-b .fp-entry + .fp-entry {
  padding-top: 18px;
  border-top: 1px solid var(--ink-rule);
}
/* Column B is the rail's role in a narrower measure, so it wears the rail's exact size: this
   rework introduces no new type sizes (PLAN-web-edition-ux.md: the masthead scale is LAW). */
.fp-second-title { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.16; }
.fp-second-dek {
  display: -webkit-box;
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-line-clamp: 3;
}
/* Machine data reads in one rhythm: the digits line up and the separator never shouts. */
.fp-clock { font-variant-numeric: tabular-nums; }
.fp-meta-sep { margin: 0 6px; opacity: 0.55; }
/* On a phone the rail is a glance with one door to the rest; on desktop the whole day is there. */
.fp-latest-all { display: none; }

/* EARLIER TODAY and PREVIOUS DAYS: the rest of the day as two ruled text columns. Real columns
   (not a grid) so the run balances itself however many stories the day filed. */
.fp-band-earlier,
.fp-band-previous {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-rule);
}
.fp-band-label {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}
.fp-band-label-quiet { color: var(--ink-muted); font-size: 10px; }
.fp-textrows {
  columns: 2;
  column-gap: clamp(24px, 3vw, 44px);
  column-rule: 1px solid var(--ink-rule);
}
.fp-textrow {
  padding: 13px 0;
  border-top: 1px solid var(--ink-rule);
  break-inside: avoid;
}
.fp-textrow-meta { margin: 0 0 4px; }
/* The text row IS the brief's role: same size, now under a dated label in a ruled column. */
.fp-textrow-title { font-size: 17px; line-height: 1.22; }
.fp-textrows-quiet .fp-textrow { padding: 11px 0; }
.fp-textrows-quiet .fp-textrow-title { font-size: 16.5px; }

/* At tablet the package folds A+B over C: two reading columns, the rail beneath them. */
@media (max-width: 1099px) and (min-width: 800px) {
  .fp-cols-3 { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
  .fp-cols-3 .fp-col-c {
    grid-column: 1 / -1;
    margin-top: 22px;
    padding: 20px 0 0;
    border-top: 1px solid var(--ink-rule);
    border-left: 0;
  }
}

@media (max-width: 799px) {
  /* THE PHONE ORDER (PLAN-web-edition-ux.md): the lead, then what is newest, then ranks 2-3. */
  .fp-package { display: flex; flex-direction: column; }
  .fp-package .fp-col,
  .fp-package .fp-col + .fp-col {
    padding-right: 0;
    padding-left: 0;
    border-left: 0;
  }
  .fp-col-c {
    order: 2;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--ink-rule);
  }
  .fp-col-b {
    order: 3;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--ink-rule);
  }
  .fp-second-title { font-size: 19px; line-height: 1.16; }
  .fp-col-c .fp-latest-item:nth-of-type(n + 5) { display: none; }
  .fp-latest-all {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-top: 4px;
    border-top: 1px solid var(--ink-rule);
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .fp-textrows { columns: 1; column-rule: 0; }
  /* 44px of tap on every row at 390 (PLAN-web-edition-ux.md's interaction bar). */
  .fp-textrow { padding: 14px 0; }
  .fp-textrow-title { font-size: 19px; }
  .fp-textrows-quiet .fp-textrow-title { font-size: 17px; }
}