/* nav.css — REVISION 2 (Oct 2026): claymorphism chrome, light only. Loaded AFTER site.css → type.css → cards.css
   in every page head; later rules win at equal specificity. Owner: Nav (DESIGN-SPEC §6, REVISION-2 R1–R5 "Nav", R7).

   Covers the page chrome only: the floating nav capsule, its links + travelling gold underline, the CTA pill, the
   Members dropdown, the mobile-menu toggle, the university strip, the mobile menu sheet, the footer, the stats
   ticker, the scroll-progress rule and the scroll clearance that keeps keyboard focus out from under them.

   Material (REVISION-2 R3): every surface here is a soft clay object — no borders, depth from layered outer +
   inner shadows only. The clay tokens (--clay, --clay-shadow, --clay-pressed, --clay-navy …) live in type.css;
   §0 below aliases them with the exact R3 values as fallbacks, so the chrome renders correctly whichever file
   lands first.

   Light only (R7): the dark theme and its toggle are gone. site.css still carries html.dark rules, but nothing
   ever adds the class, so none of them can match; this file has no dark rules of its own.

   Cascade notes
   - tailwind.css (v4) lives entirely in @layer, so every unlayered rule here beats a utility class. That cuts
     both ways: never set `display` on an element that relies on `hidden` / `sm:inline` / `md:inline-flex` /
     `lg:hidden` (#mobile-menu, the header's right-hand cluster, the uni-strip spans and link), or it would show
     at the wrong width.
   - !important appears only where the DESIGN-SPEC §2.0 ledger allows it: capsule padding/gap, mobile-menu border +
     background, dropdown padding/radius/background/border-colour and CTA background/colour. The footer needs
     none: its markup carries no border/hover utilities, and every footer rule here is unlayered.
   - Every hover/press transform, shadow step, weight tween and the indicator's travel sit inside
     `prefers-reduced-motion: no-preference`; the rest state is the static state.

   Borrowed patterns (21st.dev): 24338 Neomorphism Metric Card — outer dual shadow + inset highlight on the
   capsule, dropdown, sheet and footer; 2318 Squishy card — the press (pressed well + scale .98);
   23319 Great UI Aceternity Button — the convex CTA (top-lit gradient, inset glow that brightens on hover,
   scale on press); 1592 Glow menu — the capsule shell, without glass or glow. */


