/* ============================================================
   Intratec Newsroom — theme + design layer
   1) Orange brand overrides. Retype's unlicensed build ships a
      slightly different default blue on every build, so these
      were generated by detecting the accent family dynamically
      (tools/... regenerate note: anchor = :root --base-link).
      The .dark block re-asserts every dark value the light
      block would otherwise stomp. Both variable blocks carry
      RAISED SPECIFICITY (html:root / :root.dark) on purpose:
      Retype navigates with Turbo, whose head-merge appends a
      duplicate retype.css AFTER this file on every client-side
      navigation (each page links it by a different relative
      href), so winning by document order is not reliable —
      only winning by specificity is.
   2) Newsroom components lifted from the approved design mockup
   ============================================================ */

/* ---- 1a. Variable overrides — light ---- */
html:root {
  --badge-base: #FFEBDB;
  --badge-base-border: #FEDABC;
  --badge-base-border-hover: #FEA358;
  --badge-base-hover: #FFEBDB;
  --badge-base-text: #FD7E14;
  --badge-base-text-hover: #FD7E14;
  --badge-info-border: #FD7E14;
  --badge-info-border-hover: #FEBE89;
  --badge-info-text: #FD7E14;
  --badge-info-text-hover: #FEBE89;
  --badge-primary: #FFEAD8;
  --badge-primary-border: #FED9BA;
  --badge-primary-border-hover: #FEA357;
  --badge-primary-hover: #FFEAD8;
  --badge-primary-text: #F57A13;
  --badge-primary-text-hover: #F57A13;
  --base-50: #FD7E14;
  --base-item-bg-active: #EEF1F4;
  --base-item-bg-hover: #F4F6F8;
  --base-link: #57606C;
  --base-link-hover: #21262D;
  --body-link-decoration-color: #C6CCD4;
  --body-link-decoration-color-hover: #57606C;
  --branding-label-bg: #F2F4F6;
  --branding-label-border: #C6CCD4;
  --branding-label-text: #57606C;
  --button-base: #FD7E14;
  --button-base-hover: #CC6610;
  --button-base-text: #FFF2E7;
  --button-info-border: #FD7E14;
  --button-info-border-hover: #FEBE89;
  --button-info-text: #FD7E14;
  --button-info-text-hover: #FEBE89;
  --button-primary: #F57A13;
  --button-primary-hover: #CB6510;
  --button-primary-text: #FFF2E8;
  --callout-base: #FD7E14;
  --callout-info: #FEBE89;
  --callout-primary: #F57A13;
  --footnote-popper-bg: #FFEBDB;
  --footnote-popper-border: #FEDABC;
  --footnote-popper-code-border: #FEDABC;
  --footnote-popper-link: #FD7E14;
  --footnote-popper-link-hover: #CC6610;
  --footnote-popper-ref-open-bg: #FFEBDB;
  --footnote-popper-ref-open-border: #FEDABC;
  --footnote-popper-ref-open-text: #FD7E14;
  --footnote-popper-text: #FD7E14;
  --grid: #FB7D14;
  --list-checked: #FD7E14;
  --nav-item-border-active: #FD7E14;
  --nav-item-button-active-hover: #E2E6EB;
  --pager-bg-active: #FD7E14;
  --pager-bg-active-hover: #FEA358;
  --pager-border-active: #E17012;
  --pager-border-active-hover: #FD7E14;
  --pager-text: #57606C;
  --pager-text-hover: #57606C;
  --search-highlight-bg: #E8EBEF;
  --search-result-active-ring: #D5DAE0;
  --selection-bg: #D9DEE4;
  --selector: #FB7D14;
  --steps-step-number-bg: #FD7E14;
  --steps-step-number-border: #FD7E14;
  --tab-border-active: #57606C;
  --tab-text-active: #57606C;
  --tab-text-hover: #57606C;
  --toc-border-active: #57606C;
  --toc-text-active: #57606C;
  --toc-text-hover: #57606C;
  /* the retype.yml theme block (Pro-gated locally) */
  --button-warning: #FD7E14;
  --button-warning-hover: #E35502;
  --button-warning-text: #FFFFFF;
  /* gray-canvas test: page runs light gray, surfaces (cards, rows,
     inputs) stay white so they pop against the canvas */
  --base-bg: #F2F4F6;
  --nr-surface: #FFFFFF;
  /* mockup tokens */
  --nr-accent: #FD7E14;
  --nr-accent-hover: #E35502;
  /* graphite type accent — the newsroom's one deliberate departure
     from the sibling Retype sites: orange stays on fills/logo,
     accent TYPE runs gray */
  --nr-ink: #57606C;
  --nr-ink-hover: #21262D;
  --nr-thumb-bg: #F6F5F3;
  --nr-thumb-ink: #57534E;
  --nr-thumb-dim: #D6D3D0;
  --nr-shadow: 0 10px 28px rgba(28, 27, 30, 0.08);
}

