/* Research department site: plain CSS, no framework.
   Option C, "public information": the department speaks like a public-health
   information campaign. Solid fields of the brand colour carry the statements;
   heavy rules open every section; the signal colour means one thing only,
   "you can take part". Square corners, no shadows at rest, no photographs
   needed (a real photograph shows where an editor adds one).
   Every colour, size and space comes from /css/tokens.css, which the build
   copies from the active brand's token file (design/tokens-<brand>.css).
   This file holds no colour values of its own. Contrast ratios for every
   pairing are recorded in the token files.
   Breakpoints: 600px (narrow), 820px (medium) and 1100px (wide); custom
   properties cannot be read inside @media, so the numbers are written out. */

/* base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--color-brand) var(--color-surface-alt); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--color-surface); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading); font-variant-numeric: lining-nums; }
::selection { background: var(--color-signal); color: var(--color-on-signal); }
main { flex: 1 0 auto; padding-bottom: var(--section); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.demo :focus-visible, .band :focus-visible, .site-footer :focus-visible, .take-part :focus-visible, .theme-1 :focus-visible, .theme-3 :focus-visible, .skip:focus-visible { outline-color: var(--color-focus-on-inverse); }
.band.status-recruiting :focus-visible, .band.status-in-progress :focus-visible, .band.status-completed :focus-visible, .band.status-none :focus-visible, .theme-2 :focus-visible, .theme-4 :focus-visible { outline-color: var(--color-focus); }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--weight-heading); line-height: var(--leading-tight); color: var(--color-heading); margin: 0 0 var(--space-3); text-wrap: balance; overflow-wrap: break-word; }
h1, h2 { font-stretch: var(--display-stretch); letter-spacing: var(--tracking-display); }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); color: var(--color-heading-2); }
/* h3 and h4 keep the display family at its normal width: the subhead voice */
h3, h4 { font-weight: var(--weight-strong); font-size: var(--text-lg); line-height: 1.3; }
h4 { font-size: var(--text-md); }
p { margin: 0 0 var(--space-4); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--color-surface-inverse); color: var(--color-text-on-inverse); padding: var(--space-3) var(--space-4); z-index: 100; font-weight: var(--weight-strong); }
.skip:focus { left: var(--space-4); top: var(--space-4); }
.skip:hover { color: var(--color-text-on-inverse); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the arrow: one drawn mark, used wherever a row or band leads somewhere */
.arrow { display: inline-block; flex: none; width: 1.1em; height: .8em; margin-left: .45em; background: currentColor; vertical-align: -.02em; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M0 6.5h16.5L11 1l2-2 9 9-9 9-2-2 5.5-5.5H0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M0 6.5h16.5L11 1l2-2 9 9-9 9-2-2 5.5-5.5H0z'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--duration) var(--easing); }

/* demo banner */
.demo { background: var(--demo-bar-bg); color: var(--demo-bar-text); font-size: var(--text-sm); line-height: var(--leading-snug); padding: var(--space-2) 0; }
.demo .wrap { display: flex; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; }
.demo-tag { flex: none; background: var(--demo-tag-bg); color: var(--demo-tag-text); font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: .05rem .5rem; }

/* header: brand row (with the take-part button), then the menu (a details
   element: a disclosure up to 820px, always open above it). The whole header
   is pinned while the page scrolls; the demo bar above it scrolls away. */
.site-header { background: var(--nav-bg); border-bottom: var(--rule-heavy) solid var(--nav-border); position: sticky; top: 0; z-index: 30; }
/* Anchor targets and the sticky study aside clear the pinned header with
   --header-pinned, at least its height in both brands: about 64 to 78px up
   to 820px, 170 to 210px from 821 to 1099px (the menu wraps to two lines),
   124 to 156px from 1100px. */
:root { --header-pinned: 5rem; }
@media (min-width: 821px) { :root { --header-pinned: 13.5rem; } }
@media (min-width: 1100px) { :root { --header-pinned: 10rem; } }
html { scroll-padding-top: calc(var(--header-pinned) + var(--space-3)); }
.masthead { position: relative; }
.header-top { padding-top: var(--space-3); padding-bottom: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap); color: var(--color-heading); text-decoration: none; }
.brand:hover { color: var(--color-heading); }
.brand-mark { width: var(--logo-height); height: var(--logo-height); flex: none; }
.brand-text { font-family: var(--font-display); font-weight: var(--weight-strong); font-size: var(--text-md); line-height: 1.15; }
.brand small { display: block; margin-top: .2rem; font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--color-text-muted); }
/* wordmark slot: empty clear space on every side, no box or tint behind it */
.brand-wordmark { gap: 0; }
/* clear space on top, right and bottom; the left edge sits on the content edge (the page gutter keeps that side clear) */
.brand-logo { height: var(--logo-height); width: auto; flex: none; box-sizing: content-box; padding: var(--logo-clear) var(--logo-clear) var(--logo-clear) 0; }
.brand-divider { align-self: stretch; width: 1px; margin: var(--space-2) var(--space-4) var(--space-2) 0; background: var(--color-line-strong); }
.menu-site-name { display: none; }
.header-cta { flex: none; }
.nav-cta { display: none; }

