/* Red Ember — the policy updates pages (/news/), 19 Oct 2026.
   Written by tools/build-news.py around the writer's posts.

   ON TOP OF hearth.css, pub.css AND site.css, like every public page: the
   same menu, footer, buttons and eyebrow. What is only here: a reading
   column for a post, the label and status on each one, the key dates set
   like an agency's calendar, the "Confused?" box, and the sign-up.

   One column on purpose. A post is read top to bottom on a phone, most of
   the time from a link in a Facebook group or an email. */

.site-news .nwhero,.nwpost{max-width:760px;margin:0 auto;text-align:left}
.site-news .nwhero{padding:46px 0 10px}
.nwhero .eyebrow{justify-content:flex-start}
.nwhero h1,.nwhead h1{font-family:Literata,serif;font-weight:700;font-size:clamp(30px,4.4vw,46px);
  line-height:1.1;letter-spacing:-.016em;margin:10px 0 14px;text-wrap:balance}
.nwhero .lede{text-align:left;margin:0 0 18px;max-width:38rem;font-size:18px;line-height:1.6;color:var(--ink-70)}
.nwctas{margin:0 0 10px}
.nwctas .btn{text-decoration:none}
.nwmeta{margin:0;color:var(--ink-45);font-size:14px}
.nwmeta span{color:var(--ink-45)}

/* Breadcrumbs: where this sits, and the way back up. */
.nwcrumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;margin:0 0 18px;color:var(--ink-45)}
.nwcrumbs a{color:var(--ember);text-decoration:none;font-weight:600}
.nwcrumbs a:hover{text-decoration:underline}

/* ── LABEL AND STATUS ───────────────────────────────────────────────────
   The label is what kind of change; the status is how settled it is. Both
   in words, never colour alone. */
