:root {
  --container-max-width: 1220px;
  --font-weight-bold: 700;
  --shadow: 0 4px 24px #0f3d7518;
  --btn-secondary-border: #6381a5;
  --primary-bg: #0d0f11;
  --card-bg: #1c1f22;
  --font-size-base: 0.9902em;
  --ic-color: var(--btn-primary-text, #ffffff);
  --secondary-bg: #141619;
  --cta-on-primary: #111111;
  --font-size-sm: 0.8962em;
  --border-radius-lg: 32px;
  --font-size-xs: 0.8377em;
  --font-size-2xl: 2.44rem;
  --text-muted: #808284;
  --border-radius-sm: 10px;
  --font-size-lg: 1.08rem;
  --font-family: 'Source Sans 3', 'e69rlg', 'lldmf', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --primary-color: #6381a5;
  --border-color: #222529;
  --ic-bg: var(--primary-color);
  --font-size-xl: 1.52rem;
  --font-weight-normal: 400;
  --btn-primary-bg: #6381a5;
  --font-weight-medium: 500;
  --section-padding: 96px 0;
  --ic-border: none;
  --accent-color: #2bb3a8;
  --border-radius: 20px;
  --text-secondary: #b2b3b5;
  --btn-secondary-text: #6381a5;
  --ic-border-color: transparent;
  --font-size-3xl: 3.28rem;
  --font-display: 'Source Serif 4', 'hbpbv9u', 'l32qj', Georgia, serif;
  --card-align: center;
  --card-align-self: center;
  --text-primary: #e8e8e9;
  --btn-primary-text: #111111;
  --shadow-lg: 0 8px 40px #0f3d7528;
  --card-footer-justify: center;
  --card-icon-mx: auto;
  --secondary-color: #2bb3a8;
  --btn-secondary-bg: transparent;
}
.wp-trust-chip { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--border-radius); border: 1px solid var(--border-color); background: color-mix(in srgb, var(--card-bg) 96%, transparent); }
.wp-trust-chip span { color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.55; }
.wp-trust-chip strong { color: var(--text-primary); }
/* CSS-only disclosure toggle. `display:none` on wide screens so the raw
     checkbox is never painted in the masthead and adds no phantom tab stop;
     the narrow layout below re-enables it as a visually-hidden control that
     is still focusable and operable with the keyboard. */
  .css-HXpJ{display:none}
.sc-M7VJoY{background:var(--primary-bg);border-bottom:1px solid var(--border-color)}
.css-LWFyKe{display:grid;gap:clamp(10px,1.6vw,16px);padding-block:clamp(12px,2vw,18px)}
.jsx-m6xz{display:flex;flex-direction:column;text-decoration:none;min-width:0}
.sc-bRzCh{font-family:var(--font-display,var(--font-family));font-size:clamp(1.2rem,3vw,1.75rem);font-weight:var(--font-weight-bold);letter-spacing:-.025em;color:var(--text-primary);line-height:1.06}
.sc-b9JS2{font-size:var(--font-size-xs,.76rem);color:var(--text-muted);margin-top:7px;line-height:1.45}
.jsx-ZhA9r5{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-xs,.7rem);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.em-10yqy{display:flex;flex-wrap:wrap;gap:2px}
.sc-VYNFNU{padding:7px 11px;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary);text-decoration:none;border-radius:var(--border-radius-sm,3px);white-space:nowrap}
.sc-VYNFNU:hover{color:var(--primary-color);background:var(--secondary-bg)}
.sc-VYNFNU.is-active,.sc-VYNFNU[aria-current="page"]{color:var(--primary-color);background:var(--secondary-bg);font-weight:var(--font-weight-bold)}
.jsx-L48ga3{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:10px;border-top:1px solid var(--border-color);font-size:var(--font-size-xs,.76rem)}
.jsx-L48ga3 a{color:var(--text-muted);text-decoration:none}
.jsx-L48ga3 a:hover{color:var(--primary-color)}
/* Selector carries `.jsx-L48ga3`: the CTA sits inside that strip, so
     `.jsx-L48ga3 a{color:var(--text-muted)}` (0,1,1) beat a plain `.em-1TanS`
     (0,1,0) and the outlined button rendered its label in muted grey inside a
     brand-coloured border. Same defect the stacked header had, where the fill was
     solid and the label vanished entirely. */
  .jsx-L48ga3 .em-1TanS{display:inline-flex;align-items:center;padding:7px 13px;border:1px solid var(--primary-color);color:var(--primary-color);border-radius:var(--border-radius-sm,3px);text-decoration:none;font-weight:var(--font-weight-medium)}
