/* =================================================================
   Dr. Jill B. Hamilton — single-page site
   Palette: pink-forward + Emory (Crimson Pro). Self-contained.
   ================================================================= */

:root {
  /* Pink-forward palette */
  --blush:        #FFF5F9;   /* canvas */
  --blush-2:      #FDEAF2;   /* soft panel */
  --rose:         #C81D6B;   /* primary magenta/rose */
  --rose-deep:    #A2155A;   /* hover */
  --plum:         #4A1530;   /* deep heading text */
  --plum-2:       #611C3A;
  --rose-soft:    #E59ABF;   /* accent */
  --gold:         #F2A900;   /* Emory gold (sparing warmth) */
  --emory-blue:   #012169;   /* hairline credibility (very sparing) */
  --ink:          #2B1A22;   /* body text */
  --ink-soft:     #6A5260;   /* muted */
  --line:         #F0D3E0;   /* hairlines on blush */
  --white:        #ffffff;

  /* Type */
  --display: "Crimson Pro", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--blush); }
/* Opening a deep link (e.g. /#publications) must not tuck the heading under the sticky bar */
.view { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  /* soft rose + Emory-gold glows over the blush canvas (scrolls with the page, so no repaint cost) */
  background:
    radial-gradient(1100px 620px at 92% -6%, rgba(200, 29, 107, .09), transparent 62%),
    radial-gradient(900px 520px at -14% 34%, rgba(242, 169, 0, .07), transparent 60%),
    var(--blush);
  background-repeat: no-repeat;   /* html carries the base colour, so the glows never tile into a seam */
  min-height: 100vh;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--plum); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 10px 0;
  font: 600 14px/1 var(--sans);
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 4px; }

/* ===============================================================
   TOP PANEL (sticky) + MAIN
   =============================================================== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(.9rem, 2.4vw, 2rem);
  padding: .6rem clamp(1.2rem, 4vw, 3rem);
  /* Near-opaque (no backdrop-filter): blurring behind a sticky bar repaints
     every scroll frame and stutters badly on Windows. */
  background: rgba(255, 246, 250, .97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px -8px rgba(74, 21, 48, .14);
}

.content {
  max-width: 1180px; margin-inline: auto;
  padding: 0 clamp(1.4rem, 5vw, 4rem) 4rem;
}
/* ---------- Single-page "views" (the nav switches between them) ----------
   No JS  → every view stays visible (one long, readable scroll).
   JS on  → `.spa` shows exactly one view at a time. */
.view { display: block; }
.spa .view { display: none; }
.spa .view--active { display: block; }
.spa .view:focus { outline: none; }
/* tighten the gap between the sticky bar and each page's heading */
.spa .view > .section:first-child { border-top: none; padding-top: clamp(1.1rem, 2.4vw, 2rem); }

/* ---------- Brand (top-left) ---------- */
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 0 auto; }
.brand__avatar {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 50% 14%;
  border: 2px solid #fff; box-shadow: 0 6px 16px -8px rgba(74,21,48,.6), 0 0 0 1px var(--line);
  transition: transform .4s var(--ease);
}
.brand:hover .brand__avatar { transform: scale(1.06); }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--plum); letter-spacing: -.01em; }
.brand__creds { font: 600 10px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rose); margin-top: 2px; }

