@charset "UTF-8";
/* ==========================================================================
   Rutgers Physics & Astronomy — Graduate Student Organization
   Stylesheet matched to the SAS "cassiopeia_sas" template used by
   https://physics.rutgers.edu

   Design tokens taken from:
     /media/templates/site/cassiopeia_sas/css/user.css
     /media/templates/site/cassiopeia/css/global/colors_standard.min.css

   Accessibility target: WCAG 2.1 Level AA (ADA Title II, 28 CFR 35.200).
   Every foreground/background pair below is verified >= 4.5:1 for body text
   and >= 3:1 for large text, icons and UI component boundaries.
   See tools/contrast-check.py for the automated proof.
   ========================================================================== */

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

:root {
  /* Brand ---------------------------------------------------------------- */
  --ru-scarlet:        #cc0033;  /* 5.81:1 on #fff  — AA for body text      */
  --ru-scarlet-dark:   #a10028;  /* 8.06:1 on #fff  — for small-text links  */
  --ru-black:          #000000;
  --ru-white:          #ffffff;

  /* Ink ------------------------------------------------------------------ */
  --ink:               #22262a;  /* 15.2:1 on #fff — the live site's body ink */
  --ink-muted:         #4a4a4a;  /* 8.86:1 on #fff                          */
  --link:              #000000;  /* the live site links in pure black        */
  --ink-inverse:       #ffffff;

  /* Surfaces ------------------------------------------------------------- */
  --surface:           #ffffff;
  --surface-alt:       #f4f4f4;
  --surface-dark:      #111111;
  --border:            #d3d3d3;
  --border-strong:     #767676;  /* 4.54:1 on #fff — AA non-text contrast   */

  /* Type ----------------------------------------------------------------- */
  --font-display: "PT Serif", Georgia, "Times New Roman", serif;
  --font-ui:      "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-accent:  "Oswald", "Source Sans Pro", Helvetica, Arial, sans-serif;

  /* One scale, six steps. Nothing in the page picks a size outside it, so a
     heading is the same size wherever it appears and running prose is the
     same size whether it is an intro or an abstract.

       display  36px  h1, the scarlet page-title band          PT Serif
       xl       28px  h2, section headings                     PT Serif
       lg       20px  h3, lede paragraphs                      Source Sans Pro
       md       17px  h4 and all running prose                 Source Sans Pro
       sm       15px  bylines, captions, notes, sidebar links  Source Sans Pro
       xs       13px  badges, counts, eyebrow labels           Oswald / SSP  */
  --text-display: 2.25rem;
  --text-xl:      1.75rem;
  --text-lg:      1.25rem;
  --text-md:      1.0625rem;
  --text-sm:      0.9375rem;
  --text-xs:      0.8125rem;

  --leading-tight: 1.3;
  --leading-meta:  1.45;
  --leading-body:  1.6;

  /* Rhythm --------------------------------------------------------------- */
  --measure:      72rem;   /* max content width                              */
  --gutter:       1.25rem;
  --radius:       2px;

  /* Focus ---------------------------------------------------------------- */
  --focus-ring:   3px solid #cc0033;
  --focus-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */

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

html {
  /* Anchored headings clear the sticky masthead (WCAG 2.4.1 in practice). */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-md);   /* resizable — never a fixed px size on text */
  line-height: var(--leading-body);
}

/* WCAG 1.4.12 Text Spacing: nothing may clip or overlap when a user forces
   line-height 1.5, letter-spacing .12em, word-spacing .16em, paragraph 2em.
   All vertical rhythm below uses margins and auto heights, never fixed
   heights on text containers, so the page reflows instead of clipping. */

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

/* --------------------------------------------------------------------------
   3. Links — WCAG 1.4.1: never colour alone; body links keep an underline
   -------------------------------------------------------------------------- */

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
}

a:hover { color: var(--ru-scarlet); text-decoration-thickness: 2px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius);
}

/* Fallback for engines without :focus-visible. */
a:focus, button:focus, input:focus, summary:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
summary:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   4. Skip link — WCAG 2.4.1 Bypass Blocks
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100vh;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--ru-scarlet);
  color: var(--ru-white);
  font-family: var(--font-ui);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 0.5rem; color: var(--ru-white); }