.jsx-L48ga3 .em-1TanS:hover{background:var(--primary-color);color:var(--btn-primary-text,#fff)}
.em-Kvd3sa{display:none}
.jsx-llQf7{display:grid;gap:8px;min-width:0}
img { max-width: 100%; height: auto; display: block; }
/* ---- correction notice --------------------------------------------- */
  .sc-UZnW3{border-left:3px solid var(--primary-color);background:var(--secondary-bg);padding:14px 16px;margin:22px 0;border-radius:0 var(--border-radius-sm,3px) var(--border-radius-sm,3px) 0}
.em-gJNXO0{font-size:var(--font-size-xs,.74rem);letter-spacing:.1em;text-transform:uppercase;color:var(--primary-color)}
.jsx-RP5D{font-size:var(--font-size-xs,.74rem);color:var(--text-muted);margin-left:8px}
.em-kBqN{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.6;margin:6px 0 8px}
.css-OCkGmC{font-size:var(--font-size-xs,.76rem);color:var(--primary-color)}
.jsx-dAOdqL{padding:0 0 clamp(28px,4vw,50px)}
.css-rGEYsV{padding:clamp(6px,1vw,12px) 0 clamp(18px,2.6vw,26px);border-bottom:2px solid var(--primary-color)}
.jsx-xTMv{font-family:var(--font-display,var(--font-family));font-size:clamp(1.7rem,4vw,2.6rem);font-weight:var(--font-weight-bold);line-height:1.08;letter-spacing:-.026em;color:var(--text-primary);margin:0 0 8px}
.css-VO0o8{font-size:var(--font-size-base);color:var(--text-muted);margin:0}
.css-LocKCE{display:flex;gap:8px;flex-wrap:wrap;padding:clamp(16px,2.2vw,22px) 0;border-bottom:1px solid var(--border-color)}
.sc-F8B9O5{font-size:var(--font-size-sm);color:var(--text-primary);background:var(--secondary-bg);border:1px solid var(--border-color);padding:5px 12px;border-radius:100px;text-decoration:none}
.sc-F8B9O5:hover{border-color:var(--primary-color);color:var(--primary-color)}
.em-MhQXW{padding:clamp(20px,3vw,30px) 0 0}
.css-nrF1{font-family:var(--font-display,var(--font-family));font-size:clamp(1.05rem,1.8vw,1.34rem);font-weight:var(--font-weight-bold);color:var(--text-primary);margin:0 0 4px;padding-bottom:9px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.css-vHZP{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-xs,.72rem);letter-spacing:.08em;color:var(--text-muted);font-weight:400}
.sc-m9n8Jz{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;padding:11px 0;border-bottom:1px solid var(--border-color);text-decoration:none;align-items:baseline}
.sc-m9n8Jz:last-child{border-bottom:none}
.sc-2aWb5{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:1.4;color:var(--text-primary);min-width:0}
.sc-m9n8Jz:hover .sc-2aWb5{color:var(--primary-color)}
.em-rCDW{font-size:var(--font-size-xs,.72rem);text-transform:uppercase;letter-spacing:.1em;color:var(--primary-color);font-weight:700;white-space:nowrap}
.em-NeqtO7 { font-size: clamp(1.8rem, 4.8vw, var(--font-size-2xl)); font-weight: var(--font-weight-bold); margin: 12px 0 10px; line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere; }
/* ---- byline -------------------------------------------------------- */
  .sc-UHVTqA{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;font-size:var(--font-size-sm);color:var(--text-muted);margin:10px 0}
.css-a4ufw{border-radius:50%;object-fit:cover;flex:none}
.sc-WiLIu{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.sc-0Nyg1{opacity:.75}
.em-ThjT6r{color:var(--text-primary);font-weight:var(--font-weight-medium);text-decoration:none;border-bottom:1px solid var(--border-color)}
.em-ThjT6r:hover{color:var(--primary-color);border-bottom-color:currentColor}
.jsx-KYLex{opacity:.8}
.jsx-KYLex::before{content:'·';margin-right:6px;opacity:.6}
/* No `·` before the timestamp or the reading time any more — the clock and the
     book mark are the separator, and a dot as well made three marks per boundary. */
  .sc-t6oD{white-space:nowrap}
html.cc-ok .css-xBNwT { display: none !important; }
.wp-rating-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.css-odZ0{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(20px,3vw,40px);align-items:start}
.em-InkQ{border:1px solid var(--border-color);border-radius:var(--border-radius,4px);background:var(--card-bg);padding:clamp(16px,2.2vw,26px);min-width:0}
.em-G27b6{margin-bottom:14px}
.jsx-q7k4v{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-primary);margin-bottom:6px}
/* Control looks come from the shared `.n-f*` block in news-cards-css.njk —
     including the focus ring this page used to suppress with `outline:none`.
     Only page-specific spacing stays here. */
  .jsx-9GqeL{margin-bottom:14px}
.css-mRp4a{font-size:var(--font-size-xs,.75rem);color:var(--text-muted);line-height:1.6;margin-top:10px}
.css-KKH0{display:none;font-size:var(--font-size-base);color:var(--text-secondary);line-height:1.7}
/* ── intrinsic grid utilities ────────────────────────────────────────── */
  /*
    Column counts are a RESULT of available space. `min(Xpx, 100%)` is what keeps
    a narrow container from overflowing; without it auto-fit forces a track wider
    than its parent. No breakpoints, correct at every intermediate width.
  */
  .sc-mgHy{display:grid;gap:clamp(14px,2.2vw,26px)}
.em-djMUE{grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
.sc-e8A6z{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.css-z55qG{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.jsx-5CUtSz{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.n-g--xl{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
/* The asymmetric lead+rail split every front page needs — as flex, because the
     grid version COULD NOT FOLD. `minmax(min(100%,320px),1.6fr)` plus
     `minmax(min(100%,260px),1fr)` resolves to 320+260 = 580px inside a 343px
     container: `min(100%, 320px)` is 320px whenever the container is at least
     320px wide, so the floor never gives way. Measured at a 390px viewport the
     rail sat at x=350 with a 260px width — right edge 610 — and 93 elements ended
     up past the viewport edge.
     Flex has no such trap: each half declares a basis with the mandatory
     `min(…, 100%)` floor and the 1.6 / 1 grow factors preserve the asymmetry, so
     the pair shares a line only while 320 + 260 + gap actually fits. */
  .css-vwDW{display:flex;flex-wrap:wrap}
.css-vwDW>*{min-width:0}
.css-vwDW>*:first-child{flex:1.6 1 min(320px,100%)}
.css-vwDW>*:nth-child(n+2){flex:1 1 min(260px,100%)}
.n-g--tight{gap:0}
.n-g--rows>*+*{border-top:1px solid var(--border-color);padding-top:14px;margin-top:14px}
/* ── monogram (initials) ────────────────────────────────────────────────
     Fallback for a person with no portrait. Palette variables only, so it picks
     up the per-site theme like everything else, and it is drawn entirely in CSS
     — no image request, no image budget. */
  .jsx-C1fbcd{display:inline-grid;place-items:center;flex:none;border-radius:50%;background:var(--secondary-bg);border:1px solid var(--border-color);color:var(--primary-color);font-family:var(--font-display,var(--font-family));font-weight:var(--font-weight-bold);line-height:1;letter-spacing:.02em;text-transform:uppercase;overflow:hidden}
.n-mono--xs{width:32px;height:32px;font-size:var(--font-size-xs,.75rem)}
.n-mono--sm{width:40px;height:40px;font-size:var(--font-size-sm)}
.em-SOTO{width:56px;height:56px;font-size:var(--font-size-lg)}
.n-mono--lg{width:72px;height:72px;font-size:calc(var(--font-size-lg) * 1.25)}
/* ---- card ---------------------------------------------------------- */
  .sc-YsvhYO{display:grid;gap:12px;min-width:0}
.em-DRZI1{display:block;overflow:hidden;border-radius:var(--border-radius-sm,3px);background:var(--secondary-bg)}
.em-DRZI1 img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.sc-YsvhYO:hover .em-DRZI1 img{transform:scale(1.035)}
.jsx-CLbJu{min-width:0}
.sc-iPPM{font-family:var(--font-display,var(--font-family));font-size:clamp(1rem,1.5vw,1.22rem);font-weight:var(--font-weight-bold);line-height:1.25;letter-spacing:-.01em;margin:0 0 8px;color:var(--text-primary)}
.sc-iPPM a{color:inherit;text-decoration:none}
.sc-YsvhYO:hover .sc-iPPM a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.n-card__dek{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.6;margin:0 0 8px}
.css-DSIHU{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--font-size-xs,.75rem);color:var(--text-muted)}
.em-38YNT{font-weight:var(--font-weight-medium);color:var(--text-secondary)}
.css-DSIHU .em-38YNT+.css-bHWhr9::before,.css-DSIHU .css-bHWhr9+.em-38YNT::before{content:'·';margin-right:8px;opacity:.6}
/* media placement axis */
  .em-2hnEC .em-DRZI1{aspect-ratio:16/9}
.n-card--side{grid-template-columns:minmax(96px,34%) minmax(0,1fr);align-items:start}
.n-card--side .em-DRZI1{aspect-ratio:4/3}
.n-card--none .em-DRZI1{display:none}
/* aspect axis */
  .n-card--sq.em-2hnEC .em-DRZI1{aspect-ratio:1/1}
.n-card--tall.em-2hnEC .em-DRZI1{aspect-ratio:4/5}
.jsx-RBJBU{padding:clamp(10px,1.6vw,18px) 0 clamp(20px,3vw,34px);background:var(--primary-bg)}
.em-uy5tVM{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-xs,.7rem);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.jsx-Z4TAF{text-align:center;padding:clamp(10px,1.8vw,16px) 0 clamp(14px,2.2vw,20px);border-top:1px solid var(--border-color);border-bottom:3px double var(--border-color)}
.em-TP4zx{font-family:var(--font-display,var(--font-family));font-size:clamp(1.25rem,3.2vw,2rem);font-weight:var(--font-weight-bold);letter-spacing:-.02em;color:var(--text-primary);margin:0}
.sc-gTVnh{font-size:var(--font-size-sm);color:var(--text-muted);margin:6px 0 0;line-height:1.5}
.css-p8s2n{container-type:inline-size;padding-top:clamp(16px,2.6vw,26px)}
.sc-yVOKBE{display:block;overflow:hidden;aspect-ratio:2/1;background:var(--secondary-bg);border-radius:var(--border-radius-sm,3px)}
.sc-yVOKBE img{width:100%;height:100%;object-fit:cover;display:block}
.css-Occ8GB{font-size:var(--font-size-xs,.76rem);color:var(--text-muted);line-height:1.5;margin:9px 0 0}
.em-Wr8Y{max-width:74ch;margin:clamp(14px,2.2vw,22px) auto 0;text-align:center}
.sc-ytruD{font-family:var(--font-display,var(--font-family));font-size:clamp(1.6rem,6.4cqi,3rem);font-weight:var(--font-weight-bold);line-height:1.05;letter-spacing:-.03em;color:var(--text-primary);margin:10px 0 13px}
.sc-ytruD a{color:inherit;text-decoration:none}
.sc-ytruD a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.jsx-fOlisw{font-size:clamp(1rem,3.2cqi,1.26rem);color:var(--text-secondary);line-height:1.6;margin:0 auto 10px;max-width:58ch}
.em-lAt9rW{display:flex;justify-content:center}
.jsx-eOh3d{display:flex;justify-content:center}
.nlk__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:clamp(16px,2.4vw,30px);margin-top:clamp(20px,3vw,32px);padding-top:clamp(16px,2.4vw,24px);border-top:1px solid var(--border-color)}
.wp-h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: 1.27; margin-bottom: 19px; }
::view-transition-old(hdr-31r2){display:none}
.sc-jTTHN{max-width:74ch}
.sc-PNr0{margin-top:clamp(22px,3vw,34px)}
.jsx-Pd6mqD{margin-top:6px}
.css-NlKqm{font-size:clamp(1.8rem,4.8vw,var(--font-size-2xl));line-height:1.12;margin:12px 0 10px}
/* An icon + its label form one atom: they must wrap together, never apart. */
  .em-CBRXN{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.em-CBRXN>*{white-space:normal}
/* ---- timestamp ----------------------------------------------------- */
  .css-bHWhr9{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-xs,.72rem);color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Heading that carries a mark (key facts, sources, related, desk). */
  .css-onEq{display:inline-flex;align-items:center;gap:7px}
.em-z3qHJ,.sc-hxSx,.css-0lTKy{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--border-radius-lg)}
.em-z3qHJ,.sc-hxSx{padding:24px}
.em-tTQY9L{display:inline;color:inherit;cursor:pointer}
.css-s3c3y { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
/* ---- kicker (section + article type) ------------------------------- */
  .em-R4LAG{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.em-Otpy6f{font-size:var(--font-size-xs,.72rem);letter-spacing:.14em;text-transform:uppercase;color:var(--primary-color);text-decoration:none;font-weight:700}
.em-Otpy6f:hover{text-decoration:underline;text-underline-offset:3px}
.css-HmvBc{font-size:var(--font-size-xs,.68rem);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
.sc-unXR .em-Otpy6f{background:var(--secondary-bg);padding:3px 8px;border-radius:3px;letter-spacing:.08em}
.sc-unXR .css-HmvBc{border:1px solid var(--border-color);padding:2px 7px;border-radius:3px}
.n-kicker--bar .em-Otpy6f{border-left:3px solid var(--primary-color);padding-left:8px}
/* ---- generic editorial document (policy / legal pages) ------------- */
  /* `container-type` so the labelled rows below can reflow on the width of the
     document column rather than on the viewport. */
  .jsx-eQIVc{padding:clamp(20px,3vw,36px) 0 clamp(30px,4vw,56px);container-type:inline-size}
.sc-igQL{max-width:74ch}
.css-8ZHGu{font-family:var(--font-display,var(--font-family));font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:var(--font-weight-bold);line-height:1.12;letter-spacing:-.02em;color:var(--text-primary);margin:0 0 10px}
.sc-LW37l{font-size:var(--font-size-lg);color:var(--text-secondary);line-height:1.65;margin:0 0 22px}
.n-doc__upd{font-size:var(--font-size-sm);color:var(--text-muted);padding-bottom:18px;border-bottom:1px solid var(--border-color);margin-bottom:22px}
.jsx-LDPtMw{font-family:var(--font-display,var(--font-family));font-size:clamp(1.1rem,1.9vw,1.4rem);font-weight:var(--font-weight-bold);color:var(--text-primary);margin:26px 0 10px;line-height:1.28}
.em-WilX1g{font-size:var(--font-size-base);color:var(--text-secondary);line-height:1.78;margin:0 0 14px}
.jsx-yJrE{margin:0 0 16px;padding-left:20px}
.jsx-yJrE li{font-size:var(--font-size-base);color:var(--text-secondary);line-height:1.7;margin-bottom:8px}
.jsx-K8jIN{display:grid;grid-template-columns:minmax(140px,auto) minmax(0,1fr);gap:10px 18px;margin:0 0 18px;padding:16px 0;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}
.sc-XwCviq{font-size:var(--font-size-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
.sc-r65Ar{font-size:var(--font-size-base);color:var(--text-primary);margin:0;overflow-wrap:anywhere}
/* ---- dense row ----------------------------------------------------- */
  .em-jBmq5{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--border-color);text-decoration:none}
.em-jBmq5:last-child{border-bottom:none}
.sc-hRgfbV{min-width:0}
.em-LWhG{display:block;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:1.4;color:var(--text-primary)}
.em-jBmq5:hover .em-LWhG{color:var(--primary-color)}
.jsx-7diPzF{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:var(--font-size-xs,.72rem);color:var(--text-muted)}
.sc-hrVwRE{color:var(--primary-color);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.sc-Bag0fj{text-transform:uppercase;letter-spacing:.08em}
body { font-family: var(--font-family); font-size: var(--font-size-base); background-color: var(--primary-bg); color: var(--text-primary); line-height: 1.66; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.sc-1thF{scroll-padding-inline-start:2px}
.em-wPGH2 .sc-1thF{grid-auto-columns:minmax(min(190px,80%),1fr)}
.nlt4--sm .sc-1thF{grid-auto-columns:minmax(min(215px,80%),1fr)}
.nlt4--lg .sc-1thF{grid-auto-columns:minmax(min(285px,84%),1fr)}
.nlt4--xl .sc-1thF{grid-auto-columns:minmax(min(330px,88%),1fr)}
.em-9OS23{container-type:inline-size;min-width:0;display:grid;gap:10px;align-content:start}
.css-O0B8LP{
    display:grid;gap:2px;
    padding-bottom:7px;
    border-bottom:2px solid var(--primary-color);
  }
.sc-gTub{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-variant-numeric:tabular-nums;
    font-size:clamp(1rem,7cqi,1.5rem);line-height:1;
    font-weight:var(--font-weight-bold);color:var(--text-primary);
  }
/* 4px of margin: the line above is bold with a tight `line-height`, so its
     line box ends level with the baseline and the two labels touched. */
  .em-8OSpr{
    margin-top:4px;
    font-size:clamp(.62rem,3cqi,.72rem);letter-spacing:.11em;text-transform:uppercase;
    color:var(--text-muted);
  }
.sc-VBfp{
    margin:clamp(10px,1.6vw,16px) 0 0;
    font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);
  }
.sc-VBfp a{color:var(--primary-color);text-decoration:none;font-weight:var(--font-weight-bold)}
.sc-VBfp a:hover{text-decoration:underline;text-underline-offset:3px}
.wp-lead { font-size: var(--font-size-lg); color: var(--text-secondary); line-height: 1.65; max-width: 551px; }
.em-VhmJEp { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg); }
.em-VhmJEp:hover { transform: scale(1.04); box-shadow: var(--shadow-lg); opacity: 0.88; border-color: var(--primary-color); }
.jsx-HFanal { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 27px; border-radius: var(--border-radius); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease; text-decoration: none; white-space: nowrap; font-family: inherit; line-height: 1; }
.wp-center { text-align: center; }
.wp-center .wp-lead, .wp-lead.wp-center { margin: 0 auto; }
.jsx-2zYXOi{max-width:74ch}
/* ── source citations ───────────────────────────────────────────────────
     Sources are printed as citations, never as hyperlinks. The model cannot know
     a real URL; measured industry-wide 19.3% of AI-cited URLs are not live and
     8.7% return 404/410, and on a live artefact a reader clicked a source and got
     berlin.de's "Die Seite wurde nicht gefunden / 410". A dead link to an official
     body is worse than no link: it converts a credibility signal into proof the
     page is fabricated.

     So each source is set as a print citation — document title, issuing body,
     locator — with the three parts visually ranked so the block still reads as
     evidence rather than as prose. */
  /* The document title. `<cite>`'s default italics are dropped — a reference list
     set entirely in italics is harder to scan than one set in the text face.
     Linked: the title carries an underline, because a link that looks like plain
     text is a link nobody clicks. Unlinked: `--flat` removes the affordance
     entirely, so a citation with no known domain does not read as a broken link —
     which is what "it won't let me go to the source" actually described. */
  .css-29U1T{display:block;color:var(--text-primary);font-weight:var(--font-weight-medium);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:var(--border-color)}
.css-29U1T cite{font-style:normal}
.css-29U1T:hover{color:var(--primary-color);text-decoration-color:currentColor}
.em-gysg{text-decoration:none;cursor:default}
.css-ScOT{display:block;font-size:var(--font-size-xs);color:var(--text-secondary);margin-top:2px}
.css-Oh3x{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-xs);color:var(--text-muted);margin-top:2px;letter-spacing:.02em}
/* ── text field ───────────────────────────────────────────────────────── */
  /* 44px minimum height is the touch target; `min-width:0` lets it shrink
     inside a flex/grid row instead of forcing an overflow. The invalid state
     is scoped to `[type="email"]` and gated on `:not(:placeholder-shown)`, so
     it fires only on a half-typed address and never paints an untouched
     required field as an error. That gate needs a placeholder to exist at all
     (`:placeholder-shown` cannot match without one), which is why the email
     fields carry `placeholder=" "` where they have no visible example
     address. */
  .em-uFmvnO{font-family:var(--font-family);font-size:var(--font-size-base,1rem);line-height:1.4;color:var(--text-primary);background:var(--primary-bg);border:1px solid var(--border-color);border-radius:var(--border-radius-sm,3px);padding:11px 14px;min-height:44px;width:100%;min-width:0}
.em-uFmvnO::placeholder{color:var(--text-muted);opacity:1}
.em-uFmvnO:hover{border-color:var(--text-muted)}
.em-uFmvnO:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px;border-color:var(--primary-color)}
.em-uFmvnO[type="email"]:invalid:not(:placeholder-shown){border-color:var(--primary-color);box-shadow:inset 0 -2px 0 var(--primary-color)}
.em-uFmvnO:disabled{opacity:.6;cursor:not-allowed}
/* For panels whose own surface is already --primary-bg. */
  .css-ZzGqI7{background:var(--secondary-bg)}
/* Horizontal rail: scroll-snap so a swipe lands on a card instead of mid-card.
     Never auto-advances — an element that moves content on a timer is an
     explicit Google Ads destination failure. */
  .sc-UESmHo{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(240px,78%),1fr);gap:clamp(14px,2.2vw,24px);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:6px;overscroll-behavior-x:contain}
.sc-UESmHo>*{scroll-snap-align:start}
.jsx-nHKUA{color:var(--primary-color);text-decoration:underline;text-underline-offset:2px}
.jsx-nHKUA:hover{text-decoration-thickness:2px}
.jsx-nHKUA:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px;border-radius:2px}
.em-E3EUH{margin-top:0}
.sc-NfJ8g{display:grid;gap:clamp(12px,2vw,20px);margin:0;padding:0}
.jsx-Pqlj{border-top:1px solid var(--border-color);padding-top:12px;min-width:0}
.em-ZSNPq1{font-family:var(--font-display,var(--font-family));font-size:var(--font-size-base);font-weight:var(--font-weight-bold);margin:0 0 6px;line-height:1.3}
.em-ZSNPq1 a{color:inherit;text-decoration:none}
.em-ZSNPq1 a:hover{color:var(--primary-color)}
.css-S4P7x{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.65;margin:0}
.css-icsyw{display:block;margin-top:6px;font-size:var(--font-size-xs,.75rem);color:var(--text-muted)}
.sc-9xVfL { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); padding: 24px; min-width: 0; }
.sc-9xVfL h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin-bottom: 10px; overflow-wrap: anywhere; }
.sc-9xVfL p { color: var(--text-secondary); line-height: 1.82; margin: 0; overflow-wrap: anywhere; }
/* ── the consent sentence ───────────────────────────────────────────────
    DOM contract (unchanged in every variant):

        <label class="n-flab" for="X-consent">
          <input class="n-fcheck" id="X-consent" ... type="checkbox" required>
          <span>…consent sentence…</span>
        </label>
        <a class="n-flink" href="privacy-policy.html">…policy…</a>

    The link is OUTSIDE the label on purpose: an `<a>` nested in a label bound
    to a checkbox means a click on the link also toggles the box. Keeping it
    outside costs nothing semantically (`for=` still binds the sentence) but it
    used to LOOK broken: the row was a flex/grid row, so the label was one flex
    item and the link another, and once the sentence filled the first line the
    link — an unbreakable item — was pushed onto a line of its own and read as
    an orphaned fragment.

    Fix: the row is plain INLINE TEXT FLOW. `.css-uzR7l` is a block of small
    print, `.em-tTQY9L` is `display:inline`, and the anchor is inline too, so the
    label text and the link are one continuous run of text that wraps mid-
    sentence like any other. A flex row cannot do this — a flex item never
    shares a line with the next one after wrapping — which is exactly why the
    flex version produced the orphan.

    `text-wrap:pretty` was tried here and REMOVED after measuring: Chromium's
    last-line balancing pushed the whole link down to the next line even when
    60px of the previous line were free (measured on the wire family at
    1280px), which reproduced the exact defect this change is fixing. With
    plain wrapping the link only moves down when the word genuinely does not
    fit, like any other word in the sentence.
  */
  .css-uzR7l{display:block;font-size:var(--font-size-xs,.78rem);color:var(--text-muted);line-height:1.75}
.em-YaNTk{padding:clamp(28px,3.6vw,52px) 0 clamp(48px,6vw,84px)}
.jsx-OoWMJ{display:flex;gap:8px;flex-wrap:wrap;font-size:.8rem;color:var(--text-muted);margin-bottom:16px}
.jsx-3jZi{max-width:820px;margin:0 auto}
.jsx-cnycc{margin:8px 0 12px;font-size:clamp(1.7rem,4.4vw,2.8rem);line-height:1.04;letter-spacing:-.035em}
.css-RGYLg{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.8rem;color:var(--text-muted);margin-bottom:clamp(20px,2.6vw,30px)}
.css-rQcF{display:grid;gap:10px;padding:clamp(18px,2.4vw,26px);border-radius:var(--border-radius-lg);background:color-mix(in srgb,var(--primary-color) 6%,var(--secondary-bg));border:1px solid color-mix(in srgb,var(--primary-color) 20%,var(--border-color));margin-bottom:clamp(22px,3vw,34px)}
.jsx-gBJf{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-color)}
.css-rQcF p{margin:0;color:var(--text-secondary);line-height:1.8}
.jsx-tYsZVJ{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.jsx-tYsZVJ li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;font-size:.86rem;color:var(--text-secondary)}
.jsx-tYsZVJ svg{width:16px;height:16px;margin-top:3px;stroke:var(--primary-color);stroke-width:2.4;fill:none}
.em-bbn7{display:grid;border-top:1px solid var(--border-color)}
.em-BaOx{border-bottom:1px solid var(--border-color)}
.em-BaOx summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 2px;cursor:pointer;list-style:none;font-weight:700;font-size:.97rem;line-height:1.3}
.em-BaOx summary::-webkit-details-marker{display:none}
.em-BaOx summary:hover{color:var(--primary-color)}
.jsx-yU5Jl{color:var(--primary-color);font-size:.76rem;font-variant-numeric:tabular-nums;margin-right:10px}
.em-MDVK8{flex-shrink:0;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border-color);color:var(--primary-color);font-size:1rem;line-height:1;transition:transform .25s ease,background .25s ease}
.em-BaOx[open] .em-MDVK8{transform:rotate(45deg);background:color-mix(in srgb,var(--primary-color) 12%,transparent)}
.em-BaOx p{margin:0;padding:0 38px 18px 2px;color:var(--text-secondary);line-height:1.85}
.css-YMPS6{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:clamp(22px,3vw,32px);padding-top:18px;border-top:1px solid var(--border-color);font-size:.85rem;color:var(--text-secondary)}
.lga__table{width:100%;border-collapse:collapse;font-size:.86rem;margin:20px 0}
.lga__table th,.lga__table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-color)}
.lga__table th{color:var(--text-muted);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}
.jsx-lpUK{display:grid;gap:14px;margin-top:16px}
/* ── front-page rhythm ──────────────────────────────────────────────────
     Every block rendered its own <section> on --primary-bg, so eight modules
     stacked into one continuous field: the reader could not see where one ended
     and the next began, which is what made a correct page read as a dump.

     The generator wraps alternating modules in `.em-nTnHSm`, giving the page a
     printed-paper rhythm (a tinted well, then open page, then a tinted well).
     Purely a wrapper + background, so it costs no template changes and does not
     interfere with the container queries inside the cards — those are declared on
     the card elements themselves, not on the section. */
  .jsx-b6lhbA{position:relative}