/* above 820px the menu is always shown: summary hidden, content forced visible
   (::details-content: Firefox 143+, Chromium 131+, Safari 18.4+; elsewhere the
   Menu button simply stays visible at desktop width, which still works) */
@media (min-width: 821px) {
  .menu > summary { display: none; }
  .menu::details-content { content-visibility: visible; }
}
.nav-bar { background: var(--nav-bg); }
.nav { display: flex; flex-wrap: wrap; list-style: none; margin: 0 calc(var(--space-3) * -1); padding: 0; }
.nav > li { position: relative; }
.nav a { display: flex; align-items: center; min-height: var(--tap); padding: var(--space-2) var(--space-3); color: var(--nav-text); text-decoration: none; font-size: var(--text-base); font-weight: var(--weight-strong); }
.nav > li > a { min-height: 52px; box-shadow: inset 0 -5px 0 transparent; transition: box-shadow var(--duration) var(--easing), color var(--duration) var(--easing); }
.nav > li > a:hover { color: var(--nav-text-current); box-shadow: inset 0 -3px 0 var(--nav-hover-bar); }
.nav > li > a[aria-current="page"] { color: var(--nav-text-current); box-shadow: inset 0 -5px 0 var(--nav-current-bar); }
.nav > li > a:focus-visible { outline-color: var(--nav-focus); outline-offset: -3px; }
/* chevron after the two items with a submenu (desktop only) */
.nav > .has-sub > a::after { content: ""; width: 10px; height: 10px; margin-left: var(--space-2); flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 3l1.4-1.4L5 5.2l3.6-3.6L10 3 5 8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 3l1.4-1.4L5 5.2l3.6-3.6L10 3 5 8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.nav .sub { position: absolute; top: 100%; left: 0; min-width: 18rem; list-style: none; margin: 0; padding: var(--space-2) 0; background: var(--color-surface); border: var(--rule) solid var(--color-text); border-top: var(--rule-heavy) solid var(--nav-current-bar); box-shadow: var(--shadow-hover); z-index: 40; display: none; }
.nav .sub a { padding: var(--space-2) var(--space-4); color: var(--color-text); font-size: var(--text-sm); }
.nav .sub a:hover { background: var(--color-surface-alt); color: var(--color-heading); text-decoration: underline; }
.nav .sub a:focus-visible { outline-color: var(--color-focus); outline-offset: -3px; }
.nav > li:hover > .sub, .nav > li:focus-within > .sub { display: block; }
@media (min-width: 821px) and (max-width: 1099px) { .nav a { font-size: var(--text-sm); } }

@media (max-width: 820px) {
  .header-top { padding-top: max(0px, var(--space-3) - var(--logo-clear)); padding-bottom: max(0px, var(--space-3) - var(--logo-clear)); padding-right: calc(var(--gutter) + 100px); }
  .header-top .header-cta { display: none; }
  .nav-cta { display: block; }
  .brand-mark { width: var(--logo-height-narrow); height: var(--logo-height-narrow); }
  .brand-logo { height: var(--logo-height-narrow); }
  .brand-text { font-size: var(--text-sm); line-height: 1.2; }
  .brand-wordmark .brand-divider, .brand-wordmark .brand-text { display: none; }

  .menu > summary { display: flex; align-items: center; justify-content: center; gap: var(--space-2); position: absolute; right: var(--gutter); top: calc(max(0px, var(--space-3) - var(--logo-clear)) + max(0px, (var(--logo-height-narrow) + 2 * var(--logo-clear) - var(--tap)) / 2)); min-width: var(--tap); min-height: var(--tap); padding: 0 var(--space-3); border: var(--rule) solid var(--color-text); background: var(--color-surface); color: var(--color-heading); font-weight: var(--weight-strong); font-size: var(--text-sm); cursor: pointer; list-style: none; transition: background-color var(--duration) var(--easing); }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary:hover { background: var(--color-surface-alt); }
  .menu-icon { width: 16px; height: 12px; flex: none; background: linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat; }
  .menu[open] .menu-icon { background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; transform: rotate(45deg); position: relative; }
  .menu[open] .menu-icon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; }
  .menu-label-close, .menu[open] .menu-label-open { display: none; }
  .menu[open] .menu-label-close { display: inline; }

  /* the open menu scrolls inside the pinned header on short screens */
  .menu[open] .nav-bar { border-top: var(--rule) solid var(--color-text); max-height: calc(100vh - var(--header-pinned)); max-height: calc(100dvh - var(--header-pinned)); overflow-y: auto; overscroll-behavior: contain; }
  .nav-bar .wrap { padding: 0; }
  .menu-site-name { display: block; margin: 0; padding: var(--space-3) var(--gutter); font-family: var(--font-display); font-weight: var(--weight-strong); font-size: var(--text-md); color: var(--nav-text); border-bottom: 1px solid var(--color-line); }
  .nav { display: block; margin: 0; }
  .nav > li > a { min-height: 52px; padding: var(--space-2) var(--gutter); border-bottom: 1px solid var(--color-line); box-shadow: none; font-size: var(--text-md); }
  .nav > li:last-child > a { border-bottom: 0; }
  .nav > li > a[aria-current="page"] { box-shadow: inset 6px 0 0 var(--nav-current-bar); }
  .nav > li > a:hover { box-shadow: inset 6px 0 0 var(--nav-hover-bar); }
  .nav > .has-sub > a::after { display: none; }
  .nav .sub { display: none !important; }
  .nav > .nav-cta > a { background: var(--color-signal); color: var(--color-on-signal); }
  .nav > .nav-cta > a:hover { background: var(--color-accent-hover); box-shadow: none; text-decoration: underline; }
}
@media (max-width: 600px) {
  .brand small { display: none; }
}