/* ---------- Horizontal nav ---------- */
.nav { flex: 1 1 auto; min-width: 0; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .12rem; }
.nav__link {
  display: inline-block; text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: 14px; white-space: nowrap;
  padding: .45rem .6rem; border-radius: 9px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav__link:hover { background: #fff; color: var(--rose); }
.nav__link.is-active { background: var(--plum); color: #fff; }

/* ---------- Actions (icon group, top-right) ---------- */
.actions { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; }
.action {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: transform .2s var(--ease), background .25s, box-shadow .25s, color .25s, border-color .25s;
}
.action--icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: #fff; color: var(--plum); border: 1px solid var(--line);
}
.action--icon:hover { background: var(--plum); color: #fff; transform: translateY(-2px); border-color: var(--plum); }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* mobile nav toggle hidden on wide screens */
.navToggle { display: none; }

/* ===============================================================
   HERO (two-column: statement + portrait)
   =============================================================== */
.hero { padding: clamp(1.1rem, 2.4vw, 2rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 32%, 360px);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.eyebrow {
  display: flex; align-items: center; gap: .65rem;
  font: 600 13px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--rose); margin: 0 0 1rem;
}
.eyebrow::before, .section__kicker::before {      /* small gold→rose accent rule */
  content: ""; flex: 0 0 26px; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--rose));
}
.hero__name {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 4.3rem); line-height: 1; letter-spacing: -.025em;
  color: var(--plum); margin: 0 0 .65rem;
}
.hero__creds {
  font: 600 12.5px/1.4 var(--sans); letter-spacing: .14em;
  color: var(--ink-soft); margin: 0 0 1.5rem;
}
.hero__creds i { font-style: normal; color: var(--gold); padding: 0 .2rem; }
.hero__headline {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.45rem, 2.3vw, 2.05rem);
  line-height: 1.22; letter-spacing: -.01em;
  color: var(--plum-2); margin: 0 0 1.3rem;
}
.hero__headline .line { display: block; }
.hero__headline .line > span { display: block; }
.hero__headline .accent > span { color: var(--rose); font-style: italic; font-weight: 400; }
.hero__lede { max-width: 50ch; font-size: 1.12rem; color: var(--ink); margin: 0 0 1.4rem; }
.hero__titleline { font-size: 15px; font-weight: 600; color: var(--plum); margin: 0; line-height: 1.5; }
.hero__titleline span { display: block; font-weight: 400; color: var(--ink-soft); font-size: 14px; }

/* hero portrait (feature image) */
.hero__portrait {
  margin: 0; justify-self: center; position: relative;
  width: 100%; max-width: 360px; aspect-ratio: 4 / 5;
  border-radius: 20px; overflow: hidden;
  border: 4px solid #fff;
  box-shadow:
    0 30px 60px -28px rgba(74,21,48,.6), 0 14px 44px -16px rgba(200,29,107,.4), 0 0 0 1px var(--line),
    16px 16px 0 -2px var(--blush), 16px 16px 0 0 var(--rose-soft);   /* offset rose frame */
}
.hero__portrait::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(200,29,107,.14), transparent 45%);
  mix-blend-mode: multiply; pointer-events: none;
}
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; transition: transform .9s var(--ease); }
.hero__portrait:hover img { transform: scale(1.05); }

