/* ============================================================================
   /blog/<slug> — the article page.

   One editorial layout for every post: a white masthead band under the
   breadcrumb, then the prose in a reading column with a sticky rail beside it.
   Everything is scoped under .mn-bp inside the shared resource-hub shell, so
   this sheet is inert on every other page that loads it.

   ⛔ Colours come from the shell's own tokens (--ink, --border, --blue-600 and
   the rest, declared on .mn-res-content). Two greys the shell has no token for
   are declared once at the top of .mn-bp rather than repeated down the file.

   ⭐ THE BANDS BLEED, THE WORDS DO NOT. Same construction the hub hero uses:
   .mn-bp bleeds to the viewport edges out of .content's padding, and each band
   re-centres its own words on the navbar's own box, 1280px read through
   --mn-nav-gutter. The design was drawn on a 1180px column; it is widened here
   so the H1 starts on the exact x the wordmark and the breadcrumb do. Measured
   at 1440: wordmark 112, breadcrumb 112, H1 112, and the rail's right edge lands
   on the breadcrumb bar's. On the design's own 1180 every one of those stepped
   50px inboard of the bar above it, which is the fault --mn-nav-gutter exists to
   prevent. The reading column is unaffected: the prose is capped in ch, not by
   the grid, and measures the same 723px either way.
   ========================================================================== */

.mn-res-content .mn-bp {
  /* Reading-page greys the shell has no token for. --ink (#0d1526) is right for
     a heading and too hard for 19px body text set at 1.75 line-height. */
  --mn-bp-body-ink: #1a2438;
  --mn-bp-dek-ink: #3d5875;
  --mn-bp-measure: 1280px;

  /* Out to both viewport edges. .main is max-width 1280 centred with no sidebar
     offset, so 50% - 50vw is exactly the distance back out; .mn-res-content
     clips horizontally, so the scrollbar's share of 100vw cannot open a
     sideways scroll. The negative top margin cancels .content's padding so the
     masthead meets the breadcrumb bar with no seam. */
  margin-inline: calc(50% - 50vw);
  margin-top: -1.75rem;
}

.mn-res-content .mn-bp-in {
  max-width: var(--mn-bp-measure);
  margin-inline: auto;
  padding-inline: var(--mn-nav-gutter, 32px);
}

/* ── Reading progress ──────────────────────────────────────────────────────
   Parks on the bottom edge of the breadcrumb bar and stays there for the whole
   article. Height is cancelled by the negative margin so it costs the masthead
   no vertical space.

   --mn-bp-crumb-h is written by the page's own script from the bar's MEASURED
   height, because the bar is not one height: 60px on desktop, 46px on a phone
   where it wraps. The fallback is the desktop height, which is right until the
   script runs and right forever without JavaScript on a desktop.

   ⭐ IT FOLLOWS THE BAR UP, IT DOES NOT LEAVE WITH IT. The crumb bar parks
   itself off the top on the way down and comes back on the way up (.topbar in
   resource-modern-shell.css), which is exactly the stretch a reader is reading
   and the one moment "how much is left" is worth knowing. Hiding the line with
   the bar would have made it visible only while navigating. Leaving it parked
   at 58px with the bar gone would read as a stray rule across the page. So it
   travels the bar's own distance, on the bar's own 0.24s ease, and lands flush
   against the top of the viewport as the only chrome left on screen. */
.mn-res-content .mn-bp-progress {
  position: sticky;
  top: calc(var(--mn-bp-crumb-h, 3.75rem) - 2px);
  z-index: 51;
  height: 2px;
  margin-bottom: -2px;
  background: transparent;
  pointer-events: none;
  transition: transform 0.24s ease;
  will-change: transform;
}

.mn-res-content .mn-bp-progress > span {
  display: block;
  height: 100%;
  width: var(--mn-bp-read, 0%);
  background: var(--blue-600);
}

.mn-res-content .topbar.is-crumbbar-away ~ .content .mn-bp-progress {
  transform: translateY(calc(2px - var(--mn-bp-crumb-h, 3.75rem)));
}

@media (prefers-reduced-motion: reduce) {
  .mn-res-content .mn-bp-progress {
    transition: none;
  }
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */

.mn-res-content .mn-bp-head {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.mn-res-content .mn-bp-head .mn-bp-in {
  padding-top: 34px;
}

.mn-res-content .mn-bp-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 15px;
}

.mn-res-content .mn-bp-kicker a {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--blue-100);
  border: 1px solid var(--border);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue-600);
  transition: background 0.14s, border-color 0.14s;
}

