/* ==========================================================================
   LIMM — Clinical Editorial
   news.css · the announcement ledger and the panel its chapter opens on.

   The .ledger rules below are copied from assets/css/home.css, where they are
   Home's own and this page cannot reach them. Home printed the same records in
   three columns; here each row may also carry a photograph and a source link,
   so the grid gains a column and the text cell gains something under it.
   Change one file and look at the other.
   ========================================================================== */

/* ---- The chapter ---------------------------------------------------------
   Its own tint in the midnight family, like every other chapter. The page
   class carries it so chapters.css's plain `.chapter` background cannot win
   on specificity, whichever stylesheet is read last. */
.news-page .chapter--news { background: #0b2230; }
.news-page .chapter--news .chapter-title { font-size: clamp(60px, 6.9vw, 118px); }
.news-composition { grid-template-columns: 1.25fr 1fr; }

/* The newest announcement, printed beside the title. news.js rewrites this
   from the record file; the markup carries the current one, so a reader with
   no JavaScript still opens on the same words. */
.news-latest { border-top: 1px solid #ffffff2e; padding-top: 26px; }
/* The photograph, when the newest record carries one, opens the panel. No
   intrinsic size is stored, so the frame holds the ratio and the panel cannot
   change height once the picture arrives; the cap keeps it from crowding out
   the sentence it belongs to. A hairline separates it from the date below. */
.news-latest__media {
  /* width is spelled out: with it left to auto, capping the height would make
     the ratio pull the frame in from the panel edge instead of cropping. */
  width: 100%;
  margin: 0 0 22px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 300px;
  background: #ffffff14;
}
.news-latest__media img { width: 100%; height: 100%; object-fit: cover; }
.news-latest__media + .news-latest__head { border-top: 1px solid #ffffff2e; padding-top: 22px; }
.news-latest__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.news-latest__date { color: var(--mint); font-size: 10px; }
/* The New chip is the paper component; on midnight it is redrawn rather than
   duplicated, so the archive below and this panel stay one thing. */
.news-page .chapter--news .chip { background: transparent; border-color: #b4ead85c; color: var(--mint); }
.news-latest__text {
  font-size: clamp(21px, 1.9vw, 32px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--paper);
  text-wrap: pretty;
}

/* ---- The archive --------------------------------------------------------- */
.news-archive { border-top: 1px solid var(--rule-soft); }
.ledger { border-top: 1px solid var(--rule); }
.ledger__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 200px 100px;
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: clamp(20px, 2vw, 30px);
  border-bottom: 1px solid var(--rule);
}
.ledger__date { color: var(--accent-ink); padding-top: 0.3em; }
.ledger__row:not(:first-child) .ledger__date { color: var(--muted); }
/* One step up — 18-23px rather than 17-21, the size Home settled on: most of
   these lines are Korean, where the fixed column is nearer 36 syllables than
   the 73 characters it holds in English. Leading stays at 1.6. */
.ledger__text {
  font-size: clamp(1.125rem, 1rem + 0.42vw, 1.4375rem);
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.ledger__body { min-width: 0; }
/* The source, under the sentence it belongs to. .mono is not in the markup
   because the link is written by the script as well as by hand; the treatment
   lives here so both spell it the same way. */
.ledger__link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
/* No intrinsic size on the record, so the frame holds the ratio instead and
   the row cannot change height once the photograph arrives. */
.ledger__media { margin: 0; align-self: start; }
.ledger__media a { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-2); }
.ledger__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--motion-ease); }
.ledger__media a:hover img { transform: scale(1.04); }
/* Placed rather than flowed: a row with no photograph leaves the third column
   empty instead of letting the chip slide into it. */
.ledger__flag { grid-column: 4; justify-self: end; }

@media (max-width: 767px) {
  .ledger__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 14px; }
  .ledger__date { grid-row: 1; grid-column: 1; }
  .ledger__flag { grid-row: 1; grid-column: 2; }
  .ledger__body { grid-column: 1 / -1; }
  .ledger__media { grid-column: 1 / -1; max-width: 320px; }
}

@media (max-width: 760px) {
  .news-latest { padding-top: 20px; }
  .news-latest__media { margin-bottom: 18px; max-height: 230px; }
  .news-latest__media + .news-latest__head { padding-top: 18px; }
  .news-latest__head { margin-bottom: 18px; }
  .news-latest__text { font-size: 18px; }
}