/* header.css - rock-magazine masthead, sticky section row with panels, mobile drawer (loaded sitewide, after
   components.css). Design refinement 2026-10, docs/design/impeccable-2026-10/02-SHAPE.md section 3.
   Ink surface, cream type, red only for the rule and the active state. Tokens only, zero radius.

   Fixed heights (no layout shift):
     < 64rem   one sticky block (the masthead itself): the 56px bar (54px row + the 2px red rule at the bottom of the
               block) plus a 30px mobile-only social strip between row and rule = 86px
     >= 64rem  masthead row 72px (incl. its 2px red rule), then the sticky 46px section row
   --header-sticky-h is the height of whatever is stuck at the top: other layers (rails, reading progress)
   should offset from it. */

:root {
  --masthead-bar-h: 3.5rem;    /* mobile bar row incl. the 2px red rule; the drawer head matches it */
  --social-strip-h: 1.875rem;  /* mobile-only social strip (30px), inside the sticky masthead */
  --header-sticky-h: calc(var(--masthead-bar-h) + var(--social-strip-h)); /* 86px below 64rem */
  --crest-col: 4.5rem; /* plate 60px + 12px gap = the wordmark's left edge; section links align to it */
  --header-top: var(--wp-admin--admin-bar--height, 0px);
}
@media (min-width: 64rem) {
  :root { --header-sticky-h: 2.875rem; }
}
/* Logged-in at <= 600px: WP makes #wpadminbar position:absolute (it scrolls away) and html gets a 46px margin,
   but base.css's body{position:relative} makes the bar's containing block the body - which starts 46px down -
   so the bar painted over the sticky masthead. Pull it back to the top of the page, and since it scrolls away
   the masthead pins at 0, not under a bar that is no longer there. 601-782px (bar fixed, 46px) and >= 783px
   (32px) keep --header-top = the bar height. */
@media (max-width: 37.5rem) {
  .admin-bar { --header-top: 0px; }
  .admin-bar #wpadminbar { top: calc(-1 * var(--wp-admin--admin-bar--height, 46px)); }
}

/* Crest plate: one lockup with the wordmark. A paper-2 square so the dark-outlined crest never disappears on
   ink: no drop shadow, no hanging below the band, no red edge. Size via --plate (default 60px = the desktop
   masthead's inner height less 10px): .crest-plate--sm = 40px (mobile bar, drawer), --xs = 32px (sticky mini
   crest). A 2px ink inner keyline frames the crest on the large plate only. Shared by masthead, drawer, mini
   crest and the footer. */
.crest-plate {
  --plate: 3.75rem;
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: var(--plate);
  height: var(--plate);
  padding: calc(var(--plate) * 0.075);
  background: var(--paper-2);
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  line-height: 0;
}
.crest-plate img { display: block; width: 100%; height: 100%; object-fit: contain; }
.crest-plate--sm { --plate: 2.5rem; outline: 0; }
.crest-plate--xs { --plate: 2rem; outline: 0; }

/* A modal (menu drawer, search overlay) is open: the page behind must not scroll. */
html.has-overlay { overflow: hidden; }

/* ------------------------------------------------------------------ Masthead (mobile bar first) */
.masthead {
  position: sticky;
  top: var(--header-top);
  z-index: 50;
  background: var(--ink);
  color: var(--paper-2);
  border-bottom: 2px solid var(--red);
}
.masthead__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: calc(var(--masthead-bar-h) - 2px);
}
.masthead a { text-decoration: none; }

