/* THE NEWS, ONE STYLESHEET FOR BOTH DOORS (6 November 2026). kasq.uk/news
   and the app's News view (#tool=news) draw the same server-rendered
   markup, so they wear the same rules from this one file, served at
   /news/news.css on both hosts. Moved here, rule for rule, from the
   NEWS_CSS block that kasq-site.mjs used to inline in every news page.
   ONLY var() HERE, NEVER A HEX: the page that links this file defines the
   tokens. The app's styles.css has them all; the site's shell has its own
   :root and the news pages add the four the site never needed before the
   news chips (--picked, the amber trio, --mono - the app's values, copied
   in kasq-site.mjs NEWS_TOKENS). The few shell rules the markup leans on
   (.cta, .sub, h1, h2) are each host's own: the site's shell, and a
   #news-view block in the app's styles.css. */
/* THE LIST IS AS WIDE AS THE APP'S WIDE VIEW (1180px, the take-5
   canvas in styles.css); the article stays a 760px reading column. */
.wrap.news-wide { max-width:1180px; }
.news-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin:0 0 18px; }
.news-head h1 { margin:0; text-wrap:balance; }
.news-head .sub { margin:6px 0 0; }
/* THE ONE PICKED LOOK (styles.css, the owner's call of 2 September
   2026): the chosen tab is the lightest green tint, one hairline of the
   accent and ink text - not a solid green pill. */
