/* Version C: refined layout over an abstract, hydrogel-inspired scroll-perfused background.
   Presentation only. Every rule is scoped to body[data-design="c"]. No filters, no backdrop blur. */
body.public-v2[data-design="c"] {
  --c-ivory: #FBF8F1; --c-gel: #FFFDF7; --c-line: rgb(76 131 148 / .18); --c-ink: #2B304E; --c-ink-2: #394543;
  --c-rose: #C99AA0; --c-rose-deep: #A9737D;
  --c-panel: rgb(255 255 255 / .9); --c-card-border: rgb(43 48 78 / .12);
  isolation: isolate;
  background: linear-gradient(180deg, #FFFDF8 0%, #FBF7EC 55%, #F7F0E2 100%) fixed;
  color: var(--c-ink);
}

/* ---- Background layers (created by hydrogel-perfusion.js) ---- */
body.public-v2[data-design="c"] .hydrogel-glow,
body.public-v2[data-design="c"] .hydrogel-warmth,
body.public-v2[data-design="c"] .hydrogel-network { position: fixed; z-index: 0; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }
body.public-v2[data-design="c"] .hydrogel-glow { background: radial-gradient(60% 46% at 16% 2%, rgb(216 170 81 / .13), transparent 70%), radial-gradient(50% 40% at 92% 12%, rgb(255 255 255 / .9), transparent 70%); }
body.public-v2[data-design="c"] .hydrogel-warmth { opacity: 0; will-change: opacity; background: linear-gradient(180deg, rgb(240 206 208 / .46) 0%, rgb(238 196 201 / .7) 55%, rgb(232 182 191 / .82) 100%); }
body.public-v2[data-design="c"] .hydrogel-network { display: block; }
body.public-v2[data-design="c"] .hydrogel-fine-fluid, body.public-v2[data-design="c"] svg.hydrogel-network:not(.hydrogel-fluid) { will-change: opacity; }

/* ---- Header, banner and footer ---- */
body.public-v2[data-design="c"] .site-header { background: #2B304E; border-bottom: 1px solid rgb(245 240 232 / .14); }
body.public-v2[data-design="c"] .brand,
body.public-v2[data-design="c"] .main-nav a { color: #F5F0E8; }
body.public-v2[data-design="c"] .brand-logo { filter: brightness(0) invert(1); }
body.public-v2[data-design="c"] .main-nav a:hover { background: rgb(245 240 232 / .12); }
body.public-v2[data-design="c"] .main-nav a[aria-current="page"] { background: transparent; color: #F5F0E8; box-shadow: inset 0 -3px #D8AA51; }
body.public-v2[data-design="c"] .site-footer { position: relative; z-index: 1; background: #394543; color: #F5F0E8; border-top: 0; }
body.public-v2[data-design="c"] .site-footer a { color: #F5F0E8; text-decoration: underline; text-underline-offset: 3px; }
body.public-v2[data-design="c"] .footer-note { color: #EADBD1; }


/* ---- Page rhythm: sections are transparent; text sits in a soft, organic white clearing ---- */
body.public-v2[data-design="c"] main { position: relative; z-index: 1; padding-block: clamp(28px, 4.5vw, 64px); }
body.public-v2[data-design="c"] main > section {
  position: relative; isolation: isolate; margin: 0; background: transparent !important; color: var(--c-ink) !important;
  padding-block: clamp(36px, 5vw, 64px); border: 0 !important;
}
body.public-v2[data-design="c"] main > section + section { margin-top: clamp(30px, 5vw, 72px); }
body.public-v2[data-design="c"] main > section::before {
  --fx: clamp(20px, 5vw, 72px); --fy: clamp(26px, 4.5vw, 64px);
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(-1 * var(--fy)) calc(-1 * min(var(--fx), max(0px, (100vw - 100%) / 2)));
  background: #fff; opacity: .72;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fx), #000 calc(100% - var(--fx)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--fy), #000 calc(100% - var(--fy)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fx), #000 calc(100% - var(--fx)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--fy), #000 calc(100% - var(--fy)), transparent 100%);
  mask-composite: intersect;
}
/* Home sections are full-bleed in the markup; keep their clearing at content width. */
body.public-v2[data-design="c"][data-page="home"] main > section::before { left: max(0px, calc((100% - 1280px) / 2 - 36px)); right: max(0px, calc((100% - 1280px) / 2 - 36px)); }
body.public-v2[data-design="c"] main > section > .public-shell { position: relative; z-index: 1; }

/* ---- Typography colours (everything on the light clearing is navy or dark green) ---- */
body.public-v2[data-design="c"] main :is(h1, h2, h3, h4, p, li, summary, dt, dd, span, strong, small) { color: var(--c-ink); }
body.public-v2[data-design="c"] main :is(h1, h2, h3) { color: var(--c-ink) !important; }
body.public-v2[data-design="c"] main .eyebrow,
body.public-v2[data-design="c"] main .home-section-label,
body.public-v2[data-design="c"] main .profile-intro,
body.public-v2[data-design="c"] main .profile-contact,
body.public-v2[data-design="c"] main figcaption,
body.public-v2[data-design="c"] main .sponsor-status,
body.public-v2[data-design="c"] main .sponsor-empty,
body.public-v2[data-design="c"] main .tier-eyebrow { color: var(--c-ink-2) !important; }
body.public-v2[data-design="c"] main a:not(.button) { color: #2F6577; text-underline-offset: 3px; }
body.public-v2[data-design="c"] main a:focus-visible, body.public-v2[data-design="c"] .site-header a:focus-visible { outline: 3px solid #D86928; outline-offset: 3px; }

/* ---- Buttons ---- */
body.public-v2[data-design="c"] main .button { background: #2B304E; border-color: #2B304E; color: #F5F0E8; border-radius: 4px; }
body.public-v2[data-design="c"] main .button:hover { background: #394543; border-color: #394543; color: #F5F0E8; }
body.public-v2[data-design="c"] main .button.secondary { background: transparent; border-color: #2B304E; color: #2B304E; }
body.public-v2[data-design="c"] main .button.secondary:hover { background: #2B304E; color: #F5F0E8; }
body.public-v2[data-design="c"] main .light-button { background: #2B304E; border-color: #2B304E; color: #F5F0E8; }

/* ---- Cards: structured content keeps clear, quiet boundaries ---- */
body.public-v2[data-design="c"] :is(.team-card, .tier-card, .support-mode, .objectives-list li, .research-stories article, .project-process li, .home-sponsor-tier, .contact-section aside, .sponsor-entry, .home-sponsor-prospective) {
  background: #fff !important; color: var(--c-ink) !important; border: 1px solid var(--c-card-border); border-radius: 10px;
  box-shadow: 0 1px 2px rgb(43 48 78 / .05), 0 8px 22px rgb(43 48 78 / .06);
}
body.public-v2[data-design="c"] :is(.team-card, .tier-card, .support-mode, .objectives-list li, .research-stories article, .project-process li) { border-top: 4px solid var(--brand-teal); }
body.public-v2[data-design="c"] .tier-card--bronze, body.public-v2[data-design="c"] .home-sponsor-tier[data-sponsor-tier="bronze"] { border-top: 4px solid var(--brand-orange) !important; }
body.public-v2[data-design="c"] .tier-card--silver, body.public-v2[data-design="c"] .home-sponsor-tier[data-sponsor-tier="silver"] { border-top: 4px solid var(--brand-teal) !important; }
body.public-v2[data-design="c"] .tier-card--gold, body.public-v2[data-design="c"] .home-sponsor-tier[data-sponsor-tier="gold"] { border-top: 4px solid var(--brand-gold) !important; }
body.public-v2[data-design="c"] .tier-card--diamond, body.public-v2[data-design="c"] .home-sponsor-tier[data-sponsor-tier="diamond"] { border-top: 6px solid var(--brand-teal) !important; }
body.public-v2[data-design="c"] :is(.tier-card--diamond, .home-sponsor-tier[data-sponsor-tier="diamond"]) :is(h3, p, strong, .sponsor-empty, .sponsor-name, .sponsor-status) { color: var(--c-ink) !important; }
body.public-v2[data-design="c"] main .tier-card .button.secondary,
body.public-v2[data-design="c"][data-page="support"] .tiers-section .tier-card--diamond .button { background: transparent; border-color: #2B304E; color: #2B304E; }
body.public-v2[data-design="c"] main .tier-card .button.secondary:hover,
body.public-v2[data-design="c"][data-page="support"] .tiers-section .tier-card--diamond .button:hover { background: #2B304E; border-color: #2B304E; color: #F5F0E8; }
body.public-v2[data-design="c"] .home-sponsor-prospective { background: #FBF8F1 !important; border: 1px dashed var(--brand-teal); box-shadow: none; }
body.public-v2[data-design="c"] .sponsor-entry { box-shadow: none; }
body.public-v2[data-design="c"] .objectives-list li > span { color: var(--brand-teal); }
body.public-v2[data-design="c"] .team-card .profile-name { color: var(--c-ink); }

/* ---- Placeholders for media that has not been supplied yet ---- */
body.public-v2[data-design="c"] :is(.home-media-placeholder, .project-media-placeholder, .team-portrait-placeholder, .team-photo-fallback, .home-support-media, .media-placeholder) {
  background: rgb(255 255 255 / .95) !important; border: 1px dashed rgb(76 131 148 / .4) !important; color: var(--c-ink-2) !important; border-radius: 10px;
}
body.public-v2[data-design="c"] .team-portrait-placeholder { border-radius: 50% !important; }
body.public-v2[data-design="c"] :is(.home-media-placeholder, .project-media-placeholder, .team-photo-fallback, .home-support-media) :is(strong, span) { color: var(--c-ink-2) !important; }

/* ---- Navigation helpers inside sections ---- */
body.public-v2[data-design="c"] .public-section-nav { position: relative; z-index: 1; margin-block: 0 clamp(20px, 3vw, 36px); padding: 10px 18px; border: 1px solid var(--c-card-border); border-radius: 10px; background: rgb(255 255 255 / .94); box-shadow: 0 1px 2px rgb(43 48 78 / .05); }
body.public-v2[data-design="c"] .acknowledgement-section > div:first-child { background: transparent !important; border: 0; border-left: 4px solid var(--brand-teal); box-shadow: none; border-radius: 0; }
body.public-v2[data-design="c"] .home-sponsor-tier { min-height: 0 !important; background: rgb(255 255 255 / .84) !important; }
body.public-v2[data-design="c"] .home-sponsor-tier > .sponsor-empty { margin-top: 10px; }
body.public-v2[data-design="c"] .site-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(56px, 9vw, 110px); pointer-events: none; background: linear-gradient(to bottom, rgb(251 248 241 / 0), rgb(251 248 241 / .92)); }
body.public-v2[data-design="c"] :is(.page-hero, .team-page-hero, .approach-section) { padding-inline: clamp(12px, 2.4vw, 32px) !important; }
body.public-v2[data-design="c"] .team-cta .public-shell { background: transparent; }
body.public-v2[data-design="c"] .support-faq details { border-color: var(--c-card-border); }
body.public-v2[data-design="c"] .support-hero h1, body.public-v2[data-design="c"] .page-hero h1, body.public-v2[data-design="c"] .hero-copy h1 { color: var(--c-ink); }
body.public-v2[data-design="c"][data-page="home"] .hero-copy { border-left-color: var(--brand-teal); }

@media (max-width: 559px) {
  body.public-v2[data-design="c"] main > section::before { --fx: 14px; inset: calc(-1 * var(--fy)) 0; opacity: .8; }
  body.public-v2[data-design="c"] main > section { padding-inline: 14px; }
  body.public-v2[data-design="c"] main > section { padding-block: 28px; }
  body.public-v2[data-design="c"] main > section + section { margin-top: 36px; }
  body.public-v2[data-design="c"] :is(.team-card, .tier-card, .support-mode, .objectives-list li, .research-stories article, .project-process li, .home-sponsor-tier) { border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) { body.public-v2[data-design="c"] .hydrogel-warmth { will-change: auto; } }

/* FAQ disclosure affordance */
body.public-v2[data-design="c"] .support-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
body.public-v2[data-design="c"] .support-faq summary::-webkit-details-marker { display: none; }
body.public-v2[data-design="c"] .support-faq summary::after { content: "+"; color: #4C8394; font-weight: 700; }
body.public-v2[data-design="c"] .support-faq details[open] > summary::after { content: "\2212"; }

/* ---- Version C media: soft white clearing panels so the hydrogel never shows through photographs, videos or captions. ---- */
body.public-v2[data-design="c"] .media-slot { position: relative; z-index: 1; padding: clamp(8px, 1.4vw, 14px); background: #fff; transform: translateZ(0); contain: paint; border: 1px solid var(--c-card-border); border-radius: 16px; box-shadow: 0 8px 30px rgb(43 48 78 / .08); }
body.public-v2[data-design="c"] .media-slot[style*="--media-ratio"] > video,
body.public-v2[data-design="c"] .media-slot[style*="--media-ratio"] > img { border: 0; border-radius: 10px; }
body.public-v2[data-design="c"] .hero-visual.media-slot { background: #fff; }
body.public-v2[data-design="c"] .science-media { position: relative; z-index: 1; }

body.public-v2[data-design="c"] .home-media-band .eyebrow { color: var(--c-ink) !important; }
body.public-v2[data-design="c"][data-page="home"] .home-support-media.media-slot { padding: clamp(8px, 1.4vw, 14px); background: #fff; border: 1px solid var(--c-card-border); border-radius: 16px; }
body.public-v2[data-design="c"][data-page="home"] .home-support-media.media-slot > img { border: 0; border-radius: 10px; }

/* Version C release: smaller, context-rich microscopy belongs on Project, not the Home hero. */
body.public-v2[data-design="c"] .project-microscopy {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.15fr);
  align-items: center; gap: clamp(20px, 3.5vw, 50px);
  max-width: 990px; margin: clamp(30px, 4vw, 56px) auto 0;
  padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--c-card-border);
}
body.public-v2[data-design="c"] .project-microscopy-copy h3 { margin: 8px 0 12px; font-size: clamp(1.35rem, 2.1vw, 1.8rem); }
body.public-v2[data-design="c"] .project-microscopy-copy p:last-child { max-width: 42ch; margin-bottom: 0; }
body.public-v2[data-design="c"] .microscopy-gallery {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px); max-width: 460px; justify-self: end; width: 100%;
}
body.public-v2[data-design="c"] .microscopy-gallery .microscopy-card {
  min-width: 0; width: 100%; margin: 0; padding: 7px; border-radius: 12px;
}
body.public-v2[data-design="c"] .microscopy-gallery video {
  display: block; width: 100%; aspect-ratio: 1; object-fit: contain;
  background: #111; border-radius: 6px;
}
/* Sponsor invitation should lead with the ask; illustrative CAD is already on the Project page. */
body.public-v2[data-design="c"][data-page="home"] .home-support .sponsor-invitation-inner {
  display: block; max-width: 860px; margin-inline: auto;
}
body.public-v2[data-design="c"][data-page="home"] .home-support .home-section-copy {
  max-width: 740px; margin: 0 auto; text-align: center;
}
body.public-v2[data-design="c"][data-page="home"] .home-support h2 {
  margin: 10px auto 18px; max-width: 17ch;
  font-size: clamp(2.05rem, 4.6vw, 4.1rem); line-height: 1.08;
}
body.public-v2[data-design="c"][data-page="home"] .home-support .home-section-copy > p:not(.eyebrow) {
  max-width: 59ch; margin: 0 auto 28px; font-size: clamp(1rem, 1.25vw, 1.15rem);
}
body.public-v2[data-design="c"][data-page="home"] .home-support .button {
  display: inline-flex; justify-content: center; align-items: center; min-height: 46px;
}
@media (max-width: 799px) {
  body.public-v2[data-design="c"] .project-microscopy { grid-template-columns: 1fr; gap: 18px; }
  body.public-v2[data-design="c"] .microscopy-gallery { justify-self: start; max-width: 430px; }
}