.em-nTnHSm{background:var(--secondary-bg);border-block:1px solid var(--border-color)}
/* Consecutive tinted bands would double the rule and read as one taller band. */
  .em-nTnHSm + .em-nTnHSm{border-top:none}
/* A tinted band immediately after the masthead area needs its own top rule back
     so the header does not appear to bleed into it. */
  .em-nTnHSm:first-child{border-top:none}
/* ---- editorial rhythm ---------------------------------------------- */
  .css-mVWMwB{padding:clamp(22px,3vw,40px) 0}
.css-E4l9{padding:clamp(14px,2vw,24px) 0}
/* Intrinsic two-up: collapses to one column on its own, so there is no
     breakpoint to maintain (`min(…,100%)` keeps a narrow parent from
     overflowing). */
  .jsx-cT11KZ{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:clamp(20px,3vw,40px);align-items:start}
.jsx-P4xT7{border:1px solid var(--border-color);border-radius:var(--border-radius,4px);background:var(--card-bg);padding:clamp(16px,2.2vw,26px);min-width:0}
.jsx-zuG7c{margin-bottom:14px}
.css-YrH9z{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-primary);margin-bottom:6px}
/* Fields and the submit button use the shared `.em-uFmvnO` / `.css-WbUAak` /
     `.css-ZUMN7d` controls from news-home/sections/news-cards-css.njk, so this
     form looks like the newsletter forms and inherits their visible
     :focus-visible ring instead of the old `outline:none`. Nothing is
     re-declared here: rule families are shuffled per build, so a duplicate
     declaration would win at random. */
  .jsx-gWza9{display:none;font-size:var(--font-size-base);color:var(--text-secondary);line-height:1.7}
.em-gMxj{margin-top:8px;font-size:var(--font-size-sm);color:var(--text-secondary)}
/* The submit used to be a 120px box hard against the left edge of a 500px
     card, which read as an unfinished form. It now terminates the card: full
     width, label centred — the same treatment the open mobile menus give their
     CTA. */
  .jsx-QKyH{margin-top:18px}
.css-aw8p .css-ZUMN7d{display:flex;width:100%;align-items:center;justify-content:center;text-align:center}
/* Validation feedback. `:user-invalid` only matches AFTER the visitor has
     interacted with the field, so an untouched empty form is not painted red
     (`:invalid` would be). Baseline since 2023-12; the JS below is the guard that
     actually blocks the submit, so nothing depends on the selector. */
  .css-aw8p .em-uFmvnO:user-invalid{border-color:var(--secondary-color,var(--primary-color));box-shadow:inset 0 -2px 0 var(--secondary-color,var(--primary-color))}
