/* =============================================================
   Sentara Structural Research — Shared Stylesheet
   Visual system modeled on Sentara Health sub-brand conventions:
   navy primary, gold accent, white base, sans-serif, card grids.
   Placeholder assets are labeled in-line; swap before launch.
   ============================================================= */

:root {
  /* Brand palette — approximations of the Sentara Health system.
     Confirm exact values with Sentara Brand before production. */
  --navy: #003865;          /* primary dark — header accents, footer */
  --navy-deep: #002844;     /* hover/active on navy */
  --blue: #0077C8;          /* interactive blue — links, buttons */
  --blue-soft: #E8F2FB;     /* tinted blue bg */
  --gold: #C9A063;          /* signature gold "swoosh" accent */
  --gold-soft: #F5ECD9;     /* tinted gold bg */

  --bg: #FFFFFF;            /* primary background */
  --bg-alt: #F5F7FA;        /* alt section background */
  --bg-muted: #FAFBFC;      /* very subtle tint */
  --rule: #E1E5EA;          /* borders, dividers */
  --rule-strong: #C9D1DA;

  --text: #1F2937;          /* body */
  --text-muted: #6B7280;    /* secondary */
  --text-inverse: #FFFFFF;

  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 12px rgba(0, 56, 101, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 56, 101, 0.12);

  --container: 1200px;
  --gap: 24px;

  --font-sans: 'Inter', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
  --font-serif: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--navy); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 2.5rem; line-height: 1.15; margin: 0 0 0.5em; }
h2 { font-size: 1.875rem; line-height: 1.2; margin: 0 0 0.5em; }
h3 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.4em; }
h4 { font-size: 1rem; margin: 0 0 0.3em; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- Utility top bar ---------- */
.utility-bar {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.9);
  font-size: 0.8125rem;
}
.utility-bar .container {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 20px; height: 36px;
}
.utility-bar a { color: rgba(255,255,255,0.9); }
.utility-bar a:hover { color: var(--gold); text-decoration: none; }
.utility-bar .sep { color: rgba(255,255,255,0.35); }

/* ---------- Header / primary nav ---------- */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
}
.brand { display: flex; align-items: center; gap: 0; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 56px; height: 40px; flex-shrink: 0; }
/* Unified wordmark — two stacked lines. */
.brand-wordmark {
  display: flex; flex-direction: column; line-height: 1.15;
}
.brand-wordmark .line-1,
.brand-wordmark .line-2 {
  font-size: 1rem; font-weight: 700; color: var(--navy);
  letter-spacing: 0.005em;
}
.brand-wordmark .line-2 { font-weight: 600; color: var(--navy); }
/* Legacy .parent / .sub classes (kept for any markup not yet updated) —
   rendered identically so there is no visual hierarchy between them. */
.brand-wordmark .parent,
.brand-wordmark .sub {
  font-size: 1rem; font-weight: 700; color: var(--navy);
  letter-spacing: 0.005em; text-transform: none;
  border: 0; padding: 0; margin: 0;
}
.brand-wordmark .sub { font-weight: 600; }

.primary-nav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 4px;
}
.primary-nav a {
  display: inline-block; padding: 10px 14px;
  color: var(--text); font-weight: 500; font-size: 0.95rem;
  border-radius: var(--radius);
}
.primary-nav a:hover { background: var(--bg-alt); color: var(--navy); text-decoration: none; }
.primary-nav a.active { color: var(--navy); box-shadow: inset 0 -3px 0 var(--gold); border-radius: 0; }

.nav-cta {
  display: inline-block; margin-left: 10px;
  background: var(--navy); color: #fff; padding: 10px 18px;
  border-radius: var(--radius); font-weight: 600; font-size: 0.9rem;
}
.nav-cta:hover { background: var(--navy-deep); color: #fff; text-decoration: none; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--rule);
  font-size: 0.85rem; color: var(--text-muted);
}
.breadcrumb .container { padding-top: 12px; padding-bottom: 12px; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb .sep { margin: 0 8px; color: var(--rule-strong); }
.breadcrumb .current { color: var(--navy); font-weight: 600; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, #FAFBFC 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--rule);
  padding: 64px 0 56px;
}
.hero.hero-image {
  background: var(--navy);
  color: #fff;
  padding: 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.hero.hero-image .hero-bg {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(100deg, rgba(0,40,68,0.97) 0%, rgba(0,56,101,0.92) 55%, rgba(0,56,101,0.86) 100%),
    url('https://images.unsplash.com/photo-1530026405186-ed1f139313f8?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
}
.hero.hero-image .hero-inner {
  position: relative; z-index: 2;
  min-height: 480px;
  display: flex; align-items: center;
  padding: 72px 24px;
}
.hero.hero-image h1 { color: #fff; max-width: 720px; }
.hero.hero-image .lede { color: rgba(255,255,255,0.92); max-width: 640px; font-size: 1.125rem; }
.hero .eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem;
  font-weight: 700; color: var(--gold); margin-bottom: 12px;
}
.hero.hero-image .eyebrow { color: var(--gold); }
.hero .lede { font-size: 1.125rem; color: var(--text-muted); max-width: 640px; }
.hero .cta-row { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 12px 22px; border-radius: var(--radius);
  font-weight: 600; font-size: 0.95rem; text-align: center; cursor: pointer;
  border: 2px solid transparent; transition: background 0.15s, color 0.15s, border 0.15s;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #005ea0; color: #fff; text-decoration: none; }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; text-decoration: none; }
.btn-outline-light { background: transparent; color: #fff; border-color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--navy); text-decoration: none; }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: #b08947; color: var(--navy); text-decoration: none; }

/* ---------- Layouts ---------- */
.section { padding: 64px 0; }
.section.tight { padding: 40px 0; }
.section.alt { background: var(--bg-alt); }
.section-head { margin-bottom: 36px; max-width: 760px; }
.section-head .eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem;
  font-weight: 700; color: var(--gold); margin-bottom: 10px;
}

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 960px) {
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
}

/* Sidebar layout for sub-pages */
.with-sidebar {
  display: grid; grid-template-columns: 260px 1fr; gap: 48px;
  padding: 48px 0 80px;
}
@media (max-width: 900px) {
  .with-sidebar { grid-template-columns: 1fr; gap: 24px; }
}
.sidebar {
  position: sticky; top: 104px; align-self: start;
}
@media (max-width: 900px) {
  .sidebar { position: static; }
}
.sidebar h4 {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-muted); padding-bottom: 10px; border-bottom: 1px solid var(--rule);
  margin-bottom: 12px;
}
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li { border-bottom: 1px solid var(--rule); }
.sidebar a {
  display: block; padding: 10px 0; color: var(--text);
  font-size: 0.95rem;
}
.sidebar a:hover { color: var(--blue); text-decoration: none; }
.sidebar a.active { color: var(--navy); font-weight: 700; border-left: 3px solid var(--gold); padding-left: 10px; margin-left: -12px; }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  overflow: hidden; transition: box-shadow 0.2s, transform 0.2s;
  display: flex; flex-direction: column;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card .card-img {
  aspect-ratio: 16/9; background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--rule);
}
.card .card-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
.card .eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem;
  font-weight: 700; color: var(--gold); margin-bottom: 8px;
}
.card h3 { font-size: 1.125rem; margin-bottom: 8px; }
.card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 14px; }
.card .card-link {
  margin-top: auto; color: var(--blue); font-weight: 600; font-size: 0.9rem;
}
.card .card-link::after { content: " →"; }

