/* notis — desktop.css
 *
 * The desktop redesign, deploy 1 (0.52.0; Status t-130; Karl, 8 Oct 2026: "it all looks amazing"): the shell (header and
 * footer), the front page "G, the wire" and its Grid (the bento), the story actions and the edition calendar, the
 * story page, and the dark theme. "B:Main:n" names a line of the design board Main (and Signed, GridBento, Actions,
 * Article, DarkFront, DarkArticle); anything the boards do not draw is marked NOT ON THE BOARD.
 *
 * ONE BREAKPOINT, 721px, the line the phone's layer (site.css section 13, notis.css, members.css, worlds.css:
 * `max-width: 720px`) already stops at, and the one the old desktop began at. base.html links this sheet with
 * `media="(min-width: 721px)"` and every rule here is inside that query as well, so a page at 720px and narrower
 * reads none of it: the phone is exactly what it was. The desktop markup it shows (.wr, .wr-top, .wr-foot) is `hidden`
 * in the page, and nothing here is needed to hide it below. Between 721 and 1100px the same design reflows to fewer
 * columns (the last section), so a tablet gets the wire too and no width falls between the two layers.
 *
 * House rules: colour is a Botnest token only, no hex; the faces are Alegreya and Alegreya Sans, served by us (they were
 * Google Fonts on the boards, and never are here); nothing moves after the page is drawn. The boards' hex values map
 * to tokens by role, in the one block below; each token is a light/dark pair, so the dark theme follows the existing
 * theme switch (data-bn-theme dawn | night, and the device while no choice is made) with nothing repeated.
 */

@media (min-width: 721px) {

/* ============================================================ the board's colours, as tokens
   The board's own values (0.52.1): the colours are declared once, as light/dark pairs `--wd-*-l` and `--wd-*-d`, in notis-theme.css
   (where this app's tokens live, and for 721px and wider only), because this sheet names no colour of its own. Here each pair
   is read as one `--wr-*` token: the light value first, and where the browser has light-dark() the pair, so the dark theme
   follows the existing theme switch (data-bn-theme dawn | night, and the device while no choice is made) with nothing repeated. */
:root {
  --wr-page: var(--wd-page-l);           /* B:Main #FFFFFF  | B:DarkFront #0C1424 */
  --wr-ms-h: 107px;                      /* 0.52.3: the signed-in strip's place before it is drawn: one row of case pills; the page's head replaces it with the height this browser drew last time */
  --wr-ink: var(--wd-ink-l);             /* #0E1626 | #EDF1F8 */
  --wr-ink2: var(--wd-ink2-l);           /* #2A3347 | #C9D3E4 */
  --wr-body: var(--wd-body-l);           /* #1C2536 | #D4DCEA */
  --wr-ink3: var(--wd-ink3-l);           /* #3E475A | #B7C4DA */
  --wr-mute: var(--wd-mute-l);           /* #4A5468 | #9FB1CC */
  --wr-cap: var(--wd-cap-l);             /* #5A6274 | #9FB1CC */
  --wr-faint: var(--wd-faint-l);         /* #8A9BB8 */
  --wr-rule: var(--wd-rule-l);           /* #DED6C6 | #26365A */
  --wr-hair: var(--wd-hair-l);           /* #EEE9DF | #1B2843 */
  --wr-panel: var(--wd-panel-l);         /* #F6F2EA | #111A2E */
  --wr-hover: var(--wd-hover-l);         /* #FAF8F4 | #121C30 */
  --wr-qhover: var(--wd-qhover-l);       /* #F3F1EC | #16213A */
  --wr-head: var(--wd-head-l);           /* #0E1626 | #060B15 */
  --wr-green: var(--wd-green-l);         /* #17734F | #4CCB97 */
  --wr-accent: var(--wd-accent);         /* #4CCB97 */
  --wr-on-accent: var(--wd-on-accent);   /* #0C1424 */
  --wr-sel-bg: var(--wd-head-l);         /* the selected segment: #0E1626 | #060B15 */
  --wr-sel-fg: var(--wd-page-l);         /* #FFFFFF | #FFFFFF */
  --wr-tick: var(--wd-tick-l);           /* #D6CEBF | #26365A */
  --wr-tick-day: var(--wd-tickday);      /* #9FB1CC */
  --wr-later: var(--wd-later-l);         /* a day that has not come, #B9C2D0 | #4A5B7C */
  --wr-off: var(--wd-sep-l);             /* a calendar day with no edition, #C9C3B6 (no dark board: the dark tick's grey) */
  --wr-sep: var(--wd-sep-l);             /* the breadcrumb's separators, #C9C3B6 | #35486F */
  --wr-pop: var(--wd-pop-l);             /* a popover's border, #E4DED2 | #26365A */
  --wr-chk: var(--wd-chk-l);             /* a checked sentence, #DCF3E9 | #1D4A3C */
  --wr-fact: var(--wd-fact-l);           /* the fact a reader came for, #F2FAF6 | #13302A */
  --wr-mine: var(--wd-mine-l);           /* #EEF8F3 */
  --wr-media: var(--wd-media);           /* #E6DFD0 */
  --wr-serif: var(--bn-font-reading);
  --wr-sans: var(--bn-font-ui);
  --wr-shadow: var(--wd-shadow-l);       /* B:Actions .pop: 0 12px 32px rgba(14,22,38,.16) */
}
@supports (color: light-dark(white, black)) {
  :root {
    --wr-page: light-dark(var(--wd-page-l), var(--wd-page-d));
    --wr-ink: light-dark(var(--wd-ink-l), var(--wd-ink-d));
    --wr-ink2: light-dark(var(--wd-ink2-l), var(--wd-ink2-d));
    --wr-body: light-dark(var(--wd-body-l), var(--wd-body-d));
    --wr-ink3: light-dark(var(--wd-ink3-l), var(--wd-ink3-d));
    --wr-mute: light-dark(var(--wd-mute-l), var(--wd-mute-d));
    --wr-cap: light-dark(var(--wd-cap-l), var(--wd-cap-d));
    --wr-faint: light-dark(var(--wd-faint-l), var(--wd-faint-d));
    --wr-rule: light-dark(var(--wd-rule-l), var(--wd-rule-d));
    --wr-hair: light-dark(var(--wd-hair-l), var(--wd-hair-d));
    --wr-panel: light-dark(var(--wd-panel-l), var(--wd-panel-d));
    --wr-hover: light-dark(var(--wd-hover-l), var(--wd-hover-d));
    --wr-qhover: light-dark(var(--wd-qhover-l), var(--wd-qhover-d));
    --wr-head: light-dark(var(--wd-head-l), var(--wd-head-d));
    --wr-green: light-dark(var(--wd-green-l), var(--wd-green-d));
    --wr-sel-bg: light-dark(var(--wd-head-l), var(--wd-head-d));
    --wr-sel-fg: var(--wd-page-l);
    --wr-tick: light-dark(var(--wd-tick-l), var(--wd-tick-d));
    --wr-later: light-dark(var(--wd-later-l), var(--wd-later-d));
    --wr-off: light-dark(var(--wd-sep-l), var(--bn-night-600));
    --wr-sep: light-dark(var(--wd-sep-l), var(--wd-sep-d));
    --wr-pop: light-dark(var(--wd-pop-l), var(--wd-pop-d));
    --wr-chk: light-dark(var(--wd-chk-l), var(--wd-chk-d));
    --wr-fact: light-dark(var(--wd-fact-l), var(--wd-fact-d));
    --wr-mine: light-dark(var(--wd-mine-l), var(--wd-mine-d));
  }
}
/* a box-shadow is not a colour, so light-dark() cannot hold it (it made the declaration invalid and the panels had none): the dark page's is chosen by the theme attribute */
:root[data-theme-now="night"] { --wr-shadow: var(--wd-shadow-d); }
@media (prefers-color-scheme: dark) {
  :root[data-bn-theme="dawn"]:not([data-theme-chosen]):not([data-theme-fixed]):not([data-theme-now]) { --wr-shadow: var(--wd-shadow-d); }
}

/* ============================================================ the phone's pieces step aside, the desktop's show */
.wr, .wr-top, .wr-foot, .wr-said { display: block; }
/* 0.52.2 (audit round 2, T1): the brand's warm dawn inks (#2A241C, #6E6450, #776D57) are not on the boards. Whatever a page of the new design
   has not set itself reads the board's ink, muted and caption greys: the story's "In this case", the sources box, the morning-email card,
   the corrections. The phone and the pages still on the old design (deploy 2 and 3) are not inside .wr or .nt-wrap, and keep theirs. */
.wr, .nt-wrap, .wr-foot {
  --bn-text: var(--wr-ink); --bn-text-2: var(--wr-mute); --bn-text-3: var(--wr-cap);
  --ink: var(--wr-ink); --ink-soft: var(--wr-mute); --ink-faint: var(--wr-cap);
}
.nt-wrap { color: var(--wr-ink); }
.wr [hidden], .wr-top [hidden], .wr-foot [hidden] { display: none !important; }
.wr .wr-top[hidden], .wr .wr-foot[hidden] { display: block !important; }   /* the header and footer the front page carries inside .wr */
.wr ~ .page { display: none !important; }                  /* the front page: the phone's cards, sky and bar */
.bar, .foot, .nt-worldbar, .nt-edge { display: none; }      /* every reading page: the phone's bar, tab bars and footer */
.page ~ .foot { display: block; }                           /* a week keeps the old page and its footer (the old rules still hide it in every view but the list) */
.wr ~ .foot { display: none !important; }                   /* the front page carries its own */
.page ~ .wr-foot { display: none; }                         /* a week page keeps the old design until board Week (deploy 3) */
body:has(.wr-top) > a.skip { display: none; }
/* a legacy page (its own redesign is deploy 2 or 3) sits a little under the new header, where the old bar gave it room */
body > main.wrap:not(.nt-wrap):not(.wr-main) { padding-top: 32px; }
.wr-skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 10px 14px; background: var(--wr-page); color: var(--wr-ink); font: 700 14px/1 var(--wr-sans); }
.wr-skip:focus { left: 8px; top: 8px; }
.wr-top a.wr-skip, .wr-top a.wr-skip:focus { color: var(--wr-ink); }       /* 0.53.1 (A1): `.wr-top a` made the focused link #EDF1F8 on white, 1.13 : 1; it is the page's ink on the page's own fill (AA in both themes) */
.wr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html:has(.wr), html:has(.wr) body, html:has(.nt), html:has(.nt) body { background: var(--wr-page); }
.wr { font-family: var(--wr-serif); color: var(--wr-ink); background: var(--wr-page); font-size: 16px; line-height: 1.5; }
.wr *, .wr-top *, .wr-foot * { box-sizing: border-box; }
/* the boards size these with no box-sizing set: height and width are the content's, the border is added (B:Main:21, 26, 27, 52) */
.wr .wr-bi, .wr-top .wr-bi, .wr .wr-pill, .wr-foot .wr-pill, .wr .wr-ibx, .wr .wr-email-f input[type="email"] { box-sizing: content-box; }
.wr a, .wr-top a, .wr-foot a { color: var(--wr-ink); text-decoration: none; }                  /* B:Main:15 */
.wr a:hover, .wr-foot a:hover { color: var(--wr-green); }
.wr :focus-visible, .wr-top :focus-visible, .wr-foot :focus-visible { outline: 2px solid var(--bn-focus-ring); outline-offset: 2px; }
.wr .wr-in, .wr .wr-top-in, .wr-top .wr-top-in, .wr-foot .wr-in { box-sizing: content-box; }   /* the boards' container is 1312px of content with 64px beside it: B:Main:62 */
.wr-in { max-width: 1312px; margin: 0 auto; padding: 0 64px; }
.wr-main { display: block; margin: 0; padding: 0; max-width: none; width: auto; }
.wr svg { flex: none; }
.wr-green { color: var(--wr-green); }
.wr .wr-green, .wr-foot .wr-green { color: var(--wr-green); }
.wr-b { font-weight: 700; }
.wr-fine { font: 500 12px/1.35 var(--wr-sans); color: var(--wr-mute); }

/* B:Main:16-17 the small caps of the page */
.wr-k { margin: 0; font: 800 12px/1 var(--wr-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wr-green); }
.wr-k--muted { color: var(--wr-mute); }
.wr-k--ink { color: var(--wr-ink); }
.wr .wr-k a, .wr .wr-k a:hover { color: inherit; }     /* 0.52.2 (F1): "Case · <name>" is green all through, as the board draws it */
.wr .wr-k a:hover { text-decoration: underline; }
.wr-sec { margin: 0; font: 900 13px/1 var(--wr-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--wr-ink); }
.wr-sec--rule { padding-bottom: 12px; border-bottom: 2px solid var(--wr-ink); }
.wr-sec-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 2px solid var(--wr-ink); }
.wr-sec-h a { font: 700 14px/1 var(--wr-sans); }
.wr-sec-h--wrap { flex-wrap: wrap; gap: 8px 24px; }
.wr-fine--r { margin: 0; max-width: none; font: 500 14px/1.4 var(--wr-sans); color: var(--wr-mute); }   /* 0.52.4: notis.css caps every p at the measure (476px), which wrapped the Explore count line; the board draws it on one line */

/* ============================================================ the header, B:Main:61-81 */
.wr-top { background: var(--wr-head); color: var(--bn-night-50); }
.wr-top-in { max-width: 1312px; margin: 0 auto; padding: 0 64px; min-height: 64px; box-sizing: content-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.wr-top-l { display: flex; align-items: center; gap: 18px; }
.wr-top a { color: var(--bn-night-50); }
.wr-bi { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--wd-btn); border-radius: 0; background: transparent; color: var(--bn-night-50);
  font: 700 14px/1 var(--wr-sans); cursor: pointer; text-decoration: none; }
.wr-bi:hover, .wr-top .wr-bi:hover { color: var(--wr-accent); border-color: var(--wr-accent); }
.wr-bi svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wr-bi--sq { padding: 0 9px; }
/* 0.54.3 (the Mayor): the desktop header is the same on every reading page, Front and Grid alike; no rule hides the switch-site or the theme button for the Grid */
.wr-top-l .wr-bi--sq { height: 32px; border-color: var(--wd-btn2); color: var(--wd-btn2-t); }
.wr-top .wr-top-l .wr-bi--sq:hover { color: var(--wr-accent); }
.wr-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.wr-logo-ed { font: 700 22px/1 var(--wr-sans); color: var(--wr-accent); }
.wr-logo-bar { width: 3px; height: 32px; background: var(--wr-accent); border-radius: 2px; }
.wr-logo-name { font: 900 40px/.85 var(--wr-serif); letter-spacing: -.02em; }
.wr-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 700 15px/1 var(--wr-sans); }
.wr-nav a { color: var(--bn-night-50); text-decoration: none; padding: 6px 0; }
.wr-nav a[aria-current="page"] { color: var(--wr-accent); }
.wr-nav a:hover { color: var(--wr-accent); }
.wr-top-r { display: flex; gap: 8px; align-items: center; }
.wr-cta { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; background: var(--wr-accent); color: var(--wr-on-accent); font: 800 14px/1 var(--wr-sans); text-decoration: none; }
.wr-top a.wr-cta { color: var(--wr-on-accent); }
.wr-top a.wr-cta:hover { background: var(--bn-green-300); }
.wr-me { padding: 0 12px 0 3px; }
.wr-av { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--wr-accent); color: var(--wr-on-accent); font: 800 13px/1 var(--wr-sans); }
.nt-theme.wr-bi { width: auto; }
.wr-sun { display: none; }   /* the boards draw the moon on both pages (B:Main:76, B:DarkFront) */
.wr-said { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 300; margin: 0; max-width: min(420px, calc(100vw - 32px)); padding: 10px 16px;
  background: var(--wr-ink); color: var(--wr-page); font: 500 14px/1.35 var(--wr-sans); box-shadow: var(--wr-shadow); }
.wr-said:empty { display: none; }

/* ============================================================ panels: the Popover API, placed against their button */
.wr-pop { position: fixed; inset: auto; margin: 6px 0 0; padding: 0; width: max-content; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto;
  border: 1px solid var(--wr-pop); border-radius: 12px; background: var(--wr-page); color: var(--wr-ink); box-shadow: var(--wr-shadow); }
@supports selector(:popover-open) {
  .wr-pop:not(:popover-open) { display: none; }      /* an author display (.wr-sm, .wr-pk) would otherwise show a closed panel */
}
@supports not selector(:popover-open) {              /* a browser without the Popover API: wire.js opens one with .is-open */
  .wr-pop { display: none; }
  .wr-pop.is-open { display: block; }
  .wr-sm.is-open, .wr-pk.is-open { display: flex; }
}
@supports (anchor-name: --a) {
  .wr-pop { position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; }
  .wr-sm, .wr-pk { position-area: bottom span-left; }
}
.wr-pop-h, .wr-pop-foot { margin: 0; font: 500 12px/1.35 var(--wr-sans); color: var(--wr-mute); }
.wr-sites { width: 288px; padding: 6px; }
.wr-sites .wr-pop-h { padding: 8px 10px 6px; font: 800 11px/1 var(--wr-sans); letter-spacing: .14em; text-transform: uppercase; }
.wr-site { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 8px; color: var(--wr-ink); }
.wr-site.is-here { background: var(--wr-panel); }
.wr-top a.wr-site, .wr-top a.wr-site:hover { color: var(--wr-ink); }     /* 0.52.2 (P3): not the header's light link colour, which was 1.01 to 1 on the tinted row */
.wr-site-name { display: flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--wr-sans); }
.wr-site-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--wr-rule); }
.wr-site.is-here .wr-site-dot { background: var(--wr-accent); border-color: var(--wr-accent); }
.wr-site-tag { margin-left: auto; font: 800 10px/1 var(--wr-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wr-green); }
.wr-site-note { font: 400 14px/1.35 var(--wr-serif); color: var(--wr-ink3); }
.wr-site-host { font: 500 12px/1 var(--wr-sans); color: var(--wr-mute); }
.wr-sites .wr-pop-foot { padding: 8px 10px 4px; border-top: 1px solid var(--wr-hair); margin-top: 4px; }
.wr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--beat, var(--wr-rule)); flex: none; }
[data-beat="models"] { --beat: var(--beat-models); } [data-beat="tooling"] { --beat: var(--beat-tooling); }
[data-beat="research"] { --beat: var(--beat-research); } [data-beat="compute"] { --beat: var(--beat-compute); }
[data-beat="laws"] { --beat: var(--beat-laws); } [data-beat="safety"] { --beat: var(--beat-safety); }
[data-beat="tested"] { --beat: var(--beat-tested); } [data-beat="work"] { --beat: var(--beat-work); } [data-beat="make"] { --beat: var(--beat-make); }

/* ============================================================ the day strip, B:Main:83-100 */
.wr-strip { border-bottom: 1px solid var(--wr-rule); }
.wr-strip-in { padding-top: 10px; padding-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.wr-strip-l { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wr-ibx { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 8px; border: 1px solid var(--wr-rule); background: var(--wr-page); color: var(--wr-ink); }
.wr-ibx svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wr-ibx.is-off { color: var(--wr-later); }
.wr-ibx--q { width: 34px; height: 34px; padding: 0; border-color: transparent; cursor: pointer; box-sizing: border-box; }
.wr-ibx--q:disabled { color: var(--wr-off); cursor: default; }
.wr-seg { display: inline-flex; border: 1px solid var(--wr-rule); }
.wr-seg > a, .wr-seg > span, .wr-seg > button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-right: 1px solid var(--wr-rule); border-radius: 0; background: transparent;
  font: 700 13px/1 var(--wr-sans); color: var(--wr-mute); cursor: pointer; }
.wr-seg > :last-child { border-right: 0; }
.wr-seg > .is, .wr-seg > a[aria-current], .wr-seg > a.is { background: var(--wr-sel-bg); color: var(--wr-sel-fg); }
.wr a.wr-seg-a:hover, .wr-seg > a:hover { color: var(--wr-green); }
.wr-seg > .is:hover, .wr-seg > a.is:hover { color: var(--wr-sel-fg); }
.wr-seg > .wr-later { color: var(--wr-later); cursor: default; }
.wr-seg > button.is svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.wr-seg > .is[popovertarget]:hover { color: var(--wr-sel-fg); }
.wr-sky { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--wr-sans); color: var(--wr-mute); }
.wr-ticks { display: flex; align-items: flex-end; gap: 3px; }
.wr-tick { width: 3px; height: 10px; background: var(--wr-tick); border-radius: 1px; }
.wr-tick.is-day { background: var(--wr-tick-day); }
.wr-tick.is-now { height: 14px; background: var(--wr-accent); }
.wr-clock { font-variant-numeric: tabular-nums; }
.wr-strip-date { font: 500 14px/1.4 var(--wr-sans); color: var(--wr-mute); }
.wr-strip-date b { color: var(--wr-ink); }

/* Front | Grid: the server draws Front, ?show=grid draws Grid, and the reader's own choice (html[data-wr-view], set before paint) wins */
.wr .wr-grid, .wr .wr-strip--grid { display: none; }
.wr[data-show="grid"] .wr-front, .wr[data-show="grid"] .wr-strip--front { display: none; }
.wr[data-show="grid"] .wr-grid, .wr[data-show="grid"] .wr-strip--grid { display: block; }
html[data-wr-view="grid"] .wr .wr-front, html[data-wr-view="grid"] .wr .wr-strip--front { display: none; }
html[data-wr-view="grid"] .wr .wr-grid, html[data-wr-view="grid"] .wr .wr-strip--grid { display: block; }
html[data-wr-view="front"] .wr .wr-front, html[data-wr-view="front"] .wr .wr-strip--front { display: block; }
html[data-wr-view="front"] .wr .wr-grid, html[data-wr-view="front"] .wr .wr-strip--grid { display: none; }
.wr .wr-strip--front { display: block; }
.wr[data-show="grid"] .wr-strip--front { display: none; }
html[data-wr-view="grid"] .wr .wr-strip--front { display: none; }
.wr-seg--view > a[data-wr-show="front"] { background: var(--wr-sel-bg); color: var(--wr-sel-fg); }
.wr[data-show="grid"] .wr-seg--view > a[data-wr-show="front"] { background: transparent; color: var(--wr-mute); }
.wr[data-show="grid"] .wr-seg--view > a[data-wr-show="grid"] { background: var(--wr-sel-bg); color: var(--wr-sel-fg); }
html[data-wr-view="front"] .wr .wr-seg--view > a[data-wr-show="front"] { background: var(--wr-sel-bg); color: var(--wr-sel-fg); }
html[data-wr-view="front"] .wr .wr-seg--view > a[data-wr-show="grid"] { background: transparent; color: var(--wr-mute); }
html[data-wr-view="grid"] .wr .wr-seg--view > a[data-wr-show="front"] { background: transparent; color: var(--wr-mute); }
html[data-wr-view="grid"] .wr .wr-seg--view > a[data-wr-show="grid"] { background: var(--wr-sel-bg); color: var(--wr-sel-fg); }
.wr-seg--view > a:hover { color: var(--wr-green); }
.wr-seg--view > a[data-wr-show="front"]:hover, .wr-seg--view > a[data-wr-show="grid"]:hover { color: inherit; }

/* ============================================================ the numbers band, B:Main:102-110 */
.wr-numbers { border-bottom: 1px solid var(--wr-ink); background: var(--wr-panel); }
.wr-numbers-in { padding-top: 18px; padding-bottom: 18px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; align-items: start; }
.wr-num-id { grid-column: span 3; min-width: 0; font: 500 14px/1.45 var(--wr-sans); color: var(--wr-mute); }
.wr-num-id strong { display: block; font-size: 15px; color: var(--wr-ink); }
.wr-num { grid-column: span 2; min-width: 0; display: block; border-left: 1px solid var(--wr-rule); padding-left: 16px; }
.wr-num--last { grid-column: span 3; }
.wr-num-n { font: 800 30px/1 var(--wr-sans); letter-spacing: -.02em; color: var(--wr-ink); }
.wr-num-l { margin-top: 6px; font: 500 13px/1.35 var(--wr-sans); color: var(--wr-mute); }
.wr a.wr-num:hover .wr-num-l { color: var(--wr-green); }

/* ============================================================ the signed-in strip, B:Signed:231-264 */
.wr-ms { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--wr-rule); font-family: var(--wr-sans); }
/* 0.52.3 (the Gatekeeper): a browser that was signed in last time keeps the strip's place before /me/state.json answers: the strip is laid out and not drawn, so the lead does not move when it is */
html[data-wr-member] .wr .wr-ms[hidden] { display: grid !important; visibility: hidden; }
html[data-wr-member] .wr .wr-ms { box-sizing: border-box; min-height: var(--wr-ms-h, 107px); }   /* the height this browser drew it at last time (wire.js), else one row of the cases' pills */
.wr-ms-id { grid-column: span 3; min-width: 0; }
.wr-ms-hi { margin: 0; }
.wr-mine { margin: 6px 0 0; font: 500 14px/1.4 var(--wr-sans); color: var(--wr-mute); }
.wr-ms-cases { grid-column: span 5; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wr-ms-lab { flex: 0 0 100%; margin: 0; }
.wr-ms-chips { display: contents; }
.wr-ms-stats { grid-column: span 4; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; border-left: 1px solid var(--wr-rule); padding-left: 24px; }
.wr-stat b { display: block; font: 800 28px/1 var(--wr-sans); letter-spacing: -.02em; color: var(--wr-ink); }
.wr-stat span { display: block; margin-top: 4px; font: 500 13px/1.3 var(--wr-sans); color: var(--wr-mute); }

/* pills, B:Main:26 */
.wr-pill, .wr a.wr-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--wr-rule); border-radius: 0; background: var(--wr-page); color: var(--wr-ink);
  font: 700 14px/1 var(--wr-sans); text-decoration: none; cursor: pointer; }
