/* Design "Podium": decorative pictures (owner choice 22.10.2026, generated for this site, already compressed) and the
   page-head compositions they carry (polish brief 23.10.2026).
   Loaded after podium.css on every page of the podium theme (lib/shell.py THEME_EXTRAS).

   Markup (lib/components.py media_div / head_class): <div class="pimg pimg--NAME" aria-hidden="true"></div> as the
   first child of a page head, or of the home "Key findings" card (.findings--media). The element is empty: no text,
   no alt, nothing for the Markdown version or for text extraction. The picture is a background set by the class:
   1600 px wide files from 48rem, 800 px files below (only the matching file is downloaded).

   Four head compositions, one system (class on the head, chosen in components.head_class):
   - page-head--side  (a) picture at the right of the text: guides, criteria, methodology, compare hub, database, data,
                          agencies A-Z, submit-agency, right-of-reply, updates, corrections
   - page-head--band  (b) a lit stage across the top, the head centred below it: /best/ hub, statistics, report;
                          page-head--void: the 404, larger
   - page-head--split (c) a head with a key-number card: the object stands on the card (commission, /best/ lists);
     page-head--glow      compare pages: the two pillars glow behind the scoreboard
   - page-head--quiet (d) policy and legal pages: a text head with a small seal at the right

   Rules kept here:
   - text is always on top: the picture sits at z-index -1 in the stacking context of <main>, below every text, link,
     card and table; contrast of every text run over a picture is measured on the rendered pages (AA everywhere,
     _variants/podium/progress-mediapolish.md);
   - no layout shift: every box has its size from CSS before the file arrives (absolute boxes, fixed grid tracks or
     a fixed height); nothing depends on the picture loading;
   - never in the way: pointer-events none, hidden in print, in forced-colours mode and with prefers-contrast: more;
   - edges melt into the graphite: masks fade every edge that is not a card border, the top edge included, and the
     "lighten" blend drops every pixel darker than the page (the photo vignettes), so no dark hole shows. */

/* ------------------------------------------------------------ pictures */
.pimg--report-cover { background-image: url(/assets/img/report-cover_v1_1600.webp); }
.pimg--guides-header { background-image: url(/assets/img/guides-header_v2_1600.webp); }
.pimg--criteria-tokens { background-image: url(/assets/img/criteria-tokens_v2_1600.webp); }
.pimg--best-rosette { background-image: url(/assets/img/best-rosette_v2_1600.webp); }
.pimg--commission-scale { background-image: url(/assets/img/commission-scale_v2_1600.webp); }
.pimg--compare-pillars { background-image: url(/assets/img/compare-pillars_v2_1600.webp); }
.pimg--stats-bars { background-image: url(/assets/img/stats-bars_v2_1600.webp); }
.pimg--database-drawers { background-image: url(/assets/img/database-drawers_v2_1600.webp); }
.pimg--tiles-grid { background-image: url(/assets/img/tiles-grid_v2_1600.webp); }
/* the seal is only ever shown small (a 15rem window at most): the 800 px file at every width */
.pimg--disclosure-seal { background-image: url(/assets/img/disclosure-seal_v1_800.webp); }
.pimg--submit-tray { background-image: url(/assets/img/submit-tray_v2_1600.webp); }
.pimg--empty-plinth { background-image: url(/assets/img/empty-plinth_v2_1600.webp); }
/* the rosette on a /best/ list is shown at most 22rem wide: the 800 px file there (the hub's stage keeps the 1600) */
.page-head--split > .pimg--best-rosette { background-image: url(/assets/img/best-rosette_v2_800.webp); }
@media (max-width: 47.99rem) {
  .pimg--report-cover { background-image: url(/assets/img/report-cover_v1_800.webp); }
  .pimg--guides-header { background-image: url(/assets/img/guides-header_v2_800.webp); }
  .pimg--criteria-tokens { background-image: url(/assets/img/criteria-tokens_v2_800.webp); }
  .pimg--best-rosette { background-image: url(/assets/img/best-rosette_v2_800.webp); }
  .pimg--commission-scale { background-image: url(/assets/img/commission-scale_v2_800.webp); }
  .pimg--compare-pillars { background-image: url(/assets/img/compare-pillars_v2_800.webp); }
  .pimg--stats-bars { background-image: url(/assets/img/stats-bars_v2_800.webp); }
  .pimg--database-drawers { background-image: url(/assets/img/database-drawers_v2_800.webp); }
  .pimg--tiles-grid { background-image: url(/assets/img/tiles-grid_v2_800.webp); }
  .pimg--submit-tray { background-image: url(/assets/img/submit-tray_v2_800.webp); }
  .pimg--empty-plinth { background-image: url(/assets/img/empty-plinth_v2_800.webp); }
}