/* Visually hidden but exposed to assistive technology. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   5. Layout shell
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   6. Masthead — utility bar / SAS branding / primary nav
   -------------------------------------------------------------------------- */

.masthead { border-bottom: 1px solid var(--border); background: var(--surface); }

/* physics.rutgers.edu runs its masthead the full width of the viewport with a
   30px inset, not inside the centred content measure. Measured on the live
   page: the SAS signature sits at x:30, and the main menu is pushed to the
   right-hand edge. Only the masthead does this — the article column keeps its
   reading measure below. */
.masthead .shell {
  max-width: none;
  padding-inline: 1.875rem;
}

/* 6a. Utility bar ---------------------------------------------------------- */
/* On physics.rutgers.edu this row sits on the white header, in bold black
   13px type — it is not a dark bar. */
.utility-bar { background: var(--surface); font-size: var(--text-xs); }

.utility-bar .shell {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1.5rem;
  padding-block: 0.5rem;           /* live utility row: 41px tall */
}

.utility-bar a {
  color: var(--link);              /* 21:1 on white */
  text-decoration: none;
  font-weight: 700;
  /* WCAG 2.5.8 Target Size (Minimum) — 24x24 CSS px. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-inline: 2px;
}
.utility-bar a:hover { text-decoration: underline; color: var(--ru-scarlet); }

/* 6b. SAS branding band ---------------------------------------------------- */
/* physics.rutgers.edu stacks the SAS signature above the unit title, both
   flush left, in a 123px band. Measured from the live page: logo 380x65,
   unit title 24px PT Serif on the row beneath it. */
.branding .shell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  padding-block: 1rem 1.25rem;
}

.branding__logo { display: inline-flex; align-items: center; }
.branding__logo img { width: 380px; max-width: 100%; height: auto; display: block; }

.branding__unit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;               /* live site: 24px PT Serif */
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
}
.branding__unit:hover { color: var(--ru-scarlet); text-decoration: underline; }
.branding__unit small {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* 6c. Primary navigation --------------------------------------------------- */
.nav-bar { border-top: 1px solid var(--border); background: var(--surface); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-block: 0.5rem;
  padding: 0.625rem 0.875rem;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--border-strong);   /* 4.54:1 — AA non-text contrast */
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--ru-scarlet); color: var(--ru-scarlet); }

.nav-toggle__bars { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 1.75rem;
  margin: 0 0 0 auto;              /* pushed to the right edge, as on the live site */
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.75rem;          /* live nav bar: 56px tall */
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.1rem;               /* live site: 17.6px Source Sans Pro */
  color: var(--link);
  text-decoration: none;
  border-bottom: 4px solid transparent;   /* SAS active-item treatment */
}
.nav-list a:hover,
.nav-list a[aria-current="page"] {
  color: var(--link);
  border-bottom-color: var(--ru-scarlet);
}
/* The 4px rule is a separate mark, not a colour change, so dropping the
   underline here keeps WCAG 1.4.1 satisfied. aria-current carries the same
   information to assistive technology. */
.nav-list a[aria-current="page"] { text-decoration: none; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

/* physics.rutgers.edu carries the page title in a full-width scarlet band
   (its .sas-extension-top), white PT Serif, centred. Reproduced here so the
   accent colour does the work the live site gives it. */
.pagetitle { background: var(--ru-scarlet); }
.pagetitle .shell { padding-block: 1.375rem; }

.pagetitle h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.25rem);   /* live site: 36px */
  line-height: 1.2;
  text-align: center;
  color: var(--ru-white);                    /* 5.81:1 on #cc0033 */
}

/* --------------------------------------------------------------------------
   8. Content grid — main column + in-page sidebar
   -------------------------------------------------------------------------- */

.layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  padding-block: 2.5rem 3.5rem;
}

/* 8a. Section navigation (SAS left-side-menu) ------------------------------ */
.sidenav { position: sticky; top: 1.5rem; }

.sidenav h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.sidenav ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--border); }