/* ---- 1b. Variable overrides — dark ---- */
:root.dark {
  --badge-base-hover: #FEDEC4;
  --badge-primary-hover: #FEDCC1;
  --base-item-bg-active: #303130;
  --base-item-bg-hover: #2C2C2E;
  --base-link: #A6AEBB;
  --base-link-hover: #E4E8ED;
  --body-link-decoration-color: #4A5361;
  --body-link-decoration-color-hover: #A6AEBB;
  --branding-label-bg: transparent;
  --branding-label-border: #A6AEBB;
  --branding-label-text: #A6AEBB;
  --nav-item-button-active-hover: #3A4047;
  --footnote-popper-link-hover: #E17B29;
  --pager-bg-active: #CC6F25;
  --pager-bg-active-hover: #FD8A2E;
  --pager-border-active: #96521B;
  --pager-text: #C4C3C4;
  --pager-text-hover: #C4C3C4;
  --search-highlight-bg: #3C4450;
  --search-result-active-ring: #2A2A2B;
  --selection-bg: #46505E;
  --tab-border-active: #A6AEBB;
  --tab-text-active: #A6AEBB;
  --tab-text-hover: #A6AEBB;
  --toc-border-active: #A6AEBB;
  --toc-text-active: #A6AEBB;
  --toc-text-hover: #A6AEBB;
  --button-warning: #FD8A2E;
  --button-warning-hover: #FFA257;
  --button-warning-text: #1C1B1E;
  /* re-assert: the :root gray-canvas values would otherwise stomp dark */
  --base-bg: #111213;
  --nr-surface: #111213;
  --nr-accent: #FD8A2E;
  --nr-accent-hover: #FFA257;
  --nr-ink: #A6AEBB;
  --nr-ink-hover: #E4E8ED;
  --nr-thumb-bg: #2A282D;
  --nr-thumb-ink: #B6B0AA;
  --nr-thumb-dim: #48444A;
  --nr-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* ---- 1c. Hard-coded blues in compiled utilities ---- */
.text-base-500 { color: #57606C !important; }
.hover\:text-base-500:hover { color: #57606C !important; }
.dark .text-base-500 { color: #A6AEBB !important; }
.dark .hover\:text-base-500:hover { color: #A6AEBB !important; }
.bg-base-500 { background-color: #FD7E14 !important; }
.border-base-500 { border-color: #FD7E14 !important; }
.retype-markdown nav.breadcrumb ol li a:hover { color: #57606C !important; }
.dark .retype-markdown nav.breadcrumb ol li a:hover { color: #A6AEBB !important; }
.doc-callout.doc-callout-contrast a { color: #FEBF8A !important; }
.dark .doc-callout.doc-callout-contrast a { color: #FD7E14 !important; }
.member-links-dropdown a[data-v-97467732] { color: #57606C !important; }
.dark .member-links-dropdown a[data-v-97467732] { color: #A6AEBB !important; }

/* ============================================================
   2. Newsroom components — from the approved design mockup
   ============================================================ */

/* ---- Index lede ---- */
.nr-lede {
  font-size: 17px;
  color: var(--base-text-muted);
  margin: 0 0 34px;
  max-width: 60ch;
}

/* ---- Card grid ---- */
.nr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 44px;
}
@media (max-width: 880px) {
  .nr-grid { grid-template-columns: 1fr; }
}
.nr-card {
  display: flex;
  flex-direction: column;
  background: var(--nr-surface);
  border: 1px solid var(--base-border);
  border-radius: 10px;
  overflow: hidden;
  color: inherit !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.nr-card:hover {
  border-color: var(--nr-accent);
  box-shadow: var(--nr-shadow);
  transform: translateY(-2px);
}
.nr-thumb {
  aspect-ratio: 16 / 8.4;
  background: var(--nr-thumb-bg);
  border-bottom: 1px solid var(--base-border);
}
.nr-thumb svg { width: 100%; height: 100%; display: block; }
.nr-card .nr-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nr-thumb .bar { fill: var(--nr-thumb-dim); }
.nr-thumb .bar.mid { fill: var(--nr-thumb-ink); opacity: 0.5; }
.nr-thumb .hot { fill: var(--nr-accent); }
.nr-thumb .line { stroke: var(--nr-thumb-ink); opacity: 0.45; }
.nr-thumb .dash { stroke: var(--base-text-muted); stroke-dasharray: 3 4; }
.nr-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 16px;
  flex: 1;
}
.nr-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--nr-ink);
}
.nr-card-title {
  font-size: 17.5px;
  line-height: 1.35;
  font-weight: 650;
  color: var(--base-text-strong);
  text-wrap: balance;
}
.nr-card:hover .nr-card-title { color: var(--nr-ink-hover); }
.nr-card-excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--base-text-muted);
}
.nr-card-meta {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--base-text-muted);
  font-variant-numeric: tabular-nums;
}
.nr-card-meta .go { color: var(--nr-ink); font-weight: 600; }

/* ---- Release article furniture ---- */
.nr-art-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.nr-art-meta .dot { color: var(--base-text-muted); }
.nr-art-date {
  font-size: 13px;
  color: var(--base-text-muted);
  font-variant-numeric: tabular-nums;
}
.nr-dateline { font-weight: 600; color: var(--base-text-strong); }

/* Pull-quote — orange left border, larger text, plain cite */
.retype-markdown blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--nr-accent);
  background: transparent;
  font-style: normal;
}
.retype-markdown blockquote p {
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--base-text-strong);
  margin: 0 0 10px;
}
.retype-markdown blockquote cite {
  display: block;
  font-style: normal;
  font-size: 13.5px;
  color: var(--base-text-muted);
}

/* ---- Manual prev/next pager between releases ---- */
.nr-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 46px 0 8px;
}
.nr-pager a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 18px;
  border: 1px solid var(--base-border);
  border-radius: 9px;
  color: inherit !important;
  text-decoration: none !important;
  transition: border-color 0.12s ease;
}
.nr-pager a:hover { border-color: var(--nr-accent); }
.nr-pager .dir { font-size: 12px; color: var(--base-text-muted); }
.nr-pager .name { font-size: 14px; font-weight: 600; color: var(--base-text-strong); }
.nr-pager a:hover .name { color: var(--nr-ink); }
.nr-pager .next { text-align: right; grid-column: 2; }

/* ---- Header wordmark — natural aspect, 40px tall, matching the Help
        Center (no size keys there, so Retype's 40px cap rules; measured
        ~114x40 on help.intratec.us). The PNG is 2490x888; without this
        Retype stretches it to its full natural width ---- */
#retype-branding-logo img {
  width: auto !important;
  height: 40px !important;
  max-height: 40px !important;
}

/* ---- Newsroom2 (layout candidate B): full-width horizontal cards,
        thumb left — same content as the card grid ---- */
.nr-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 26px;
}
.nr-row {
  display: grid;
  grid-template-columns: minmax(230px, 330px) 1fr;
  border: 1px solid var(--base-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--nr-surface);
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease,
              transform 0.12s ease;
}
.nr-row:hover {
  border-color: var(--nr-accent);
  box-shadow: 0 6px 18px var(--nr-shadow);
  transform: translateY(-2px);
}
.nr-row .nr-thumb {
  aspect-ratio: auto;
  height: 100%;
  min-height: 190px;
  border-radius: 0;
  /* the img is taken out of flow so its intrinsic size can never
     inflate the row height (portrait artwork was doing exactly that) */
  position: relative;
  overflow: hidden;
}
/* Insights cards carry a real image instead of an SVG motif */
.nr-row .nr-thumb img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Chart/table screenshots read better whole than cropped; keep a white
   plate behind them in dark mode too. */