.em-ybQBM{background:var(--primary-bg);border-top:3px double var(--border-color);margin-top:clamp(28px,4vw,52px);font-family:var(--font-family)}
.em-R0dy0v{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(16px,2.6vw,36px);padding:clamp(26px,3.8vw,44px) 0 clamp(20px,3vw,30px);align-items:start}
.em-ELk4JM{font-family:var(--font-display,var(--font-family));font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:var(--font-weight-bold);color:var(--text-primary);text-decoration:none;letter-spacing:-.01em}
.sc-ZQeio{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;padding:0;list-style:none}
.sc-ZQeio a{font-size:var(--font-size-sm);color:var(--text-secondary);text-decoration:none}
.sc-ZQeio a:hover{color:var(--primary-color);text-decoration:underline;text-underline-offset:3px}
/* DSA Art. 12 triple. */
  .sc-o3xSuI{margin:0;display:grid;gap:8px}
.sc-o3xSuI dt{font-size:var(--font-size-xs);letter-spacing:.11em;text-transform:uppercase;color:var(--text-muted);font-weight:var(--font-weight-bold)}
.sc-o3xSuI dd{margin:2px 0 0;font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.55;overflow-wrap:anywhere}
.sc-o3xSuI a{color:var(--text-secondary);text-decoration:none}
.sc-o3xSuI a:hover{color:var(--primary-color)}
/* The desk index: one column per section, its heading is the section link. */
  .sc-Vtycm{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:clamp(16px,2.6vw,32px);padding:clamp(22px,3.2vw,34px) 0;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}
.sc-4s7r{margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}
.sc-4s7r a{font-size:var(--font-size-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--primary-color);font-weight:var(--font-weight-bold);text-decoration:none}
.sc-4s7r a:hover{text-decoration:underline;text-underline-offset:3px}
.em-R4k0{display:block;font-family:var(--font-display,var(--font-family));font-size:var(--font-size-sm);color:var(--text-primary);text-decoration:none;line-height:1.45}
.em-R4k0:hover{color:var(--primary-color)}
.sc-sy4J{display:flex;flex-wrap:wrap;gap:8px clamp(14px,2vw,22px);align-items:baseline;justify-content:space-between;padding:clamp(14px,2vw,18px) 0 clamp(20px,3vw,30px)}
.sc-YVs5H{display:flex;flex-wrap:wrap;gap:6px clamp(12px,1.8vw,18px);margin:0;padding:0;list-style:none}
.sc-YVs5H a{font-size:var(--font-size-xs);color:var(--text-muted);text-decoration:none}
.sc-YVs5H a:hover{color:var(--primary-color)}
.em-vNXU{font-size:var(--font-size-xs);color:var(--text-muted);line-height:1.7;margin:0}
.css-CvgMv { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.css-CvgMv table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--font-size-sm); }
.css-CvgMv th, .css-CvgMv td { border: 1px solid var(--border-color); padding: 12px 14px; text-align: left; }
.css-CvgMv th { background: var(--secondary-bg); }
.css-CvgMv td { color: var(--text-secondary); vertical-align: top; overflow-wrap: anywhere; }
.jsx-1OH9a6 { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); border-width: 2px; }
.jsx-1OH9a6:hover { transform: scale(1.03); opacity: 0.88; background: color-mix(in srgb, var(--primary-color) 8%, transparent); }
.sc-wLt9 { color: var(--text-muted); font-size: var(--font-size-sm); margin-bottom: 14px; }
.wp-cart-btn { display: inline-flex; align-items: center; gap: 8px; }
.em-0q5T{background:var(--primary-color);color:var(--btn-primary-text,#fff)}
.css-euvGI{display:flex;align-items:stretch;gap:0;min-height:44px}
.jsx-pEGRlR{display:inline-flex;align-items:center;gap:8px;padding:10px 14px 10px 0;font-size:var(--font-size-xs,.72rem);font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;flex:none}
.em-dUEYk6{width:7px;height:7px;border-radius:50%;background:#fff;flex:none}
.em-SiD7k{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.em-SiD7k::-webkit-scrollbar{display:none}
.css-6WuSLj{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;color:#fff;text-decoration:none;font-size:var(--font-size-sm);white-space:nowrap;border-left:1px solid rgba(255,255,255,.28)}
.css-6WuSLj:hover{background:rgba(0,0,0,.16);text-decoration:underline;text-underline-offset:3px}
/* `flex:none` + `nowrap`: in the stacked layout the row drops `white-space:
     nowrap`, and without this the timestamp was squeezed to one digit per line
     ("11 / :2 / 5") next to a headline that had the rest of the row. */
  .jsx-2bXP{flex:none;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-xs,.7rem);opacity:.82;font-variant-numeric:tabular-nums}
/* Whether the "BREAKING" label can sit beside the headline row, or has to sit
     above it with the headlines stacked as full-width rows, depends on how much
     room the STRIP has — the block is also composed inside narrower shells. So the
     question is asked of `.em-NAdWw`, which is the containment context, and not
     of the window. Threshold: the old `max-width:660px` query, measured — a 660px
     window leaves ~612px of content inside the shell. It matches in the shipped
     previews (strip width 362px at a 390px viewport). */
  .em-NAdWw{container-type:inline-size}
.jsx-qyqCw5{list-style:none;margin:0;padding:0}
.jsx-e8M6{container-type:inline-size;min-width:0;display:grid;gap:9px;align-content:start}
.jsx-4u32tu{margin:0;font-size:clamp(.78rem,2.9cqi,.86rem);line-height:1.62;color:var(--text-muted)}
.css-bP14{display:block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;font-weight:var(--font-weight-bold);color:var(--primary-color);margin-bottom:3px}
/* ---- section heading ---------------------------------------------- */
  .jsx-DA3f{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,2vw,22px);flex-wrap:wrap}
/* Inside a block the section head is the first child and the block's own
     padding is the gap, so it must NOT add a top margin there. On the document
     pages (about, contacts, masthead…) it follows arbitrary content instead, and
     with no top margin it collided with it: on a live artefact the "Наша редакция"
     heading sat directly on top of the previous desk's "Редактор рубрики: …"
     line, with 0px between them. `:not(:first-child)` gives the gap exactly
     where it is needed and nowhere else. */
  .jsx-DA3f:not(:first-child){margin-top:clamp(24px,3.6vw,44px)}
.em-LNLk{font-family:var(--font-display,var(--font-family));font-size:clamp(1.05rem,2vw,1.5rem);font-weight:var(--font-weight-bold);letter-spacing:-.01em;color:var(--text-primary);margin:0;line-height:1.2}
.em-LNLk a{color:inherit;text-decoration:none}
.em-LNLk a:hover{color:var(--primary-color)}
.em-6jPsr3{font-size:var(--font-size-sm);color:var(--primary-color);text-decoration:none;white-space:nowrap;font-weight:var(--font-weight-medium)}
.em-6jPsr3:hover{text-decoration:underline;text-underline-offset:3px}
.n-head--hairline{border-bottom:1px solid var(--border-color);padding-bottom:10px}
.n-head--double{border-bottom:3px double var(--border-color);padding-bottom:10px}
.n-head--none{border-bottom:none}
.css-AfDu{color:var(--text-muted)}
.sc-VRkCNp { padding: 72px 0; background: var(--secondary-bg); }
.em-4Mdn { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.em-4Mdn span { padding: 8px 12px; border-radius: 999px; background: var(--secondary-bg); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
header a.is-active{color:var(--primary-color);font-weight:700}
header a.is-active::after{content:'';display:block;height:2px;background:var(--primary-color);border-radius:2px;margin-top:4px}
.wp-payment-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.css-xBNwT { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; width: calc(100% - 48px); max-width: 740px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 20px 24px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 20px; transition: opacity 0.4s, transform 0.4s; }
.css-xBNwT.is-hidden { opacity: 0; transform: translateX(-50%) translateY(20px); pointer-events: none; }
.em-oRiR { font-size: 1.8rem; flex-shrink: 0; }
.jsx-d3ce { flex: 1; font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; }
.jsx-d3ce a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 2px; }
.css-BzjZV { display: flex; gap: 10px; flex-shrink: 0; }
.css-51M9x { padding: 10px 22px !important; font-size: var(--font-size-sm) !important; }
.sc-pgvvpe { padding: 10px 18px !important; font-size: var(--font-size-sm) !important; background: var(--btn-secondary-bg, transparent) !important; color: var(--btn-secondary-text, var(--primary-color)) !important; border: 2px solid var(--btn-secondary-border, var(--primary-color)) !important; opacity: 0.85; }
.sc-pgvvpe:hover { opacity: 1; background: color-mix(in srgb, var(--primary-color) 10%, transparent) !important; }
.jsx-7q2oIW { display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--primary-color); text-transform: uppercase; letter-spacing: 0.11em; margin-bottom: 14px; }
/* ── submit button ────────────────────────────────────────────────────── */
  /* `flex:0 0 auto` + `white-space:nowrap`: the label never wraps and the
     button never shrinks; the field beside it is the element that gives way. */
  /* The label is `--btn-primary-text`, which `buildPaletteVars` picks by measuring
     contrast against the brand colour. It used to be `--primary-bg`, i.e. the PAGE
     background — which on a dark theme is near-black on a dark indigo fill and
     measured 2.3:1. The "Связаться" button was a blue slab you had to select with
     the mouse to read. `--primary-bg` is only correct on a light theme, which is
     why it survived review. */
  .css-ZUMN7d{font-family:var(--font-family);font-size:var(--font-size-sm,.9rem);font-weight:var(--font-weight-bold);letter-spacing:.05em;line-height:1.2;color:var(--btn-primary-text,#fff);background:var(--primary-color);border:1px solid var(--primary-color);border-radius:var(--border-radius-sm,3px);padding:12px 22px;min-height:44px;cursor:pointer;white-space:nowrap;flex:0 0 auto;transition:opacity .18s ease,color .18s ease,background-color .18s ease}
.css-ZUMN7d:hover{opacity:.88}
.css-ZUMN7d:focus-visible{outline:2px solid var(--primary-color);outline-offset:3px}
.css-ZUMN7d:disabled{opacity:.55;cursor:not-allowed}
.n-fbtn--ghost{color:var(--primary-color);background:var(--primary-bg);text-transform:uppercase}
.n-fbtn--ghost:hover{color:var(--btn-primary-text,#fff);background:var(--primary-color);opacity:1}
.em-s5Ror{align-items:start}
.jsx-NYHr{min-width:0;padding-top:clamp(12px,1.8vw,18px);border-top:2px solid var(--text-primary)}
.jsx-minycc{display:block;margin-top:8px}
.jsx-PvHF{
    min-width:0;
    display:grid;gap:clamp(10px,1.6vw,16px);
    padding-top:clamp(12px,1.8vw,18px);
    border-top:1px solid var(--border-color);
  }
.jsx-PvHF>*{min-width:0}
.jsx-PvHF .sc-TkDe:first-child{border-top:none;padding-top:0}
.sc-C6WI{margin-top:clamp(20px,3vw,32px)}
.jsx-WHZ6cN{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none}
.jsx-WHZ6cN a{font-size:var(--font-size-sm);color:var(--primary-color);text-decoration:none}
.jsx-WHZ6cN a:hover{text-decoration:underline;text-underline-offset:3px}
.jsx-kxUAvn{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;border-top:1px solid var(--border-color);padding:16px 0;min-width:0}
.css-VW5iqA{border-radius:50%;object-fit:cover;flex:none}
/* The initials occupy exactly the portrait's box, so a card with a photograph
     and a card without one are the same shape. */
  .jsx-kxUAvn .jsx-C1fbcd{width:64px;height:64px}
.jsx-JvA0{min-width:0}
.css-iPESAM{display:block;font-family:var(--font-display,var(--font-family));font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--text-primary);text-decoration:none}
.css-iPESAM:hover{color:var(--primary-color)}
.css-SE5c{display:block;margin-top:3px;font-size:var(--font-size-xs,.75rem);letter-spacing:.09em;text-transform:uppercase;color:var(--primary-color);font-weight:700}
.jsx-5ghy0A{display:block;margin-top:4px;font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.55}
.css-TJwhqx{display:block;margin-top:6px;font-size:var(--font-size-xs,.75rem);color:var(--text-muted)}
.n-por{border-radius:50%;object-fit:cover;flex:none}
.n-por--xs{width:32px;height:32px}
.n-por--sm{width:40px;height:40px}
.n-por--md{width:56px;height:56px}
.n-por--lg{width:72px;height:72px}
.jsx-qVAMi{padding:72px 0;background:var(--primary-bg)}
::view-transition-new(hdr-31r2){animation:none}
.wp-avatar-chip { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary-color) 14%, var(--secondary-bg)); color: var(--text-primary); border: 1px solid color-mix(in srgb, var(--primary-color) 18%, var(--border-color)); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; flex-shrink: 0; }
/* ---- person -------------------------------------------------------- */
  .em-VlhEw{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--border-color)}
.em-VlhEw:last-child{border-bottom:none}
.css-Ov8CiJ{border-radius:50%;object-fit:cover;flex:none}
.em-x16Af{min-width:0}
.em-aGJ3fC{display:block;font-family:var(--font-display,var(--font-family));font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--text-primary);text-decoration:none}
.em-aGJ3fC:hover{color:var(--primary-color)}
.css-qn0RYn{display:inline-block;font-size:var(--font-size-xs,.75rem);letter-spacing:.09em;text-transform:uppercase;color:var(--primary-color);margin-top:6px;font-weight:700}
.em-M7Xc7{display:inline-block;font-size:var(--font-size-xs,.75rem);color:var(--text-muted);margin-left:8px}
.css-6QUQ0{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.6;margin:7px 0 6px}
.css-Bo4XLq{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-sm);color:var(--primary-color);word-break:break-all}
img[src=""], img:not([src]) { display: none !important; }
.sc-IzUVg{margin-top:6px}
.css-GVaSi2{padding:14px 0;border-bottom:1px solid var(--border-color)}
.css-GVaSi2:last-child{border-bottom:none}
.jsx-mVto{display:block;font-size:var(--font-size-xs,.75rem);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
.jsx-jCvjzF{font-size:var(--font-size-base);color:var(--text-secondary);line-height:1.7;margin:6px 0 6px}
.css-DTwVf{font-size:var(--font-size-sm)}
.wp-trust-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lg5-table{overflow:auto;margin-top:16px}
.lg5-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:var(--font-size-sm)}
.lg5-table th,.lg5-table td{padding:12px 14px;border:1px solid var(--border-color);text-align:left}
.lg5-table th{background:var(--secondary-bg)}
::view-transition-new(root){animation-duration:204ms;animation-timing-function:cubic-bezier(.2,0,0,1)}
.css-siJ5{padding:0 0 clamp(28px,4vw,52px)}
/* The measure is the containment context: the author card and the related grid
     reflow on the width of the COLUMN they sit in, not on the viewport, so they
     are also correct inside a narrower shell. No viewport queries in this file. */
  .sc-glXD6{max-width:76ch;margin:0 auto;container-type:inline-size}
.css-1vfn{padding:clamp(6px,1vw,12px) 0 clamp(14px,2vw,22px)}
.jsx-NGfyly{font-family:var(--font-display,var(--font-family));font-size:clamp(1.75rem,4.4vw,3rem);font-weight:var(--font-weight-bold);line-height:1.06;letter-spacing:-.026em;color:var(--text-primary);margin:0 0 14px}
.css-J7spTc{font-size:clamp(1.05rem,1.7vw,1.32rem);color:var(--text-secondary);line-height:1.58;margin:0 0 6px;font-weight:var(--font-weight-medium)}
.css-TLnWPJ{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:14px 0;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);margin:16px 0 0}
.em-mYLN{font-size:var(--font-size-sm);color:var(--text-muted)}
.em-mYLN b{color:var(--text-secondary);font-weight:var(--font-weight-medium)}
.sc-KZezL{margin:clamp(18px,2.6vw,30px) 0 0}
.sc-KZezL img{width:100%;height:auto;display:block;border-radius:var(--border-radius-sm,3px);background:var(--secondary-bg)}
.css-QoRal{font-size:var(--font-size-xs,.78rem);color:var(--text-muted);line-height:1.55;margin:9px 0 0;padding-bottom:11px;border-bottom:1px solid var(--border-color);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.jsx-J0NbI{background:var(--secondary-bg);border-left:3px solid var(--primary-color);padding:16px 18px;margin:clamp(20px,3vw,30px) 0;border-radius:0 var(--border-radius-sm,3px) var(--border-radius-sm,3px) 0}
.em-QHLb5x{font-size:var(--font-size-xs,.76rem);letter-spacing:.12em;text-transform:uppercase;color:var(--primary-color);font-weight:700;margin:0 0 10px}
.jsx-J0NbI ul{margin:0;padding-left:18px}
.jsx-J0NbI li{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.6;margin-bottom:7px}
.jsx-J0NbI li:last-child{margin-bottom:0}
.css-FZYn22{margin-top:clamp(18px,2.6vw,28px)}
.sc-d790T{font-family:var(--font-display,var(--font-family));font-size:clamp(1.18rem,2.1vw,1.55rem);font-weight:var(--font-weight-bold);line-height:1.26;color:var(--text-primary);margin:clamp(24px,3.4vw,36px) 0 12px;letter-spacing:-.012em}
.css-PPzI{font-size:clamp(1rem,1.15vw,1.09rem);color:var(--text-secondary);line-height:1.82;margin:0 0 17px}
.jsx-4sfqq{margin:0 0 18px;padding-left:20px}
.jsx-4sfqq li{font-size:var(--font-size-base);color:var(--text-secondary);line-height:1.72;margin-bottom:9px}
.jsx-cinr{margin:clamp(22px,3vw,32px) 0;padding:0 0 0 clamp(16px,2.4vw,26px);border-left:3px solid var(--primary-color)}
.jsx-cinr p{font-family:var(--font-display,var(--font-family));font-size:clamp(1.14rem,2vw,1.42rem);line-height:1.45;color:var(--text-primary);margin:0 0 9px;font-weight:var(--font-weight-medium)}
.jsx-HG1MPY{font-size:var(--font-size-sm);color:var(--text-muted)}
.jsx-HG1MPY b{color:var(--text-secondary);font-weight:var(--font-weight-medium)}
.em-kR35Tp{margin:clamp(24px,3.4vw,38px) 0;padding:clamp(18px,2.6vw,26px) 0;border-top:3px double var(--border-color);border-bottom:3px double var(--border-color);text-align:center}
.em-kR35Tp p{font-family:var(--font-display,var(--font-family));font-size:clamp(1.2rem,2.4vw,1.62rem);line-height:1.36;color:var(--text-primary);margin:0 0 10px;letter-spacing:-.014em}
.jsx-PBymHm{margin:clamp(24px,3.4vw,34px) 0 0;padding-top:16px;border-top:1px solid var(--border-color)}
.jsx-sLHOs{font-size:var(--font-size-xs,.76rem);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-weight:700;margin:0 0 10px}
.jsx-PBymHm ol{margin:0;padding-left:20px}
.jsx-PBymHm li{font-size:var(--font-size-sm);line-height:1.65;margin-bottom:8px;color:var(--text-secondary)}
.jsx-PBymHm a{color:var(--primary-color);overflow-wrap:anywhere}
.jsx-PBymHm span{color:var(--text-muted)}
.css-2Hb7x{margin:clamp(22px,3vw,30px) 0 0;padding-top:16px;border-top:1px solid var(--border-color)}
.jsx-5qjkfE{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;margin:clamp(26px,3.6vw,40px) 0 0;padding:clamp(16px,2.4vw,22px);background:var(--secondary-bg);border-radius:var(--border-radius-sm,3px)}
.jsx-5qjkfE img{width:64px;height:64px;border-radius:50%;object-fit:cover}
/* The initials stand in the same 64px box the portrait would occupy, so the
     card has one shape whether or not the desk has a photograph of the reporter. */
  .jsx-5qjkfE .jsx-C1fbcd{width:64px;height:64px}
.jsx-XYx5{font-family:var(--font-display,var(--font-family));font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--text-primary);text-decoration:none;display:block}
.jsx-XYx5:hover{color:var(--primary-color)}
.sc-bjf50{font-size:var(--font-size-xs,.76rem);letter-spacing:.09em;text-transform:uppercase;color:var(--primary-color);font-weight:700;margin:4px 0 0;display:block}
.css-aGYYB{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.65;margin:8px 0 6px}
.em-XjRIb{font-size:var(--font-size-sm);color:var(--primary-color);word-break:break-all}
.em-X0MbIO{margin-top:clamp(28px,4vw,46px);padding-top:clamp(18px,2.6vw,26px);border-top:1px solid var(--border-color)}
.em-WUA8l{font-family:var(--font-display,var(--font-family));font-size:clamp(1.05rem,1.8vw,1.32rem);font-weight:var(--font-weight-bold);color:var(--text-primary);margin:0 0 16px}
/* Intrinsic: three across when there is room for three, one when there is not. */
  .css-wsk8CG{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:clamp(16px,2.2vw,26px)}
