/* SEU Fact Book site. All layout lives here: content partials carry no style
   attributes, and every block reflows from 320px up without sideways scrolling. */

:root {
  --red: #ce0019;
  --red-deep: #a60014;
  --dark: #1d2026;
  --dark-2: #2d3139;
  --text: #383c42;
  --muted: #5d6169;
  --paper: #ffffff;
  --tint: #f5f5f6;
  --rule: #e2e3e6;
  /* Fonts, in one place with FONT_LINKS in site_build.py: Figtree and Crimson
     Pro stand in for seu.edu's Rustica and Kepler until Creative's kit. */
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --gutter: clamp(16px, 4vw, 40px);
  /* Height of the sticky header (0 where it is not sticky); site.js sets the
     measured height when text zoom makes the header taller. */
  --header-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Keep whatever the browser scrolls to (a #section, or an element reached by
   Tab or Shift+Tab) clear of the sticky header, with a small gap (WCAG 2.4.11). */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--dark);
  line-height: 1.15;
  margin: 0 0 .5em;
}
h2 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 600; }
h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); font-weight: 600; }

img, svg, iframe, video { max-width: 100%; }
img { height: auto; }
iframe { display: block; width: 100%; border: 0; }

a { color: #a8001a; text-underline-offset: .15em; }
a:hover { color: var(--red-deep); }

/* Focus: a white ring inside a dark one, visible on white, dark and red. */
:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--dark);
}
/* The skip link focuses <main>; a ring round the whole page helps no one. */
main:focus { outline: none; box-shadow: none; }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* An icon is an empty span painted in the text color through its shape
   (icons.css, written from icons.svg, sets --icon for each one), so it is
   pure decoration with nothing hidden from screen readers. */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* High contrast: the forced text color, not the page's own background. */
@media (forced-colors: active) {
  .icon { forced-color-adjust: none; background-color: CanvasText; }
  a .icon { background-color: LinkText; }
  button .icon { background-color: ButtonText; }
}

/* Disclosures (the Sections menu, the year list, "Show the data", the trip
   panels): a button that shows or hides the body after it (site.js). The
   .js class goes on <html> before the first paint; without script every
   body shows and the buttons that only open them are hidden. */
.disclosure-toggle {
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
html:not(.js) .site-header .disclosure-toggle,
html:not(.js) .data > .disclosure-toggle { display: none; }
/* :where() keeps this at two classes, so a layout that always shows a body
   (the wide header's section links) wins without !important. */
.js :where(.disclosure:not(.is-open)) > .disclosure-body { display: none; }

/* Skip link: off screen until focused. */
.skip {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--dark);
  font-weight: 700;
  border-radius: 0 0 6px 6px;
}
.skip:focus { top: 0; }

/* Header ---------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 20;
  background: var(--dark);
  color: #fff;
}
.site-header .bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
  position: relative;
  min-height: 72px;
}
.brand { display: inline-flex; flex: none; margin-right: auto; padding: 6px 0; }
.brand img { display: block; width: 76px; height: auto; }

.site-header .year-nav { position: relative; }
.site-header .disclosure-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
}
.site-header .disclosure-toggle:hover,
.site-header .is-open > .disclosure-toggle { background: var(--dark-2); }
.year-nav .icon-chevron-down { width: .8em; height: .8em; }
.year-nav.is-open .icon-chevron-down { transform: rotate(180deg); }
.site-header ul { list-style: none; margin: 0; padding: 0; }
.site-header a { color: #fff; text-decoration: none; }
.site-header a:hover { text-decoration: underline; color: #fff; }

/* The year list drops down under its button; on narrow screens the section
   links drop down below the bar too. Without script both lists sit open in
   the bar, which wraps. */
.js .sections > ul,
.js .year-nav > ul {
  position: absolute;
  top: 100%;
  background: var(--dark);
  border-top: 1px solid var(--dark-2);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
  padding: 8px 0;
}
.js .sections > ul { left: 0; right: 0; padding-left: var(--gutter); padding-right: var(--gutter); }
.js .year-nav > ul { top: calc(100% + 4px); right: 0; min-width: 200px; max-width: calc(100vw - 2 * var(--gutter)); border-radius: 0 0 8px 8px; }
.sections a,
.year-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  font-weight: 500;
}
.year-nav a[aria-current="page"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--red); }
/* Keep the focus ring's dark band on the current year (its red bar would replace it). */
.year-nav a[aria-current="page"]:focus-visible { box-shadow: inset 3px 0 0 var(--red), 0 0 0 4px var(--dark); }