/* Research area cards — typography-forward with gold accent bar */
.research-card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 32px 28px 26px; transition: box-shadow 0.2s, border-color 0.2s;
  position: relative; overflow: hidden; display: block;
  text-decoration: none; color: inherit;
}
.research-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--gold);
}
.research-card:hover { box-shadow: var(--shadow); border-color: var(--gold); text-decoration: none; }
.research-card .eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem;
  font-weight: 700; color: var(--gold); margin-bottom: 10px; display: block;
}
.research-card h3 { font-size: 1.15rem; margin-bottom: 10px; color: var(--navy); }
.research-card p { color: var(--text-muted); font-size: 0.95rem; margin: 0; }

/* Team cards */
.team-card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  overflow: hidden;
}
.team-card .avatar {
  aspect-ratio: 1/1; background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--rule);
}
.team-card .body { padding: 18px 20px; }
.team-card .name { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.team-card .credentials { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 6px; }
.team-card .role { font-size: 0.9rem; color: var(--text); margin-bottom: 10px; }
.team-card .focus {
  font-size: 0.82rem; color: var(--text-muted);
  padding-top: 10px; border-top: 1px solid var(--rule);
}
.team-card .contact-row { display: flex; gap: 10px; margin-top: 8px; font-size: 0.82rem; }

/* Stats strip */
.stats {
  background: var(--navy);
  color: #fff;
  padding: 44px 0;
}
.stats .grid-4 { gap: 12px; }
.stat { text-align: center; padding: 8px 16px; }
.stat .number {
  font-size: 2.5rem; font-weight: 700; color: var(--gold);
  line-height: 1; margin-bottom: 8px;
}
.stat .label {
  font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.9);
}

/* CTA band */
.cta-band {
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff; padding: 56px 0; text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 16px; }
.cta-band p { color: rgba(255,255,255,0.88); max-width: 640px; margin: 0 auto 28px; }

