/* D1 — the daily issue.
 *
 * A separate stylesheet rather than the essay's inlined one, on purpose: the
 * essay is a single page built once and base64s its fonts into itself, while
 * this is a new page every business day forever. Inlining three woff2 files
 * into each of them would put roughly 40 KB of identical font bytes into the
 * repository every morning, and a year of that is a repo nobody wants to clone.
 * Shared stylesheet, shared font files, one HTTP cache entry for all of it.
 *
 * Palette and type are design.md's, unchanged. The one rule that governs this
 * page: Layer 1 facts render achromatic. Everything here is Layer 1 — published
 * fields and arithmetic over them — so ochre appears only as interface accent
 * and as the PENDING status on a date that has not yet arrived. If a hue ever
 * shows up in the body of a document block, something has shipped a claim.
 */

@font-face {
  font-family: 'Source Serif 4';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url(/brand/fonts/serif600.woff2) format('woff2');
}
@font-face {
  font-family: Inter;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(/brand/fonts/sans400.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url(/brand/fonts/mono500.woff2) format('woff2');
}

:root {
  --ink: #0b1220;
  --ink-2: #121b30;
  --ink-3: #1b2743;
  --paper: #f4f6fb;
  --paper-2: #ffffff;
  --rule: #d9e1f0;
  --serif: 'Source Serif 4', 'Iowan Old Style', Palatino, Georgia, serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Dark unless chosen otherwise — same default as the essay and the landing
     page, and the same "ds-theme" key, so a choice made on one holds here. */
  --bg: var(--ink);
  --surface: var(--ink-2);
  --line: var(--ink-3);
  --head: #dfe7f5;
  --body: #93a3c0;
  --quiet: #93a3c0;
  --slate: #7c8cae;
  --accent: #d9962b; /* ochre: interface accent and PENDING */
  --accent-text: #d9962b; /* on ink, ochre clears AA as text */
}
:root[data-theme='light'] {
  --bg: var(--paper);
  --surface: var(--paper-2);
  --line: var(--rule);
  --head: #0b1220;
  --body: #4a5872;
  --quiet: #4a5872;
  --slate: #5c6b87;
  --accent: #d9962b;
  /* design.md rule 2: #D9962B is a marking colour, never text on light. */
  --accent-text: #8a5b0e;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* The palette ships `hidden` and palette.js un-hides it on first open — the
     same deferred-reveal pattern the copy buttons use. iOS Safari's automatic
     text-size-adjust recalculates a "readable" size per element and gets it
     badly wrong for text inside something that was `display: none` at parse
     time: the ⌘K title and the search field's placeholder render several
     times their CSS size the moment the dialog opens. Disabling the heuristic
     site-wide is the fix, not a chase through every element that starts
     hidden. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
a {
  color: var(--head);
  text-decoration-color: var(--slate);
  text-underline-offset: 2px;
}
a:hover {
  color: var(--accent-text);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.masthead,
main,
footer {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- masthead ---------------------------------------------------------- */
.masthead {
  padding-top: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 20px;
}
h1 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--head);
  font-size: clamp(30px, 5.2vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}
h1 time {
  display: block;
}
.standfirst {
  font-size: 18px;
  max-width: 60ch;
  margin: 18px 0 0;
}
/* Wrapping, not shrinking: three links of unequal length in a 342px column
   were being squeezed into three columns, so "permalink for this day" broke
   across two lines while "markdown" sat alone in a column of its own. */
.daynav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.daynav a {
  color: var(--quiet);
  text-decoration: none;
}
.daynav a:hover {
  color: var(--accent-text);
  text-decoration: underline;
}

/* --- counts ------------------------------------------------------------- */
/* Hairlines on the cells, not a 1px grid gap over a tinted container: five
   counts in a two-column grid leave one empty cell in the last row, and the gap
   trick paints that as a solid block that reads as a UI element nobody put
   there. Same fix as the day list below. */
.counts ul {
  list-style: none;
  margin: 32px 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.counts li {
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.counts .n {
  display: block;
  font-family: var(--mono);
  font-size: 26px;
  color: var(--head);
  line-height: 1.1;
}
.counts .k {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--quiet);
  margin-top: 6px;
}

/* --- sections ----------------------------------------------------------- */
main {
  padding-bottom: 24px;
}
section {
  padding: 44px 0 8px;
  border-bottom: 1px solid var(--line);
}
section:last-of-type {
  border-bottom: 0;
}
h2 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--head);
  font-size: clamp(22px, 3.2vw, 28px);
  line-height: 1.2;
  margin: 0 0 14px;
}
h3.typehead {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 32px 0 12px;
  font-weight: 500;
}
.note {
  font-size: 15px;
  color: var(--quiet);
  max-width: 68ch;
  margin: 0 0 20px;
}
.note strong {
  color: var(--head);
  font-weight: 600;
}
/* The as_of line. Always on the surface, never in the flyout — design.md §1. */
.asof {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--slate);
  margin: 0 0 14px;
}

/* --- heading + its (i) --------------------------------------------------- */
/* The heading runs `display: inline` inside this wrapper so the glyph is a
   sibling in the same line box: it lands after the last word whether the
   heading takes one line or four. A grid row cannot do that — it parks the
   control at the end of the first line or in a column of its own, which is
   where it was, and a control on its own line under a heading is a second
   thing to read before reaching the section.

   The wrapper is also the panel's positioning context, which is why it is
   `relative` and why the panel can be the width of the column rather than the
   width of a 34px control. */
.hrow {
  position: relative;
  margin: 0 0 16px;
}
.hrow > h2,
.hrow > h3,
.hrow > .asof {
  display: inline;
  margin: 0;
}
.hrow-plain {
  margin-bottom: 20px;
}

/* --- the info flyout ----------------------------------------------------- */
/* Method goes here; findings, counts, citations, provenance and every caveat
   stay on the page. A native <details>, so it works with no script: keyboard,
   screen reader and no-JS all come for free and `app.js` only adds Escape,
   outside-click, and one-open-at-a-time.

   The control is the glyph and nothing else. It carried the word METHOD beside
   it, which made a pill wide enough to need its own line under the heading —
   a second thing to read on the way to the section, for a word the panel's own
   title says better. The name survives in `aria-label` and in the tooltip. */
.fly {
  display: inline-block;
  /* Inline, so it flows after the heading's last word. `position: static` on
     purpose: the panel is positioned against `.hrow`/`.chead`, which is the
     full column, not against this 34px box. */
  vertical-align: 2px;
  margin-left: 9px;
}
.fly > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 34px of target around a 22px ring. The ring is the only part that shows;
     the padding is the part a thumb hits. */
  width: 34px;
  height: 34px;
  margin: -6px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.fly > summary::-webkit-details-marker {
  display: none;
}
.fly-i {
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--quiet);
  transition: color 0.15s;
}
.fly > summary:hover .fly-i,
.fly[open] .fly-i {
  color: var(--accent-text);
}
.fly > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: 50%;
}
/* The panel. In flow on a phone — nothing it explains gets covered — and the
   same card floating from the same anchor on a wide screen. */
