/* Research department site: plain CSS, no framework.
   Option A, "Track sign": the site is set like the signage of a walking
   track. The header is the trailhead sign, every "go here" choice is a
   fingerpost plate with a pointed end, open studies carry the orange track
   marker, timber draws the post and the ground lines, and the reading column
   between the signs stays plain and calm.
   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) and 820px (medium); custom properties cannot
   be read inside @media, so the numbers are written out here. */

/* base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--color-line-strong) var(--color-surface-alt); accent-color: var(--color-brand); }
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); caret-color: var(--color-accent-text); }
::selection { background: var(--color-accent-tint); color: var(--color-text); }
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; border-radius: 2px; }
.demo :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .skip:focus-visible { outline-color: var(--color-focus-on-inverse); }
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; letter-spacing: -.01em; }
h1 { font-size: var(--text-2xl); letter-spacing: -.02em; }
h2 { font-size: var(--text-xl); color: var(--color-heading-2); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-4); }
time, .meta, .plate-note, .page-head-meta, .board-meta, .ethics-ref, .footer-bottom-inner, .pub-year, .demo { font-family: var(--font-figures); font-variant-numeric: tabular-nums; }
.pubs small, .paper small { font-family: var(--font-figures); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
section { margin-top: var(--section); }
.lede { font-size: var(--text-md); color: var(--color-text); max-width: var(--measure-lede); }
.meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.skip { position: absolute; left: var(--space-3); top: -10rem; z-index: 50; padding: var(--space-3) var(--space-4); background: var(--color-plate); color: var(--color-plate-text); border-radius: var(--radius-plate); font-weight: var(--weight-strong); }
.skip:focus { top: var(--space-3); }

/* demo banner (scrolls away; the header below it stays) */
.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-2); 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; border-radius: var(--radius-plate); padding: .05rem .5rem; }

/* header: the trailhead sign. Brand row on the plate, the menu on its shaded
   strip (a details element: a disclosure below 820px, always open above). */
.site-header { background: var(--color-plate); color: var(--color-plate-text); 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 62 to 68px up
   to 820px, two menu lines from 821 to 999px, one line from 1000px. */
:root { --header-pinned: 4.5rem; }
@media (min-width: 821px) { :root { --header-pinned: 12.5rem; } }
@media (min-width: 1000px) { :root { --header-pinned: 9.5rem; } }
html { scroll-padding-top: var(--header-pinned); }
.masthead { position: relative; }
.header-top { padding-top: var(--space-3); padding-bottom: var(--space-3); display: flex; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap); color: var(--color-plate-text); text-decoration: none; }
.brand:hover { color: var(--color-plate-text); }
.brand-mark { width: var(--logo-height); height: var(--logo-height); flex: none; border-radius: var(--radius-plate); }
.brand-text { font-family: var(--font-heading-inverse); font-weight: var(--weight-heading); font-size: var(--text-lg); line-height: var(--leading-tight); letter-spacing: .005em; }
.brand small { display: block; margin-top: .15rem; font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--color-plate-text-muted); letter-spacing: .02em; }
.brand-wordmark { gap: 0; }
.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-plate-text-muted); }
.menu-site-name { display: none; }

@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-sm); }
.nav > li > a { min-height: 48px; font-family: var(--font-heading-inverse); font-weight: var(--weight-heading); font-size: var(--text-base); letter-spacing: .01em; box-shadow: inset 0 -4px 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 -4px 0 var(--nav-current-bar); }
.nav > li > a:focus-visible { outline-color: var(--nav-focus); outline-offset: -3px; }
/* a small down-pointing marker after the two items with a submenu (desktop only) */
.nav > .has-sub > a::after { content: ""; width: .55rem; height: .4rem; margin-left: var(--space-2); flex: none; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); opacity: .8; }
.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: 1px solid var(--color-line-strong); border-top: 4px 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); }
.nav .sub a:hover { background: var(--color-surface-alt); color: var(--color-heading); }
.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 (max-width: 820px) {
  .header-top { padding-top: max(0px, var(--space-2) - var(--logo-clear)); padding-bottom: max(0px, var(--space-2) - var(--logo-clear)); padding-right: calc(var(--gutter) + 100px); }
  .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-base); }
  .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-2) - 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: 1px solid var(--color-plate-text-muted); border-radius: var(--radius-plate); background: transparent; color: var(--color-plate-text); font-family: var(--font-heading-inverse); font-weight: var(--weight-heading); 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-plate-2); }
  .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 { 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-heading-inverse); font-size: var(--text-md); color: var(--nav-text); border-bottom: 1px solid color-mix(in srgb, var(--nav-text) 18%, var(--nav-bg)); }
  .nav { display: block; margin: 0; }
  .nav > li > a { min-height: 52px; padding: var(--space-2) var(--gutter); border-bottom: 1px solid color-mix(in srgb, var(--nav-text) 18%, var(--nav-bg)); box-shadow: none; }
  .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; }
}
@media (max-width: 600px) {
  .brand small { display: none; }
  .brand-text { font-size: var(--text-sm); line-height: 1.2; }
}