.menu-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 2.75rem;
  height: 2.75rem;
  margin-left: calc(-1 * var(--space-2));
  padding: 0 var(--space-2);
  background: none;
  border: 0;
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.menu-button__label,
.search-trigger__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (min-width: 30rem) {
  .menu-button__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

.hamburger { display: grid; gap: 5px; width: 1.375rem; }
.hamburger span { display: block; height: 2px; background: currentColor; transition: transform 180ms ease-out, opacity 120ms ease-out; }
.menu-button[aria-expanded="true"] .hamburger span:nth-child(1),
.hamburger--x span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-button[aria-expanded="true"] .hamburger span:nth-child(2),
.hamburger--x span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] .hamburger span:nth-child(3),
.hamburger--x span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Brand: crest plate + typeset wordmark as ONE lockup. The wordmark is real text (the front page's <h1>). */
.brand { justify-self: center; min-width: 0; }
.brand__title { margin: 0; font: inherit; line-height: 1; }
.brand__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; color: var(--paper-2); }
.brand__link:hover { color: var(--paper-2); }
.brand__crest { --plate: 2.5rem; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-brand-bar);
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__tld { margin-left: 0.1em; font-size: 0.5em; letter-spacing: 0.04em; color: var(--red-on-ink); }
.brand__strap { display: none; }

.search-trigger {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: calc(-1 * var(--space-2));
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
}
.search-trigger__icon { width: 1.5rem; height: 1.5rem; }
.search-trigger__key { display: none; }
.utility-nav { display: none; }

.masthead :focus-visible,
.section-bar :focus-visible { outline-offset: -4px; }
.masthead .brand__link:focus-visible { outline-offset: 4px; }

/* ------------------------------------------------------------------ Desktop masthead row */
@media (min-width: 64rem) {
  /* top: 0 - the mobile rule's `top: var(--header-top)` would otherwise offset this relatively positioned row
     by the WP admin-bar height (32px) for logged-in users and paint it over the section row's labels. */
  .masthead { position: relative; top: 0; z-index: 51; }
  .masthead__inner { display: flex; gap: var(--space-5); position: relative; height: 4.375rem; } /* + 2px rule = 72px */
  .menu-button { display: none; }

  /* Lockup: 60px plate + 12px gap + 36px wordmark, strap beneath the wordmark (pulled under it so the 70px row
     never grows). --crest-col (4.5rem) is the wordmark's left edge; the section row aligns to it. */
  .brand { justify-self: auto; margin-right: auto; position: relative; }
  .brand__link { gap: var(--space-3); }
  .brand__crest { --plate: 3.75rem; }
  .masthead .brand__name { font-size: var(--fs-brand); margin-bottom: 1.15rem; }
  .brand__strap {
    display: block;
    position: absolute;
    left: var(--crest-col);
    bottom: 0.3rem;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--muted-on-ink);
    white-space: nowrap;
  }
  .brand__strap b { color: var(--paper-2); font-weight: 700; }

  /* The trigger is a hairline field, not a box: a muted rule under icon + label that turns red on hover, and a
     small square key slab for the shortcut. It is a button that opens the overlay. */
  .search-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-self: auto;
    width: 17rem;
    min-width: 0;
    margin-right: 0;
    padding: 0 0.125rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--muted-on-ink) 70%, var(--ink));
    color: var(--muted-on-ink);
    font-family: var(--font-body);
    font-size: var(--fs-1);
    text-align: left;
    transition: border-color var(--ease), color var(--ease);
  }
  .search-trigger:hover { border-bottom-color: var(--red-on-ink); color: var(--paper-2); }
  .search-trigger__icon { width: 1.25rem; height: 1.25rem; flex: none; }
  .search-trigger__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; flex: 1; }
  .search-trigger__key {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    background: color-mix(in srgb, var(--paper-2) 6%, var(--ink));
    border: 1px solid color-mix(in srgb, var(--muted-on-ink) 60%, var(--ink));
    border-bottom-width: 2px; /* the slab edge that makes it read as a key */
    border-radius: 0;
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 500;
    line-height: 1;
    color: var(--muted-on-ink);
    transition: color var(--ease), border-color var(--ease);
  }
  .search-trigger:hover .search-trigger__key { color: var(--paper-2); border-color: color-mix(in srgb, var(--paper-2) 55%, var(--ink)); }

  .utility-nav { display: block; }
  .utility-nav ul { display: flex; gap: var(--space-1); }
  .utility-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-0);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-on-ink);
    gap: 0.35em;
  }
  .utility-nav__link:hover, .utility-nav__link[aria-current="page"] { color: var(--paper-2); }
}
.nav-ext { width: 0.85em; height: 0.85em; flex: none; opacity: 0.8; }