/* ---------- Placeholder image block ---------- */
.placeholder-img {
  width: 100%; height: 100%;
  background:
    linear-gradient(135deg, #E8ECF1 0%, #D6DCE3 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 0.82rem; text-align: center; padding: 16px;
  font-style: italic;
}
.placeholder-img.dark {
  background: linear-gradient(135deg, #1b3c5c 0%, #0d2238 100%);
  color: rgba(255,255,255,0.7);
}
.placeholder-img .tag {
  padding: 6px 12px; border: 1px dashed currentColor; border-radius: 100px;
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- Publications list ---------- */
.pub-list { list-style: none; padding: 0; margin: 0; }
.pub-item {
  padding: 22px 0; border-bottom: 1px solid var(--rule);
  transition: background-color 0.2s ease;
}
.pub-item:last-child { border-bottom: none; }
.pub-item:hover { background-color: rgba(245, 236, 217, 0.18); }
.pub-item .title {
  font-size: 1.05rem; color: var(--navy); font-weight: 700; margin-bottom: 6px;
  line-height: 1.35;
}
.pub-item .authors { color: var(--text); font-size: 0.92rem; margin-bottom: 4px; }
.pub-item .journal { color: var(--text-muted); font-size: 0.88rem; }
.pub-item .journal em { font-style: italic; color: var(--text); }
.pub-item .pub-tags { margin: 0 0 10px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.pub-tag {
  display: inline-block; padding: 3px 10px; background: var(--blue-soft);
  color: var(--navy); font-size: 0.72rem; border-radius: 100px; font-weight: 700;
  letter-spacing: 0.04em;
}
.pub-tag.gold { background: var(--gold-soft); color: #8a6c2f; }
.pub-tag.tag-structural { background: #E8EEF5; color: var(--navy); border: 1px solid #CFDAE8; }
.pub-tag.tag-hf        { background: var(--gold-soft); color: #8a6c2f; border: 1px solid #E6D5AE; }
.pub-tag.tag-surgery   { background: #E8F3EC; color: #1F5A38; border: 1px solid #C8DFD1; }

.filter-bar {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  padding: 18px 20px; background: var(--bg-alt); border-radius: var(--radius-lg);
  border: 1px solid var(--rule); margin-bottom: 24px;
}
.filter-bar label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.filter-bar select, .filter-bar input {
  padding: 8px 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font-family: inherit; font-size: 0.9rem; background: #fff;
}

/* ---------- Events ---------- */
.event-item {
  display: grid; grid-template-columns: 100px 1fr auto; gap: 24px;
  padding: 24px 0; border-bottom: 1px solid var(--rule); align-items: center;
}
@media (max-width: 640px) {
  .event-item { grid-template-columns: 1fr; }
}
.event-date {
  text-align: center; background: var(--blue-soft); border-radius: var(--radius-lg);
  padding: 12px 8px; min-width: 80px;
}
.event-date .month {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 700; color: var(--blue);
}
.event-date .day { font-size: 2rem; font-weight: 700; color: var(--navy); line-height: 1; }
.event-date .year { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
.event-body h3 { font-size: 1.05rem; margin-bottom: 4px; }
.event-body .meta { color: var(--text-muted); font-size: 0.88rem; }

/* Gallery */
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .gallery-grid { grid-template-columns: 1fr; } }
.gallery-item {
  aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--rule);
}

.video-card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  overflow: hidden;
}
.video-card .thumb {
  aspect-ratio: 16/9; position: relative;
}
.video-card .thumb::after {
  content: "▶"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 2rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.video-card .body { padding: 14px 18px; }
.video-card .title { font-weight: 700; color: var(--navy); margin-bottom: 4px; font-size: 0.95rem; }
.video-card .meta { font-size: 0.82rem; color: var(--text-muted); }

/* ---------- Callouts / disclaimers ---------- */
.callout {
  background: var(--gold-soft); border-left: 4px solid var(--gold);
  padding: 20px 24px; border-radius: var(--radius);
  color: #3b2f16;
}
.callout h4 { color: #3b2f16; margin-bottom: 6px; }
.callout p { margin: 0; font-size: 0.95rem; }

.disclaimer-block {
  background: var(--bg-alt); border: 1px solid var(--rule); border-left: 4px solid var(--navy);
  padding: 24px 28px; border-radius: var(--radius); margin: 24px 0;
}
.disclaimer-block h3 {
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--navy); margin-bottom: 10px;
}
.disclaimer-block p { margin: 0 0 8px; font-size: 0.92rem; color: var(--text); }
.disclaimer-block p:last-child { margin-bottom: 0; }

/* ---------- Tables ---------- */
.data-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden;
}
.data-table th {
  background: var(--bg-alt); color: var(--navy); text-align: left;
  padding: 14px 18px; font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.08em; border-bottom: 1px solid var(--rule);
}
.data-table td { padding: 14px 18px; border-bottom: 1px solid var(--rule); font-size: 0.92rem; }
.data-table tr:last-child td { border-bottom: none; }
.data-table .status {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-size: 0.75rem; font-weight: 700;
}
.status.active { background: #DCFCE7; color: #166534; }
.status.enrolling { background: var(--gold-soft); color: #8a6c2f; }
.status.paused { background: #FEE2E2; color: #991B1B; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep); color: rgba(255,255,255,0.85);
  padding: 56px 0 0;
  margin-top: 80px;
}
/* Collapse the margin when the footer follows a full-bleed navy CTA band
   so we don't get an unintentional white gap between the two navy areas. */
.cta-band + .site-footer { margin-top: 0; }
.site-footer h4 {
  color: #fff; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.15);
}
.site-footer .footer-grid {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 56px;
  padding-bottom: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .site-footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .site-footer .footer-brand { grid-column: 1 / -1; }
}
.footer-brand .brand-wordmark .line-1,
.footer-brand .brand-wordmark .line-2,
.footer-brand .brand-wordmark .parent,
.footer-brand .brand-wordmark .sub { color: #fff; }
.footer-brand p { color: rgba(255,255,255,0.7); font-size: 0.88rem; max-width: 320px; margin-top: 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: rgba(255,255,255,0.85); font-size: 0.9rem; }
.site-footer a:hover { color: var(--gold); text-decoration: none; }
.social-row { display: flex; gap: 12px; margin-top: 16px; }
.social-row a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.social-row a:hover { background: var(--gold); color: var(--navy); }

.footer-disclaimer {
  background: rgba(0,0,0,0.25); padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.82rem; color: rgba(255,255,255,0.75);
}
.footer-disclaimer p { margin: 0 0 8px; max-width: 1000px; }

.footer-legal {
  padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem; color: rgba(255,255,255,0.6);
}
.footer-legal .container {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-legal ul { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,0.7); font-size: 0.8rem; }

/* =============================================================
   Mission pillars — centered section header sits above a row of
   three numbered pillars. The pillars use a horizontal gold top-
   bar with serif numerals so they read as editorial (not card-
   chrome), which keeps them visually distinct from the Focus
   Area tiles below.
   ============================================================= */
.section-head.center {
  margin-left: auto; margin-right: auto; text-align: center;
  max-width: 720px;
}
.section-head.center .lede-text { margin-left: auto; margin-right: auto; }

.mission-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  margin-top: 44px;
}
@media (max-width: 900px) {
  .mission-pillars { grid-template-columns: 1fr; gap: 24px; }
}
.mission-pillar {
  display: block;
  padding-top: 22px;
  border-top: 3px solid var(--gold);
  transition: transform 0.25s;
}
.mission-pillar:hover { transform: translateY(-2px); }
.mission-pillar .num {
  font-family: var(--font-sans);
  font-size: 1.75rem; line-height: 1; color: var(--gold);
  font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.mission-pillar h3 {
  font-size: 1.15rem; margin-bottom: 8px; color: var(--navy);
}
.mission-pillar p {
  color: var(--text-muted); font-size: 0.96rem; margin: 0; line-height: 1.6;
}

/* =============================================================
   Focus tiles — a visually distinct treatment from mission-pillars
   and research-cards. Gold left bar that animates in on hover,
   a corner mark, and an explicit "arrow" affordance.
   ============================================================= */
.focus-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 960px) { .focus-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .focus-tiles { grid-template-columns: 1fr; } }

.focus-tile {
  position: relative;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 28px 26px 24px 32px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
}
.focus-tile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--gold);
  transform: scaleY(0.3); transform-origin: top;
  transition: transform 0.35s ease;
}
.focus-tile:hover {
  box-shadow: var(--shadow); border-color: var(--gold);
  text-decoration: none; transform: translateY(-2px);
}
.focus-tile:hover::before { transform: scaleY(1); }
.focus-tile .focus-mark {
  position: absolute; top: 18px; right: 22px;
  font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 700; color: var(--gold);
  letter-spacing: 0.08em; opacity: 0.8;
  font-variant-numeric: tabular-nums;
}
.focus-tile .focus-eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem;
  font-weight: 700; color: var(--text-muted); margin: 0;
}
.focus-tile h3 { color: var(--navy); font-size: 1.2rem; margin: 0; }
.focus-tile p {
  color: var(--text-muted); font-size: 0.95rem; margin: 0; line-height: 1.55;
}
.focus-tile .focus-link {
  margin-top: auto; color: var(--blue); font-weight: 600; font-size: 0.88rem;
  padding-top: 8px;
}
.focus-tile .focus-link::after { content: " →"; transition: transform 0.2s; display: inline-block; }
.focus-tile:hover .focus-link::after { transform: translateX(3px); }

/* =============================================================
   Citation utility classes — standardized format used in homepage
   news cards, conferences page, publications page.
   ============================================================= */
.cite { font-size: 0.95rem; line-height: 1.55; color: var(--text); margin: 0 0 12px; }
.cite .cite-authors { color: var(--text); }
/* PI is part of the author string — no emphasis, matches surrounding text. */
.cite .cite-pi { font-weight: inherit; color: inherit; }
.cite .cite-title { color: var(--text); font-style: italic; }
.cite .cite-venue { color: inherit; font-weight: inherit; font-style: normal; }
.cite .cite-venue-italic { color: inherit; font-weight: inherit; font-style: italic; }
.cite .cite-date { color: var(--text-muted); }

/* =============================================================
   Animation system — page-entry fade, scroll-reveal, and
   cross-page view transitions. Honors prefers-reduced-motion.
   ============================================================= */
/* NOTE: keep this keyframe transform-free — applying any non-none transform
   to <body> creates a containing block for descendants with position: fixed,
   which breaks the lightbox (image cuts off as user scrolls). */
@keyframes pageFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
body { animation: pageFade 0.45s ease-out both; }
.hero h1, .hero .lede, .hero .cta-row, .hero .eyebrow {
  animation: heroFade 0.7s ease-out both;
}
.hero .eyebrow { animation-delay: 0.05s; }
.hero h1       { animation-delay: 0.12s; }
.hero .lede    { animation-delay: 0.22s; }
.hero .cta-row { animation-delay: 0.32s; }

/* Scroll-reveal: elements with .reveal fade-up when they enter the viewport.
   JS adds .is-visible when the element intersects. */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"].is-visible { transition-delay: 0.08s; }
.reveal[data-delay="2"].is-visible { transition-delay: 0.16s; }
.reveal[data-delay="3"].is-visible { transition-delay: 0.24s; }
.reveal[data-delay="4"].is-visible { transition-delay: 0.32s; }

/* Cross-page transitions (Chromium) — graceful no-op in other browsers. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  body, .hero h1, .hero .lede, .hero .cta-row, .hero .eyebrow {
    animation: none !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .focus-tile::before { transform: scaleY(1); transition: none; }
  .focus-tile:hover { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Helpers */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--text-muted); }
.center { text-align: center; }
.lede-text { font-size: 1.125rem; color: var(--text-muted); max-width: 720px; }
.pill {
  display: inline-block; padding: 4px 12px; border-radius: 100px;
  background: var(--blue-soft); color: var(--navy); font-size: 0.78rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.pill.gold { background: var(--gold-soft); color: #8a6c2f; }
.divider { border: 0; border-top: 1px solid var(--rule); margin: 32px 0; }

/* =============================================================
   Research-page components — program tag, inquiry list.
   Used on research.html to present each program area as a
   substantive debrief with numbered lines of inquiry, rather
   than a recap of the homepage Focus Area tiles.
   ============================================================= */

/* Program tag — tiny uppercase label with a thin gold rule,
   used in place of a loud "section index" treatment. */
.program-tag {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.program-tag::before {
  content: ""; width: 28px; height: 1px; background: var(--gold);
  flex-shrink: 0;
}

/* Inquiry list — sits beneath a program's opening description. */
.inquiry-list {
  margin-top: 36px;
  display: flex; flex-direction: column; gap: 0;
}
.inquiry-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.inquiry-item:first-child { border-top-color: var(--navy); }
.inquiry-item:last-child { border-bottom: 1px solid var(--rule); }
.inquiry-num {
  font-family: var(--font-sans);
  font-size: 1.4rem; font-weight: 700; line-height: 1;
  color: var(--gold);
  padding-top: 4px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.inquiry-body h3 {
  font-size: 1.2rem; margin: 0 0 10px; color: var(--navy);
  line-height: 1.3; letter-spacing: -0.005em;
}
.inquiry-body p {
  color: var(--text); font-size: 1rem; line-height: 1.65;
  margin: 0 0 10px;
}
.inquiry-body .meta-label {
  display: inline-block;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 640px) {
  .inquiry-item { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .inquiry-num { font-size: 1.35rem; padding-top: 0; }
}

.program-footnote { margin-top: 28px; font-size: 0.92rem; }

/* =============================================================
   Polish layer — subtle modern-tech refinements absorbed from
   category leaders in medical-evidence products. Keeps our
   navy + gold palette; elevates card chrome, button affordance,
   and headline rhythm.
   ============================================================= */

/* Two-tone headline accent — one word in gold inside an H1/H2.
   Usage: <h1>What the Institute <span class="hl-gold">studies</span>.</h1> */
.hl-gold { color: var(--gold); font-style: normal; font-weight: inherit; }

/* Rounded-square icon tile — small gold-tinted container for a
   serif numeral, glyph, or small SVG. Use sparingly as a wayfinding
   mark next to section heads or card titles. */
.icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--gold-soft); color: var(--navy);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 700;
  letter-spacing: -0.005em; line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.icon-tile--sm { width: 36px; height: 36px; border-radius: 10px; font-size: 1rem; }

/* Check-bullet list — small gold circle-check for feature bullets.
   Usage: <ul class="check-list"><li>...</li></ul> */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative; padding-left: 28px; margin-bottom: 10px;
  color: var(--text); line-height: 1.55;
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold-soft);
}
.check-list li::after {
  content: ""; position: absolute; left: 6px; top: 9px;
  width: 4px; height: 8px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
}

/* Primary button — arrow-in-circle affordance that eases right on hover.
   Applies to .btn.btn-primary and .btn.btn-gold when they have the
   .btn-with-arrow modifier, to avoid retrofitting every existing button. */
.btn-with-arrow {
  display: inline-flex; align-items: center; gap: 10px;
}
.btn-with-arrow .arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  font-size: 0.95rem; line-height: 1;
  transition: transform 0.22s ease, background 0.22s ease;
}
.btn-with-arrow:hover .arrow { transform: translateX(3px); }
.btn-outline.btn-with-arrow .arrow { background: rgba(0,56,101,0.08); color: var(--navy); }
.btn-gold.btn-with-arrow .arrow { background: rgba(0,56,101,0.12); color: var(--navy); }

/* Softer card radii everywhere — aligns with the modern-tech
   category feel. Keep shadows light so the feeling of a card
   comes from padding and a hairline border, not from chrome. */
.card, .research-card, .focus-tile {
  border-radius: 14px;
}
.card { box-shadow: none; }
.card:hover { box-shadow: var(--shadow-sm); }

/* Small meta-badge — gold dot + small uppercase tracked label,
   used in footers of cards (e.g., "Evidence reviewed April 2026"). */
.meta-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
}
.meta-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
}

/* =============================================================
   Hero v2 — distinctive cardiac-themed hero for the homepage.
   Layered: breathing gradient, subtle grid pattern, right-side
   status card with live pulse, animated ECG line on the bottom
   edge. Respects prefers-reduced-motion.
   ============================================================= */

/* Breathing gradient layer — slow drift on top of the photo. */
@keyframes heroBreathe {
  0%   { opacity: 0.92; transform: scale(1.00) translateX(0); }
  50%  { opacity: 0.96; transform: scale(1.015) translateX(-6px); }
  100% { opacity: 0.92; transform: scale(1.00) translateX(0); }
}
.hero.hero-v2 { overflow: hidden; }
.hero.hero-v2 .hero-bg {
  animation: heroBreathe 18s ease-in-out infinite;
  transform-origin: center center;
}

/* Subtle diagonal grid pattern on top of the photo — adds
   technological texture without competing with content. */
.hero.hero-v2 .hero-grid {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 85%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 85%);
}

/* Single-column hero — hero-aside removed site-wide.
   Hero content is left-aligned, matching the rest of the homepage layout. */
.hero.hero-v2 .hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
  z-index: 3;
}
.hero.hero-v2 .hero-content {
  max-width: 820px;
  margin: 0;
}
.hero.hero-v2 .hero-content .cta-row {
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .hero.hero-v2 .hero-aside { display: none; }
}