::view-transition-old(root){animation-duration:204ms;animation-timing-function:cubic-bezier(.2,0,0,1)}
::view-transition-group(hdr-31r2){animation-duration:0s}
.jsx-Oth4{display:grid;grid-template-columns:minmax(0,.86fr) minmax(260px,.6fr);gap:18px}
.jsx-Oth4>*,.em-z3qHJ,.sc-hxSx{min-width:0}
.css-BBgD{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:clamp(18px,3vw,44px);align-items:start}
.sc-q47U{min-width:0;border-left:3px solid var(--primary-color);padding-left:clamp(12px,1.8vw,20px)}
.em-rQyk3{margin:0;font-family:var(--font-display,var(--font-family));font-weight:var(--font-weight-medium);font-size:clamp(1rem,2vw,1.24rem);line-height:1.45;color:var(--text-primary)}
.css-BJvwY{margin:10px 0 0;font-size:.88rem;line-height:1.6;color:var(--text-secondary)}
.em-QuHDvS{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.75rem;line-height:1.5;color:var(--text-muted)}
.em-QuHDvS b{color:var(--text-secondary);font-weight:var(--font-weight-medium)}
.css-sqw9{min-width:0;margin:0;padding:0;list-style:none}
.css-sqw9 li+li{border-top:1px solid var(--border-color)}
.css-NGOY{display:flex;align-items:baseline;gap:10px;padding:10px 0;text-decoration:none;font-size:.92rem;line-height:1.4;color:var(--text-primary);font-weight:var(--font-weight-medium)}
.css-NGOY:hover{color:var(--primary-color)}
.css-NGOY:hover .jsx-imxP{text-decoration:underline;text-underline-offset:3px}
.jsx-fSSKjG{flex:none;color:var(--primary-color);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;transition:transform .25s ease}
.css-NGOY:hover .jsx-fSSKjG{transform:translateX(3px)}
.jsx-imxP{min-width:0}
.jsx-H7HIE,.em-z3qHJ p,.sc-hxSx div,.css-0lTKy p{color:var(--text-secondary);line-height:1.8}
/* ---- listing grids used by several blocks --------------------------
     Column counts are a RESULT of the available width, not a list of
     breakpoints: `repeat(auto-fit, minmax(min(Xpx,100%),1fr))`. The `min(…,100%)`
     is what stops a container narrower than X from overflowing, and it is what
     replaced the two viewport queries this file used to carry — those were wrong
     inside a narrow shell on a wide screen anyway. */
  .sc-KxA99{display:grid;gap:clamp(16px,2.4vw,28px)}