/* buttons: square, heavy, plainly clickable. "signal" is the take-part action
   and the only place the signal colour fills a control. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap); padding: .55rem 1.25rem; border: var(--rule) solid transparent; font-family: var(--font-body); font-weight: var(--weight-strong); text-decoration: none; font-size: var(--text-base); line-height: var(--leading-tight); transition: background-color var(--duration) var(--easing), color var(--duration) var(--easing); }
.btn:hover { text-decoration: underline; }
.btn.signal { background: var(--color-signal); color: var(--color-on-signal); border-color: var(--color-on-signal); }
.btn.signal:hover { background: var(--color-accent-hover); color: var(--color-on-signal); }
.btn.primary { background: var(--color-brand); color: var(--color-text-on-inverse); border-color: var(--color-brand); }
.btn.primary:hover { background: var(--color-brand-strong); color: var(--color-text-on-inverse); }
.btn.on-field, .take-part .btn.primary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-surface); }
.btn.on-field:hover, .take-part .btn.primary:hover { background: var(--color-surface-alt); color: var(--color-text); }
.btn-row { display: flex; gap: var(--space-3) var(--space-5); flex-wrap: wrap; align-items: center; margin-top: var(--space-5); }

/* bands: a field of solid colour that runs edge to edge */
.band { background: var(--hero-bg); color: var(--color-text-on-inverse); }
.band h1, .band h2, .band h3 { color: var(--color-text-on-inverse); }
.band a { color: var(--color-text-on-inverse); }
.band a:hover { color: var(--color-text-on-inverse); }
.band-head { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.band-inner { display: grid; gap: var(--space-6); align-items: end; }
.band-head h1 { max-width: 20ch; margin-bottom: var(--space-4); }
.band-intro { font-size: var(--text-md); max-width: var(--measure-lede); color: var(--color-text-on-inverse-muted); margin: 0; }
.band-figure { margin: 0; }
.band-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 821px) { .band.has-figure .band-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
/* theme grounds: a band or a theme page head takes its theme's ground */
.theme-1 { background: var(--theme-1-bg); color: var(--theme-1-fg); }
.theme-2 { background: var(--theme-2-bg); color: var(--theme-2-fg); }
.theme-3 { background: var(--theme-3-bg); color: var(--theme-3-fg); }
.theme-4 { background: var(--theme-4-bg); color: var(--theme-4-fg); }
.theme-1 :is(h1, h2, h3, a, .band-intro), .theme-1 a:hover { color: var(--theme-1-fg); }
.theme-2 :is(h1, h2, h3, a, .band-intro), .theme-2 a:hover { color: var(--theme-2-fg); }
.theme-3 :is(h1, h2, h3, a, .band-intro), .theme-3 a:hover { color: var(--theme-3-fg); }
.theme-4 :is(h1, h2, h3, a, .band-intro), .theme-4 a:hover { color: var(--theme-4-fg); }
.theme-4.band-head { border-top: var(--rule) solid var(--color-line); border-bottom: var(--rule) solid var(--color-line); }

/* home: the statement and the recruiting board on one field */
.hero { padding: clamp(2rem, 5vw, 3.5rem) 0 0; }
.hero h1.display { font-size: var(--text-display); line-height: 1.02; max-width: 22ch; margin: 0 0 var(--space-5); }
.hero-text { font-size: var(--text-md); max-width: var(--measure-lede); color: var(--color-text-on-inverse-muted); margin: 0; }
.board { margin-top: clamp(2rem, 4vw, 3rem); padding: 0; border-top: var(--rule-heavy) solid var(--color-text-on-inverse); display: grid; grid-template-columns: minmax(0, 1fr); }
.board-count { background: var(--color-signal); color: var(--color-on-signal); padding: var(--space-5) var(--space-5) var(--space-6); }
.board-count h2 { color: var(--color-on-signal); font-size: var(--text-xl); line-height: 1.15; margin: 0 0 var(--space-4); max-width: 16ch; }
.board-count .count { display: block; font-size: var(--text-count); line-height: .85; letter-spacing: -.04em; margin-bottom: var(--space-3); }
.board-count p { font-size: var(--text-base); margin: 0 0 var(--space-5); max-width: 34ch; }
.band .board-count a, .board-count a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-on-signal); font-weight: var(--weight-strong); text-decoration: underline; text-decoration-thickness: 2px; }
.board-count a:hover .arrow { transform: translateX(.25em); }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.board-list li { border-bottom: 1px solid var(--color-line-on-inverse); }
.board-list a { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: center; padding: var(--space-4) var(--space-3); margin: 0 calc(var(--space-3) * -1); min-height: var(--tap); text-decoration: none; transition: color var(--duration) var(--easing); }
/* the authored moment: a row being pointed at fills with the signal from the left */
.board-list a::before { content: ""; position: absolute; inset: 0; background: var(--color-signal); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--easing); z-index: -1; }
.board-list .t { font-family: var(--font-display); font-weight: var(--weight-strong); font-size: var(--text-lg); line-height: 1.3; }
.board-list .s { grid-column: 1; color: var(--color-text-on-inverse-muted); font-size: var(--text-sm); line-height: 1.45; }
.board-list .arrow { grid-column: 2; grid-row: 1 / span 2; width: 1.5rem; height: 1.1rem; color: var(--color-accent-on-inverse); }
.board-list a:hover, .board-list a:focus-visible { color: var(--color-on-signal); }
.board-list a:hover .s, .board-list a:focus-visible .s, .board-list a:hover .arrow, .board-list a:focus-visible .arrow { color: var(--color-on-signal); }
.board-list a:hover::before, .board-list a:focus-visible::before { transform: scaleX(1); }
.board-list a:hover .arrow, .board-list a:focus-visible .arrow { transform: translateX(.3em); }
.board-list a:focus-visible { outline-color: var(--color-on-signal); outline-offset: -3px; }
.board-empty { padding: var(--space-5) 0; margin: 0; }
@media (min-width: 821px) {
  .board { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .board-count { padding: var(--space-6) var(--space-6) var(--space-7); }
  .board-list { padding-left: var(--space-6); align-content: start; }
}
@media (min-width: 1100px) { .board-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); } }

