/* One persistent header. The home film needs no spacer; other pages keep their resting space. */
html { scroll-padding-top: var(--reading-clearance, 144px); }
.reading-space--home { height: 0; }
.reading-space--page { height: var(--reading-space-height, 71px); flex-shrink: 0; }
.reading-space--audience { height: var(--reading-space-height, 126px); flex-shrink: 0; }
.reading-frame { --reading-rest-row-height: 70px; --reading-rest-row-pad: 10px; --reading-rest-tabs-pad: 6px; --reading-row-height: var(--reading-rest-row-height); --reading-row-pad: var(--reading-rest-row-pad); --reading-logo: 210px; --reading-letter-height: calc(var(--reading-logo) * 42 / 726); --reading-tabs-pad: var(--reading-rest-tabs-pad); position: fixed; inset: 0 0 auto; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 12px 36px rgb(0 0 0 / 8%); }
.reading-frame[data-compact] { --reading-row-height: 56px; --reading-row-pad: 6px; --reading-tabs-pad: 0px; --brand-wordmark-delay: 0ms; --brand-initials-delay: 100ms; }
/* The homepage and every audience view share this masthead geometry. */
.site-header--reading { position: relative; inset: auto; transform: none; z-index: auto; min-height: var(--reading-row-height); padding-block: var(--reading-row-pad); gap: 20px; transition: min-height 420ms cubic-bezier(.22, 1, .36, 1), padding-top 420ms cubic-bezier(.22, 1, .36, 1), padding-bottom 420ms cubic-bezier(.22, 1, .36, 1) !important; }
.site-header--reading .wordmark { width: var(--reading-logo); transition: width 180ms ease; }
.site-header--reading .navigation { gap: 22px; font-size: 13px; }
.site-header--reading .nav-links { gap: 22px; margin-right: 0; }
.site-header--reading .nav-cta { min-height: 42px; padding-inline: 18px; color: #d6d1de; background: #17151d; border-color: #494451; box-shadow: none; }
.site-header--reading .nav-cta:hover { color: #f7f1fc; background: #24212b; border-color: #494451; }
/* The full signature folds away as its two initials settle into the same home link. */
/* Keep brand motion enabled over the shared reduced-motion reset, as requested. */
.brand--collapsible { position: relative; width: var(--reading-logo); height: 44px; overflow: hidden; transition: width 420ms cubic-bezier(.22, 1, .36, 1) !important; }
.brand--collapsible .wordmark { position: absolute; left: 0; top: 50%; max-width: none; opacity: 1; transform: translate(0, -50%); transform-origin: left center; transition: opacity 200ms ease var(--brand-wordmark-delay, 100ms), transform 420ms cubic-bezier(.22, 1, .36, 1) !important; }
/* Match the 726x42 signature to the SVG's 24.25-unit stroked letter height. */
.brand-initials { position: absolute; left: 0; top: 50%; width: calc(var(--reading-letter-height) * 56 / 24.25); height: calc(var(--reading-letter-height) * 34 / 24.25); color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translate(10px, -50%); transform-origin: left center; transition: opacity 140ms ease var(--brand-initials-delay, 0ms), transform 300ms cubic-bezier(.22, 1, .36, 1) !important; }
.reading-frame[data-compact] .brand--collapsible { width: 44px; }
.reading-frame[data-compact] .wordmark { opacity: 0; transform: translate(-7px, -50%) scaleX(.9); }
.reading-frame[data-compact] .brand-initials { opacity: 1; transform: translate(0, -50%); }
.reading-main-panel { top: calc(100% - 2px); max-height: calc(100dvh - var(--reading-row-height) - 16px); overflow-y: auto; overscroll-behavior: contain; }
.audience-switcher { position: relative; }
.audience-summary { display: flex; align-items: center; gap: 12px; min-height: 44px; width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); list-style: none; cursor: pointer; font-size: 13px; }
.audience-summary::-webkit-details-marker { display: none; }
.audience-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 6px; }
.audience-context { color: var(--quiet); margin-right: auto; }
.audience-selection { color: var(--ink); }
.audience-chevron { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 180ms ease; }
.audience-switcher[open] .audience-chevron { transform: rotate(180deg); }
.audience-switcher[data-wide] > .audience-summary { display: none; }
.audience-options { display: flex; align-items: center; justify-content: center; gap: 16px; width: calc(100% - 2 * var(--pad)); max-width: calc(var(--shell) - 2 * var(--pad)); min-height: 44px; margin: 0 auto; padding: var(--reading-tabs-pad) 0; transition: padding-top 420ms cubic-bezier(.22, 1, .36, 1), padding-bottom 420ms cubic-bezier(.22, 1, .36, 1) !important; }
/* A keyboard skip remains above the glass, including after scrolling. */
.skip { z-index: 60; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .reading-frame { background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
}
.reading-frame--home:not([data-scrolled]) { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Over an opaque light band (reading-navigation.js) the glass goes solid brand black, with no shadow to smear. */
.reading-frame[data-over-light] { background: var(--bg); background: color-mix(in srgb, var(--bg) 96%, transparent); box-shadow: none; }
/* Desktop sizing follows the larger header reference. The phone menu uses its own resting row. */
@media (min-width: 961px) {
  html { scroll-padding-top: var(--reading-clearance, 169px); }
  .reading-space--page { height: var(--reading-space-height, 89px); }
  .reading-space--audience { height: var(--reading-space-height, 145px); }
  .reading-frame { --reading-rest-row-height: 88px; --reading-rest-row-pad: 12px; --reading-logo: 262px; }
  .reading-frame[data-compact] { --reading-row-height: 70px; --reading-row-pad: 8px; }
  .site-header--reading .navigation { gap: 28px; font-size: 16px; }
  .site-header--reading .nav-links { gap: 28px; }
  .site-header--reading .nav-cta { min-height: 52px; padding-inline: 23px; }
}
@media (max-width: 960px) {
  /* Keep the full desktop mark until the mobile menu, gap and scrollbar need its space. */
  .reading-frame { --reading-logo: clamp(0px, calc(100vw - 2 * var(--pad) - 76px), 210px); }
  .site-header--reading { gap: 16px; }
  .audience-options { position: absolute; top: 100%; left: var(--pad); right: var(--pad); display: block; width: auto; max-height: calc(100dvh - var(--reading-row-height) - 60px); overflow-y: auto; overscroll-behavior: contain; padding: 12px; border: 1px solid var(--line); border-radius: 0 0 16px 16px; background: var(--surface); box-shadow: 0 24px 60px rgb(0 0 0 / 25%); }
}
@media (max-width: 680px), (max-width: 960px) and (orientation: portrait) {
  .reading-space--page { height: var(--reading-space-height, 65px); }
  .reading-frame { --reading-rest-row-height: 64px; --reading-rest-row-pad: 8px; }
  .site-header--reading .navigation { gap: 14px; }
}
@media (max-width: 360px) {
  .audience-summary { gap: 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .audience-chevron { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .reading-frame, .reading-frame--home:not([data-scrolled]) { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .reading-frame, .reading-frame--home:not([data-scrolled]), .audience-options { background: Canvas; color: CanvasText; border-color: CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
  html { scroll-padding-top: 32px; }
  .reading-space { height: auto; }
  .reading-frame { --reading-logo: 210px; position: static; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header--reading { min-height: 50px; padding-block: 0; transition: none !important; }
  .brand--collapsible, .reading-frame[data-compact] .brand--collapsible { width: 210px; overflow: visible; transition: none !important; }
  .brand--collapsible .wordmark, .reading-frame[data-compact] .wordmark { opacity: 1; transform: translate(0, -50%); transition: none !important; }
  .brand-initials { display: none; }
  .audience-switcher { display: none; }
  .audience-options { transition: none !important; }
}
/* Preserve the compact primary header's existing print geometry on narrow paper. */
@media print and (max-width: 960px) {
  .site-header--reading { min-height: var(--reading-row-height); padding-block: var(--reading-row-pad); }
}