/* science.css — compositions used only on The Science. Everything else
   comes from the shared system (tokens, base, layout, shell, ui).

   A reading page with a clear arc: an Ink opening with the gym-floor
   photograph ("Split", chosen 9 Oct 2026) and the shared scroll cue
   (ui.css), Chalk for the rationale (S02, ending in an Ink panel), Chalk
   for the sources (the full bibliography, which ends the page). S03
   "Evidence behind the approach" was removed on 9 Oct. No inline
   citations since 8 Oct. The page's one script, science.js, draws S02's
   lines with the scroll and fits S04's panel height to a line of text.

   Motion (inside prefers-reduced-motion: no-preference only, so reduced
   motion shows the composed final state at once, and nothing depends on
   script): the opening's photo opens out from the seam while it settles
   and the copy rises in, from first paint, once (no loop; the scroll cue's
   own nudge is the shared one); in S02 "Merge" the two lines, their join
   and the joined line follow the scroll into the Brain-Body Training panel,
   whose point then lights and brings the two results up to Chalk
   (science.js; nothing timed, the text never hidden). */

/* ---- S01 hero, "Split": the photo cropped close and nearly square (both
   hands, both pods and both men kept, clear of the edges), bleeding off the
   left, top and bottom edges; the copy on solid Ink to its right, the
   heading sized to two lines in its column. Phones and tablets: the copy
   first, then the photo edge to edge (square on phones, 16:9 on tablets).
   From 1024 px the opening fills the screen (the window less the header
   and, in the preview, the review bar), as the homepage and For Clubs
   openings do, up to 1040 px tall (the photograph's resolution); the copy
   keeps clear of the scroll cue at the bottom right */
