/* CCAIR center site, in Georgia State University web colors and type (commkit.gsu.edu, read 2026-10-23).
   Light scheme on white: Georgia State Blue #0039A6 is the accent and link color, Light Gray #EEEEEE the alternate
   surface, Blue Steel #374057 the secondary ink and the footer band, Cool Blue #0071CE a non-text highlight.
   Headings are black or Georgia State Blue only. Red (#C60C30) is for errors. GSU gives no dark-mode guidance, so the
   dark scheme is built from the same family: deep navy and Blue Steel surfaces, white text and headings, Light Blue
   #97CAEB links. Every text/background pair clears WCAG 2.2 AA (see the commit message for the table).
   Lato is self-hosted under assets/fonts/ (SIL OFL), so no third-party font request. Tokens are mirrored in
   pathways/pathways.css. No logo is drawn here: GSU forbids unit-made logos (see assets/brand/official/README.md). */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/lato-300.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/lato-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lato-700.woff2") format("woff2"); }
:root {
  color-scheme: light dark;
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #EEEEEE; --surface-3: #E2E3E6;
  --text: #1A1A1A; --heading: #000000; --text-2: #3D4049; --muted: #5A5D66;
  --accent: #0039A6; --accent-strong: #002B7F; --accent-ink: #FFFFFF; --accent-2: #0071CE;
  --accent-soft: rgba(0, 57, 166, 0.08); --accent-line: rgba(0, 57, 166, 0.30);
  --steel: #374057; --steel-soft: rgba(55, 64, 87, 0.09);
  --cool: #005EB0; --cool-soft: rgba(0, 113, 206, 0.08);
  --error: #C60C30;
  --line: rgba(0, 0, 0, 0.10); --line-strong: rgba(0, 0, 0, 0.18);
  /* Border of a control whose outline is its only boundary (search box, secondary button): 3:1 or more against white
     (4.0:1) and Light Gray (3.4:1), WCAG 1.4.11. */
  --control-line: rgba(0, 0, 0, 0.50);
  --nav-bg: rgba(255, 255, 255, 0.78);
  --selection: rgba(0, 113, 206, 0.22); --scrim: rgba(12, 18, 36, 0.28);
  --shadow-sm: 0 1px 2px rgba(10, 20, 45, 0.06);
  --shadow: 0 1px 2px rgba(10, 20, 45, 0.05), 0 8px 24px rgba(10, 20, 45, 0.07);
  --shadow-lg: 0 2px 4px rgba(10, 20, 45, 0.05), 0 18px 48px rgba(10, 20, 45, 0.12);
  --hero-glow-1: rgba(151, 202, 235, 0.45); --hero-glow-2: rgba(0, 113, 206, 0.12);
  --footer-bg: #374057; --footer-text: #FFFFFF; --footer-text-2: #DDE1EA; --footer-muted: #C3C8D4; --footer-line: rgba(255, 255, 255, 0.16); --footer-link-hover: #97CAEB;

  --sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: var(--sans);
  /* Labels, counters and codes that used a monospace face are set in Lato too (GSU: Lato for web), with tabular figures. */
  --mono: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --radius: 20px; --radius-sm: 14px; --radius-xs: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Motion: a critically damped spring (no overshoot) for things that arrive; --ease for quick responses to the pointer.
     Reveal distance and stagger stay small so content sweeps in rather than flying. */
  --spring: var(--ease);
  --reveal-y: 20px;
  --nav-h: 64px;
  --gutter: clamp(16px, 4vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11172A; --surface: #1A2136; --surface-2: #212941; --surface-3: #374057;
    --text: #FFFFFF; --heading: #FFFFFF; --text-2: #DCE1EA; --muted: #B9C0CE;
    --accent: #97CAEB; --accent-strong: #C4E2F5; --accent-ink: #0B1A33; --accent-2: #97CAEB;
    --accent-soft: rgba(151, 202, 235, 0.13); --accent-line: rgba(151, 202, 235, 0.38);
    --steel: #D3DAE8; --steel-soft: rgba(211, 218, 232, 0.12);
    --cool: #7FD3F7; --cool-soft: rgba(0, 174, 239, 0.14);
    --error: #FF8A9C;
    --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18);
    --control-line: rgba(255, 255, 255, 0.40);   /* 3.6:1 or more on the dark surfaces */
    --nav-bg: rgba(17, 23, 42, 0.78);
    --selection: rgba(151, 202, 235, 0.30); --scrim: rgba(0, 0, 0, 0.50);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3), 0 18px 48px rgba(0, 0, 0, 0.35);
    --hero-glow-1: rgba(0, 113, 206, 0.20); --hero-glow-2: rgba(151, 202, 235, 0.10);
    --footer-bg: #0B1020; --footer-text: #FFFFFF; --footer-text-2: #DCE1EA; --footer-muted: #B9C0CE; --footer-line: rgba(255, 255, 255, 0.12); --footer-link-hover: #97CAEB;
  }
}