.fly-p {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--surface);
  padding: 15px 17px 16px;
  margin: 12px 0 2px;
}
.fly-t {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--quiet);
  margin: 0 0 9px;
}
.fly-b p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
  margin: 0 0 10px;
  max-width: 64ch;
}
.fly-b p:last-child {
  margin-bottom: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fly[open] .fly-p {
    animation: fly-in 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  @keyframes fly-in {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }
  }
}
@media (min-width: 700px) {
  /* Now it floats: anchored to the heading block, at reading measure. Click
     outside and Escape close it — see app.js. */
  .fly-p {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 30;
    width: min(54ch, 100%);
    margin: 0;
    box-shadow: 0 14px 34px rgba(3, 7, 18, 0.5);
  }
  :root[data-theme='light'] .fly-p {
    box-shadow: 0 14px 34px rgba(16, 32, 64, 0.14);
  }
}

/* --- the section nav ---------------------------------------------------- */
/* What replaced the site bar, and then replaced itself. The routes of this site
   do not make a structure worth a persistent menu, so the menu is this page's
   own sections — but a day page is four to six screens of documents, and a
   contents block that scrolls away with the masthead can only be used before
   you have read anything.

   Two shapes, one markup, no script:

     narrow   position: sticky in the flow directly under the masthead. It
              costs nothing until the masthead has scrolled off, which is the
              first moment there is anything above worth going back to — the
              objection to a sticky bar was that it takes the top of a phone
              screen on the first paint, and this one does not.
     wide     position: fixed in the left margin, outside the 860px column, so
              it costs no width and no height at all.

   app.js marks the section you are in; without it this is a list of anchors
   that work, which is the job. */
.secnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.secnav-in {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}
/* The label is for the rail. In the strip the shape says what it is, and a
   third of a phone's width spent on the words "on this page" is a third of the
   width not spent on the sections. */
