/* ======================================================================================
   MCRO v2 refresh, 2026-10-16 (champions ribbon 2026-10-17). One file that loads LAST on every page with the header.
   Each block says what it changes. Remove this file and its <link> to undo the visual part of v2.
   ====================================================================================== */

/* The header logo keeps its yellow lines (mcro-logomark-light.png: white M, #fbb52a lines) */
/* Fit the approved longer copy on narrow phones without reducing label legibility. */
@media (max-width: 359px) {
  .home .sea--atlas .mcro-atlas__title { font-size: 2.4rem; }
  .home .group__tag, .page-team .group__tag, .page-advisors .s345__tag {
    letter-spacing: .025em; padding-inline: .55rem;
  }
}

body .brand img.brand__mark { filter: none; }

/* "Home" sits in the menu as a plain item; the bar needs a little less gap to keep one line */
@media (min-width: 1024px) and (max-width: 1279px) { .nav { gap: .75rem; } .nav__link, .nav__btn { font-size: .82rem; } }

/* The lighthouse statement grows until it fills the screen */
.home .beacon__title { font-size: min(5.2vw, 8.2vh); line-height: 1.06; }
@media (max-width: 767px) { .home .beacon__title { font-size: min(10.5vw, 5.4vh); } }
/* The statement ends with two actions side by side: the gold one, then an outline one on the paper.
   The outline button takes 1px off its padding, so both buttons are the same height. */
.home .beacon__ctas { display: flex; flex-wrap: wrap; gap: .75rem; flex-shrink: 0; }
.home .beacon__ctas .hero__btn--line { padding: calc(.875rem - 1px) calc(1.5rem - 1px); border: 1px solid var(--blue); color: var(--blue); }
.home .beacon__ctas .hero__btn--line:hover { transform: translateY(-2px); border-color: var(--ink); color: var(--ink); }

/* Just the three icons in homepage section 3 turn yellow */
body.flow-345 #field .vis__icon { color: var(--light); }

