/* ==========================================================================
   Locomotor Control Systems Laboratory — University of Michigan
   Static stylesheet. No build step, no dependencies.
   ========================================================================== */

:root {
  /* Palette. Michigan blue and maize are the institutional anchors; the page
     field is a cool engineering-paper gray rather than a warm cream. */
  --blue:      #00274C;
  --blue-deep: #001A33;
  --blue-mid:  #17456F;
  --maize:     #FFCB05;
  --ink:       #14181F;
  --slate:     #5A6572;
  --slate-lt:  #8794A3;
  --paper:     #F1F4F7;
  --paper-alt: #E7ECF1;
  --card:      #FFFFFF;
  --rule:      #C6D0DA;
  --rule-soft: #DCE3EA;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", "SF Mono", Consolas, monospace;

  --wide: 1240px;
  --text: 68ch;

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-variant-numeric: proportional-nums;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) { body { font-size: 1.125rem; } }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); text-decoration: none; }
a:not(.btn):not(.nav-link):not(.chip) {
  border-bottom: 1px solid var(--rule);
  transition: border-color .15s ease, color .15s ease;
}
a:not(.btn):not(.nav-link):not(.chip):hover { border-bottom-color: var(--maize); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  font-family: var(--sans);
  color: var(--blue);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 var(--s2);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -0.028em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); letter-spacing: -0.022em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1rem; font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.15rem, 2.1vw, 1.375rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 62ch;
}

.prose { max-width: var(--text); }
.prose p + p { margin-top: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 var(--s2);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--maize);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.small { font-size: 0.9375rem; color: var(--slate); }

.meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--slate);
  line-height: 1.55;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--blue); color: #fff; padding: .75rem 1rem; z-index: 200;
  font-family: var(--sans); font-size: .875rem;
}
.skip:focus { left: 0; }

/* -------------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 700px) { .wrap { padding-inline: 2rem; } }

section { padding-block: var(--s5); }
@media (min-width: 900px) { section { padding-block: var(--s6); } }
section.tight { padding-block: var(--s4); }

.band-white { background: var(--card); }
.band-alt   { background: var(--paper-alt); }
.band-blue  { background: var(--blue); color: #E8EEF4; }
.band-blue h2, .band-blue h3 { color: #fff; }
.band-blue p, .band-blue .lede, .band-blue li { color: #C6D6E4; }
.band-blue .eyebrow, .band-blue .meta, .band-blue .small { color: #9DB2C6; }

.grid { display: grid; gap: var(--s4); }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.stack > * + * { margin-top: var(--s3); }

/* -------------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); min-height: 64px;
}
.brand { display: flex; align-items: center; border: 0 !important; }
.brand img { height: 24px; width: auto; }
@media (min-width: 700px) { .brand img { height: 27px; } }

.nav-toggle {
  font-family: var(--sans); font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; background: none; border: 1px solid var(--rule);
  color: var(--blue); padding: .5rem .75rem; cursor: pointer;
}
@media (min-width: 940px) { .nav-toggle { display: none; } }

.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.nav-link {
  display: block;
  font-family: var(--sans); font-size: .8125rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue);
  padding: .8rem 0; border-bottom: 1px solid var(--rule-soft);
}
@media (max-width: 939px) {
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--card); border-bottom: 1px solid var(--rule);
    padding: .5rem 1.25rem 1.25rem;
  }
  .site-nav.open { display: block; }
}
@media (min-width: 940px) {
  .site-nav ul { flex-direction: row; gap: 1.6rem; }
  .nav-link {
    padding: .35rem 0; border-bottom: 2px solid transparent;
    font-size: .75rem;
  }
  .nav-link:hover { border-bottom-color: var(--rule); }
  .nav-link[aria-current="page"] { border-bottom-color: var(--maize); }
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-block;
  font-family: var(--sans); font-size: .8125rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .85rem 1.4rem; border: 1.5px solid var(--blue); color: var(--blue);
  background: none; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--blue); color: #fff; }
.btn-solid { background: var(--blue); color: #fff; }
.btn-solid:hover { background: var(--blue-mid); border-color: var(--blue-mid); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.chip {
  display: inline-block;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .05em;
  text-transform: uppercase;
  padding: .3rem .55rem; margin: 0 .3rem .3rem 0;
  border: 1px solid var(--rule); color: var(--blue-mid); background: var(--card);
  transition: border-color .15s ease, color .15s ease;
}
a.chip:hover { border-color: var(--maize); color: var(--blue); }

/* --------------------------------------------------------------------- hero */