.wr-pill--s, .wr .wr-pill--s, .wr a.wr-pill--s, .wr-foot .wr-pill--s { height: 32px; }   /* B:Main:244, 294: height 32 + 1px borders = 34 */
.wr-pill--ink, .wr a.wr-pill--ink { border-color: var(--wr-ink); }
.wr-pill.is-on, .wr a.wr-pill.is-on { border-color: var(--wr-sel-bg); background: var(--wr-sel-bg); color: var(--wr-sel-fg); }
.wr-pill:hover, .wr a.wr-pill:hover { color: var(--wr-green); }
.wr-pill.is-on:hover, .wr a.wr-pill.is-on:hover { color: var(--wr-sel-fg); }
.wr-new { background: var(--wr-accent); color: var(--wr-on-accent); font: 700 11px/1 var(--wr-sans); padding: 2px 6px; }
.wr-new[hidden] { display: none; }
.wr-top .wr-adminlink .wr-new { font: 700 12px/1 var(--wr-sans); padding: 3px 7px; }   /* B:Signed:79 */
.wr-linkbtn { padding: 0; border: 0; background: transparent; font: inherit; color: var(--wr-ink); cursor: pointer; }
.wr-linkbtn:hover { color: var(--wr-green); }

/* ============================================================ the lead section, B:Main:112-183 */
.wr-lead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; padding: 36px 0 40px; border-bottom: 1px solid var(--wr-rule); }
.wr-lead-a { grid-column: span 8; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.wr-fig { margin: 0; }
.wr-img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--wr-panel); }
.wr-img--whole { object-fit: contain; }
.wr-frame { display: block; width: 100%; overflow: hidden; background: var(--wr-panel); }
.wr-frame svg { display: block; width: 100%; height: 100%; }
.wr-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; font: italic 400 13px/1.4 var(--wr-serif); color: var(--wr-cap); }
.wr-cap a { display: inline-flex; align-items: center; gap: 5px; font: 700 12px/1 var(--wr-sans); font-style: normal; color: var(--wr-mute); white-space: nowrap; }
.wr-cap svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.wr-vid { position: relative; display: block; }
.wr-badge { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; background: var(--wr-head); color: var(--wd-page-l);
  font: 800 12px/1 var(--wr-sans); letter-spacing: .08em; }
.wr-badge svg { width: 12px; height: 12px; fill: var(--wr-accent); }
.wr-lead-g { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; }
.wr-lead-t { grid-column: span 5; min-width: 0; }
.wr-lead-s { grid-column: span 3; min-width: 0; padding-top: 4px; }
.wr-lead-p { grid-column: span 5; min-width: 0; }
.wr-lead-v { grid-column: span 3; min-width: 0; background: var(--wr-panel); padding: 16px 18px; }
.wr-lead-f { grid-column: span 8; min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-top: 12px; border-top: 1px solid var(--wr-rule); }
.wr-h-lead { margin: 10px 0 0; font: 800 50px/1 var(--wr-serif); letter-spacing: -.025em; text-wrap: balance; color: var(--wr-ink); }
.wr-sf { margin: 0; font: 400 17px/1.5 var(--wr-serif); color: var(--wr-ink3); }
.wr-lead-s .wr-sf { font-size: 16px; }
.wr-kp-h { margin-bottom: 8px; }
.wr-kp { margin: 0; padding: 0 0 0 18px; font: 400 16px/1.5 var(--wr-serif); color: var(--wr-ink2); }
.wr-kp li { margin: 4px 0; }
.wr-v-h { margin-bottom: 8px; }
.wr-v-h span { color: var(--wr-mute); letter-spacing: .08em; }
.wr-lead-v p { margin: 0; font: 400 15px/1.5 var(--wr-serif); color: var(--wr-ink2); }
.wr-more { font: 700 13px/1 var(--wr-sans); white-space: nowrap; }
.wr-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 13px/1.5 var(--wr-sans); color: var(--wr-mute); }
.wr-meta b { color: var(--wr-ink); font-weight: 700; }
.wr-meta a { color: inherit; }
.wr-meta a.wr-green { color: var(--wr-green); }
.wr-meta .wr-tags a { color: var(--wr-ink); }   /* 0.52.3 (R3-3): the lead's tag links are ink on the board; the source link above stays green */
.wr-acts-r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wr-acts-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wr-side { grid-column: span 4; min-width: 0; display: flex; flex-direction: column; gap: 20px; border-left: 1px solid var(--wr-rule); padding-left: 24px; }
.wr-side-a { display: flex; flex-direction: column; gap: 10px; }
.wr-side-a + .wr-side-a { border-top: 1px solid var(--wr-rule); padding-top: 18px; }
.wr-h-side { margin: 0; font: 700 23px/1.15 var(--wr-serif); text-wrap: balance; letter-spacing: normal; }
.wr-sf--s { font-size: 15px; }
.wr-side .ad { margin: 0; border-top: 1px solid var(--wr-rule); padding-top: 18px; }
.wr-side .ad--front { width: auto; max-width: none; }   /* 0.52.3: the front slot, in the side column, takes its width */
/* 0.52.4 (live-data audit round 5; B:Main:174-182 and B:DarkFront:175-182): the front's ad is the board's unit, not the phone's rounded panel: a rule above, the label as the small
   kicker, then one bordered link with a 96 x 72 picture beside the title, the line and "From ..." */
.wr-side .ad { display: block; border: 0; border-top: 1px solid var(--wr-rule); border-radius: 0; background: none; padding: 18px 0 0; box-sizing: border-box; }
.wr-side .ad-label { display: block; margin: 0 0 8px; font: 800 12px/1 var(--wr-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wr-mute); }
.wr-side .ad-link { display: flex; align-items: center; gap: 14px; min-height: 0; border: 1px solid var(--wr-rule); padding: 12px; color: var(--wr-ink); }
.wr-side .ad-img { flex: 0 0 96px; width: 96px; height: 72px; aspect-ratio: auto; border-radius: 0; object-fit: cover; background: var(--wr-panel); }
.wr-side .ad-words { display: block; min-width: 0; }
.wr-side .ad-title { display: block; font: 700 16px/1.25 var(--wr-serif); color: var(--wr-ink); }
.wr-side .ad-line { display: block; margin-top: 3px; font: 400 14px/1.4 var(--wr-serif); color: var(--wr-ink3); }
.wr-side .ad-by { display: block; margin-top: 6px; font: 500 12px/1 var(--wr-sans); color: var(--wr-mute); }

/* the actions, B:Main:26-36 and B:Actions option B */
.wr-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.wr-q { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--wr-mute); font: 700 14px/1 var(--wr-sans); cursor: pointer; }
.wr-q:hover { background: var(--wr-qhover); color: var(--wr-ink); }
.wr-q svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wr-q[aria-pressed="true"] { color: var(--wr-green); }
.wr-q[aria-pressed="true"] svg { fill: currentColor; }
.wr-q.is-on { color: var(--wr-green); }
.wr-react-img { width: 19px; height: 19px; }
.wr-react-img[hidden], .wr-acts [hidden], .wr-byline [hidden] { display: none !important; }
.wr-n { font: 700 13px/1 var(--wr-sans); color: var(--wr-mute); font-variant-numeric: tabular-nums; }
.wr-n--none { color: var(--wr-faint); }
.wr-sum { display: inline-flex; align-items: center; gap: 8px; color: var(--wr-mute); }
.wr-stack { display: inline-flex; align-items: center; }
.wr-stack img { width: 20px; height: 20px; border-radius: 50%; background: var(--wr-page); box-shadow: 0 0 0 2px var(--wr-page); margin-left: -6px; }
.wr-stack img:first-child { margin-left: 0; }
.wr-sm { width: 360px; max-width: calc(100vw - 24px); padding: 6px; display: flex; flex-direction: column; }   /* B:Actions .sm: 346 inside, the note runs two lines */
.wr-sm-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; font: 600 14px/1 var(--wr-sans); color: var(--wr-ink); text-align: left; cursor: pointer; text-decoration: none; }
.wr-sm-i:hover, .wr a.wr-sm-i:hover { background: var(--wr-panel); color: var(--wr-ink); }
.wr-sm-i svg { width: 17px; height: 17px; stroke: var(--wr-mute); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wr-sm-note { margin: 4px 0 0; padding: 8px 10px 4px; border-top: 1px solid var(--wr-hair); font: 500 12px/1.45 var(--wr-sans); color: var(--wr-mute); }
.wr-pk { padding: 6px; display: flex; gap: 2px; }
.wr-pk button { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; padding: 8px 2px 6px; border: 0; border-radius: 8px; background: transparent; font: 600 11px/1.1 var(--wr-sans); color: var(--wr-mute); cursor: pointer; }
.wr-pk button:hover { background: var(--wr-panel); }
.wr-pk button[aria-pressed="true"] { background: var(--wr-mine); color: var(--wr-green); }
.wr-pk img { width: 30px; height: 30px; }
.wr-pk .wr-n { font-size: 11px; }

/* ============================================================ Running stories, B:Main:185-219 */
.wr-cases { padding: 32px 0 40px; border-bottom: 1px solid var(--wr-rule); }
.wr-cases-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; padding-top: 22px; }
.wr-case { grid-column: span 4; min-width: 0; }
.wr-case-pic { display: block; }
.wr-case-pic img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--wr-panel); }
/* 0.52.6 (the Mayor's check): every running story opens on a picture of the one height. A case with none shows its main company's logo
   on the white tile, or a navy CASE FILE tile with the case's name: B:Cases, "Moved today". Both are 1200 x 630 like the pictures. */
.wr a.wr-case-pic--logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 1200 / 630; box-sizing: border-box; background: var(--wd-page-l); border: 1px solid var(--wr-rule); }   /* the logo library's plain white chip, in both themes */
.wr-case-pic--logo img { width: auto; height: auto; max-width: 46%; max-height: 34%; aspect-ratio: auto; object-fit: contain; background: none; }
.wr a.wr-case-pic--file { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; aspect-ratio: 1200 / 630; box-sizing: border-box; padding: 18px; background: var(--wr-head); color: var(--bn-night-50); }
.wr-case-pic--file .wr-k { color: var(--wr-accent); }
.wr-case-pic--file b { font: 800 22px/1.15 var(--wr-serif); color: var(--bn-night-50); text-wrap: balance; overflow-wrap: anywhere; }
/* 0.52.7 (Status t-130): the case named under the picture in every column, in the board's kicker (B:Main:209, DarkFront:209); a long name wraps, so it gets a line height */
.wr-case-k { margin-top: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.wr-tl { list-style: none; margin: 14px 0 0; padding: 0 0 0 4px; border-left: 1px solid var(--wr-rule); }
.wr-tl li { display: flex; gap: 12px; margin-left: -9px; padding-bottom: 12px; }
.wr-tl li:last-child { padding-bottom: 0; }
.wr-tl-dot { box-sizing: content-box; width: 10px; height: 10px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--wr-page); border: 2px solid var(--wr-page); box-shadow: 0 0 0 1px var(--wr-ink); }
.wr-tl-dot.is-now { background: var(--wr-accent); }
.wr-tl a { font: 600 16px/1.35 var(--wr-serif); }
.wr-case-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.wr-also-k { margin-top: 22px; }      /* 0.52.4 (B:Main:215-216): the label on a line of its own, inside the last case's column */
.wr-also-moved { margin: 8px 0 0; max-width: none; font: 600 16px/1.6 var(--wr-serif); }

/* ============================================================ Also today and Explained, B:Main:221-238 */
.wr-also { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; padding: 32px 0 36px; border-bottom: 1px solid var(--wr-rule); }
.wr-also-l { grid-column: span 7; min-width: 0; }
.wr-also-r { grid-column: span 5; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.wr-also-l:empty { display: none; }
.wr-rows { list-style: none; margin: 0; padding: 0; }
.wr-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 20px; padding: 14px 0; border-bottom: 1px solid var(--wr-rule); }
.wr-row:last-child { border-bottom: 0; }
.wr-row-k { flex: 0 0 80px; padding-top: 6px; }
.wr-row-m { flex: 1 1 300px; min-width: 0; }
.wr-row-h { font: 600 20px/1.3 var(--wr-serif); }
.wr-row .wr-meta { margin-top: 4px; }
@media (hover: hover) {
  .wr-row .wr-acts { opacity: 0; }
  .wr-row:hover, .wr-row:focus-within { background: var(--wr-hover); padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
  .wr-row:hover .wr-acts, .wr-row:focus-within .wr-acts { opacity: 1; }
}
.wr-explained { background: var(--wr-panel); padding: 22px; }
.wr-explained .wr-fig { margin-top: 12px; }
.wr-explained .wr-img { background: var(--wr-hair); }
.wr-h-ex { margin: 14px 0 8px; font: 700 26px/1.15 var(--wr-serif); text-wrap: balance; letter-spacing: normal; }
.wr-explained .wr-sf { font-size: 16px; }
.wr-ex-f { margin-top: 12px; }

/* ============================================================ the end, Explore, Sections, the email */
.wr-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 22px 0; border-bottom: 1px solid var(--wr-ink); }
.wr-end-l { display: flex; align-items: center; gap: 12px; }
.wr-end-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wr-accent); }
.wr-end-t { font: 700 18px/1.2 var(--wr-serif); }
.wr-end-r { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wr-end-lab { margin-right: 4px; font-size: 13px; }
.wr-vr { width: 1px; height: 22px; background: var(--wr-rule); margin: 0 6px; }
.wr-explore { padding: 32px 0 44px; border-bottom: 1px solid var(--wr-ink); }
/* 0.52.6 (the Mayor's check): no row of Explore ever holds one tile alone. The grid is twelve columns and a tile spans three (four to a
   row); the server writes the count on the grid (.wr-tiles--nN, from _wire_tiles.html) and each count lays its rows out whole:
   1 one full row; 2 as 6+6; 3 as 4+4+4; 4 as 4 across; 5 as 3 over 2; 6 as 3 over 3; 7 as 4 over 3; 8 as 4 over 4. A tile that
   stands last on an odd row of two (721 to 1100px) spans both. The smoke test packs every count from these spans. */
.wr-tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; padding-top: 22px; }
.wr .wr-tiles > .wr-tile { grid-column: span 3; }
.wr .wr-tiles--n1 > .wr-tile { grid-column: span 12; }
.wr .wr-tiles--n2 > .wr-tile { grid-column: span 6; }
.wr .wr-tiles--n3 > .wr-tile, .wr .wr-tiles--n5 > .wr-tile, .wr .wr-tiles--n6 > .wr-tile { grid-column: span 4; }
.wr .wr-tiles--n5 > .wr-tile:nth-child(n+4) { grid-column: span 6; }
.wr .wr-tiles--n7 > .wr-tile:nth-child(n+5) { grid-column: span 4; }
.wr a.wr-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 150px; padding: 18px 18px 20px; border: 1px solid var(--wr-rule); background: var(--wr-page); }
.wr-tile b { font: 700 20px/1.2 var(--wr-serif); color: var(--wr-ink); }
.wr-tile span { font: 400 15px/1.45 var(--wr-serif); color: var(--wr-ink3); }   /* B:Main:24: the board's rule for a tile's spans also reaches its kicker, as drawn */
.wr-tile em { margin-top: auto; font: 700 13px/1 var(--wr-sans); font-style: normal; color: var(--wr-green); }
.wr a.wr-tile:hover { border-color: var(--wr-ink); }
.wr a.wr-tile--su { background: var(--wr-head); border-color: var(--wr-head); }
.wr-tile--su .wr-k, .wr-tile--su em { color: var(--wr-accent); }
.wr-tile--su b { color: var(--bn-night-50); }
.wr a.wr-tile--su span { color: var(--wd-ink2-d); }
.wr a.wr-tile--su span.wr-k { color: var(--wr-accent); }
.wr-sections { padding: 32px 0 40px; border-bottom: 1px solid var(--wr-rule); }
.wr-pills { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; }
.wr-email { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding: 40px 0 44px; border-bottom: 1px solid var(--wr-ink); }
.wr-email-t { grid-column: span 6; min-width: 0; }
.wr-email-h { margin: 10px 0 0; font: 800 34px/1.1 var(--wr-serif); letter-spacing: -.01em; text-wrap: balance; }
.wr-email-f { grid-column: span 6; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.wr-email-f input[type="email"] { flex: 1 1 240px; min-width: 0; height: 50px; padding: 0 16px; border: 1px solid var(--wr-ink); border-radius: 0; background: var(--wr-page); color: var(--wr-ink); font: 400 17px/1 var(--wr-sans); }
.wr-email-f button { height: 50px; padding: 0 24px; border: 0; border-radius: 0; background: var(--wr-sel-bg); color: var(--wr-sel-fg); font: 800 16px/1 var(--wr-sans); cursor: pointer; }
.wr-email-f .mn-hp { position: absolute; left: -9999px; }
.wr-email-s, .wr-email-w { flex: 0 0 100%; margin: 0; }
.wr-email-s:empty { display: none; }
.wr-email--mine[hidden] { display: none; }
.wr-email--mine .wr-email-t { grid-column: span 7; }
.wr-email--mine .wr-email-h { max-width: none; margin: 10px 0 0; font: 800 30px/1.15 var(--wr-serif); }
.wr-email--mine .wr-email-h span { color: var(--wr-mute); font-weight: 500; }
.wr-email--mine .wr-email-a { grid-column: span 5; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.wr-email-a form { display: contents; }
.wr .wr-email-a .wr-pill--quiet { border-color: transparent; color: var(--wr-mute); }
.wr .wr-email-a .wr-pill--quiet:hover { color: var(--wr-green); }
.wr-email-soon { grid-column: span 6; margin: 0; font: 700 18px/1.3 var(--wr-serif); color: var(--wr-mute); }

/* ============================================================ the footer, B:Main:286-307 */
.wr-foot { padding: 0; font: 500 14px/1.5 var(--wr-sans); color: var(--wr-mute); }
.wr-foot-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; padding-top: 30px; padding-bottom: 48px; }
.wr-foot-in p { margin: 0; }
.wr-foot-in p + p { margin-top: 8px; }
.wr-foot strong { color: var(--wr-ink); }
.wr-foot-c1 { grid-column: span 4; min-width: 0; }
.wr-foot-c2 { grid-column: span 3; min-width: 0; }
.wr-foot-c3 { grid-column: span 3; min-width: 0; }
.wr-foot-c4 { grid-column: span 2; min-width: 0; }
.wr-foot .wr-k { margin-bottom: 8px; }
.wr-foot-gap { margin-top: 18px !important; }
.wr-foot-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.wr-app { padding: 14px 16px; border: 1px solid var(--wr-rule); }
.wr-foot-in .wr-app p { margin: 0; }                 /* B:Main:299-301: 6px from the kicker to the line, 6px from the line to the words (138 high) */
.wr-foot-in .wr-app .wr-k { margin-bottom: 6px; }
.wr-app-h { color: var(--wr-ink); font: 700 16px/1.3 var(--wr-serif); }
.wr-foot-in .wr-app .wr-app-t { margin-top: 6px; font: 500 14px/1.5 var(--wr-sans); color: var(--wr-mute); }

/* ============================================================ the edition calendar, option E, B:Actions:456-690 */
.wr-cal { width: 682px; padding: 18px 20px 14px; }     /* B:Actions .cal is 640 of content: 682 with its padding and border; months 306 */
.wr-cal-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.wr-lg { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--wr-sans); color: var(--wr-mute); }
.wr-lg i { width: 6px; height: 6px; border-radius: 50%; background: var(--wr-accent); display: inline-block; }
.wr-cms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.wr-cmt { margin: 0 0 10px; font: 800 15px/1 var(--wr-sans); color: var(--wr-ink); text-align: center; }
.wr-cr { display: grid; grid-template-columns: 28px repeat(7, minmax(0, 1fr)); align-items: center; row-gap: 2px; }
.wr-ch span { font: 700 11px/1 var(--wr-sans); color: var(--wr-faint); text-align: center; padding: 6px 0; letter-spacing: .04em; }
.wr-ch .wr-cw { height: 46px; }       /* the board's empty week cell: 34 high plus the 6 and 6 its header rule gives every span, so the row is 46 */
.wr-cw { display: inline-flex; align-items: center; height: 34px; padding-left: 2px; border-radius: 6px; font: 700 11px/1 var(--wr-sans); color: var(--wr-mute); }
.wr a.wr-cw:hover { background: var(--wr-panel); color: var(--wr-green); }
.wr-cw.is-off { color: var(--wr-off); }
.wr-cd { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 auto; border-radius: 50%; font: 600 14px/1 var(--wr-sans); font-variant-numeric: tabular-nums; }
.wr-cd i { position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--wr-accent); }
.wr a.wr-cd.is-ed { color: var(--wr-ink); }
.wr a.wr-cd.is-ed:hover { background: var(--wr-panel); }
.wr-cd.is-none { color: var(--wr-off); }
.wr a.wr-cd.is-sel, .wr a.wr-cd.is-sel:hover { background: var(--wr-sel-bg); color: var(--wr-sel-fg); }
.wr-cd.is-out { visibility: hidden; }
.wr-cal-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wr-hair); }
.wr-cal-fl { display: flex; gap: 8px; }

/* ============================================================ Grid, the bento, B:GridBento:92-300 */
.wr-grid-in { padding-top: 32px; padding-bottom: 56px; }
.wr-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: 20px; }
.wr-b-lead { grid-column: span 8; grid-row: span 2; position: relative; overflow: hidden; background: var(--wr-head); min-width: 0; }
.wr-b-lead-a { display: block; height: 100%; color: var(--wd-page-l); }
.wr a.wr-b-lead-a, .wr a.wr-b-lead-a:hover { color: var(--wd-page-l); }     /* 0.52.2 (G1): the board's #FFFFFF, not the header's #EDF1F8 */
.wr-b-lead-a { position: relative; min-height: 620px; }
.wr-b-lead-a img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.wr-b-lead-t { position: absolute; inset: auto 0 0 0; padding: 120px 32px 28px; display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--wd-head-l) 92%, transparent) 55%); }
.wr-b-lead-t .wr-k { color: var(--wr-accent); }
.wr-b-h { font: 800 44px/1.04 var(--wr-serif); letter-spacing: -.02em; text-wrap: balance; }
.wr-b-meta { font: 500 14px/1.3 var(--wr-sans); color: var(--wd-ink2-d); }
.wr-b-card { grid-column: span 4; min-width: 0; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--wr-rule); padding: 14px; }
.wr-b-pic { position: relative; display: block; }
.wr-b-pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--wr-panel); }
/* 0.52.4 (live-data audit round 5): a vendor's picture is shown whole here as on the Front (publication.py, m.whole): contained, never cropped */
.wr-b-pic--whole img { object-fit: contain; }
.wr-b-lead-a.wr-b-whole img { object-fit: contain; object-position: 50% 0; background: var(--wr-head); }
.wr-b-inline { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wr-panel); }
.wr-b-inline svg { display: block; width: 100%; height: 100%; }
.wr-b-pic .wr-badge { left: 10px; bottom: 10px; height: 26px; padding: 0 9px 0 7px; font-size: 11px; }
.wr-b-pic .wr-badge svg { width: 11px; height: 11px; }
.wr-b-h3 { margin: 0; font: 700 20px/1.18 var(--wr-serif); text-wrap: balance; letter-spacing: normal; }
.wr-b-h3--big { font-size: 30px; font-weight: 800; line-height: 1.1; }
.wr-b-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--wr-hair); font: 500 13px/1.3 var(--wr-sans); color: var(--wr-mute); }
.wr-b-foot b { color: var(--wr-green); font-weight: 700; }
.wr-b-foot .wr-b-fl { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 0.52.4: one line, cut with an ellipsis (the whole in its title) */
.wr-b-foot .wr-acts { flex: none; flex-wrap: nowrap; }
/* 0.54.1 (Karl, 9 Oct: the grid carries the reactions too; B:Actions option B): the summary (hidden at zero) and Share, Save and React on every tile, and on the lead over its picture */
.wr-b-r { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; }
.wr-bento .wr-n--none, .wr-bento .wr-sumwrap:empty { display: none; }
.wr-b-lead-r { position: absolute; right: 24px; bottom: 20px; z-index: 2; display: flex; align-items: center; gap: 8px; color: var(--wd-page-l); }
.wr-b-lead-r .wr-sum, .wr-b-lead-r .wr-n, .wr-b-lead-r .wr-q { color: var(--wd-page-l); }
.wr-b-lead-r .wr-q { width: 32px; padding: 0; justify-content: center; }
.wr-b-lead-r .wr-q:hover { color: var(--wd-page-l); background: color-mix(in srgb, var(--wd-page-l) 20%, transparent); }
.wr-b-lead-r .wr-acts { flex-wrap: nowrap; }                                                                     /* 0.52.4: Share and Save stay in a row */
.wr-b-foot .wr-q { width: 32px; padding: 0; justify-content: center; }
/* 0.54.3 (the Mayor; a medium tile, the 4-column card): the meta is never cut. With a reaction summary the footer is two lines as a small tile's (the meta in full on the first, the stack and its count at the left and Share, Save and React at the right on the second); without one it is a line whose text may wrap beside the icons. The lead keeps one line over its picture. */
.wr-b-card .wr-b-foot .wr-b-fl, .wr-b-ex .wr-b-foot .wr-b-fl { overflow: visible; text-overflow: clip; white-space: normal; }
.wr-b-card .wr-b-foot:has(.wr-sum) { flex-wrap: wrap; row-gap: 8px; }
.wr-b-card .wr-b-foot:has(.wr-sum) .wr-b-fl { flex: 1 1 100%; }
.wr-b-card .wr-b-foot:has(.wr-sum) .wr-b-r { flex: 1 1 100%; justify-content: space-between; }
/* 0.54.2 (parity round 2, R1): on a small tile (the two-column record tiles, 313px) the footer is two lines: the meta in full on the first, the reaction stack (no count) at the left and Share, Save and React at the right on the second, as the cards' footers set them. The lead, the cards and the Explained keep one line. */
.wr-b-tile { container: wr-bt / inline-size; }
@container wr-bt (max-width: 380px) {
  .wr-b-foot { flex-wrap: wrap; row-gap: 8px; }
  .wr-b-foot .wr-b-fl { flex: 1 1 100%; overflow: visible; text-overflow: clip; white-space: normal; }
  .wr-b-foot .wr-b-r { flex: 1 1 100%; justify-content: space-between; }
  .wr-b-foot .wr-sum .wr-n { display: none; }
}
.wr-b-ex { grid-column: span 6; grid-row: span 2; min-width: 0; display: flex; flex-direction: column; gap: 14px; background: var(--wr-panel); padding: 22px; }
.wr-b-ex .wr-sf { font-size: 16px; line-height: 1.45; }
.wr-b-tile { grid-column: span 3; min-width: 0; min-height: 230px; display: flex; flex-direction: column; gap: 10px; padding: 18px;
  background: color-mix(in srgb, var(--beat, var(--wr-rule)) 14%, var(--wr-page)); }
.wr-b-tile .wr-b-h3 { font-size: 19px; line-height: 1.22; }
.wr-b-tile .wr-b-foot { border-top-color: var(--wr-hair); }          /* B:GridBento:27: #EEE9DF on every tile */
/* the board hand-sets the tint of three sections (GridBento:79-97): Safety, Tooling and Compute, as drawn; the other sections keep the same pale tint of their own colour, and the dark page keeps it for all */
.wr-b-tile[data-beat="safety"] { background: var(--wd-tint-safety); }
.wr-b-tile[data-beat="tooling"] { background: var(--wd-tint-tooling); }
.wr-b-tile[data-beat="compute"] { background: var(--wd-tint-compute); }
@supports (color: light-dark(white, black)) {
  .wr-b-tile[data-beat="safety"] { background: light-dark(var(--wd-tint-safety), color-mix(in srgb, var(--beat, var(--wr-rule)) 14%, var(--wr-page))); }
  .wr-b-tile[data-beat="tooling"] { background: light-dark(var(--wd-tint-tooling), color-mix(in srgb, var(--beat, var(--wr-rule)) 14%, var(--wr-page))); }
  .wr-b-tile[data-beat="compute"] { background: light-dark(var(--wd-tint-compute), color-mix(in srgb, var(--beat, var(--wr-rule)) 14%, var(--wr-page))); }
}

/* ============================================================ the story page, board Article and DarkArticle
   The page is the same markup the phone reads (note.html); `.nt-head` holds the header and the picture, `article.nt`
   gives its children to the page's grid (display: contents), and the side column sits at columns 9 to 12. */
.nt-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; justify-content: stretch; align-items: start;
  width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 64px; box-sizing: border-box; font-family: var(--wr-serif); position: relative; }
