@keyframes rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* The opening paragraph sits at the head of the reading column rather than in
   the masthead: under the headline it pushed the facts column down and left
   the right half of the first viewport empty. */
.page__standfirst { margin: 0 0 var(--space-m); }

/* The column rule `body.daybreak .page__col--wide > p` is (0,2,1) and beats
   this at (0,2,0), so the opening paragraph rendered at body size (17.68px
   instead of 24.8px, measured in the browser). Same specificity trap as the
   section headings. */
body.daybreak .page__col--wide > .page__standfirst,
body.daybreak .page__standfirst {
  /* One step under the section headings: this is the answer, so it reads
     larger than body size but never competes with the headline. */
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.6rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  max-width: 46ch;
}

/* --- the columns -----------------------------------------------------------
   Two unequal measures. The wide one carries the explanation at a 68ch cap;
   the narrow one carries the facts that stand on their own.
   ------------------------------------------------------------------------ */

/* Tight against the rule above it: the rule is the separation. The foot is
   set with the seam planes further down, generous because an angle arriving
   right under a line of text reads as a collision. */
.page__body { padding-top: var(--section-tight); }

/* A single selector, on purpose. A compound `.page__body > .shell >
   .page__cols` (0,3,0) beat the media query's `.page__cols` (0,1,0), because
   media queries add no specificity. Measured at 390px: the media query
   matched but the grid stayed at two columns (191px and 123px), with the body
   text at 24 characters per line. */
.page__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.page__col--wide { max-width: var(--measure); }

.page__col--wide > h2 {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  /* More space above a heading than below it, so the heading belongs to what
     follows it rather than floating between two blocks. */
  margin-bottom: var(--space-s);
}

.page__col--wide > .page__standfirst:first-child { margin-top: 0; }

body.daybreak .page__col--wide > h2 {
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.page__col--wide > p {
  margin-block: 0 var(--space-s);
  color: var(--ink-soft);
  line-height: 1.65;
}

body.daybreak .page__col--wide > p { font-size: var(--step-0); }

/* Prose lists close with MORE space than a paragraph.

   The global reset is `* { margin: 0 }` and nothing gave margin back to body
   lists: the 106 unclassed lists on the site closed with ZERO margin and the
   next paragraph started flush against the last bullet.

   The value is --space-m (24px) against the 16px a paragraph closes with,
   because a list is a unit that ends, not one more line of the same thought.
   The top stays at zero: the list belongs to what introduces it.

   Only unclassed lists (prose) are reached. The 16 list components (`.docs`,
   `.links`, `.cards`, `.people`, `.gallery`, the rail, the menu, the
   footer...) bring their own spacing. */
.page__col--wide ul:not([class]),
.page__col--wide ol:not([class]) {
  margin-block: 0 var(--space-m);
}

.page__col--wide strong { color: var(--ink); font-weight: 600; }

/* --- the facts -------------------------------------------------------------
   A description list, divided by hairlines, not a stack of cards. Same
   decision as the figures row on the homepage: rules between items, never a
   border around each one.
   ------------------------------------------------------------------------ */

.facts { margin: 0; }

.facts__item {
  padding-block: var(--space-s);
  border-top: var(--hairline-ink);
}

.facts__item:last-child { border-bottom: var(--hairline-ink); }

/* The label, in the system's own figure grammar: sentence case, weight 400,
   no tracking, at the scale's smallest step. Uppercase 13px with 0.1em
   tracking fell below the 14px floor and introduced a fourth tracking value
   the system does not have. */
.facts dt {
  margin-top: 0.35rem;
  color: var(--ink-soft);
  font-weight: 400;
  line-height: 1.35;
}

body.daybreak .facts dt { font-size: var(--step--1); }

.facts dd {
  margin: 0;
}

/* The system's own figure curve, not a new one. */
.facts__n {
  display: block;
  color: var(--ink);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  /* Tabular so the column of numbers lines up on its left edge. */
  font-variant-numeric: tabular-nums;
}

body.daybreak .facts__n { font-size: clamp(2.4rem, 1.9rem + 2.2vw, 3.6rem); }

/* Space between the end of the content and the footer. Without it the last
   paragraph touches the footer. */
.page__body {
  padding-bottom: var(--space-2xl);
}

/* --- the closing navy box (removed) ----------------------------------------
   The `.page__cta` box and the diagonal seam that preceded it (navy and gold
   planes on `.page__body::before/::after` plus an enlarged `padding-bottom`)
   were removed. The seam survived the removal because it hangs off
   `.page__body`, which still exists, so it did not show up as dead CSS by
   name: it kept painting a diagonal and reserving space for a box that was
   gone.

   If a closing band is needed again, the gesture exists on the homepage
   (`.wedge-bl` / `.wedge-tr` in styles.css).
   ------------------------------------------------------------------------ */

/* --- the documents ---------------------------------------------------------
   Treated as documents, not as links inside a paragraph.
   ------------------------------------------------------------------------ */

.page__docs { padding-block: var(--section-y); }

body.daybreak .page__docs h2 {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-m);
}

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

/* Rules between items, never a border around each one. Bordered cards are
   banned by the system, and the 1px grey outline measured 1.4:1 against white
   while being the sole visual boundary of a control, where WCAG 1.4.11 asks
   for 3:1. A hairline between peers carries no such duty.

   Specificity: `:not()` takes the specificity of its argument, so
   `body.daybreak a:not(.btn)` is (0,2,2), not (0,2,1), and it beats
   `body.daybreak .docs__link` (0,2,1). Without a rule inking the link text,
   the links fell back to the brand blue: 2.56:1 against the paper, where WCAG
   AA asks 4.5:1 for normal text.

   Hence `body.daybreak a.docs__link:not(.btn)`, (0,3,2), which wins
   regardless of stylesheet load order. */
body.daybreak a.docs__link:not(.btn) {
  display: flex;
  gap: var(--space-s);
  align-items: baseline;
  padding-block: var(--space-xs);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  transition: background 0.18s var(--ease);
}

/* The separator lives on the ITEM, not on the link. Each document is a
   paragraph introducing it plus the link that opens it; with the rule on the
   link, the line fell between the paragraph and its own link instead of
   separating one item from the next. */
.docs__item { border-top: var(--hairline-ink); padding-block: var(--space-s); }
.docs__item:last-child { border-bottom: var(--hairline-ink); }

/* The paragraph that introduces each download, followed by the link, which
   stays the action. */
.docs__lead {
  margin: 0 0 var(--space-2xs);
  max-width: 62ch;
}

@media (hover: hover) and (pointer: fine) {
  body.daybreak a.docs__link:not(.btn):hover { background: var(--paper-1); }
}

/* The system's press feedback is 0.97; 0.995 is half a percent and
   imperceptible. */
.docs__link:active { transform: scale(0.97); }

body.daybreak .docs__link strong { color: var(--ink); }

.docs__fmt {
  font-weight: 400;
  color: var(--ink-soft);
}