/* ------------------------------------------------------------------ Section row (desktop only) */
.nav-sentinel { height: 1px; margin-top: -1px; pointer-events: none; }
/* .section-bar is the sticky, non-landmark wrapper; .primary-nav (the Primary <nav>) holds only the section list
   and the social <nav> is its sibling inside .primary-nav__inner. */
.section-bar { display: none; }
@media (min-width: 64rem) {
  .section-bar {
    display: block;
    position: sticky;
    top: var(--header-top);
    z-index: 50;
    height: var(--header-sticky-h);
    background: var(--ink);
    color: var(--paper-2);
  }
  .section-bar a { text-decoration: none; }
  .primary-nav { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; align-items: center; } /* not positioned: panels and the mini crest anchor to .primary-nav__inner */
  .primary-nav__inner { position: relative; display: flex; align-items: center; height: 100%; padding-left: var(--crest-col); }

  /* Mini crest + search icon appear once the row is stuck (transform/opacity only). */
  .nav-mini-crest, .nav-search {
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 180ms;
  }
  .nav-mini-crest { position: absolute; left: 0; top: 50%; margin-top: -1rem; transform: translateX(-0.5rem); line-height: 0; }
  .nav-search { margin-left: auto; transform: translateX(0.5rem); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; background: none; border: 0; color: var(--paper-2); }
  .nav-search__icon { width: 1.375rem; height: 1.375rem; }
  .primary-nav.is-stuck .nav-mini-crest,
  .primary-nav.is-stuck .nav-search { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

  .menu { display: flex; align-self: stretch; margin: 0 0 0 calc(-1 * var(--space-2)); padding: 0; } /* first label aligns with the wordmark */
  .nav-item { display: flex; align-items: stretch; }
  .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-0);
    font-weight: 600; /* section row outranks the 500-weight utility links above it */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--paper-2);
  }
  .nav-link:hover { color: var(--paper-2); }
  /* Leading section icon: secondary to the label - muted, 16px, red on hover/current; a touch heavier stroke
     so the 1.75 line survives at 16px. */
  .nav-link__icon { width: 1rem; height: 1rem; flex: none; stroke-width: 2; color: var(--muted-on-ink); transition: color var(--ease); }
  .nav-link:hover .nav-link__icon,
  .nav-link:focus-visible .nav-link__icon,
  .nav-item.is-current > .nav-link .nav-link__icon,
  .nav-item.is-ancestor > .nav-link .nav-link__icon { color: var(--red-on-ink); }
  /* 3px bar: red for the current section, muted on hover. */
  .nav-link::after {
    content: "";
    position: absolute;
    left: var(--space-2);
    right: var(--space-2);
    bottom: 0;
    height: 3px;
    background: var(--muted-on-ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ease);
  }
  .nav-link:hover::after { transform: scaleX(1); }
  .nav-item.is-current > .nav-link::after,
  .nav-item.is-ancestor > .nav-link::after { background: var(--red); transform: scaleX(1); }
  .nav-item.has-panel > .nav-link { padding-right: 0; }
  .nav-item.has-panel > .nav-link::after { right: calc(var(--caret-w) * -1 + var(--space-2)); }

  /* The caret is a separate button that hugs its label (4px gap) and shares the link's hover/focus look. */
  .nav-item { --caret-w: 1.75rem; }
  .nav-disclosure {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: var(--caret-w);
    padding: 0 0 0 0.25rem;
    background: none;
    border: 0;
    color: var(--paper-2);
    opacity: 0.8;
    transition: opacity var(--ease);
  }
  .nav-link:hover + .nav-disclosure,
  .nav-link:focus-visible + .nav-disclosure,
  .nav-disclosure:hover,
  .nav-disclosure:focus-visible,
  .nav-item.is-current > .nav-disclosure,
  .nav-item.is-ancestor > .nav-disclosure { opacity: 1; }
  .nav-item:has(> .nav-disclosure:hover) > .nav-link::after,
  .nav-item:has(> .nav-disclosure:focus-visible) > .nav-link::after,
  .nav-item:has(> .nav-disclosure[aria-expanded="true"]) > .nav-link::after { transform: scaleX(1); }
  .nav-disclosure__icon { width: 0.875rem; height: 0.875rem; transition: transform var(--ease); }
  .nav-disclosure[aria-expanded="true"] { opacity: 1; }
  .nav-disclosure[aria-expanded="true"] .nav-disclosure__icon { transform: rotate(180deg); }
}
@media (min-width: 80rem) {
  .menu { margin-left: calc(-1 * var(--space-3)); }
  .nav-link { font-size: 0.9375rem; padding: 0 var(--space-3); }
  .nav-link::after { left: var(--space-3); right: var(--space-3); }
  .nav-item.has-panel > .nav-link { padding-right: 0; }
  .nav-item.has-panel > .nav-link::after { right: calc(var(--caret-w) * -1 + var(--space-3)); }
}