main.nt-wrap { padding-top: 0; }      /* B:Article:69: the crumb row sits right under the 64px header (notis.css gave the page 36px) */
.nt-wrap > .nt { display: contents; }
.nt-wrap .nt > * { grid-column: 1 / span 7; min-width: 0; }
.nt-wrap .nt > .nt-head { grid-column: 1 / -1; }
.nt-wrap > .nt-side { grid-column: 9 / span 4; grid-row: 2 / span 60; margin: 0; gap: 32px; align-self: start; }
.nt-wrap p { max-width: none; }
.nt-head { min-width: 0; }
.wr-crumb { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding: 14px 0; border-bottom: 1px solid var(--wr-rule); font: 500 14px/1.4 var(--wr-sans); color: var(--wr-mute); }
.wr-crumb a { color: var(--wr-mute); }
.wr-crumb a:hover { color: var(--wr-green); }
.wr-crumb .wr-crumb-sec { color: var(--wr-green); font-weight: 700; }
.wr-crumb-sep { color: var(--wr-sep); }
.wr-crumb-go { display: flex; gap: 16px; }
.wr-crumb a.wr-crumb-next { color: var(--wr-ink); font-weight: 700; }
.nt-head > .nt-line, .nt-head > .nt-byline, .nt-head > .nt-share-row, .nt-head > .nt-check { display: none; }
.nt-head > .nt-casebar { margin: 16px 0 0; }
/* 0.52.3 (the Gatekeeper): the phone's chip is not drawn here; the desktop's own chip, .wr-case-d, is the board's: a link to the case and a Follow button */
.nt-head > .nt-case { display: none; }
.nt-head > .wr-case-d { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin: 34px 0 0; padding: 7px 12px 7px 10px; border: 1px solid var(--wr-rule); background: transparent;
  font: 600 14px/1 var(--wr-sans); color: var(--wr-ink); white-space: nowrap; }
.nt-head > .wr-case-d:hover { border-color: var(--wr-ink); }
.nt-head .wr-case-l { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.nt-head .wr-case-d b { font-weight: 900; margin-left: -6px; }
.nt-head .wr-case-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wr-accent); flex: none; }
.nt-head .wr-case-n { font-weight: 600; color: var(--wr-mute); margin-left: -4px; }
.nt-head .wr-case-follow { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font: 800 14px/1 var(--wr-sans); color: var(--wr-green); }
.nt-head .wr-case-follow:hover { text-decoration: underline; }
.nt-head .wr-case-follow:focus-visible { outline: 2px solid var(--wr-green); outline-offset: 3px; border-radius: 2px; }
.nt-head .nt-h1 { margin: 18px 0 0; max-width: 75%; font: 800 58px/1.02 var(--wr-serif); letter-spacing: -.025em; text-wrap: balance; color: var(--wr-ink); }
.nt-head .nt-stand { margin: 18px 0 0; max-width: 66.7%; font: 400 23px/1.45 var(--wr-serif); color: var(--wr-ink3); }
.wr-byline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin: 18px 0 28px; padding-top: 16px; border-top: 1px solid var(--wr-rule); }
.wr-byline-t { margin: 0; font: 500 14px/1.5 var(--wr-sans); color: var(--wr-mute); }
.wr-byline-t b, .wr-byline-t a { color: var(--wr-ink); }
.wr-byline-t a:not(.wr-green) { font-weight: 700; }
.wr-byline-t a.wr-green { color: var(--wr-green); }
.wr-byline-t b { font-weight: 700; }
.wr-byline-a { display: flex; align-items: center; gap: 4px; }
.wr-facts { display: inline-flex; align-items: center; gap: 8px; height: 34px; margin-right: 8px; padding: 0 13px; border: 1px solid var(--wr-green); background: var(--wr-page); color: var(--wr-green); font: 700 14px/1 var(--wr-sans); box-sizing: content-box; }
.nt-wrap a.wr-facts { color: var(--wr-green); }
.wr-facts span { width: 7px; height: 7px; border-radius: 50%; background: var(--wr-accent); }
.wr-byline .wr-q { height: 34px; padding: 0 8px; }
.nt-head .nt-tested { margin: 0 0 24px; max-width: 66.7%; }
.nt-head .figure { margin: 0 0 40px; }
.nt-head .figure .pic-frame { aspect-ratio: 21 / 9; border-radius: 0; overflow: hidden; background: var(--wr-panel); }
.nt-head .figure .pic-scrim, .nt-head .figure .pic-credit { display: none; }
.nt-head .figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 10px; font: italic 400 15px/1.45 var(--wr-serif); color: var(--wr-mute); }
.nt-head .figure figcaption .credit { display: none; }   /* 0.52.5: the phone's credit is exactly what it was; the desktop's is the .wr-fc beside it */
.nt-head .figure figcaption .wr-fc { display: inline; margin-left: auto; font: 500 13px/1.45 var(--wr-sans); font-style: normal; color: var(--wr-mute); }   /* "Image: OpenAI · the company's own image of its product, used to report on it · Enlarge" (B:Article:93) */
.nt-head .figure figcaption .wr-lic--sentence { text-transform: lowercase; }   /* the board's "· the company's own image of its product" is a sentence in the middle of a line */
.nt-head .figure figcaption a { color: var(--wr-green); font-weight: 700; }
/* the main column */
.nt-wrap .nt-sec { margin-top: 34px; }
.nt-wrap .nt-h2 { display: block; margin: 0 0 14px; font: 800 26px/1.15 var(--wr-serif); letter-spacing: 0; color: var(--wr-ink); }
.nt-wrap .nt > section[aria-labelledby="pts-h"] { margin: 0 0 34px; padding: 22px 26px 18px; background: var(--wr-panel); }
.nt-wrap .nt > section[aria-labelledby="pts-h"] .nt-h2 { margin-bottom: 14px; font: 900 13px/1 var(--wr-sans); letter-spacing: .18em; text-transform: uppercase; }
.nt-points { list-style: decimal; counter-reset: none; margin: 0; padding: 0 0 0 20px; font: 400 18px/1.5 var(--wr-serif); color: var(--wr-body); }
.nt-points li { counter-increment: none; position: static; margin-bottom: 8px; padding: 0; border: 0; font: 400 18px/1.5 var(--wr-serif); color: var(--wr-body); }
.nt-points li:last-child { margin-bottom: 0; }
.nt-points li::before { content: none; }
.nt-points li:first-child { padding-top: 0; }
.nt-wrap .nt-body { margin-top: 0; position: relative; }
.nt-body p { margin: 0 0 18px; font: 400 20px/1.6 var(--wr-serif); color: var(--wr-body); }
.nt-body p:last-child { margin-bottom: 0; }
.nt-wrap .nt-means { margin: 36px 0 40px; padding: 4px 0 4px 24px; border: 0; border-left: 4px solid var(--wr-accent); border-radius: 0; background: transparent; }
.nt-wrap .nt-means-head { justify-content: flex-start; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.nt-wrap .nt-means-head .nt-h2 { margin: 0; }
.nt-wrap .nt-tag { padding: 0; border: 0; border-radius: 0; background: transparent; font: 800 12px/1 var(--wr-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wr-mute); }
.nt-wrap .nt-means > p:not(.nt-fine) { margin: 0 0 14px; font: 400 19px/1.6 var(--wr-serif); color: var(--wr-body); }
.nt-wrap .changelog li { border-bottom-color: var(--wr-rule); }     /* 0.52.2: the corrections' rules are the board's rule colour, not the brand's warm border */
.nt-wrap .nt-fine { margin: 0; font: 500 14px/1.5 var(--wr-sans); color: var(--wr-mute); }
.nt-wrap .nt-excited { color: var(--wr-green); }
.nt-wrap .nt-share-row { display: none; }
/* B:Article:131-144: the title and its note, then the six under them (the section is a wrapping row, and the six do not fit beside a 260px note in 7 columns) */
.nt-wrap .react { margin: 0; padding: 26px 0; border-top: 1px solid var(--wr-rule); border-bottom: 1px solid var(--wr-rule); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; align-items: start; row-gap: 0; }
.nt-wrap .react > .nt-h2 { grid-row: 1; margin: 0; font: 900 13px/1 var(--wr-sans); letter-spacing: .18em; text-transform: uppercase; }
.nt-wrap .react > .nt-fine { grid-row: 2; max-width: 260px; margin: 8px 0 0; font-size: 13px; line-height: 1.45; }
.nt-wrap .react .react-row { grid-row: 3; margin-top: 16px; gap: 4px; flex-wrap: wrap; justify-content: flex-start; }
.nt-wrap .react .rx-btn[data-kind="love"] { order: -1; }   /* B:Article:253-258: Love first, as the summary has it */
.nt-wrap .react-done { grid-row: 4; margin-top: 12px; }
.nt-wrap .react .rx-btn { flex-direction: column; justify-content: flex-start; align-items: center; gap: 5px; width: 86px; min-height: 0; padding: 10px 4px 8px; border: 0; border-radius: 10px; background: transparent; font: 600 12px/1.1 var(--wr-sans); color: var(--wr-mute); }
.nt-wrap .react .rx-btn:hover { background: var(--wr-qhover); color: var(--wr-ink); }
.nt-wrap .react > .nt-fine:not(.wr-dk) { display: none; }   /* 0.52.5: the phone's paragraph is untouched; the desktop's is the one beside it */
.nt-wrap .react > .nt-fine.wr-dk { display: block; }
.nt-wrap .react .rx-icon { width: 34px; height: 34px; }
.nt-wrap .react .rx-n { font: 700 13px/1 var(--wr-sans); color: var(--wr-mute); }
.nt-wrap .react .rx-btn[aria-pressed="true"] { background: var(--wr-mine); color: var(--wr-green); }
.nt-wrap #rests { margin-top: 34px; padding-top: 0; }
.nt-wrap .nt-lead-in, .nt-wrap .nt-src { display: none; }   /* the phone's cards: the desktop reads the open box below (B:Article:146-162) */
.wr-src { display: block; }
.wr-src-lead { margin: 0 0 18px; font: 400 17px/1.5 var(--wr-serif); color: var(--wr-ink3); }
.wr-srcbox { border: 1px solid var(--wr-rule); padding: 18px 22px 6px; }
.wr-srcg + .wr-srcg { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--wr-rule); }
.wr-srcg-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 20px; padding-bottom: 14px; }
.wr-srcg-h .wr-k { margin: 0 0 6px; }
.wr-srcg-t { margin: 0; font: 700 21px/1.25 var(--wr-serif); }
.wr-srcg-a { display: flex; gap: 8px; }
.wr-fact { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 14px; padding: 16px 0; border-top: 1px solid var(--wr-hair); }
.wr-fact-no { font: 800 14px/1.5 var(--wr-sans); color: var(--wr-green); }
.wr-fact p { margin: 0; font: 400 17px/1.5 var(--wr-serif); color: var(--wr-body); }
.wr-fact q { display: block; margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--wr-accent); font: italic 400 15px/1.5 var(--wr-serif); color: var(--wr-mute); quotes: none; }
.wr-fact .nt-narrowed { display: inline-block; margin-top: 6px; border-radius: 0; }
.wr-fact a.wr-cite { font: 700 13px/1.5 var(--wr-sans); color: var(--wr-green); }
.wr-fact.is-hl, .wr-fact:target { background: var(--wr-fact); margin: 0 -22px; padding-left: 22px; padding-right: 22px; }
.wr-allfacts > summary { display: block; padding: 14px 0 12px; border-top: 1px solid var(--wr-hair); font: 800 14px/1 var(--wr-sans); color: var(--wr-green); cursor: pointer; list-style: none; }
.wr-allfacts > summary::-webkit-details-marker { display: none; }
.wr-allfacts .wr-af-off, .wr-allfacts[open] .wr-af-on { display: none; }
.wr-allfacts[open] .wr-af-off { display: inline; }
/* the checked sentences and the claim behind each (B:Article:27, 112-121) */
.nt-body .chk { background: linear-gradient(transparent 62%, var(--wr-chk) 62%); cursor: pointer; }
.nt-body .chk:hover, .nt-body .chk.is-open { background: linear-gradient(transparent 38%, var(--wr-chk) 38%); }
.wr-chk { display: block; }
.nt-wrap .nt .wr-chk .wr-hint { margin: 18px 0 0; max-width: none; font: 500 14px/1.5 var(--wr-sans); color: var(--wr-mute); }
.wr-fpop { position: absolute; z-index: 5; width: 508px; max-width: calc(100% - 16px); padding: 16px 18px; background: var(--wr-page); border: 1px solid var(--wr-pop); border-radius: 12px; box-shadow: var(--wr-shadow); box-sizing: border-box; }
.wr-fpop .wr-k.wr-fpop-k { margin: 0 0 8px; font: 400 11px/1.6 var(--wr-serif); color: var(--wr-body); }   /* B:Article:114: the header sits inside the body's paragraph rule, so it is Alegreya 400, not the kicker's Sans 800 green */
.wr-fpop .wr-fpop-c { margin: 0; font: 400 16px/1.5 var(--wr-serif); color: var(--wr-ink2); }   /* 0.52.3: a claim with no source quote is our own words, plain and in no quotation marks */
.wr-fpop q { display: block; padding-left: 12px; border-left: 2px solid var(--wr-accent); font: italic 400 16px/1.5 var(--wr-serif); color: var(--wr-ink2); quotes: none; }
.nt-wrap .wr-fpop .wr-fpop-l { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 700 13px/1 var(--wr-sans); }
.wr-fpop-l a { color: var(--wr-green); }
.nt-wrap .nt-chips a { min-height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 13px; border: 1px solid var(--wr-rule); border-radius: 0; background: var(--wr-page); font: 700 14px/1 var(--wr-sans); color: var(--wr-ink); }
.nt-wrap .nt-chips a:hover { background: var(--wr-panel); }
.nt-wrap .nt-chips a.nt-topic { border-color: var(--wr-ink); }
.nt-wrap .nt-sec[aria-labelledby="filed-h"] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 30px; }
.nt-wrap .nt-sec[aria-labelledby="filed-h"] .nt-h2 { margin: 0 8px 0 0; font: 900 13px/1 var(--wr-sans); letter-spacing: .18em; text-transform: uppercase; }
.nt-wrap .nt-caseway { display: none; }
.nt-wrap .nt-nl { display: none; }
.nt-pager { display: none; }
.wr-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 34px 0 0; padding: 0; }
.nt-wrap > .wr-pager { grid-column: 1 / span 7; }
.wr-pager-a { display: block; padding: 16px 18px; border: 1px solid var(--wr-rule); background: transparent; border-radius: 0; text-decoration: none; color: var(--wr-ink); }
.wr-pager-n { border-color: var(--wr-ink); text-align: right; }
.wr-pager-h { display: block; margin-top: 8px; font: 700 18px/1.3 var(--wr-serif); }
.wr-pager-a .wr-k.wr-k--muted { color: var(--wr-mute); }
/* the side column */
.nt-side .nt-h2 { margin: 0 0 12px; font: 900 13px/1 var(--wr-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--wr-ink); }
.nt-wrap .nt-side-src { display: block; padding: 20px 22px; border: 0; border-radius: 0; background: var(--wr-head); color: var(--bn-night-50); }
.nt-wrap .nt-side-src .nt-h2 { color: var(--wr-accent); }
.nt-wrap .nt-side-src .nt-h2 svg { display: none; }
.nt-wrap .nt-side-src .nt-fine { margin: 0 0 14px; font: 400 16px/1.45 var(--wr-serif); color: var(--wd-ink2-d); }
.nt-wrap .nt-side-src ol { margin: 0; gap: 0; }
.nt-wrap .nt-side-src li a { padding: 12px 0; border-top: 1px solid var(--wd-btn2); border-radius: 0; background: transparent; color: var(--wd-page-l); gap: 12px; align-items: flex-start; }
.nt-wrap .nt-side-src li a:hover { background: transparent; }
.nt-wrap .nt-side-src .nt-src-n { width: auto; height: auto; background: transparent; color: var(--wr-accent); font: 800 14px/1.4 var(--wr-sans); }
.nt-wrap .nt-side-src .nt-src-title { font: 700 16px/1.3 var(--wr-serif); color: var(--wd-page-l); }
.nt-wrap .nt-side-src .wr-dk { display: inline; white-space: pre; }   /* 0.52.5: " · archived" and " →" are spans after the phone's text, which is what it was; `pre` keeps the leading space when the link is a flex box */
.nt-wrap .nt-side-src .nt-src-meta { font: 500 13px/1.4 var(--wr-sans); color: var(--wd-btn2-t); }
.nt-wrap .nt-side-src .nt-side-all { justify-content: flex-start; min-height: 0; padding-top: 12px; border: 0; border-top: 1px solid var(--wd-btn2); border-radius: 0; font: 800 14px/1 var(--wr-sans); color: var(--wr-accent); }
.nt-wrap .nt-side-src .nt-side-all:hover { background: transparent; }
.wr-side-case { display: block; }
.wr-side-case-n { margin: 0 0 12px; font: 600 17px/1.3 var(--wr-serif); }
.wr-side-case-n span { font: 500 13px/1 var(--wr-sans); color: var(--wr-mute); }
.wr-tl-here { font: 600 15px/1.35 var(--wr-serif); }
.wr-side-case .wr-tl a { font-size: 15px; }
.wr-side-case-f { display: flex; gap: 8px; margin-top: 14px; }
.wr-side-case .wr-pill.is-ink { border-color: var(--wr-ink); }
.wr-side-case .wr-pill { height: 36px; padding: 0 13px; font-size: 14px; }
.nt-rel, .nt-also { margin: 0; }
.nt-rel li, .nt-also li { padding: 0; border-top: 1px solid var(--wr-hair); }
.nt-rel li + li, .nt-also li + li { border-top-color: var(--wr-hair); }
html .nt a.term { text-decoration: none; border-bottom: 1.5px dotted var(--wr-green); color: var(--wr-ink); }   /* 0.52.3 (R3-2): a glossary word is ink with a dotted green line under it, as the board draws it */
html .nt a.term:hover { color: var(--wr-green); }   /* 0.52.3 (R3-1): notis.css's `li + li` rule is more specific; the board draws every separator in the hair colour */
.nt-rel a { display: block; padding: 12px 0; }
.nt-thumb { display: none; }
.nt-rel-t { display: block; }
.nt-rel-h, .nt-also-h { display: block; font: 600 17px/1.3 var(--wr-serif); color: var(--wr-ink); }
.nt-rel-m { display: block; margin-top: 4px; font: 500 13px/1.3 var(--wr-sans); color: var(--wr-mute); }
.nt-rel-m:not(.wr-dk) { display: none; }   /* 0.52.5: the phone's line is untouched; the desktop's is the one beside it */
.nt-rel-m.wr-dk { display: block; }      /* 0.52.2 (T4): "6 Oct", the year only for another year, as the board writes it */
.nt-also a { flex-direction: column-reverse; align-items: stretch; gap: 4px; padding: 12px 0; }
.nt-also-beat { font: 500 13px/1.3 var(--wr-sans); color: var(--wr-mute); }
.nt-also-beat .nt-dot { display: none; }
.wr-side-nl { display: block; padding: 18px 20px; border: 1px solid var(--wr-rule); }
.wr-side-nl .nl-box { padding: 0; border: 0; background: transparent; margin: 0; }
.wr-side-nl .nl-box-h { margin: 0 0 8px; font: 900 13px/1 var(--wr-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--wr-green); }
.wr-side-nl .nl-box-h svg { display: none; }
.wr-side-nl .nl-box-what { margin: 0 0 12px; font: 700 18px/1.3 var(--wr-serif); }
.wr-side-nl .nl-box-form { display: flex; flex-direction: column; gap: 8px; }
.wr-side-nl .mn-input { flex: none; width: 100%; box-sizing: content-box; max-width: calc(100% - 30px); height: 44px; border: 1px solid var(--wr-ink); border-radius: 0; background: var(--wr-page); color: var(--wr-ink); font: 400 16px/1 var(--wr-sans); padding: 0 14px; }
.wr-side-nl .mn-btn { height: 44px; min-height: 0; border: 0; border-radius: 0; background: var(--wr-sel-bg); color: var(--wr-sel-fg); font: 800 15px/1 var(--wr-sans); }
.wr-side-nl .mn-fine { font: 500 12px/1.4 var(--wr-sans); color: var(--wr-mute); }
.wr-side-nl .mn-hp { position: absolute; left: -9999px; }

