/* ==========================================================================
   Boston University DESI — site stylesheet
   Design language: "Observatory" — night-sky chrome, warm paper content,
   BU scarlet for action, gold for accent.
   Single source of truth: change a token below, the whole site follows.
   ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */

:root {
  /* Brand */
  --scarlet:        #cc0000;   /* BU scarlet — primary action */
  --scarlet-bright: #ff3b30;   /* hover / emphasis */
  --gold:           #ffb703;   /* accent, focus, hover-on-dark */

  /* Ink & paper */
  --ink:            #16120d;   /* near-black body text */
  --ink-soft:       #3a3128;   /* secondary text */
  --ink-faint:      #6b6055;   /* captions, metadata */
  --cream:          #fffaf0;   /* page background */
  --paper:          #ffffff;   /* raised surfaces (cards) */
  --rule:           #e6ddcd;   /* hairlines, borders */

  /* Night-sky chrome */
  --night:          #0b0d17;   /* header / footer background */
  --night-soft:     #161a2b;   /* nav bar */
  --night-ink:      #f4f1ea;   /* text on night */

  /* Typography */
  --font-display: Georgia, 'Times New Roman', Times, serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale */
  --size-hero:  clamp(2rem, 1.2rem + 3.6vw, 3.4rem);
  --size-h1:    clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem);
  --size-h2:    clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --size-body:  1.0625rem;
  --size-small: 0.9rem;

  /* Space scale */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;

  /* Structure */
  --measure:   68ch;    /* comfortable reading width */
  --page-max:  1150px;
  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 1px 2px rgba(22, 18, 13, 0.06), 0 4px 16px rgba(22, 18, 13, 0.07);
  --shadow-lg: 0 8px 32px rgba(22, 18, 13, 0.16);
  --ease:      200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode: repaint the tokens, every component follows automatically. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #ece7dd;
    --ink-soft:  #c3bbad;
    --ink-faint: #8d8477;
    --cream:     #12141c;
    --paper:     #1a1d27;
    --rule:      #2c3040;
    --night:     #080a11;
    --night-soft:#12151f;
    --scarlet:   #ff4d42;      /* lifted for contrast on dark */
    --shadow:    0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.35);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.55);
  }
}

/* --- 2. Base ------------------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 var(--sp-4);
}

h1 { font-size: var(--size-h1); margin-top: var(--sp-2); }
h2 { font-size: var(--size-h2); margin-top: var(--sp-7); }
h3 { font-size: 1.15rem; margin-top: var(--sp-5); }

p { margin: 0 0 var(--sp-4); color: var(--ink-soft); }

a { color: var(--scarlet); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--scarlet-bright); }

img, video { max-width: 100%; height: auto; }

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

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Keyboard users land here first. */
.skip-link {
  position: absolute; left: -9999px;
  background: var(--gold); color: #000;
  padding: var(--sp-3) var(--sp-4); z-index: 100;
  font-weight: 600; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; top: 0; }

/* --- 3. Page chrome (injected by chrome.js) ------------------------------ */

.masthead {
  background: var(--night);
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 45% 75%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,0.3), transparent);
  color: var(--night-ink);
  border-bottom: 3px solid var(--scarlet);
}

.masthead__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.masthead__logo img { display: block; width: clamp(120px, 16vw, 190px); }
.masthead__bu img   { display: block; width: clamp(44px, 6vw, 68px); }

.masthead__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.6rem + 2vw, 2.1rem);
  font-weight: 700;
  color: var(--night-ink);
  margin: 0;
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.masthead__title a { color: inherit; text-decoration: none; }
.masthead__title a:hover { color: var(--gold); }
.masthead__tagline {
  display: block;
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: 400;
  color: #a8a294;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: var(--sp-2);
}