.science-hero {
  --science-screen: calc(100svh - var(--header-h) - 1px - var(--review-offset, 0px)); /* the header's rule is 1px */
  /* phones: never larger than the column can take "behind Brain-Body" in
     (8.3 em with the heading's tracking, and a little to spare), so the
     heading keeps three lines, "The science / behind Brain-Body /
     Training.", down to 320 px, not four with "behind" alone (the 40 px
     floor did that below 375 px and left 375 px a pixel from it). 34 px at
     320, 38 at 360, 40 at 375; the shared size from about 390 px. cqi: the
     opening's width */
  --science-fs: min(var(--text-h1), (100cqi - 2 * var(--page-margin)) / 8.45);
  container-type: inline-size;   /* cqi = the section's width, scrollbar excluded */
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.science-hero__copy { padding: var(--space-7) var(--page-margin) var(--space-8); }
.science-hero__title { margin: 0 0 var(--space-5); font-size: var(--science-fs); }
.science-hero__lede { margin: 0; max-width: var(--measure); text-wrap: pretty; }   /* no "functions." alone on the last line on phones */
.science-hero__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-brand-ink);
  --science-pos: 82% 50%;   /* phones: square, both hands, both pods */
}
.science-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--science-pos);
}
@media (min-width: 640px) {
  .science-hero__photo { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .science-hero {
    /* the photo's column: 1.04 × its height shows source x 558-1494, so her
       raised fist (from x 595) and the far pod (to x 1460) both stay clear
       of the frame's edges. It widens with the screen's height only as much
       as that needs, from 52% to at most 64% of the width, and always
       leaves the copy room for the heading in two lines at 56 px (9.4 em
       and the copy's padding), the H2's top size, so the page's H1 is
       never set smaller than its H2 (12 Oct 2026, Alessandro approved
       after the mobile/desktop size checks; at 40 px it was 48 px at
       1440 x 900 under a 55 px H2). Under about 1170 px the 52% minimum
       gives way to the room for a heading at the H2's own size (it was
       42 px under a 45 px H2 at 1024 px), so the photo is 509 px instead
       of 532 at 1024 */
    --science-cap: min(var(--science-screen), 1040px);
    --science-copy-min: calc(9.4 * 3.5rem + var(--page-margin) + clamp(32px, 4.4cqi, 80px));
    --science-copy-h2: calc(9.4 * var(--text-h2) + var(--page-margin) + clamp(32px, 4.4cqi, 80px));
    --science-photo-w: clamp(min(52cqi, 100cqi - var(--science-copy-h2)), var(--science-cap) * 1.04, min(64cqi, 100cqi - var(--science-copy-min)));
    grid-template-columns: auto minmax(0, 1fr);   /* the photo's own width, the copy the rest */
  }
  .science-hero__photo {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: auto;
    --science-pos: 84% 50%;
    width: var(--science-photo-w);
    /* one screen tall, unless the column cannot be wide enough for that
       (4:3 and taller windows): then the opening ends above the fold
       rather than cropping closer than 1.02 × the height */
    min-height: min(var(--science-cap), var(--science-photo-w) / 1.02);
  }
  .science-hero__copy {
    --science-padl: clamp(32px, 4.4cqi, 80px);
    /* top and bottom: the scroll cue's height and its distance from the
       base, and a step more, so the centred copy never runs into it */
    --science-padb: calc(var(--space-6) + var(--target-preferred) + var(--space-4));
    /* the heading in two lines in its column ("Brain-Body Training." is
       9 em wide), 40 → 72 px: cqi in the heading is the copy's own width,
       padding excluded (the copy is its query container) */
    --science-fs: clamp(2.5rem, 100cqi / 9.4, 4.5rem);
    container-type: inline-size;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    /* right: the page margin, where the scroll cue stands */
    padding: var(--science-padb) var(--page-margin) var(--science-padb) var(--science-padl);
  }
}

/* the photo opens from its top edge on phones and tablets (it comes after
   the copy) and out from the seam from 1024 px (beside the copy): one
   animation whose start the layout sets, so a window crossing 1024 px
   (resized, snapped, a tablet turned) does not play it again */
.science-hero__photo { --science-clip-from: inset(0 0 30% 0); }
@media (min-width: 1024px) {
  .science-hero__photo { --science-clip-from: inset(0 0 0 34%); }
}
@keyframes science-rise { from { opacity: 0; transform: translateY(var(--travel-expressive)); } }
@keyframes science-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes science-open { from { clip-path: var(--science-clip-from); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: no-preference) {
  .science-hero__in { animation: science-rise 640ms var(--ease-out) both; animation-delay: var(--science-delay, 0ms); }
  .science-hero__lede { --science-delay: 120ms; }
  .science-hero__photo { animation: science-open 1100ms var(--ease-out) both; }
  .science-hero__photo img { animation: science-settle 2000ms var(--ease-out) both; }
}

/* ---- S02 why combine, "Merge" (Alessandro's copy of 9 Oct; layout 3 of
   the review page opt-s02b, chosen 9 Oct): a line starts at a point beside
   each discipline's label and runs down; below the two disciplines the
   lines bend together into one Vermilion line that runs into the Ink panel
   and ends at its point, over "Brain-Body Training". Under the name the two
   findings stand as the result of the merge, no list markers: each result
   is the statement (Display 650, Chalk, 22 → 32 px, under the 28 → 44 px
   name) and the rest of its sentence sits under it at reading size in
   Soft Line (--on-muted), 17 → 20 px (review fixes, 9 Oct). Alessandro's
   shortened findings (9 Oct): "Greater cognitive function gains" /
   "compared to cognitive training alone." and "Improved endurance and
   physical performance" / "under mental fatigue."; the rests are now one
   line each from tablets up. Where a result wraps it takes two lines that
   step down evenly, "Greater cognitive / function gains" and "Improved
   endurance / and physical performance", so no display line ends on
   "and": "and physical performance" is kept whole (.science-merge__keep)
   from 22.5em, 360 px at the default text size, where it fits the phone
   column. Below 360 px it cannot fit, so there the results are 20 px and
   the panel's right padding 16 px, which keeps the endurance result to
   two lines ("Improved endurance and / physical performance", not three).
   Phones (below 768 px): both lines in a 48 px rail on the left (Physical
   exercise's at 14 px, Cognitive training's joining at 32 px), merging at
   23 px; in the panel the joined line runs on down the rail to the point
   beside the name's first line, as each discipline's point sits beside its
   label; the two findings follow one under the other, in the copy's order.
   From 768 px a centred spread on five columns (inset, discipline, 96 px
   gutter, discipline, inset): the two lines run down the gutter, 24 px
   from each text, and join in its middle; the panel spans all five, and
   the joined line drops into it to the point over the centred name.
   Tablets (768-1023 px): the two findings centred on that axis, one under
   the other, 32 px apart, closer than the name is to them, so the name
   heads both. From 1024 px the panel's padding is the inset, so its two
   halves sit exactly under the disciplines, and the findings stand side by
   side, each under the discipline it relates to most: endurance under
   Physical exercise, cognitive function under Cognitive training (placed
   by grid; the source keeps the copy's order, so phones, tablets and
   screen readers take the cognitive-function finding first). They mirror
   each other on the axis, as the labels and lines above do: the endurance
   finding is set to the right, ending 48 px left of the hairline on the
   edge where "Physical exercise" ends, the cognitive finding starts 48 px
   right of it. The two results end on one line and the rest of each
   sentence starts on one line (subgrid), with a Muted Plum hairline
   (--on-line) on the centre axis between them. The results keep their
   phone and tablet size (27.5 → 32 px from 1024), never smaller than the
   discipline labels: up to about 1130 px both take two lines, level line
   for line; wider, "Greater cognitive function gains" holds one line,
   level with "and physical performance". The section
   heading is centred from 768 px, on two lines: "Movement and mental
   effort," and the editorial accent on its own line. Straight runs are
   boxes scaled from their top
   (--science-merge-d, set by science.js); the bends are one fixed-size SVG
   per width (no stretching), drawn with a dash offset. Default
   --science-merge-d is 1: complete. S04 follows on Chalk: the panel closes
   S02, so S04 opens with a shorter top padding */
/* phones: 48 px under the heading and 56 between the two disciplines (were
   64 and 80, more than the 40 px section padding around them); 64 px under
   the heading from 768 px, as before */
.science-why__title { max-width: 18ch; margin: 0 0 var(--space-7); }
.science-merge {
  --science-merge-rail: 48px;   /* phones: the rail column */
  --science-merge-gut: 96px;    /* from 768 px: the gutter between the disciplines */
  --science-merge-mid: calc(var(--text-h3) * var(--leading-h3) / 2);      /* the middle of a label's first line */
  --science-merge-name: clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem);          /* the panel's name: 28 → 44 px */
  --science-merge-find: clamp(1.375rem, 0.95rem + 1.2vw, 2rem);           /* a result: 22 → 32 px (20 px below 360 px) */
  display: grid;
  grid-template-columns: var(--science-merge-rail) minmax(0, 1fr);
}
.science-merge :where(h3, p, ul) { margin: 0; }

.science-merge__src { --science-merge-pt: 0px; position: relative; grid-column: 2; padding-bottom: var(--space-6); }
.science-merge__src--a { grid-row: 1; }
.science-merge__src--b { --science-merge-pt: var(--space-5); grid-row: 2; padding-top: var(--science-merge-pt); }
.science-merge__src h3 { margin-bottom: var(--space-3); }
.science-merge__src p { max-width: var(--measure); text-wrap: pretty; }

.science-merge__dot {
  position: absolute;
  top: calc(var(--science-merge-pt) + var(--science-merge-mid) - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--on-text);
}
.science-merge__lane {
  position: absolute;
  top: calc(var(--science-merge-pt) + var(--science-merge-mid));
  bottom: 0;
  width: 2px;
  background: var(--on-text);
  transform-origin: center top;
  transform: scaleY(var(--science-merge-d, 1));
}
.science-merge__src > .science-merge__lane--pass { top: 0; }
/* phones: Physical exercise's line at 14 px, Cognitive training's at 32 px */
.science-merge__src--a > .science-merge__dot { left: calc(14px - var(--science-merge-rail) - 5px); }
.science-merge__src--a > .science-merge__lane,
.science-merge__src--b > .science-merge__lane--pass { left: calc(14px - var(--science-merge-rail) - 1px); }
.science-merge__src--b > .science-merge__dot { left: calc(32px - var(--science-merge-rail) - 5px); }
.science-merge__src--b > .science-merge__lane:not(.science-merge__lane--pass) { left: calc(32px - var(--science-merge-rail) - 1px); }

.science-merge__join { display: block; overflow: visible; }
.science-merge__join--wide { display: none; }
.science-merge__join--narrow { grid-column: 1; grid-row: 3; }
.science-merge__join path { fill: none; stroke-width: 2; stroke-dasharray: 1 1; }
.science-merge__in { stroke: var(--on-text); stroke-dashoffset: calc(1 - min(1, var(--science-merge-d, 1) / 0.6)); }
.science-merge__join .science-merge__out { stroke: var(--color-brand-energy); stroke-width: 3; stroke-dashoffset: calc(1 - max(0, var(--science-merge-d, 1) - 0.6) / 0.4); }

/* the panel: where the joined line lands */
.science-merge__panel {
  --science-merge-at: calc(var(--space-7) + var(--science-merge-name) * 1.1 / 2);   /* the point: beside the name's first line */
  position: relative;
  grid-column: 1 / -1;
  grid-row: 4;
  padding: var(--space-7) clamp(20px, 4vw, 56px) var(--space-7) var(--science-merge-rail);
}
.science-merge__stem {   /* the joined line, on from the panel's edge to the point; drawn by its ::before, so the box science.js measures keeps its size */
  position: absolute;
  top: 0;
  left: calc(23px - 1.5px);
  width: 3px;
  height: var(--science-merge-at);
}
.science-merge__stem::before {
  content: "";
  display: block;
  height: 100%;
  background: var(--color-brand-energy);
  transform-origin: center top;
  transform: scaleY(var(--science-merge-d, 1));
}
.science-merge__node {
  position: absolute;
  top: var(--science-merge-at);
  left: 23px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-brand-energy);
  translate: -50% -50%;
}
.science-merge__name {
  margin-bottom: var(--space-6);
  font-size: var(--science-merge-name);
  line-height: 1.1;
  letter-spacing: var(--tracking-h2);
  font-variation-settings: var(--type-display-axes);
}
.science-merge__results { display: grid; row-gap: var(--space-6); padding: 0; list-style: none; }
/* each finding: the result as the statement (Display 650, Chalk), the rest
   of its sentence under it at reading size in Soft Line */