/* ============================================================ narrower than a laptop (721 to 1100px) */
@media (max-width: 1100px) {
  .wr-in, .wr-top-in { padding-left: 32px; padding-right: 32px; }
  .wr-top-in { justify-content: flex-start; }
  .wr-nav { order: 3; flex: 1 1 100%; padding-bottom: 8px; }
  .wr-top-r { margin-left: auto; }
  .wr-h-lead { font-size: 40px; }
  .wr-lead-a, .wr-side { grid-column: 1 / -1; }
  .wr-side { border-left: 0; padding-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .wr-side-a + .wr-side-a { border-top: 0; padding-top: 0; }
  .wr-lead-t, .wr-lead-s, .wr-lead-p, .wr-lead-v { grid-column: 1 / -1; }
  .wr-lead-f { grid-column: 1 / -1; }
  .wr-cases-g, .wr-also { grid-template-columns: 1fr; }
  .wr-case, .wr-also-l, .wr-also-r { grid-column: auto; }
  .wr-numbers-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wr-num-id { grid-column: 1 / -1; } .wr-num { grid-column: auto; }
  .wr .wr-tiles[class*="--n"] > .wr-tile { grid-column: span 6; }   /* two to a row here (0.52.6) ...  */
  .wr .wr-tiles[class*="--n"] > .wr-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* ... and a last tile on a row of its own spans it */
  .wr-email-t, .wr-email-f, .wr-email-soon, .wr-email--mine .wr-email-t, .wr-email--mine .wr-email-a { grid-column: 1 / -1; }
  .wr-email--mine .wr-email-a { margin-top: 18px; justify-content: flex-start; }
  .wr-email-f { margin-top: 18px; }
  .wr-foot-c1, .wr-foot-c2, .wr-foot-c3, .wr-foot-c4 { grid-column: span 6; }
  .wr-ms-id, .wr-ms-cases, .wr-ms-stats { grid-column: 1 / -1; }
  .wr-ms-stats { border-left: 0; padding-left: 0; }
  .wr-b-lead, .wr-b-ex { grid-column: 1 / -1; }
  .wr-b-card { grid-column: span 6; }
  .wr-b-tile { grid-column: span 6; }
  .wr-cal { width: min(682px, calc(100vw - 24px)); }
  .wr-sky { display: none; }
  .wr-b-lead-a { min-height: 420px; }
  .wr-b-h { font-size: 34px; }
  .nt-wrap { padding: 0 32px; }
  .nt-wrap .nt > *, .nt-wrap > .wr-pager { grid-column: 1 / -1; }
  .nt-wrap > .nt-side { grid-column: 1 / -1; grid-row: auto; margin-top: 40px; }
  .nt-head .nt-h1 { max-width: none; font-size: 44px; }
  .nt-head .nt-stand, .nt-head .nt-tested { max-width: none; }
}


/* ============================================================ deploy 2: Explore and the register (0.53.0). The boards' colours, read as --dx-* */
:root {
  --dx-tag-maker-bg: var(--wd-tag-maker-bg-l);
  --dx-tag-maker-bd: var(--wd-tag-maker-bd-l);
  --dx-tag-maker-tx: var(--wd-tag-maker-tx-l);
  --dx-cell-maker: var(--wd-cell-maker-l);
  --dx-cell-others: var(--wd-cell-others-l);
  --dx-tag-others-bg: var(--wd-tag-others-bg-l);
  --dx-note-maker-tx: var(--wd-note-maker-tx-l);
  --dx-seg-models: var(--wd-seg-models-l);
  --dx-seg-tooling: var(--wd-seg-tooling-l);
  --dx-seg-research: var(--wd-seg-research-l);
  --dx-seg-compute: var(--wd-seg-compute-l);
  --dx-seg-laws: var(--wd-seg-laws-l);
  --dx-seg-safety: var(--wd-seg-safety-l);
  --dx-seg-work: var(--wd-seg-work-l);
  --dx-seg-tested: var(--wd-seg-tested-l);
  --dx-seg-make: var(--wd-seg-make-l);
  --dx-st-watching-bg: var(--wd-st-watching-bg-l);
  --dx-st-watching-bd: var(--wd-st-watching-bd-l);
  --dx-st-rising-bg: var(--wd-st-rising-bg-l);
  --dx-st-rising-bd: var(--wd-st-rising-bd-l);
  --dx-st-rising-n: var(--wd-st-rising-n-l);
  --dx-st-active-bg: var(--wd-st-active-bg-l);
  --dx-st-active-bd: var(--wd-st-active-bd-l);
  --dx-st-active-n: var(--wd-st-active-n-l);
  --dx-st-fading-bg: var(--wd-st-fading-bg-l);
  --dx-st-fading-bd: var(--wd-st-fading-bd-l);
  --dx-st-fading-n: var(--wd-st-fading-n-l);
  --dx-st-retired-bg: var(--wd-st-retired-bg-l);
  --dx-st-retired-bd: var(--wd-st-retired-bd-l);
  --dx-st-retired-n: var(--wd-st-retired-n-l);
  --dx-bar-track: var(--wd-bar-track-l);
  --dx-kind-company: var(--wd-kind-company-l);
  --dx-kind-product: var(--wd-kind-product-l);
  --dx-kind-idea: var(--wd-kind-idea-l);
  --dx-kind-person: var(--wd-kind-person-l);
  --dx-edge: var(--wd-edge-l);
  --dx-edge-dash: var(--wd-edge-dash-l);
  --dx-map-bg: var(--wd-map-bg-l);
  --dx-on-dark-mute: var(--wd-on-dark-mute-l);
  --dx-on-dark-rule: var(--wd-on-dark-rule-l);
  --dx-dark-panel: var(--wd-dark-panel-l);
  --dx-dim: var(--wd-dim-l);
}
@supports (color: light-dark(white, black)) {
  :root {
    --dx-tag-maker-bg: light-dark(var(--wd-tag-maker-bg-l), var(--wd-tag-maker-bg-d));
    --dx-tag-maker-bd: light-dark(var(--wd-tag-maker-bd-l), var(--wd-tag-maker-bd-d));
    --dx-tag-maker-tx: light-dark(var(--wd-tag-maker-tx-l), var(--wd-tag-maker-tx-d));
    --dx-cell-maker: light-dark(var(--wd-cell-maker-l), var(--wd-cell-maker-d));
    --dx-cell-others: light-dark(var(--wd-cell-others-l), var(--wd-cell-others-d));
    --dx-tag-others-bg: light-dark(var(--wd-tag-others-bg-l), var(--wd-tag-others-bg-d));
    --dx-note-maker-tx: light-dark(var(--wd-note-maker-tx-l), var(--wd-note-maker-tx-d));
    --dx-seg-models: light-dark(var(--wd-seg-models-l), var(--wd-seg-models-d));
    --dx-seg-tooling: light-dark(var(--wd-seg-tooling-l), var(--wd-seg-tooling-d));
    --dx-seg-research: light-dark(var(--wd-seg-research-l), var(--wd-seg-research-d));
    --dx-seg-compute: light-dark(var(--wd-seg-compute-l), var(--wd-seg-compute-d));
    --dx-seg-laws: light-dark(var(--wd-seg-laws-l), var(--wd-seg-laws-d));
    --dx-seg-safety: light-dark(var(--wd-seg-safety-l), var(--wd-seg-safety-d));
    --dx-seg-work: light-dark(var(--wd-seg-work-l), var(--wd-seg-work-d));
    --dx-seg-tested: light-dark(var(--wd-seg-tested-l), var(--wd-seg-tested-d));
    --dx-seg-make: light-dark(var(--wd-seg-make-l), var(--wd-seg-make-d));
    --dx-st-watching-bg: light-dark(var(--wd-st-watching-bg-l), var(--wd-st-watching-bg-d));
    --dx-st-watching-bd: light-dark(var(--wd-st-watching-bd-l), var(--wd-st-watching-bd-d));
    --dx-st-rising-bg: light-dark(var(--wd-st-rising-bg-l), var(--wd-st-rising-bg-d));
    --dx-st-rising-bd: light-dark(var(--wd-st-rising-bd-l), var(--wd-st-rising-bd-d));
    --dx-st-rising-n: light-dark(var(--wd-st-rising-n-l), var(--wd-st-rising-n-d));
    --dx-st-active-bg: light-dark(var(--wd-st-active-bg-l), var(--wd-st-active-bg-d));
    --dx-st-active-bd: light-dark(var(--wd-st-active-bd-l), var(--wd-st-active-bd-d));
    --dx-st-active-n: light-dark(var(--wd-st-active-n-l), var(--wd-st-active-n-d));
    --dx-st-fading-bg: light-dark(var(--wd-st-fading-bg-l), var(--wd-st-fading-bg-d));
    --dx-st-fading-bd: light-dark(var(--wd-st-fading-bd-l), var(--wd-st-fading-bd-d));
    --dx-st-fading-n: light-dark(var(--wd-st-fading-n-l), var(--wd-st-fading-n-d));
    --dx-st-retired-bg: light-dark(var(--wd-st-retired-bg-l), var(--wd-st-retired-bg-d));
    --dx-st-retired-bd: light-dark(var(--wd-st-retired-bd-l), var(--wd-st-retired-bd-d));
    --dx-st-retired-n: light-dark(var(--wd-st-retired-n-l), var(--wd-st-retired-n-d));
    --dx-bar-track: light-dark(var(--wd-bar-track-l), var(--wd-bar-track-d));
    --dx-kind-company: light-dark(var(--wd-kind-company-l), var(--wd-kind-company-d));
    --dx-kind-product: light-dark(var(--wd-kind-product-l), var(--wd-kind-product-d));
    --dx-kind-idea: light-dark(var(--wd-kind-idea-l), var(--wd-kind-idea-d));
    --dx-kind-person: light-dark(var(--wd-kind-person-l), var(--wd-kind-person-d));
    --dx-edge: light-dark(var(--wd-edge-l), var(--wd-edge-d));
    --dx-edge-dash: light-dark(var(--wd-edge-dash-l), var(--wd-edge-dash-d));
    --dx-map-bg: light-dark(var(--wd-map-bg-l), var(--wd-map-bg-d));
    --dx-on-dark-mute: light-dark(var(--wd-on-dark-mute-l), var(--wd-on-dark-mute-d));
    --dx-on-dark-rule: light-dark(var(--wd-on-dark-rule-l), var(--wd-on-dark-rule-d));
    --dx-dark-panel: light-dark(var(--wd-dark-panel-l), var(--wd-dark-panel-d));
    --dx-dim: light-dark(var(--wd-dim-l), var(--wd-dim-d));
  }
}
/* ---- the page: shown, and the phone's own page steps aside */
.dx { --wr-sel-bg: var(--wr-ink); --wr-sel-fg: var(--wr-page); padding: 0; margin: 0; max-width: none; width: auto; display: block; font-family: var(--wr-serif); color: var(--wr-ink); background: var(--wr-page); font-size: 16px; line-height: 1.5; }
.dx[hidden] { display: block; }
.dx ~ main { display: none !important; }                            /* the phone's page: a desktop draws the board's */
.dx [hidden] { display: none !important; }
html:has(.dx), html:has(.dx) body { background: var(--wr-page); }
.dx *, .dx *::before, .dx *::after { box-sizing: border-box; }
.dx a { color: var(--wr-ink); text-decoration: none; }
.dx a:hover { color: var(--wr-green); }
.dx :focus-visible { outline: 2px solid var(--bn-focus-ring); outline-offset: 2px; }
.dx p { max-width: none; }
.dx svg { flex: none; }
.dx-in { max-width: 1312px; margin: 0 auto; padding: 0 64px; box-sizing: content-box; }
.dx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dx-k { margin: 0; font: 800 12px/1 var(--wr-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wr-green); }
.dx-k--mute { color: var(--wr-mute); }
.dx-sec { margin: 0; font: 900 13px/1 var(--wr-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--wr-ink); }
.dx-sec--rule { padding-bottom: 12px; border-bottom: 2px solid var(--wr-ink); }
.dx-sech { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--wr-ink); margin-bottom: 18px; }
.dx-sech > span, .dx-note { font: 500 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
.dx-note { margin: 0; }
.dx-note--s { margin-top: 14px; }
.dx-explore .dx-sech > span { line-height: 1; }
.dx a.dx-more, .dx-more { font: 800 14px/1 var(--wr-sans); color: var(--wr-green); }
.dx-h1 { margin: 0; font: 800 56px/1.02 var(--wr-serif); letter-spacing: -.025em; text-wrap: balance; color: var(--wr-ink); }
.dx-lede { margin: 0; font: 400 21px/1.5 var(--wr-serif); color: var(--wr-ink3); }
.dx-sf { margin: 0; font: 400 17px/1.5 var(--wr-serif); color: var(--wr-ink3); }
.dx-big { font: 800 40px/1 var(--wr-sans); letter-spacing: -.02em; color: var(--wr-ink); font-variant-numeric: tabular-nums; }
.dx-bl { margin-top: 6px; font: 500 14px/1.35 var(--wr-sans); color: var(--wr-mute); }
.dx-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border: 1px solid var(--wr-rule); font: 700 14px/1 var(--wr-sans); color: var(--wr-ink); background: var(--wr-page); cursor: pointer; }
.dx-pill.is { background: var(--wr-sel-bg); border-color: var(--wr-sel-bg); color: var(--wr-sel-fg); }
.dx-pill--dark { border-color: var(--wr-ink); }
.dx-pill svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.dx-btn { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border: 1px solid var(--wr-ink); background: transparent; color: var(--wr-ink); font: 800 14px/1 var(--wr-sans); cursor: pointer; list-style: none; }
.dx-btn::-webkit-details-marker { display: none; }
.dx-card { border: 1px solid var(--wr-rule); padding: 20px 22px; background: var(--wr-page); }
.dx-bone { background: var(--wr-panel); padding: 22px 24px; }
.dx-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--wr-green); color: var(--wr-green); font: 800 11px/1 var(--wr-sans); letter-spacing: .06em; text-transform: uppercase; }
.dx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--beat, var(--wr-rule)); flex: none; }
.dx-empty { color: var(--dx-dim); }
.dx-band { background: var(--wr-panel); border-bottom: 1px solid var(--wr-rule); }
.dx-band-in { padding-top: 36px; padding-bottom: 0; }
.dx-band-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; align-items: end; }
.dx-band-t { grid-column: span 6; min-width: 0; }
.dx-band-t .dx-h1 { line-height: 1; }
.dx-band-t .dx-lede { margin-top: 12px; line-height: 1.45; }
.dx-search { grid-column: span 6; min-width: 0; display: flex; }
.dx-search input { flex: 1; min-width: 0; height: 52px; padding: 0 18px; border: 1px solid var(--wr-ink); border-right: 0; border-radius: 0; background: var(--wr-page); color: var(--wr-ink); font: 400 17px/1 var(--wr-sans); }
.dx-search button { height: 52px; padding: 0 22px; border: 0; border-radius: 0; background: var(--wr-sel-bg); color: var(--wr-sel-fg); font: 800 15px/1 var(--wr-sans); cursor: pointer; }
.dx-tabs { display: flex; flex-wrap: wrap; gap: 4px 26px; border-bottom: 1px solid var(--wr-rule); margin-bottom: 30px; }
.dx-tabs--band { gap: 4px 28px; margin-top: 28px; margin-bottom: 0; border-bottom: 0; }
.dx-tab { padding: 14px 0; font: 700 15px/1 var(--wr-sans); color: var(--wr-mute); border-bottom: 3px solid transparent; }
.dx-tab.is { color: var(--wr-ink); border-bottom-color: var(--wr-accent); }
.dx a.dx-tab { color: var(--wr-mute); }
.dx a.dx-tab.is { color: var(--wr-ink); }
.dx a.dx-tab:hover { color: var(--wr-green); }
.dx a.dx-tab.is:hover { color: var(--wr-ink); }
.dx a.dx-pill { color: var(--wr-ink); }
.dx a.dx-pill:hover { color: var(--wr-green); }
.dx a.dx-pill.is, .dx a.dx-pill.is:hover { color: var(--wr-sel-fg); }
.dx-crumbs { border-bottom: 1px solid var(--wr-rule); }
.dx-crumbs .dx-in { padding-top: 12px; padding-bottom: 12px; font: 500 14px/1.4 var(--wr-sans); color: var(--wr-mute); }
.dx-crumbs a { color: var(--wr-mute); }
.dx-crumbs .dx-sep { color: var(--wr-sep); }
.dx-crumbs .dx-here { color: var(--wr-ink); font-weight: 700; }
.dx-page { padding-top: 34px; padding-bottom: 56px; }

/* ---- Explore, B:Explore */
.dx-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--wr-rule); }
.dx-nums > div + div { border-left: 1px solid var(--wr-rule); padding-left: 24px; }
.dx-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 0; border-bottom: 1px solid var(--wr-rule); }
.dx-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dx-pills .dx-k { margin-right: 4px; }
.dx-filters .dx-pill { height: 34px; padding: 0 12px; font-size: 13px; }
.dx-sel { position: relative; }
.dx-sel > summary { list-style: none; }
.dx-sel > summary::-webkit-details-marker { display: none; }
.dx-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 260px; padding: 6px; border: 1px solid var(--wr-pop); background: var(--wr-page); box-shadow: var(--wr-shadow); }
.dx-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; font: 700 14px/1.2 var(--wr-sans); color: var(--wr-ink); }
.dx-menu a span { margin-left: auto; color: var(--wr-mute); font-weight: 500; }
.dx-menu a:hover { background: var(--wr-panel); }
.dx-menu a[aria-current] { background: var(--wr-panel); }
.dx-two { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; padding: 34px 0 40px; border-bottom: 1px solid var(--wr-ink); }
.dx-two-a { grid-column: span 7; min-width: 0; }
.dx-two-b { grid-column: span 5; min-width: 0; }
.dx-sech--m { margin-bottom: 20px; }
.dx-two-b .dx-sech--m { margin-bottom: 0; }
.dx-weeks { display: flex; flex-direction: column; gap: 18px; }
.dx-wk > summary { list-style: none; cursor: pointer; }
.dx-wk > summary::-webkit-details-marker { display: none; }
.dx-wk-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 40px; align-items: center; column-gap: 14px; }
.dx-wk-row.is-now { background: var(--wr-panel); margin: -8px -10px; padding: 8px 10px; }
.dx-wk-l { font: 600 14px/1.3 var(--wr-sans); color: var(--wr-mute); }
.dx-wk-row.is-now .dx-wk-l { font-weight: 700; color: var(--wr-ink); }
.dx-wk-n { font: 800 18px/1 var(--wr-sans); text-align: right; }
.dx-wkbar { display: flex; height: 34px; }
.dx-wkbar span, .dx-legend i, .dx-wk-d i { background: var(--seg, var(--wr-faint)); }
.dx-wkbar span { height: 100%; }
[data-beat="models"] {
  --seg: var(--dx-seg-models);
}[data-beat="tooling"] {
  --seg: var(--dx-seg-tooling);
}[data-beat="research"] {
  --seg: var(--dx-seg-research);
}
[data-beat="compute"] {
  --seg: var(--dx-seg-compute);
}[data-beat="laws"] {
  --seg: var(--dx-seg-laws);
}[data-beat="safety"] {
  --seg: var(--dx-seg-safety);
}
[data-beat="work"] {
  --seg: var(--dx-seg-work);
}[data-beat="tested"] {
  --seg: var(--dx-seg-tested);
}[data-beat="make"] {
  --seg: var(--dx-seg-make);
}
.dx-wk-d { padding: 10px 0 0 144px; }
.dx-wk-d ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; font: 500 14px/1.3 var(--wr-sans); color: var(--wr-ink2); }
.dx-wk-d li { display: flex; align-items: center; gap: 8px; }
.dx-wk-d li b { margin-left: auto; font-weight: 800; }
.dx-wk-d i, .dx-legend i { width: 12px; height: 12px; display: inline-block; }
.dx-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 22px 0 0; padding: 14px 0 0; border-top: 1px solid var(--wr-hair); list-style: none; }
.dx-legend li { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1 var(--wr-sans); color: var(--wr-ink2); }
.dx-rks { margin: 0; padding: 0; list-style: none; }
.dx-rk { line-height: normal; display: grid; grid-template-columns: 22px minmax(0, 1fr) 90px 28px; align-items: center; column-gap: 12px; padding: 9px 0; border-top: 1px solid var(--wr-hair); }
.dx-rks li:first-child .dx-rk { border-top: 0; }
.dx-rks--rest li:first-child .dx-rk { border-top: 1px solid var(--wr-hair); }
.dx-moreD.dx-whole { margin-top: 0; }
.dx-whole > summary { display: block; padding-top: 12px; border-top: 1px solid var(--wr-hair); font: 800 14px/1 var(--wr-sans); color: var(--wr-green); cursor: pointer; list-style: none; }
.dx-whole > summary::-webkit-details-marker { display: none; }

.dx-rk b { font: 700 16px/1.2 var(--wr-serif); color: var(--wr-ink); }
.dx-rk em { display: block; font: 500 12px/1.2 var(--wr-sans); color: var(--wr-mute); font-style: normal; margin-top: 2px; }
.dx-rk-no { font: 800 13px/1 var(--wr-sans); color: var(--wr-faint); }
.dx-rk-m { height: 8px; background: var(--dx-bar-track); }
.dx-rk-m span { display: block; height: 100%; background: var(--wr-accent); }
.dx-rk-c { font: 800 14px/1 var(--wr-sans); text-align: right; font-variant-numeric: tabular-nums; }
.dx a.dx-rk:hover b { color: var(--wr-green); }
.dx-reg, .dx-ill { padding: 34px 0 40px; border-bottom: 1px solid var(--wr-ink); }
.dx-reg .dx-sech, .dx-ill .dx-sech { margin-bottom: 22px; }
/* 0.54.4 (the Mayor, 9 Oct): the register block is one twelve-column grid and the server writes the count on it (dx-tiles--nN, from
   _dx_explore.html), as the front page's tiles do, so the block never leaves a hole on the right: 1 one full row; 2 as 6+6; 3 as
   4+4+4; 4 as 4 across; 5 as 3 over 2; 6 as 3 over 3; 7 as the board's 3 over 4. It was two grids of three and four columns (0.53.1),
   and a tile that was not live left its cell empty. A tile that stands last on an odd row of two (721 to 1100px) spans both. */
