/*
Theme Name: Montlior Wire
Theme URI: https://jcdigital.dev/themes/montlior-wire/
Author: Jhon Carl Ignoro
Author URI: https://jcdigital.dev/
Description: Press release and media distribution theme for Montlior Group. A newsroom-grade wire service front end - information dense, chronological and fast - built on native WordPress editing with no page builder, no framework and no third-party plugin dependency. Ships with release, FAQ, contact and media-asset post types, a batched content importer, an SEO panel on every editing screen, a global styling panel and an activity log.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: montlior-wire
Tags: news, blog, custom-logo, custom-menu, featured-images, block-patterns, editor-style, full-width-template, rtl-language-support, translation-ready, threaded-comments, accessibility-ready
*/
/* ==========================================================================
   MONTLIOR WIRE — Press & Media Release Distribution
   Montlior Group · Est. 1962 · Meridale, Coravia
   --------------------------------------------------------------------------
   0. RESET
   1. TOKENS
   2. BASE / TYPOGRAPHY
   3. LAYOUT
   4. COMPONENTS
   5. UTILITIES
   6. PRINT
   ========================================================================== */

/* ==========================================================================
   0. RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6, li, dd, dt, figcaption {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-weight: 700;
  line-height: 1.2;
}

p, li { text-wrap: pretty; }

ul[class], ol[class] { list-style: none; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

a { color: inherit; }

:target { scroll-margin-block-start: 8rem; }

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Brand palette ------------------------------------------------- */
  --steel:      #1E4E79;   /* primary — header, headings, buttons        */
  --steel-800:  #163A5A;   /* deeper steel — hovers, footer               */
  --steel-900:  #10293F;   /* deepest — utility strip                     */
  --blue:       #1D6FE0;   /* action — links, active filters              */
  --blue-700:   #1558B4;   /* action hover / AA text on tint              */
  --tint:       #E8F1FC;   /* filter chips, asset panel                   */
  --tint-deep:  #D4E4F8;   /* tint border / hover                         */
  --page:       #F7F9FC;
  --card:       #FFFFFF;
  --ink:        #111827;
  --meta:       #6B7280;
  --meta-dark:  #4B5563;   /* AA-safe meta on tint                        */
  --rule:       #E5E7EB;
  --rule-soft:  #EFF2F6;
  --embargo:    #B45309;   /* embargo badge only                          */
  --embargo-bg: #FEF6E7;

  /* --- Fluid type scale ---------------------------------------------- */
  --step--2: clamp(0.6875rem, 0.667rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.8125rem, 0.786rem + 0.13vw, 0.875rem);
  --step-0:  clamp(0.9375rem, 0.911rem + 0.13vw, 1rem);
  --step-1:  clamp(1.0625rem, 1.009rem + 0.27vw, 1.1875rem);
  --step-2:  clamp(1.1875rem, 1.058rem + 0.65vw, 1.5rem);
  --step-3:  clamp(1.4375rem, 1.221rem + 1.08vw, 1.9375rem);

  /* --- Fluid space scale --------------------------------------------- */
  --sp-1: clamp(0.25rem, 0.24rem + 0.05vw, 0.3125rem);
  --sp-2: clamp(0.5rem, 0.48rem + 0.1vw, 0.625rem);
  --sp-3: clamp(0.75rem, 0.72rem + 0.15vw, 0.9375rem);
  --sp-4: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  --sp-5: clamp(1.5rem, 1.42rem + 0.4vw, 1.875rem);
  --sp-6: clamp(2rem, 1.85rem + 0.75vw, 2.75rem);
  --sp-7: clamp(2.75rem, 2.45rem + 1.5vw, 4rem);
  --sp-8: clamp(3.5rem, 3rem + 2.5vw, 6rem);

  /* --- Structure ------------------------------------------------------ */
  --gutter: clamp(1rem, 0.55rem + 2.25vw, 2.5rem);
  --measure: 68ch;
  --shell: 84rem;

  /* --- Effect --------------------------------------------------------- */
  --radius: 3px;
  --radius-lg: 5px;
  --shadow-sm: 0 1px 2px rgb(17 24 39 / 0.04);
  --shadow: 0 1px 2px rgb(17 24 39 / 0.05), 0 4px 14px -6px rgb(30 78 121 / 0.12);
  --ring: 0 0 0 3px rgb(29 111 224 / 0.32);

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur: 160ms;

  color-scheme: light;
  accent-color: var(--blue);
}