@media (min-width: 900px) {
  .brand img { width: 100px; }
  .site-header .bar { gap: 16px; max-width: 1320px; padding-left: 24px; padding-right: 24px; }
}
/* Wide screens: the section links sit in the header on one row, always shown,
   filling the bar's height as seu.edu's do, and the Sections button is hidden.
   This width is where they fit (site.js's isWide uses it too); below it they
   stay behind the button. They can still wrap if text alone is enlarged. */
@media (min-width: 1140px) {
  .site-header .bar { flex-wrap: nowrap; }
  .site-header nav.sections { flex: 1 1 auto; min-width: 0; }
  .sections > .disclosure-toggle { display: none; }
  .sections > ul,
  .js .sections > ul {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .sections a { min-height: 72px; padding: 0 9px; font-size: .875rem; white-space: nowrap; }
  .sections a:hover { background: var(--dark-2); text-decoration: none; }
}
@media (min-width: 1260px) {
  .sections a { padding: 0 12px; font-size: .9375rem; }
}
@media (min-width: 900px) and (min-height: 560px) {
  :root { --header-h: 72px; }
  .site-header { position: sticky; top: 0; }
}

/* Cover ------------------------------------------------------------------- */
.cover {
  background: radial-gradient(ellipse at 25% 20%, var(--red) 0%, var(--red-deep) 75%);
  color: #fff;
}
.cover .wrap {
  padding-top: clamp(48px, 8vw, 112px);
  padding-bottom: clamp(48px, 8vw, 112px);
}
.cover h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(3rem, 2rem + 6vw, 6rem);
  font-weight: 600;
  line-height: 1;
}
.cover h1 span {
  display: block;
  margin-top: .15em;
  font-family: var(--font-body);
  font-size: .38em;
  font-weight: 700;
  letter-spacing: .08em;
}
/* The coming-soon page has only the cover: the photo stays on narrow screens,
   under the red panel, and on wide ones the two hold the first screen. */
.coming-soon .cover-photo { display: block; }
.coming-soon .cover-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) {
  .coming-soon .cover { min-height: min(72vh, 680px); }
  .coming-soon .cover .wrap { display: flex; flex-direction: column; justify-content: center; }
}
.cover .theme {
  margin: 1.25em 0 0;
  max-width: 32ch;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  font-style: italic;
  line-height: 1.3;
}

/* A year's cover photo (years.json "cover_photo") sits beside the red panel
   on wide screens, as on seu.edu; narrower, only the panel shows. */
.cover-photo { display: none; }
@media (min-width: 900px) {
  .cover.has-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cover.has-photo .wrap {
    max-width: none;
    margin: 0;
    /* Line up with the sections' .wrap: (page width - 1200px) / 2 + gutter,
       where the page is twice this column (% padding is of the column). */
    padding-left: max(var(--gutter), calc(100% - 600px + var(--gutter)));
  }
  .cover-photo { display: block; position: relative; min-height: 100%; }
  .cover-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Sections ---------------------------------------------------------------- */
main > section { padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--rule); }
main > section:nth-of-type(even) { background: var(--tint); }
/* At a glance ------------------------------------------------------------- */
/* seu.edu's home page lays Visit / Apply / Inquire on one white panel, round
   at the top, over its hero's lower edge: a red icon at the start, a red title
   that is the link, a short grey line under it. The glance links follow it:
   the cover grows by --lap and the panel rises into it. */
:root { --lap: clamp(40px, 6vw, 88px); }
.cover.has-glance .wrap { padding-bottom: calc(clamp(48px, 8vw, 112px) + var(--lap)); }
/* With no top padding the panel's negative margin carries the section up
   with it, so the menu's "At a glance" link lands on the panel's top. */
main > section.glance { padding-top: 0; border-top: 0; }
/* The panel reaches out into the gutter so its text lines up with the
   sections below it. */