.science-merge__result {
  max-width: 26em;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--on-muted);
  text-wrap: pretty;
}
.science-merge__lead {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--science-merge-find);
  line-height: 1.15;
  letter-spacing: var(--tracking-h2);
  font-weight: var(--weight-strong);
  font-variation-settings: var(--type-display-axes);
  color: var(--on-text);
  text-wrap: balance;
}
/* "and physical performance" kept on one line wherever it fits the column
   (from 22.5em: 360 px at the default text size, later with larger text),
   so the endurance result breaks as "Improved endurance / and physical
   performance", never after "and" */
@media (min-width: 22.5em) { .science-merge__keep { white-space: nowrap; } }
/* below that, where it cannot fit, a step smaller results (20 px, still
   above the 17 px rest) and a 16 px right padding keep the endurance
   result to two lines, "Improved endurance and / physical performance",
   rather than three with "Improved" alone */
@media (width < 22.5em) {
  .science-merge { --science-merge-find: 1.25rem; }
  .science-merge__panel { padding-right: var(--space-4); }
}
/* larger text (12 Oct 2026, Alessandro approved after the mobile/desktop
   size checks): main is the size container "page", and under 20rem the
   reader's text is set larger than a 320 px phone shows it at the default
   size. Then "and physical performance" stays one unit where it fits a
   line, and breaks inside itself ("and physical / performance") where it
   is wider than the column, instead of widening the results and the page.
   At the default text size this never applies */