.hero { background: var(--card); border-bottom: 1px solid var(--rule); }
.hero-grid { display: grid; gap: 0; align-items: stretch; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.02fr .98fr; }
}
.hero-text { padding: var(--s5) 1.25rem; }
@media (min-width: 700px) { .hero-text { padding: var(--s5) 2rem; } }
@media (min-width: 900px) {
  .hero-text {
    padding: var(--s6) 3.5rem var(--s6) max(2rem, calc((100vw - var(--wide)) / 2 + 2rem));
    display: flex; flex-direction: column; justify-content: center;
  }
}
.hero h1 { margin-bottom: var(--s3); }
.hero-media { position: relative; background: var(--blue-deep); min-height: 320px; }
.hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 42% 50%;
}
@media (min-width: 900px) { .hero-media { min-height: 100%; } }
/* Below 900px the hero image is cropped top and bottom rather than left and
   right, and a centered crop clips the knee actuator, which sits at about 23%
   of the image height. Bias the crop upward; the feet fall away instead. */
@media (max-width: 899px) {
  .hero-media img { object-position: 42% 30%; }
}
/* From 900px the hero splits into two columns, and the image column is narrow
   enough that a 42% crop clips the right of the actuator assembly, which ends
   at about 72% of the image width. Bias right until the column widens. */
@media (min-width: 900px) and (max-width: 1140px) {
  .hero-media img { object-position: 60% 50%; }
}
.hero-credit {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: .6rem .9rem; background: linear-gradient(transparent, rgba(0,26,51,.82));
  font-family: var(--mono); font-size: .625rem; letter-spacing: .08em;
  text-transform: uppercase; color: #D6E0EA;
}

/* -------------------------------------------------------------- page header */