/* Animated eyebrow rule — gold line that scales in from 0. */
@keyframes eyebrowRule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.eyebrow-rule {
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow-rule::before {
  content: ""; width: 36px; height: 1px; background: var(--gold);
  transform-origin: left center;
  animation: eyebrowRule 0.7s ease-out 0.1s both;
}

/* Right-side status card — translucent frosted surface over the
   hero background, with a live pulse indicator. */
.hero-aside {
  animation: heroFade 0.9s ease-out 0.45s both;
}
.hero-card {
  position: relative;
  padding: 24px 22px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
}
.hero-card-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 10px;
}
.hero-card-title {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.005em;
  color: #fff; margin-bottom: 2px;
}
.hero-card-sub {
  font-size: 0.92rem; color: rgba(255,255,255,0.72);
  margin-bottom: 18px;
}
.hero-card-pulse {
  display: inline-flex; align-items: center; gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: rgba(255,255,255,0.88);
}
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,160,99,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(201,160,99,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,160,99,0); }
}
.hero-card-pulse .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
  animation: dotPulse 2.2s ease-out infinite;
}

/* Animated ECG line along the bottom edge of the hero. Draws
   on over 2.6s, then fades in a continuous subtle "pulse"
   via opacity loop. */
@keyframes ecgDraw {
  from { stroke-dashoffset: 2400; }
  to   { stroke-dashoffset: 0; }
}
@keyframes ecgPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}
.hero-ecg {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  width: 100%; height: 60px; color: var(--gold);
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
  animation:
    ecgDraw 2.6s ease-out 0.3s forwards,
    ecgPulse 3.2s ease-in-out 3s infinite;
  pointer-events: none;
}