/* ==========================================================================
   2. BASE / TYPOGRAPHY
   ========================================================================== */

body {
  font-family: var(--sans);
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--page);
  font-variant-numeric: tabular-nums;
}

h1 { font-size: var(--step-3); letter-spacing: -0.018em; color: var(--steel); }
h2 { font-size: var(--step-2); letter-spacing: -0.012em; color: var(--steel); }
h3 { font-size: var(--step-1); letter-spacing: -0.008em; color: var(--steel); }
h4 { font-size: var(--step-0); letter-spacing: 0; color: var(--steel); }

a { color: var(--blue); text-underline-offset: 0.16em; text-decoration-thickness: from-font; }
a:hover { color: var(--blue-700); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--tint); color: var(--steel-900); }

hr {
  border: 0;
  border-block-start: 1px solid var(--rule);
  margin-block: var(--sp-5);
}

code, kbd, samp { font-family: var(--mono); font-size: 0.92em; }

/* Monospace signature — timestamps, IDs, codes */
.mono {
  font-family: var(--mono);
  font-variant-ligatures: none;
  font-feature-settings: "zero" 1;
}

.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--meta-dark);
  max-width: var(--measure);
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.wrap--narrow { --shell: 56rem; }
.wrap--prose  { --shell: 46rem; }

/* Reading pages: the shell is sized so that a measure-width column plus its
   rail exactly fill it, leaving no dead gutter between the two. */
.wrap--article { --shell: 65rem; }

.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% -110%;
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  background: var(--steel);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { translate: -50% 0; color: #fff; }

/* --- Utility strip ---------------------------------------------------- */

.strip {
  background: var(--steel-900);
  color: #C7D6E5;
  font-family: var(--mono);
  /* Deliberately below --step--2: the strip is a standing credit line, and at
     narrow widths it must stay out of the way of the nameplate below it. */
  font-size: clamp(0.5938rem, 0.554rem + 0.2vw, 0.75rem);
  letter-spacing: 0.05em;
}

/* Two columns at every width: credit line left, wire clock right.
   Each side wraps to at most two rows, so the strip never grows past ~2 lines. */
.strip__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-1) var(--sp-4);
  min-height: 2.25rem;
  padding-block: var(--sp-2);
  container-type: inline-size;
}

/* Block, not flex: a flex container would turn each text run between the
   inline elements into its own item, and they would wrap independently. */
.strip__note { text-transform: uppercase; line-height: 1.5; }

.strip__note b { color: #fff; font-weight: 500; }

.strip__note .pulse {
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 0.5em;
}

.strip__clock {
  color: #fff;
  text-align: right;
  line-height: 1.5;
}
/* Date and time each stay intact; the break falls between them when narrow. */
.strip__date, .strip__time { white-space: nowrap; }

/* Below roughly a phone width the city is dropped and the clock stacks date
   over time. Stacking narrows the right track, which is what lets the credit
   line on the left settle into two rows. Container query, not a media query. */
@container (max-width: 30rem) {
  .strip__place { display: none; }
  .strip__clock time {
    display: grid;
    justify-items: end;
  }
}

/* Smallest phones: the founding year goes, and the credit shortens to
   "official channel of Montlior Group" — trimming words rather than shrinking
   the type, which at this size would stop being readable. */
@container (max-width: 20rem) {
  .strip__est,
  .strip__dist { display: none; }
}

.pulse {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgb(74 222 128 / 0.6);
  animation: pulse 2.4s var(--ease) infinite;
  flex: none;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgb(74 222 128 / 0.55); }
  70%  { box-shadow: 0 0 0 6px rgb(74 222 128 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0); }
}

/* --- Masthead --------------------------------------------------------- */

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--card);
  border-block-end: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  min-height: 4rem;
  padding-block: var(--sp-3);
}

.brand {
  display: block;
  flex: none;
  line-height: 0;
}
.brand img {
  inline-size: clamp(10.5rem, 8rem + 8vw, 15rem);
  block-size: auto;
}

.nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 0.05rem + 1vw, 1.25rem);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.125rem, -0.2rem + 1.4vw, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--steel);
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover { background: var(--tint); color: var(--steel-800); }
.nav__link[aria-current="page"] {
  color: var(--blue-700);
  box-shadow: inset 0 -2px 0 0 var(--blue);
  border-radius: var(--radius) var(--radius) 0 0;
}

