/* ================================================================================
 * BETTERYOU+ MASTHEAD
 * Implements the composition on the approved reference boards, 2026-08-28.
 *
 * The child theme owns this markup outright (template-parts/header/header-10.php), so almost
 * everything here is a plain first-party rule — the three previous attempts at this header
 * fought Soledad for the same pixels and all lost something in the process.
 *
 * `!important` appears exactly four times, and only where the PARENT forces a value onto an
 * element the child now owns and no amount of specificity can outrank it: two fixed sticky
 * heights, the mobile trigger's `display:none`, and the hidden source menu. Every rule the
 * masthead writes for ITSELF is a plain declaration.
 * ============================================================================= */

/* The masthead element IS Soledad's #navigation, and the parent paints it from two rules:
 * `#navigation{background:#fff}` (1,0,0) and, in dark, `body.pcdm-enable.pcdark-mode
 * #navigation{background-color:#000}` (1,2,1) printed in the customiser's INLINE <style>,
 * which the cascade places after every enqueued sheet. A bare `.byp-mast` (0,1,0) loses to
 * both, which is how the masthead came back pure black on the first deploy.
 *
 * Matching the parent's own compound selector and adding one class wins cleanly. No
 * !important: an !important war here would be re-fought on the next Soledad update. */
#navigation.byp-mast {
  background: var(--byp-mast-bg); color: var(--byp-mast-ink);
  /* header-10 ships a FIXED height (82px) sized for the parent's one-row composition. The
     two-row masthead is ~158px, so the overflow painted against the PAGE ground instead of
     the header's — the warm band that appeared between the two rows in dark mode. */
  height: auto; min-height: 0; max-height: none;
}
#navigation-sticky-wrapper.sticky-wrapper { height: auto !important; }
/* The parent adds 60px below the header for its own layout; the masthead sits flush. */
#header.byp-mast-host { margin-bottom: 0; }
body.pcdm-enable.pcdark-mode #navigation.byp-mast,
body.pcdark-mode.pcdm-enable #navigation.byp-mast { background-color: var(--byp-mast-bg); }
.byp-mast__inner { max-width: 1280px; margin: 0 auto; padding: 0 28px; }

/* ---------------------------------------------------------------- row 1 */
.byp-mast__top { border-bottom: 1px solid var(--byp-mast-rule); }
.byp-mast__top .byp-mast__inner {
  display: flex; align-items: center; gap: 22px;
  min-height: 84px;
}

/* ---------------------------------------------------------------- brand assembly
 * Logo, hairline, tagline. One flex row so the three move together at every width and the
 * tagline can never end up somewhere unrelated in the header. */
.byp-mast__brand { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; min-width: 0; }
.byp-mast__logo { display: block; line-height: 0; flex: 0 0 auto; }
/* 62px, not 54px, and the search narrows to 340px. Both numbers come from measuring the
 * live header rather than from taste:
 *
 *     before   brand 26.9% of the row   tools 67.0%   logo area 0.40x the search field
 *     after    brand 29.7%              tools 63.6%   logo area 0.65x
 *
 * The first visual read was the search box, which is the wrong thing for a masthead to lead
 * with. This is ~15% more height on the mark and ~19% less width on the field — the row
 * height is unchanged, because 62px still clears the 84px minimum with its padding. */