/* Caret hit area: 28px was too small a target for touch laptops/tablets in landscape. Below 80rem the caret
   button is 44px wide (the glyph stays 14px, left-aligned), and the next label gives up its left padding
   so the row costs 8px per panel item instead of 16 - the row still fits at 1024. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .nav-item { --caret-w: 2.75rem; }
  .nav-item.has-panel + .nav-item > .nav-link { padding-left: 0; }
  .nav-item.has-panel + .nav-item > .nav-link::after { left: 0; }
}

/* Section panel: two zones. Left = child links + "All {Section}"; right = the 2 newest stories. */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  gap: var(--space-6);
  width: min(100%, 54rem);
  padding: var(--space-5);
  background: var(--ink);
  color: var(--paper-2);
  border-top: 2px solid var(--red);
  box-shadow: 0 20px 32px -14px color-mix(in srgb, var(--ink) 70%, transparent);
}
.nav-panel[hidden] { display: none; }
.nav-panel ul { list-style: none; }
.nav-panel__link {
  display: flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--paper-2) 14%, transparent);
  color: var(--paper-2);
  font-size: var(--fs-1);
}
.nav-panel__link:hover { color: var(--paper-2); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.nav-panel__all { display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.75rem; margin-top: var(--space-2); color: var(--red-on-ink); }
.nav-panel__all:hover { color: var(--paper-2); }
.nav-panel__label { margin: 0 0 var(--space-2); color: var(--muted-on-ink); }
.nav-panel__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }

/* Story cards on ink (nav panel + search overlay): cream on ink, no rules between rows. */
.nav-panel .card--rail, .search-overlay .card--rail { grid-template-columns: 4rem minmax(0, 1fr); padding-block: 0; border-top: 0; color: var(--paper-2); }
.nav-panel .card__title a, .search-overlay .card__title a { color: var(--paper-2); }
.nav-panel .card__title a:hover, .search-overlay .card__title a:hover { color: var(--red-on-ink); }
.nav-panel .card__tag, .search-overlay .card__tag { color: var(--red-on-ink); }
.nav-panel .meta, .search-overlay .meta { color: var(--muted-on-ink); }