.secnav-k {
  display: none;
}
.secnav-l {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.secnav-l::-webkit-scrollbar {
  display: none;
}
.secnav-l a {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--quiet);
  text-decoration: none;
  white-space: nowrap;
  padding: 11px 13px 10px;
  border-bottom: 2px solid transparent;
}
.secnav-l li:first-child a {
  padding-left: 0;
}
.secnav-l a:hover {
  color: var(--accent-text);
}
/* Where you are. The accent is the interface accent doing interface work. */
.secnav-l a[aria-current] {
  color: var(--head);
  border-bottom-color: var(--accent);
}
/* The day either side, on a day page. Same job as the masthead's daynav, kept
   reachable from eight screens down. */
.secnav-d {
  display: none;
}
@media (min-width: 1240px) {
  .secnav {
    position: fixed;
    top: 88px;
    left: max(16px, calc(50% - 596px));
    width: 164px;
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    background: none;
    border-bottom: 0;
    z-index: 20;
  }
  .secnav-in {
    padding: 0;
  }
  .secnav-k {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate);
    margin: 0 0 10px;
  }
  .secnav-l {
    display: block;
    overflow: visible;
    border-left: 1px solid var(--line);
  }
  .secnav-l a,
  .secnav-l li:first-child a {
    white-space: normal;
    line-height: 1.3;
    padding: 5px 0 5px 11px;
    border-bottom: 0;
    border-left: 2px solid transparent;
    margin-left: -1px;
  }
  .secnav-l a[aria-current] {
    border-left-color: var(--accent);
  }
  /* Stacked, not side by side: two ISO dates and their arrows do not fit
     across 164px, and a date that wraps mid-number is not a date. */
  .secnav-d {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--mono);
    font-size: 10.5px;
    white-space: nowrap;
    color: var(--slate);
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .secnav-d a {
    color: var(--quiet);
    text-decoration: none;
  }
  .secnav-d a:hover {
    color: var(--accent-text);
  }
}
/* A jump landing under the sticky strip is a jump that missed. Ignored at rail
   widths, where nothing overlaps the column. */
main section[id],
main [id^='d-'] {
  scroll-margin-top: 52px;
}

/* --- a line of facts ---------------------------------------------------- */
/* Counts belong in a row of counts, not in a sentence about counts. Mono,
   middot-separated, figure at --head and the noun at --slate — the same
   reading the chart window line already gets, so every number on the page is
   found the same way. */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--slate);
  margin: 12px 0 0;
}
.meta b {
  font-weight: 500;
  color: var(--head);
}
.meta-s {
  margin: 0 9px;
  opacity: 0.55;
}
.meta-lede {
  font-size: 13px;
  margin-top: 20px;
}
.meta-lede .meta-s {
  margin: 0 11px;
}

/* --- the mark on a link that leaves ------------------------------------- */
/* The citation line has carried an arrow on its two outbound links since the
   beginning; the document title above it — the largest link in the block, and
   the one most people click — carried nothing, so the only link that navigates
   away read as an internal one. Same mark everywhere now, sized to its own
   text rather than to the heading, so it marks the title without competing
   with it. aria-hidden: it is a convention, not a word. */
.ext {
  font-family: var(--mono);
  font-size: 0.62em;
  font-weight: 400;
  line-height: 1;
  vertical-align: 0.1em;
  margin-left: 0.35em;
  color: var(--slate);
  text-decoration: none;
}
a.out:hover .ext {
  color: var(--accent);
}

/* --- the dated list — the catalyst calendar in embryo ------------------- */
.datelist {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.datelist li {
  display: grid;
  align-items: baseline;
  gap: 4px 12px;
  grid-template-columns: 92px 46px 1fr;
  grid-template-areas: 'date rel what' '. . title' '. . who';
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.datelist time {
  grid-area: date;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--head);
}
.datelist .rel {
  grid-area: rel;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent-text);
  text-align: right;
}
.datelist .what {
  grid-area: what;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--quiet);
}
/* Underline on hover only. Sixteen underlined serif titles stacked in a
   column reads as a wall of rules rather than as a list of dates, and the
   dates are what this section is for. */
.datelist a {
  grid-area: title;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.35;
  color: var(--head);
  text-decoration: none;
}
.datelist a:hover {
  text-decoration: underline;
}
.datelist .who {
  grid-area: who;
  font-size: 13px;
  color: var(--slate);
}