/* Each report card shows its cover on the left. Swap the image file to change a cover. */
#worth .lc { display: grid; grid-template-columns: clamp(7.5rem, 30%, 11rem) minmax(0, 1fr); column-gap: clamp(1.1rem, 2vw, 1.6rem); align-items: stretch; }
#worth .lc__cover { position: relative; z-index: 1; align-self: start; margin: 0; aspect-ratio: 480 / 621; overflow: hidden; border-radius: 10px; background: var(--pale); box-shadow: 0 18px 32px -20px rgba(6, 38, 94, .6); }
#worth .lc__cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
#worth .lc:hover .lc__cover img { transform: scale(1.04); }
#worth .lc__body { display: flex; flex-direction: column; min-width: 0; }
#worth .lc__foot > span:last-child { white-space: nowrap; }   /* the narrower copy column wrapped "Read the report" onto two lines */
@media (max-width: 559px) { #worth .lc { grid-template-columns: minmax(0, 1fr); row-gap: 1.2rem; } #worth .lc__cover { width: 7.5rem; } }

/* A large yellow "Search by theme" button, and the full library link near the top */
.btn--gold { padding: 1.05rem 1.8rem; background: var(--light); color: var(--ink); font-size: 1rem; box-shadow: 0 14px 30px -14px rgba(195, 127, 0, .75); }
.btn--gold:hover { background: var(--ink); color: var(--paper); box-shadow: 0 0 34px rgba(251, 181, 42, .4); }
.btn--gold:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
#library .lib__go { align-items: center; margin-top: 1.4rem; }
#by-theme { scroll-margin-top: 1.5rem; }

/* ======================================================================================
   THE SECTIONS 3-5 LOOK: night sea, a centred head, glass cards that fly in
   and settle, each with a beam of light on its top edge. Cloned from the homepage #field/#found/#audiences.
   ====================================================================================== */
.s345 { position: relative; isolation: isolate; display: grid; align-content: center; min-height: 100vh; min-height: 100svh; overflow: hidden;
  padding: calc(var(--header-h, 76px) + clamp(1.5rem, 4vh, 3rem)) clamp(1.25rem, 5vw, 4rem) clamp(3rem, 8vh, 5.5rem);
  background: linear-gradient(180deg, var(--abyss) 0%, var(--night) 28%, var(--sea) 46%, var(--navy) 60%, var(--night) 100%); color: var(--paper); }
.s345 + .s345 { background: linear-gradient(180deg, var(--night) 0%, var(--navy) 40%, var(--night) 100%); }
.s345::before { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: 75%; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 0%, rgba(251, 181, 42, .11), rgba(251, 181, 42, .03) 45%, transparent 75%); }
.s345--compact { min-height: 0; padding-block: clamp(4rem, 9vh, 6.5rem); }
.s345__inner { width: 100%; max-width: 1180px; margin: 0 auto; }
.s345__head { max-width: 50rem; margin: 0 auto clamp(2.2rem, 5vh, 3.4rem); text-align: center; }
.s345__head .eyebrow { justify-content: center; }
.s345__head .eyebrow::after { content: ""; width: 1.4rem; height: 2px; background: var(--light); }
.s345__title { margin: .9rem 0 0; font-size: clamp(2.6rem, 5vw, 4.9rem); line-height: .95; color: var(--paper); text-wrap: balance; }
/* 2026-10-18: the decorative 01 / 02 numbers are gone, so a head can now start with its title. */
.s345__head > .s345__title:first-child { margin-top: 0; }
.s345__lede { max-width: 44rem; margin: 1.25rem auto 0; font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.55; color: #d3e0ec; }
.s345__lede + .s345__lede { margin-top: .8rem; }
.s345__head .btns { justify-content: center; }
.s345__head:last-child { margin-bottom: 0; }
.s345__card[id] { scroll-margin-top: 1.5rem; }
.s345__note { margin: clamp(1.6rem, 3.5vh, 2.4rem) 0 0; text-align: center; font: 700 .72rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }

/* the cards */
.s345__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 901px) { .s345__cards { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
@media (min-width: 901px) and (max-width: 1180px) { .s345__cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .s345__cards--people { grid-template-columns: minmax(0, 1fr); max-width: 44rem; margin-inline: auto; } }
.s345__card { position: relative; display: flex; flex-direction: column; min-width: 0; text-align: left;
  padding: clamp(1.5rem, 2.4vw, 2.1rem) clamp(1.3rem, 2vw, 1.9rem) clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid rgba(159, 182, 204, .18); border-radius: 18px;
  background: linear-gradient(170deg, rgba(22, 69, 141, .5), rgba(7, 31, 75, .74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 34px 60px -30px rgba(3, 10, 31, .95); color: var(--paper);
  transition: opacity .7s var(--ease), transform 1.1s var(--ease), filter .7s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.s345__card::before { content: ""; position: absolute; top: -1px; left: 14%; right: 14%; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(251, 181, 42, 0), var(--light) 30%, var(--light-soft) 50%, var(--light) 70%, rgba(251, 181, 42, 0));
  box-shadow: 0 0 18px 1px rgba(251, 181, 42, .5); transition: transform .9s var(--ease), opacity .6s var(--ease); transition-delay: calc(.8s + var(--i, 0) * .2s); }
.s345__card::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(85% 55% at 50% 0%, rgba(251, 181, 42, .12), transparent 70%); transition: opacity 1s var(--ease); transition-delay: calc(.95s + var(--i, 0) * .2s); }
.s345__card > * { position: relative; z-index: 1; }
.s345__card :is(h2, h3) { margin: 1.15rem 0 0; font: 600 clamp(1.75rem, 2.3vw, 2.2rem)/1.05 var(--font-display); color: var(--paper); }
.s345__card > :is(h2, h3):first-child { margin-top: 0; }
.s345__card p { margin: .7rem 0 0; font-size: 1rem; line-height: 1.65; color: #c3d3e2; }
.s345__card .btns { margin-top: auto; padding-top: 1.5rem; }
.s345__tag { display: inline-block; align-self: flex-start; margin-top: 1.2rem; padding: .4rem .7rem; border-radius: 999px; background: rgba(251, 181, 42, .1); font: 700 .62rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--light); }

/* the fly-in: refresh.js arms each list, then sets each card as it comes into view. No JS or reduced motion: no fly-in. */
.s345__cards.is-armed > .s345__card:not(.is-set) { opacity: 0; transform: translate(var(--ex, 0px), var(--ey, 90px)) rotate(var(--er, 0deg)) scale(.94); filter: blur(6px); }
.s345__cards.is-armed > .s345__card:not(.is-set)::before { transform: scaleX(0); opacity: 0; }
.s345__cards.is-armed > .s345__card:not(.is-set)::after { opacity: 0; }
.s345__cards.is-arming > .s345__card, .s345__cards.is-arming > .s345__card::before, .s345__cards.is-arming > .s345__card::after { transition: none !important; }
.s345__card:nth-child(3n+1) { --ex: -50px; --ey: 90px; --er: -8deg; }
.s345__card:nth-child(3n+2) { --ex: 0px; --ey: 130px; --er: 5deg; }
.s345__card:nth-child(3n+3) { --ex: 50px; --ey: 90px; --er: -4deg; }
.s345__cards--4 > .s345__card:nth-child(4) { --ex: 70px; --ey: 120px; --er: 6deg; }
.s345__cards--2 > .s345__card:nth-child(2) { --ex: 50px; --ey: 90px; --er: 4deg; }
@media (max-width: 900px) {
  .s345__card:nth-child(odd) { --ex: 0px; --ey: 56px; --er: -2deg; }
  .s345__card:nth-child(even) { --ex: 0px; --ey: 56px; --er: 2deg; }
}

/* buttons on the night sea: gold, as on every dark section (motion.css .sec--sea) */
:is(.s345, .s345__card) .btn--primary { background: var(--light); color: var(--ink); }
:is(.s345, .s345__card) .btn--primary:hover { background: var(--paper); color: var(--ink); }
:is(.s345, .s345__card) :is(.btn--ghost, .btn--ghost-blue) { border: 1px solid rgba(219, 232, 242, .5); background: transparent; color: var(--paper); }
:is(.s345, .s345__card) :is(.btn--ghost, .btn--ghost-blue):hover { border-color: var(--light); color: var(--light); }
:is(.s345, .s345__card) .btn:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }
/* Networks hero: one button to each network. The first is gold (scn.css); the second is an outline on the night sky. */
.page-scn .gi-hero .phero__btns .btn--ghost { border: 1px solid rgba(219, 232, 242, .5); background: transparent; color: var(--paper); }
.page-scn .gi-hero .phero__btns .btn--ghost:hover { border-color: var(--light); color: var(--light); }
.page-scn .gi-hero .phero__btns .btn:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }
/* Footer logo: the light file already has white letters and the yellow wave, as in the header, so it needs no
   white filter (site.css .foot__brand img). Only that file, so the original logo still turns white. */
.foot__brand img[src$="mcro-full-logo-light.png"] { filter: none; }
/* Footer champions: the four agencies link to their own websites, in a new tab. Same colours as the footer menu. */
.foot__champs a { color: inherit; text-decoration: none; }
.foot__champs a:hover { color: var(--light); }
.foot__champs a:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .foot__champs ul { align-items: center; }
  .foot__champs a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* The hero buttons open a network's section; on wide screens it starts right under the header, one full screen. */
@media (min-width: 1101px) { .page-advisors .net[id] { scroll-margin-top: 0; } }

/* Research, "How searching works": six small tiles, one per filter */
.s345__cards--tiles { gap: clamp(.8rem, 1.6vw, 1.2rem); }
@media (max-width: 900px) { .s345__cards--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s345__cards--tiles .s345__card { flex-direction: row; align-items: center; gap: 1rem; padding: 1.15rem 1.3rem; }
.s345__cards--tiles .s345__card :is(h2, h3) { margin: 0; font-size: clamp(1.45rem, 2vw, 1.8rem); }
@media (max-width: 420px) { .s345__cards--tiles .s345__card { flex-direction: column; align-items: flex-start; gap: .7rem; } }

/* Team, "Leadership": one glass card per person, a round photo beside the name */
.s345__who { display: flex; align-items: center; gap: 1rem; }
.s345__avatar { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 4.75rem; height: 4.75rem; overflow: hidden; border-radius: 50%;
  border: 2px solid rgba(251, 181, 42, .55); box-shadow: 0 0 22px rgba(251, 181, 42, .22);
  background: radial-gradient(circle at 68% 26%, rgba(255, 182, 46, .42) 0 8%, transparent 9%), linear-gradient(150deg, #114f99 0%, #08337d 55%, #05102d 100%); }
.s345__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s345__initials { font-size: 2rem; line-height: 1; letter-spacing: -.04em; color: #fff7e3; }
.s345__card .person__name { margin: 0; font-size: clamp(1.6rem, 2.1vw, 2rem); line-height: 1; color: var(--paper); }
.s345__card .person__role { margin: .45rem 0 0; font: 700 .66rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--light); }
.s345__card .person__role + * { margin-top: 0; }
.s345__who + p { margin-top: 1.2rem; }
.s345__card .quote { margin: 1.2rem 0 0; padding-left: 1rem; border-left: 3px solid var(--light); font-size: 1rem; line-height: 1.6; color: var(--paper); }

/* Advisors partners: empty logo slots, ready for the files */
.s345-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 1.2rem; }
.s345-slots > div { display: grid; place-items: center; aspect-ratio: 3 / 2; border: 1px dashed rgba(159, 182, 204, .3); border-radius: 10px; background: rgba(3, 10, 31, .25); }
.s345-slots img { max-width: 70%; max-height: 60%; }
.s345-slots img:not([src]) { display: none; }

/* Contact: the message form sits in the hero, beside the title. It is the same night-glass card as the Get involved
   form (gi.css .gi-scene--tell .form), with light text on the dark sky. */
.page-contact .gi-hero .c-form { position: relative; z-index: 2; width: min(36rem, 46vw); }
.page-contact .c-form .form { position: relative; max-width: none; padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: 18px; background: rgba(5, 16, 45, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .85); isolation: isolate; }
.page-contact .c-form .form::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--gi-ang), rgba(219, 232, 242, .14) 0deg, rgba(251, 181, 42, .95) 36deg, rgba(219, 232, 242, .14) 80deg, rgba(219, 232, 242, .14) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: gi-ang 6s linear infinite; }
.page-contact .c-form .form input, .page-contact .c-form .form select, .page-contact .c-form .form textarea { border-bottom-color: rgba(219, 232, 242, .5); color: var(--paper); }
.page-contact .c-form .form select option { color: var(--body); }
.page-contact .c-form input[type="file"] { color: var(--pale); font-size: .9rem; }
.page-contact .c-form input[type="file"]::file-selector-button { margin-right: .9rem; padding: .55rem 1rem; border: 1px solid rgba(219, 232, 242, .4); border-radius: 999px; background: transparent; color: var(--paper); font: 700 .78rem/1 var(--font-body); cursor: pointer; transition: border-color .2s, color .2s; }
.page-contact .c-form input[type="file"]::file-selector-button:hover { border-color: var(--light); color: var(--light); }
.page-contact .c-form .form .btn { justify-self: start; }
.page-contact .c-form .form .btn--primary { background: var(--light); color: var(--ink); }
.page-contact .c-form .form .btn--primary:hover { background: var(--paper); color: var(--ink); }
.page-contact .c-form .form .btn:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }
.page-contact .c-form .form__done { color: var(--light); }
@media (max-width: 900px) { .page-contact .gi-hero .c-form { width: 100%; } }
.page-contact .gi-scene--s-newsletter .c-social { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(219, 232, 242, .16); }
.page-contact .gi-scene--s-newsletter .c-social h3 { margin: 0; font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: var(--paper); }