/* sections: each opens on a heavy rule with a display heading */
section { padding: var(--section) 0 0; }
section > h2, .section-title { border-top: var(--rule-heavy) solid var(--color-accent-rule); padding-top: var(--space-4); margin-bottom: var(--space-6); }
section > h2 + p { max-width: var(--measure); margin-top: calc(var(--space-3) * -1); color: var(--color-text-muted); }
.sub-title { font-size: var(--text-xl); margin: 0 0 var(--space-4); }
.lede { color: var(--color-text-muted); max-width: var(--measure-lede); font-size: var(--text-md); }
.prose { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-7); border: 0; padding: 0; }
.prose h2:first-child { margin-top: 0; }
.prose ul:not(.tags), .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: var(--space-1); }
.prose li::marker { color: var(--color-brand); }
.prose img { width: 100%; margin: var(--space-5) 0; }
.prose .post-figure { margin: var(--space-5) 0; }
.prose .post-figure img { margin: 0; }
/* a heading beside its text: the welcome, a theme or group intro */
.split > h2 { margin-bottom: var(--space-5); }
@media (min-width: 900px) {
  .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-7); align-items: start; }
  .split > h2 { grid-column: 1; }
  .split > .prose, .split > .chip-row { grid-column: 2; }
  .split > .prose:first-child { grid-column: 1 / -1; max-width: var(--measure); font-size: var(--text-md); }
  .split > .prose:first-child + .chip-row { grid-column: 1 / -1; }
}