.dx-tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.dx-tiles > .dx-tile { grid-column: span 3; }
.dx-tiles--n1 > .dx-tile { grid-column: span 12; }
.dx-tiles--n2 > .dx-tile { grid-column: span 6; }
.dx-tiles--n3 > .dx-tile, .dx-tiles--n5 > .dx-tile, .dx-tiles--n6 > .dx-tile { grid-column: span 4; }
.dx-tiles--n5 > .dx-tile:nth-child(n+4) { grid-column: span 6; }
.dx-tiles--n7 > .dx-tile:nth-child(-n+3) { grid-column: span 4; }
.dx-tile { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px; border: 1px solid var(--wr-rule); background: var(--wr-page); min-height: 200px; }
.dx-tile b { font: 700 22px/1.15 var(--wr-serif); color: var(--wr-ink); }
.dx-tile .dx-d { font: 400 15px/1.45 var(--wr-serif); color: var(--wr-ink3); }
.dx-tile em { margin-top: auto; font: 800 13px/1 var(--wr-sans); color: var(--wr-green); font-style: normal; }
.dx a.dx-tile:hover { border-color: var(--wr-ink); color: inherit; }
.dx-tile--su { background: var(--wr-head); border-color: var(--wr-head); }
.dx .dx-tile--su b { color: var(--wd-page-l); }
.dx .dx-tile--su .dx-d { color: var(--dx-on-dark-mute); }
.dx .dx-tile--su .dx-k, .dx .dx-tile--su em { color: var(--wr-accent); }
.dx-ill-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dx-ill-g a { display: block; }
.dx-ill-g img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--wr-media); }
.dx-ill-g span { display: block; margin-top: 10px; font: 600 16px/1.3 var(--wr-serif); }
.dx-ss { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 34px 0 44px; }
.dx-ss-a { grid-column: span 3; min-width: 0; }
.dx-ss-b { grid-column: 5 / span 8; min-width: 0; }
.dx-slist { list-style: none; margin: 0; padding: 0; font: 600 16px/1 var(--wr-sans); }
.dx-slist li { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--wr-hair); }
.dx-slist li:last-child { border-bottom: 0; }
.dx-slist span { color: var(--wr-mute); }
.dx-day { margin: 18px 0 4px; }
.dx-st ~ .dx-day, .dx-day ~ .dx-day { margin-top: 24px; }
.dx-st { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px; padding: 12px 0; border-top: 1px solid var(--wr-hair); align-items: baseline; }
.dx-st .dx-k { font-size: 11px; }
.dx-st a { font: 600 18px/1.3 var(--wr-serif); }
.dx-moreD { margin-top: 18px; }
.dx-moreD > summary { list-style: none; }
.dx-moreD[open] > summary { display: none; }
.dx-moreD[open] { margin-top: 0; }
/* ---- the register's pages: Models, Compare, On the move (B:Models, B:Compare, B:Moving) */
.dx-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; padding-bottom: 22px; }
.dx-head-t { grid-column: span 7; }
.dx-head-t .dx-lede, .dx-head .dx-lede { margin-top: 12px; }
.dx-head-r { grid-column: span 5; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.dx-head--c { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
.dx-head--p { display: block; padding-bottom: 24px; }
.dx-seg { display: inline-flex; border: 1px solid var(--wr-rule); }
.dx-seg a { padding: 0 16px; height: 38px; display: inline-flex; align-items: center; font: 700 14px/1 var(--wr-sans); color: var(--wr-mute); }
.dx-seg a.is { background: var(--wr-sel-bg); color: var(--wr-sel-fg); font-weight: 800; }
.dx .dx-seg a.is:hover { color: var(--wr-sel-fg); }
.dx-t { width: 100%; border-collapse: collapse; font: 500 15px/1.35 var(--wr-sans); }
.dx-t th { text-align: left; font: 800 12px/1.2 var(--wr-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--wr-mute); padding: 10px 12px; border-bottom: 2px solid var(--wr-ink); }
.dx-t td { padding: 12px; border-bottom: 1px solid var(--wr-hair); vertical-align: top; }
.dx-t td.num { font-family: var(--wr-sans); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dx-t th.num { text-align: right; }
.dx-t a.dx-v { color: var(--wr-green); font-weight: 700; }
.dx-t a.dx-v--b { font-weight: 800; }
.dx-pair { color: var(--wr-green); font-weight: 700; }
.dx-models-t { table-layout: fixed; }      /* 0.53.1 (F-Mo1): the board's seven columns are 217.3, 82.8, 66.3, 197.1, 123.4, 254.3 and 370.9 wide, whatever the rows hold */
.dx-mn { font: 700 16px/1.3 var(--wr-serif); }
.dx-th-maker { background: var(--dx-tag-maker-bg); }
.dx-th-others { background: var(--dx-tag-others-bg); }
.dx-td-maker, .dx-td-others { font-size: 14px; }
.dx-td-maker { background: var(--dx-cell-maker); }
.dx-td-others { background: var(--dx-cell-others); }
.dx-legend2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.dx-legend2 p { margin: 0; padding: 12px 14px; font: 500 14px/1.45 var(--wr-sans); }
.dx-lg-maker { background: var(--dx-tag-maker-bg); color: var(--dx-note-maker-tx); }
.dx-lg-others { background: var(--dx-tag-others-bg); color: var(--wr-green); }
.dx-note--t { margin-top: 12px; }
.dx-note--s2 { margin: 10px 0 0; }
.dx-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--wr-rule); border-bottom: 1px solid var(--wr-rule); margin-bottom: 22px; }
.dx-picked .dx-pill { gap: 10px; }
.dx a.dx-x { color: var(--wr-faint); font-size: 14px; line-height: 1; }
.dx-addf { display: inline-flex; gap: 8px; align-items: center; }
.dx-addf select { height: 34px; max-width: 260px; padding: 0 10px; border: 1px solid var(--wr-rule); border-radius: 0; background: var(--wr-page); color: var(--wr-ink); font: 600 14px/1 var(--wr-sans); }
.dx-cmp-t { table-layout: fixed; }
.dx-cmp-t .dx-c0 { width: 23.82%; }        /* 0.53.1 (F-C1): the board's 22% is content-box, plus the cell's 24px: 312.6 of 1312, and four value columns of 249.8 */
.dx-t .dx-cmp-h { font-size: 13px; color: var(--wr-ink); }       /* 0.53.1 (F-C2): `.dx-t th` (12px) outweighed the 13px of the board's column head */
.dx-cmp-h a { color: var(--wr-ink); }
.dx-cmp-h span { display: block; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--wr-mute); margin-top: 4px; }
.dx-t .dx-grp td { background: var(--wr-panel); font: 900 12px/1 var(--wr-sans); letter-spacing: .16em; text-transform: uppercase; padding: 10px 12px; }
.dx-tag--maker { background: var(--dx-tag-maker-bg); border-color: var(--dx-tag-maker-bd); color: var(--dx-tag-maker-tx); margin-left: 4px; }
.dx-tag--others { background: var(--dx-tag-others-bg); border-color: var(--wr-green); color: var(--wr-green); margin-left: 4px; }
.dx-covered { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--wr-rule); }
.dx-cov-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dx-wkn { margin: 0 0 8px; font: 700 13px/1.45 var(--wr-sans); color: var(--wr-ink); }
.dx-cb { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dx-cb-b { height: 12px; display: block; }
.dx-cb b { font: 800 13px/1 var(--wr-sans); }
[data-series="1"] {
  --ser: var(--wr-ink);
}[data-series="2"] {
  --ser: var(--wr-accent);
}[data-series="3"] {
  --ser: var(--dx-seg-research);
}[data-series="4"] {
  --ser: var(--dx-seg-compute);
}
.dx-cb-b, .dx-sw { background: var(--ser); }
.dx-sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; }
/* On the move */
.dx-states { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dx-state { display: block; padding: 18px 20px; border-top: 5px solid var(--bd); background: var(--bg); }
.dx-state .dx-big { color: var(--nc, var(--wr-ink)); }
.dx-state .dx-bl { color: var(--lc, var(--wr-faint)); font-weight: 700; }
.dx-state--watching {
  --bg: var(--dx-st-watching-bg);
  --bd: var(--dx-st-watching-bd);
  --lc: var(--wr-ink);
}
.dx-state--rising {
  --bg: var(--dx-st-rising-bg);
  --bd: var(--dx-st-rising-bd);
  --nc: var(--dx-st-rising-n);
}
.dx-state--active {
  --bg: var(--dx-st-active-bg);
  --bd: var(--dx-st-active-bd);
  --nc: var(--dx-st-active-n);
}
.dx-state--fading {
  --bg: var(--dx-st-fading-bg);
  --bd: var(--dx-st-fading-bd);
  --nc: var(--dx-st-fading-n);
}
.dx-state--retired {
  --bg: var(--dx-st-retired-bg);
  --bd: var(--dx-st-retired-bd);
  --nc: var(--dx-st-retired-n);
}
.dx .dx-state:hover .dx-bl { color: var(--wr-green); }
.dx-mv { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-top: 32px; align-items: stretch; }
.dx-pickup { grid-column: span 5; min-width: 0; background: var(--dx-dark-panel); color: var(--wd-ink-d); padding: 22px 24px; }
.dx-pickup .dx-sec { color: var(--wr-accent); margin-bottom: 6px; }
.dx-pu-n { margin: 0 0 12px; font: 500 13px/1.4 var(--wr-sans); color: var(--dx-on-dark-mute); }
.dx .dx-pu { display: block; padding: 14px 0; border-top: 1px solid var(--dx-on-dark-rule); color: var(--wd-page-l); }
.dx .dx-pu:hover { color: var(--wr-accent); }
.dx-pu { line-height: normal; }       /* B:Moving: the kicker is an inline run inside the link's own line, so the board's item is 100.4 high */
.dx-pu-k { display: inline; font: 800 11px/1 var(--wr-sans); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--beat, var(--dx-on-dark-mute)) 55%, var(--wd-page-l)); }
.dx-pu-t { display: block; margin-top: 6px; font: 700 18px/1.3 var(--wr-serif); }
.dx-pu-b { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.dx-pu-bar { flex: 1; height: 5px; background: var(--dx-on-dark-rule); }
.dx-pu-bar span { display: block; height: 100%; background: var(--wr-accent); }
.dx-pu-c { font: 600 12px/1 var(--wr-sans); color: var(--dx-on-dark-mute); white-space: nowrap; }
.dx-mv-b { grid-column: 7 / span 6; min-width: 0; }
.dx-mv-b--solo { grid-column: 1 / -1; }
.dx-lane + .dx-lane { margin-top: 36px; }
.dx-topic { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--wr-hair); }
.dx-topic-e { align-self: stretch; background: var(--beat, var(--wr-rule)); }
.dx-topic-n { font: 600 17px/1.3 var(--wr-serif); }
.dx-topic-k { display: inline-flex; align-items: center; gap: 6px; font: 800 11px/1 var(--wr-sans); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--beat, var(--wr-mute)) 62%, var(--wr-ink)); }
.dx-topic-k i { width: 8px; height: 8px; border-radius: 2px; background: var(--beat, var(--wr-mute)); }
.dx-topic[data-beat="tooling"] .dx-topic-k, .dx-topic[data-beat="models"] .dx-topic-k, .dx-topic[data-beat="laws"] .dx-topic-k { color: var(--beat); }      /* 0.53.1 (F-M5): the board's own colours where they pass 4.5 : 1 on white (5.0, 5.4, 5.2); teal and olive stay darkened */
@supports (color: light-dark(white, black)) {
  .dx-topic[data-beat="tooling"] .dx-topic-k, .dx-topic[data-beat="models"] .dx-topic-k, .dx-topic[data-beat="laws"] .dx-topic-k { color: light-dark(var(--beat), color-mix(in srgb, var(--beat) 62%, var(--wr-ink))); }
}
.dx-moreD .dx-topic:first-of-type { border-top: 1px solid var(--wr-hair); }
.dx-moreD > summary.dx-pill { margin-top: 14px; }
.dx-lane .dx-moreD { margin-top: 0; }       /* B:Moving: the pill is 14 under the last row, not 18 + 14 */
.dx-moreD[open] > summary.dx-pill { display: inline-flex; }
.dx-moreD[open] > summary.dx-pill { display: none; }
.dx-blk { margin-top: 40px; }
.dx-logd > summary { list-style: none; }
.dx-logd > summary::-webkit-details-marker { display: none; }
.dx-logd > .dx-log { margin-top: 18px; }
.dx-lst { list-style: none; margin: 0; padding: 0; font: 600 17px/1.4 var(--wr-serif); }
.dx-lst li { padding: 8px 0; border-top: 1px solid var(--wr-hair); }
.dx-log { list-style: none; margin: 0; padding: 0; }
.dx-log li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-top: 1px solid var(--wr-hair); font: 500 15px/1.4 var(--wr-sans); }
.dx-day2 { font: 600 13px/1.4 var(--wr-sans); color: var(--wr-mute); }
/* ---- Companies and one company (B:Companies, B:Company) */
.dx-head--g { display: grid; padding-bottom: 26px; }
.dx-head-8 { grid-column: span 8; }
.dx-head-4 { grid-column: span 4; display: flex; justify-content: flex-end; gap: 8px; }
.dx-cos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dx-cowrap { display: flex; flex-direction: column; }
.dx-cowrap > .dx-note--l { order: 1; margin: 14px 0 0; }
.dx-cowrap > .dx-moreD--co { order: 2; margin-top: 0; }
.dx-cowrap > .dx-moreD--co > summary { margin-top: 14px; }
.dx-cowrap > .dx-moreD--co[open] > .dx-cos { margin-top: 24px; }
.dx-cowrap:has(> .dx-moreD--co[open]) > .dx-note--l { order: 3; }
.dx-co { position: relative; display: flex; flex-direction: column; gap: 12px; }      /* 0.53.5: sizes to its content (it had min-height 272 for the board's 230 content-box, which left a hole in a card with no background) */
.dx-cos { align-items: start; }      /* 0.53.5: a card is as tall as what it holds; the grid's rows stay in step by their top edge */
.dx-co:hover, .dx-co:focus-within { border-color: var(--wr-ink); }
.dx a.dx-co-name { color: var(--wr-ink); }
.dx a.dx-co-name::after { content: ""; position: absolute; inset: 0; }      /* the name's link covers the card; the story and case links sit above it */
.dx a.dx-co-name:focus-visible { outline: none; }
.dx-co:has(.dx-co-name:focus-visible) { outline: 2px solid var(--wr-green); outline-offset: 2px; }
.dx-co-s { display: flex; flex-direction: column; gap: 4px; }
.dx-co-cs { display: flex; flex-direction: column; gap: 3px; }
.dx a.dx-co-sl { position: relative; z-index: 1; align-self: flex-start; font: 600 16px/1.35 var(--wr-serif); color: var(--wr-ink); }
.dx a.dx-co-sl:hover { color: var(--wr-green); text-decoration: underline; }
.dx-co-h { display: flex; align-items: center; gap: 14px; }
.dx-co-n { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dx-co-name { font: 800 25px/1.1 var(--wr-serif); }
.dx-co-d { font: 400 16px/1.45 var(--wr-serif); color: var(--wr-ink3); }
.dx-co-f { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dx-co-go { font: 800 13px/1 var(--wr-sans); color: var(--wr-green); white-space: nowrap; }
.dx-logo { flex: 0 0 52px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--wd-page-l); border: 1px solid var(--wr-rule); padding: 7px; }
.dx-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dx-logo--l { flex-basis: 84px; width: 84px; height: 84px; padding: 12px; }
.dx-logo--none { background: var(--wr-panel); border: 1px dashed var(--wr-sep); font: 800 17px/1 var(--wr-serif); color: var(--wr-faint); }
.dx-logo--l.dx-logo--none { font-size: 30px; }
.dx-logo--w {
  --lw: 120px;      /* the tile's width, set on the tile by the page from the mark's proportions (logos.wide_tile) */
  flex-basis: var(--lw); width: var(--lw); height: 48px; padding: 6px 10px;
}      /* 0.53.5: a wordmark's tile, about 120 x 48: the mark fitted by its width and held by the height */
.dx-logo--w img { width: 100%; height: 100%; }
.dx-logo--l.dx-logo--w { flex-basis: calc(var(--lw) * 1.5); width: calc(var(--lw) * 1.5); height: 72px; padding: 9px 15px; }
.dx-co-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 22px; padding-bottom: 32px; border-bottom: 1px solid var(--wr-ink); }
.dx-co-head-a { grid-column: span 8; min-width: 0; }
.dx-co-head-b { grid-column: span 4; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-content: end; }
.dx-co-id { display: flex; align-items: center; gap: 20px; }
.dx-h1--co { margin-top: 8px; }
.dx-lede--co { margin-top: 14px; }
.dx-note--co { margin: 10px 0 0; }
.dx .dx-link-g { color: var(--wr-green); }
.dx .dx-b { font-weight: 700; }
.dx-note--co a { font-weight: 700; }
.dx-act { display: flex; gap: 8px; margin-top: 18px; }
.dx-chans { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dx-chan { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--wr-rule); background: var(--wr-page); font: 700 14px/1 var(--wr-sans); color: var(--wr-ink); }
.dx-chan svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a.dx-chan, a.dx-chan:hover { color: var(--wr-ink); text-decoration: none; }
a.dx-chan:hover { border-color: var(--wr-ink); }
.dx-big--s { font-size: 26px; }
.dx-co-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 36px; padding-top: 32px; }
.dx-co-main { grid-column: span 8; min-width: 0; }
.dx-co-side { grid-column: span 4; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.dx-cf { margin-top: 38px; }
.dx-co-main > section:first-child { margin-top: 0; }
.dx-fr { padding: 16px 0; border-top: 1px solid var(--wr-hair); }
.dx-fr > p:first-child { margin: 0; font: 400 18px/1.5 var(--wr-serif); }
.dx-fr q { display: block; margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--wr-accent); font: italic 400 15px/1.5 var(--wr-serif); color: var(--wr-mute); quotes: none; }
.dx-fr .dx-note { margin: 8px 0 0; }
.dx-fr .su-says { font: 700 12px/1 var(--wr-sans); color: var(--wr-mute); }
.dx-cf .dx-moreD { margin-top: 12px; }
.dx-st--d { grid-template-columns: 110px minmax(0, 1fr); }
.dx-st--d a { display: block; margin-top: 4px; }
.dx-box { border: 1px solid var(--wr-rule); background: var(--wr-page); }
.dx-box-h { padding: 12px 16px; background: var(--wr-panel); border-bottom: 1px solid var(--wr-rule); }
.dx-fact { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; padding: 10px 16px; border-top: 1px solid var(--wr-hair); }
.dx-box-h + .dx-fact { border-top: 0; }
.dx-fact-k { font: 700 12px/1.5 var(--wr-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--wr-mute); }
.dx-fact-v { font: 500 15px/1.45 var(--wr-sans); color: var(--wr-ink); }
.dx-box a.dx-fact-link { color: var(--wr-green); font-weight: 700; }
.dx-box a.dx-fact-src { color: var(--wr-green); font-weight: 700; }
.dx-box-n { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--wr-hair); }
.dx-lrow { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--wr-hair); font: 600 16px/1.3 var(--wr-serif); }
.dx-lrow--c { padding: 11px 0; }
.dx-nowrap { white-space: nowrap; }
.dx-num-t { table-layout: fixed; }
.dx-company .dx-mn { line-height: 1.35; }       /* B:Company: the name inherits the table's 1.35, 21.6 on a 16px face */
.dx-co-id { line-height: normal; }
.dx-co-side section > .dx-sec { margin-bottom: 0; }
/* ---- the terms: the navigator, the map, the cloud and one term (B:TermsMap, B:TermsCloud, B:Term) */
.k-company {
  --kc: var(--dx-kind-company);
}.k-product {
  --kc: var(--dx-kind-product);
}.k-idea {
  --kc: var(--dx-kind-idea);
}.k-person {
  --kc: var(--dx-kind-person);
}
.dx-head--t { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px; padding-bottom: 24px; }
.dx-head--t .dx-lede { margin-top: 12px; max-width: 760px; }
.dx-tablist { display: inline-flex; border: 1px solid var(--wr-ink); }
.dx-tablist a { padding: 0 16px; height: 38px; display: inline-flex; align-items: center; font: 700 14px/1 var(--wr-sans); color: var(--wr-mute); border-left: 1px solid var(--wr-rule); }
.dx-tablist a:first-child { border-left: 0; }
.dx-tablist a[aria-selected="true"] { background: var(--wr-sel-bg); color: var(--wr-sel-fg); font-weight: 800; }
.dx .dx-tablist a[aria-selected="true"]:hover { color: var(--wr-sel-fg); }
.dx-map-g { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 24px; align-items: start; }
.dx-map-l { min-width: 0; }
.dx-svg { display: block; width: 100%; height: auto; background: var(--dx-map-bg); border: 1px solid var(--wr-pop); overflow: hidden; }
.dx-park { fill: none; stroke: var(--wr-sep); stroke-dasharray: 4 4; }
.dx-park-t { font: 700 12px var(--wr-sans); fill: var(--wr-faint); }
.dx-mapg { transition: transform .35s ease; }
.dx-edge { stroke: var(--dx-edge); stroke-width: 1.4; }
.dx-edge.is-dash { stroke: var(--dx-edge-dash); stroke-width: 2; stroke-dasharray: 6 5; }
.dx-edge.is-both { stroke-width: 1.4; }
.dx-edge.is-on { stroke: var(--wr-green); stroke-width: 2.6; }
.dx-edge.is-dash.is-on { stroke: var(--dx-edge-dash); stroke-width: 2.6; }
.dx-node { outline: none; cursor: pointer; transition: opacity .25s ease; }
.dx-node-c { fill: var(--kc); stroke: var(--wr-page); stroke-width: 2; }
.dx-node-r { fill: none; stroke: var(--wr-accent); stroke-width: 3; opacity: 0; }
.dx-node.is-sel .dx-node-r { opacity: 1; }
.dx-node:focus-visible .dx-node-r { opacity: 1; stroke: var(--bn-focus-ring); }
.dx-node-t { font: 700 13px var(--wr-sans); fill: var(--wr-ink); paint-order: stroke; stroke: var(--dx-map-bg); stroke-width: 4px; }
.dx-node.is-sel .dx-node-t { font-weight: 800; font-size: 15px; }
.dx-svg.has-sel .dx-node:not(.is-sel):not(.is-near) .dx-node-c { opacity: .38; }
.dx-svg.has-sel .dx-node:not(.is-sel):not(.is-near) .dx-node-t { opacity: .72; }
.dx-keys { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 12px; }
.dx-ky { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1 var(--wr-sans); color: var(--wr-ink); }
.dx-ky i { width: 12px; height: 12px; border-radius: 50%; background: var(--kc); display: inline-block; }
.dx-ky .dx-ky-l { width: 26px; height: 0; border-radius: 0; background: none; border-top: 2px solid var(--dx-edge); }
.dx-ky .dx-ky-d { width: 26px; height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--dx-edge-dash); }
.dx-map-r { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.dx-sel-c { line-height: normal; border-top: 4px solid var(--wr-accent); background: var(--wr-page); border-left: 1px solid var(--wr-pop); border-right: 1px solid var(--wr-pop); border-bottom: 1px solid var(--wr-pop); padding: 18px 20px; }
.dx-sel-h { margin: 8px 0 8px; font: 800 28px/1.1 var(--wr-serif); color: var(--wr-ink); letter-spacing: 0; }       /* 0.53.1 (F-T3): notis.css's h2 gave it #2A241C and -0.28px */
.dx-sf--s { font-size: 15px; }
.dx-note--m { margin: 10px 0 0; }
.dx-pill--m { margin-top: 14px; }
.dx-sec--s { padding-bottom: 10px; border-bottom: 2px solid var(--wr-ink); }
.dx-sec--b { margin-bottom: 8px; }
.dx-bone--s .dx-sec { margin-bottom: 10px; }
.dx-bone--s .dx-sec--b { margin-bottom: 8px; }
.dx-rel { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--wr-hair); font: 600 16px/1.3 var(--wr-serif); }
.dx-kk { font: 700 11px/1.6 var(--wr-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--kc, var(--wr-mute)); }
.dx-cloud { background: var(--dx-map-bg); border: 1px solid var(--wr-pop); padding: 40px 48px; }
.dx-cloud-i { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 4px; max-width: 980px; margin: 0 auto; }
.dx-w { padding: 4px 10px; font: 700 18px/1.1 var(--wr-serif); color: var(--kc); }
.dx a.dx-w { color: var(--kc); }
.dx a.dx-w:hover { text-decoration: underline; }
.dx-w sup { font: 700 11px/1 var(--wr-sans); color: var(--wr-faint); margin-left: 3px; }
.dx-w.is-b { font-weight: 800; }
.dx-kinds {
  --n: 3;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 24px;
}
.dx-kinds section { border-top: 4px solid var(--kc); padding-top: 12px; }
.dx-sec--k { color: var(--kc); margin-bottom: 8px; }
.dx-kr { display: grid; grid-template-columns: minmax(0, 1fr) 90px 26px; column-gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--wr-hair); font: 600 16px/1.3 var(--wr-serif); }
.dx-kb { height: 6px; background: var(--wr-hair); }
.dx-kb span { display: block; height: 100%; background: var(--kc); }
.dx-kr .dx-note { text-align: right; }
.dx-newest .dx-sech { margin-bottom: 4px; }
.dx-sech--kc { margin-top: 40px; }
.dx-tm-a { line-height: normal; }
.dx-nr { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--wr-hair); }
.dx-nr b { font: 700 18px/1.3 var(--wr-serif); display: block; }
.dx-sf--r { display: block; margin-top: 4px; font-size: 15px; }
.dx-az-n { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.dx-az-n a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border: 1px solid var(--wr-rule); font: 800 13px/1 var(--wr-sans); }
.dx-az-s { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 24px; padding: 18px 0; border-top: 2px solid var(--wr-ink); }
.dx-az-l { margin: 0; font: 800 40px/1 var(--wr-serif); color: var(--wr-green); }
.dx-az-r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 36px; }
.dx-ar { display: block; padding: 10px 0; border-bottom: 1px solid var(--wr-hair); }
.dx-ar-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.dx-ar b { font: 700 18px/1.3 var(--wr-serif); }
/* one term */
.dx-tm-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 30px; }
.dx-tm-a { grid-column: span 8; min-width: 0; }
.dx-tm-s { grid-column: 10 / span 3; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.dx-h1--t { margin-top: 10px; }
.dx-lede--t { margin-top: 16px; font-size: 23px; color: var(--wr-body); }
.dx-body { margin-top: 22px; }
.dx-body p { margin: 0 0 16px; font: 400 19px/1.6 var(--wr-serif); color: var(--wr-body); }
.dx-card--src { margin-top: 26px; }
.dx-card--src .dx-sec { margin-bottom: 12px; }
.dx-srow { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--wr-hair); font: 600 17px/1.3 var(--wr-serif); }
.dx-sech--t { margin-top: 34px; margin-bottom: 18px; }
.dx-trow { display: grid; grid-template-columns: 110px minmax(0, 1fr) 0; column-gap: 16px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--wr-hair); }
.dx-trow a { display: block; margin-top: 5px; font: 600 18px/1.3 var(--wr-serif); }
.dx-note--d { font-weight: 600; line-height: 1.3; }
.dx-k--s { font-size: 11px; }
.dx-browse { background: var(--dx-dark-panel); color: var(--wd-ink-d); padding: 16px 18px; }
.dx-browse .dx-sec { color: var(--wr-accent); margin-bottom: 10px; }
.dx .dx-browse a { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--dx-on-dark-rule); color: var(--wd-page-l); font: 700 15px/1.2 var(--wr-sans); }
.dx .dx-browse a:hover { color: var(--wr-accent); }
.dx-browse a span:last-child { color: var(--dx-on-dark-mute); }
/* ---- People, one person, Startup of the week (B:Person, B:Startup) */
.dx-pg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 26px; }
.dx-pg-a { grid-column: span 4; min-width: 0; }
.dx-pg-b { grid-column: span 8; min-width: 0; }
.dx-h1--48 { font-size: 48px; }
.dx-h1--40 { font-size: 40px; line-height: 1.05; margin: 8px 0 6px; letter-spacing: 0; }
.dx-lede--19 { margin-top: 12px; font-size: 19px; }
.dx-bone--n { margin-top: 22px; }
.dx-none { margin: 0; font: 700 18px/1.3 var(--wr-serif); }
.dx-bone--n .dx-sf { margin-top: 8px; }
.dx-ul { margin: 18px 0 0; padding: 0 0 0 18px; font: 400 16px/1.5 var(--wr-serif); color: var(--wr-ink3); }
.dx-pp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.dx-pc { display: flex; flex-direction: column; gap: 6px; }
.dx a.dx-pc:hover { border-color: var(--wr-ink); color: inherit; }
.dx-co-name--p { font: 800 25px/1.1 var(--wr-serif); }
.dx-su { display: flex; flex-direction: column; gap: 8px; padding: 18px 0; border-top: 1px solid var(--wr-hair); }
.dx-su:first-child { border-top: 0; padding-top: 0; }
.dx-su b { font: 700 22px/1.2 var(--wr-serif); }
.dx-pr-h { padding-bottom: 22px; border-bottom: 1px solid var(--wr-rule); }
.dx-pr-r { margin: 0; font: 600 17px/1.4 var(--wr-sans); color: var(--wr-ink3); }
.dx-pr-n { margin: 14px 0 0; padding: 10px 12px; background: var(--wr-panel); font: 500 14px/1.45 var(--wr-sans); color: var(--wr-ink3); }
.dx-pr-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; padding-top: 22px; }
.dx-sec--m { margin-bottom: 12px; }
.dx-sec--g { margin-top: 22px; }
.dx-qt q { display: block; padding-left: 12px; border-left: 2px solid var(--wr-accent); font: italic 400 17px/1.5 var(--wr-serif); color: var(--wr-ink2); quotes: none; }
.dx-qt { margin-bottom: 18px; }
.dx-qt .dx-note { margin: 8px 0 0; }
/* the Friday page's head on the story page (0.53.1, board Startup): logo | eyebrow, the company's name, one sentence, Visit and Try it, channels | the Facts box.
   The story's own headline and standfirst are what the sentence says, so they and the page's "how we pick" line give way to the head the board draws. */
.nt-head:has(.dx-sub) .su-company, .nt-head:has(.dx-sub) .su-how, .nt-head:has(.dx-sub) .nt-stand { display: none; }
.nt-head:has(.dx-sub) .nt-h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }       /* still the page's h1, for a screen reader */
.nt-head > .dx-sub { --wr-sel-bg: var(--wr-ink); --wr-sel-fg: var(--wr-page); display: grid; grid-template-columns: 96px minmax(0, 1fr) 260px; column-gap: 22px; align-items: start; margin: 22px 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--wr-rule); max-width: 100%; line-height: normal; }
.nt-head > .dx-sub *, .nt-head > .dx-sub *::before, .nt-head > .dx-sub *::after { box-sizing: border-box; }
.dx-logo--m { flex-basis: 98px; width: 98px; height: 98px; padding: 12px; }   /* 0.53.2 (F5): the board's box is 96 + its 1 px border each side = 98; the grid column stays 96 as the board's */
/* 0.53.2 (R3, Mayor): the Friday page draws the board's head and nothing above it: no breadcrumb row, no case chip */
.nt-head:has(> .dx-sub) > .wr-crumb, .nt-head:has(> .dx-sub) > .wr-case-d { display: none; }
.dx-logo-credit { margin: 8px 0 0; }
span.dx-logo-credit { display: block; margin-top: 4px; }   /* 0.53.2 (R2): "Source: Google" in the board's small credit style (.dx-note: 13/500 mute) */
.dx-sub-b { min-width: 0; }
.dx-sub-h { margin: 8px 0 8px; font: 800 44px/1.04 var(--wr-serif); letter-spacing: 0; color: var(--wr-ink); }
.dx-sub-d { margin: 0; font-size: 19px; max-width: none; }
.dx-sub-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dx-sub-b .dx-chans { margin-top: 10px; }
.dx-sub-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--wr-rule); background: var(--wr-page); color: var(--wr-ink); font: 700 14px/1 var(--wr-sans); }
.dx-sub-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nt-head .dx-sub-btn--v, .nt-head a.dx-sub-btn--v { background: var(--wr-sel-bg); border-color: var(--wr-sel-bg); color: var(--wr-sel-fg); }
.nt-head a.dx-sub-btn--v:hover { color: var(--wr-sel-fg); }
.nt-head .dx-sub .dx-box { grid-column: 3; grid-row: 1; }
/* ---- the register's footer (0.53.1): the boards draw one row with a rule over it; the shell's four columns are the front page's and the story's.
   Its classes are wr-reg-*: the phone's page carries this markup, hidden, and no `dx-` class is allowed outside the desktop's own main. */