/* At-a-glance cards — staggered entrance + subtle hover lift. */
.glance-grid > * {
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.glance-grid > *:hover {
  transform: translateY(-2px);
}

/* =============================================================
   RESEARCH-PAGE HERO — compact single-column variant of hero-v2.
   Shares the breathing gradient, grid overlay, and ECG line,
   but drops the right-side status card and uses a richer navy
   gradient background so it has presence on its own.
   ============================================================= */
.hero.hero-compact {
  padding: 72px 0 88px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: var(--navy);
  color: #fff;
}
/* Interior hero — blue gradient with a subtle opaque anatomy photo
   layered in so it reads as "cardiovascular" without being loud.
   The gradient sits on top at high opacity; the photo peeks through. */
.hero.hero-compact .hero-bg {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Layered CSS-only treatment:
     1. Soft gold glow in upper-right (brand accent)
     2. Deeper blue pool in lower-left (depth)
     3. Faint center highlight (lift)
     4. Diagonal navy gradient base */
  background:
    radial-gradient(1200px 620px at 88% -10%, rgba(201,160,99,0.22) 0%, rgba(201,160,99,0) 58%),
    radial-gradient(900px 520px at 6% 110%, rgba(0,88,150,0.38) 0%, rgba(0,88,150,0) 62%),
    radial-gradient(700px 420px at 50% 50%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(135deg, #001e36 0%, #002f56 35%, #003d72 70%, #00508e 100%);
}
/* Subtle diagonal texture scanlines for depth without a photo */
.hero.hero-compact .hero-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,0.025) 0px,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 6px
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}
/* Decorative ECG watermark that slowly drifts across the hero */
.hero.hero-compact .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'><path d='M0,100 L220,100 L245,100 L265,60 L290,140 L315,40 L340,160 L365,100 L600,100 L625,100 L645,70 L670,135 L695,55 L720,145 L745,100 L980,100 L1005,100 L1025,60 L1050,140 L1075,40 L1100,160 L1125,100 L1200,100' fill='none' stroke='%23C9A063' stroke-opacity='0.18' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center 70%;
  background-size: 120% auto;
  opacity: 0.55;
  pointer-events: none;
}
.hero.hero-compact::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(ellipse at 85% 100%, rgba(201,160,99,0.12) 0%, rgba(201,160,99,0) 55%);
}
.hero.hero-compact .hero-grid {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 80%, transparent);
}
.hero.hero-compact .hero-inner {
  display: block;
  position: relative;
  z-index: 3;
}
.hero.hero-compact .hero-content {
  max-width: 880px;
}
.hero.hero-compact h1 {
  color: #fff;
  font-size: clamp(1.9rem, 3.8vw, 2.75rem);
  line-height: 1.12;
  margin: 14px 0 14px;
}
.hero.hero-compact .lede {
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  max-width: 780px;
}
.hero.hero-compact .eyebrow {
  color: rgba(255,255,255,0.85);
}

/* Hero stat row — three small stats along the bottom of the hero,
   each separated by a thin gold divider. */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 28px;
  border-left: 1px solid rgba(255,255,255,0.12);
  animation: heroFade 0.8s ease-out 0.35s both;
}
.hero-stat:first-child {
  padding-left: 0;
  border-left: none;
}
.hero-stat-num {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: -0.01em;
  color: var(--gold);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
}
.hero-stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  font-weight: 600;
}
@media (max-width: 720px) {
  .hero-stat { padding: 6px 14px; }
  .hero-stat:first-child { padding-left: 0; }
  .hero-stat-num { font-size: 1.5rem; }
}

/* Hero "programs" variant — shows the three program areas as
   small gold-edged pills in place of a big number. Paired with
   the same "Programs" label treatment used by other hero stats. */
.hero-stat--programs { flex: 0 1 auto; min-width: 0; }
.hero-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 1.9rem;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgba(201,160,99,0.55);
  border-radius: 999px;
  color: rgba(255,255,255,0.94);
  background: rgba(201,160,99,0.08);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hero-tag { font-size: 0.72rem; padding: 3px 8px; }
}

/* At-a-glance cards — staggered entrance + subtle hover lift. */
.glance-grid > * {
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.glance-grid > *:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero-v2 .hero-bg { animation: none; }
  .eyebrow-rule::before { animation: none; transform: scaleX(1); }
  .hero-card-pulse .dot { animation: none; }
  .hero-ecg {
    animation: none; stroke-dashoffset: 0;
  }
}

/* Publication external links — PubMed / Google Scholar / DOI */
.pub-links {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pub-links a {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid rgba(0,56,101,0.2);
  border-radius: 999px;
  color: var(--navy);
  background: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.2s;
}
.pub-links a:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-soft);
}
.pub-link-muted {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px dashed var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: default;
}

/* Faculty card: name links + "view profile" tail link */
.team-card .name a { color: var(--navy); text-decoration: none; }
.team-card .name a:hover { color: var(--gold); }
.team-card .profile-link {
  margin-top: 12px;
  font-size: 0.9rem;
  font-weight: 600;
}
.team-card .profile-link a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,56,101,0.25);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.team-card .profile-link a:hover { color: var(--gold); border-color: var(--gold); }

/* Faculty profile pages — long-form bio layout */
.profile-hero { padding: 48px 0 24px; }
.profile-hero .eyebrow { margin-bottom: 12px; }
.profile-hero h1 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 0 0 6px; color: var(--navy); }
.profile-credentials { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 12px; }

.profile-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 32px;
}
@media (max-width: 820px) {
  .profile-layout { grid-template-columns: 1fr; }
}
.profile-photo {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--gold-soft);
  border: 1px solid rgba(0,0,0,0.06);
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-body h2 {
  font-size: 1.35rem;
  color: var(--navy);
  margin: 28px 0 10px;
  border-bottom: 2px solid rgba(201,160,99,0.3);
  padding-bottom: 6px;
}
.profile-body h2:first-child { margin-top: 0; }
.profile-body ul { padding-left: 20px; margin: 0 0 16px; }
.profile-body li { margin: 4px 0; }
.profile-facts {
  background: var(--gold-soft);
  border: 1px solid rgba(201,160,99,0.35);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0 20px;
}
.profile-facts dl { margin: 0; display: grid; grid-template-columns: 140px 1fr; row-gap: 8px; }
.profile-facts dt { color: var(--navy); font-weight: 600; font-size: 0.85rem; }
.profile-facts dd { margin: 0; font-size: 0.92rem; }
.profile-links {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 12px 0 24px;
}
.profile-links a {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border: 1px solid rgba(0,56,101,0.2);
  border-radius: 999px;
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.profile-links a:hover { border-color: var(--gold); color: var(--gold); }

/* =========================================================
   Team page — vertical faculty stack + trainee stack
   ========================================================= */
.team-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 40px;
}
/* In vertical stack mode, each .team-card is laid out horizontally:
   photo on the left, body (name + credentials + bio + focus) on the right. */
