/* The news section: an index of cards and the article pages behind them.

   Same head treatment as the sixteen service pages — a navy typographic band
   rather than a photograph. The site's photographs were spent on the nine main
   pages, and a news article that gets a stock picture of a generic mine is
   claiming a relationship between the image and the story that does not exist.
   A dateline and a headline are the honest furniture for this. */

/* `section.newshead`, not `.newshead`. build.py's band system alternates a
   charcoal ground down the page by putting `.band` on every other top-level
   section, and `section.band` beats a bare class selector — which is why the
   service pages' heads declare navy and render charcoal. Rather than inherit
   that accident, this one wins the specificity fight on purpose: the header
   directly above it now ends in a navy rule, and the head reads as a
   continuation of it. */
section.newshead{
  background:var(--navy);
  border-bottom:4px solid var(--copper);
  box-shadow:0 20px 0 var(--navy);
  padding-block:clamp(38px,5vw,64px) clamp(30px,4vw,50px);
  color:#F2F5FA;
}
.newshead .crumb{
  font-family:var(--f-display);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(242,245,250,.6);margin-bottom:14px;
}
.newshead .crumb a{color:#F2F5FA;text-decoration:none;border-bottom:1px solid rgba(242,245,250,.4)}
.newshead .crumb a:hover{border-color:#F2F5FA}
.newshead .crumb span{margin-inline:8px;opacity:.5}
.newshead h1{font-size:clamp(1.9rem,4.2vw,3rem);max-width:24ch;color:#F2F5FA}
.newshead .lede{
  margin-top:14px;max-width:64ch;color:rgba(242,245,250,.85);
  font-size:clamp(.98rem,1.28vw,1.12rem);line-height:1.5;
}
.newshead .byline .on{
  color:rgba(242,245,250,.45);text-transform:none;letter-spacing:.02em;
  font-weight:500;
}
.newshead .byline{
  margin-top:20px;font-family:var(--f-display);font-size:.78rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(242,245,250,.62);
}

/* ---------- the filter bar ---------- */
/* Same furniture as the directory's toolbar, at a smaller scale: this list is
   six items, not two hundred and forty-six, so the controls should not look
   like an instrument panel. */
.nfilter{margin-bottom:clamp(18px,2.2vw,26px)}
.nfilter .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.nfilter .search{
  flex:1 1 260px;display:flex;align-items:center;gap:9px;
  background:var(--surface);border:1px solid var(--rule);border-radius:5px;
  padding:0 12px;min-height:42px;color:var(--ink-3);
}
.nfilter .search input{
  flex:1 1 auto;border:0;background:transparent;outline:0;
  font-family:var(--f-body);font-size:.97rem;color:var(--ink);min-width:0;
}
.nfilter .search:focus-within{border-color:var(--copper)}
.nfilter select{
  min-height:42px;padding:0 12px;border:1px solid var(--rule);border-radius:5px;
  background:var(--surface);color:var(--ink);
  font-family:var(--f-display);font-size:.88rem;font-weight:500;
}
.nfilter select:focus-visible{outline:2px solid var(--copper);outline-offset:1px}
.nfilter .count{
  font-family:var(--f-display);font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  margin-left:auto;padding-left:6px;
}
.nfilter .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.nfilter .chip{
  border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);
  border-radius:999px;padding:6px 13px;cursor:pointer;
  font-family:var(--f-display);font-size:.78rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.nfilter .chip:hover{border-color:var(--rule-strong);color:var(--ink)}
/* Pressed state carries colour as well as a border, because a chip row is
   scanned rather than read and a 1px difference does not register. */
.nfilter .chip[aria-pressed="true"]{
  background:var(--accent-solid);border-color:var(--accent-solid);color:#fff;
}
.nfilter .chip:focus-visible{outline:2px solid var(--copper);outline-offset:2px}

.nempty{
  margin-top:18px;padding:22px;border:1px dashed var(--rule-strong);
  color:var(--ink-2);font-size:1rem;
}
.nempty button{
  border:0;background:transparent;padding:0;cursor:pointer;
  color:var(--copper);font:inherit;text-decoration:underline;
}

/* ---------- the index ---------- */
/* Three columns, each card led by a picture. Stated at each width rather than
   derived from `auto-fit`, so the count is a decision rather than a
   side-effect of how wide the window happens to be: one column on a phone,
   two on a tablet or a narrow laptop, three once there is room for a card to
   still hold a readable picture and four or five lines of standfirst.

   Hairlines are drawn by an outline on each card rather than by the site's
   usual trick of a rule-coloured container showing through a 1px gap. The
   container trick assumes the cells fill the grid: four articles in three
   columns leave two empty cells, and an empty cell has nothing in it to cover
   the container, so the tail of the last row came out as a grey block. An
   outline takes no layout space, so the outlines of two neighbours meet
   inside the 1px gap and read as one line, while an empty cell contributes
   nothing at all. Any number of articles, any column count. */
.newslist{
  display:grid;grid-template-columns:1fr;gap:1px;
}
@media (min-width:700px){
  .newslist{grid-template-columns:1fr 1fr}
}
@media (min-width:1100px){
  .newslist{grid-template-columns:1fr 1fr 1fr}
}
.ncard{
  display:flex;flex-direction:column;background:var(--surface);
  outline:1px solid var(--rule);
  text-decoration:none;color:inherit;
  transition:background .16s ease;
}
.ncard:hover{background:var(--surface-2)}

/* The image slot. Fixed 16:9 whatever is put in it, so a photograph and a
   generated card graphic occupy exactly the same space and the grid never
   goes ragged. `object-fit:cover` means a photograph of another shape is
   cropped rather than letterboxed. */
.ncard .shot{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.ncard .shot{position:relative}
.ncard .shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease}

/* The date, over the top-left corner of the picture. Big enough to read at a
   glance across a grid, on its own solid ground rather than over bare
   photograph — these pictures range from a dark navy screenshot to a bright
   desert sky, and white type survives neither reliably. */
.ncard .stamp{
  position:absolute;top:0;left:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:74px;padding:10px 12px 11px;
  background:var(--navy);color:#F2F5FA;
  border-bottom:3px solid var(--copper);
  font-family:var(--f-display);line-height:1;
}
.ncard .stamp b{font-size:1.85rem;font-weight:800;letter-spacing:-.02em}
.ncard .stamp i{
  margin-top:5px;font-style:normal;font-size:.68rem;font-weight:700;
  letter-spacing:.12em;color:rgba(242,245,250,.78);
}
/* A hidden card must not hold its grid cell open. */
.ncard[hidden]{display:none}
.ncard:hover .shot img{transform:scale(1.03)}

/* A credit line under a card picture, for images that belong to somebody
   else. It sits outside the padded text block, tight under the image, so it
   reads as a caption on the picture rather than as the first line of the
   story. Small and muted — it has to be there, it does not have to compete. */
.ncard .cr{
  display:block;padding:7px clamp(18px,2.2vw,26px) 0;
  font-family:var(--f-display);font-size:.7rem;font-weight:500;
  letter-spacing:.02em;color:var(--ink-3);
}

/* The text block grows to fill the card so the "Read it" line sits on the
   baseline of every card in a row, whatever the standfirst length. */
.ncard .tx{
  display:flex;flex-direction:column;flex:1 1 auto;
  padding:clamp(18px,2.2vw,26px);
}
.ncard .meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  font-family:var(--f-display);font-size:.72rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
}
.ncard .meta .k{color:var(--copper)}
.ncard .meta time{color:var(--ink-3);font-weight:600}
.ncard .hd{
  display:block;margin-top:10px;
  font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;
  /* Smaller ceiling than the two-column version had: a third of the row is
     about 390px, and a 1.34rem headline ran to five lines in it. */
  font-size:clamp(1.05rem,1.15vw,1.2rem);line-height:1.26;color:var(--ink);
}
.ncard:hover .hd{color:var(--copper)}
.ncard .sf{
  display:block;margin-top:10px;color:var(--ink-2);
  line-height:1.55;font-size:.93rem;
}
.ncard .go{
  display:block;margin-top:auto;padding-top:16px;
  font-family:var(--f-display);font-size:.76rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--copper);
}

@media (prefers-reduced-motion:reduce){
  .ncard .shot img{transition:none}
  .ncard:hover .shot img{transform:none}
}

/* ---------- an article ---------- */
/* The lead photograph. Held to the same measure as the prose rather than run
   full-bleed: the article is a column of text and a picture wider than the
   column it introduces reads as a banner for the page instead of an
   illustration for the piece.

   The caption is not decoration. These are illustrative photographs, not
   pictures of the operation or the document in question, and a news page that
   does not say so is inviting the reader to assume otherwise. */
.lead{margin:0 0 clamp(26px,3vw,38px);max-width:900px}
.lead img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:var(--navy);border:1px solid var(--rule);
}
.lead figcaption{
  margin-top:9px;font-family:var(--f-display);font-size:.76rem;font-weight:500;
  letter-spacing:.01em;color:var(--ink-3);line-height:1.5;
}