/* plates: the fingerpost sign. A board with a pointed end, used for every
   "go here" choice. The point is drawn after the board so the focus ring
   still traces the board itself. */
.plate { position: relative; display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-height: var(--tap); margin-right: var(--arrow); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5); background: var(--color-plate); color: var(--color-plate-text); text-decoration: none; border-radius: var(--radius-plate) 0 0 var(--radius-plate); transition: transform var(--duration) var(--easing), background-color var(--duration) var(--easing); }
.plate::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--arrow); background: inherit; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.plate:hover { color: var(--color-plate-text); background: var(--color-plate-2); transform: translateX(var(--nudge)); }
.plate-title { font-family: var(--font-heading-inverse); font-weight: var(--weight-heading); font-size: var(--text-lg); line-height: var(--leading-tight); letter-spacing: .005em; }
.plate-note { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-plate-text-muted); overflow-wrap: anywhere; }
.plate-marker { background: var(--color-accent); color: var(--color-on-accent); }
.plate-marker:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.plate-marker .plate-title { font-family: var(--font-heading); }
.plate-marker .plate-note { color: var(--color-on-accent); }
.plate-small { display: inline-flex; padding: var(--space-2) var(--space-4); }
.plate-small .plate-title { font-size: var(--text-base); }

/* buttons keep their old markup and take the plate's form */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-5); }
.btn { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); padding: var(--space-2) var(--space-4); font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--text-md); text-decoration: none; border-radius: var(--radius-plate) 0 0 var(--radius-plate); transition: transform var(--duration) var(--easing), background-color var(--duration) var(--easing); }
.btn.primary { margin-right: var(--arrow); background: var(--color-accent); color: var(--color-on-accent); }
.btn.primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--arrow); background: inherit; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.btn.primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); transform: translateX(var(--nudge)); }
.btn.ghost { border: 2px solid var(--color-plate); color: var(--color-heading); border-radius: var(--radius-plate); }
.text-link { font-weight: var(--weight-strong); min-height: var(--tap); display: inline-flex; align-items: center; }

/* trailhead (home): the welcome, and the fingerpost planted on the ground line */
.trailhead { background: var(--color-surface-alt); border-bottom: 3px solid var(--color-post); }
.trailhead-inner { display: grid; gap: var(--space-6); padding-top: clamp(1.5rem, 5vw, 4.5rem); }
.welcome h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); max-width: 15ch; margin-bottom: var(--space-4); }
.welcome .lede { margin-bottom: var(--space-4); }
.welcome-note { color: var(--color-text-muted); max-width: var(--measure-lede); margin-bottom: 0; }
.fingerpost ul { position: relative; list-style: none; margin: 0; padding: 0 0 clamp(1.5rem, 4vw, 3rem); display: grid; gap: var(--space-3); }
/* the post: from above the first plate down into the ground line */
.fingerpost ul::before { content: ""; position: absolute; left: var(--space-5); top: calc(var(--space-4) * -1); bottom: 0; width: var(--post-width); background: var(--color-post); border-radius: 2px 2px 0 0; }
.fingerpost .plate { padding-left: calc(var(--space-5) + var(--post-width) + var(--space-4)); }
/* the bolt that fixes each plate to the post */
.fingerpost .plate::before { content: ""; position: absolute; left: calc(var(--space-5) + var(--post-width) / 2 - 3px); top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; opacity: .45; }
@media (min-width: 821px) {
  .trailhead-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: var(--space-8); }
  .welcome { padding-bottom: clamp(1.5rem, 4vw, 3.5rem); }
  .fingerpost ul { gap: var(--space-4); }
  .fingerpost .plate { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .fingerpost li:nth-child(2) { margin-right: var(--space-6); }
  .fingerpost li:nth-child(3) { margin-right: var(--space-3); }
}