.sidenav a {
  display: block;
  padding: 0.5rem 0 0.5rem 1.125rem;
  margin-left: -1px;
  border-left: 4px solid transparent;   /* SAS .left-side-menu li.active > a */
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  line-height: var(--leading-meta);
}
.sidenav a:hover,
.sidenav a[aria-current="true"] {
  border-left-color: var(--ru-scarlet);
  color: var(--ru-scarlet-dark);        /* 8.25:1 — AA at this small size */
}
.sidenav a:hover { text-decoration: underline; }

/* 8b. Main column ---------------------------------------------------------- */
.content { min-width: 0; }

.content > section + section { margin-top: 3rem; }

.content h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);            /* SAS: .h2, h2 { 1.75rem } */
  line-height: 1.25;
  color: var(--ink);
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--ru-scarlet);
}

.content h3 {
  margin: 2rem 0 0.75rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--ink);
}

.content p { margin: 0 0 1rem; max-width: 72ch; }

.lede { font-size: var(--text-lg); line-height: 1.5; }

figure { margin: 0 0 1.5rem; }

/* The only Serin photographs the department has on file are about 400 px
   wide, so the image is capped at its native width rather than upscaled.
   Raise this cap if a higher-resolution photograph becomes available. */
figure img {
  display: block;
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--border);
}

figcaption {
  margin-top: 0.5rem;
  max-width: 60ch;
  font-size: var(--text-sm);
  line-height: var(--leading-meta);
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   9. Officer roster
   -------------------------------------------------------------------------- */

.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }

.roster > li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding: 0.75rem 0.875rem;
  border-left: 4px solid var(--border);
  background: var(--surface-alt);
}
.roster > li:nth-child(odd) { background: var(--surface); }

.roster .role {
  flex: 0 0 15rem;
  font-weight: 700;
  color: var(--ink);
}
.roster .who { min-width: 0; }
.roster .who a { word-break: break-word; }

/* A post held by more than one person: names stacked down the right column,
   in surname order. */
.roster .people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}
.roster .people > li { padding: 0; border: 0; background: none; }

/* A post held by more than one person: names stacked in the right column,
   in surname order. */
.roster .people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}
.roster .people > li { padding: 0; border: 0; background: none; }

/* --------------------------------------------------------------------------
   10. Link lists / document lists
   -------------------------------------------------------------------------- */

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

.linklist li {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
}
.linklist li:last-child { border-bottom: 0; }

.linklist a { font-weight: 600; }

/* File-format badge. Text carries the meaning as well as the colour, so this
   satisfies WCAG 1.4.1 Use of Colour. */
.filetype {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.0625rem 0.4375rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #595959;                        /* 7.0:1 on #fff */
  background: var(--surface);
  white-space: nowrap;
  vertical-align: 0.05em;
}

.linklist .note {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--leading-meta);
  color: var(--ink-muted);
}

/* External-link marker. aria-hidden in the markup; the link text itself says
   "(opens in a new tab)" for screen-reader users where relevant. */
.ext { font-size: 0.8em; margin-left: 0.25rem; }

/* --------------------------------------------------------------------------
   11. Callout
   -------------------------------------------------------------------------- */

.callout {
  margin: 1.5rem 0;
  padding: 1.125rem 1.25rem;
  background: var(--surface-alt);
  border-left: 6px solid var(--ru-scarlet);
}
.callout > :last-child { margin-bottom: 0; }
.callout h3 { margin-top: 0; }

/* --------------------------------------------------------------------------
   11a. Seminar archive (SSPAR)

   Native <details>/<summary> rather than a scripted accordion: it is keyboard
   operable, reports its own expanded state to assistive technology, and works
   with JavaScript disabled. The term name is an h3 inside the summary, which
   the HTML content model permits, so the outline runs h2 -> h3 -> h4 and
   screen-reader users can jump between semesters by heading.
   -------------------------------------------------------------------------- */

.term { border-bottom: 1px solid var(--border); }
.term:first-of-type { border-top: 1px solid var(--border); }

.term > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.875rem 0.5rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;                     /* replaced by the marker below */
  border-left: 4px solid transparent;
  margin-left: -0.5rem;
}
.term > summary::-webkit-details-marker { display: none; }

/* Disclosure triangle as a flex item, so it stays centred on the term name
   whatever the text size. Drawn with borders so it survives forced colours. */