/* --- a document -------------------------------------------------------- */
.doc {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 7px;
  color: var(--quiet);
}
.chip-sig {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-text);
}
.ag {
  font-size: 13px;
  color: var(--slate);
}
.doc h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 8px;
}
.doc h3 a {
  color: var(--head);
  text-decoration: none;
}
.doc h3 a:hover {
  text-decoration: underline;
}
.abstract {
  font-size: 15.5px;
  margin: 0 0 10px;
  max-width: 68ch;
}
.obs {
  list-style: none;
  margin: 10px 0;
  padding: 0;
}
.obs li {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--body);
  padding: 3px 0;
}
/* ○ hollow dot = PENDING, per the status table in design.md. The glyph carries
   the meaning as much as the hue does, so it survives greyscale and protanopia. */
.obs .dot {
  color: var(--accent);
  margin-right: 8px;
}
.obs-k {
  color: var(--quiet);
}
.obs-n {
  color: var(--slate);
}
.cite {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--slate);
}
.cite a {
  color: var(--slate);
}

/* --- lists and tables --------------------------------------------------- */
.alllist,
.pilist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.alllist li,
.pilist li {
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.alllist a,
.pilist a {
  color: var(--head);
  text-decoration: none;
}
.alllist a:hover,
.pilist a:hover {
  text-decoration: underline;
}
.who {
  color: var(--slate);
  font-size: 13px;
}
.fr {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--quiet);
  font-weight: 500;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--body);
}
.num {
  text-align: right;
  font-family: var(--mono);
}
#agencies {
  overflow-x: auto;
}

/* --- provenance --------------------------------------------------------- */
.prov {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 20px;
  margin: 0;
  font-size: 14px;
}
.prov dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--quiet);
  padding-top: 3px;
}
.prov dd {
  margin: 0;
  color: var(--body);
}
.prov .hash {
  font-family: var(--mono);
  font-size: 11.5px;
  word-break: break-all;
  color: var(--slate);
}