.sitenav {
  position: sticky; top: 0; z-index: 50;
  background: var(--night-soft);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sitenav__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
}
.sitenav a {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--night-ink);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  transition: background var(--ease), color var(--ease);
  white-space: nowrap;
}
.sitenav a:hover { background: rgba(255,255,255,0.09); color: var(--gold); }
.sitenav a[aria-current="page"] {
  background: var(--scarlet);
  color: #fff;
}

.sitefoot {
  margin-top: var(--sp-8);
  background: var(--night);
  color: #a8a294;
  border-top: 3px solid var(--scarlet);
  font-size: var(--size-small);
}
.sitefoot__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  justify-content: space-between;
}
.sitefoot a { color: var(--night-ink); }
.sitefoot a:hover { color: var(--gold); }
.sitefoot p { color: inherit; margin: 0 0 var(--sp-2); }

/* --- 4. Layout ----------------------------------------------------------- */

main {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
}

/* Long-form text pages stay at a readable measure. */
.prose { max-width: var(--measure); }
.prose p { font-size: 1.08rem; }

.lede {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin-bottom: var(--sp-6);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--size-h2);
  margin: var(--sp-7) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--rule);
}
.section-title:first-child { margin-top: 0; }

/* --- 5. Home hero -------------------------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(320px, 52vh, 560px);
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--night) center/cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,8,15,0.35) 0%, rgba(6,8,15,0.72) 100%);
}
.hero__content {
  position: relative; z-index: 1;
  padding: var(--sp-7) var(--sp-5);
  max-width: 44rem;
}
.hero__content h1 {
  font-size: var(--size-hero);
  color: #fff;
  margin-bottom: var(--sp-4);
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}
.hero__content p {
  color: #e8e3d9;
  font-size: 1.15rem;
  text-shadow: 0 1px 12px rgba(0,0,0,0.7);
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-5); }
.btn {
  display: inline-block;
  background: var(--scarlet); color: #fff;
  font-weight: 600; text-decoration: none;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  transition: background var(--ease), transform var(--ease);
}
.btn:hover { background: var(--scarlet-bright); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; border: 1.5px solid rgba(255,255,255,0.55); }
.btn--ghost:hover { background: rgba(255,255,255,0.14); border-color: var(--gold); }

/* --- 6. Cards ------------------------------------------------------------ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}
.card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--scarlet);
  color: var(--ink);
}
.card h3 { margin: 0 0 var(--sp-2); font-size: 1.1rem; color: var(--scarlet); }
.card p  { margin: 0; font-size: var(--size-small); color: var(--ink-faint); }

/* --- 7. Link lists ------------------------------------------------------- */

.link-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 var(--sp-5);
  display: grid;
  gap: 0;
}
.link-list li { margin: 0; }
.link-list > li > a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  padding: var(--sp-1) var(--sp-3);
  margin-left: calc(-1 * var(--sp-3));
  border-radius: var(--radius-sm);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--ease), border-color var(--ease);
}
.link-list > li > a:hover {
  background: color-mix(in srgb, var(--scarlet) 8%, transparent);
  border-left-color: var(--scarlet);
  text-decoration: none;
}
.link-list .sub { color: var(--ink-faint); font-size: var(--size-small); margin-left: var(--sp-2); }

/* Grouped variant: several short lists side by side. */
.list-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-2) var(--sp-5);
  align-items: start;
}

/* Dense variant for very short labels — month names, schedule codes. Packs
   into many narrow columns instead of a few wide ones. */
.link-list--dense {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 145px), 1fr));
  gap: 0 var(--sp-2);
  margin-top: var(--sp-2);
}
.link-list--dense > li > a {
  font-size: 0.98rem;
  padding: 2px var(--sp-2);
  margin-left: calc(-1 * var(--sp-2));
  white-space: nowrap;
}

/* --- 8. References (rendered from refs.json) ----------------------------- */

