/* cartesianecu.com/news/ (owner 2026-11-08: every day's changes to the app and the site, published the day after): the page
   card as a hero (kicker, title, lede), then the days as one reading column (about 760 px), newest first, each day its
   date as the heading, a line with the app versions released that day and its items as a plain list, a thin rule between
   two days. assets/news.js draws the days from the public news endpoint; the "nothing yet" and "could not load" states are
   plain sentences (.news-state). On top of site.css (tokens, header, footer, .page-card, .kicker, .wrap). Quiet and
   editorial: no card around the days, no badge, no glow. Dark and light through the site's variables.
   Direction: logical properties only (padding-inline, margin-inline), nothing here depends on left or right, so the
   generated assets/site-rtl.css needs no rule from this sheet. */
.news-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.news{flex:1;padding:0}
.news :focus-visible,.news-page .skip:focus-visible,.news-page .dist-foot a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---- hero: the page card (site.css .page-card), as the distributors and community pages open; white type on the card ---- */
.news-hero{padding:calc(var(--head-h) + clamp(44px,6.5vw,80px)) 0 clamp(40px,5.5vw,64px)}
.news-head{max-width:760px}
.news-head .kicker{margin:0}
.news-head h1{font-weight:600;letter-spacing:-.025em;font-size:clamp(32px,4.4vw,48px);margin:12px 0 0;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.16),0 8px 32px rgba(0,0,0,.24)}
.news-lede{margin:14px 0 0;font-size:17px;line-height:1.6;max-width:62ch;color:rgba(255,255,255,.86);text-wrap:pretty}

/* ---- the days: one column under the hero's words, the same start edge ---- */
.news-feed{padding:56px 0 96px}
.news-col{max-width:760px}
.news-state{margin:0;color:var(--muted);font-size:16px;line-height:1.6}
.news-day{padding:30px 0 34px;border-top:1px solid var(--line)}
.news-day:first-child{padding-top:0;border-top:0}
.news-date{margin:0;font-size:clamp(20px,2.2vw,24px);font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--text)}
.news-date::first-letter{text-transform:uppercase}   /* Intl writes the weekday in lower case in most languages; a heading opens with a capital */
.news-ver{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.news-v{font:500 .95em/1 var(--mono);color:var(--text)}   /* the numbers in figures of code, as the home page writes a version */
.news-items{margin:16px 0 0;padding:0;padding-inline-start:22px;list-style:disc}
.news-items li{margin:0;font-size:16.5px;line-height:1.6;color:var(--text);text-wrap:pretty}
.news-items li + li{margin-top:8px}
.news-items li::marker{color:var(--accent-text)}

/* ---- phones ---- */
@media (max-width:760px){
  .news-hero{padding:calc(var(--head-h) + 24px) 0 28px}
  .news-head h1{font-size:30px;margin-top:8px}
  .news-lede{font-size:15.5px;margin-top:10px}
  .news-feed{padding:36px 0 56px}
  .news-day{padding:22px 0 26px}
  .news-date{font-size:19px}
  .news-ver{margin-top:6px;font-size:14px}
  .news-items{margin-top:12px;padding-inline-start:20px}
  .news-items li{font-size:15.5px}
  .news-items li + li{margin-top:6px}
  .news-state{font-size:15.5px}
}
@media (max-width:400px){
  .news-page .site-head .brand{gap:8px}
  .news-page .site-head .brand-word{height:19px}
  .news-page .head-tools{gap:6px}
  .news-head h1{font-size:28px}
}