/* --- footer -------------------------------------------------------------- */
footer {
  padding-top: 36px;
  padding-bottom: 64px;
  border-top: 1px solid var(--line);
  margin-top: 32px;
}
footer p {
  font-size: 13.5px;
  color: var(--slate);
  max-width: 70ch;
}
.colophon {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

@media (max-width: 620px) {
  /* The columns were still 92px and 46px here, so 'title title' spanned 138px
     of a 360px screen and every document title wrapped two words at a time.
     The date and its offset take what they need; the title takes the page. */
  .datelist li {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'date rel' 'what what' 'title title' 'who who';
    gap: 6px 12px;
  }
  .datelist .rel {
    justify-self: start;
    text-align: left;
  }
  .datelist a {
    font-size: 16.5px;
  }
  .prov {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .prov dd {
    margin-bottom: 10px;
  }
  /* Tables get the full column: the cell padding was 10px of side gutter on a
     360px screen, which is where the wrapping in the agency table came from.
     Nothing here scrolls sideways — a two-line agency name is fine, a table
     that runs off the screen edge is not. */
  table {
    font-size: 14px;
  }
  th {
    padding: 8px 0;
  }
  td {
    padding: 11px 0;
  }
  th.num,
  td.num {
    padding-left: 12px;
    white-space: nowrap;
  }
  #agencies {
    overflow-x: visible;
  }
}

/* ======================================================================
 * Added with the root page, the charts, the agency pages and the
 * shareable sentences. Same rules as above: hue is interface accent only,
 * everything on these pages is Layer 1.
 * ==================================================================== */

/* --- the trailing ten business days ------------------------------------ */
/* Hairlines drawn on the cells rather than as a 1px grid gap over a tinted
   container: ten days in a four-column grid leaves two empty cells in the last
   row, and the gap trick paints those as a solid block of rule colour that
   reads as a UI element nobody put there.

   Every cell carries a bar now. It was two lines of grey mono per cell — the
   date, then "84 DOCUMENTS · 41 DATED" in uppercase at --quiet — which made
   ten identical grey blocks and left the reader to compare four-digit figures
   by reading them one at a time. The bar is the same mark the charts below
   use, scaled to the busiest day in the window, so the shape of the fortnight
   arrives before any figure does and a day we missed is a hole in that shape.
   The counts move up the scale to match: the figure is 15px at --head, the
   noun under it is the small grey thing. */
.daylist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.daylist > li {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.d-in {
  display: block;
  padding: 12px 14px 13px;
  text-decoration: none;
  border-left: 2px solid transparent;
}
/* A whole cell is the target, and it says so on hover, on focus and under a
   thumb. The accent is the interface accent: this one is a real link. */
a.d-in:hover,
a.d-in:focus-visible {
  background: var(--surface);
  border-left-color: var(--accent);
}
a.d-in:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* The date never breaks; the tag wraps under it instead. A two-column strip on
   a phone is about 150px of cell, and "2026-08-17" plus a LATEST tag does not
   fit on one line there — the date is the label, so it is the one that keeps
   its line. */
.d-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
  margin: 0;
  font-family: var(--mono);
}
.d-wd {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.d-d {
  font-size: 12.5px;
  color: var(--head);
  white-space: nowrap;
}
.d-tag {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1px 5px;
}
.d-fig {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
}
.d-track {
  flex: 1;
  min-width: 0;
  height: 8px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
/* Same mark and same colour as the charts — one bar language on the page. */
.d-bar {
  display: block;
  height: 100%;
  background: #5a6a8e;
}
:root[data-theme='light'] .d-bar {
  background: #5c6b87;
}
.d-v {
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  color: var(--head);
  font-variant-numeric: tabular-nums;
}
.d-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 6px 0 0;
}
/* A gap is stated, not hidden — same cell, same size, and the rail where the
   bar would be is dotted rather than empty, so the absence has a shape too. */
.daylist li.gap .d-d,
.daylist li.gap .d-v {
  color: var(--slate);
}
.daylist li.gap .d-track {
  background: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 5px);
}
.daylist li.gap .d-sub {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  font-style: italic;
}

/* --- charts ------------------------------------------------------------- */
/* Bars are HTML, not a scaled SVG. A 720-unit viewBox in a phone-width column
   scaled the labels to about six pixels while the same numbers below rendered
   at 14.5 — one chart, two type scales, and the smaller one carrying the data.
   Percentage widths need no coordinate system, so nothing scales and the phone
   gets the reading the desktop gets.
 *
 * There is no table under the chart any more: with the marks in HTML, the rows
 * are the table. The mono column header names the two columns the table used to
 * name, the label is a link where the row has a page, and the figure sits in
 * the same right-aligned mono column. One component, one copy of the data, and
 * the agency link is on the surface rather than inside a disclosure.
 *
 * Hierarchy, loudest first: title (serif, --head) → bars (14.5px label, mono
 * figure, --head) → window line and column header (mono, --slate/--quiet).
 * Ochre is absent at rest; it is the interface accent, and it appears on a
 * link hover, on focus, and on an open flyout. Nothing else here reacts to
 * hover or touch — a bar that lights up under a thumb and does nothing is an
 * affordance for an action that does not exist. */
.cfig {
  margin: 0 0 40px;
  padding: 0;
}
.chead {
  position: relative;
}
h3.ctitle {
  display: inline;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(18px, 4.6vw, 21px);
  line-height: 1.25;
  color: var(--head);
  margin: 0;
}
/* The window is the chart's as_of and stays on the surface, always. */
.cwindow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--slate);
  margin: 10px 0 0;
}
.cwindow .csep {
  margin: 0 8px;
  opacity: 0.55;
}
/* The column header the table used to carry. Same type as a table's <th>,
   because it is one. */
.ckey {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--quiet);
  margin: 18px 0 0;
  padding-bottom: 8px;
}
.chart {
  list-style: none;
  margin: 0;
  padding: 0;
}
.crow {
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.cl {
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--head);
  margin: 0 0 9px;
}
/* Underlined like every other link on these pages. It used not to be, on the
   grounds that five stacked underlined names above five bars read as a list of
   links with decoration attached — which was true while the underlined copy of
   the same list sat in the table below. There is no table below now, so this is
   the only place the agency page is reachable from, and a link nobody can see
   is not a link. */
.cl a {
  color: var(--head);
  text-decoration-color: var(--slate);
  text-underline-offset: 2px;
}
.cl a:hover {
  color: var(--accent-text);
  text-decoration-color: var(--accent);
}
.cbarline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.ctrack {
  display: block;
  min-width: 0;
}
/* One series, so the bar carries magnitude and the row label carries identity.
   Achromatic on purpose — design.md reserves hue for epistemic status and this
   page is Layer 1 throughout. Contrast against both surfaces is >= 3:1. */
.cbar {
  display: block;
  height: 16px;
  border-radius: 4px;
  background: #5a6a8e;
}
:root[data-theme='light'] .cbar {
  background: #5c6b87;
}
/* Same size and colour as the figures the table used to show, and the column is
   as wide as the widest value so both charts align down one edge. */