/* theme bands: four full-width rows, each on its own ground */
.theme-bands { list-style: none; margin: 0; padding: 0; }
.themes-index > .wrap > h2 { margin-bottom: var(--space-6); }
.theme-band { position: relative; padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; }
.theme-band-inner { display: grid; gap: var(--space-2) var(--space-6); align-items: baseline; }
.theme-band h2, .theme-band h3 { font-size: var(--text-2xl); font-stretch: var(--display-stretch); letter-spacing: var(--tracking-display); font-weight: var(--weight-heading); margin: 0; border: 0; padding: 0; }
.theme-band h2 a, .theme-band h3 a { text-decoration: none; }
.theme-band h2 a::after, .theme-band h3 a::after { content: ""; position: absolute; inset: 0; }
.theme-band p { margin: 0; max-width: 46ch; }
.theme-count { font-weight: var(--weight-strong); display: flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; }
.theme-count .num { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--weight-heading); font-size: var(--text-xl); }
.theme-count .arrow { width: 1.6rem; height: 1.1rem; align-self: center; }
.theme-band:hover h2 a, .theme-band:hover h3 a, .theme-band a:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; }
.theme-band:hover .arrow { transform: translateX(.35em); }
.theme-band a:focus-visible { outline: none; }
.theme-band:focus-within { outline: 4px solid var(--color-focus-on-inverse); outline-offset: -8px; }
.theme-band.theme-2:focus-within, .theme-band.theme-4:focus-within { outline-color: var(--color-focus); }
.theme-band.theme-4 { border-bottom: var(--rule) solid var(--color-line); }
@media (min-width: 900px) { .theme-band-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) auto; } }
.switch-only { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.switch-only .switch { margin: 0; }

/* index rows: groups as a ruled register rather than cards */
.index-rows { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--color-text); }
.index-rows li { position: relative; display: grid; gap: var(--space-1) var(--space-6); padding: var(--space-5) 0; border-bottom: var(--rule) solid var(--color-text); }
.index-rows h2, .index-rows h3 { font-size: var(--text-xl); font-stretch: normal; letter-spacing: 0; font-weight: var(--weight-strong); margin: 0; border: 0; padding: 0; }
.index-rows h2 a, .index-rows h3 a { color: var(--color-heading); text-decoration: none; }
.index-rows h2 a::after, .index-rows h3 a::after { content: ""; position: absolute; inset: 0; }
.index-rows li:hover h2 a, .index-rows li:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; }
.index-rows p { margin: 0; color: var(--color-text-muted); max-width: 56ch; }
.index-rows .row-meta { color: var(--color-text); font-weight: var(--weight-strong); font-size: var(--text-sm); white-space: nowrap; }
.index-rows li:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.index-rows a:focus-visible { outline: none; }
@media (min-width: 900px) { .index-rows li { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 2fr); align-items: baseline; } .index-rows .row-meta { text-align: right; } }

/* grids */
.grid { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); list-style: none; padding: 0; margin: 0; }
.grid.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.grid > li { display: flex; min-width: 0; }
.grid > li > * { flex: 1; min-width: 0; }
.grid.people { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.grid.people.compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 var(--space-5); }

/* cards: a ruled tile; the heavy top rule is the brand colour, or the signal
   for a study that is recruiting */
.card { background: var(--color-surface); border-top: var(--rule-heavy) solid var(--color-brand); padding: var(--space-4) 0 var(--space-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.study-card.recruiting { border-top-color: var(--color-signal); }
.study-card.completed { border-top-color: var(--color-line-strong); }
.card h2, .card h3 { margin: var(--space-1) 0 0; font-size: var(--text-lg); font-stretch: normal; letter-spacing: 0; font-weight: var(--weight-strong); color: var(--color-heading); border: 0; padding: 0; }
.card h2 a, .card h3 a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-heading); text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.card p { color: var(--color-text-muted); font-size: var(--text-base); margin: 0; }
.card .meta { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.card .meta a { display: inline-flex; align-items: center; min-height: var(--tap); }
.card .tags + .meta, .card p + .meta { margin-top: auto; }
.card .meta .cta { font-weight: var(--weight-strong); color: var(--color-on-signal); background: var(--color-signal); padding: 0 var(--space-3); text-decoration: none; margin-left: auto; }
.card .meta .cta:hover { text-decoration: underline; background: var(--color-accent-hover); }
.card .meta .cta:hover .arrow { transform: translateX(.25em); }
.card > .tags { margin: 0; gap: 0 var(--space-4); }
/* inside a card the theme tags read as plain links, so the card stays a card */
.card > .tags a { border: 0; padding: 0; background: none; color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; }
.card > .tags a:hover { background: none; color: var(--color-link-hover); text-decoration-thickness: 2px; }

/* status badges: the text label always carries the meaning */
.badge { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caps); text-transform: uppercase; line-height: var(--leading-snug); padding: .2rem .6rem; background: var(--status-progress-bg); color: var(--status-progress-fg); }
.badge::before { content: ""; width: .55rem; height: .55rem; background: currentColor; }
.badge.recruiting { background: var(--status-recruiting-bg); color: var(--status-recruiting-fg); }
.badge.completed { background: var(--status-completed-bg); color: var(--status-completed-fg); }
.badge.completed::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* theme and group tags */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: 1.3; }
.tags li { margin: 0; max-width: 100%; }
.tags a { display: inline-flex; align-items: center; min-height: var(--tap); background: var(--color-surface); border: 1px solid var(--color-line-strong); padding: .3rem .7rem; text-decoration: none; color: var(--color-tag-text); transition: background-color var(--duration) var(--easing); }
.tags a:hover { background: var(--color-surface-alt); text-decoration: underline; color: var(--color-tag-text); }