.nr-row .nr-thumb.pad {
  background: #ffffff;
}
.nr-row .nr-thumb.pad img {
  object-fit: contain;
  padding: 12px 16px;
  box-sizing: border-box;
}
.nr-row-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 26px;
}
.nr-row-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--base-text-strong);
  transition: color 0.12s ease;
}
.nr-row:hover .nr-row-title { color: var(--nr-ink-hover); }
.nr-row-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--base-text-muted);
}
.nr-row-date {
  margin-top: auto;
  padding-top: 10px;
  font-size: 13px;
  color: var(--base-text-muted);
}
@media (max-width: 760px) {
  .nr-row { grid-template-columns: 1fr; }
  .nr-row .nr-thumb { min-height: 0; height: auto; aspect-ratio: 16/8.4; }
}

/* ---- Articles (Insights / News): centered figures with captions ---- */
.nr-fig {
  margin: 30px auto;
  text-align: center;
}
.nr-fig img {
  display: inline-block;
  max-width: 100%;
}
.nr-fig figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--base-text-muted);
}

/* ---- Data charts (outreach/content/scripts/press_chart_render.py) ----
   The SVG is inlined into the page so it inherits the site's font and reads
   these custom properties; that is what lets one chart follow the light/dark
   theme instead of shipping as a fixed-color raster. ---- */