.mn-res-content .mn-bp-kicker a:hover {
  background: var(--blue-200);
  border-color: var(--blue-200);
}

.mn-res-content .mn-bp-h1 {
  font-family: var(--f-display);
  font-size: 2.6rem;
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 0 0 1rem;
  max-width: 24ch;
  text-wrap: pretty;
}

.mn-res-content .mn-bp-dek {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--mn-bp-dek-ink);
  margin: 0 0 1.5rem;
  max-width: 62ch;
  text-wrap: pretty;
}

.mn-res-content .mn-bp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding-bottom: 22px;
}

.mn-res-content .mn-bp-byline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mn-res-content .mn-bp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--mn-hero-grad);
  color: var(--white);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.mn-res-content .mn-bp-byline-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.mn-res-content .mn-bp-byline-role {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 1px;
}

.mn-res-content .mn-bp-stamps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-3);
}

.mn-res-content .mn-bp-stamps .dot {
  color: #c3d2e5;
}

.mn-res-content .mn-bp-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.mn-res-content .mn-bp-share a,
.mn-res-content .mn-bp-share button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--white);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.mn-res-content .mn-bp-share .is-icon {
  width: 36px;
  padding: 0;
}

.mn-res-content .mn-bp-share a:hover,
.mn-res-content .mn-bp-share button:hover {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-600);
}

.mn-res-content .mn-bp-share svg {
  display: block;
  flex-shrink: 0;
}

.mn-res-content .mn-bp-copy-status {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
}

.mn-res-content .mn-bp-copy-status:empty {
  display: none;
}

/* ── Column layout ────────────────────────────────────────────────────────── */

.mn-res-content .mn-bp-body {
  padding-bottom: 28px;
}

.mn-res-content .mn-bp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 44px;
  align-items: start;
}

.mn-res-content .mn-bp-col {
  min-width: 0;
  padding-top: 28px;
}

/* ── Cover ────────────────────────────────────────────────────────────────── */

.mn-res-content .mn-bp-cover {
  margin: 0 0 30px;
}

.mn-res-content .mn-bp-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.mn-res-content .mn-bp-cover figcaption {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-3);
  margin-top: 9px;
}

/* ── Table of contents, narrow screens ────────────────────────────────────
   ⛔ <details>, not a scripted panel. The calculators FAQ shipped as scripted
   panels and was unreadable with JavaScript off; this has to open either way. */

.mn-res-content .mn-bp-mtoc {
  display: none;
  margin: 0 0 28px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(13, 21, 38, 0.05);
  overflow: hidden;
}

.mn-res-content .mn-bp-mtoc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.mn-res-content .mn-bp-mtoc > summary::-webkit-details-marker {
  display: none;
}

.mn-res-content .mn-bp-mtoc-label {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mn-res-content .mn-bp-mtoc-label svg {
  display: block;
  flex-shrink: 0;
  color: var(--blue-600);
}

.mn-res-content .mn-bp-mtoc-count {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
}

.mn-res-content .mn-bp-mtoc[open] .mn-bp-mtoc-count::after {
  content: ' \2013 open';
}

.mn-res-content .mn-bp-mtoc-list {
  border-top: 1px solid var(--border-s);
  padding: 6px 0 8px;
}

.mn-res-content .mn-bp-mtoc-list a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

.mn-res-content .mn-bp-mtoc-list a:hover {
  background: var(--blue-50);
  color: var(--blue-600);
}

.mn-res-content .mn-bp-mtoc-list a.is-sub {
  padding-left: 30px;
  font-size: 13.5px;
  color: var(--ink-3);
}

/* ── Prose ────────────────────────────────────────────────────────────────
   Everything below styles HTML written in the admin editor, so it is written
   against bare tags: the content has no classes to hook and never will. */

.mn-res-content .mn-bp-prose {
  max-width: 68ch;
  color: var(--mn-bp-body-ink);
}

.mn-res-content .mn-bp-prose > :first-child {
  margin-top: 0;
}

.mn-res-content .mn-bp-prose p {
  font-size: 1.1875rem;
  line-height: 1.75;
  margin: 0 0 1.35rem;
  text-wrap: pretty;
}

.mn-res-content .mn-bp-prose h2 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 2.75rem 0 1.1rem;
  scroll-margin-top: 7.5rem;
}