.term > summary::before {
  content: "";
  flex: 0 0 auto;
  margin-left: 0.5rem;
  width: 0;
  height: 0;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.term[open] > summary::before { transform: rotate(90deg); }

@media (prefers-reduced-motion: no-preference) {
  .term > summary::before { transition: transform 0.15s ease; }
}

.term > summary:hover { border-left-color: var(--ru-scarlet); color: var(--ru-scarlet-dark); }
.term[open] > summary { border-left-color: var(--ru-scarlet); }

.term > summary .term__name {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-lg);            /* an h3 is an h3 wherever it sits */
  line-height: var(--leading-tight);
  color: inherit;
}

.term__count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-muted);              /* 8.86:1 on white */
}
.term > summary:hover .term__count { color: inherit; }

.term__count { line-height: var(--leading-tight); }

.talk {
  padding: 1rem 0 1rem 2rem;
  border-top: 1px solid var(--surface-alt);
}
.talk:first-of-type { border-top: 0; }

.content .talk h4 {
  margin: 0 0 0.25rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: var(--leading-tight);
  color: var(--ink);
}

.talk__meta {
  margin: 0 0 0.5rem;
  font-size: var(--text-sm);
  line-height: var(--leading-meta);
  font-weight: 600;
  color: var(--ink-muted);
}
.talk__who + .talk__date::before { content: "\00b7"; margin: 0 0.4em; }

.talk p:last-child { margin-bottom: 0; }

@media (max-width: 30rem) {
  .talk { padding-left: 0.5rem; }
}

/* --------------------------------------------------------------------------
   11b. Event cards (Events page)
   -------------------------------------------------------------------------- */

.event {
  padding: 1.125rem 0 1.125rem 1.125rem;
  border-left: 4px solid var(--border);
  margin-bottom: 0.75rem;
}
.event:hover { border-left-color: var(--ru-scarlet); }

.event__when {
  margin: 0 0 0.25rem;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);            /* 8.86:1 on white */
}
.event__time::before { content: "\00b7"; margin: 0 0.4em; }

.content .event h3, .content .event h4 {
  margin: 0 0 0.25rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}
.content .event h4 { font-size: var(--text-md); }

.event__where {
  margin: 0 0 0.5rem;
  font-size: var(--text-sm);
  line-height: var(--leading-meta);
  font-weight: 600;
  color: var(--ink-muted);
}

.event p:last-child { margin-bottom: 0; }

/* Events nested inside a year disclosure sit on the panel's own rule. */
.term .event { border-left-width: 0; padding-left: 2rem; }
.term .event:hover { border-left-width: 0; }

/* Provenance note at the foot of a generated page. */
.dataline {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

@media (max-width: 30rem) {
  .term .event { padding-left: 0.5rem; }
}

/* --------------------------------------------------------------------------
   12. Buttons (SAS .button)
   -------------------------------------------------------------------------- */

.button {
  display: inline-block;
  padding: 0.6875rem 1.25rem;
  min-height: 44px;
  background: var(--ru-scarlet);
  border: 0.125rem solid var(--ru-scarlet);
  border-radius: var(--radius);
  color: var(--ru-white);               /* 5.81:1 on #cc0033 */
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
  line-height: var(--leading-tight);
}
.button:hover {
  background: var(--ru-scarlet-dark);
  border-color: var(--ru-scarlet-dark);
  color: var(--ru-white);
  text-decoration: underline;
}
.button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--ru-black); color: var(--ru-white); margin-top: 0; }

.site-footer__identity { padding-block: 1.25rem; border-bottom: 1px solid #333; }
.site-footer .shell { max-width: none; padding-inline: 1.875rem; }
.site-footer__identity .shell {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem 2rem;
}
.site-footer__identity img { width: 300px; max-width: 100%; height: auto; display: block; }

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem 2rem;
  padding-block: 2rem 1.5rem;
}

.site-footer h2 {
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ru-white);
}

.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: 0.8125rem; }

.site-footer a {
  color: var(--ru-white);              /* 21:1 on black */
  text-decoration: none;
  display: inline-flex; align-items: center; min-height: 24px;
}
.site-footer a:hover { text-decoration: underline; color: var(--ru-white); }
.site-footer a:focus-visible { outline: 3px solid var(--ru-white); outline-offset: 2px; }