.team-grid .team-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: stretch;
}
.team-grid .team-card .avatar {
  aspect-ratio: auto;
  height: 100%;
  min-height: 140px;
  border-bottom: none;
  border-right: 1px solid var(--rule);
  overflow: hidden;
}
.team-grid .team-card .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-grid .team-card .body {
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.team-grid .team-card .bio {
  font-size: 14.5px;
  color: #3c4450;
  line-height: 1.55;
  margin: 8px 0 10px;
}
@media (max-width: 620px) {
  .team-grid .team-card {
    grid-template-columns: 1fr;
  }
  .team-grid .team-card .avatar {
    min-height: 240px;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
}

.team-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,40,68,0.08);
  border-color: #d9dce2;
}
.team-photo {
  aspect-ratio: 1 / 1;
  background: #eef1f5;
  overflow: hidden;
  position: relative;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-photo.is-tbd {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: repeating-linear-gradient(45deg, #eef1f5 0 8px, #e6e9ee 8px 16px);
}
.team-body {
  padding: 18px 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.team-body h3 {
  margin: 0 0 4px;
  font-size: 17px;
  color: var(--navy);
  line-height: 1.3;
}
.role-short {
  color: var(--gold);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.team-body p {
  color: #3c4450;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}

/* Trainee stack — vertical layout, one per row */
.trainee-category {
  margin: 0 0 28px;
}
.trainee-category h3 {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}
.trainee-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.trainee-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px 20px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.trainee-row:hover {
  border-color: #d9dce2;
  transform: translateX(2px);
}
.trainee-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #eef1f5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.trainee-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trainee-photo.is-tbd {
  background: repeating-linear-gradient(45deg, #eef1f5 0 6px, #e6e9ee 6px 12px);
}
.trainee-body h4 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.trainee-body .role-short {
  margin: 0 0 6px;
}
.trainee-body p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
@media (max-width: 540px) {
  .trainee-row {
    grid-template-columns: 72px 1fr;
    gap: 14px;
    padding: 14px 16px;
  }
  .trainee-photo { width: 72px; height: 72px; }
}

/* =========================================================
   Conferences page — symposium feature card + deadlines
   ========================================================= */
.symposium-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 40px;
  box-shadow: 0 6px 20px rgba(0,40,68,0.06);
}
/* Text-only variant — no media pane. */
.symposium-card.symposium-card--textonly {
  grid-template-columns: 1fr;
  border-left: 4px solid var(--gold);
}
.symposium-card.symposium-card--textonly .symposium-body {
  padding: 28px 32px;
}
@media (max-width: 820px) {
  .symposium-card { grid-template-columns: 1fr; }
}
.symposium-media {
  position: relative;
  min-height: 280px;
  background: var(--navy);
  overflow: hidden;
}
.symposium-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95);
}
.symposium-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.symposium-body {
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.symposium-body .eyebrow {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 8px;
}
.symposium-body h2 {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.25;
  color: var(--navy);
}
.symposium-body p {
  color: #3c4450;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 18px;
}
.symposium-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--text-muted);
}
.symposium-meta span strong {
  color: var(--navy);
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
  font-weight: 600;
}

/* Disabled button variant */
.btn.is-disabled {
  background: #e6e9ee;
  color: #9aa1ab;
  border-color: #e6e9ee;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.btn.is-disabled:hover { transform: none; background: #e6e9ee; }

/* Deadline list */
.deadline-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.deadline-item {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 22px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule);
  border-radius: 4px;
  padding: 16px 20px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.deadline-item.deadline-open {
  border-left-color: #2a9d5a;
}
.deadline-item.deadline-closed {
  border-left-color: #c05b5b;
  opacity: 0.78;
}
.deadline-item.deadline-tba {
  border-left-color: var(--gold);
}
.deadline-item:hover {
  transform: translateX(2px);
}
.deadline-date {
  text-align: center;
  padding: 4px 0;
  border-right: 1px solid var(--rule);
}
.deadline-month {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}
.deadline-day {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.deadline-year {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: 0.06em;
}
.deadline-date.is-tba {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.deadline-body h4 {
  margin: 0 0 3px;
  font-size: 15.5px;
  color: var(--navy);
  line-height: 1.3;
}
.deadline-body p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.deadline-status {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 3px;
}
.deadline-status.is-open {
  background: #e5f3eb;
  color: #1f7a44;
}
.deadline-status.is-closed {
  background: #f5e5e5;
  color: #8e3e3e;
}
.deadline-status.is-tba {
  background: var(--gold-soft);
  color: #8a6a2b;
}
.deadline-link {
  font-size: 13px;
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}
.deadline-link:hover { color: var(--gold); }
@media (max-width: 700px) {
  .deadline-item {
    grid-template-columns: 90px 1fr;
    gap: 14px;
  }
  .deadline-status {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
  }
}

/* =========================================================
   Contact page — map embed
   ========================================================= */
.map-embed {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: #eef1f5;
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 620px) {
  .map-embed { aspect-ratio: 4 / 3; }
}


/* =========================================================
   Newsletter signup form (conferences.html)
   ========================================================= */
.newsletter-form {
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-top: 20px;
}
.newsletter-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.newsletter-form input[type="text"],
.newsletter-form input[type="email"],
.newsletter-form select {
  flex: 1 1 200px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: #fff;
}
.newsletter-form input:focus,
.newsletter-form select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--navy);
}
.newsletter-form button[type="submit"] {
  flex: 0 0 auto;
}
.newsletter-note {
  font-size: 0.82rem;
  margin-top: 10px;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
@media (max-width: 560px) {
  .newsletter-row { flex-direction: column; }
  .newsletter-form button[type="submit"] { width: 100%; }
}


/* Brand-mark logo removed site-wide */
.brand-mark { display: none !important; }


/* =========================================================
   Team page — affiliation groups (Sentara / EVMS)
   ========================================================= */
.team-affiliation {
  margin: 48px 0 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.team-affiliation:first-of-type {
  border-top: 0;
  padding-top: 8px;
  margin-top: 16px;
}
.team-affiliation__title {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}
.team-affiliation__title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  background: var(--gold);
  margin-top: 12px;
  margin-bottom: 20px;
}
.team-subgroup-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 22px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.team-order {
  display: inline-block;
  width: 22px; height: 22px;
  line-height: 22px;
  text-align: center;
  background: var(--gold);
  color: #fff;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 6px;
}


/* =========================================================
   At-a-glance — two-up variant (homepage)
   ========================================================= */
.glance-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0;
}
.glance-tile {
  text-align: left;
  padding: 6px 16px;
  border-left: 3px solid var(--gold);
}
.glance-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 4px;
}
.glance-lead {
  color: var(--navy);
  font-weight: 600;
}
.glance-note {
  color: var(--text-muted);
  font-size: 0.88rem;
}
.glance-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .glance-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .glance-grid-2,
  .glance-grid-3 { grid-template-columns: 1fr; }
}