.nav__tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-inline-start: var(--sp-3);
  border-inline-start: 1px solid var(--rule);
}

.icon-btn {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius);
  color: var(--steel);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--tint); color: var(--blue-700); }
.icon-btn svg { inline-size: 1.125rem; block-size: 1.125rem; }

.nav__toggle { display: none; }

/* Never let a hidden control claim layout, whatever its display rule. */
[hidden] { display: none !important; }

/* Sole media query in the stylesheet — navigation collapse.
   Scoped to .js so a script-free browser always gets the full nav list. */
@media (max-width: 56.25rem) {
  .js .nav__toggle {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin-inline-start: auto;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--steel);
  }
  .js .nav__toggle svg { inline-size: 1.25rem; block-size: 1.25rem; }
  .js .nav__toggle[aria-expanded="true"] { background: var(--tint); border-color: var(--tint-deep); }

  .nav {
    margin-inline-start: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* With scripting, the menu is a panel anchored under the masthead and taken
     out of flow, so opening it overlays the page instead of pushing it down. */
  .js .nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 40;
    padding: var(--sp-2) var(--gutter) var(--sp-4);
    background: var(--card);
    border-block-end: 1px solid var(--rule);
    box-shadow: 0 14px 28px -14px rgb(16 41 63 / 0.35);
    max-block-size: min(70dvh, 32rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .nav:not(.is-open) { display: none; }

  /* Without scripting there is no toggle, so the list simply wraps into the
     masthead as an ordinary block and stays visible. */
  .no-js .nav {
    order: 3;
    flex-basis: 100%;
    padding-block: var(--sp-2) var(--sp-4);
    border-block-start: 1px solid var(--rule);
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: var(--sp-3) var(--sp-2);
    font-size: var(--step-0);
    border-block-end: 1px solid var(--rule-soft);
    border-radius: 0;
  }
  .nav__link[aria-current="page"] { box-shadow: inset 3px 0 0 0 var(--blue); }
  .nav__tools {
    padding: var(--sp-3) 0 0;
    border-inline-start: 0;
  }
}

/* --- Page shell ------------------------------------------------------- */

.page { padding-block: var(--sp-6) var(--sp-8); }

.page-head {
  padding-block: var(--sp-6) var(--sp-5);
  border-block-end: 1px solid var(--rule);
  margin-block-end: var(--sp-6);
}
.page-head > * + * { margin-block-start: var(--sp-3); }

/* Feed + rail: intrinsic reflow, no breakpoints */
.layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-6) var(--sp-6);
}
.layout__main {
  flex: 5 1 min(100%, 34rem);
  min-inline-size: 0;
}
.layout__rail {
  flex: 2 1 min(100%, 17rem);
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Reading variant: the text column stops at the measure and the rail takes
   the remainder, so no gutter opens up between them at wide viewports. */
.layout--article .layout__main { flex: 0 1 min(100%, var(--measure)); }
.layout--article .layout__rail { flex: 1 1 min(100%, 16rem); }
.layout--article .article { max-inline-size: none; }

/* Running text stays readable even where the column itself is wide. */
.layout__main > .stack > p,
.layout__main > .stack > ul,
.layout__main > .stack > ol,
.layout__main > .stack > .steps { max-inline-size: var(--measure); }

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- Card ------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-block-end: 1px solid var(--rule);
  background: linear-gradient(var(--card), var(--page));
}
.card__head h2, .card__head h3 {
  font-size: var(--step--1);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}
.card__head svg { inline-size: 1rem; block-size: 1rem; color: var(--blue); flex: none; }

.card__body { padding: var(--sp-4); }
.card__body > * + * { margin-block-start: var(--sp-3); }

/* --- Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.625em 1.1em;
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn svg { inline-size: 1em; block-size: 1em; flex: none; }

.btn--primary { background: var(--steel); color: #fff; }
.btn--primary:hover { background: var(--steel-800); color: #fff; }

.btn--action { background: var(--blue); color: #fff; }
.btn--action:hover { background: var(--blue-700); color: #fff; }

.btn--ghost { background: var(--card); color: var(--steel); border-color: var(--rule); }
.btn--ghost:hover { background: var(--tint); border-color: var(--tint-deep); color: var(--steel-800); }

.btn--block { inline-size: 100%; }

/* --- Category chips --------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.24em 0.62em;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--blue-700);
  background: var(--tint);
  border: 1px solid var(--tint-deep);
  border-radius: 2px;
  text-decoration: none;
}
.chip::before {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-radius: 1px;
  background: currentColor;
  flex: none;
}
.chip--embargo {
  color: var(--embargo);
  background: var(--embargo-bg);
  border-color: #F5D9A8;
}
.chip--plain::before { display: none; }

/* --- Filter bar ------------------------------------------------------- */