.page-head { background: var(--blue); color: #E8EEF4; padding-block: var(--s4) var(--s4); }
.page-head h1 { color: #fff; }
.page-head .lede, .page-head p { color: #C6D6E4; }
.page-head .eyebrow { color: #9DB2C6; }
.page-head a, .band-blue a {
  color: #FFD75E;
  border-bottom-color: rgba(255, 215, 94, .45);
}
.page-head a:hover, .band-blue a:hover { border-bottom-color: var(--maize); }

/* --------------------------------------------------------------- thrust card */

.thrust {
  background: var(--card); border: 1px solid var(--rule);
  display: flex; flex-direction: column;
}
.thrust img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
/* Portrait source in a landscape card: bias the crop toward the device, not the
   middle of the frame. Adjust the second value to re-frame. */
.thrust img.pos-low { object-position: 50% 90%; }
/* Technical renders are shown whole rather than cropped. */
.thrust img.fit-contain {
  object-fit: contain; padding: 1.25rem; background: var(--card);
  border-bottom: 1px solid var(--rule-soft);
}
.thrust-body { padding: var(--s3); flex: 1; display: flex; flex-direction: column; }
.thrust h3 { margin-bottom: .625rem; }
.thrust p { font-size: 1rem; line-height: 1.6; }
.thrust .chip-row { margin-top: auto; padding-top: var(--s2); }

/* ----------------------------------------------------------------- evidence
   Every quantity on this site carries its sample and its source. */

.evidence-grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 640px) { .evidence-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .evidence-grid.three { grid-template-columns: repeat(3, 1fr); } }

.evidence {
  background: var(--card); margin: 0; padding: var(--s3);
  display: flex; flex-direction: column; gap: .625rem;
}
.ev-value {
  font-family: var(--sans); font-weight: 700; color: var(--blue);
  font-size: clamp(2.1rem, 4.6vw, 2.9rem); line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ev-value span { font-size: .5em; font-weight: 600; }
.ev-value::after {
  content: ""; display: block; width: 2.25rem; height: 3px;
  background: var(--maize); margin-top: .7rem;
}
.ev-label { font-size: 1rem; line-height: 1.5; }
.ev-src {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .03em;
  color: var(--slate); line-height: 1.6; margin-top: auto;
}
.ev-src a { color: var(--blue-mid); }

/* ------------------------------------------------------------------- figures */

.figure { margin: var(--s4) 0; }
.figure img {
  width: 100%; background: var(--card);
  border: 1px solid var(--rule); padding: .75rem;
}
.figure figcaption {
  font-family: var(--mono); font-size: .75rem; line-height: 1.65;
  color: var(--slate); margin-top: .875rem;
}
.figure figcaption b { color: var(--blue); font-weight: 600; }

.photo { margin: 0; }
.stack > .photo + .photo { margin-top: var(--s3); }
.photo img { border: 1px solid var(--rule); }
.photo-band { margin: 0; }
.photo-band img { width: 100%; border: 1px solid var(--rule); }
.photo-band figcaption {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .03em;
  color: var(--slate); margin-top: .75rem; line-height: 1.65;
}

.photo figcaption {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--slate); margin-top: .6rem; line-height: 1.6;
}

/* -------------------------------------------------------------------- video */

.video-grid { display: grid; gap: var(--s3); }
@media (min-width: 800px) { .video-grid { grid-template-columns: 1fr 1fr; } }
.video { margin: 0; }
.video-frame {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--blue-deep); border: 1px solid var(--rule);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--slate); margin-top: .6rem;
}

/* --------------------------------------------------------------- torque panel
   Schematic plot used on the research page. Colors are set on the SVG itself so
   the figure survives being copied out of the page. */

.torque-panel {
  margin: var(--s4) 0 0; padding: var(--s3);
  background: var(--card); border: 1px solid var(--rule);
}
.tp-head {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue);
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: .7rem; margin-bottom: .9rem;
}
.tp-key { display: inline-flex; align-items: center; gap: .45rem; color: var(--slate); }
.tp-swatch {
  width: .7rem; height: .7rem; flex: none;
  background: rgba(255, 203, 5, .42); border: 1px solid #8A6A00;
}
.tp-scroll { overflow-x: auto; }
.tp-scroll svg { min-width: 520px; display: block; }
.tp-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Draw-on state, applied by script only when the figure scrolls into view and
   the visitor has not asked for reduced motion. Without script the plot renders
   complete, so nothing depends on the animation. */
.tp-draw .tp-curve {
  stroke-dashoffset: 0 !important;
  transition: stroke-dashoffset 1.15s cubic-bezier(.32, .06, .2, 1);
}
.tp-draw .tp-curve--assist { transition-delay: .18s; }
.tp-draw .tp-band  { opacity: 1 !important; transition: opacity .7s ease .6s; }
.tp-draw .tp-label { opacity: 1 !important; transition: opacity .5s ease .95s; }

.tp-note {
  font-family: var(--mono); font-size: .75rem; line-height: 1.7;
  color: var(--slate); margin: .9rem 0 0;
}

/* ------------------------------------------------------------- funding note */

.fund-note {
  font-family: var(--mono); font-size: .6875rem; line-height: 1.75;
  color: var(--slate); border-left: 2px solid var(--maize);
  padding-left: .9rem; margin-top: var(--s3);
}

/* ------------------------------------------------------- research thrust page */

.thrust-section { padding-block: var(--s5); border-top: 1px solid var(--rule); }
.thrust-section:first-of-type { border-top: 0; }
@media (min-width: 900px) { .thrust-section { padding-block: var(--s6); } }

.split { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.35fr 1fr; gap: var(--s5); } }