.cv {
  font-family: var(--mono);
  font-size: 14.5px;
  line-height: 1;
  color: var(--head);
  text-align: right;
  min-width: var(--cv-w, 2ch);
  font-variant-numeric: tabular-nums;
}
/* The last row closes the list, the way a table's last rule does. */
.chart .crow:last-child {
  border-bottom: 1px solid var(--line);
}

/* --- the one-prompt block ----------------------------------------------- */
.ask {
  border-top: 1px solid var(--line);
}
.promptbox {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 6px;
  padding: 14px 16px 12px;
  margin: 0 0 14px;
}
.promptbox pre {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--head);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.note.tight {
  margin-bottom: 8px;
}
code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--head);
}

/* --- buttons ------------------------------------------------------------ */
button.copy {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--quiet);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 6px 11px;
  margin-top: 12px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
button.copy:hover {
  color: var(--accent-text);
  border-color: var(--accent);
}
button.copy.done {
  color: var(--accent-text);
  border-color: var(--accent);
}

/* --- the machine-written sentence --------------------------------------- */
/* Boxed and labelled. Everything else on the page is a published field; this
   is the one thing a model wrote, and it should not be possible to screenshot
   it without the label coming along. */
.summary {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  background: var(--surface);
  padding: 14px 16px 12px;
  margin: 12px 0 18px;
}
.sumlabel {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--quiet);
  margin: 0 0 8px;
}
.sumlabel .mono {
  font-family: var(--mono);
}
.sumtext {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--head);
  margin: 0;
  max-width: 62ch;
}
.sumtext.plain {
  font-size: 15.5px;
  color: var(--body);
  margin: 0 0 8px;
}
.sumacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sumacts a {
  color: var(--quiet);
  text-decoration: none;
}
.sumacts a:hover {
  color: var(--accent-text);
  text-decoration: underline;
}
.sumacts button.copy {
  margin-top: 0;
}
.agsum {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-bottom: 6px;
}
.agsum-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}
.agsum-h a {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--head);
  text-decoration: none;
}
.agsum-h a:hover {
  text-decoration: underline;
}
.agsum-n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate);
}

/* --- agency pages ------------------------------------------------------- */
.agday {
  padding: 34px 0 8px;
  border-bottom: 1px solid var(--line);
}
.agday h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}
.agday h2 a {
  color: var(--head);
  text-decoration: none;
}
.agday h2 a:hover {
  text-decoration: underline;
}
.agday-n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--quiet);
  font-weight: 400;
}
a.bigl {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  color: var(--head);
}
/* Agency names in a document's meta line are links now, so they need to read as
   links without turning the line into a row of underlines. */
a.ag {
  text-decoration: none;
}
a.ag:hover {
  color: var(--accent-text);
  text-decoration: underline;
}
.doc-meta .ag + .ag::before {
  content: '·';
  color: var(--slate);
  margin: 0 6px 0 2px;
}
.masthead .eyebrow a {
  color: inherit;
  text-decoration: none;
}
.masthead .eyebrow a:hover {
  text-decoration: underline;
}
.eyebrow-s {
  margin: 0 9px;
  opacity: 0.55;
}
.daynav span {
  color: var(--slate);
}

/* ======================================================================
 * The ⌘K palette.
 *
 * Ninety-five agency pages and a page per publication day, and until now the
 * only way into any of it was an index you scrolled. This is the jump.
 *
 * It obeys the same two rules as everything above. Hue is the interface accent
 * and nothing else — ochre marks the matched substring, the focused field and
 * the active row, which are all "where your attention is", and no status colour
 * appears anywhere in it, because a search result is not a finding. And a
 * machine-checkable string is mono: a publication date and an FR document
 * number are set in JetBrains Mono in the results, a document title is prose
 * and is set in Inter.
 *
 * Empty in the markup, filled by `palette.js` from one fetched index. Nothing
 * in this section grows as the archive does.
 * ====================================================================== */

/* The theme toggle. Same reasoning as the search launcher below: fixed rather
   than in the masthead, because there are five different mastheads on this
   site and this belongs to all of them. Top-right rather than bottom-right so
   the two floating controls never fight for the same corner — gov-graph and
   the data model page already use this shape and label for the same button. */