.glance-panel {
  position: relative;
  margin: calc(-1 * var(--lap)) calc(-.75 * var(--gutter)) 0;
  padding: clamp(20px, 3vw, 36px) calc(.75 * var(--gutter)) 0;
  border-radius: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px) 0 0;
  background: var(--paper);
}
.glance h2 {
  margin-bottom: clamp(12px, 2vw, 24px);
  font-size: clamp(1.35rem, 1.2rem + .6vw, 1.75rem);
}
/* One link per row on a phone, two from 600px, four from 900px. */
.glance .cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
  .glance .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
}
@media (min-width: 900px) {
  .glance .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 32px; }
}
/* The section stat tiles (.stats) share the card: icon, number, label. */
.glance .cards a,
.stats li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  align-content: start;
  height: 100%;
  padding: 12px 0;
  line-height: 1.35;
}
.glance .cards a { color: var(--text); text-decoration: none; }
.glance .cards a > :not(.icon),
.stats li > :not(.icon) { grid-column: 2; }
/* Rules between the rows only while they stack in one column. */
@media (max-width: 599px) {
  .glance .cards li + li,
  .stats li + li { border-top: 1px solid var(--rule); }
}
.glance .cards .icon,
.stats .icon {
  grid-row: 1 / span 3;
  width: 32px;
  height: 32px;
  margin: 4px 14px 0 0;
  color: var(--red);
}
.glance .cards .value,
.stats .value {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--red);
}
/* Balanced lines keep a year range such as 2025–26 whole. */
.glance .cards .label,
.stats .label { font-size: .95rem; text-wrap: balance; }
.glance .cards a:hover .value { color: var(--red-deep); }
.glance .cards a:hover .label { text-decoration: underline; }
/* seu.edu lifts and grows the icon under the pointer. */
@media (prefers-reduced-motion: no-preference) {
  .glance .cards .icon { transition: transform .15s ease-out; }
  .glance .cards a:hover .icon { transform: translateY(-4px) scale(1.1); }
}

/* Charts ------------------------------------------------------------------ */
.chart { margin: 24px 0 32px; }
.chart figure { margin: 0; }
.chart picture { display: block; }
.chart img { display: block; width: 100%; height: auto; }
/* An archived year's chart is a fixed image of that edition, kept at its size. */
.chart-archive img { max-width: 900px; }
.chart figcaption { margin-top: 8px; font-size: .95rem; color: var(--muted); }
.pending {
  margin: 24px 0;
  padding: 16px 20px;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  color: var(--muted);
  font-style: italic;
}
.interactive { margin: 24px 0 32px; }
.interactive iframe { min-height: 320px; }