.ref-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.ref-filter {
  font: inherit; font-size: var(--size-small);
  background: var(--paper); color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  transition: all var(--ease);
}
.ref-filter:hover { border-color: var(--scarlet); color: var(--scarlet); }
.ref-filter[aria-pressed="true"] { background: var(--scarlet); border-color: var(--scarlet); color: #fff; }
.ref-count { color: var(--ink-faint); font-size: var(--size-small); margin-left: auto; }

.ref {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
}
.ref:last-child { border-bottom: 0; }
.ref__title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 var(--sp-1);
  color: var(--ink);
}
.ref__authors { margin: 0; font-size: var(--size-small); color: var(--ink-soft); font-style: italic; }
.ref__journal { margin: 0 0 var(--sp-2); font-size: var(--size-small); color: var(--ink-faint); }
.ref__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ref__links a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 2px var(--sp-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  transition: all var(--ease);
}
.ref__links a:hover { background: var(--scarlet); border-color: var(--scarlet); color: #fff; }

/* --- 8b. Featured paper + figure pairs ----------------------------------- */

.breadcrumb { font-size: var(--size-small); margin-bottom: var(--sp-4); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.feature {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--scarlet);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  margin: var(--sp-5) 0 var(--sp-6);
  box-shadow: var(--shadow);
}
.feature__kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--scarlet);
  margin: 0 0 var(--sp-2);
}
.feature__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.3;
  margin: 0 0 var(--sp-2);
}
.feature__meta {
  font-size: var(--size-small);
  color: var(--ink-faint);
  margin: 0 0 var(--sp-5);
}
.feature .ref-list { margin-top: var(--sp-5); border-top: 1px solid var(--rule); }

/* Full-width figure banner directly under a page heading. */
.banner {
  margin: 0 0 var(--sp-6);
}
.banner img {
  display: block;
  width: 100%;
  background: #fff;              /* plots are drawn on white; stay legible in dark mode */
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color var(--ease);
}
.banner a:hover img { border-color: var(--scarlet); }
.banner figcaption {
  text-align: left;
  max-width: none;
  margin-inline: 0;
  padding-top: var(--sp-3);
}
/* For a square or portrait figure, full page width would be absurdly tall. */
.banner--center {
  max-width: 620px;
  margin-inline: auto;
}
.banner--center img { background: #000; }

/* Two figures side by side, stacking on narrow screens. */
.fig-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-5);
  margin: var(--sp-6) 0;
  align-items: start;
}
.fig-pair figure { margin: 0; }
.fig-pair img {
  width: 100%;
  background: #fff;              /* plots are drawn on white; keep them legible in dark mode */
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: border-color var(--ease);
}
.fig-pair a:hover img { border-color: var(--scarlet); }
.fig-pair figcaption { text-align: left; margin-inline: 0; max-width: none; }

/* --- 8c. Talks (rendered from talks.json) -------------------------------- */

.talk__size {
  font-size: 0.78rem;
  color: var(--ink-faint);
  align-self: center;
  margin-left: var(--sp-1);
}
.feature .ref__links { margin-top: var(--sp-2); }