.em-wTZBd{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.n-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(265px,100%),1fr))}
.n-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
.css-Yk8DyI{padding:0 0 clamp(28px,4vw,54px)}
.jsx-KUnKt{display:grid;gap:10px;padding:clamp(6px,1vw,12px) 0 clamp(16px,2.4vw,26px)}
.jsx-RPwG{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--primary-color);font-weight:var(--font-weight-bold)}
.em-tfFkPr{font-family:var(--font-display,var(--font-family));font-size:clamp(2rem,6vw,4rem);font-weight:var(--font-weight-bold);line-height:1;letter-spacing:-.034em;color:var(--text-primary);margin:0}
.css-7hAyg{font-size:clamp(1.02rem,1.6vw,1.24rem);color:var(--text-secondary);line-height:1.58;margin:0;max-width:64ch}
.css-BhVwxS{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;padding:10px 0;border-top:2px solid var(--text-primary);border-bottom:1px solid var(--border-color);font-size:.88rem;color:var(--text-muted)}
.css-BhVwxS a{color:var(--text-primary);font-weight:var(--font-weight-medium);text-decoration:none;border-bottom:1px solid var(--border-color)}
.css-BhVwxS a:hover{color:var(--primary-color)}
.sc-yx5v{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.css-HaRf{padding:clamp(16px,2.6vw,28px) 0 clamp(18px,2.8vw,32px);border-bottom:1px solid var(--border-color)}
.em-vhmjK{padding-top:clamp(18px,2.8vw,30px)}
/* Text-only slots sit on a tinted panel so the mixed rhythm is legible.
     No border here: the rule card draws its own hairline. */
  .em-vhmjK>.jsx-LRem{background:var(--secondary-bg);padding:clamp(10px,2vw,16px);border-radius:var(--border-radius-sm,3px)}
.jsx-PMeFZ{min-width:0}
.ns5__more{margin-top:clamp(24px,3.6vw,40px);padding-top:clamp(14px,2.2vw,22px);border-top:2px solid var(--border-color)}
.ns5__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:0 clamp(18px,3vw,36px)}
.ns5__empty{font-size:1rem;color:var(--text-muted);padding:clamp(18px,3vw,28px) 0}
.ns5__empty a{color:var(--primary-color)}
.sc-ZGspl { overflow-wrap: anywhere; }
.wp-cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary-color); color: var(--btn-primary-text, #fff); font-size: 0.68rem; font-weight: var(--font-weight-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.wp-cart-count.is-hidden { display: none; }
/* ── containment ─────────────────────────────────────────────────────── */
  .sc-WQANAd{container-type:inline-size;display:grid;gap:10px;min-width:0}
.css-Z1J2{min-width:0}
/* ── shared internals ────────────────────────────────────────────────── */
  .jsx-Cslp7{display:block;overflow:hidden;border-radius:var(--border-radius-sm,3px);background:var(--secondary-bg)}
.jsx-Cslp7 img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.sc-WQANAd:hover .jsx-Cslp7 img{transform:scale(1.04)}
.jsx-mmgUk7{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.jsx-XR9o{font-size:clamp(.62rem,2.1cqi,.74rem);letter-spacing:.13em;text-transform:uppercase;color:var(--primary-color);text-decoration:none;font-weight:700}
.jsx-XR9o:hover{text-decoration:underline;text-underline-offset:3px}
.css-A6KK3G{font-size:clamp(.6rem,1.9cqi,.7rem);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
.em-29Zp .jsx-XR9o{background:var(--secondary-bg);padding:3px 8px;border-radius:3px;letter-spacing:.07em}
.em-29Zp .css-A6KK3G{border:1px solid var(--border-color);padding:2px 7px;border-radius:3px}
.n-c__k--bar .jsx-XR9o{border-left:3px solid var(--primary-color);padding-left:8px}
/* Headline scales with the CARD, so one macro covers hero and rail. */
  /* 10px, not 7: the headline's own `line-height:1.22` leaves no optical space
     under the last line, so 7px of margin measured as 2px of ink before the
     meta row — the card read as one glued block. */
  .em-yeDDk{font-family:var(--font-display,var(--font-family));font-weight:var(--font-weight-bold);line-height:1.22;letter-spacing:-.012em;color:var(--text-primary);margin:0 0 10px;font-size:clamp(.98rem,4.4cqi,1.3rem)}
.em-yeDDk a{color:inherit;text-decoration:none}
.sc-WQANAd:hover .em-yeDDk a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.sc-Hqx8u{font-size:clamp(.84rem,3.1cqi,.95rem);color:var(--text-secondary);line-height:1.6;margin:0 0 10px}
.sc-v3ZQN{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:clamp(.68rem,2.4cqi,.78rem);color:var(--text-muted);line-height:1.4}
.sc-Xulp{color:var(--text-secondary);font-weight:var(--font-weight-medium)}
.em-i1Hkh{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-v3ZQN>*+*::before{content:'·';margin-right:8px;opacity:.55}
/* size hints — a nudge on top of the container-driven scale */
  .css-7UNAMG .em-yeDDk{font-size:clamp(.9rem,3.7cqi,1.05rem)}
.css-h8mZxG .em-yeDDk{font-size:clamp(1.15rem,5.6cqi,2.1rem);line-height:1.14;letter-spacing:-.022em}
.css-h8mZxG .sc-Hqx8u{font-size:clamp(.92rem,3.4cqi,1.12rem)}
/* ── aspect ratios ───────────────────────────────────────────────────────
     The site's ratio axis is carried as a CUSTOM PROPERTY on the card and read
     by the figure, instead of each `.jsx-VFV6e5*` writing `aspect-ratio` directly.
     Reason: written directly, a shape rule further down the sheet
     (`.sc-bpPsaN .jsx-Cslp7{aspect-ratio:16/9}`) has the same specificity and
     simply wins, so a site whose axis rolled `sq` shipped 1/1 cards in its odd
     section bands and 16/9 cards in its even ones — six different picture shapes
     measured on one front page, which is the "photos are all different sizes"
     report. A custom property inherits per card, so a shape can set a DEFAULT
     and the site axis still overrides it. */
  .jsx-Cslp7{aspect-ratio:var(--n-ar,16/9)}
.em-SQkaj{--n-ar:16/9}
.n-c--r-sq{--n-ar:1/1}
.n-c--r-tall{--n-ar:4/5}
.n-c--r-pano{--n-ar:21/9}
/* ── a card cannot query itself ───────────────────────────────────────────
     `container-type: inline-size` is declared on `.sc-WQANAd`, and a container query can
     NEVER style its own container. So every `@container { .n-c--… { … } }` rule
     below this comment used to be dead: the shapes that reflow on their own width
     were doing it with rules that never fired.

     Measured consequences before the fix, in a browser:
       · `.jsx-Ymlcs` at 174px kept `grid-template-columns:auto minmax(0,1fr)`,
         the timestamp took 144.5px and the headline was left 17.7px — it overflowed
         to x=1055 and produced horizontal scroll on the page.
       · `.css-vwDW` could not fold at all: `minmax(min(100%,320px),1.6fr)` plus
         `minmax(min(100%,260px),1fr)` computes to 320+260 inside a 343px container,
         so at 390px a stack sat at x=350 with 93 elements past the viewport edge.

     The fix is not a wrapper (that would touch every template that draws a card)
     and not moving `container-type` (the cards genuinely need it for their `cqi`
     type scaling). It is to express these three shapes as INTRINSIC flex: each part
     declares a flex-basis with the mandatory `min(…, 100%)` floor, so the row folds
     exactly when its parts no longer fit — no query, nothing to fire, and correct
     at widths nobody tested. */
  /* ── 2 side ──────────────────────────────────────────────────────────── */
  /* Flex, not a queried grid: the figure asks for 34% but never less than 96px,
     the body asks for 150px, and the two share a line only while 96+150+gap fits.
     Below that the body wraps under the picture on its own arithmetic. */
  .css-v22M{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px}
/* A side thumbnail is a strip beside text, never a lead picture, so it keeps its
     own 4/3 whatever the site axis says — `pano` or `tall` inside a 34% column is
     a sliver. This is the one deliberate exception to the token, and it is
     deliberate because it is a DIFFERENT KIND of image, not the same image at
     another shape. */
  .css-v22M .jsx-Cslp7{flex:0 0 min(34%,100%);min-width:96px;aspect-ratio:4/3}
.css-v22M .css-Z1J2{flex:1 1 min(150px,100%);min-width:0}
.css-v22M.n-c--flip .jsx-Cslp7{order:2}
/* ── 3 overlay ───────────────────────────────────────────────────────── */
  .em-01VZM{position:relative;overflow:hidden;border-radius:var(--border-radius-sm,4px)}
.em-01VZM .css-Z1J2{padding:0}
/* ── 4 rule ──────────────────────────────────────────────────────────── */
  .sc-TkDe{border-top:1px solid var(--border-color);padding-top:12px}
.sc-TkDe .em-yeDDk{font-size:clamp(1rem,4.8cqi,1.42rem)}
/* ── 5 numbered ──────────────────────────────────────────────────────── */
  /* Flex for the same reason, and it also fixes a real emission bug: with
     `show_photo=true` the macro emits THREE children (rank, figure, body) into a
     two-track grid, so the body auto-placed onto row 2 and the fixed 52px
     thumbnail landed in a 0px track — a measured 24px overflow at 390/768/1024. */
  .em-h96i2t{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:flex-start;border-bottom:1px solid var(--border-color);padding-bottom:12px}
.em-h96i2t .css-1ldOi4{flex:0 0 auto}
.em-h96i2t .jsx-Cslp7{flex:0 0 auto}
.em-h96i2t .css-Z1J2{flex:1 1 min(150px,100%);min-width:0}
.em-h96i2t .css-1ldOi4{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;font-size:clamp(1.1rem,5.4cqi,1.7rem);font-weight:700;line-height:1;color:var(--primary-color);opacity:.85}
.em-h96i2t .jsx-Cslp7{aspect-ratio:1/1;width:52px}
/* ── 6 frame ─────────────────────────────────────────────────────────── */
  .sc-bpPsaN{border:1px solid var(--border-color);border-radius:var(--border-radius-md,8px);overflow:hidden;gap:0;align-content:start}
/* No `aspect-ratio` here: the framed panel is the same lead-style picture as a
     stack card, so it follows the site's ratio axis. Hardcoding 16/9 is what put
     1/1 overlay leads and 16/9 framed panels in alternating bands of one page. */
  .sc-bpPsaN .jsx-Cslp7{border-radius:0}
.sc-bpPsaN .css-Z1J2{padding:clamp(12px,3.4cqi,18px)}
.sc-bpPsaN:hover{border-color:var(--primary-color)}
/* ── 7 compact ───────────────────────────────────────────────────────── */
  /* Flex: the stamp takes what it needs, the body takes the rest and wraps under
     it once 140px no longer fits beside it. The queried-grid version could not
     fold — it is what left a headline 17.7px wide at a 174px card. */
  .jsx-Ymlcs{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;border-bottom:1px solid var(--border-color);padding-bottom:11px}
.jsx-Ymlcs .n-c__st,.jsx-Ymlcs .css-bHWhr9{flex:0 0 auto}
.jsx-Ymlcs .css-Z1J2{flex:1 1 min(140px,100%);min-width:0}
.jsx-Ymlcs .em-yeDDk{font-size:clamp(.9rem,3.4cqi,1.02rem);font-weight:var(--font-weight-medium);font-family:var(--font-family);margin-bottom:4px}
.jsx-D5pz1{padding:clamp(18px,2.6vw,34px) 0}
.jsx-D5pz1+.jsx-D5pz1{border-top:1px solid var(--border-color)}
.css-qRr6{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:clamp(12px,1.8vw,20px)}
.jsx-5KvSWy{font-family:var(--font-display,var(--font-family));font-size:clamp(1.05rem,2.3vw,1.6rem);font-weight:var(--font-weight-bold);letter-spacing:-.015em;line-height:1.15;margin:0}
.jsx-5KvSWy a{color:var(--text-primary);text-decoration:none}
.jsx-5KvSWy a:hover{color:var(--primary-color)}
.sc-zuJKvK{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:var(--font-weight-bold);color:var(--primary-color);border:1px solid var(--border-color);border-radius:var(--border-radius-sm,3px);padding:3px 8px}
.em-CPfFM{font-size:.86rem;line-height:1.6;color:var(--text-secondary);margin:0 0 14px;max-width:64ch}
/* odd band: lead + ranked list, intrinsic split, collapses on its own */
  .em-iiug5Z{display:grid;gap:clamp(16px,2.6vw,32px);grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));align-items:start}
.css-iijn{min-width:0}
.em-vvlwM{display:grid;gap:12px;min-width:0;padding-left:clamp(0px,1.4vw,18px);border-left:3px solid var(--secondary-bg)}
.css-nrX1K{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;font-weight:var(--font-weight-bold);color:var(--primary-color);text-decoration:none}
.css-nrX1K:hover{text-decoration:underline;text-underline-offset:3px}
/* even band: flat grid of panels, no hierarchy */
  .sc-Iek8D{align-items:stretch}
/* ── form controls: .n-f* ────────────────────────────────────────────────
    One control look for every newsletter variant and for the contact form.
    Each variant keeps its own LAYOUT (band, panel, card, strip); the controls
    themselves are defined once here, so a reviewer sees the same checkbox,
    field and button everywhere in the paper.

    Cascade note: `dedupAndShuffleCss` shuffles rule FAMILIES (grouped by the
    first class of the selector) before the sheet is written, so the relative
    order of `.em-uFmvnO` and `.nnl3__in` is random per build. Therefore a
    variant file must never re-declare a property that a `.n-f*` rule already
    sets on the same element — variants only add properties nothing here owns
    (flex bases, margins, justify-self). Modifiers such as `.n-fbtn--ghost`
    live in this file directly after their base rule: the family key strips the
    `--suffix`, so base → modifier order is preserved.

    ── Checkbox: the native input, styled directly ────────────────────────
    The `<input type="checkbox">` is KEPT and styled itself. It is never
    replaced by a div/span (that would destroy the `checkbox` role, Tab focus,
    Space toggling, form participation and the checked state exposed to AT),
    and it is never hidden with `display:none` / `visibility:hidden` (which
    removes it from the a11y tree and from the tab order). Instead
    `appearance:none` strips the platform look and the box is drawn on the
    input, with the tick as a rotated border wedge in `:checked::after` — the
    current MDN "Advanced form styling" recommendation, and what
    scottaohara's styled-form-control notes and the a11y-examples WCAG guide
    both settle on in place of the old "visually hide the input and style a
    sibling span" hack.

    `accent-color:var(--primary-color)` alone was considered: it is the
    one-property option and keeps the fully native rendering, which is the
    best choice when only the hue needs to change. It is not enough here
    because the paper needs a specific box radius, border weight and tick
    shape to sit with its typography — so `appearance:none` is used AND
    `accent-color` is set anyway, as a free fallback for any checkbox/radio in
    the artefact that is not otherwise styled.

    `:focus-visible` draws a real `outline` with `outline-offset` (never a
    subtle box-shadow, which disappears against a busy background), `:disabled`
    is styled, and the shape is carried by a BORDER rather than a background
    image, so the control survives Windows High Contrast; the
    `forced-colors: active` block below then restores system colours. Hit area
    is widened to 24px (WCAG 2.5.8) with a transparent `::before` on the input,
    without enlarging the drawn box.
  */
  .em-M53Og{appearance:none;-webkit-appearance:none;accent-color:var(--primary-color);position:relative;box-sizing:border-box;display:inline-block;flex:none;font-size:1.2rem;inline-size:1.2rem;block-size:1.2rem;margin:0;margin-inline-end:.42em;vertical-align:-.22em;border:1px solid var(--border-color);border-radius:var(--border-radius-sm,3px);background:var(--primary-bg);cursor:pointer}
/* Transparent 24px target, centred on the 1.2rem box. */
  .em-M53Og::before{content:'';position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:24px;block-size:24px;transform:translate(-50%,-50%)}
.em-M53Og:hover{border-color:var(--primary-color)}
.em-M53Og:checked{background:var(--primary-color);border-color:var(--primary-color)}
/* Tick = two borders of an empty box, rotated. `em` here is the 1.2rem the
     input sets on itself, so the tick scales with the box, not with the
     surrounding small print. */
  .em-M53Og:checked::after{content:'';position:absolute;inset-block-start:.16em;inset-inline-start:.33em;inline-size:.3em;block-size:.55em;border:.13em solid var(--primary-bg);border-block-start:0;border-inline-start:0;transform:rotate(40deg)}
.em-M53Og:focus-visible{outline:2px solid var(--primary-color);outline-offset:3px}
.em-M53Og:disabled{cursor:not-allowed;opacity:.55;background:var(--secondary-bg);border-color:var(--border-color)}
a { color: inherit; text-decoration: none; }
.wp-link:hover { text-decoration: underline; text-underline-offset: 0.16em; }
.wp-link { color: var(--primary-color); font-weight: var(--font-weight-bold); text-decoration: none; }
.wp-payment-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-color); background: color-mix(in srgb, var(--card-bg) 92%, transparent); color: var(--text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
/* ---- breadcrumbs --------------------------------------------------- */
  .css-G82Z{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--font-size-xs,.76rem);color:var(--text-muted);padding:14px 0}
.em-b0XBw1{color:var(--text-muted);text-decoration:none}
.em-b0XBw1:hover{color:var(--primary-color);text-decoration:underline;text-underline-offset:3px}
.em-YdPa{opacity:.5}
.em-nXQC{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(52ch,60vw)}
.sc-WKv6tW{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2.2vw,24px);align-items:start}
.em-zAQgq{border-radius:50%;object-fit:cover;flex:none}
.sc-nzGij8{display:block;font-size:var(--font-size-xs,.75rem);letter-spacing:.09em;text-transform:uppercase;color:var(--primary-color);font-weight:700}
.jsx-t4zF{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px;font-size:var(--font-size-sm)}
.jsx-t4zF a{color:var(--primary-color);text-decoration:none;word-break:break-all}
.jsx-t4zF a:hover{text-decoration:underline;text-underline-offset:3px}
html { scroll-behavior: smooth; font-size: 100%; }
.css-0lTKy{padding:20px}
.css-0lTKy h2{font-size:var(--font-size-lg);margin-bottom:10px}
.css-QWoVLC { color: var(--text-secondary); line-height: 1.85; max-width: 860px; overflow-wrap: anywhere; }
.jsx-LD9O { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); padding: 32px; margin-bottom: 24px; }
.sc-VEd4BQ{display:grid;gap:8px;margin-top:14px}
.sc-VEd4BQ a{text-decoration:none;color:var(--text-secondary)}
/* ── metadata icons ─────────────────────────────────────────────────────
     The whole reason this exists: a news page is mostly metadata, and set as
     uniform grey words it reads as one block of text with no entry points. A
     hairline mark in front of each fact gives the row a scannable structure
     without adding a single word.

     `currentColor` + `opacity` only. The icon must never be able to introduce a
     colour of its own, and at .65 it reads as a quiet marker rather than as
     decoration competing with the label it belongs to. `flex:none` stops it
     being squeezed to nothing inside a flex row of long localised labels; the
     -.15em baseline shift centres a 16px box against lowercase text. */
  .em-bpdV3{vertical-align:-.15em;flex:none;opacity:.65}