/* stats band (full width, below the hero grid) */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  padding: 1.6rem 1.8rem; margin-top: clamp(2rem, 5vw, 3.2rem);
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 20px 44px -32px rgba(74,21,48,.45);
}
.stat { padding: 0 1.3rem; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; padding-left: 0; }
.stat__num {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--rose); line-height: 1;
  letter-spacing: -.02em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat__num {
    background: linear-gradient(120deg, var(--rose) 10%, var(--plum-2) 95%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.stat__label { display: block; font-size: 13px; color: var(--ink-soft); margin-top: .5rem; line-height: 1.35; }

/* Home intro blurb + link to the About page */
.homeintro { margin-top: clamp(1.8rem, 3.5vw, 2.8rem); max-width: 62ch; }
.homeintro p { font-size: 1.12rem; color: var(--ink); margin: 0 0 1.1rem; line-height: 1.55; }
.homeintro__link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: 1.02rem; color: var(--rose); text-decoration: none;
  transition: color .25s var(--ease);
}
.homeintro__link .arr { transition: transform .3s var(--ease); }
.homeintro__link:hover { color: var(--plum); }
.homeintro__link:hover .arr { transform: translateX(6px); }

/* ===============================================================
   SECTIONS (shared)
   =============================================================== */
.section { padding: clamp(3rem, 8vw, 6.5rem) 0; border-top: 1px solid var(--line); }
.section__head { margin-bottom: 2rem; }
.section__kicker {
  display: inline-flex; align-items: center; gap: .65rem;
  font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--rose); margin-bottom: 1rem;
}
.section__title {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em;
  color: var(--plum); margin: 0; max-width: 18ch;
}
.section__title--xl { font-size: clamp(2.6rem, 7vw, 4.6rem); }
.section__sub { font-size: 1.05rem; color: var(--ink-soft); margin: 1rem 0 0; max-width: 52ch; }
.section__note { font-size: 14.5px; color: var(--ink-soft); margin-top: 1.8rem; }
.section__note a, .prose a, .pub__venue a { color: var(--rose); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* line-split heading animation target */
.section__title .splitline { display: block; }
.section__title .splitline > span { display: block; }

/* ---------- About ---------- */
.prose { max-width: 60ch; }
.prose p { margin: 0 0 1.2rem; font-size: 1.1rem; }
.prose strong { color: var(--plum); font-weight: 600; }
.pullquote {
  position: relative; margin: 2.8rem 0 0; padding: 1.6rem 0 0;
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.25; color: var(--plum);
  max-width: 24ch;
}
.pullquote__mark { color: var(--rose-soft); font-size: 2.5em; line-height: 0; position: absolute; top: .55em; left: -.05em; }
.pullquote cite { display: block; margin-top: 1rem; font: 500 14px/1.4 var(--sans); font-style: normal; color: var(--ink-soft); }
.pullquote em { color: var(--rose); }

/* About: text + framework figure, side by side */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(290px, 33%, 365px);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: start;
}
.about__framework {
  margin: 0; justify-self: end;
  /* nudge the figure rightward into the page margin on wide screens
     (0 below 1180px; grows with width, capped so it never reaches the edge) */
  position: relative;
  left: clamp(0px, calc((100vw - 1180px) / 3), 160px);
}
.about__framework img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; background: #fff;
  box-shadow: 0 20px 44px -22px rgba(74,21,48,.45), 0 0 0 1px var(--line);
}
.about__framework figcaption { margin-top: .65rem; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.about__framework figcaption strong { color: var(--plum); font-weight: 600; }
.about__framework-cred { display: block; margin-top: .3rem; font-size: 12px; color: var(--rose); }

/* About page: tighter head + quote so it fits on one screen */
#about .section__head { margin-bottom: 1.5rem; }
/* Closing quote: centered feature, sits just below the text + figure */
.pullquote--center {
  max-width: 38ch; margin: clamp(.7rem, 1.6vw, 1.4rem) auto 0; padding: 0;
  text-align: center;
}
.pullquote--center .pullquote__mark {
  position: static; display: block; text-align: center;
  font-size: 2.6em; line-height: .3; margin: 0 0 .25rem;
}
.pullquote--center cite { margin-top: .9rem; }

@media (max-width: 820px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__framework { max-width: 480px; justify-self: start; left: 0; }
  .pullquote--center { max-width: 30ch; }
}

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 7.2rem; top: .4rem; bottom: .4rem; width: 2px;
  background: linear-gradient(180deg, var(--rose-soft), var(--rose) 50%, var(--rose-soft));
  transform-origin: top; transform: scaleY(var(--tl-scale, 1));
}
.tl { position: relative; display: grid; grid-template-columns: 6rem 1fr; gap: 2.4rem; padding: .9rem 0; }
.tl__year { font: 600 15px/1.4 var(--sans); color: var(--rose); text-align: right; padding-top: .15rem; }
.tl__body { position: relative; padding-left: 1.2rem; }
.tl__body::before {
  content: ""; position: absolute; left: -1.18rem; top: .45rem; width: 13px; height: 13px;
  border-radius: 50%; background: var(--white); border: 3px solid var(--rose);
  box-shadow: 0 0 0 4px var(--blush);
}
.tl__body h3 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--plum); margin: 0 0 .25rem; line-height: 1.2; }
.tl__body p { margin: 0; font-size: 15px; color: var(--ink-soft); }