/* --- 9. Galleries (rendered from galleries.json) ------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: var(--sp-5);
  margin: var(--sp-5) 0;
  padding: 0; list-style: none;
}
.gallery figure { margin: 0; }
.gallery button.gallery__hit {
  display: block; width: 100%; padding: 0;
  border: 0; background: none; cursor: zoom-in;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--ease), box-shadow var(--ease);
}
.gallery button.gallery__hit:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.gallery img {
  display: block; width: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--rule);
}
.gallery figcaption {
  font-size: var(--size-small);
  color: var(--ink-faint);
  padding-top: var(--sp-3);
  line-height: 1.5;
}

/* Poster grid — portrait PDFs, show the whole thing. */
.poster-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.poster-grid img { aspect-ratio: auto; object-fit: contain; background: var(--paper); padding: var(--sp-2); }
.poster-grid a { text-decoration: none; }
.poster-grid figcaption { text-align: center; color: var(--ink); font-weight: 600; }
.poster-grid .filesize { display: block; font-weight: 400; color: var(--ink-faint); font-size: 0.8rem; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 8, 15, 0.94);
  display: grid; place-items: center;
  padding: var(--sp-5);
  border: 0;
}
/* Author styles beat the UA rule `dialog:not([open]) { display: none }`, so the
   `display: grid` above would keep the lightbox on screen after close() — it
   looked like a second copy underneath. Restore the hidden state explicitly. */
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgba(6, 8, 15, 0.94); }
.lightbox img { max-width: 100%; max-height: 78vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox figcaption { color: #e8e3d9; text-align: center; padding-top: var(--sp-4); max-width: 60ch; margin: 0 auto; font-size: var(--size-small); }
/* Controls must sit above the figure: as grid siblings the image box could
   otherwise cover them, which swallowed clicks aimed at the close button. */
.lightbox__btn {
  position: absolute; z-index: 2;
  background: rgba(255,255,255,0.12); color: #fff;
  border: 0; border-radius: 50%;
  width: 44px; height: 44px; font-size: 1.4rem; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.lightbox__btn:hover  { background: var(--scarlet); }
.lightbox__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lightbox__btn[hidden] { display: none; }

.lightbox__close { top: var(--sp-4); right: var(--sp-4); }

/* The stage shrink-wraps the image so the arrows can flank it rather than the
   viewport — and sit just OUTSIDE it, so they never cover the brochure text. */
.lightbox__stage { position: relative; display: inline-block; line-height: 0; }
.lightbox__nav {
  top: 50%; transform: translateY(-50%);
  font-size: 2rem;
}
.lightbox__prev { left: -56px; }
.lightbox__next { right: -56px; }
.lightbox { padding-inline: 76px; }   /* room for the arrows beside the image */

/* Too narrow to sit outside: overlay at the very edges, translucent. */
@media (max-width: 40rem) {
  .lightbox { padding-inline: var(--sp-3); }
  .lightbox__nav { width: 38px; height: 38px; font-size: 1.6rem;
                   background: rgba(6, 8, 15, 0.55); }
  .lightbox__prev { left: 4px; }
  .lightbox__next { right: 4px; }
}

/* --- 10. Figures, video, team ------------------------------------------- */

figure { margin: var(--sp-6) 0; }
figure img { display: block; margin: 0 auto; border-radius: var(--radius); box-shadow: var(--shadow); }
figcaption, .caption {
  font-size: var(--size-small);
  color: var(--ink-faint);
  text-align: center;
  padding-top: var(--sp-3);
  max-width: var(--measure);
  margin-inline: auto;
  line-height: 1.5;
}

.video-block { margin: var(--sp-5) 0 var(--sp-7); }
.video-block video {
  display: block; width: 100%; max-width: 780px; margin: 0 auto;
  border-radius: var(--radius); box-shadow: var(--shadow); background: #000;
}

.team { display: grid; gap: var(--sp-5); margin: var(--sp-5) 0; }
.team__group h2 { margin-top: 0; }
.team ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.team li {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: baseline;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--scarlet);
  border-radius: var(--radius-sm);
}
.team .name  { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.team .role  { color: var(--ink-faint); font-size: var(--size-small); }
.team .email { margin-left: auto; font-size: var(--size-small); }

/* ORCID iD mark next to a name. Sits on the text baseline at cap height. */
.orcid {
  display: inline-flex;
  align-self: center;
  margin-left: 0.35em;          /* a space's worth, for inline use after a name */
  line-height: 0;
  border-radius: 50%;
}
/* In the team list the flex gap already separates it, so pull it back in. */
.team .orcid { margin-left: calc(-1 * var(--sp-1)); }
/* Inside a running author list, keep it tight against the name it follows. */
.ref__authors .orcid { margin-left: 0.2em; vertical-align: -0.1em; }

/* Small pill link to an external profile (arXiv, INSPIRE) beside a name. */
.idlink {
  align-self: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 1px 0.55em;
  white-space: nowrap;
  transition: all var(--ease);
}
.idlink:hover {
  color: #fff;
  background: var(--scarlet);
  border-color: var(--scarlet);
}
.orcid svg {
  width: 0.72em;
  height: 0.72em;
  display: block;
}
.orcid:hover { opacity: 0.75; }

/* DESI status badges on the team list. */
.badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px var(--sp-3);
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge--builder {
  color: var(--scarlet);
  border-color: color-mix(in srgb, var(--scarlet) 40%, transparent);
  background: color-mix(in srgb, var(--scarlet) 8%, transparent);
}
.badge--contributor {
  color: color-mix(in srgb, var(--gold) 70%, var(--ink));
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.badge--participant {
  color: var(--ink-faint);
  border-color: var(--rule);
  background: color-mix(in srgb, var(--ink-faint) 8%, transparent);
}
.badge--sponsored {
  color: var(--ink-faint);
  border-color: var(--ink-faint);
  background: transparent;
}
/* Provisional status reads as not-yet-settled: dashed, unfilled. */
.badge--provisional {
  color: var(--ink-faint);
  border-color: var(--ink-faint);
  border-style: dashed;
  background: transparent;
}

/* --- 11. Utilities ------------------------------------------------------- */

.center      { text-align: center; }
.stack > * + * { margin-top: var(--sp-4); }
.muted       { color: var(--ink-faint); }
.emblem      { display: block; margin: 0 auto var(--sp-5); width: 160px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.js-only { display: none; }

/* --- 12. Print ----------------------------------------------------------- */

@media print {
  .sitenav, .sitefoot, .masthead, .hero, .ref-toolbar { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .ref { break-inside: avoid; }
}

/* --- Tracer fact list ----------------------------------------------------
   Used on tracers.html to state a sample's defining numbers compactly.
   Two columns on wide screens, stacked on narrow.                          */

.facts {
  margin: 1.4rem 0;
  padding: 1rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}
.facts dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.1rem;
  margin: 0;
  font-size: var(--size-small);
}
.facts dt {
  color: var(--ink-faint);
  font-family: var(--font-body);
}
.facts dd {
  margin: 0;
  color: var(--ink);
}
.facts dd em { color: var(--ink-soft); font-style: normal; }
@media (max-width: 30rem) {
  .facts dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .facts dt { margin-top: 0.5rem; }
}

/* --- Inline link beside a page heading -----------------------------------
   A secondary destination that belongs with the title rather than in the
   body — set at body size and weight so it reads as an aside, not as part
   of the heading. Wraps to its own line on narrow screens.               */

.title-link {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: var(--sp-4);
  vertical-align: middle;
}
.title-link a { color: var(--scarlet); text-decoration: none; }
.title-link a:hover { color: var(--scarlet-bright); text-decoration: underline; }

/* --- Anchored headings and jump links ------------------------------------
   The nav bar is sticky, so an anchor target would otherwise scroll to sit
   underneath it. This affects every #fragment link on the site, not just
   the tracers page.                                                       */

h1[id], h2[id], h3[id] { scroll-margin-top: 4.5rem; }

/* A row of shortcuts into a long page. */
.jump {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-5) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: var(--size-small);
}
.jump__label { color: var(--ink-faint); }
.jump a {
  text-decoration: none;
  font-weight: 600;
  padding: 0.15rem var(--sp-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  white-space: nowrap;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.jump a:hover {
  background: var(--scarlet); color: #fff; border-color: var(--scarlet);
}


/* --- classes these pages arrived with -------------------------------------
   how-desi-works.html and tracers.html use .aside and .footnote, which were
   only ever defined in the personal site's stylesheet. On the group site they
   rendered as ordinary body paragraphs. Defining them here restores the
   intended emphasis now that this section has its own copy. */
.aside,
.footnote {
  color: var(--ink-faint);
  font-size: .92rem;
  line-height: 1.6;
}
.aside a,
.footnote a { color: var(--scarlet); }