@container page (width < 20rem) {
  .science-merge__keep { display: inline-block; max-width: 100%; white-space: normal; }
}

@media (min-width: 768px) {
  /* the heading on two lines, the editorial accent on its own (base.css
     sets an .ed in a heading to line-height 0, so it gets the heading's) */
  .science-why__title { max-width: none; margin-inline: auto; margin-bottom: var(--space-8); text-align: center; }
  .science-why__title .ed { display: block; line-height: var(--leading-h2); }
  .science-merge {
    --science-merge-inset: clamp(0px, 10vw - 64px, 80px);   /* 768 px: 13, 1024: 38, 1440: 80 (the disciplines then 32rem each) */
    grid-template-columns: var(--science-merge-inset) minmax(0, 1fr) var(--science-merge-gut) minmax(0, 1fr) var(--science-merge-inset);
  }
  .science-merge__src { grid-row: 1; padding-bottom: var(--space-5); }
  .science-merge__src--a { grid-column: 2; }
  .science-merge__src--a h3 { text-align: end; }   /* the label ends 24 px from its own point (a mirror of Cognitive training); the paragraph stays left-aligned for reading */
  .science-merge__src--b { --science-merge-pt: 0px; grid-column: 4; }
  .science-merge__src--b > .science-merge__lane--pass { display: none; }
  /* each line 24 px into the gutter from its own text */
  .science-merge__src--a > .science-merge__dot { left: calc(100% + 24px - 5px); }
  .science-merge__src--a > .science-merge__lane { left: calc(100% + 24px - 1px); }
  .science-merge__src--b > .science-merge__dot { left: calc(-24px - 5px); }
  .science-merge__src--b > .science-merge__lane:not(.science-merge__lane--pass) { left: calc(-24px - 1px); }
  .science-merge__join--narrow { display: none; }
  .science-merge__join--wide { display: block; grid-column: 3; grid-row: 2; }

  .science-merge__panel {
    --science-merge-at: clamp(48px, 2vw + 32px, 64px);   /* the point: this far into the panel, over the name */
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--science-merge-gut) minmax(0, 1fr);
    grid-row: 3;
    padding: calc(var(--science-merge-at) + 8px + var(--space-5)) max(var(--science-merge-inset), 32px) clamp(48px, 5vw, 80px);
  }
  .science-merge__stem { left: calc(50% - 1.5px); }
  .science-merge__node { left: 50%; }
  .science-merge__name { grid-column: 1 / -1; margin-bottom: clamp(40px, 4vw + 8px, 64px); text-align: center; }
  /* tablets: the two results centred on the line's axis, one under the
     other (side by side their columns would be too narrow for 24 px), 32 px
     apart, less than the name's margin above them, so the name heads both */
  .science-merge__results { grid-column: 1 / -1; justify-items: center; row-gap: var(--space-6); text-align: center; }
  .science-merge__result { text-wrap: balance; }   /* the rests are one line at these widths; with larger text a wrapped rest keeps two even lines */
}
/* from 1024 px side by side, on the disciplines' columns: two shared rows
   (subgrid), so the two results end on one line and the rest of each
   sentence starts on one line; a Muted Plum hairline on the centre axis
   runs between them, under the point. Mirrored on that axis, like the
   labels and lines above: the endurance finding set to the right, ending
   48 px left of the hairline (on the edge where "Physical exercise" ends),
   the cognitive finding from 48 px right of it. The results keep the
   tablet size (27.5 px at 1024, 32 px from 1400), so they never set
   smaller than the discipline labels: up to about 1130 px both take two
   lines ("Improved endurance / and physical performance", "Greater
   cognitive / function gains"), wider "Greater cognitive function gains"
   holds one line, level with "and physical performance" */