.mn-res-content .mn-bp-prose h3 {
  font-family: var(--f-display);
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 2rem 0 0.8rem;
  scroll-margin-top: 7.5rem;
}

.mn-res-content .mn-bp-prose h4,
.mn-res-content .mn-bp-prose h5,
.mn-res-content .mn-bp-prose h6 {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  margin: 1.75rem 0 0.6rem;
  scroll-margin-top: 7.5rem;
}

/* ⛔ list-style is restored, not assumed. profile-foundation.css strips markers
   from every ul on the site (an app shell full of nav lists), so a bulleted list
   written in the editor came out as an indented block of sentences with nothing
   to separate one point from the next. */
/* ⛔ NOT display:flex + gap, though that is the obvious way to space list items.
   WebKit drops the list ROLE from a ul or ol whose display is changed away from
   the default, so VoiceOver stops announcing "list, 3 items" and reads the
   points as loose sentences. li + li gives the identical 0.6rem and leaves the
   list a list. role="list" would also work, but it patches the semantics back
   in after removing them, and there is nothing here that needs flex. */
.mn-res-content .mn-bp-prose ul,
.mn-res-content .mn-bp-prose ol {
  margin: 0 0 1.35rem;
  padding-left: 1.35rem;
}

.mn-res-content .mn-bp-prose li + li {
  margin-top: 0.6rem;
}

.mn-res-content .mn-bp-prose ul,
.mn-res-content .mn-bp-prose ul ul ul {
  list-style: disc outside;
}

.mn-res-content .mn-bp-prose ul ul {
  list-style: circle outside;
}

.mn-res-content .mn-bp-prose ol {
  list-style: decimal outside;
}

.mn-res-content .mn-bp-prose li {
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.mn-res-content .mn-bp-prose li::marker {
  color: var(--ink-4);
}

.mn-res-content .mn-bp-prose li > ul,
.mn-res-content .mn-bp-prose li > ol {
  margin: 0.6rem 0 0;
}

.mn-res-content .mn-bp-prose a {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: #a8c2f5;
}

.mn-res-content .mn-bp-prose a:hover {
  color: var(--blue-700);
  text-decoration-color: currentColor;
}

.mn-res-content .mn-bp-prose strong {
  font-weight: 600;
  color: var(--ink);
}

.mn-res-content .mn-bp-prose blockquote {
  margin: 2rem 0;
  padding: 18px 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue-600);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(13, 21, 38, 0.05);
}

.mn-res-content .mn-bp-prose blockquote > :last-child {
  margin-bottom: 0;
}

.mn-res-content .mn-bp-prose hr {
  height: 1px;
  border: 0;
  background: var(--border);
  margin: 2.5rem 0;
}

.mn-res-content .mn-bp-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin: 0 0 1.35rem;
}

.mn-res-content .mn-bp-prose code {
  font-family: var(--f-mono);
  font-size: 0.88em;
  padding: 0.12em 0.36em;
  border-radius: 5px;
  background: var(--blue-50);
  border: 1px solid var(--border-s);
  color: var(--ink-2);
}

.mn-res-content .mn-bp-prose pre {
  margin: 0 0 1.35rem;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.6;
}

.mn-res-content .mn-bp-prose pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
}

/* Tables come out of the editor as bare <table> with no wrapper to scroll, so
   the table itself is the scroll box. display:block keeps the rows in an
   anonymous table box, so the columns still line up. */
.mn-res-content .mn-bp-prose table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
}

.mn-res-content .mn-bp-prose thead th {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 0 16px 9px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* The first column carries the row's name, so it sits on the prose's own left
   edge rather than a cell's worth of padding inboard of it.
   ⛔ Keyed on :first-child, not on th. A markdown table emits <td> for every
   cell including the first, so a th rule reaches only hand-written HTML and
   leaves every markdown table indented against the paragraph above it. */
.mn-res-content .mn-bp-prose thead tr > :first-child,
.mn-res-content .mn-bp-prose tbody tr > :first-child {
  padding-left: 0;
}

.mn-res-content .mn-bp-prose tbody tr > :first-child {
  font-weight: 500;
  color: var(--ink);
}

.mn-res-content .mn-bp-prose tbody th,
.mn-res-content .mn-bp-prose tbody td {
  font-size: 15px;
  line-height: 1.5;
  color: var(--mn-bp-body-ink);
  text-align: left;
  font-weight: 400;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-s);
  vertical-align: top;
}

