/*
 * THE CLEAN EDITION
 * One clear hero, one consistent card row, then a quiet continuation. The data order stays
 * chronological and complete; presentation never invents a second ranking.
 */

.fp-plate {
  --fp-width: 1240px;
  --fp-ground: var(--paper);
  --fp-card: var(--paper);
  --fp-line: color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink);
}

/* The reader front and About showcase use one article-paper surface. */
.front-main .fp-plate {
  --fp-card: var(--paper);
  --fp-line: color-mix(in srgb, var(--ink) 11%, transparent);
}

.fp-band,
.fp-card-grid,
.fp-stream {
  width: min(100%, var(--fp-width));
  margin-inline: auto;
}

.fp-entry {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--fp-line);
  border-radius: 16px;
  background: var(--fp-card);
  box-shadow: 0 1px 1px rgba(28, 24, 20, 0.02);
  color: inherit;
  text-decoration: none;
  transition: border-color 220ms ease, box-shadow 300ms ease, transform 300ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

.fp-entry:hover,
.fp-entry:focus-visible {
  border-color: color-mix(in srgb, var(--ink) 23%, transparent);
  box-shadow: 0 16px 34px rgba(40, 34, 27, 0.075);
  transform: translateY(-3px);
}

.front-main .fp-entry {
  border-color: var(--fp-line);
  box-shadow: 0 8px 26px rgba(40, 34, 27, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
}

.front-main .fp-entry:hover,
.front-main .fp-entry:focus-visible {
  border-color: color-mix(in srgb, var(--ink) 20%, transparent);
  box-shadow: 0 22px 54px rgba(40, 34, 27, 0.105), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-4px);
}

.fp-media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 5%, var(--fp-ground));
}

.fp-media::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(25, 22, 19, 0.07);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.fp-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.84) contrast(1.015);
  transform: scale(1.001);
}

/* A portrait cover's face lives in its top third; the tile's fixed crop anchors there instead of
   the center, which on a tall portrait is a chin (PG17, 2026-08-05). The renderer marks the class
   from the measured dimensions the engine stamps on the payload. */
.fp-photo.is-portrait { object-position: 50% 12%; }

.front-main .fp-photo { filter: saturate(0.92) contrast(1.01); }

.fp-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fp-title {
  margin: 0;
  color: var(--ink-strong, var(--ink));
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
}

/* THE THREE STATES (2026-08-05): normal rows keep the clock alone; UPDATED and DEVELOPING wear
   the mono state line, and the delta line beneath the copy says exactly what changed. */