/* people */
.person { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) 0; border-top: var(--rule) solid var(--color-text); }
.person:target { background: var(--color-accent-tint); box-shadow: 0 0 0 var(--space-3) var(--color-accent-tint); }
.avatar { flex: none; width: 96px; height: 96px; background: var(--avatar-bg); color: var(--avatar-text); display: grid; place-items: center; font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--weight-heading); font-size: var(--text-xl); object-fit: cover; }
.person-text { min-width: 0; }
.person h3 { font-size: var(--text-lg); margin: 0 0 .2rem; }
.person h3 a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-heading); text-decoration: none; }
.person h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.person .role { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.45; margin: 0; }
.person .bio { font-size: var(--text-base); margin-top: var(--space-3); }
.person .bio p { margin-bottom: var(--space-2); }
.person .links { font-size: var(--text-sm); display: flex; gap: var(--space-2) var(--space-5); flex-wrap: wrap; margin: var(--space-2) 0 0; }
.person .links a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--weight-strong); }
.grid.compact .person { align-items: center; padding: var(--space-3) 0; gap: var(--space-3); border-top-width: 1px; border-top-color: var(--color-line); }
.grid.compact .avatar { width: 56px; height: 56px; font-size: var(--text-md); }
.grid.compact .person h3 { font-size: var(--text-md); margin-top: 0; }
.grid.compact .person .role { font-size: var(--text-sm); }

/* dated lists */
.ledger { list-style: none; padding: 0; margin: 0; border-top: var(--rule) solid var(--color-text); }
.ledger li { border-bottom: 1px solid var(--color-line); padding: var(--space-4) 0; display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-4); }
.ledger time { color: var(--color-text); font-weight: var(--weight-strong); font-size: var(--text-sm); padding-top: .25rem; }
.ledger a { font-family: var(--font-display); font-weight: var(--weight-strong); font-size: var(--text-lg); line-height: 1.25; text-decoration: none; color: var(--color-heading); }
.ledger a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.ledger p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-base); max-width: var(--measure); }
.ledger + p { margin-top: var(--space-4); }
.ledger + p a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--weight-strong); }
@media (max-width: 600px) { .ledger li { grid-template-columns: 1fr; gap: var(--space-1); } }

/* publications */
.pubs { list-style: none; padding: 0; margin: 0; max-width: 56rem; border-bottom: 1px solid var(--color-line); }
.pubs li { padding: var(--space-4) 0; border-top: 1px solid var(--color-line); }
.pubs .t { display: block; font-weight: var(--weight-strong); font-size: var(--text-base); line-height: 1.4; color: var(--color-heading); margin-bottom: var(--space-1); }
.pubs small, .paper small { color: var(--color-text-muted); display: block; font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.paper { border-top: var(--rule) solid var(--color-text); padding: var(--space-4) 0 var(--space-5); margin: 0; max-width: 56rem; }
.paper h3, .paper h4 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.paper .plain { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); }
.paper .paper-group { margin: var(--space-3) 0 0; font-size: var(--text-sm); }

/* study page */
.study-head { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2rem, 5vw, 3.25rem); }
.study-head h1 { max-width: 22ch; margin-bottom: var(--space-4); }
.study-head .lede { margin: 0; font-size: var(--text-md); }
.study-head.status-recruiting { background: var(--color-signal); color: var(--color-on-signal); }
.study-head.status-in-progress { background: var(--color-surface-tint); color: var(--color-text); }
.study-head.status-completed, .study-head.status-none { background: var(--color-surface-alt); color: var(--color-text); }
.study-head h1, .study-head a, .study-head a:hover { color: inherit; }
.study-head .lede { color: inherit; }
.study-head .badge { background: var(--color-text); color: var(--color-surface); font-size: var(--text-sm); padding: .3rem .75rem; }
.study-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.ethics-ref { font-size: var(--text-sm); font-weight: var(--weight-strong); }
/* main text and the details sheet; the sheet comes first in reading order on
   a wide screen beside the text, and below it on a phone */
.study-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding-top: var(--space-6); }
.study-prose { margin-top: var(--space-6); }
.study-main > .study-prose:first-child { margin-top: 0; }
.study-aside { position: sticky; top: calc(var(--header-pinned) + var(--space-4)); background: var(--color-surface-alt); border-top: var(--rule-heavy) solid var(--color-accent-rule); padding: var(--space-4) var(--space-5) var(--space-5); font-size: var(--text-base); }
.study-aside dl { margin: 0; }
.study-aside dt { font-weight: var(--weight-strong); color: var(--color-heading); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line); font-size: var(--text-sm); }
.study-aside dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.study-aside dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.study-aside .tags { margin-top: var(--space-2); }
.docs { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: var(--space-2); }
.docs li { position: relative; display: flex; flex-direction: column; padding: var(--space-2) var(--space-3) var(--space-2) 2.5rem; background: var(--color-surface); border: 1px solid var(--color-line-strong); transition: background-color var(--duration) var(--easing); }
.docs li::before { content: ""; position: absolute; left: .85rem; top: .75rem; width: .9rem; height: 1.15rem; border: 2px solid var(--color-brand); background: linear-gradient(var(--color-brand), var(--color-brand)) center 38% / 50% 2px no-repeat, linear-gradient(var(--color-brand), var(--color-brand)) center 68% / 50% 2px no-repeat; }
.docs li:hover { background: var(--color-surface-tint); }
.docs a { font-weight: var(--weight-strong); line-height: 1.35; text-decoration: none; color: var(--color-heading); }
.docs a::after { content: ""; position: absolute; inset: 0; }
.docs a:hover { text-decoration: underline; }
.docs small { color: var(--color-text-muted); font-size: var(--text-sm); }
.notice { background: var(--notice-bg); border: var(--rule) solid var(--notice-border); padding: var(--space-3) var(--space-4); font-size: var(--text-base); color: var(--notice-text); }
.study-figure { margin: 0 0 var(--space-5); }
.study-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 0; }
@media (max-width: 820px) { .study-layout { grid-template-columns: 1fr; } .study-aside { position: static; } }