@media (min-width: 1024px) {
  .science-merge__results {
    grid-template-columns: minmax(0, 1fr) var(--science-merge-gut) minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 0;
    justify-items: stretch;
    text-align: start;
  }
  .science-merge__results::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / -1;
    justify-self: center;
    width: 1px;
    background: var(--on-line);
  }
  .science-merge__result { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 2; }
  .science-merge__lead { align-self: end; }
  .science-merge__result--phys { grid-column: 1; justify-self: end; text-align: end; }
  .science-merge__result--cog { grid-column: 3; }
}

/* motion: the lines follow the scroll (science.js); when the joined line
   reaches the point it grows and the two results come up from Soft Line to
   Chalk (the text is never hidden). Default: lit */
@media (prefers-reduced-motion: no-preference) {
  .science-merge__node { transition: transform 260ms var(--ease-out); }
  .science-merge__lead { transition: color 560ms var(--ease-out) 60ms; }
  .science-merge-scrub .science-merge__panel:not(.is-lit) .science-merge__node { transform: scale(0.35); }
  .science-merge-scrub .science-merge__panel:not(.is-lit) .science-merge__lead { color: var(--on-muted); transition-delay: 0ms; }
}

/* forced colours: the lines, points and the joined line are painted
   backgrounds or strokes; keep them as CanvasText, and outline the Ink
   panel, which loses its fill */