/* ============================================================== 0. CLAY ALIASES (fallbacks = REVISION-2 R3) */
:root {
  --_clay:          var(--clay, #F3F6FA);
  --_clay-blue:     var(--clay-blue, #E6EEFB);
  --_clay-navy:     var(--clay-navy, #0B3466);
  --_clay-shadow:   var(--clay-shadow,
                      14px 14px 30px -6px rgb(23 42 82 / .17),
                      -10px -10px 24px -6px rgb(255 255 255 / .95),
                      inset 3px 3px 7px rgb(255 255 255 / .9),
                      inset -5px -5px 12px rgb(23 42 82 / .07));
  --_clay-shadow-hover: var(--clay-shadow-hover,
                      22px 22px 44px -8px rgb(23 42 82 / .23),
                      -12px -12px 28px -6px rgb(255 255 255 / 1),
                      inset 3px 3px 7px rgb(255 255 255 / .95),
                      inset -6px -6px 14px rgb(23 42 82 / .09));
  --_clay-pressed:  var(--clay-pressed, inset 6px 6px 12px rgb(23 42 82 / .14), inset -6px -6px 12px rgb(255 255 255 / .9));
  /* Mini-surface (chips, toggles on hover) and the soft separator line between rows (R5 news/feed recipe). */
  --_clay-chip:     3px 3px 6px rgb(23 42 82 / .12), -3px -3px 6px rgb(255 255 255 / .9);
  --_clay-chip-pressed: inset 3px 3px 6px rgb(23 42 82 / .14), inset -3px -3px 6px rgb(255 255 255 / .85);
  --_clay-sep:      rgb(23 42 82 / .08);
  /* Floating chrome (capsule, dropdown, mobile sheet) spends half its life over the navy hero slabs and the
     photo hero, where R3's -10px/.95 white highlight reads as a halo. Same recipe, highlight pulled in. */
  --_float-shadow:  12px 12px 28px -10px rgb(23 42 82 / .26), -5px -5px 14px -8px rgb(255 255 255 / .6),
                    inset 3px 3px 7px rgb(255 255 255 / .9), inset -5px -5px 12px rgb(23 42 82 / .08);
  --_float-shadow-raised: 18px 18px 38px -12px rgb(23 42 82 / .32), -6px -6px 16px -8px rgb(255 255 255 / .7),
                    inset 3px 3px 7px rgb(255 255 255 / .95), inset -6px -6px 14px rgb(23 42 82 / .09);
  /* Navy clay CTA (23319): top-lit convex pill. */
  --_cta-face:      linear-gradient(180deg, #164C8E 0%, var(--_clay-navy) 100%);
  --_cta-face-hover: linear-gradient(180deg, #1D5AA6 0%, #0E3F7A 100%);
  --_cta-shadow:    4px 4px 10px -3px rgb(0 28 66 / .42), -3px -3px 8px -3px rgb(255 255 255 / .9),
                    inset 0 0 10px rgb(255 255 255 / .1), inset 1px 1px 2px rgb(255 255 255 / .22),
                    inset -2px -2px 5px rgb(0 0 0 / .25);
  --_cta-shadow-hover: 6px 6px 14px -4px rgb(0 28 66 / .5), -3px -3px 8px -3px rgb(255 255 255 / .95),
                    inset 0 0 18px rgb(255 255 255 / .18), inset 1px 1px 2px rgb(255 255 255 / .26),
                    inset -2px -2px 5px rgb(0 0 0 / .25);
  --_cta-pressed:   inset 3px 3px 7px rgb(0 0 0 / .42), inset -2px -2px 5px rgb(255 255 255 / .1);
  /* Ink (R2): navy-cast. --ink / --ink-2 already exist; the two new ones degrade to their nearest neighbour. */
  --_ink-strong:    var(--ink-strong, var(--ink));
  --_accent-ink:    var(--accent-ink, var(--navy-ink));
  /* Chrome that floats over the page: the sticky capsule (--nav-h, measured by redesign.js) and the fixed
     ~28px ticker (.5rem + 12px + .5rem, §9). */
  --_ticker-h:      28px;
}


/* ============================================================== 0b. FOCUS CLEARANCE (WCAG 2.4.11) */
/* A focused control must never scroll in under the sticky capsule or the fixed ticker. scroll-padding makes
   the browser's focus scrolling stop short of both. It only applies while something has keyboard focus:
   the frozen site.css already puts scroll-margin-top on #pub-list and on each page's first section, so a
   permanent scroll-padding would double those offsets on hash loads and mouse-clicked anchors. */
html:has(:focus-visible) { scroll-padding-top: calc(var(--nav-h, 66px) + 1rem); }
/* The ticker is display: none at <= 640px (site.css), so only wider screens need the bottom clearance. */
@media (min-width: 641px) {
  html:has(:focus-visible) { scroll-padding-bottom: calc(var(--_ticker-h) + .75rem); }
}


/* ============================================================== 1. CAPSULE — a clay pill */
/* No border (site.css 2952 drew a 1px hairline). The surface lives on ::before so the blur can stay as a
   legibility fallback over the photo hero without ever turning the pill back into glass: at 92% clay the
   backdrop barely shows through. */
header[data-scroll-nav] > div:first-child {
  border: 0;
  border-radius: var(--radius-pill);
  padding: .3rem .5rem !important;
  gap: .25rem !important;
}
header[data-scroll-nav] > div:first-child::before {
  inset: 0;
  background: color-mix(in oklab, var(--_clay) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--_float-shadow);
  transition: box-shadow var(--duration-standard) var(--ease-out), background-color var(--duration-standard) var(--ease-out);
}
/* Scrolled: the pill now floats over content, so it gets the hover depth and goes fully opaque. */
header[data-scroll-nav].nav-scrolled > div:first-child::before {
  background: color-mix(in oklab, var(--_clay) 97%, transparent);
  box-shadow: var(--_float-shadow-raised);
}
@media (prefers-reduced-transparency: reduce) {
  header[data-scroll-nav] > div:first-child::before,
  header[data-scroll-nav].nav-scrolled > div:first-child::before {
    background: var(--_clay);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
/* At >= 1024px the right-hand cluster (only the lg:hidden menu toggle since R7) is hidden, so the CTA pill is
   the capsule's last item: inset it by the same .3rem the capsule leaves above and below it, so it reads as a
   pill nested in a pill rather than one parked short of the end. */
@media (min-width: 1024px) {
  header[data-scroll-nav] > div:first-child { padding-right: .3rem !important; }
}
/* The wordmark's Tailwind group-hover scale is a hover transform: keep it for motion-tolerant users only. */
@media (prefers-reduced-motion: reduce) {
  header[data-scroll-nav] .group:hover .brand-logo { transform: none; }
}


/* ============================================================== 2. LINKS + TRAVELLING UNDERLINE */
/* Host Grotesk is duplexed (0 HVAR deltas), so 500 → 600 is pure ink gain: the island width never changes and
   redesign.js's measured indicator rects stay valid. Rest ink is the navy-cast meta tone (5.4:1 on clay);
   hover/active go to the heading ink. */
.nav-link {
  height: 2.75rem;
  padding: 0 .85rem;
  font: 500 .875rem/1 var(--font-sans);
  letter-spacing: 0;
  color: var(--ink-2);
  transition: color var(--duration-fast) var(--ease-out), font-weight var(--duration-ink) var(--ease-out);
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active,
.nav-link[aria-expanded="true"] { color: var(--_ink-strong); background: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .nav-link:hover,
  .nav-link:focus-visible,
  .nav-link.is-active { font-weight: 600; }
}

/* The travelling highlight: a 3px bead with round ends that sits under the label. redesign.js writes only
   width + translateX (sized to the label's content box); the vertical placement is anchored here from the
   bottom — never from JS. Gold ink, not #FFCC00: raw gold is ~1.4:1 on the clay pill, too faint to carry the
   current-page cue on its own; #8A6400 is ~5:1 (WCAG 1.4.11) and still reads as Marquette gold. */
.nav-indicator {
  top: auto;
  bottom: .3rem;
  height: 3px;
  border-radius: 3px;
  background: var(--gold-ink, #8A6400);
  box-shadow: 0 1px 2px rgb(138 100 0 / .3);
  transition: opacity .2s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .nav-indicator {
    transition: transform .42s var(--ease-spring), width .42s var(--ease-spring), opacity .2s var(--ease-out);
  }
}


/* ============================================================== 3. CTA — navy clay pill (last link, tagged by redesign.js) */
.nav-link--cta {
  background: var(--_cta-face) !important;
  color: #fff !important;
  border-radius: var(--radius-pill);
  padding-inline: 1.15rem;
  font-weight: 600;
  box-shadow: var(--_cta-shadow);
  filter: none;
  transition: box-shadow var(--duration-standard) var(--ease-out), transform var(--duration-standard) var(--ease-out);
}
.nav-link--cta:hover { background: var(--_cta-face-hover) !important; color: #fff !important; filter: none; transform: none; }
.nav-link--cta:active { transform: none; }
/* The CTA is the current page (contact.html): it reads as pressed in, with gold ink (8.3:1 on navy). */
.nav-link--cta.is-active,
.nav-link--cta.is-active:hover { box-shadow: var(--_cta-pressed); transform: none; color: var(--brand-gold) !important; }
@media (prefers-reduced-motion: no-preference) {
  .nav-link--cta:not(.is-active):hover { box-shadow: var(--_cta-shadow-hover); transform: translateY(-1px); }
  .nav-link--cta:active { box-shadow: var(--_cta-pressed); transform: translateY(0) scale(.97); }
}


/* ============================================================== 4. MEMBERS DROPDOWN — a clay panel */
[data-dropdown-menu] {
  min-width: 13rem;
  padding: .45rem !important;
  border-width: 0;
  border-radius: 1.125rem !important;
  background: var(--_clay) !important;
  border-color: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--_float-shadow);
}
/* The caret (site.css 2787) was a hairline diamond; a moulded panel has no seam to point with. The ::before
   hover bridge (site.css 2326) is untouched. */
[data-dropdown-menu]::after { content: none; }

.nav-menu-item {
  font: 500 .9375rem/1.2 var(--font-sans);
  padding: .65rem .9rem;
  color: var(--ink);
  border-radius: .8rem;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.nav-menu-item:hover,
.nav-menu-item:focus { padding-left: .9rem; color: var(--_ink-strong); background: var(--_clay-blue); }
/* site.css 1477 strips the outline on :focus; keyboard users get the ring back, on the item's own radius. */
.nav-menu-item:focus-visible { outline: var(--focus-ring); outline-offset: -2px; border-radius: .8rem; }
/* The page you are on (redesign.js markCurrent sets aria-current): a pressed well (R3 selected state). */
.nav-menu-item[aria-current="page"] {
  font-weight: 600;
  color: var(--_ink-strong);
  box-shadow: var(--_clay-pressed);
}


/* ============================================================== 5. MOBILE-MENU TOGGLE + PILL FOCUS RINGS */
/* Flat inside the capsule at rest; on hover it rises as a clay mini-button, on press (and while the menu is
   open) it sinks. */
header[data-scroll-nav] #mobile-menu-toggle {
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  background: transparent;
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
header[data-scroll-nav] #mobile-menu-toggle:hover {
  color: var(--_ink-strong);
  background: var(--_clay);
  box-shadow: var(--_clay-chip);
}
header[data-scroll-nav] #mobile-menu-toggle:active,
header[data-scroll-nav] #mobile-menu-toggle[aria-expanded="true"] {
  color: var(--_ink-strong);
  background: var(--_clay);
  box-shadow: var(--_clay-chip-pressed);
}
/* site.css 660 gives every focused link/button `border-radius: var(--radius-sm)` at (0,1,1), which beats the
   pills' own (0,1,0) radius and squares their focus ring off into a 10px rectangle. Pills keep pill rings. */
header[data-scroll-nav] :is(.nav-link, .nav-link--cta, #mobile-menu-toggle):focus-visible,
.marquee-pause:focus-visible { border-radius: var(--radius-pill); }


/* ============================================================== 6. UNIVERSITY STRIP */
/* A colophon, not a label (R1/R2): Host Grotesk, sentence case, no tracked mono caps. The markup's Tailwind
   `uppercase` / `tracking-[0.18em]` utilities are layered, so these unlayered values win. */
.uni-strip {
  background: var(--navy-panel);
  color: #fff;
  font: 500 .8125rem/1 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}
.uni-strip > div > span:first-child {
  flex: none;
  font-weight: 650;
  letter-spacing: .005em;
  text-transform: none;
  color: var(--brand-gold);                       /* 8.3:1 on navy */
}
/* The department line truncates rather than wrapping when the strip narrows. */
.uni-strip > div > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(255 255 255 / .8);
  opacity: 1;
}
/* The marquette.edu link fills the strip's full 32px height (its hit area was 13px tall; WCAG 2.5.8 asks for
   24px). It cannot reach 44px without spilling out of the 2rem strip. `display` stays with Tailwind's
   `hidden md:inline-flex`. */
.uni-strip a {
  flex: none;
  min-height: 2rem;
  color: rgb(255 255 255 / .85);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .3em;
  transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
}
.uni-strip a:hover,
.uni-strip a:focus-visible { color: var(--brand-gold); text-decoration-color: currentColor; }
/* site.css 1258 shrank the label to 10px/.14em for the old caps; below 640px it is the only thing on the strip. */
@media (max-width: 640px) {
  .uni-strip .max-w-\[1440px\] > span:first-child { font-size: .8125rem; letter-spacing: .005em; }
}


/* ============================================================== 7. MOBILE MENU (< 1024px) — a clay sheet */
/* An inset clay sheet hung under the capsule (same .75rem side inset as the header padding, so its edges line
   up with the pill). It is absolutely positioned, so opening it never changes the header's flow height (and so
   never moves --nav-h or the page under it). It sizes to its rows and caps at the viewport, scrolling inside
   on short screens. --menu-top is the header's measured bottom edge (redesign.js), which includes the
   uni-strip while it is still on screen; --nav-h is the first-paint fallback. While it is open, redesign.js
   makes the page behind it inert, so Tab stays inside the header. */
header[data-scroll-nav] > #mobile-menu {
  position: absolute;
  top: 100%;
  left: .75rem;
  right: .75rem;
  margin: .75rem 0 0;
  max-width: none;
  border-radius: 1.5rem;
  border: 0 !important;
  background: var(--_clay) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--_float-shadow);
  max-height: calc(100vh - var(--menu-top, var(--nav-h)) - 1.5rem);
  max-height: calc(100dvh - var(--menu-top, var(--nav-h)) - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#mobile-menu nav {
  grid-template-columns: 1fr;
  gap: 0;
  padding: .6rem;
}
/* Rows (R1: no 01…11 counters). Separators are soft drawn lines inset from the row edges — background, not
   border — so a hovered or current row simply replaces them with its own surface. */
#mobile-menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 1rem;
  border: 0;
  border-radius: 1rem;
  font: 600 1.3125rem/1.15 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--_ink-strong);
  background: none;
  isolation: auto;
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
#mobile-menu nav a + a {
  background: linear-gradient(var(--_clay-sep), var(--_clay-sep)) no-repeat 1rem 0 / calc(100% - 2rem) 1px;
}
/* site.css 1999–2008 painted a radial "bloom" on ::before and the previous pass put a mono counter there.
   Both retire (kill list, no !important; nothing below re-adds ::before content). */
#mobile-menu nav a::before { content: none; }
/* A chevron at the row end: the affordance that each row is a destination. */
#mobile-menu nav a::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-right: .25rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
  color: var(--ink-2);
  opacity: .55;
}
@media (hover: hover) {
  #mobile-menu nav a:hover { color: var(--_accent-ink); background: var(--_clay-blue); }
  #mobile-menu nav a:hover::after { color: currentColor; opacity: 1; }
}
/* Current page: a pressed well (R3 selected state) with a gold chevron. */
#mobile-menu nav a[aria-current="page"],
#mobile-menu nav a[aria-current="page"]:hover {
  color: var(--_ink-strong);
  background: transparent;
  font-weight: 700;
  box-shadow: var(--_clay-pressed);
}
#mobile-menu nav a[aria-current="page"]::after { color: var(--gold-ink); opacity: 1; }
/* The row after the current one loses its separator; the well already divides them. */
#mobile-menu nav a[aria-current="page"] + a { background-image: none; }

#mobile-menu nav a:nth-child(1)  { --i: 1; }
#mobile-menu nav a:nth-child(2)  { --i: 2; }
#mobile-menu nav a:nth-child(3)  { --i: 3; }
#mobile-menu nav a:nth-child(4)  { --i: 4; }
#mobile-menu nav a:nth-child(5)  { --i: 5; }
#mobile-menu nav a:nth-child(6)  { --i: 6; }
#mobile-menu nav a:nth-child(7)  { --i: 7; }
#mobile-menu nav a:nth-child(8)  { --i: 8; }
#mobile-menu nav a:nth-child(9)  { --i: 9; }
#mobile-menu nav a:nth-child(10) { --i: 10; }
#mobile-menu nav a:nth-child(11) { --i: 11; }
/* #mobile-menu is shown by removing .hidden, so both animations restart on every open. Guarded, so a
   reduced-motion visitor never waits out the stagger delays either. */
@media (prefers-reduced-motion: no-preference) {
  header[data-scroll-nav] > #mobile-menu { animation: menu-in 360ms var(--ease-out) both; }
  #mobile-menu nav a { animation: menu-item 460ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
  #mobile-menu nav a:active { transform: scale(.985); }
}
@keyframes menu-in   { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
@keyframes menu-item { from { opacity: 0; transform: translateY(8px); } }


/* ============================================================== 8. FOOTER — a clay slab (scoped to the page footer) */
/* Same anatomy as the navy page-hero slabs (R3): inset from the page edges, top corners rounded, moulded by
   shadow — no hairline on top. It rests on the ticker, so the bottom corners stay square.
   Width (R14): the one page box, type.css --page-inset (site.css --container-wide = min(94vw, 1920px), centred,
   never closer to the edge than --gutter) — the same inset the page-hero slabs and content regions take, so the
   footer's edges line up with them at every width. The fallback is the same formula (the §0 pattern: correct
   whichever file lands first). The inner Tailwind `max-w-[1440px]` wrappers are retargeted to --container-wide
   by site.css, so they never pinch it. */
body > footer {
  margin: 1rem var(--page-inset, max(var(--gutter, 1rem), (100% - var(--container-wide, min(94vw, 1920px))) / 2)) 0;
  border: 0;
  border-radius: 1.75rem 1.75rem 0 0;
  background: var(--_clay);
  box-shadow: var(--_clay-shadow);
  color: var(--ink-2);
  overflow: hidden;
}
/* Density (R4): the Tailwind py-12 / gap-10 grid tightens. */
body > footer > div:first-child {
  padding-block: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  row-gap: 1.75rem;
}
/* Phones: the brand block spans the slab, the link lists pair up two-a-row instead of stacking three tall
   single columns (R4 — no long empty scroll at the end of every page). */
@media (max-width: 767px) {
  body > footer > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
  body > footer > div:first-child > div:first-child { grid-column: 1 / -1; }
}
/* Desktop (R14 — no hollow panels): the Tailwind 1.4fr/1fr/1fr/1fr grid stretched three short link lists across
   the 1920px slab and left the right-hand ~300px empty. The brand block keeps a readable measure, the link
   columns size to their links and spread to the slab's padding edge, so the content spans the full card and
   the last column lines up with the bottom bar's right-aligned links. */
@media (min-width: 1024px) {
  body > footer > div:first-child {
    grid-template-columns: minmax(0, 26rem) repeat(3, max-content);
    justify-content: space-between;
  }
}
/* Column headings: Host Grotesk 600 in heading ink, sentence case (R2, R5 Nav). */
body > footer h4 {
  font: 600 .9375rem/1.3 var(--font-sans);
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--_ink-strong);
}
body > footer h4 + ul { margin-top: .85rem; }
body > footer p {
  font: 400 .9375rem/1.6 var(--font-sans);
  color: var(--ink-2);
}
body > footer ul a {
  color: var(--ink);
  font: 400 .9375rem/1.5 var(--font-sans);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
  transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out),
              font-weight var(--duration-ink) var(--ease-out);
}
body > footer ul a:hover,
body > footer ul a:focus-visible { color: var(--_accent-ink); text-decoration-color: var(--brand-gold); }
@media (prefers-reduced-motion: no-preference) {
  body > footer ul a:hover,
  body > footer ul a:focus-visible { font-weight: 500; }
}
/* The lab address: a clay chip with an envelope glyph (mask, so it takes the link colour). */
body > footer a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .6rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--_clay);
  box-shadow: var(--_clay-chip);
  font: 600 .875rem/1 var(--font-sans);
  color: var(--_accent-ink);
  text-decoration: none;
  transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
body > footer a[href^="mailto:"]::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body > footer a[href^="mailto:"]:hover,
body > footer a[href^="mailto:"]:focus-visible { text-decoration: none; color: var(--_ink-strong); }
body > footer a[href^="mailto:"]:active { box-shadow: var(--_clay-chip-pressed); }
@media (prefers-reduced-motion: no-preference) {
  body > footer a[href^="mailto:"]:hover { transform: translateY(-1px); }
  body > footer a[href^="mailto:"]:active { transform: translateY(0) scale(.98); }
}
/* Bottom bar: a soft separator instead of the Tailwind border-t hairline; Host Grotesk tabular colophon. */
body > footer > div.border-t {
  border-top: 0;
  box-shadow: inset 0 1px 0 var(--_clay-sep);
}
body > footer > div.border-t > div {
  padding-block: 1rem;
  font: 500 .8125rem/1.5 var(--font-sans);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
  color: var(--ink-2);
}
body > footer > div.border-t a {
  color: var(--ink-2);
  text-underline-offset: .2em;
  transition: color var(--duration-fast) var(--ease-out);
}
body > footer > div.border-t a:hover,
body > footer > div.border-t a:focus-visible { color: var(--_ink-strong); text-decoration: underline; }
/* The closing gold strip. */
body > footer > div.h-4 { height: 6px; }

/* Touch-size targets below the desktop layout (WCAG 2.5.5): every footer link becomes a 44px row. The list
   pitch was 20px links on 30px centres; the rows now touch, so Tailwind's space-y gap goes (it is layered, so
   the unlayered margin wins). The bottom bar trades its padding for the taller links. */
@media (max-width: 1023px) {
  body > footer ul > li { margin-block: 0; }
  body > footer h4 + ul { margin-top: .35rem; }
  body > footer ul a,
  body > footer > div.border-t a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
  body > footer a[href^="mailto:"] { min-height: 2.75rem; }
  body > footer > div.border-t > div { padding-block: .25rem; }
}


/* ============================================================== 9. TICKER — navy clay wire, Host Grotesk tabular caps */
aside.marquee-footer {
  background: var(--_clay-navy);
  border-top: 0;
  box-shadow: inset 0 1px 0 rgb(255 204 0 / .32), inset 0 2px 6px rgb(255 255 255 / .06), 0 -8px 20px -12px rgb(0 28 66 / .45);
  padding: .5rem 0;
}
.marquee-footer .marquee-track {
  font: 600 .75rem/1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-gold);
  font-variant-numeric: lining-nums tabular-nums;
  gap: 2.5rem;
  padding-left: 2.5rem;
  animation-duration: 60s;
}
/* The track is inline-flex inside a block: without this the block's 1.6 body strut (25.6px) sets the line box,
   not the 12px wire. */