.fp-state {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fp-state .fp-state-word { color: var(--live); }

.fp-delta {
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
}

/* The delta-in-the-dek's LATEST lead-in: the one indicator that this line is the update. */
.fp-dek-latest {
  margin-right: 6px;
  color: var(--live);
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fp-dek {
  display: -webkit-box;
  overflow: hidden;
  margin: 20px 0 0;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
}

.fp-meta {
  margin: 22px 0 0;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-transform: none;
}

.fp-clock { font-variant-numeric: tabular-nums; }
.fp-meta-sep { margin: 0 7px; opacity: 0.55; }

.fp-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  animation: fp-live-pulse 2.6s ease-in-out infinite;
}

/* Hero */
.fp-band-lead { padding: clamp(26px, 3vw, 42px) 0 clamp(36px, 4vw, 54px); }

.fp-lead {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
  gap: clamp(44px, 5vw, 72px);
  padding: clamp(24px, 2.6vw, 34px);
}

.front-main .fp-lead {
  padding: clamp(28px, 3vw, 40px);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 24px 68px rgba(46, 39, 32, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.fp-lead .fp-copy {
  grid-column: 1;
  grid-row: 1;
  justify-content: center;
  padding: clamp(6px, 0.8vw, 12px) 0 clamp(6px, 0.8vw, 12px) clamp(4px, 0.5vw, 8px);
  animation: fp-arrive-copy 560ms 60ms both cubic-bezier(0.22, 0.72, 0.28, 1);
}

.fp-lead-media {
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 16 / 11;
  border-radius: 12px;
  animation: fp-arrive-media 620ms both cubic-bezier(0.22, 0.72, 0.28, 1);
}

.front-main .fp-lead-media {
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(37, 32, 27, 0.11);
}

.fp-lead-title {
  max-width: 14ch;
  font-size: clamp(42px, 3.7vw, 58px);
  line-height: 1.01;
}

.front-main .fp-lead-title { font-weight: 480; }

.fp-lead-dek { max-width: 46ch; -webkit-line-clamp: 3; }

.fp-lead.is-typographic {
  display: block;
  max-width: 900px;
  padding: clamp(38px, 5vw, 68px);
}

.fp-lead.is-typographic .fp-copy { padding: 0; }
.fp-lead.is-typographic .fp-lead-title { max-width: 15ch; font-size: clamp(52px, 6vw, 78px); }

/* Three simple cards */
.fp-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  padding: 0 0 clamp(48px, 5vw, 68px);
}

.front-main .fp-card-grid { gap: clamp(18px, 2.2vw, 28px); }

.fp-card {
  display: flex;
  border-radius: 14px;
  flex-direction: column;
}

.front-main .fp-card {
  border-radius: 18px;
  animation: fp-tile-arrive 540ms both cubic-bezier(0.22, 0.72, 0.28, 1);
}

.front-main .fp-card:nth-child(2) { animation-delay: 70ms; }
.front-main .fp-card:nth-child(3) { animation-delay: 140ms; }

.fp-card-media { aspect-ratio: 16 / 8.8; }
.fp-card-media,
.fp-card-media::after { border-radius: 13px 13px 0 0; }

.front-main .fp-card-media,
.front-main .fp-card-media::after { border-radius: 17px 17px 0 0; }

.fp-card .fp-copy {
  min-height: 176px;
  padding: 18px 18px 16px;
}

.front-main .fp-card .fp-copy { padding: 20px 20px 18px; }

.fp-card-title { font-size: clamp(21px, 1.75vw, 27px); line-height: 1.08; }
.fp-card .fp-meta { margin-top: auto; padding-top: 20px; }

/* THE PHOTO-LESS CARD RESERVES NO PHOTO (2026-08-07). A card the engine deliberately ran
   typographic — display.showHero false, the earned-art floor (engine/params.ts rowPhotoFloor) —
   used to hold a FIXED 290px copy block open while `.fp-card .fp-meta`'s `margin-top: auto`
   pinned the clock to its floor. An auto margin outranks justify-content, so the words never
   moved down together: the headline stayed at the top, the clock dropped to the bottom, and the
   ~200px a photograph would have filled opened between them as a void that read as a broken
   image well — the exact opposite of the deliberate no-art tile the law intends.
   The card now HUGS ITS COPY FROM THE TOP and reserves nothing of its own, the same way the
   typographic lead does. Top, not bottom, on purpose: bottom-aligning would park the leftover
   height in the exact band where a sibling card shows its photograph, which is the broken-image
   reading all over again. Words first, then the card ends — a short card in a tall row. */
.fp-card.is-typographic .fp-copy { min-height: 0; }
.fp-card.is-typographic .fp-meta { margin-top: 0; }

/* Remaining stories */
.fp-stream {
  display: grid;
  gap: 14px;
  margin-top: 4px;
  padding-bottom: 12px;
}

.front-main .fp-stream { gap: 12px; }

.fp-stream::before {
  display: block;
  padding: 24px 0 10px;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  content: "More from today";
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fp-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 17vw, 230px);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  min-height: 132px;
  padding: 18px;
  border-radius: 12px;
}

.front-main .fp-story {
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(40, 34, 27, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.fp-story.is-typographic { grid-template-columns: minmax(0, 1fr); }
.fp-story-media { grid-column: 2; grid-row: 1; aspect-ratio: 16 / 9; border-radius: 10px; }
.fp-story .fp-copy { grid-column: 1; grid-row: 1; }
/* The stream label announces the continuation once. The Briefly strip may split the stream in two,
   and a second "More from today" under it would be the page repeating itself. */
.fp-stream ~ .fp-stream::before { content: none; padding: 0; }

/* THE BRIEFS STRIP (2026-08-12): the stories the editor sized short. Headline and clock, nothing
   else — a brief that grew a photo or a dek would be the card the editor declined to give it. */
.fp-briefly {
  width: min(100%, var(--fp-width));
  margin-inline: auto;
  padding: 18px 0 17px;
  border-block: 1px solid var(--fp-line);
}

.fp-briefly-head {
  margin: 0 0 13px;
  color: var(--live);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.fp-briefly-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }

.fp-brief {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 3vw, 40px);
  padding: 2px 0;
  color: inherit;
  text-decoration: none;
}

.fp-brief:hover .fp-brief-title,
.fp-brief:focus-visible .fp-brief-title { text-decoration: underline; }

.fp-brief-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink-strong, var(--ink));
  font-family: var(--font-display);
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 450;
  font-optical-sizing: auto;
  letter-spacing: -0.018em;
  line-height: 1.16;
  text-wrap: pretty;
}