.docs__kind {
  flex: 0 0 auto;
  padding: 0.2em 0.5em;
  border-radius: var(--radius-tight);
  background: var(--sun);
  color: var(--ink);
  /* 14px, the system's floor; 12px was visible on `/what-is-als`. */
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.docs__text { display: grid; gap: 0.2rem; }
.docs__text span { color: var(--ink-soft); }
body.daybreak .docs__text span { font-size: var(--step--1); }

/* --- responsive ------------------------------------------------------------
   One column below the lap breakpoint, and the facts move under the reading
   column rather than being squeezed beside it.
   ------------------------------------------------------------------------ */

@media (max-width: 63rem) {
  .page__cols {
    grid-template-columns: 1fr;
  }

}

/* --- the masthead on an interior page --------------------------------------
   The site masthead is transparent by design: on the homepage its ground is
   the hero photograph, so it inherits the light-on-dark tokens. An interior
   page has no hero, so a white logo and white navigation sat on white paper.

   Navy, rather than re-colouring the logo and links to ink: it keeps every
   token the component already has and reads as the masthead of the paper.
   ------------------------------------------------------------------------ */

/* Interior-page menu: stuck to the top edge, with blur.

   `sticky`, not `fixed`: fixed leaves the flow and needs compensating padding
   on the content, a measure that drifts whenever the menu height changes.
   sticky keeps its place and sticks on arrival at the top.

   Navy at 86% opacity, and contrast does not set the number. Measured on
   pixels, with the menu over the gold band of the page head (the worst case
   on the site): 86% gives 10.72:1, 78% gives 8.96:1, 70% gives 7.18:1, 62%
   gives 5.77:1. All pass AA, so contrast alone would allow lowering it.

   What governs it is COLOUR: translucent navy over the brand gold does not
   give a lighter navy, it gives olive green. At 78% the background measures
   (56,66,69), grey; at 70%, (77,80,62), plainly olive. Neither exists in the
   palette. At 86% it stays at (37,53,77), still navy, and the blur is still
   perceptible.

   saturate(160%) besides the blur: blur alone washes colours out, and without
   saturation the gold passing underneath looks grey. */
.masthead--solid {
  position: sticky;
  top: 0;
  background: color-mix(in oklab, var(--ground) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

/* Without backdrop-filter there is no blur, so the background goes back to
   opaque: translucent navy over light content with no blur leaves the menu
   text competing with whatever passes behind it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead--solid {
    background: var(--ground);
  }
}

/* A sticky menu covers the target of any anchor, so targets reserve its
   height. Same value the hero uses to pass behind the homepage menu. */
.masthead--solid ~ main :target,
.masthead--solid ~ main [id] {
  scroll-margin-top: calc(var(--masthead-h, 76px) + 1rem);
}

/* The mobile menu panel hangs off the sticky menu, so it stays pinned too. */
.masthead--solid .masthead__panel {
  max-height: calc(100dvh - var(--masthead-h, 76px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- hub placeholders ------------------------------------------------------
   The five navigation destinations, on the Standard template until the Hub
   template exists. One column, since they carry no figures.
   ------------------------------------------------------------------------ */

.page__cols--single {
  grid-template-columns: minmax(0, 1fr);
}

.page__cols--single .page__col--wide {
  max-width: var(--measure);
}

/* The section's children. Every item is a link and this list is the only way
   into the L2 pages, which the top nav does not carry. Hairlines between
   items, the same treatment as the figures and the documents, rather than a
   bulleted list or a row of cards. */
.page__children {
  list-style: none;
  margin: var(--space-s) 0 0;
  padding: 0;
  max-width: 46ch;
}

.page__children li {
  padding-block: 0.75rem;
  border-top: var(--hairline-ink);
  color: var(--ink-soft);
}

.page__children li:last-child { border-bottom: var(--hairline-ink); }

body.daybreak .page__children li { font-size: var(--step-0); }

/* --- content components ----------------------------------------------------
   The content types of the site, each solved with a piece the homepage
   already has: not new designs, the same piece put to work with other
   content. Derived from classifying 222 blocks across 25 pages.

     page-header   25 pages    <- the .hero, short version
     prose         83 blocks   <- the Standard body
     shot          62 blocks   <- .duo__shot, the chevron photo
     person        25 blocks   <- .panel of the commitments, with photo
     action        19 blocks   <- .btn
     doc-list      12 blocks   <- .docs
     media-embed   12 blocks   <- the .duo__shot frame
     gallery        5 blocks   <- .events__list
     link-list      4 blocks   <- .events__list in one column
   ------------------------------------------------------------------------ */

/* --- page-head: the head of every interior page ----------------------------
   ONE only, and without a photograph. Two colour blocks split by a diagonal:
   the diagonal is the same as the homepage wedge and the colours are the
   brand's, so the head introduces no new device: it is the homepage system at
   the top of the page.

   WHY NO PHOTO: of the 24 interior pages ONLY 5 have a usable horizontal
   photograph. The other 19 have logos, flyers, vertical portraits or
   screenshots, or nothing. A head with a photo would have forced inventing 19
   photographs, or putting an image on each page that does not belong to it.

   A single head also means there is no choice of which to use on each page,
   and all 25 open the same way.
   ------------------------------------------------------------------------ */
html body.daybreak .page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* GOLD, not navy.

     With a navy head it sat flush against .masthead--solid, also navy: two
     blocks of the same colour with a seam between them, and 280px of navy
     before the content starts.

     The pattern works when the menu is LIGHT and the colour blocks are the
     head. Here the menu is already navy, so the block has to be the other
     colour.

     Gold is not a new colour in this position either: it is exactly the band
     of .give, the homepage section. The ink-on-gold pair is already in use
     and already measured. */
  background: var(--sun);
  color: var(--ink);
  padding-block: clamp(2.5rem, 2rem + 2.4vw, 4rem);
}

/* The navy block, entering from the right with the system's angle. It is the
   second block, and the one that stitches the head to the menu above it. */
html body.daybreak .page-head::before {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  /* 15% of the width, not 38%. The block accompanies, it does not compete
     with the gold.

     The diagonal moves that edge to either side of 85%: with skewX(24deg)
     over the head height the displacement is about 62px each side of the
     centre, so at the top it enters a little less and at the bottom a little
     more, and the average stays at 15%. */
  left: 85%;
  right: -20%;
  background: var(--ground);
  /* The offset goes in a custom property because GSAP cannot animate a
     pseudo-element, but it CAN animate a variable on the parent and let the
     pseudo read it. */
  transform: translateX(var(--planes-in, 0%)) skewX(24deg);
  z-index: -1;
}

/* And a second gold diagonal AFTER the navy, against the right edge.

   It is how the homepage wedge works: the gold is not only behind the navy,
   it shows on both sides. With a single band the head ended in navy and the
   right edge was mute; with the second the pair of planes reads like the
   brand's printed identity.

   It comes after ::before in the file with the same z-index, so it paints
   over the navy without escalating z-index. */
html body.daybreak .page-head::after {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 96.5%;
  right: -20%;
  background: var(--sun);
  /* Enters with the navy: they are the pair of planes, not two loose
     gestures. */
  transform: translateX(var(--planes-in, 0%)) skewX(24deg);
  z-index: -1;
  pointer-events: none;
}

/* On narrow screens the navy block goes to the FOOT.

   As a column on the right it was illegible: at 390px the title takes 89% of
   the width, so ink text fell over the navy and left stray words of dark ink
   on dark blue. Measured with the longest title on the site (`volunteers`, 20
   words): "Volunteer!", "and" and "in" illegible.

   Below it competes with nothing: the gesture is kept, the diagonal is the
   same, and the text gets the full width. */
@media (max-width: 52rem) {
  /* The two diagonals stack at the foot: navy on top and gold below, the same
     order they have horizontally, read left to right.

     clip-path, not skewX: over a wide, low band the skew shifts the shape but
     leaves the edges horizontal, so it looked like a straight stripe and the
     gesture was lost. The polygon does tilt the top edge, which is all that
     shows. The slope falls to the right, like the wedge and every seam on the
     homepage. */
  html body.daybreak .page-head::before {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0.7rem;
    height: 2.8rem;
    transform: none;
    clip-path: polygon(0 62%, 100% 0, 100% 100%, 0 100%);
  }

  /* The gold strip, below the navy and with the same slope. It used to sit
     ABOVE at the same height, so the navy covered it and the second diagonal
     was not visible on phones. */
  html body.daybreak .page-head::after {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.4rem;
    transform: none;
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
  }

  html body.daybreak .page-head {
    padding-bottom: clamp(2.5rem, 2rem + 3vw, 3.5rem);
  }
}

html body.daybreak .page-head__title {
  margin: 0;
  /* The navy starts at 85%, so the title has nearly the whole width. Under
     52rem the navy is at the foot and the title uses it all. */
  max-width: 28ch;
  font-size: var(--step-3);
  color: var(--ink);
  text-wrap: balance;
}

@media (max-width: 52rem) {
  html body.daybreak .page-head__title { max-width: 100%; }
  html body.daybreak .page-head__standfirst { max-width: 100%; }
}

/* The standfirst, when the source has one. Weight 300 against the headline's
   700: thick title with thin letters.

   It goes here and not in the body on purpose: at --step-1 the Light weight
   reads well, at 16px it loses legibility, and this site is read mostly by
   older patients and families. The body stays at 400. */
html body.daybreak .page-head__standfirst {
  margin: var(--space-s) 0 0;
  max-width: 46ch;
  font-size: var(--step-1);
  font-weight: var(--wght-lede);
  letter-spacing: 0;
  color: var(--ink);
}

/* The body standfirst follows the same weight rule. */
html body.daybreak .page__standfirst {
  font-weight: var(--wght-lede);
}

/* --- shot: the content photograph ------------------------------------------
   The chamfer of .duo__shot, the brand's signature, applied to the 62
   content images. `figure` was already taken by the homepage figures
   (.figure__value), hence the name.
   ------------------------------------------------------------------------ */
.shot {
  margin: var(--space-l) 0;
}

.shot__frame {
  overflow: hidden;
  border-radius: var(--radius-media);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--plate-chamfer)),
                     calc(100% - var(--plate-chamfer)) 100%, 0 100%);
  background: var(--paper-1);
}

/* `width: auto` with `max-width: 100%`, not `width: 100%`.

   With `width: 100%` the image stretches to the container even when it is
   smaller than the gap, and on `/resources` that enlarged screenshots from
   other sites by 43%: `screenshot-2025-01-06-at-4-33-12-pm` measures 380x294
   and came out at 544x421, blurry with the screenshot text unreadable.
   Another, 460x322, likewise. These images arrive at the size they have; a
   screenshot has no extra resolution to give.

   `max-width: 100%` still keeps them from overflowing, the only thing `width:
   100%` was doing right. */
.shot__frame img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* The frame fits the image. Without this the chamfer and the paper background
   draw the whole gap and a small image floats inside a grey rectangle. */
.shot__frame {
  width: fit-content;
  max-width: 100%;
}

/* The caption goes below and in soft ink, not over the photo: over a
   photograph we do not control, contrast cannot be guaranteed. */
body.daybreak .shot figcaption {
  margin-top: var(--space-xs);
  color: var(--ink-soft);
  font-size: var(--step--1);
  max-width: 62ch;
}

/* Half width, for photos that accompany rather than illustrate. */
.shot--inset { max-width: 34rem; }

/* --- person: a person's entry ----------------------------------------------
   The 25 staff entries: clinic 9, foundation 7, research 9.

   A two-column row, portrait on one side and the full biography on the other,
   not a card grid. Measured in the source: the `clinic-staff` biographies
   average 270 WORDS each. In a grid, nine biographies of 270 words give nine
   cards of uneven height and a metre of scroll each.

   The choice is not to truncate: on a patient site, reading the biography of
   the doctor who will see you should not cost a click.
   ------------------------------------------------------------------------ */
.people {
  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
}

.person + .person {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: var(--hairline-ink);
}

.person {
  display: grid;
  gap: var(--space-m);
  align-items: start;
}

@media (min-width: 44rem) {
  .person {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: var(--space-l);
  }
}

.person__shot {
  overflow: hidden;
  border-radius: var(--radius-media);
  aspect-ratio: 4 / 5;
  background: var(--paper-1);
  max-width: 13rem;
}

.person__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The name and credentials arrive together on a single line of the source
   ("Terry Heiman-Patterson, MD"), so they are transcribed together: splitting
   the datum to lay it out would be editing content. */
html body.daybreak .person__name {
  margin: 0 0 var(--space-xs);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.01em;
}

html body.daybreak .person__bio {
  margin: 0;
  /* 56ch, not 62. The 62ch cap never kicked in: the page column compressed
     the entry to 490px and the biography read at 55 characters. Giving the
     staff pages the shell width, the cap started to apply and the biography
     came out at 688px, 78 characters per line.

     The cause of the surprise is that `ch` measures the width of "0", and in
     Poppins the zero is wide: 11.1px against 8.84px for the average letter at
     this size. 62ch is not 62 characters, it is 78. At 56ch the biography is
     at 70, within the reading range. */
  max-width: 56ch;
}

html body.daybreak .person__bio + .person__bio { margin-top: var(--space-s); }

/* --- gallery: the image grid -----------------------------------------------
   The galleries of tnmg, vaac and the travel grant. It is .events__list: a
   grid of photographs with the same chamfer, no caption.
   ------------------------------------------------------------------------ */
/* Columns with each photo's NATIVE proportion, not a grid of squares. Forcing
   `aspect-ratio: 1` with `object-fit: cover` crops heads in event photographs
   with people. Uniform crops work for covers and designed plates, where the
   crop is predictable; here the photos arrive in any proportion.

   `columns` and not `grid`: real masonry, with no gaps, and without depending
   on grid-template-rows: masonry, which is not everywhere yet. */
.gallery {
  columns: 3 13rem;
  column-gap: var(--space-s);
  margin: var(--space-l) 0;
  padding: 0;
  list-style: none;
}

.gallery__item {
  break-inside: avoid;
  margin-bottom: var(--space-s);
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--paper-1);
}

.gallery__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- link-list: the resource list ------------------------------------------
   The link lists of resources, vaac and the newsletters. The same horizontal
   rule as .docs, without the format chip, because these go to pages and not
   to documents.
   ------------------------------------------------------------------------ */
.links {
  list-style: none;
  margin: var(--space-m) 0;
  padding: 0;
  max-width: var(--measure);
}

.links__item {
  border-top: var(--hairline-ink);
}

.links__item:last-child { border-bottom: var(--hairline-ink); }

/* The same specificity fix as .docs: `body.daybreak a:not(.btn)` is (0,2,2)
   and beats a bare `.links__link`. */
body.daybreak a.links__link:not(.btn) {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
  padding-block: var(--space-s);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  body.daybreak a.links__link:not(.btn):hover { background: var(--paper-1); }
}

.links__link:active { transform: scale(0.97); }

.links__note {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: var(--step--1);
}

/* --- media-embed: the third-party slot -------------------------------------
   Videos and donation forms. The only content type with no equivalent on the
   homepage, because the homepage embeds nothing from outside. It uses the
   .shot frame so the slot belongs to the system.

   The proportion is set by the container and not the iframe: without that, an
   iframe with no declared height collapses to 150px, the browser default.
   ------------------------------------------------------------------------ */
.embed {
  margin: var(--space-l) 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--paper-1);
}

