/* NOG — proof-of-concept stylesheet.
   Modern academic: serif headings, system sans body, one accent colour.
   No framework, no build step, no web fonts. */

:root {
  --ink:        #16202a;
  --ink-soft:   #47586a;
  /* Was #6c7c8b, which failed WCAG AA (4.29:1 on white, 4.00:1 on the page
     grey). This clears 4.5:1 on every background it is used on. */
  --ink-faint:  #5f6f7e;
  --accent:     #10646f;
  --accent-dk:  #0a4750;
  --accent-bg:  #e8f2f3;
  --page:       #f6f7f8;
  --surface:    #ffffff;
  --border:     #dfe4e8;
  --warn-bg:    #fdf4e3;
  --warn-br:    #e4c179;
  --warn-ink:   #6b4e14;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1080px;
  --gutter: 16px;
  --radius: 10px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* The header is sticky and 88px tall. Without this, jumping to an anchor or
     tabbing to a link near the top scrolls it underneath the header, where it
     cannot be seen (WCAG 2.2, 2.4.11 Focus Not Obscured). */
  scroll-padding-top: 104px;
}

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 .5em;
}

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

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

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* --- skip link: hidden until focused by keyboard ------------------------ */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--accent-dk);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 0 0 7px 7px;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus { top: 0; color: #fff; }

/* Visible keyboard focus everywhere, not just where the browser default
   happens to survive the styling. */
a:focus-visible, .button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- proof-of-concept banner ------------------------------------------- */

.draft-banner {
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-br);
  color: var(--warn-ink);
  font-size: .875rem;
  padding: .6rem var(--gutter);
  text-align: center;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 88px;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark { height: 46px; width: auto; display: block; }

.brand-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; }

.brand-full {
  font-size: .78rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-left: .85rem;
  border-left: 1px solid var(--border);
  line-height: 1.25;
  max-width: 14ch;
}

@media (max-width: 620px) {
  .brand-full { display: none; }
  .header-inner { min-height: 72px; }
  .brand-mark { height: 38px; }
}