.fp-brief .fp-clock {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: nowrap;
}

.fp-story-title { max-width: 27ch; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.07; }
.fp-story-dek { max-width: 66ch; margin-top: 10px; font-size: 13.5px; -webkit-line-clamp: 2; }
.fp-story .fp-meta { margin-top: 12px; }

@keyframes fp-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(156, 82, 64, 0.28); }
  55% { box-shadow: 0 0 0 6px rgba(156, 82, 64, 0); }
}

@keyframes fp-arrive-copy {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fp-arrive-media {
  from { opacity: 0; transform: translateY(7px) scale(0.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fp-tile-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .fp-lead { grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr); gap: 34px; }
  .fp-lead-title { font-size: clamp(38px, 5vw, 48px); }
  .fp-card-grid { gap: 16px; }
  .fp-card .fp-copy { min-height: 168px; padding: 16px; }
}

@media (max-width: 799px) {
  .fp-band-lead { padding: 20px 0 32px; }

  .fp-lead {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px;
  }

  .front-main .fp-lead {
    padding: 14px 14px 18px;
    border-radius: 18px;
  }

  .fp-lead-media { order: -1; aspect-ratio: 4 / 3; border-radius: 12px; }
  .fp-lead .fp-copy { padding: 2px 3px 4px; }
  .fp-state { margin-bottom: 10px; }
  .fp-lead-title,
  .fp-lead.is-typographic .fp-lead-title { max-width: none; font-size: clamp(36px, 10.2vw, 44px); }
  .fp-lead-dek { margin-top: 16px; font-size: 14px; }
  .fp-lead .fp-meta { margin-top: 18px; }
  .fp-lead.is-typographic { padding: 32px 24px; }

  .fp-card-grid {
    display: flex;
    gap: 16px;
    width: calc(100% + var(--container-gutter));
    margin-right: calc(-1 * var(--container-gutter));
    padding: 0 var(--container-gutter) 42px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .fp-card-grid::-webkit-scrollbar { display: none; }
  .fp-card { flex: 0 0 min(82vw, 310px); scroll-snap-align: start; }
  .front-main .fp-card { border-radius: 16px; }
  .fp-card .fp-copy { min-height: 166px; }
  .fp-card-title { font-size: 24px; }

  .fp-stream { gap: 12px; margin-top: 0; }
  .fp-story { grid-template-columns: minmax(0, 1fr) 104px; gap: 14px; min-height: 112px; padding: 14px; }
  .fp-story-media { aspect-ratio: 1 / 1; border-radius: 8px; }
  .fp-story-title { font-size: 21px; }
  .fp-story-dek { display: none; }
  .fp-story .fp-meta { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-entry { transition: none; }
  .fp-entry:hover,
  .fp-entry:focus-visible { transform: none; }
  .fp-live-dot { animation: none; }
  .fp-lead .fp-copy,
  .fp-lead-media,
  .front-main .fp-card { animation: none; }
  .fp-card-grid { scroll-behavior: auto; }
}
.section-picker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: min(100% - 2rem, 1180px);
  margin: 1rem auto 1.75rem;
  font: 600 0.75rem/1.2 var(--font-ui);
  color: var(--ink-muted);
}

.section-picker span {
  margin-right: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.section-picker a {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--ink-rule);
  border-radius: 999px;
  color: var(--ink-muted);
  text-decoration: none;
}

.section-picker a[aria-current="true"] {
  border-color: var(--ink);
  color: var(--ink);
}