/* ------------------------------------------------------------ common */
.pimg {
  position: relative; z-index: -1; display: block; min-width: 0; pointer-events: none; user-select: none;
  background-color: transparent; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;
}
/* The picture sits at z-index -1 in the stacking context of <main> (isolation, only on pages that carry a picture):
   below every piece of text, link, card and table of the page, above the page background. main repeats the page
   colour, so the "lighten" blend has the graphite as its backdrop inside that group. */
.site-main:has(.pimg) { isolation: isolate; background-color: var(--bg); }
.page-head--media > .pimg { mix-blend-mode: lighten; }

/* ================================================================ (a) side: picture at the right of the text */
/* the subject of each picture kept in view when the box crops it (phones and tablets: a short, wide box) */
.pimg--report-cover { background-position: 58% 56%; }
.pimg--guides-header { background-position: 70% 50%; }
.pimg--compare-pillars { background-position: 66% 62%; }
.pimg--database-drawers { background-position: 50% 72%; }
.pimg--database-drawers.pimg--close { background-size: 170% auto; background-position: 12% 86%; }
.pimg--tiles-grid { background-position: 66% 46%; }
.pimg--submit-tray { background-position: 64% 52%; }

/* Below 80rem the head is one grid column; every child keeps its own row in source order (same boxes, margins and
   order as the block layout: the head has padding, so no margin collapsed before), so the picture can share the row
   of the H1 without taking space. */