.nwtags{display:flex;flex-wrap:wrap;gap:8px;margin:0;align-items:center}
.nwlabel,.nwstatus{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:4px 9px;border-radius:6px;line-height:1.2}
.nwlabel{background:#F6E5DC;color:#8A3A18}
.nwlabel[data-k="rule"]{background:#E3ECF3;color:#2C5468}
.nwlabel[data-k="update"]{background:#DFF0EB;color:#0F5951}
.nwlabel[data-k="expected"]{background:#F6EDCF;color:#6E5308}
.nwstatus{background:transparent;color:var(--ink-70);border:1px solid var(--line)}
.nwstatus[data-s="expected"]{border-style:dashed}

/* ── THE LISTS ──────────────────────────────────────────────────────── */
.nwsec{max-width:760px;margin:26px auto 0;text-align:left}
.nwsech{font-family:Literata,serif;font-size:22px;margin:0 0 14px}
.nwlist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.nwcard{display:grid;gap:8px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  text-decoration:none;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}
.nwcard:hover,.nwcard:focus-visible{border-color:#C9B79F;box-shadow:0 18px 34px -26px rgba(23,26,32,.45)}
.nwcard:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.nwcard h3{font-family:Literata,serif;font-size:21px;line-height:1.25;margin:4px 0 0;font-weight:700;
  text-transform:none;letter-spacing:-.01em;color:var(--ink);padding:0;border:0;text-wrap:balance}
.nwcard p{margin:0;color:var(--ink-70);line-height:1.55;font-size:15.5px}
.nwcard .nwcmeta{font-size:13.5px;color:var(--ink-45);font-variant-numeric:tabular-nums}
.nwempty{background:#fff;border:1px dashed var(--line);border-radius:16px;padding:22px}
.nwempty p{margin:0;color:var(--ink-70);line-height:1.6}

.nwchips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.nwchip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;
  border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600;font-size:14.5px}
.nwchip span{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-45);font-weight:500}
.nwchip:hover{border-color:var(--ember);color:var(--ember)}

/* ── A POST ─────────────────────────────────────────────────────────── */
.nwpost{padding:40px 0 0}
.nwhead .nwsum{font-size:19px;line-height:1.55;color:var(--ink-70);margin:0 0 14px;text-align:left}

/* The key dates, like the calendar on an agency notice: the date in mono,
   what happens on it beside. */
.nwdates{margin:26px 0 26px;background:var(--sand);border:1px solid var(--sand-line);border-radius:14px;padding:16px 20px}
.nwdates h2{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember);font-weight:700;margin:0 0 8px}
.nwdates ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.nwdates li{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:4px 16px;padding:8px 0;
  border-top:1px solid var(--sand-line);align-items:baseline}
.nwdates li:first-child{border-top:0}
.nwdates time{font-family:"IBM Plex Mono",monospace;font-size:13.5px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.nwdates span{color:var(--ink-70);line-height:1.5}
@media (max-width:480px){.nwdates li{grid-template-columns:1fr;gap:2px}}

.nwbody{font-size:17px;line-height:1.72;color:var(--ink)}
.nwbody > *{max-width:68ch}
.nwbody p{margin:0 0 16px}
.nwbody h2{font-family:Literata,serif;font-weight:700;font-size:clamp(22px,2.6vw,26px);line-height:1.25;
  margin:34px 0 10px;letter-spacing:-.01em;scroll-margin-top:20px}
.nwbody h3,.nwbody h4{font-family:Literata,serif;font-weight:700;font-size:19px;margin:24px 0 8px;
  text-transform:none;letter-spacing:0;color:var(--ink);padding:0;border:0}
.nwbody ul,.nwbody ol{margin:0 0 16px;padding-left:24px}
.nwbody li{margin:0 0 6px}
.nwbody a{color:var(--ember);text-underline-offset:3px}
.nwbody blockquote{margin:0 0 16px;padding:4px 0 4px 18px;border-left:3px solid var(--sand-line);color:var(--ink-70)}
.nwbody blockquote p{margin:0}
.nwbody code{font-family:"IBM Plex Mono",monospace;font-size:.9em;background:var(--wash);padding:1px 5px;border-radius:4px}

/* ── "CONFUSED?" ────────────────────────────────────────────────────────
   Andy, 18 Oct: "a clear direct 'confused? Red Ember helps you understand
   if these policies impact you based on your unique situation'". The one
   dark block on the page, so it is the thing the eye lands on after the
   last paragraph. */
.nwhelp{margin:34px 0 0;background:var(--ink-deep);color:#F7F1E8;border-radius:20px;padding:clamp(22px,4vw,32px);text-align:left}
.nwhelp h2{font-family:Literata,serif;font-weight:700;font-size:clamp(24px,3vw,30px);margin:0 0 8px;color:#F7F1E8}
.nwhelp p{margin:0 0 16px;color:#D5DAE2;font-size:17px;line-height:1.6;max-width:36rem}
.nwhelp .nwgo{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0}
.nwhelp .nwgo .btn{text-decoration:none;background:var(--ember-lo);border-color:var(--ember-lo);color:var(--ink-deep);font-weight:700;padding:11px 20px;font-size:15px}
.nwhelp .nwgo .btn:hover{background:#EA9C6C}
.nwhelp .nwgo span{color:#AEB6C2;font-size:14px}
.site-news > .wrap > .nwhelp,.site-news .wrap > section.nwhelp{max-width:760px;margin-inline:auto}

/* ── THE SIGN-UP ────────────────────────────────────────────────────── */
.nwsub{max-width:760px;margin:22px auto 0;text-align:left}
.nwform{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(20px,3.6vw,30px)}
.nwform h2{font-family:Literata,serif;font-weight:700;font-size:clamp(22px,2.8vw,27px);margin:0 0 6px}
.nwform .nwlead{margin:0 0 14px;color:var(--ink-70);line-height:1.6}
.nwstates{border:0;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.nwstates[hidden]{display:none}
.nwstates legend{font-size:14px;font-weight:600;margin:0 0 8px;padding:0}
.nwchk{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--line);border-radius:999px;
  font-size:15px;cursor:pointer;background:#fff}
.nwchk:has(input:checked){border-color:var(--pine);background:#EAF5F1}
.nwchk input{width:17px;height:17px;margin:0;accent-color:var(--pine)}
.nwagree{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;font-size:15px;line-height:1.45;cursor:pointer}
.nwagree input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--pine)}
.nwrow{display:flex;gap:8px;flex-wrap:wrap}
.nwrow input[type=email]{flex:1 1 220px;min-width:0;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink);font-size:16px;font-family:inherit}
.nwrow input[type=email]:focus{outline:2px solid var(--pine);outline-offset:-1px}
.nwrow .btn{flex:0 0 auto;padding:11px 22px;font-size:15px}
.nwform .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nwform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nwfine{margin:10px 0 0;font-size:13.5px;color:var(--ink-45);line-height:1.5}
.nwfine a{color:inherit}
.nwmsg{margin:8px 0 0;font-size:14px;min-height:1.4em}
.nwmsg.bad{color:#8C2D14}
.nwask[hidden]{display:none}
.nwdone{padding:4px 0 0}
.nwdone:focus{outline:none}
.nwdone p{margin:0 0 6px;color:var(--ink-70);line-height:1.6}
.nwdone .nwdk{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--pine)}
.nwdone .nwdh{font-family:Literata,serif;font-size:24px;color:var(--ink);margin:0 0 6px}
@media (max-width:520px){.nwrow{flex-direction:column;align-items:stretch}.nwrow input[type=email]{flex:0 0 auto}}

/* ── SOURCES ────────────────────────────────────────────────────────── */
.nwsrc{margin:30px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.nwsrc h2{font-family:Literata,serif;font-weight:700;font-size:20px;margin:0 0 10px}
.nwsrc ol{margin:0 0 12px;padding-left:22px;display:grid;gap:8px}
.nwsrc li{line-height:1.5}
.nwsrc a{color:var(--ember);overflow-wrap:anywhere}
.nwsrc li span{display:block;font-size:13.5px;color:var(--ink-45)}
.nwsrc > p{margin:0;font-size:14px;color:var(--ink-45)}

@media (prefers-reduced-motion:reduce){.nwcard{transition:none}}