/* File-type badges sit on the black footer, so invert them there. */
.site-footer .filetype {
  background: transparent;
  color: var(--ru-white);              /* 21:1 on black */
  border-color: var(--ru-white);
}

.site-footer__legal {
  padding-block: 1.25rem 2rem;
  border-top: 1px solid #333;
  font-size: var(--text-sm);
  color: #e0e0e0;                      /* 16.6:1 on black */
}
.site-footer__legal p { margin: 0 0 0.5rem; max-width: 80ch; }
.site-footer__legal a { text-decoration: underline; }

/* 13a. Inline footer link row (SAS utility links repeated in the footer) --- */
.footer-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-weight: 600;
}
.footer-inline li { margin: 0; }

/* --------------------------------------------------------------------------
   13b. Inline code and keys (used in the accessibility statement)
   -------------------------------------------------------------------------- */

code, kbd {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9375em;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.0625rem 0.3125rem;
  color: #333;                          /* 12.6:1 on #f4f4f4 */
  word-break: break-word;
}
kbd { border-bottom-width: 2px; font-weight: 600; }

.content li code, .content li kbd { white-space: nowrap; }

/* Long link lists in the statement carry prose, so let them breathe. */
.linklist li > strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   14. Responsive — WCAG 1.4.10 Reflow (no h-scroll down to 320 CSS px)
   -------------------------------------------------------------------------- */

@media (max-width: 62rem) {
  .layout { grid-template-columns: 1fr; gap: 1.75rem; }
  .sidenav { position: static; }
  .sidenav ul {
    display: flex; flex-wrap: wrap; gap: 0 0.25rem;
    border-left: 0; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem;
  }
  .sidenav a { border-left: 0; border-bottom: 4px solid transparent; padding: 0.5rem 0.625rem; margin-left: 0; }
  .sidenav a:hover,
  .sidenav a[aria-current="true"] { border-left-color: transparent; border-bottom-color: var(--ru-scarlet); }
}

@media (max-width: 48rem) {
  .masthead .shell, .site-footer .shell { padding-inline: var(--gutter); }
  .nav-list { justify-content: flex-start; margin-left: 0; }
  .nav-toggle { display: inline-flex; }

  .nav-list {
    display: none;
    flex-direction: column;
    gap: 0;
    padding-bottom: 0.75rem;
  }
  .nav-list.is-open { display: flex; }
  .nav-list li { border-top: 1px solid var(--border); }
  .nav-list a {
    display: flex; width: 100%;
    padding: 0.75rem 0.5rem;
    border-bottom: 0; border-left: 4px solid transparent;
  }
  .nav-list a:hover,
  .nav-list a[aria-current="page"] { border-bottom: 0; border-left-color: var(--ru-scarlet); }

  .pagetitle .shell { padding-block: 1rem; }

  .roster .role { flex: 1 1 100%; }
}

@media (max-width: 48rem) {
  .branding__logo img { width: 300px; }
}

@media (max-width: 30rem) {
  :root { --gutter: 1rem; }
  .branding__logo img { width: 250px; }
  .branding__unit { font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   15. User preferences & assistive modes
   -------------------------------------------------------------------------- */

/* WCAG 2.3.3 / prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* WCAG 1.4.11 — keep component boundaries visible in forced-colours mode. */
@media (forced-colors: active) {
  .nav-list a[aria-current="page"],
  .sidenav a[aria-current="true"] { border-color: Highlight; }
  .button { border: 2px solid ButtonText; }
  a:focus-visible, button:focus-visible { outline: 3px solid Highlight; }
}

/* --------------------------------------------------------------------------
   16. Print
   -------------------------------------------------------------------------- */

@media print {
  .utility-bar, .nav-bar, .sidenav, .skip-link { display: none; }
  body { color: #000; font-size: 11pt; }
  .pagetitle { background: #fff; }
  .pagetitle h1 { color: #000; text-align: left; }
  .site-footer { background: #fff; color: #000; }
  .site-footer a { color: #000; }
  .layout { display: block; }
  /* Expose destinations of links on paper. */
  .content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}