/* site.css 3272 sets [data-stat] in --font-numeric: the wire is one face. */
.marquee-footer .marquee-track > * { font-family: inherit; font-variant-numeric: inherit; }
.marquee-footer .marquee { line-height: 0; }
.marquee-footer .marquee-track { vertical-align: top; }
.marquee-track .opacity-70 { opacity: .5; }
/* The button sits over the moving wire (site.css: absolute, right .5rem), so its face is opaque and a 6px
   navy collar clears the passing letters around it; a translucent face let the text run visibly through it. */
.marquee-pause {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--_clay-navy) 88%, white);
  box-shadow: 0 0 0 6px var(--_clay-navy), -10px 0 12px 2px var(--_clay-navy),
              inset 1px 1px 2px rgb(255 255 255 / .2), inset -2px -2px 4px rgb(0 0 0 / .3);
}
.marquee-pause:hover { background: color-mix(in oklab, var(--_clay-navy) 80%, white); }
/* The wire is ~28px tall (--_ticker-h): reserve only that much under the footer so no band of page background
   shows between the gold strip and the ticker. ≤ 640px keeps site.css's 0 (the ticker is hidden there). */
@media (min-width: 641px) {
  body:has(.marquee-footer) { padding-bottom: var(--_ticker-h); }
}


/* ============================================================== 10. SCROLL PROGRESS */
.scroll-progress { height: 3px; background: transparent; }
.scroll-progress > span { background: var(--brand-gold); border-radius: 0 3px 3px 0; box-shadow: none; }