.site-nav ul {
  display: flex;
  gap: .3rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.site-nav a, .nav-unbuilt {
  display: block;
  padding: .55rem .95rem;
  border-radius: 7px;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}

.site-nav a:hover { background: var(--accent-bg); color: var(--accent-dk); }

.site-nav a[aria-current="page"] {
  color: var(--accent-dk);
  background: var(--accent-bg);
  font-weight: 600;
}

.nav-unbuilt { color: #adb8c2; cursor: not-allowed; }

@media (max-width: 620px) {
  .site-nav a, .nav-unbuilt { padding: .45rem .6rem; font-size: .95rem; }
}

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

/* The NOG wordmark is a full-colour graphic drawn for a white field, so the
   hero is light rather than the brand teal — on teal the blue lambda sinks
   into the background. The teal stays as the accent everywhere else. */
/* Tint at the top fading to white, so the hero runs straight into the white
   research section below it instead of meeting it at a hard edge. */
.hero {
  background: linear-gradient(180deg, var(--accent-bg) 0%, #ffffff 70%);
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(1.5rem, 4vw, 2.5rem);
}

.hero-inner { text-align: center; }

.hero-logo {
  display: block;
  width: min(100%, 520px);
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  height: auto;
}

.hero h1 {
  font-size: clamp(1.7rem, 4.5vw, 2.7rem);
  margin: 0 auto .4em;
  max-width: 20ch;
}

.hero-tagline {
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  max-width: 56ch;
  margin: 0 auto 1.25rem;
  color: var(--ink-soft);
}

.hero-affil {
  margin: 0;
  font-size: .76rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- research: the ambition prose and the objectives it leads to --------- */

.research {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: clamp(2.5rem, 6vw, 4.25rem) 0;
}

.research-grid { display: grid; gap: 1.75rem; }

/* On narrow screens the figure leads, then the prose runs straight into the
   objectives. */
.intro-figure { order: -1; }

.intro-figure {
  margin: 0;
  padding: 0;
}

.intro-figure img {
  width: 100%;
  border-radius: var(--radius);
  display: block;
}

.intro-figure figcaption {
  font-size: .85rem;
  color: var(--ink-faint);
  padding-top: .6rem;
  line-height: 1.45;
  border-left: 2px solid var(--accent-bg);
  padding-left: .75rem;
  margin-top: .3rem;
}

/* The ambition statement carries the page, so it is set in the display serif
   at reading size rather than as ordinary body copy. */
.lede {
  font-family: var(--serif);
  font-size: clamp(1.18rem, 2.1vw, 1.42rem);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 1.1em;
}

.lede:last-child { margin-bottom: 0; }

.lede:first-of-type {
  font-size: clamp(1.28rem, 2.5vw, 1.6rem);
  line-height: 1.45;
}

.lede a { color: var(--accent-dk); text-decoration-thickness: 1.5px; }

@media (min-width: 820px) {
  .research-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
    gap: 3rem;
    align-items: start;
  }
  .intro-figure { order: 0; margin-top: .4rem; }
}

/* --- objectives --------------------------------------------------------- */

/* These used to be three bordered cards in their own banded section, which
   read as a widget bolted under the page. They are the conclusion of the
   paragraph above them, so they now sit on the same surface, at the same
   measure, threaded onto a single accent line. */
/* Sits directly under the last paragraph of the ambition statement — close
   enough to read as its continuation, not as a new block. */
.objectives { margin-top: 1.5rem; }

.objectives-head {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  color: var(--ink);
  margin: 0 0 1.25rem;
}

.objectives-head::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin-top: .7rem;
}

.objective-list {
  list-style: none;
  counter-reset: objective;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--accent-bg);
  margin-left: 1.1rem;
}

.objective-list li {
  counter-increment: objective;
  position: relative;
  padding: 0 0 1.6rem 2.4rem;
  font-size: 1.03rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.objective-list li:last-child { padding-bottom: 0; }

.objective-list li::before {
  content: counter(objective);
  position: absolute;
  left: 0;
  top: -.1rem;
  transform: translateX(-50%);
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5px var(--surface);
}

/* --- page heads --------------------------------------------------------- */

.page-head {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(1.25rem, 3vw, 2rem);
}

.page-head h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin-bottom: .2em; }
.page-lede, .section-lede { color: var(--ink-faint); margin: 0; }

.eyebrow {
  margin: 0 0 .5rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- prose pages with a section sidebar --------------------------------- */

.page-layout { display: grid; gap: 2rem; padding-bottom: 3rem; }

.section-nav ul {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.section-nav a {
  display: block;
  padding: .45rem .8rem;
  border-radius: 7px;
  text-decoration: none;
  font-size: .95rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
}

.section-nav a:hover { border-color: var(--accent); color: var(--accent-dk); }

.section-nav a[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.page-prose { margin-top: 1.75rem; max-width: 42em; }
.page-layout-wide .page-prose { margin-top: 1.75rem; }

@media (min-width: 900px) {
  .page-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 3rem; }
  .section-nav { position: sticky; top: 108px; }
  .section-nav ul { flex-direction: column; gap: .15rem; }
  .section-nav a { border: 0; background: none; padding: .4rem .7rem; }
  .section-nav a:hover { background: var(--accent-bg); }
  .page-layout-wide { grid-template-columns: minmax(0, 1fr); }
}

/* --- figures inside converted wiki prose -------------------------------- */

.wiki-figure {
  margin: 1.75rem 0;
  padding: 0;
}

.wiki-figure img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
}

.wiki-figure figcaption {
  font-size: .86rem;
  color: var(--ink-faint);
  line-height: 1.5;
  padding: .6rem 0 0 .75rem;
  border-left: 2px solid var(--accent-bg);
  margin-top: .4rem;
}

.figure-orphan {
  font-size: .86rem;
  color: var(--ink-faint);
  border-left: 2px solid var(--border);
  padding-left: .75rem;
}

.wiki-rframe, .wiki-frame, .wiki-block { margin: 1.75rem 0; }

@media (min-width: 900px) {
  .wiki-rframe { float: right; width: 45%; margin: .4rem 0 1.5rem 2rem; }
  .page-prose::after { content: ""; display: block; clear: both; }
}

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

.pubs-layout { padding-bottom: 3rem; }

.year-jump {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 1.75rem 0 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.year-jump a {
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  padding: .25rem .55rem;
  border-radius: 5px;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
}

.year-jump a:hover {
  border-color: var(--accent);
  color: var(--accent-dk);
}

.pub-year { margin-bottom: 2.75rem; }
.pub-year .category-head { scroll-margin-top: 108px; }

.pub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pub {
  padding: 1rem 0 1rem 1.1rem;
  border-left: 2px solid var(--accent-bg);
  margin-bottom: .35rem;
}

.pub:hover { border-left-color: var(--accent); }

.pub p { margin: 0 0 .2rem; }

.pub-authors { font-size: .92rem; color: var(--ink-soft); }

.pub-title {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--ink);
}

.pub-ref { font-size: .9rem; color: var(--ink-faint); font-style: italic; }

.pub-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .45rem !important;
  font-size: .85rem;
}

.pub-links a {
  text-decoration: none;
  padding: .12rem .5rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
}

.pub-links a:hover { border-color: var(--accent); }

.pub-tag {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-faint);
}