.chrome-btn {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--surface);
  color: var(--head);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
  line-height: 1;
}
.chrome-btn:hover {
  border-color: var(--accent);
}
.chrome-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.theme-fab {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 50;
  box-shadow: 0 6px 18px rgba(3, 7, 18, 0.4);
}
:root[data-theme='light'] .theme-fab {
  box-shadow: 0 6px 18px rgba(16, 32, 64, 0.12);
}
@media (max-width: 620px) {
  .theme-fab {
    top: 10px;
    right: 10px;
    padding: 6px 8px;
  }
}

/* The launcher. Bottom-right rather than in the masthead: there are five
   different mastheads on this site and the palette belongs to all of them, and
   the top of the viewport already carries the sticky section strip on a phone.
   Rendered hidden; palette.js unhides it, like the copy buttons. */
.pal-open {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(3, 7, 18, 0.4);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--quiet);
  cursor: pointer;
}
:root[data-theme='light'] .pal-open {
  box-shadow: 0 6px 18px rgba(16, 32, 64, 0.12);
}
.pal-open:hover {
  color: var(--accent-text);
  border-color: var(--accent);
}
kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--quiet);
}

/* The dialog. */
.pal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(24px, 9vh, 96px) 16px 16px;
}
.pal[hidden] {
  display: none;
}
.pal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.72);
}
:root[data-theme='light'] .pal-scrim {
  /* Deep enough that a white dialog on a near-white page reads as *over* it.
     A modal that does not separate from what it covers is a floating panel. */
  background: rgba(16, 32, 64, 0.42);
}
.pal-box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(660px, 100%);
  max-height: min(70vh, 620px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(3, 7, 18, 0.55);
  overflow: hidden;
}
:root[data-theme='light'] .pal-box {
  box-shadow: 0 24px 60px rgba(16, 32, 64, 0.24);
}
@media (prefers-reduced-motion: no-preference) {
  .pal-box {
    animation: pal-in 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  @keyframes pal-in {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
}

/* The eyebrow of this surface, in the system's eyebrow: mono, caps, ochre. */
.pal-title {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
  padding: 16px 18px 0;
}
/* The field is labelled for a screen reader; the placeholder is an example,
   not a label, and an example is not a name. */
.pal-lbl {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pal-f {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 13px;
  border-bottom: 1px solid var(--line);
}
/* The focus indicator for the field is the rule under it, rather than a ring
   drawn around a control that is auto-focused the instant the dialog opens. */
.pal-f:focus-within {
  border-bottom-color: var(--accent);
}
.pal-q {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.4;
  color: var(--head);
}
.pal-q::placeholder {
  color: var(--quiet);
  opacity: 0.75;
}
.pal-q:focus-visible {
  outline: none;
}
.pal-x {
  flex: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--quiet);
  cursor: pointer;
}
.pal-x:hover {
  color: var(--accent-text);
  border-color: var(--accent);
}

.pal-l {
  flex: 1;
  min-height: 0;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Three columns: what kind of thing this is, what it is, and the string you
   would cite it by. The middle column is the only one that flexes, and it
   truncates rather than wrapping — uniform rows are what makes a list of
   twenty scannable in the second before you press Enter. */
.pal-r {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 9px 18px;
  border-left: 2px solid transparent;
  cursor: pointer;
}
.pal-r[aria-selected='true'] {
  background: rgba(217, 150, 43, 0.16);
  border-left-color: var(--accent);
}
.pal-c {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--quiet);
  overflow: hidden;
  text-overflow: ellipsis;
}
.pal-t {
  min-width: 0;
}
.pal-lb {
  display: block;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--head);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A date is a machine-checkable string, so it is set like one. */
.pal-lb.pal-mono {
  font-family: var(--mono);
  font-size: 13.5px;
}
.pal-lb mark {
  background: none;
  color: var(--accent-text);
}
.pal-sb {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pal-m {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--quiet);
  white-space: nowrap;
}
.pal-s,
.pal-hint {
  margin: 0;
  padding: 9px 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--quiet);
}
.pal-s:empty {
  display: none;
}
.pal-hint {
  border-top: 0;
  padding-top: 0;
  line-height: 2;
}
/* A key and the word it does are one unit. Wrapped apart, "esc" ends a line and
   "close" starts the next, which reads as two separate things. */
.pal-kk {
  white-space: nowrap;
  margin-right: 12px;
}
/* No page behind a modal should scroll under a thumb. */
:root.pal-lock,
:root.pal-lock body {
  overflow: hidden;
}
/* Nothing behind a modal should still be offering to open it. */
:root.pal-lock .pal-open {
  display: none;
}

@media (max-width: 620px) {
  /* No ⌘K on a phone, so the shortcut is not offered there — but the launcher
     matters more, not less, because there is no keyboard to open it with. */
  .pal-open kbd {
    display: none;
  }
  /* 38 characters of tracked-out mono is one character too wide for a 390px
     screen, and the wrap lands after "or a". */
  .pal-title {
    letter-spacing: 0.1em;
    padding: 14px 14px 0;
  }
  .pal-f {
    padding: 11px 14px 12px;
  }
  .pal-s {
    padding: 9px 14px;
  }
  .pal-r {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 14px;
  }
  .pal-c {
    grid-column: 1 / -1;
  }
  .pal-hint {
    display: none;
  }
}

/* Where a search result lands. Arriving on a screen of seventy titles with no
   sign of which one you asked for is not arriving. */
.alllist li:target {
  border-left: 2px solid var(--accent);
  margin-left: -12px;
  padding-left: 10px;
}

/* ── /plain/ — the plain-language page ───────────────────────────────────────
   One entry per term. The visual job here is narrower than it looks: a reader
   who does not know the vocabulary needs to tell the *definition* apart from
   the *citation* at a glance, because the definition is ours and the citation
   is somebody else's. So the definition gets body size and the citation gets
   the mono treatment every machine-checkable string on this site gets.

   No hue is introduced. design.md reserves colour for the five epistemic
   states, and "which kind of authority defines this word" is not one of them —
   so the distinction is carried by the chip's words, not by a new colour. */
.pl-e {
  border-top: 1px solid var(--line);
  padding: 18px 0 4px;
  max-width: 68ch;
}
.pl-e h3 {
  color: var(--head);
  font-size: 17px;
  margin: 0 0 8px;
}
.pl-e h3 a {
  color: inherit;
  text-decoration: none;
}
.pl-e h3 a:hover {
  color: var(--accent-text);
}
/* The definition itself: the one line that has to work with nothing around it. */
.pl-d {
  font-size: 16px;
  margin: 0 0 10px;
  max-width: 62ch;
}
.pl-f {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--slate);
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pl-w {
  color: var(--quiet);
}
/* Landing from a link elsewhere on the site. Same reasoning as .alllist li:target
   — arriving at a page of forty-two entries with no sign of which one you asked
   for is not arriving. */
.pl-e:target {
  border-left: 2px solid var(--accent);
  margin-left: -12px;
  padding-left: 10px;
}

/* --- the memoranda surface (/presidential/) -------------------------------
 *
 * Same stylesheet rather than a second one: that page is one more instrument
 * on this panel, built from the same components in daily/lib/render.mjs, and a
 * separate sheet would let the two drift apart a rule at a time.
 *
 * The hue rule at the top of this file governs here too, and there is exactly
 * one accented state. `published` and `absent_from_federal_register` are Layer
 * 1 facts — presence or absence in a published index — so they render
 * achromatic like everything else. `undetermined_within_lag_window` is the
 * not-yet-arrived case, the same thing PENDING already means on a date in the
 * future, so it gets the ochre and nothing else does.
 */
.chip-pending {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-text);
}
.counts .n-pending {
  color: var(--accent-text);
}