/* Two images side by side, cropped to a common aspect so they align. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pair img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
/* Bias a wide source left so the trailing leg stays in frame; the leading knee
   sits at about 60% of the source width, so the window must reach past that. */
.pair img.crop-left { object-position: 40% 50%; }
.pair figcaption { font-size: .625rem; letter-spacing: .02em; }
@media (max-width: 899px) { .pair figcaption { font-size: .75rem; } }

/* A wide diagram needs more than the default sidebar column. */
@media (min-width: 900px) {
  .split--lede { grid-template-columns: 1fr 1.08fr; align-items: center; }
}

.inpage-nav {
  border-block: 1px solid var(--rule); background: var(--card);
  position: sticky; top: 64px; z-index: 50;
}
.inpage-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1.5rem; overflow-x: auto;
}
.inpage-nav a {
  display: block; padding: .85rem 0; white-space: nowrap;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); border-bottom: 2px solid transparent;
}
.inpage-nav a:hover { color: var(--blue); border-bottom-color: var(--maize); }
@media (max-width: 699px) {
  .inpage-nav ul { flex-wrap: wrap; gap: 0 1.25rem; overflow: visible; }
  .inpage-nav a { padding: .6rem 0; }
}

/* ----------------------------------------------------------------- timeline
   Project history on the research page. A single rail carries the sequence;
   the period sits outside it so the eye can scan dates without reading. */

.timeline { list-style: none; margin: 3rem 0 0; padding: 0; }

.tl-item { display: grid; gap: .5rem 0; }
@media (min-width: 800px) {
  .tl-item { grid-template-columns: 8.5rem 1fr; gap: 0 2rem; }
}

.tl-period {
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em;
  color: var(--blue); font-weight: 500; padding-top: .1rem;
  font-variant-numeric: tabular-nums;
}

.tl-body {
  position: relative; border-left: 1px solid var(--rule);
  padding: 0 0 2.5rem 1.75rem;
}
.tl-item:last-child .tl-body { padding-bottom: 0; border-left-color: transparent; }
.tl-body::before {
  content: ""; position: absolute; left: -5px; top: .35rem;
  width: 9px; height: 9px; background: var(--maize);
  border: 2px solid var(--card); border-radius: 50%;
}
.tl-item:last-child .tl-body::before { box-shadow: 0 0 0 1px var(--rule); }

.tl-body h3 { font-size: 1.125rem; margin-bottom: .4rem; }
.tl-body p { font-size: 1rem; line-height: 1.6; }

.tl-meta {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--slate); margin-bottom: .75rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
}
.tl-track {
  border: 1px solid var(--rule); color: var(--blue-mid);
  padding: .12rem .4rem; text-transform: uppercase; letter-spacing: .06em;
  font-size: .625rem;
}

/* --------------------------------------------------------------- publications */

.filters {
  background: var(--card); border: 1px solid var(--rule);
  padding: var(--s3); margin-bottom: var(--s4);
  display: grid; gap: var(--s3);
}
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filter-label {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate); width: 100%;
}
@media (min-width: 700px) { .filter-label { width: 5.5rem; } }

button.pill {
  font-family: var(--sans); font-size: .75rem; font-weight: 600;
  letter-spacing: .04em; padding: .45rem .8rem; cursor: pointer;
  border: 1px solid var(--rule); background: var(--card); color: var(--blue);
  transition: all .15s ease;
}
button.pill:hover { border-color: var(--blue-mid); }
button.pill[aria-pressed="true"] {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
button.pill .n {
  font-family: var(--mono); font-size: .625rem; opacity: .7; margin-left: .4rem;
}

.search-field {
  font-family: var(--serif); font-size: 1rem;
  padding: .6rem .75rem; border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink); width: 100%; max-width: 28rem;
}
.search-field::placeholder { color: var(--slate-lt); }

.result-count {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em;
  color: var(--slate); text-transform: uppercase;
}