.news-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.news-tabs a { display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font-size:13.5px; }
.news-tabs a:hover { border-color:var(--accent); text-decoration:none; }
.news-tabs a[aria-current] { background:var(--picked); border-color:var(--accent); color:var(--ink); font-weight:600; }
.news-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; padding:10px 0 48px; }
.ncard { display:flex; flex-direction:column; min-width:0; color:inherit; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.ncard:hover { border-color:var(--accent); text-decoration:none; }
.ncard-pic { position:relative; aspect-ratio:16 / 9; overflow:hidden; background:var(--line); }
.ncard-pic img { display:block; width:100%; height:100%; object-fit:cover; }
.ncard-text { display:flex; flex-direction:column; gap:8px; flex:1; min-width:0; padding:14px 16px 16px; }
.ncard h2 { font-size:20px; line-height:1.25; margin:0; text-wrap:balance; }
.ncard p { margin:0; color:var(--muted); font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ncard.lead { grid-column:1 / -1; flex-direction:row; }
.ncard.lead .ncard-pic { flex:0 0 52%; aspect-ratio:auto; min-height:320px; }
.ncard.lead h2 { font-size:26px; }
/* The lead has the room: its standfirst wraps instead of being cut. */
.ncard.lead .ncard-text { padding:22px 24px; }
.ncard.lead p { white-space:normal; }
@media (max-width:760px) {
  .ncard.lead { flex-direction:column; }
  .ncard.lead .ncard-pic { flex:none; aspect-ratio:16 / 9; min-height:0; }
  .ncard.lead h2 { font-size:20px; }
  .ncard.lead .ncard-text { padding:14px 16px 16px; }
}
.news-kick { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; color:var(--muted); font-size:12.5px; }
.news-meta { margin-top:auto; color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.chip { display:inline-block; font-size:12.5px; font-weight:600; color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:2px 9px; background:var(--panel); }
.chip-projects { background:var(--picked); border-color:var(--accent); }
.chip-hse { background:var(--amber-bg); border-color:var(--amber-line); color:var(--amber-ink); }
.news-empty { padding:28px 0 48px; }
.news-article { max-width:760px; margin:0 auto; padding:0 0 48px; }
.news-back { margin:0 0 14px; font-size:13.5px; }
.news-back a { color:var(--muted); text-decoration:none; }
.news-back a:hover { color:var(--ink); }
.news-article h1 { max-width:none; margin:10px 0 10px; text-wrap:balance; }
.news-article .news-std { color:var(--muted); font-size:15px; margin:0 0 16px; }
.news-hero { margin:0 0 20px; }
.news-hero img { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; border-radius:var(--radius); background:var(--line); }
.news-hero figcaption { color:var(--muted); font-size:12.5px; margin:6px 0 0; }
/* WHERE IT IS (the owner's mockup, refreshed 6 November 2026): the
   map left, the place and the two ways to get there right, one panel
   with the card radius; one column under 900px (see below).
   The postcode chip takes the 10px of the facts boxes, not a new one.
   padding:0 undoes the site's 40px on every <section> (seen in the
   first render: a white band above and below the map). */
/* 55% MAP, 45% INFO, STACKED UNDER 900px (the owner, 6 November 2026):
   at the 760px article column the info gets 342px; the pills measured
   186px + 110px + the 8px gap = 304px, which fits inside its 32px of
   padding with 6px to spare. Between 620px and about 800px of viewport
   the article column is narrower than 760px and Directions fell under
   Open in Google Maps, so the block stacks below 900px of viewport (the
   owner's allowed break) and the info then has the full width. */
.news-where { display:grid; grid-template-columns:minmax(0, 55%) minmax(0, 45%); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin:0 0 22px; padding:0; }
.news-where.no-map { grid-template-columns:minmax(0, 1fr); }
.news-map { margin:0; border-right:1px solid var(--line); }
.news-map img { display:block; width:100%; height:auto; aspect-ratio:600 / 340; object-fit:cover; background:var(--bg); }
.news-where-info { display:flex; flex-direction:column; justify-content:flex-start; gap:10px; min-width:0; padding:14px 16px 16px; }
.news-article .news-where-k { margin:0; color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; }
.news-where-info b { display:block; font-size:15px; font-weight:600; }
.news-where-info b + span { display:block; color:var(--muted); font-size:13.5px; }
.news-where-pc { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.news-where-pc code { font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:10px; padding:5px 8px; }
/* TOP-ALIGNED, NO GAP (the owner, 6 November 2026): margin-top:auto
   pushed the pills to the foot of the map's height and left a hole above
   them. One row: Open in Google Maps primary, Directions quiet; they wrap
   only when the column itself is narrow (a phone), never inside a pill. */
.news-where-acts { display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:8px; }
.news-where .cta { font:inherit; font-size:14px; font-weight:600; white-space:nowrap; cursor:pointer; }
@media (max-width:900px) {
  .news-where { grid-template-columns:minmax(0, 1fr); }
  .news-map { border-right:0; border-bottom:1px solid var(--line); }
}
/* COLUMNS KEYED ON THE COUNT, NEVER A BOX ALONE IN THE LAST ROW (the
   owner, 6 November 2026): auto-fit drew six boxes as 4+2 at 760px and
   left a lone box at other widths. The renderer draws only 4 or 6 and
   writes the count as data-count: six are 3+3, four are one row of 4,
   and under 760px both are 2 columns (3 rows, or 2+2). Any other count
   (an older article stored before the 4-or-6 rule) falls back to 2. */
.facts { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin:0 0 22px; padding:0; }
.facts[data-count="6"] { grid-template-columns:repeat(3, 1fr); }
.facts[data-count="4"] { grid-template-columns:repeat(4, 1fr); }
@media (max-width:760px) {
  .facts[data-count="6"], .facts[data-count="4"] { grid-template-columns:repeat(2, 1fr); }
}
.facts div { min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.facts dt { color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; }
.facts dd { margin:2px 0 0; font-size:16px; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
/* A SECTION HEADING IN THE BODY IS A SIGNPOST, NOT A TITLE (the
   mockup): sans 17px, so the serif belongs to the headline alone. */
.news-article h2, .news-article h3 { font-family:inherit; font-size:17px; font-weight:600; line-height:1.3; letter-spacing:0; margin:22px 0 8px; }
.news-article ul, .news-article ol { padding-left:22px; margin:0 0 12px; }
.news-article li { margin:0 0 6px; }
/* Official sources: a quiet block. Its heading stays a real h2 for a
   screen reader's outline, drawn as a 12.5px label. */
.news-sources { border-top:1px solid var(--line); margin-top:24px; padding-top:12px; }
.news-article .news-sources h2 { margin:0 0 6px; font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.news-sources ul { margin:0; padding-left:18px; }
.news-sources li { font-size:13.5px; color:var(--muted); }
.news-cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 18px; margin:28px 0 0;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; }
.news-cta b { display:block; font-size:15px; }
.news-cta span { display:block; color:var(--muted); font-size:13.5px; }
@media (max-width:520px) { .news-cta { flex-direction:column; align-items:flex-start; } }
/* THE EMAIL ALERTS' SIGN-UP (PR B, 7 November 2026), under the lead card
   and on the alerts' own pages. Nothing new: the panel is .news-cta's,
   the labels are the calculator's (.calc-row label), the boxes its inputs,
   the button the shell's .cta.primary, the error the amber tier (never
   red: red means a prohibition). Sizes are the ones already in this file
   and the shell. The section undoes the shell's 40px <section> padding
   and its rule, as .news-where does. One row from 760px, stacked under,
   so nothing scrolls sideways at 390px. */
.news-alerts { grid-column:1 / -1; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px; margin:0; }
.news-alerts > p { margin:0 0 10px; font-size:15px; }
.news-alerts form { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) auto; gap:10px; align-items:end; margin:0; }
.news-alerts label { display:flex; flex-direction:column; gap:4px; min-width:0; font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.news-alerts input, .news-alerts select { font:15px/1.3 inherit; padding:9px 10px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); color:var(--ink); min-width:0; width:100%; text-transform:none; letter-spacing:0; }
.news-alerts input:focus, .news-alerts select:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.news-alerts input[aria-invalid] { border-color:var(--amber-line); }
.news-alerts .cta { font:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; }
.news-alerts .err { color:var(--amber-ink); font-size:13.5px; text-transform:none; letter-spacing:0; }
.news-alerts p.err { margin:8px 0 0; }
.news-alerts .fine { margin:10px 0 0; color:var(--muted); font-size:12.5px; }
.news-alerts .ok { color:var(--ink); }
.news-alerts .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.news-alerts fieldset { border:0; margin:0; padding:0; min-width:0; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.news-alerts legend { padding:0; margin:0 0 4px; font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.news-alerts .pick { flex-direction:row; align-items:center; gap:6px; font-size:15px; color:var(--ink); text-transform:none; letter-spacing:0; }
.news-alerts .pick input { width:auto; }
@media (max-width:760px) {
  .news-alerts form { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .news-alerts form label:nth-of-type(3), .news-alerts form .cta { grid-column:1 / -1; }
}
/* The shell's "section:last-of-type { border-bottom:0 }" outranks one
   class and the shell's rules come after this file, so the panel's
   border is said with the class twice (the sign-up is the last <section>
   in .news-list). */
section.news-alerts.news-alerts { border:1px solid var(--line); }
/* The alerts' own pages: one reading column, forms stacked. */
.news-alerts-page { max-width:760px; margin:0 auto 48px; }
section.news-alerts-page:not(.news-alerts) { border:0; padding:0; margin-bottom:16px; }
.news-alerts.news-alerts-page form { grid-template-columns:minmax(0, 1fr); margin:0 0 12px; }
.news-alerts-page h1 { margin:0 0 10px; }
/* THE TWO SIGN-UPS, FOLLOW, SHARE, TELL US PRIVATELY, NEARBY (PR C, 7
   November 2026), the owner's mockup (news-engage.html) rule for rule,
   with four changes on the way in: var(--panel) for the mockup's white
   input ground; the native select arrow (the mockup's chevron was a hex
   inside a data URI); viewport media queries for its container queries
   (review chrome); and the Tell box's field kept to its own height (the
   mockup's flex:1 1 220px stood 220px tall inside a column). Every rule
   is scoped to its card, because .row, .field and .note are common words
   on the site. Sizes are this file's (12.5 / 13.5 / 14 / 15) and the list
   card's 20px title; radii var(--radius), 10px boxes, 999px pills. A
   [hidden] box that sets its own display says display:none again, or the
   display would win over the hidden attribute. */
.signup, .follow { min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px; }
.news-list > .signup { grid-column:1 / -1; margin:0; }
.news-empty + .signup { margin:0 0 48px; }
.follow { margin:28px 0 0; }
/* The shell's 40px <section> padding and its rule, undone; the class twice
   outranks the shell's section:last-of-type, which comes after this file. */
section.signup.signup, section.follow.follow { border:1px solid var(--line); padding:16px 18px; }
section.share.share, section.near.near { border:0; padding:0; }
:is(.signup, .follow) h2 { margin:0; font-family:inherit; font-size:15px; font-weight:600; line-height:1.35; letter-spacing:0; }
:is(.signup, .follow) .say { margin:2px 0 12px; color:var(--muted); font-size:13.5px; line-height:1.5; }
:is(.signup, .follow, .tell) form { margin:0; }
:is(.signup, .follow, .tell) .row { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:flex-end; }
:is(.signup, .follow, .tell) .field { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 220px; }
.signup .field.pc, .signup .field.dist { flex:0 1 150px; }
:is(.signup, .follow, .tell) .field label { font-size:12.5px; color:var(--muted); }
:is(.signup, .follow, .tell, .share) .inp { font:inherit; font-size:15px; line-height:1.3; padding:9px 10px; border:1px solid var(--line);
  border-radius:10px; background:var(--panel); color:var(--ink); min-width:0; width:100%; min-height:40px; }
:is(.signup, .follow, .tell, .share) .inp:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
:is(.signup, .follow, .tell) .inp[aria-invalid="true"] { border-color:var(--amber-line); }
:is(.signup, .follow, .tell, .share) .cta { font:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; }
:is(.signup, .follow, .tell) .hint { margin:6px 0 0; font-size:13.5px; line-height:1.5; color:var(--amber-ink); }
:is(.signup, .follow, .tell) .fine { margin:10px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5; }
:is(.signup, .follow, .tell) .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
:is(.signup, .follow, .tell) .done b { display:block; font-size:15px; }
:is(.signup, .follow, .tell) .done p { margin:2px 0 0; font-size:13.5px; line-height:1.5; color:var(--muted); }
:is(.signup, .follow, .tell) .done:focus { outline:none; }
.follow .alt { margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:13.5px; line-height:1.5; color:var(--muted); }
.follow .alt a { font-weight:600; }
/* The section labels (Share, Other projects near here): the 12.5px label
   of Official sources and Where it is. */
.news-article .k { margin:0 0 6px; font-family:inherit; font-size:12.5px; font-weight:400; line-height:1.55; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; }
/* SHARE: the desk row everywhere, and on a phone that has its own share
   sheet (the script sets data-can-share) the one button instead. */
.share { margin:24px 0 0; }
.share-row { display:flex; flex-wrap:wrap; gap:8px; }
.share .only-phone { display:none; }
@media (max-width:520px) {
  .share[data-can-share] .only-desk { display:none; }
  .share[data-can-share] .only-phone { display:inline-flex; }
}
.share .copybox { margin:8px 0 0; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.share .copybox[hidden] { display:none; }
.share .copybox .inp { flex:1 1 240px; font-size:13.5px; }
.share .note { margin:8px 0 0; font-size:13.5px; line-height:1.5; color:var(--muted); }
.share .copybox .note { margin:0; }
.share .note:empty { display:none; }
.share .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* TELL US PRIVATELY: a <details>, closed; it opens without a script. */
details.tell { margin:24px 0 0; border-top:1px solid var(--line); }
details.tell summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:48px; padding:8px 0; font-size:15px; font-weight:600; }
details.tell summary::-webkit-details-marker { display:none; }
details.tell summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
details.tell summary small { display:block; font-size:13.5px; font-weight:400; color:var(--muted); }
details.tell summary i { flex:none; width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); margin:0 6px 4px 0; transition:transform .15s ease; }
details.tell[open] summary i { transform:rotate(225deg); margin:4px 6px 0 0; }
@media (prefers-reduced-motion: reduce) { details.tell summary i { transition:none; } }
.tell .tellbox { display:flex; flex-direction:column; gap:10px; padding:4px 0 6px; }
.tell .tellbox[hidden] { display:none; }
.tell .tellbox > .field { flex:none; }
.tell .tellbox .fine { margin:0; }
.tell .done { padding:4px 0 6px; }
.tell textarea.inp { min-height:96px; resize:vertical; }
/* OTHER PROJECTS NEAR HERE / MORE HSE THIS WEEK: two of the list's cards
   side by side, stacked on a phone. Their title is an h3 (the article's
   h2 and h3 are the body's signposts, 17px sans), drawn as the list
   card's 20px serif title. */
.near { margin:28px 0 0; }
.near-list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
@media (max-width:520px) { .near-list { grid-template-columns:minmax(0, 1fr); } }
.news-article .near .ncard h3 { font-family:var(--serif); font-weight:500; font-size:20px; line-height:1.25; letter-spacing:-0.01em;
  margin:0; text-wrap:balance; }