.filterbar {
  position: sticky;
  inset-block-start: var(--masthead-h, 4.75rem);
  z-index: 20;
  background: color-mix(in srgb, var(--page) 92%, transparent);
  backdrop-filter: blur(8px);
  border-block: 1px solid var(--rule);
  margin-block-end: var(--sp-5);
}

.filterbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  flex-wrap: wrap;
}

.filterbar__label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  flex: none;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.42em 0.85em;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--steel);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filter:hover { background: var(--tint); border-color: var(--tint-deep); color: var(--steel-800); }
.filter[aria-pressed="true"], .filter.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.filter__count {
  font-size: 0.85em;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

.filter-status {
  font-family: var(--mono);
  font-size: var(--step--2);
  color: var(--meta);
  margin-inline-start: auto;
  white-space: nowrap;
}

/* --- Release feed ----------------------------------------------------- */

.feed { container-type: inline-size; }

.feed__day {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  padding-block: var(--sp-3) var(--sp-2);
  margin-block-start: var(--sp-5);
  border-block-end: 2px solid var(--steel);
}
.feed__day:first-child { margin-block-start: 0; }

.feed__date {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}
.feed__daycount {
  font-family: var(--mono);
  font-size: var(--step--2);
  color: var(--meta);
  margin-inline-start: auto;
}

.feed__list { list-style: none; margin: 0; padding: 0; }

.release {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--rule);
  border-block-start: 0;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feed__list > li:first-child .release {
  border-block-start: 1px solid var(--rule);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.feed__list > li:last-child .release { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.feed__list > li:only-child .release { border-radius: var(--radius-lg); }
.release:hover { background: #FCFDFF; box-shadow: inset 3px 0 0 0 var(--blue); }
.release:has(a:focus-visible) { box-shadow: inset 3px 0 0 0 var(--blue); }

.release__time {
  grid-column: 1;
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.release__time small {
  display: block;
  font-size: 0.8em;
  font-weight: 400;
  color: var(--meta);
  letter-spacing: 0.06em;
}

.release__body { grid-column: 2; min-inline-size: 0; }

.release__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-2);
}

.release__title {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--steel);
  margin-block-end: var(--sp-2);
}
.release__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--blue), var(--blue));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.release__title a:hover { color: var(--blue-700); background-size: 100% 1px; }
/* Deliberately no full-row link overlay: an overlay would make the release ID
   and summary unselectable, and copying an ID is the single most common thing
   a journalist does on this page. The headline is the link. */

.release__summary {
  font-size: var(--step--1);
  color: var(--meta-dark);
  line-height: 1.5;
  max-width: 62ch;
  margin-block-end: var(--sp-2);
}

.release__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  font-family: var(--mono);
  font-size: var(--step--2);
  color: var(--meta);
  letter-spacing: 0.04em;
}
.release__foot span { display: inline-flex; align-items: center; gap: 0.4em; }
.release__foot svg { inline-size: 0.9em; block-size: 0.9em; flex: none; }

.release[hidden] { display: none; }

/* Container-driven collapse: timestamp + chips stack above the headline */
@container (max-width: 34rem) {
  .release {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-2);
  }
  .release__time {
    grid-column: 1;
    display: flex;
    align-items: baseline;
    gap: 0.6em;
  }
  .release__time small { display: inline; }
  .release__body { grid-column: 1; }
}

.feed__empty {
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  background: var(--card);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  color: var(--meta);
}
.feed__empty p + p { margin-block-start: var(--sp-3); }

/* --- Contact card ----------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}
.contact + .contact {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--rule-soft);
}
.contact__photo {
  inline-size: 3.5rem;
  block-size: 4.375rem;
  object-fit: cover;
  border-radius: 2px;
  background: var(--tint);
  border: 1px solid var(--rule);
}
.contact__name {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--steel);
  line-height: 1.25;
}
.contact__role {
  font-size: var(--step--2);
  color: var(--meta);
  margin-block: 0.15em var(--sp-2);
  line-height: 1.4;
}
.contact__links {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-family: var(--mono);
  font-size: var(--step--2);
}
.contact__links a { text-decoration: none; word-break: break-word; }
.contact__links a:hover { text-decoration: underline; }

/* --- Asset panel ------------------------------------------------------ */