/* ======================================================================================
   Champions ribbon (2026-10-17): the founding champions have their own ribbon, just above the footer on
   every page, in a colour that is not the footer's. "Our champions" sits at its start and the logos loop right
   to left. refresh.js (job 5) copies the logo list until it fills the ribbon and sets --shift and --dur. With no
   JS, or with reduced motion, the logos stay still in one centred row. The button pauses the loop (WCAG 2.2.2),
   and so does a hover. Change the colour in --champs-bg.
   Each logo is an <img> from assets/images/champion-*, inside a link to the agency's website (new tab). Its
   style="--h:..." sets its height, so wide and tall logos look the same size. To swap a logo, replace the file
   and keep the width and height attributes true.
   ====================================================================================== */
.champs { --champs-bg: var(--sea-2); --g: clamp(2.2rem, 4.5vw, 4rem); position: relative; padding: clamp(1.2rem, 2.4vw, 1.8rem) var(--gutter);
  background: var(--champs-bg); color: var(--paper); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(3, 10, 31, .4); }
.champs__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(1.2rem, 3vw, 2.6rem); max-width: 1320px; margin: 0 auto; }
.champs__h { display: flex; align-items: center; gap: .6rem; margin: 0; font: 700 .72rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--light); white-space: nowrap; }
.champs__h::before { content: ""; width: 1.4rem; height: 2px; background: var(--light); }
.champs__view { min-width: 0; }
.champs__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.champs__logo { position: relative; display: flex; flex: none; align-items: center; min-height: 3rem; padding: 0 calc(var(--g) / 2); }
.champs__logo img { display: block; height: var(--h, 3rem); width: auto; max-width: none; }
@media (max-width: 599px) { .champs__logo img { height: calc(var(--h, 3rem) * .8); } }
.champs__logo::after { content: ""; position: absolute; top: 50%; right: -.175rem; width: .35rem; height: .35rem; margin-top: -.175rem; border-radius: 50%; background: var(--light); opacity: .6; }
.champs:not(.is-moving) .champs__logo:last-child::after { display: none; }
/* still row below 900px: the logos can wrap, and a dot would hang at the end of a line */
@media (max-width: 899px) { .champs:not(.is-moving) .champs__logo::after { display: none; } .champs:not(.is-moving) .champs__logo img { max-width: 100%; } }

/* the loop: one long strip of copies slides left by exactly one copy, then starts again where it began */
.champs.is-moving .champs__view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.champs.is-moving .champs__track { display: flex; width: max-content; animation: champs-loop var(--dur, 30s) linear infinite; }
.champs.is-moving .champs__row { flex: none; flex-wrap: nowrap; }
.champs.is-paused .champs__track, .champs.is-off .champs__track, .champs.is-moving .champs__view:hover .champs__track { animation-play-state: paused; }
@keyframes champs-loop { to { transform: translate3d(calc(-1 * var(--shift, 0px)), 0, 0); } }
/* each logo is a link, 44px tall to tap. The strip clips its edges, so it keeps 6px of room for the focus ring.
   A keyboard visitor on a link holds the strip still and unfaded, and it scrolls so the link is in full view
   (refresh.js job 5 sets .is-held and clears it when focus leaves). A mouse click does not hold it; the hover
   pause does. */
.champs__logo a { display: flex; align-items: center; min-height: 44px; border-radius: 4px; }
.champs__logo a:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }
.champs.is-moving .champs__view { padding-block: 6px; margin-block: -6px; }
.champs.is-held .champs__track { animation: none; }
.champs.is-held .champs__view { -webkit-mask-image: none; mask-image: none; }

/* the pause button: two bars while it moves, a play arrow while it rests */
.champs__pause { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid rgba(219, 232, 242, .45); border-radius: 50%; background: transparent; color: var(--paper); cursor: pointer; transition: color .2s, border-color .2s; }
.champs__pause[hidden] { display: none; }
.champs__pause:hover { border-color: var(--light); color: var(--light); }
.champs__pause:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }
.champs__icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.champs__icon--play { fill: currentColor; stroke-width: 1.5; }
.champs__pause .champs__icon--play, .champs__pause[aria-pressed="true"] .champs__icon--pause { display: none; }
.champs__pause[aria-pressed="true"] .champs__icon--play { display: block; }