.wp-rating-text strong { color: var(--text-primary); }
.wp-rating-text { font-size: var(--font-size-sm); color: var(--text-secondary); }
.n-rail{display:grid;gap:0}
.css-WbUAak{resize:vertical;min-height:120px}
/* ---- AI disclosure (EU AI Act Art. 50) ----------------------------- */
  .css-yJfHz{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px dashed var(--border-color);padding:11px 14px;margin:20px 0;border-radius:var(--border-radius-sm,3px);font-size:var(--font-size-sm)}
.jsx-tntO{color:var(--text-secondary);line-height:1.5}
.em-Mqxn8L{color:var(--primary-color);white-space:nowrap}
.sc-KQJTTY{list-style:none;margin:0;padding:0}
.jsx-2xQy{container-type:inline-size;min-width:0;display:grid;gap:12px;align-content:start;padding-top:14px;border-top:3px solid var(--primary-color)}
.css-M6tJfe{justify-self:start;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;font-weight:var(--font-weight-bold);color:var(--primary-color)}
.jsx-fR2f{margin:0;font-family:var(--font-display,var(--font-family));font-size:clamp(1.05rem,5.2cqi,1.62rem);line-height:1.32;letter-spacing:-.015em;color:var(--text-primary)}
.jsx-fR2f::before{content:'\201C'}
.jsx-fR2f::after{content:'\201D'}
.em-Gk1TbL{display:grid;gap:2px;font-size:.78rem}
.sc-PgWA{color:var(--primary-color);text-decoration:none;font-weight:var(--font-weight-bold);letter-spacing:.02em}
.sc-PgWA:hover{text-decoration:underline;text-underline-offset:3px}
.css-VJi7{color:var(--text-muted);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.css-86b27P { max-width: var(--container-max-width); margin: 0 auto; padding-inline: 30px; }
/* ── tag row ────────────────────────────────────────────────────────────
     One mark on the group label, none on the chips. */
  .em-Rageuk{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.em-lee2gJ{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-xs,.76rem);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
.em-RNiXQv{font-size:var(--font-size-xs,.78rem);color:var(--text-secondary);background:var(--secondary-bg);border:1px solid var(--border-color);padding:4px 10px;border-radius:100px}
.css-0Q9T { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wp-section { padding: var(--section-padding); }
.wp-stars { display: inline-flex; align-items: center; gap: 4px; color: var(--secondary-color, var(--primary-color)); line-height: 1; }
.wp-stars svg { width: 15px; height: 15px; display: block; fill: currentColor; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
@supports (scrollbar-gutter:stable){html{scrollbar-gutter:stable}}
@font-face {font-family:"e69rlg";src: local('Arial'), local('ArialMT'), local('Liberation Sans');ascent-override: 109.2105%;descent-override: 42.6604%;line-gap-override: 0%;size-adjust: 93.7639%;}
@font-face {font-family:"lldmf";src: local('Roboto Regular'), local('Roboto-Regular');ascent-override: 108.9713%;descent-override: 42.5669%;size-adjust: 93.9697%;}
@font-face {font-family:"hbpbv9u";src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif');ascent-override: 87.8653%;descent-override: 28.4121%;line-gap-override: 0%;size-adjust: 117.9077%;}
@font-face {font-family:"l32qj";src: local('Noto Serif Regular'), local('NotoSerif-Regular');ascent-override: 104.0326%;descent-override: 33.6399%;size-adjust: 99.5842%;}
/* Wide: identity column on the left, desks and utility strip on the right, with
     the vertical rule that gives this variant its silhouette. Bounded tracks, so
     the nav can never stretch into a stack of full-width rows again. */
  @media(min-width:900px){
    .css-LWFyKe{grid-template-columns:minmax(0,clamp(190px,21vw,290px)) minmax(0,1fr);grid-template-areas:'id nav' 'id util';column-gap:clamp(20px,3vw,44px);row-gap:12px;align-items:start;padding-block:clamp(16px,2.2vw,26px)}
    .jsx-llQf7{grid-area:id;border-right:1px solid var(--border-color);padding-right:clamp(16px,2vw,28px);align-self:stretch}
    .em-10yqy{grid-area:nav}
    .jsx-L48ga3{grid-area:util}
  }
@container (min-width: 340px){
    /* Scrim only where white-on-photo stays legible. */
    .em-01VZM .css-Z1J2{position:absolute;inset:auto 0 0 0;padding:clamp(12px,4cqi,26px);background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.36) 58%,transparent);color:#fff}
    .em-01VZM .em-yeDDk,.em-01VZM .em-yeDDk a{color:#fff}
    .em-01VZM .jsx-XR9o{color:#fff}
    .em-01VZM .css-A6KK3G,.em-01VZM .sc-v3ZQN{color:rgba(255,255,255,.88)}
    .em-01VZM .sc-Xulp{color:#fff}
  }
/* Respect reduced-motion: the only motion here is the image hover zoom. */
  @media (prefers-reduced-motion: reduce){
    .jsx-Cslp7 img,.sc-WQANAd:hover .jsx-Cslp7 img{transition:none;transform:none}
    .sc-UESmHo{scroll-snap-type:none}
    .css-ZUMN7d{transition:none}
  }
/* Windows High Contrast / forced-colors: `appearance:none` drops the
     platform control, so the box and tick must be re-stated in system
     colours. The shape is a border (not a background image), which is why the
     control stays visible at all; `forced-color-adjust:none` then lets the
     checked fill use Highlight instead of being flattened. */
  @media (forced-colors: active){
    .em-M53Og{forced-color-adjust:none;border:1px solid CanvasText;background:Canvas}
    .em-M53Og:checked{background:Highlight;border-color:Highlight}
    .em-M53Og:checked::after{border-color:HighlightText}
    .em-M53Og:focus-visible{outline:2px solid CanvasText;outline-offset:3px}
    .em-M53Og:disabled{opacity:1;border-color:GrayText}
    .em-uFmvnO,.css-ZUMN7d{border:1px solid CanvasText}
    .css-ZUMN7d:focus-visible,.em-uFmvnO:focus-visible{outline:2px solid CanvasText}
  }
@media (prefers-reduced-motion: reduce){
    .jsx-fSSKjG,.css-NGOY:hover .jsx-fSSKjG{transition:none;transform:none}
  }
/* `1fr` is `minmax(auto, 1fr)`, and `auto` floors the track at the
     min-content width of its contents. With nested grids inside (each grid
     item defaulting to min-width:auto) that floor grew past the viewport and
     the whole legal page scrolled sideways on a phone. minmax(0,1fr) plus an
     explicit min-width:0 on the panels lets the column actually shrink. */
  @media(max-width:900px){.jsx-Oth4{grid-template-columns:minmax(0,1fr)}}
@media (max-width: 900px) {
    .css-s3c3y, .css-0Q9T { grid-template-columns: 1fr; }
  }
@media(max-width:860px){.css-odZ0{grid-template-columns:1fr}}
@media(max-width:820px){header nav.is-open{max-height:min(76vh,32rem);overflow-y:auto;overscroll-behavior:contain}header nav.is-open a{white-space:normal;overflow-wrap:anywhere}}
@media (max-width: 768px) {
      h1, h2, h3, h4, .wp-h2 { word-break: break-word !important; overflow-wrap: anywhere !important; hyphens: auto; line-height: 1.25 !important; max-width: 100%; }
      h1 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }
      h2, .wp-h2 { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; }
      h3 { font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important; }
      h4 { font-size: clamp(1rem, 4vw, 1.2rem) !important; }
      .css-86b27P { padding-inline: 17px !important; }
      .wp-section { padding: 48px 0 !important; }
      .jsx-HFanal { padding: 12px 18px; font-size: 0.95rem; }
      .wp-trust-strip { grid-template-columns: 1fr; }
      img, video { max-width: 100%; height: auto; }
      :root { --font-size-sm: 1rem; }
      p, li, td, th, a { word-break: break-word; overflow-wrap: anywhere; }
      pre, code { white-space: pre-wrap; word-break: break-all; }
      table { display: block; overflow-x: auto; max-width: 100%; }
    }
@media(max-width:768px){.jsx-qVAMi{padding:56px 0}.em-z3qHJ,.sc-hxSx,.css-0lTKy{padding:18px}}
@media(max-width:760px){
    .css-HXpJ{display:block;position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
    .em-Kvd3sa{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;width:100%;font-size:var(--font-size-sm);color:var(--text-primary);padding:10px 0 9px;border-top:1px solid var(--border-color)}
    .em-Kvd3sa span{display:block;width:18px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
    .em-10yqy{display:none;flex-direction:column;gap:0;max-height:min(70vh,28rem);overflow-y:auto;overscroll-behavior:contain}
    .css-HXpJ:checked~.em-10yqy{display:flex}
    .css-HXpJ:focus-visible~.em-Kvd3sa{outline:2px solid var(--primary-color);outline-offset:2px}
    .sc-VYNFNU{padding:11px 0;border-bottom:1px solid var(--border-color);white-space:normal;border-radius:0}
    /* Subscribe button, disclosure open: centred and full width.
       With the desks stacked as a centred column the button sat hard against the
       left edge, reading as a stray element rather than as the row's call to
       action. `justify-content:center` centres the label inside the box and
       `width:100%` makes the box the width of the column it belongs to, so it
       terminates the open menu instead of dangling off it. */
    .jsx-L48ga3 .em-1TanS{width:100%;justify-content:center;margin-left:0;margin-top:10px;padding-block:9px}
  }
@media(max-width:700px){
    .sc-m9n8Jz{grid-template-columns:auto minmax(0,1fr);gap:10px}
    .em-rCDW{grid-column:2;margin-top:-4px}
  }
@media (max-width: 640px) {
    .css-xBNwT { flex-direction: column; align-items: flex-start; bottom: 0; left: 0; right: 0; transform: none; width: 100%; max-width: 100%; border-radius: var(--border-radius) var(--border-radius) 0 0; padding: 16px 18px; gap: 14px; }
    .css-xBNwT.is-hidden { transform: translateY(20px); }
    .em-oRiR { display: none; }
    .jsx-d3ce { font-size: var(--font-size-sm); }
    .css-BzjZV { width: 100%; gap: 8px; }
    .css-51M9x, .sc-pgvvpe { flex: 1; padding: 11px 14px !important; }
  }
/* ── footer, narrow screens ─────────────────────────────────────────────
     On a phone the footer is reached after a long scroll and it landed with no
     announcement at all: same background as the article above it, a hairline rule,
     then small grey links. The owner's note was that it needs to stand out.

     Three cheap signals, applied only where the viewport really is narrow — this
     IS a viewport concern, because it is about where the footer sits in the scroll
     of a phone, not about the width of any component:
       · a heavier top edge, so the end of the content is unmistakable;
       · a tinted surface, separating it from the page it follows;
       · larger tap targets and more generous leading, because a 12px grey link in
         a wrapped row of twenty is unhittable with a thumb (WCAG 2.5.8 asks for
         24px, and these were about 16px tall).
     Scoped to `footer` so it applies to whichever of the five variants shipped. */
  @media (max-width: 640px){
    .jsx-b6lhbA + footer, footer{border-top:4px solid var(--primary-color)}
    /* `!important` is deliberate and is the correct tool exactly once here. Each
       footer variant sets its own surface on its own class (`.nfm`, `.em-ybQBM`, …),
       which outranks a bare `footer` selector no matter where this rule sits — and
       the shell must not hardcode the five variant class names, because that would
       couple it to whichever variant shipped. Measured before the fix: the footer
       computed to rgb(255,255,255), i.e. the tint silently did nothing. This is a
       narrow-screen override of a component's own surface, which is the one case
       `!important` is for. */
    footer{background:var(--secondary-bg) !important}
    footer a{min-height:24px;display:inline-flex;align-items:center}
    footer li{line-height:1.9}
  }
@media (max-width: 640px) {
    .sc-VRkCNp { padding: 56px 0; }
    .jsx-LD9O, .sc-9xVfL { padding: 20px 18px; }
    .css-CvgMv th, .css-CvgMv td { padding: 10px 12px; font-size: 0.8rem; }
  }
@container (max-width: 616px){
    .em-NAdWw .css-euvGI{flex-direction:column;gap:0}
    /* `.em-SiD7k` is the flex container the headlines actually live in, and it
       was left in `row` while only its parent turned into a column. The items
       therefore stayed side by side — and because the same rule drops
       `white-space:nowrap`, they no longer scrolled but SHRANK: measured at
       390px, three items in ~100px columns with the timestamps broken one digit
       per line. Stacking the list is the whole point of this query. */
    .em-NAdWw .em-SiD7k{flex-direction:column;align-items:stretch;overflow-x:visible}
    .em-NAdWw .jsx-pEGRlR{padding:9px 0 4px}
    /* `padding-bottom` on the last row: the coloured band ended flush with the
       final headline's descender, so the strip read as if it had been cut off. */
    .em-NAdWw .css-6WuSLj{border-left:none;border-top:1px solid rgba(255,255,255,.24);padding:9px 0;white-space:normal}
    .em-NAdWw .css-6WuSLj:last-child{padding-bottom:12px}
  }
/* The definition list stacks on its OWN width, so it is also correct inside a
     narrow column on a wide viewport. `.jsx-eQIVc` is the containment context. */
  @container (max-width: 560px){
    .jsx-K8jIN{grid-template-columns:minmax(0,1fr);gap:4px 0}
    .sc-XwCviq{margin-top:10px}
  }
@media(max-width:560px){.sc-WKv6tW{grid-template-columns:1fr}}
@media (max-width: 560px) {
    .sc-VRkCNp { padding: 48px 0; }
    .jsx-LD9O, .sc-9xVfL { padding: 18px 16px; }
    .em-4Mdn { gap: 8px; }
    .em-4Mdn span { width: 100%; border-radius: var(--border-radius); }
    .css-CvgMv { margin: 0 -4px; padding-bottom: 4px; }
  }
@container (max-width: 520px){
    .jsx-5qjkfE{grid-template-columns:minmax(0,1fr);justify-items:start}
    .jsx-5qjkfE img,.jsx-5qjkfE .jsx-C1fbcd{width:56px;height:56px}
  }
@media (max-width: 480px) {
      .css-86b27P { padding-inline: 14px !important; }
      .wp-section { padding: 36px 0 !important; }
      h1 { font-size: clamp(1.4rem, 7vw, 1.9rem) !important; }
      .jsx-HFanal { padding: 11px 16px; font-size: 0.9rem; }
    }
@media (max-width: 420px) {
    .sc-wLt9 { font-size: 0.8rem; line-height: 1.5; }
  }
@media (max-width: 380px) {
    .css-xBNwT { padding: 14px; }
    .css-BzjZV { flex-direction: column; }
    .css-51M9x, .sc-pgvvpe { width: 100%; }
  }
/* The standfirst is the first thing to go when the card is narrow. `cqi` still
     works here — the card IS the container, and this styles a DESCENDANT. */
  @container (max-width: 339px){
    .css-v22M .sc-Hqx8u{display:none}
  }
@container (max-width: 339px){
    .em-01VZM .jsx-Cslp7{aspect-ratio:16/10}
    .em-01VZM .css-Z1J2{padding-top:10px}
  }
@container (max-width: 300px){
    .sc-nb9vk .sc-Hqx8u{display:none}
  }
/* ── 1 stack ─────────────────────────────────────────────────────────── */
  /* Below ~230px of its own width a thumbnail stops informing and starts
     stealing the headline's space, so it is dropped rather than shrunk. */
  @container (max-width: 230px){
    .sc-nb9vk .jsx-Cslp7{display:none}
  }