.nr-chart {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
  margin: 8px 0;
  /* the context-bar color is a variable rather than a .dark override so the
     highlighted bar cannot lose to it on specificity */
  --chart-bar: #C9CDD3;
}
.dark .nr-chart { --chart-bar: #525C6B; }
.nr-chart .bar { fill: var(--chart-bar); }
.nr-chart .bar.hi { fill: var(--nr-accent); }
.nr-chart .axis { stroke: var(--base-border); stroke-width: 1; }
.nr-chart .lbl {
  font-size: 13.5px;
  fill: var(--base-text);
  text-anchor: end;
  dominant-baseline: middle;
}
.nr-chart .val {
  font-size: 13.5px;
  font-weight: 600;
  fill: var(--base-text-strong);
  dominant-baseline: middle;
  font-variant-numeric: tabular-nums;
}
.nr-chart .t {
  font-size: 15.5px;
  font-weight: 650;
  fill: var(--base-text-strong);
}
.nr-chart .s,
.nr-chart .note {
  font-size: 12.5px;
  fill: var(--base-text-muted);
}
.nr-chart .span {
  fill: none;
  stroke: var(--nr-ink);
  stroke-width: 1.5;
}
.nr-chart .mult {
  font-size: 16px;
  font-weight: 700;
  fill: var(--nr-ink-hover);
  dominant-baseline: middle;
}
/* line (time-series) charts: dashed path between the edition's anchor years —
   the dots are data, the stroke is indicative */
.nr-chart .trend {
  fill: none;
  stroke: var(--nr-accent);
  stroke-width: 2.5;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
}
.nr-chart .dot {
  fill: var(--nr-accent);
}
/* group label inside a row chart ("THE FIVE CHEAPEST" / "THE FIVE DEAREST") */
.nr-chart .grp {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  fill: var(--base-text-muted);
}
/* landscape column layout (full-ranking series, 15+ figures): only the
   extremes carry names, under the axis */
.nr-chart .xlbl {
  font-size: 13px;
  fill: var(--base-text);
}
.nr-chart .guide {
  stroke: var(--nr-ink);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
  fill: none;
}
.nr-chart-thumb .thumb-mult {
  font-size: 26px;
  font-weight: 700;
  fill: var(--nr-ink-hover);
  dominant-baseline: middle;
  text-anchor: middle;
}
.nr-chart-thumb .thumb-cap {
  font-size: 10.5px;
  fill: var(--base-text-muted);
  dominant-baseline: middle;
  text-anchor: middle;
}

/* ---- Press Releases: filter bar (report + market dropdowns, live
        search) — logic in static/newsroom-filter.js ---- */
.nr-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
}
.nr-filterbar .nr-select,
.nr-filterbar .nr-search {
  box-sizing: border-box;
  height: 44px;
  font-size: 14px;
  line-height: 1.3;
  padding: 0 12px;
  border: 1px solid var(--base-border);
  border-radius: 8px;
  background-color: var(--nr-surface);
  color: var(--base-text);
}
/* Retype styles select arrows with its own background-image (and tiles it
   in dark mode once our background shorthand resets the repeat), so take
   the arrow over entirely. */