/* ---------- Research cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.card {
  position: relative; padding: 1.8rem 1.6rem 1.7rem; border-radius: 16px;
  background: #fff; border: 1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--rose), var(--gold)); transform: scaleX(.22); transform-origin: left;
  transition: transform .5s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -22px rgba(74,21,48,.4); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 14px;
  background: linear-gradient(135deg, var(--blush-2), #fff); color: var(--rose);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.card__icon .ic { width: 25px; height: 25px; }
.card:hover .card__icon { background: linear-gradient(135deg, var(--rose), var(--plum-2)); color: #fff; }
.card h3 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; color: var(--plum); margin: 1rem 0 .55rem; line-height: 1.15; }
.card p { margin: 0; font-size: 15.5px; color: var(--ink-soft); }

/* ---------- Publications ---------- */
.pubs { list-style: none; margin: 0; padding: 0; }
.pub {
  display: grid; grid-template-columns: 4.4rem 1fr; gap: 1.4rem; align-items: start;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line);
}
.pub:first-child { border-top: 1px solid var(--line); }
.pub__year {
  font: 600 13px/1 var(--sans); color: var(--rose); text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: .45rem .6rem; margin-top: .2rem;
}
.pub__title {
  display: inline; font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.3;
  color: var(--plum); text-decoration: none; transition: color .25s var(--ease);
}
.pub__title::after { content: " ↗"; font-family: var(--sans); font-size: .78em; color: var(--rose-soft); transition: color .25s; }
.pub__title:hover { color: var(--rose); }
.pub__title:hover::after { color: var(--rose); }
.pub__authors { margin: .4rem 0 .15rem; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.pub__authors strong { color: var(--ink); font-weight: 600; }
.pub__venue { margin: 0; font-size: 14px; color: var(--ink-soft); }
.pubs__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.btn {
  display: inline-flex; align-items: center; text-decoration: none; font-weight: 600; font-size: 15px;
  padding: .8rem 1.3rem; border-radius: 11px; transition: transform .2s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.btn--ghost { background: #fff; color: var(--plum); border: 1.5px solid var(--rose-soft); }
.btn--ghost:hover { background: var(--rose); color: #fff; border-color: var(--rose); transform: translateY(-2px); box-shadow: 0 12px 22px -12px var(--rose); }

/* ---------- Books ---------- */
.books { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.book { text-decoration: none; display: block; transition: transform .4s var(--ease); }
.book:hover { transform: translateY(-6px); }
.book__cover {
  position: relative; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden;
  background: var(--blush-2);
  box-shadow: 0 18px 36px -18px rgba(74,21,48,.55), 0 0 0 1px var(--line);
}
.book__cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);     /* zoom-in on hover */
}
.book:hover .book__cover img { transform: scale(1.09); }
.book__cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(74,21,48,.28));
  opacity: 0; transition: opacity .4s var(--ease);
}
.book:hover .book__cover::after { opacity: 1; }
.book__meta { margin-top: 1rem; }
.book__meta h3 { font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--plum); margin: 0 0 .25rem; line-height: 1.2; }
.book__meta p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.book__meta .book__sub { margin: 0 0 .3rem; font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--plum-2); line-height: 1.3; }
.book__meta .book__role { margin: 0 0 .3rem; font-weight: 600; color: var(--rose); }
.book__go { color: var(--rose); font-weight: 600; }