/* take part panel: recruiting studies (and the students' apply panel), set
   on the field with the signal button */
.take-part { margin: 0 0 var(--space-2); padding: var(--space-5) var(--space-5) var(--space-6); background: var(--color-surface-inverse); color: var(--color-text-on-inverse); max-width: var(--measure); scroll-margin-top: calc(var(--header-pinned) + var(--space-3)); }
.take-part h2 { font-size: var(--text-xl); color: var(--color-text-on-inverse); margin-bottom: var(--space-3); border: 0; padding: 0; }
.take-part a { color: var(--color-text-on-inverse); }
.take-part a:hover { color: var(--color-text-on-inverse); }
.take-part p { margin-bottom: 0; }
.take-part h2 + p, .take-part h2 + .take-part-text { margin-top: 0; color: var(--color-text-on-inverse); }
.take-part .notice { margin-top: var(--space-4); }
.take-part .notice a { color: var(--color-link); }
.take-part .btn-row { margin-top: var(--space-5); }
.take-part .btn.signal { border-color: var(--color-signal); }
.take-part .text-link { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--weight-strong); }
.page-body .take-part { margin-top: var(--space-6); }
@media (max-width: 600px) { .take-part { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); } .take-part .btn { width: 100%; } }

/* breadcrumb: always the first thing in main, above any band */
.breadcrumb { font-size: var(--text-sm); color: var(--color-text-muted); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.breadcrumb a { color: var(--color-text-muted); display: inline-block; padding: var(--space-2) 0; }
.breadcrumb a:hover { color: var(--color-link); }
.breadcrumb + .wrap > section:first-child { padding-top: var(--space-4); }
.post h1 { font-size: var(--text-3xl); }
.post-meta { font-weight: var(--weight-strong); color: var(--color-text-muted); margin-bottom: var(--space-5); }

/* page openings and bodies */
.band-head + .wrap > .page-body:first-child, .band-head + .wrap > section:first-child { padding-top: var(--space-7); }
.page-body .prose + .ledger { margin-top: var(--space-5); }

/* text and image blocks on page entries: two columns above 820px */
.blocks { display: grid; gap: var(--space-7); margin-top: var(--space-7); }
.text-image { display: grid; gap: var(--space-5); align-items: center; grid-template-columns: minmax(0, 1fr); }
.block-figure { margin: 0; }
.block-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 821px) {
  .text-image:not(.text-only) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); }
  .text-image.image-left .block-figure { order: -1; }
}

/* crossover chips under a theme or group intro */
.chip-row { margin-top: var(--space-5); max-width: var(--measure); }
.chip-label { font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-heading); margin: 0; }
.tags.chips a { display: inline-flex; align-items: center; min-height: var(--tap); padding: var(--space-1) var(--space-4); font-weight: var(--weight-strong); }

/* jump links: on a group page they sit on the band's lower edge */
.jump { margin-top: var(--space-6); }
.jump ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.jump a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: var(--space-2) var(--space-4); border: var(--rule) solid var(--color-text); color: var(--color-heading); font-weight: var(--weight-strong); text-decoration: none; transition: background-color var(--duration) var(--easing); }
.jump a:hover { background: var(--color-surface-alt); text-decoration: underline; color: var(--color-heading); }
.jump .num { font-family: var(--font-display); font-stretch: var(--display-stretch); }
.band .jump-top { margin-top: var(--space-7); }
.band .jump a { border-color: var(--color-text-on-inverse); color: var(--color-text-on-inverse); }
.band .jump a:hover { background: var(--color-text-on-inverse); color: var(--color-surface-inverse); }
.group-head { padding-bottom: 0; }
.group-head .band-inner { padding-bottom: 0; }
.group-head .jump-top { padding-bottom: var(--space-6); }
.jump-target { scroll-margin-top: calc(var(--header-pinned) + var(--space-3)); }
@media (max-width: 600px) { .jump ul { flex-direction: column; } .jump a { display: flex; } }
.section-intro { margin-bottom: var(--space-6); }