.artbody{max-width:68ch}
.artbody .opener{font-size:1.14rem;line-height:1.6}
.artbody p + p{margin-top:1em}
.artbody h2{
  font-size:clamp(1.35rem,2.4vw,1.8rem);margin-top:1.7em;margin-bottom:.5em;
  max-width:28ch;
}
.artbody ul.plainlist{margin:1.1em 0 0;padding-left:1.15em;line-height:1.7}
.artbody ul.plainlist li{margin-bottom:.35em}
.artbody ul.plainlist li::marker{color:var(--copper)}
.artbody b{font-weight:600;color:var(--ink)}

/* A dated list of what happened, used where the sequence is the story. The
   dates are the load-bearing part, so they are set in the display face and
   given their own colour rather than being another bold run inside a
   sentence. */
.artbody ul.timeline-lite{
  margin:1.2em 0 0;padding:0;list-style:none;
  border-left:3px solid var(--copper);
}
.artbody ul.timeline-lite li{
  padding:0 0 1em 18px;line-height:1.6;
}
.artbody ul.timeline-lite li:last-child{padding-bottom:0}
.artbody ul.timeline-lite b:first-child{
  font-family:var(--f-display);font-weight:700;color:var(--ink);
  letter-spacing:.01em;
}

/* The box at the end of each piece: what it changes, or what is not yet on the
   record. Deliberately not styled as a pull quote — it is the part that tells
   a reader whether any of this reaches them. */
.callout{
  margin-top:2.2em;padding:clamp(18px,2.4vw,26px);
  background:var(--surface);border:1px solid var(--rule);
  border-left:4px solid var(--copper);
}
.callout p + p{margin-top:.9em}
.callout .eyebrow{margin-bottom:10px}

.srcbox{margin-top:clamp(34px,4vw,52px);max-width:76ch}
.srcbox .eyebrow{margin-bottom:12px}
.srcbox .srcnote{margin-top:12px;max-width:66ch}

.artnav{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  margin-top:clamp(30px,3.6vw,46px);
}
.artnav a{
  flex:1 1 220px;display:block;padding:15px 18px;
  background:var(--surface);border:1px solid var(--rule);
  text-decoration:none;color:var(--ink);
  font-family:var(--f-display);font-weight:600;
}
.artnav a:hover{border-color:var(--copper);color:var(--copper)}
.artnav .nx{text-align:right}
.artnav .k{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;
}