/* Newsletter thank-you state + thank-you page */
.newsletter-thanks {
  padding: 14px 16px;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: 6px;
  color: var(--navy);
  margin-top: 10px;
}

/* Apply-form page */
.apply-form {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
}
.apply-form .field { margin-bottom: 18px; }
.apply-form label { display: block; font-weight: 600; color: var(--navy); margin-bottom: 6px; font-size: 0.92rem; }
.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="url"],
.apply-form input[type="number"],
.apply-form select,
.apply-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: #fff;
  box-sizing: border-box;
}
.apply-form textarea { min-height: 80px; resize: vertical; }
.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--navy);
}
.apply-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.apply-form .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0;
}
.apply-form .checkbox-row input { margin-top: 3px; }
.apply-form .checkbox-row label { margin-bottom: 0; font-weight: 400; }
.apply-form .submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 640px) {
  .apply-form .field-row { grid-template-columns: 1fr; }
}

/* Admin dashboard */
.admin-gate {
  max-width: 420px;
  margin: 40px auto 60px;
  padding: 28px 30px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.admin-gate h2 { margin-top: 0; }
.admin-gate input[type="password"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 0.95rem;
  margin: 10px 0 14px;
  box-sizing: border-box;
}
.admin-panel { margin-bottom: 48px; }
.admin-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.admin-table th {
  background: var(--bg-alt);
  font-weight: 700;
  color: var(--navy);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  border: 1px dashed var(--rule);
  border-radius: 6px;
}
.admin-note {
  padding: 14px 16px;
  background: var(--bg-alt);
  border-left: 3px solid var(--gold);
  margin-bottom: 24px;
  font-size: 0.88rem;
  color: var(--text);
}


/* =========================================================
   Mobile nav + mobile polish (added after the initial pass)
   ========================================================= */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.primary-nav.is-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.primary-nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.primary-nav.is-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
  .site-header .container {
    flex-wrap: wrap;
  }
  .nav-toggle { display: inline-flex; }

  .primary-nav {
    order: 3;
    width: 100%;
  }
  .primary-nav ul {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 8px 0 4px;
    margin-top: 8px;
    border-top: 1px solid var(--rule);
  }
  .primary-nav.is-open ul {
    display: flex;
  }
  .primary-nav ul li {
    border-bottom: 1px solid var(--rule);
  }
  .primary-nav ul li:last-child { border-bottom: 0; }
  .primary-nav ul li a {
    display: block;
    padding: 12px 4px;
    font-size: 0.98rem;
  }

  /* Hero: stack everything */
  .hero.hero-v2 .hero-inner {
    grid-template-columns: 1fr;
  }
  .hero h1 { font-size: 1.9rem; line-height: 1.15; }
  .hero .lede { font-size: 1rem; }

  /* Collapse common grids to 1 column on narrow screens */
  .grid.grid-2,
  .grid.grid-3,
  .mission-pillars,
  .focus-tiles,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* With-sidebar layouts -> stack */
  .with-sidebar {
    grid-template-columns: 1fr;
  }
  .with-sidebar .sidebar {
    position: static;
    margin-bottom: 24px;
  }

  /* Team affiliation headings — scale down on narrow screens */
  .team-affiliation__title { font-size: 1.5rem; }

  /* Event item: stack the date, body, and CTA */
  .event-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Symposium text-only card: lose horizontal padding */
  .symposium-card--textonly .symposium-body { padding: 22px 18px; }
}

@media (max-width: 640px) {
  .container { padding-left: 18px; padding-right: 18px; }
  .section { padding: 48px 0; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.45rem; }

  .newsletter-row { flex-direction: column; }
  .newsletter-form button[type="submit"] { width: 100%; }

  .apply-form { padding: 20px 18px; }
  .apply-form .field-row { grid-template-columns: 1fr; }
  .apply-form .submit-row button { width: 100%; }

  /* Admin tables become horizontally scrollable */
  #newsletter-table,
  #applications-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-table { min-width: 640px; }
  .admin-toolbar .btn { flex: 1 1 auto; font-size: 0.88rem; padding: 8px 12px; }
}

/* iframe map on contact page */
@media (max-width: 640px) {
  .map-embed iframe { height: 320px; }
}


/* Apply CTA inside the homepage Trainees glance tile */
.glance-cta {
  display: inline-block;
  margin-top: 4px;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,56,101,0.25);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.glance-cta:hover { color: var(--gold); border-color: var(--gold); }


/* =========================================================
   Homepage "Get Involved" — apply + newsletter panels
   ========================================================= */
.engage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1080px;
  margin: 0;
}
.engage-panel {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
}
.engage-panel h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 1.4rem;
}
.engage-panel p {
  color: var(--text);
  margin: 0 0 8px;
}
.engage-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 8px;
}
.engage-panel .newsletter-form {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 12px;
}
@media (max-width: 860px) {
  .engage-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Active clinical trials — research page (subtle 2-col grid)
   ========================================================= */
.trial-group-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin: 36px 0 14px;
  padding: 10px 0 8px;
  border-top: 2px solid var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  letter-spacing: 0.005em;
}
.trial-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.trial-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.trial-item {
  background: var(--bg-alt);
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.trial-item:hover {
  background: #eef2f7;
  border-color: rgba(0,56,101,0.18);
}
.trial-item > a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
  font-size: 0.95rem;
}
.trial-item > a:hover { color: var(--gold); }
.trial-item .trial-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: 0.01em;
}
@media (max-width: 760px) {
  .trial-list { grid-template-columns: 1fr; }
}


/* =========================================================
   Research focus areas — 3-up grid (research.html)
   ========================================================= */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 8px 0 16px;
}
.focus-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  border-radius: 6px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}
.focus-card h3 {
  margin: 8px 0 10px;
  color: var(--navy);
  font-size: 1.2rem;
}
.focus-card p {
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.55;
  flex: 1;
  margin: 0 0 14px;
}
.focus-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 4px;
}
.focus-card .focus-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,56,101,0.25);
  align-self: flex-start;
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.focus-card .focus-link:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 860px) {
  .focus-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   Team page — 3-up affiliation columns + vertical team cards
   ========================================================= */
.affil-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 28px 0 16px;
}
.affil-col { display: flex; flex-direction: column; }
.affil-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold);
}
.card-stack { display: flex; flex-direction: column; gap: 16px; }

/* Vertical team card — photo on top, body below */
.team-card.vertical {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}
.team-card.vertical .avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-right: none;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  min-height: 0;
  display: block;
}
.team-card.vertical .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-card.vertical .avatar .placeholder-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #eef1f5 0 6px, #e6e9ee 6px 12px);
  color: var(--text-muted);
  font-size: 0.78rem;
}
.team-card.vertical .body { padding: 14px 16px 16px; }
.team-card.vertical .name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
  line-height: 1.3;
}
.team-card.vertical .credentials {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.4;
}
.team-card.vertical .profile-link a {
  font-size: 0.84rem;
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,56,101,0.25);
  padding-bottom: 1px;
}
.team-card.vertical .profile-link a:hover { color: var(--gold); border-color: var(--gold); }