/* Group members in an author list. */
.pub-lab { font-weight: 700; color: var(--ink); }

.pubs-source {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: .9rem;
  color: var(--ink-soft);
}

.member-pubs { margin-top: 2.5rem; }
.member-pubs-note { font-size: .9rem; color: var(--ink-soft); }

/* --- former members ----------------------------------------------------- */

.former-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 3rem;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.former-cta h2 { font-size: 1.25rem; margin: 0 0 .2rem; }
.former-cta p { margin: 0; color: var(--ink-faint); font-size: .95rem; }

.alumni-section { margin: 2.5rem 0 3rem; }

.alumni-list { list-style: none; margin: 0; padding: 0; }

.alumnus {
  display: grid;
  gap: .1rem .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
}

.alumnus:last-child { border-bottom: 0; }

.alumnus-years {
  font-variant-numeric: tabular-nums;
  font-size: .86rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.alumnus-name { font-weight: 600; }
.alumnus-note { font-size: .9rem; color: var(--ink-soft); }

@media (min-width: 720px) {
  .alumnus { grid-template-columns: 6.5rem 14rem minmax(0, 1fr); align-items: baseline; }
}

/* --- notices ------------------------------------------------------------ */

.notice {
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin: 1.75rem 0;
  font-size: .93rem;
}

.notice p:first-child { margin-top: 0; }
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }
.notice ul { margin: .5rem 0 0; padding-left: 1.2rem; }

.notice-warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-br);
  color: var(--warn-ink);
}

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

.people-section { margin: 2.5rem 0 3rem; }

.category-head {
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-weight: 700;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.people-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* A category with one person in it — the PI — reads better centred than
   stranded in the left-hand cell of a wide grid. */
.people-grid.is-single {
  grid-template-columns: minmax(0, 190px);
  justify-content: center;
}

.person-card { position: relative; }

.person-card > a {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  text-decoration: none;
  color: inherit;
}

.person-photo {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--accent-bg);
  margin-bottom: .6rem;
  border: 1px solid var(--border);
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.person-card > a:hover .person-photo img { transform: scale(1.04); }

.person-name { font-weight: 600; font-size: .98rem; line-height: 1.3; }
.person-card > a:hover .person-name { color: var(--accent-dk); }
.person-role { font-size: .83rem; color: var(--ink-faint); line-height: 1.35; }

.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-bg);
  letter-spacing: .02em;
}

.flag {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-br);
  color: var(--warn-ink);
  font-size: .68rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  cursor: help;
}

/* --- home avatar row ---------------------------------------------------- */

.people-teaser { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.people-teaser h2 { font-size: 1.5rem; margin-bottom: .2em; }

.avatar-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
}

.avatar-row li { width: 66px; height: 66px; }

.avatar-row a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}

.avatar-row img { width: 100%; height: 100%; object-fit: cover; }
.avatar-row .avatar-initials { font-size: 1.15rem; }

.button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: .6rem 1.15rem;
  border-radius: 7px;
  font-size: .95rem;
  font-weight: 600;
}

.button:hover { background: var(--accent-dk); color: #fff; }

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

/* On the home page, the newest items that are still recent, as cards on the
   page grey between the research section and the group. They come off by
   themselves when they are old (site/news_view.py), and with nothing recent
   the section is not built at all, so it can never show stale news. */
.news-teaser { padding-top: clamp(2.25rem, 5vw, 3.5rem); }
.news-teaser h2 { font-size: 1.5rem; margin-bottom: 1.1rem; }

.news-cards, .news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* The headline comes first in the page (see templates/_news.html); its date
   and tag are shown above it, and a picture above those. */
.news-item { display: flex; flex-direction: column; }
.news-meta { order: -1; }
.news-photo {
  order: -2;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: .75rem;
  background: var(--accent-bg);
}

.news-list .news-photo { max-width: 360px; }

.news-cards .news-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.15rem 1.15rem;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .6rem;
  margin: 0 0 .4rem;
  font-size: .82rem;
  color: var(--ink-faint);
}