/* ------------------------------------------------------------------ Reading progress (articles) */
/* Fixed just under the stuck bar; scroll-driven, no JS. */
.reading-progress { position: fixed; left: 0; right: 0; top: calc(var(--header-top) + var(--header-sticky-h)); z-index: 49; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .reading-progress { animation: gg-reading-progress linear; animation-timeline: scroll(root); }
  @keyframes gg-reading-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ------------------------------------------------------------------ Mobile drawer (< 64rem) */
.nav-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  margin: 0;
  padding: 0;
  width: min(88vw, 24rem);
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  overflow: hidden;
  border: 0;
  background: var(--ink);
  color: var(--paper-2);
  --focus-ring: var(--focus-on-ink);
  transform: translateX(-100%);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 12px 0 32px -12px color-mix(in srgb, var(--ink) 70%, transparent);
}
.nav-drawer[open] { display: flex; flex-direction: column; }
.nav-drawer.is-open { transform: none; }
.nav-drawer::backdrop { background: color-mix(in srgb, var(--ink) 72%, transparent); opacity: 0; transition: opacity 220ms ease-out; }
.nav-drawer.is-open::backdrop { opacity: 1; }
.nav-drawer a { text-decoration: none; }
.nav-drawer ::selection, .search-overlay ::selection { background: var(--red); color: var(--paper-2); }
@media (min-width: 64rem) { .nav-drawer { display: none !important; } }

.nav-drawer__head { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--masthead-bar-h); padding-inline: var(--gutter) var(--space-2); border-bottom: 2px solid var(--red); }
.nav-drawer__brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; color: var(--paper-2); }
.nav-drawer__brand:hover { color: var(--paper-2); } /* base a:hover is red; the wordmark stays cream like the masthead */
.nav-drawer__close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: none; border: 0; color: var(--paper-2); }
.nav-drawer__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-4) var(--gutter) var(--space-6); overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); }

.drawer-menu, .drawer-sub, .drawer-utility ul { list-style: none; }
.drawer-item__row { display: flex; align-items: stretch; border-bottom: 1px solid color-mix(in srgb, var(--paper-2) 14%, transparent); }
.drawer-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 3rem;
  font-family: var(--font-display);
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper-2);
}
.drawer-link:hover { color: var(--paper-2); }
.is-current > .drawer-item__row .drawer-link,
.is-ancestor > .drawer-item__row .drawer-link { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
.drawer-disclosure { display: grid; place-items: center; width: 3rem; background: none; border: 0; color: var(--muted-on-ink); }
.drawer-disclosure__icon { width: 1.25rem; height: 1.25rem; transition: transform var(--ease); }
.drawer-disclosure[aria-expanded="true"] .drawer-disclosure__icon { transform: rotate(180deg); }
.drawer-disclosure[aria-expanded="true"] { color: var(--paper-2); }
.drawer-sub { padding: var(--space-1) 0 var(--space-3) var(--space-4); }
.drawer-sub[hidden] { display: none; }
.drawer-sub__link { display: flex; align-items: center; gap: 0.4em; min-height: 2.75rem; color: var(--paper-3); font-size: var(--fs-2); }
.drawer-sub__link:hover { color: var(--paper-2); }
.drawer-sub__all { color: var(--red-on-ink); font-family: var(--font-body); font-weight: var(--weight-label); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--fs-label); }

.drawer-utility ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.drawer-utility__link { display: inline-flex; align-items: center; gap: 0.35em; min-height: 2.75rem; font-family: var(--font-display); font-size: var(--fs-1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-on-ink); }
.drawer-utility__link:hover { color: var(--paper-2); }
.drawer-strap { margin: auto 0 0; font-family: var(--font-body); font-weight: 600; font-size: min(var(--fs-label), 3.1vw); letter-spacing: 0.08em; white-space: nowrap; line-height: 1.6; text-transform: uppercase; color: var(--muted-on-ink); }
.drawer-strap b { color: var(--paper-2); font-weight: 700; }