.embed--video { aspect-ratio: 16 / 9; }

.embed > iframe,
.embed > video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* A form has no fixed proportion: it grows with its fields. */
.embed--form {
  aspect-ratio: auto;
  min-height: 24rem;
}

/* An embedded form IFRAME needs its own height.

   `.embed > iframe` asks for `height: 100%`, and a percentage resolves
   against the container's HEIGHT. `.embed--video` has one through its
   `aspect-ratio`, but `.embed--form` only declares `min-height`, which is not
   a resolvable height: the `100%` computed to `auto` and the iframe fell to
   the browser default of 150px, then the container stretched to its minimum
   and left a grey strip (measured: 150x1163 iframe with 234px of empty grey
   below).

   Only the TWO embeds that the source ships as an iframe are affected. The
   other three are `<givebutter-widget>` and their script sizes them itself:
   they measure 438, 508 and 533px. The 34rem comes from there, from the
   ceiling of those three. */
.embed--form > iframe {
  height: 34rem;
}

/* On narrow screens the form grows and 34rem cuts it off.

   Givebutter has an internal breakpoint when its box drops below ~400px: it
   stacks the amount buttons and gains height. Measured on the three widgets
   that do size themselves, the only way to know what a cross-origin iframe
   needs:

     box >= 419px (screen >= 480px)  ->  ceiling 533px
     box <= 371px (screen <= 430px)  ->  ceiling 619px, and 643px at 320px

   41rem (656px) clears the worst case with room. On a donation form it is
   better to leave spare grey than to cut off the submit button. */
@media (max-width: 29.99em) {
  .embed--form > iframe {
    height: 41rem;
  }
}