/* section openers: a ground line, then the heading and one line of purpose */
.wrap > section > h2:first-child { border-top: 2px solid var(--color-post); padding-top: var(--space-4); margin-bottom: var(--space-5); }
.page-body .take-part { margin-top: var(--space-6); }
.section-head { border-top: 2px solid var(--color-post); padding-top: var(--space-4); margin-bottom: var(--space-5); }
.section-head h2 { margin-bottom: var(--space-2); }
.section-head p { color: var(--color-text-muted); max-width: var(--measure-lede); margin: 0; }
.more-link, .onward { margin-top: var(--space-5); }
.more-link a { font-weight: var(--weight-strong); }

/* the board: studies recruiting now, each with its track marker */
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--space-6); border-bottom: 1px solid var(--color-line); }
.board li { border-top: 1px solid var(--color-line); }
.board a { position: relative; display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-3) var(--space-4) calc(var(--space-5) + var(--space-2)); text-decoration: none; color: var(--color-text); min-height: var(--tap); transition: background-color var(--duration) var(--easing); }
.board a::before { content: ""; position: absolute; left: var(--space-1); top: calc(var(--space-4) + .35rem); width: .95rem; height: .85rem; background: var(--color-accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.board a:hover { background: var(--color-surface-alt); color: var(--color-text); }
.board a:hover .board-title { text-decoration: underline; text-decoration-thickness: 2px; }
.board-title { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--text-lg); line-height: var(--leading-tight); color: var(--color-heading); }
.board-text { max-width: var(--measure); }
.board-meta { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (min-width: 821px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; }
  .board li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--color-line); }
}

.welcome-head .prose { font-size: var(--text-md); }
.welcome-head h2 { border-top: 2px solid var(--color-post); padding-top: var(--space-4); }

/* junction: themes as plates, each with its plain sentence underneath */
.junction { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6) var(--space-7); }
.junction li { display: flex; flex-direction: column; align-items: flex-start; }
.junction p { margin: var(--space-3) 0 0; max-width: 46ch; color: var(--color-text); }
.junction-plate { position: relative; display: inline-flex; flex-direction: column; gap: .1rem; min-height: var(--tap); max-width: calc(100% - var(--arrow)); margin-right: var(--arrow); padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4); background: var(--color-plate); color: var(--color-plate-text); text-decoration: none; border-radius: var(--radius-plate) 0 0 var(--radius-plate); transition: transform var(--duration) var(--easing), background-color var(--duration) var(--easing); }
.junction-plate::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--arrow); background: inherit; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.junction-plate:hover { color: var(--color-plate-text); background: var(--color-plate-2); transform: translateX(var(--nudge)); }
@media (min-width: 821px) { .junction { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* register: lists of groups and other plain entries, ruled, never boxed */
.register, .grid, .entries { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6) var(--space-6); }
.register > li, .grid > li > .card, .entries > li > .card { border-top: 1px solid var(--color-line-strong); padding-top: var(--space-4); height: 100%; }
.register h3, .card h3, .card h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.card h2 { font-size: var(--text-lg); }
.register h3 a, .card h3 a, .card h2 a { text-decoration: none; color: var(--color-heading); }
.register h3 a:hover, .card h3 a:hover, .card h2 a:hover { text-decoration: underline; }
.register p, .card p { max-width: var(--measure); }
.register .meta, .card .meta { margin: 0; }
.card { display: flex; flex-direction: column; align-items: flex-start; }
.card > p:last-child { margin-bottom: 0; }
@media (min-width: 601px) { .register, .grid, .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .register, .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* study entries: marker, title, summary, themes, then group and the way in */
.card .badge { margin-bottom: var(--space-3); }
.card .tags { align-self: stretch; margin: 0 0 var(--space-2); }
.card .tags a, .study-aside .tags a { background-position: left center; }
.card .meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin-top: auto; padding-top: var(--space-2); }
.card .meta a { min-height: var(--tap); display: inline-flex; align-items: center; }
.cta { position: relative; font-weight: var(--weight-strong); color: var(--color-accent-text); padding-right: 1.1rem; }
.cta::after { content: ""; position: absolute; right: 0; top: 50%; width: .6rem; height: .7rem; margin-top: -.35rem; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cta:hover { color: var(--color-link-hover); }

/* status markers: the track marker shape, the label carries the meaning */
.badge { display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .65rem .2rem .55rem; border-radius: var(--radius-plate); font-size: var(--text-sm); font-weight: var(--weight-strong); line-height: 1.4; }
.badge::before { content: ""; width: .7rem; height: .62rem; flex: none; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.badge.recruiting { background: var(--status-recruiting-bg); color: var(--status-recruiting-fg); }
.badge.in-progress { background: var(--status-progress-bg); color: var(--status-progress-fg); }
.badge.completed { background: var(--status-completed-bg); color: var(--status-completed-fg); }
.badge.completed::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; clip-path: none; border-radius: 50%; width: .62rem; }

/* tags and chips: small route labels */
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* the visible label is 1.9rem tall inside a 44px target */
.tags { gap: 0 var(--space-2); }
.tags a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3); background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)) center / 100% 1.9rem no-repeat; border-radius: var(--radius-plate); color: var(--color-tag-text); font-size: var(--text-sm); text-decoration: none; line-height: 1.3; }
.tags a:hover { background-image: linear-gradient(var(--color-line), var(--color-line)); color: var(--color-heading); text-decoration: underline; }
.chip-row { margin-top: var(--space-6); }
.chip-label { font-weight: var(--weight-strong); margin-bottom: var(--space-2); }