.assets { background: var(--tint); border-color: var(--tint-deep); }
.assets .card__head {
  background: none;
  border-block-end-color: var(--tint-deep);
}

.asset-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

.asset {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--tint-deep);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.asset:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); color: var(--ink); }
.asset__thumb {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--rule);
  background: var(--page);
}
.asset__ico {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 2px;
  background: var(--tint);
  color: var(--steel);
}
.asset__ico svg { inline-size: 1.125rem; block-size: 1.125rem; }
.asset__name {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.3;
  color: var(--steel);
}
.asset__meta {
  display: block;
  font-family: var(--mono);
  font-size: var(--step--2);
  color: var(--meta);
  margin-block-start: 0.15em;
}
.asset__dl { color: var(--blue); flex: none; }
.asset__dl svg { inline-size: 1.125rem; block-size: 1.125rem; }

/* --- Subscribe box ---------------------------------------------------- */

.subscribe .card__body > p { font-size: var(--step--1); color: var(--meta-dark); }

.field { display: grid; gap: var(--sp-2); }
.field label {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steel);
}
.field .hint { font-size: var(--step--2); color: var(--meta); font-family: var(--sans); letter-spacing: 0; text-transform: none; }

.input, .textarea, .select {
  inline-size: 100%;
  padding: 0.6em 0.75em;
  font-size: var(--step--1);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--ring);
}
.textarea { min-block-size: 8rem; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7280' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 1rem;
  padding-inline-end: 2.25rem;
}

.checkline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--step--1);
  color: var(--meta-dark);
}
.checkline input { margin-block-start: 0.25em; inline-size: 1rem; block-size: 1rem; flex: none; }

/* --- RSS panel -------------------------------------------------------- */

.rss-line {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--mono);
  font-size: var(--step--2);
  background: var(--page);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  color: var(--meta-dark);
  overflow-x: auto;
  white-space: nowrap;
}
.rss-line svg { inline-size: 0.95rem; block-size: 0.95rem; color: #E8763A; flex: none; }

/* --- Release detail --------------------------------------------------- */

.article { max-inline-size: var(--measure); }

.article__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-block-end: var(--sp-4);
}
.article__stamp {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  color: var(--meta);
}

.article__title {
  font-size: var(--step-3);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--steel);
}
.article__sub {
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.45;
  color: var(--meta-dark);
  margin-block-start: var(--sp-3);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-4);
  margin-block: var(--sp-5);
  border-block: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--step--2);
  color: var(--meta);
  letter-spacing: 0.04em;
}
.article__meta div { display: flex; flex-direction: column; gap: 0.25em; }
.article__meta dt, .article__meta b {
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.92em;
  color: var(--meta);
}
.article__meta dd, .article__meta span { margin: 0; color: var(--steel); }

.prose > * + * { margin-block-start: var(--sp-4); }
.prose p { line-height: 1.68; }
.prose h2 {
  font-size: var(--step-2);
  margin-block-start: var(--sp-6);
  padding-block-end: var(--sp-2);
  border-block-end: 1px solid var(--rule);
}
.prose h3 { font-size: var(--step-1); margin-block-start: var(--sp-5); }
.prose ul, .prose ol { padding-inline-start: 1.35em; display: grid; gap: var(--sp-2); }
.prose li { line-height: 1.6; }
.prose li::marker { color: var(--blue); }
.prose strong { color: var(--steel-800); }
.prose figure { margin: 0; }
.prose figcaption {
  font-size: var(--step--2);
  color: var(--meta);
  margin-block-start: var(--sp-2);
  padding-inline-start: var(--sp-3);
  border-inline-start: 2px solid var(--rule);
}

.dateline {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
  font-size: 0.92em;
}

blockquote.pull {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--card);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--steel);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
blockquote.pull p {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--steel-800);
}
blockquote.pull p + p { margin-block-start: var(--sp-3); }
blockquote.pull footer {
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--rule-soft);
  font-size: var(--step--2);
  font-family: var(--mono);
  color: var(--meta);
  letter-spacing: 0.04em;
}
blockquote.pull footer b { color: var(--steel); font-weight: 500; }

