/* ============================================================
   aleksandrapikula.com — image-led editorial layout
   Vibrant cream / wine / gold family (coordinates with HER PRISM,
   distinct structure). Big visuals, minimal text, robust wrapping.
   ============================================================ */

:root {
  --cream:   #FBF6EC;
  --cream-2: #F4EAD8;
  --wine:    #7C1E4D;
  --wine-soft:#97265F;
  --wine-deep:#5E1239;
  --gold:    #E2A12C;
  --gold-deep:#7A5824;
  --gold-lt: #F5CE85;
  --coral:   #C24A20;
  --teal:    #2F7D8A;
  --magenta: #C1356A;
  --ink:     #2B1820;
  --ink-2:   #4A363B;
  --muted:   #6E5359;
  --on-wine: #FBF6EC;
  --on-wine-soft:#EFCDD3;
  --border:  #E5D6C0;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }
a { color: var(--gold-deep); text-decoration: none; }
a:hover { color: var(--coral); }
.eyebrow { font-family: var(--sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--coral); margin: 0 0 16px; }

/* ---------------- TOP BAR ---------------- */
.bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(20px, 5vw, 64px);
  background: rgba(251,246,236,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.bar-name { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); letter-spacing: 0.01em; }
.bar-name span { color: var(--gold-deep); }
.bar-nav { display: flex; gap: clamp(14px, 2.2vw, 30px); align-items: center; }
.bar-nav a { font-size: 0.92rem; color: var(--ink-2); }
.bar-nav a:hover { color: var(--coral); }
.bar-nav .cv { color: var(--wine); font-weight: 600; }
.bar-burger { display: none; }

/* ---------------- HERO (split image) ---------------- */
.hero { display: grid; grid-template-columns: 1.06fr 0.94fr; min-height: clamp(440px, 62vh, 580px); }
.hero-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 7vw, 96px);
  background:
    radial-gradient(900px 420px at 12% 8%, rgba(226,161,44,0.16), transparent 60%),
    radial-gradient(700px 460px at 0% 110%, rgba(193,53,106,0.10), transparent 60%),
    var(--cream);
}
.hero-text h1 { font-size: clamp(2.5rem, 5.2vw, 4.1rem); color: var(--wine); max-width: 14ch; margin-bottom: 22px; }
.hero-text .sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--ink-2); max-width: 40ch; margin-bottom: 28px; }
.hero-text .role { font-size: 0.92rem; color: var(--muted); letter-spacing: 0.02em; margin-bottom: 30px; max-width: 44ch; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-img { position: relative; overflow: hidden; background: var(--wine-deep); }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 60%, rgba(94,18,57,0.28)); }

/* ---------------- BUTTONS ---------------- */
.btn { display: inline-block; padding: 13px 26px; border-radius: 8px; font-weight: 600; font-size: 0.96rem; font-family: var(--sans); background: #D9B45A; color: #3A1224; border: 1px solid #D9B45A; transition: background .15s, color .15s; }
.btn:hover { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.btn-ghost { background: transparent; color: var(--wine); border: 1px solid var(--wine); }
.btn-ghost:hover { background: var(--wine); color: var(--cream); }

/* ---------------- SECTION WRAP ---------------- */
.sec { padding: clamp(56px, 9vw, 110px) clamp(20px, 5vw, 64px); max-width: 1180px; margin: 0 auto; }
.sec-head { max-width: 30ch; margin-bottom: 36px; }
.sec-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--wine); }
.sec-head p { color: var(--ink-2); margin-top: 12px; }

/* Lead statement */
.lead { padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 64px); max-width: 1000px; margin: 0 auto; text-align: center; }
.lead p { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.4; color: var(--wine); margin: 0; }
.lead .rule { width: 60px; height: 4px; margin: 0 auto 28px; border-radius: 2px; background: linear-gradient(90deg, var(--magenta), var(--coral), var(--gold)); }

/* ---------------- IMAGE TILES (The Work) ---------------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tile { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--wine-deep); }
.tile img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover img { transform: scale(1.05); }
.tile-cap { position: absolute; inset: auto 0 0 0; padding: 22px 22px 20px; color: var(--on-wine);
  background: linear-gradient(180deg, transparent, rgba(45,9,28,0.86)); }
.tile-cap .k { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-lt); display: block; margin-bottom: 4px; }
.tile-cap h3 { font-size: 1.3rem; color: var(--on-wine); margin-bottom: 4px; }
.tile-cap p { font-size: 0.88rem; color: var(--on-wine-soft); margin: 0; }

/* ---------------- NUMBERS BAND ---------------- */
.numbers { background: linear-gradient(125deg, var(--wine-deep), var(--wine) 60%, var(--wine-soft)); color: var(--on-wine); }
.numbers-in { max-width: 1000px; margin: 0 auto; padding: clamp(48px, 7vw, 84px) clamp(20px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 36px 64px; justify-content: center; text-align: center; }
.num .n { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--gold-lt); display: block; }
.num .l { font-size: 0.9rem; color: var(--on-wine-soft); margin-top: 8px; display: block; }

/* ---------------- PUBLICATIONS (minimal) ---------------- */
.pubs { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.pubs li { padding: 16px 0; border-top: 1px solid var(--border); display: flex; gap: 18px; align-items: baseline; }
.pubs li:last-child { border-bottom: 1px solid var(--border); }
.pubs .y { font-size: 0.8rem; color: var(--coral); white-space: nowrap; min-width: 118px; text-transform: uppercase; letter-spacing: 0.05em; }
.pubs .t { color: var(--ink); }

/* ---------------- SPLIT (image + content) ---------------- */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.split.rev { grid-template-columns: 1.1fr 0.9fr; }
.split-img { border-radius: 12px; overflow: hidden; box-shadow: 0 12px 36px rgba(94,18,57,0.16); max-width: 400px; }
.split-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.split.rev .split-img { margin-left: auto; }
.split-img.wide img { aspect-ratio: 16/10; }
.topics { list-style: none; margin: 18px 0 0; padding: 0; }
.topics li { padding: 12px 0; border-top: 1px solid var(--border); font-family: var(--serif); font-size: 1.12rem; color: var(--ink); }
.topics li:last-child { border-bottom: 1px solid var(--border); }
.muted { color: var(--muted); font-size: 0.9rem; }

/* ---------------- CONTACT ---------------- */
.contact { background: var(--cream-2); }
.contact-in { max-width: 760px; margin: 0 auto; padding: clamp(48px,7vw,90px) clamp(20px,5vw,64px); }
.contact-row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; }
.contact-row a { font-size: 1.02rem; }