/* --- head entrance ---------------------------------------------------------
   The planes enter from the left and only then does the title appear.

   The initial state lives in CSS, not JS, so there is no frame with
   everything in place before the script runs. It sits inside
   prefers-reduced-motion: no-preference and hangs off .js-motion, the same
   pair of conditions the reveals elsewhere on the site use: if the visitor
   asked for less motion, or the script never runs, none of this applies and
   the head is drawn finished.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* -345%, not -135%.

     The navy plane goes from left:85% to right:-20%, so it is 35% of the head
     width. To start OFF-screen on the left and cross the whole gold strip,
     its right edge has to start at x=0: that is 120 points of head width over
     35 of its own width, about -343%. At -135% it started mid-strip and
     travelled nowhere.

     It crosses BEHIND the title (z-index: -1), so the sweep does not cover
     it; the title appears after the plane has passed. */
  html.js-motion .page-head { --planes-in: -345%; }

  html.js-motion .page-head__title,
  html.js-motion .page-head__standfirst {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* --- the events collection -------------------------------------------------
   `events` does not fit the Standard mould: it is not a text page with a data
   rail but a collection of 40 entries, each with date, time, place and an
   image.

   It reuses the homepage `.event` component (chevron photo, gold corner
   badge, name, note) and adds `.event__meta`, which the homepage did not need
   because it had no dates.

   Two formats, because they are two different things:   · the 10 upcoming, as
   cards with the event image   · the 30 past, as an archive in hairline rows,
   the same language as `.facts` and `.docs`, without image
   ------------------------------------------------------------------------ */

html body.daybreak .evcoll__head {
  margin: var(--space-2xl) 0 var(--space-l);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.evcoll {
  list-style: none;
  margin: 0 0 var(--space-2xl);
  padding: 0;
  display: grid;
  /* Two, not three as on the homepage. The event images are flyers with text
     inside: at a third of the width that text is unreadable. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-l);
  align-items: start;
}

.evcoll > .event {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
}

/* No image in this collection is cropped. `.frame__inner img` on the homepage
   is `height: 100%` + `object-fit: cover`, which suits photographs inside a
   fixed rectangle; here the images are event flyers with the title and date
   printed inside, with aspect ratios from 0.75 to 1.50. Each one sets its own
   height.

   Measuring trap: `decoding="async"` plus a Playwright element screenshot
   yields a blank or single-colour image, because the paint happens before the
   webp is decoded. It looks cropped and is not. `await img.decode()` before
   capturing. */
.evcoll .frame__inner img {
  height: auto;
  object-fit: fill;
}

/* The homepage badge is a one-line pill because it said "Date TBD". With a
   real date there are two data points, month and day, and they stack.

   The navy border is not decoration. On the homepage the gold badge sits on a
   photograph and separates by itself; here it sits on the flyers, which are
   mostly yellow, and measured pixel by pixel the gold was 1.13:1 against one
   flyer and 2.36:1 or less on 9 of the 10 events. No solid colour solves both
   extremes: a navy badge would vanish on a navy flyer. The border does,
   because the badge then carries the system's two opposite colours and one of
   them cuts against any background. */
html body.daybreak .evcoll .event__badge {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 0.4em 0.6em 0.45em;
  line-height: 1;
  letter-spacing: 0;
  /* Two rings, not one. The navy cuts against the light and yellow flyers;
     the outer gold cuts against the dark ones, where navy alone vanished
     (1.04:1 measured). With both, one of them contrasting is enough for the
     badge to read as an object. */
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 2px var(--sun);
}

.evcoll .event__badge-m {
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.evcoll .event__badge-d {
  font-size: var(--step-1);
  font-weight: 700;
}

/* When the event has no image the badge has no photo to sit on, so it stops
   being a corner and becomes the first line of the block. */
.evcoll .event__shot--none {
  position: static;
  margin-bottom: var(--space-s);
  justify-self: start;
}

html body.daybreak .evcoll .event__shot--none .event__badge {
  position: static;
}

html body.daybreak .evcoll .event__name {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Date, time and place. Same grammar as `.facts`: label at weight 400 at the
   scale's smallest step, no uppercase and no tracking, with the value below.
   Two columns here because they are three short lines, not paragraphs. */
.event__meta {
  margin: var(--space-xs) 0 var(--space-s);
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0.15rem var(--space-s);
  font-size: var(--step--1);
}

.event__meta dt {
  color: var(--ink-soft);
  font-weight: 400;
}

.event__meta dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}

html body.daybreak .evcoll .event__note {
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: 1.6;
}

/* --- the archive -------------------------------------------------------- */

.evarchive {
  list-style: none;
  margin: 0 0 var(--space-2xl);
  padding: 0;
}

.evarchive__item {
  display: grid;
  /* 15rem, not 14: at 14 the longest date in the archive ("Wednesday,
     February 18, 2026") wrapped onto two lines and left the day number alone
     on the second. */
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--space-xs) var(--space-l);
  padding-block: var(--space-s);
  border-top: var(--hairline-ink);
}

.evarchive__item:last-child { border-bottom: var(--hairline-ink); }

.evarchive__when {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.evarchive__what { display: grid; gap: 0.2rem; }

html body.daybreak .evarchive__name {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
}

.evarchive__where {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* On phones the collection is a single column and the archive stacks the date
   over the name: at 390px the full date ("Wednesday, September 2, 2026") does
   not fit in a 14rem column beside anything. */
@media (max-width: 52rem) {
  .evcoll { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
  .evarchive__item { grid-template-columns: minmax(0, 1fr); }
  .event__meta { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
}

/* --- text block measure ----------------------------------------------------
   `--measure` is 68ch, and `ch` is relative to the font-size OF THE ELEMENT
   ITSELF. In a 17.68px paragraph it gives 755px; in a 31px h2 it gives
   1377px. Measured: the headings were never capped, reached the container
   edge and left their right axis misaligned with the paragraphs.

   `--medida-bloque` is the same width in rem, so it is equal for a heading
   and a paragraph and both share the axis. 47rem is the 752px that
   `--measure` gives on body text.
   ------------------------------------------------------------------------ */
:root {
  /* 42rem, not 47. Measured with the REAL width of Poppins' average character
     in the body (9.83px at 17.68px type), 47rem gave 77 characters per line,
     above the 75 maximum of the comfortable reading range. At 42rem it is 68.

     The number is computed, not guessed: characters x character-width / rem.
     And it cannot be in `ch`, because `ch` measures the width of "0", and in
     this font the zero is 13% wider than the average letter. */
  --medida-bloque: 42rem;

  /* The signature chamfer. It existed only inside `.figure__icon` (at 0.9rem,
     measured for a 56px square), so `.shot__frame` asked for it and nobody
     defined it: the `clip-path` was invalid and the 62 content images had all
     four corners square. Here it applies to the large plates; `.figure__icon`
     still overrides it with its own value. */
  --plate-chamfer: 1.25rem;
}

/* --- staff family: the people pages ----------------------------------------
   `foundation-staff`, `clinic-staff` and `research-staff` are 25 entries with
   portrait and biography. The `.person` component was already solved; what
   failed was the container: the page capped EVERYTHING at `--measure` (68ch),
   so the entry fit in 755px of the shell's 1248 and left 451px of white on
   the right. The portrait compressed to 13rem and the biography to 490px,
   below its own 62ch measure.

   Here the cap leaves the column and goes to each prose block, where it
   matters: paragraphs and headings stay at 68ch and the entries use the width
   they have.
   ------------------------------------------------------------------------ */

.page__cols--people .page__col--wide {
  max-width: none;
}

/* Prose keeps its reading measure. Without this, removing the cap from the
   column would leave intro paragraphs at 1248px, about 150 characters per
   line. */
.page__cols--people .page__col--wide > p,
.page__cols--people .page__col--wide > h2,
.page__cols--people .page__col--wide > ul:not(.people),
.page__cols--people .page__col--wide > ol,
.page__cols--people .page__col--wide > figure {
  max-width: var(--medida-bloque);
}

/* The portrait grows from 13rem to 15rem, which is what the recovered width
   allows. No more: the smallest portrait on the three pages is 250px wide
   (`thp.webp`) and at 15rem it displays at 240, still not scaled up. */
@media (min-width: 44rem) {
  .page__cols--people .person {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  }
}

.page__cols--people .person__shot {
  max-width: 15rem;
}

/* The role heading each entry ("Medical Staff", "Occupational Therapist"): in
   the source it is a loose heading before the person, and without its own
   spacing it read glued to the previous entry's biography. */
.page__cols--people .page__col--wide > h2 {
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 2px solid var(--ink);
}

.page__cols--people .page__col--wide > h2:first-of-type {
  margin-top: var(--space-l);
}

/* An entry behind its own heading does not need the hairline above: the h2
   rule already separates. */
.page__cols--people .people {
  margin-top: var(--space-m);
}

/* --- page__actions: the content button row ---------------------------------
   Buttons accompanying a block go together in a row, not one per line. On
   `/vaac` they are the recording and the slides of each webinar, two faces of
   the same thing that read better side by side.

   The generator no longer emits them as `btn--sun`: gold is rationed to the
   primary action, and thirteen gold buttons on a page left the donation CTA
   without hierarchy. They use `btn--outline`.
   ------------------------------------------------------------------------ */
.page__actions {
  margin: var(--space-m) 0 var(--space-l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* --- link-list chevron -----------------------------------------------------
   The layouts of `resources` and `vaac` draw an arrowhead on the right of
   each row. The rule already reserved the gap with `justify-content:
   space-between` and nothing filled it.

   It goes in ::after, not as a character in the HTML: it is decoration, not
   text, and has nothing to announce to a screen reader.
   ------------------------------------------------------------------------ */
body.daybreak a.links__link:not(.btn)::after {
  content: '';
  flex: 0 0 auto;
  align-self: center;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.15em;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(-45deg);
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  body.daybreak a.links__link:not(.btn):hover::after {
    border-color: var(--ink);
    transform: rotate(-45deg) translate(0.12em, 0.12em);
  }
}

/* --- directory family: the resource pages ----------------------------------
   `resources` and `vaac`. They compose as a vertical sequence of blocks, not
   two-column entries: the logo or poster goes on top and left-aligned, the
   text below, and large photographs and galleries cross the full width.

   As in the staff family, the 68ch cap moves from the column to the prose
   blocks. What gains width is what crosses the page: the large photograph,
   the gallery and the link list.
   ------------------------------------------------------------------------ */

.page__cols--directory .page__col--wide {
  max-width: none;
}

.page__cols--directory .page__col--wide > p,
.page__cols--directory .page__col--wide > h2,
.page__cols--directory .page__col--wide > h3,
.page__cols--directory .page__col--wide > ol,
.page__cols--directory .page__col--wide > ul:not(.links):not(.gallery):not(.docs):not(.cards) {
  max-width: var(--medida-bloque);
}

/* The link list and the gallery cross the page. `.links` carried its own 68ch
   cap, which left it at half the page here. */
.page__cols--directory .links,
.page__cols--directory .docs {
  max-width: none;
}

.page__cols--directory .gallery {
  columns: 4 14rem;
}

/* A resource's logo or poster: small and on the left, at about 16% of the
   content width.

   18rem, not the 34 of `.shot--inset`: at 34rem the four vertical movie
   posters measured 851px tall EACH, a whole screen per movie on a page that
   is a listing. At 18rem the poster is about 430px and the block reads as a
   directory entry. */
.page__cols--directory .shot--inset {
  margin-block: var(--space-l) var(--space-xs);
  max-width: 18rem;
}

/* A large image crosses the full width, but with its height capped.

   The cap goes on HEIGHT, not width, because these two pages hold two
   different things: the VCRLI promotional piece on `/vaac` is 1400x753 and at
   full width gives 626px of height, which is fine; the site capture on
   `/resources` is 1400x1306 and gave 1085px, a whole screen of scroll for a
   screenshot. With `max-height` the second drops to 640 and the first is
   untouched, and neither is cropped: only scaled in proportion. */
.page__cols--directory .shot:not(.shot--inset) {
  max-width: none;
}

.page__cols--directory .shot:not(.shot--inset) img {
  max-height: 40rem;
}

/* --- a link inside a heading -----------------------------------------------
   On `/resources` and `/vaac` each resource's name IS a link to its site, so
   the page showed twelve brand-blue underlined headings competing with each
   other and with the one button that should draw attention.

   The heading reads as a heading: it inherits the ink. That it is also a link
   is signalled by a thin underline, offset from the baseline, which thickens
   on hover. No information is lost: the underline remains and focus stays
   visible.

   Specificity is computed: `body.daybreak a:not(.btn)` is (0,2,2) because
   `:not()` takes the specificity of its argument, the same trap documented
   twice above. With the `h2`/`h3` in front this is (0,2,3) and wins.
   ------------------------------------------------------------------------ */
body.daybreak :is(h2, h3) > a:not(.btn),
body.daybreak :is(h2, h3) > strong > a:not(.btn) {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--sun-deep);
  transition: text-decoration-thickness 0.18s var(--ease),
              text-decoration-color 0.18s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  body.daybreak :is(h2, h3) > a:not(.btn):hover,
  body.daybreak :is(h2, h3) > strong > a:not(.btn):hover {
    text-decoration-thickness: 3px;
    text-decoration-color: var(--sun);
  }
}

/* --- article family: the remaining interior pages --------------------------
   The 17 that were left on the single-column mould with the 68ch cap on the
   COLUMN. Measured on the deployed site at 1440px: the column was 755px of
   the shell's 1248, 40% of the page empty on the right.

   The layouts compose the same way: blocks cross the container width, the
   large image too, the small one stays small and on the left. The cap moves
   from the column to the prose blocks, where it makes sense: a paragraph at
   1248px is 127 characters per line.
   ------------------------------------------------------------------------ */

.page__cols--article .page__col--wide {
  max-width: none;
}

.page__cols--article .page__col--wide > p,
.page__cols--article .page__col--wide > h2,
.page__cols--article .page__col--wide > h3,
.page__cols--article .page__col--wide > ol,
.page__cols--article .page__col--wide > ul:not(.links):not(.gallery):not(.docs):not(.people):not(.page__children):not(.cards) {
  max-width: var(--medida-bloque);
}

/* What the layout draws crossing the page. `.links` and `.docs` carried their
   own 68ch cap, which left them at half the page here. */
.page__cols--article .links,
.page__cols--article .docs,
.page__cols--article .gallery,
.page__cols--article .shot:not(.shot--inset) {
  max-width: none;
}

/* As in the directory family: cap the height, not the width, so a square
   image does not take a whole screen. */
.page__cols--article .shot:not(.shot--inset) img {
  max-height: 40rem;
}

/* A hub's subpage list is the only way into the level-2 pages, so it breathes
   more than an ordinary list. */
.page__cols--article .page__children {
  max-width: 60ch;
}

/* --- sectionnav: section navigation, in the rail ---------------------------
   It fills the right third that pure-prose pages left empty (38% of the width
   measured at 1440px) and fixes a real navigation hole: the top menu only
   reaches the six hubs, so from `/foundation-staff` there was no way to
   `/programs-and-activities` without going back to the hub.

   Same grammar as `.facts` and `.docs`: hairlines between items, no box
   around. The label on top with the ink rule the staff-page sections already
   use.
   ------------------------------------------------------------------------ */

.sectionnav {
  position: sticky;
  /* below the sticky menu, which measures --masthead-h */
  top: calc(var(--masthead-h, 76px) + var(--space-m));
}

html body.daybreak .sectionnav__head {
  margin: 0;
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

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

.sectionnav__item + .sectionnav__item {
  border-top: var(--hairline-ink);
}

/* Specificity is computed: `body.daybreak a:not(.btn)` is (0,2,2) because
   `:not()` takes the specificity of its argument. This is (0,3,2). */
body.daybreak .sectionnav__item a:not(.btn) {
  display: block;
  padding-block: var(--space-s);
  color: var(--ink-soft);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.18s var(--ease), padding-left 0.18s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  body.daybreak .sectionnav__item a:not(.btn):hover {
    color: var(--ink);
    padding-left: 0.35rem;
  }
}

/* The current page: full ink with the gold mark at the side, which is how the
   system flags the active item in the top menu. */
body.daybreak .sectionnav__item a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0.2rem 0 0 var(--sun-deep);
  padding-left: 0.7rem;
}

/* The section tree, as in the menu: a page can hang off another
   (`.sectionnav__sub`) or off a group label that is not a link
   (`.sectionnav__label`, the same as the menu's `masthead__label`). Children
   are indented one step, with the same hairline rhythm as the level above.
   The current-page mark stays flush with the left edge. */
.sectionnav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sectionnav__sub > .sectionnav__item:first-child {
  border-top: var(--hairline-ink);
}

html body.daybreak .sectionnav__label {
  display: block;
  padding-block: var(--space-s) var(--space-2xs);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-soft);
}

body.daybreak .sectionnav__sub .sectionnav__item a:not(.btn) {
  padding-left: var(--space-s);
}

@media (hover: hover) and (pointer: fine) {
  body.daybreak .sectionnav__sub .sectionnav__item a:not(.btn):hover {
    padding-left: calc(var(--space-s) + 0.35rem);
  }
}

body.daybreak .sectionnav__sub .sectionnav__item a[aria-current="page"] {
  padding-left: calc(var(--space-s) + 0.7rem);
}

/* On phones the rail drops below the body and stops being sticky: pinned at
   the top it would cover the text being read. */
@media (max-width: 63rem) {
  .sectionnav {
    position: static;
    margin-top: var(--space-xl);
  }
}

/* --- sectionnav--tira: the same navigation, at the foot of the body --------
   For staff and directory pages, where the width is already used by the
   entries, galleries and link lists. With the side rail a person's entry went
   from 1163px to 662 and the biography compressed again.

   At the foot and horizontal: siblings are still reachable without taking
   width from the content.
   ------------------------------------------------------------------------ */

.sectionnav--tira {
  position: static;
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 2px solid var(--ink);
}

.sectionnav--tira .sectionnav__head {
  border-bottom: 0;
  padding-bottom: var(--space-xs);
}

.sectionnav--tira .sectionnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-l);
}

/* In the strip the items sit side by side, so the top hairline would leave a
   stray line over each. */
.sectionnav--tira .sectionnav__item + .sectionnav__item {
  border-top: 0;
}

body.daybreak .sectionnav--tira .sectionnav__item a:not(.btn) {
  padding-block: var(--space-xs);
}

@media (max-width: 52rem) {
  /* On phones it is a stack with hairlines again: four long names in a row
     make a staircase of stray words. */
  .sectionnav--tira .sectionnav__list { display: block; }
  .sectionnav--tira .sectionnav__item + .sectionnav__item {
    border-top: var(--hairline-ink);
  }
  body.daybreak .sectionnav--tira .sectionnav__item a:not(.btn) {
    padding-block: var(--space-s);
  }
}

/* --- declarations that were not taking effect ------------------------------
   In each case the rule was written and live in the file but lost the cascade
   to a more specific selector, so the effect was never seen. They are
   repeated here with the needed specificity, at the end of the file, instead
   of touching the originals: each documents why it loses.
   ------------------------------------------------------------------------ */

/* 1. The navigation strip at the foot. Its `border-bottom: 0` lost to `html
   body.daybreak .sectionnav__head`, so the label kept the bottom rule on top
   of the strip's own: two parallel lines. */
html body.daybreak .sectionnav--tira .sectionnav__head {
  border-bottom: 0;
  padding-bottom: var(--space-xs);
}

/* 2. The Light weight of the body standfirst. `.page__standfirst` asked for
   it, but standfirsts live inside `.page__col--wide`, where the column
   selector sets 400. It is the weight contrast of the head: heavy headline
   against light standfirst. */
html body.daybreak .page__col--wide > .page__standfirst {
  font-weight: var(--wght-lede);
}

/* --- cards: the card grid --------------------------------------------------
   Breaks up the vertical wall of text. `/research` had 19 headings at the
   same level, 2,454 words and a single image, and was impossible to scan: in
   the source four of those headings are sections and fifteen are projects
   hanging off two of them.

   Two columns with a hairline above each card, the grammar `.facts`, `.docs`,
   `.links` and the events archive already use: rules between items, never a
   box around each. The card is not cropped and offers no "read more": the
   full text fits.
   ------------------------------------------------------------------------ */

.cards {
  list-style: none;
  margin: var(--space-l) 0 var(--space-2xl);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-2xl);
}

.card {
  padding-block: var(--space-m);
  border-top: var(--hairline-ink);
}

html body.daybreak .card__name {
  margin: 0 0 var(--space-xs);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

html body.daybreak .card__text {
  margin: 0;
  /* the reading measure inside a grid column: narrower than the body's,
     because the column already is */
  max-width: 46ch;
  color: var(--ink-soft);
  line-height: 1.6;
}

html body.daybreak .card__text + .card__text {
  margin-top: var(--space-s);
}

/* The grid uses the width, not a paragraph's measure: that is what takes it
   out of the vertical tube. Without this the `--medida-bloque` cap would
   leave it in a narrow column. */
.page__cols--article .cards,
.page__cols--directory .cards,
.page__cols--people .cards {
  max-width: none;
}

/* On phones, a single column and the hairline still separates. */
@media (max-width: 52rem) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* --- terms: the glossary ---------------------------------------------------
   A variant of the figures component (`.facts`), not new vocabulary: the same
   `dl` with hairlines between items. What changes is that the datum is a
   definition, not a figure, so the `dd` is set at reading size instead of
   figure-body size.

   Two columns: term on the left, definition on the right. In running text,
   the four "Key Terms" definitions were 75 consecutive words impossible to
   consult.
   ------------------------------------------------------------------------ */

.terms {
  margin: var(--space-l) 0 var(--space-2xl);
  max-width: none;
}

.terms__item {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--space-xs) var(--space-l);
  padding-block: var(--space-s);
  border-top: var(--hairline-ink);
}

.terms__item:last-child { border-bottom: var(--hairline-ink); }

html body.daybreak .terms dt {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--step-0);
}

html body.daybreak .terms dd {
  margin: 0;
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: 1.6;
}

@media (max-width: 52rem) {
  .terms__item { grid-template-columns: minmax(0, 1fr); }
}

/* --- full width when there is no side rail ---------------------------------
   Pages that carry the navigation at the foot already use the full width,
   because their container does not reserve the second column. This rule
   covers what was missing: blocks that, inside those pages, were still capped
   at a paragraph's measure though they do not need it, and components that
   want to cross the whole page.
   ------------------------------------------------------------------------ */

.page__cols--single .terms,
.page__cols--article .terms,
.page__cols--directory .terms,
.page__cols--people .terms {
  max-width: none;
}

/* --- acc: the accordion (discarded) ----------------------------------------
   An accordion (`<details>/<summary>`) for long series was tried and replaced
   by tabs. Its rules were removed so no CSS is left that paints nothing; the
   component now lives in `.tabs`, below.
   ------------------------------------------------------------------------ */

/* --- the card grid, in the body column -------------------------------------
   With the rail in the right column the body measures 662px, so two cards per
   row would be 283px each. A single column with hairlines: it is a list,
   which is what fits.
   ------------------------------------------------------------------------ */
.cards {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* --- tabs: the tab list on the right ---------------------------------------
   The tab list is a column to the right of the panel, with the same grammar
   as `.sectionnav`: hairlines between items, no box, and the active one in
   full ink with the gold bar at the side.

   Width reasoning: the body measures 662px with the section rail on the
   right, so a 12rem list leaves the panel at 446px, 45 characters per line,
   the edge of the reading range. That is why the list is as narrow as allows
   a long title to wrap onto several lines, as the rail does with "Virtual
   Support Groups".
   ------------------------------------------------------------------------ */

.tabs {
  margin: var(--space-l) 0 var(--space-2xl);
  display: grid;
  /* 18rem for the list, not 12. At 12 there was a dead gap of 258px between
     panel and list: the panel was capped at the reading measure (672px)
     inside a 930 cell, so the `1fr` had spare room and the space gathered in
     the middle. The wider list also keeps long titles at two lines instead of
     four. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: var(--space-l);
  align-items: start;
}

/* The list goes on the right with `grid-column`, not `order` or `float`: in
   the DOM it comes BEFORE the panels, which is what the tabs pattern asks
   (the tablist is announced first and from there you reach the panel), and
   the tab order matches.

   All panels share cell 1/1 and only one is not `hidden`, so the block height
   is set by the open panel. */
.tabs__list {
  grid-column: 2;
  grid-row: 1;
  display: block;
  padding: 0;
  border-bottom: 0;
  border-top: 2px solid var(--ink);
}

/* The tab carries a chevron: without it the list read as an index of links
   and nothing said that pressing changes the panel next to it.

   The chevron points LEFT, toward the panel, not right: it does not go to
   another page, it brings content to the one beside it. */
html body.daybreak .tabs__tab {
  display: grid;
  grid-template-columns: 0.6rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-xs);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-s) 0;
  border: 0;
  border-bottom: var(--hairline-ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.tabs__tab::before {
  content: '';
  width: 0.42rem;
  height: 0.42rem;
  margin-top: 0.4em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  html body.daybreak .tabs__tab:hover {
    color: var(--ink);
    background: color-mix(in oklab, var(--paper-1) 60%, transparent);
  }
}

/* The active one: faint background, the rail's gold bar and the chevron in
   full gold. Three signals, because a single one (letter weight) is mistaken
   for emphasis and does not say "this is the open one". */
html body.daybreak .tabs__tab[aria-selected='true'] {
  color: var(--ink);
  font-weight: 700;
  background: var(--paper-1);
  box-shadow: inset 0.2rem 0 0 var(--sun-deep);
  padding-left: 0.7rem;
  padding-right: var(--space-xs);
}

.tabs__tab[aria-selected='true']::before {
  color: var(--sun-deep);
  opacity: 1;
  transform: rotate(45deg) scale(1.1);
}

@media (hover: hover) and (pointer: fine) {
  .tabs__tab:hover::before { opacity: 1; transform: rotate(45deg) translate(-1px, 1px); }
}

.tabs__tab:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: var(--radius-tight);
}

.tabs__panel {
  grid-column: 1;
  grid-row: 1;
  padding-top: 0;
  /* No cap: the panel fills its cell and leaves no gap against the list. Goes
     with prose using the full width. */
  max-width: none;
}

html body.daybreak .tabs__name {
  margin: 0 0 var(--space-s);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

html body.daybreak .tabs__panel p {
  margin: 0 0 var(--space-s);
  color: var(--ink-soft);
  line-height: 1.65;
}

html body.daybreak .tabs__panel p:last-child { margin-bottom: 0; }

/* On phones there are no two columns: the list on top and the panel below. */
@media (max-width: 52rem) {
  .tabs { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
  .tabs__list { grid-column: 1; grid-row: 1; }
  .tabs__panel { grid-column: 1; grid-row: 2; }
}

/* --- the rail shares space ONLY with the start of the page -----------------
   It used to be a two-column grid from top to bottom, so ALL the content
   stayed at 662px even when the rail had ended 2,000px earlier: on
   `/research`, "Our Research Lab" and its paragraph came out narrow with half
   a page of white beside them.

   With the rail floated right, the content wraps around it while it lasts and
   widens as soon as it ends. It is the only CSS mechanism that does this by
   itself, without knowing in advance how many blocks fit beside it.

   What widens and what does not:   · headings, components (tabs, cards,
   galleries, glossary, downloads,     people entries) -> full width   ·
   paragraphs -> capped at the reading measure, because at 1163px they
   would be 118 characters per line
   ------------------------------------------------------------------------ */

@media (min-width: 63.0625rem) {
  .page__cols:not(.page__cols--single) {
    display: block;
  }

  /* On /events the wide column has no content of its own (the page is just
     title and collection). With nothing beside the floated rail,
     `.page__cols` measures 0, the collection's top margin collapses through
     it and drags the float: the rail dropped 96px. `flow-root` contains the
     float. Only in this range, the only one with a float: below it,
     containing the rail prevents its own margin from collapsing and pushes it
     down. */
  .page__cols:not(.page__cols--single):not(:has(> .page__col--wide > *)) {
    display: flow-root;
  }

  /* `> .page__col--narrow` alone, without a tag name: on `/what-is-als` the
     rail is an `<aside>` (it carries the disease facts, not navigation) and a
     `div` selector left it out. */
  .page__cols:not(.page__cols--single) > .page__col--narrow {
    /* The rail goes ABOVE the prose, or its links cannot be clicked.

       Measured on the deployed site: 29 of the 104 rail links, spread over 13
       of 22 pages, did not receive the click.

       The cause is the full width. A block next to a float does NOT narrow:
       the text lines shorten while the block's BOX keeps extending under the
       float. With `max-width` removed from paragraphs and headings, their
       boxes covered the rail area, and since they come AFTER in the DOM and
       nothing declared stacking, they took the click. It looked right and
       could not be used.

       `z-index` needs a `position`, hence the `relative`. */
    position: relative;
    z-index: 1;
    float: right;
    width: 34%;
    margin-left: clamp(2rem, 1rem + 4vw, 5rem);
    margin-bottom: var(--space-l);
  }

  .page__cols:not(.page__cols--single) > .page__col--wide {
    max-width: none;
  }

  /* Headings cross the page: "Our Research Lab" and "Basic Research" were
     boxed into the column with half a page of white beside them. The family
     rule (`.page__cols--article ... > h2`) capped them, and this rule has to
     override it. */
  .page__cols:not(.page__cols--single) > .page__col--wide > h2,
  .page__cols:not(.page__cols--single) > .page__col--wide > h3 {
    max-width: none;
  }

  /* All prose at full width, no cap.

     THE COST, measured and worth keeping in mind: a paragraph that lands
     BELOW the rail reaches 1163px, about 118 characters per line, where the
     maximum of the comfortable reading range is 75. Those beside the rail
     narrow to 694px (70 characters) because the float pushes them.

     Two typographic columns were tried to get width and measure at once, and
     they do NOT work in this layout: the opening paragraphs sit beside the
     rail with 694px available, so split they gave 30 characters per column.
     And CSS cannot query whether a block landed beside the float or below it,
     so there is no way to apply the columns only to the ones below.

     It stays this way as an explicit design decision. If reading proves
     uncomfortable, the way out is an intermediate cap (900px is 91
     characters) or shortening the rail. */
  .page__cols:not(.page__cols--single) > .page__col--wide > p,
  .page__cols:not(.page__cols--single) > .page__col--wide > ul:not(.cards):not(.people):not(.gallery):not(.links):not(.docs),
  .page__cols:not(.page__cols--single) > .page__col--wide > ol {
    max-width: none;
  }

  /* Every block with a BACKGROUND, BORDER or hairline has to respect the
     float.

     A normal block adjacent to a float does NOT narrow: its box extends under
     the float and only the text lines inside shorten. With loose text this
     goes unnoticed, but as soon as the block paints something (the hairlines
     of the downloads or the glossary) that is drawn UNDER the rail and looks
     overlapped (on `/what-is-als` a grey block covered the 10% figure).

     `display: flow-root` creates its own formatting context, and a context
     cannot overlap a float: the block narrows beside the rail and recovers
     full width below, which is exactly the behaviour wanted. */
  .page__cols:not(.page__cols--single) > .page__col--wide > .docs,
  .page__cols:not(.page__cols--single) > .page__col--wide > .links,
  .page__cols:not(.page__cols--single) > .page__col--wide > .terms,
  .page__cols:not(.page__cols--single) > .page__col--wide > .cards,
  .page__cols:not(.page__cols--single) > .page__col--wide > .resources,
  .page__cols:not(.page__cols--single) > .page__col--wide > .people,
  .page__cols:not(.page__cols--single) > .page__col--wide > .evcoll,
  .page__cols:not(.page__cols--single) > .page__col--wide > .evarchive,
  .page__cols:not(.page__cols--single) > .page__col--wide > figure,
  /* The staff pages' h2s carry an ink rule on top (the role heading), and
     that line was also drawn under the rail. */
  .page__cols--people > .page__col--wide > h2 {
    display: flow-root;
  }

  /* `.cards`, `.people` and `.evcoll` are grids: `grid` already creates its
     own context, so they get their display back after the rule above. */
  .page__cols:not(.page__cols--single) > .page__col--wide > .cards,
  .page__cols:not(.page__cols--single) > .page__col--wide > .resources,
  .page__cols:not(.page__cols--single) > .page__col--wide > .links--chips,
  .page__cols:not(.page__cols--single) > .page__col--wide > .evcoll {
    display: grid;
  }

  .page__cols:not(.page__cols--single) > .page__col--wide > .terms > .terms__item,
  .page__cols:not(.page__cols--single) > .page__col--wide > .people > .person {
    display: grid;
  }

  /* A component that establishes its own context does not overlap the float:
     it sits beside it if it fits, and below if not. `clear: right` on those
     that must start clean keeps them from being wedged into the gap. */
  .page__cols:not(.page__cols--single) > .page__col--wide > .tabs,
  .page__cols:not(.page__cols--single) > .page__col--wide > .people,
  .page__cols:not(.page__cols--single) > .page__col--wide > .gallery,
  .page__cols:not(.page__cols--single) > .page__col--wide > .evcoll {
    clear: right;
  }
}

/* --- destacado: the boxed paragraph ----------------------------------------
   A paragraph taken out of the body text and put in a box so it is not missed
   (used for the closing sentence of `/about-the-foundation`).

   Gold background with ink on top, the pair the system uses for what has to
   be seen (the page head, the donate button). No quotation marks or italics:
   it is not a quote, it is a statement.

   `flow-root` for the same reason as the other blocks with background:
   otherwise the box is drawn under the floated rail.
   ------------------------------------------------------------------------ */

html body.daybreak .destacado {
  display: flow-root;
  margin: var(--space-xl) 0;
  padding: var(--space-m) var(--space-l);
  background: var(--sun);
  color: var(--ink);
  border-radius: var(--radius-card);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.45;
  /* The system's signature chamfer, the same as the photographs. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--plate-chamfer)),
                     calc(100% - var(--plate-chamfer)) 100%, 0 100%);
}

html body.daybreak .destacado strong {
  font-weight: 700;
}

/* --- resources: the external resource, with its name and where it leads ----
   The case is `/clinical-trials`: eight third-party organisations, each with
   a linked name and a sentence saying what it does. They came as section-size
   headings, so the name NEALS weighed the same as the page title.

   Three things this card does that `.cards` does not:

   1. The destination is off-site, and the card says so: the host of the
   `href` itself, with the exit arrow. On a page sending visitors to eight
   different sites, knowing where you are going before pressing is not
   decoration. 2. The whole card is the target (`::after` stretched over it),
   not the three words of the name. The text stays selectable because the
   layer goes above the background, not the content. 3. Two columns: they are
   short cards and in a single column the page went back to the vertical tube.
   ------------------------------------------------------------------------ */

.resources {
  clear: right;
  list-style: none;
  margin: var(--space-l) 0 var(--space-2xl);
  padding: 0;
  display: grid;
  /* One column until two really fit. `minmax(min(24rem, 100%), 1fr)`, the
     usual idiom, did NOT work here: measured at 390px it gave a single 384px
     column inside a 342 container and the page overflowed 303px horizontally,
     with all eight cards off-screen. The explicit threshold does not depend
     on how the browser resolves `min()` inside `minmax()`. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
}

@media (min-width: 48rem) {
  .resources {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  }
}

/* The first batch of cards on a page that starts with them
   (`/clinical-trials`: title and eight cards, no prose). The whole grid with
   `clear: right` dropped below the floated rail and left about 300px of white
   under the title; without `clear` it stayed narrow, at the width of the gap,
   for its full height. So the list is split in two (by the generator): the
   first, with a few cards, goes BESIDE the rail and the second, which
   follows, falls below at full width. */
.resources--arranque {
  clear: none;
  margin-bottom: var(--space-m);
}

.resources--arranque + .resources {
  margin-top: 0;
}

/* The grid uses the page width, not a paragraph's measure. Same reason as in
   `.cards`: with the `--medida-bloque` cap it would end up in a narrow
   column. */
.page__cols--article .resources,
.page__cols--directory .resources,
.page__cols--single .resources,
.page__cols--people .resources {
  max-width: none;
}

.resource {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-m);
  /* The system panel, like the `.shortcut` mini cards: colour step, card
     radius, NO border and NO shadow. A bordered card is banned by the system,
     and the chamfer belongs to PHOTOGRAPHS ("photographs cut into a
     chevron"), not to text panels. */
  background: var(--paper-1);
  border-radius: var(--radius-card);
  transition: background-color 0.2s var(--ease);
}

html body.daybreak .resource__name {
  margin: 0;
  /* One step below the `.cards` card title: this is a third party's name, not
     a title of the foundation. */
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
}

html body.daybreak .resource__name.resource__name > a.resource__link {
  color: inherit;
  text-decoration-line: none;
  background-image: none;
}

/* The target is the whole card. It sits over the background and under the
   text, so the paragraph can still be selected and copied. */
.resource__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

html body.daybreak .resource__text {
  margin: 0;
  max-width: 46ch;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.6;
}

html body.daybreak .resource__text + .resource__text {
  margin-top: var(--space-2xs);
}

html body.daybreak .resource__host {
  margin: auto 0 0;
  padding-top: var(--space-s);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--step--2);
  letter-spacing: 0.02em;
  color: var(--ink-dim, var(--ink-soft));
}

/* The exit arrow, drawn with borders: a typographic character changes shape
   with the font, and an SVG per card is eight copies of the same path. */
.resource__icon {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.05rem, 0.05rem);
}

@media (hover: hover) and (pointer: fine) {
  /* A colour step, which is how a surface responds in a system without
     shadows or borders. */
  .resource:hover {
    background: var(--paper-2);
  }

  html body.daybreak .resource:hover .resource__name.resource__name > a.resource__link {
    text-decoration-line: underline;
    text-decoration-color: var(--sun);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
}

/* Focus surrounds the card, not the three words of the name: the real target
   is the card, and a ring around the text would misrepresent what is about to
   be pressed. */
.resource:focus-within {
  /* The same ring as the rest of the site on a light page: `--brand-blue`,
     which `body.daybreak :focus-visible` already uses. Not a separate blue. */
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
}

.resource__link:focus-visible {
  outline: none;
}

/* --- links--chips: the date index ------------------------------------------
   `/archived-newsletters` has 89 newsletters whose whole label is a month
   ("Jan 2023", "Oct/Nov 2023"). With a normal `.links` that gives 89
   full-width rows, each with two words and 1,100px of white on the right, and
   the page measured 6,446px tall. A date index is not a list of resources
   with descriptions: it reads as a grid, like a calendar.

   The chip stays 44px tall, the touch minimum, and at 9rem wide the long
   labels ("Winter '15/6") fit without wrapping.
   ------------------------------------------------------------------------ */

.links--chips {
  clear: right;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-2xs);
}

.links--chips .links__item {
  border-top: 0;
}

.links--chips .links__item:last-child { border-bottom: 0; }

html body.daybreak .links--chips a.links__link:not(.btn) {
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-s);
  font-size: var(--step--1);
  font-weight: 500;
  text-align: center;
  /* No border and a pill, which is what the system reserves for date badges,
     and these labels are dates. The event date badge DOES carry a border, but
     for a measured reason that does not apply here: it sits on the flyers and
     must cut against any background. These sit on paper. */
  background: var(--paper-1);
  border-radius: var(--radius-pill);
  transition: background 0.18s var(--ease);
}

/* The `.links` arrow is superfluous on a two-word chip: 89 identical arrows
   pointing to the same thing. */
body.daybreak .links--chips a.links__link:not(.btn)::after {
  content: none;
}

@media (hover: hover) and (pointer: fine) {
  html body.daybreak .links--chips a.links__link:not(.btn):hover {
    background: var(--paper-2);
  }
}

/* --- shortcuts: the shortcuts at the start of a page -----------------------
   Shortcut tiles for `/research`.

   MINI CARDS, and the form is set by the system. Two approaches fail:

   1. Boxes with cream background, 1px BORDER and chamfer: the system bans
   bordered cards (flat by construction: no shadows anywhere, no bordered
   cards). 2. A row with hairlines, no box: correct by the letter of the
   system but wrong anyway, since it is EXACTLY the grammar of the "In this
   section" rail, which sits beside it on the same screen.

   The system does not ban the card, it bans the BORDER. Its panel is "light
   grey background, --radius-card (14px), no border, no shadow". These are
   that panel in small: colour step, card radius, no border and no shadow.
   They differ from the rail, which is hairlines without background.
   ------------------------------------------------------------------------ */

.shortcuts {
  display: grid;
  /* As many columns as shortcuts: with `auto-fit` and a fixed minimum, at
     820px there were FOUR columns for three shortcuts and the third had a gap
     beside it. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-s);
  margin: var(--space-l) 0 var(--space-xl);
  max-width: none;
}

/* Stacked when each shortcut would drop below about 11rem: under that the
   label wraps onto three lines and the row stops reading as a row. */
@media (max-width: 34rem) {
  .shortcuts { grid-auto-flow: row; }
}

/* Opening the column carries no top margin: the rail aligns with the first
   child, so that margin pushed the whole block 40px lower than on the other
   pages. */
.page__col--wide > .shortcuts:first-child { margin-top: 0; }

.shortcut {
  /* The chevron goes in ITS OWN COLUMN, on the right and centred, not stuck
     to the end of the label. Next to the text, the line break took it: in
     "Clinical Research" the arrow fell alone onto a second line, and across
     the three cards they sat at three different heights. On the right it is
     also the language the site already uses in `.links`, where the chevron
     marks the destination. */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--space-xs, 0.5rem);
  padding: var(--space-s);
  border-radius: var(--radius-card);
  background: var(--paper-1);
  transition: background-color 0.2s var(--ease);
}

html body.daybreak a.shortcut:not(.btn) {
  text-decoration: none;
  color: var(--ink);
}

html body.daybreak .shortcut__name {
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  /* Distributes the words across the lines instead of leaving a single one
     dangling. */
  text-wrap: balance;
}

/* The arrow sits next to the name and shifts on hover: the same grammar as
   the `.links` chevron, without spending a column on an icon. */
html body.daybreak .shortcut::after {
  content: '\203A';
  font-size: var(--step-1);
  line-height: 1;
  color: var(--sun-deep, currentColor);
  transition: transform 0.2s var(--ease-out);
}

html body.daybreak .shortcut__note {
  grid-column: 1;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Hover goes up one colour step, which is how a system without shadows or
   borders responds. */
@media (hover: hover) and (pointer: fine) {
  html body.daybreak a.shortcut:not(.btn):hover {
    background: var(--paper-2, oklch(0.99 0.002 262));
  }

  html body.daybreak a.shortcut:not(.btn):hover::after {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.daybreak .shortcut::after { transition: none; }
}

/* --- board-of-directors: people without portraits and name lists -----------
   The source has no photos for the board: an entry without `.person__shot`
   takes the full width instead of being enclosed in the portrait column. Name
   lists without biography (Patient Advisory Council, Honorary Board) go in a
   column grid.
   ------------------------------------------------------------------------ */
.person:not(:has(.person__shot)) {
  grid-template-columns: minmax(0, 1fr);
}

/* Without portraits the list is prose: it sits beside the rail at the reading
   measure, like paragraphs. The `clear: right` of `.people` sent it below the
   rail and left a gap the height of the rail under the first h2. */
.page__cols:not(.page__cols--single) > .page__col--wide > .people:not(:has(.person__shot)) {
  clear: none;
  max-width: var(--medida-bloque);
}

.namelist {
  list-style: none;
  margin: var(--space-m) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-s) var(--space-l);
}

@media (min-width: 44rem) {
  .namelist {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
}

.namelist .person__name { margin: 0; }

/* --- staff: the entry with portrait wraps around the rail instead of dropping below ---
   `/foundation-staff` and `/research-staff` start with an `h2` and then the
   first entry. `.people` carried `flow-root` and `clear: right`, so the whole
   list dropped below the floated rail and left a gap of 175 to 231px under
   the title (at 1440 and 1024).

   Removing only the `clear` is not enough: an entry in `display: grid` is its
   own formatting context. It sits beside the rail, but at the gap's fixed
   width for its WHOLE height, and a long biography (899px) stayed narrow long
   after the rail ended.

   What does wrap around a float is a normal block: its lines shorten while
   they coincide with the rail and recover width below. So, only in the range
   where the rail floats, the entry stops being a grid: the portrait goes
   absolute in a column reserved by `padding-left` and the text (name and
   paragraphs) flows like any prose. `min-height` keeps a biography shorter
   than the portrait from leaving the portrait overlapping the next entry.
   Below 63.0625rem the rail does not float and the usual grid stays as it
   was.

   Scoped to `.page__cols--people` because the 15rem portrait width belongs to
   that family.
   ------------------------------------------------------------------------ */
@media (min-width: 63.0625rem) {
  .page__cols--people:not(.page__cols--single) > .page__col--wide > .people:has(> .person > .person__shot) {
    display: block;
    clear: none;
  }

  .page__cols--people:not(.page__cols--single) > .page__col--wide > .people > .person:has(> .person__shot) {
    display: block;
    position: relative;
    padding-left: calc(15rem + var(--space-l));
    min-height: calc(15rem * 5 / 4);
  }

  .page__cols--people:not(.page__cols--single) > .page__col--wide > .people > .person + .person:has(> .person__shot) {
    min-height: calc(15rem * 5 / 4 + var(--space-l));
  }

  .page__cols--people:not(.page__cols--single) > .page__col--wide > .people > .person > .person__shot {
    position: absolute;
    top: 0;
    left: 0;
    width: 15rem;
  }

  .page__cols--people:not(.page__cols--single) > .page__col--wide > .people > .person + .person > .person__shot {
    top: var(--space-l);
  }

  /* The date index: the first chip grid starts beside the rail (same cause as
     the gap under "2023 Newsletters", 145px). It is a grid and so keeps the
     width of the gap, but it is two rows of chips per group, so the narrowing
     lasts as long as the rail and the remaining groups already fall below, at
     full width. */
  .page__cols:not(.page__cols--single) > .page__col--wide > .links--chips {
    clear: none;
  }
}

/* --- resources with logo: even rows in a single column ---------------------
   `/programs` and `/our-partners` mix cards with logo (and sometimes host)
   and cards that are just the name. In two columns the grid already equalises
   them per row; in a single column (under 48rem) each card measured its own:
   208, 68, 256 and 116px on `/programs` at 390, an irregular staircase.

   Equalising to the tallest alone leaves 256px cards with one word inside. So
   at that same width the card with logo becomes a row (logo on the left, name
   and host on the right), which brings the tallest to about 128px, and `1fr`
   rows make them all equal. The card without logo takes the full width with
   centred text.

   Scoped to lists with logo: those on `/clinical-trials` are text cards of
   very different length and stay stacked.
   ------------------------------------------------------------------------ */
@media (max-width: 47.9375rem) {
  .resources:has(.resource__media) {
    grid-auto-rows: 1fr;
  }

  .resources:has(.resource__media) > .resource {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
  }

  .resources:has(.resource__media) > .resource:has(> .resource__media) {
    /* Two `1fr` around the name and host: the text block stays centred
       against the logo even when the host is missing. */
    grid-template-columns: 6.5rem minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--space-s);
  }

  .resources:has(.resource__media) .resource__media {
    grid-row: 1 / -1;
    height: 5.5rem;
    margin: 0;
  }

  .resources:has(.resource__media) .resource:has(> .resource__media) > .resource__name {
    grid-column: 2;
    grid-row: 2;
  }

  .resources:has(.resource__media) .resource:has(> .resource__media) > .resource__host {
    grid-column: 2;
    grid-row: 3;
  }

  .resources:has(.resource__media) .resource__host {
    margin: 0;
    padding-top: var(--space-2xs);
    overflow-wrap: anywhere;
  }
}