/* Placeholder cards reuse vertical layout */
.team-card.placeholder .avatar { background: var(--bg-alt); }

@media (max-width: 860px) {
  .affil-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .affil-row { grid-template-columns: 1fr; }
}

/* Focus-card variant: single full-width on research page */
.focus-card--full {
  display: block;
  max-width: 760px;
  margin: 12px 0 16px;
}


/* =========================================================
   Gallery — event headings + image styling
   ========================================================= */
.event-heading {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  margin: 32px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
}
.event-heading:first-of-type { margin-top: 8px; }

.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg-alt);
  aspect-ratio: 3 / 4;
  border: 1px solid var(--rule);
  transition: transform 0.2s, box-shadow 0.2s;
}
.gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,40,68,0.15);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,40,68,0.85);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 4px;
}


/* =========================================================
   Lightbox overlay (gallery) — flexbox-centered, SVG icons
   ========================================================= */
/* (Older lightbox rules removed — see consolidated block below.) */

/* =========================================================
   Mobile primary nav — solid background when open
   ========================================================= */
@media (max-width: 860px) {
  .primary-nav.is-open ul {
    display: flex;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 8px 14px;
    margin-top: 12px;
    position: relative;
    z-index: 50;
  }
  .primary-nav.is-open ul li {
    border-bottom: 1px solid var(--rule);
  }
  .primary-nav.is-open ul li:last-child { border-bottom: 0; }
}


/* =========================================================
   Section blend — tinted Mission with smooth gradients
   ========================================================= */
.section.section--blend {
  background: var(--bg-alt);
  position: relative;
  z-index: 1;
  padding-top: 56px;
  padding-bottom: 56px;
  margin-top: 64px;
  margin-bottom: 0;
}
/* News section that follows Our Work — match the gap above */
.section.section--blend + .section {
  padding-top: 64px;
}
.section.section--blend .section-head {
  margin-bottom: 32px;
}
@media (max-width: 700px) {
  .section.section--blend {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* =========================================================
   Heartbeat divider — animated EKG beat between sections
   ========================================================= */
.heartbeat-divider {
  padding: 8px 0 32px;
  background: #fff;
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.heartbeat-divider.is-visible { opacity: 1; }

.heartbeat-divider .heartbeat-svg {
  display: block;
  width: 100%;
  max-width: 760px;
  height: 56px;
  margin: 0 auto;
  overflow: visible;
}
.heartbeat-divider .hb-line {
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0.32;
  fill: none;
}
.heartbeat-divider .hb-beat {
  stroke: var(--gold);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
}

/* Animate only when scrolled into view */
.heartbeat-divider.is-visible .hb-beat {
  animation: hbDraw 1.4s ease-out 0.15s forwards, hbPulse 2.4s ease-in-out 1.7s infinite;
}
@keyframes hbDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes hbPulse {
  0%, 100% { opacity: 0.55; }
  35%      { opacity: 1; }
  60%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .heartbeat-divider .hb-beat {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 0.85;
  }
}


/* =========================================================
   Faculty 4-column grid — Sentara Cardiology spans 2 cols
   ========================================================= */
.affil-grid--faculty {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr;
  gap: 16px 20px;
  margin: 28px 0 16px;
}
.affil-grid--faculty .affil-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold);
  align-self: end;
}
.affil-grid--faculty .affil-title--span2 {
  grid-column: span 2;
  text-align: center;
}
.affil-grid--faculty .affil-title { text-align: center; }
.affil-grid--faculty .team-card.vertical {
  margin: 0;
}
@media (max-width: 1024px) {
  .affil-grid--faculty { grid-template-columns: repeat(2, 1fr); }
  .affil-grid--faculty .affil-title--span2 { grid-column: span 2; }
  .affil-grid--faculty .affil-title { grid-column: span 2; }
}
@media (max-width: 580px) {
  .affil-grid--faculty {
    grid-template-columns: 1fr;
  }
  .affil-grid--faculty .affil-title,
  .affil-grid--faculty .affil-title--span2 { grid-column: 1; }
}


/* =========================================================
   Hero text — generous line spacing
   ========================================================= */
.hero .hero-content .eyebrow,
.hero .hero-content .eyebrow-rule {
  margin-bottom: 22px;
}
.hero .hero-content h1 {
  margin-bottom: 24px;
  line-height: 1.18;
}
.hero .hero-content .lede {
  margin-bottom: 32px;
  line-height: 1.6;
}

/* =========================================================
   Lightbox — viewport-anchored, scroll-independent, any aspect ratio
   The image dimensions are CAPPED in vw/vh units, which are always
   viewport-relative, so the visible portion is identical no matter
   how far the page underneath has been scrolled.
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 16, 32, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  animation: lbFadeIn 0.18s ease-out;
}
.lightbox[hidden] { display: none !important; }
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }

.lb-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Figure container is sized to the viewport minus the button safe-zone */
  max-width: calc(100vw - 140px);
  max-height: calc(100vh - 100px);
}
.lb-image {
  display: block;
  width: auto;
  height: auto;
  /* Hard cap in viewport units — scroll-independent */
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 160px);
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.lb-caption {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0;
  max-width: calc(100vw - 160px);
  min-height: 1em;
}

.lb-btn {
  position: fixed;
  background: #fff;
  color: #003865;
  border: 0;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 100000;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  transition: background 0.15s, transform 0.15s;
}
.lb-btn svg { display: block; }
.lb-btn:hover { background: #f0f4f8; transform: scale(1.06); }
.lb-close { top: 22px; right: 22px; }
.lb-prev  { top: 50%; left: 22px; transform: translateY(-50%); }
.lb-next  { top: 50%; right: 22px; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) scale(1.06); }
.lb-next:hover { transform: translateY(-50%) scale(1.06); }

/* Tablet */
@media (max-width: 1024px) {
  .lb-figure {
    max-width: calc(100vw - 100px);
    max-height: calc(100vh - 90px);
  }
  .lb-image {
    max-width: calc(100vw - 120px);
    max-height: calc(100vh - 140px);
  }
}
/* Phone */
@media (max-width: 700px) {
  .lb-figure {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 90px);
  }
  .lb-image {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 130px);
  }
  .lb-btn { width: 44px; height: 44px; }
  .lb-btn svg { width: 18px; height: 18px; }
  .lb-close { top: 14px; right: 14px; }
  .lb-prev  { left: 10px; }
  .lb-next  { right: 10px; }
}
/* Small phone */
@media (max-width: 480px) {
  .lb-figure {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 80px);
  }
  .lb-image {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 120px);
  }
}

/* Trainees → Team Members (single line per group: Residents / Medical Students) */
.team-members-line {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 10px;
}
.team-members-line:last-child { margin-bottom: 0; }
.team-members-line strong {
  color: var(--navy);
  font-weight: 700;
  margin-right: 6px;
}