/* bulldial.com — news page. Extends bd.css; owns the front grid and
 * the river. The tape is a shell component (bd.css). Editorial rules, not cards: hierarchy comes from
 * type scale and hairlines, and no colour appears here that is not a
 * bd.css token. */

/* ── head ───────────────────────────────────────────────────────────── */

.news-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.news-head h1 { font-size: var(--t-h1); letter-spacing: -0.03em; }
.news-stamp { font-size: var(--t-xs); color: var(--ink-3); }
.news-stamp .news-dot { margin: 0 6px; }

.news-chips { margin-bottom: var(--sp-5); }

/* ── grid ───────────────────────────────────────────────────────────── */

.news-grid {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 880px) { .news-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* Every story is a link block; the whole rectangle is the target. */
.story { display: block; min-width: 0; }
.story:hover .story-h { color: var(--accent); }
.story-kicker {
  display: flex; align-items: baseline; gap: 7px;
  font-size: var(--t-label); font-weight: 650; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 7px; white-space: nowrap; overflow: hidden;
}
.story-kicker .src { color: var(--accent); }
.story-kicker .t { font-family: var(--font-num); letter-spacing: 0.02em; flex: none; }
.story-h {
  font-weight: 700; letter-spacing: -0.022em; color: var(--ink);
  transition: color var(--d-1) var(--smooth);
  text-wrap: balance;
}
.story-deck {
  margin-top: 8px; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── images ─────────────────────────────────────────────────────────
   The publisher's own art, hotlinked from the feed that offered it. A
   broken or blocked image removes itself; the text layout never waits
   on one. */

.story-img { margin: 0; min-width: 0; }
.story-img img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-2); background: var(--surface-2);
}
.story-body { display: block; min-width: 0; }

/* Lead: one story set large — text left, art right, art on top on a
   phone. */
.story.lead { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line-2); }
.story.lead .story-h { font-size: clamp(1.45rem, 1.05rem + 1.9vw, 2.2rem); line-height: 1.14; }
.story.lead .story-deck { font-size: var(--t-body); -webkit-line-clamp: 3; max-width: 62ch; }
.story.lead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: var(--sp-5); align-items: center;
}
.story.lead .story-body { order: 1; }
.story.lead .story-img { order: 2; }
.story.lead:not(:has(.story-img)) { grid-template-columns: 1fr; }
@media (max-width: 640px) {
  .story.lead { grid-template-columns: 1fr; gap: var(--sp-3); align-items: start; }
  .story.lead .story-img { order: 0; }
}

/* Secondary: two columns of headline-first entries under the lead. */
.news-second {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-5) var(--sp-6);
  padding-top: var(--sp-5);
}
@media (max-width: 560px) { .news-second { grid-template-columns: 1fr; } }
.news-second .story { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.news-second .story:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 560px) {
  .news-second .story:nth-last-child(2) { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-4); }
}
.news-second .story-h { font-size: 1.02rem; line-height: 1.3; }
.news-second .story-deck { -webkit-line-clamp: 2; }

/* Secondary thumbnails sit right of the text, 3:2, and disappear with
   their figure if the file never arrives. */
.news-second .story.has-img {
  display: grid; grid-template-columns: minmax(0, 1fr) 104px;
  gap: var(--sp-3); align-items: start;
}
.news-second .story.has-img .story-img img {
  aspect-ratio: 3 / 2; border-radius: var(--r-1);
}

/* ── rail ───────────────────────────────────────────────────────────── */

.news-rail {
  border-left: 1px solid var(--line);
  padding-left: var(--sp-5);
  position: sticky; top: calc(var(--bar-h) + var(--safe-t) + 38px + var(--sp-4));
  max-height: calc(100svh - var(--bar-h) - 38px - var(--sp-6));
  overflow-y: auto; scrollbar-width: none;
}
.news-rail::-webkit-scrollbar { display: none; }
@media (max-width: 880px) {
  .news-rail { border-left: 0; padding-left: 0; position: static; max-height: none; }
}
.rail-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: var(--sp-3);
}
.rail-head h2 { font-size: var(--t-h3); letter-spacing: -0.01em; }
.rail-list { list-style: none; }
.rail-list li { border-bottom: 1px solid var(--line); }
.rail-list li:last-child { border-bottom: 0; }
.rail-list a {
  display: grid; grid-template-columns: 3.2em minmax(0, 1fr);
  gap: var(--sp-3); padding: 10px 0;
}
.rail-list .t {
  font-family: var(--font-num); font-size: var(--t-xs); color: var(--ink-3);
  padding-top: 2px; white-space: nowrap;
}
.rail-list .h {
  font-size: var(--t-sm); font-weight: 550; line-height: 1.4; color: var(--ink);
  transition: color var(--d-1) var(--smooth);
}
.rail-list a:hover .h { color: var(--accent); }
.rail-list .s { color: var(--ink-3); font-weight: 450; }
#rail-more { margin-top: var(--sp-3); }

/* ── earlier ────────────────────────────────────────────────────────── */

.news-earlier { margin-top: var(--sp-7); }
.earlier-cols {
  columns: 2; column-gap: var(--sp-7); column-rule: 1px solid var(--line);
  margin-bottom: var(--sp-4);
}
@media (max-width: 720px) { .earlier-cols { columns: 1; } }
.earlier-cols .story {
  break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--line);
}
.earlier-cols .story-h { font-size: var(--t-sm); font-weight: 550; line-height: 1.4; }
.earlier-cols .story-kicker { margin-bottom: 3px; }

/* ── skeleton for the lead while the first payload is on the wire ───── */

.sk-lead { display: flex; flex-direction: column; gap: 12px; padding-bottom: var(--sp-5); }
.sk-lead .lead-line { height: 1.6em; }

.news-empty { color: var(--ink-3); font-size: var(--t-sm); padding: var(--sp-6) 0; }