/* "Show the data": the table scrolls sideways inside its wrapper, never the page. */
.data { margin-top: 12px; }
.data > .disclosure-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  font-weight: 600;
  color: #a8001a;
}
.data > .disclosure-toggle::before {
  content: '';
  width: .45em;
  height: .45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.data.is-open > .disclosure-toggle::before { transform: rotate(45deg); }
.data > .disclosure-toggle:hover { text-decoration: underline; }
.table-wrap {
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
}
.data-notes { max-width: 80ch; margin-top: 8px; font-size: .95rem; color: var(--muted); }
.data-notes p { margin: 0 0 .75em; }
.table-wrap table { border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.table-wrap caption { padding: 10px 12px; text-align: left; font-weight: 600; color: var(--dark); }
.table-wrap th,
.table-wrap td { padding: 6px 12px; border-top: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.table-wrap thead th { background: var(--tint); color: var(--dark); }
.table-wrap tbody th { font-weight: 600; }
.table-wrap .num { text-align: right; }

/* Section content ---------------------------------------------------------- */
/* Text, lists and blocks inside the section partials. Every multi-column
   block uses auto-fit columns, so it drops to fewer columns as space shrinks
   and to one on a phone. */
h4 { font-size: 1.3rem; font-weight: 600; margin-top: 1.25em; }
h5 {
  margin: 1em 0 .35em;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
section h3 { margin-top: 1.5em; }
section h2 + h3, section .feature-text > h3:first-child, .panel-dark > h3:first-child { margin-top: 0; }
p, ul, ol, dl { margin: 0 0 1em; }
.lead { max-width: 70ch; font-size: 1.15rem; }
.note { max-width: 80ch; font-size: .95rem; font-style: italic; color: var(--muted); }
/* Running text keeps a readable line; charts and grids use the full width. */
.wrap > p { max-width: 70ch; }
.note strong { font-style: normal; color: var(--text); }
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Links with an arrow: a list of them, or one on its own line. */
.link-list,
.arrow-list { list-style: none; padding: 0; }
.link-list a,
.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  min-height: 24px;
  padding: 3px 0;
  font-weight: 600;
  text-decoration: none;
}
.link-list a:hover,
.arrow-link:hover { text-decoration: underline; }
.link-list .icon,
.arrow-link .icon,
.arrow-list .icon { color: var(--red); width: .85em; height: .85em; flex: none; position: relative; top: .1em; }
.arrow-list li { display: flex; align-items: baseline; gap: .4em; padding: 2px 0; }
.link-list li,
.arrow-list li { break-inside: avoid; }

/* Long lists flow into as many columns as fit. */
.columns { columns: 16rem auto; column-gap: 32px; }
.columns li { break-inside: avoid; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0 48px;
  margin-top: 2rem;
}
ol.values li { margin-bottom: .35em; }

/* A block of text beside a photo; the photo goes first or last, and below the
   text on narrow screens. */
.feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 24px 48px;
  align-items: center;
  margin: 40px 0;
}
.feature-top { align-items: start; }
@media (min-width: 760px) {
  .feature-flip .feature-photo { order: -1; }
}
.feature-text > :last-child { margin-bottom: 0; }
.feature-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
}
.feature-photo-portrait img { aspect-ratio: 4 / 5; max-height: 560px; }

/* A dark panel (Points of Excellence, Financial Aid Highlights). */
.panel-dark {
  margin: 40px 0;
  padding: clamp(24px, 4vw, 48px);
  border-radius: 12px;
  background: var(--dark);
  color: #e9eaec;
}
.panel-dark h3,
.panel-dark .value { color: #fff; }
.panel-dark a { color: #fff; }
.panel-dark .link-list .icon,
.panel-dark .with-icon .icon { color: #ff6b7d; }
.with-icon { display: flex; align-items: center; gap: .4em; }
.with-icon .icon { width: 1.1em; height: 1.1em; }

/* Stat tiles: a big number, its label and a note, drawn as the At a glance
   cards (see there), without the link. */
.stats {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 8px 32px;
  margin: 24px 0;
}
.stats .note { margin-top: 2px; font-size: .9rem; color: var(--muted); }
.panel-dark .stats .icon,
.panel-dark .stats .value { color: #ff6b7d; }

/* Board of Trustees: officers, then the members in as many columns as fit;
   the university seal sits behind on wide screens. */
.trustees { display: grid; gap: 8px 48px; }
.trustees ul { list-style: none; padding: 0; }
.officers li { padding: 3px 0; }
.officers strong { color: var(--dark); }
/* A red bar between name and office, drawn, so nothing is read or hidden. */
.officers .office::before {
  content: '';
  display: inline-block;
  width: 2px;
  height: .9em;
  margin: 0 .5em 0 .2em;
  vertical-align: -.1em;
  background: var(--red);
}
.members { columns: 13rem auto; column-gap: 32px; }
.members li { padding: 3px 0; break-inside: avoid; }
@media (min-width: 900px) {
  /* The seal is drawn at 80%, above the section's own background and under
     its text: at full strength its darkest strokes leave a name over them
     at 4.3:1, under AA's 4.5:1; at 80% the worst is 5.3:1. */
  #trustees { position: relative; isolation: isolate; }
  #trustees::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url(../images/shared/seu-seal.png) no-repeat right -60px center / auto 110%;
    opacity: .8;
  }
  .trustees { grid-template-columns: minmax(16rem, 1fr) 2fr; max-width: 920px; }
}

/* SEU News: mission trip lists and the dropdown panels. */
.trips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0 32px;
}
@media (min-width: 760px) {
  .trips { grid-template-columns: 3fr 1fr; }
}
.trips ul { padding-left: 1.2em; }
.trips .columns { columns: 9rem auto; }
.panel {
  margin: 12px 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
}
/* The heading holds the button, so the outline keeps the panel's name. */
.panel-h { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: inherit; color: inherit; }
.panel-h > .disclosure-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  font-weight: 700;
  color: var(--dark);
  border-radius: 8px;
}
.panel-h > .disclosure-toggle::before {
  content: '';
  flex: none;
  width: .5em;
  height: .5em;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}
.panel.is-open .panel-h > .disclosure-toggle::before { transform: rotate(45deg); }
.panel-h > .disclosure-toggle:hover { background: var(--tint); }
/* Without script the panel is open and its heading is only a heading. */
html:not(.js) .panel-h > .disclosure-toggle { cursor: auto; }
html:not(.js) .panel-h > .disclosure-toggle::before { transform: rotate(45deg); }
.panel-body { padding: 0 16px 8px; }
.panel-body > h4:first-child { margin-top: .25em; }

/* Academics: one card per college or school, wrapping into a grid. */
.program-cards {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 20px;
  margin: 24px 0 28px;
}
.program-cards li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 20px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  text-align: center;
}
.program-cards img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
}
.program-cards h4 { margin: 4px 0 0; font-size: 1.2rem; }
.program-cards a { margin-top: auto; padding: 4px 0; font-weight: 600; }
/* One card per row on a phone: photo beside the name, so nine cards stay short. */
@media (max-width: 599px) {
  .program-cards li {
    display: grid;
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 16px;
    align-items: center;
    padding: 14px 16px;
    text-align: left;
  }
  .program-cards img { grid-row: 1 / 3; width: 72px; height: 72px; }
  .program-cards h4 { align-self: end; font-size: 1.1rem; }
  .program-cards a { align-self: start; justify-self: start; margin: 0; }
}