.dx-page { padding-bottom: 0; }
.wr-reg-foot { display: block; font-family: var(--wr-sans); color: var(--wr-mute); background: var(--wr-page); }
.wr-reg-foot *, .wr-reg-foot *::before, .wr-reg-foot *::after { box-sizing: border-box; }
.wr-reg-foot .wr-in { box-sizing: content-box; padding-bottom: 56px; }
.wr-reg-foot-r { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding: 24px 0 8px; border-top: 1px solid var(--wr-ink); font: 500 14px/1.5 var(--wr-sans); color: var(--wr-mute); }
.wr-reg-foot-r p { margin: 0; max-width: none; }
.wr-reg-foot-r strong { color: var(--wr-ink); font-weight: 700; }
.wr-reg-foot a { color: var(--wr-ink); text-decoration: none; }
.wr-reg-foot a:hover { color: var(--wr-green); }
.wr-reg-foot :focus-visible { outline: 2px solid var(--bn-focus-ring); outline-offset: 2px; }
.dx-explore ~ .wr-reg-foot .wr-in { padding-bottom: 0; }
.dx-explore ~ .wr-reg-foot .wr-reg-foot-r { margin-top: 0; padding-bottom: 48px; }
/* >>> deploy 3 (0.54.0) */
/* ============================================================ deploy 3: the rest of the site (0.54.0; Status t-130; Karl, 8 Oct 2026: "it all looks amazing").
   Boards Cases, Case, Week, Archive, Search, Topic, Section, MeYou, MeFollowing, SignIn, About, Corrections, Newsletter, NotFound ("B:<Board>:<line>").
   Colour is a token (notis-theme.css, `--wd-*`; the boards' section colours are the site's `--beat`), nothing here names one. The pages put their desktop markup in
   `<main class="dx ..." id="dx-main" hidden>` before the phone's own main, as deploy 2 does, and the phone is not touched. */

/* ---- the header's Search button (B:Search:60-61) */
.wr-search { gap: 7px; }
/* 0.54.3 (the Mayor): and it stays on Explore and the Grid; switching Front and Grid makes no header button appear or disappear */

/* ---- shared: a section's kicker, a search mark, a reaction summary, a read count */
.dx-bk { display: inline-flex; align-items: center; gap: 6px; font: 800 11px/1 var(--wr-sans); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--beat, var(--wr-mute)) 62%, var(--wr-ink)); }
.dx-bk i { width: 8px; height: 8px; border-radius: 2px; background: var(--beat, var(--wr-mute)); flex: none; }
.dx-bk[data-beat="tooling"], .dx-bk[data-beat="models"], .dx-bk[data-beat="laws"] { color: var(--beat); }      /* the board's own colours where they pass 4.5 : 1 on white, as deploy 2's topic kickers */
@supports (color: light-dark(white, black)) {
  .dx-bk[data-beat="tooling"], .dx-bk[data-beat="models"], .dx-bk[data-beat="laws"] { color: light-dark(var(--beat), color-mix(in srgb, var(--beat) 62%, var(--wr-ink))); }
}
.dx-mk { background: var(--wr-chk); color: inherit; padding: 0 1px; }
.dx-green, .dx a.dx-green { color: var(--wr-green); font-weight: 700; }
.dx-rx { display: inline-flex; align-items: center; gap: 6px; }
.dx-rx-s { display: inline-flex; }
.dx-rx-s img { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--wr-page); box-shadow: 0 0 0 2px var(--wr-page); }
.dx-rx-s img + img { margin-left: -6px; }
.dx-rx b { font: 700 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
.dx-m { font: 500 13px/1.3 var(--wr-sans); color: var(--wr-mute); white-space: nowrap; }
.dx-eye { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font: 500 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
.dx-eye svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dx-mostread { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; background: var(--wr-head); color: var(--wd-page-l); font: 800 11px/1 var(--wr-sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.dx-mostread svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Search, B:Search */
.dx-searchpg .dx-page { padding-top: 34px; padding-bottom: 0; }
.dx-sform { display: flex; margin: 0 0 18px; }
.dx-sform input { flex: 1; min-width: 0; height: 60px; padding: 0 16px; border: 1px solid var(--wr-ink); border-right: 0; border-radius: 0; background: var(--wr-page); color: var(--wr-ink); font: 400 22px/1 var(--wr-sans); }
.dx-sform input::placeholder { color: var(--wr-cap); opacity: 1; }
.dx-sform button { height: 60px; padding: 0 22px; border: 0; border-radius: 0; background: var(--wr-sel-bg); color: var(--wr-sel-fg); font: 800 16px/1 var(--wr-sans); cursor: pointer; }
.dx-stabs { margin-bottom: 28px; }
.dx-sgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
.dx-sa { grid-column: span 8; min-width: 0; }
.dx-sb { grid-column: span 4; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.dx-sbest { line-height: normal; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; border-color: var(--wr-ink); }
.dx-sbest-t { width: 64px; height: 64px; background: var(--wr-head); color: var(--wr-accent); display: flex; align-items: center; justify-content: center; font: 900 30px/1 var(--wr-serif); }
.dx-sbest-n { display: block; margin-top: 6px; font: 800 28px/1.1 var(--wr-serif); }
.dx-sbest-d { display: block; margin-top: 8px; font: 400 17px/1.5 var(--wr-serif); color: var(--wr-ink3); }
.dx-sbest-m { display: block; margin-top: 8px; }
.dx-sech--stories { margin-top: 32px; }
.dx-sbest + .dx-sech--stories { margin-top: 32px; }
.dx-sa > .dx-sech--stories:first-child { margin-top: 0; }
.dx-hit { display: grid; grid-template-columns: 90px minmax(0, 1fr) 150px; column-gap: 16px; align-items: baseline; line-height: normal; padding: 13px 0; border-top: 1px solid var(--wr-hair); }
.dx-sd { font: 600 13px/1.3 var(--wr-sans); color: var(--wr-mute); }
.dx-sm { display: block; min-width: 0; }
.dx-st-t { display: block; margin-top: 6px; font: 600 18px/1.3 var(--wr-serif); color: var(--wr-ink); }
.dx a.dx-st-t:hover { color: var(--wr-green); }
.dx-sx { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dx-snote { margin: 10px 0 0; }
.dx-searchpg .dx-moreD > summary.dx-pill { margin-top: 16px; }
.dx-searchpg .dx-moreD { margin-top: 0; }
.dx-searchpg .dx-moreD[open] > .dx-hits { margin-top: 0; }
.dx-sl a { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--wr-hair); font: 600 16px/1.3 var(--wr-serif); color: var(--wr-ink); }
.dx a.dx-sl-a:hover, .dx-sl a:hover { color: var(--wr-green); }
.dx-sl a .dx-note { flex: none; }
.dx-sb .dx-sec--rule + .dx-sl { margin-top: 0; }
.dx-sec--b2 { margin-bottom: 12px; }
.dx-sfact { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--wr-hair); font: 500 14px/1.35 var(--wr-sans); color: var(--wr-ink); }
.dx-sfact b { font: 800 17px/1.2 var(--wr-sans); white-space: nowrap; }
.dx-sfact .dx-note { display: block; font-size: 12px; }
.dx-sfact--b { padding: 9px 0; border-top: 1px solid var(--wr-rule); }
.dx-sfacts-all, .dx a.dx-sfacts-all { display: block; margin-top: 10px; font: 800 13px/1 var(--wr-sans); color: var(--wr-green); }
.dx-snone { margin-top: 8px; font-size: 16px; }
@media (max-width: 1100px) {
  .dx-sa, .dx-sb { grid-column: 1 / -1; }
  .dx-hit { grid-template-columns: 70px minmax(0, 1fr) 120px; }
}

/* ---- Cases, B:Cases */
.dx-chead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; padding-bottom: 24px; }
.dx-chead-t { grid-column: span 7; }
.dx-chead-t .dx-lede { margin-top: 12px; }
.dx-cstats { grid-column: span 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--wr-ink); }
.dx-cstats > div { padding: 14px 14px 0; border-left: 1px solid var(--wr-rule); }
.dx-cstats > div:first-child { padding-left: 0; border-left: 0; }
.dx-cstats > div:last-child { padding-right: 0; }
.dx-big--g { color: var(--wr-green); }
.dx-lws { padding: 22px 24px 18px; }
.dx-lws .dx-sech { margin-bottom: 8px; }
.dx-lw-ax, .dx-lw { display: grid; grid-template-columns: 260px minmax(0, 1fr) 70px; column-gap: 20px; align-items: center; }
.dx-lw-ax { height: 26px; }
.dx-lw-t { position: relative; height: 12px; }
.dx-lw-tk { position: absolute; transform: translateX(-50%); white-space: nowrap; font: 600 11px/1 var(--wr-sans); color: var(--wr-faint); }
.dx-lw-tk.is-now { color: var(--wr-ink); }
.dx-lw { height: 45px; border-top: 1px solid var(--wr-hair); }
.dx a.dx-lw:hover .dx-lw-n { color: var(--wr-green); }
.dx-lw-n { font: 700 16px/1.2 var(--wr-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--wr-ink); }
.dx-lw-tr { position: relative; height: 100%; }
.dx-lw-ln { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--wr-rule); }
.dx-lw-d { position: absolute; top: 50%; border-radius: 50%; background: var(--wr-ink); box-shadow: 0 0 0 2px var(--wr-page); transform: translate(-50%, -50%); }
.dx-lw-d--1 { width: 10px; height: 10px; }
.dx-lw-d--2 { width: 15px; height: 15px; }
.dx-lw-d--3 { width: 20px; height: 20px; }
.dx-lw-d.is-today { background: var(--wr-accent); }
.dx-lw-s { font: 700 12px/1 var(--wr-sans); color: var(--wr-faint); text-align: right; }
.dx-lw-s.is-moved { color: var(--wr-green); }
.dx-csec { padding-top: 34px; }
.dx-mg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 24px; }
.dx-mc { min-width: 0; }
.dx-mc--l { grid-column: span 6; }
.dx-mc--s { grid-column: span 4; }
.dx-mcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--wr-ink); }
.dx-mpic { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--wr-media); }
.dx-mpic--logo { display: flex; align-items: center; justify-content: center; background: var(--wd-page-l); border: 1px solid var(--wr-rule); }
.dx-mpic--logo img { max-width: 46%; max-height: 34%; object-fit: contain; }
.dx-mpic--file { display: flex; align-items: flex-end; background: var(--wr-head); padding: 18px; }
.dx-mpic--file .dx-k { color: var(--wr-accent); }
.dx-mmeta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dx-mname { font: 800 20px/1.15 var(--wr-serif); }
.dx-mc--l .dx-mname { font-size: 24px; }
.dx-mline { font: 400 15px/1.4 var(--wr-serif); color: var(--wr-ink3); }
.dx-mline b { font: 800 11px/1 var(--wr-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--wr-green); }
.dx a.dx-mcard:hover .dx-mname { color: var(--wr-green); }
.dx-qrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 120px; column-gap: 20px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--wr-hair); }
.dx-qn { font: 700 18px/1.25 var(--wr-serif); color: var(--wr-ink); }
.dx-qh { font: 400 15px/1.4 var(--wr-serif); color: var(--wr-ink3); }
.dx-qm { text-align: right; }
.dx a.dx-qrow:hover .dx-qn { color: var(--wr-green); }
.dx-cnone { padding-top: 12px; }
@media (max-width: 1100px) {
  .dx-chead-t, .dx-cstats { grid-column: 1 / -1; }
  .dx-cstats { margin-top: 18px; }
  .dx-lw-ax, .dx-lw { grid-template-columns: 180px minmax(0, 1fr) 70px; }
  .dx-mc--l, .dx-mc--s { grid-column: span 6; }
  .dx-qrow { grid-template-columns: minmax(0, 1fr) 120px; }
  .dx-qh { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- the colour of a day with no edition in the week's bars (B:Week:62), a pair read from notis-theme.css */
:root {
  --dx-bar-off: var(--wd-bar-off-l);
}
@supports (color: light-dark(white, black)) {
  :root {
    --dx-bar-off: light-dark(var(--wd-bar-off-l), var(--wd-bar-off-d));
  }
}

/* ---- shared: the navy "most read" strip (B:Week:86-137, B:Archive) */
.dx-navy { background: var(--dx-dark-panel); color: var(--bn-night-50); padding: 22px 26px 24px; margin-bottom: 8px; }
.dx-navy--ar { margin: 30px 0 0; }
.dx-navy-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.dx-navy--ar .dx-navy-h { margin-bottom: 14px; }
.dx-navy-h .dx-sec { color: var(--wr-accent); }
.dx-navy-h > span { font: 500 13px/1 var(--wr-sans); color: var(--dx-on-dark-mute); }
.dx-navy-g { display: grid; gap: 20px; }
.dx-navy-g--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dx-navy-g--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.dx a.dx-navy-i { display: flex; flex-direction: column; gap: 8px; color: var(--bn-night-50); min-width: 0; }
.dx a.dx-navy-i:hover { color: var(--wr-accent); }
.dx-navy-m { display: flex; align-items: baseline; gap: 10px; }
.dx-navy-n { font: 900 34px/1 var(--wr-serif); color: var(--wr-accent); }
.dx-navy--ar .dx-navy-n { font-size: 30px; }
.dx-navy-w { font: 700 12px/1 var(--wr-sans); color: var(--dx-on-dark-mute); }
.dx-navy-bar { display: block; height: 4px; background: var(--dx-on-dark-rule); }
.dx-navy-bar span { display: block; height: 100%; background: var(--wr-accent); }
.dx-navy-t { font: 700 17px/1.3 var(--wr-serif); }
.dx-navy--ar .dx-navy-t { font-size: 16px; }

/* ---- Week, B:Week */
.dx-wvin { padding-bottom: 56px; }
.dx-wvstrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 12px 0; border-bottom: 1px solid var(--wr-rule); }
.dx-wvstrip-l { display: flex; align-items: center; gap: 10px; }
.dx-pill--i { width: 36px; padding: 0; justify-content: center; }
.dx-pill.is-off { color: var(--wr-later); cursor: default; }
.dx-seg2 { display: inline-flex; border: 1px solid var(--wr-rule); }
.dx-seg2 a, .dx-seg2 span { padding: 0 12px; height: 30px; display: inline-flex; align-items: center; font: 700 13px/1 var(--wr-sans); color: var(--wr-mute); }
.dx-seg2 .is { background: var(--wr-sel-bg); color: var(--wr-sel-fg); }
.dx-wvhead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; padding: 32px 0 24px; }
.dx-wvhead-t { grid-column: span 7; }
.dx-wvhead-t .dx-h1 { margin-top: 10px; }
.dx-wvhead-t .dx-lede { margin-top: 10px; }
.dx-wvbars { grid-column: span 5; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dx-wvbar { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dx-wvbar-b { display: flex; align-items: flex-end; height: 92px; }
.dx-wvbar-b span { display: block; width: 30px; background: var(--wr-accent); }
.dx-wvbar-b span.is-now { background: var(--wr-ink); }
.dx-wvbar.is-off .dx-wvbar-b span { background: var(--dx-bar-off); }
.dx-wvbar-l { font: 700 13px/1 var(--wr-sans); color: var(--wr-ink); }
.dx-wvbar.is-off .dx-wvbar-l { color: var(--wr-later); }
.dx-wvbar .dx-note { font-size: 12px; }
.dx-wvday { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 26px 0 30px; border-top: 2px solid var(--wr-ink); }
.dx-wvday-a { grid-column: span 4; min-width: 0; }
.dx-wvday-a h2 { margin: 0; font: 800 26px/1.15 var(--wr-serif); letter-spacing: 0; color: var(--wr-ink); }
.dx-wvday-a p { margin: 10px 0 0; font: italic 400 17px/1.5 var(--wr-serif); color: var(--wr-ink3); }
.dx .dx-wvday-a a.dx-green { display: inline-block; margin-top: 12px; font: 800 14px/1 var(--wr-sans); }
.dx-wvday-b { grid-column: span 8; min-width: 0; }
.dx-wvrow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px 88px; column-gap: 16px; align-items: center; padding: 13px 0; border-top: 1px solid var(--wr-hair); }
.dx-wvrow.is-top { background: var(--wr-fact); margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.dx-wvrow-t { font: 600 18px/1.3 var(--wr-serif); color: var(--wr-ink); }
.dx-wvrow.is-top .dx-wvrow-t { font-weight: 800; }
.dx a.dx-wvrow-t:hover { color: var(--wr-green); }
.dx-wvrow-r { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.dx-wvrow-p { display: block; width: 88px; height: 56px; object-fit: cover; background: var(--wr-media); }

/* ---- Archive, B:Archive */
.dx-arhead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; padding-bottom: 30px; border-bottom: 1px solid var(--wr-ink); }
.dx-arhead-a, .dx-arhead-m { grid-column: span 4; min-width: 0; }
.dx-arhead-a .dx-lede { margin-top: 12px; }
.dx-arsearch { display: flex; margin: 20px 0 0; }
.dx-arsearch input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid var(--wr-ink); border-right: 0; border-radius: 0; background: var(--wr-page); color: var(--wr-ink); font: 400 17px/1 var(--wr-sans); }
.dx-arsearch input::placeholder { color: var(--wr-cap); opacity: 1; }
.dx-arsearch button { height: 48px; padding: 0 22px; border: 0; border-radius: 0; background: var(--wr-sel-bg); color: var(--wr-sel-fg); font: 800 16px/1 var(--wr-sans); cursor: pointer; }
.dx-cal { padding: 16px 18px; }
.dx-cal-h { margin: 0 0 8px; font: 800 15px/1 var(--wr-sans); text-align: center; }
.dx-cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.dx-cal-w { font: 700 11px/1 var(--wr-sans); color: var(--wr-faint); text-align: center; padding: 6px 0; }
.dx-cal-d { height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 13px/1 var(--wr-sans); color: var(--wr-ink); }
.dx-cal-d.is-off { font-weight: 600; color: var(--wr-off); }
.dx-cal-d i { width: 4px; height: 4px; border-radius: 50%; background: var(--wr-accent); margin-top: 3px; }
.dx-cal-d.is-now { border-radius: 50%; background: var(--wr-sel-bg); color: var(--wr-sel-fg); }
.dx a.dx-cal-d.is-now:hover { color: var(--wr-sel-fg); }
.dx a.dx-cal-d:hover { color: var(--wr-green); }
.dx-arlist { padding-top: 26px; }
.dx-ared { display: grid; grid-template-columns: 70px 50px minmax(0, 1fr) 90px; column-gap: 18px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--wr-hair); }
.dx-ared-d { font: 800 17px/1 var(--wr-sans); color: var(--wr-ink); }
.dx-ared-m { min-width: 0; }
.dx-ared-o { display: block; font: 400 17px/1.5 var(--wr-serif); color: var(--wr-body); }
.dx-ared--t .dx-ared-o { display: inline; }
.dx-ared-b { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 7px 12px 7px 9px; background: var(--wr-fact); border-left: 3px solid var(--wr-accent); }
.dx-ared-bt { font: 700 15px/1.3 var(--wr-serif); color: var(--wr-ink); }
.dx a.dx-ared-b:hover .dx-ared-bt { color: var(--wr-green); }
.dx a.dx-ared-go { font: 800 13px/1 var(--wr-sans); color: var(--wr-green); text-align: right; }
.dx-arlist .dx-moreD { margin-top: 0; }
.dx-arlist .dx-moreD > summary.dx-pill { margin-top: 16px; }
.dx ~ .page { display: none !important; }
.dx ~ .page ~ .foot { display: none; }
@media (max-width: 1100px) {
  .dx-wvhead-t, .dx-wvbars, .dx-wvday-a, .dx-wvday-b, .dx-arhead-a { grid-column: 1 / -1; }
  .dx-wvbars { margin-top: 24px; max-width: 460px; }
  .dx-wvrow { grid-template-columns: 120px minmax(0, 1fr) 110px 72px; }
  .dx-navy-g--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-navy-g--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dx-arhead-m { grid-column: span 6; }
}

/* ---- Section and Topic, B:Section and B:Topic. The band is the section's colour (--beat, the site's own) mixed into the page's, so the dark theme follows it with nothing repeated */
.dx-bk--l { font-size: 12px; }
/* 0.54.1 (parity round 1, F17): on the section's tinted band the kicker is a little darker than on white, so the topic's "Agents and apps" passes 4.5 : 1 */
.dx-secband .dx-bk { color: color-mix(in srgb, var(--beat, var(--wr-mute)) 52%, var(--wr-ink)); }
.dx-secnav { border-bottom: 1px solid var(--wr-rule); }
.dx-secnav-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.dx-sectab { display: inline-flex; align-items: center; gap: 7px; padding: 14px 0; border-bottom: 3px solid transparent; font: 700 15px/1 var(--wr-sans); color: var(--wr-mute); }
.dx-sectab i { width: 8px; height: 8px; border-radius: 2px; background: var(--beat, var(--wr-faint)); flex: none; }
.dx-sectab span { font-weight: 500; color: var(--wr-faint); }
.dx a.dx-sectab { color: var(--wr-mute); }
.dx a.dx-sectab:hover { color: var(--wr-green); }
.dx a.dx-sectab.is, .dx a.dx-sectab.is:hover { color: var(--wr-ink); border-bottom-color: var(--beat, var(--wr-ink)); }
.dx-secsep { width: 1px; height: 22px; background: var(--wr-rule); margin: 0 4px; }
.dx-eu-tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px dashed var(--wr-faint); font: 700 14px/1 var(--wr-sans); color: var(--wr-mute); }
.dx-eu-tab b { font: 800 10px/1 var(--wr-sans); letter-spacing: .08em; color: color-mix(in srgb, var(--dx-kind-person) 70%, var(--wr-ink)); }
.dx-eu-box { border: 1px dashed var(--wr-faint); padding: 16px 18px; }
.dx-eu-box h2 { margin: 0 0 8px; }
.dx-eu-box p { margin: 0; font: 400 15px/1.5 var(--wr-serif); color: var(--wr-ink3); }
.dx-secband { background: color-mix(in srgb, var(--beat, var(--wr-mute)) 8%, var(--wr-page)); border-bottom: 1px solid color-mix(in srgb, var(--beat, var(--wr-mute)) 29%, var(--wr-page)); }
.dx-secband--eu { --beat: var(--wr-mute); }
.dx-secband-in { padding-top: 33px; padding-bottom: 32px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 22px; align-items: end; }
.dx-secband-in--t { padding-top: 35px; padding-bottom: 34px; }
.dx-secband-t { grid-column: span 8; min-width: 0; }
.dx-secband-t--7 { grid-column: span 7; }
.dx-secband-k { margin-left: 10px; }
.dx-secband-t .dx-h1 { margin-top: 9px; }
.dx-secband-t--7 .dx-h1 { margin-top: 11px; }
.dx-secband-t .dx-lede { margin-top: 14px; }
.dx-secstat { grid-column: span 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--wr-page); border: 1px solid color-mix(in srgb, var(--beat, var(--wr-mute)) 29%, var(--wr-page)); }
.dx-secstat > div { padding: 16px 18px; }
.dx-secstat > div + div { border-left: 1px solid var(--wr-hair); }
.dx-secstat > div:only-child { grid-column: 1 / -1; }
.dx-big--b { color: var(--beat, var(--wr-ink)); }
.dx-secbody { padding-bottom: 0; }
.dx-secgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.dx-seca { grid-column: span 8; min-width: 0; }
.dx-secb { grid-column: span 4; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.dx-secrow { display: grid; grid-template-columns: 4px 80px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--wr-hair); }
.dx-secrow-e { align-self: stretch; background: color-mix(in srgb, var(--beat, var(--wr-rule)) 30%, var(--wr-page)); }
.dx-secrow.is-top { background: color-mix(in srgb, var(--beat, var(--wr-mute)) 8%, var(--wr-page)); }
.dx-secrow.is-top .dx-secrow-e { background: var(--beat, var(--wr-ink)); }
.dx-secrow-d { font: 700 13px/1 var(--wr-sans); color: var(--wr-mute); }
.dx-secrow-t { font: 700 18px/1.3 var(--wr-serif); color: var(--wr-ink); }
.dx-secrow.is-top .dx-secrow-t { font-weight: 800; }
.dx a.dx-secrow-t:hover { color: var(--wr-green); }
.dx-secrow-r { display: flex; align-items: center; gap: 12px; }
.dx-secrow-s { min-width: 62px; text-align: right; font: 500 13px/1.45 var(--wr-sans); }
.dx-navy--s, .dx-navy--c { margin: 0; padding: 18px 20px; }
.dx-navy--s .dx-sec, .dx-navy--c .dx-sec { color: var(--wr-accent); margin-bottom: 8px; }
.dx-navy--c .dx-sec { margin-bottom: 10px; }
.dx a.dx-navy-row { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--dx-on-dark-rule); color: var(--bn-night-50); font: 600 16px/1.3 var(--wr-serif); }
.dx a.dx-navy-row:hover, .dx-navy--c a:hover { color: var(--wr-accent); }
.dx-navy-row span:last-child { font: 500 12px/1.6 var(--wr-sans); color: var(--dx-on-dark-mute); }
.dx-navy--c a { color: var(--bn-night-50); font: 700 19px/1.3 var(--wr-serif); }
.dx-navy--c p { margin: 6px 0 0; font: 500 13px/1 var(--wr-sans); color: var(--dx-on-dark-mute); }
.dx-secexp { background: color-mix(in srgb, var(--beat, var(--wr-mute)) 8%, var(--wr-page)); padding: 18px 20px; border-left: 4px solid var(--beat, var(--wr-ink)); }
.dx-secexp .dx-sec { margin-bottom: 10px; }
.dx-secexp a { display: block; font: 700 19px/1.3 var(--wr-serif); color: var(--wr-ink); }
.dx a.dx-secexp-a:hover, .dx-secexp a:hover { color: var(--wr-green); }
.dx-secexp .dx-note { margin: 8px 0 0; }
/* Topic */
.dx-where { grid-column: span 5; min-width: 0; background: var(--wr-page); border: 1px solid color-mix(in srgb, var(--beat, var(--wr-mute)) 30%, var(--wr-page)); padding: 20px 22px; }
.dx-where .dx-k { margin: 0 0 14px; }
.dx-where-s { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dx-where-s li { display: flex; flex-direction: column; gap: 8px; }
.dx-where-b { height: 14px; background: var(--wr-hair); border-radius: 2px; }
.dx-where-s li.is .dx-where-b { background: var(--wr-accent); }
.dx-where-l { font: 600 13px/1.2 var(--wr-sans); color: var(--wr-faint); }
.dx-where-s li.is .dx-where-l { font-weight: 800; color: var(--wr-ink); }
.dx-where-f { margin: 16px 0 0; padding: 10px 12px; background: var(--wr-fact); border-left: 3px solid var(--wr-accent); font: 600 14px/1.4 var(--wr-sans); color: var(--wr-green); }
.dx-where-n { margin: 10px 0 0; }
.dx-seca--t { background: var(--wr-hover); padding: 22px 22px 14px; margin-left: -22px; }
.dx-tcard { line-height: normal; display: grid; grid-template-columns: 6px 90px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; background: var(--wr-page); border: 1px solid var(--wr-pop); padding: 16px 18px 16px 0; margin-bottom: 10px; color: var(--wr-ink); }
.dx-tcard-e { align-self: stretch; background: var(--beat, var(--wr-rule)); }
.dx-tcard-d { font: 700 13px/1 var(--wr-sans); color: var(--wr-mute); }
.dx-tcard-t { display: block; margin-top: 6px; font: 700 19px/1.3 var(--wr-serif); }
.dx-tcard-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dx a.dx-tcard:hover .dx-tcard-t { color: var(--wr-green); }
.dx-sech--h { margin-top: 30px; }
.dx-hist { background: var(--wr-page); border: 1px solid var(--wr-pop); padding: 14px 16px; }
.dx-hist-r { display: grid; grid-template-columns: 90px 24px minmax(0, 1fr); column-gap: 10px; }
.dx-hist-r + .dx-hist-r { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wr-hair); }
.dx-hist-d { font: 700 13px/1.6 var(--wr-sans); color: var(--wr-mute); }
.dx-hist-dot { width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--wr-accent); border: 2px solid var(--wr-page); box-shadow: 0 0 0 1px var(--wr-ink); box-sizing: content-box; }
.dx-hist-t { font: 400 17px/1.5 var(--wr-serif); }
.dx-sl .dx-rstate { flex: none; font: 700 11px/1 var(--wr-sans); color: var(--wr-green); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; align-self: center; }
.dx-sf--s { margin: 0; font-size: 15px; }
@media (max-width: 1100px) {
  .dx-secband-t, .dx-secband-t--7, .dx-secstat, .dx-where, .dx-seca, .dx-secb { grid-column: 1 / -1; }
  .dx-secb { margin-top: 28px; }
  .dx-seca--t { margin-left: 0; }
  .dx-secrow { grid-template-columns: 4px 64px minmax(0, 1fr) auto; }
}