@media (forced-colors: active) {
  .science-merge__lane,
  .science-merge__dot,
  .science-merge__stem::before,
  .science-merge__node,
  .science-merge__results::before { forced-color-adjust: none; background: CanvasText; }
  .science-merge__join path { stroke: CanvasText; }
  .science-merge__panel { outline: 1px solid CanvasText; }
}

/* ---- S04 selected research: the heading and its intro, then the full
   bibliography, alphabetical, in one column inside its own scrolling panel
   (8 Oct), so the reader can browse the list without scrolling the whole of
   it to reach the end of the page. The panel is always shorter than the
   window (two thirds of the screen below the header on phones and tablets,
   at most 70% of the window from 1024 px), so there is page above or below
   it to scroll, and a list scrolled to its end hands the next scroll back
   to the page (overscroll-behavior: auto). From 1024 px the heading and
   intro sit on the left (5 of 12 columns), the panel on the right (from
   column 7), and the section is about one window tall. Titles 17–18 px, the
   rest 16 px; each DOI link is a 48 x 48 px target at least */
.science-why + .science-refs-section { padding-top: calc(var(--section-pad) * 0.6); }
/* S03's old anchors (#evidence, #research), two empty spans at the start of
   the section: blocks set back by the section's top padding, so a link to
   them lands like #references (they were inline and left the heading 15 px
   under the header) */
.science-why + .science-refs-section > span[id] { display: block; scroll-margin-top: calc(var(--section-pad) * 0.6); }
.science-refs { row-gap: var(--space-6); align-items: start; }
.science-refs__head h2 { margin: 0 0 var(--space-4); }
.science-refs__intro { margin: 0; max-width: 40ch; text-wrap: pretty; }   /* no "combination." alone on phones */
/* phones and tablets: at most two thirds of the screen below the sticky
   header (was 62% of the window but never under 320 px, which on a phone
   turned sideways, 375-390 px tall, made the panel fill the whole screen
   below the header, so a swipe could only scroll the list). Now a third
   of what is visible is always page, above or below it, to swipe the page
   on; in portrait it is about the height it was (493 px on a 375 x 812
   phone, 628 on a 768 x 1024 tablet). vh first for browsers before svh.
   --science-refs-trim (science.js) takes off, or adds (up to about a
   seventh of its height), what brings the panel's lower edge into a line
   of text rather than the gap between two entries or a "DOI" link, so the
   cut entry shows the list goes on.
   The top and bottom rules belong to the panel's frame (a plain wrapper,
   9 Oct review), and the scrolling panel reaches 6 px left of the text
   (margin out, padding in), so a focused DOI link's ring, 3 px over a 3 px
   gap, shows in full rather than cut off on the left by the panel's edge;
   the text and the rules stay where they were. The heights are the
   frame's, less its two 1 px rules */