.boilerplate {
  margin-block-start: var(--sp-6);
  padding: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.boilerplate h2 {
  font-size: var(--step-0);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 0;
  padding: 0;
  margin-block-start: 0;
}
.boilerplate p {
  font-size: var(--step--1);
  color: var(--meta-dark);
  line-height: 1.62;
  margin-block-start: var(--sp-3);
}

.wire-stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-block-start: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--steel-900);
  color: #C7D6E5;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wire-stamp svg { inline-size: 1rem; block-size: 1rem; color: #7FB0E8; flex: none; }
.wire-stamp b { color: #fff; font-weight: 500; }
.wire-stamp span { margin-inline-start: auto; opacity: 0.75; text-transform: none; letter-spacing: 0.04em; }

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--rule);
}
.pager a {
  flex: 1 1 min(100%, 16rem);
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pager a:hover { border-color: var(--blue); background: #FCFDFF; }
.pager a[rel="next"] { text-align: right; }
.pager .eyebrow { color: var(--blue); }
.pager b { font-size: var(--step--1); font-weight: 500; color: var(--steel); line-height: 1.4; }

/* --- Grids ------------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 15rem)), 1fr));
  gap: var(--sp-4);
}
.grid--wide { --min: 20rem; }
.grid--tight { --min: 11rem; }

/* --- Asset / download card -------------------------------------------- */

.acard {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.acard:hover { border-color: var(--tint-deep); box-shadow: var(--shadow); }
.acard__media {
  aspect-ratio: 4 / 3;
  inline-size: 100%;
  object-fit: cover;
  background: var(--tint);
  border-block-end: 1px solid var(--rule);
}
.acard__media--contain { object-fit: contain; padding: var(--sp-4); background: var(--card); }
.acard__body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.acard__title { font-size: var(--step-0); color: var(--steel); line-height: 1.35; }
.acard__desc { font-size: var(--step--1); color: var(--meta-dark); line-height: 1.5; }
.acard__spec {
  font-family: var(--mono);
  font-size: var(--step--2);
  color: var(--meta);
  letter-spacing: 0.05em;
  margin-block-start: auto;
  padding-block-start: var(--sp-2);
}
.acard__foot {
  padding: var(--sp-3) var(--sp-4);
  border-block-start: 1px solid var(--rule);
  background: var(--page);
}

/* --- Person card ------------------------------------------------------ */

.person {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.person__photo {
  aspect-ratio: 4 / 5;
  inline-size: 100%;
  object-fit: cover;
  background: var(--tint);
}
.person__body { padding: var(--sp-4); display: grid; gap: var(--sp-2); flex: 1; }
.person__name { font-size: var(--step-0); color: var(--steel); }
.person__role { font-size: var(--step--1); color: var(--meta); line-height: 1.45; }
.person__foot {
  padding: var(--sp-3) var(--sp-4);
  border-block-start: 1px solid var(--rule);
  background: var(--page);
  font-family: var(--mono);
  font-size: var(--step--2);
}

/* --- Do / Don't ------------------------------------------------------- */

.rule-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}
.rule-card__flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rule-card__flag svg { inline-size: 1rem; block-size: 1rem; }
.rule-card--do .rule-card__flag { color: #15803D; }
.rule-card--dont .rule-card__flag { color: #B42318; }
.rule-card--do { box-shadow: inset 3px 0 0 0 #15803D; }
.rule-card--dont { box-shadow: inset 3px 0 0 0 #B42318; }
.rule-card p { font-size: var(--step--1); color: var(--meta-dark); line-height: 1.55; }

/* --- Fact sheet / data table ------------------------------------------ */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table {
  inline-size: 100%;
  min-inline-size: 34rem;
  font-size: var(--step--1);
  background: var(--card);
}
.table caption {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
  padding-block-end: var(--sp-3);
}
.table th, .table td {
  padding: var(--sp-3) var(--sp-3);
  text-align: left;
  border-block-end: 1px solid var(--rule);
  vertical-align: top;
}
.table thead th {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
  background: var(--page);
  border-block-end: 2px solid var(--steel);
  white-space: nowrap;
}
.table tbody th { font-weight: 500; color: var(--steel); }
.table tbody tr:hover { background: #FCFDFF; }
.table td.num, .table th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table tfoot td, .table tfoot th {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--steel);
  background: var(--page);
  border-block-end: 0;
  border-block-start: 2px solid var(--steel);
}

.facts { display: grid; gap: 0; }
.facts div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--sp-1) var(--sp-4);
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--rule);
}
.facts dt {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--meta);
}
.facts dd { margin: 0; font-size: var(--step--1); color: var(--ink); }

/* --- Stat strip ------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat { background: var(--card); padding: var(--sp-4); display: grid; gap: var(--sp-1); }
.stat__num {
  font-family: var(--mono);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--steel);
  letter-spacing: -0.01em;
}
.stat__label {
  font-size: var(--step--2);
  color: var(--meta);
  line-height: 1.4;
}

/* --- Accordion (FAQ) -------------------------------------------------- */

.qa {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.qa + .qa { margin-block-start: var(--sp-3); }
.qa summary {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--steel);
  cursor: pointer;
  list-style: none;
  transition: background var(--dur) var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { background: var(--tint); }
.qa summary::after {
  content: "";
  flex: none;
  margin-inline-start: auto;
  inline-size: 0.7rem;
  block-size: 0.7rem;
  margin-block-start: 0.35em;
  border-inline-end: 2px solid var(--blue);
  border-block-end: 2px solid var(--blue);
  rotate: 45deg;
  transition: rotate var(--dur) var(--ease);
}
.qa[open] summary::after { rotate: 225deg; }
.qa[open] summary { border-block-end: 1px solid var(--rule); }
.qa__body { padding: var(--sp-4); }
.qa__body > * + * { margin-block-start: var(--sp-3); }
.qa__body p, .qa__body li { font-size: var(--step--1); color: var(--meta-dark); line-height: 1.62; }
.qa__body ul { padding-inline-start: 1.25em; display: grid; gap: var(--sp-2); }
.qa__num {
  font-family: var(--mono);
  font-size: var(--step--2);
  color: var(--meta);
  flex: none;
  padding-block-start: 0.25em;
}

/* --- Steps ------------------------------------------------------------ */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); counter-reset: step; }
.steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--sp-3);
  counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  color: var(--blue);
  padding-block-start: 0.28em;
}
.steps h3 { font-size: var(--step-0); margin-block-end: var(--sp-1); }
.steps p { font-size: var(--step--1); color: var(--meta-dark); line-height: 1.55; }