.page-head--side { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.page-head--side > * { grid-column: 1; }
.page-head--side > :nth-child(2) { grid-row: 1; }
.page-head--side > :nth-child(3) { grid-row: 2; }
.page-head--side > :nth-child(4) { grid-row: 3; }
.page-head--side > :nth-child(5) { grid-row: 4; }
.page-head--side > :nth-child(6) { grid-row: 5; }
.page-head--side > :nth-child(7) { grid-row: 6; }
.page-head--side > :nth-child(8) { grid-row: 7; }

/* phones and tablets: the lead runs the full width, so the picture sits only behind the H1 (its grid row), from the
   right edge of the screen, dimmed; the lead and the meta line below stay on plain graphite */
.page-head--side > .pimg {
  grid-row: 1; align-self: stretch;
  margin: -1.25rem calc(50% - 50vw) 0 16%;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(closest-side at 58% 50%, #000 30%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
  mask-image: radial-gradient(closest-side at 58% 50%, #000 30%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
}
@media (min-width: 48rem) {
  .page-head--side > .pimg { margin-left: 34%; opacity: 0.5; }
}

/* criteria and methodology, phones and tablets: the twelve tokens (one per criterion) are a rail that rests on the
   divider line of the head, in its bottom padding (made taller for it), never behind a line of text. The token row
   sits between 44.6 % and 55 % of the picture's height and between 7 % and 93 % of its width (picture 1600 x 893).
   A contrast filter sinks the grey studio background towards the page graphite and the "lighten" blend drops every
   pixel darker than the graphite (the vignette of the photo), so only the tokens and a faint halo remain. */
@media (max-width: 79.99rem) {
  .page-head--side:has(> .pimg--criteria-tokens) { padding-bottom: 3.5rem; }
  .page-head--side > .pimg--criteria-tokens {
    --rail-w: min(100vw, 26rem);
    position: absolute; grid-row: auto; grid-column: auto; align-self: auto; /* containing block: the head */
    right: calc(50% - 50vw); bottom: calc(0.6rem - var(--rail-w) * 0.2513); /* token bottoms 0.6rem above the line */
    width: var(--rail-w); height: auto; aspect-ratio: 1600 / 893; margin: 0;
    opacity: 0.95; filter: contrast(1.3); mix-blend-mode: lighten;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
      linear-gradient(to bottom, transparent 30%, #000 42%, #000 58%, transparent 68%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
      linear-gradient(to bottom, transparent 30%, #000 42%, #000 58%, transparent 68%);
    mask-composite: intersect;
  }
}
@media (min-width: 48rem) and (max-width: 79.99rem) {
  .page-head--side > .pimg--criteria-tokens { right: 0; } /* the rail ends at the right edge of the text column */
}

/* from 80rem the text column (H1 24ch, lead 68ch) leaves the right side free: the whole picture (16:9, never
   cropped) stands at the right edge of the screen, from the bottom line of the sticky header (the breadcrumb row is
   2.95rem tall); where it reaches below the head it stays behind the next section. Two soft ramps (left/right x
   top/bottom) melt every edge into the graphite, with no outline; the left ramp is still transparent where the H1 and
   the lead end. */
@media (min-width: 80rem) {
  .page-head--side > .pimg {
    position: absolute; grid-row: auto; grid-column: auto; /* containing block: the head, not a grid row */
    top: -2.95rem; right: calc(50% - 50vw); width: min(44vw, 42rem); height: auto; aspect-ratio: 16 / 9; margin: 0;
    opacity: 0.85;
    background-size: cover; background-position: 50% 50%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 26%, rgba(0, 0, 0, 0.5) 40%, #000 54%, #000 84%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 24%, #000 66%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, transparent 26%, rgba(0, 0, 0, 0.5) 40%, #000 54%, #000 84%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 24%, #000 66%, transparent 100%);
    mask-composite: intersect;
  }
  .page-head--side > .pimg--database-drawers.pimg--close { background-size: 150% auto; background-position: 8% 92%; }
  /* the row of tokens runs through the middle of its picture: start the box lower, so the row sits beside the lead
     and the meta line (left of them the box is transparent), not beside a long H1; in a short head the box moves up
     so the tokens always end 0.75rem above the divider line (token bottoms at 55 % of the box height) */
  .page-head--side > .pimg--criteria-tokens { top: min(2.5rem, calc(100% - min(44vw, 42rem) * 0.3093 - 0.75rem)); }
  /* final2 23.10.: the left ramp hid the first group, so the head showed 9 tokens beside "The 12 criteria". Same rail
     as on phones: all 12 tokens (3 groups of 4) in a narrower box that ends at the text column's right edge and rests
     on the divider line (beside the lead's last lines and the meta line, never beside a long H1), only the token row
     shown, the studio background sunk into the graphite (contrast + lighten) */
  .page-head--side > .pimg--criteria-tokens {
    width: min(36vw, 34rem); right: 0; top: calc(100% - min(36vw, 34rem) * 0.307 - 0.75rem);
    opacity: 0.95; filter: contrast(1.3); mix-blend-mode: lighten; background-size: 100% 100%; aspect-ratio: 1600 / 893;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
      linear-gradient(to bottom, transparent 30%, #000 42%, #000 58%, transparent 68%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
      linear-gradient(to bottom, transparent 30%, #000 42%, #000 58%, transparent 68%);
    mask-composite: intersect;
  }
}

/* ================================================================ (b) band: a lit stage, the head centred below */
/* The picture keeps its proportions (1600 x 893) at the width --w, starts at the bottom line of the sticky header and
   (phones: 1.5rem below it, clear of the breadcrumb text) and is moved sideways so its object stands in the middle of the screen (--fx: the object's centre, share of the width).
   --ct: share of the picture cut away at the top (empty backdrop above the object); --h1: where the H1 starts (share
   of the picture height). The head's top padding is computed from the same numbers, so the H1 starts under the object
   before the file arrives. */
.page-head--band {
  --w: min(125vw, 34rem); --bt: -1.5rem; --fx: 0.5; --ct: 0; --h1: 0.7; --my: 45%; --rx: 28%; --ry: 56%;
  padding-top: calc(var(--w) * 0.558 * (var(--h1) - var(--ct)) + var(--bt));
  text-align: center;
}
.page-head--band:has(> .pimg--best-rosette) { --fx: 0.72; --ct: 0; --h1: 0.67; --my: 38%; --rx: 24%; --ry: 52%; }
.page-head--band:has(> .pimg--stats-bars) { --fx: 0.62; --ct: 0.18; --h1: 0.9; --my: 50%; --rx: 26%; --ry: 56%; }
.page-head--band:has(> .pimg--report-cover) { --fx: 0.64; --ct: 0.1; --h1: 0.79; --my: 50%; --rx: 33%; --ry: 56%; }
.page-head--band.page-head--void { --w: min(150vw, 40rem); --fx: 0.51; --ct: 0; --h1: 0.86; --my: 50%; --rx: 30%; --ry: 62%; padding-top: calc(var(--w) * 0.558 * (var(--h1) - var(--ct)) + var(--bt)); }
@media (min-width: 48rem) {
  .page-head--band { --w: 44rem; --bt: -2.95rem; }
  .page-head--band.page-head--void { --w: 60rem; }
}
.page-head--band > .pimg {
  position: absolute; top: var(--bt); left: calc(50% - var(--w) * var(--fx));
  width: var(--w); height: calc(var(--w) * 0.558 * (1 - var(--ct))); margin: 0;
  background-size: 100% auto; background-position: 50% 100%;
  -webkit-mask-image: radial-gradient(ellipse var(--rx) var(--ry) at calc(var(--fx) * 100%) var(--my), #000 48%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse var(--rx) var(--ry) at calc(var(--fx) * 100%) var(--my), #000 48%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%);
  mask-composite: intersect;
}
.page-head--band > .page-title { margin-left: auto; margin-right: auto; }
.page-head--band > .page-head__lead { margin-left: auto; margin-right: auto; max-width: 60ch; }
.page-head--band > .page-head__lead--long { text-align: left; max-width: 64ch; }
.page-head--band > .page-head__meta { margin-left: auto; margin-right: auto; }
/* the 404 keeps its border-less head; the list of ways back is centred under it */
.page-head--void { border-bottom: 0; }
.page-head--void + .related__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; padding: 0; list-style: none; }

/* ================================================================ (c) split: the object stands on the key-number card */
/* phones and tablets: text, then a short stage row, then the card, which covers the foot of the object. Desktop: the
   stage row sits above the card in the right column, the text spans both rows on the left. The picture is shown at a
   fixed width --pw, moved so its object (--fx: centre, --fb: foot, shares of the picture) stands in the middle of the
   card with its foot 0.65rem behind the card's top edge. */
.page-head--split { --stage: 7rem; --top: 0rem; --pw: 31rem; --fx: 0.62; --fb: 0.8; --fy: 0.56; --rx: 0.24; --ry: 0.46; --ms: 50%; }
/* the rosette sits close to the top of its photo: a tight window around the disc (the ribbons stay behind the card) */
.page-head--split:has(> .pimg--best-rosette) { --pw: 18rem; --fx: 0.73; --fb: 0.74; --fy: 0.3; --rx: 0.18; --ry: 0.32; --ms: 80%; }
/* the mask is an ellipse around the object (lengths from the same numbers), so the edges of the photo never show */
.page-head--split > .pimg {
  --hi: calc(var(--pw) * 0.558);
  --by: calc(var(--top) + var(--stage) + 0.6rem - var(--fb) * var(--hi));
  background-size: var(--pw) auto;
  background-position: calc(50% + (0.5 - var(--fx)) * var(--pw)) var(--by);
  -webkit-mask-image: radial-gradient(ellipse calc(var(--rx) * var(--pw)) calc(var(--ry) * var(--hi)) at 50% calc(var(--by) + var(--fy) * var(--hi)), #000 var(--ms), transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse calc(var(--rx) * var(--pw)) calc(var(--ry) * var(--hi)) at 50% calc(var(--by) + var(--fy) * var(--hi)), #000 var(--ms), transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%);
  mask-composite: intersect;
}
@media (max-width: 63.99rem) {
  .page-head--split { display: grid; grid-template-columns: minmax(0, 1fr); }
  .page-head--split > .page-head__main { grid-row: 1; }
  .page-head--split > .pimg { grid-row: 2; height: calc(var(--stage) + 1.25rem); margin: 0.75rem calc(50% - 50vw) 0; }
  .page-head--split > .page-head__aside { grid-row: 3; margin-top: -1.25rem; }
}
/* /best/ lists: their card (first three of the list) is shown from 64rem only; below that the rosette is a small
   emblem above the H1 (like the seal of the quiet heads), not a lone object between the text and the next section */
@media (max-width: 63.99rem) {
  .page-head--split:has(> .page-head__aside--wide) > .page-head__main { grid-row: 2; }
  .page-head--split:has(> .page-head__aside--wide) > .pimg {
    --bw: 4.75rem; --pw: 13rem;
    grid-row: 1; width: var(--bw); height: var(--bw); margin: 0 0 0.75rem -0.25rem;
    background-size: var(--pw) auto;
    background-position: calc(var(--bw) / 2 - 0.73 * var(--pw)) calc(var(--bw) / 2 - 0.3 * var(--pw) * 0.558);
    -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
  }
}
@media (min-width: 64rem) {
  .page-head--split { --stage: 8.5rem; --top: 4.2rem; --pw: 38rem; grid-template-rows: var(--stage) auto; }
  .page-head--split:has(> .pimg--best-rosette) { --pw: 22rem; }
  .page-head--split > .page-head__main { grid-column: 1; grid-row: 1 / span 2; }
  /* the box reaches up to the bottom line of the sticky header (head padding 1.25rem + breadcrumb row 2.95rem) and
     6rem beyond the card on each side */
  .page-head--split > .pimg { grid-column: 2; grid-row: 1; align-self: start; height: calc(var(--stage) + 4.2rem + 1.25rem); margin: -4.2rem -6rem 0; }
  .page-head--split > .page-head__aside { grid-column: 2; grid-row: 2; margin-top: -1.25rem; }
}

/* compare pages: the scoreboard already shows two plinths; the two lit pillars glow behind it, from the header line
   down to the end of the head, faded towards the text */
.page-head--glow > .pimg {
  position: absolute; top: -2.95rem; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); margin: 0;
  opacity: 0.55;
  background-size: 120vw auto; background-position: calc(50vw - 0.64 * 120vw) 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, #000 72%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, #000 72%);
}
/* desktop: the picture is large enough that its two pillars (centres at 55.5 % and 74 %, the dark gap at 64 %) stand
   behind the two score cards and the gap stays behind the "vs" between them; the light falls onto the cards from the
   header line. It covers the whole box (no photo edge inside it); the box fades out towards the text. */
@media (min-width: 64rem) {
  .page-head--glow > .pimg {
    left: auto; width: calc(26rem + 9rem + 50vw - 50%);
    opacity: 0.6;
    background-size: 76rem auto; background-position: calc(9rem + 13rem - 0.64 * 76rem) 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%), linear-gradient(to bottom, transparent 0%, #000 18%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, #000 26%), linear-gradient(to bottom, transparent 0%, #000 18%, #000 84%, transparent 100%);
    mask-composite: intersect;
  }
}

/* ================================================================ (d) quiet: policy and legal pages, a small seal */
/* the sealed folder (picture x 25-100 %, y 18-93 %) small in a soft oval window, a little dimmed: above the H1 on
   phones (its own block, 8 x 4.5rem), at the right of the head from 48rem (15 x 8.4rem, centred on the head) */
.page-head--quiet > .pimg {
  --bw: 8rem; --pw: calc(var(--bw) / 0.75);
  width: var(--bw); height: calc(var(--bw) * 0.5625); margin: 0 0 0.75rem -0.5rem;
  opacity: 0.9;
  background-size: var(--pw) auto;
  background-position: calc(var(--pw) * -0.25) calc(var(--pw) * 0.558 * -0.18);
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
}
/* final2 23.10.: below 48rem the seal read as a stray dim thumbnail above the H1 on six policy pages; phones use the
   plain no-picture head (same as the fallback at the end of this file) */
@media (max-width: 47.99rem) {
  .page-head--quiet > .pimg { display: none; }
}
@media (min-width: 48rem) {
  .page-head--quiet { min-height: 11rem; }
  .page-head--quiet > .pimg { --bw: 15rem; position: absolute; right: -1rem; top: calc(50% - 4.2rem); margin: 0; }
  .page-head--quiet > .page-title, .page-head--quiet > .page-head__lead { margin-right: 15rem; }
}

/* ------------------------------------------------------------ home: "Key findings" card */
/* a cover band across the top of the card; the card's own border clips its sides, the top edge and the bottom fade
   into the card surface (the bottom before the heading); "lighten" drops the photo's vignette (darker than the card
   surface), so no dark step shows around the paper */
.findings--media { position: relative; isolation: isolate; overflow: hidden; }
.findings--media > .pimg {
  height: 7.5rem; margin: -1.75rem -1.25rem 0.5rem;
  opacity: 0.9; mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 48%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 48%, transparent 100%);
}
/* from 48rem the card is wide: the picture keeps its proportions in the right part of the band and fades out to the
   left (where the heading starts) and towards the top border */
@media (min-width: 48rem) {
  .findings--media > .pimg {
    height: 13rem; margin: -2.5rem -2.75rem 0.25rem;
    opacity: 0.85; background-size: 64% auto; background-position: 100% 48%;
    -webkit-mask-image: linear-gradient(to right, transparent 39%, rgba(0, 0, 0, 0.6) 55%, #000 70%),
      linear-gradient(to bottom, transparent 0%, #000 26%, #000 54%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 39%, rgba(0, 0, 0, 0.6) 55%, #000 70%),
      linear-gradient(to bottom, transparent 0%, #000 26%, #000 54%, transparent 100%);
    mask-composite: intersect;
  }
}

/* ------------------------------------------------------------ never where it would hurt */
/* without the picture the heads fall back to the plain layout: no stage padding, no stage row, no seal margin */
@media print, (forced-colors: active), (prefers-contrast: more) {
  .pimg { display: none; }
  .page-head--band, .page-head--band.page-head--void { padding-top: 1.25rem; }
  .page-head--split { --stage: 0rem; }
  .page-head--split > .page-head__aside { margin-top: 1.75rem; }
  .page-head--quiet { min-height: 0; }
  .page-head--quiet > .page-title, .page-head--quiet > .page-head__lead { margin-right: 0; }
}
@media (forced-colors: active) and (min-width: 64rem), (prefers-contrast: more) and (min-width: 64rem) {
  .page-head--split > .page-head__aside { margin-top: 0.35rem; }
}