/* Newspaper treatment for /news/*. Reuses the /guides class API (hero, section, num,
   lede, tbl, note, film, sub-blk) so an article can move between sections by swapping
   this stylesheet in. Overrides only what makes news look like news. */
@import url("/assets/guide.css?v=2");

:root{ --serif: Georgia,"Times New Roman",Times,serif; }

/* --- Masthead (news index) --- */
.masthead{ text-align:center; border-top:3px double var(--line2);
  border-bottom:3px double var(--line2); padding:24px 0 18px; margin:6px 0 4px }
.masthead .name{ font-family:var(--serif); font-weight:700; color:var(--white);
  font-size:clamp(34px,7vw,60px); letter-spacing:.01em; line-height:1 }
.masthead .name b{ color:var(--teal); font-weight:700 }
.masthead .strap{ font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--dim); margin-top:12px }

/* --- News headlines are SERIF, not mono (the main visual tell) --- */
h1{ font-family:var(--serif); letter-spacing:0; font-weight:700; color:var(--white);
  font-size:clamp(30px,5.4vw,46px); line-height:1.12 }
.film h3, .sub-blk h2{ font-family:var(--serif); letter-spacing:0 }
section h2{ font-family:var(--serif); letter-spacing:0; font-weight:700; color:var(--white);
  font-size:26px }
section h3{ font-family:var(--serif); letter-spacing:0 }

/* --- Dateline above an article headline --- */
.dateline{ font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber) }
.hero .num{ color:var(--amber) }

/* --- Story list on the index (image-forward) --- */
.stories{ display:grid; gap:28px; margin-top:8px }
.story{ display:grid; grid-template-columns:210px 1fr; gap:22px; align-items:start;
  text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:26px }
.story.lead{ grid-template-columns:1fr; gap:14px; border-bottom:2px solid var(--line2);
  padding-bottom:30px }
.story .thumb{ aspect-ratio:3/2; background:linear-gradient(135deg,#12151b,#1c2129);
  border:1px solid var(--line); border-radius:3px; overflow:hidden }
.story.lead .thumb{ aspect-ratio:21/9 }
.story .thumb img{ width:100%; height:100%; object-fit:cover }
.story .kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber) }
.story h3{ font-family:var(--serif); color:var(--white); font-weight:700; line-height:1.18;
  font-size:20px; margin:7px 0 8px }
.story.lead h3{ font-size:clamp(26px,4.2vw,40px) }
.story p{ color:var(--dim); font-size:15px; margin:0; line-height:1.55 }
.story .date{ font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--dim); margin-top:9px }
.story:hover h3{ color:var(--teal) }

/* --- Optional lead image at the top of a news article --- */
.leadimg{ margin:22px 0 6px; border:1px solid var(--line); border-radius:3px; overflow:hidden }
.leadimg img{ width:100%; display:block }
.leadimg figcaption{ font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--dim); padding:8px 12px; border-top:1px solid var(--line); background:#0d0f14 }

@media(max-width:560px){ .story{ grid-template-columns:1fr } }

/* --- A story with no thumbnail. --- */
/* ⚠️ .story is a two-column grid (210px thumb + 1fr text). A card with no .thumb child puts its
   text INTO the 210px image column and it renders as a squeezed ribbon. That is what happened on
   8 Aug when five pieces were moved in from /guides/ without artwork. This is the actual
   fallback: collapse to one column. Add `nothumb` to the class when there is no image. */
.story.nothumb{ grid-template-columns:1fr }