/* ---------------- FOOTER ---------------- */
.foot { background: var(--wine-deep); color: var(--on-wine-soft); }
.foot-in { max-width: 1180px; margin: 0 auto; padding: 40px clamp(20px,5vw,64px); display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: center; }
.foot a { color: var(--on-wine-soft); }
.foot a:hover { color: var(--gold-lt); }
.foot .legal { font-size: 0.76rem; color: rgba(239,205,211,0.7); max-width: 60ch; line-height: 1.5; flex-basis: 100%; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-img { order: -1; height: clamp(260px, 40vh, 360px); }
  .split-img { max-width: 100%; }
  .hero-img img { object-position: center 18%; }
  .tiles { grid-template-columns: 1fr; }
  .split, .split.rev { grid-template-columns: 1fr; gap: 22px; }
  .split-img { order: -1; }
}
@media (max-width: 640px) {
  .bar-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--cream); border-bottom: 1px solid var(--border); }
  .bar-nav.open { display: flex; }
  .bar-nav a { padding: 14px clamp(20px,5vw,64px); border-top: 1px solid var(--border); width: 100%; }
  .bar { position: relative; }
  .bar-burger { display: inline-flex; flex-direction: column; gap: 5px; width: 42px; height: 38px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
  .bar-burger span { width: 20px; height: 2px; background: var(--wine); border-radius: 2px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tile img { transition: none; } }

/* ===================================================================
   DESIGN PASS — contained hero, measured rhythm, prism motifs
   =================================================================== */
.prismbar { display: flex; height: 5px; }
.prismbar span { flex: 1; }
.prismbar span:nth-child(1){ background:#7C1E4D; }
.prismbar span:nth-child(2){ background:#C1356A; }
.prismbar span:nth-child(3){ background:#E0653A; }
.prismbar span:nth-child(4){ background:#E2A12C; }
.prismbar span:nth-child(5){ background:#8FA17C; }
.prismbar span:nth-child(6){ background:#2F7D8A; }
.prismbar span:nth-child(7){ background:#5A3E68; }

.hero-band {
  background:
    radial-gradient(900px 520px at 90% -14%, rgba(226,161,44,0.16), transparent 60%),
    radial-gradient(720px 520px at -8% 114%, rgba(193,53,106,0.10), transparent 60%),
    var(--cream);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero {
  display: grid; grid-template-columns: 1.18fr 0.82fr; gap: clamp(28px,5vw,60px);
  align-items: center; min-height: 0;
  max-width: 1140px; margin: 0 auto;
  padding: clamp(40px,5.5vw,76px) clamp(20px,5vw,64px);
}
.hero-text { display: flex; flex-direction: column; padding: 0; background: none; }
.hero-text h1 { font-size: clamp(2.2rem,4.4vw,3.5rem); margin-bottom: 18px; }
.hero-text .sub { margin-bottom: 22px; }
.hero-text .role { margin-bottom: 26px; }

/* contained, designed portrait */
.hero-figure { position: relative; justify-self: end; width: min(310px, 90%); margin: 6px 14px 6px 0; }
.hero-figure .frame { position: relative; z-index: 1; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 46px rgba(94,18,57,0.22); }
.hero-figure .frame img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 16%; display: block; }
.hero-figure .blob { position: absolute; z-index: 0; right: -18px; top: -20px; width: 70%; height: 66%; border-radius: 18px; background: linear-gradient(135deg, var(--gold), var(--coral)); }
.hero-figure .ray { position: absolute; z-index: 2; left: -20px; bottom: -18px; width: 108px; height: 56px; }

/* Measured section rhythm + small prism tick marking each section */
.sec { position: relative; padding: clamp(46px,5.5vw,74px) clamp(20px,5vw,64px); max-width: 1140px; margin: 0 auto; }
.sec::before { content:""; position:absolute; top:0; left:clamp(20px,5vw,64px); width:44px; height:3px; border-radius:2px;
  background: linear-gradient(90deg, var(--magenta), var(--coral), var(--gold)); }
.sec-title::before { content: none; }
.lead { padding: clamp(40px,5vw,66px) clamp(20px,5vw,64px); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 24px; }
  .hero-figure { order: -1; justify-self: start; width: min(250px, 64%); margin: 0 0 4px; }
}

/* ---- hero portrait: clean & simple (overrides the earlier blob/ray) ---- */
.hero-figure { position: relative; justify-self: end; width: min(300px, 88%); margin: 0; }
.hero-figure .blob, .hero-figure .ray, .hero-figure .frame { display: contents; }
.hero-figure .blob, .hero-figure .ray { display: none; }
.hero-figure picture { display: block; }
.hero-figure img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 16%;
  border-radius: 14px; box-shadow: 0 12px 32px rgba(94,18,57,0.16); display: block;
}
@media (max-width: 860px) { .hero-figure { justify-self: start; width: min(240px, 62%); } }

/* ---- type-led hero (no portrait) ---- */
.hero { grid-template-columns: 1fr; padding-top: clamp(56px,8vw,104px); padding-bottom: clamp(48px,7vw,88px); }
.hero-text { max-width: 760px; }
.hero-text h1 { max-width: 17ch; }

/* ---- smaller images (avoid upscaling low-res photos) ---- */
.tiles { max-width: 900px; margin: 0 auto; gap: 18px; }
.tile img { aspect-ratio: 1 / 1; }
.tile-cap { padding: 16px 16px 14px; }
.tile-cap h3 { font-size: 1.15rem; }
.split-img { max-width: 300px; }
.split-img.wide { max-width: 380px; }
@media (max-width: 860px){ .tiles { max-width: 420px; } }

/* ---- hero with illustration (square art) ---- */
.hero { grid-template-columns: 1.12fr 0.88fr; align-items: center; }
.hero-text { max-width: none; }
.hero-figure { display: block; position: relative; justify-self: end; width: min(360px, 92%); margin: 0; }
.hero-figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; box-shadow: 0 14px 38px rgba(94,18,57,0.18); display: block; }
@media (max-width: 860px){
  .hero { grid-template-columns: 1fr; }
  .hero-figure { order: -1; justify-self: start; width: min(300px, 72%); margin-bottom: 4px; }
}

/* ---- hero text-only (final) ---- */
.hero { grid-template-columns: 1fr; }
.hero-text { max-width: 760px; }

/* ---- brand motion video ---- */
.motion-band { padding: clamp(28px,4vw,52px) clamp(20px,5vw,64px) 0; text-align: center; }
.brand-video {
  width: min(460px, 92%); aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 18px; box-shadow: 0 18px 46px rgba(94,18,57,0.22);
  margin: 0 auto; display: block;
}

/* ---- video in hero top-right corner ---- */
.hero { grid-template-columns: 1fr auto; align-items: start; column-gap: clamp(20px,4vw,48px); }
.hero-text { max-width: 640px; }
.hero .brand-video {
  width: clamp(170px, 21vw, 250px); aspect-ratio: 1 / 1; object-fit: cover;
  justify-self: end; align-self: start; margin: 0;
  border-radius: 14px; box-shadow: 0 14px 34px rgba(94,18,57,0.20);
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero .brand-video { order: -1; justify-self: start; width: min(200px, 52%); margin-bottom: 8px; }
}

/* center the hero video vertically in its column */
.hero { align-items: center; }
.hero .brand-video { align-self: center; justify-self: end; }

/* ---- alignment + solid nav fixes ---- */
.bar { background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero {
  min-height: 0;
  padding: clamp(40px,6vw,72px) clamp(20px,5vw,64px);
}
.hero .brand-video { width: clamp(160px, 18vw, 210px); }

/* ---- fix publications label/text overlap ---- */
.pubs li { display: grid; grid-template-columns: 168px 1fr; gap: 26px; align-items: baseline; }
.pubs .y { white-space: normal; min-width: 0; line-height: 1.4; }
@media (max-width: 640px){ .pubs li { grid-template-columns: 1fr; gap: 4px; } }

/* ---- offset anchored sections so the sticky nav doesn't cover their titles ---- */
html { scroll-padding-top: 88px; }
section[id], [id] { scroll-margin-top: 88px; }

/* ---- nav: static top bar (sticky was misrendering over content) ---- */
.bar { position: static; }
html { scroll-padding-top: 16px; }
section[id], [id] { scroll-margin-top: 24px; }

/* ====================================================================
   SOFT SAGE AMBIANCE — cooler background across all pages
   (distinguishes the personal site from herprism.co's warm cream)
   ==================================================================== */
body {
  background:
    radial-gradient(1100px 760px at 90% -6%, rgba(143,161,124,0.18), transparent 58%),
    radial-gradient(1000px 900px at -6% 60%, rgba(143,161,124,0.15), transparent 55%),
    radial-gradient(900px 720px at 55% 116%, rgba(143,161,124,0.12), transparent 60%),
    var(--cream);
  background-attachment: fixed;
}
/* let the sage show through the hero (keep its warm accent glow, drop the solid cream base) */
.hero-band {
  background:
    radial-gradient(880px 520px at 92% -14%, rgba(226,161,44,0.14), transparent 60%),
    radial-gradient(700px 520px at -8% 114%, rgba(193,53,106,0.08), transparent 60%),
    transparent;
}
/* contact band picks up a touch more sage instead of warm cream */
.contact { background: rgba(143,161,124,0.20); }

/* ====================================================================
   EVEN SAGE BACKGROUND + PERSISTENT FIXED NAV + CV GRAPHICS
   ==================================================================== */
body {
  background: linear-gradient(168deg, #E6EBDA 0%, #EEF0E2 44%, #F2F0E6 100%);
  background-attachment: fixed;
  padding-top: 66px;            /* room for the fixed header */
}

/* fixed header so it stays visible while scrolling */
.prismbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 101; }
.bar { position: fixed; top: 5px; left: 0; width: 100%; z-index: 100; background: rgba(245,244,234,0.97); border-bottom: 1px solid var(--border); }
.hero-band { padding-top: 8px; }

/* active-section highlight (scroll-spy) */
.bar-nav a.is-active { color: var(--wine); }
.bar-nav a.is-active::after { content: ""; display: block; height: 2px; margin-top: 3px; border-radius: 2px; background: var(--gold); }
@media (max-width: 640px){ .bar-nav a.is-active::after { display: none; } }

/* ---- CV page: graphics to lift the dry lists ---- */
.cv-page .sec-head h2 { position: relative; }
.cv-page .sec-head h2::after {
  content: ""; display: block; width: 46px; height: 4px; margin-top: 14px; border-radius: 2px;
  background: linear-gradient(90deg, var(--magenta), var(--coral), var(--gold));
}
.cv-page .pubs li { align-items: start; }
.cv-page .pubs .y {
  display: inline-block; background: rgba(226,161,44,0.16); color: var(--coral);
  padding: 4px 11px; border-radius: 999px; font-size: 0.7rem; line-height: 1.35;
}
.cv-page .topics li { position: relative; padding-left: 22px; }
.cv-page .topics li::before {
  content: ""; position: absolute; left: 1px; top: 19px; width: 7px; height: 7px;
  border-radius: 2px; background: var(--gold); transform: rotate(45deg);
}
.cv-page .talks .t { position: relative; }

/* ---- revert to static header (fixed positioning misrendered + broke alignment) ---- */
.prismbar { position: static; }
.bar { position: static; top: auto; }
body { padding-top: 0; }
.hero-band { padding-top: 0; }

/* ensure no pinned elements / fixed background (prevents preview seam over text) */
body { background-attachment: scroll; }
.bar, .prismbar { position: static !important; }

/* reset background to clean neutral (sage removed) */
body { background: #FCFAF4; background-attachment: scroll; }
.hero-band { background:
    radial-gradient(880px 520px at 92% -14%, rgba(226,161,44,0.10), transparent 60%),
    transparent; }
.contact { background: #F3EFE6; }

/* ====================================================================
   FLUID BACKGROUND — slow drifting colour blooms that re-blend over time
   ==================================================================== */
html { background: #FCFAF4; }
body { background: transparent !important; position: relative; }
body::before {
  content: ""; position: fixed; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 38% at 24% 28%, rgba(193,53,106,0.20), transparent 70%),
    radial-gradient(42% 42% at 78% 22%, rgba(226,161,44,0.20), transparent 70%),
    radial-gradient(46% 46% at 64% 82%, rgba(124,30,77,0.16), transparent 70%),
    radial-gradient(42% 42% at 18% 78%, rgba(224,101,58,0.16), transparent 70%),
    radial-gradient(50% 50% at 50% 50%, rgba(47,125,138,0.10), transparent 72%);
  filter: blur(64px);
  will-change: transform;
  animation: fluidDrift 26s ease-in-out infinite alternate;
}
@keyframes fluidDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(3%,  2%, 0) scale(1.14) rotate(4deg); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.06) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ---- persistent sticky nav: clean + opaque (no blur, which caused the earlier misrender) ---- */
.bar {
  position: sticky !important; top: 0; z-index: 100;
  background: #FBF6EC;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 1px 0 var(--border);
}
.prismbar { position: static; z-index: 101; }

/* publication links: look like text, coral underline on hover */
.pubs a { color: inherit; }
.pubs a:hover { color: var(--coral); text-decoration: underline; text-underline-offset: 3px; }

/* ---- talks: clickable outlines with emoji ---- */
.talk-acc { margin-top: 20px; border-top: 1px solid var(--border); }
.talk-acc details { border-bottom: 1px solid var(--border); }
.talk-acc summary {
  cursor: pointer; list-style: none; padding: 16px 0;
  display: flex; gap: 13px; align-items: center;
  font-family: var(--serif); font-size: 1.14rem; color: var(--ink);
}
.talk-acc summary::-webkit-details-marker { display: none; }
.talk-acc summary .emoji { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.talk-acc summary .chev { margin-left: auto; color: var(--coral); font-size: 1rem; transition: transform .2s ease; flex-shrink: 0; }
.talk-acc details[open] summary .chev { transform: rotate(90deg); }
.talk-acc details[open] summary { color: var(--wine); }
.talk-acc .outline { margin: 0; padding: 2px 0 20px 40px; }
.talk-acc .outline li { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-2); padding: 5px 0; list-style: disc; }
.talk-acc .aud { display:block; margin: 2px 0 12px 40px; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--coral); }

/* talks: clearer "clickable" affordance */
.talk-hint { font-size: 0.86rem; font-style: italic; color: var(--coral); margin: 2px 0 0; }
.talk-acc summary { border-radius: 8px; transition: background .15s; padding-left: 10px; padding-right: 10px; margin-left: -10px; }
.talk-acc summary:hover { background: rgba(226,161,44,0.10); color: var(--wine); }
.talk-acc summary:hover span:not(.emoji):not(.chev) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.talk-acc summary .chev { color: var(--gold-deep); font-weight: 700; font-size: 1.15rem; }
.talk-acc details[open] summary .chev { color: var(--coral); }

/* offset so the sticky nav never covers a section title when you jump/scroll to it */
html { scroll-padding-top: 80px; }
section[id], [id] { scroll-margin-top: 80px; }

/* ---- CV: soft shaded portrait watermark (no white coat) ---- */
.cv-page::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("illustrations/Pikula-WSO-2025-enhanced.webp");
  background-repeat: no-repeat;
  background-position: right -40px top 64px;
  background-size: min(44vw, 540px) auto;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 10%, transparent 75%);
          mask-image: linear-gradient(to left, rgba(0,0,0,1) 10%, transparent 75%);
}
@media (max-width: 820px) {
  .cv-page::after { opacity: 0.07; background-size: 72vw auto; background-position: right -20px top 56px; }
}

/* CV watermark: nudge higher and toward the middle, fade radially */
.cv-page::after {
  background-position: 60% 22px;
  -webkit-mask-image: radial-gradient(72% 82% at 60% 30%, rgba(0,0,0,1), transparent 78%);
          mask-image: radial-gradient(72% 82% at 60% 30%, rgba(0,0,0,1), transparent 78%);
}

/* CV watermark: nudge slightly right */
.cv-page::after {
  background-position: 72% 22px;
  -webkit-mask-image: radial-gradient(72% 82% at 72% 30%, rgba(0,0,0,1), transparent 78%);
          mask-image: radial-gradient(72% 82% at 72% 30%, rgba(0,0,0,1), transparent 78%);
}

/* CV watermark: further right */
.cv-page::after {
  background-position: 92% 22px;
  -webkit-mask-image: radial-gradient(70% 82% at 90% 30%, rgba(0,0,0,1), transparent 80%);
          mask-image: radial-gradient(70% 82% at 90% 30%, rgba(0,0,0,1), transparent 80%);
}

/* hero video: a bit bigger */
.hero .brand-video { width: clamp(200px, 23vw, 290px); }

/* fix sticky nav: body must not be a positioned containing block */
body { position: static !important; }
.bar { position: sticky !important; top: 0; z-index: 100; }

/* ---- wheel: everything I do ---- */
.wheel { max-width: 660px; margin: 8px auto 0; }
.wheel svg { width: 100%; height: auto; display: block; }

/* The Work: four picture-tiles in one aligned row, compact "one-screen" section */
.tiles { grid-template-columns: repeat(4, 1fr); max-width: 1180px; gap: 18px; }
@media (max-width: 980px){ .tiles { grid-template-columns: repeat(2, 1fr); max-width: 640px; } }
@media (max-width: 560px){ .tiles { grid-template-columns: 1fr; max-width: 420px; } }
#work { padding-top: clamp(40px,5vw,68px); padding-bottom: clamp(40px,5vw,68px); }

/* wheel: clickable segments + nudged up */
.wheel a { cursor: pointer; }
.wheel a text { transition: fill .15s; }
.wheel a:hover text { fill: #C24A20; }
#map { padding-top: clamp(16px,2.5vw,30px); }
#map .sec-head { margin-bottom: 10px; }
.wheel { margin-top: 0; }

/* cleaner anchor landing: tighter section padding + offset just below the nav */
.sec { padding-top: clamp(40px,5vw,64px); padding-bottom: clamp(40px,5vw,64px); }
section[id], [id] { scroll-margin-top: 64px; }

/* centre the caption text on every work tile */
.tile-cap { text-align: center; }
.tile-cap .k, .tile-cap h3, .tile-cap p { text-align: center; }

/* tile captions: legible on photos + bottom-aligned consistently */
.tile-cap {
  background: linear-gradient(180deg, transparent 4%, rgba(45,9,28,0.5) 40%, rgba(45,9,28,0.93));
  padding: 26px 16px 22px;
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 54%;
}
.tile-cap .k { color: #FFDB8E; text-shadow: 0 1px 7px rgba(0,0,0,0.6); }
.tile-cap h3 { text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.tile-cap p  { color: #FBF6EC; text-shadow: 0 1px 7px rgba(0,0,0,0.55); }

/* wheel: smaller + gentle rotating accent ring */
.wheel { max-width: 480px; }
.wheel-spin { transform-origin: 550px 560px; animation: wheelspin 42s linear infinite; }
@keyframes wheelspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wheel-spin { animation: none; } }

/* keep all tile captions the same height so titles align across boxes */
.tile-cap p { min-height: 2.7em; }
.tile-cap h3 { min-height: 1.3em; }

/* slim photo strip beneath the wheel */
.tiles--strip { margin: 32px auto 0; max-width: 820px; gap: 12px; }
.tiles--strip .tile img { aspect-ratio: 16 / 10; }
.tiles--strip .tile-cap { min-height: 0; padding: 12px 10px; justify-content: flex-end;
  background: linear-gradient(180deg, transparent 30%, rgba(45,9,28,0.88)); }
.tiles--strip .tile-cap .k { margin-bottom: 0; font-size: 0.62rem; color: #FFDB8E; }
@media (max-width: 980px){ .tiles--strip { max-width: 560px; } }

/* raise the wheel higher in the work panel */
#work { padding-top: clamp(22px,3vw,40px); }
#work .sec-head { margin-bottom: 8px; }
.wheel { margin-top: -6px; }

/* My work: heading text beside a bigger wheel on the same row */
.work-row { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(24px,4vw,56px); align-items: center; max-width: 1180px; margin: 0 auto; }
.work-row .sec-head { max-width: 30ch; margin-bottom: 0; }
.work-row .wheel { max-width: 600px; margin: 0; }
@media (max-width: 900px){
  .work-row { grid-template-columns: 1fr; gap: 18px; }
  .work-row .wheel { margin: 6px auto 0; max-width: 460px; }
}

/* My work: big wheel left, heading + vertical photos right */
.work-row { grid-template-columns: minmax(0,1.5fr) minmax(240px,0.92fr); align-items: center; }
.work-row .wheel { max-width: 680px; margin: 0; justify-self: start; }
.work-aside { display: flex; flex-direction: column; gap: 16px; }
.work-aside .sec-head { margin-bottom: 0; max-width: none; }
.tiles--vert { grid-template-columns: 1fr; gap: 12px; max-width: none; margin: 0; }
.tiles--vert .tile img { aspect-ratio: 16 / 9; }
@media (max-width: 860px){
  .work-row { grid-template-columns: 1fr; }
  .work-row .wheel { max-width: 480px; margin: 0 auto; justify-self: center; }
  .tiles--vert { grid-template-columns: repeat(2,1fr); }
}

/* My work: bigger wheel, bigger heading, fuller 2x2 photo grid */
.work-row { grid-template-columns: minmax(0,1.3fr) minmax(300px,1fr); align-items: center; gap: clamp(30px,4vw,64px); }
.work-row .wheel { max-width: 660px; justify-self: start; }
.work-aside { gap: 22px; }
.work-aside .sec-head h2 { font-size: clamp(2.2rem,4.2vw,3.4rem); }
.tiles--vert { grid-template-columns: repeat(2,1fr); gap: 14px; max-width: none; margin: 0; }
.tiles--vert .tile img { aspect-ratio: 4 / 3; }
.tiles--vert .tile-cap .k { font-size: 0.66rem; }
@media (max-width: 860px){
  .work-row { grid-template-columns: 1fr; }
  .work-row .wheel { max-width: 480px; margin: 0 auto; justify-self: center; }
}

/* Speaking: two columns — heading left, talks right */
.speak-grid { display: grid; grid-template-columns: minmax(220px,0.7fr) minmax(0,1.65fr); gap: clamp(28px,4vw,60px); align-items: start; max-width: 1180px; margin: 0 auto; }
.speak-grid .sec-head { margin-bottom: 0; position: sticky; top: 84px; }
@media (max-width: 820px){ .speak-grid { grid-template-columns: 1fr; } .speak-grid .sec-head { position: static; } }

/* wheel ~double size: give the work panel more room */
#work { max-width: 1340px; }
.work-row { grid-template-columns: minmax(0,1.85fr) minmax(280px,0.78fr); align-items: center; gap: clamp(28px,3.5vw,56px); }
.work-row .wheel { max-width: 840px; justify-self: start; }
@media (max-width: 980px){
  .work-row { grid-template-columns: 1fr; }
  .work-row .wheel { max-width: 520px; margin: 0 auto; justify-self: center; }
}

/* clean anchor landing: offset every jump by the sticky-nav height (no half-line / band) */
html { scroll-padding-top: 74px !important; }
section[id], [id] { scroll-margin-top: 74px !important; }

/* FIX: wheel was collapsing to 0 — give its column a real min and let the SVG fill it (big & visible) */
.work-row { grid-template-columns: minmax(360px, 1.7fr) minmax(260px, 0.85fr) !important; align-items: center; }
.wheel { min-width: 0; }
.work-row .wheel { width: 100%; max-width: 100%; min-width: 0; margin: 0; justify-self: stretch; }
.wheel svg { width: 100%; height: auto; min-width: 0; display: block; }
@media (max-width: 980px){
  .work-row { grid-template-columns: 1fr !important; }
  .work-row .wheel { max-width: 540px; margin: 0 auto; }
}

/* land exactly at the nav's bottom — no sliver of the previous section */
html { scroll-padding-top: 52px !important; }
section[id], [id] { scroll-margin-top: 52px !important; }

/* work subtitle on one line (desktop) */
@media (min-width: 861px){ .work-aside .sec-head p { white-space: nowrap; font-size: 0.98rem; } }

/* Research: compact so the "Full CV / NCBI" button is visible on landing */
#research { padding-top: clamp(32px,4vw,52px); padding-bottom: clamp(28px,3vw,44px); }
#research .sec-head { margin-bottom: 6px; }
#research .talk-hint { margin: 0 0 4px; }
#research .pubs li { padding: 10px 0; }
#research .pubs .t { line-height: 1.4; }

/* fixed nav height + matching scroll offset = clean section landings everywhere */
.bar { height: 58px; padding-top: 0; padding-bottom: 0; }
html { scroll-padding-top: 58px !important; }
section[id], [id] { scroll-margin-top: 58px !important; }

/* CV: tighter rows + section spacing so Appointments etc. fit on landing */
.cv-page .pubs li { padding: 11px 0; }
.cv-page .pubs .t { line-height: 1.4; }
.cv-page .sec { padding-top: clamp(34px,4vw,54px); padding-bottom: clamp(30px,3vw,46px); }
.cv-page .sec-head { margin-bottom: 14px; }
.cv-page .sec-head h2::after { margin-top: 10px; }

/* CV: compact Speaking accordion + Leadership list so they fit on landing */
.cv-page .talk-hint { margin: 0 0 6px; }
.cv-page .talk-acc { margin-top: 12px; }
.cv-page .talk-acc summary { padding: 11px 10px; }
.cv-page .talk-acc .aud { margin: 0 0 8px 40px; }
.cv-page .talk-acc .outline { padding-bottom: 14px; }
.cv-page .topics li { padding: 10px 0 10px 22px; }

/* CV: tighter still */
.cv-page .sec { padding-top: clamp(24px,2.6vw,38px); padding-bottom: clamp(20px,2.2vw,32px); }
.cv-page .sec-head { margin-bottom: 8px; }
.cv-page .sec-head h2::after { margin-top: 8px; height: 3px; }
.cv-page .pubs li { padding: 8px 0; }
.cv-page .talk-acc { margin-top: 8px; }
.cv-page .talk-acc summary { padding: 8px 10px; }
.cv-page .topics li { padding: 8px 0 8px 22px; }

/* CV Publications: two stacked columns so the whole list fits one screen */
.cv-page #publications .pubs { columns: 2; column-gap: 46px; max-width: none; }
.cv-page #publications .pubs li { break-inside: avoid; display: block; padding: 8px 0; }
.cv-page #publications .pubs .y { display: inline-block; min-width: 0; margin-bottom: 3px; }
.cv-page #publications .pubs .t { display: block; line-height: 1.34; }
@media (max-width: 720px){ .cv-page #publications .pubs { columns: 1; } }

/* CV watermark: much fainter so it sits behind the text, not over it */
.cv-page::after { opacity: 0.15 !important; }

/* pull Selected research up a touch */
#research { padding-top: clamp(20px,2.4vw,34px) !important; }
#research .sec-head { margin-bottom: 4px; }

/* CV Publications: aligned 2-column grid (replaces uneven multicol) */
.cv-page #publications .pubs { columns: auto; display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 46px; row-gap: 0; }
.cv-page #publications .pubs li { break-inside: auto; align-self: start; }
@media (max-width: 720px){ .cv-page #publications .pubs { grid-template-columns: 1fr; } }

/* keep Certifications (incl. Blue Zones) from colliding with Publications below */
.cv-page #training { padding-bottom: clamp(36px,4vw,56px) !important; }
.cv-page #training .pubs { margin-bottom: 0; }
.cv-page #training .pubs li:last-child { padding-bottom: 10px; }

/* footer disclaimers: multiple stacked paragraphs */
.foot .legal p { margin: 0 0 8px; }
.foot .legal p:last-child { margin-bottom: 0; }
.foot .legal strong { color: rgba(245,206,133,0.92); }

/* ====================================================================
   TEAM & COLLABORATIONS — circular avatars (monogram fallback)
   ==================================================================== */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 32px 18px; margin-top: 6px; }
.people--sm { grid-template-columns: repeat(auto-fill, minmax(168px,1fr)); gap: 28px 16px; }

.person { display: flex; flex-direction: column; align-items: center; text-align: center; }

.avatar {
  position: relative; width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  color: #fff; font-family: var(--serif); font-size: 1.55rem; letter-spacing: .01em;
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 8px 22px rgba(94,18,57,.18);
  background: linear-gradient(135deg, var(--wine), var(--wine-soft));
  transition: transform .25s ease, box-shadow .25s ease;
}
.people--sm .avatar { width: 68px; height: 68px; font-size: 1.2rem; }
.avatar::after { content: attr(data-initials); }
.avatar.avatar--org { font-size: 0.92rem; font-family: var(--sans); font-weight: 600; letter-spacing: .04em; }
.people--sm .avatar.avatar--org { font-size: 0.78rem; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar:has(img)::after { content: ""; }

/* prism colour cycle */
.person:nth-child(6n+2) .avatar { background: linear-gradient(135deg, var(--gold-deep), var(--gold)); }
.person:nth-child(6n+3) .avatar { background: linear-gradient(135deg, var(--coral), #d96b3f); }
.person:nth-child(6n+4) .avatar { background: linear-gradient(135deg, var(--teal), #46a0ad); }
.person:nth-child(6n+5) .avatar { background: linear-gradient(135deg, var(--magenta), #d6588a); }
.person:nth-child(6n+6) .avatar { background: linear-gradient(135deg, var(--wine-deep), var(--magenta)); }

.person:hover .avatar { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(94,18,57,.28); }

.person-name { font-family: var(--serif); font-size: 1.04rem; color: var(--ink); margin-top: 13px; line-height: 1.2; }
.person-role { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--coral); margin-top: 6px; font-weight: 600; }
.person-note { font-size: .84rem; color: var(--muted); margin-top: 7px; line-height: 1.42; max-width: 24ch; }

.collab-group { margin-top: 14px; padding-top: 30px; border-top: 1px solid var(--border); }
.collab-group:first-of-type { border-top: 0; padding-top: 4px; }
.collab-title { font-family: var(--serif); font-weight: 400; color: var(--wine); font-size: clamp(1.25rem,2.3vw,1.6rem); margin: 0 0 22px; }

@media (max-width: 560px){
  .people, .people--sm { grid-template-columns: repeat(2, 1fr); }
}

/* ====================================================================
   IN THE MEDIA — appearance list with circular type badges
   ==================================================================== */
.media-list { display: flex; flex-direction: column; max-width: 880px; margin-top: 6px; }
.media-item { display: flex; gap: 20px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--border); }
.media-item:last-child { border-bottom: 1px solid var(--border); }
.media-badge {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5rem;
  background: linear-gradient(135deg, var(--cream-2), #ffffff);
  border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(94,18,57,.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.media-item:hover .media-badge { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(94,18,57,.18); }
.media-meta { min-width: 0; }
.media-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--coral); font-weight: 600; }
.media-title { font-family: var(--serif); font-size: 1.18rem; color: var(--ink); margin: 4px 0 5px; line-height: 1.3; }
.media-title a { color: inherit; }
.media-title a:hover { color: var(--coral); text-decoration: underline; text-underline-offset: 3px; }
.media-note { font-size: .88rem; color: var(--muted); margin: 0; line-height: 1.45; }

@media (max-width: 560px){
  .media-item { gap: 14px; }
  .media-badge { width: 48px; height: 48px; font-size: 1.25rem; }
}

/* ====================================================================
   IN THE MEDIA — vibrant digital treatment (overrides)
   ==================================================================== */
.media-list { gap: 4px; }
.media-item {
  border-top: none;
  border-radius: 14px;
  padding: 18px 18px 18px 16px;
  align-items: center;
  background: linear-gradient(120deg, rgba(150,168,120,0.14), rgba(226,161,44,0.11));
  border: 1px solid rgba(122,88,36,0.22);
  box-shadow: 0 5px 16px rgba(94,18,57,0.09);
  margin-bottom: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.media-item:last-child { border-bottom: 1px solid var(--border); }
.media-item:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(94,18,57,0.14); }

.media-badge {
  width: 66px; height: 66px;
  color: #fff; border: 2px solid rgba(255,255,255,0.7);
  background: linear-gradient(140deg, var(--wine), var(--magenta));
  box-shadow: 0 10px 22px rgba(124,30,77,0.30);
  font-size: 1.7rem;
}
.media-item:nth-child(6n+1) .media-badge { background: linear-gradient(140deg, var(--wine), var(--magenta)); }
.media-item:nth-child(6n+2) .media-badge { background: linear-gradient(140deg, var(--gold-deep), var(--gold)); }
.media-item:nth-child(6n+3) .media-badge { background: linear-gradient(140deg, var(--coral), #e98a4f); }
.media-item:nth-child(6n+4) .media-badge { background: linear-gradient(140deg, var(--teal), #4fb0bd); }
.media-item:nth-child(6n+5) .media-badge { background: linear-gradient(140deg, var(--magenta), #df6a98); }
.media-item:nth-child(6n+6) .media-badge { background: linear-gradient(140deg, var(--wine-deep), var(--coral)); }
.media-item:hover .media-badge { transform: scale(1.06) rotate(-3deg); }

.media-kicker {
  display: inline-block;
  background: linear-gradient(90deg, rgba(150,168,120,0.18), rgba(226,161,44,0.14));
  color: var(--wine);
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.68rem; letter-spacing: 0.08em;
}
.media-title { font-size: 1.22rem; }

@media (max-width: 560px){
  .media-badge { width: 54px; height: 54px; font-size: 1.4rem; }
  .media-item { padding: 14px; }
}

/* People grids: centered, equal-width cells so all avatars align */
.people, .people--sm { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 34px 24px; }
.people .person, .people--sm .person { width: 172px; }
@media (max-width: 560px){
  .people, .people--sm { gap: 26px 16px; }
  .people .person, .people--sm .person { width: 140px; }
}

/* Media badges as real-image thumbnails (emoji shows if an image fails to load) */
.media-badge { width: 96px; height: 96px; border-radius: 16px; overflow: hidden; position: relative; }
.media-badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-item:hover .media-badge { transform: translateY(-2px) scale(1.03) rotate(0deg); }
@media (max-width: 560px){ .media-badge { width: 66px; height: 66px; border-radius: 12px; } }

/* ====================================================================
   PEOPLE GRID — definitive alignment (supersedes earlier .people rules)
   ==================================================================== */
.people, .people--sm {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 176px) !important;
  justify-content: center;
  align-items: start;
  gap: 38px 22px !important;
  max-width: 1120px;
  margin: 8px auto 0 !important;
}
.people .person, .people--sm .person {
  width: 176px !important;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.people .avatar, .people--sm .avatar { width: 88px; height: 88px; font-size: 1.55rem; }
.people--sm .avatar { width: 88px; height: 88px; }   /* same size everywhere for clean alignment */
.person-name { max-width: 176px; min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
.person-note { max-width: 176px !important; }
@media (max-width: 560px){
  .people, .people--sm { grid-template-columns: repeat(auto-fill, 150px) !important; gap: 28px 14px !important; }
  .people .person, .people--sm .person { width: 150px !important; }
  .person-name, .person-note { max-width: 150px; }
}

/* Portrait watermark is for the CV only — not team/media pages */
.team-page::after, .media-page::after { display: none !important; content: none !important; }

/* Team intro: widen so the description reads in ~4 lines */
#team .sec-head { max-width: 46ch; }
#team .sec-head p { max-width: 44ch; }

/* Collaborations intro: ~3 lines */
#collaborations .sec-head { max-width: 42ch; }
#collaborations .sec-head p { max-width: 40ch; }

/* Institution (acronym) avatars: keep text fitting inside the circle */
.people .avatar--org, .people--sm .avatar--org {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  font-size: 0.82rem !important;
}

/* Logo tiles: white background, contained logo, dark text fallback */
.avatar.avatar--logo { background: #fff !important; color: var(--wine) !important; border: 1px solid var(--border); }
.avatar.avatar--logo img { object-fit: contain; padding: 16%; }

/* ====================================================================
   HOMEPAGE POLISH — mission band, partner/logo wall, scroll-reveal
   ==================================================================== */
.mission-band { background: linear-gradient(125deg, var(--wine-deep), var(--wine) 58%, var(--wine-soft)); color: var(--on-wine); }
.mission-in { max-width: 1000px; margin: 0 auto; padding: clamp(56px,8vw,104px) clamp(20px,5vw,64px); text-align: center; }
.mission-stat { font-family: var(--serif); font-size: clamp(1.9rem,4.2vw,3.2rem); line-height: 1.18; margin: 0 0 14px; color: var(--cream); text-wrap: balance; }
.mission-stat strong { color: var(--gold-lt); font-weight: 700; }
.mission-sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem,2vw,1.5rem); color: var(--on-wine-soft); margin: 0; }

.logo-wall { display: flex; flex-wrap: wrap; gap: 12px 14px; max-width: 940px; }
.logo-chip { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--cream-2); color: var(--wine); font-size: 0.9rem; font-weight: 600; font-family: var(--sans); transition: background .15s, color .15s, transform .15s, border-color .15s; }
.logo-chip:hover { background: var(--wine); color: var(--cream); border-color: var(--wine); transform: translateY(-2px); }

@media (prefers-reduced-motion: no-preference){
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* Research: one-statement thesis line */
.research-thesis { font-family: var(--serif); font-size: clamp(1.3rem,2.5vw,1.95rem); line-height: 1.36; color: var(--wine); max-width: 30ch; margin: 0 0 26px; text-wrap: balance; }

/* Avatars: richer 9-colour cycle for more variety (overrides earlier 6-step) */
.person:nth-child(9n+1) .avatar { background: linear-gradient(135deg, var(--wine), var(--wine-soft)); }
.person:nth-child(9n+2) .avatar { background: linear-gradient(135deg, var(--gold-deep), var(--gold)); }
.person:nth-child(9n+3) .avatar { background: linear-gradient(135deg, var(--coral), #e98a4f); }
.person:nth-child(9n+4) .avatar { background: linear-gradient(135deg, var(--teal), #54bac6); }
.person:nth-child(9n+5) .avatar { background: linear-gradient(135deg, var(--coral), #DA8E69); }
.person:nth-child(9n+6) .avatar { background: linear-gradient(135deg, #7E9460, #9CAE7F); }
.person:nth-child(9n+7) .avatar { background: linear-gradient(135deg, var(--wine-deep), var(--coral)); }
.person:nth-child(9n+8) .avatar { background: linear-gradient(135deg, #b9772a, var(--gold-lt)); }
.person:nth-child(9n+9) .avatar { background: linear-gradient(135deg, #246570, var(--teal)); }

/* Media badges: same richer 9-colour cycle (overrides earlier 6-step) */
.media-item:nth-child(9n+1) .media-badge { background: linear-gradient(140deg, var(--wine), var(--magenta)); }
.media-item:nth-child(9n+2) .media-badge { background: linear-gradient(140deg, var(--gold-deep), var(--gold)); }
.media-item:nth-child(9n+3) .media-badge { background: linear-gradient(140deg, var(--coral), #e98a4f); }
.media-item:nth-child(9n+4) .media-badge { background: linear-gradient(140deg, var(--teal), #54bac6); }
.media-item:nth-child(9n+5) .media-badge { background: linear-gradient(140deg, var(--coral), #C2784F); }
.media-item:nth-child(9n+6) .media-badge { background: linear-gradient(140deg, #5E9098, #83B0B8); }
.media-item:nth-child(9n+7) .media-badge { background: linear-gradient(140deg, var(--wine-deep), var(--coral)); }
.media-item:nth-child(9n+8) .media-badge { background: linear-gradient(140deg, #b9772a, var(--gold-lt)); }
.media-item:nth-child(9n+9) .media-badge { background: linear-gradient(140deg, #246570, var(--teal)); }

/* Research thesis: spread wider (less vertical) */
.research-thesis { max-width: 64ch !important; font-size: clamp(1.2rem,2.1vw,1.7rem); }

/* Team gallery (collapsible) */
.gallery-acc { max-width: 1120px; margin: 6px auto 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; margin: 18px 0 6px; }
.gallery-grid figure { margin: 0; border-radius: 12px; overflow: hidden; background: var(--wine-deep); aspect-ratio: 4 / 3; box-shadow: 0 8px 22px rgba(94,18,57,.12); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.gallery-grid figure:hover img { transform: scale(1.05); }
.gallery-empty { color: var(--muted); font-size: .9rem; margin: 14px 0 4px; }

/* Distinguish collaborator avatars (rounded squares) from team avatars (circles) */
#collaborations .avatar { border-radius: 22px; }

/* Softer 'floating photo' shadow for team & collaborator avatars */
.people .avatar {
  box-shadow: 0 12px 26px rgba(94,18,57,.16), 0 4px 10px rgba(94,18,57,.10);
}
.people .person:hover .avatar {
  transform: translateY(-6px);
  box-shadow: 0 26px 44px rgba(94,18,57,.26), 0 10px 18px rgba(94,18,57,.16);
}

/* Stronger, clearly-visible resting shadow on avatars */
.people .avatar {
  box-shadow: 0 18px 30px -8px rgba(94,18,57,.38), 0 6px 12px rgba(94,18,57,.20) !important;
}
.people .person:hover .avatar {
  box-shadow: 0 28px 46px -8px rgba(94,18,57,.46), 0 10px 18px rgba(94,18,57,.24) !important;
}

/* Faint people silhouettes behind the team section */
#team { position: relative; overflow: hidden; }
#team > *:not(.team-silhouettes) { position: relative; z-index: 1; }
.team-silhouettes {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(1280px, 108%); height: auto; z-index: 0; pointer-events: none;
  fill: var(--wine); opacity: 0.08;
}

/* Soften avatar shadow (final, tasteful) */
.people .avatar { box-shadow: 0 6px 16px rgba(94,18,57,.14) !important; }
.people .person:hover .avatar { box-shadow: 0 14px 26px rgba(94,18,57,.20) !important; }

/* Silhouettes: larger and more faded so they sit truly in the background */
.team-silhouettes {
  width: min(1700px, 140%) !important;
  bottom: -24px;
  opacity: 0.05 !important;
}

/* ====================================================================
   MORE VISIBLE HYPERLINKS + clearer hint text
   ==================================================================== */
a { color: var(--magenta); }
a:hover { color: var(--coral); }
.pubs a, .topics a, .person-name a, .media-title a, .lead a, .sec-head a, .mission-sub a {
  color: var(--magenta) !important;
}
.pubs a:hover, .topics a:hover, .person-name a:hover, .media-title a:hover {
  color: var(--coral) !important; text-decoration: underline; text-underline-offset: 3px;
}

/* 'Click a title…' hints stand out */
.talk-hint { color: var(--coral) !important; font-weight: 600; }

/* Wheel flow arrows — slowly circle the ring to show one connected cycle */
.wheel-arrows { transform-origin: 550px 560px; animation: wheelarrows 60s linear infinite; }
@keyframes wheelarrows { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wheel-arrows { animation: none; } }

/* Lift the lead statement so the whole line (incl. "wisdom") sits in view */
.lead { padding-top: clamp(18px, 2.6vw, 38px) !important; }

/* Lift the Work section so the wheel isn't cut at the bottom */
#work { padding-top: clamp(26px, 3.5vw, 52px) !important; padding-bottom: clamp(26px, 3.5vw, 52px) !important; }

/* A touch more lift on lead + work */
.lead { padding-top: clamp(10px, 1.8vw, 24px) !important; }
#work { padding-top: clamp(14px, 2.4vw, 34px) !important; }

/* One more small lift; bring Research up too */
.lead { padding-top: clamp(6px, 1.2vw, 16px) !important; }
#work { padding-top: clamp(8px, 1.6vw, 24px) !important; }
#research { padding-top: clamp(10px, 1.8vw, 28px) !important; }

/* Media: widen the cards so titles/notes sit on fewer lines */
.media-list { max-width: 1060px !important; }

/* Collaborators: compact so the full list fits one screen on landing */
#collaborations { padding-top: clamp(12px,2vw,30px) !important; padding-bottom: clamp(20px,3vw,44px) !important; }
#collaborations .sec-head { margin-bottom: 18px; }
#collaborations .people { grid-template-columns: repeat(auto-fill, 150px) !important; gap: 22px 16px !important; }
#collaborations .people .person { width: 150px !important; }
#collaborations .avatar { width: 64px; height: 64px; border-radius: 18px; }
#collaborations .person-name { min-height: 0; font-size: 0.92rem; margin-top: 9px; }
#collaborations .person-note { font-size: 0.74rem; max-width: 150px; margin-top: 4px; line-height: 1.35; }

/* Darker hyperlink shade (wine, not pinkish) */
a { color: var(--wine); }
a:hover { color: var(--coral); }
.pubs a, .topics a, .person-name a, .media-title a, .lead a, .sec-head a, .mission-sub a { color: var(--wine) !important; }
.pubs a:hover, .topics a:hover, .person-name a:hover, .media-title a:hover { color: var(--coral) !important; }

/* De-highlight the CV nav link (match the others) */
.bar-nav .cv { color: var(--ink-2) !important; font-weight: 400 !important; }
/* CV portrait a touch more prominent */
.cv-page::after { opacity: 0.2 !important; }

/* ---- Mobile safety pass ---- */
@media (max-width: 560px){
  #collaborations .people { grid-template-columns: repeat(auto-fill, 140px) !important; gap: 20px 12px !important; }
  #collaborations .people .person { width: 140px !important; }
  .media-list { max-width: 100% !important; }
  .media-item { gap: 14px; padding: 14px; }
  .media-kicker { white-space: normal; }
  .logo-wall { gap: 10px; }
}
@media (max-width: 380px){
  .people, .people--sm { grid-template-columns: repeat(auto-fill, 130px) !important; }
  .people .person, .people--sm .person { width: 130px !important; }
}

/* Name wordmark: subtle presence (slightly bolder & larger, still understated) */
.bar-name { font-size: 1.22rem; font-weight: 700; }

/* Revert name wordmark to original (understated) */
.bar-name { font-size: 1.15rem; font-weight: 400; }

/* ---- Wheel: optimize size & label legibility on mobile ---- */
@media (max-width: 600px){
  #work { padding-left: 8px !important; padding-right: 8px !important; }
  #work .wheel { max-width: 100% !important; }
  /* enlarge the SVG label tiers (units scale with the wheel) */
  .wheel svg text[font-size="15.5"] { font-size: 19px; }
  .wheel svg text[font-size="22"]   { font-size: 25px; }
  .wheel svg text[font-size="26"]   { font-size: 29px; }
  .wheel svg text[font-size="32"]   { font-size: 35px; }
}

/* Hero role line: more room + tidy line spacing for the 3 credentials */
.hero-text .role { max-width: 56ch; line-height: 1.55; }

/* Hero role: give the Sonshine Chair line room to sit on one line */
.hero-text .role { max-width: 74ch; font-size: 0.88rem; }

/* Lead statement: balance wrapping so no single word hangs on its own line */
.lead p { text-wrap: balance; }

/* Lead statement: tighter, centered block */
.lead p { max-width: 26ch; margin-left: auto; margin-right: auto; }

/* Lead quote signature — small, faded attribution */
.lead-sign { display: block; margin-top: 16px; font-family: var(--sans); font-style: normal; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(124,30,77,0.42); }

/* Signature: softer, italic, smaller, nudged right under the quote */
.lead-sign {
  display: block; max-width: 30ch; margin: 12px auto 0;
  text-align: right;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 0.78rem; letter-spacing: 0.02em; text-transform: none;
  color: rgba(124,30,77,0.32);
}

/* Signature: gold tone, pushed further right */
.lead-sign { max-width: 44ch; color: rgba(122,88,36,0.9); }

/* Hero eyebrow: slightly smaller/tighter so the 5 roles fit one line */
.hero-text .eyebrow { font-size: 0.66rem; letter-spacing: 0.13em; }

/* Header: soft roles subline under the name */
.bar-name { display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.1; }
.bar-name .bar-who { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.bar-name .bar-who span { color: var(--gold-deep); }
.bar-name .bar-tag { font-family: var(--sans); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 820px){ .bar-name .bar-tag { display: none; } }

/* Header roles subline: refined serif small-caps lockup */
.bar-name .bar-tag {
  font-family: var(--serif);
  text-transform: none;
  font-variant-caps: small-caps;
  font-variant: small-caps;
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.045em;
  color: var(--muted);
  margin-top: 1px;
}
/* show the subline only when there's room beside the nav */
@media (max-width: 1040px){ .bar-name .bar-tag { display: none; } }

/* Hero credentials: refined, professional treatment */
.hero-text .role {
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 72ch;
  letter-spacing: 0.005em;
}
.hero-text .role::before {
  content: ""; display: block;
  width: 48px; height: 2px; margin: 2px 0 15px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--coral));
}

/* Unify header roles subline with the site's label convention (uppercase Inter) */
.bar-name .bar-tag {
  font-family: var(--sans);
  font-variant: normal;
  font-variant-caps: normal;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--muted);
}

/* Lead quote on one line across (wraps only on narrow phones) */
.lead { max-width: 1120px; }
.lead p { max-width: none; font-size: clamp(1.15rem, 2.55vw, 1.95rem); }

/* Lift everything from #work forward a bit higher */
#work { padding-top: clamp(6px,1.4vw,20px) !important; padding-bottom: clamp(18px,2.8vw,38px) !important; }
.numbers .numbers-in { padding-top: clamp(34px,5vw,60px) !important; padding-bottom: clamp(34px,5vw,60px) !important; }
#research { padding-top: clamp(8px,1.6vw,22px) !important; padding-bottom: clamp(22px,3.2vw,42px) !important; }
.mission-band .mission-in { padding-top: clamp(40px,5.6vw,74px) !important; padding-bottom: clamp(40px,5.6vw,74px) !important; }
.partner-wall { padding-top: clamp(28px,4.2vw,52px) !important; padding-bottom: clamp(28px,4.2vw,52px) !important; }
#speaking { padding-top: clamp(28px,4.2vw,52px) !important; }
#writing  { padding-top: clamp(28px,4.2vw,52px) !important; }
#contact  { padding-top: clamp(30px,4.4vw,56px) !important; }

/* Signature: sit at the far right under the quote */
.lead-sign { max-width: none; }

/* Signature: pull back from the far edge a bit */
.lead-sign { max-width: 58ch; }

/* Taller header to fit name + roles subline; keep soft-landing offset in sync */
.bar { height: auto !important; min-height: 66px; padding-top: 11px !important; padding-bottom: 11px !important; }
html { scroll-padding-top: 74px !important; }
section[id], [id] { scroll-margin-top: 74px !important; }

/* Signature: a touch bigger and slightly further right */
.lead-sign { font-size: 0.92rem; max-width: 66ch; }

/* Header: more height */
.bar { min-height: 82px !important; padding-top: 16px !important; padding-bottom: 16px !important; }
html { scroll-padding-top: 90px !important; }
section[id], [id] { scroll-margin-top: 90px !important; }

/* More breathing room between the name and the roles line */
.bar-name { gap: 7px; line-height: 1.15; }
.bar-name .bar-tag { margin-top: 3px; }

/* Recover the taller header: pull the hero (and all below) up */
.hero { padding-top: clamp(16px, 2.8vw, 44px) !important; }
.lead { padding-top: clamp(4px, 1vw, 14px) !important; }

/* Signature aligns to the end of the quote line (under "wisdom") */
.lead-quote { display: inline-block; max-width: 100%; }
.lead-quote .lead-sign { display: block; text-align: right; max-width: none; margin: 12px 0 0; }

/* Tighten anchor landing so sections don't hang low under the header */
html { scroll-padding-top: 70px !important; }
section[id], [id] { scroll-margin-top: 70px !important; }

/* Pull the wheel (and everything below) up: trim the gap above #work */
.lead { padding-bottom: clamp(8px, 1.6vw, 26px) !important; }
#work { padding-top: clamp(2px, 0.8vw, 10px) !important; }

/* Darken hero credentials a notch for better contrast/readability */
.hero-text .role { color: var(--ink) !important; }

/* Clean break before the wheel: hero+quote own the first screen, wheel starts below */
.lead { padding-bottom: clamp(36px, 5.5vw, 76px) !important; }
#work { padding-top: clamp(24px, 3.6vw, 52px) !important; }

/* Wheel lands tight on click: gap lives on the quote (above #work), not on #work's top */
.lead { padding-bottom: clamp(48px, 7vw, 96px) !important; }
#work { padding-top: clamp(6px, 1.2vw, 16px) !important; }

/* Name in burgundy for brand cohesion (gold "MD" accent kept) */
.bar-name .bar-who { color: var(--wine); }

/* One more notch of clearance so sections land just below the header, not under it */
html { scroll-padding-top: 94px !important; }
section[id], [id] { scroll-margin-top: 94px !important; }

/* ====================================================================
   UNIFIED LANDING — every section lands the same way below the header
   (supersedes the earlier per-section spacing tweaks)
   ==================================================================== */
html { scroll-padding-top: 84px !important; }
section[id], [id] { scroll-margin-top: 84px !important; }

/* one consistent top spacing for all anchored content sections */
#work, #research, #speaking, #writing, #contact, .partner-wall,
.cv-page #appointments, .cv-page #training, .cv-page #publications, .cv-page #leadership,
.team-page #team, .team-page #collaborations, .media-page #media {
  padding-top: clamp(20px, 2.8vw, 36px) !important;
}
/* small gap above the wheel from the quote (scrolls away on anchor click) */
.lead { padding-bottom: clamp(20px, 2.8vw, 36px) !important; }
/* full-width colour bands keep a touch more breathing room */
.numbers .numbers-in { padding-top: clamp(34px,4.8vw,58px) !important; padding-bottom: clamp(34px,4.8vw,58px) !important; }
.mission-band .mission-in { padding-top: clamp(38px,5.2vw,66px) !important; padding-bottom: clamp(38px,5.2vw,66px) !important; }

/* ====================================================================
   RESTORE the warm fluid shading (was reading dull/flat)
   ==================================================================== */
body::before {
  background:
    radial-gradient(40% 40% at 22% 26%, rgba(193,53,106,0.30), transparent 70%),
    radial-gradient(44% 44% at 80% 20%, rgba(226,161,44,0.32), transparent 70%),
    radial-gradient(48% 48% at 64% 84%, rgba(124,30,77,0.24), transparent 70%),
    radial-gradient(44% 44% at 16% 80%, rgba(224,101,58,0.24), transparent 70%),
    radial-gradient(52% 52% at 50% 50%, rgba(47,125,138,0.14), transparent 72%) !important;
  filter: blur(60px) !important;
}
.hero-band {
  background:
    radial-gradient(900px 540px at 92% -12%, rgba(226,161,44,0.20), transparent 60%),
    radial-gradient(780px 540px at -6% 112%, rgba(193,53,106,0.16), transparent 60%),
    transparent !important;
}

/* ====================================================================
   HEADER → true fixed header (sticky wasn't pinning reliably).
   Pins at top everywhere; body padding offsets it; anchors clear it.
   ==================================================================== */
.prismbar { display: none !important; }
.bar { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 100; }
body { padding-top: 84px !important; }
@media (max-width: 640px){ body { padding-top: 72px !important; } }
html { scroll-padding-top: 92px !important; }
section[id], [id] { scroll-margin-top: 92px !important; }

/* ====================================================================
   SHADING palette: less pink — deep wine, soft gold, sage, hint of teal
   ==================================================================== */
body::before {
  background:
    radial-gradient(42% 42% at 20% 24%, rgba(94,18,57,0.24), transparent 70%),    /* deep wine */
    radial-gradient(46% 46% at 80% 18%, rgba(226,161,44,0.22), transparent 70%),   /* soft gold */
    radial-gradient(48% 48% at 70% 82%, rgba(150,170,130,0.22), transparent 70%),  /* sage */
    radial-gradient(44% 44% at 14% 80%, rgba(122,88,36,0.18), transparent 70%),    /* amber/gold-deep */
    radial-gradient(52% 52% at 48% 50%, rgba(47,125,138,0.10), transparent 72%) !important; /* soft teal */
  filter: blur(62px) !important;
}
.hero-band {
  background:
    radial-gradient(900px 540px at 92% -12%, rgba(226,161,44,0.18), transparent 60%),
    radial-gradient(760px 520px at -6% 112%, rgba(94,18,57,0.15), transparent 60%),
    radial-gradient(640px 460px at 32% 122%, rgba(150,170,130,0.13), transparent 62%),
    transparent !important;
}

/* ====================================================================
   SHADING: warm, NOT gray and NOT pink — deep wine, gold, coral, amber
   ==================================================================== */
body::before {
  background:
    radial-gradient(42% 42% at 20% 24%, rgba(94,18,57,0.22), transparent 70%),    /* deep wine */
    radial-gradient(46% 46% at 80% 18%, rgba(226,161,44,0.26), transparent 70%),   /* gold */
    radial-gradient(48% 48% at 70% 82%, rgba(194,74,32,0.18), transparent 70%),    /* coral */
    radial-gradient(44% 44% at 14% 80%, rgba(124,30,77,0.18), transparent 70%),    /* wine */
    radial-gradient(54% 54% at 50% 48%, rgba(245,206,133,0.16), transparent 72%) !important; /* warm gold light */
  filter: blur(62px) !important;
}
.hero-band {
  background:
    radial-gradient(900px 540px at 92% -12%, rgba(226,161,44,0.20), transparent 60%),
    radial-gradient(760px 520px at -6% 112%, rgba(124,30,77,0.15), transparent 60%),
    transparent !important;
}

/* ====================================================================
   SHADING: stronger & clearly visible — wine + gold lead, warm accents
   ==================================================================== */
body::before {
  background:
    radial-gradient(40% 40% at 18% 22%, rgba(124,30,77,0.34), transparent 68%),   /* wine */
    radial-gradient(44% 44% at 82% 16%, rgba(226,161,44,0.34), transparent 68%),   /* gold */
    radial-gradient(46% 46% at 72% 84%, rgba(194,74,32,0.26), transparent 68%),    /* coral */
    radial-gradient(44% 44% at 12% 82%, rgba(94,18,57,0.30), transparent 68%),     /* deep wine */
    radial-gradient(40% 40% at 50% 50%, rgba(193,53,106,0.16), transparent 70%) !important; /* soft rose accent */
  filter: blur(58px) !important;
}
.hero-band {
  background:
    radial-gradient(880px 540px at 90% -12%, rgba(226,161,44,0.26), transparent 60%),
    radial-gradient(760px 520px at -6% 110%, rgba(124,30,77,0.20), transparent 60%),
    radial-gradient(620px 460px at 40% 122%, rgba(194,74,32,0.12), transparent 62%),
    transparent !important;
}

/* ====================================================================
   SHADING: richer jewel tones (not pastel) — deep wine, rich gold, terracotta
   ==================================================================== */
body::before {
  background:
    radial-gradient(46% 50% at 16% 20%, rgba(94,18,57,0.42), transparent 66%),    /* deep wine */
    radial-gradient(50% 50% at 86% 14%, rgba(206,142,26,0.42), transparent 66%),   /* rich gold */
    radial-gradient(48% 48% at 78% 86%, rgba(176,58,24,0.34), transparent 66%),    /* terracotta */
    radial-gradient(46% 46% at 10% 84%, rgba(124,30,77,0.36), transparent 66%) !important; /* wine */
  filter: blur(54px) !important;
}
.hero-band {
  background:
    radial-gradient(860px 540px at 90% -12%, rgba(206,142,26,0.30), transparent 60%),
    radial-gradient(760px 520px at -6% 110%, rgba(94,18,57,0.26), transparent 60%),
    radial-gradient(620px 460px at 42% 122%, rgba(176,58,24,0.16), transparent 62%),
    transparent !important;
}

/* ====================================================================
   SHADING — RESET to the warm balanced look (wine + gold lead)
   ==================================================================== */
body::before {
  background:
    radial-gradient(42% 42% at 22% 26%, rgba(124,30,77,0.24), transparent 70%),    /* wine */
    radial-gradient(46% 46% at 80% 20%, rgba(226,161,44,0.30), transparent 70%),    /* gold */
    radial-gradient(48% 48% at 64% 84%, rgba(94,18,57,0.20), transparent 70%),      /* deep wine */
    radial-gradient(44% 44% at 16% 80%, rgba(224,101,58,0.18), transparent 70%),    /* warm coral */
    radial-gradient(52% 52% at 50% 50%, rgba(193,53,106,0.10), transparent 72%) !important; /* soft rose */
  filter: blur(64px) !important;
}
.hero-band {
  background:
    radial-gradient(900px 540px at 92% -12%, rgba(226,161,44,0.18), transparent 60%),
    radial-gradient(760px 520px at -6% 112%, rgba(193,53,106,0.12), transparent 60%),
    var(--cream) !important;
}

/* ====================================================================
   SHADING — sage + gold + burgundy, richer (no pink, not pale)
   ==================================================================== */
body::before {
  background:
    radial-gradient(46% 46% at 18% 22%, rgba(94,18,57,0.40), transparent 68%),     /* burgundy (deep) */
    radial-gradient(48% 48% at 84% 18%, rgba(210,146,28,0.42), transparent 68%),    /* gold */
    radial-gradient(48% 48% at 72% 84%, rgba(140,162,108,0.40), transparent 68%),   /* sage */
    radial-gradient(44% 44% at 14% 82%, rgba(124,30,77,0.34), transparent 68%) !important; /* burgundy */
  filter: blur(58px) !important;
}
.hero-band {
  background:
    radial-gradient(880px 540px at 90% -12%, rgba(210,146,28,0.28), transparent 60%),   /* gold */
    radial-gradient(740px 520px at -6% 112%, rgba(94,18,57,0.26), transparent 60%),      /* burgundy */
    radial-gradient(640px 480px at 40% 120%, rgba(140,162,108,0.22), transparent 62%),   /* sage */
    var(--cream) !important;
}

/* ====================================================================
   SHADING v2 — put it on the page background (reliable, always visible).
   Sage + gold + burgundy wash over cream. Disable the old ::before.
   ==================================================================== */
body::before { display: none !important; }
html {
  background:
    radial-gradient(48% 48% at 15% 16%, rgba(94,18,57,0.32), transparent 64%),     /* burgundy */
    radial-gradient(52% 52% at 87% 13%, rgba(210,146,28,0.34), transparent 64%),    /* gold */
    radial-gradient(52% 52% at 78% 88%, rgba(138,160,104,0.34), transparent 64%),   /* sage */
    radial-gradient(46% 46% at 8% 86%, rgba(124,30,77,0.26), transparent 64%),      /* burgundy */
    var(--cream) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}
body { background: transparent !important; }
.hero-band { background: transparent !important; }

/* SHADING v3 — burgundy + gold lead, sage only a small accent, richer */
html {
  background:
    radial-gradient(50% 50% at 14% 15%, rgba(94,18,57,0.44), transparent 62%),     /* burgundy */
    radial-gradient(52% 52% at 88% 13%, rgba(204,140,24,0.42), transparent 62%),    /* gold */
    radial-gradient(38% 38% at 82% 86%, rgba(135,158,102,0.22), transparent 60%),   /* sage accent */
    radial-gradient(48% 48% at 9% 88%, rgba(124,30,77,0.38), transparent 62%),      /* burgundy */
    var(--cream) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* SHADING v4 — smooth corner blend (not blotchy): burgundy + gold lead, sage accent */
html {
  background:
    radial-gradient(135% 130% at 0% 0%,   rgba(124,30,77,0.24), transparent 58%),   /* burgundy  top-left */
    radial-gradient(135% 130% at 100% 0%,  rgba(202,138,24,0.26), transparent 58%),  /* gold      top-right */
    radial-gradient(130% 130% at 100% 100%, rgba(135,158,102,0.16), transparent 56%),/* sage      bottom-right */
    radial-gradient(135% 130% at 0% 100%,  rgba(94,18,57,0.24), transparent 58%),    /* deep wine bottom-left */
    var(--cream) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* ====================================================================
   FLUID BACKGROUND — re-enabled & animated. Burgundy + gold + sage,
   softly blurred so it drifts as one continuous living wash.
   ==================================================================== */
html { background: var(--cream) !important; background-attachment: scroll !important; }
body { background: transparent !important; }
.hero-band { background: transparent !important; }
body::before {
  display: block !important;
  content: "" !important;
  position: fixed !important; inset: -28% !important; z-index: -1 !important; pointer-events: none !important;
  background:
    radial-gradient(40% 40% at 20% 24%, rgba(124,30,77,0.42), transparent 70%),    /* burgundy */
    radial-gradient(42% 42% at 82% 18%, rgba(202,138,24,0.44), transparent 70%),    /* gold */
    radial-gradient(44% 44% at 72% 82%, rgba(133,156,100,0.34), transparent 70%),   /* sage */
    radial-gradient(40% 40% at 16% 82%, rgba(94,18,57,0.38), transparent 70%),      /* deep wine */
    radial-gradient(46% 46% at 50% 48%, rgba(202,138,24,0.18), transparent 72%) !important; /* warm gold centre */
  filter: blur(66px) !important;
  will-change: transform !important;
  animation: fluidDrift 26s ease-in-out infinite alternate !important;
}

/* Avoid double offset: JS drives anchor scroll; keep one fallback inset on html only */
section[id], [id] { scroll-margin-top: 0 !important; }
html { scroll-padding-top: 92px !important; }

/* FLUID — richer & deeper (not peachy/pale): burgundy + sage lead, gold pulled back */
body::before {
  background:
    radial-gradient(42% 42% at 18% 22%, rgba(94,18,57,0.62), transparent 66%),     /* deep burgundy */
    radial-gradient(40% 40% at 84% 16%, rgba(184,124,20,0.46), transparent 66%),    /* gold (deeper, less peach) */
    radial-gradient(44% 44% at 74% 84%, rgba(118,140,88,0.50), transparent 66%),    /* sage (richer) */
    radial-gradient(40% 40% at 14% 82%, rgba(124,30,77,0.52), transparent 66%),     /* burgundy */
    radial-gradient(40% 40% at 52% 50%, rgba(94,18,57,0.24), transparent 70%) !important; /* burgundy centre */
  filter: blur(52px) !important;
}

/* FLUID — more gold */
body::before {
  background:
    radial-gradient(42% 42% at 18% 22%, rgba(94,18,57,0.54), transparent 66%),     /* burgundy */
    radial-gradient(48% 48% at 84% 15%, rgba(214,150,30,0.60), transparent 68%),    /* gold (more) */
    radial-gradient(40% 40% at 72% 85%, rgba(118,140,88,0.38), transparent 66%),    /* sage (eased) */
    radial-gradient(40% 40% at 13% 82%, rgba(124,30,77,0.46), transparent 66%),     /* burgundy */
    radial-gradient(50% 50% at 52% 52%, rgba(214,150,30,0.28), transparent 70%) !important; /* warm gold centre */
  filter: blur(54px) !important;
}

/* ====================================================================
   HEADER → static (scrolls with the page). Cannot float over content.
   ==================================================================== */
.bar { position: static !important; top: auto !important; }
body { padding-top: 0 !important; }
html { scroll-padding-top: 16px !important; }
section[id], [id] { scroll-margin-top: 16px !important; }

/* FLUID — RESTORE the original balanced wash (what we had earlier) */
body::before {
  background:
    radial-gradient(38% 38% at 24% 28%, rgba(193,53,106,0.20), transparent 70%),
    radial-gradient(42% 42% at 78% 22%, rgba(226,161,44,0.20), transparent 70%),
    radial-gradient(46% 46% at 64% 82%, rgba(124,30,77,0.16), transparent 70%),
    radial-gradient(42% 42% at 18% 78%, rgba(224,101,58,0.16), transparent 70%),
    radial-gradient(50% 50% at 50% 50%, rgba(47,125,138,0.10), transparent 72%) !important;
  filter: blur(64px) !important;
}

/* ====================================================================
   HEADER → sticky (stays pinned at top, scrolls with page until top).
   Body stays static so it can't float mid-content; sections clear it.
   ==================================================================== */
body { position: static !important; padding-top: 0 !important; }
.bar { position: sticky !important; top: 0 !important; z-index: 100; }
html { scroll-padding-top: 90px !important; }
section[id], [id] { scroll-margin-top: 0 !important; }

/* Media heading: softer and on one line */
.media-page #media .sec-head { max-width: none; }
.media-page #media .sec-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 400; color: var(--wine); white-space: nowrap; letter-spacing: 0; }

/* Soft colour glow behind the wheel so its backdrop is more visible */
#work .wheel { position: relative; }
#work .wheel::before {
  content: ""; position: absolute; inset: 3%;
  border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(226,161,44,0.16), rgba(193,53,106,0.09) 54%, transparent 72%);
}
#work .wheel svg { position: relative; z-index: 1; }

/* Re-center the wheel glow so it aligns with the wheel circle */
#work .wheel::before {
  inset: 0 !important;
  border-radius: 0 !important;
  background: radial-gradient(closest-side circle at 50% 50%, rgba(226,161,44,0.16), rgba(193,53,106,0.08) 52%, transparent 76%) !important;
}

/* ====================================================================
   BACKGROUND COLOR — reliable smooth wash on the page itself.
   Large soft corner blooms over cream. Disable the flaky ::before glow.
   ==================================================================== */
body::before { display: none !important; }
#work .wheel::before { display: none !important; }
html { background: var(--cream) !important; }
body {
  background:
    radial-gradient(1000px 780px at 10% 6%,  rgba(193,53,106,0.12), transparent 60%),   /* rose */
    radial-gradient(1100px 860px at 93% 12%, rgba(226,161,44,0.18), transparent 60%),    /* gold */
    radial-gradient(1000px 820px at 82% 96%, rgba(124,30,77,0.13), transparent 60%),     /* wine */
    radial-gradient(900px 760px at 6% 94%,   rgba(224,101,58,0.11), transparent 60%),    /* coral */
    var(--cream) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Natural warm backdrop behind the wheel (soft, blended — not a hard glow) */
#work {
  background: radial-gradient(48% 66% at 31% 48%, rgba(226,161,44,0.20), rgba(124,30,77,0.09) 50%, transparent 76%) !important;
}

/* ====================================================================
   COLOR — DEFINITIVE RESTORE to the original animated fluid (3h ago).
   Root cause: body must be position:relative for the z-index:-1 layer
   to render. Remove the later washes/glows that overrode it.
   ==================================================================== */
html { background: var(--cream) !important; }
body { position: relative !important; background: transparent !important; padding-top: 0 !important; }
#work { background: transparent !important; }
body::before {
  display: block !important;
  content: "" !important;
  position: fixed !important; inset: -30% !important; z-index: -1 !important; pointer-events: none !important;
  background:
    radial-gradient(38% 38% at 24% 28%, rgba(193,53,106,0.20), transparent 70%),
    radial-gradient(42% 42% at 78% 22%, rgba(226,161,44,0.20), transparent 70%),
    radial-gradient(46% 46% at 64% 82%, rgba(124,30,77,0.16), transparent 70%),
    radial-gradient(42% 42% at 18% 78%, rgba(224,101,58,0.16), transparent 70%),
    radial-gradient(50% 50% at 50% 50%, rgba(47,125,138,0.10), transparent 72%) !important;
  filter: blur(64px) !important;
  -webkit-filter: blur(64px) !important;
  will-change: transform !important;
  animation: fluidDrift 26s ease-in-out infinite alternate !important;
}

/* ====================================================================
   COLOR — WARM & alive: gold, amber, terracotta, warm burgundy.
   No cool rose/teal. Higher saturation for life (not pale).
   ==================================================================== */
body::before {
  background:
    radial-gradient(46% 46% at 82% 16%, rgba(231,158,28,0.46), transparent 70%),    /* warm gold (lead) */
    radial-gradient(44% 44% at 18% 24%, rgba(198,74,32,0.34), transparent 70%),      /* terracotta */
    radial-gradient(46% 46% at 16% 84%, rgba(214,120,40,0.34), transparent 70%),     /* amber-coral */
    radial-gradient(46% 46% at 72% 84%, rgba(124,30,77,0.28), transparent 70%),      /* warm burgundy */
    radial-gradient(54% 54% at 50% 50%, rgba(231,158,28,0.22), transparent 72%) !important; /* gold centre glow */
  filter: blur(60px) !important;
  -webkit-filter: blur(60px) !important;
}

/* COLOR — chosen: D · Sunset balance (burgundy + coral + soft amber) */
body::before {
  background:
    radial-gradient(46% 46% at 18% 24%, rgba(124,30,77,0.34), transparent 70%),    /* burgundy */
    radial-gradient(48% 48% at 84% 20%, rgba(206,128,58,0.34), transparent 70%),    /* soft amber */
    radial-gradient(50% 50% at 60% 86%, rgba(198,74,32,0.32), transparent 70%),     /* coral */
    radial-gradient(46% 46% at 16% 82%, rgba(124,30,77,0.22), transparent 72%) !important; /* burgundy echo */
  filter: blur(64px) !important;
  -webkit-filter: blur(64px) !important;
}

/* COLOR — less pink: amber + terracotta lead, burgundy only for depth */
body::before {
  background:
    radial-gradient(48% 48% at 84% 18%, rgba(206,128,58,0.40), transparent 70%),    /* amber */
    radial-gradient(46% 46% at 18% 24%, rgba(198,74,32,0.34), transparent 70%),      /* terracotta */
    radial-gradient(50% 50% at 60% 86%, rgba(172,72,42,0.28), transparent 70%),      /* warm clay */
    radial-gradient(44% 44% at 16% 80%, rgba(124,30,77,0.16), transparent 72%) !important; /* burgundy depth */
  filter: blur(64px) !important;
  -webkit-filter: blur(64px) !important;
}

/* Numbers band polish: hover lift + warm gold glow */
.num .n { transition: transform .35s ease, text-shadow .35s ease; }
.num:hover .n { transform: scale(1.05); text-shadow: 0 2px 16px rgba(245,206,133,0.40); }

/* COLOR — full palette, warm-weighted (gold + coral lead; wine, magenta, teal, gold-light accents) */
body::before {
  background:
    radial-gradient(44% 44% at 82% 15%, rgba(226,161,44,0.34), transparent 70%),    /* gold */
    radial-gradient(42% 42% at 17% 22%, rgba(194,74,32,0.30), transparent 70%),      /* coral */
    radial-gradient(44% 44% at 64% 85%, rgba(124,30,77,0.22), transparent 70%),      /* wine */
    radial-gradient(38% 38% at 12% 80%, rgba(193,53,106,0.15), transparent 70%),     /* magenta accent */
    radial-gradient(46% 46% at 48% 50%, rgba(47,125,138,0.12), transparent 72%),     /* teal accent */
    radial-gradient(40% 40% at 90% 72%, rgba(245,206,133,0.20), transparent 72%) !important; /* gold-light */
  filter: blur(64px) !important;
  -webkit-filter: blur(64px) !important;
}

/* ====================================================================
   TEXT — shift off the pinkish wine to a deeper, redder burgundy;
   links to warm coral (not pink). Numbers band keeps its own wine.
   ==================================================================== */
h1, h2, h3,
.hero-text h1, .sec-head h2, .sec-head h3,
.lead p, .research-thesis, .mission-stat,
.bar-name .bar-who,
.tile-cap h3, .talk-acc summary, .wheel-seg text {
  color: #6E2233 !important;
}
.sec-head h2 { color: #6E2233 !important; }
a, .pubs a, .topics a, .person-name a, .media-title a, .lead a, .sec-head a, .mission-sub a {
  color: #9C3D1C !important;
}
a:hover, .pubs a:hover, .topics a:hover, .person-name a:hover, .media-title a:hover {
  color: #6E2233 !important;
}
.talk-hint { color: #9C3D1C !important; }

/* ====================================================================
   LESS PINK, GLOBALLY — redefine the wine family to a warmer, redder
   burgundy (less blue/magenta). Every wine element warms at once.
   ==================================================================== */
:root {
  --wine:     #7A2236 !important;  /* was #7C1E4D — shifted red, less magenta */
  --wine-soft:#93303F !important;  /* was #97265F */
  --wine-deep:#5C1A28 !important;  /* was #5E1239 */
}

/* Trim magenta in the background wash a touch more */
body::before {
  background:
    radial-gradient(44% 44% at 82% 15%, rgba(226,161,44,0.35), transparent 70%),    /* gold */
    radial-gradient(42% 42% at 17% 22%, rgba(194,74,32,0.32), transparent 70%),      /* coral */
    radial-gradient(44% 44% at 64% 85%, rgba(122,34,54,0.22), transparent 70%),      /* warm wine */
    radial-gradient(38% 38% at 12% 80%, rgba(193,53,106,0.10), transparent 70%),     /* magenta whisper */
    radial-gradient(46% 46% at 48% 50%, rgba(47,125,138,0.11), transparent 72%),     /* teal accent */
    radial-gradient(40% 40% at 90% 72%, rgba(245,206,133,0.22), transparent 72%) !important; /* gold-light */
  filter: blur(64px) !important;
  -webkit-filter: blur(64px) !important;
}

/* Less gold — coral + warm wine lead; gold only a minor accent */
body::before {
  background:
    radial-gradient(42% 42% at 17% 20%, rgba(194,74,32,0.36), transparent 70%),      /* coral — lead */
    radial-gradient(44% 44% at 66% 84%, rgba(122,34,54,0.30), transparent 70%),       /* warm wine */
    radial-gradient(40% 40% at 84% 22%, rgba(200,96,46,0.26), transparent 70%),       /* terracotta */
    radial-gradient(40% 40% at 88% 72%, rgba(226,161,44,0.16), transparent 72%),      /* gold — minor */
    radial-gradient(38% 38% at 12% 80%, rgba(193,53,106,0.10), transparent 70%),      /* magenta whisper */
    radial-gradient(46% 46% at 48% 52%, rgba(47,125,138,0.10), transparent 72%) !important; /* teal accent */
  filter: blur(64px) !important;
  -webkit-filter: blur(64px) !important;
}

/* ====================================================================
   BACKGROUND — restored to the original first-deployment version
   (full-palette fluid wash: magenta, gold, wine, coral, teal)
   ==================================================================== */
body::before {
  background:
    radial-gradient(38% 38% at 24% 28%, rgba(193,53,106,0.20), transparent 70%),
    radial-gradient(42% 42% at 78% 22%, rgba(226,161,44,0.20), transparent 70%),
    radial-gradient(46% 46% at 64% 82%, rgba(124,30,77,0.16), transparent 70%),
    radial-gradient(42% 42% at 18% 78%, rgba(224,101,58,0.16), transparent 70%),
    radial-gradient(50% 50% at 50% 50%, rgba(47,125,138,0.10), transparent 72%) !important;
  filter: blur(64px) !important;
  -webkit-filter: blur(64px) !important;
}

/* ====================================================================
   REVERT TEXT — back to the original first-deployment colours.
   Undo the recolor: wine family restored, headings + links = wine.
   ==================================================================== */
:root {
  --wine:     #7C1E4D !important;
  --wine-soft:#97265F !important;
  --wine-deep:#5E1239 !important;
}
h1, h2, h3,
.hero-text h1, .sec-head h2, .sec-head h3,
.lead p, .research-thesis, .mission-stat,
.bar-name .bar-who, .tile-cap h3, .talk-acc summary {
  color: var(--wine) !important;
}
a, .pubs a, .topics a, .person-name a, .media-title a, .lead a, .sec-head a, .mission-sub a {
  color: var(--wine) !important;
}
a:hover, .pubs a:hover, .topics a:hover, .person-name a:hover, .media-title a:hover {
  color: var(--wine-soft) !important;
}
.talk-hint { color: var(--gold-deep) !important; }

/* Header name back to original dark ink (not burgundy) */
.bar-name .bar-who { color: var(--ink) !important; }

/* HEADER — name burgundy, ", MD" gold, nav links black (as it always was) */
.bar-name .bar-who { color: var(--wine) !important; }
.bar-name .bar-who span { color: var(--gold-deep) !important; }
.bar-nav a, .bar-nav .cv, .bar-nav a.is-active { color: var(--ink) !important; }

/* ====================================================================
   REMOVE MAGENTA — retire the variable (falls back to wine) and drop
   the magenta stop from the background wash.
   ==================================================================== */
:root { --magenta: #7C1E4D !important; }
body::before {
  background:
    radial-gradient(38% 38% at 24% 28%, rgba(124,30,77,0.18), transparent 70%),    /* wine (was magenta) */
    radial-gradient(42% 42% at 78% 22%, rgba(226,161,44,0.20), transparent 70%),    /* gold */
    radial-gradient(46% 46% at 64% 82%, rgba(124,30,77,0.16), transparent 70%),     /* wine */
    radial-gradient(42% 42% at 18% 78%, rgba(224,101,58,0.16), transparent 70%),    /* coral */
    radial-gradient(50% 50% at 50% 50%, rgba(47,125,138,0.10), transparent 72%) !important; /* teal */
  filter: blur(64px) !important;
  -webkit-filter: blur(64px) !important;
}

/* Background — enhance coral, add a bit more teal (gold + wine retained, no magenta) */
body::before {
  background:
    radial-gradient(48% 48% at 82% 12%, rgba(245,206,133,0.44), transparent 70%),   /* gold-light — radiant highlight */
    radial-gradient(42% 42% at 14% 18%, rgba(228,138,58,0.26), transparent 70%),    /* warm amber-coral */
    radial-gradient(46% 46% at 76% 84%, rgba(156,176,120,0.16), transparent 72%),   /* sage — reduced */
    radial-gradient(40% 40% at 8% 82%, rgba(72,150,160,0.13), transparent 72%),     /* teal — reduced */
    radial-gradient(46% 46% at 46% 50%, rgba(255,251,242,0.42), transparent 68%) !important; /* warm-white glow — lift */
  filter: blur(64px) !important;
  -webkit-filter: blur(64px) !important;
}

/* ====================================================================
   MOBILE IMPROVEMENTS
   ==================================================================== */

/* 1 — hero sub wraps to ~2 lines on phones */
@media (max-width: 640px){
  .hero-text .sub {
    font-size: clamp(0.95rem, 4.1vw, 1.1rem) !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
    text-wrap: balance;
  }
}

/* 2 — soft warm-gold glow behind the wheel for better visibility */
#work .wheel { position: relative; }
#work .wheel::before {
  content: "" !important; display: block !important;
  position: absolute !important; inset: 8% !important; z-index: 0 !important;
  background: radial-gradient(circle at 50% 50%,
              rgba(226,161,44,0.34), rgba(226,161,44,0.12) 46%, transparent 70%) !important;
  filter: blur(30px) !important;
  pointer-events: none !important;
}
#work .wheel svg { position: relative; z-index: 1; }

/* 3 — Full CV + NCBI buttons stay on one line */
.pub-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 640px){
  .pub-btns { flex-wrap: nowrap; gap: 8px; }
  .pub-btns .btn { font-size: 0.72rem; padding: 9px 11px; white-space: nowrap; flex: 0 1 auto; }
}

/* 4 — contact form */
.contact-form { margin-top: 22px; max-width: 480px; display: grid; gap: 14px; }
.contact-form .field { display: grid; gap: 6px; }
.contact-form label { font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0.02em; }
.contact-form .opt { font-weight: 400; color: var(--muted); }
.contact-form input, .contact-form select, .contact-form textarea {
  font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
  background: rgba(255,255,255,0.72); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 13px; width: 100%; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(124,30,77,0.12);
}
.contact-form textarea { resize: vertical; }
button.btn { cursor: pointer; border: none; font-family: var(--sans); font-weight: 600; font-size: 0.96rem; }
.contact-form .btn { justify-self: start; }
.contact-social { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* Wheel — brighter warm-gold backdrop glow, site-wide */
#work .wheel::before {
  background: radial-gradient(circle at 50% 50%,
              rgba(226,161,44,0.40), rgba(226,161,44,0.16) 48%, transparent 72%) !important;
  filter: blur(34px) !important;
  inset: 6% !important;
}

/* Wheel — clean whitish backdrop, drop the warm/yellow sectors */
#work .wheel::before {
  background: radial-gradient(circle at 50% 50%,
     rgba(255,255,255,0.88), rgba(255,255,255,0.48) 50%, transparent 72%) !important;
  filter: blur(26px) !important;
  inset: 3% !important;
}
.wheel-wedges { opacity: 0 !important; }

/* Wheel — bright medallion handles contrast; soften the outer halo */
#work .wheel::before {
  background: radial-gradient(circle at 50% 50%,
     rgba(255,255,255,0.55), rgba(255,255,255,0.0) 66%) !important;
  filter: blur(20px) !important;
  inset: 0% !important;
}
/* Make the wheel as large as possible on phones for legibility */
@media (max-width: 860px){
  .work-row .wheel { max-width: 520px !important; }
}
@media (max-width: 560px){
  .work-row .wheel { max-width: 100% !important; width: 100% !important; margin: 4px auto 0 !important; }
}

/* Wheel — strong bright white glow around the medallion for maximum pop */
#work .wheel::before {
  background: radial-gradient(circle at 50% 50%,
     #ffffff 0%, rgba(255,255,255,0.95) 44%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0) 72%) !important;
  filter: blur(18px) !important;
  inset: -4% !important;
}

/* Contact lands cleanly at the top (tall enough to clear the writing section) */
.contact { min-height: calc(100vh - 60px); display: flex; align-items: center; }
.contact-in { width: 100%; }
@media (max-width: 640px){
  .contact { min-height: auto; display: block; }
}

/* Custom line-icon badge (e.g. microphone fallback) — center cleanly on the gradient */
.media-badge--icon { display: flex; align-items: center; justify-content: center; }
.media-badge--icon svg { position: relative; width: 50%; height: 50%; }

/* ====================================================================
   MOBILE NAV — authoritative fix. Header must stay positioned so the
   absolute dropdown anchors to it; burger toggles .open reliably.
   ==================================================================== */
@media (max-width: 860px){
  .bar { position: sticky !important; top: 0 !important; z-index: 100 !important; overflow: visible !important; }
  .bar-burger { display: inline-flex !important; }
  .bar-nav {
    display: none !important;
    position: absolute !important; top: 100% !important; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 26px rgba(94,18,57,0.16);
    z-index: 100;
  }
  .bar-nav.open { display: flex !important; }
  .bar-nav a { padding: 14px clamp(20px,5vw,64px); border-top: 1px solid var(--border); width: 100%; }
}

/* Darken the burgundy a couple of shades, site-wide */
:root {
  --wine:     #6B1A3D !important;  /* from #7C1E4D */
  --wine-soft:#84264F !important;  /* from #97265F */
  --wine-deep:#4F1030 !important;  /* from #5E1239 */
}

/* Contact flows naturally after Writing (undo the forced full-height that cut it in half) */
.contact { min-height: 0 !important; display: block !important; }
.contact-in { width: auto; }

/* Mission band sits on dark wine — its text must stay light (fix dark-on-dark) */
.mission-stat { color: var(--cream) !important; }
.mission-stat strong { color: var(--gold-lt) !important; }
.mission-sub { color: var(--on-wine-soft) !important; }

/* Contact form — tighter, horizontal: three short fields across, message full width */
.contact-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px 18px;
  max-width: 720px;
  align-items: end;
}
.contact-form .field { display: grid; gap: 6px; min-width: 0; }
.contact-form .field--full { grid-column: 1 / -1; }
.contact-form .btn { grid-column: 1 / -1; justify-self: start; }
.contact-form input, .contact-form select, .contact-form textarea { padding: 10px 12px; font-size: 0.9rem; }
.contact-form textarea { rows: 3; min-height: 84px; }
@media (max-width: 680px){
  .contact-form { grid-template-columns: 1fr !important; }
}

/* Mission sub — keep on one line on desktop; balanced wrap (no orphan "all") on smaller */
.mission-in { max-width: 1120px; }
.mission-sub { font-size: clamp(1rem, 1.5vw, 1.25rem) !important; text-wrap: balance; }
@media (min-width: 1040px){ .mission-sub { white-space: nowrap; } }

/* Direct email under the contact form */
.contact-email { margin-top: 18px; font-size: 0.95rem; color: var(--ink-2); }
.contact-email a { color: var(--wine); font-weight: 600; }

/* Burgundy — one shade lighter than #6B1A3D */
:root {
  --wine:     #77204A !important;
  --wine-soft:#8E2A58 !important;
  --wine-deep:#581739 !important;
  --magenta:  #B85C3A !important;  /* retired to warm terracotta — no pink/rose */
}

/* Contact form — two-column tidy layout (now includes Email) */
.contact-form { grid-template-columns: 1fr 1fr !important; max-width: 620px; }

/* Writing section fills the viewport when navigated to (so Contact doesn't bleed into the lower half) */
#writing { min-height: calc(100vh - 80px); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 640px){ #writing { min-height: auto; display: block; } }

/* Footer links — lighter shade for clear contrast on the dark wine footer */
.foot a { color: #F6E2E8 !important; }
.foot a:hover { color: var(--gold-lt) !important; }
.foot .legal { color: rgba(246,226,232,0.78) !important; }

/* Research — soft double-exposure portrait as a faint background silhouette */
#research { position: relative; overflow: hidden; }
#research::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('illustrations/research-silhouette.webp');
  background-repeat: no-repeat;
  background-position: right -10px center;
  background-size: min(48vw, 600px) auto;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 8%, transparent 78%);
          mask-image: linear-gradient(to left, rgba(0,0,0,1) 8%, transparent 78%);
}
#research > * { position: relative; z-index: 1; }

/* Research thesis — distinct deep-teal colour (not wine/pink), above the bg image */
#research { isolation: isolate; }
.research-thesis { color: #7A5824 !important; }

/* CV + publications buttons in gold */
.pub-btns .btn { background: #D9B45A !important; color: var(--wine-deep) !important; border-color: #D9B45A !important; font-weight: 600; }
.pub-btns .btn:hover { background: var(--gold-deep) !important; color: var(--cream) !important; border-color: var(--gold-deep) !important; }

/* Speaking talk icons — small colour avatars cycling the full palette */
.talk-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 10px; color: #4A3526;
  box-shadow: 0 2px 7px rgba(94,18,57,0.12);
}
.talk-ico svg { width: 21px; height: 21px; }

/* Contact form privacy note */
.form-privacy { grid-column: 1 / -1; margin: 4px 0 0; font-size: 0.8rem; color: var(--muted); }

/* Accessibility — keyboard focus ring + skip-to-content link */
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 2px; }
.skip-link { position: absolute; left: 8px; top: -52px; z-index: 300; background: var(--wine); color: #FBF6EC; padding: 10px 16px; border-radius: 0 0 8px 8px; font-family: var(--sans); font-size: 0.9rem; transition: top .15s ease; }
.skip-link:focus { top: 0; }

/* Header — prism separator line (all palette shades) + soft lift for separation */
.bar { border-bottom: none !important; box-shadow: 0 3px 12px rgba(94,18,57,0.07); }
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--wine), var(--coral), #C2784F, var(--gold), var(--gold-lt), #9AA06A, var(--teal));
}

/* Media boxes — same prism line, thinner, along the top of each card */
.media-item { position: relative; }
.media-item::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--wine), var(--coral), #C2784F, var(--gold), var(--gold-lt), #9AA06A, var(--teal));
  opacity: 0.85;
}

/* ====================================================================
   ANCHOR LANDING — single authoritative offset so sections land below
   the sticky header (works with OR without JS; no doubling).
   ==================================================================== */
html { scroll-padding-top: 0 !important; scroll-behavior: smooth; }
section[id], [id] { scroll-margin-top: 100px !important; }
.cv-page section[id], .cv-page [id] { scroll-margin-top: 112px !important; }
@media (max-width: 640px){
  section[id], [id] { scroll-margin-top: 84px !important; }
  .cv-page section[id], .cv-page [id] { scroll-margin-top: 110px !important; }
}
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }

/* Research — personal "clinical passion" line under the thesis */
.research-passion { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--ink-2); max-width: 52ch; margin: -8px 0 26px; }

/* CV — visible divider between sections for clear separation */
.cv-page .sec:not(.sec-title) { border-top: 1px solid rgba(110,83,36,0.34); padding-top: clamp(30px,3.4vw,48px) !important; }

/* Header — restored to original height (reverted the slim that lifted content) */
.bar { min-height: 82px !important; padding-top: 16px !important; padding-bottom: 16px !important; }

/* CV hero focus line */
.cv-focus { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem,1.8vw,1.35rem); color: var(--ink-2); max-width: 58ch; margin: 16px 0 0; }

/* Research section — tightened to fit on one screen */
#research { padding-top: clamp(26px,3vw,42px) !important; padding-bottom: clamp(26px,3vw,42px) !important; }
#research .research-thesis { font-size: clamp(1.05rem,1.8vw,1.45rem) !important; line-height: 1.3 !important; margin: 0 0 12px !important; }
#research .research-passion { font-size: clamp(0.96rem,1.5vw,1.15rem) !important; margin: -2px 0 14px !important; }
#research .talk-hint { margin: 0 0 8px !important; }
#research .pubs li { padding: 5px 0 !important; }
#research .pubs .t { line-height: 1.28 !important; }
#research .pub-btns { margin-top: 16px !important; }

/* CV — more modest section headings + tighter appointments list */
#appointments .sec-head h2, #training .sec-head h2, #certifications .sec-head h2,
#publications .sec-head h2, #leadership .sec-head h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem) !important; }
#appointments .pubs li { padding: 6px 0 !important; }
#appointments .pubs .t { line-height: 1.3 !important; }

/* CV — remove the portrait watermark (it cluttered the lists) for a clean document */
.cv-page::after { display: none !important; content: none !important; }
.talk-acc details:nth-of-type(7n+1) .talk-ico { background: linear-gradient(140deg, #D9B45A, #E8CD88); }  /* champagne */
.talk-acc details:nth-of-type(7n+2) .talk-ico { background: linear-gradient(140deg, #A6B187, #C4CCAB); }  /* soft sage */
.talk-acc details:nth-of-type(7n+3) .talk-ico { background: linear-gradient(140deg, #C2784F, #D89B77); }  /* terracotta */
.talk-acc details:nth-of-type(7n+4) .talk-ico { background: linear-gradient(140deg, #B0863F, #CFA85E); }  /* bronze */
.talk-acc details:nth-of-type(7n+5) .talk-ico { background: linear-gradient(140deg, #9AA06A, #B8BC90); }  /* olive */
.talk-acc details:nth-of-type(7n+6) .talk-ico { background: linear-gradient(140deg, #C56A47, #DA8E69); }  /* clay coral */
.talk-acc details:nth-of-type(7n+7) .talk-ico { background: linear-gradient(140deg, #B89A76, #D2B999); }  /* warm taupe */