.news-tag {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-dk);
}

.news-title {
  font-size: 1.1rem;
  line-height: 1.35;
  margin: 0 0 .35rem;
}

.news-title a {
  color: var(--ink);
  text-decoration-color: var(--accent-bg);
  text-decoration-thickness: 2px;
}

.news-title a:hover { color: var(--accent-dk); text-decoration-color: currentColor; }

.news-text {
  margin: 0 0 .35rem;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.news-text:last-child { margin-bottom: 0; }

.news-all { margin: 1.1rem 0 0; font-size: .95rem; }

/* The news page: everything published, newest first, by year. */
.news-layout { padding-top: 1.75rem; padding-bottom: 3rem; }
.news-year { margin-bottom: 2.5rem; }

.news-list .news-item {
  padding: .9rem 0 .9rem 1.1rem;
  border-left: 2px solid var(--accent-bg);
  margin-bottom: .35rem;
}

.news-list .news-item:hover { border-left-color: var(--accent); }

/* --- member page -------------------------------------------------------- */

.breadcrumb { margin: 1.5rem 0 .5rem; font-size: .9rem; }
.breadcrumb a { text-decoration: none; color: var(--ink-faint); }
.breadcrumb a:hover { color: var(--accent); }

.member { display: grid; gap: 2rem; padding-bottom: 3rem; }

.member-photo {
  aspect-ratio: 1 / 1;
  max-width: 260px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--accent-bg);
}

.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.avatar-large { font-size: 3.4rem; }

.member-body h1 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); margin-bottom: .15em; }
.member-role { color: var(--ink-faint); margin: 0 0 1.5rem; font-size: 1.02rem; }

.member-meta {
  margin: 1.25rem 0 0;
  font-size: .9rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .9rem;
}

.member-meta dt {
  color: var(--ink-faint);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-top: .15rem;
}

.member-meta dd { margin: 0; overflow-wrap: anywhere; }

.prose { margin-bottom: 2rem; }
.prose h2 {
  font-size: 1.1rem;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--border);
  padding-bottom: .4rem;
  margin-bottom: 1rem;
}
.prose h3, .prose h4 { font-size: 1.15rem; margin-top: 1.5rem; }
.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }

/* Text that was a link on the wiki but has nowhere to go here. Plain text on
   the public site; marked only in a --notes build, for review. */
.with-notes .unlinked { border-bottom: 1px dotted #b9c3cc; }

.empty-note, .provenance {
  color: var(--ink-faint);
  font-size: .88rem;
  font-style: italic;
}

.provenance { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.provenance code { font-style: normal; font-size: .85em; background: var(--surface); padding: .1rem .3rem; border-radius: 4px; border: 1px solid var(--border); }

@media (min-width: 860px) {
  .member { grid-template-columns: 260px 1fr; gap: 3rem; align-items: start; }
  /* Clears the sticky header, which is 88px tall. */
  .member-side { position: sticky; top: 108px; }
}

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

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding: 2.5rem 0;
  font-size: .88rem;
  color: var(--ink-faint);
}

.footer-crest { display: block; margin-bottom: 1.1rem; }
.footer-crest img { height: 46px; width: auto; display: block; }

.footer-org { margin: 0 0 .75rem; display: flex; flex-direction: column; }
.footer-org span:first-child { color: var(--ink-soft); font-weight: 600; }

.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  margin: 0 0 1rem;
  padding: 0;
}

.footer-copy { margin: 0; font-size: .82rem; }

@media (min-width: 720px) {
  .footer-inner { display: grid; grid-template-columns: 1fr auto; gap: .35rem 2rem; }
  .footer-crest { grid-column: 1; grid-row: 1; }
  .footer-org { grid-column: 1; grid-row: 2; }
  .footer-links { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; align-items: flex-start; }
  .footer-copy { grid-column: 1 / -1; padding-top: .75rem; }
}