/* ---- Case, B:Case */
.dx-cshead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; padding-bottom: 36px; border-bottom: 1px solid var(--wr-ink); }
.dx-cshead-a { grid-column: span 7; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.dx-cshead-b { grid-column: span 5; min-width: 0; margin: 0; }
.dx-cshead-b img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--wr-media); }
.dx-cshead-b figcaption { margin-top: 8px; }
.dx-csmeta { margin: 0; font: 600 16px/1.4 var(--wr-sans); color: var(--wr-mute); }
.dx-cshead-a .dx-bone { margin-top: 6px; }
.dx-cshead-a .dx-bone .dx-sec { margin-bottom: 12px; }
.dx-csbody p, p.dx-csbody { margin: 0 0 16px; font: 400 19px/1.6 var(--wr-serif); color: var(--wr-body); }
.dx-csbody p:last-child { margin-bottom: 0; }
.dx-csnote { margin: 12px 0 0; }
.dx-csact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dx-btn--solid { height: 48px; padding: 0 22px; border: 0; background: var(--wr-sel-bg); color: var(--wr-sel-fg); font: 800 16px/1 var(--wr-sans); }
.dx-btn--solid.is-on { background: var(--wr-green); color: var(--wd-page-l); }
/* 0.54.2 (parity round 2, R2): on the dark page the green is the light #4CCB97, and white on it is 2.04:1; the board's green buttons carry the night ink (#0C1424) there */
@supports (color: light-dark(white, black)) {
  .dx-btn--solid.is-on { color: light-dark(var(--wd-page-l), var(--wd-on-accent)); }
}
.dx-pill--48 { height: 48px; }
.dx-q { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; height: 32px; padding: 0 6px; border: 0; background: transparent; color: var(--wr-mute); cursor: pointer; border-radius: 6px; font: 700 14px/1 var(--wr-sans); }
.dx-q svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dx-q:hover { color: var(--wr-green); background: var(--wr-qhover); }
.dx-cstl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-top: 34px; }
.dx-cstl-a { grid-column: span 8; min-width: 0; }
.dx-cstl-b { grid-column: span 4; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.dx-seg3 { display: inline-flex; border: 1px solid var(--wr-rule); }
.dx-seg3 a { padding: 0 12px; height: 30px; display: inline-flex; align-items: center; font: 700 13px/1 var(--wr-sans); color: var(--wr-mute); }
.dx a.dx-seg3-a:hover, .dx-seg3 a:hover { color: var(--wr-green); }
.dx-seg3 a.is, .dx a.dx-seg3 a.is:hover { background: var(--wr-sel-bg); color: var(--wr-sel-fg); }
.dx-tl { list-style: none; margin: 0; padding: 0; position: relative; background: linear-gradient(var(--wr-rule), var(--wr-rule)) 111px 0 / 1px 100% no-repeat; }
.dx-tl-d { display: grid; grid-template-columns: 90px 24px minmax(0, 1fr); column-gap: 10px; padding-bottom: 22px; }
.dx-tl-l { font: 800 15px/1.3 var(--wr-sans); text-align: right; padding-top: 2px; }
.dx-tl-n { display: flex; justify-content: center; }
.dx-tl-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--wr-page); border: 2px solid var(--wr-page); box-shadow: 0 0 0 1px var(--wr-ink); box-sizing: content-box; flex: none; }
.dx-tl-dot.is-latest { background: var(--wr-accent); }
.dx-tl-c { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dx-tl-card { display: block; padding: 14px 18px; border: 1px solid var(--wr-rule); background: var(--wr-page); color: var(--wr-ink); }
.dx-tl-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dx-tag--f { background: var(--wr-sel-bg); border-color: var(--wr-sel-bg); color: var(--wr-sel-fg); }
.dx-tl-k { font-size: 11px; }
.dx-tl-h { display: block; margin-top: 8px; font: 700 19px/1.3 var(--wr-serif); }
.dx-tl-w { display: block; margin-top: 6px; font: 400 15px/1.45 var(--wr-serif); color: var(--wr-ink3); }
.dx-tl-w b { font-weight: 700; }
.dx a.dx-tl-card:hover .dx-tl-h { color: var(--wr-green); }
.dx-tl-end { margin: 0 0 0 124px; }
.dx-key { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.dx-key dd { margin: 5px 0 0; font: 400 15px/1.4 var(--wr-serif); color: var(--wr-ink3); }
.dx-key dt { margin: 0; }
.dx-cstl-b .dx-card .dx-sec { margin-bottom: 14px; }
.dx-cstl-b .dx-card .dx-note { margin: 14px 0 0; }
.dx-oc a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--wr-hair); font: 600 17px/1.3 var(--wr-serif); color: var(--wr-ink); }
.dx-oc a:hover { color: var(--wr-green); }
.dx-oc .dx-note { white-space: nowrap; }
@media (max-width: 1100px) {
  .dx-cshead-a, .dx-cshead-b, .dx-cstl-a, .dx-cstl-b { grid-column: 1 / -1; }
  .dx-cstl-b { margin-top: 28px; }
}

/* ---- the text pages: About, Privacy, the editor's page (in place, the page's own markup) and Corrections (its own), B:About and B:Corrections.
   The side navigation is in the page `hidden` and shown here (its classes are tx-*: the phone's main may not carry a dx- class). */
html:has(.tx-page), html:has(.tx-page) body { background: var(--wr-page); }
body > main.wrap.tx-page:not(.nt-wrap):not(.wr-main) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-content: start; width: auto; max-width: 1312px; margin: 0 auto; padding: 44px 64px 0; box-sizing: content-box;
  font-family: var(--wr-serif); color: var(--wr-ink); --bn-text: var(--wr-ink); --bn-text-2: var(--wr-mute); --bn-text-3: var(--wr-cap); --ink: var(--wr-ink); --ink-soft: var(--wr-mute); --ink-faint: var(--wr-cap); }
.tx-page > * { grid-column: 5 / span 7; min-width: 0; max-width: none; }
.tx-nav { box-sizing: border-box; }
.tx-page > .tx-nav { display: block; grid-column: 1 / span 3; grid-row: 1; align-self: start; height: 0; border-top: 2px solid var(--wr-ink); }
.tx-nav a, .dx-text .tx-nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--wr-hair); font: 600 15px/1.3 var(--wr-sans); color: var(--wr-ink); text-decoration: none; }
.tx-nav a[aria-current="page"], .dx-text .tx-nav a[aria-current="page"] { font-weight: 800; color: var(--wr-green); }
.tx-nav a:hover, .dx-text .tx-nav a:hover { color: var(--wr-green); }
.tx-nav a:focus-visible { outline: 2px solid var(--bn-focus-ring); outline-offset: 2px; }
body > main.tx-page h1 { margin: 0; font: 800 56px/1.02 var(--wr-serif); letter-spacing: -.025em; text-wrap: balance; color: var(--wr-ink); }
body > main.tx-page .lede { margin: 16px 0 0; font: 400 24px/1.5 var(--wr-serif); color: var(--wr-body); }
body > main.tx-page h2.section { margin: 30px 0 12px; padding: 0; border: 0; font: 800 28px/1.15 var(--wr-serif); letter-spacing: 0; text-transform: none; color: var(--wr-ink); }
body > main.tx-page p, body > main.tx-page li { font: 400 19px/1.6 var(--wr-serif); color: var(--wr-body); }
body > main.tx-page p { margin: 0 0 16px; }
body > main.tx-page .lede + p, body > main.tx-page h1 + p { margin-top: 16px; }
body > main.tx-page ul { margin: 0 0 16px; padding-left: 22px; }
body > main.tx-page li { margin: 0 0 8px; }
body > main.tx-page p.thin, body > main.tx-page .thin { font: 500 14px/1.45 var(--wr-sans); color: var(--wr-mute); }
body > main.tx-page p a, body > main.tx-page li a { color: var(--wr-green); text-decoration: none; border-bottom: 1px solid var(--wr-green); }
body > main.tx-page p a:hover, body > main.tx-page li a:hover { color: var(--wr-ink); border-bottom-color: var(--wr-ink); }
body > main.tx-page p.thin a { border-bottom-width: 1px; }
body > main.tx-page .foot-follow { font: 500 15px/1.5 var(--wr-sans); color: var(--wr-mute); }
body > main.tx-page .foot-follow a { display: inline-flex; align-items: center; gap: 5px; border-bottom: 0; color: var(--wr-green); }
body > main.tx-page .foot-follow svg { width: 16px; height: 16px; }
body > main.tx-page .table-scroll { overflow-x: auto; margin: 0 0 16px; padding: 0; }
body > main.tx-page table { width: 100%; border-collapse: collapse; font: 500 15px/1.35 var(--wr-sans); }
body > main.tx-page th { text-align: left; font: 800 12px/1.2 var(--wr-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--wr-mute); padding: 10px 12px; border-bottom: 2px solid var(--wr-ink); }
body > main.tx-page th:first-child, body > main.tx-page td:first-child { padding-left: 0; }
body > main.tx-page td { padding: 12px; border-bottom: 1px solid var(--wr-hair); vertical-align: top; color: var(--wr-body); }
/* 0.54.1 (parity round 1, F12): About keeps its live sections, and the morning email's box among them is set in the text pages' type and the board's square rules and buttons */
body > main.tx-page .ab-nl { max-width: none; margin: 18px 0 16px; }
body > main.tx-page .nl-box { max-width: none; gap: 0; padding: 20px 22px; border: 1px solid var(--wr-rule); border-radius: 0; background: var(--wr-page); color: var(--wr-ink); }
body > main.tx-page .nl-box .nl-box-h { margin: 0 0 14px; font: 900 13px/1 var(--wr-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--wr-ink); }
body > main.tx-page .nl-box .nl-box-h svg { display: none; }
body > main.tx-page .nl-box p.nl-box-what { max-width: none; margin: 0 0 14px; font: 400 16px/1.5 var(--wr-serif); color: var(--wr-ink3); }
body > main.tx-page .nl-box .nl-box-form { flex-wrap: nowrap; gap: 0; }
body > main.tx-page .nl-box .mn-input { flex: 1 1 0; height: 48px; padding: 0 16px; border: 1px solid var(--wr-ink); border-right: 0; border-radius: 0; background: var(--wr-page); color: var(--wr-ink); font: 400 17px/1 var(--wr-sans); }
body > main.tx-page .nl-box .mn-btn { flex: none; width: auto; height: 48px; min-height: 0; padding: 0 22px; border: 0; border-radius: 0; background: var(--wr-accent); color: var(--wr-on-accent); font: 800 16px/1 var(--wr-sans); }
body > main.tx-page .nl-box p.mn-fine { max-width: none; margin: 12px 0 0; font: 500 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
.tx-page .tx-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.tx-page .tx-pills a { display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border: 1px solid var(--wr-rule); font: 700 14px/1 var(--wr-sans); color: var(--wr-ink); background: var(--wr-page); text-decoration: none; }
.tx-page .tx-pills a:first-child { border-color: var(--wr-ink); }
.tx-page .tx-pills a:hover { color: var(--wr-green); }
body > main.tx-page .tx-pills[hidden], body > main.tx-page .tx-pills:not([hidden]) { display: flex; }
body > main.tx-page .tx-ed-in { display: none; }
.tx-page ~ .wr-reg-foot .wr-in, .dx-text ~ .wr-reg-foot .wr-in { padding-bottom: 56px; }
/* Corrections, B:Corrections */
.dx-txgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-content: start; padding-top: 44px; }
.dx-txgrid > .tx-nav { grid-column: 1 / span 3; align-self: start; border-top: 2px solid var(--wr-ink); }
.dx-txart { grid-column: 5 / span 7; min-width: 0; }
.dx-txart .dx-lede { margin-top: 14px; }
.dx-cnums { display: flex; gap: 32px; margin: 26px 0 30px; padding: 18px 0; border-top: 1px solid var(--wr-ink); border-bottom: 1px solid var(--wr-rule); }
.dx-corr { display: grid; grid-template-columns: 100px minmax(0, 1fr); column-gap: 20px; }
.dx-corr + .dx-corr { margin-top: 30px; }
.dx-corr-d { font: 800 15px/1.4 var(--wr-sans); }
.dx-corr-t { font: 800 24px/1.25 var(--wr-serif); color: var(--wr-ink); }
.dx a.dx-corr-t:hover { color: var(--wr-green); }
.dx-corr-w { margin: 12px 0 0; font: 400 18px/1.5 var(--wr-serif); color: var(--wr-body); }
.dx-corr-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.dx-corr-bx { padding: 16px 18px; }
.dx-corr-bx .dx-k { margin: 0 0 8px; }
.dx-corr-bx .dx-sf { font-size: 15px; color: var(--wr-ink3); }
.dx-corr-old { border: 1px solid var(--wr-rule); }
.dx-corr-old s { text-decoration-color: var(--wr-later); }
.dx-corr-f { margin: 30px 0 0; }
.dx-corr-f a { font: inherit; }
.dx .dx-corr-f a.dx-green { font-weight: 500; }
.dx-gl { border-bottom: 0; }
.dx-text ~ .wr-reg-foot .wr-reg-foot-r { margin-top: 61px; }
@media (max-width: 1100px) {
  body > main.tx-page { padding-left: 32px; padding-right: 32px; }
  .tx-page > *, .dx-txart { grid-column: 1 / -1; }
  .tx-page > .tx-nav, .dx-txgrid > .tx-nav { grid-column: 1 / -1; height: auto; margin-bottom: 28px; }
  .dx-txgrid > .tx-nav { grid-row: 1; }
  .dx-corr-b { grid-template-columns: minmax(0, 1fr); }
}

/* ---- sign in, join, welcome, the morning email's page and My notis (boards SignIn, Newsletter, MeYou, MeFollowing): the pages' own markup, laid out as the boards draw it.
   Nothing here adds a flow: the forms, the passkey button and the switches are the pages' own, and what is not the page's own card is carried `hidden` and shown here. */
html:has(main.mx-page), html:has(main > .mx-card), html:has(main > .nl-card) { --mx-on: 1; }
html:has(main.mx-page) body, html:has(main > .mx-card) body, html:has(main > .nl-card) body, html:has(main.mx-page), html:has(main > .mx-card), html:has(main > .nl-card) { background: var(--wr-page); }
body > main.wrap:has(> .mx-card), body > main.wrap:has(> .nl-card) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; width: auto; max-width: 1312px; margin: 0 auto; padding: 48px 64px 0; box-sizing: content-box;
  font-family: var(--wr-serif); color: var(--wr-ink); --bn-text: var(--wr-ink); --bn-text-2: var(--wr-mute); --bn-text-3: var(--wr-cap); --bn-link: var(--wr-green); }
/* 0.54.1 (parity round 1, F8): the cards start 112px down as the boards draw them; the legacy page's 32px top padding (above, with :not()) outranked the 48px here */
body > main.wrap:not(.nt-wrap):not(.wr-main):has(> .mx-card), body > main.wrap:not(.nt-wrap):not(.wr-main):has(> .nl-card) { padding-top: 48px; }
body > main.wrap > .mx-card { grid-column: 2; box-sizing: border-box; max-width: none; margin: 0; padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--wr-rule); background: var(--wr-page); border-radius: 0; }
body > main.wrap > .mx-card.mx-welcome { background: var(--wr-panel); border-color: var(--wr-panel); }
body > main.wrap > .mx-signin, body > main.wrap:has(> .mx-join) > .mn-page.mx-card:not(.mx-join) { grid-column: 1; border-color: var(--wr-ink); }
body > main.wrap > .mx-signin { display: flex !important; }
body > main.wrap > .mx-join { display: flex !important; grid-column: 2; }
body > main.wrap > .me-out.mx-card { grid-column: 2; }
body > main.wrap:has(> .mx-signin) > .me-out.mx-card { grid-column: 2; }
body > main.wrap > .mx-card .mx-k, body > main.wrap > .nl-card .nl-k { display: block; margin: 0 0 10px; font: 800 12px/1 var(--wr-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wr-green); }
body > main.wrap > .mx-card .mx-k[hidden], body > main.wrap > .nl-card .nl-k[hidden] { display: block !important; }
body > main.wrap > .mx-card .mn-chip, body > main.wrap > .mx-card .mn-step { display: none; }
body > main.wrap > .mx-card h1, body > main.wrap > .mx-card .mx-h, body > main.wrap > .mx-card h2.mx-h, body > main.wrap > .mx-card .me-h1 { margin: 0 0 8px; font: 800 34px/1.1 var(--wr-serif); letter-spacing: 0; color: var(--wr-ink); }
body > main.wrap > .mx-card .mn-lede, body > main.wrap > .mx-card .me-lede { margin: 0; font: 400 17px/1.5 var(--wr-serif); color: var(--wr-ink3); max-width: none; }
body > main.wrap > .mx-card .mn-fine { margin: 16px 0 0; font: 500 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
body > main.wrap > .mx-card .mn-fine a, body > main.wrap > .mx-card .mn-link { color: var(--wr-green); font-weight: 700; text-decoration: none; }
body > main.wrap > .mx-join .mn-fine a { font-weight: 500; }   /* B:SignIn: "Everything we keep" is the line's own weight; "Join ai notis" in the sign-in card is the bold one */
body > main.wrap > .mx-card .mn-center { text-align: left; }
body > main.wrap > .mx-card .mn-form { display: flex; flex-direction: column; gap: 0; margin-top: 22px; }
body > main.wrap > .mx-card .mn-field { gap: 0; }
body > main.wrap > .mx-card .mn-field label { display: block; margin-bottom: 8px; font: 800 12px/1 var(--wr-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wr-mute); }
body > main.wrap > .mx-card .mn-input { height: 48px; padding: 0 16px; border: 1px solid var(--wr-ink); border-radius: 0; background: var(--wr-page); color: var(--wr-ink); font: 400 17px/1 var(--wr-sans); }
body > main.wrap > .mx-card .mn-input::placeholder { color: var(--wr-cap); opacity: 1; }
body > main.wrap > .mx-card .mn-btn, body > main.wrap > .mx-card .mx-card .mn-btn { width: 100%; min-height: 48px; border: 0; border-radius: 0; background: var(--wr-sel-bg); color: var(--wr-sel-fg); font: 800 16px/1 var(--wr-sans); text-decoration: none; cursor: pointer; }
body > main.wrap > .mx-card .mn-btn:hover { background: var(--wr-green); color: var(--wd-page-l); }
body > main.wrap > .mx-card .mn-form .mn-btn { margin-top: 10px; background: var(--wr-page); color: var(--wr-ink); border: 1px solid var(--wr-ink); font: 700 14px/1 var(--wr-sans); }
body > main.wrap > .mx-card .mn-form .mn-btn:hover { background: var(--wr-qhover); color: var(--wr-ink); }
body > main.wrap > .mx-card .mn-btn--quiet { background: var(--wr-page); color: var(--wr-ink); border: 1px solid var(--wr-ink); margin-top: 10px; }
body > main.wrap > .mx-card > .mn-btn[data-passkey-signin] { margin-top: 22px; }
body > main.wrap > .mx-card > .mn-btn[data-passkey-signin][hidden] { display: none; }
/* 0.54.1 (F9): the board's key (an angled key, 18px) in place of the phone's; and its "or", drawn only while the passkey button is */
body > main.wrap > .mx-card > .mn-btn[data-passkey-signin] > svg:not(.mx-key-d) { display: none; }
body > main.wrap > .mx-card > .mn-btn[data-passkey-signin] > svg.mx-key-d { display: block !important; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body > main.wrap > .mx-card > .mn-btn[data-passkey-signin]:not([hidden]) ~ .mx-or { display: block !important; margin: 16px 0; text-align: center; font: 500 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
body > main.wrap > .mx-card > .mn-btn[data-passkey-signin]:not([hidden]) ~ .mn-form { margin-top: 0; }
body > main.wrap > .mx-card > .mn-fine[data-passkey-status]:empty, body > main.wrap > .mx-card .mn-form .mn-fine[data-join-status]:empty { display: none; }
body > main.wrap > .mx-card > .mn-fine.mn-center { margin-top: 18px; }
body > main.wrap > .mx-card .mn-note { margin: 16px 0 0; padding: 0; border: 0; background: none; font: 500 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
body > main.wrap > .mx-card .mn-error { margin: 16px 0 0; }
body > main.wrap > .mx-card .mn-card { margin-top: 24px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--wr-rule); border-radius: 0; background: none; }
body > main.wrap > .mx-card .mn-card h2 { font: 700 20px/1.25 var(--wr-serif); }
body > main.wrap > .mx-card .mn-card[hidden] { display: none; }
body > main.wrap > .mx-card .mn-card .mn-fine { margin-top: 8px; font: 400 15px/1.5 var(--wr-serif); color: var(--wr-ink3); }
body > main.wrap > .mx-card.mx-welcome .mn-btn { margin-top: 18px; }
/* 0.54.1 (parity round 1, F18; B:SignIn's third card): "Add a passkey" and "Not now" are one row, as the board's button pair is; the "Get the app" box is not drawn here on a wide screen */
body > main.wrap > .mx-card.mx-welcome { flex-flow: row wrap; align-content: flex-start; column-gap: 8px; }
body > main.wrap > .mx-card.mx-welcome > * { flex: 0 0 100%; min-width: 0; }
body > main.wrap > .mx-card.mx-welcome > a.mn-btn[data-welcome-go="passkey"] { flex: 1 1 0; width: auto; }
body > main.wrap > .mx-card.mx-welcome > a.mn-btn[data-welcome-go="passkey"] > svg:not(.mx-key-d) { display: none; }
body > main.wrap > .mx-card.mx-welcome > a.mn-btn[data-welcome-go="passkey"] > svg.mx-key-d { display: block !important; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body > main.wrap > .mx-card.mx-welcome > a.mn-btn.mn-btn--quiet { flex: 0 0 auto; width: auto; padding: 0 22px; }
body > main.wrap > .mx-card.mx-welcome [data-app-box] { display: none !important; }
/* the join card's list: B:SignIn, a green dot and two lines */
.mx-perks, body > main.wrap > .me-out .me-perks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mx-perks li { display: block; position: relative; padding-left: 32px; line-height: normal; }
.mx-perks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--wr-accent); }
.mx-perks b { display: inline; font: 700 17px/1.3 var(--wr-serif); color: var(--wr-ink); }
.mx-perks small { display: block; margin-top: 0; font: 500 14px/1.45 var(--wr-sans); color: var(--wr-mute); }
body > main.wrap > .me-out .me-perks li { display: block; position: relative; padding-left: 32px; }
body > main.wrap > .me-out .me-perks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--wr-accent); }
body > main.wrap > .me-out .me-perk-ic { display: none; }
body > main.wrap > .me-out .me-perks b { font: 700 17px/1.3 var(--wr-serif); color: var(--wr-ink); }
body > main.wrap > .me-out .me-perks small { font: 500 14px/1.45 var(--wr-sans); color: var(--wr-mute); }
body > main.wrap > .me-out.mx-card { max-width: none; padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 0; }
body > main.wrap > .me-out .me-soon { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--wr-rule); border-radius: 0; background: var(--wr-panel); font: 500 14px/1.45 var(--wr-sans); color: var(--wr-ink3); }
body > main.wrap > .mx-card .me-soon { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--wr-rule); border-radius: 0; background: var(--wr-panel); font: 500 14px/1.45 var(--wr-sans); color: var(--wr-ink3); display: flex; flex-direction: column; gap: 6px; }
body > main.wrap > .mx-card .me-soon b { color: var(--wr-ink); font: 800 15px/1.3 var(--wr-sans); }
body > main.wrap > .me-out .nl-box, body > main.wrap > .me-out [data-app-box], body > main.wrap > .me-out .me-lede, body > main.wrap > .me-out .mn-center { display: none !important; }
body > main.wrap > .me-out .me-local:not([hidden]) { display: block; }
body > main.wrap > .me-out .me-local { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--wr-rule); }
body > main.wrap > .me-out .mn-fine { margin: 14px 0 0; font: 500 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
body > main.wrap > .me-out .mn-fine a { color: var(--wr-green); font-weight: 700; }
body > main.wrap > .me-out .mn-center { text-align: left; }
body > main.wrap > .me-out .mn-form { margin-top: 20px; }
body > main.wrap > .me-out .mn-input { height: 48px; border: 1px solid var(--wr-ink); border-radius: 0; font: 400 17px/1 var(--wr-sans); background: var(--wr-page); color: var(--wr-ink); }
body > main.wrap > .me-out .mn-field label { font: 800 12px/1 var(--wr-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wr-mute); margin-bottom: 8px; display: block; }
body > main.wrap > .me-out .mn-form .mn-btn { width: 100%; margin-top: 10px; min-height: 48px; border: 0; border-radius: 0; background: var(--wr-accent); color: var(--wr-on-accent); font: 800 16px/1 var(--wr-sans); }
body > main.wrap > .me-out .mn-error { margin-top: 14px; }

/* the morning email's page, B:Newsletter */
body > main.wrap:has(> .nl-card) { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; padding-top: 48px; }
body > main.wrap > .nl-card { grid-column: span 6; box-sizing: border-box; max-width: none; margin: 0; padding: 0; display: block; }
body > main.wrap > .nl-card .mn-chip { display: none; }
body > main.wrap > .nl-card .nl-when { display: none; }   /* 0.54.1 (F14): the kicker above says when; the board's lede stops at "short ones." */
body > main.wrap > .nl-card .nl-k { margin: 6px 0 16px; }   /* the board's kicker is an inline span in a line box: 6px under the preview's, which is a block */
body > main.wrap > .nl-card h1 { margin: 12px 0 0; font: 800 56px/1.02 var(--wr-serif); letter-spacing: -.025em; text-wrap: balance; color: var(--wr-ink); }
body > main.wrap > .nl-card .mn-lede { margin: 14px 0 0; font: 400 21px/1.5 var(--wr-serif); color: var(--wr-ink3); max-width: none; }
/* 0.54.1 (parity round 1, F1): the form is a row that wraps. The address takes what the button leaves, the button keeps its one line, and the small print (the sign-up wording, kept: it is the proof of opt-in) is a row of its own under both; the honeypot is out of the row */
body > main.wrap > .nl-card .mn-form { margin-top: 26px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0; align-items: flex-start; position: relative; }
body > main.wrap > .nl-card .mn-field { flex: 1 1 0; min-width: 0; }
body > main.wrap > .nl-card .mn-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body > main.wrap > .nl-card .mn-input { height: 58px; padding: 0 16px; border: 1px solid var(--wr-ink); border-right: 0; border-radius: 0; background: var(--wr-page); color: var(--wr-ink); font: 400 19px/1 var(--wr-sans); }
body > main.wrap > .nl-card .mn-input::placeholder { color: var(--wr-cap); opacity: 1; }
body > main.wrap > .nl-card .mn-form .mn-btn { flex: none; white-space: nowrap; width: auto; height: 56px; padding: 0 22px; border: 0; border-radius: 0; background: var(--wr-accent); color: var(--wr-on-accent); font: 800 16px/1 var(--wr-sans); }
body > main.wrap > .nl-card .mn-form .mn-fine { position: absolute; }
body > main.wrap > .nl-card .mn-form .mn-fine:not(:empty) { position: static; flex: 0 0 100%; }
body > main.wrap > .nl-card .nl-facts { margin: 26px 0 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 10px; font: 400 16px/1.5 var(--wr-serif); color: var(--wr-ink3); }
body > main.wrap > .nl-card .mn-fine { margin: 14px 0 0; font: 500 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
body > main.wrap > .nl-card .mn-fine a, body > main.wrap > .nl-card .mn-link { color: var(--wr-green); }
body > main.wrap > .nl-card .mn-error { margin: 16px 0 0; }
body > main.wrap > .nl-card .me-soon { margin-top: 26px; padding: 14px 16px; border: 1px solid var(--wr-rule); border-radius: 0; background: var(--wr-panel); display: flex; flex-direction: column; gap: 6px; font: 500 14px/1.45 var(--wr-sans); color: var(--wr-ink3); }
body > main.wrap > .nl-preview { display: block; grid-column: 8 / span 5; min-width: 0; }
body > main.wrap > .nl-preview[hidden] { display: block !important; }
.nl-pk { margin: 0 0 12px; font: 800 12px/1 var(--wr-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wr-mute); }
.nl-mail { border: 1px solid var(--wr-rule); box-shadow: var(--wr-shadow); background: var(--wd-page-l); color: var(--wd-ink-l); }
.nl-mail-h { padding: 14px 18px; border-bottom: 1px solid var(--wd-hair-l); font: 500 13px/1.5 var(--wr-sans); color: var(--wd-mute-l); }
.nl-mail-h b { color: var(--wd-ink-l); }
.nl-mail-b { padding: 18px 20px; }
.nl-mail-mark { display: inline-flex; align-items: center; gap: 8px; }
.nl-mail-ai { font: 700 16px/1 var(--wr-sans); color: var(--wd-green-l); }
.nl-mail-bar { width: 2px; height: 20px; background: var(--wd-accent); }
.nl-mail-n { font: 900 24px/1 var(--wr-serif); }
.nl-mail-o { margin: 14px 0; font: italic 400 15px/1.5 var(--wr-serif); color: var(--wd-ink2-l); }
.nl-mail-b img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--wr-media); }
.nl-mail-k { margin: 12px 0 6px; font: 800 12px/1 var(--wr-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wd-green-l); }
.nl-mail-t1 { margin: 0; font: 800 19px/1.25 var(--wr-serif); }
.nl-mail-t { margin: 0; font: 700 16px/1.3 var(--wr-serif); }
.nl-mail-m { margin: 16px 0 0; font: 500 13px/1.45 var(--wr-sans); color: var(--wd-mute-l); }

