/* ===========================================================================
   fivemile-news.css

   The card variants only the news page uses. Everything else on that page is
   the shared system in fivemile-cards.css: .hd, .card-stub, .card-dept,
   .card-notice, .tag, .town-badge. Nothing here redefines any of those, and
   nothing here should be reached for by another page without moving it into
   the card file first.

   Fold it into fivemile-cards.css whenever you want one file. It is separate
   for now so the news rebuild could be dropped in and pulled back out without
   touching the card system.
   =========================================================================== */

/* --- beat colors ---------------------------------------------------------
   Moved to fivemile-cards.css, under .tag, when the archive page became the
   second page that renders a story row. Nothing else changed: the news page
   loads the card file first, so the same declarations apply from the same
   place at the same specificity. Add a new beat there, not here.
   ------------------------------------------------------------------------- */

/* --- the photograph on a story row ---------------------------------------
   The slot the date block occupies on a calendar stub: flush to the left edge,
   full height of the row, no radius of its own. That is what makes a row with
   a picture and a row without line up down the same edge. A rounded box
   floating inside the card was the first attempt and it broke the line.

   The picture is hotlinked from the outlet that published it and is never
   copied here. If it fails to load, the whole slot is removed and the row
   closes up. See the photograph policy in DECISIONS.md. */
.k-shot{flex:none;width:104px;align-self:stretch;position:relative;overflow:hidden;
  background:#e7dcc6}
.k-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.k-shot::after{content:"";position:absolute;inset:0;border-right:1px solid var(--fm-rule);
  pointer-events:none}
@media(max-width:600px){.k-shot{width:84px}}

/* --- the lead ------------------------------------------------------------
   One story gets the full width and the full picture. Everything under it is
   a row. The picture sits above the type on a phone and beside it on a desk,
   and the outlet is named on the picture either way.

   Hover matches every other card in the system: the border goes to the
   masthead brown and the headline goes red. */
.card-lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  background:var(--card);border:1px solid var(--fm-rule);border-radius:var(--fm-card-r);
  overflow:hidden;text-decoration:none;color:inherit;transition:border-color var(--ease)}
.card-lead:hover{border-color:var(--masthead);text-decoration:none}
.card-lead:hover h2{color:var(--red)}
.card-lead .l-img{position:relative;background:#e7dcc6;min-height:240px}
.card-lead .l-img img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.card-lead .l-credit{position:absolute;left:0;right:0;bottom:0;padding:14px 12px 8px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:linear-gradient(to top,rgba(28,18,8,.72),rgba(28,18,8,0))}
.card-lead .l-bd{padding:20px 22px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.card-lead .l-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-lead h2{font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.2;margin:0;transition:color var(--ease)}
.card-lead p{font-size:15.5px;line-height:1.62;color:var(--ink2);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-lead .l-src{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink3)}
.card-lead.no-photo{grid-template-columns:1fr}
.card-lead.no-photo .l-img{display:none}
.card-lead.no-photo .l-bd{padding:24px 26px}
@media(max-width:760px){
  .card-lead{grid-template-columns:1fr}
  .card-lead .l-img{min-height:0;aspect-ratio:16/9}
  .card-lead .l-bd{padding:16px 18px}
}

/* --- obituaries ----------------------------------------------------------
   Quieter than a news row on purpose. No photograph, no beat color, no
   headline weight. The name is the whole headline, the service is the useful
   part, and the link goes to the funeral home so a family reads condolences
   where they are expecting to find them. */
.card-obit{display:block;background:var(--card);border:1px solid var(--fm-rule);
  border-left:3px solid var(--masthead);border-radius:var(--fm-card-r);padding:16px 18px;
  text-decoration:none;color:inherit;transition:border-color var(--ease)}
.card-obit:hover{border-color:var(--masthead);text-decoration:none}
.card-obit .o-name{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0 0 4px}
.card-obit .o-line{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;color:var(--ink3);
  margin-bottom:8px}
.card-obit .o-svc{font-size:14.5px;line-height:1.55;color:var(--ink2);margin:0}
.card-obit .o-home{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--ink3);
  margin-top:10px;padding-top:9px;border-top:1px solid var(--fm-rule)}

/* --- a paywall marker ----------------------------------------------------
   Small enough to miss and clear enough to save a tap. */
.locked{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);border:1px solid var(--fm-rule);border-radius:999px;padding:2px 7px}

/* --- standing links and the sources note ---------------------------------
   Both are plain paper rather than cards: paper fill, hairline border, 14px
   radius, the same shell the about band and the send block use on the front
   page. Neither is a thing on the page, they are notes about it, and giving
   them a card treatment would put them in the same rank as the stories.

   The standing links are a directory, so they are set as columns of lookups
   with the note under each name rather than beside it. Three across on a
   desk, one on a phone, and every link clears the 44px tap target. */
.standing,.sources{background:var(--card);border:1px solid var(--fm-rule);
  border-radius:var(--fm-card-r);padding:20px 22px;margin-top:34px}
.standing h2,.sources h2{margin:0 0 8px;font-size:18px;font-weight:800;letter-spacing:-.015em}
.standing p,.sources p{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--ink2);max-width:68ch}
.standing p:last-child,.sources p:last-child{margin-bottom:0}
.standing a,.sources a{color:var(--red);font-weight:600}

.sources .outlets{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;color:var(--ink3);
  line-height:1.9;margin-top:12px;padding-top:12px;border-top:1px solid var(--fm-rule)}

.stand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 26px;margin-top:16px;
  padding-top:16px;border-top:1px solid var(--fm-rule)}
.stand-grid h3{margin:0 0 8px;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fm-muted)}
.stand-grid ul{list-style:none;margin:0;padding:0}
.stand-grid li{padding:3px 0 9px;border-bottom:1px solid var(--fm-rule)}
.stand-grid li:last-child{border-bottom:none}
/* The name is the link and the note under it is not, so the anchor is one
   line of type and would sit at 24px left alone. 44px with the type centred
   in it, because this whole block is a list of things somebody taps while
   standing in a yard. The note stays outside the link: it is context, and
   there is nothing to open by tapping a phone number written as text. */
.stand-grid li a{display:flex;align-items:center;min-height:44px;font-size:15px;
  font-weight:600;color:var(--ink);text-decoration:none;line-height:1.35}
.stand-grid li a:hover{color:var(--red)}
.stand-grid .n{display:block;font-size:13.5px;color:var(--fm-muted);line-height:1.45}
@media(max-width:820px){.stand-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.stand-grid{grid-template-columns:1fr;gap:18px}}