/* page heads: the lichen band, closed by the ground line */
.page-head { background: var(--color-surface-alt); border-bottom: 3px solid var(--color-post); padding-bottom: clamp(1.75rem, 4vw, 3rem); }
.page-head-inner { display: grid; gap: var(--space-5); padding-top: clamp(1.75rem, 4vw, 3rem); }
.page-head .breadcrumb + .page-head-inner { padding-top: var(--space-4); }
.page-head h1 { max-width: 22ch; }
.page-head .lede { margin-bottom: 0; }
.page-head-meta { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-strong); }
.page-head-action { margin: 0; max-width: 26rem; }
.page-head-art { display: none; margin: 0; border-radius: var(--radius-plate); aspect-ratio: 16 / 9; }
.page-head-art img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 821px) {
  .page-head-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-7); }
  .page-head.with-art .page-head-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
  .page-head-art { display: block; }
}

/* breadcrumbs: "you are here" */
.breadcrumb { padding-top: var(--space-4); padding-bottom: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.breadcrumb { line-height: 1.5; }
.breadcrumb a { display: inline-block; padding: .7rem 0; margin: -.7rem 0; }
.breadcrumb { padding-top: var(--space-5); }
.breadcrumb [aria-current] { color: var(--color-text); }
main > .breadcrumb + .wrap > section:first-child { margin-top: var(--space-4); }

/* reading column */
.prose { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-7); }
.prose h2:first-child { margin-top: 0; }
.prose ul:not(.tags), .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: var(--space-2); }
.prose ul:not(.tags):not(.ledger) > li::marker { color: var(--color-accent-text); }
.prose img { width: 100%; border-radius: var(--radius-plate); margin: var(--space-5) 0; }
.prose .post-figure { margin: var(--space-5) 0; border-radius: var(--radius-plate); }
.prose .post-figure img { margin: 0; border-radius: 0; }
.page-body { margin-top: var(--space-7); }
.intro { margin-top: var(--space-7); }
.section-intro { margin-bottom: var(--space-5); }

/* illustrations: placeholder art takes the plate colour (--art-blend);
   photographs keep their own colours */
.art-frame { background: var(--art-bg); isolation: isolate; overflow: hidden; }
.art-frame img.placeholder { mix-blend-mode: var(--art-blend); }