.science-refs__frame { border-block: 1px solid var(--on-line); }
.science-refs__panel {
  --science-refs-ring: calc(var(--focus-width) + var(--focus-gap));
  max-height: calc(min(640px, (100vh - var(--header-h)) * 0.66) - 2px - var(--science-refs-trim, 0px));
  max-height: calc(min(640px, (100svh - var(--header-h)) * 0.66) - 2px - var(--science-refs-trim, 0px));
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--on-muted) transparent;
  scrollbar-gutter: stable;
  margin-left: calc(-1 * var(--science-refs-ring));
  padding-left: var(--science-refs-ring);
  padding-right: var(--space-4);
}
/* the panel's own ring (keyboard focus on the list) goes round the frame,
   where it always was; where :has() is not supported it stays on the panel */
.science-refs__panel:focus-visible { outline-offset: var(--focus-gap); }
@supports selector(:has(*)) {
  .science-refs__frame:has(> .science-refs__panel:focus-visible) {
    outline: var(--focus-width) solid var(--on-focus);
    outline-offset: var(--focus-gap);
    box-shadow: 0 0 0 var(--focus-gap) var(--on-focus-gap);
  }
  .science-refs__panel:focus-visible { outline: none; box-shadow: none; }
}
@media (min-width: 1024px) {
  .science-refs__panel { max-height: calc(min(70svh, 720px) - 2px - var(--science-refs-trim, 0px)); }
}
.refs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-ui);
  line-height: 1.5;
}
.refs > li {
  display: grid;
  align-content: start;
  justify-items: start;
  row-gap: var(--space-1);
  min-width: 0;
  padding: var(--space-5) 0 var(--space-2);
  border-top: 1px solid var(--on-line);
}
.refs > li:first-child { border-top: 0; }
/* phones, tablets and touch screens: their scrollbars overlay the list and
   take no room, so the right padding moves into each entry and the rules
   between entries run the panel's full width, flush with its top and
   bottom rules (they stopped 16 px short) */
@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  .science-refs__panel { padding-right: 0; }
  .refs > li { padding-right: var(--space-4); }
}
.refs > li > * { max-width: 62ch; }
/* the authors at 46ch (12 Oct 2026, Alessandro approved after the
   mobile/desktop size checks): at 62ch the long author lists ran 600 px
   and up to 92 characters a line (50ch still let lists dense with
   initials reach 84); now at most 480 px and 70 characters, about 50 a
   line on average. Phone columns are narrower than 46ch already */
.refs > li > .refs__who { max-width: 46ch; }
.refs__who { color: var(--on-muted); }
.refs__title {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  font-weight: var(--weight-strong);
  line-height: 1.4;
}
/* the journal and volume in the editorial italic (Newsreader), as the
   reference style sets them; Commissioner has no italic and the site's
   <em>/<i> render upright (base.css) */
.refs__journal { font-family: var(--font-editorial); font-style: italic; font-weight: var(--weight-regular); font-size: 1.04em; }
/* 48 px tall from the padding, and at least 48 px wide: "DOI" alone is 29 px */
.refs__link {
  display: inline-block;
  min-width: var(--target-preferred);
  padding-block: 12px;
  margin-top: calc(-1 * var(--space-2));
  overflow-wrap: break-word;
  max-width: 100%;
}
/* keyboard focus: the target's top 8 px reach up into the journal line, so
   the ring round it ran along that line's letters; focused, the box starts
   8 px lower and is 8 px shorter at the top (margin and padding move
   together, so "DOI" and the list do not move) and the ring clears them */
.refs__link:focus-visible { margin-top: 0; padding-top: calc(12px - var(--space-2)); }