.byp-mast__logo-img { display: block; height: 62px; width: auto; }
.byp-mast__rule { width: 1px; height: 40px; background: var(--byp-mast-rule); flex: 0 0 auto; }
.byp-mast__tagline {
  display: flex; flex-direction: column; gap: 1px; flex: 0 0 auto;
  font-family: var(--byp-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.32;
  color: var(--byp-mast-meta); white-space: nowrap;
}

/* ---------------------------------------------------------------- tools */
.byp-mast__tools { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: 1 1 auto;
  justify-content: flex-end; min-width: 0; }

/* search — a real field, always visible */
.byp-mast__search {
  position: relative; display: flex; align-items: center;
  flex: 1 1 340px; max-width: 340px; min-width: 0; margin: 0;
}
.byp-mast__search-i {
  position: absolute; left: 15px; display: flex; color: var(--byp-mast-meta);
  font-size: 17px; line-height: 0; pointer-events: none;
}
.byp-mast__search input[type="search"] {
  width: 100%; height: 44px; margin: 0;
  padding: 0 16px 0 42px; border-radius: 999px;
  background: var(--byp-mast-field);
  border: 1px solid var(--byp-mast-field-rule);
  font-family: var(--byp-body); font-size: 14.5px; color: var(--byp-mast-ink);
  box-shadow: none; transition: border-color .14s, box-shadow .14s;
  -webkit-appearance: none; appearance: none;
}
.byp-mast__search input[type="search"]::placeholder { color: var(--byp-mast-meta); opacity: 1; }
.byp-mast__search input[type="search"]:focus {
  outline: none; border-color: var(--byp-brand-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--byp-brand-red) 18%, transparent);
}

/* appearance — three segments in one pill, the board's control */
.byp-mast__appearance { flex: 0 0 auto; }
.byp-appearance {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--byp-mast-field); border: 1px solid var(--byp-mast-field-rule);
  border-radius: 999px;
}
.byp-appearance__b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--byp-mast-meta); cursor: pointer;
  transition: background .14s, color .14s;
}
.byp-appearance__b:hover { color: var(--byp-mast-ink); }
.byp-appearance__b[aria-pressed="true"] { color: var(--byp-mast-ink); }
/* The selected segment takes the mode's own colour: sunset for light, crimson for dark,
   slate for system — so the control says which state it is in without reading the label. */