/* My notis, B:MeYou and B:MeFollowing */
body > main.wrap.mx-page { width: auto; max-width: 1312px; margin: 0 auto; padding: 34px 64px 0; box-sizing: content-box; font-family: var(--wr-serif); color: var(--wr-ink);
  --bn-text: var(--wr-ink); --bn-text-2: var(--wr-mute); --bn-text-3: var(--wr-cap); --bn-link: var(--wr-green); --ink: var(--wr-ink); }
.mx-page .mx-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; padding-bottom: 24px; }
.mx-page .mx-head[hidden], .mx-page .mx-tabs[hidden] { display: flex; }
.mx-page .mx-head:not(:has(.mx-av)) { padding-bottom: 22px; }
.mx-head-t { flex: 1; min-width: 0; }
.mx-av { width: 72px; height: 72px; margin-right: 0; border-radius: 50%; background: var(--wr-accent); color: var(--wr-on-accent); display: flex; align-items: center; justify-content: center; font: 800 26px/1 var(--wr-sans); flex: none; }
.mx-h1 { margin: 0; font: 800 44px/1.02 var(--wr-serif); letter-spacing: -.025em; color: var(--wr-ink); }
.mx-sub { margin: 6px 0 0; font: 500 15px/1.45 var(--wr-sans); color: var(--wr-mute); }
.mx-page a.mx-admin { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; background: var(--wr-sel-bg); color: var(--wr-sel-fg); font: 800 16px/1 var(--wr-sans); text-decoration: none; }
.mx-page a.mx-admin:hover { background: var(--wr-green); color: var(--wd-page-l); }
.mx-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--wr-rule); margin-bottom: 28px; }
.mx-tabs a { padding: 14px 0; font: 700 15px/1 var(--wr-sans); color: var(--wr-mute); border-bottom: 3px solid transparent; text-decoration: none; }
.mx-tabs a.is { color: var(--wr-ink); border-bottom-color: var(--wr-accent); }
.mx-tabs a:hover { color: var(--wr-green); }
.mx-tabs a.is:hover { color: var(--wr-ink); }
.mx-page .mn-shell { display: block; max-width: none; margin: 0; padding: 0; }
.mx-page .mn-shell > .mn-page { display: flow-root; max-width: none; margin: 0; padding: 0; }
.mx-page .mn-aside, .mx-page .mn-who, .mx-page .mn-admin { display: none; }
.mx-page .mn-page > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mx-page .mn-page > .mn-lede { display: none; }
/* You and Following: two columns, the page's groups (`display: contents` on a phone) made the left and the right */
.mx-page .mn-page:has(> .mx-col) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.mx-page .mx-col { display: flex !important; flex-direction: column; min-width: 0; }
.mx-page .mx-col--a { grid-column: span 8; gap: 28px; }
.mx-page .mx-col--b { grid-column: span 4; gap: 26px; }
.mx-page .mn-page > h1 { grid-column: 1 / -1; }
.mx-page .mn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--wr-ink); border-bottom: 1px solid var(--wr-rule); }
.mx-page .mn-stat { padding: 18px 16px; gap: 0; border: 0; border-left: 1px solid var(--wr-rule); border-radius: 0; background: none; }
.mx-page .mn-stat:first-child { border-left: 0; }
.mx-page .mn-stat b { font: 800 40px/1 var(--wr-sans); letter-spacing: -.02em; color: var(--wr-ink); }
.mx-page .mn-stat span { margin-top: 6px; font: 500 14px/1.35 var(--wr-sans); color: var(--wr-mute); }
.mx-page .mn-card { padding: 0; border: 0; border-radius: 0; background: none; display: block; }
.mx-page .mn-card h2 { margin: 0; font: 900 13px/1 var(--wr-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--wr-ink); }
.mx-page section[aria-labelledby="bd-h"] h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--wr-ink); margin-bottom: 18px; }
.mx-page section[aria-labelledby="bd-h"] h2 .mx-r { font: 500 13px/1.45 var(--wr-sans); letter-spacing: 0; text-transform: none; color: var(--wr-mute); }
.mx-page .mn-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; justify-items: stretch; }
.mx-page .mn-badges .bn-badge { width: auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; text-align: center; border: 1px solid var(--wr-hair); border-radius: 0; background: var(--wr-page); color: var(--wr-later); }
.mx-page .mn-badges .bn-badge.is-earned { border-color: var(--wr-green); background: var(--wr-mine); color: var(--wr-green); }
.mx-page .mn-badges .bn-badge-medal { width: auto; height: auto; background: none; border: 0; box-shadow: none; color: inherit; }
.mx-page .mn-badges .bn-badge-medal svg { display: block; width: 26px; height: 26px; stroke-width: 1.8; }
.mx-page .mn-badges .bn-badge-name { font: 800 15px/1.2 var(--wr-sans); color: var(--wr-faint); }
.mx-page .mn-badges .is-earned .bn-badge-name { color: var(--wr-ink); }
.mx-page .mx-n[hidden], .mx-page .mx-r[hidden] { display: inline !important; }
.mx-says { display: block; font: 400 13px/1.35 var(--wr-serif); color: var(--wr-faint); }
.mx-page .mn-badges .is-earned .mx-says { color: var(--wr-ink3); }
.mx-page .mn-badges .mx-says[hidden] { display: block !important; }
.mx-page #reading, .mx-page #newsletter { padding: 20px 22px; border: 1px solid var(--wr-rule); background: var(--wr-page); }
.mx-page #newsletter, .mx-page #reading { display: block; }
.mx-page #reading .mn-fine, .mx-page #newsletter .mn-fine { margin: 8px 0 0; font: 500 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
.mx-page #newsletter .mn-fine { font: 400 16px/1.5 var(--wr-serif); color: var(--wr-ink3); margin-top: 14px; }
.mx-page .mn-switch-row { align-items: center; }
.mx-page .mn-streak-line { margin-top: 18px; }
.mx-page .mn-streak-line svg { display: none; }
.mx-page .mn-streak-line b { font: 800 22px/1 var(--wr-sans); }
.mx-page .mn-streak-line span { font: 500 13px/1.45 var(--wr-sans); }
.mx-page .mn-streak-line > span { display: flex; align-items: center; gap: 14px; }
.mx-page .mn-days { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.mx-page .mn-days li { width: 22px; height: 22px; border: 0; border-radius: 0; background: var(--wr-hair); }
.mx-page .mn-days li.is-read { background: var(--wr-accent); }
/* 0.54.1 (parity round 1, F11; B:MeYou): the reading-days card is the board's (heading and note in one block, the switch centred against both); "Signing in" is its own card; "What we keep" has its sentence, its three links in the board's 6px, and the page's own
   passkey list (Passkeys and email) after them; the note about saves is small print under the cards, not a rounded panel */
.mx-page #reading { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 0; align-items: center; }
.mx-page #reading > .mn-switch-row { display: contents; }
.mx-page #reading h2 { grid-column: 1; grid-row: 1; align-self: end; }
.mx-page #reading .bn-switch { grid-column: 2; grid-row: 1 / span 2; }
.mx-page #reading > .mn-fine { grid-column: 1; grid-row: 2; margin: 8px 0 0; align-self: start; }
.mx-page #reading > .mn-streak-line, .mx-page #reading > .mn-days { grid-column: 1 / -1; }
.mx-page #newsletter { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 0; align-items: center; }
.mx-page #newsletter > .mn-switch-row { display: contents; }
.mx-page #newsletter h2 { grid-column: 1; grid-row: 1; }
.mx-page #newsletter .bn-switch { grid-column: 2; grid-row: 1; }
.mx-page #newsletter > .mn-fine, .mx-page #newsletter > .mn-error { grid-column: 1 / -1; margin-top: 6px; }
.mx-page .mx-signing[hidden] { display: block !important; }
.mx-page .mx-signing { padding: 20px 22px; border: 1px solid var(--wr-rule); background: var(--wr-page); }
.mx-page .mx-signing h2 { margin: 0 0 14px; }
.mx-sg { margin: 0; font: 400 16px/1.5 var(--wr-serif); color: var(--wr-ink3); }
.mx-sg-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mx-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border: 1px solid var(--wr-rule); border-radius: 0; background: var(--wr-page); color: var(--wr-ink); font: 700 14px/1 var(--wr-sans); cursor: pointer; }
.mx-pill:hover { color: var(--wr-green); }
.mx-page .mx-signing .mn-fine { margin: 10px 0 0; font: 500 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
.mx-page .mx-signing .mn-fine:empty { display: none; }
.mx-page .mx-col--b > .mn-note { order: 9; padding: 0; border: 0; border-radius: 0; background: none; font: 500 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
.mx-page #data { display: flex; flex-direction: column; gap: 0; padding: 22px 24px; background: var(--wr-panel); border: 0; }
.mx-page #data h2 { margin-bottom: 12px; }
.mx-page #data h2 > span:first-child { display: none; }
.mx-page #data .mx-t-dx[hidden] { display: inline !important; }
.mx-page #data .mx-keep[hidden] { display: block !important; margin: 0 0 9px; font: 400 15px/1.5 var(--wr-serif); color: var(--wr-ink3); }
.mx-page #data .mx-pk { order: 9; }
.mx-page #data .mx-long { display: none; }
.mx-page #data .mx-short[hidden] { display: inline !important; }
.mx-page #data .mn-data-row, .mx-page #data summary { min-height: 0; padding: 3px 0; border: 0; font: 700 14px/1.4 var(--wr-sans); color: var(--wr-mute); }
.mx-page #data .mn-data-row svg, .mx-page #data summary svg { display: none; }
.mx-page #data a.mn-data-row { color: var(--wr-green); }
.mx-page #data .mn-details summary { cursor: pointer; list-style: none; }
.mx-page .mn-page > .mn-note { padding: 0; border: 0; background: none; font: 500 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
.mx-page .mn-page > .mn-note svg { display: none; }
/* Following: the cases on the left, what is saved on the right */
/* 0.54.1 (parity round 1, F10): B:MeFollowing's row is 121px, the cases and the saved rail split 7 and 5, the follow-up note is a square panel, and the intro line is the phone's */
.mx-page .mn-case { gap: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--wr-hair); border-radius: 0; background: none; position: relative; color: var(--wr-ink); }
.mx-page .mn-case-head { gap: 12px; }
.mx-page .mx-col > .mn-lede { display: none; }
.mx-page .mn-case:hover { border-color: var(--wr-hair); background: none; }
.mx-page .mn-case-dot { display: none; }
.mx-page .mn-case-name { font: 800 22px/1.2 var(--wr-serif); color: var(--wr-ink); }
.mx-page .mn-case:hover .mn-case-name { color: var(--wr-green); }
.mx-page .mn-new { background: var(--wr-accent); color: var(--wr-on-accent); border-radius: 0; font: 800 12px/1 var(--wr-sans); padding: 5px 8px; }
.mx-page .mn-case-meta { margin-top: 6px; font: 500 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
.mx-page .mn-case-latest { margin-top: 8px; font: 400 17px/1.45 var(--wr-serif); color: var(--wr-ink3); }
.mx-page .mn-case-latest::before { content: "Latest: "; }
.mx-page .mx-sech { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--wr-ink); margin-bottom: 18px; }
.mx-page .mx-sech[hidden] { display: flex !important; }
.mx-page .mx-sech h2 { margin: 0; font: 900 13px/1 var(--wr-sans); letter-spacing: .18em; text-transform: uppercase; }
.mx-page .mx-sech span { font: 500 13px/1.45 var(--wr-sans); color: var(--wr-mute); }
.mx-page .mx-col--a > .mn-note, .mx-page .mn-empty { margin: 22px 0 0; }
.mx-page .mn-shell:has(.mx-saved) .mx-col--a > .mn-note { padding: 22px 24px; border-radius: 0; background: var(--wr-panel); font: 400 16px/1.5 var(--wr-serif); color: var(--wr-ink3); }
.mx-saved { grid-column: span 5; min-width: 0; margin: 0; }
@media (min-width: 1101px) { .mx-page .mn-page:has(> .mx-saved) > .mx-col--a { grid-column: span 7; gap: 0; } }
.mx-saved[hidden] { display: block !important; }
.mx-saved-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 2px solid var(--wr-ink); margin-bottom: 18px; }
.mx-saved-h h2 { margin: 0; font: 900 13px/1 var(--wr-sans); letter-spacing: .18em; text-transform: uppercase; }
.mx-saved-h a { font: 800 13px/1 var(--wr-sans); color: var(--wr-green); }
.mx-saved-r { display: grid; grid-template-columns: 96px minmax(0, 1fr) 32px; column-gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--wr-hair); }
.mx-saved-r > svg { justify-self: center; }
.mx-saved-r img, .mx-saved-p { display: block; width: 96px; height: 60px; object-fit: cover; background: var(--wr-media); }
.mx-saved-r a { font: 700 16px/1.3 var(--wr-serif); color: var(--wr-ink); }
.mx-saved-r a:hover { color: var(--wr-green); }
.mx-saved-m { display: block; margin-top: 4px; font: 500 13px/1.35 var(--wr-sans); color: var(--wr-mute); }
.mx-saved-r svg { width: 18px; height: 18px; fill: var(--wr-green); stroke: var(--wr-green); stroke-width: 1.8; }
/* Saved: the list, wide */
.mx-page .mn-rows { margin: 0; }
.mx-page .mn-row { grid-template-columns: 96px minmax(0, 1fr) 44px; gap: 14px; padding: 12px 0; border-top: 0; border-bottom: 1px solid var(--wr-hair); }
.mx-page .mn-swatch { height: 60px; border-radius: 0; }
.mx-page .mn-row-title { font: 700 18px/1.3 var(--wr-serif); }
.mx-page .mn-row-meta { font: 700 12px/1 var(--wr-sans); }
@media (max-width: 1100px) {
  body > main.wrap:has(> .mx-card), body > main.wrap:has(> .nl-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 32px; padding-right: 32px; }
  body > main.wrap > .mx-card, body > main.wrap > .mx-signin, body > main.wrap > .mx-join, body > main.wrap > .me-out.mx-card, body > main.wrap > .nl-card, body > main.wrap > .nl-preview { grid-column: 1 / -1; }
  body > main.wrap:has(> .nl-card) { grid-template-columns: minmax(0, 1fr); }
  body > main.wrap.mx-page { padding-left: 32px; padding-right: 32px; }
  .mx-page .mx-col--a, .mx-page .mx-col--b, .mx-page .mx-saved { grid-column: 1 / -1; }
  .mx-page .mx-saved { margin-top: 28px; }
  .mx-page .mn-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mx-page .bn-switch { min-height: 0; height: 30px; }
.mx-page .bn-switch input { width: 52px; height: 30px; border-radius: 15px; background: var(--wr-hair); border-color: var(--wr-rule); }
.mx-page .bn-switch input::before { top: 3px; left: 3px; width: 24px; height: 24px; background: var(--wd-page-l); }
.mx-page .bn-switch input:checked { background: var(--wr-green); border-color: var(--wr-green); }
.mx-page .bn-switch input:checked::before { transform: translateX(22px); background: var(--wd-page-l); }
.mx-page [data-app-box] { display: none !important; }
.mx-page .mn-page > .mn-note { display: none; }
.mx-page .mx-col--a > .mn-note { display: block; }

/* the join form of the board: the address and the green Join side by side, the small print under both */
body > main.wrap > .mx-join .mn-form, body > main.wrap > .me-out .mn-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; margin-top: 20px; }
body > main.wrap > .mx-join .mn-field, body > main.wrap > .me-out .mn-field { flex: 1 1 0; min-width: 0; }
body > main.wrap > .mx-join .mn-input, body > main.wrap > .me-out .mn-input { border-right: 0; }
body > main.wrap > .mx-join .mn-form .mn-btn, body > main.wrap > .me-out .mn-form .mn-btn { flex: none; width: auto; margin: 0; padding: 0 22px; min-height: 48px; border: 0; background: var(--wr-accent); color: var(--wr-on-accent); font: 800 16px/1 var(--wr-sans); }
body > main.wrap > .mx-join .mn-form .mn-btn:hover, body > main.wrap > .me-out .mn-form .mn-btn:hover { background: var(--bn-green-300); color: var(--wr-on-accent); }
body > main.wrap > .mx-join .mn-form .mn-fine, body > main.wrap > .me-out .mn-form .mn-fine, body > main.wrap > .mx-join .mn-form noscript, body > main.wrap > .me-out .mn-form noscript { flex-basis: 100%; }
body > main.wrap > .mx-card p, body > main.wrap > .nl-card p, body > main.wrap > .nl-preview p, body > main.wrap > .me-out p, .mx-page p { max-width: none; }

/* ---- the page that is not found, B:NotFound */
.dx-gone .dx-page { padding-top: 70px; padding-bottom: 0; }
.dx-gonegrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 30px; align-items: center; }
.dx-gone-a { grid-column: span 6; min-width: 0; }
.dx-gone-a .dx-k { margin-top: -1px; }
.dx-gone-a .dx-h1 { margin-top: 11px; }
.dx-gone-a .dx-lede { margin-top: 14px; }
.dx-gone-b { grid-column: 8 / span 5; min-width: 0; }
.dx-gone-b .dx-k { margin: 0 0 12px; }
.dx-gone-b a { display: block; }
.dx-gone-b img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--wr-media); }
.dx-gone-h { display: block; margin-top: 12px; font: 800 22px/1.2 var(--wr-serif); color: var(--wr-ink); }
.dx a.dx-gone-b:hover .dx-gone-h, .dx-gone-b a:hover .dx-gone-h { color: var(--wr-green); }
.dx-gone-p { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dx-gone-p .dx-pill { height: 36px; }
.dx-sform--s { margin: 26px 0 0; }
.dx-sform--s input { height: 48px; font-size: 17px; }
.dx-sform--s button { height: 48px; font-size: 16px; }
@media (max-width: 1100px) {
  .dx-gone-a, .dx-gone-b { grid-column: 1 / -1; }
}
/* <<< deploy 3 (0.54.0) */
/* ---- deploy 2, narrower than a laptop (721 to 1100px): the same pages in fewer columns, as the front page does */
@media (max-width: 1100px) {
  .dx-in { padding-left: 32px; padding-right: 32px; }
  .dx-band-t, .dx-search { grid-column: 1 / -1; }
  .dx-h1 { font-size: 44px; }
  .dx-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .dx-nums > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .dx-two-a, .dx-two-b { grid-column: 1 / -1; }
  .dx-tiles[class*="--n"] > .dx-tile { grid-column: span 6; }   /* two to a row here (0.54.4) ... */
  .dx-tiles[class*="--n"] > .dx-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* ... and a last tile on a row of its own spans it */
  .dx-ill-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-ss-a, .dx-ss-b { grid-column: 1 / -1; }
  .dx-ss-a { margin-bottom: 28px; }
  .dx-head-t, .dx-head-r, .dx-head-8, .dx-head-4 { grid-column: 1 / -1; }
  .dx-head-r, .dx-head-4 { justify-content: flex-start; margin-top: 14px; }
  .dx-states { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dx-pickup, .dx-mv-b { grid-column: 1 / -1; }
  .dx-mv-b { margin-top: 28px; }
  .dx-cos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-co-head-a, .dx-co-head-b, .dx-co-main, .dx-co-side { grid-column: 1 / -1; }
  .dx-co-head-b { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dx-cov-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-map-g { grid-template-columns: minmax(0, 1fr); }
  .dx-kinds { grid-template-columns: minmax(0, 1fr); }
  .dx-tm-a, .dx-tm-s { grid-column: 1 / -1; }
  .dx-pg-a, .dx-pg-b { grid-column: 1 / -1; }
  .dx-pr-g { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .dx-cmp-t { table-layout: auto; }
  .dx-models-t { display: block; overflow-x: auto; table-layout: auto; }
  .nt-head > .dx-sub { grid-template-columns: 96px minmax(0, 1fr); row-gap: 16px; }
  .nt-head .dx-sub .dx-box { grid-column: 1 / -1; grid-row: auto; }
}

}