/* --- Notice ----------------------------------------------------------- */

.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--tint);
  border: 1px solid var(--tint-deep);
  border-radius: var(--radius-lg);
  font-size: var(--step--1);
  color: var(--meta-dark);
  line-height: 1.55;
}
.notice svg { inline-size: 1.125rem; block-size: 1.125rem; color: var(--blue); margin-block-start: 0.12em; }
.notice strong { color: var(--steel); }
.notice--embargo { background: var(--embargo-bg); border-color: #F5D9A8; }
.notice--embargo svg { color: var(--embargo); }
.notice--embargo strong { color: var(--embargo); }
.notice > div > * + * { margin-block-start: var(--sp-2); }

/* --- Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  padding: var(--sp-6);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero__figure {
  aspect-ratio: 16 / 9;
  inline-size: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--tint);
}
.hero__body > * + * { margin-block-start: var(--sp-3); }

/* --- Breadcrumb ------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  font-family: var(--mono);
  font-size: var(--step--2);
  color: var(--meta);
  letter-spacing: 0.05em;
  list-style: none;
  padding: 0;
  margin: 0;
}
.crumbs li { display: flex; align-items: center; gap: 0.5em; }
.crumbs li + li::before { content: "/"; color: var(--rule); }
.crumbs a { text-decoration: none; color: var(--meta); }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.crumbs [aria-current] { color: var(--steel); }

/* --- Footer ----------------------------------------------------------- */

.footer {
  background: var(--steel-900);
  color: #9FB4C8;
  font-size: var(--step--1);
  padding-block: var(--sp-7) var(--sp-5);
  margin-block-start: var(--sp-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--sp-6) var(--sp-5);
}

.footer__brand { display: grid; gap: var(--sp-3); align-content: start; }
.footer__plaque {
  display: inline-block;
  background: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  inline-size: fit-content;
  line-height: 0;
}
.footer__plaque img { inline-size: clamp(9rem, 7rem + 6vw, 12rem); }
.footer__brand p { font-size: var(--step--2); line-height: 1.6; max-inline-size: 34ch; }

.footer h2 {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-block-end: var(--sp-3);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.footer a { color: #C7D6E5; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid rgb(255 255 255 / 0.12);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: #7F97AD;
}
/* --- 404 -------------------------------------------------------------- */

.notfound {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: center;
  padding-block: var(--sp-7);
}
.notfound__code {
  font-family: var(--mono);
  font-size: clamp(3.5rem, 2rem + 7.5vw, 7rem);
  font-weight: 500;
  line-height: 1;
  color: var(--steel);
  letter-spacing: -0.04em;
}
.notfound__figure {
  inline-size: 100%;
  max-inline-size: 24rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  margin-inline: auto;
}

/* ==========================================================================
   5. UTILITIES
   ========================================================================== */

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  block-size: 1px;
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.stack > * + * { margin-block-start: var(--flow, var(--sp-4)); }
.stack-lg > * + * { margin-block-start: var(--sp-6); }
.stack-sm > * + * { margin-block-start: var(--sp-2); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.section { padding-block: var(--sp-6); }
.section--rule { border-block-start: 1px solid var(--rule); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  padding-block-end: var(--sp-3);
  margin-block-end: var(--sp-4);
  border-block-end: 2px solid var(--steel);
}
.section-head h2 { font-size: var(--step-2); }
.section-head > a, .section-head > p {
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--meta);
}

.muted { color: var(--meta); }
.small { font-size: var(--step--1); }
.smaller { font-size: var(--step--2); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.measure { max-inline-size: var(--measure); }
.mt-0 { margin-block-start: 0; }

.text-steel { color: var(--steel); }

/* ==========================================================================
   6. MOTION / PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .pulse { animation: none; }
}

@media print {
  :root { --page: #fff; --card: #fff; }

  .strip, .masthead, .filterbar, .footer, .pager, .layout__rail,
  .skip-link, .assets, .nav, .icon-btn, .subscribe,
  .no-print, [data-copy], .btn { display: none !important; }

  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }

  .page { padding-block: 0; }
  .wrap { width: 100%; --shell: none; }

  /* Paper has no rail to sit beside, so the text column takes the full page. */
  .layout__main,
  .layout--article .layout__main { flex: 1 1 100% !important; max-inline-size: none !important; }
  .layout--article .article,
  .article, .prose, .measure { max-inline-size: none !important; }

  .prose p, .prose li, blockquote.pull p, .boilerplate p { color: #000; }

  /* Keep a press photo to a band across the page, not half a sheet. */
  figure img { max-block-size: 78mm; width: auto; }

  a { color: #000; text-decoration: none; }
  .prose a[href^="http"]::after,
  .prose a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-family: monospace;
    font-size: 8.5pt;
    word-break: break-all;
  }

  .article { max-inline-size: none; }
  .article__title { font-size: 20pt; color: #000; }
  .article__meta { border-color: #000; }

  blockquote.pull, .boilerplate, .card {
    border: 0.5pt solid #999;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .wire-stamp {
    background: #fff !important;
    color: #000 !important;
    border: 0.5pt solid #000;
  }
  .wire-stamp b, .wire-stamp span { color: #000 !important; }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; color: #000; }
  p, li, blockquote { orphans: 3; widows: 3; }

  figure, img { break-inside: avoid; max-width: 100% !important; }

  /* Tables must lay flat on paper — the archive is printed and filed. */
  .table-scroll { overflow: visible !important; }
  .table { min-inline-size: 0 !important; font-size: 8.5pt; width: 100%; }
  .table th, .table td { padding: 3pt 4pt; border-color: #999; }
  .table thead { display: table-header-group; }
  .table thead th { background: #fff !important; border-block-end: 1pt solid #000; color: #000; }
  .table tfoot td, .table tfoot th { background: #fff !important; border-block-start: 1pt solid #000; color: #000; }
  .table tbody tr { break-inside: avoid; }

  .stats { border-color: #999; }
  .stat { padding: 6pt; }
  .stat__num { color: #000; }

  /* Answers print whether or not the reader expanded them. */
  .qa { border: 0.5pt solid #999; break-inside: avoid; }
  .qa > *:not(summary) { display: block !important; }
  .qa summary::after { display: none; }
  .qa summary { cursor: auto; }

  .notice, .feed__empty { border: 0.5pt solid #999; background: #fff !important; }
  .chip { border: 0.5pt solid #666; background: #fff !important; color: #000 !important; }
  .chip--embargo { border-width: 1pt; }

  .print-only { display: block !important; }

  @page { margin: 16mm 14mm; }
}

.print-only { display: none; }