.pub-list { list-style: none; margin: 0; padding: 0; }
.pub {
  border-top: 1px solid var(--rule-soft); padding: var(--s3) 0;
}
.pub:first-child { border-top: 0; }
.pub-title {
  font-family: var(--sans); font-weight: 600; font-size: 1.0625rem;
  line-height: 1.35; color: var(--blue); letter-spacing: -.01em;
  margin: 0 0 .4rem;
}
.pub-cite { font-size: .9375rem; line-height: 1.6; color: var(--ink); margin: 0 0 .6rem; }
.pub-cite i { color: var(--slate); }
.pub-cat {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-lt); margin: 0 0 .45rem;
}
.pub-award {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em;
  color: #8A6A00; background: #FFF8DF; border: 1px solid #F0DE9B;
  padding: .18rem .45rem; display: inline-block; margin-bottom: .5rem;
}
details.abstract { margin-top: .5rem; }
details.abstract summary {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue-mid); cursor: pointer;
  list-style: none; display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem 0;
}
details.abstract summary::-webkit-details-marker { display: none; }
details.abstract summary::before { content: "+"; font-weight: 600; }
details.abstract[open] summary::before { content: "\2212"; }
details.abstract summary:hover { color: var(--blue); }
details.abstract p {
  font-size: .9375rem; line-height: 1.65; color: var(--slate);
  border-left: 2px solid var(--rule); padding-left: 1rem; margin: .6rem 0 0;
  max-width: 84ch;
}
.no-results {
  font-family: var(--mono); font-size: .8125rem; color: var(--slate);
  padding: var(--s4) 0; text-align: center;
}

/* -------------------------------------------------------------------- datasets */

.record {
  background: var(--card); border: 1px solid var(--rule);
  padding: var(--s3); margin-bottom: var(--s3);
}
.record.has-media {
  display: grid; gap: 0; padding: 0; overflow: hidden;
}
@media (min-width: 640px) {
  .record.has-media { grid-template-columns: 220px 1fr; align-items: stretch; }
}
.record-media {
  background: var(--paper-alt); display: flex; align-items: center; justify-content: center;
  min-height: 160px;
}
@media (min-width: 640px) { .record-media { min-height: 100%; } }
.record-media img {
  width: 100%; height: 100%; object-fit: contain; max-height: 260px; padding: .75rem;
}
/* A record with more than one image stacks them in the same column instead of
   widening the card; each image gets half the height and its own frame. */
.record-media.multi {
  flex-direction: column; align-items: stretch;
}
.record-media.multi img {
  max-height: none; height: auto; flex: 1 1 50%; min-height: 130px;
  padding: .6rem; object-fit: contain;
}
.record-media.multi img:first-child {
  border-bottom: 1px solid var(--rule);
}
.record-body { padding: var(--s3); min-width: 0; }
.record.has-media .record-body { padding: var(--s3); }
.record h3 { margin-bottom: .75rem; font-size: 1.125rem; line-height: 1.3; }
.record p { font-size: .9375rem; line-height: 1.65; color: var(--slate); }
.record .assoc {
  font-size: .9375rem; border-top: 1px solid var(--rule-soft);
  padding-top: .875rem; margin-top: .875rem; color: var(--ink);
}
.record .assoc-label {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate-lt); display: block; margin-bottom: .35rem;
}
.record ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .9375rem; color: var(--slate); }
.record ul li { margin-bottom: .45rem; }

/* ------------------------------------------------------------------- people */

.people-grid { display: grid; gap: var(--s3); }
@media (min-width: 620px) { .people-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .people-grid { grid-template-columns: repeat(3, 1fr); } }

.person {
  background: var(--card); border: 1px solid var(--rule);
  padding: 1.25rem; display: flex; gap: 1rem; align-items: flex-start;
}
.person.has-photo { justify-content: space-between; }
.person-photo {
  width: 5.625rem; height: 5.625rem; flex: none; object-fit: cover;
  border: 1px solid var(--rule); background: var(--paper-alt);
}
.person-name {
  font-family: var(--sans); font-weight: 600; font-size: 1.0625rem;
  color: var(--blue); letter-spacing: -.01em; display: block; line-height: 1.25;
}
.person-role {
  font-size: .9375rem; color: var(--slate); line-height: 1.5; display: block; margin-top: .25rem;
}
.person-role i { color: var(--blue-mid); font-style: italic; }