/* phones and tablets: the label and the button share the top line, the logos run full width below */
@media (max-width: 899px) {
  .champs__inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h btn" "view view"; row-gap: .9rem; }
  .champs__h { grid-area: h; } .champs__pause { grid-area: btn; } .champs__view { grid-area: view; }
}
@media (prefers-reduced-motion: reduce) { .champs__track { animation: none !important; } }

/* ======================================================================================
   The "On this page" list is larger, and each link carries an arrow that says "click me"
   ====================================================================================== */
.toc { --toc-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.toc a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.toc a::after { content: ""; flex: 0 0 auto; width: .9em; height: .9em; background: currentColor; opacity: .55;
  -webkit-mask: var(--toc-arrow) center / contain no-repeat; mask: var(--toc-arrow) center / contain no-repeat; transition: transform .3s var(--ease-spring), opacity .25s; }
.toc a:hover::after, .toc a:focus-visible::after, .toc a.is-on::after { opacity: 1; transform: translateX(3px); }
@media (min-width: 1101px) {
  .longform { grid-template-columns: 15rem minmax(0, 1fr); }
  .toc__label { font-size: .72rem; }
  .toc a { padding: .5rem 0; font-size: .8rem; }
}
@media (max-width: 1100px) { .toc a { justify-content: flex-start; padding: .45rem 0; font-size: .78rem; } }

/* ======================================================================================
   The M with its yellow lines, glowing. On About and Get involved it sits right of the
   text block; refresh.js sets --mark-h so its top and bottom line up with that block.
   ====================================================================================== */
.hero-mark { position: relative; z-index: 2; justify-self: end; height: var(--mark-h, clamp(16rem, 34vw, 26rem)); aspect-ratio: 536 / 816; pointer-events: none; }
.hero-mark::before { content: ""; position: absolute; left: 50%; top: 17%; width: 125%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(251, 181, 42, .2), rgba(251, 181, 42, .06) 55%, transparent); }
.hero-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-mark__lines { filter: drop-shadow(0 0 10px rgba(251, 181, 42, .7)) drop-shadow(0 0 30px rgba(251, 181, 42, .35)); }
@media (max-width: 900px) { .hero-mark { justify-self: start; height: clamp(8rem, 30vw, 11rem); margin-top: .5rem; } }
/* The M sits a little further right on desktop. The shift stays smaller than the hero's
   right padding at every width, so the M is never cut off. */