/* explore by theme / by group */
.switch { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); }
.switch a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4); border: 2px solid var(--color-plate); border-radius: var(--radius-plate); font-family: var(--font-heading); font-weight: var(--weight-heading); color: var(--color-heading); text-decoration: none; }
.switch a:hover { background: var(--color-surface-alt); }
.switch a[aria-current="page"] { background: var(--color-plate); color: var(--color-plate-text); font-family: var(--font-heading-inverse); }

/* on this page / by status */
.jump { margin-top: var(--space-6); }
.jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.jump a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4); border: 1px solid var(--color-line-strong); border-radius: var(--radius-plate); font-weight: var(--weight-strong); text-decoration: none; color: var(--color-heading); background: var(--color-surface); }
.jump a:hover { border-color: var(--color-plate); background: var(--color-surface-alt); }
.jump-top { margin-top: var(--space-5); }
.jump-target { scroll-margin-top: calc(var(--header-pinned) + var(--space-4)); }

/* people: a name plate of initials, then name and role */
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5) var(--space-6); }
.person { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-4); align-items: start; border-radius: var(--radius-plate); }
.avatar { width: 4rem; height: 4rem; border-radius: var(--radius-plate); object-fit: cover; background: var(--avatar-bg); color: var(--avatar-text); display: grid; place-items: center; font-family: var(--font-heading-inverse); font-weight: var(--weight-heading); font-size: var(--text-lg); letter-spacing: .02em; }
.person h3 { font-size: var(--text-md); margin: 0 0 var(--space-1); }
.person h3 a { text-decoration: none; }
.person h3 a:hover { text-decoration: underline; }
.person .role { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; line-height: var(--leading-snug); }
.person .bio { margin-top: var(--space-3); max-width: var(--measure); }
.person .bio p:last-child { margin-bottom: 0; }
.person .links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: var(--space-2) 0 0; }
.person .links a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--weight-strong); }
.person:target { outline: 3px solid var(--color-accent-rule); outline-offset: var(--space-2); background: var(--color-accent-tint); }
@media (min-width: 601px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .people.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.people.compact .person { grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-3); }
.people.compact .avatar { width: 3.25rem; height: 3.25rem; font-size: var(--text-md); }
.people.compact h3 a { display: inline-block; padding: .55rem 0 .2rem; margin-top: -.55rem; }

/* news ledger */
.ledger { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--color-line); }
.ledger li { border-bottom: 1px solid var(--color-line); padding: var(--space-4) 0; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-5); }
.ledger time { color: var(--color-text-muted); font-size: var(--text-sm); padding-top: .25rem; }
.ledger a { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--text-lg); line-height: 1.25; text-decoration: none; color: var(--color-heading); }
.ledger a:hover { text-decoration: underline; }
.ledger p { margin: var(--space-1) 0 0; color: var(--color-text-muted); max-width: var(--measure); }
.ledger + p { margin-top: var(--space-4); }
@media (max-width: 600px) { .ledger li { grid-template-columns: 1fr; gap: var(--space-1); } }
.post-meta { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-strong); margin-bottom: var(--space-5); }