.byp-appearance__b[data-mode="system"][aria-pressed="true"] { background: var(--byp-mast-rule); }
.byp-appearance__b[data-mode="light"][aria-pressed="true"]  { background: var(--byp-brand-sunset); color: #3B1F05; }
.byp-appearance__b[data-mode="dark"][aria-pressed="true"]   { background: var(--byp-brand-red);    color: #FFFFFF; }

/* Get the Weekly
 *
 * The reference board draws this pill in CORAL with white type. Measured, that is 2.86:1 —
 * below AA for a text control, and this is a button people are meant to read and press, not
 * a logotype exempt from the requirement.
 *
 * Resolved WITHOUT leaving the approved palette: the fill is the board's own Primary Red
 * (white on it measures 4.75:1) and coral becomes the hover. Same two colours, same shape,
 * same design — one of them just carries the label instead of the other. Reported to the
 * operator rather than changed silently.
 */
.byp-mast__weekly {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  height: 44px; padding: 0 20px; border-radius: 999px; text-decoration: none;
  background: var(--byp-brand-red); color: #FFFFFF;
  font-family: var(--byp-ui); font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; transition: background .14s, transform .14s;
}
.byp-mast__weekly:hover { background: var(--byp-brand-coral); color: #FFFFFF; transform: translateY(-1px); }
.byp-mast__weekly-i { display: flex; line-height: 0; font-size: 17px; }
.byp-mast__weekly-a { font-size: 15px; line-height: 1; }

/* hamburger */
.byp-mast__menu { flex: 0 0 auto; display: flex; align-items: center; }
.byp-mast__menu .menu-hamburger,
.byp-mast__menu .penci-menu-hbg-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--byp-mast-field); border: 1px solid var(--byp-mast-field-rule);
  color: var(--byp-mast-ink); transition: border-color .14s, color .14s;
}
.byp-mast__menu .menu-hamburger:hover { border-color: var(--byp-brand-red); color: var(--byp-brand-red); }

/* ---------------------------------------------------------------- row 2 · sections */
.byp-mast__bottom { background: var(--byp-mast-nav-bg); border-bottom: 1px solid var(--byp-mast-rule); }
.byp-mast__nav ul {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 6px; list-style: none; margin: 0; padding: 0;
}
.byp-mast__nav li { margin: 0; padding: 0; background: none; border: 0; flex: 1 1 0; min-width: 0; }
.byp-mast__nav li::before, .byp-mast__nav li::marker { content: none; }
.byp-mast__nav a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 6px; text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color .14s, background .14s;
}
.byp-mast__nav-i { display: flex; line-height: 0; font-size: 21px; color: var(--cat); flex: 0 0 auto; }
.byp-mast__nav-t {
  font-family: var(--byp-ui); font-size: 12.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--cat-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.byp-mast__nav a:hover, .byp-mast__nav a:focus-visible {
  border-bottom-color: var(--cat);
  background: color-mix(in srgb, var(--cat) 8%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .byp-mast__nav a:hover { background: var(--byp-mast-field); }
}

/* the parent's primary menu is kept only as the source the mobile menu clones */
.byp-mast__source-menu { display: none !important; }

/* ---------------------------------------------------------------- sticky
 * Soledad's sticky is jQuery Sticky: it adds `.is-sticky` to `#navigation-sticky-wrapper`,
 * switches the nav to `position:fixed`, and forces `height:60px` — a number sized for the
 * parent's ONE-row header. Against a two-row masthead that clipped the header to 60px and
 * let the page scroll through the gap between the rows.
 *
 * So the sticky state is a real design state rather than a squeeze: the section row and the
 * tagline drop, the logo steps down, and what remains is a compact bar that still carries
 * the brand, the search, the appearance control and the CTA.
 */
.sticky-wrapper.is-sticky #navigation.byp-mast {
  height: auto; min-height: 0;
  box-shadow: 0 1px 0 var(--byp-mast-rule), 0 8px 24px -18px rgba(0, 0, 0, .45);
}
/* The wrapper collapses to 0 when it goes fixed, which would yank the page up by the full
   header height. Holding the original height keeps the scroll position honest.
 *
 * This rule was written and did not work, and the reason is worth keeping: the line 30 rule
 * above is `#navigation-sticky-wrapper.sticky-wrapper` — an ID, specificity (1,1,0) — and it
 * sets `height:auto !important` unconditionally. `.sticky-wrapper.is-sticky` is (0,2,0), so
 * the ID won, the wrapper still collapsed, and the page still jumped. Two of my own rules
 * fighting, with !important on both, which is exactly why !important settles nothing.
 * Measured cost: CLS 0.1398 on mobile and 0.0972 on desktop — the page's worst number, and
 * the whole of it. Certification found it; reading the CSS had not. */
#navigation-sticky-wrapper.sticky-wrapper.is-sticky,
.sticky-wrapper.is-sticky { height: 140px !important; }
.sticky-wrapper.is-sticky #navigation.byp-mast .byp-mast__bottom,
.sticky-wrapper.is-sticky #navigation.byp-mast .byp-mast__rule,
.sticky-wrapper.is-sticky #navigation.byp-mast .byp-mast__tagline { display: none; }
.sticky-wrapper.is-sticky #navigation.byp-mast .byp-mast__logo-img { height: 38px; }
.sticky-wrapper.is-sticky #navigation.byp-mast .byp-mast__top .byp-mast__inner { min-height: 64px; }
@media (max-width: 782px) {
  #navigation-sticky-wrapper.sticky-wrapper.is-sticky,
  .sticky-wrapper.is-sticky { height: 118px !important; }
  .sticky-wrapper.is-sticky #navigation.byp-mast .byp-mast__logo-img { height: 32px; }
}

/* ---------------------------------------------------------------- responsive
 * Brand recognition survives to the smallest width; everything else drops in a stated order:
 * tagline, then the Weekly label, then search, then the section row becomes a scroller. */
@media (max-width: 1200px) {
  .byp-mast__search { flex-basis: 280px; max-width: 280px; }
  .byp-mast__tagline { font-size: 10px; letter-spacing: .08em; }
}
@media (max-width: 1080px) {
  .byp-mast__rule, .byp-mast__tagline { display: none; }
}
@media (max-width: 900px) {
  /* Label out, envelope in. An arrow on its own says nothing; an envelope is a recognisable
     "newsletter" and keeps the control meaningful once the words are gone. */
  .byp-mast__weekly-t, .byp-mast__weekly-a { display: none; }
  .byp-mast__weekly { padding: 0; width: 44px; justify-content: center; }
  .byp-mast__weekly-i { font-size: 20px; }
  .byp-mast__nav-t { font-size: 11px; letter-spacing: .05em; }
  .byp-mast__nav a { gap: 7px; }
}
@media (max-width: 782px) {
  .byp-mast__inner { padding: 0 16px; }
  .byp-mast__top .byp-mast__inner { min-height: 68px; gap: 12px; }
  .byp-mast__logo-img { height: 44px; }
  .byp-mast__search { display: none; }        /* the hamburger panel carries search on mobile */
  .byp-mast__nav ul { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  .byp-mast__nav ul::-webkit-scrollbar { display: none; }
  .byp-mast__nav li { flex: 0 0 auto; }
  .byp-mast__nav a { height: 46px; padding: 0 14px; }
}
@media (max-width: 520px) {
  .byp-mast__logo-img { height: 36px; }
  .byp-appearance__b { width: 30px; height: 30px; }
  .byp-mast__weekly { height: 38px; width: 38px; }
  .byp-mast__menu .menu-hamburger, .byp-mast__menu .penci-menu-hbg-icon { width: 38px; height: 38px; }
}
/* Below this the section row is the only thing that still needs to shrink. */
@media (max-width: 400px) {
  /* Below this width the section row is icons only. The label must still EXIST for a
     screen reader, or six links announce as "link" with no name at all — WCAG 2.4.4 and
     4.1.2, and a defect nobody sees because it only appears at a width where the text is
     invisible anyway. `display:none` removes an element from the accessibility tree;
     clipping it does not. Found 2026-08-29 by reading the accessibility tree at 390px
     after certifying the keyboard walk at 1440 only. */
  .byp-mast__nav-t {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .byp-mast__nav a { padding: 0 15px; }
  .byp-mast__nav-i { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .byp-mast__weekly, .byp-mast__nav a, .byp-appearance__b, .byp-mast__search input { transition: none; }
  .byp-mast__weekly:hover { transform: none; }
}

/* The masthead paints its own ground; nothing behind it should show through. */
#header.byp-mast-host { background: var(--byp-mast-bg); }

/* The menu button is Soledad's own mobile trigger, so it arrives with the parent's
   `display:none` at desktop widths. Shown at every width, styled as the board's round mark. */
.byp-mast__menu .button-menu-mobile {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--byp-mast-field); border: 1px solid var(--byp-mast-field-rule);
  color: var(--byp-mast-ink); transition: border-color .14s, color .14s;
}
.byp-mast__menu .button-menu-mobile:hover { border-color: var(--byp-brand-red); color: var(--byp-brand-red); }
.byp-mast__menu .button-menu-mobile svg { width: 19px; height: 19px; fill: currentColor; }
@media (max-width: 520px) { .byp-mast__menu .button-menu-mobile { width: 38px; height: 38px; } }

/* ---------------------------------------------------------------- logo, light and dark
 * Both files ship; CSS picks one. The theme's state is a body class, so a <picture> media
 * query cannot see it and a script swap would flash the wrong mark before it ran.
 * The alt text lives on the light copy only — otherwise a screen reader announces the
 * brand twice. */
.byp-mast__logo-img--dark { display: none; }
:root.pcdark-mode .byp-mast__logo-img--light,
body.pcdark-mode .byp-mast__logo-img--light { display: none; }
:root.pcdark-mode .byp-mast__logo-img--dark,
body.pcdark-mode .byp-mast__logo-img--dark { display: block; }

/* ---------------------------------------------------------------- focus
 * Soledad sets `outline: none` broadly, so every interactive element in the masthead was
 * keyboard-navigable and invisible while navigating. A masthead is the first thing a
 * keyboard user reaches, which makes this the worst place to lose the ring.
 *
 * :focus-visible, not :focus — a mouse click should not paint a ring, and Soledad's blanket
 * removal is overridden only where this file owns the element. */
.byp-mast a:focus-visible,
.byp-mast button:focus-visible,
.byp-mast input:focus-visible,
.byp-mast [tabindex]:focus-visible {
  outline: 2px solid var(--byp-brand-red);
  outline-offset: 2px;
  border-radius: 4px;
}
.byp-mast__nav a:focus-visible {
  outline-offset: -3px;
  background: color-mix(in srgb, var(--cat) 10%, transparent);
}
/* The search input already draws its own focus treatment; a ring on top of the ring is
   noise, so it keeps the border-and-glow and skips the outline. */
.byp-mast__search input[type="search"]:focus-visible { outline: none; }
/* Dark ground needs the lifted red, or the ring disappears into the navy. */
:root.pcdark-mode .byp-mast a:focus-visible,
:root.pcdark-mode .byp-mast button:focus-visible,
:root.pcdark-mode .byp-mast [tabindex]:focus-visible,
body.pcdark-mode .byp-mast a:focus-visible,
body.pcdark-mode .byp-mast button:focus-visible,
body.pcdark-mode .byp-mast [tabindex]:focus-visible { outline-color: #FF6A5E; }

/* ================================================================================
 * NAVIGATION DRAWER
 *
 * Soledad gates its off-canvas panel to mobile — `#sidebar-nav { display:none }` above
 * 961px — because in the stock theme the trigger is hidden above 961px too. The approved
 * board shows a menu button at every width, so the panel has to exist at every width.
 * ============================================================================= */

/* The parent's rule is `#sidebar-nav` inside a min-width media query: same specificity,
   later in the cascade. Matching it with one extra class wins without !important. */
#sidebar-nav.byp-drawer {
  display: flex; flex-direction: column; gap: 0;
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 330px; max-width: 86vw; z-index: 99997;
  background: var(--byp-mast-bg); color: var(--byp-mast-ink);
  border-right: 1px solid var(--byp-mast-rule);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  padding: 0 0 28px;
}
body.open-sidebar-nav #sidebar-nav.byp-drawer { transform: none; }

/* Scrim. The parent paints its own overlay, but only where its mobile CSS applies, so the
   drawer needs one that exists at every width. */
.byp-drawer-scrim {
  position: fixed; inset: 0; z-index: 99996;
  background: rgba(8, 12, 22, .55); opacity: 0; pointer-events: none;
  transition: opacity .26s ease;
}
body.open-sidebar-nav .byp-drawer-scrim { opacity: 1; pointer-events: auto; }
.byp-drawer-scrim[hidden] { display: block; }   /* [hidden] is the no-JS state, not a mode */

/* Close control */
#close-sidebar-nav.byp-drawer__x {
  position: fixed; top: 16px; left: 346px; z-index: 99998;
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--byp-mast-bg); border: 1px solid var(--byp-mast-rule);
  color: var(--byp-mast-ink); text-decoration: none;
  transition: border-color .14s, color .14s, opacity .2s;
}
body.open-sidebar-nav #close-sidebar-nav.byp-drawer__x { display: flex; }
#close-sidebar-nav.byp-drawer__x:hover { border-color: var(--byp-brand-red); color: var(--byp-brand-red); }
/* The admin bar is 32px tall and fixed at the top, so a 16px offset puts the close control
   underneath it for any logged-in editor. Visitors never see the bar; editors are the ones
   who use this drawer most while working. */
body.admin-bar #close-sidebar-nav.byp-drawer__x { top: 48px; }
@media (max-width: 782px) { body.admin-bar #close-sidebar-nav.byp-drawer__x { top: 62px; } }
@media (max-width: 460px) {
  #close-sidebar-nav.byp-drawer__x { left: auto; right: 14px; top: 14px; }
  body.admin-bar #close-sidebar-nav.byp-drawer__x { top: 62px; }
}

/* Brand block */
.byp-drawer__brand {
  display: flex; flex-direction: column; gap: 9px;
  padding: 22px 24px 20px; border-bottom: 1px solid var(--byp-mast-rule);
}
.byp-drawer__brand a { display: block; line-height: 0; }
.byp-drawer__brand .byp-mast__logo-img { height: 40px; width: auto; }
.byp-drawer__promise {
  font-family: var(--byp-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--byp-mast-meta);
}

/* Groups */
.byp-drawer__group { padding: 18px 14px 6px; }
.byp-drawer__group--utility { border-top: 1px solid var(--byp-mast-rule); margin-top: 4px; }
.byp-drawer__h {
  margin: 0 0 8px; padding: 0 10px;
  font-family: var(--byp-ui); font-size: 10px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--byp-mast-meta);
}
.byp-drawer__list { list-style: none; margin: 0; padding: 0; }
.byp-drawer__list li { margin: 0; padding: 0; background: none; border: 0; }
.byp-drawer__list li::before, .byp-drawer__list li::marker { content: none; }

/* Sections — icon in the section's own colour, label in its readable partner */
.byp-drawer__list--sections a {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 10px; border-radius: 9px; text-decoration: none;
  transition: background .14s;
}
.byp-drawer__i { display: flex; line-height: 0; font-size: 21px; color: var(--cat, var(--byp-brand-red)); flex: 0 0 auto; }
.byp-drawer__t {
  font-family: var(--byp-ui); font-size: 14px; font-weight: 700;
  letter-spacing: .01em; color: var(--byp-mast-ink);
}
.byp-drawer__list--sections a:hover,
.byp-drawer__list--sections a:focus-visible {
  background: color-mix(in srgb, var(--cat, var(--byp-brand-red)) 10%, transparent);
}
.byp-drawer__list--sections a:hover .byp-drawer__t { color: var(--cat-ink, var(--byp-brand-red)); }
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .byp-drawer__list--sections a:hover { background: var(--byp-mast-field); }
}