.nr-filterbar .nr-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
}
.dark .nr-filterbar .nr-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239aa2af' stroke-width='1.6' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
}
.nr-filterbar .nr-search {
  flex: 1;
  min-width: 220px;
}
.nr-filterbar .nr-select:hover,
.nr-filterbar .nr-search:hover {
  border-color: var(--nr-accent);
}
.nr-filterbar .nr-select:focus-visible,
.nr-filterbar .nr-search:focus-visible {
  outline: 2px solid var(--nr-accent);
  outline-offset: 1px;
  border-color: var(--nr-accent);
}
.nr-filter-count {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--base-text-muted);
}
.nr-empty {
  margin-top: 26px;
  padding: 34px 20px;
  border: 1px dashed var(--base-border);
  border-radius: 12px;
  text-align: center;
  color: var(--base-text-muted);
}

/* ---- Media Kit: logo tiles (each tile carries its own background so
        black logos read in dark mode and white logos read in light) ---- */
.nr-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0 38px;
}
@media (max-width: 900px) {
  .nr-logo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .nr-logo-grid { grid-template-columns: 1fr; }
}
.nr-logo-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--base-border);
  border-radius: 9px;
  overflow: hidden;
  text-decoration: none !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.nr-logo-tile:hover {
  border-color: var(--nr-accent);
  box-shadow: 0 4px 14px var(--nr-shadow);
}
.nr-logo-tile .box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 18px 22px;
}
.nr-logo-tile.light .box { background: #ffffff; }
.nr-logo-tile.dark .box { background: #111827; }
.nr-logo-tile .box img {
  max-height: 52px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.nr-logo-tile .name {
  padding: 8px 12px;
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--base-text-muted);
  background: var(--nr-surface);
  border-top: 1px solid var(--base-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nr-logo-tile:hover .name { color: var(--nr-ink); }

/* ---- Media Kit: the attribution block is a Retype code fence (for its
        native copy button); make it read as quotable prose, not terminal ---- */
.retype-markdown pre {
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
  background: #f4f5f7 !important;
  border: 1px solid var(--base-border);
}
.dark .retype-markdown pre {
  background: #161d29 !important;
}
.retype-markdown pre code {
  white-space: pre-wrap;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--base-text) !important;
  background: transparent !important;
}

/* ---- Media Kit: company facts ---- */
dl.nr-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 26px;
  margin: 18px 0;
  padding: 16px 20px;
  border: 1px solid var(--base-border);
  border-radius: 9px;
  width: fit-content;
}
dl.nr-facts dt,
dl.nr-facts dd {
  border: 0 !important;      /* retype's base dl styling draws row rules */
  padding: 0 !important;
}
dl.nr-facts dt {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--base-text-muted);
  align-self: baseline;
}
dl.nr-facts dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--base-text-strong);
  align-self: baseline;
  white-space: nowrap;
}

/* ---- [!button] rows: space between adjacent buttons (Retype renders
        them flush against each other) ---- */
.retype-markdown a[class*="bg-button-"] {
  margin-right: 10px;
  margin-bottom: 10px;
}

/* ---- Secondary buttons as outline (the mockup's .btn-line) ---- */
a.bg-button-secondary {
  background: var(--nr-surface) !important;
  border: 1px solid var(--base-border);
  color: var(--base-text) !important;
}
a.bg-button-secondary:hover {
  background: var(--nr-surface) !important;
  border-color: var(--nr-ink);
  color: var(--nr-ink) !important;
}

/* ---- The front-matter `description` is kept for <meta>/OG tags only;
        Retype also prints it as a visible subtitle, which duplicates the
        lede (index) and the opening paragraph (releases) ---- */
#retype-page-description { display: none; }

/* ---- Active nav item — the header entry whose section you are reading.
   Set by the marker script in _includes/head.html, never by Retype.
   Ported from the Help Center's head.html (same mechanism, same selectors);
   colors differ on purpose: the newsroom's accent TYPE is graphite, so the
   active tab darkens and the underline follows the font via currentColor. ---- */
#retype-header-nav > ul > li > a[data-active-nav],
#retype-sidebar-left .mt-auto nav > ul > li > a[data-active-nav] {
  color: var(--nr-ink-hover) !important;
  font-weight: 600;
}
#retype-header-nav > ul > li > a[data-active-nav] { position: relative; }
#retype-header-nav > ul > li > a[data-active-nav]::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.25rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}