/* publications */
.paper { background: var(--color-surface-alt); border-radius: var(--radius-plate); padding: var(--space-5); margin-bottom: var(--space-4); max-width: 52rem; }
.paper h3 { font-size: var(--text-md); margin-bottom: var(--space-1); }
.paper-flag { font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-accent-text); margin: 0 0 var(--space-2); }
.paper .plain { margin: var(--space-3) 0 0; max-width: var(--measure); }
.pub-list { margin-top: var(--space-6); }
.pub-year { font-size: var(--text-md); margin: var(--space-6) 0 var(--space-2); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pub-year:first-child { margin-top: 0; }
.pubs { list-style: none; padding: 0; margin: 0; max-width: 52rem; 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-family: var(--font-heading); font-size: var(--text-md); line-height: 1.35; 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; }
/* citation links stay inline in the sentence; padding gives them a 44px target without moving text */
.pubs small a, .paper small a, .paper-flag a { padding: .8rem 0; }
.pub-source { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }

/* study page */
.study-layout { display: grid; gap: var(--space-7); margin-top: var(--space-4); }
.study-main h1 { max-width: 20ch; margin-bottom: var(--space-4); }
.study-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5); }
.ethics-ref { color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.study-main > .lede { margin-bottom: var(--space-6); }
.take-part { background: var(--color-surface-tint); border-top: 4px solid var(--color-accent-rule); padding: var(--space-5) clamp(1rem, 3vw, 2rem) var(--space-6); max-width: var(--measure); margin-top: 0; }
.take-part h2 { font-size: var(--text-xl); }
.take-part-text > :last-child { margin-bottom: 0; }
.take-part .plate { display: inline-flex; max-width: calc(100% - var(--arrow)); }
.take-part .plate-note { overflow-wrap: anywhere; }
.notice { background: var(--notice-bg); border: 1px solid var(--notice-border); color: var(--notice-text); border-radius: var(--radius-plate); padding: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.study-prose { margin-top: var(--space-7); }
.prose ul.ledger { padding-left: 0; }
.study-figure { margin: 0 0 var(--space-6); border-radius: var(--radius-plate); aspect-ratio: 16 / 9; max-width: 24rem; }
@media (max-width: 600px) { .study-figure { display: none; } }
.study-figure img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.updates { margin-top: var(--space-7); }
.update-text { max-width: var(--measure); }
.study-aside { background: var(--color-surface-alt); border-top: 3px solid var(--color-post); padding: var(--space-5); align-self: start; }
.study-aside dl { margin: 0; }
.study-aside dt { font-family: var(--font-heading); font-weight: var(--weight-heading); color: var(--color-heading); margin-top: var(--space-4); }
.study-aside dt:first-child { margin-top: 0; }
.study-aside dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.study-aside dd > a { display: inline-block; padding: .4rem 0; }
.study-aside .tags { margin-top: var(--space-1); }
.study-aside .tags a { background-image: linear-gradient(var(--color-surface), var(--color-surface)); }
.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); border-radius: var(--radius-plate); min-height: var(--tap); transition: border-color var(--duration) var(--easing); }
.docs li::before { content: ""; position: absolute; left: .85rem; top: .75rem; width: .9rem; height: 1.15rem; border: 1.5px solid var(--color-brand); border-radius: 2px; background: linear-gradient(var(--color-brand), var(--color-brand)) center 40% / 50% 1.5px no-repeat, linear-gradient(var(--color-brand), var(--color-brand)) center 65% / 50% 1.5px no-repeat; }
.docs li:hover { border-color: var(--color-plate); }
.docs a { font-weight: var(--weight-strong); line-height: 1.35; text-decoration: none; }
.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); }
@media (min-width: 900px) {
  .study-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-8); }
  .study-aside { position: sticky; top: calc(var(--header-pinned) + var(--space-4)); }
}

/* text and image blocks on a page entry */
.blocks { display: grid; gap: var(--space-7); margin-top: var(--space-7); }
.text-image { display: grid; gap: var(--space-5); align-items: center; }
.block-figure { margin: 0; border-radius: var(--radius-plate); aspect-ratio: 16 / 9; }
.block-figure img { width: 100%; height: 100%; 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; }
}

/* footer: the deep plate at the end of the track */
.site-footer { background: var(--footer-bg); color: var(--color-text-on-inverse-soft); border-top: 6px solid var(--color-post); }
.site-footer a { color: var(--color-text-on-inverse); }
.site-footer a:hover { color: var(--color-text-on-inverse); text-decoration-thickness: 2px; }
.footer-cols { display: grid; gap: var(--space-6); padding-top: var(--space-7); padding-bottom: var(--space-7); }
.site-footer h2 { font-family: var(--font-heading-inverse); font-size: var(--text-md); color: var(--color-text-on-inverse); margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a, .site-footer p a { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer p { margin: 0 0 var(--space-2); }
.footer-bottom { border-top: 1px solid color-mix(in srgb, var(--color-text-on-inverse) 20%, var(--footer-bg)); }
.footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-4); font-size: var(--text-sm); }
.footer-bottom-inner p { margin: 0; }
.footer-logo { height: 40px; width: auto; }
@media (min-width: 601px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer-cols { grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; } }

:target { scroll-margin-top: calc(var(--header-pinned) + var(--space-4)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .plate:hover, .junction-plate:hover, .btn.primary:hover { transform: none; }
}