.mn-res-content .mn-bp-prose tbody tr:last-child th,
.mn-res-content .mn-bp-prose tbody tr:last-child td {
  border-bottom: 0;
}

/* ── Panels that sit with the prose ───────────────────────────────────────── */

.mn-res-content .mn-bp-panel {
  max-width: 68ch;
  margin: 0 0 1.75rem;
  padding: 18px 22px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(13, 21, 38, 0.05);
}

.mn-res-content .mn-bp-panel-title {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}

.mn-res-content .mn-bp-panel h2 {
  font-family: var(--f-display);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.7rem;
}

.mn-res-content .mn-bp-panel p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--mn-bp-body-ink);
  margin: 0 0 0.8rem;
  text-wrap: pretty;
}

/* Same reason as the prose lists above: no flex, so the list stays a list. */
.mn-res-content .mn-bp-panel ul {
  margin: 0 0 0.9rem;
  padding-left: 1.25rem;
  list-style: disc outside;
}

.mn-res-content .mn-bp-panel li + li {
  margin-top: 0.55rem;
}

.mn-res-content .mn-bp-panel li {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--mn-bp-body-ink);
  text-wrap: pretty;
}

.mn-res-content .mn-bp-panel li::marker {
  color: var(--ink-4);
}

.mn-res-content .mn-bp-panel a {
  color: var(--blue-600);
  font-weight: 600;
}

.mn-res-content .mn-bp-panel a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mn-res-content .mn-bp-panel > :last-child {
  margin-bottom: 0;
}

/* ── Filed under ──────────────────────────────────────────────────────────── */

.mn-res-content .mn-bp-filed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.mn-res-content .mn-bp-filed-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 4px;
}

.mn-res-content .mn-bp-filed a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--white);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.mn-res-content .mn-bp-filed a:hover {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-600);
}

/* ── Keep reading ─────────────────────────────────────────────────────────── */

.mn-res-content .mn-bp-rel {
  margin-top: 2.75rem;
}

.mn-res-content .mn-bp-rel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.mn-res-content .mn-bp-rel-head h2 {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.mn-res-content .mn-bp-rel-all {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue-600);
  white-space: nowrap;
}

.mn-res-content .mn-bp-rel-all:hover {
  text-decoration: underline;
}

.mn-res-content .mn-bp-rel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mn-res-content .mn-bp-rel-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(13, 21, 38, 0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.mn-res-content .mn-bp-rel-card:hover {
  border-color: var(--blue-200);
  box-shadow: 0 4px 14px rgba(4, 16, 31, 0.08);
}

.mn-res-content .mn-bp-rel-kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mn-res-content .mn-bp-rel-title {
  font-family: var(--f-display);
  font-size: 15.5px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  text-wrap: pretty;
}

.mn-res-content .mn-bp-rel-stamp {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: auto;
}

/* ── Rail ─────────────────────────────────────────────────────────────────── */

.mn-res-content .mn-bp-rail {
  position: sticky;
  top: calc(var(--topbar-h) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 28px;
}

.mn-res-content .mn-bp-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(13, 21, 38, 0.05);
  overflow: hidden;
}

.mn-res-content .mn-bp-card-title {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border-s);
}

.mn-res-content .mn-bp-toc {
  padding: 6px 0 8px;
  display: flex;
  flex-direction: column;
  max-height: min(52vh, 460px);
  overflow-y: auto;
}

.mn-res-content .mn-bp-toc a {
  padding: 8px 16px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
  border-left: 2px solid transparent;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.mn-res-content .mn-bp-toc a:hover {
  background: #f8fafe;
  color: var(--blue-600);
}

.mn-res-content .mn-bp-toc a.is-sub {
  padding-left: 28px;
  font-size: 13px;
  color: var(--ink-3);
}

.mn-res-content .mn-bp-toc a.is-current {
  color: var(--blue-600);
  font-weight: 600;
  border-left-color: var(--blue-600);
}

.mn-res-content .mn-bp-facts {
  margin: 0;
  padding: 4px 16px 12px;
}

.mn-res-content .mn-bp-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #f4f7fd;
}