/* ------------------------------------------------------------------ Social links (template-parts/header/social.php) */
.social-nav--bar { display: none; }
.social-nav__list { display: flex; align-items: center; list-style: none; }
.social-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  color: var(--muted-on-ink);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-micro); /* 11px counts */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: color var(--ease);
}
.social-link:hover, .social-link:focus-visible { color: var(--paper-2); }
.social-link__icon { width: 1.25rem; height: 1.25rem; flex: none; stroke-width: 2; }
/* thin red underline on hover/focus, same transform-only reveal as the section bar */
.social-link::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  bottom: 0.3rem;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
}
.social-link:hover::after, .social-link:focus-visible::after { transform: scaleX(1); }

@media (min-width: 64rem) {
  .social-nav--bar { display: block; flex: none; margin-left: var(--space-3); }
  .social-nav--bar .social-link { min-width: 2.25rem; height: 2.25rem; padding: 0 0.25rem; }
  .social-nav--bar .social-link__count { display: none; } /* icons only between 64rem and 80rem */
  .section-bar .social-link:focus-visible { outline-offset: -2px; }
}
@media (min-width: 80rem) {
  .social-nav--bar .social-link__count { display: inline; }
}

/* Mobile strip: five glyphs on ink, directly under the masthead row and inside the sticky header, so it sticks with
   the bar and the red rule stays the bottom edge of the whole block. 30px of layout (hairline included), fixed
   from first paint; each link is 44 x 32px (overlapping the strip's edges by 1px, which nothing else occupies).
   No counts, no boxes, no labels. Hidden exactly where the masthead goes desktop. */
.social-nav--strip { height: var(--social-strip-h); box-sizing: border-box; border-top: 1px solid color-mix(in srgb, var(--paper-2) 8%, transparent); }
.social-nav--strip .social-nav__list { justify-content: space-evenly; max-width: 22rem; height: 100%; margin-inline: auto; }
.social-nav--strip .social-link { width: 2.75rem; height: 2rem; padding: 0; }
.social-nav--strip .social-link__icon { width: 1.25rem; height: 1.25rem; }
.social-nav--strip .social-link:active { color: var(--paper-2); }
.social-nav--strip .social-link::after { left: 0.8125rem; right: 0.8125rem; bottom: 0.3125rem; }
@media (min-width: 64rem) { .social-nav--strip { display: none; } }

/* Drawer: a row after the section list; 44px targets, counts beside the glyph. */
/* Five channels with counts must sit on one line from 360px up (wrap stays as the safety net); under 21rem the
   counts drop out of view (the aria-label still carries them) so the five 44px targets still fit one row. */
.social-nav--drawer .social-nav__list { flex-wrap: wrap; gap: 0; margin-left: calc(-1 * var(--space-1)); }
.social-nav--drawer .social-link { min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--space-1); font-size: var(--fs-micro); gap: 0.3em; }
.social-nav--drawer .social-link__icon { width: 1.25rem; height: 1.25rem; }
.social-nav--drawer .social-link::after { left: var(--space-1); right: var(--space-1); bottom: 0.45rem; }
/* Mobile visibility: when the menu is long (a section expanded, short phone) the row stays pinned to the drawer's
   bottom edge instead of scrolling out of sight; with room to spare it sits in its normal spot under the sections. */
.social-nav--drawer { position: sticky; bottom: calc(-1 * var(--space-6)); z-index: 1; margin-block: calc(-1 * var(--space-2)); padding-block: var(--space-2); background: var(--ink); }
@media (max-width: 21rem) { .social-nav--drawer .social-link__count { display: none; } }

/* Drawer section icons: secondary to the label, red on current. */
.drawer-link__icon { width: 1.125rem; height: 1.125rem; flex: none; stroke-width: 2; color: var(--muted-on-ink); }
.is-current > .drawer-item__row .drawer-link__icon,
.is-ancestor > .drawer-item__row .drawer-link__icon { color: var(--red-on-ink); }

@media print {
  .masthead, .section-bar, .nav-drawer, .search-overlay, .reading-progress { display: none !important; }
}