.projects { list-style: none; padding: 0; }
.projects li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.projects li:last-child { border-bottom: 1px solid var(--rule); }
.projects a,
.projects .title { font-weight: 600; color: var(--dark); }
.projects a { color: #a8001a; }
.projects .byline { font-size: .95rem; color: var(--muted); }

/* SEU Network map key: each swatch beside its label, outlined so it holds
   3:1 against the page (the yellow alone does not). */
.legend {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 8px;
  font-size: .95rem;
}
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--dark);
}
/* The 2025–26 Datawrapper map's colors, as seu.edu keyed them. */
.swatch-dw-regional { background: #1d2026; }
.swatch-dw-partner { background: #ce0019; }
.swatch-dw-dual { background: #c1c6c8; }

/* Faculty: charts in pairs where they fit. */
.chart-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 0 40px;
}

/* Library & Computer Resources: label and count, in as many columns as fit. */
.library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0 24px;
}
.library div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.library dt { font-weight: 500; }
.library dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dark); }
.library .total dt,
.library .total dd { color: #a8001a; font-weight: 700; }
/* The total ends the list on a row of its own; computers are not in it,
   so they follow in a list of their own. */
.library .total { grid-column: 1 / -1; border-top: 2px solid var(--rule); margin-top: -1px; }
.library-more { margin-top: 16px; }

/* Footer ------------------------------------------------------------------ */
.site-footer {
  background: var(--dark);
  color: #fff;
  font-size: .95rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  padding-top: 32px;
  padding-bottom: 32px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.footer-links {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: 24px;
}
.footer-h {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.footer-links ul { display: block; }
.footer-links a { display: inline-block; padding: 4px 0; color: #d4d6da; text-decoration: none; line-height: 1.35; overflow-wrap: anywhere; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-brand {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--dark-2);
}
.footer-brand img { display: block; width: 128px; max-width: 100%; height: auto; }
.footer-brand .address { margin: 0; color: #d4d6da; }
.footer-brand .address a { color: #fff; }
.footer-brand .address span::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 .5em 0 .4em;
  vertical-align: -.15em;
  background: currentColor;
}
.site-footer .legal { gap: 4px 20px; flex: 1 1 100%; }
.site-footer .legal a { display: inline-block; padding: 6px 0; color: #fff; }
.site-footer .copyright { margin: 0; margin-right: auto; color: #d4d6da; }
.site-footer .social { gap: 8px; }
.site-footer .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dark-2);
  color: #fff;
  font-size: 20px;
}
.site-footer .social a:hover { background: var(--red); }