/* What each state is claiming, printed under the counts. A reader who does not
   know what "never printed" asserts cannot evaluate it, and a legend on some
   other page is a legend nobody reads. */
.statekey {
  margin: 18px 0 0;
  display: grid;
  gap: 4px 14px;
  font-size: 13px;
}
.statekey dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--head);
}
.statekey dd {
  margin: 0 0 10px;
  color: var(--body);
}
@media (min-width: 46rem) {
  .statekey {
    grid-template-columns: minmax(12rem, 15rem) 1fr;
  }
  .statekey dt {
    padding-top: 2px;
  }
  .statekey dd {
    margin-bottom: 4px;
  }
}

/* The doc_uid, shown rather than hidden. The whole argument of that corpus is
   that the identifier is derived from the document's own text and is therefore
   checkable; printing it is the difference between a claim and an assertion. */
.ident {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--slate);
}
.ident code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--quiet);
}

.more {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent-text);
}

/* The one cross-link out of the daily issue, on the Executive Office block
   only. Sits below the sentence it qualifies, quiet enough not to compete with
   the agency name above it and mono on the link so it reads as navigation
   rather than as another fact in the block. */
.crosslink {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
}
.crosslink a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  white-space: nowrap;
}
.crosslink-w {
  display: block;
  color: var(--slate);
  margin-top: 2px;
}