/* Sampled 1 - (1 + wt)e^-wt with w = 9.2: settles without overshoot, like a damping-1.0 spring. */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.0571, 0.1793, 0.3192, 0.4533, 0.571, 0.6691, 0.7483, 0.8106, 0.8587, 0.8954, 0.9231, 0.9437,
    0.959, 0.9703, 0.9785, 0.9845, 0.9889, 0.992, 0.9943, 0.9959, 0.9971, 0.9979, 0.9985, 1); }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  font: 400 17px/1.6 var(--sans); background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
  font-feature-settings: "kern"; text-rendering: optimizeLegibility;
}
#root { min-height: 100vh; display: flex; flex-direction: column; }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--selection); }
h1, h2, h3, h4 { font-family: var(--display); color: var(--heading); font-weight: 700; }
/* GSU web type: H1 in Lato Light where it is set large (hero and page titles, 36px and up); H2 and below in Lato Bold. */
.hero h1, .page-head h1 { font-weight: 300; }
h1[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 12px; font-weight: 600; transition: top 0.2s var(--ease); }
.skip:focus { top: 12px; text-decoration: none; }
.wrap { width: min(1120px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Navigation: a translucent material that content scrolls under ---------- */
.nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); }
/* The blur lives on a pseudo-element: backdrop-filter on .nav itself would make it the containing block of the
   position: fixed menu sheet and scrim it holds, collapsing the scrim to zero height.
   At the top of the page the bar is clear; once content scrolls under it the material fades in, a soft scroll-edge
   shadow replaces a hard rule, and the brand mark condenses. Opacity and transform only. */
.nav::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.35s var(--ease);
  background: var(--nav-bg); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.nav::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(10, 20, 45, 0.07), transparent); transition: opacity 0.35s var(--ease); }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav.is-scrolled::before, .nav.is-scrolled::after { opacity: 1; }
/* Reading progress: a hairline of accent along the bottom edge of the bar, scaled with the scroll position. */
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 0 2px 2px 0; }
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: progress linear both; animation-timeline: scroll(root block); }
  @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.nav-inner { height: 100%; display: flex; align-items: center; gap: 16px; }