.mn-res-content .mn-bp-facts > div:last-child {
  border-bottom: 0;
}

.mn-res-content .mn-bp-facts dt {
  font-size: 12.5px;
  color: var(--ink-3);
}

.mn-res-content .mn-bp-facts dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}

.mn-res-content .mn-bp-next {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 18px 18px 19px;
  background: var(--mn-hero-grad);
}

.mn-res-content .mn-bp-next::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
}

.mn-res-content .mn-bp-next > * {
  position: relative;
  z-index: 1;
}

.mn-res-content .mn-bp-next-kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-300);
  margin: 0 0 8px;
}

.mn-res-content .mn-bp-next-line {
  font-family: var(--f-display);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 13px;
  text-wrap: pretty;
}

.mn-res-content .mn-bp-next-links {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mn-res-content .mn-bp-next-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: background 0.15s;
}

.mn-res-content .mn-bp-next-links a:hover {
  background: rgba(255, 255, 255, 0.22);
}

.mn-res-content .mn-bp-next-links a.is-primary {
  background: var(--white);
  border-color: var(--white);
  color: var(--blue-900);
}

.mn-res-content .mn-bp-next-links a.is-primary:hover {
  background: var(--blue-100);
}

/* ── Narrow screens ───────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .mn-res-content .mn-bp-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mn-res-content .mn-bp-rail {
    display: none;
  }

  .mn-res-content .mn-bp-mtoc {
    display: block;
  }
}

@media (max-width: 768px) {
  /* .content drops to 1rem of padding here, so the bleed has that much less to
     cancel. Vertical only: the horizontal gutter follows --mn-nav-gutter, which
     switches at 640 with the navbar. */
  .mn-res-content .mn-bp {
    margin-top: -1rem;
  }
}

/* A TABLE STOPS BEING A TABLE ON A PHONE.
   Three columns inside a 390px screen is a sideways scroll the reader has to
   discover, so each row becomes a card: first cell as the card's heading, every
   other cell printed as "<column name>   <value>". The column name comes from
   the data-label mnBlogLabelTableCells() writes onto the cell server-side; CSS
   cannot reach across a row to fetch it.

   ⛔ Gated on :has(td[data-label]), so a table that was NOT labelled — no header
   row to read names from, or a browser that never ran the labeller — keeps the
   sideways scroll rather than collapsing into a column of bare values. */
@media (max-width: 700px) {
  .mn-res-content .mn-bp-prose table:has(td[data-label]) {
    display: block;
    width: auto;
    overflow-x: visible;
  }

  .mn-res-content .mn-bp-prose table:has(td[data-label]) thead {
    display: none;
  }

  .mn-res-content .mn-bp-prose table:has(td[data-label]) tbody {
    display: block;
  }

  .mn-res-content .mn-bp-prose table:has(td[data-label]) tbody tr {
    display: block;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
  }

  .mn-res-content .mn-bp-prose table:has(td[data-label]) tbody tr > :first-child {
    display: block;
    padding: 11px 15px 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    background: #fbfcff;
    border-bottom: 1px solid var(--border-s);
  }

  .mn-res-content .mn-bp-prose table:has(td[data-label]) tbody [data-label] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 15px;
    border-bottom: 0;
  }

  .mn-res-content .mn-bp-prose table:has(td[data-label]) tbody [data-label]::before {
    content: attr(data-label);
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
    flex: 0 0 auto;
  }

  .mn-res-content .mn-bp-prose table:has(td[data-label]) tbody tr > :last-child {
    padding-bottom: 11px;
  }
}

@media (max-width: 640px) {
  .mn-res-content .mn-bp-head .mn-bp-in {
    padding-top: 24px;
  }

  .mn-res-content .mn-bp-h1 {
    font-size: 1.72rem;
  }

  .mn-res-content .mn-bp-dek {
    font-size: 1.0625rem;
  }

  .mn-res-content .mn-bp-share {
    margin-left: 0;
  }

  .mn-res-content .mn-bp-prose p {
    font-size: 1.0625rem;
  }

  .mn-res-content .mn-bp-prose h2 {
    font-size: 1.375rem;
  }

  .mn-res-content .mn-bp-prose h3 {
    font-size: 1.125rem;
  }

  .mn-res-content .mn-bp-rel-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}