/* explore by theme / by group switch on the two index pages */
.switch { display: inline-flex; flex-wrap: wrap; margin: 0 0 var(--space-6); border: var(--rule) solid var(--color-text); }
.switch a { display: inline-flex; align-items: center; min-height: var(--tap); padding: var(--space-2) var(--space-4); color: var(--color-text); font-weight: var(--weight-strong); text-decoration: none; background: var(--color-surface); transition: background-color var(--duration) var(--easing); }
.switch a + a { border-left: var(--rule) solid var(--color-text); }
.switch a:hover { background: var(--color-surface-alt); text-decoration: underline; }
.switch a[aria-current="page"] { background: var(--color-text); color: var(--color-surface); }
.switch a:focus-visible { outline-offset: 2px; outline-color: var(--color-focus); }

/* full publication list under year headings */
.pub-year { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--weight-heading); font-size: var(--text-xl); margin: var(--space-7) 0 var(--space-3); }
.pub-list > .pub-year:first-child { margin-top: var(--space-6); }
.pub-list .pubs { margin-bottom: 0; }
.pub-source { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* study progress updates */
.updates { padding-top: var(--space-7); }
.updates > h2 { border-top: var(--rule-heavy) solid var(--color-accent-rule); padding-top: var(--space-4); }
.prose .updates .ledger { padding-left: 0; }
.prose .updates .ledger li { margin-bottom: 0; }
.updates .ledger li { grid-template-columns: 10rem minmax(0, 1fr); }
.update-text { max-width: var(--measure); }
@media (max-width: 600px) { .updates .ledger li { grid-template-columns: 1fr; } }
.take-part-text > :last-child { margin-bottom: 0; }

.more-link { margin-top: var(--space-5); }
.more-link a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--weight-strong); }

/* the home page closes on a band: students and partners */
.band-close { margin-top: var(--section); padding: var(--section) 0; background: var(--color-surface-tint); color: var(--color-text); }
main > .band-close:last-child { margin-bottom: calc(var(--section) * -1); }
.band-close h2 { color: var(--color-text); border: 0; padding: 0; max-width: 18ch; }
.band-close a, .band-close a:hover { color: var(--color-text); }
.band-close :focus-visible { outline-color: var(--color-focus); }
.close-inner { display: grid; gap: var(--space-6); }
.close-links { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--color-text); }
.close-links li { border-bottom: var(--rule) solid var(--color-text); }
.close-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: center; padding: var(--space-5) 0; text-decoration: none; }
.close-links .t { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--weight-heading); font-size: var(--text-xl); line-height: 1.15; }
.close-links .s { grid-column: 1; }
.close-links .arrow { grid-column: 2; grid-row: 1 / span 2; width: 1.6rem; height: 1.2rem; }
.close-links a:hover .t { text-decoration: underline; text-decoration-thickness: 3px; }
.close-links a:hover .arrow { transform: translateX(.35em); }
@media (min-width: 900px) { .close-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-7); align-items: start; } }

/* footer */
.site-footer { flex: none; background: var(--footer-bg); color: var(--color-text-on-inverse-muted); font-size: var(--text-sm); }
.footer-lead { padding-top: var(--space-8); padding-bottom: var(--space-6); }
.footer-ask { color: var(--color-text-on-inverse-muted); font-size: var(--text-md); margin: 0 0 var(--space-2); }
.footer-mail { margin: 0; font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--weight-heading); font-size: var(--text-2xl); line-height: 1.1; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.site-footer .footer-mail a { text-decoration-thickness: 3px; text-underline-offset: .15em; text-decoration-color: var(--color-accent-on-inverse); }
.footer-cols { position: relative; padding-top: var(--space-6); padding-bottom: var(--space-7); display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.site-footer a { color: var(--color-text-on-inverse); text-decoration-color: color-mix(in srgb, var(--color-text-on-inverse) 45%, transparent); }
.site-footer a:hover { color: var(--color-text-on-inverse); text-decoration-color: var(--color-text-on-inverse); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.site-footer li a { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer li { line-height: var(--leading-snug); }
.site-footer h2 { color: var(--color-text-on-inverse); font-size: var(--text-lg); font-family: var(--font-display); font-stretch: normal; letter-spacing: 0; font-weight: var(--weight-strong); margin-bottom: var(--space-2); border: 0; padding: 0; }
.site-footer p { margin-bottom: var(--space-3); }
.footer-cols::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--color-line-on-inverse); }
.footer-bottom { border-top: 1px solid var(--color-line-on-inverse); }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.footer-bottom p { margin: 0; }
.footer-logo { height: 40px; width: auto; }
@media (max-width: 600px) { .person { gap: var(--space-3); } .avatar { width: 64px; height: 64px; font-size: var(--text-lg); } }
@media (max-width: 820px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: var(--space-5); } .footer-cols > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-cols { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .footer-mail { font-size: var(--text-xl); font-stretch: normal; } }

/* illustrations: a real photograph sits on the art ground; placeholders are
   not shown in this world (brand.json placeholderArt: false) */
.art-frame { background: var(--art-bg); isolation: isolate; overflow: hidden; }
.art-frame img.placeholder { mix-blend-mode: var(--art-blend); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  html { scroll-behavior: auto; }
  .arrow { transform: none !important; }
}