.alumni-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule-soft); }
@media (min-width: 800px) { .alumni-list { grid-template-columns: 1fr 1fr; } }
.alumni-list li { background: var(--card); padding: 1.1rem 1.25rem; font-size: .9375rem; line-height: 1.6; }
.alumni-list b { font-family: var(--sans); font-weight: 600; color: var(--blue); font-size: 1rem; }
.alumni-list i { color: var(--slate); }

.ug-list {
  list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s4);
  font-size: .9375rem; color: var(--slate);
}
@media (min-width: 900px) { .ug-list { columns: 3; } }
.ug-list li { margin-bottom: .5rem; break-inside: avoid; }
.ug-list b { font-weight: 600; color: var(--ink); font-family: var(--serif); }

.pi-card { display: grid; gap: var(--s3); align-items: start; }
@media (min-width: 700px) { .pi-card { grid-template-columns: 200px 1fr; gap: var(--s4); } }
.pi-card img { border: 1px solid var(--rule); }

/* ------------------------------------------------------------------- honors
   Two columns of award rows, grouped by type and reverse chronological within
   each group. The year sits outside the text so the eye can scan dates. */

.hn-head {
  font-size: 1rem; font-family: var(--mono); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
  margin: var(--s4) 0 .25rem; padding-bottom: .6rem;
  border-bottom: 2px solid var(--maize);
}
.hn-head:first-of-type { margin-top: 0; }

.honors-list { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 820px) {
  .honors-list { grid-template-columns: 1fr 1fr; column-gap: var(--s4); }
}
.honors-list li {
  display: grid; grid-template-columns: 3rem 1fr; gap: .85rem;
  padding: .7rem 0; border-bottom: 1px solid var(--rule-soft);
  font-size: .9375rem; line-height: 1.5;
}
.hn-year {
  font-family: var(--mono); font-size: .75rem; color: var(--slate);
  padding-top: .15rem; font-variant-numeric: tabular-nums;
}
.hn-body { color: var(--slate); }
.hn-body b { font-family: var(--sans); font-weight: 600; color: var(--blue); }
.hn-body a { font-size: .8125rem; white-space: nowrap; }

/* ------------------------------------------------------------------- funding */

.award {
  background: var(--card); border: 1px solid var(--rule);
  padding: var(--s3); margin-bottom: var(--s3);
}
.award-title {
  font-family: var(--sans); font-weight: 600; font-size: 1.0625rem;
  line-height: 1.35; color: var(--blue); margin: 0 0 .75rem;
}
.award-meta {
  font-family: var(--mono); font-size: .75rem; line-height: 1.8; color: var(--slate);
  border-left: 2px solid var(--maize); padding-left: .9rem; margin-bottom: .875rem;
}
.award-meta b, .award-meta strong { color: var(--blue); font-weight: 600; }
.award p { font-size: .9375rem; line-height: 1.65; margin: 0; }
.award--past { padding: var(--s2) var(--s3); }
.award--past .award-title { font-size: .9375rem; margin-bottom: .5rem; }
.award--past .award-meta { font-size: .6875rem; line-height: 1.7; }
.award--past p { font-size: .875rem; }

/* ---------------------------------------------------------------------- news */

.news-list { list-style: none; margin: 0; padding: 0; }
.news-item {
  display: grid; gap: .35rem 1.5rem; padding: 1.1rem 0;
  border-top: 1px solid var(--rule-soft);
}
@media (min-width: 700px) { .news-item { grid-template-columns: 6rem 1fr; } }
.news-item:first-child { border-top: 0; }
.news-date {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .05em;
  color: var(--slate-lt); padding-top: .18rem;
}
.news-body { font-size: 1rem; line-height: 1.6; }
.year-head {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue); background: var(--paper-alt);
  padding: .5rem .75rem; margin: var(--s4) 0 0;
}