@media (min-width: 901px) { .hero-mark { translate: clamp(1rem, 3vw, 3rem) 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-mark__m { animation: mark-rise 1.1s var(--ease) .15s both; }
  .hero-mark__lines, .hero-mark::before { animation: mark-glow 1.4s var(--ease) .55s both; }
}
@keyframes mark-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mark-glow { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* A telescope replaces the eye. It sweeps the sky and catches a star. */
.wi-scope { transform-origin: 24px 27px; animation: wi-sweep 5.2s var(--ease) infinite; }
.wi-glint { transform-origin: 41px 7px; animation: wi-glint 5.2s ease-in-out infinite; }
@keyframes wi-sweep { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 62% { transform: rotate(5deg); } }
@keyframes wi-glint { 0%, 40%, 72%, 100% { opacity: 0; transform: scale(.4); } 52% { opacity: 1; transform: scale(1.15); } 60% { opacity: .9; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .wi-scope, .wi-glint, .hero-mark__m, .hero-mark__lines, .hero-mark::before { animation: none !important; }
  .wi-glint { opacity: 1; }
  .s345__card, .s345__card::before, .s345__card::after, #worth .lc__cover img, .toc a::after { transition: none !important; }
}

/* About (2026-10-18): clearer icons for "How we work" (two gears) and "Give the research a home"
   (a hand giving a coin). Reduced motion in scn.css (".page-scn .gi-ico * { animation: none }") stops both. */
.page-scn .sc-gear-a { transform-origin: 18.5px 19.5px; animation: sc-turn 16s linear infinite; }
.page-scn .sc-gear-b { transform-origin: 31.5px 31.5px; animation: sc-turn 12s linear infinite reverse; }
@keyframes sc-turn { to { rotate: 360deg; } }
.page-scn .sc-drop { animation: sc-drop 3.6s var(--ease, ease) infinite; }
@keyframes sc-drop { 0% { translate: 0 -7px; opacity: 0; } 30%, 82% { translate: 0 0; opacity: 1; } 100% { translate: 0 0; opacity: 0; } }

/* Networks page (2026-10-18): full-screen sections. The hero and every section below it
   are one screen tall under the sticky header, with the content in the middle, so every section is the same size.
   A section with more than one screen of content (a phone, a long list) grows; nothing is cut off. */
.page-advisors .gi-hero { min-height: calc(100vh - var(--header-h, 76px)); min-height: calc(100svh - var(--header-h, 76px)); }
.page-advisors .s345.s345--compact { min-height: calc(100vh - var(--header-h, 76px)); min-height: calc(100svh - var(--header-h, 76px));
  padding-block: clamp(3rem, 8vh, 5.5rem); }

/* ======================================================================================
   Networks page, members and boards (MCRO feedback + Word files, 2026-10-18). Switched off until MCRO says;
   refresh.js job 0 shows them for ?preview=networks or ?preview=members. Each member is a round photo and a
   name; the name opens the bio in one shared dialog. html.net-names (?photos=off) shows names only.
   ====================================================================================== */
.net__people { --gap: clamp(.8rem, 1.6vw, 1.4rem); display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.3rem, 3vh, 2.2rem) var(--gap); margin: 0; padding: 0; list-style: none; }
.net__person { flex: 0 0 calc((100% - 5 * var(--gap)) / 6); min-width: 0; display: flex; }
@media (max-width: 900px) { .net__person { flex-basis: calc((100% - 2 * var(--gap)) / 3); } }
.net__card { display: flex; flex: 1; flex-direction: column; align-items: center; width: 100%; margin: 0; padding: .35rem .2rem .5rem; border: 0; border-radius: 16px;
  background: none; color: var(--paper); font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.net__card:focus-visible { outline: 2px solid var(--light); outline-offset: 4px; }
.net__photo { position: relative; display: block; flex: none; width: min(100%, 8.5rem, 14vh); aspect-ratio: 1; overflow: hidden; border-radius: 50%;
  border: 2px solid rgba(251, 181, 42, .55); box-shadow: 0 0 22px rgba(251, 181, 42, .18), 0 26px 40px -26px rgba(3, 10, 31, .95);
  background: linear-gradient(150deg, #114f99 0%, #08337d 55%, #05102d 100%); transition: transform .5s var(--ease), border-color .3s, box-shadow .4s; }
@media (max-width: 900px) { .net__photo { width: min(100%, 6rem); } }
.net__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.net__name { margin-top: .85rem; font: 600 clamp(1.1rem, 1.45vw, 1.4rem)/1.05 var(--font-display); color: var(--paper); text-wrap: balance; overflow-wrap: anywhere; }
.net__more { margin-top: .4rem; font: 700 .6rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); transition: color .25s; }
.net__card:is(:hover, :focus-visible) .net__photo { transform: translateY(-4px); border-color: var(--light); box-shadow: 0 0 34px rgba(251, 181, 42, .4), 0 30px 44px -26px rgba(3, 10, 31, .95); }
.net__card:hover .net__photo img { transform: scale(1.05); }
.net__card:is(:hover, :focus-visible) .net__more { color: var(--light); }
/* each name rises a moment after the one before it, once the list is on screen */
.net__people.reveal .net__person { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.net__people.reveal.is-in .net__person { opacity: 1; transform: none; }
/* names only: each name sits on its own glass tile */
.net-names .net__photo { display: none; }
.net-names .net__card { justify-content: center; min-height: 6.5rem; padding: 1.1rem .8rem; border: 1px solid rgba(159, 182, 204, .18);
  background: linear-gradient(170deg, rgba(22, 69, 141, .5), rgba(7, 31, 75, .74)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: border-color .3s, transform .4s var(--ease); }
.net-names .net__card:is(:hover, :focus-visible) { border-color: rgba(251, 181, 42, .6); transform: translateY(-3px); }
.net-names .net__name { margin-top: 0; }

/* the boards: two big cards per network. The dashed note is a placeholder until MCRO sends items. */
.s345__card.net-board { min-height: clamp(15rem, 36vh, 21rem); }
.s345__card.net-board > h2 { font-size: clamp(2.1rem, 3.2vw, 3rem); }
.net-board__list { display: grid; gap: 1rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.net-board__list:not(:has(> li)) { display: none; }
.net-board__item { padding-top: 1rem; border-top: 1px solid rgba(219, 232, 242, .14); }
.net-board .net-board__when { margin: 0; font: 700 .66rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--light); }
.net-board .net-board__title { margin: .35rem 0 0; font-size: clamp(1.3rem, 1.7vw, 1.6rem); }
.net-board .net-board__link { display: inline-block; margin-top: .6rem; color: var(--paper); font-weight: 600; text-decoration-color: var(--light); text-underline-offset: .2em; }
.net-board .net-board__empty { margin: 1.3rem 0 0; padding: 1rem 1.1rem; border: 1px dashed rgba(251, 181, 42, .45); border-radius: 12px; background: rgba(3, 10, 31, .3); font-size: .95rem; line-height: 1.55; color: #c3d3e2; }
.net-board__empty b { display: block; margin-bottom: .4rem; font: 700 .62rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--light); }
.net-board__list:has(> li) ~ .net-board__empty { display: none; }
/* 2026-10-18: live, an empty board hides, and a boards section with no item hides too.
   Only ?preview=networks (data-switch="preview") still shows the placeholders. refresh.js adds .is-empty as well. */
.net--boards.is-empty, .net-board.is-empty { display: none; }
.net--boards:not([data-switch="preview"]) .net-board:not(:has(.net-board__item)) { display: none; }
.net--boards:not([data-switch="preview"]):not(:has(.net-board__item)) { display: none; }
.net--boards .s345__head .eyebrow { margin-top: .2rem; }

/* the bio dialog: one for the whole page, filled by refresh.js. Esc, the X, or a click outside closes it. */
html:has(.net-dialog[open]) { overflow: hidden; }
.net-dialog { width: min(40rem, calc(100vw - 2rem)); max-width: none; max-height: min(44rem, calc(100svh - 2rem)); padding: 0; overflow: auto; overscroll-behavior: contain;
  border: 1px solid rgba(159, 182, 204, .22); border-radius: 20px; background: linear-gradient(170deg, #0d2f66 0%, var(--night) 70%); color: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 90px -30px rgba(0, 0, 0, .9); }
.net-dialog::backdrop { background: rgba(3, 10, 31, .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.net-dialog__card { position: relative; padding: clamp(1.5rem, 4vw, 2.5rem); }
.net-dialog__card::before { content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(251, 181, 42, 0), var(--light) 30%, var(--light-soft) 50%, var(--light) 70%, rgba(251, 181, 42, 0)); box-shadow: 0 0 18px 1px rgba(251, 181, 42, .5); }
.net-dialog__close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0;
  border: 1px solid rgba(219, 232, 242, .45); border-radius: 50%; background: transparent; color: var(--paper); cursor: pointer; transition: color .2s, border-color .2s; }
.net-dialog__close:hover { border-color: var(--light); color: var(--light); }
.net-dialog__close:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }
.net-dialog__who { display: flex; align-items: center; gap: 1.2rem; padding-right: 3rem; }
.net-dialog__who .net__photo { width: clamp(5rem, 16vw, 6.5rem); }
.net-dialog__net { margin: 0; font: 700 .66rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--light); }
.net-dialog__name { margin: .35rem 0 0; font: 600 clamp(2rem, 4.4vw, 2.8rem)/1 var(--font-display); color: var(--paper); }
.net-dialog__bio p { margin: 1.1rem 0 0; font-size: 1.05rem; line-height: 1.7; color: #d3e0ec; }
.net-dialog__bio a { color: var(--paper); text-decoration-color: var(--light); text-underline-offset: .2em; }
.net-dialog__bio a:hover { color: var(--light); }
@media (prefers-reduced-motion: no-preference) {
  .net-dialog[open] { animation: net-in .45s var(--ease) both; }
  .net-dialog[open]::backdrop { animation: net-fade .3s ease both; }
}
@keyframes net-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes net-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .net__people.reveal .net__person { opacity: 1; transform: none; transition: none !important; }
  .net__photo, .net__photo img, .net-names .net__card { transition: none !important; }
  .net__card:is(:hover, :focus-visible) .net__photo, .net__card:hover .net__photo img, .net-names .net__card:is(:hover, :focus-visible) { transform: none; }
}
/* 2026-10-18: the numbers are gone from the home page tabs. v3.css is shared with other pages, so the tab
   grid drops its number column here (icon, label, arrow). On phones the icon now sits on the left, above the label. */
:where(.flow-345) .who5__role { grid-template-columns: auto minmax(0, 1fr) auto; }
@media (max-width: 999px) { :where(.flow-345) .who5__icon { margin-left: 0; } }
/* 2026-10-18: the Announcements page, under News and events. One paper card per announcement, newest first,
   the same card as the Policy Briefs. Wide screens: the release on the left, the media contact beside it. Phones: one column. */
.anns { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.ann { position: relative; display: grid; grid-template-columns: minmax(0, 43rem) minmax(14rem, 18rem); grid-template-areas: "head head" "body side";
  justify-content: space-between; column-gap: clamp(1.75rem, 4vw, 3.5rem); padding: clamp(1.4rem, 3.6vw, 3rem);
  border: 1px solid rgba(8, 51, 125, .13); border-radius: 18px; background: linear-gradient(180deg, #fffdf9 0%, #faf7f0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 34px 60px -42px rgba(6, 38, 94, .42), 0 0 0 1px rgba(8, 51, 125, .03); }
.ann::after { content: ""; position: absolute; left: 1.6rem; top: 0; width: 2.4rem; height: 2px; border-radius: 2px; pointer-events: none;
  background: var(--light); box-shadow: 0 0 10px rgba(251, 181, 42, .75), 0 0 22px rgba(251, 181, 42, .35); }
.ann__head { grid-area: head; max-width: 54rem; padding-bottom: clamp(1.3rem, 3vw, 2rem); border-bottom: 1px solid rgba(8, 51, 125, .12); }
.ann__kicker { margin: 0; color: var(--muted); font: 700 .72rem/1.5 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.ann__title { margin: .8rem 0 0; max-width: 26ch; color: var(--blue); font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1; text-wrap: balance; }
.ann__deck { margin: 1rem 0 0; max-width: 46rem; color: #36516b; font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.55; text-wrap: pretty; }
.ann__body { grid-area: body; min-width: 0; padding-top: .4rem; }
.ann__body > p { margin: 1.1rem 0 0; color: var(--body); font-size: 1.05rem; line-height: 1.75; }
.ann__dateline { margin-right: .5em; color: var(--blue); font-weight: 700; letter-spacing: .03em; }
.ann__quote { padding-left: 1.15rem; border-left: 2px solid rgba(8, 51, 125, .2); }
.ann__label { margin: 0; color: var(--blue); font: 700 .7rem/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.ann__will { margin: 1.5rem 0 .4rem; padding: 1.1rem 1.25rem 1.2rem; border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0; background: rgba(219, 232, 242, .42); }
.ann__will ul { margin: .7rem 0 0; padding: 0 0 0 1.1rem; }
.ann__will li { margin: .6rem 0 0; color: var(--body); font-size: 1.02rem; line-height: 1.65; }
.ann__will li::marker { color: var(--blue); }
.ann__will strong { color: var(--blue); }
.ann__contact { grid-area: side; align-self: start; position: sticky; top: 104px; margin-top: 1.5rem; padding: 1.1rem 1.15rem 1.2rem;
  border-top: 2px solid var(--blue); border-radius: 0 0 10px 10px; background: rgba(255, 255, 255, .72); }
.ann__contact p:not(.ann__label) { margin: .6rem 0 0; color: var(--body); font-size: .98rem; line-height: 1.6; overflow-wrap: anywhere; }
.ann__contact a:not(.btn) { color: var(--blue); font-weight: 600; text-underline-offset: .2em; }
.ann__contact a:not(.btn):hover { text-decoration-color: var(--light); }
/* No staff email on the site (2026-10-18): the media contact is a button to the Contact Us form. */
.ann__contact .btn { margin-top: 1rem; }
@media (max-width: 900px) {
  .ann { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "side"; }
  .ann__contact { position: static; margin-top: 1.75rem; }
}

/* ======================================================================================
   2026-10-18: the mobile pass, a review of the whole site on phones.
   Found by a headless phone review of every page at 390 and 320 wide. Each block names the problem it fixes.
   ====================================================================================== */
/* M1. A form is never wider than its card. The longest dropdown option used to set the column width, so on a
       320 phone the Get involved fields ran 52 px off the screen. */
.form, .form__row { grid-template-columns: minmax(0, 1fr); }
.form__row { min-width: 0; }
.form input, .form select, .form textarea { min-width: 0; max-width: 100%; }
@media (max-width: 560px) { .form__grid { grid-template-columns: minmax(0, 1fr); } }

/* M2. The phone menu fits the screen and scrolls inside itself, and the page behind it stays still (refresh.js
       job 7). At 320 x 640 the Donate button sat below the screen with no way to reach it. */
@media (max-width: 1023px) {
  .nav__mobile.is-open { max-height: calc(100vh - var(--header-h, 76px)); max-height: calc(100dvh - var(--header-h, 76px)); overflow-y: auto; overscroll-behavior: contain; }
  .nav__mobile > a:not(.nav__cta) { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .nav__mobile .nav__cta { display: inline-flex; align-items: center; min-height: 44px; }
  html.menu-open, html.menu-open body { overflow: hidden; }
}

/* M3. Every tap target is at least 44 px on a phone or a touch screen (footer, legal row, buttons, chips, the
       contents list, the menu button, the logo, the ribbon pause button). */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .btn, .chip, .filters__clear, .foot__form button, .downloads a, .mcro-atlas__chip, .toc a { min-height: 44px; }
  .champs__pause { width: 44px; height: 44px; }
  .nav__burger { min-width: 44px; min-height: 44px; place-content: center; }
  .brand { min-width: 44px; min-height: 44px; }
  .foot__grid a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .foot__legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* M4. Library filters on a phone: each chip row scrolls sideways in two lines. Before, 28 chips stacked into a
       wall 1,100 to 1,250 px tall above the first record. The fade on the right edge shows there is more. */
@media (max-width: 640px) {
  .filters .chips { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); justify-content: start; gap: .5rem;
    margin-right: -1.4rem; padding: .15rem 2.5rem .6rem 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
  .filters .chips > * { white-space: nowrap; scroll-snap-align: start; }
}

/* M5. A "jump to" link lands with its heading below the header, not under it (it hid 14 to 50 px of the title). */
/* Keyboard focus stops a little below the sticky header, so the whole focus ring shows. This sits before the [id]
   rule below, so that rule still wins for a link that is also a jump target. */
:where(a[href], button, input, select, textarea, summary, [tabindex]) { scroll-margin-top: 8px; }
@media (max-width: 1100px) { :where([id]) { scroll-margin-top: 1.25rem; } }

/* Jump links and keyboard focus stop below the sticky header, on every page and at every width. The header is
   77.8px tall, and 79.8px from 1024px to 1041px wide. scroll-padding-top adds the header, so each scroll-margin-top
   on the site holds only the extra space above its target. refresh.js adds the two for the "Search by theme" hold. */
html { scroll-padding-top: 78px; }
@media (min-width: 1024px) and (max-width: 1041px) { html { scroll-padding-top: 80px; } }
/* The same for 3 offsets set in other files, which also carried the header height. */
@media (min-width: 1101px) { .longform .sec { scroll-margin-top: 0; } }
.page-advisors #research-network, .page-advisors #community-network { scroll-margin-top: 1rem; }
.home .beacon.fall-simple { scroll-margin-top: 1rem; }

/* M6. Phone text floor: labels at least 12 px, text people read or tap at least 14 px. Form fields are 16 px, so
       an iPhone does not zoom in when one is tapped. */
@media (max-width: 760px) {
  .eyebrow, .foot__h, .champs__h, .slot__label, .lc__type, .group__tag, .s345__tag, .person__role, .s345__card .person__role,
  .record__dl dt, .record__walk, .form__row label, .filters__head, .filters__row > span, .filters__clear, .hero__pill, .brief__label,
  .ann__kicker, .ann__label, .mcro-atlas__legend, .sea--atlas .mcro-atlas__legend { font-size: .75rem; }
  .foot__legal, .foot__note, .foot__form button, .chip, .toc a, .downloads a, .mcro-atlas__chip, .sea--atlas .mcro-atlas__chip { font-size: .875rem; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
}

/* M7. Footer on a phone: the link lists sit two across, a legal link never breaks inside its name, and the email
       box shrinks to fit a 320 screen (the form ran 6 px past the side margin). */
@media (max-width: 560px) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .foot__brand, .foot__grid > div:last-child { grid-column: 1 / -1; }
  .foot__legal a { white-space: nowrap; }
  .foot__form input { flex: 1 1 0; width: 0; }
  .foot__form button { flex: none; }
}

/* M8. Headings on a phone share their words evenly across lines, so no line holds one lonely word. */
@media (max-width: 760px) { h1, h2, h3 { text-wrap: balance; } }

/* M9. A full-screen section only makes sense with the desktop scroll effect. On a phone it left 300 to 600 px of
       empty sky above and below its words, so here it takes the height of its content. */
@media (max-width: 760px) {
  .page-scn .gi-scene--s-vision, .page-scn .gi-scene--s-mission { min-height: 0; }
  .s345:not(.s345--compact) { min-height: 0; padding-top: clamp(4rem, 14vw, 5.5rem); }
  .page-advisors .gi-hero, .page-advisors .s345.s345--compact { min-height: 0; }
}

/* M10. The Announcements card on a small phone. The date never breaks ("2026" sat alone on a line at 320), and the
        card, the "will" box and the quotes give back their inner padding, so the text column is wider. */
.ann__kicker time { white-space: nowrap; }
@media (max-width: 480px) {
  .ann { padding: 1.4rem 1.1rem; }
  .ann::after { left: 1.1rem; }
  .ann__will { padding: 1rem .9rem 1.05rem; }
  .ann__will ul { padding-left: 1rem; }
  .ann__quote { padding-left: .9rem; }
}

/* M11. The last small text on a phone (2026-10-18). Labels the M6 floor missed (9.9 to 11.7 px) rise to 12 px,
        and "Copy citation" (built by site.js) gets 14 px text and a 44 px tap height. */
@media (max-width: 760px) {
  .lc__foot, .who5__page em, .who5__pg, .mcro-atlas__footer span, .sea--atlas .mcro-atlas__eyebrow, .phero__stats span,
  .lib__count:not(.lib__count--page), .lib__foot p, .record__meta, .sec__kicker, .s345__note, .chip small { font-size: .75rem; }
  /* The brief card CSS sits in policy-briefs.html after this file, so these need one more class to win. */
  .brief .brief__kicker, .brief .brief__key .brief__label { font-size: .75rem; }
  .record__cite button { min-height: 44px; font-size: .875rem; }
}

/* M13. Internal pages show everything at once (2026-10-19). Nothing fades, rises, draws in or flickers
        as a reader arrives or scrolls: each item starts in the state it used to end in. Only the homepage keeps
        these effects. Hover, the page curtain, the contents rail, the library reflow and the slow icon loops stay.
        :where() adds no weight, so each line wins by coming last, with the same weight as the rule it replaces. */
:where(body:not(.home)) .reveal, :where(body:not(.home)) .phero__intro, :where(body:not(.home)) .record__walk li,
:where(body:not(.home)) .net__people.reveal .net__person { opacity: 1; transform: none; }
:where(body:not(.home)) .words .w > span { transform: translateY(0); }
:where(body:not(.home)) .reveal .sec__title::after { transform: scaleX(1); }
.page-gi .gi-art.reveal { transform: none; }
.page-gi .is-live .gi-ico--big, :where(body:not(.home)) .lc, :where(body:not(.home)) .lc.is-new,
:where(body:not(.home)) .hero-mark__m, :where(body:not(.home)) .hero-mark__lines,
:where(body:not(.home)) .hero-mark::before { animation: none; }

/* M14. Every section is one screen (2026-10-19). On every page but the homepage, from 761 px up, the hero and each
        section below it are at least one screen tall under the sticky header, with the content in the middle, the
        same as the Networks page. A section with more content grows; nothing is cut off. Phones keep M9.
        The two yellow bands are left out: each stays a short band. They are .cta ("Looking for the research?"
        on News and Announcements) and .newsletter ("Hear what's next." on Policy briefs).
        This replaces M12, which had made the About and Get involved sections only as tall as their content. */
@media (min-width: 761px) {
  body:not(.home) main > section:is(.phero, .sec, .s345),
  body:not(.home) .longform > div > section.sec {
    min-height: calc(100vh - var(--header-h, 76px)); min-height: calc(100svh - var(--header-h, 76px)); }
  /* The hero was a plain block: a grid lets it hold its content in the middle of the screen. */
  body:not(.home) main > section.phero:not(.gi-hero) { display: grid; align-content: center; }
}

/* M15. The "On this page" box starts in the hero (2026-10-19). On About, Get involved and the Flagship Study, from
        1101 px up, the box sits in the hero's left column, 1.5rem under its top, and stays in view while the reader
        scrolls, as before. It is pulled up by one screen, the height of the hero (M14). The hero's words move
        right, into the same column as the sections below, so the box never covers them. */
@media (min-width: 1101px) {
  .longform > .toc { margin-top: calc(var(--header-h, 76px) + 1.5rem - 100vh); margin-top: calc(var(--header-h, 76px) + 1.5rem - 100svh); }
  body .phero:has(+ .longform) {
    padding-inline: calc(max(0px, (100% - 1320px) / 2) + var(--gutter));
    padding-inline-start: calc(max(0px, (100% - 1320px) / 2) + var(--gutter) + 15rem + clamp(2rem, 5vw, 5rem)); }
  body .phero:has(+ .longform) .phero__inner { margin: 0; max-width: none; }
}

/* M16. Networks page, the asks sit inside the sections (2026-10-19). The Recruit and Connect with us sections are
        gone. Their three buttons keep their words and links and now sit in the sections above: "Apply to join a
        network" under the two network cards, "Submit research" under the Research Partner Network, and "Ask us to
        find research" under the Advisory Network. The Two networks section now has the id "connect", so every
        link to advisors.html#connect still lands on it. */
.s345__cards + .net__join { justify-content: center; margin-top: clamp(1.8rem, 4.5vh, 2.8rem); }
.s345__cards + .net__join-note { margin-top: clamp(1.6rem, 4vh, 2.6rem); text-align: center; }
.net__join-note + .net__join { justify-content: center; margin-top: 1rem; }
/* On a short laptop screen the asks and the section edges tighten, so a section with an ask still fits one screen. */
@media (min-width: 761px) { .page-advisors .s345.s345--compact.net:has(.net__ask) { padding-block: clamp(2.25rem, 6vh, 5.5rem); } }
.net__ask { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  max-width: 54rem; margin: clamp(1.1rem, 3vh, 3.2rem) auto 0; padding: clamp(.7rem, 1.6vh, 1.15rem) 1.2rem clamp(.7rem, 1.6vh, 1.15rem) 1.9rem;
  border: 1px solid rgba(159, 182, 204, .18); border-radius: 18px;
  background: linear-gradient(170deg, rgba(22, 69, 141, .5), rgba(7, 31, 75, .74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 34px 60px -30px rgba(3, 10, 31, .95); }
.net__ask::before { content: ""; position: absolute; top: -1px; left: 14%; right: 14%; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(251, 181, 42, 0), var(--light) 30%, var(--light-soft) 50%, var(--light) 70%, rgba(251, 181, 42, 0));
  box-shadow: 0 0 18px 1px rgba(251, 181, 42, .5); }
.net__ask h3 { margin: 0; font: 600 clamp(1.3rem, 1.8vw, 1.7rem)/1.12 var(--font-display); color: var(--paper); text-align: left; text-wrap: balance; }
.net__ask .btns { flex: none; margin: 0; }
/* A second action on its own line under an ask bar. The bar keeps its one button. */
.net__ask + .net__apply { justify-content: center; margin-top: clamp(.9rem, 2.2vh, 1.4rem); }
/* With the second line, the section edges and the photos tighten a little, so the section still fits one screen. */
@media (min-width: 761px) { .page-advisors .s345.s345--compact.net:has(.net__apply) { padding-block: clamp(1.5rem, 4vh, 5.5rem); } }
@media (min-width: 901px) { .net:has(.net__apply) .net__photo { width: min(100%, 8.5rem, 12.5vh); } }
/* On a small phone the label takes two lines: keep them even and centred. */
@media (max-width: 420px) { .net__apply .btn { text-align: center; text-wrap: balance; line-height: 1.25; } }
@media (max-width: 760px) {
  .net__ask { flex-direction: column; padding: 1.5rem 1.25rem; text-align: center; }
  .net__ask h3 { text-align: center; }
  .net__ask .btns { justify-content: center; }
}

/* M17. The night-sky hero on every inner page (2026-10-19). Research, Policy briefs and the Flagship Study had a plain
        hero. They now carry the same night sky as the other inner pages: twinkling stars, a soft gold light and rising
        sparks. These pages do not load gi.css, so its rules are copied here under .phero--sky, with their own keyframe
        names. refresh.js pauses the motion while the hero is off screen. Reduced motion: no sparks and no twinkle. */
.phero--sky { background: radial-gradient(70% 95% at 78% 52%, #0e3478 0%, var(--night) 55%, var(--abyss) 100%); }
.phero--sky .gi-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.phero--sky .gi-stars, .phero--sky .gi-stars::after { position: absolute; inset: 0; background-image:
  radial-gradient(1px 1px at 11% 22%, rgba(255,255,255,.75) 50%, transparent 51%), radial-gradient(1.4px 1.4px at 31% 9%, rgba(255,255,255,.85) 50%, transparent 51%),
  radial-gradient(1px 1px at 47% 30%, rgba(255,255,255,.55) 50%, transparent 51%), radial-gradient(1px 1px at 62% 14%, rgba(255,255,255,.65) 50%, transparent 51%),
  radial-gradient(1.3px 1.3px at 76% 56%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1px 1px at 89% 8%, rgba(255,255,255,.55) 50%, transparent 51%),
  radial-gradient(1px 1px at 22% 70%, rgba(255,255,255,.4) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 94% 86%, rgba(255,255,255,.5) 50%, transparent 51%),
  radial-gradient(1.6px 1.6px at 56% 78%, rgba(255,226,160,.8) 50%, transparent 51%);
  background-size: 520px 420px; animation: sky-twinkle 6s ease-in-out infinite alternate; }
.phero--sky .gi-stars::after { content: ""; background-size: 330px 290px; background-position: 140px 70px; opacity: .65; animation-delay: -3s; }
@keyframes sky-twinkle { from { opacity: .35; } to { opacity: 1; } }
.phero--sky .gi-spot { position: absolute; inset: 0; background: radial-gradient(560px circle at var(--mx, 72%) var(--my, 45%), rgba(251, 181, 42, .11), rgba(251, 181, 42, .035) 42%, transparent 70%); }
.phero--sky .gi-motes { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.phero--sky .gi-motes i { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: var(--light-soft); box-shadow: 0 0 6px 2px rgba(251, 181, 42, .6); opacity: 0; animation: sky-rise var(--d) linear var(--dl) infinite; }
@keyframes sky-rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .95; } 50% { transform: translate(14px, calc(var(--rise) * -.5)); } 85% { opacity: .5; } 100% { transform: translate(-10px, calc(var(--rise) * -1)); opacity: 0; } }
.phero--sky .phero__current { z-index: 0; opacity: .24; }
.phero--sky .phero__inner { z-index: 2; }
.phero--sky.is-paused .gi-stars, .phero--sky.is-paused .gi-stars::after, .phero--sky.is-paused .gi-motes i, .phero--sky.is-paused .phero__current { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .phero--sky .gi-motes { display: none; }
  .phero--sky .gi-stars, .phero--sky .gi-stars::after { animation: none; }
}