/* Text wordmark only: GSU does not allow a center to make its own logo. The official Robinson sub-brand lockup goes in
   the empty slot (OfficialLockup, assets/brand/official/) once PRMC provides it. */
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--heading); font-weight: 700; font-size: 17px; letter-spacing: 0; border-radius: 10px; }
.brand:hover { text-decoration: none; }
.brand .lockup img { display: block; height: 40px; width: auto; }
.brand small { display: block; font-size: 12px; font-weight: 400; color: var(--text-2); letter-spacing: 0.01em; line-height: 1.3; margin-top: 1px; }
.brand span { line-height: 1.15; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links a { display: block; padding: 7px 12px; border-radius: 999px; color: var(--text-2); font-size: 14.5px; font-weight: 500; transition: background 0.2s, color 0.2s; }
.nav-links a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--text); background: var(--surface-2); font-weight: 600; }
.nav-cta { margin-left: 6px; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn:active { background: var(--surface-2); }
.menu-btn svg { width: 22px; height: 22px; }
.sheet-scrim { position: fixed; inset: var(--nav-h) 0 0 0; background: var(--scrim); z-index: 90; animation: fade 0.2s var(--ease); }
.sheet { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 95; background: var(--surface);
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 8px var(--gutter) 20px;
  transform-origin: top right; animation: sheetIn 0.32s var(--ease); max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
.sheet ul { list-style: none; }
.sheet a { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; font-size: 19px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line); }
.sheet a:hover { text-decoration: none; color: var(--accent); }
.sheet a[aria-current="page"] { color: var(--accent); }
.sheet .btn { margin-top: 18px; width: 100%; justify-content: center; border-bottom: 0; }
.sheet a.btn, .sheet a.btn:hover { color: var(--accent-ink); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes fade { from { opacity: 0; } }
/* Seven page links plus the brand and the Career Finder button: tighten the link pills on narrower desktops so the
   brand subtitle stays on one line, and switch to the menu sheet below 1000px, where the row no longer fits. */
.brand { flex: none; }
.brand small { white-space: nowrap; }
/* The wordmark's second line drops the college name where the link row needs the room, and the whole second line
   goes on small phones; the footer always shows both lines in full. */
@media (max-width: 1360px) { .nav .brand .wm-college { display: none; } }
@media (max-width: 1200px) { .nav-links a { padding: 7px 9px; font-size: 14px; } .nav-cta { margin-left: 2px; } }
@media (max-width: 1100px) and (min-width: 1001px) { .nav .brand small { display: none; } }
@media (max-width: 360px) { .nav .brand small { display: none; } }
.footer .brand small { white-space: normal; }
@media (max-width: 1000px) {
  .nav .nav-links, .nav .nav-cta { display: none; }
  .menu-btn { display: inline-flex; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 15.5px/1 var(--sans); padding: 13px 22px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none !important; white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.12s ease-out; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--control-line); }
.btn-secondary:hover { border-color: var(--accent-line); background: var(--surface); }
.btn-plain { background: transparent; color: var(--accent); padding-inline: 4px; }
.btn-plain:hover { text-decoration: underline !important; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn .arrow { transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
/* Pointer devices: buttons rise a pixel toward the cursor; the press (scale 0.97) always wins. */
@media (hover: hover) {
  .btn-primary:hover, .btn-secondary:hover { transform: translateY(-1px); }
  .btn-primary:hover { box-shadow: 0 6px 18px -6px var(--accent-line); }
  .btn-secondary:hover { box-shadow: var(--shadow); }
  .btn:hover:active { transform: scale(0.97); }
}

/* ---------- Page and section rhythm ---------- */
main { flex: 1; }
/* Route change without View Transitions: the new page sweeps in from the side of its nav link (see ccair-app.jsx). */
.page { animation: pageIn 0.45s var(--spring) backwards; }
@keyframes pageIn { from { opacity: 0; transform: translate3d(var(--page-x, 0), 0, 0); } }
html[data-nav-dir="forward"] { --page-x: 24px; }
html[data-nav-dir="back"] { --page-x: -24px; }
.has-vt .page { animation: none; }
/* With View Transitions the nav keeps its own layer while the page underneath trades places. */
/* The old page clears quickly and the new one follows 60 ms later, so the two rarely overlap as text. */
::view-transition-old(root) { animation: vtOut 0.16s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vtIn 0.44s var(--spring) 60ms both; }
@keyframes vtOut { to { opacity: 0; transform: translate3d(calc(var(--page-x, 24px) * -0.5), 0, 0); } }
@keyframes vtIn { from { opacity: 0; transform: translate3d(var(--page-x, 24px), 0, 0); } }
/* Named only while a transition runs: a named element is a backdrop root, which would empty the nav's blur. */
html[data-vt] .nav { view-transition-name: ccair-nav; }
::view-transition-group(ccair-nav) { animation-duration: 0.2s; }
/* Page titles arrive in sequence: eyebrow, title, lede, then anything after. */
.page-head > * { animation: rise 0.7s var(--spring) backwards; }
.page-head > :nth-child(2) { animation-delay: 60ms; }
.page-head > :nth-child(3) { animation-delay: 120ms; }
.page-head > :nth-child(n+4) { animation-delay: 180ms; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
.page-head { padding: clamp(48px, 8vw, 96px) 0 clamp(8px, 2vw, 16px); }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.page-head h1 { font-size: clamp(36px, 5.6vw, 60px); line-height: 1.08; letter-spacing: -0.01em; max-width: 18ch; }
.page-head .lede { margin-top: 18px; }
.lede { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section + .section { padding-top: 0; }
.section-alt { background: var(--surface-2); padding: clamp(56px, 8vw, 96px) 0; }
.section-alt + .section { padding-top: clamp(48px, 7vw, 88px); }
.section-head { margin-bottom: clamp(24px, 3.5vw, 36px); max-width: 720px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.12; letter-spacing: -0.02em; }
.section-head p { margin-top: 10px; color: var(--text-2); font-size: 17.5px; }
.section-head .eyebrow { margin-bottom: 8px; }
.section-foot { margin-top: 28px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* Reveal on scroll: content sweeps up into place, staggered within a group (--rd, set per element by the observer).
   The hidden pre-state needs html.motion-ok (added by JavaScript once the observer is available), so without JavaScript
   everything simply shows. An opacity fade only under reduced motion (below). */
.motion-ok .reveal { transition: opacity 0.55s var(--ease) var(--rd, 0ms), transform 0.7s var(--spring) var(--rd, 0ms); }
.motion-ok .reveal:not(.is-in) { opacity: 0; transform: translate3d(0, var(--reveal-y), 0); }
.card-slot { display: flex; }
.card-slot > .card-link { flex: 1; }

/* ---------- Cards ---------- */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--shadow-sm); }
.card h3, .person h4 { font-size: 19px; line-height: 1.3; letter-spacing: -0.012em; margin-bottom: 8px; }
.card p { color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.card-link { display: block; color: inherit; transition: box-shadow 0.3s var(--ease), border-color 0.25s, transform 0.3s var(--ease); }
.card-link:hover { text-decoration: none; box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.card-link:active { transform: scale(0.99); transition-duration: 0.12s; }
@media (hover: hover) { .card-link:hover { transform: translateY(-3px); } .card-link:hover:active { transform: translateY(-1px) scale(0.99); } }
.card-link .more span { display: inline-block; transition: transform 0.25s var(--ease); }
.card-link:hover .more span { transform: translateX(3px); }
.card-link .more { display: inline-flex; gap: 6px; margin-top: 14px; color: var(--accent); font-weight: 600; font-size: 15px; }
.card-num { font: 700 13px/1 var(--sans); color: var(--steel); letter-spacing: 0.04em; margin-bottom: 14px; display: block; }
.list-check { list-style: none; margin-top: 6px; }
.list-check li { position: relative; padding: 6px 0 6px 22px; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.list-check li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-line); }

/* Chips and tags */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1; padding: 7px 11px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
a.chip { transition: background 0.2s, color 0.2s, transform 0.2s var(--ease); }
a.chip:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
@media (hover: hover) { a.chip:hover { transform: translateY(-1px); } }
a.chip:active { transform: scale(0.97); }
.tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding: 4px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.tag-journal { background: var(--accent-soft); color: var(--accent); }
.tag-conference { background: var(--steel-soft); color: var(--steel); }
.tag-workshop { background: var(--cool-soft); color: var(--cool); }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--status, var(--muted)); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 10vw, 120px) 0 clamp(48px, 7vw, 80px); text-align: center; isolation: isolate; }
/* Two soft color fields on their own layers, so they can drift at different rates as the hero scrolls away. */
.hero-glow { position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none; animation: glowIn 1.6s var(--ease) backwards; }
.hero-glow i { position: absolute; inset: 0; will-change: transform; }
.hero-glow i:nth-child(1) { background: radial-gradient(45% 55% at 28% 30%, var(--hero-glow-1), transparent 70%); }
.hero-glow i:nth-child(2) { background: radial-gradient(40% 50% at 75% 25%, var(--hero-glow-2), transparent 70%); }
@keyframes glowIn { from { opacity: 0; } }
/* Entrance: affiliation line, headline, lede, actions and stats arrive in one choreographed sweep, 90 ms apart. */
.hero-inner > *, .hero .stats { animation: heroIn 0.9s var(--spring) backwards; }
.hero h1 { animation-delay: 90ms; }
.hero-inner > .lede { animation-delay: 180ms; }
.hero-cta { animation-delay: 270ms; }
.hero .stats { animation-delay: 380ms; }
@keyframes heroIn { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
/* Scroll depth on the compositor: the color fields drift and part as the hero leaves, the headline block lags a
   little behind the page. Browsers without scroll-driven animations get the same motion from HeroGlow's rAF loop. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero, .page-hero { view-timeline: --hero block; }
    .hero-glow i:nth-child(1) { animation: glowDriftA linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .hero-glow i:nth-child(2) { animation: glowDriftB linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .hero-inner { animation: heroLag linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    @keyframes glowDriftA { to { transform: translate3d(0, 26vh, 0) scale(1.08); } }
    @keyframes glowDriftB { to { transform: translate3d(-10vw, 12vh, 0); } }
    @keyframes heroLag { to { transform: translate3d(0, 90px, 0); } }
  }
}
.hero-affil { text-wrap: balance; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); margin-bottom: 22px; }
.hero-lockup { margin: 0 auto 24px; display: flex; justify-content: center; }
.hero-lockup img { height: 72px; width: auto; }
.hero h1 { font-size: clamp(40px, 7vw, 76px); line-height: 1.06; letter-spacing: -0.015em; max-width: 14ch; margin-inline: auto; }
.hero h1 em { font-style: normal; font-weight: 700; color: var(--accent); }
@media (prefers-color-scheme: dark) { .hero h1 em { color: var(--heading); } }
.hero .lede { margin: 22px auto 0; text-align: center; }
.hero-cta { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.stats { margin: clamp(44px, 6vw, 64px) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 820px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.stat { padding: 20px 12px; text-align: center; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { display: block; font: 700 clamp(28px, 3.6vw, 38px)/1.05 var(--display); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.stat dt span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
@media (max-width: 600px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- Photos (data/photos.json; README in assets/photos/) ---------- */
/* Photo hero: the headline block sits on the photo under a Georgia State Blue scrim. The scrim is measured against the
   actual image so white text clears WCAG AA over its lightest pixels; the dark scheme deepens it toward navy. */
.photo-hero { padding: 0 0 clamp(8px, 2vw, 16px); }
.hero-stage { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 12vw, 150px) 0 clamp(64px, 9vw, 112px); background: #0B1A33; }
.hero-photo { position: absolute; inset: 0; z-index: -1; }
.hero-photo picture, .hero-photo img { display: block; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: var(--focal, 50% 50%); }
.hero-photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 30, 92, 0.74) 0%, rgba(0, 43, 127, 0.70) 45%, rgba(4, 14, 40, 0.84) 100%); }
/* Phones put the lede over the lit towers, so the scrim is a little denser there. */
@media (max-width: 700px) { .hero-photo::after { background: linear-gradient(180deg, rgba(0, 30, 92, 0.78) 0%, rgba(0, 43, 127, 0.76) 50%, rgba(4, 14, 40, 0.86) 100%); } }
@media (prefers-color-scheme: dark) {
  .hero-photo::after { background: linear-gradient(180deg, rgba(4, 14, 40, 0.80) 0%, rgba(0, 32, 96, 0.72) 45%, rgba(17, 23, 42, 0.92) 100%); }
}
.photo-hero .hero-affil { color: #FFFFFF; }
.photo-hero h1, .photo-hero h1 em { color: #FFFFFF; }
.photo-hero .hero-inner > .lede { color: #F2F4F8; }
.photo-hero .hero-stage .btn-primary { background: #FFFFFF; color: #0039A6; }
.photo-hero .hero-stage .btn-primary:hover { background: #E8F1FA; }
.photo-hero .hero-stage .btn-secondary { background: rgba(255, 255, 255, 0.10); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.70); }
.photo-hero .hero-stage .btn-secondary:hover { background: rgba(255, 255, 255, 0.18); border-color: #FFFFFF; }
.photo-hero .hero-stage :focus-visible { outline-color: #FFFFFF; }
.photo-hero .stats { margin-top: clamp(28px, 4vw, 44px); }
.photo-hero .hero-credit { position: absolute; right: var(--gutter); bottom: 12px; left: var(--gutter); margin: 0; text-align: right; color: #FFFFFF; }
.photo-hero .hero-credit a { color: #FFFFFF; }
@media (max-width: 700px) { .hero-photo img { object-position: var(--focal-m, var(--focal, 50% 50%)); } }
/* Page heroes: PageHead with a photo slot. Same scrim and white type as the home hero, in a shorter stage. The scrim's
   lightest stop (0.70) keeps white text at about 5.3:1 even over a pure white pixel, so any campus photo clears AA
   (which is why the affiliation line and credit are pure white too: #E6EBF5 would fall to 4.4:1). */
.page-hero { margin-bottom: clamp(24px, 4vw, 48px); padding: 0; }
.page-hero .hero-stage { padding: clamp(64px, 10vw, 128px) 0 clamp(56px, 8vw, 96px); }
.page-hero .page-head { padding: 0; }
.page-hero .eyebrow, .page-hero h1 { color: #FFFFFF; }
.page-hero .page-head .lede { color: #F2F4F8; }
.page-hero .page-head :focus-visible { outline-color: #FFFFFF; }

.photo-credit { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--muted); text-align: right; }
.photo-credit a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.photo-credit a:hover { color: var(--accent); }
.photo-hero .hero-credit a:hover { color: #97CAEB; }
.photo-credits { list-style: none; max-width: 860px; }
.photo-credits li { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 15px; line-height: 1.55; }
.photo-credits li:first-child { border-top: 1px solid var(--line); }
.photo-credits a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* Depth: the hero photo drifts and grows a little as the hero scrolls away (compositor-driven; none when motion is
   reduced or scroll-driven animations are unsupported). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero-photo img { animation: heroPhotoDrift linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    @keyframes heroPhotoDrift { from { transform: scale(1.04); } to { transform: translate3d(0, 6%, 0) scale(1.12); } }
  }
}

/* Feature band (Pathway Finder, joining) */
.feature { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: clamp(24px, 4vw, 48px); box-shadow: var(--shadow); }
.feature h2, .feature h3 { font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.feature p { margin-top: 12px; color: var(--text-2); }
.feature .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.feature-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; } .feature .actions { justify-content: flex-start; } }

/* ---------- News ---------- */
.news { list-style: none; border-top: 1px solid var(--line); }
.news li { display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.news time { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.news .title { font-weight: 600; font-size: 16.5px; line-height: 1.45; }
@media (max-width: 600px) { .news li { grid-template-columns: 1fr auto; gap: 4px 12px; } .news time { grid-column: 1 / -1; } }

/* ---------- Publications ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.search { position: relative; flex: 1 1 280px; max-width: 420px; }
.search input { width: 100%; font: 400 16px/1 var(--sans); color: var(--text); background: var(--surface); border: 1px solid var(--control-line);
  border-radius: 12px; padding: 12px 14px 12px 40px; transition: border-color 0.2s, box-shadow 0.2s; }
.search input:focus { outline: none; border-color: var(--accent); }
.search input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.search svg { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--surface-3); flex-wrap: wrap; }
.segmented button { font: 500 14px/1 var(--sans); color: var(--text-2); background: transparent; border: 0; border-radius: 9px; padding: 9px 14px; cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.segmented button:active { transform: scale(0.97); }
.pub-year { font: 700 15px/1 var(--display); color: var(--muted); letter-spacing: 0.02em; padding: 28px 0 10px; border-bottom: 1px solid var(--line); position: sticky; top: var(--nav-h); background: var(--bg); z-index: 2; }
/* Phones: the type buttons drop their counts so they fit on one row, and the year headings scroll with the list
   instead of stacking a second sticky bar under the nav. */
@media (max-width: 600px) {
  .pub-types .seg-count { display: none; }
  .pub-year { position: static; }
}
.pub-list { list-style: none; }
.pub-list.card .pub:last-child { border-bottom: 0; }
.pub { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; }
.pub h3 { font: 600 17px/1.4 var(--sans); letter-spacing: -0.005em; }
.pub .authors { color: var(--text-2); font-size: 15px; grid-column: 1; }
.pub .authors strong { color: var(--text); font-weight: 600; }
.pub .venue { color: var(--muted); font-size: 15px; font-style: italic; grid-column: 1; }
.pub .award { font-style: normal; color: var(--steel); font-weight: 600; }
.pub .side { grid-row: 1 / span 3; grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pub .links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; font-size: 14px; font-weight: 600; max-width: 260px; }
.pub .links a { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; min-width: 24px; }
.pub-title-link { color: inherit; }
.pub-title-link:hover { color: var(--accent); }
.pub-count { margin-top: 18px; color: var(--muted); font-size: 14px; }
.empty { padding: 40px 0; text-align: center; color: var(--muted); }
@media (max-width: 600px) { .pub { grid-template-columns: 1fr; } .pub .side { grid-row: auto; grid-column: 1; flex-direction: row; flex-wrap: wrap; align-items: center; } .pub .links { justify-content: flex-start; max-width: none; } }

/* ---------- Research materials ---------- */
.material { display: flex; flex-direction: column; }
.material-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 14px; }
.material-cite { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-xs); background: var(--surface-2); }
.material-cite-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.material-cite p { font-size: 14.5px; color: var(--text-2); overflow-wrap: anywhere; }
.material-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.material.is-placeholder { border-style: dashed; box-shadow: none; background: transparent; }

/* ---------- People ---------- */
.director { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 32px); align-items: start; }
/* Initials avatars: white on Georgia State Blue (9.8:1) in light, deep navy on Light Blue (9.9:1) in dark, via the
   accent tokens; mentees use Blue Steel. Headshots fill the same circle, so a photo arriving never moves the layout. */
.avatar { flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-weight: 700; color: var(--accent-ink); background: var(--accent); letter-spacing: 0.02em; }
.avatar-lg { width: clamp(104px, 12vw, 144px); height: clamp(104px, 12vw, 144px); font-size: clamp(34px, 4vw, 46px); }
.avatar-md { width: 64px; height: 64px; font-size: 20px; }
.avatar-warm { color: var(--accent-ink); background: var(--steel); }
.avatar-photo { display: block; overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.avatar-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@media (prefers-color-scheme: dark) { .avatar-photo img { filter: brightness(0.95); } }
.people-credits { max-width: 860px; margin-top: 28px; }
.people-credits > p { color: var(--text-2); margin-bottom: 12px; }

/* Friends of CCAIR: logos on white tiles in both schemes (dark-ink logos stay legible on the dark theme without being
   altered), all scaled to one height. Wordmarks are plain Lato text in Georgia State Blue, fixed so they stay on white. */
.friends { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .friends { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.friend { min-width: 0; }
.friend-tile { display: flex; align-items: center; justify-content: center; height: 144px; padding: 12px 14px;
  background: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  color: #0039A6; text-decoration: none; transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); }
.friend-tile:hover { text-decoration: none; box-shadow: var(--shadow); border-color: rgba(0, 57, 166, 0.30); }
.friend-tile img { display: block; width: auto; height: 120px; max-width: 100%; object-fit: contain; }
.friend-wordmark { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-family: var(--sans); }
.friend-wm-name { font-size: 20px; font-weight: 700; line-height: 1.15; color: #0039A6; }
.friend-wm-sub { font-size: 12.5px; font-weight: 400; line-height: 1.35; color: #0039A6; }
.friend > p { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .friend-tile { transition: transform 0.25s var(--spring), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); }
  .friend-tile:hover { transform: translateY(-2px); }
}
@media (prefers-color-scheme: dark) { .friend-tile { border-color: rgba(255, 255, 255, 0.18); } }
@media (max-width: 480px) {
  .friend-tile { height: 116px; padding: 10px; }
  .friend-tile img { height: 92px; }
  .friend-wm-name { font-size: 17px; }
  .friend-wm-sub { font-size: 11.5px; }
  .friend > p { font-size: 13px; }
}
.director h2 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.02em; }
.director .role { color: var(--text-2); font-weight: 500; margin-top: 2px; }
.director p { margin-top: 12px; color: var(--text-2); }
.director .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 560px) { .director { grid-template-columns: 1fr; } }
.person { display: flex; gap: 14px; align-items: flex-start; }
.person h3, .person h4 { font-size: 16.5px; margin-bottom: 2px; }
.person .role { color: var(--text-2); font-size: 14.5px; }
.person .meta { color: var(--muted); font-size: 14px; margin-top: 2px; }
.person p { margin-top: 8px; font-size: 14.5px; }
.group-label { font-size: 15px; font-weight: 600; color: var(--text-2); margin: 28px 0 12px; }
.group-label:first-child { margin-top: 0; }

/* ---------- Pipeline steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: step; list-style: none; }
.steps > li { counter-increment: step; }
.steps .card::before { content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px; margin-bottom: 14px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Tier rows on the research portfolio */
.tier { border-left: 3px solid var(--tier, var(--accent)); }
.tier-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 14px; }
.tier-head h3 { margin: 0; }
.tier-head span { color: var(--muted); font-size: 14.5px; }
.tier-items { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.tier-item { background: var(--surface-2); border-radius: var(--radius-xs); padding: 14px 16px; }
.tier-item b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.tier-item span { color: var(--text-2); font-size: 14.5px; line-height: 1.5; }

/* Simple definition rows (contact details, courses) */
.rows { list-style: none; }
.rows li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.rows li:first-child { border-top: 1px solid var(--line); }
.rows .code { font: 600 14px/1 var(--mono); color: var(--accent); margin-right: 10px; }
.rows .t { font-weight: 600; }
.rows .r { color: var(--muted); font-size: 14.5px; white-space: nowrap; }
.contact-lines { font-style: normal; color: var(--text-2); line-height: 1.75; }
/* A standalone link in an address block: inline-block takes the full line height (25px or more), the 24px minimum
   target (WCAG 2.5.8). */
.contact-lines a { display: inline-block; }

/* ---------- Footer ---------- */
/* Blue Steel band (GSU secondary palette) with white text; deep navy in the dark scheme. */
.footer { padding: 44px 0 48px; background: var(--footer-bg); margin-top: clamp(32px, 5vw, 64px); font-size: 14.5px; color: var(--footer-text-2); }
.footer .brand, .footer .brand small { color: var(--footer-text); }
.footer :focus-visible { outline-color: #97CAEB; }
.footer-inner { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 28px; }
.footer h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--footer-text); margin-bottom: 10px; font-weight: 700; }
.footer ul { list-style: none; }
.footer li { padding: 0; }
.footer li a { display: inline-block; padding: 4px 0; }   /* 24px minimum target height (WCAG 2.5.8) */
.footer a { color: var(--footer-text); }
.footer a:hover { color: var(--footer-link-hover); }
.footer .brand { margin-bottom: 10px; }
.footer .contact-lines { color: var(--footer-text-2); }
.footer-note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--footer-line); color: var(--footer-muted); font-size: 13.5px; }
@media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr 1fr; } .footer-inner > :first-child { grid-column: 1 / -1; } }

/* Loading and errors */
.data-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-block: 16px; padding: 12px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface-2); color: var(--text); }
.state { min-height: 70vh; display: grid; place-items: center; text-align: center; gap: 12px; padding: 40px; color: var(--muted); }
.state-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); margin: 0 auto 16px; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.55; } }

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Nothing moves: reveals and route changes are brief opacity fades, entrances and parallax are off, stats show
     their final numbers (CountUp), and hover and press keep only their color and shadow changes. */
  .motion-ok .reveal { transition: opacity 0.15s linear; }
  .motion-ok .reveal:not(.is-in) { transform: none; }
  .page { animation: fade 0.15s linear; }
  .page-head > *, .hero-inner > *, .hero .stats, .hero-glow { animation: none; }
  .btn, .btn:hover, .btn:active, .card-link, .card-link:hover, .card-link:active, a.chip:hover, a.chip:active,
  .segmented button:active { transform: none !important; }
  .card-link .more span, .card-link:hover .more span { transform: none; }
  .sheet { animation: fade 0.15s linear; }
  .btn .arrow, .btn:hover .arrow { transition: none; transform: none; }
  .state-dot { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav { border-bottom-color: var(--line); }
  .nav::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(0, 0, 0, 0.35); --line-strong: rgba(0, 0, 0, 0.55); --muted: var(--text-2); }
  .nav::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .card, .stats, .feature { box-shadow: none; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --line: rgba(255, 255, 255, 0.35); --line-strong: rgba(255, 255, 255, 0.55); }
}
@media print {
  :root { color-scheme: light;
    --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #FFFFFF;
    --text: #111111; --text-2: #333333; --muted: #555555;
    --heading: #000000; --accent: #0039A6; --accent-strong: #002B7F; --accent-ink: #FFFFFF;
    --accent-soft: rgba(0, 57, 166, 0.08); --accent-line: rgba(0, 57, 166, 0.30);
    --steel: #374057; --steel-soft: rgba(55, 64, 87, 0.09);
    --cool: #005EB0; --cool-soft: rgba(0, 113, 206, 0.08);
    --line: #BBBBBB; --line-strong: #999999; --control-line: #777777; }
  body { background: #FFFFFF; color: var(--text); }
  .nav, .footer, .menu-btn, .sheet, .sheet-scrim, .skip { display: none !important; }
  .card, .stats, .feature { box-shadow: none; }
  .reveal, .motion-ok .reveal:not(.is-in) { opacity: 1; transform: none; }
  .hero-glow, .scroll-progress { display: none !important; }
  /* Photos are left off paper; the photo hero prints as plain black text. */
  .hero-photo, .hero-credit { display: none !important; }
  .hero-stage { background: none; padding: 24px 0; }
  .photo-hero .hero-affil, .photo-hero h1, .photo-hero h1 em, .photo-hero .hero-inner > .lede { color: #000000; }
}

/* Skip-link target: focused programmatically, no ring around the whole page */
#main-content:focus { outline: none; }