/* -------------------------------------------------------------------- footer */

.site-footer { background: var(--blue-deep); color: #A8BCCE; padding-block: var(--s4); }
.footer-grid { display: grid; gap: var(--s3); }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s4); } }
.site-footer h4 {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: #7D95AC; font-weight: 500; margin-bottom: .875rem;
}
.site-footer a { color: #DCE6EF; }
.site-footer a:hover { border-bottom-color: var(--maize); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; font-size: .9375rem; }
.site-footer img.footer-logo { height: 26px; width: auto; margin-bottom: var(--s2); }
.funders { display: flex; align-items: center; gap: 1.25rem; margin-top: var(--s2); }
.funders img { height: 44px; width: auto; background: #fff; padding: 4px; }
.disclaimer {
  border-top: 1px solid #123A5E; margin-top: var(--s4); padding-top: var(--s3);
  font-family: var(--mono); font-size: .6875rem; line-height: 1.8; color: #7D95AC;
}
.disclaimer p { margin-bottom: .5rem; }

/* -------------------------------------------------------------- misc utility */

.gallery { display: grid; gap: var(--s3); }
@media (min-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .gallery.three { grid-template-columns: repeat(3, 1fr); } }
.gallery img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

.callout {
  background: var(--card); border: 1px solid var(--rule);
  border-left: 3px solid var(--maize); padding: var(--s3);
}
.callout h3 { font-size: 1.125rem; }
.callout p { font-size: 1rem; }

.sticky-aside { position: sticky; top: 96px; }
@media (max-width: 899px) { .sticky-aside { position: static; } }

.numbered { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.numbered li {
  counter-increment: step; position: relative; padding-left: 2.5rem;
  margin-bottom: var(--s2); font-size: 1rem; line-height: 1.6;
}
.numbered li::before {
  content: counter(step); position: absolute; left: 0; top: .1rem;
  font-family: var(--mono); font-size: .75rem; color: var(--blue);
  border: 1px solid var(--maize); width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
}

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: var(--s4) 0; }

/* ------------------------------------------------------- small screens
   Utility text set in mono runs 10-11px on desktop, which is too small on a
   phone; touch targets need more height than a mouse pointer does. */

@media (max-width: 899px) {
  .eyebrow { font-size: .75rem; }
  .meta, .hero-credit, .fund-note, .award-meta, .award--past .award-meta,
  .result-count, .filter-label,
  .pub-cat, .pub-award, .ev-src, .news-date,
  .figure figcaption, .photo figcaption, .photo-band figcaption, .video figcaption,
  .tp-head, .tp-note,
  details.abstract summary, .site-footer h4, .disclaimer { font-size: .8125rem; }
  .record ul, .record .assoc { font-size: 1rem; }
}

@media (pointer: coarse) {
  a.chip, button.pill { padding: .6rem .85rem; }
  details.abstract summary { padding: .6rem 0; }
  .nav-link { padding: 1rem 0; }
  .btn { padding: .95rem 1.4rem; }
  /* Touch devices of any width get the larger utility text, which covers a
     tablet held in landscape at desktop widths. */
  .eyebrow { font-size: .75rem; }
  .meta, .hero-credit, .fund-note, .award-meta, .award--past .award-meta,
  .result-count, .filter-label, .pub-cat, .pub-award, .ev-src, .news-date,
  .figure figcaption, .photo figcaption, .photo-band figcaption, .video figcaption,
  .tp-head, .tp-note,
  details.abstract summary, .site-footer h4, .disclaimer { font-size: .8125rem; }
}

/* Three-up card rows collapse to one column below 900px, which leaves a very
   long page on a portrait tablet. Two columns in between. */
@media (min-width: 620px) and (max-width: 899px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .site-header, .site-nav, .inpage-nav, .filters, .video-grid { display: none; }
  body { background: #fff; font-size: 10.5pt; }
  details.abstract[open] p { border: 0; }
}