/* Utility pages — quieter by design; they are not the publication's sections */
.byp-drawer__list--utility a {
  display: block; padding: 8px 10px; border-radius: 7px; text-decoration: none;
  font-family: var(--byp-ui); font-size: 13px; color: var(--byp-mast-meta);
  transition: color .14s, background .14s;
}
.byp-drawer__list--utility a:hover,
.byp-drawer__list--utility a:focus-visible {
  color: var(--byp-mast-ink); background: var(--byp-mast-field);
}

/* The one action in the drawer */
.byp-drawer__cta {
  display: flex; align-items: center; gap: 12px; margin: 12px 24px 4px;
  padding: 13px 15px; border-radius: 11px; text-decoration: none;
  background: var(--byp-brand-red); color: #FFFFFF;
  transition: background .14s;
}
.byp-drawer__cta:hover { background: var(--byp-brand-coral); color: #FFFFFF; }
.byp-drawer__cta-i { display: flex; line-height: 0; font-size: 22px; flex: 0 0 auto; }
.byp-drawer__cta strong {
  display: block; font-family: var(--byp-ui); font-size: 13.5px; font-weight: 700; color: #FFFFFF;
}
.byp-drawer__cta small {
  display: block; font-family: var(--byp-body); font-size: 11.5px; line-height: 1.35;
  color: rgba(255, 255, 255, .88); margin-top: 2px;
}

/* Focus, inside the drawer as everywhere else in the masthead */
.byp-drawer a:focus-visible, #close-sidebar-nav.byp-drawer__x:focus-visible {
  outline: 2px solid var(--byp-brand-red); outline-offset: 2px;
}
:root.pcdark-mode .byp-drawer a:focus-visible,
:root.pcdark-mode #close-sidebar-nav.byp-drawer__x:focus-visible,
body.pcdark-mode .byp-drawer a:focus-visible,
body.pcdark-mode #close-sidebar-nav.byp-drawer__x:focus-visible { outline-color: #FF6A5E; }

/* The drawer's own logo swap, same rule as the masthead's */
.byp-drawer .byp-mast__logo-img--dark { display: none; }
:root.pcdark-mode .byp-drawer .byp-mast__logo-img--light,
body.pcdark-mode .byp-drawer .byp-mast__logo-img--light { display: none; }
:root.pcdark-mode .byp-drawer .byp-mast__logo-img--dark,
body.pcdark-mode .byp-drawer .byp-mast__logo-img--dark { display: block; }

@media (prefers-reduced-motion: reduce) {
  #sidebar-nav.byp-drawer, .byp-drawer-scrim { transition: none; }
}