/* ---------- Grants ---------- */
.grants { list-style: none; margin: 0; padding: 0; }
.grant {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; justify-content: space-between;
  padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.grant:first-child { border-top: 1px solid var(--line); }
.grant__main { flex: 1 1 320px; }
.grant__main h3 { font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--plum); margin: 0 0 .1rem; line-height: 1.25; }
.grant__agency { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.grant__meta { display: flex; flex-direction: column; align-items: flex-end; gap: .18rem; text-align: right; flex: 0 0 auto; }
.tagrole {
  font: 600 11px/1 var(--sans); letter-spacing: .03em; color: var(--rose);
  background: var(--blush-2); padding: .32rem .6rem; border-radius: 100px; white-space: nowrap;
}
.grant__amt { font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--plum); }
.grant__yrs { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- News ---------- */
.news { list-style: none; margin: 0; padding: 0; }
.newsitem { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.6rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.newsitem:first-child { border-top: 1px solid var(--line); }
.newsitem__date { font: 600 13px/1.4 var(--sans); color: var(--rose); letter-spacing: .02em; }
.newsitem p { margin: 0; font-size: 1.05rem; color: var(--ink); }
.newsitem strong { color: var(--plum); }
.newsitem a { color: var(--rose); font-weight: 600; text-decoration: none; white-space: nowrap; }
.newsitem a:hover { text-decoration: underline; text-underline-offset: 3px; }
.newsitem--feature {                     /* latest headline gets a highlighted card */
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--rose);
  border-radius: 14px; padding: 1.2rem 1.3rem; margin-bottom: .5rem;
  box-shadow: 0 18px 36px -28px rgba(74,21,48,.5);
}

/* ---------- Honors ---------- */
.honors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.honor {
  display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.3rem; border-radius: 13px;
  background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.honor::before {                         /* rose award-ribbon badge */
  content: ""; flex: 0 0 38px; height: 38px; border-radius: 50%;
  background: var(--blush-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C81D6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.2 13.7 7 22l5-3 5 3-1.2-8.3'/%3E%3C/svg%3E") center / 19px no-repeat;
}
.honor:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(74,21,48,.4); border-color: var(--rose-soft); }
.honor__yr { font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--rose); flex: 0 0 auto; min-width: 3.4rem; }
.honor p { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.4; }
.honor strong { color: var(--plum); }

/* ---------- Contact ---------- */
.section--contact { border-top: none; }
.contact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: .5rem; }
.contactcard {
  display: flex; flex-direction: column; gap: .35rem; text-decoration: none;
  padding: 1.5rem 1.6rem; border-radius: 16px; background: #fff; border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s, background .3s, color .3s;
}
.contactcard .ic { width: 24px; height: 24px; color: var(--rose); margin-bottom: .4rem; transition: color .3s; }
.contactcard__label { font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.contactcard__val { font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--plum); transition: color .3s; }
.contactcard:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(74,21,48,.45); }
.contactcard--primary { grid-column: 1 / -1; background: var(--plum); }
.contactcard--primary .ic, .contactcard--primary .contactcard__val { color: #fff; }
.contactcard--primary .contactcard__label { color: var(--rose-soft); }
.contactcard--primary:hover { background: var(--rose); }
.contactcard--primary:hover .contactcard__label { color: rgba(255,255,255,.85); }

/* Website CTA — eye-catching gradient placeholder until the new URL is wired up */
.contactcard--website {
  position: relative; overflow: hidden; grid-column: 1 / -1;
  padding: 1.7rem 1.8rem;
  background: linear-gradient(120deg, var(--rose) 0%, #B3175E 46%, var(--plum) 100%);
  border: none; color: #fff; cursor: pointer;
}
.contactcard--website .ic { color: #fff; }
.contactcard--website .contactcard__label { color: rgba(255,255,255,.88); }
.contactcard--website .contactcard__val { color: #fff; display: inline-flex; align-items: center; gap: .5rem; }
.contactcard--website .contactcard__arrow { transition: transform .35s var(--ease); }
.contactcard--website:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -20px rgba(200,29,107,.7); }
.contactcard--website:hover .contactcard__arrow { transform: translateX(6px); }
.contactcard--website::after {                 /* moving sheen */
  content: ""; position: absolute; top: 0; left: -65%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg); transition: left .75s var(--ease); pointer-events: none;
}
.contactcard--website:hover::after { left: 135%; }
.contactcard__badge {
  position: absolute; top: .95rem; right: 1.1rem; z-index: 1;
  font: 700 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--plum); background: var(--gold); padding: .42rem .62rem; border-radius: 100px;
  box-shadow: 0 6px 14px -6px rgba(74,21,48,.5);
}

.contact__addr { margin: 2rem 0 0; font-size: 14.5px; color: var(--ink-soft); }
.footer { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.footer__name { font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--plum); margin: 0 0 .2rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; margin: .55rem 0 .8rem; }
.footer__links a { font-size: 14px; font-weight: 600; color: var(--rose); text-decoration: none; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__note { font-size: 13px; color: var(--ink-soft); margin: 0; }

/* ===============================================================
   ANIMATION STATES (only active when JS adds .anim to <html>)
   Content is fully visible by default → safe without JS / reduced motion.
   =============================================================== */
.anim .reveal { opacity: 0; transform: translateY(26px); }
.anim .hero__headline .line > span { opacity: 0; transform: translateY(28px); }
.anim .section__title .splitline > span { opacity: 0; transform: translateY(22px); }
.anim .timeline::before { --tl-scale: 0; }

/* ===============================================================
   RESPONSIVE
   =============================================================== */

/* Hero: stack the portrait under the statement on narrower viewports */
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .hero__portrait { max-width: 300px; order: -1; justify-self: start; }
}

/* Narrow desktop / tablet: collapse the top nav into a toggle dropdown */
@media (max-width: 1240px) {
  .topbar { flex-wrap: wrap; gap: .8rem 1rem; }

  .navToggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; border: 1px solid var(--line); background: #fff; border-radius: 12px;
    cursor: pointer; flex: 0 0 auto; margin-left: auto; order: 2;
  }
  .navToggle span { display: block; height: 2px; width: 22px; margin: 0 auto; background: var(--plum); transition: transform .3s var(--ease), opacity .3s; }
  .topbar.is-open .navToggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topbar.is-open .navToggle span:nth-child(2) { opacity: 0; }
  .topbar.is-open .navToggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .actions { order: 1; }                 /* keep icons on the top row, left of the toggle */

  .nav { flex: 1 1 100%; order: 4; display: none; }
  .topbar.is-open .nav { display: block; padding: .3rem 0 .5rem; }
  .nav__list { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__link { padding: .6rem .8rem; font-size: 15.5px; }
}

@media (max-width: 600px) {
  .topbar { gap: .6rem; padding: .55rem .9rem; }
  .brand__name { font-size: 1.05rem; }
  /* tuck the icon actions into the dropdown so the bar stays clean */
  .actions { order: 5; flex: 1 1 100%; display: none; justify-content: flex-start; gap: .5rem; padding-top: .3rem; }
  .topbar.is-open .actions { display: flex; }
  .action--icon { width: 40px; height: 40px; }
  body { font-size: 16px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 1.3rem 1rem; padding: 1.3rem 1.2rem; }
  .stat, .stat:first-child { border-left: none; padding: 0; }
  .pub { grid-template-columns: 1fr; gap: .55rem; }
  .pub__year { justify-self: start; }
  .newsitem--feature { padding: 1rem 1.05rem; }
  .cards, .honors, .contact { grid-template-columns: 1fr; }
  .books { grid-template-columns: 1fr 1fr; }
  .timeline::before { left: 5.2rem; }
  .tl { grid-template-columns: 4rem 1fr; gap: 1.5rem; }
  .newsitem { grid-template-columns: 1fr; gap: .3rem; }
  .grant__meta { align-items: flex-start; text-align: left; }
  .hero__lede { font-size: 1.05rem; }
}

/* Tablet content grid tweaks (between 600 and 1023) */
@media (min-width: 601px) and (max-width: 1023px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .cards, .honors { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 1fr 1fr; }
  .books { grid-template-columns: repeat(3, 1fr); }
}

/* ===============================================================
   REDUCED MOTION — neutralize everything
   =============================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__portrait img, .brand__avatar, .card, .book, .honor, .contactcard, .nav__link, .action, .btn { transition: none; }
  .anim .reveal { opacity: 1; transform: none; }
  .anim .hero__headline .line > span { opacity: 1; transform: none; }
  .anim .section__title .splitline > span { opacity: 1; transform: none; }
  .anim .timeline::before { --tl-scale: 1; }
}