/* ========================================================================
The Listening Surgeon — Shared Stylesheet
Palette: #E63296 pink · #3C6432 forest · #DCBE8C tan bg · #64AAE6 blue · #FFC828 gold · #FA7828 orange · #AA5096 purple · #6EB45A sage · #825532 brown
Typography: Cormorant Garamond (serif), Pinyon Script (script), Inter (body)
======================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Caveat:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Dancing+Script:wght@500;600;700&family=Inter:wght@300;400;500;600&family=Libre+Baskerville:wght@400;700&family=Pinyon+Script&family=Sacramento&display=swap');
:root {
/* Brand palette — pinks/magentas, warm spectrum, neutrals */
--pink: #E63296; /* primary brand fuchsia — logo, buttons, links, active nav */
--pink-soft: #F7B3D4; /* light tint for accents */
--pink-tint: #FCE1EF; /* very light background tint */
--rose: #E63296; /* alias for primary */
--rose-deep: #B8267A; /* darker shade for hover */
/* Semantic section colors */
--lavender: #C4AEE0; /* writing, reflection, long-form essays */
--teal: #6AAFB0; /* neurodiversity, curiosity, resources */
--gold: #C9963A; /* dividers, lotus accents, icons */
--gold-light: #E8C97A; /* softer gold for backgrounds */
--terracotta: #FA7828; /* orange */
--yellow: #FFC828; /* warm yellow */
--sage: #6EB45A; /* subtle section backgrounds, hover states */
--forest: #3C6432; /* deep forest green — footer */
--blue: #64AAE6; /* sky blue */
--purple: #AA5096; /* purple — spiritual depth */
/* Neutrals */
--brown: #825532;
--brown-soft: #8C6B50;
--tan: #DCBE8C;
--tan-soft: #D9C49A;
--cream: #EDE3D0; /* primary background — warm cream */
--cream-warm: #E0CEB0;
--charcoal: #2A251F;
--ink: #3A342D;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 18px;
line-height: 1.75;
color: var(--ink);
background: var(--cream);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3, h4, h5 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 600;
line-height: 1.18;
color: var(--charcoal);
letter-spacing: -0.005em;
}
a { color: var(--rose); }
.script {
font-family: 'Pinyon Script', cursive;
font-weight: 400;
color: var(--rose);
}
.container {
max-width: 780px;
margin: 0 auto;
padding: 0 1.5rem;
}
.container-wide { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
/* Offset for anchor scroll to clear the sticky header */
[id]:not(body):not(html) { scroll-margin-top: 140px; }
/* ---------- Header / Nav ---------- */
.site-header {
background:
linear-gradient(to bottom, rgba(255, 250, 244, 0.18) 0%, rgba(240, 230, 215, 0.78) 100%),
radial-gradient(ellipse at 16% 55%, rgba(255, 254, 250, 0.72) 0%, transparent 22%),
radial-gradient(ellipse at 48% 65%, rgba(255, 252, 246, 0.72) 0%, transparent 38%),
radial-gradient(ellipse at 50% 50%, rgba(255, 250, 242, 0.28) 0%, transparent 72%),
url('images/header.jpg') center 22% / cover no-repeat;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: none;
position: sticky;
top: 0;
z-index: 20;
padding: 1rem 0 0;
}
.nav-botanical-divider {
display: block;
width: 100%;
height: 44px;
overflow: visible;
}
/* 3-column header grid: Brand | Nav | Social */
.header-grid {
display: grid;
grid-template-columns: minmax(220px, 300px) 1fr minmax(100px, 130px);
align-items: center;
gap: 2rem;
padding: 1rem 0;
}
.header-brand {
display: flex;
align-items: center;
}
.header-social {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1.1rem;
}
.header-social a {
color: var(--brown-soft);
opacity: 0.62;
display: flex;
align-items: center;
transition: opacity 0.2s, color 0.2s;
text-decoration: none;
}
.header-social a:hover {
opacity: 1;
color: var(--rose);
}
.logo {
display: flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
color: inherit;
flex-shrink: 0;
}
.logo-mark { width: 46px; height: 46px; flex-shrink: 0; }
.logo-text {
font-family: 'Libre Baskerville', 'Cormorant Garamond', serif;
font-size: 1rem;
line-height: 1;
display: flex;
align-items: baseline;
gap: 0.35rem;
color: var(--charcoal);
}
.logo-text .the {
font-family: 'Libre Baskerville', serif;
font-weight: 400;
font-style: normal;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--charcoal);
}
.logo-text .listening {
font-family: 'Pinyon Script', cursive;
color: var(--rose);
font-size: 2.1rem;
line-height: 0.75;
transform: translateY(5px);
font-weight: 400;
}
.logo-text .surgeon {
font-family: 'Libre Baskerville', serif;
font-weight: 400;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--charcoal);
}
/* Logo image (header) */
.logo--image { gap: 0; }
.logo-image {
height: 80px;
width: auto;
display: block;
}
/* Header logo larger than footer logo */
.site-header .logo-image { height: 80px; }
.site-footer .logo-image { height: 48px; }
@media (max-width: 768px) {
.site-header .logo-image { height: 54px; }
.site-footer .logo-image { height: 36px; }
}
/* "Dr. Heather" — elegant flowing calligraphy sign-off */
.dr-heather {
font-family: 'Allura', 'Dancing Script', cursive;
color: var(--rose);
font-weight: 400;
font-size: 2em;
line-height: 1;
letter-spacing: 0.01em;
display: inline-block;
vertical-align: baseline;
}
.main-nav {
display: flex;
gap: 0.6rem 1.4rem;
flex-wrap: wrap;
justify-content: center;
font-size: 0.83rem;
font-family: 'Inter', sans-serif;
}
.main-nav a {
color: var(--charcoal);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 500;
padding-bottom: 3px;
border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.main-nav a:hover { color: var(--rose); border-bottom-color: var(--rose); }
.main-nav a.active { color: var(--rose); border-bottom-color: var(--rose); }
.main-nav a.coming { opacity: 0.45; font-style: italic; }
.main-nav a.hashtag { text-transform: none; letter-spacing: 0.04em; }
.main-nav a.coming:hover { color: var(--brown); border-bottom-color: transparent; cursor: help; }
/* ---------- Watercolor-light washes ---------- */
/* "Sunlight through handmade paper" — soft, diffuse color, not illustration */
.wc-fuchsia {
background:
radial-gradient(ellipse at 10% 70%, rgba(230, 50, 150, 0.28) 0%, transparent 50%),
radial-gradient(ellipse at 80% 15%, rgba(196, 174, 224, 0.22) 0%, transparent 45%),
radial-gradient(ellipse at 50% 50%, rgba(230, 50, 150, 0.08) 0%, transparent 70%),
var(--cream);
}
.wc-lavender {
background:
radial-gradient(ellipse at 15% 55%, rgba(196, 174, 224, 0.32) 0%, transparent 55%),
radial-gradient(ellipse at 80% 25%, rgba(230, 50, 150, 0.16) 0%, transparent 45%),
radial-gradient(ellipse at 50% 80%, rgba(196, 174, 224, 0.12) 0%, transparent 50%),
var(--cream);
}
.wc-teal {
background:
radial-gradient(ellipse at 15% 60%, rgba(106, 175, 176, 0.30) 0%, transparent 50%),
radial-gradient(ellipse at 75% 20%, rgba(196, 174, 224, 0.18) 0%, transparent 45%),
radial-gradient(ellipse at 50% 80%, rgba(106, 175, 176, 0.10) 0%, transparent 50%),
var(--cream);
}
/* sage reduced to a whisper — occasional accent only, never a primary section color */
.wc-sage {
background:
radial-gradient(ellipse at 15% 65%, rgba(110, 180, 90, 0.12) 0%, transparent 50%),
radial-gradient(ellipse at 78% 25%, rgba(201, 150, 58, 0.10) 0%, transparent 45%),
var(--cream);
}
.wc-gold {
background:
radial-gradient(ellipse at 15% 55%, rgba(201, 150, 58, 0.28) 0%, transparent 50%),
radial-gradient(ellipse at 78% 25%, rgba(230, 50, 150, 0.14) 0%, transparent 45%),
radial-gradient(ellipse at 50% 80%, rgba(201, 150, 58, 0.12) 0%, transparent 50%),
var(--cream);
}
/* Page-level semantic washes applied to .page-intro */
body[data-page="about"] .page-intro { background: radial-gradient(ellipse at 15% 65%, rgba(201, 150, 58, 0.26) 0%, transparent 55%), radial-gradient(ellipse at 80% 25%, rgba(196, 174, 224, 0.16) 0%, transparent 48%), var(--cream-warm); }
body[data-page="writing"] .page-intro { background: radial-gradient(ellipse at 15% 60%, rgba(196, 174, 224, 0.35) 0%, transparent 55%), radial-gradient(ellipse at 80% 25%, rgba(230, 50, 150, 0.14) 0%, transparent 45%), var(--cream-warm); }
body[data-page="ilook"] .page-intro { background: radial-gradient(ellipse at 10% 65%, rgba(230, 50, 150, 0.30) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(196, 174, 224, 0.18) 0%, transparent 45%), var(--cream-warm); }
body[data-page="unmask"] .page-intro { background: radial-gradient(ellipse at 15% 60%, rgba(106, 175, 176, 0.32) 0%, transparent 55%), radial-gradient(ellipse at 78% 25%, rgba(196, 174, 224, 0.16) 0%, transparent 45%), var(--cream-warm); }
body[data-page="neurodiversity"] .page-intro { background: radial-gradient(ellipse at 15% 60%, rgba(106, 175, 176, 0.32) 0%, transparent 55%), radial-gradient(ellipse at 75% 25%, rgba(196, 174, 224, 0.20) 0%, transparent 48%), var(--cream-warm); }
body[data-page="research"] .page-intro { background: radial-gradient(ellipse at 15% 60%, rgba(201, 150, 58, 0.28) 0%, transparent 55%), radial-gradient(ellipse at 78% 25%, rgba(196, 174, 224, 0.14) 0%, transparent 45%), var(--cream-warm); }
body[data-page="resources"] .page-intro { background: radial-gradient(ellipse at 15% 60%, rgba(106, 175, 176, 0.28) 0%, transparent 55%), radial-gradient(ellipse at 78% 25%, rgba(201, 150, 58, 0.16) 0%, transparent 45%), var(--cream-warm); }
body[data-page="media"] .page-intro { background: radial-gradient(ellipse at 15% 60%, rgba(230, 50, 150, 0.24) 0%, transparent 55%), radial-gradient(ellipse at 78% 25%, rgba(201, 150, 58, 0.16) 0%, transparent 45%), var(--cream-warm); }
/* ---------- Home page background ---------- */
body[data-page="home"] { background: #F4ECDF; }
/* ---------- Hero ---------- */
.hero { padding: 5.5rem 0 3.5rem; position: relative; }
.hero-lotus-left {
position: absolute;
left: max(8px, calc(50% - 530px));
top: 42%;
transform: translateY(-50%);
width: clamp(110px, 13vw, 195px);
opacity: 0.82;
pointer-events: none;
z-index: 0;
}
@media (max-width: 1050px) { .hero-lotus-left { display: none; } }
.hero .eyebrow {
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rose);
margin-bottom: 1.25rem;
font-weight: 500;
}
.hero h1 {
font-size: clamp(2rem, 4.5vw, 4rem);
font-weight: 400;
margin-bottom: 1.3rem;
font-style: italic;
color: var(--charcoal);
max-width: none;
}
.hero-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 3.5rem;
align-items: start;
}
.hero-text { min-width: 0; }
.hero .spectrum { margin-top: 1rem; }
.hero-photo {
flex-shrink: 0;
width: 260px;
}
.hero-photo img {
width: 100%;
border-radius: 6px;
display: block;
box-shadow: 0 8px 32px rgba(42, 37, 31, 0.14);
}
@media (max-width: 720px) {
.hero-inner {
grid-template-columns: 1fr;
}
.hero-photo {
width: 100%;
max-width: 320px;
margin: 0 auto;
}
}
.hero h1 .shaped-by {
font-family: 'Pinyon Script', cursive;
font-style: normal;
color: var(--rose);
font-weight: 400;
font-size: 1.3em;
line-height: 0.85;
}
.hero .subhead {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.2rem, 2.1vw, 1.5rem);
color: var(--brown);
max-width: 680px;
margin-bottom: 2.2rem;
line-height: 1.4;
}
.hero .intro p {
max-width: none;
margin-bottom: 1.15rem;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.15rem, 2vw, 1.4rem);
color: #000000;
line-height: 1.5;
}
.hero .subhead { max-width: none; }
.intro-signoff {
margin-top: 1.4rem !important;
margin-bottom: 0 !important;
font-style: normal !important;
line-height: 1 !important;
}
.intro-signoff .dr-heather {
font-size: clamp(2.3rem, 3.8vw, 2.8rem);
}
/* ---------- Spectrum accent bar — sunrise palette ---------- */
.spectrum {
height: 3px;
width: 100%;
background: linear-gradient(
90deg,
transparent 0%,
var(--pink) 8%,
#F0A8C8 22%,
var(--gold) 42%,
#E8C97A 55%,
var(--lavender) 72%,
var(--teal) 88%,
transparent 100%
);
border-radius: 2px;
margin: 2.75rem 0;
opacity: 0.80;
}
.spectrum.thin { height: 1.5px; opacity: 0.55; margin: 2rem 0; }
/* ---------- Buttons & links ---------- */
.cta-stack {
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
align-items: flex-start;
}
.btn-primary {
display: inline-block;
background: transparent;
color: var(--pink) !important;
border: 1px solid rgba(230, 50, 150, 0.5);
padding: 0.8rem 1.6rem;
border-radius: 3px;
text-decoration: none;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.92rem;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background 0.25s ease, border-color 0.25s ease;
}
.btn-primary:hover {
background: rgba(230, 50, 150, 0.08);
border-color: var(--pink);
}
.btn-secondary {
display: inline-block;
color: var(--brown);
text-decoration: none;
font-size: 0.95rem;
padding-bottom: 2px;
border-bottom: 1px solid rgba(107, 85, 69, 0.35);
transition: color 0.2s, border-color 0.2s;
}
.btn-secondary:hover { color: var(--rose); border-bottom-color: var(--rose); }
.inline-link { color: var(--rose); text-decoration: none; border-bottom: 1px solid rgba(230, 50, 150, 0.35); padding-bottom: 1px; transition: border-color 0.2s; }
.inline-link:hover { border-bottom-color: var(--rose); }
/* ---------- Page heading ---------- */
.page-intro {
padding: 4rem 0 1.5rem;
background: var(--cream-warm);
border-bottom: 1px solid rgba(107, 85, 69, 0.18);
}
/* Writing page garden banner */
.writing-garden-banner {
width: 100%;
overflow: hidden;
max-height: 280px;
}
.writing-garden-banner img {
width: 100%;
height: 280px;
object-fit: cover;
object-position: center 40%;
display: block;
}
/* Research page intro layout */
.research-intro-layout {
display: flex;
align-items: flex-start;
gap: 2.5rem;
}
.research-intro-text { flex: 1; }
.research-intro-photo {
flex-shrink: 0;
width: 220px;
}
.research-intro-photo img {
width: 100%;
border-radius: 8px;
object-fit: cover;
display: block;
}
@media (max-width: 640px) {
.research-intro-layout { flex-direction: column-reverse; }
.research-intro-photo { width: 100%; max-width: 280px; margin: 0 auto; }
}
/* ── Pathway system ──────────────────────────────────────────── */
/* Homepage pathway block */
.pathway-block {
margin: 0 -1.5rem 0.5rem;
padding: 2.5rem 1.5rem 3rem;
background:
radial-gradient(ellipse at 5% 22%, rgba(235, 155, 155, 0.45) 0%, transparent 42%),
radial-gradient(ellipse at 92% 18%, rgba(255, 180, 100, 0.48) 0%, transparent 42%),
radial-gradient(ellipse at 50% 12%, rgba(210, 180, 215, 0.32) 0%, transparent 48%),
radial-gradient(ellipse at 28% 28%, rgba(245, 195, 170, 0.28) 0%, transparent 38%),
radial-gradient(ellipse at 72% 22%, rgba(255, 205, 150, 0.28) 0%, transparent 38%),
#F2DDD0;
border-radius: 6px;
}
.pathway-block__intro {
text-align: center;
margin-bottom: 1.75rem;
}
.pathway-block__intro p {
color: #2B5580;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.1rem;
margin: 0.4rem 0 0;
line-height: 1.65;
padding-bottom: 1.1rem;
position: relative;
}
.pathway-block__intro p::after {
content: '';
display: block;
width: 80px;
height: 2px;
background: linear-gradient(to right, transparent, var(--rose-deep) 30%, var(--rose-deep) 70%, transparent);
margin: 0.65rem auto 0;
}
/* Section eyebrow with flanking gold line + dot */
.pathway-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rose-deep);
margin-bottom: 0.25rem;
}
.pathway-eyebrow span {
display: flex;
align-items: center;
gap: 5px;
flex: 1;
max-width: 110px;
}
.pathway-eyebrow span::before {
content: '';
flex: 1;
height: 1px;
background: rgba(201, 150, 58, 0.55);
}
.pathway-eyebrow span::after {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(201, 150, 58, 0.65);
flex-shrink: 0;
}
.pathway-eyebrow span:last-child { flex-direction: row-reverse; }
/* Pathway cards grid — 5-column portrait layout */
.pathway-cards {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.85rem;
align-items: stretch;
}
.pathway-card {
display: block;
border-radius: 50% 50% 12px 12px / 6% 6% 12px 12px;
overflow: hidden;
text-decoration: none;
border: none;
outline: none;
padding: 0;
transition: transform 0.2s;
background: transparent;
height: 460px;
-webkit-tap-highlight-color: transparent;
}
.pathway-card:hover { transform: translateY(-3px); }
.pathway-card:focus { outline: none; }
.pathway-card > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom center;
display: block;
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, transparent 4%, rgba(0,0,0,0.45) 16%, rgba(0,0,0,0.85) 28%, black 40%, black 92%, transparent 100%),
linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
-webkit-mask-composite: destination-in;
mask-image:
linear-gradient(to bottom, transparent 0%, transparent 4%, rgba(0,0,0,0.45) 16%, rgba(0,0,0,0.85) 28%, black 40%, black 92%, transparent 100%),
linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
mask-composite: intersect;
}
@media (max-width: 860px) {
.pathway-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
.pathway-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
.pathway-cards { grid-template-columns: 1fr; }
}
/* Pathway page sections */
.pathway-section {
margin-bottom: 3rem;
padding-bottom: 2.5rem;
border-bottom: 1px solid rgba(0,0,0,0.07);
}
.pathway-section:last-of-type { border-bottom: none; }
.pathway-section__label {
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 0.4rem;
}
.pathway-section__heading {
font-size: clamp(1.3rem, 2.5vw, 1.7rem);
margin: 0 0 0.75rem;
}
.pathway-section__desc {
color: var(--brown);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.1rem;
margin-bottom: 1.5rem;
max-width: 640px;
}
/* Pathway curated links */
.pathway-links {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.pathway-link {
display: block;
padding: 1rem 1.25rem;
background: #faf9f7;
border-radius: 6px;
border-left: 3px solid var(--pink);
text-decoration: none;
transition: background 0.15s, transform 0.15s;
}
.pathway-link:hover {
background: #f5f3f0;
transform: translateX(3px);
}
.pathway-link__title {
display: block;
font-family: 'Libre Baskerville', serif;
font-size: 1rem;
color: var(--charcoal);
font-weight: 600;
margin-bottom: 0.25rem;
}
.pathway-link__desc {
display: block;
font-family: 'Cormorant Garamond', serif;
font-size: 1rem;
color: var(--brown);
line-height: 1.5;
}
/* About page two-column intro */
.about-intro-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
.about-intro-left h1 { margin-bottom: 0; }
.about-intro-breakout {
border-left: 3px solid var(--pink);
padding: 1.25rem 1.5rem;
background: rgba(230, 50, 150, 0.04);
border-radius: 0 6px 6px 0;
margin-top: 0.5rem;
}
.about-intro-breakout p {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-style: italic;
line-height: 1.7;
color: var(--brown);
margin: 0;
}
@media (max-width: 768px) {
.about-intro-layout {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.page-intro .eyebrow {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rose);
margin-bottom: 1rem;
font-weight: 500;
}
.page-intro h1 {
font-size: clamp(2.2rem, 4.5vw, 3.4rem);
margin-bottom: 0.8rem;
font-weight: 500;
}
.page-intro .lede {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.3rem, 2.2vw, 1.55rem);
color: var(--brown);
max-width: 680px;
line-height: 1.5;
}
/* ---------- Body sections ---------- */
.section { padding: 2rem 0; }
.section h2 {
font-size: clamp(1.6rem, 3vw, 2.1rem);
margin-bottom: 1.2rem;
margin-top: 1.5rem;
color: var(--charcoal);
}
.section h2:first-child { margin-top: 0; }
.section h3 {
font-size: 1.35rem;
margin-top: 2rem;
margin-bottom: 0.75rem;
color: var(--brown);
font-weight: 500;
}
body:not([data-page="research"]) .section p { margin-bottom: 1.15rem; color: var(--ink); max-width: 680px; }
body[data-page="research"] .section p { margin-bottom: 1.15rem; color: var(--ink); max-width: none; }
.section ul { margin: 1rem 0 1.6rem 1.4rem; max-width: 680px; }
.section ul li { margin-bottom: 0.65rem; color: var(--ink); padding-left: 0.2rem; }
.section ul li::marker { color: var(--pink); }
.section em { color: var(--brown); }
.section blockquote {
margin: 1.5rem 0;
padding: 0.75rem 1.2rem 0.75rem 1.5rem;
border-left: 3px solid var(--pink);
background: rgba(130, 85, 50, 0.07);
border-radius: 0 4px 4px 0;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.2rem;
color: var(--brown);
line-height: 1.5;
max-width: 680px;
}
/* ---------- Reading path ---------- */
.reading-path { display: flex; flex-direction: column; gap: 1.25rem; margin: 2rem 0 3rem; }
.reading-item {
padding: 1.2rem 1.4rem;
border-radius: 0 6px 6px 0;
border-left: 4px solid var(--pink);
background: rgba(230, 50, 150, 0.06);
transition: transform 0.2s, box-shadow 0.2s;
}
.reading-item:hover { transform: translateX(3px); box-shadow: 0 2px 10px rgba(42, 37, 31, 0.05); }
.reading-item:nth-child(2) { border-left-color: var(--terracotta); background: rgba(250, 120, 40, 0.08); }
.reading-item:nth-child(3) { border-left-color: var(--yellow); background: rgba(255, 200, 40, 0.10); }
.reading-item:nth-child(4) { border-left-color: var(--sage); background: rgba(110, 180, 90, 0.08); }
.reading-item:nth-child(5) { border-left-color: var(--blue); background: rgba(100, 170, 230, 0.08); }
.reading-item:nth-child(6) { border-left-color: var(--purple); background: rgba(170, 80, 150, 0.07); }
.reading-item:nth-child(7) { border-left-color: var(--brown); background: rgba(130, 85, 50, 0.07); }
.reading-item .num {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-style: italic;
font-size: 1.05rem;
color: var(--rose);
margin-right: 0.5rem;
}
.reading-item h3 {
display: inline;
font-family: 'Cormorant Garamond', serif;
font-size: 1.35rem;
font-weight: 500;
margin: 0;
color: var(--charcoal);
}
.reading-item .source { font-style: italic; color: var(--brown-soft); font-size: 0.92rem; margin-left: 0.3rem; }
.reading-item p { margin: 0.35rem 0 0; color: var(--ink); font-size: 0.96rem; max-width: none; }
.reading-item .next {
display: inline-block;
margin-top: 0.6rem;
color: var(--rose);
font-size: 0.86rem;
font-style: italic;
text-decoration: none;
border-bottom: 1px solid transparent;
}
.reading-item .next:hover { border-bottom-color: var(--rose); }
/* ---------- Belief / path lists ---------- */
.belief-list { list-style: none !important; margin-left: 0 !important; }
.belief-list li {
padding: 0.9rem 0;
border-bottom: 1px solid rgba(107, 85, 69, 0.22);
}
.belief-list li:last-child { border-bottom: none; }
/* ---------- Coming soon ---------- */
.coming-soon { padding: 7rem 0 6rem; text-align: center; }
.coming-soon .lotus-large { margin: 0 auto 2rem; opacity: 0.65; }
.coming-soon .eyebrow {
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rose);
margin-bottom: 1rem;
font-weight: 500;
}
.coming-soon h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 1.2rem; font-weight: 500; }
.coming-soon p {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.25rem;
color: var(--brown);
max-width: 520px;
margin: 0 auto;
line-height: 1.5;
}
/* ---------- Resources — book catalog ---------- */
.book-group { margin-bottom: 3.5rem; }
.book-group h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.55rem, 2.8vw, 1.95rem);
font-weight: 500;
color: var(--charcoal);
padding-bottom: 0.55rem;
margin: 0 0 0.6rem;
border-bottom: 3px solid var(--pink);
display: inline-block;
}
.book-group:nth-of-type(2) h2 { border-bottom-color: var(--terracotta); }
.book-group:nth-of-type(3) h2 { border-bottom-color: var(--yellow); }
.book-group:nth-of-type(4) h2 { border-bottom-color: var(--sage); }
.book-group:nth-of-type(5) h2 { border-bottom-color: var(--forest); }
.book-group:nth-of-type(6) h2 { border-bottom-color: var(--blue); }
.book-group:nth-of-type(7) h2 { border-bottom-color: var(--purple); }
.book-group:nth-of-type(8) h2 { border-bottom-color: var(--brown); }
.book-group .group-intro {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.25rem;
color: var(--brown);
margin: 0.8rem 0 1.5rem;
max-width: 680px;
line-height: 1.5;
}
.book-subgroup { margin: 2rem 0 1.5rem; }
.book-subgroup h4 {
font-family: 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.78rem;
color: var(--rose);
font-weight: 600;
margin: 0 0 0.8rem;
}
.book-subgroup .subgroup-intro {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
color: var(--brown);
max-width: 680px;
margin: 0 0 1rem;
line-height: 1.5;
}
.book {
display: flex;
gap: 1.25rem;
align-items: flex-start;
padding: 1.1rem 0;
border-bottom: 1px solid rgba(130, 85, 50, 0.12);
}
.book:last-child { border-bottom: none; }
.book-cover {
flex: 0 0 76px;
width: 76px;
aspect-ratio: 2 / 3;
border-radius: 3px;
overflow: hidden;
background: linear-gradient(135deg, var(--cream-warm) 0%, var(--tan-soft) 100%);
border: 1px solid rgba(130, 85, 50, 0.18);
box-shadow: 0 2px 6px rgba(42, 37, 31, 0.08);
position: relative;
}
.book-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.book-cover.no-cover img { display: none; }
.book-cover.no-cover::after {
content: "";
position: absolute;
inset: 20% 25%;
border: 1px solid rgba(130, 85, 50, 0.25);
border-radius: 2px;
}
.book-cover.no-cover::before {
content: "";
position: absolute;
left: 30%;
right: 30%;
top: 40%;
height: 1px;
background: rgba(130, 85, 50, 0.22);
box-shadow:
0 6px 0 rgba(130, 85, 50, 0.22),
0 12px 0 rgba(130, 85, 50, 0.22);
}
.book-content { flex: 1 1 0; min-width: 0; }
.book h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.22rem;
font-weight: 500;
margin: 0 0 0.35rem;
line-height: 1.3;
color: var(--charcoal);
}
.book h3 a {
color: var(--charcoal);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.book h3 a:hover { color: var(--pink); border-bottom-color: var(--pink); }
.book h3 .author { color: var(--brown); font-style: italic; font-weight: 400; font-size: 1rem; }
.book p { margin: 0; color: var(--ink); font-size: 1rem; max-width: none; line-height: 1.6; }
@media (max-width: 520px) {
.book { gap: 1rem; }
.book-cover { flex: 0 0 60px; width: 60px; }
}
.podcast {
padding: 1rem 0 1.1rem;
border-bottom: 1px solid rgba(130, 85, 50, 0.12);
display: flex;
gap: 1rem;
align-items: flex-start;
}
.podcast:last-child { border-bottom: none; }
.podcast__thumb {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 8px;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
background: var(--cream-warm);
}
.podcast__body {
flex: 1;
min-width: 0;
position: relative;
padding-left: 1.4rem;
}
.podcast__body::before {
content: "";
position: absolute;
left: 0;
top: 0.5rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brown);
}
.podcast h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.18rem;
font-weight: 500;
margin: 0 0 0.3rem;
line-height: 1.3;
color: var(--charcoal);
}
.podcast h3 a {
color: var(--charcoal);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.podcast h3 a:hover { color: var(--pink); border-bottom-color: var(--pink); }
.podcast p { margin: 0; color: var(--ink); font-size: 1rem; max-width: none; line-height: 1.6; }
@media (max-width: 520px) {
.podcast__thumb { width: 56px; height: 56px; }
.podcast { gap: 0.75rem; }
}
.resources-closing {
margin-top: 4rem;
padding: 2rem;
background: var(--cream-warm);
border-radius: 6px;
border-left: 4px solid var(--pink);
}
.resources-closing p {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.1rem;
color: var(--brown);
margin-bottom: 0.8rem;
line-height: 1.5;
}
.resources-closing p:last-child { margin-bottom: 0; }
.affiliate-note {
margin-top: 2rem;
padding: 1rem 1.25rem;
background: rgba(220, 190, 140, 0.2);
border-radius: 4px;
font-size: 0.88rem;
color: var(--brown);
}
.affiliate-note strong { color: var(--charcoal); }
/* ---------- Resources branch landing ---------- */
.branch-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin: 2.5rem 0 3rem;
}
.branch-card {
display: flex;
flex-direction: row;
align-items: center;
gap: 1.5rem;
padding: 1.5rem 1.75rem 1.5rem 2rem;
background: #fff;
border-radius: 8px;
border: 1px solid rgba(107, 85, 69, 0.12);
text-decoration: none;
color: var(--charcoal);
position: relative;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.branch-card::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 5px;
background: var(--pink);
}
.branch-card:hover {
transform: translateX(3px);
box-shadow: 0 6px 22px rgba(42, 37, 31, 0.08);
border-color: rgba(107, 85, 69, 0.2);
}
.branch-card > div:first-child { flex: 1 1 0; min-width: 0; }
.branch-card .branch-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--rose);
font-weight: 600;
margin-bottom: 0.45rem;
}
.branch-card h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.25rem, 2.2vw, 1.5rem);
font-weight: 500;
margin: 0 0 0.4rem;
color: var(--charcoal);
line-height: 1.2;
}
.branch-card p {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1rem;
color: var(--brown);
line-height: 1.45;
margin: 0;
max-width: none;
}
.branch-card .branch-meta {
flex: 0 0 auto;
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
letter-spacing: 0.02em;
white-space: nowrap;
}
.branch-card .branch-arrow {
color: var(--rose);
font-weight: 500;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.branch-card:hover .branch-arrow { border-bottom-color: var(--rose); }
.branch-card--books::before { background: var(--pink); }
.branch-card--books .branch-eyebrow { color: var(--rose); }
.branch-card--books:hover { border-color: rgba(230, 50, 150, 0.35); }
.branch-card--podcasts::before { background: var(--forest); }
.branch-card--podcasts .branch-eyebrow { color: var(--forest); }
.branch-card--podcasts .branch-arrow { color: var(--forest); }
.branch-card--podcasts:hover .branch-arrow { border-bottom-color: var(--forest); }
.branch-card--podcasts:hover { border-color: rgba(60, 100, 50, 0.35); }
.branch-card--societies::before { background: var(--purple); }
.branch-card--societies .branch-eyebrow { color: var(--purple); }
.branch-card--societies .branch-arrow { color: var(--purple); }
.branch-card--societies:hover .branch-arrow { border-bottom-color: var(--purple); }
.branch-card--societies:hover { border-color: rgba(170, 80, 150, 0.35); }
@media (max-width: 560px) {
.branch-card {
flex-direction: column;
align-items: flex-start;
gap: 0.9rem;
padding: 1.25rem 1.4rem 1.25rem 1.6rem;
}
.branch-card .branch-meta { align-self: flex-end; }
}
/* ---------- Resources pill toggle ---------- */
.resource-toggle {
display: inline-flex;
gap: 0;
padding: 4px;
background: var(--cream-warm);
border: 1px solid rgba(107, 85, 69, 0.14);
border-radius: 999px;
margin: 0 0 2.5rem;
}
.resource-toggle a {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 500;
color: var(--brown);
text-decoration: none;
padding: 0.55rem 1.25rem;
border-radius: 999px;
transition: background 0.2s ease, color 0.2s ease;
}
.resource-toggle a:hover { color: var(--charcoal); }
.resource-toggle a.active {
background: var(--pink);
color: #fff;
box-shadow: 0 2px 10px rgba(230, 50, 150, 0.22);
}
body[data-page="podcasts"] .resource-toggle a.active {
background: var(--forest);
box-shadow: 0 2px 10px rgba(60, 100, 50, 0.25);
}
body[data-page="societies"] .resource-toggle a.active {
background: var(--purple);
box-shadow: 0 2px 10px rgba(170, 80, 150, 0.25);
}
/* Podcasts page forest accent on group borders */
body[data-page="podcasts"] .book-group h2 { border-bottom-color: var(--forest); }
body[data-page="podcasts"] .book-group:nth-of-type(2) h2 { border-bottom-color: var(--sage); }
body[data-page="podcasts"] .book-group:nth-of-type(3) h2 { border-bottom-color: var(--blue); }
body[data-page="podcasts"] .book-group:nth-of-type(4) h2 { border-bottom-color: var(--purple); }
body[data-page="podcasts"] .book-group:nth-of-type(5) h2 { border-bottom-color: var(--terracotta); }
body[data-page="podcasts"] .book-group:nth-of-type(6) h2 { border-bottom-color: var(--brown); }
body[data-page="podcasts"] .book-group:nth-of-type(7) h2 { border-bottom-color: var(--teal); }
body[data-page="podcasts"] .book-group:nth-of-type(8) h2 { border-bottom-color: var(--lavender); }
body[data-page="podcasts"] .book-group:nth-of-type(9) h2 { border-bottom-color: var(--gold); }
body[data-page="podcasts"] .book-subgroup h4 { color: var(--forest); }
/* Societies page purple accent on group borders */
body[data-page="societies"] .book-group h2 { border-bottom-color: var(--purple); }
body[data-page="societies"] .book-group:nth-of-type(2) h2 { border-bottom-color: var(--blue); }
body[data-page="societies"] .book-group:nth-of-type(3) h2 { border-bottom-color: var(--terracotta); }
body[data-page="societies"] .book-group:nth-of-type(4) h2 { border-bottom-color: var(--sage); }
/* Collapsible society sections */
.society-section { border-radius: 4px; }
.society-section > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-right: 1rem;
transition: opacity 0.2s;
}
.society-section > summary::-webkit-details-marker { display: none; }
.society-section > summary > h2 {
flex: 1;
margin: 0;
}
.society-section > summary::after {
content: "";
flex: 0 0 12px;
width: 12px;
height: 12px;
border-right: 2px solid var(--purple);
border-bottom: 2px solid var(--purple);
transform: rotate(45deg);
margin-top: -4px;
transition: transform 0.25s ease;
opacity: 0.7;
}
.society-section[open] > summary::after {
transform: rotate(-135deg);
margin-top: 4px;
}
.society-section > summary:hover { opacity: 0.85; }
.society-section[open] > summary > h2 { margin-bottom: 0.6rem; }
/* The Long Table — opening quote */
.long-table-quote {
margin: 2.5rem auto 0;
max-width: 640px;
text-align: center;
padding: 1.75rem 2rem;
border-top: 1px solid rgba(170, 80, 150, 0.18);
border-bottom: 1px solid rgba(170, 80, 150, 0.18);
}
.long-table-quote blockquote {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(1.25rem, 2.2vw, 1.55rem);
line-height: 1.45;
color: var(--purple);
margin: 0;
border: none;
padding: 0;
}
.long-table-quote figcaption {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brown);
opacity: 0.7;
margin-top: 1rem;
}
/* Resources page opening quotes — books (pink), podcasts (forest) */
.shelf-quote,
.between-cases-quote {
margin: 2.5rem auto 0;
max-width: 640px;
text-align: center;
padding: 1.75rem 2rem;
}
.shelf-quote {
border-top: 1px solid rgba(230, 50, 150, 0.18);
border-bottom: 1px solid rgba(230, 50, 150, 0.18);
}
.between-cases-quote {
border-top: 1px solid rgba(60, 100, 50, 0.18);
border-bottom: 1px solid rgba(60, 100, 50, 0.18);
}
.shelf-quote blockquote,
.between-cases-quote blockquote {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(1.25rem, 2.2vw, 1.55rem);
line-height: 1.45;
margin: 0;
border: none;
padding: 0;
}
.shelf-quote blockquote { color: var(--pink); }
.between-cases-quote blockquote { color: var(--forest); }
.shelf-quote figcaption,
.between-cases-quote figcaption {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brown);
opacity: 0.7;
margin-top: 1rem;
}
/* Society listing — organizations with multiple related links */
.society {
display: flex;
gap: 1.15rem;
align-items: flex-start;
padding: 1.25rem 0;
border-bottom: 1px solid rgba(130, 85, 50, 0.12);
}
.society:last-child { border-bottom: none; }
.society__thumb {
flex: 0 0 72px;
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
background: var(--cream-warm);
}
.society__body { flex: 1; min-width: 0; }
@media (max-width: 520px) {
.society__thumb { flex: 0 0 56px; width: 56px; height: 56px; }
}
.society-logo {
flex: 0 0 60px;
width: 60px;
height: 60px;
border-radius: 8px;
background: #fff;
border: 1px solid rgba(130, 85, 50, 0.14);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 1px 3px rgba(42, 37, 31, 0.05);
}
.society-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
padding: 6px;
display: block;
}
.society-logo.no-logo {
background: linear-gradient(135deg, var(--cream-warm) 0%, var(--tan-soft) 100%);
}
.society-logo.no-logo img { display: none; }
.society-logo.no-logo::after {
content: attr(data-initials);
font-family: 'Inter', sans-serif;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--brown);
font-size: 0.78rem;
}
.society-content { flex: 1 1 0; min-width: 0; }
.society h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
font-weight: 500;
margin: 0 0 0.5rem;
line-height: 1.3;
color: var(--charcoal);
}
@media (max-width: 520px) {
.society { gap: 0.85rem; }
.society-logo { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 6px; }
.society-logo.no-logo::after { font-size: 0.65rem; }
}
.society h3 a {
color: var(--charcoal);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.society h3 a:hover {
color: var(--purple);
border-bottom-color: var(--purple);
}
.society-links {
list-style: none;
margin: 0.35rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.4rem;
font-family: 'Inter', sans-serif;
font-size: 0.88rem;
}
.society-links li {
position: relative;
padding-left: 0;
}
.society-links li::before {
content: "→ ";
color: var(--brown-soft);
margin-right: 0.15rem;
}
.society-links a {
color: var(--brown);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.society-links a:hover {
color: var(--purple);
border-bottom-color: var(--purple);
}
.society .description {
margin: 0.65rem 0 0;
font-size: 1rem;
color: var(--ink);
line-height: 1.6;
max-width: none;
}
/* ---------- Connect ---------- */
.connect-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
margin: 0.5rem 0 2rem;
}
.connect-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.5rem;
padding: 1.25rem 0.75rem;
background: #fff;
border-radius: 6px;
border: 1px solid rgba(107, 85, 69, 0.12);
text-decoration: none;
color: var(--charcoal);
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.connect-card:hover {
border-color: var(--pink);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(42, 37, 31, 0.06);
}
.connect-icon {
font-size: 1.8rem;
color: var(--pink);
display: block;
}
.connect-card:hover .connect-icon { color: var(--rose-deep); }
.connect-card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1rem;
margin: 0;
color: var(--charcoal);
font-weight: 500;
}
.connect-contact {
margin-top: 3rem;
padding: 2rem;
background: var(--cream-warm);
border-radius: 6px;
text-align: center;
}
.connect-contact p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.2rem; color: var(--brown); margin: 0 auto; }
/* ---------- Long-bio disclosure (About page) ---------- */
.long-bio {
margin: 2rem 0;
border: 1px solid rgba(107, 85, 69, 0.15);
border-radius: 6px;
overflow: hidden;
}
.long-bio summary {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.3rem, 2vw, 1.6rem);
color: var(--forest);
padding: 1rem 1.5rem;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(60, 100, 50, 0.04);
border-bottom: 1px solid transparent;
transition: background 0.2s;
user-select: none;
}
.long-bio summary::-webkit-details-marker { display: none; }
.long-bio summary::after {
content: "";
margin-left: auto;
width: 9px;
height: 9px;
border-right: 1.5px solid var(--forest);
border-bottom: 1.5px solid var(--forest);
transform: rotate(45deg);
transition: transform 0.25s ease;
flex-shrink: 0;
margin-top: -3px;
}
.long-bio[open] summary::after { transform: rotate(-135deg); margin-top: 2px; }
.long-bio[open] summary {
background: rgba(60, 100, 50, 0.06);
border-bottom-color: rgba(107, 85, 69, 0.12);
}
.long-bio summary:hover { background: rgba(60, 100, 50, 0.08); }
.long-bio__body {
padding: 1.75rem 1.75rem 1.5rem;
background: #fff;
}
/* About page portrait — floated top-left */
.about-portrait {
float: left;
width: 300px;
max-width: 40%;
margin: 0 2rem 1.5rem 0;
border-radius: 8px;
object-fit: cover;
display: block;
}
@media (max-width: 600px) {
.about-portrait {
float: none;
width: 100%;
max-width: 100%;
margin: 0 0 1.5rem 0;
}
}
/* My Path image inside accordion */
.about-path-img {
display: block;
width: 100%;
max-width: 480px;
margin: 0 auto 1.5rem;
border-radius: 6px;
}
.long-bio__body h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: clamp(1.25rem, 2vw, 1.5rem);
color: var(--forest); /* was var(--brown); Oct 14, 2026 — matches the section summary */
margin: 1.5rem 0 0.75rem;
line-height: 1.3;
}
.long-bio__body h3:first-child { margin-top: 0; }
/* ---------- Contact form ---------- */
.contact-form-wrap {
max-width: 640px;
margin: 3.5rem auto 0;
}
.contact-form-trigger {
text-align: center;
margin: 1rem 0 2rem;
}
.contact-form-trigger__btn {
cursor: pointer;
border: none;
font-family: 'Inter', sans-serif;
font-size: 1rem;
}
.contact-form-reveal {
animation: contact-form-fadein 0.3s ease;
}
@keyframes contact-form-fadein {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.contact-form-heading {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: clamp(1.75rem, 3vw, 2.25rem);
color: var(--forest);
text-align: center;
margin: 0 0 0.6rem;
}
.contact-form-intro {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.15rem;
color: var(--brown);
text-align: center;
margin: 0 0 2rem;
line-height: 1.5;
}
.contact-form {
background: var(--cream-warm);
padding: 2.25rem 2rem;
border-radius: 8px;
border: 1px solid rgba(170, 80, 150, 0.06);
}
.contact-form__honeypot {
position: absolute;
left: -10000px;
top: -10000px;
height: 0;
width: 0;
overflow: hidden;
}
.contact-form__row {
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
}
.contact-form__row label {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--forest);
margin-bottom: 0.45rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
font-family: 'Inter', sans-serif;
font-size: 1rem;
color: var(--charcoal);
padding: 0.7rem 0.85rem;
border: 1px solid rgba(170, 80, 150, 0.18);
border-radius: 5px;
background: #fff;
transition: border-color 0.18s, box-shadow 0.18s;
width: 100%;
box-sizing: border-box;
}
.contact-form textarea {
resize: vertical;
min-height: 120px;
line-height: 1.5;
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--pink);
box-shadow: 0 0 0 3px rgba(230, 50, 150, 0.15);
}
.contact-form select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.85rem center;
padding-right: 2.25rem;
}
.contact-form__submit {
margin-top: 0.5rem;
width: 100%;
cursor: pointer;
border: none;
font-size: 1rem;
}
.contact-form__alt {
text-align: center;
margin-top: 1.5rem;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.05rem;
color: var(--brown);
}
/* ---------- Footer ---------- */
.site-footer {
margin-top: 5rem;
padding: 3.5rem 0 2rem;
background:
radial-gradient(ellipse at 15% 25%, rgba(196, 174, 224, 0.10) 0%, transparent 55%),
radial-gradient(ellipse at 82% 15%, rgba(201, 150, 58, 0.10) 0%, transparent 50%),
var(--cream-warm);
border-top: 1px solid rgba(201, 150, 58, 0.30);
color: var(--ink);
font-size: 0.92rem;
}
.site-footer a { color: var(--rose); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.site-footer a:hover { border-bottom-color: var(--rose); }
.site-footer .container-wide {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 3.5rem;
align-items: stretch;
}
.site-footer .container-wide:first-child > div {
display: flex;
flex-direction: column;
}
.site-footer .container-wide:first-child > div + div {
border-left: 1px solid rgba(130, 85, 50, 0.15);
padding-left: 3rem;
}
.footer-brand > .logo,
.footer-links > h4,
.footer-subscribe > h4 {
margin-top: 0;
}
.site-footer .footer-brand-connect,
.site-footer .footer-now-link {
margin-top: auto;
display: block;
width: fit-content;
}
.footer-subscribe .subscribe-form {
margin-top: auto;
}
.site-footer .container-wide:last-child {
grid-template-columns: 1fr;
}
.site-footer .container-wide:last-child > div + div {
border-left: none;
padding-left: 0;
}
.footer-brand .logo { align-items: flex-start; padding-top: 0.15rem; }
.footer-brand p {
margin-top: 1rem;
opacity: 0.9;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.05rem;
line-height: 1.5;
max-width: 380px;
}
.footer-subscribe h4 {
font-family: 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.78rem;
color: var(--brown);
font-weight: 600;
margin-bottom: 1rem;
}
.footer-subscribe p {
margin: 0 0 1rem;
opacity: 0.9;
font-weight: 500;
line-height: 1.5;
font-size: 0.92rem;
max-width: 280px;
}
.subscribe-form {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 280px;
}
.subscribe-form input[type="email"] {
padding: 0.7rem 0.9rem;
border: 1px solid rgba(130, 85, 50, 0.28);
background: rgba(255, 250, 242, 0.65);
color: var(--ink);
border-radius: 4px;
font-family: 'Inter', sans-serif;
font-size: 0.92rem;
transition: border-color 0.2s, background 0.2s;
}
.subscribe-form input[type="email"]::placeholder {
color: var(--brown-soft);
opacity: 0.6;
}
.subscribe-form input[type="email"]:focus {
outline: none;
border-color: var(--pink);
background: rgba(255, 250, 242, 0.90);
}
.subscribe-form button {
align-self: flex-start;
padding: 0.5rem 1.1rem;
background: transparent;
color: var(--pink);
border: 1px solid rgba(230, 50, 150, 0.5);
border-radius: 4px;
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.subscribe-form button:hover {
background: rgba(230, 50, 150, 0.1);
border-color: var(--pink);
}
.site-footer .subscribe-form a {
border: none;
}
/* Writing page — subscribe block at bottom */
.writing-subscribe {
text-align: center;
margin: 3rem auto 0;
max-width: 560px;
padding: 2rem 1.5rem;
}
.writing-subscribe h2 {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.6rem, 3vw, 2rem);
color: var(--charcoal);
margin: 0 0 0.6rem;
border: none;
}
.writing-subscribe p {
color: var(--brown);
margin: 0 0 1.5rem;
font-size: 1.02rem;
line-height: 1.55;
}
.subscribe-form--inline {
flex-direction: row;
max-width: 480px;
margin: 0 auto;
gap: 0.5rem;
}
.subscribe-form--inline input[type="email"] {
flex: 1;
background: rgba(107, 85, 69, 0.06);
border: 1px solid rgba(107, 85, 69, 0.18);
color: var(--charcoal);
}
.subscribe-form--inline input[type="email"]::placeholder {
color: rgba(107, 85, 69, 0.55);
}
.subscribe-form--inline input[type="email"]:focus {
background: rgba(107, 85, 69, 0.1);
border-color: var(--pink);
}
.subscribe-form--inline button {
align-self: stretch;
padding: 0.7rem 1.1rem;
color: var(--pink);
border-color: rgba(230, 50, 150, 0.4);
}
.subscribe-form--inline button:hover {
background: rgba(230, 50, 150, 0.06);
border-color: var(--pink);
color: var(--pink);
}
@media (max-width: 520px) {
.subscribe-form--inline { flex-direction: column; }
}
/* ---------- Now page ---------- */
.now-updated {
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
letter-spacing: 0.06em;
color: var(--brown);
opacity: 0.75;
margin-top: 1rem;
}
.now-entry {
margin: 2.5rem 0;
}
.now-entry h2,
.now-entry h3 {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.5rem, 2.6vw, 1.85rem);
color: var(--charcoal);
margin: 0 0 1rem;
line-height: 1.3;
border: none;
}
.now-entry p {
color: var(--ink);
font-size: 1.03rem;
line-height: 1.65;
margin: 0 0 1rem;
max-width: 680px;
}
.now-invitation {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
color: var(--brown);
border-left: 3px solid var(--pink);
padding: 0.5rem 0 0.5rem 1.2rem;
margin-top: 1.25rem !important;
}
.now-footer {
text-align: center;
margin-top: 2rem;
padding: 1.5rem;
font-size: 0.92rem;
color: var(--brown);
opacity: 0.75;
}
body[data-page="now"] .page-intro .eyebrow { color: var(--pink); }
.now-section {
margin: 2.5rem 0;
}
.now-section__heading {
font-family: 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.78rem;
color: var(--pink);
font-weight: 600;
margin: 0 0 1.5rem;
border: none;
padding: 0;
}
.now-entry__meta {
font-family: 'Inter', sans-serif;
font-size: 0.74rem;
letter-spacing: 0.06em;
color: var(--brown);
opacity: 0.65;
margin-bottom: 0.5rem;
}
.now-entry--pinned {
border-left: 3px solid var(--pink);
padding-left: 1.5rem;
background: rgba(230, 50, 150, 0.03);
padding-top: 1.25rem;
padding-bottom: 1.25rem;
border-radius: 0 4px 4px 0;
}
.now-archive {
margin-top: 4rem;
border-top: 1px solid rgba(107, 85, 69, 0.15);
padding-top: 1.5rem;
}
.now-archive summary {
font-family: 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.78rem;
color: var(--brown);
font-weight: 500;
cursor: pointer;
padding: 0.5rem 0;
list-style: none;
display: flex;
align-items: center;
gap: 0.5rem;
}
.now-archive summary::-webkit-details-marker { display: none; }
.now-archive summary::after {
content: "";
width: 8px;
height: 8px;
border-right: 2px solid var(--brown);
border-bottom: 2px solid var(--brown);
transform: rotate(45deg);
margin-top: -3px;
opacity: 0.5;
transition: transform 0.25s;
}
.now-archive[open] summary::after {
transform: rotate(-135deg);
margin-top: 3px;
}
.now-archive__body {
padding: 1rem 0;
}
.now-archive__intro,
.now-archive__empty {
color: var(--brown);
font-size: 0.95rem;
margin: 0.5rem 0;
}
.now-media {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
margin: 0;
}
.now-media__heading {
font-family: 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.78rem;
color: var(--brown);
font-weight: 600;
margin: 0 0 1rem;
}
.now-media__item h4 {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.25rem;
color: var(--charcoal);
margin: 0 0 0.5rem;
line-height: 1.35;
}
.now-media__author {
color: var(--brown);
font-style: normal;
font-size: 1rem;
}
.now-media__item p {
color: var(--ink);
font-size: 0.98rem;
line-height: 1.6;
margin: 0;
}
.now-media__item + .now-media__item {
margin-top: 1.75rem;
padding-top: 1.75rem;
border-top: 1px solid rgba(107, 85, 69, 0.1);
}
.now-media__related {
margin-top: 0.75rem !important;
font-size: 0.92rem !important;
color: var(--brown);
}
@media (max-width: 720px) {
.now-media { grid-template-columns: 1fr; gap: 2rem; }
}
/* ---------- Site-wide Now strip (above footer, every page) ---------- */
.now-strip {
background: rgba(230, 50, 150, 0.04);
border-top: 1px solid rgba(230, 50, 150, 0.12);
border-bottom: 1px solid rgba(230, 50, 150, 0.12);
padding: 1.4rem 0;
}
.now-strip__inner {
display: flex;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
}
.now-strip .now-teaser__label {
white-space: nowrap;
}
.now-strip .now-teaser__link {
margin-bottom: 0;
}
/* Home page now-teaser */
.now-teaser {
margin-top: 3rem;
padding: 1.5rem 1.75rem;
border-left: 3px solid var(--pink);
background: rgba(230, 50, 150, 0.04);
border-radius: 0 4px 4px 0;
}
.now-teaser__label {
display: block;
font-family: 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.74rem;
color: var(--pink);
font-weight: 600;
margin-bottom: 0.5rem;
}
.now-teaser__link {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.15rem;
line-height: 1.5;
color: var(--charcoal);
text-decoration: none;
transition: color 0.2s;
}
.now-teaser__link:hover { color: var(--pink); }
.now-teaser__cta {
font-family: 'Inter', sans-serif;
font-style: normal;
font-size: 0.85rem;
letter-spacing: 0.04em;
color: var(--pink);
font-weight: 500;
white-space: nowrap;
margin-left: 0.3rem;
}
.footer-links h4 {
font-family: 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.78rem;
font-weight: 500;
color: var(--brown);
margin-bottom: 1rem;
}
.footer-links ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.2rem; }
.site-footer .footer-brand-connect {
display: block;
margin-top: auto;
padding-top: 1.25rem;
font-family: 'Cormorant Garamond', 'Georgia', serif;
font-style: italic;
font-size: 1.25rem;
color: var(--pink, #E63296);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
width: fit-content;
}
.site-footer .footer-brand-connect:hover {
border-bottom-color: var(--pink, #E63296);
}
.footer-social {
display: flex;
gap: 1rem;
margin-top: 1.25rem;
align-items: center;
}
.footer-social a {
color: var(--brown-soft);
opacity: 0.65;
transition: color 0.2s, opacity 0.2s;
line-height: 0;
border-bottom: none;
}
.footer-social a:hover { color: var(--rose); opacity: 1; }
.footer-social svg { width: 1.1rem; height: 1.1rem; }
.site-footer .footer-now-link {
display: block;
margin-top: auto;
padding-top: 1.5rem;
font-family: 'Cormorant Garamond', 'Georgia', serif;
font-style: italic;
font-size: 1.15rem;
color: var(--pink, #E63296);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
width: fit-content;
}
.site-footer .footer-now-link:hover {
border-bottom-color: var(--pink, #E63296);
}
.footer-copy {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(130, 85, 50, 0.18);
text-align: center;
font-size: 0.82rem;
color: var(--brown-soft);
opacity: 0.75;
}
/* ---------- About page — Story blocks ---------- */
.about-story {
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.story-block {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 420px;
}
.story-block--full-photo,
.story-block--believe,
.story-block--humanity,
.story-block--belong {
grid-template-columns: 1fr;
}
.story-block__img {
overflow: hidden;
}
.story-block__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.story-block--full-photo img {
width: 100%;
max-height: 520px;
object-fit: cover;
object-position: center 25%;
display: block;
}
.story-block__text {
display: flex;
flex-direction: column;
justify-content: center;
padding: 3rem 3.5rem;
gap: 0;
}
.story-block__text p {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.2rem, 2vw, 1.5rem);
line-height: 1.5;
color: #fff;
margin-bottom: 1.1rem;
max-width: none;
}
.story-block__text p:last-child { margin-bottom: 0; }
.story-block__text em { color: inherit; font-style: italic; }
.story-block__text strong { color: #fff; font-weight: 600; }
.story-block__text--full {
padding: 4rem 3.5rem;
max-width: 820px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
.story-label {
font-family: 'Cormorant Garamond', serif !important;
font-style: italic !important;
font-size: 1.1rem !important;
opacity: 0.85;
margin-bottom: 1.25rem !important;
}
.story-sig {
font-family: 'Cormorant Garamond', serif !important;
font-style: italic !important;
font-size: 1.15rem !important;
opacity: 0.8;
margin-top: 1rem !important;
}
.story-sig .dr-heather {
font-size: 1.9em;
color: var(--rose);
margin-left: 0.15em;
vertical-align: -0.05em;
}
.story-sig--formal {
font-size: 0.92rem !important;
opacity: 0.55;
margin-top: 0.1rem !important;
letter-spacing: 0.02em;
}
.story-list {
list-style: none;
margin: 0.5rem 0 0 0;
padding: 0;
}
.story-list li {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.1rem, 1.8vw, 1.35rem);
color: #fff;
padding: 0.3rem 0;
padding-left: 1.1rem;
position: relative;
}
.story-list li::before {
content: "•";
position: absolute;
left: 0;
opacity: 0.7;
}
/* Color themes */
.story-block__text--green { background: var(--forest); }
.story-block__text--brown { background: var(--brown); }
.story-block__text--purple { background: var(--purple); }
.story-block__text--pink { background: var(--pink); }
.story-block__text--orange { background: var(--terracotta); }
.story-block__text--blue { background: var(--blue); color: #fff; }
/* Row ordering: alternate image left / text right */
.story-block--portrait { }
.story-block--roots { }
.story-block--path { }
.story-block--family { grid-template-columns: 1fr 1fr; }
.story-block--butterfly { }
.story-block--slow-down { }
.story-block--offer { }
/* Flip some rows so text appears on left */
.story-block--roots .story-block__text,
.story-block--family .story-block__text,
.story-block--humanity .story-block__text,
.story-block--offer .story-block__text { order: -1; }
@media (max-width: 720px) {
.story-block {
grid-template-columns: 1fr;
min-height: auto;
}
.story-block__img { min-height: 260px; }
.story-block__text { padding: 2.25rem 1.75rem; }
.story-block__text--full { padding: 2.5rem 1.75rem; }
.story-block--roots .story-block__text,
.story-block--family .story-block__text,
.story-block--offer .story-block__text { order: 0; }
}
/* ---------- About page — Garamond body text ---------- */
body[data-page="about"] .section p,
body[data-page="about"] .belief-list li {
font-family: 'Cormorant Garamond', serif;
font-size: 1.15rem;
font-weight: 600;
line-height: 1.65;
color: var(--charcoal);
}
/* ---------- Credits card ---------- */
.credits-card {
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: 2rem;
margin: 1.5rem 0 2rem;
padding: 1.5rem 1.75rem;
background: var(--cream-warm);
border-left: 4px solid var(--pink);
border-radius: 0 6px 6px 0;
}
.credits-card--photo-left {
flex-direction: row;
}
.credits-card__body { flex: 1; }
.credits-photo {
flex-shrink: 0;
max-width: 160px;
max-height: 200px;
width: auto;
height: auto;
border-radius: 6px;
border: 3px solid var(--pink-soft);
box-shadow: 0 4px 16px rgba(42, 37, 31, 0.12);
}
.credits-card:not(.credits-card--photo-left) .credits-photo {
margin-right: 3rem;
}
.credits-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--charcoal);
}
.credits-role {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--rose);
font-weight: 500;
margin: 0.2rem 0 0.75rem;
}
.credits-card p {
margin-bottom: 0.9rem;
font-size: 1rem;
}
.credits-link {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
color: var(--rose);
text-decoration: none;
border-bottom: 1px solid rgba(230, 50, 150, 0.35);
padding-bottom: 1px;
transition: border-color 0.2s;
}
.credits-link:hover { border-bottom-color: var(--rose); }
/* ---------- Footer credit line ---------- */
.footer-credit {
display: block;
margin-top: 0.35rem;
opacity: 0.7;
}
.footer-credit a { color: var(--pink-soft); }
/* ---------- Media page ---------- */
.media-item {
padding: 2.5rem 0;
border-bottom: 3px solid rgba(130, 85, 50, 0.1);
}
.media-item:last-child { border-bottom: none; padding-bottom: 0; }
.media-meta {
display: flex;
gap: 1rem;
align-items: baseline;
margin-bottom: 0;
flex-wrap: wrap;
}
.media-pub {
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--rose);
}
.media-date {
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
color: var(--brown-soft);
}
.media-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.5rem, 2.5vw, 1.9rem);
font-weight: 700;
margin: 0.1rem 0 0.25rem;
line-height: 1.2;
color: var(--charcoal);
}
.media-title a {
color: var(--purple);
text-decoration: none;
border-bottom: 2px solid rgba(170, 80, 150, 0.2);
transition: color 0.2s, border-color 0.2s;
}
.media-title a:hover { color: var(--rose); border-bottom-color: var(--rose); }
.media-byline {
font-size: 0.88rem;
color: var(--brown-soft);
font-style: italic;
margin: 0 0 0.75rem;
}
.media-summary {
font-size: 0.97rem;
color: var(--ink);
margin-bottom: 0.75rem;
max-width: none;
}
.media-quote {
margin: 0.75rem 0 0;
padding: 0.4rem 0 0.4rem 1.25rem;
border-left: 3px solid var(--pink);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.15rem;
color: var(--brown);
line-height: 1.5;
max-width: 620px;
}
/* ---------- Media talks ---------- */
.media-talk {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.media-talk-thumb {
position: relative;
flex-shrink: 0;
display: block;
width: 220px;
border-radius: 6px;
overflow: hidden;
}
.media-talk-thumb img {
width: 100%;
height: auto;
display: block;
transition: opacity 0.2s;
}
.media-talk-thumb:hover img { opacity: 0.85; }
.media-talk-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
pointer-events: none;
}
.media-talk-info { flex: 1; }
/* ---------- #ILookLikeASurgeon collapsible blog list ---------- */
.ilook-blogs {
margin: 2rem 0;
border: 1px solid rgba(107, 85, 69, 0.15);
border-radius: 6px;
overflow: hidden;
}
.ilook-blogs summary {
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
font-style: normal;
font-weight: 600;
color: var(--rose);
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.85rem 1.25rem;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 0.65rem;
background: rgba(230, 50, 150, 0.04);
border-bottom: 1px solid transparent;
transition: background 0.2s;
user-select: none;
line-height: 1.3;
}
.ilook-blogs summary::-webkit-details-marker { display: none; }
.ilook-blogs summary::after {
content: "";
margin-left: auto;
width: 8px;
height: 8px;
border-right: 1.5px solid var(--rose);
border-bottom: 1.5px solid var(--rose);
transform: rotate(45deg);
transition: transform 0.25s ease;
flex-shrink: 0;
margin-top: -3px;
}
.ilook-blogs[open] summary::after { transform: rotate(-135deg); margin-top: 2px; }
.ilook-blogs[open] summary {
background: rgba(230, 50, 150, 0.06);
border-bottom-color: rgba(107, 85, 69, 0.12);
}
.ilook-blogs summary:hover { background: rgba(230, 50, 150, 0.08); }
.ilook-blog-list {
margin: 0;
padding: 1.25rem 1.5rem 1.25rem 3rem;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.ilook-blog-list li {
font-family: 'Cormorant Garamond', serif;
font-size: 1.08rem;
color: var(--ink);
padding: 0.5rem 0;
border-bottom: 1px solid rgba(107, 85, 69, 0.08);
line-height: 1.4;
}
.ilook-blog-list li:last-child { border-bottom: none; }
.ilook-blog-list a {
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,0.15);
transition: opacity 0.2s;
font-weight: 500;
}
.ilook-blog-list a:hover { opacity: 0.75; }
.ilook-blog-list li:nth-child(1) a { color: var(--pink); border-bottom-color: rgba(230,50,150,0.25); }
.ilook-blog-list li:nth-child(2) a { color: var(--terracotta);border-bottom-color: rgba(250,120,40,0.25); }
.ilook-blog-list li:nth-child(3) a { color: var(--yellow); border-bottom-color: rgba(255,200,40,0.35); }
.ilook-blog-list li:nth-child(4) a { color: var(--sage); border-bottom-color: rgba(110,180,90,0.3); }
.ilook-blog-list li:nth-child(5) a { color: var(--forest); border-bottom-color: rgba(60,100,50,0.3); }
.ilook-blog-list li:nth-child(6) a { color: var(--blue); border-bottom-color: rgba(100,170,230,0.35); }
.ilook-blog-list li:nth-child(7) a { color: var(--purple); border-bottom-color: rgba(120,40,180,0.25); }
.ilook-blog-list li:nth-child(8) a { color: var(--pink); border-bottom-color: rgba(230,50,150,0.25); }
.ilook-blog-list li:nth-child(9) a { color: var(--terracotta);border-bottom-color: rgba(250,120,40,0.25); }
.ilook-blog-list li:nth-child(10) a { color: var(--yellow); border-bottom-color: rgba(255,200,40,0.35); }
.ilook-blog-list li:nth-child(11) a { color: var(--sage); border-bottom-color: rgba(110,180,90,0.3); }
.ilook-blog-list li:nth-child(12) a { color: var(--forest); border-bottom-color: rgba(60,100,50,0.3); }
.ilook-blog-list li:nth-child(13) a { color: var(--blue); border-bottom-color: rgba(100,170,230,0.35); }
.ilook-blog-list li:nth-child(14) a { color: var(--purple); border-bottom-color: rgba(120,40,180,0.25); }
.ilook-blog-list li:nth-child(15) a { color: var(--pink); border-bottom-color: rgba(230,50,150,0.25); }
.ilook-blog-list li:nth-child(16) a { color: var(--terracotta);border-bottom-color: rgba(250,120,40,0.25); }
.ilook-blog-list li:nth-child(17) a { color: var(--yellow); border-bottom-color: rgba(255,200,40,0.35); }
.ilook-blog-list li:nth-child(18) a { color: var(--sage); border-bottom-color: rgba(110,180,90,0.3); }
.ilook-blog-list li:nth-child(19) a { color: var(--forest); border-bottom-color: rgba(60,100,50,0.3); }
.ilook-blog-author {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--brown);
opacity: 0.75;
margin-top: 0.3rem;
font-weight: 400;
}
.ilook-blog-note {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.95rem;
color: var(--brown-soft);
padding: 1rem 1.5rem 0.5rem;
opacity: 0.8;
}
/* ---------- Media page accents ---------- */
body[data-page="media"] .page-intro .eyebrow { color: var(--pink); }
body[data-page="media"] .book-group h2 { border-bottom-color: var(--purple); }
body[data-page="media"] .media-pub { color: var(--brown-soft); }
body[data-page="media"] .media-quote { border-left-color: var(--purple); }
body[data-page="media"] .media-title a:hover { color: var(--purple); border-bottom-color: var(--purple); }
body[data-page="media"] .spectrum {
background: linear-gradient(90deg, transparent 0%, var(--pink) 10%, var(--lavender) 45%, var(--blue) 75%, transparent 100%);
}
/* ---------- Advocacy page ---------- */
body[data-page="advocacy"] .page-intro .eyebrow { color: var(--pink); }
body[data-page="advocacy"] .section h2 { color: var(--terracotta); }
body[data-page="advocacy"] .section blockquote {
border-left-color: var(--terracotta);
background: rgba(250, 120, 40, 0.06);
padding-right: 1.25rem;
border-radius: 0 4px 4px 0;
}
body[data-page="advocacy"] .spectrum {
background: linear-gradient(90deg, transparent 0%, var(--terracotta) 12%, var(--gold) 45%, var(--pink) 78%, transparent 100%);
}
.advocacy-footnote {
font-size: 0.92rem;
color: var(--brown-soft);
font-style: italic;
border-top: 1px solid rgba(107, 85, 69, 0.15);
padding-top: 1.5rem;
max-width: 680px;
}
/* ---------- Research profile pills ---------- */
.research-profiles {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1rem;
justify-content: center;
}
.research-profiles-label {
text-align: center;
font-family: 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.78rem;
font-weight: 500;
color: rgba(170, 80, 150, 0.55);
margin: 2rem 0 1.25rem;
}
.research-profile {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.65rem 1.2rem;
background: #fff;
border: 1px solid rgba(170, 80, 150, 0.12);
border-radius: 999px;
color: var(--forest, #3a5a40);
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
transition: border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.research-profile:hover {
border-color: var(--pink, #E63296);
color: var(--pink, #E63296);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(230, 50, 150, 0.14);
}
.research-profile__icon { flex-shrink: 0; }
.research-profile__label { line-height: 1; }
/* ---------- Research tabs & publications ---------- */
.research-tabs {
display: grid;
grid-template-columns: 1fr;
gap: 0.6rem;
margin-bottom: 2rem;
border-bottom: none;
padding-bottom: 0;
}
.research-tab {
font-family: 'Inter', sans-serif;
text-align: left;
background: rgba(255,255,255,0.55);
border: 1px solid rgba(107, 85, 69, 0.13);
border-left: 3px solid rgba(107, 85, 69, 0.2);
border-radius: 8px;
padding: 1.05rem 1.4rem;
cursor: pointer;
transition: background 0.18s, border-color 0.18s;
display: flex;
flex-direction: row;
align-items: baseline;
gap: 1.1rem;
}
.research-tab__label {
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--brown-soft);
transition: color 0.18s;
line-height: 1.2;
white-space: nowrap;
flex-shrink: 0;
}
.research-tab__sub {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-style: italic;
color: var(--charcoal);
opacity: 0.9;
line-height: 1.35;
font-weight: 500;
transition: opacity 0.18s;
}
.research-tab:hover {
background: rgba(255,255,255,0.85);
}
.research-tab:hover .research-tab__label { color: var(--ink); }
.research-tab:hover .research-tab__sub { opacity: 0.8; }
.research-tab.active {
background: rgba(255,255,255,0.9);
border-left-color: var(--forest);
}
.research-tab.active .research-tab__label { color: var(--forest); }
.research-tab.active .research-tab__sub { opacity: 0.85; }
/* Reduce whitespace above the tabs on research page */
body[data-page="research"] .section { padding-top: 1.25rem; }
.research-panel {
display: none;
}
.research-panel.active {
display: block;
}
.research-photo {
margin: 1.5rem 0 2rem;
max-width: 560px;
}
.research-photo img {
width: 100%;
height: auto;
border-radius: 6px;
display: block;
}
.research-photo figcaption {
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
color: var(--brown-soft);
margin-top: 0.6rem;
font-style: italic;
}
.research-intro {
font-family: 'Inter', sans-serif;
font-size: 1rem;
line-height: 1.8;
color: var(--ink);
max-width: none;
margin: 0 0 2rem;
}
.research-pubs-label {
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brown-soft);
margin: 0 0 1.25rem;
}
.pub-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.pub-item {
padding: 1.5rem 0;
border-bottom: 1px solid rgba(107, 85, 69, 0.1);
}
.pub-item:last-child { border-bottom: none; }
.pub-authors {
font-family: 'Inter', sans-serif;
font-size: 0.88rem;
color: var(--brown-soft);
margin: 0 0 0.35rem;
line-height: 1.5;
}
.pub-authors strong {
color: var(--ink);
font-weight: 600;
}
.pub-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.35rem;
font-weight: 600;
color: var(--charcoal);
margin: 0 0 0.5rem;
line-height: 1.35;
}
.pub-journal {
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
color: var(--brown-soft);
margin: 0;
}
.pub-title-link {
color: inherit;
text-decoration: none;
border-bottom: 1px solid rgba(60, 100, 50, 0.3);
transition: color 0.2s, border-color 0.2s;
}
.pub-title-link:hover {
color: var(--forest);
border-bottom-color: var(--forest);
}
.pub-doi {
color: var(--forest);
text-decoration: none;
border-bottom: 1px solid rgba(60, 100, 50, 0.25);
transition: opacity 0.2s;
}
.pub-doi:hover { opacity: 0.7; }
body[data-page="research"] .page-intro .eyebrow { color: var(--pink); }
body[data-page="research"] .spectrum {
background: linear-gradient(90deg, transparent 0%, var(--gold) 12%, var(--teal) 45%, var(--lavender) 78%, transparent 100%);
}
/* ── Publication key findings toggle ── */
.pub-findings {
margin-top: 1rem;
}
.pub-findings__toggle {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--forest);
cursor: pointer;
list-style: none;
user-select: none;
padding: 0.3rem 0.75rem 0.3rem 0;
}
.pub-findings__toggle::-webkit-details-marker { display: none; }
.pub-findings__toggle::before {
content: '+';
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(60, 100, 50, 0.12);
color: var(--forest);
font-size: 0.9rem;
font-weight: 700;
transition: background 0.2s, transform 0.2s;
flex-shrink: 0;
}
.pub-findings[open] .pub-findings__toggle::before {
content: '−';
background: rgba(60, 100, 50, 0.18);
}
.pub-findings__toggle:hover::before {
background: rgba(60, 100, 50, 0.22);
}
.pub-findings__list {
margin: 0.75rem 0 0.25rem 0.5rem;
padding-left: 1.1rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
border-left: 2px solid rgba(60, 100, 50, 0.2);
padding-left: 1rem;
}
.pub-findings__list li {
font-family: 'Inter', sans-serif;
font-size: 0.88rem;
line-height: 1.65;
color: var(--ink);
list-style: none;
position: relative;
padding-left: 1rem;
}
.pub-findings__list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--sage);
font-size: 0.8rem;
top: 0.05em;
}
/* ── Geriatric Trauma — pub cards with color ── */
#tab-rib-fractures .pub-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
#tab-rib-fractures .pub-item {
border-radius: 10px;
padding: 1.4rem 1.5rem;
border-bottom: none;
}
#tab-rib-fractures .pub-item:nth-child(1) {
background: linear-gradient(135deg, rgba(60,100,50,0.06) 0%, rgba(110,180,90,0.05) 100%);
border: 1px solid rgba(60,100,50,0.14);
}
#tab-rib-fractures .pub-item:nth-child(2) {
background: linear-gradient(135deg, rgba(100,170,230,0.07) 0%, rgba(60,100,50,0.05) 100%);
border: 1px solid rgba(100,170,230,0.18);
}
#tab-rib-fractures .pub-item:nth-child(3) {
background: linear-gradient(135deg, rgba(110,180,90,0.07) 0%, rgba(100,170,230,0.05) 100%);
border: 1px solid rgba(110,180,90,0.18);
}
/* ── Key findings toggle — blue variant for social media tab ── */
.pub-findings--blue .pub-findings__toggle {
color: var(--blue);
}
.pub-findings--blue .pub-findings__toggle::before {
background: rgba(100,170,230,0.15);
color: var(--blue);
}
.pub-findings--blue[open] .pub-findings__toggle::before {
background: rgba(100,170,230,0.25);
}
.pub-findings--blue .pub-findings__toggle:hover::before {
background: rgba(100,170,230,0.3);
}
.pub-findings--blue .pub-findings__list {
border-left-color: rgba(100,170,230,0.3);
}
.pub-findings--blue .pub-findings__list li::before {
color: var(--blue);
}
/* ── Social Media in Medicine — pub cards, blue palette ── */
.sm-pub-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.sm-pub-list .pub-item {
border-radius: 10px;
padding: 1.4rem 1.5rem;
border-bottom: none;
}
.sm-pub-list .pub-item:nth-child(1) {
background: linear-gradient(135deg, rgba(100,170,230,0.09) 0%, rgba(130,190,240,0.05) 100%);
border: 1px solid rgba(100,170,230,0.2);
}
.sm-pub-list .pub-item:nth-child(2) {
background: linear-gradient(135deg, rgba(80,140,210,0.09) 0%, rgba(100,170,230,0.06) 100%);
border: 1px solid rgba(80,140,210,0.2);
}
.sm-pub-list .pub-item:nth-child(3) {
background: linear-gradient(135deg, rgba(60,110,190,0.08) 0%, rgba(100,170,230,0.06) 100%);
border: 1px solid rgba(60,110,190,0.18);
}
.sm-pub-list .pub-item:nth-child(4) {
background: linear-gradient(135deg, rgba(80,60,180,0.07) 0%, rgba(100,170,230,0.05) 100%);
border: 1px solid rgba(100,130,210,0.18);
}
/* ── Social Media tab — blue ── */
#tab-btn-social-media .research-tab__label { color: var(--blue); }
#tab-btn-social-media { border-left-color: rgba(100, 170, 230, 0.45); }
#tab-btn-social-media:hover { border-left-color: rgba(100, 170, 230, 0.75); }
#tab-btn-social-media.active { border-left-color: var(--blue); background: rgba(100, 170, 230, 0.07); }
/* ── Health Equity tab — purple ── */
#tab-btn-health-equity .research-tab__label { color: var(--purple); }
#tab-btn-health-equity { border-left-color: rgba(170, 80, 150, 0.35); }
#tab-btn-health-equity:hover { border-left-color: rgba(170, 80, 150, 0.65); }
#tab-btn-health-equity.active { border-left-color: var(--purple); background: rgba(170, 80, 150, 0.06); }
/* ── Geriatric Trauma tab — forest green ── */
#tab-btn-rib-fractures .research-tab__label { color: var(--forest); }
#tab-btn-rib-fractures { border-left-color: rgba(60, 100, 50, 0.4); }
#tab-btn-rib-fractures:hover { border-left-color: rgba(60, 100, 50, 0.7); }
#tab-btn-rib-fractures.active { border-left-color: var(--forest); background: rgba(60, 100, 50, 0.06); }
/* ── Health Equity panel — top section cohesion ── */
#tab-health-equity {
position: relative;
}
#tab-health-equity::before {
content: '';
display: block;
height: 4px;
width: 100%;
background: linear-gradient(90deg, var(--blue) 0%, var(--purple) 100%);
border-radius: 2px;
margin-bottom: 2rem;
opacity: 0.7;
}
#tab-health-equity .research-intro {
border-left: 3px solid rgba(170, 80, 150, 0.35);
padding-left: 1.25rem;
}
#tab-health-equity .research-pubs-label {
color: var(--purple);
}
#tab-health-equity .pub-item {
background: linear-gradient(135deg, rgba(170, 80, 150,0.05) 0%, rgba(100,170,230,0.04) 100%);
border-radius: 10px;
padding: 1.4rem 1.5rem;
border-bottom: none;
border: 1px solid rgba(170, 80, 150, 0.12);
}
#tab-health-equity .pub-title-link {
border-bottom-color: rgba(170, 80, 150, 0.3);
}
#tab-health-equity .pub-title-link:hover {
color: var(--purple);
border-bottom-color: var(--purple);
}
#tab-health-equity .pub-doi {
color: var(--purple);
border-bottom-color: rgba(170, 80, 150, 0.25);
}
#tab-health-equity .pub-doi:hover { opacity: 0.7; }
/* ── Health Equity "From the Paper" insights block ── */
.eq-insights {
margin-top: 3rem;
}
/* Divider row */
.eq-divider {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2.5rem;
}
.eq-divider__line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(170, 80, 150, 0.25), transparent);
}
.eq-divider__label {
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--purple);
white-space: nowrap;
}
/* Hero pullquote */
.eq-hero-quote {
position: relative;
background: linear-gradient(135deg, #2D0B4E 0%, #4A1580 60%, #6B2FA0 100%);
border-radius: 12px;
padding: 3rem 3.5rem;
margin-bottom: 1.5rem;
overflow: hidden;
}
.eq-hero-quote::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
}
.eq-hero-quote::after {
content: '';
position: absolute;
bottom: -60px;
left: -30px;
width: 220px;
height: 220px;
border-radius: 50%;
background: rgba(255,255,255,0.03);
}
.eq-hero-quote__mark {
font-family: 'Cormorant Garamond', serif;
font-size: 8rem;
line-height: 0.6;
color: rgba(247,179,212,0.35);
display: block;
margin-bottom: 0.5rem;
font-weight: 400;
}
.eq-hero-quote blockquote.eq-hero-quote__text {
font-family: 'Cormorant Garamond', serif;
font-size: 2rem;
font-style: italic;
font-weight: 600;
line-height: 1.55;
color: #FAF0FF;
max-width: 100%;
position: relative;
z-index: 1;
border-left: none;
padding: 0;
margin: 0;
}
.eq-hero-quote__close {
display: block;
text-align: right;
font-family: 'Cormorant Garamond', serif;
font-size: 8rem;
line-height: 0.3;
color: rgba(247,179,212,0.35);
font-weight: 400;
margin-top: 0.25rem;
}
/* Two-up cards */
.eq-card-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 2.5rem;
}
@media (max-width: 600px) {
.eq-card-row { grid-template-columns: 1fr; }
}
.eq-card {
position: relative;
border-radius: 10px;
padding: 1.75rem 1.75rem 1.75rem 1.5rem;
overflow: hidden;
}
.eq-card--deep {
background: #F3E8FF;
border-left: 4px solid var(--purple);
}
.eq-card--mid {
background: #E8F0FF;
border-left: 4px solid var(--blue);
}
.eq-card__mark {
font-family: 'Cormorant Garamond', serif;
font-size: 3.5rem;
line-height: 0.8;
display: block;
margin-bottom: 0.5rem;
font-weight: 400;
}
.eq-card--deep .eq-card__mark { color: rgba(170, 80, 150, 0.3); }
.eq-card--mid .eq-card__mark { color: rgba(100, 170, 230, 0.45); }
.eq-card__text {
font-family: 'Cormorant Garamond', serif;
font-size: 1.15rem;
font-style: italic;
font-weight: 600;
line-height: 1.65;
color: var(--charcoal);
}
/* Key Takeaways */
.eq-takeaways {
background: var(--cream-warm);
border-radius: 12px;
padding: 2rem 2.25rem;
border: 1px solid rgba(170, 80, 150, 0.12);
}
.eq-takeaways__label {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--purple);
margin-bottom: 1.5rem;
}
.eq-takeaway-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem 2.5rem;
}
@media (max-width: 600px) {
.eq-takeaway-grid { grid-template-columns: 1fr; gap: 1.25rem; }
.research-tabs { grid-template-columns: 1fr; }
}
.eq-takeaway {
display: flex;
gap: 0.85rem;
align-items: flex-start;
}
.eq-takeaway__dot {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--purple);
margin-top: 0.55rem;
}
.eq-takeaway__title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
font-weight: 600;
color: var(--charcoal);
margin-bottom: 0.3rem;
line-height: 1.3;
}
.eq-takeaway__body {
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
line-height: 1.65;
color: var(--brown);
}
/* ---------- Per-page accents ---------- */
/* #UnmaskMedicine — forest green signature */
body[data-page="unmask"] .page-intro .eyebrow { color: var(--pink); }
body[data-page="unmask"] .section h2 { color: var(--forest); }
body[data-page="unmask"] .section blockquote {
border-left-color: var(--forest);
background: rgba(60, 100, 50, 0.05);
padding-right: 1.25rem;
border-radius: 0 4px 4px 0;
}
/* ---------- Mobile ---------- */
@media (max-width: 820px) {
.site-footer .container-wide { grid-template-columns: 1fr; gap: 2rem; }
.site-footer .container-wide:last-child { grid-template-columns: 1fr; }
.site-footer .container-wide:first-child > div + div {
border-left: none;
padding-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding-top: 2rem;
}
}
@media (max-width: 720px) {
body { font-size: 16px; }
.site-header { padding: 0.8rem 0; }
.site-header .container-wide { gap: 1rem; justify-content: center; }
.main-nav { gap: 0.9rem 1.1rem; font-size: 0.74rem; justify-content: center; }
.hero { padding: 3rem 0 2rem; }
.hero h1 { font-size: clamp(2rem, 6vw, 3rem); }
.page-intro { padding: 2.5rem 0 1rem; }
.logo-mark { width: 40px; height: 40px; }
.logo-text { font-size: 0.9rem; gap: 0.28rem; }
.logo-text .the { font-size: 0.62rem; }
.logo-text .surgeon { font-size: 0.72rem; letter-spacing: 0.14em; }
.logo-text .listening { font-size: 1.75rem; transform: translateY(4px); }
}
/* ============================================================
Surgeon Spotlight (used on Susan Pitt and other ILLAS profiles)
============================================================ */
.surgeon-spotlight {
display: grid;
grid-template-columns: 320px 1fr;
gap: 2.5rem;
align-items: start;
margin: 1.5rem 0 2.5rem;
}
.surgeon-spotlight__photo {
border-radius: 8px;
overflow: hidden;
background: #f4eee8;
box-shadow: 0 8px 28px rgba(170, 80, 150, 0.12);
}
.surgeon-spotlight__photo img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.surgeon-spotlight__meta {
padding-top: 0.5rem;
}
.surgeon-spotlight__role {
font-family: 'Cormorant Garamond', serif;
font-size: 1.35rem;
line-height: 1.5;
color: var(--ink);
margin: 0 0 1.25rem;
font-style: italic;
}
.surgeon-spotlight__tags {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.surgeon-spotlight__tags li {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.4rem 0.85rem;
background: rgba(230, 50, 150, 0.08);
border: 1px solid rgba(230, 50, 150, 0.25);
color: var(--pink-deep, #c01f7a);
border-radius: 999px;
}
.surgeon-spotlight__link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.7rem 1.25rem;
background: var(--pink, #E63296);
color: #fff;
text-decoration: none;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.92rem;
font-weight: 500;
letter-spacing: 0.02em;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.surgeon-spotlight__link:hover {
transform: translateY(-1px);
background: #c01f7a;
box-shadow: 0 6px 18px rgba(230, 50, 150, 0.3);
}
.surgeon-spotlight__link svg { flex-shrink: 0; }
.surgeon-bio {
max-width: 720px;
margin: 0 auto;
}
.surgeon-bio p {
font-family: 'Cormorant Garamond', serif;
font-size: 1.18rem;
line-height: 1.7;
margin-bottom: 1.4rem;
color: var(--ink);
}
.surgeon-bio p:last-child { margin-bottom: 0; }
.surgeon-quote {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.4rem;
line-height: 1.5;
color: var(--ink);
margin: 2.5rem 0 0;
padding: 1.5rem 0 1.5rem 1.75rem;
border-left: 3px solid var(--pink, #E63296);
background: linear-gradient(90deg, rgba(230, 50, 150, 0.05) 0%, transparent 100%);
}
.surgeon-quote cite {
display: block;
font-size: 0.95rem;
font-style: normal;
color: #777;
margin-top: 0.6rem;
font-family: 'Inter', sans-serif;
letter-spacing: 0.02em;
}
@media (max-width: 720px) {
.surgeon-spotlight {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.surgeon-spotlight__photo {
max-width: 280px;
margin: 0 auto;
}
.surgeon-spotlight__meta {
text-align: center;
}
.surgeon-spotlight__tags { justify-content: center; }
}
/* ============================================================
Surgeon Grid (cards on the #ILookLikeASurgeon page)
============================================================ */
.surgeon-grid-heading {
text-align: center;
margin: 3rem 0 0.5rem;
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: clamp(1.6rem, 2.6vw, 2rem);
color: var(--forest);
letter-spacing: 0.005em;
}
.surgeon-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
margin: 1.5rem 0 3rem;
}
.surgeon-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(170, 80, 150, 0.08);
border-radius: 10px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.surgeon-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(170, 80, 150, 0.12);
border-color: rgba(230, 50, 150, 0.35);
}
.surgeon-card__photo {
aspect-ratio: 1 / 1;
background: linear-gradient(135deg, #f7eef2 0%, #f4e8d8 100%);
overflow: hidden;
}
.surgeon-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.surgeon-card__photo--placeholder {
position: relative;
}
.surgeon-card__photo--placeholder::after {
content: "";
position: absolute;
inset: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
border-radius: 50%;
background: rgba(230, 50, 150, 0.18);
}
.surgeon-card__body {
padding: 1.1rem 1.25rem 1.4rem;
display: flex;
flex-direction: column;
flex: 1;
}
.surgeon-card__body p { flex: 1; }
.surgeon-card__body h3 {
font-family: 'Libre Baskerville', serif;
font-size: 1.1rem;
margin: 0 0 0.35rem;
color: var(--ink);
}
.surgeon-card__body p {
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
color: #666;
margin: 0 0 0.85rem;
line-height: 1.4;
}
.surgeon-card__cta {
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
font-weight: 500;
color: var(--pink, #E63296);
letter-spacing: 0.02em;
}
.surgeon-card--coming {
opacity: 0.55;
pointer-events: none;
cursor: default;
}
.surgeon-card--coming:hover {
transform: none;
box-shadow: none;
border-color: rgba(170, 80, 150, 0.08);
}
/* ════════════════════════════════════════════════════════════
#ILookLikeASurgeon page — story layout & collaborators
════════════════════════════════════════════════════════════ */
/* Photo strip */
.illas-photo-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 2rem 0 2.5rem;
}
.illas-photo-strip__img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: top center;
border-radius: 6px;
display: block;
}
@media (max-width: 600px) {
.illas-photo-strip {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.illas-photo-strip__img { aspect-ratio: 4 / 3; }
}
/* Impact stats strip */
.illas-impact {
display: flex;
margin: 2rem 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(230, 50, 150, 0.15);
}
.illas-impact__stat {
flex: 1;
text-align: center;
padding: 1.5rem 0.75rem;
background: rgba(230, 50, 150, 0.04);
border-right: 1px solid rgba(230, 50, 150, 0.12);
}
.illas-impact__stat--last { border-right: none; }
.illas-impact__num {
display: block;
font-family: 'Cormorant Garamond', serif;
font-size: 2.2rem;
font-weight: 600;
color: var(--terracotta);
line-height: 1.1;
}
.illas-impact__label {
display: block;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink);
opacity: 0.6;
margin-top: 0.4rem;
line-height: 1.4;
}
/* Story disclosure wrapper */
.illas-story-disclosure {
margin: 0 0 0.5rem;
}
.illas-story-disclosure > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 1rem;
padding: 1.1rem 1.4rem;
background: rgba(250, 120, 40, 0.06);
border: 1px solid rgba(250, 120, 40, 0.18);
border-radius: 10px;
transition: background 0.18s;
user-select: none;
}
.illas-story-disclosure > summary::-webkit-details-marker { display: none; }
.illas-story-disclosure > summary::after {
content: '';
width: 8px;
height: 8px;
border-right: 2px solid var(--terracotta);
border-bottom: 2px solid var(--terracotta);
transform: rotate(45deg);
margin-left: auto;
flex-shrink: 0;
transition: transform 0.2s;
margin-top: -3px;
}
.illas-story-disclosure[open] > summary::after {
transform: rotate(-135deg);
margin-top: 3px;
}
.illas-story-disclosure > summary:hover { background: rgba(250, 120, 40, 0.11); }
.illas-story-disclosure__hint {
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--terracotta);
background: rgba(250, 120, 40, 0.12);
padding: 0.25em 0.65em;
border-radius: 3px;
flex-shrink: 0;
}
.illas-story-disclosure__label {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
font-weight: 500;
color: var(--charcoal);
}
/* Chapter layout */
.illas-story { padding: 1.75rem 0 0.5rem; }
.illas-chapter {
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
}
.illas-chapter__marker {
display: flex;
flex-direction: column;
align-items: center;
}
.illas-chapter__num {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--terracotta);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 0.7rem;
flex-shrink: 0;
letter-spacing: 0.02em;
}
.illas-chapter__line {
width: 2px;
flex: 1;
min-height: 1.5rem;
background: linear-gradient(180deg, rgba(250,120,40,0.35) 0%, rgba(250,120,40,0.04) 100%);
margin-top: 0.4rem;
}
.illas-chapter__title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.3rem;
font-weight: 500;
color: var(--terracotta);
margin: 0 0 0.55rem;
line-height: 1.2;
}
.illas-chapter__content p { margin-bottom: 0.75rem; }
.illas-chapter--last { margin-bottom: 0; }
/* Pull quote */
.illas-pull {
font-family: 'Cormorant Garamond', serif;
font-size: 1.15rem;
font-style: italic;
font-weight: 500;
color: var(--ink);
border-left: 3px solid var(--terracotta);
padding: 0.5rem 0 0.5rem 1.1rem;
margin: 0.75rem 0 0.5rem;
line-height: 1.6;
}
/* Blog posts — featured style */
.illas-blogs-heading {
font-family: 'Cormorant Garamond', serif;
font-size: 1.85rem;
font-weight: 500;
color: var(--charcoal);
margin-bottom: 0.6rem;
}
.illas-blogs-intro {
font-size: 0.95rem;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
color: var(--ink);
line-height: 1.65;
margin-bottom: 1.75rem;
max-width: 660px;
}
.illas-blog-list--featured {
background: rgba(230, 50, 150, 0.03);
border: 1px solid rgba(230, 50, 150, 0.1);
border-radius: 12px;
padding: 0.5rem 1.5rem;
}
.illas-blog-list--featured li {
padding: 1rem 0;
border-bottom: 1px solid rgba(230, 50, 150, 0.1);
}
.illas-blog-list--featured li:last-child { border-bottom: none; }
.illas-blog-list--featured a {
font-size: 0.97rem;
font-weight: 500;
}
.illas-blog-list--featured .ilook-blog-author {
display: block;
margin-top: 0.2rem;
font-size: 0.78rem;
}
.illas-blog-list--featured .ilook-blog-note {
padding: 0.75rem 0 0.25rem;
font-size: 0.8rem;
opacity: 0.6;
list-style: none;
}
/* Collaborator strips */
.illas-collab-heading {
font-family: 'Cormorant Garamond', serif;
font-size: 1.85rem;
font-weight: 500;
color: var(--charcoal);
margin-bottom: 0.4rem;
}
.illas-collab-subhead {
font-family: 'Cormorant Garamond', serif;
font-size: 1rem;
font-style: italic;
color: var(--ink);
opacity: 0.75;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.illas-collaborators { display: flex; flex-direction: column; gap: 0.9rem; }
.illas-collab {
display: grid;
grid-template-columns: 68px 1fr;
gap: 1.4rem;
align-items: start;
background: rgba(230,50,150,0.04);
border: 1px solid rgba(230,50,150,0.12);
border-radius: 12px;
padding: 1.35rem 1.5rem;
text-decoration: none;
color: inherit;
transition: background 0.18s, border-color 0.18s;
}
.illas-collab:hover {
background: rgba(230,50,150,0.08);
border-color: rgba(230,50,150,0.22);
}
.illas-collab__photo {
width: 68px;
height: 68px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
margin-top: 0.1rem;
}
.illas-collab__name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem;
font-weight: 500;
color: var(--charcoal);
margin: 0 0 0.15rem;
}
.illas-collab__role {
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--ink);
opacity: 0.55;
margin-bottom: 0.65rem;
}
.illas-collab__desc {
font-size: 0.88rem;
line-height: 1.65;
color: var(--ink);
margin-bottom: 0.6rem;
}
.illas-collab__cta {
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pink);
font-weight: 500;
}
@media (max-width: 600px) {
.illas-impact { flex-wrap: wrap; }
.illas-impact__stat { min-width: 48%; border-bottom: 1px solid rgba(230,50,150,0.12); }
.illas-chapter { grid-template-columns: 2rem 1fr; gap: 1rem; }
.illas-collab { grid-template-columns: 1fr; }
.illas-collab__photo { width: 56px; height: 56px; }
}
/* ── Social Media 5th paper card ── */
.sm-pub-list .pub-item:nth-child(5) {
background: linear-gradient(135deg, rgba(100,170,230,0.07) 0%, rgba(250,120,40,0.05) 100%);
border: 1px solid rgba(100,170,230,0.18);
}
/* ── Surgical Identity tab — terracotta ── */
#tab-btn-surgical-identity .research-tab__label { color: var(--terracotta); }
#tab-btn-surgical-identity { border-left-color: rgba(250, 120, 40, 0.4); }
#tab-btn-surgical-identity:hover { border-left-color: rgba(250, 120, 40, 0.7); }
#tab-btn-surgical-identity.active { border-left-color: var(--terracotta); background: rgba(250, 120, 40, 0.07); }
/* ── Surgical Identity panel ── */
#tab-surgical-identity {
position: relative;
}
#tab-surgical-identity::before {
content: '';
display: block;
height: 4px;
width: 100%;
background: linear-gradient(90deg, var(--terracotta) 0%, var(--pink) 100%);
border-radius: 2px;
margin-bottom: 2rem;
opacity: 0.65;
}
#tab-surgical-identity .research-intro {
border-left: 3px solid rgba(250, 120, 40, 0.4);
padding-left: 1.25rem;
}
#tab-surgical-identity .research-pubs-label {
color: var(--terracotta);
}
#tab-surgical-identity .pub-item {
background: linear-gradient(135deg, rgba(250,120,40,0.07) 0%, rgba(230,50,150,0.04) 100%);
border-radius: 10px;
padding: 1.4rem 1.5rem;
border-bottom: none;
border: 1px solid rgba(250, 120, 40, 0.18);
}
#tab-surgical-identity .pub-item:nth-child(2) {
background: linear-gradient(135deg, rgba(230,50,150,0.06) 0%, rgba(250,120,40,0.04) 100%);
border: 1px solid rgba(230, 50, 150, 0.15);
}
#tab-surgical-identity .pub-title-link:hover {
color: var(--terracotta);
}
#tab-surgical-identity .pub-doi {
color: var(--terracotta);
border-bottom-color: rgba(250, 120, 40, 0.3);
}
#tab-surgical-identity .pub-doi:hover { opacity: 0.7; }
/* ── Terracotta pub-findings variant ── */
.pub-findings--terracotta .pub-findings__toggle {
color: var(--terracotta);
}
.pub-findings--terracotta .pub-findings__toggle::before {
background: rgba(250, 120, 40, 0.12);
color: var(--terracotta);
}
.pub-findings--terracotta[open] .pub-findings__toggle::before {
content: '\2212';
}
.pub-findings--terracotta .pub-findings__toggle:hover::before {
background: rgba(250, 120, 40, 0.22);
}
.pub-findings--terracotta .pub-findings__list {
border-left-color: rgba(250, 120, 40, 0.3);
}
.pub-findings--terracotta .pub-findings__list li::before {
color: var(--terracotta);
}
/* ── Surgical Identity artistic block (si-*) ── */
.si-insights {
margin-top: 3rem;
}
/* Hero pullquote */
.si-hero-quote {
position: relative;
background: linear-gradient(135deg, #5A1A00 0%, #A04010 55%, #D06030 100%);
border-radius: 12px;
padding: 3rem 3.5rem;
margin-bottom: 1.75rem;
overflow: hidden;
}
.si-hero-quote::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(255,255,255,0.05);
}
.si-hero-quote::after {
content: '';
position: absolute;
bottom: -60px;
left: -30px;
width: 220px;
height: 220px;
border-radius: 50%;
background: rgba(255,255,255,0.03);
}
.si-hero-quote__bg {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 10% 50%, rgba(255,180,100,0.15) 0%, transparent 60%);
pointer-events: none;
}
.si-hero-quote__mark {
font-family: 'Cormorant Garamond', serif;
font-size: 8rem;
line-height: 0.6;
color: rgba(255, 200, 130, 0.35);
display: block;
margin-bottom: 0.5rem;
font-weight: 400;
}
.si-hero-quote blockquote.si-hero-quote__text {
font-family: 'Cormorant Garamond', serif;
font-size: 2rem;
font-style: italic;
font-weight: 600;
line-height: 1.55;
color: #FFF5EC;
position: relative;
z-index: 1;
border-left: none;
padding: 0;
margin: 0;
}
/* Impact stat row */
.si-stats {
display: flex;
gap: 1rem;
justify-content: center;
margin: 0 0 1.75rem;
flex-wrap: wrap;
}
.si-stat {
text-align: center;
background: linear-gradient(135deg, rgba(250,120,40,0.09) 0%, rgba(250,120,40,0.03) 100%);
border: 1px solid rgba(250, 120, 40, 0.22);
border-radius: 12px;
padding: 1.25rem 1.75rem;
flex: 1;
min-width: 130px;
}
.si-stat__num {
display: block;
font-family: 'Cormorant Garamond', serif;
font-size: 2.6rem;
font-weight: 600;
color: var(--terracotta);
line-height: 1.1;
}
.si-stat__label {
display: block;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink);
opacity: 0.65;
margin-top: 0.4rem;
line-height: 1.4;
}
/* Supporting quote card */
.si-quote-card {
position: relative;
border-left: 3px solid var(--terracotta);
padding: 1rem 1.25rem 1rem 2rem;
background: rgba(250, 120, 40, 0.05);
border-radius: 0 8px 8px 0;
margin-bottom: 1.5rem;
}
.si-quote-card__mark {
font-family: 'Cormorant Garamond', serif;
font-size: 3rem;
line-height: 0.5;
color: var(--terracotta);
opacity: 0.3;
position: absolute;
top: 1.2rem;
left: 0.3rem;
}
.si-quote-card__text {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
font-style: italic;
font-weight: 500;
color: var(--ink);
line-height: 1.6;
}
@media (max-width: 600px) {
.si-stats { flex-direction: column; }
.si-hero-quote { padding: 2rem 1.5rem; }
.si-hero-quote blockquote.si-hero-quote__text { font-size: 1.5rem; }
}
/* ---------- Writing & Conversation section ---------- */
.home-invitations-section { margin-top: 0.5rem; }
.home-invitations-section__sub {
text-align: center;
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-style: italic;
color: var(--brown-soft);
margin-bottom: 1.75rem;
margin-top: 0.25rem;
}
/* ---------- Home page invitation grid ---------- */
.home-invitations {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1.1rem;
margin-top: 0;
}
.home-invite {
display: flex;
flex-direction: column;
background: rgba(255,255,255,0.65);
border: 1px solid rgba(107,85,69,0.10);
border-radius: 12px;
text-decoration: none;
color: inherit;
overflow: hidden;
transition: box-shadow 0.2s, transform 0.2s;
}
.home-invite:hover {
box-shadow: 0 6px 20px rgba(107,85,69,0.11);
transform: translateY(-2px);
}
/* Card illustration area */
.home-invite__img {
width: 100%;
height: 128px;
overflow: hidden;
flex-shrink: 0;
position: relative;
}
.home-invite__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.home-invite:hover .home-invite__img img { transform: scale(1.04); }
/* Per-card tinted placeholder backgrounds (shown when image is absent) */
.home-invite__img--pink { background: linear-gradient(135deg, rgba(230,50,150,0.12) 0%, rgba(247,179,212,0.18) 100%); }
.home-invite__img--rose { background: linear-gradient(135deg, rgba(184,38,122,0.12) 0%, rgba(230,50,150,0.18) 100%); }
.home-invite__img--forest { background: linear-gradient(135deg, rgba(60,100,50,0.12) 0%, rgba(106,175,176,0.16) 100%); }
.home-invite__img--terracotta{ background: linear-gradient(135deg, rgba(250,120,40,0.13) 0%, rgba(255,200,40,0.14) 100%); }
.home-invite__img--blue { background: linear-gradient(135deg, rgba(100,170,230,0.14) 0%, rgba(196,174,224,0.16) 100%); }
.home-invite__img--brown { background: linear-gradient(135deg, rgba(130,85,50,0.12) 0%, rgba(201,150,58,0.16) 100%); }
/* Card text body */
.home-invite__body {
padding: 1.1rem 1.2rem 1.2rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
flex: 1;
}
.home-invite__label {
font-family: 'Inter', sans-serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-invite__desc {
font-family: 'Cormorant Garamond', serif;
font-size: 1rem;
font-style: italic;
color: var(--ink);
line-height: 1.5;
margin: 0;
flex: 1;
}
.home-invite__cta {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 500;
color: var(--brown-soft);
margin-top: 0.2rem;
}
.home-invite:hover .home-invite__cta { color: var(--ink); }
@media (max-width: 700px) {
.home-invitations { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.home-invitations { grid-template-columns: 1fr; }
}
/* ---------- Thesis blockquote (About page) ---------- */
.blockquote--thesis {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.55rem, 3vw, 2rem);
font-style: italic;
font-weight: 600;
color: var(--terracotta);
border-left: none;
padding: 1.25rem 0 1.25rem 0;
margin: 2rem 0;
text-align: center;
letter-spacing: -0.01em;
line-height: 1.25;
position: relative;
}
.blockquote--thesis::before,
.blockquote--thesis::after {
content: '';
display: block;
width: 3rem;
height: 1px;
background: var(--terracotta);
opacity: 0.35;
margin: 0 auto;
}
.blockquote--thesis::before { margin-bottom: 1rem; }
.blockquote--thesis::after { margin-top: 1rem; }
/* Header social icons: full set in two tidy rows (Oct 2026) */
.header-social {
display: grid;
grid-template-columns: repeat(3, 18px);
gap: 0.6rem 0.8rem;
justify-content: end;
justify-items: center;
}
/* About: portrait at the top, under the heading (Oct 2026) */
.about-portrait--intro {
float: none;
width: 100%;
max-width: 340px;
margin: 1.75rem 0 0;
}
@media (max-width: 600px) {
.about-portrait--intro { max-width: 100%; }
}
/* Home card images: keep the foreground objects in frame (Oct 2026) */
.home-invite__img img[src*="card-writing"],
.home-invite__img img[src*="card-research"],
.home-invite__img img[src*="card-resources"] { object-position: 22% 60%; }
/* ---------- #UnmaskMedicine: simplified invitation page (Oct 2026) ---------- */
.unmask-container { max-width: 760px; }
.unmask-page { padding-top: 4.5rem; padding-bottom: 5rem; }
.unmask-declaration {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: clamp(2rem, 4.6vw, 3.1rem);
line-height: 1.22;
text-align: center;
color: var(--forest);
margin: 0 auto 2.25rem;
max-width: none;
}
.unmask-divider { max-width: 220px; margin: 0 auto 2.75rem; }
.unmask-premise {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.3rem, 2.4vw, 1.6rem);
line-height: 1.5;
text-align: center;
color: var(--brown);
max-width: 600px;
margin: 0 auto 3.25rem;
}
.unmask-body { max-width: 640px; margin: 0 auto; }
.unmask-body p { font-size: 1.08rem; line-height: 1.85; margin-bottom: 1.5rem; }
.unmask-invite {
margin: 4.5rem auto 0;
padding: 3.25rem 2.75rem 3rem;
max-width: 700px;
text-align: center;
background: radial-gradient(ellipse at 20% 15%, rgba(106, 175, 176, 0.16) 0%, transparent 60%),
radial-gradient(ellipse at 85% 90%, rgba(196, 174, 224, 0.16) 0%, transparent 55%),
var(--cream-warm);
border: 1px solid rgba(107, 85, 69, 0.14);
border-top: 3px solid var(--forest);
border-radius: 10px;
}
.unmask-invite__eyebrow { color: var(--forest); margin-bottom: 0.6rem; }
.unmask-invite__heading {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.9rem, 3.6vw, 2.5rem);
margin: 0 0 1.5rem;
color: var(--ink, #2A251F);
}
.unmask-invite p { font-size: 1.05rem; line-height: 1.8; margin: 0 auto 1.2rem; max-width: 560px; }
.unmask-invite__call {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 1.3rem !important;
color: var(--brown);
margin-top: 1.75rem !important;
}
.unmask-invite__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.1rem;
margin-top: 2.25rem;
}
.unmask-invite__primary { margin: 0 auto; }
.unmask-invite__secondary {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
letter-spacing: 0.02em;
color: var(--brown-soft);
text-decoration: none;
border-bottom: 1px solid rgba(107, 85, 69, 0.3);
padding-bottom: 2px;
transition: color 0.2s, border-color 0.2s;
}
.unmask-invite__secondary:hover { color: var(--forest); border-color: var(--forest); }
@media (max-width: 600px) {
.unmask-page { padding-top: 3rem; padding-bottom: 3.5rem; }
.unmask-invite { padding: 2.5rem 1.4rem 2.25rem; margin-top: 3.5rem; }
}
/* About: intro photo on the right; reflection box with nature photo */
.about-intro-right .about-portrait--intro { margin: 0 0 0 auto; max-width: 380px; }
.about-reflection { display: grid; grid-template-columns: 220px 1fr; gap: 1.75rem; align-items: stretch; margin: 3rem 0 1rem; padding: 1.5rem; border-left: 3px solid var(--pink); background: rgba(230, 50, 150, 0.04); border-radius: 0 8px 8px 0; }
.about-reflection__img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; border-radius: 6px; display: block; }
.about-reflection__text p { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-style: italic; line-height: 1.7; color: var(--brown); margin: 0; }
@media (max-width: 768px) {
.about-intro-right .about-portrait--intro { margin: 0; max-width: 100%; }
.about-reflection { grid-template-columns: 1fr; gap: 1.25rem; }
.about-reflection__img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}
/* Tree photo with overlaid questions */
.about-reflection__fig { position: relative; margin: 0; border-radius: 6px; overflow: hidden; min-height: 260px; }
.about-reflection__fig .about-reflection__img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border-radius: 0; }
.about-reflection__fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 22, 14, 0.82) 0%, rgba(28, 22, 14, 0.45) 40%, rgba(28, 22, 14, 0) 70%); }
.about-reflection__quote { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.1rem 1.1rem 1.2rem; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.2rem; line-height: 1.4; color: #fffaf2; text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
@media (max-width: 768px) {
.about-reflection__fig { min-height: 0; aspect-ratio: 4 / 3; }
.about-reflection__quote { font-size: 1.3rem; }
.about-reflection__fig::after { background: linear-gradient(to top, rgba(28, 22, 14, 0.85) 0%, rgba(28, 22, 14, 0.55) 55%, rgba(28, 22, 14, 0.15) 100%); }
}
/* My Path map */
.path-map-wrap { margin: 0 0 1.75rem; }
.path-map { width: 100%; height: auto; display: block; }
.path-map text { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: 26px; fill: #825532; paint-order: stroke; stroke: #EDE3D0; stroke-width: 5px; stroke-linejoin: round; }
@media (max-width: 600px) { .path-map text { font-size: 36px; stroke-width: 7px; } }
.path-map-img { width: 100%; height: auto; display: block; border-radius: 8px; }
/* My Path — always open */
.my-path { margin: 2.5rem 0; }
.my-path h2 { margin-bottom: 1.25rem; }
.my-path .belief-list li { color: var(--pink); }
.path-map-caption { margin-top: 0.75rem; text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.15rem; color: var(--brown); }
.my-path__stops { margin-top: 1.5rem; }
.my-path__stops .belief-list li, .my-path__stops .long-bio__body > p { color: var(--pink) !important; }
.learner-path-img { max-width: 380px; margin: 1.5rem auto; }
.path-map-wrap { position: relative; }
.path-map-quote { position: absolute; left: 3%; bottom: 4%; width: 25%; margin: 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500 !important; font-size: clamp(0.8rem, 1.3vw, 1.05rem) !important; line-height: 1.3 !important; color: var(--brown) !important; }
@media (max-width: 600px) { .path-map-quote { position: static; width: auto; margin: 0.75rem 0 0; text-align: center; font-size: 1.1rem !important; } }
.my-path__lede { font-size: 1.15rem; margin: 0 0 1.25rem; }
/* ===== Threads of My Work — alternating editorial layout ===== */
.threads { position: relative; width: min(1120px, calc(100vw - 2.5rem)); margin: 4.5rem 0 4rem calc(50% - min(560px, calc(50vw - 1.25rem))); }
.threads__intro { max-width: 680px; margin: 0 auto 4.5rem; text-align: center; }
.threads__intro h2 { margin-bottom: 1.25rem; }
.threads__intro p { font-size: 1.15rem; line-height: 1.75; }
.threads__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.threads__row:nth-of-type(even) .threads__media { order: 2; }
.threads__media { margin: 0; }
.threads__media img, .threads__placeholder { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.threads__placeholder { display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(130, 85, 50, 0.35); }
.threads__placeholder span { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: rgba(42, 37, 31, 0.55); }
.threads__text { max-width: 440px; }
.threads__row:nth-of-type(even) .threads__text { justify-self: end; }
.threads__num { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1; font-weight: 400; margin-bottom: 0.75rem; }
.threads__text h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-style: italic; font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--charcoal); margin: 0 0 1.25rem; line-height: 1.2; }
.threads__text p { font-size: 1.05rem; line-height: 1.8; margin: 0 0 1.25rem; }
.threads__links { font-size: 0.9rem !important; letter-spacing: 0.02em; }
.threads__links a { color: var(--brown); text-decoration: none; border-bottom: 1px solid rgba(130, 85, 50, 0.3); padding-bottom: 1px; }
.threads__links a:hover { border-bottom-color: currentColor; }
.threads__dot { color: rgba(130, 85, 50, 0.45); margin: 0 0.35rem; }
.threads__row--pink .threads__num { color: #e63296; } .threads__row--pink .threads__placeholder { background: rgba(230, 50, 150, 0.12); } .threads__row--pink .threads__links a:hover { color: #e63296; }
.threads__row--orange .threads__num { color: #fa7828; } .threads__row--orange .threads__placeholder { background: rgba(250, 120, 40, 0.14); } .threads__row--orange .threads__links a:hover { color: #fa7828; }
.threads__row--blue .threads__num { color: #64aae6; } .threads__row--blue .threads__placeholder { background: rgba(100, 170, 230, 0.16); } .threads__row--blue .threads__links a:hover { color: #3f86c4; }
.threads__row--green .threads__num { color: #6eb45a; } .threads__row--green .threads__placeholder { background: rgba(110, 180, 90, 0.15); } .threads__row--green .threads__links a:hover { color: #3c6432; }
.threads__row--purple .threads__num { color: #aa5096; } .threads__row--purple .threads__placeholder { background: rgba(170, 80, 150, 0.13); } .threads__row--purple .threads__links a:hover { color: #aa5096; }
@media (max-width: 760px) {
.threads { width: auto; margin: 3.5rem 0; }
.threads__intro { margin-bottom: 3rem; text-align: left; }
.threads__row { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3.5rem; }
.threads__row:nth-of-type(even) .threads__media { order: 0; }
.threads__row:nth-of-type(even) .threads__text { justify-self: start; }
.threads__media img, .threads__placeholder { aspect-ratio: 4 / 3; }
.threads__text { max-width: none; }
}
/* Archival pull quote (Roots of My Advocacy) */
.archive-quote { margin: 2rem 0; padding: 1.5rem 1.75rem; background: #faf6ee; border: 1px solid rgba(130,85,50,0.18); border-left: 3px solid var(--pink); border-radius: 0 6px 6px 0; }
.archive-quote blockquote { margin: 0 0 0.85rem; padding: 0; border: 0; background: none; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.35rem; line-height: 1.45; color: var(--charcoal); }
.archive-quote figcaption { font-size: 0.9rem; line-height: 1.6; color: var(--brown-soft); }
.archive-quote figcaption a { color: var(--brown); border-bottom: 1px solid rgba(130,85,50,0.3); text-decoration: none; white-space: nowrap; }
.archive-quote--with-thumb { display: grid; grid-template-columns: 150px 1fr; gap: 1.5rem; align-items: center; }
.archive-quote__thumb img { display: block; width: 100%; border-radius: 3px; box-shadow: 0 2px 10px rgba(42,37,31,0.18); transition: transform .2s; }
.archive-quote__thumb:hover img { transform: translateY(-2px); }
@media (max-width: 600px) { .archive-quote--with-thumb { grid-template-columns: 1fr; } .archive-quote__thumb { max-width: 200px; } }
/* Connect cards — inline SVG icons, 7 platforms */
.connect-grid { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.connect-grid .connect-card { flex: 0 1 calc((100% - 4.5rem) / 7); min-width: 92px; padding-left: 0.4rem; padding-right: 0.4rem; }
@media (max-width: 700px) { .connect-grid .connect-card { flex-basis: calc((100% - 1.5rem) / 3); } }
.connect-card svg.connect-icon { width: 1.8rem; height: 1.8rem; display: block; margin: 0 auto 0.6rem; color: var(--pink); }
.books-hero { margin: 0 0 2rem; }
.books-hero img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 60%; border-radius: 8px; }
@media (max-width: 600px) { .books-hero img { aspect-ratio: 4 / 3; } }
/* Resources branch cards with banner image */
.branch-card:has(.branch-card__img) { flex-wrap: wrap; }
.branch-card__img { display: block; flex: 0 0 calc(100% + 3.75rem); width: calc(100% + 3.75rem); margin: -1.5rem -1.75rem 0.25rem -2rem; aspect-ratio: 3 / 1; object-fit: cover; object-position: center 55%; }
@media (max-width: 600px) { .branch-card__img { aspect-ratio: 2 / 1; } }
/* Threads of My Work inside a dropdown */
.threads-drop .threads { width: auto; margin: 0; padding: 2rem 2rem 1rem; }
.threads-drop .threads__intro { margin-bottom: 3rem; }
.threads-drop .threads__row { gap: 2rem; margin-bottom: 3.5rem; }
@media (max-width: 760px) { .threads-drop .threads { padding: 1.5rem 1.25rem 0.5rem; } }
/* Resources accents v2 */
.branch-card--books::before { background: var(--forest); }
.branch-card--books .branch-eyebrow, .branch-card--books .branch-arrow { color: var(--forest); }
.branch-card--books:hover .branch-arrow { border-bottom-color: var(--forest); }
.branch-card--books:hover { border-color: rgba(60, 100, 50, 0.35); }
.branch-card--podcasts::before { background: var(--brown); }
.branch-card--podcasts .branch-eyebrow, .branch-card--podcasts .branch-arrow { color: var(--brown); }
.branch-card--podcasts:hover .branch-arrow { border-bottom-color: var(--brown); }
.branch-card--podcasts:hover { border-color: rgba(130, 85, 50, 0.35); }
/* Coaching branch + page */
.branch-card--coaching::before { background: var(--blue); }
.branch-card--coaching .branch-eyebrow, .branch-card--coaching .branch-arrow { color: #3f86c4; }
.branch-card--coaching:hover .branch-arrow { border-bottom-color: #3f86c4; }
.branch-card--coaching:hover { border-color: rgba(100, 170, 230, 0.45); }
.coaching-note { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.15rem; color: var(--brown); margin-bottom: 2rem; }
.society[data-no-logo] { display: block; }
.society[data-no-logo] .author { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--brown-soft); font-weight: 400; }
/* Resources accents v3 */
.branch-card--podcasts::before { background: #3f78b8; }
.branch-card--podcasts .branch-eyebrow, .branch-card--podcasts .branch-arrow { color: #3f78b8; }
.branch-card--podcasts:hover .branch-arrow { border-bottom-color: #3f78b8; }
.branch-card--podcasts:hover { border-color: rgba(63, 120, 184, 0.4); }
.branch-card--coaching::before { background: var(--terracotta); }
.branch-card--coaching .branch-eyebrow, .branch-card--coaching .branch-arrow { color: #d9601a; }
.branch-card--coaching:hover .branch-arrow { border-bottom-color: #d9601a; }
.branch-card--coaching:hover { border-color: rgba(250, 120, 40, 0.4); }
.coaching-personal { border-left: 3px solid var(--terracotta); background: rgba(250,120,40,0.05); padding: 1.25rem 1.5rem; border-radius: 0 6px 6px 0; margin: 0 0 1.75rem; }
.coaching-personal p { margin: 0; font-size: 1.05rem; line-height: 1.75; }
.society-logo--app img { border-radius: 22%; object-fit: cover; }
.section-motif { flex: 0 0 40px; width: 40px; height: 40px; margin-right: 0.25rem; }
@media (max-width: 600px) { .section-motif { flex-basis: 32px; width: 32px; height: 32px; } }
/* motif-matched section colors */
body[data-page="societies"] .society-section:has(img[src*="motif-core"]) > summary > h2 { border-bottom-color: #64aae6 !important; }
body[data-page="societies"] .society-section:has(img[src*="motif-core"]) > summary::after { border-color: #64aae6 !important; }
body[data-page="societies"] .society-section:has(img[src*="motif-trauma"]) > summary > h2 { border-bottom-color: #fa7828 !important; }
body[data-page="societies"] .society-section:has(img[src*="motif-trauma"]) > summary::after { border-color: #fa7828 !important; }
body[data-page="societies"] .society-section:has(img[src*="motif-identity"]) > summary > h2 { border-bottom-color: #e63296 !important; }
body[data-page="societies"] .society-section:has(img[src*="motif-identity"]) > summary::after { border-color: #e63296 !important; }
body[data-page="societies"] .society-section:has(img[src*="motif-students"]) > summary > h2 { border-bottom-color: #6eb45a !important; }
body[data-page="societies"] .society-section:has(img[src*="motif-students"]) > summary::after { border-color: #6eb45a !important; }
body[data-page="societies"] .society-section:has(img[src*="motif-patients"]) > summary > h2 { border-bottom-color: #e8b020 !important; }
body[data-page="societies"] .society-section:has(img[src*="motif-patients"]) > summary::after { border-color: #e8b020 !important; }
body[data-page="societies"] .society-section:has(img[src*="motif-size"]) > summary > h2 { border-bottom-color: #aa5096 !important; }
body[data-page="societies"] .society-section:has(img[src*="motif-size"]) > summary::after { border-color: #aa5096 !important; }
body[data-page="societies"] .society-section:has(img[src*="motif-apps"]) > summary > h2 { border-bottom-color: #4fa3a5 !important; }
body[data-page="societies"] .society-section:has(img[src*="motif-apps"]) > summary::after { border-color: #4fa3a5 !important; }
/* Societies: paying-it-forward block */
.pay-forward {
margin: 3rem 0 2.5rem;
padding: 1.75rem 2rem 1.5rem;
background: rgba(0,0,0,0.035);
border-left: 3px solid var(--pink, #d1478f);
border-radius: 6px;
}
.pay-forward > p { margin: 0 0 1rem; }
.pay-forward .pay-forward__quote {
margin: 0;
padding: 1rem 0 0;
background: none;
border: none;
border-top: 1px solid rgba(0,0,0,0.08);
border-radius: 0;
}
@media (max-width: 600px) {
.pay-forward { padding: 1.25rem 1.1rem 1.1rem; }
}
.pay-forward > p.pay-forward__kicker {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.45rem;
line-height: 1.35;
color: var(--pink);
margin: 0 0 1rem;
}
/* pay-forward purple accent */
body[data-page="societies"] .pay-forward { border-left-color: var(--purple); background: rgba(170, 80, 150, 0.06); }
body[data-page="societies"] .pay-forward p.pay-forward__kicker { color: var(--purple); }
body[data-page="societies"] .pay-forward .inline-link { color: var(--purple); border-bottom-color: rgba(170, 80, 150, 0.45); }
body[data-page="societies"] .pay-forward .pay-forward__quote { border-top-color: rgba(170, 80, 150, 0.2); }
/* societies purple eyebrow + links */
body[data-page="societies"] .page-intro .eyebrow { color: var(--purple); }
body[data-page="societies"] main .inline-link { color: var(--purple); border-bottom-color: rgba(170, 80, 150, 0.45); }
/* resource page accents: eyebrow, active tab, links */
body[data-page="books"] { --page-accent: var(--forest); --page-accent-soft: rgba(60, 100, 50, 0.45); }
body[data-page="coaching-resources"] { --page-accent: var(--terracotta); --page-accent-soft: rgba(250, 120, 40, 0.45); }
body[data-page="podcasts"] { --page-accent: #3f78b8; --page-accent-soft: rgba(63, 120, 184, 0.45); }
body[data-page="societies"] { --page-accent: var(--purple); --page-accent-soft: rgba(170, 80, 150, 0.45); }
body[data-page="books"] .page-intro .eyebrow,
body[data-page="coaching-resources"] .page-intro .eyebrow,
body[data-page="podcasts"] .page-intro .eyebrow,
body[data-page="societies"] .page-intro .eyebrow { color: var(--page-accent); }
body[data-page="books"] .resource-toggle a.active,
body[data-page="coaching-resources"] .resource-toggle a.active,
body[data-page="podcasts"] .resource-toggle a.active,
body[data-page="societies"] .resource-toggle a.active { background: var(--page-accent); }
body[data-page="books"] main .inline-link,
body[data-page="coaching-resources"] main .inline-link,
body[data-page="podcasts"] main .inline-link,
body[data-page="societies"] main .inline-link { color: var(--page-accent); border-bottom-color: var(--page-accent-soft); }
body[data-page] .resource-toggle a.active { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
/* books rock colors */
.section-motif--rock { object-fit: contain; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.18)); }
body[data-page="books"] .society-section:has(img[src*="rock-tigers-eye"]) > summary > h2 { border-bottom-color: #825532 !important; }
body[data-page="books"] .society-section:has(img[src*="rock-tigers-eye"]) > summary::after { border-color: #825532 !important; }
body[data-page="books"] .society-section:has(img[src*="rock-rhodonite"]) > summary > h2 { border-bottom-color: #e63296 !important; }
body[data-page="books"] .society-section:has(img[src*="rock-rhodonite"]) > summary::after { border-color: #e63296 !important; }
body[data-page="books"] .society-section:has(img[src*="rock-citrine"]) > summary > h2 { border-bottom-color: #fa7828 !important; }
body[data-page="books"] .society-section:has(img[src*="rock-citrine"]) > summary::after { border-color: #fa7828 !important; }
body[data-page="books"] .society-section:has(img[src*="rock-peacock-ore"]) > summary > h2 { border-bottom-color: #3f78b8 !important; }
body[data-page="books"] .society-section:has(img[src*="rock-peacock-ore"]) > summary::after { border-color: #3f78b8 !important; }
body[data-page="books"] .society-section:has(img[src*="rock-aventurine"]) > summary > h2 { border-bottom-color: #6eb45a !important; }
body[data-page="books"] .society-section:has(img[src*="rock-aventurine"]) > summary::after { border-color: #6eb45a !important; }
body[data-page="books"] .society-section:has(img[src*="rock-amethyst"]) > summary > h2 { border-bottom-color: #aa5096 !important; }
body[data-page="books"] .society-section:has(img[src*="rock-amethyst"]) > summary::after { border-color: #aa5096 !important; }
body[data-page="books"] .society-section:has(img[src*="rock-yellow-howlite"]) > summary > h2 { border-bottom-color: #e8b020 !important; }
body[data-page="books"] .society-section:has(img[src*="rock-yellow-howlite"]) > summary::after { border-color: #e8b020 !important; }
body[data-page="books"] .society-section:has(img[src*="rock-green-dalmatian"]) > summary > h2 { border-bottom-color: #3c6432 !important; }
body[data-page="books"] .society-section:has(img[src*="rock-green-dalmatian"]) > summary::after { border-color: #3c6432 !important; }
body[data-page="books"] .society-section:has(img[src*="rock-unakite"]) > summary > h2 { border-bottom-color: #c8735a !important; }
body[data-page="books"] .society-section:has(img[src*="rock-unakite"]) > summary::after { border-color: #c8735a !important; }
body[data-page="books"] .society-section:has(img[src*="rock-pink-dalmatian"]) > summary > h2 { border-bottom-color: #d4687a !important; }
body[data-page="books"] .society-section:has(img[src*="rock-pink-dalmatian"]) > summary::after { border-color: #d4687a !important; }
/* end books rock colors */
/* hero + header polish */
.hero h1 { line-height: 1.12; }
.hero h1 .shaped-by { white-space: nowrap; display: inline-block; padding: 0 0.08em; }
@media (min-width: 721px) {
.hero-inner { align-items: center; }
.hero h1 em:first-child, .hero h1 .shaped-by { display: block; }
.hero h1 .shaped-by { margin: 0.05em 0 0.08em 0.6em; }
}
@media (max-width: 720px) {
.hero-inner { gap: 1.5rem; }
.hero .subhead { margin-bottom: 0; }
.hero-photo { width: min(320px, 100%); margin: 0 auto; }
}
@media (max-width: 860px) {
.header-grid { grid-template-columns: 1fr; justify-items: center; gap: 0.9rem; padding: 0.6rem 0; }
.header-brand { justify-content: center; }
.site-header .logo-image { height: 56px; }
.main-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem 1rem; font-size: 0.72rem; max-width: 520px; }
.header-social { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0.9rem; }
}
/* patient voices invite */
.pv-invite { margin: 2.25rem 0 2.5rem; padding: 1.6rem 1.9rem 1.2rem; background: rgba(230, 50, 150, 0.05); border-left: 3px solid var(--pink); border-radius: 6px; }
.pv-invite p { margin: 0 0 0.85rem; }
body[data-page] .pv-invite p.pv-invite__kicker { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.4rem; line-height: 1.35; color: var(--pink); }
.pv-invite .pv-invite__note { font-size: 0.9rem; opacity: 0.75; }
@media (max-width: 600px) { .pv-invite { padding: 1.2rem 1.1rem 0.9rem; } }
/* threads text-only until photos arrive (auto-reverts when an ![]()
replaces the placeholder) */
.threads__media:has(.threads__placeholder) { display: none; }
.threads__row:has(.threads__placeholder) { grid-template-columns: 1fr; max-width: 680px; margin-left: auto; margin-right: auto; margin-bottom: 2.75rem; padding-left: 1.4rem; border-left: 3px solid rgba(130,85,50,.3); }
.threads__row:has(.threads__placeholder) .threads__text { max-width: none; justify-self: stretch; }
.threads__row--pink:has(.threads__placeholder) { border-left-color: #e63296; }
.threads__row--orange:has(.threads__placeholder) { border-left-color: #fa7828; }
.threads__row--blue:has(.threads__placeholder) { border-left-color: #64aae6; }
.threads__row--green:has(.threads__placeholder) { border-left-color: #6eb45a; }
.threads__row--purple:has(.threads__placeholder) { border-left-color: #aa5096; }
/* connect: make clickable headings look clickable */
body[data-page="connect"] h2.contact-form-heading > a::after,
body[data-page="connect"] .serif-trigger::after { content: " \2192"; color: var(--pink); font-size: 0.8em; margin-left: 0.15em; display: inline-block; transition: transform .2s; }
body[data-page="connect"] h2.contact-form-heading > a:hover::after,
body[data-page="connect"] .serif-trigger:hover::after { transform: translateX(3px); }
.pub-cofirst { font-size: 0.85em; opacity: 0.7; margin-left: 0.35rem; }
/* home intro: middle paragraph in regular type */
.intro p.intro-plain { font-style: normal; }
/* path cards: live text over text-free scenes */
.pathway-card.pathway-card--live { height: auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 0.7rem 1.1rem; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--pcbg) 30%, var(--pcbg) 100%); border-radius: 50% 50% 12px 12px / 6% 6% 12px 12px; }
.pathway-card--live > img.pc-scene { width: calc(100% + 1.4rem); height: auto; aspect-ratio: 400 / 419; object-fit: cover; margin: 0 -0.7rem; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%); }
.pc-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.15; color: var(--pc); margin-top: -0.6rem; min-height: 3.45em; display: flex; align-items: center; justify-content: center; }
.pc-orn { display: block; width: 46px; height: 1px; background: linear-gradient(to right, transparent, #b08a52, transparent); margin: 0.55rem auto 0.7rem; position: relative; }
.pc-orn::after { content: ""; position: absolute; left: 50%; top: -3px; width: 5px; height: 5px; margin-left: -3.5px; border: 1px solid #b08a52; border-radius: 50%; background: var(--pcbg); }
.pc-desc { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1rem; line-height: 1.35; color: #3a3046; min-height: 2.7em; }
.pc-arrow { margin-top: 0.8rem; width: 34px; height: 34px; border: 1.5px solid var(--pc); color: var(--pc); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; transition: background .2s, color .2s; }
.pathway-card--live:hover .pc-arrow { background: var(--pc); color: #fff; }
@media (max-width: 600px) { .pc-title { min-height: 0; } .pc-desc { min-height: 0; } }
/* pc-arrow-bottom */
.pathway-cards { align-items: stretch; }
.pathway-card--live .pc-arrow { margin-top: auto; }
.pathway-card--live .pc-desc { margin-bottom: 0.9rem; }
/* AOSA photos on Advocates page */
.aosa-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.25rem 0 1.5rem; }
.aosa-photos figure { margin: 0; }
.aosa-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block; }
.aosa-photos figcaption { font-size: .8rem; color: var(--brown); font-style: italic; margin-top: .4rem; }
@media (max-width: 600px) { .aosa-photos { grid-template-columns: 1fr; } }
/* AOSA co-chair announcement card */
.aosa-announce { position: relative; display: flex; align-items: center; gap: 1.4rem; margin: 1.2rem 0 1.4rem; padding: 1.4rem 1.6rem; border-radius: 16px; background: #fffaf6; overflow: hidden; box-shadow: 0 14px 30px -20px rgba(42,37,31,.5); }
.aosa-announce::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; background: linear-gradient(180deg,#E40303,#FF8C00,#FFED00,#008026,#24408E,#732982); }
.aosa-announce__logo { width: 92px; height: 92px; object-fit: contain; flex-shrink: 0; margin-left: .4rem; }
.aosa-announce__body { display: flex; flex-direction: column; gap: .15rem; }
.aosa-announce__kicker { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); font-weight: 600; }
.aosa-announce__title { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-style: italic; color: var(--ink); }
.aosa-announce__names { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 600; line-height: 1.2; color: var(--charcoal); }
.aosa-announce__role { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); font-weight: 600; margin-top: .2rem; }
@media (max-width: 600px) { .aosa-announce { flex-direction: column; align-items: flex-start; gap: .8rem; padding: 1.2rem 1.2rem 1.2rem 1.6rem; } .aosa-announce__logo { width: 72px; height: 72px; margin-left: 0; } .aosa-announce__names { font-size: 1.35rem; } }
.aosa-announce__logo { mix-blend-mode: multiply; }
#aosa { scroll-margin-top: 120px; }
/* Activism page */
body[data-page="activism"] .page-intro { background: radial-gradient(ellipse at 12% 65%, rgba(250,120,40,.26) 0%, transparent 55%), radial-gradient(ellipse at 82% 22%, rgba(170,80,150,.18) 0%, transparent 46%), var(--cream-warm); }
body[data-page="activism"] .page-intro .eyebrow { color: var(--terracotta); }
.act-block { padding: 2.2rem 0 1.4rem; scroll-margin-top: 120px; }
.act-label { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ac); margin-bottom: .5rem; }
.act-heading { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.15; color: var(--charcoal); margin: 0 0 1.3rem; }
.act-desc { max-width: 62ch; }
.act-more { margin-top: .4rem; }
.act-timeline { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 1rem; }
.act-timeline li { position: relative; padding: .2rem 0 .2rem 1.6rem; border-left: 3px solid color-mix(in srgb, var(--ac) 55%, transparent); }
.act-timeline li::before { content: ""; position: absolute; left: -8px; top: .45rem; width: 13px; height: 13px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 3px var(--cream); }
.act-timeline__when { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.15rem; color: var(--ac); margin-bottom: .2rem; }
.act-timeline p { margin: 0; }
.act-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.act-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.3rem 1.35rem; border-radius: 14px; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--ac) 8%, #fffaf4); border: 1px solid color-mix(in srgb, var(--ac) 26%, transparent); border-top: 4px solid var(--ac); transition: transform .15s, background .15s; }
.act-card:hover, .act-card:focus-visible { transform: translateY(-2px); background: color-mix(in srgb, var(--ac) 13%, #fffaf4); }
.act-card__when { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ac); }
.act-card__title { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600; line-height: 1.15; color: var(--charcoal); }
.act-card__desc { font-size: .9rem; line-height: 1.55; color: var(--ink); }
.act-feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.6rem; align-items: start; }
.act-feature__body p { margin-top: 0; }
.act-feature__read { display: flex; flex-direction: column; gap: .35rem; padding: 1.3rem 1.4rem; border-radius: 14px; background: #fffaf4; border: 1px solid rgba(250,120,40,.3); }
.act-feature__kicker { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta); }
.act-feature__title { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; line-height: 1.2; color: var(--charcoal); }
.act-feature__src { font-size: .85rem; color: var(--brown); }
.act-roles { display: grid; gap: 14px; }
.act-role { display: grid; grid-template-columns: 76px 1fr; gap: 1.2rem; align-items: start; padding: 1.3rem 1.4rem; border-radius: 14px; background: #fffaf4; border: 1px solid rgba(110,180,90,.3); }
.act-role__logo { width: 76px; height: 76px; object-fit: contain; mix-blend-mode: multiply; }
.act-role__org { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brown); }
.act-role__title { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 600; color: var(--charcoal); line-height: 1.2; margin: .2rem 0; }
.act-role__meta { display: block; font-size: .85rem; color: var(--brown); margin-bottom: .5rem; }
.act-role p { margin: 0 0 .5rem; font-size: .95rem; }
@media (max-width: 700px) { .act-feature { grid-template-columns: 1fr; } .act-role { grid-template-columns: 1fr; } .act-role__logo { width: 60px; height: 60px; } }
.act-resources { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 1.2rem; }
.act-resource { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.15rem; border-radius: 12px; background: #fffaf4; border: 1px solid rgba(170,80,150,.28); text-decoration: none; color: inherit; transition: background .15s; }
.act-resource:hover, .act-resource:focus-visible { background: #fff; }
.act-resource__title { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; color: var(--charcoal); line-height: 1.2; }
.act-resource__desc { font-size: .85rem; line-height: 1.45; color: var(--brown); }
.act-resource--help { border-color: rgba(170,80,150,.55); background: color-mix(in srgb, var(--purple) 7%, #fffaf4); }
.act-role__logo--acs { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #0b3a6a; color: #fff; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.4rem; mix-blend-mode: normal; }
.act-roots-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.act-roots-photo { margin: 0; position: sticky; top: 140px; }
.act-roots-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 14px; display: block; box-shadow: 0 16px 34px -20px rgba(42,37,31,.55); }
@media (max-width: 760px) { .act-roots-grid { grid-template-columns: 1fr; } .act-roots-photo { position: static; order: -1; } .act-roots-photo img { aspect-ratio: 4/3; } }
/* #BlackMenInMedicine page */
body[data-page="bmim"] .page-intro { background: radial-gradient(ellipse at 12% 65%, rgba(250,120,40,.24) 0%, transparent 55%), radial-gradient(ellipse at 82% 22%, rgba(60,100,50,.16) 0%, transparent 46%), var(--cream-warm); }
body[data-page="bmim"] .page-intro .eyebrow { color: var(--terracotta); }
.bmim-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.bmim-stat { display: flex; flex-direction: column; gap: .4rem; padding: 1.3rem 1.3rem 1.2rem; border-radius: 14px; background: color-mix(in srgb, var(--ac) 8%, #fffaf4); border-top: 4px solid var(--ac); }
.bmim-stat__num { font-family: 'Cormorant Garamond', serif; font-size: 1.85rem; white-space: nowrap; font-weight: 600; line-height: 1.05; color: var(--ac); }
.bmim-stat__label { font-size: .92rem; line-height: 1.45; color: var(--charcoal); }
.bmim-stat__src { margin-top: auto; font-size: .78rem; color: var(--brown); }
/* ── Core Beliefs: photographic essay (About page) ── */
.beliefs-drop .beliefs { padding: 2rem 2rem 1.5rem; }
body[data-page="about"] .beliefs .beliefs__sub {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.15rem, 2vw, 1.3rem);
color: var(--brown);
margin: 0 0 2.25rem;
}
.belief {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 20px;
align-items: center;
margin: 0 0 4rem;
}
.belief__media { margin: 0; position: relative; }
.belief__media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
/* a short colour mark in place of numbers */
.belief__text::before {
content: "";
display: block;
width: 34px;
height: 3px;
border-radius: 2px;
background: var(--bc, var(--brown));
margin-bottom: 1rem;
}
body[data-page="about"] .beliefs .belief__lead {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: clamp(1.45rem, 2.6vw, 1.85rem);
line-height: 1.2;
color: var(--charcoal);
margin-bottom: .7rem;
text-wrap: balance;
}
body[data-page="about"] .beliefs .belief__body {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 1.15rem;
line-height: 1.6;
color: var(--ink);
}
/* Listening — panorama, text set below and indented */
.belief--pano .belief__media { grid-column: 1 / -1; height: clamp(170px, 26vw, 230px); margin: 0 -2rem; }
.belief--pano .belief__media img { border-radius: 0; }
.belief--pano .belief__text { grid-column: 2 / span 9; margin-top: 1.75rem; }
/* Excellence + connection — diptych, uneven heights */
.belief--diptych .belief__pair {
grid-column: 1 / span 6;
display: grid;
grid-template-columns: 1fr 1.7fr;
grid-template-rows: minmax(0, 1fr);
gap: 8px;
height: clamp(280px, 44vw, 360px);
}
.belief--diptych .belief__pair-b { align-self: end; height: 78%; }
.belief--diptych .belief__text { grid-column: 7 / span 6; padding-left: .5rem; }
/* Uncertainty — no image; the space is the point */
.belief--open { padding: 1rem 0 .5rem; }
.belief--open .belief__text {
grid-column: 3 / span 9;
border-left: 1px solid rgba(100, 170, 230, .45);
padding-left: 1.75rem;
}
.belief--open .belief__text::before { display: none; }
body[data-page="about"] .beliefs .belief--open .belief__lead { font-style: italic; font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
/* Culture — layered photographs */
.belief--layered .belief__text { grid-column: 1 / span 6; grid-row: 1; }
.belief--layered .belief__stack { grid-column: 7 / span 6; grid-row: 1; height: clamp(320px, 50vw, 400px); }
.belief__stack-back { position: absolute; top: 0; right: 0; width: 72% !important; height: 84% !important; }
.belief__stack-front {
position: absolute; left: 0; bottom: 0;
width: 62% !important; height: 40% !important;
outline: 6px solid #fff;
box-shadow: 0 16px 30px -22px rgba(42, 37, 31, .6);
}
/* Leadership — tall, saturated */
.belief--tall .belief__media { grid-column: 1 / span 5; height: clamp(340px, 54vw, 440px); }
.belief--tall .belief__media img { object-position: 60% 40%; }
.belief--tall .belief__text { grid-column: 7 / span 6; align-self: end; padding-bottom: 1rem; }
/* Advocacy — a long low row, bleeding off the right edge */
.belief--strip .belief__text { grid-column: 1 / span 8; }
.belief--strip .belief__media { grid-column: 4 / -1; height: clamp(110px, 18vw, 150px); margin: 1.5rem -2rem 0 0; }
.belief--strip .belief__media img { border-radius: 3px 0 0 3px; object-position: center 70%; }
/* Innovation — different materials gathered together */
.belief--scatter { margin-bottom: 2.5rem; }
.belief--scatter .belief__stones { grid-column: 1 / span 6; height: clamp(280px, 44vw, 340px); }
.belief__stone { position: absolute; box-shadow: 0 14px 26px -20px rgba(42, 37, 31, .7); }
.belief__stone--1 { left: 0; top: 4%; width: 56% !important; height: 60% !important; }
.belief__stone--2 { left: 50%; top: 0; width: 38% !important; height: 58% !important; transform: rotate(2deg); outline: 6px solid #fff; }
.belief__stone--3 { left: 30%; bottom: 0; width: 32% !important; height: 40% !important; transform: rotate(-3deg); outline: 6px solid #fff; }
.belief--scatter .belief__text { grid-column: 7 / span 6; padding-left: .5rem; }
body[data-page="about"] .beliefs .beliefs__credit {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: .68rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--brown-soft);
text-align: right;
}
/* Phone: stack, keep a little asymmetry */
@media (max-width: 640px) {
.beliefs-drop .beliefs { padding: 1.5rem 1.25rem 1.25rem; }
.belief { display: block; margin-bottom: 3rem; }
.belief__media + .belief__text { margin-top: 1.4rem; }
.belief__text + .belief__media { margin-top: 1.5rem; }
.belief--pano .belief__media { margin: 0 -1.25rem; height: 150px; }
.belief--diptych .belief__pair { height: 270px; }
.belief--open .belief__text { margin-left: 8%; padding-left: 1.25rem; }
.belief--layered .belief__stack { height: 330px; }
.belief--tall .belief__media { width: 84%; height: 380px; }
.belief--tall .belief__text { padding-bottom: 0; }
.belief--strip .belief__media { margin: 1.5rem -1.25rem 0 16%; height: 110px; }
.belief--scatter .belief__stones { height: 290px; }
.belief--diptych .belief__text, .belief--scatter .belief__text { padding-left: 0; }
}
/* About: My Advocacy Journey */
.advocacy-journey { margin-top: 3rem; }
.advocacy-journey__roots { margin-top: 1.5rem; }
/* About: sections as features (heading, image, drop-down) */
.about-thing-gap { margin: 3.25rem 0 2.75rem; }
.about-thing { margin-top: 0; }
.about-thing__drop { margin-top: 1.5rem; }
.advocacy-journey { margin-top: 0; }
/* Advocacy page v2 */
.act-intro { margin: 0 0 1rem; }
.act-intro > p { font-size: 1.08rem; max-width: 62ch; }
.act-index { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 .4rem; }
.act-index a { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-decoration: none; color: var(--charcoal); padding: .38rem .9rem .38rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--ac) 7%, #fffaf4); border: 1px solid color-mix(in srgb, var(--ac) 40%, transparent); transition: background .15s; }
.act-index a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); }
.act-index a:hover, .act-index a:focus-visible { background: color-mix(in srgb, var(--ac) 12%, #fffaf4); }
.act-role__logo--photo { border-radius: 12px; object-fit: cover; mix-blend-mode: normal; }
.act-work { list-style: none; margin: 1.4rem 0 .6rem; padding: 0; border-top: 1px solid color-mix(in srgb, var(--ac) 30%, transparent); }
.act-work li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .8rem 0; border-bottom: 1px solid rgba(107, 85, 69, .12); }
.act-work__when { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.08rem; color: var(--ac); line-height: 1.5; }
.act-work__what { font-size: .97rem; line-height: 1.6; }
.act-desc--after { margin-top: 1.3rem; font-style: italic; color: var(--brown); }
.act-feature { margin-top: 1.6rem; }
a.act-feature__read { text-decoration: none; color: inherit; transition: background .15s, transform .15s; }
a.act-feature__read:hover, a.act-feature__read:focus-visible { background: #fff; transform: translateY(-2px); }
.act-reflection { margin: 3rem 0 2rem; padding: 2.2rem 2rem 2rem; border-radius: 16px; background: linear-gradient(135deg, rgba(230,50,150,.08), rgba(250,120,40,.06) 45%, rgba(100,170,230,.08)); border: 1px solid rgba(230,50,150,.16); }
.act-reflection blockquote { border: 0; background: none; padding: 0; margin: 0 0 1rem; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(1.45rem, 3vw, 1.95rem); line-height: 1.3; color: var(--charcoal); }
.act-reflection figcaption { font-size: .98rem; line-height: 1.65; color: var(--ink); max-width: 60ch; }
.act-resource--join { border-color: rgba(60,100,50,.3); }
.act-close { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.6rem; align-items: center; margin: 2.5rem 0 1rem; padding: 1.2rem; border-radius: 16px; background: #fffaf4; border: 1px solid rgba(107,85,69,.14); }
.act-close__photo { margin: 0; }
.act-close__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.act-close__text p { margin: .3rem 0 0; }
@media (max-width: 640px) {
.act-work li { grid-template-columns: 1fr; gap: .1rem; }
.act-close { grid-template-columns: 1fr; }
.act-reflection { padding: 1.6rem 1.3rem; }
}
/* SANARTE mural (Advocacy page) */
.act-mural { margin: 1.8rem 0 1.6rem; }
.act-mural img { display: block; width: 100%; border-radius: 12px; box-shadow: 0 18px 36px -24px rgba(42,37,31,.55); }
.act-mural__placeholder { display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; min-height: 220px; padding: 1.6rem 1.7rem; border-radius: 12px; text-decoration: none; color: var(--charcoal); background: repeating-linear-gradient(0deg, rgba(130,85,50,.06) 0 1px, transparent 1px 34px), repeating-linear-gradient(90deg, rgba(130,85,50,.06) 0 1px, transparent 1px 34px), linear-gradient(135deg, #f6e7d6, #efd9c3 55%, #e9d2bf); border: 1px solid rgba(250,120,40,.35); transition: transform .15s, box-shadow .15s; }
.act-mural__placeholder:hover, .act-mural__placeholder:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(42,37,31,.55); }
.act-mural__kicker { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta); }
.act-mural__title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: clamp(2rem, 4.5vw, 2.8rem); line-height: 1; }
.act-mural__cta { font-size: .9rem; color: var(--brown); }
.act-mural figcaption { margin-top: .7rem; font-size: .86rem; line-height: 1.55; color: var(--brown); max-width: 62ch; }
.act-mural figcaption a { color: var(--brown); }
/* SANARTE Traditions (About, Stops Along the Way) */
.stop-mural { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1rem; align-items: center; margin: .8rem 0 .3rem; padding: .7rem; border-radius: 10px; background: #fffaf4; border: 1px solid rgba(250,120,40,.25); }
.stop-mural img, .stop-mural__placeholder { display: flex; align-items: flex-end; width: 132px; aspect-ratio: 4 / 3; border-radius: 6px; object-fit: cover; }
.stop-mural__placeholder { padding: .55rem .6rem; text-decoration: none; background: repeating-linear-gradient(0deg, rgba(130,85,50,.07) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(130,85,50,.07) 0 1px, transparent 1px 22px), linear-gradient(135deg, #f6e7d6, #ecd3bd); border: 1px solid rgba(250,120,40,.3); }
.stop-mural__placeholder span { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.15rem; color: var(--charcoal); }
.my-path__stops .stop-mural figcaption { font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 400; line-height: 1.5; color: var(--brown) !important; }
.my-path__stops .stop-mural figcaption a { color: var(--brown); }
@media (max-width: 520px) { .stop-mural { grid-template-columns: 1fr; } }
/* Books: cross-references */
.book-xref { margin: 1.4rem 0 .4rem; padding: 1.1rem 1.2rem 1rem; border-radius: 10px; background: #fffaf4; border: 1px solid rgba(100, 170, 230, .3); }
.book-xref h4 { font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); margin: 0 0 .3rem; }
.book-xref p { font-size: .94rem; line-height: 1.5; color: var(--brown); margin: 0 0 .8rem; max-width: none; }
.book-xref ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: .4rem .8rem; }
.book-xref a { display: flex; align-items: center; gap: .7rem; padding: .35rem; border-radius: 8px; text-decoration: none; color: var(--charcoal); transition: background .15s; }
.book-xref a:hover, .book-xref a:focus-visible { background: rgba(100, 170, 230, .1); }
.book-xref img { flex: none; width: 34px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; border: 1px solid rgba(130, 85, 50, .18); }
.book-xref cite { display: block; font-family: 'Cormorant Garamond', serif; font-style: normal; font-weight: 600; font-size: 1.06rem; line-height: 1.2; }
.book-xref .xref-author { display: block; font-size: .82rem; font-style: italic; color: var(--brown); }
.book.is-flash { animation: book-flash 1.8s ease-out; }
@keyframes book-flash { 0% { background: rgba(100, 170, 230, .2); } 100% { background: transparent; } }
/* SANARTE bridge (About, Stops Along the Way) */
.my-path__stops .belief-list li.stop-bridge { padding: 1.3rem 0 1.2rem; color: var(--charcoal) !important; }
.stop-bridge__mural { margin: 0; }
.stop-bridge__mural img { display: block; width: 100%; aspect-ratio: 16 / 5; object-fit: cover; border-radius: 10px; }
.stop-bridge__placeholder {
display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem;
aspect-ratio: 16 / 5; min-height: 140px; padding: 1.1rem 1.4rem; border-radius: 10px; text-decoration: none;
background:
repeating-linear-gradient(0deg, rgba(130,85,50,.08) 0 1px, transparent 1px 30px),
repeating-linear-gradient(90deg, rgba(130,85,50,.08) 0 1px, transparent 1px 30px),
radial-gradient(circle at 12% 30%, rgba(100,170,230,.22), transparent 32%),
radial-gradient(circle at 46% 75%, rgba(250,120,40,.18), transparent 34%),
radial-gradient(circle at 78% 25%, rgba(110,180,90,.18), transparent 30%),
radial-gradient(circle at 92% 80%, rgba(255,200,40,.2), transparent 28%),
linear-gradient(135deg, #f6e7d6, #ecd3bd);
border: 1px solid rgba(250,120,40,.35);
transition: transform .15s, box-shadow .15s;
}
.stop-bridge__placeholder:hover, .stop-bridge__placeholder:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(42,37,31,.55); }
.stop-bridge__kicker { font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta); }
.stop-bridge__title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: clamp(1.45rem, 3.4vw, 2.1rem); line-height: 1.05; color: var(--charcoal); }
.stop-bridge__cta { font-family: 'Inter', sans-serif; font-size: .82rem; color: var(--brown); }
.my-path__stops .stop-bridge figcaption { margin-top: .85rem; }
.my-path__stops .stop-bridge__text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 1.14rem; line-height: 1.55; color: var(--charcoal) !important; margin: 0 0 .4rem; max-width: 62ch; }
.my-path__stops .stop-bridge__credit { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: .78rem; line-height: 1.5; color: var(--brown) !important; }
@media (max-width: 520px) { .stop-bridge__placeholder { aspect-ratio: auto; min-height: 150px; padding: 1rem; } }
/* Advocacy page v3: tracks, archive cards, documentary photos, strike */
.act-intro > p + p { margin-top: .2rem; }
.act-help { margin: 1rem 0 0; padding: .7rem 1rem; border-radius: 10px; font-size: .9rem !important; line-height: 1.5; max-width: none !important; background: color-mix(in srgb, var(--purple) 7%, #fffaf4); border: 1px solid rgba(170,80,150,.35); color: var(--ink); }
.act-help a { color: var(--charcoal); font-weight: 600; }
.act-tracks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; margin-top: 1.6rem; }
.act-tracks h3.act-track__title { font-family: 'Inter', sans-serif !important; font-size: .76rem !important; font-weight: 600 !important; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--brown) !important; margin: 0 0 -.6rem; }
.act-pave { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 1.1rem; align-items: start; margin: 1.6rem 0 .4rem; padding: 1rem 1.1rem; border-radius: 12px; background: #fbf7f0; border: 1px solid rgba(130,85,50,.18); }
.act-pave__thumb img { display: block; width: 92px; height: auto; border-radius: 3px; box-shadow: 0 6px 14px -8px rgba(42,37,31,.5); }
.act-pave__text p { margin: .35rem 0 0; font-size: .93rem; line-height: 1.55; max-width: 62ch; }
.act-archive__kicker { font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); }
.act-subhead { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.55rem); line-height: 1.2; color: var(--charcoal); margin: 0 0 .6rem; }
.act-subhead--list { margin-top: 2.2rem; }
.act-story { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.8rem; align-items: start; margin-top: 1.9rem; }
.act-story__body p { margin: 0 0 .8rem; max-width: 62ch; }
.act-archive { display: flex; flex-direction: column; gap: .35rem; padding: 1.15rem 1.25rem 1.2rem; border-radius: 4px; text-decoration: none; color: inherit; background: #fbf7f0; border: 1px solid rgba(130,85,50,.2); border-top: 3px solid var(--ac, var(--brown)); box-shadow: 0 10px 24px -20px rgba(42,37,31,.6); transition: transform .15s, box-shadow .15s; }
.act-archive:hover, .act-archive:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 28px -20px rgba(42,37,31,.7); }
.act-archive__title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.22rem; line-height: 1.2; color: var(--charcoal); }
.act-archive__src { font-size: .8rem; line-height: 1.45; color: var(--brown); }
.act-archive__desc { font-size: .88rem; line-height: 1.5; color: var(--ink); }
.act-archive__cta { font-size: .85rem; font-weight: 600; color: var(--charcoal); margin-top: .15rem; }
.act-also { font-size: .88rem; color: var(--brown); margin: .7rem 0 0; }
.act-photo { margin: 1.8rem 0 1.4rem; }
.act-photo img { display: block; width: 100%; border-radius: 6px; box-shadow: 0 16px 32px -24px rgba(42,37,31,.6); }
.act-photo--wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.act-photo figcaption { margin-top: .6rem; font-size: .84rem; line-height: 1.5; color: var(--brown); max-width: 62ch; }
.act-photo figcaption a { color: var(--brown); }
.act-strike { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 2rem; align-items: start; margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid rgba(100,170,230,.35); scroll-margin-top: 120px; }
.act-strike__photo { margin: 0; position: sticky; top: 130px; }
.act-strike__photo img { aspect-ratio: 4 / 5; object-fit: cover; }
.act-strike__body p { margin: 0 0 .85rem; max-width: 62ch; }
.act-strike__links { margin-top: 1.2rem; }
.act-feature__alt a { color: var(--brown); }
@media (max-width: 760px) {
.act-story { grid-template-columns: 1fr; gap: 1rem; }
.act-strike { grid-template-columns: 1fr; gap: 1.2rem; }
.act-strike__photo { position: static; max-width: 420px; }
}
@media (max-width: 480px) {
.act-pave { grid-template-columns: 70px minmax(0, 1fr); }
.act-pave__thumb img { width: 70px; }
}
.act-card--static:hover { transform: none; background: color-mix(in srgb, var(--ac) 8%, #fffaf4); }
/* Movement photo (About) */
.movement-photo { margin: 1.5rem 0 1.6rem; }
.movement-photo img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 16px 32px -24px rgba(42,37,31,.6); }
body[data-page="about"] .movement-photo figcaption { margin-top: .55rem; font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 400; font-style: normal; line-height: 1.5; color: var(--brown); }
/* Nature strips: one of Heather's photographs under each page intro */
.nature-strip { margin: 0; width: 100%; height: clamp(140px, 21vw, 290px); overflow: hidden; background: var(--cream-warm); border-bottom: 1px solid rgba(107, 85, 69, 0.18); }
.nature-strip img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }
/* ---------- Medical Education page (#FOAMsurg / Think Like a Surgeon) ---------- */
body[data-page="education"] .page-intro { background: radial-gradient(ellipse at 15% 60%, rgba(100, 170, 230, 0.30) 0%, transparent 55%), radial-gradient(ellipse at 80% 25%, rgba(201, 150, 58, 0.18) 0%, transparent 45%), var(--cream-warm); }
.edu-intro { max-width: 720px; padding-top: .6rem; }
.edu-intro p { max-width: 68ch; }
.edu-index { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin: 1.6rem 0 .4rem; }
.edu-index a { font-family: 'Inter', sans-serif; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--charcoal); padding: .42rem .8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ac) 50%, transparent); background: color-mix(in srgb, var(--ac) 10%, #fffaf4); transition: background .15s, transform .15s; }
.edu-index a:hover, .edu-index a:focus-visible { background: color-mix(in srgb, var(--ac) 22%, #fffaf4); transform: translateY(-1px); }
.edu-block { padding: 2.2rem 0 1.4rem; scroll-margin-top: 120px; }
.edu-label { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ac); margin-bottom: .5rem; }
.edu-heading { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.15; color: var(--charcoal); margin: 0 0 1.3rem; }
.edu-subhead { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.45rem; color: var(--charcoal); margin: 2rem 0 .7rem; }
.edu-desc { max-width: 66ch; }
.edu-list { max-width: 68ch; }
.edu-list--two { columns: 2; column-gap: 2.4rem; max-width: 820px; }
.edu-list--two li { break-inside: avoid; }
.edu-caption { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.08rem; color: var(--brown); max-width: 62ch; margin: 1rem auto 1.8rem; text-align: center; }
.edu-fineprint { font-size: .82rem; color: var(--brown-soft); max-width: 68ch; margin-top: 1rem; }
.edu-forthcoming { font-size: .95rem; color: var(--brown); }
.edu-bridge { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px dashed rgba(170,80,150,.35); max-width: 68ch; }
/* Pull quotes (site blockquote style applies; these only adjust size) */
.edu-quote { max-width: 720px; }
.edu-quote p { font-size: clamp(1.25rem, 2.1vw, 1.5rem); line-height: 1.4; margin: 0 !important; max-width: none !important; color: inherit; }
.edu-quote em { font-style: italic; color: var(--rose); }
.edu-quote--lead { margin-top: 1.2rem; }
.edu-quote--lead p { font-size: clamp(1.45rem, 2.8vw, 1.85rem); color: var(--charcoal); }
.edu-quote--inline p { font-size: 1.2rem; }
/* Four processes */
.edu-four { margin: 1.8rem 0 .6rem; }
.edu-four__grid { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem minmax(0, 1fr); grid-template-rows: 1fr 2.8rem 1fr; grid-template-areas: "p1 hub p2" "gl hub gr" "p3 hub p4"; }
.edu-proc { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1.45rem 1.5rem 1.4rem 1.5rem; border-radius: 16px; background: color-mix(in srgb, var(--ac) 9%, #fffaf4); border: 1px solid color-mix(in srgb, var(--ac) 32%, transparent); border-top: 5px solid var(--ac); box-shadow: 0 14px 30px -24px rgba(42,37,31,.5); margin: 0; }
.edu-proc--1 { grid-area: p1; } .edu-proc--2 { grid-area: p2; } .edu-proc--3 { grid-area: p3; } .edu-proc--4 { grid-area: p4; }
.edu-proc__num { position: absolute; top: -.95rem; left: 1.2rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ac); color: #fff; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--cream); }
.edu-proc__title { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 600; line-height: 1.15; color: var(--charcoal); margin: .4rem 0 0; }
.edu-proc__q { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.2rem; color: var(--ac); margin: 0 0 .35rem !important; filter: saturate(.9) brightness(.85); }
.edu-proc__body { font-size: .93rem; line-height: 1.55; margin: 0 !important; color: var(--ink); max-width: none !important; }
.edu-proc__who { margin-top: auto; padding-top: .8rem; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brown); }
.edu-proc--observer { border-style: dashed; border-top-style: solid; background: color-mix(in srgb, var(--ac) 6%, #fffaf4); }
.edu-proc--observer .edu-proc__who { color: var(--ac); }
.edu-four__hub { grid-area: hub; position: relative; margin: 0; display: flex; align-items: center; justify-content: center; }
.edu-four__gap { margin: 0; display: flex; align-items: center; justify-content: center; }
.edu-four__gap--left { grid-area: gl; } .edu-four__gap--right { grid-area: gr; }
.edu-four__link { width: 2rem; height: 2rem; border-radius: 50%; background: #fffaf4; border: 1px solid rgba(201,150,58,.55); color: var(--gold); font-size: 1.05rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.edu-four__link--top, .edu-four__link--bottom { position: absolute; left: 50%; transform: translate(-50%, -50%); }
.edu-four__link--top { top: calc((100% - 2.8rem) / 4); }
.edu-four__link--bottom { top: calc(100% - (100% - 2.8rem) / 4); }
.edu-four__center { width: 6.3rem; height: 6.3rem; border-radius: 50%; background: var(--cream); border: 1px solid rgba(201,150,58,.6); display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .92rem; line-height: 1.25; color: var(--brown); padding: .5rem; }
/* Two residents */
.edu-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; margin: 1.6rem 0 1.8rem; max-width: 820px; }
.edu-compare__col { padding: 1.1rem 1.25rem; border-radius: 12px; background: #fffaf4; border: 1px solid color-mix(in srgb, var(--ac) 30%, transparent); }
.edu-compare__col p { margin: 0 !important; font-size: .95rem; }
.edu-compare__kicker { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ac); margin-bottom: .4rem; }
.edu-compare__verdict { grid-column: 1 / -1; padding: .2rem .25rem 0; }
.edu-compare__verdict p { margin: 0 !important; max-width: 72ch !important; }
/* Cards (three responsibilities) */
.edu-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 14px; margin: 1.2rem 0 .4rem; }
.edu-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.3rem 1.35rem; border-radius: 14px; background: color-mix(in srgb, var(--ac) 8%, #fffaf4); border: 1px solid color-mix(in srgb, var(--ac) 26%, transparent); border-top: 4px solid var(--ac); }
.edu-card__kicker { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ac); }
.edu-card__title { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 600; line-height: 1.15; color: var(--charcoal); margin: 0; }
.edu-card__desc { font-size: .9rem; line-height: 1.55; color: var(--ink); margin: 0 !important; max-width: none !important; }
/* Platform / curriculum / program tiers */
.edu-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 1.2rem 0 1.8rem; border-radius: 16px; overflow: hidden; border: 1px solid rgba(60,100,50,.25); background: #fffaf4; }
.edu-tier { padding: 1.3rem 1.4rem 1.4rem; border-left: 1px solid rgba(60,100,50,.16); border-top: 5px solid var(--ac); }
.edu-tier:first-child { border-left: 0; }
.edu-tier__role { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ac); margin-bottom: .3rem; }
.edu-tier__name { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 600; color: var(--charcoal); margin: 0 0 .5rem; line-height: 1.15; }
.edu-tier p { margin: 0 !important; font-size: .92rem; line-height: 1.55; max-width: none !important; }
.edu-tier em { color: var(--rose); }
/* Teaching lanes */
.edu-lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 1rem 0 .4rem; }
.edu-lane { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: .95rem 1.05rem 1rem; border-radius: 12px; background: #fffaf4; border: 1px solid rgba(110,180,90,.3); }
.edu-lane__name { font-family: 'Cormorant Garamond', serif; font-size: 1.18rem; font-weight: 600; color: var(--charcoal); line-height: 1.2; }
.edu-lane__desc { font-size: .83rem; line-height: 1.45; color: var(--brown); }
.edu-lane--active { border-color: rgba(250,120,40,.6); background: color-mix(in srgb, var(--terracotta) 7%, #fffaf4); }
.edu-lane__tag { margin-top: .35rem; align-self: flex-start; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--terracotta); border: 1px solid rgba(250,120,40,.5); border-radius: 999px; padding: .18rem .55rem; }
/* Six-part scaffold */
.edu-six { list-style: none; counter-reset: six; margin: 1.6rem 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 18px; max-width: none; }
.edu-six li { counter-increment: six; position: relative; display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem .95rem 3.1rem; border-radius: 12px; background: #fffaf4; border: 1px solid color-mix(in srgb, var(--ac) 32%, transparent); margin: 0; }
.edu-six li::before { content: counter(six); position: absolute; left: .9rem; top: .9rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ac); color: #fff; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; }
.edu-six li::marker { content: ""; }
.edu-six__name { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--charcoal); line-height: 1.15; }
.edu-six__desc { font-size: .88rem; line-height: 1.5; color: var(--ink); }
/* Study plan */
.edu-plan { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.7fr); gap: 1.6rem 2.2rem; margin: 1.4rem 0 1.6rem; padding: 1.5rem 1.6rem 1.4rem; border-radius: 16px; background: #fffaf4; border: 1px solid color-mix(in srgb, var(--ac) 30%, transparent); }
.edu-plan__h { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ac); margin: 0 0 .5rem; font-family: 'Inter', sans-serif; }
.edu-plan__rhythm ul { margin: 0 0 1.3rem 1.1rem; max-width: none; }
.edu-plan__rhythm ul li { font-size: .9rem; margin-bottom: .45rem; }
.edu-plan__rhythm ul li::marker { color: var(--ac); }
.edu-phases { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; max-width: none; }
.edu-phases li { position: relative; padding: .1rem 0 .1rem 1.5rem; border-left: 3px solid color-mix(in srgb, var(--ac) 55%, transparent); margin: 0; display: flex; flex-direction: column; gap: .15rem; }
.edu-phases li::before { content: ""; position: absolute; left: -8px; top: .35rem; width: 13px; height: 13px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 3px #fffaf4; }
.edu-phase__when { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: var(--ac); }
.edu-phase__name { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--charcoal); line-height: 1.15; }
.edu-phase__desc { font-size: .88rem; line-height: 1.5; color: var(--ink); }
/* Join */
.edu-join { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, .8fr); gap: 1.6rem; align-items: start; padding: 1.5rem 1.6rem; border-radius: 16px; background: color-mix(in srgb, var(--ac) 7%, #fffaf4); border: 1px solid color-mix(in srgb, var(--ac) 40%, transparent); margin: 1.2rem 0 .4rem; }
.edu-join__title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--charcoal); margin: 0 0 .6rem; }
.edu-join__body p { font-size: .95rem; margin-bottom: .8rem; }
.edu-join__status { font-size: .88rem !important; color: var(--brown); margin-bottom: 0 !important; }
.edu-join__actions { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; padding-top: .4rem; }
.edu-join__secondary { color: var(--rose); text-decoration: none; font-size: .92rem; border-bottom: 1px solid rgba(230,50,150,.35); padding-bottom: 1px; }
.edu-join__secondary:hover { border-bottom-color: var(--rose); }
/* Learning methods */
.edu-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 1.2rem 0 1.4rem; }
.edu-method { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border-radius: 12px; background: #fffaf4; border: 1px solid color-mix(in srgb, var(--ac) 45%, transparent); }
.edu-method__name { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; color: var(--charcoal); }
.edu-method__desc { font-size: .83rem; line-height: 1.45; color: var(--brown); }
/* Resources */
.edu-resources { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 1.2rem 0 .6rem; }
.edu-resource { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.15rem; border-radius: 12px; background: #fffaf4; border: 1px solid color-mix(in srgb, var(--ac) 30%, transparent); text-decoration: none; color: inherit; transition: background .15s, transform .15s; }
.edu-resource:hover, .edu-resource:focus-visible { background: #fff; transform: translateY(-2px); }
.edu-resource__title { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; color: var(--charcoal); line-height: 1.2; }
.edu-resource__desc { font-size: .85rem; line-height: 1.45; color: var(--brown); }
.edu-wip { list-style: none; margin: .8rem 0 1.6rem; padding: 0; display: grid; gap: .55rem; max-width: 760px; }
.edu-wip li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: .3rem 1.2rem; padding: .7rem 0; border-bottom: 1px solid rgba(107,85,69,.18); margin: 0; align-items: baseline; }
.edu-wip__title { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; color: var(--charcoal); line-height: 1.2; }
.edu-wip__note { font-size: .85rem; color: var(--brown); }
.edu-close { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(201,150,58,.45); max-width: 720px; }
.edu-close__q { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.3rem, 2.3vw, 1.6rem); line-height: 1.35; color: var(--charcoal); margin-top: 1.4rem !important; }
@media (max-width: 900px) {
.edu-tiers { grid-template-columns: 1fr; }
.edu-tier { border-left: 0; border-top-width: 4px; }
.edu-plan { grid-template-columns: 1fr; }
.edu-join { grid-template-columns: 1fr; }
.edu-list--two { columns: 1; }
}
@media (max-width: 720px) {
.edu-four__grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: none; gap: 1.6rem; }
.edu-proc--1, .edu-proc--2, .edu-proc--3, .edu-proc--4 { grid-area: auto; }
.edu-four__hub, .edu-four__gap { display: none; }
.edu-proc__title { font-size: 1.4rem; }
.edu-compare { grid-template-columns: 1fr; }
.edu-wip li { grid-template-columns: 1fr; gap: .15rem; }
.edu-six { grid-template-columns: 1fr; }
.edu-caption { text-align: left; margin-left: 0; }
}
/* Header (desktop only): keep the primary nav on two lines now that it has thirteen items (Palliative Care added Oct 15) */
@media (min-width: 861px) {
.main-nav { gap: .6rem .9rem; font-size: .77rem; }
.header-grid { grid-template-columns: minmax(220px, 270px) 1fr minmax(84px, 100px); gap: 1.5rem; }
}
/* Writing page: reading-item thumbnails */
.reading-item--thumb { display: flex; align-items: flex-start; gap: 1.15rem; }
.reading-item .reading-thumb { flex: 0 0 172px; margin: 0; }
.reading-item .reading-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; box-shadow: 0 1px 4px rgba(42, 37, 31, 0.10); }
.reading-item .reading-body { flex: 1; min-width: 0; }
@media (max-width: 560px) {
.reading-item--thumb { flex-direction: column; gap: 0.75rem; }
.reading-item .reading-thumb { flex-basis: auto; width: 100%; max-width: 300px; }
}
/* Linked names (coaches, societies): the name itself is the link */
.society h3 a { border-bottom: 1px solid rgba(130, 85, 50, 0.35); }
.society h3 .author a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(130, 85, 50, 0.35); transition: color 0.2s, border-color 0.2s; }
.society h3 .author a:hover { color: var(--purple); border-bottom-color: var(--purple); }
/* Stops Along the Way: photo + bold place name, charcoal text (replaces the all-pink list) */
.my-path__stops .belief-list li.stop { display: flex; align-items: flex-start; gap: 1.1rem; color: var(--charcoal) !important; }
.my-path__stops .stop__photo { flex: 0 0 168px; margin: 0; }
.my-path__stops .stop__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 1px 4px rgba(42, 37, 31, 0.10); }
.my-path__stops .stop__body { flex: 1; min-width: 0; }
.my-path__stops .long-bio__body h3.stop__place { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.3rem; line-height: 1.25; color: var(--charcoal); margin: 0 0 .3rem; }
.my-path__stops .stop__body p { font-weight: 500; color: var(--charcoal); margin: 0; max-width: none; }
.my-path__stops .long-bio__body > p { color: var(--brown) !important; }
@media (max-width: 560px) {
.my-path__stops .belief-list li.stop { flex-direction: column; gap: .7rem; }
.my-path__stops .stop__photo { flex-basis: auto; width: 100%; max-width: 320px; }
}
/* Writing: archived family/hometown article (John & Jill Logghe, Rustic Lore Days 2025) */
.rld-note { margin: 0 0 1.8rem; padding: 1.15rem 1.35rem 1.2rem; border-left: 4px solid var(--lavender); background: rgba(196, 174, 224, 0.16); border-radius: 0 6px 6px 0; }
.rld-note__kicker { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--purple); margin-bottom: .45rem; }
.rld-note p { margin: 0 0 .7rem; max-width: 62ch; font-size: 1.02rem; }
.rld-note p:last-child { margin-bottom: 0; }
.rld-photo { margin: 0 0 2rem; }
.rld-photo img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 16px 32px -24px rgba(42, 37, 31, 0.6); }
.rld-photo figcaption { margin-top: .6rem; font-size: .84rem; line-height: 1.5; color: var(--brown); max-width: 62ch; }
.rld-photo figcaption a { color: var(--brown); }
.rld-article__dateline { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brown); margin: 0 0 1rem; }
.rld-article__lead { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 1.35rem; line-height: 1.4; color: var(--charcoal); margin: 0 0 1.4rem; max-width: 34em; }
.rld-article h2 { font-size: clamp(1.45rem, 2.6vw, 1.8rem); margin: 1.8rem 0 .7rem; }
.rld-article p { margin: 0 0 1rem; max-width: 66ch; }
.rld-source { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(130, 85, 50, 0.25); font-size: .9rem; line-height: 1.6; color: var(--brown); }
.rld-source p { margin: 0 0 .5rem; max-width: 66ch; }
.rld-source a { color: var(--brown); }
.rld-back { margin-top: 1.6rem; font-size: .95rem; }
.rld-back a { text-decoration: none; border-bottom: 1px solid rgba(230, 50, 150, 0.35); }
/* Writing index: "Family & Hometown" section */
.writing-section-lede { margin: -.4rem 0 0; color: var(--brown); font-style: italic; }
.reading-path--community { margin-top: 1.2rem; }
.reading-item--community { border-left-color: var(--brown); background: rgba(130, 85, 50, 0.07); }
/* About > Stops Along the Way: allow a second paragraph under a stop */
.my-path__stops .stop__body p + p { margin-top: .55rem; }
/* Advocacy page: mountain photographs (contained figures, not full-bleed bands) */
.act-photo--mtn img { aspect-ratio: 2 / 1; object-fit: cover; border-radius: 10px; }
.act-photo--lead { margin: 0 0 2.2rem; }
.act-photo--road { margin: 2.6rem 0 0; }
.act-photo--mtn figcaption { font-family: 'Inter', sans-serif; font-size: .8rem; color: var(--brown); }
@media (max-width: 560px) { .act-photo--mtn img { aspect-ratio: 3 / 2; } }
/* Research page: expanded areas (all four topics visible; the index just scrolls) */
.research-index__label { font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brown-soft); margin: 0 0 .7rem; }
.research-index { margin-bottom: 1rem; }
.research-index .research-tab { text-decoration: none; color: inherit; }
.research-panel.research-area { display: block; scroll-margin-top: 7rem; padding-top: 2.6rem; }
.research-area + .research-area { margin-top: 2.4rem; border-top: 1px solid rgba(107, 85, 69, 0.18); }
.ra-head { margin-bottom: 1.4rem; }
.ra-head::after { content: ""; display: block; clear: both; }
.ra-head__eyebrow { font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ra-accent, var(--brown-soft)); margin: 0 0 .5rem; }
.ra-head__title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(1.55rem, 2.6vw, 2.05rem); line-height: 1.2; color: var(--charcoal); margin: 0 0 1rem; }
.ra-head__text .research-intro { margin-bottom: 1.1rem; }
.ra-head__text .research-intro:last-child { margin-bottom: 0; }
.ra-head__photo { float: right; width: min(300px, 42%); margin: .3rem 0 1rem 2.2rem; }
.ra-head__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 1px 4px rgba(42, 37, 31, 0.10); border-bottom: 3px solid var(--ra-accent, var(--tan)); }
#tab-surgical-identity { --ra-accent: var(--terracotta); }
#tab-social-media { --ra-accent: var(--blue); }
#tab-health-equity { --ra-accent: var(--purple); }
#tab-rib-fractures { --ra-accent: var(--forest); }
@media (max-width: 720px) {
.ra-head__photo { float: none; width: 100%; max-width: 440px; margin: 0 0 1.1rem; }
}
@media (max-width: 600px) {
.research-index .research-tab { flex-direction: column; align-items: flex-start; gap: .3rem; }
}
/* #UnmaskMedicine: logo beside the page title */
.unmask-intro__layout { align-items: center; }
.unmask-intro__logo { width: 236px; }
.unmask-intro__logo img { height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; box-shadow: 0 16px 34px -20px rgba(42, 37, 31, 0.55); }
@media (max-width: 640px) { .unmask-intro__logo { max-width: 200px; } }
/* Advocacy: Ride for World Health photo strip */
.act-ride-strip { margin: 1.6rem 0 .2rem; }
.act-ride-strip__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.act-ride-strip__row img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; box-shadow: 0 12px 24px -20px rgba(42,37,31,.6); }
.act-ride-strip figcaption { margin-top: .6rem; font-size: .84rem; line-height: 1.5; color: var(--brown); max-width: 62ch; }
/* Research page: publications dropdown (closed by default; the label is the toggle) */
.pubs-drop { margin: 0 0 1.5rem; }
.pubs-drop__toggle { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none; user-select: none; margin: 0; padding: .55rem 0; border-top: 1px solid rgba(107, 85, 69, 0.18); border-bottom: 1px solid rgba(107, 85, 69, 0.18); width: 100%; }
.pubs-drop__toggle::-webkit-details-marker { display: none; }
.pubs-drop__toggle::before { content: ''; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin: 0 .2rem 0 .15rem; transition: transform .2s; flex-shrink: 0; }
.pubs-drop[open] > .pubs-drop__toggle::before { transform: rotate(45deg); margin-top: -.2rem; }
.pubs-drop__toggle:hover { opacity: .8; }
.pubs-drop__count { font-weight: 500; letter-spacing: 0; font-size: .74rem; color: var(--brown-soft); background: rgba(107, 85, 69, 0.09); border-radius: 999px; padding: .1rem .55rem; }
.pubs-drop[open] > .pubs-drop__toggle { margin-bottom: 1.25rem; border-bottom-color: transparent; }
/* Connect: schedule photo */
.schedule-photo { display: block; width: min(250px, 66%); margin: 0 auto 1.3rem; }
.schedule-photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; box-shadow: 0 14px 30px -22px rgba(42, 37, 31, 0.6); transition: transform 0.2s; }
.schedule-photo:hover img { transform: translateY(-2px); }
/* ---------- Motion (Oct 2026): subtle and reading-safe ---------- */
/* Nav divider lotus: petals breathe over eight seconds; the dots ripple outward from the lotus. */
@keyframes nb-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes nb-ripple { 0%, 55%, 100% { opacity: .3; } 18% { opacity: 1; } }
.nav-botanical-divider .nb-lotus path { animation: nb-breathe 8s ease-in-out infinite; }
.nav-botanical-divider .nb-lotus path:nth-of-type(1), .nav-botanical-divider .nb-lotus path:nth-of-type(7) { animation-delay: 1.2s; }
.nav-botanical-divider .nb-lotus path:nth-of-type(2), .nav-botanical-divider .nb-lotus path:nth-of-type(6) { animation-delay: .8s; }
.nav-botanical-divider .nb-lotus path:nth-of-type(3), .nav-botanical-divider .nb-lotus path:nth-of-type(5) { animation-delay: .4s; }
.nav-botanical-divider .nb-lotus path:nth-of-type(8) { animation: none; }
.nav-botanical-divider .nb-dot { animation: nb-ripple 8s ease-in-out infinite; }
.nav-botanical-divider .nb-dot--2 { animation-delay: .6s; }
.nav-botanical-divider .nb-dot--3 { animation-delay: 1.2s; }
/* Scroll reveal: blocks below the first screen ease in once. Added by nav.js only when motion is allowed. */
.js-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js-reveal.is-visible { opacity: 1; transform: none; }
/* Rotating quote (homepage): one quote at a time, slow crossfade, pauses on hover; dots select by hand. */
.quote-turn { position: relative; margin: 2.75rem auto 0; max-width: 640px; text-align: center; padding: 0 .5rem; }
.quote-turn::before { content: ""; display: block; width: 44px; height: 2px; margin: 0 auto 1.35rem; background: var(--gold); opacity: .75; border-radius: 1px; }
.quote-turn__frame { display: grid; }
.quote-turn__slide { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.quote-turn__slide.is-active { opacity: 1; pointer-events: auto; }
.quote-turn blockquote { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.62rem); line-height: 1.45; color: var(--charcoal); }
.quote-turn figcaption { margin-top: .75rem; font-family: 'Inter', sans-serif; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--brown); }
.quote-turn__dots { display: flex; justify-content: center; gap: .55rem; margin-top: 1.1rem; }
.quote-turn__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--gold); opacity: .32; cursor: pointer; transition: opacity .3s, transform .3s; }
.quote-turn__dot:hover, .quote-turn__dot:focus-visible { opacity: .7; }
.quote-turn__dot.is-active { opacity: 1; transform: scale(1.25); }
.quote-turn__dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Advocacy: a quote closing a section (the moss photo can become its backdrop later: add .act-quote--photo + background-image). */
.act-quote { margin: 2.3rem auto 0; max-width: 640px; padding: 1.4rem 1.7rem 1.3rem; border-left: 4px solid var(--ac, var(--brown)); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--ac, var(--brown)) 7%, #fffaf4); }
.act-quote blockquote { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.4; color: var(--charcoal); max-width: none; }
.act-quote figcaption { margin-top: .65rem; font-family: 'Inter', sans-serif; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brown); }
@media (prefers-reduced-motion: reduce) {
.nav-botanical-divider .nb-lotus path, .nav-botanical-divider .nb-dot { animation: none; }
.js-reveal { opacity: 1; transform: none; transition: none; }
.quote-turn__slide { transition: none; }
}
/* Home: What's new (under Find your path) */
.whats-new { margin: 0 0 0.5rem; }
.whats-new .pathway-eyebrow { margin-bottom: 1.4rem; }
.whats-new__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.whats-new__item { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(107, 85, 69, 0.10); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 0.2s, transform 0.2s; }
.whats-new__item:hover { box-shadow: 0 6px 20px rgba(107, 85, 69, 0.11); transform: translateY(-2px); }
.whats-new__item img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 7; object-fit: cover; }
.whats-new__text { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.95rem 1.1rem 1.15rem; }
.whats-new__label { font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wn); }
.whats-new__title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.25rem; line-height: 1.2; color: var(--ink); transition: color 0.2s; }
.whats-new__item:hover .whats-new__title { color: var(--wn); }
.whats-new__desc { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1rem; line-height: 1.45; color: var(--ink); }
@media (max-width: 700px) { .whats-new__grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
/* Advocacy: archive card + photo stacked in a story's side column */
.act-story__side { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.act-photo--side { margin: 0; }
.act-photo--side img { aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 560px) { .act-photo--side { max-width: 330px; } }
/* Research page: no index — first area starts right under the spectrum line */
.research-panel.research-area.research-area--first { padding-top: .6rem; }
/* Writing: subscribe photo (sunset above "If this work resonates,") */
.writing-subscribe__photo { width: min(440px, 100%); margin: 0 auto 1.6rem; }
.writing-subscribe__photo img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 12px; box-shadow: 0 14px 30px -22px rgba(42, 37, 31, 0.6); }
/* Research page: section labels as color blocks; square photos keep their shape */
.ra-head__eyebrow, body[data-page="research"] .section p.ra-head__eyebrow { display: inline-block; padding: .36rem .7rem .32rem; border-radius: 6px; background: color-mix(in srgb, var(--ra-accent, var(--brown-soft)) 72%, #2A251F); color: #fff; font-size: .74rem; letter-spacing: .12em; margin: 0 0 .85rem; }
.ra-head__photo--square img { aspect-ratio: 1 / 1; }
/* Intro photo, landscape variant (Connect: people in conversation) */
.research-intro-photo--wide { width: 340px; }
.research-intro-photo--wide img { aspect-ratio: 4 / 3; border-radius: 10px; box-shadow: 0 14px 30px -22px rgba(42, 37, 31, 0.6); }
@media (max-width: 640px) { .research-intro-photo.research-intro-photo--wide { max-width: 340px; } }
/* AOSA: single photo */
.aosa-photos.aosa-photos--single { grid-template-columns: minmax(0, 480px); }
/* Connect: intro photo caption */
.connect-intro-photo { margin: 0; width: 300px; }
.connect-intro-photo img { aspect-ratio: 8 / 7; border-radius: 10px; box-shadow: 0 14px 30px -22px rgba(42, 37, 31, 0.6); }
.connect-intro-photo figcaption { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.95rem; color: var(--brown); text-align: center; margin-top: 0.5rem; }
/* Thinking Partners: coach photo */
.society .coach-photo { float: right; width: 150px; margin: 0.2rem 0 0.6rem 1.1rem; }
.society .coach-photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 22px -16px rgba(42, 37, 31, 0.6); }
.society .coach-photo figcaption { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.85rem; line-height: 1.3; color: var(--brown); margin-top: 0.35rem; text-align: center; }
.society:has(.coach-photo)::after { content: ""; display: block; clear: both; }
@media (max-width: 560px) { .society .coach-photo { width: 120px; } }
/* Advocates › AOSA: photo + leadership graphic side by side; the graphic is shown whole */
.aosa-photos.aosa-photos--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.aosa-photos img.aosa-graphic { aspect-ratio: auto; object-fit: contain; background: #fffaf6; }
/* Pathway pages: photo */
.pathway-photo { margin: 1.25rem 0 1.5rem; max-width: 460px; }
.pathway-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 14px 30px -22px rgba(42, 37, 31, 0.6); }
.pathway-photo figcaption { font-size: .8rem; color: var(--brown); font-style: italic; margin-top: .45rem; }
/* Press page: portrait beside the intro, with a download link */
.press-intro-photo { margin: 0; width: 300px; }
.press-intro-photo > a { display: block; }
.press-intro-photo img { border-radius: 10px; box-shadow: 0 14px 30px -22px rgba(42, 37, 31, 0.6); }
.press-intro-photo figcaption { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.95rem; color: var(--brown); text-align: center; margin-top: 0.5rem; }
@media (max-width: 640px) { .research-intro-photo.press-intro-photo { max-width: 300px; } }
/* Now page: intro photo (Heather + Lauren, ACS 2026) */
.now-intro-photo { margin: 0; }
.now-intro-photo figcaption { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.95rem; color: var(--brown); text-align: center; margin-top: 0.5rem; }
@media (max-width: 640px) { .now-intro-photo { max-width: 340px; } }
/* Connect: three ways to reach me, staggered (message top right, schedule middle left, press bottom right) */
.connect-ways { display: flex; flex-direction: column; margin-top: 3rem; }
.connect-way { width: 62%; max-width: 460px; }
.connect-way .contact-form-heading, .connect-way .contact-form-intro, .connect-way .serif-trigger { text-align: center; }
.connect-way .contact-form-intro { margin-bottom: 0; }
.connect-way--message { align-self: flex-end; }
.connect-way--form { align-self: center; width: 100%; max-width: 640px; margin: 1.25rem 0 1rem; }
.connect-way--form .contact-form-intro { margin-bottom: 1.5rem; }
.connect-way--schedule { align-self: flex-start; margin-top: 3.25rem; }
.connect-way--press { align-self: flex-end; margin-top: 3.25rem; margin-bottom: 1rem; }
.connect-way .schedule-photo { width: min(220px, 66%); }
@media (max-width: 640px) {
.connect-way { width: 100%; max-width: 440px; }
.connect-way--message, .connect-way--schedule, .connect-way--press { align-self: center; margin-top: 2.5rem; }
.connect-way--message { margin-top: 0; }
}
/* Now page: AI-assisted composite beside the "age of AI" entry, labelled as such */
.now-entry__photo { float: right; width: 172px; margin: 0.25rem 0 0.75rem 1.4rem; }
.now-entry__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; box-shadow: 0 12px 26px -18px rgba(42, 37, 31, 0.6); }
.now-entry__photo figcaption { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.88rem; line-height: 1.35; color: var(--brown); margin-top: 0.45rem; text-align: center; }
.now-entry:has(.now-entry__photo)::after { content: ""; display: block; clear: both; }
@media (max-width: 640px) { .now-entry__photo { width: 132px; margin-left: 1rem; } }
/* ---------- Phone-width fixes (Oct 14) ---------- */
/* Resources tab strip: breathing room under the lede; 2x2 grid on narrow phones instead of clipping "Societies" */
.page-intro .lede + .resource-toggle { margin-top: 1.5rem; }
@media (max-width: 520px) {
.resource-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 100%; border-radius: 24px; }
.resource-toggle a { text-align: center; padding: 0.6rem 0.75rem; white-space: nowrap; }
.resource-toggle a:last-child:nth-child(odd) { grid-column: 1 / -1; } /* 5th tab (Mental Health) centered on its own row */
}
/* Resources hub cards: in the phone column layout the banner's flex-basis became a height and pushed the text into a hidden second column */
@media (max-width: 560px) {
.branch-card:has(.branch-card__img) { flex-wrap: nowrap; }
.branch-card .branch-card__img { flex: 0 0 auto; width: calc(100% + 3rem); margin: -1.25rem -1.4rem 0.25rem -1.6rem; }
.branch-card:has(.branch-card__img) > div:not(.branch-meta) { width: 100%; }
}
/* Coaching: Sharon Stein photo centered under the name on phones instead of squeezing the text beside it */
@media (max-width: 560px) {
.society .coach-photo { float: none; width: min(100%, 220px); margin: 0.5rem auto 1rem; }
}
/* #ILookLikeASurgeon story: let the chapter column shrink to the phone; keep the floated photo inside its frame */
.illas-chapter__content { min-width: 0; }
@media (max-width: 600px) {
body[data-page="ilook"] .illas-inline-photo--right img { width: 100%; }
body[data-page="ilook"] .illas-inline-photo--right figcaption { max-width: 100%; }
}
@media (max-width: 480px) {
body[data-page="ilook"] .illas-inline-photo--right { float: none; display: block; width: 168px; margin: 0.4rem auto 1.1rem !important; }
}
/* Now: tinted sections overhung the 1.5rem phone gutter by 0.5rem (rounded corners and pink edge were cut off) */
@media (max-width: 600px) {
body[data-page="now"] .now-section { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
}
/* About > With Gratitude: cards stack on phones (photo above the text) instead of a two-word-wide text column */
@media (max-width: 560px) {
.credits-card, .credits-card--photo-left { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.25rem 1.4rem; }
.credits-card:not(.credits-card--photo-left) .credits-photo { margin-right: 0; }
.credits-photo { max-width: 200px; max-height: 240px; }
}
/* Media > Talks & Speaking: thumbnail above the text on phones */
@media (max-width: 560px) {
.media-talk { flex-direction: column; gap: 0.9rem; }
.media-talk-thumb { width: 100%; max-width: 320px; }
}
/* ---------- Phone header: Menu button + drop-down (Oct 14) ---------- */
.nav-toggle { display: none; }
.header-menu { display: contents; } /* desktop/tablet: the wrapper is invisible to the header grid */
@media (max-width: 640px) {
.site-header { position: relative; padding: 0.35rem 0 0; }
.header-grid { display: grid; grid-template-columns: 52px 1fr 52px; grid-template-areas: "spacer brand toggle"; align-items: center; gap: 0.5rem; padding: 0.35rem 0; }
.header-brand { grid-area: brand; justify-content: center; }
.site-header .logo-image { height: 52px; }
.nav-toggle { grid-area: toggle; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 52px; height: 52px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 10px; color: var(--brown-soft); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav-toggle:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.nav-toggle__bars { display: block; position: relative; width: 22px; height: 16px; }
.nav-toggle__bars span { position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease, top .25s ease; }
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 7px; }
.nav-toggle__bars span:nth-child(3) { top: 14px; }
.nav-toggle__label { font-family: 'Inter', sans-serif; font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; line-height: 1; }
.site-header.nav-open .nav-toggle { color: var(--rose); }
.site-header.nav-open .nav-toggle__bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.site-header.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle__bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
.header-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #F6EEE1; border-top: 1px solid rgba(107, 85, 69, 0.14); border-bottom: 1px solid rgba(107, 85, 69, 0.18); box-shadow: 0 18px 30px -18px rgba(42, 37, 31, 0.35); padding: 0.5rem 1.25rem 1rem; }
.site-header.nav-open .header-menu { display: block; }
.header-menu .main-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; max-width: none; font-size: 0.76rem; }
.header-menu .main-nav a { display: block; padding: 0.72rem 0.25rem; text-align: center; border-bottom: 1px solid rgba(107, 85, 69, 0.10); }
.header-menu .main-nav a.active { color: var(--rose); border-bottom-color: var(--rose); }
.header-menu .header-social { display: flex; flex-wrap: nowrap; justify-content: center; gap: 1.3rem; padding: 0.95rem 0 0.1rem; }
.header-menu .header-social a { opacity: 0.75; }
.header-menu .header-social a svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .nav-toggle__bars span { transition: none; } }
/* ---------- Surgery & Palliative Care page (Oct 15) ---------- */
/* Reuses the Medical Education page's edu-* components; only the ladder, reading list, and a few page touches are new. */
body[data-page="palliative"] .page-intro { background: radial-gradient(ellipse at 15% 60%, rgba(170, 80, 150, 0.20) 0%, transparent 55%), radial-gradient(ellipse at 82% 25%, rgba(110, 180, 90, 0.22) 0%, transparent 45%), var(--cream-warm); }
.spc-ladder { list-style: none; counter-reset: rung; margin: 1.8rem 0 .6rem; padding: 0; display: grid; gap: .8rem; max-width: 820px; }
.spc-rung { --ac: var(--sage); --tag: var(--forest); counter-increment: rung; position: relative; margin: 0; padding: 1rem 1.25rem 1.05rem 3.4rem; border-radius: 12px; background: #fffaf4; border: 1px solid color-mix(in srgb, var(--ac) 35%, transparent); border-left: 4px solid var(--ac); }
.spc-rung--board { --ac: var(--purple); --tag: #7e3597; background: color-mix(in srgb, var(--ac) 7%, #fffaf4); }
.spc-rung::marker { content: ""; }
.spc-rung::before { content: counter(rung); position: absolute; left: 1rem; top: 1.05rem; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--ac); color: #fff; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; }
.spc-rung__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: .3rem; }
body[data-page="palliative"] .spc-rung__name { font-family: 'Cormorant Garamond', serif; font-size: 1.32rem; font-weight: 600; line-height: 1.2; margin: 0; }
.spc-tag { font-family: 'Inter', sans-serif; font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tag); border: 1px solid color-mix(in srgb, var(--ac) 60%, transparent); border-radius: 999px; padding: .16rem .55rem; white-space: nowrap; }
.spc-rung p { margin: 0 !important; font-size: .93rem; line-height: 1.55; max-width: none !important; color: var(--ink); }
body[data-page="palliative"] .spc-reading { list-style: none; margin: .6rem 0 1.4rem 0; padding: 0; max-width: 760px; }
.spc-reading li { margin: 0; padding: .75rem 0; border-bottom: 1px solid rgba(107, 85, 69, .18); line-height: 1.45; }
.spc-cite { display: block; margin-top: .25rem; font-size: .85rem; color: var(--brown); }
.spc-essay { margin: 1.3rem 0 1.5rem; max-width: 820px; }
.cta-stack.spc-cta { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 1rem 1.6rem; margin-top: 1.4rem; }
.reading-item p.spc-more { margin-top: .55rem; font-size: .9rem; }
.spc-patients { margin: 1.4rem 0 1.8rem; padding: 1.2rem 1.4rem 1.1rem; max-width: 820px; border-radius: 14px; background: color-mix(in srgb, var(--blue) 9%, #fffaf4); border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent); border-left: 5px solid var(--blue); scroll-margin-top: 120px; }
body[data-page="palliative"] .spc-patients__title { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600; margin: 0 0 .5rem; }
.spc-patients p { margin: 0 0 .6rem !important; max-width: none !important; }
body[data-page="palliative"] .spc-patients__list { margin: 0 0 0 1.1rem; padding: 0; max-width: none; }
.spc-patients__list li { margin: 0 0 .35rem; font-size: .95rem; }
.spc-patients__list li::marker { color: var(--blue); }
/* Two tracks (Oct 15): patients & families / surgeons & trainees */
.spc-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: .4rem 0 1.4rem; max-width: 860px; }
.spc-track { --ac: var(--blue); position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.4rem 2.4rem; border-radius: 16px; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--ac) 9%, #fffaf4); border: 1px solid color-mix(in srgb, var(--ac) 38%, transparent); border-top: 5px solid var(--ac); transition: transform .15s, background .15s; }
.spc-track--clinicians { --ac: var(--purple); }
.spc-track:hover, .spc-track:focus-visible { transform: translateY(-2px); background: color-mix(in srgb, var(--ac) 15%, #fffaf4); }
.spc-track__kicker { font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ac) 75%, #2a251f); }
.spc-track__title { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 600; line-height: 1.2; color: var(--charcoal); }
.spc-track__desc { font-size: .9rem; line-height: 1.5; color: var(--brown); }
.spc-track__arrow { position: absolute; right: 1.2rem; bottom: .9rem; font-size: 1.2rem; color: color-mix(in srgb, var(--ac) 75%, #2a251f); }
.spc-kicker { font-family: 'Inter', sans-serif; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--ac) 75%, #2a251f); margin-bottom: .1rem; }
.spc-articles { margin-bottom: 1.2rem; }
/* Patient articles ("What I Wish I Had Time to Tell You") */
.spc-article { max-width: 720px; }
body[data-page="palliative"] .spc-article h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(1.45rem, 2.6vw, 1.8rem); line-height: 1.2; margin: 2.2rem 0 .7rem; }
body[data-page="palliative"] .spc-article h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.3rem; margin: 1.5rem 0 .5rem; }
body[data-page="palliative"] .spc-article .spc-patients h2.spc-patients__title { margin: 0 0 .5rem; font-size: 1.4rem; }
body[data-page="palliative"] .spc-list { margin: .4rem 0 1.1rem 1.15rem; padding: 0; max-width: none; }
.spc-list li { margin: 0 0 .5rem; line-height: 1.55; }
.spc-summary { margin-top: .4rem; }
.spc-article__close { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.4rem); line-height: 1.4; color: var(--charcoal); margin: 2rem 0 1.2rem !important; }
body[data-page="palliative"] .spc-article h3.spc-article__sources-h { font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); margin: 1.6rem 0 .4rem; }
body[data-page="palliative"] .spc-sources { list-style: none; margin: 0 0 1rem; padding: 0; max-width: none; }
.spc-sources li { font-size: .85rem; line-height: 1.5; color: var(--brown); margin: 0 0 .4rem; }
.spc-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: .6rem 0 1.4rem; font-size: .92rem; line-height: 1.45; background: #fffaf4; border: 1px solid rgba(100, 170, 230, .35); border-radius: 12px; overflow: hidden; }
.spc-table th, .spc-table td { text-align: left; vertical-align: top; padding: .7rem .85rem; border-bottom: 1px solid rgba(107, 85, 69, .14); }
.spc-table thead th { font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #2c4c96; background: color-mix(in srgb, var(--blue) 10%, #fffaf4); }
.spc-table tbody th { font-weight: 600; color: var(--charcoal); width: 26%; }
.spc-table tbody tr:last-child th, .spc-table tbody tr:last-child td { border-bottom: 0; }
.spc-related { margin-top: 1.2rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
.spc-tracks { grid-template-columns: 1fr; }
.spc-table thead { display: none; }
.spc-table, .spc-table tbody, .spc-table tr, .spc-table th, .spc-table td { display: block; width: 100%; }
.spc-table tbody tr { padding: .6rem .2rem; border-bottom: 1px solid rgba(107, 85, 69, .18); }
.spc-table tbody tr:last-child { border-bottom: 0; }
.spc-table tbody th { width: auto; padding: .4rem .85rem .2rem; border: 0; }
.spc-table td { border: 0; padding: .25rem .85rem; }
.spc-table td::before { content: attr(data-label) ": "; font-weight: 600; color: #2c4c96; }
}
@media (max-width: 600px) {
.spc-rung { padding: .95rem 1rem 1rem 2.9rem; }
.spc-rung::before { left: .7rem; }
}
/* Round 5: Heather's nature photographs through the page, and the "where I'd start" box */
body[data-page="palliative"] .edu-block { display: flow-root; }
.spc-split { display: flex; align-items: flex-start; gap: 2.2rem; }
.spc-split__text { flex: 1; min-width: 0; }
.spc-split--left { flex-direction: row-reverse; }
.spc-photo { margin: 0; flex-shrink: 0; width: 220px; }
.spc-split .spc-photo { margin-top: .3rem; }
.spc-photo img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; border-radius: 10px; box-shadow: 0 14px 30px -22px rgba(42, 37, 31, 0.6); }
.spc-photo--float { width: 260px; }
.spc-photo--right { float: right; margin: .35rem 0 1rem 1.8rem; }
.spc-photo--left { float: left; margin: .35rem 1.8rem 1rem 0; }
body[data-page="palliative"] .edu-quote--lead { clear: both; }
.spc-start { margin: 1.8rem 0 2rem; padding: 1.2rem 1.4rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--ac) 8%, #fffaf4); border: 1px solid color-mix(in srgb, var(--ac) 38%, transparent); border-left: 5px solid var(--ac); }
body[data-page="palliative"] .spc-start__title { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600; margin: 0 0 .5rem; color: var(--charcoal); }
.spc-start p { margin: 0 0 .6rem; max-width: none; }
body[data-page="palliative"] .spc-start__list { margin: 0 0 .6rem 1.1rem; padding: 0; }
.spc-start__list li { margin: 0 0 .4rem; font-size: .95rem; }
.spc-start__list li::marker { color: var(--ac); }
.spc-start__more { font-size: .9rem; }
@media (max-width: 640px) {
.spc-split, .spc-split--left { flex-direction: column; gap: .4rem; }
.spc-photo, .spc-photo--float { width: 100%; }
.spc-split .spc-photo { margin: .2rem 0 1rem; }
.spc-photo--right, .spc-photo--left { float: none; margin: .4rem 0 1.2rem; }
.spc-photo img { aspect-ratio: 3 / 2; }
}
/* ---------- end Surgery & Palliative Care page ---------- */
/* ---------- Mental Health in Medicine page ---------- */
body[data-page="mental-health"] .page-intro { background: radial-gradient(ellipse at 15% 60%, rgba(100, 170, 230, 0.26) 0%, transparent 55%), radial-gradient(ellipse at 82% 25%, rgba(170, 80, 150, 0.16) 0%, transparent 45%), var(--cream-warm); }
.mh-help { max-width: 760px; margin: 1.6rem 0 .2rem; padding: .75rem 1rem .8rem; border-left: 3px solid var(--purple); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--purple) 8%, #fffaf4); font-size: .92rem; line-height: 1.55; color: var(--ink); }
.mh-help p { margin: 0 !important; max-width: none !important; }
.mh-help a { color: var(--rose-deep); }
.mh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 1.1rem 0 .4rem; max-width: 860px; }
.mh-stat { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem 1rem; border-radius: 12px; background: #fffaf4; border: 1px solid color-mix(in srgb, var(--ac) 40%, transparent); border-top: 4px solid var(--ac); }
.mh-stat__num { font-family: 'Cormorant Garamond', serif; font-size: 2.1rem; font-weight: 600; line-height: 1; color: var(--charcoal); }
.mh-stat__label { font-size: .82rem; line-height: 1.4; color: var(--brown); }
.edu-resource--help { border-color: color-mix(in srgb, var(--purple) 55%, transparent); background: color-mix(in srgb, var(--purple) 8%, #fffaf4); }
.edu-resource__meta { font-size: .84rem; font-weight: 600; color: var(--charcoal); }
body[data-page="mental-health"] .spc-reading { list-style: none; margin: .6rem 0 1.4rem 0; padding: 0; max-width: 760px; }
.mh-writing { display: grid; gap: 1rem; margin: 1.2rem 0 .6rem; max-width: 860px; }
.mh-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
@media (max-width: 600px) { .mh-cards-4 { grid-template-columns: 1fr; } }
body[data-page="mental-health"] .edu-six { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.unmask-related { text-align: center; font-size: .92rem; color: var(--brown); max-width: 560px; margin: 2.2rem auto 0; }
.unmask-related a { color: var(--rose-deep); }
/* ---------- end Mental Health in Medicine page ---------- */
/* ---------- Mental Health in Medicine, round 2: voices, Resources card, What's new four-up ---------- */
.mh-voice { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.6rem; align-items: start; max-width: 860px; margin: .2rem 0 .6rem; }
.mh-voice__photo { margin: 0; }
.mh-voice__photo img { display: block; width: 100%; aspect-ratio: 8 / 7; object-fit: cover; border-radius: 10px; box-shadow: 0 14px 30px -22px rgba(42, 37, 31, 0.6); }
.mh-voice__photo figcaption { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .95rem; color: var(--brown); text-align: center; margin-top: .5rem; }
.mh-voice__body p { max-width: 62ch; }
.mh-voice__body p:first-child { margin-top: 0; }
@media (max-width: 640px) { .mh-voice { grid-template-columns: 1fr; gap: 1rem; } .mh-voice__photo { max-width: 300px; } }
.branch-card--mental::before { background: var(--blue); }
.branch-card--mental .branch-eyebrow, .branch-card--mental .branch-arrow { color: #3f86c4; }
.branch-card--mental:hover .branch-arrow { border-bottom-color: #3f86c4; }
.branch-card--mental:hover { border-color: rgba(100, 170, 230, 0.45); }
.whats-new__grid:has(> .whats-new__item:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .whats-new__grid:has(> .whats-new__item:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; } }
@media (max-width: 700px) { .whats-new__grid:has(> .whats-new__item:nth-child(4)) { grid-template-columns: 1fr; max-width: 420px; } }
/* ---------- end Mental Health in Medicine, round 2 ---------- */
/* ---------- Mental Health in Medicine, round 3: featured talk ---------- */
.mh-video { margin: .9rem 0 1.2rem; max-width: 760px; }
.mh-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #1d1d1d; box-shadow: 0 14px 30px -20px rgba(42, 37, 31, 0.6); }
.mh-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mh-video figcaption { font-size: .88rem; line-height: 1.5; color: var(--brown); margin-top: .6rem; }
/* ---------- end Mental Health in Medicine, round 3 ---------- */
/* ---------- Mental Health page, round 4: photos, drop-downs, featured talk (Oct 15) ---------- */
body[data-page="mental-health"] .edu-block { display: flow-root; }
.mh-split { display: flex; align-items: flex-start; gap: 2.2rem; }
.mh-split__text { flex: 1; min-width: 0; }
.mh-split--left { flex-direction: row-reverse; }
.mh-photo { margin: .3rem 0 0; flex-shrink: 0; width: 220px; }
.mh-photo img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; border-radius: 10px; box-shadow: 0 14px 30px -22px rgba(42, 37, 31, 0.6); }
.mh-more { margin: 1.1rem 0; border: 1px solid color-mix(in srgb, var(--ac) 32%, transparent); border-radius: 10px; overflow: hidden; background: #fffaf4; }
.mh-more > summary { font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--charcoal); padding: .85rem 1.2rem; cursor: pointer; list-style: none; display: flex; align-items: center; gap: .7rem; background: color-mix(in srgb, var(--ac) 8%, #fffaf4); user-select: none; line-height: 1.4; transition: background .2s; }
.mh-more > summary::-webkit-details-marker { display: none; }
.mh-more > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; flex-shrink: 0; border-right: 1.6px solid var(--ac); border-bottom: 1.6px solid var(--ac); transform: rotate(45deg); margin-top: -3px; transition: transform .25s; }
.mh-more[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.mh-more[open] > summary { border-bottom: 1px solid color-mix(in srgb, var(--ac) 22%, transparent); }
.mh-more > summary:hover { background: color-mix(in srgb, var(--ac) 14%, #fffaf4); }
.mh-more__body { padding: .2rem 1.2rem 1rem; }
.mh-more__body > :first-child { margin-top: .9rem; }
.mh-more__body > :last-child { margin-bottom: 0; }
.mh-feature { margin: 1.8rem 0 1.6rem; padding: 1.2rem 1.4rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--ac) 8%, #fffaf4); border: 1px solid color-mix(in srgb, var(--ac) 38%, transparent); border-left: 5px solid var(--ac); }
.mh-feature__kicker { display: block; font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ac); margin-bottom: .3rem; }
body[data-page="mental-health"] .mh-feature__title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; margin: 0 0 .5rem; color: var(--charcoal); }
.mh-feature p { margin: 0 0 .6rem; max-width: none; }
@media (max-width: 640px) {
.mh-split, .mh-split--left { flex-direction: column; gap: .4rem; }
.mh-photo { width: 100%; margin: .2rem 0 1rem; }
.mh-photo img { aspect-ratio: 3 / 2; }
.mh-more > summary { padding: .8rem 1rem; }
.mh-more__body { padding: .2rem 1rem .9rem; }
}
/* ---------- end Mental Health page, round 4 ---------- */
/* ---------- Movements: #ILookLikeASurgeon + #UnmaskMedicine set apart from the section menu (Oct 15) ---------- */
.header-movements { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; font-family: 'Inter', sans-serif; line-height: 1.25; white-space: nowrap; }
.header-movements__label { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brown-soft); opacity: 0.85; margin-bottom: 0.1rem; }
.header-movements a { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--rose); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.header-movements a:hover, .header-movements a.active { border-bottom-color: currentColor; }
.header-movements a:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
@media (min-width: 861px) {
/* right column: Movements on top, the social icons beneath */
.header-grid { grid-template-columns: minmax(200px, 280px) 1fr auto; grid-template-areas: "brand nav moves" "brand nav social"; column-gap: 1.75rem; row-gap: 1.1rem; }
.header-brand { grid-area: brand; }
.header-menu > .main-nav { grid-area: nav; }
.header-movements { grid-area: moves; align-self: end; justify-self: end; }
.header-social { grid-area: social; align-self: start; justify-self: end; grid-template-columns: repeat(6, 18px); gap: 0.6rem 0.75rem; }
}
@media (min-width: 861px) and (max-width: 1147px) {
/* narrower than the 1100px container: keep side margins and a slightly smaller logo */
.header-grid { grid-template-columns: minmax(180px, 232px) 1fr auto; column-gap: 1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
.site-header .logo-image { height: 66px; }
}
@media (min-width: 641px) and (max-width: 860px) {
/* tablet: the header stacks and centres; Movements sit on one line under the menu */
.header-movements { flex-direction: row; align-items: baseline; gap: 0.9rem; }
.header-movements__label { margin-bottom: 0; }
}
@media (max-width: 640px) {
.header-menu .header-movements { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.3rem 1.2rem; padding: 0.95rem 0 0.25rem; border-bottom: 1px solid rgba(107, 85, 69, 0.10); }
.header-menu .header-movements__label { flex-basis: 100%; text-align: center; }
.header-menu .header-movements a { font-size: 0.9rem; }
}
/* ---------- Homepage greeter for #ILookLikeASurgeon visitors (Oct 15) ---------- */
.hero-greeter { margin: 1.4rem 0 0; font-family: 'Inter', sans-serif; font-size: 0.9rem; }
.hero-greeter a { display: inline-block; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rose) 45%, transparent); background: rgba(255, 255, 255, 0.55); color: var(--charcoal); text-decoration: none; transition: background .2s, border-color .2s; }
.hero-greeter a strong { color: var(--rose); font-weight: 600; }
.hero-greeter a:hover { background: #fff; border-color: var(--rose); }
.hero-greeter a:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
/* SANARTE photos (Juana Alicia, permission Oct 15, 2026): show the murals whole, credit line beneath */
.act-mural__img-link, .stop-bridge__img-link { display: block; border-radius: 12px; }
.act-mural__img-link:focus-visible, .stop-bridge__img-link:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.stop-bridge__mural--photo img { aspect-ratio: auto; object-fit: contain; height: auto; border-radius: 10px; box-shadow: 0 16px 32px -24px rgba(42,37,31,.55); }
.act-mural--photo img { height: auto; }
.act-mural__credit { display: block; margin-top: .45rem; font-size: .76rem; line-height: 1.5; }
/* ---------- About drop-down: My Story / Media / Press (Oct 15) ---------- */
.nav-drop { position: relative; display: inline-flex; }
.nav-drop > a::after { content: ""; display: inline-block; width: 0.36em; height: 0.36em; margin: 0 0 0.22em 0.45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.55; vertical-align: middle; }
.nav-drop__menu { position: absolute; top: 100%; left: -1.15rem; padding-top: 0.55rem; z-index: 40; visibility: hidden; opacity: 0; transition: opacity .15s ease, visibility .15s; }
.nav-drop:hover .nav-drop__menu, .nav-drop:focus-within .nav-drop__menu { visibility: visible; opacity: 1; }
.nav-drop__panel { display: flex; flex-direction: column; min-width: 10.5rem; padding: 0.4rem 0; background: #FBF6EE; border: 1px solid rgba(107, 85, 69, 0.14); border-radius: 10px; box-shadow: 0 16px 30px -18px rgba(42, 37, 31, 0.4); }
.main-nav .nav-drop__panel a { display: block; padding: 0.55rem 1.15rem; border-bottom: 0; white-space: nowrap; text-align: left; }
.main-nav .nav-drop__panel a:hover, .main-nav .nav-drop__panel a[aria-current="page"] { color: var(--rose); background: rgba(230, 50, 150, 0.05); }
.main-nav .nav-drop__panel a:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .nav-drop__menu { transition: none; } }
@media (max-width: 640px) {
/* phone menu stays as it was: About is one item; Media and Press are linked from the About page */
.header-menu .nav-drop { display: contents; }
.header-menu .nav-drop__menu { display: none; }
.header-menu .nav-drop > a::after { display: none; }
}
/* ---------- About: each section's title + one-line lede sit on its photo, on a soft frosted panel (Oct 15) ---------- */
.my-path.about-banner { --inset: clamp(0.9rem, 2.4vw, 1.6rem); --panel-w: min(31rem, 60%);
display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
.about-banner > .my-path__body { display: contents; }
.my-path.about-banner::before { content: ""; grid-column: 1; grid-row: 1 / 3; justify-self: start; position: relative; z-index: 1;
width: var(--panel-w); margin: var(--inset) 0 0 var(--inset); border-radius: 12px;
background: rgba(246, 239, 227, 0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
box-shadow: 0 0 26px 12px rgba(246, 239, 227, 0.45); }
.about-banner > h2, .about-banner .my-path__lede { grid-column: 1; justify-self: start; position: relative; z-index: 2; width: var(--panel-w); box-sizing: border-box; }
.my-path.about-banner > h2 { grid-row: 1; margin: var(--inset) 0 0 var(--inset); padding: 1.05rem 1.35rem 0.35rem; }
.about-banner .my-path__lede { grid-row: 2; margin: 0 0 var(--inset) var(--inset); padding: 0 1.35rem 1.15rem; color: var(--charcoal); }
.about-banner .path-map-wrap { grid-column: 1; grid-row: 1 / 4; margin: 0; position: relative; min-height: clamp(280px, 33vw, 400px); border-radius: 10px; overflow: hidden; }
.about-banner .path-map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.about-banner > .my-path__body > details { grid-column: 1; margin-top: 1.5rem; }
#movement.about-banner { --panel-w: min(31rem, 40%); } /* keep the panel clear of the runners */
#movement.about-banner .path-map-img { object-position: 50% 35%; }
@media (max-width: 600px) {
/* phones: the panel sits along the bottom of the photo, full width */
.my-path.about-banner, #movement.about-banner { --inset: 0.75rem; --panel-w: calc(100% - 1.5rem); grid-template-rows: 1fr auto auto; }
.my-path.about-banner::before { grid-row: 2 / 4; margin: 0 0 var(--inset) var(--inset); }
.my-path.about-banner > h2 { grid-row: 2; margin: 0 0 0 var(--inset); padding-top: 0.9rem; }
.about-banner .my-path__lede { grid-row: 3; font-size: 1.05rem; }
.about-banner .path-map-wrap { min-height: 360px; }
#movement.about-banner .path-map-wrap { min-height: 420px; }
#movement.about-banner .path-map-img { object-position: 62% 15%; }
}
/* About drop-down: the About page's sections, indented under My Story (Oct 15) */
.main-nav .nav-drop__panel a.nav-drop__sub { text-transform: none; letter-spacing: 0.01em; font-size: 0.95em; padding: 0.34rem 1.15rem 0.34rem 1.85rem; color: var(--brown); }
.main-nav .nav-drop__panel a.nav-drop__sub:hover { color: var(--rose); }
.main-nav .nav-drop__panel a.nav-drop__sep { margin-top: 0.4rem; padding-top: 0.75rem; border-top: 1px solid rgba(107, 85, 69, 0.14); }
/* Connect lives in the About drop-down on desktop/tablet; phones keep it in the Menu list */
.main-nav a.nav-phone-only { display: none; }
@media (max-width: 640px) { .header-menu .main-nav a.nav-phone-only { display: block; } }
/* Phone menu: an odd item out (Connect) centres across both columns (Oct 15) */
@media (max-width: 640px) { .header-menu .main-nav > a:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* ---------- Advocacy: Black women's health (Oct 16) ---------- */
.act-bwh { margin: 2.4rem 0 1.6rem; padding-top: 1.6rem; border-top: 1px solid color-mix(in srgb, var(--terracotta) 30%, transparent); scroll-margin-top: 120px; }
.act-bwh .act-desc + .act-desc { margin-top: .9rem; }
.act-bwh__h { font-family: 'Inter', sans-serif; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #b85a1c; margin: 1.6rem 0 0; }
.act-bwh .act-resource { border-color: rgba(250, 120, 40, .35); }
.act-bwh__fine { font-size: .8rem; color: var(--brown-soft); max-width: 68ch; margin-top: .9rem; }
/* ---------- end Advocacy: Black women's health ---------- */
/* ---------- Advocacy dropdowns (Oct 16) ---------- */
details.act-drop > summary { list-style: none; display: block; position: relative; cursor: pointer; padding-right: 3.4rem; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
details.act-drop > summary::-webkit-details-marker { display: none; }
details.act-drop > summary::marker { content: ""; }
details.act-drop > summary .act-label, details.act-drop > summary .act-drop__teaser { display: block; }
details.act-drop > summary .act-heading { margin-bottom: .55rem; transition: color .2s ease; }
.act-drop__teaser { font-size: .98rem; line-height: 1.55; color: var(--brown-soft); max-width: 62ch; }
details.act-drop[open] > summary .act-drop__teaser { display: none; }
details.act-drop[open] > summary .act-heading { margin-bottom: 1.3rem; }
details.act-drop > summary:hover .act-heading { color: color-mix(in srgb, var(--ac) 70%, var(--charcoal)); }
details.act-drop > summary:focus-visible { outline: 2px solid var(--ac); outline-offset: 6px; }
.act-drop__toggle { position: absolute; right: .2rem; top: 1.55rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ac) 55%, transparent); background: color-mix(in srgb, var(--ac) 8%, #fffaf4); transition: background .2s ease, transform .25s ease; }
.act-drop__toggle::before, .act-drop__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--ac); border-radius: 2px; transition: transform .25s ease; }
.act-drop__toggle::after { transform: rotate(90deg); }
details.act-drop[open] > summary .act-drop__toggle::after { transform: rotate(0deg); }
details.act-drop > summary:hover .act-drop__toggle { background: color-mix(in srgb, var(--ac) 16%, #fffaf4); }
details.act-drop[open] > summary { margin-bottom: 0; }
@media (max-width: 560px) { details.act-drop > summary { padding-right: 2.9rem; } .act-drop__toggle { width: 2rem; height: 2rem; top: 1.45rem; right: 0; } .act-drop__teaser { font-size: .93rem; } }
@media (prefers-reduced-motion: reduce) { .act-drop__toggle, .act-drop__toggle::after, details.act-drop > summary .act-heading { transition: none; } }
/* ---------- end Advocacy dropdowns ---------- */
/* ---------- Surgical Palliative Care Exchange (Oct 2026, DRAFT) ---------- */
/* Pages: palliative-care-exchange.html + exchange-*.html (body.xc, data-page="resources" so the Resources nav item stays active),
plus one card on resources.html (.branch-card--exchange). Small pink text uses --xc-pink-text (≥4.5:1 on white and on the intro wash). */
:root { --xc-pink-text: #A3236C; --xc-purple-text: #7E3597; --xc-blue-text: #2F6FA8; }
/* Resources hub card */
.branch-card--exchange::before { background: var(--pink); }
.branch-card--exchange .branch-eyebrow, .branch-card--exchange .branch-arrow { color: var(--xc-pink-text); }
.branch-card--exchange:hover .branch-arrow { border-bottom-color: var(--xc-pink-text); }
.branch-card--exchange:hover { border-color: rgba(230, 50, 150, 0.35); }
.branch-card--exchange .branch-card__img { object-position: center 40%; }
/* Draft notice (remove at release) */
.xc-draftbar { background: #FBF1D9; border-bottom: 1px solid rgba(201, 150, 58, 0.55); color: var(--charcoal); font-size: .86rem; line-height: 1.5; padding: .7rem 0; }
.xc-draftbar p { margin: 0 auto; max-width: 72ch; text-align: center; }
.xc-draftbar strong { color: #7A4F12; letter-spacing: .02em; }
/* Intro: lighter warm wash so small pink text and the italic lede keep their contrast */
body.xc .page-intro {
background:
radial-gradient(ellipse at 6% 85%, rgba(230, 50, 150, 0.13) 0%, transparent 42%),
radial-gradient(ellipse at 88% 12%, rgba(196, 174, 224, 0.28) 0%, transparent 46%),
radial-gradient(ellipse at 70% 95%, rgba(110, 180, 90, 0.10) 0%, transparent 40%),
#F2E9DA;
padding: 3.6rem 0 2.2rem;
}
body.xc .page-intro .eyebrow { color: var(--xc-pink-text); font-weight: 600; }
body.xc .page-intro .eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(163, 35, 108, .35); }
body.xc .page-intro .eyebrow a:hover { border-bottom-color: var(--xc-pink-text); }
body.xc .page-intro h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
body.xc .page-intro .lede { max-width: 62ch; }
.xc-hl { background: linear-gradient(to bottom, transparent 50%, rgba(230, 50, 150, 0.18) 50%, rgba(230, 50, 150, 0.18) 80%, transparent 80%); padding: 0 .15em; margin: 0 -.05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.xc-jump { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.xc-jump a { display: inline-flex; align-items: center; min-height: 44px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--charcoal); padding: .4rem .95rem; border-radius: 999px; border: 1px solid rgba(230, 50, 150, .4); background: rgba(255, 250, 244, .8); transition: background .15s; }
.xc-jump a:hover { background: #fff; }
/* Shared focus ring for everything new */
body.xc a:focus-visible, body.xc button:focus-visible, .branch-card--exchange:focus-visible { outline: 2px solid var(--xc-pink-text); outline-offset: 3px; border-radius: 4px; }
/* Sections */
.xc-block { padding: 3.2rem 0 1rem; }
.xc-block + .xc-block { padding-top: 2.6rem; }
.xc-label { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ac, var(--xc-pink-text)); margin-bottom: .45rem; }
body.xc .section h2.xc-h2, .xc-h2 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(1.65rem, 3.4vw, 2.1rem); line-height: 1.15; color: var(--charcoal); margin: 0 0 .7rem; }
body.xc .section p.xc-desc, .xc-desc { max-width: 64ch; color: var(--ink); margin: 0 0 1.4rem; }
/* Undo the site's generic `.section ul` prose rules (680px cap, left indent) for the Exchange's grids */
body.xc .section ul.xc-cards, body.xc .section ul.xc-topics, body.xc .section ul.xc-ways, body.xc .section ul.xc-perm-list,
body.xc .section ul.xc-toc, body.xc ul.xc-jump { max-width: none; margin-left: 0; margin-right: 0; list-style: none; }
body.xc .section ul.xc-cards > li { margin-bottom: 0; padding: 1.4rem 1.5rem 1.25rem; }
body.xc .section ul.xc-topics > li { margin-bottom: 0; padding: 1.1rem 1.2rem 1.15rem; }
body.xc .section ul.xc-ways { max-width: 820px; }
body.xc .section ul.xc-perm-list { max-width: 760px; }
/* Featured cards: 3 / 2 / 1 columns */
.xc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: .4rem 0 1rem; padding: 0; list-style: none; }
@media (max-width: 959px) { .xc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .xc-cards { grid-template-columns: 1fr; gap: 18px; } }
.xc-card { --ac: var(--pink); --ac-text: var(--xc-pink-text); display: flex; flex-direction: column; gap: .7rem; margin: 0; padding: 1.4rem 1.5rem 1.25rem; background: #fff; border: 1px solid rgba(107, 85, 69, .14); border-top: 4px solid var(--ac); border-radius: 8px; box-shadow: 0 16px 32px -28px rgba(42, 37, 31, .6); }
.xc-card--purple { --ac: var(--purple); --ac-text: var(--xc-purple-text); }
.xc-card--blue { --ac: var(--blue); --ac-text: var(--xc-blue-text); }
body.xc .section .xc-card h3.xc-card__title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: var(--charcoal); margin: 0; }
body.xc .section .xc-card p.xc-card__desc { font-size: .95rem; line-height: 1.55; margin: 0; max-width: none; color: var(--ink); }
.xc-status { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; padding: .25rem .65rem; border-radius: 999px; color: var(--ac-text, var(--xc-pink-text)); border: 1px solid color-mix(in srgb, var(--ac, var(--pink)) 55%, transparent); background: color-mix(in srgb, var(--ac, var(--pink)) 7%, #fff); }
.xc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ac, var(--pink)); }
.xc-status--prep { color: #6B4A2E; border: 1px dashed rgba(130, 85, 50, .55); background: #FBF7F0; }
.xc-status--prep::before { background: transparent; border: 1.5px solid #8C6B50; }
.xc-meta { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: .2rem 0 0; padding: .85rem 0 0; border-top: 1px solid rgba(107, 85, 69, .12); font-size: .88rem; line-height: 1.45; }
.xc-meta dt { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6B4A2E; padding-top: .15rem; }
.xc-meta dd { margin: 0; color: var(--ink); }
.xc-tbc { font-style: italic; color: #6B4A2E; }
.xc-sub { display: block; font-size: .78rem; color: #6B4A2E; }
.xc-card__foot { margin-top: auto; padding-top: .9rem; border-top: 1px dashed rgba(107, 85, 69, .25); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.xc-avail { font-size: .8rem; color: #6B4A2E; display: inline-flex; align-items: center; gap: .35rem; }
.xc-avail svg { flex: 0 0 auto; }
.xc-more { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; font-weight: 500; color: var(--ac-text); text-decoration: none; border-bottom: 1px solid transparent; }
.xc-more:hover { border-bottom-color: currentColor; }
/* Browse by topic */
.xc-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: .4rem 0 1rem; padding: 0; list-style: none; }
@media (max-width: 959px) { .xc-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .xc-topics { grid-template-columns: 1fr; } }
.xc-topic { --ac: var(--pink); margin: 0; padding: 1.1rem 1.2rem 1.15rem; border-radius: 8px; background: color-mix(in srgb, var(--ac) 5%, #FFFAF4); border: 1px solid color-mix(in srgb, var(--ac) 28%, transparent); border-left: 4px solid var(--ac); }
body.xc .section .xc-topic h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; line-height: 1.2; color: var(--charcoal); margin: 0 0 .25rem; }
body.xc .section .xc-topic p { font-size: .86rem; line-height: 1.5; color: #5A4636; margin: 0 0 .6rem; max-width: none; }
body.xc .section ul.xc-topic__list { list-style: none; margin: 0; padding: 0; max-width: none; }
body.xc .section ul.xc-topic__list li { margin: 0; padding: .1rem 0; font-size: .9rem; line-height: 1.4; }
.xc-topic__list a { color: var(--charcoal); text-decoration: none; border-bottom: 1px solid rgba(163, 35, 108, .35); display: inline-block; padding: .3rem 0 .1rem; }
.xc-topic__list a:hover { border-bottom-color: var(--xc-pink-text); color: var(--xc-pink-text); }
.xc-topic__state { display: block; font-size: .74rem; color: #6B4A2E; }
.xc-topic--open { border-left-style: dashed; background: #FFFAF4; }
.xc-topic--open .xc-topic__empty { font-size: .88rem; font-style: italic; color: #6B4A2E; }
.xc-topic--open .xc-topic__empty a { color: var(--xc-pink-text); font-style: normal; text-decoration: none; border-bottom: 1px solid rgba(163, 35, 108, .4); }
/* Contribute */
.xc-block.xc-contribute { margin-top: 1.4rem; padding: 2.6rem 2.4rem 2.2rem; border-radius: 14px; border: 1px solid rgba(170, 80, 150, .16);
background: radial-gradient(ellipse at 94% 6%, rgba(196, 174, 224, .30) 0%, transparent 42%), radial-gradient(ellipse at 3% 96%, rgba(230, 50, 150, .10) 0%, transparent 38%), #F4ECDF; }
@media (max-width: 639px) { .xc-block.xc-contribute { padding: 1.8rem 1.1rem 1.4rem; margin-left: -.35rem; margin-right: -.35rem; } }
.xc-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: .2rem 0 1.4rem; padding: 0; list-style: none; max-width: 820px; }
@media (max-width: 639px) { .xc-ways { grid-template-columns: 1fr; } }
body.xc .section ul.xc-ways li { margin: 0; padding: .9rem 1.05rem; background: #fff; border-radius: 8px; border: 1px solid rgba(107, 85, 69, .14); display: flex; flex-direction: column; gap: .15rem; }
.xc-ways__name { font-family: 'Cormorant Garamond', serif; font-size: 1.22rem; font-weight: 600; color: var(--charcoal); line-height: 1.2; }
.xc-ways__desc { font-size: .88rem; line-height: 1.45; color: #5A4636; }
.xc-ownership { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.15rem; color: var(--brown); max-width: 62ch; }
.xc-formwrap { max-width: 720px; margin: 2rem 0 0; }
.xc-formhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-bottom: .9rem; }
body.xc .section .xc-formhead h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 600; color: var(--charcoal); margin: 0; }
.xc-preview-tag { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7A4F12; background: #FBF1D9; border: 1px solid rgba(201, 150, 58, .6); border-radius: 999px; padding: .22rem .65rem; }
.xc-form.contact-form { padding: 1.8rem 1.7rem 1.6rem; }
.xc-privacy { background: #fff; border-left: 4px solid var(--purple); border-radius: 0 6px 6px 0; padding: .85rem 1rem; margin: 0 0 1.5rem; font-size: .9rem; line-height: 1.5; color: var(--ink); }
.xc-privacy strong { color: var(--charcoal); }
.xc-form fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
.xc-form legend, .xc-q { font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--forest); margin-bottom: .55rem; padding: 0; }
.xc-form .xc-hint { display: block; font-size: .82rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: #5A4636; margin-top: .2rem; }
.xc-form input[type="url"] { font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--charcoal); padding: .7rem .85rem; border: 1px solid rgba(170, 80, 150, .18); border-radius: 5px; background: #fff; width: 100%; }
.xc-form input[type="url"]:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(230, 50, 150, .15); }
.xc-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.xc-choices--stack { flex-direction: column; align-items: flex-start; }
.xc-choice { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .45rem .9rem; border: 1px solid rgba(107, 85, 69, .25); border-radius: 999px; background: #fff; font-size: .92rem; line-height: 1.3; color: var(--charcoal); cursor: pointer; transition: border-color .15s, background .15s; }
.xc-choice input { accent-color: var(--xc-pink-text); width: 1.05rem; height: 1.05rem; margin: 0; }
.xc-choice:hover { border-color: rgba(163, 35, 108, .55); }
.xc-choice:has(input:checked) { border-color: var(--xc-pink-text); background: #FDF2F8; }
.xc-choice:has(input:focus-visible) { outline: 2px solid var(--xc-pink-text); outline-offset: 2px; }
.xc-form fieldset.xc-perms { background: #fff; border: 1px solid rgba(107, 85, 69, .16); border-radius: 8px; padding: 1.15rem 1.25rem .4rem; margin: .2rem 0 1.4rem; }
@media (max-width: 480px) { .xc-form fieldset.xc-perms { padding: 1rem .9rem .3rem; } .xc-form.contact-form { padding: 1.4rem 1rem 1.2rem; } }
.xc-form fieldset.xc-perms > legend { float: left; width: 100%; margin-bottom: .3rem; }
.xc-perms__intro { clear: both; font-size: .9rem; line-height: 1.5; color: #5A4636; margin: 0 0 1rem; }
.xc-form fieldset.xc-perm { border-top: 1px solid rgba(107, 85, 69, .12); padding: .95rem 0 .2rem; margin: 0 0 .9rem; }
.xc-perm legend { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--charcoal); margin-bottom: .1rem; }
.xc-form fieldset.xc-perm > legend { float: left; width: 100%; }
.xc-perm .xc-hint { clear: both; margin: 0 0 .6rem; padding-top: .1rem; }
.xc-formoff { margin: .6rem 0 0; padding: .95rem 1.1rem; border: 1px dashed rgba(130, 85, 50, .55); border-radius: 6px; background: rgba(255, 255, 255, .55); font-size: .92rem; line-height: 1.5; color: #5A4636; text-align: center; }
.xc-formoff strong { color: var(--charcoal); }
/* Independent-project note */
.xc-independent { margin: 2.6rem 0 1rem; padding: 1.2rem 1.4rem; border-radius: 8px; background: var(--cream-warm); border-left: 4px solid var(--gold); font-size: .9rem; line-height: 1.6; color: var(--ink); max-width: 820px; }
.xc-independent p { margin: 0 0 .5rem !important; max-width: none !important; }
.xc-independent p:last-child { margin-bottom: 0 !important; }
/* Resource page */
.xc-resource .xc-status { margin-top: 1.1rem; }
.xc-toc { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: 0 0 .6rem; padding: 0 0 1.2rem; list-style: none; border-bottom: 1px solid rgba(107, 85, 69, .14); font-size: .86rem; }
body.xc .section ul.xc-toc li { margin: 0; padding: 0; }
.xc-toc a { color: #5A4636; text-decoration: none; border-bottom: 1px solid rgba(107, 85, 69, .3); display: inline-block; padding: .35rem 0 .05rem; }
.xc-toc a:hover { color: var(--xc-pink-text); border-bottom-color: var(--xc-pink-text); }
.xc-rsec { padding: 1.6rem 0 .4rem; }
body.xc .section .xc-rsec h2 { font-size: clamp(1.45rem, 2.8vw, 1.8rem); margin: 0 0 .7rem; }
.xc-glance { display: grid; grid-template-columns: 9.5rem 1fr; gap: .6rem 1.2rem; margin: .2rem 0 .8rem; padding: 1.1rem 1.25rem; background: #fff; border-radius: 8px; border: 1px solid rgba(107, 85, 69, .14); }
@media (max-width: 560px) { .xc-glance { grid-template-columns: 1fr; gap: .1rem; } .xc-glance dd { margin-bottom: .6rem; } }
.xc-glance dt { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6B4A2E; padding-top: .2rem; }
.xc-glance dd { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--ink); }
.xc-pending { display: flex; gap: .8rem; align-items: flex-start; margin: .4rem 0 1rem; padding: .9rem 1.05rem; border-radius: 8px; background: #FFFAF4; border: 1px dashed rgba(130, 85, 50, .5); font-size: .94rem; line-height: 1.55; color: #4A3B2E; max-width: 680px; }
.xc-pending svg { flex: 0 0 auto; margin-top: .2rem; }
body.xc .section .xc-pending p { margin: 0; max-width: none; color: inherit; }
body.xc .section ol.xc-objectives { margin: .3rem 0 1rem 1.3rem; max-width: 680px; }
body.xc .section ol.xc-objectives li { margin-bottom: .55rem; }
body.xc .section ol.xc-objectives li::marker { color: var(--xc-pink-text); font-weight: 600; }
body.xc .section ol.xc-run { list-style: none; margin: .4rem 0 1.2rem; padding: 0; max-width: 680px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(107, 85, 69, .14); background: #fff; }
body.xc .section ol.xc-run li { display: grid; grid-template-columns: 5.2rem 1fr auto; gap: .8rem; align-items: baseline; margin: 0; padding: .65rem 1rem; border-top: 1px solid rgba(107, 85, 69, .1); font-size: .93rem; line-height: 1.45; }
body.xc .section ol.xc-run li:first-child { border-top: 0; }
.xc-run__slides { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6B4A2E; }
.xc-run__min { font-size: .85rem; color: #6B4A2E; white-space: nowrap; }
@media (max-width: 480px) { body.xc .section ol.xc-run li { grid-template-columns: 1fr auto; } .xc-run__slides { grid-column: 1 / -1; } }
body.xc .section ol.xc-refs { margin: .3rem 0 .6rem 1.4rem; max-width: 700px; }
body.xc .section ol.xc-refs li { font-size: .9rem; line-height: 1.5; margin-bottom: .5rem; }
body.xc .section ol.xc-refs li::marker { color: #6B4A2E; }
.xc-perm-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: .6rem 0 1rem; padding: 0; list-style: none; max-width: 760px; }
@media (max-width: 639px) { .xc-perm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.xc .section ul.xc-perm-list li { margin: 0; padding: .75rem .85rem; border-radius: 8px; background: #fff; border: 1px dashed rgba(130, 85, 50, .45); display: flex; flex-direction: column; gap: .1rem; }
.xc-perm-list__act { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; color: var(--charcoal); }
.xc-perm-list__state { font-size: .8rem; color: #6B4A2E; }
.xc-back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1.4rem; color: var(--xc-pink-text); text-decoration: none; font-size: .95rem; border-bottom: 1px solid rgba(163, 35, 108, .35); }
.xc-back:hover { border-bottom-color: var(--xc-pink-text); }
@media (prefers-reduced-motion: reduce) { .xc-jump a, .xc-choice { transition: none; } }
/* Library: search + topic chips + list (Oct 16) */
.xc-lib-controls[hidden], body.xc .section p.xc-empty[hidden] { display: none; }
.xc-lib-controls { display: flex; flex-direction: column; gap: .9rem; margin: .4rem 0 1.2rem; }
.xc-search { display: flex; align-items: center; gap: .6rem; max-width: 560px; padding: 0 1rem; min-height: 50px; background: #fff; border: 1px solid rgba(107, 85, 69, .25); border-radius: 999px; color: #6B4A2E; transition: border-color .15s, box-shadow .15s; }
.xc-search:focus-within { border-color: var(--xc-pink-text); box-shadow: 0 0 0 3px rgba(230, 50, 150, .15); }
.xc-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--charcoal); padding: .7rem 0; }
.xc-search input::placeholder { color: #8C6B50; }
.xc-chips { display: flex; flex-wrap: wrap; gap: .45rem .5rem; }
.xc-chip { font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 500; color: var(--charcoal); background: rgba(255, 250, 244, .85); border: 1px solid rgba(107, 85, 69, .28); border-radius: 999px; padding: .45rem .9rem; min-height: 40px; cursor: pointer; transition: background .15s, border-color .15s; }
.xc-chip:hover { border-color: var(--xc-pink-text); }
.xc-chip[aria-pressed="true"] { background: var(--xc-pink-text); border-color: var(--xc-pink-text); color: #fff; }
.xc-chip:focus-visible, .xc-reset:focus-visible { outline: 2px solid var(--xc-pink-text); outline-offset: 2px; }
.xc-count { font-size: .85rem; color: #6B4A2E; margin: 0 !important; }
body.xc .section ul.xc-lib { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
@media (max-width: 760px) { body.xc .section ul.xc-lib { grid-template-columns: 1fr; } }
body.xc .section ul.xc-lib > li.xc-item { margin: 0; padding: 1rem 1.15rem 1.05rem; background: #fff; border-radius: 8px; border: 1px solid rgba(107, 85, 69, .14); display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
body.xc .section ul.xc-lib > li.xc-item--module { background: #FFFAF4; border-left: 4px solid var(--pink); }
body.xc .section ul.xc-lib > li.xc-item[hidden] { display: none; }
.xc-badge { align-self: flex-start; font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; padding: .2rem .55rem; border-radius: 999px; }
.xc-badge--ext { color: #2F5F2A; background: #EEF5EA; border: 1px solid rgba(60, 100, 50, .35); }
.xc-badge--mod { color: var(--xc-pink-text); background: #FDF2F8; border: 1px solid rgba(163, 35, 108, .35); }
.xc-badge--prep { color: #6B4A2E; background: #FBF7F0; border: 1px dashed rgba(130, 85, 50, .55); }
body.xc .section .xc-item h3.xc-item__title { font-family: 'Cormorant Garamond', serif; font-size: 1.32rem; font-weight: 600; line-height: 1.2; margin: .15rem 0 0; color: var(--charcoal); }
.xc-item__title a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(163, 35, 108, .3); }
.xc-item__title a:hover { color: var(--xc-pink-text); border-bottom-color: var(--xc-pink-text); }
.xc-item__title svg { display: inline-block; vertical-align: .1em; color: var(--xc-pink-text); }
body.xc .section .xc-item p.xc-item__source { font-size: .8rem; color: #6B4A2E; margin: 0; max-width: none; }
body.xc .section .xc-item p.xc-item__desc { font-size: .92rem; line-height: 1.5; margin: .1rem 0 0; max-width: none; color: var(--ink); }
body.xc .section .xc-item p.xc-item__meta { margin: auto 0 0; padding-top: .45rem; display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .78rem; color: #6B4A2E; max-width: none; }
.xc-item__tags { color: #5A4636; }
.xc-nowrap { white-space: nowrap; }
body.xc .section p.xc-empty { margin: 1rem 0 0; font-size: .95rem; color: #4A3B2E; }
.xc-reset { font: inherit; color: var(--xc-pink-text); background: none; border: 0; border-bottom: 1px solid rgba(163, 35, 108, .4); padding: 0; cursor: pointer; }
/* Oct 16, round 2: one search over two lists; published vs shared; palliative-clinician section; live form */
.xc-find { display: flex; flex-direction: column; gap: .9rem; margin: 2.6rem 0 0; padding: 1.2rem 1.3rem; background: rgba(255, 250, 244, .7); border: 1px solid rgba(107, 85, 69, .14); border-radius: 12px; }
.xc-find[hidden] { display: none; }
body.xc .section ul.xc-cards > li[hidden] { display: none; }
.xc-badge--note { color: #6B4A2E; background: #FBF7F0; border: 1px solid rgba(130, 85, 50, .4); margin-top: .1rem; }
.xc-pal { max-width: 820px; padding: 1.2rem 1.35rem; border-radius: 10px; background: color-mix(in srgb, var(--blue) 7%, #FFFAF4); border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); border-left: 4px solid var(--blue); }
body.xc .section .xc-pal p.xc-pal__h { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--xc-blue-text); margin: 0 0 .5rem; }
body.xc .section .xc-pal ul.xc-pal__list { margin: 0 0 .8rem 1.2rem; max-width: none; }
body.xc .section .xc-pal ul.xc-pal__list li { font-size: .94rem; line-height: 1.5; margin-bottom: .45rem; }
body.xc .section .xc-pal p.xc-pal__invite { font-size: .92rem; margin: 0; color: #4A3B2E; max-width: none; }
.xc-req { font-weight: 400; text-transform: none; letter-spacing: 0; color: #5A4636; }
body.xc .section p.xc-formnote { font-size: .85rem; color: #5A4636; text-align: center; margin: .8rem 0 0; max-width: none; }
/* Oct 17, round 3: scannable published-resource cards, a curated "Understanding surgical decisions" row, byline */
body.xc .page-intro p.xc-byline { margin: .9rem 0 0; font-size: .86rem; letter-spacing: .02em; color: #5A4636; }
body.xc .section ul.xc-lib { gap: 20px 22px; }
body.xc .section ul.xc-lib > li.xc-item { padding: 1.35rem 1.45rem 1.15rem; gap: .5rem; }
body.xc .section .xc-item h3.xc-item__title { margin: 0; }
body.xc .section .xc-item p.xc-item__desc { margin: 0; }
.xc-facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: .35rem 0 0; padding: .8rem 0 0; border-top: 1px solid rgba(107, 85, 69, .12); font-size: .86rem; line-height: 1.45; }
.xc-facts dt { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6B4A2E; padding-top: .18rem; }
.xc-facts dd { margin: 0; color: var(--ink); }
.xc-item__foot { margin-top: auto; padding-top: .7rem; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; border-top: 1px dashed rgba(107, 85, 69, .22); }
body.xc .section .xc-item__foot .xc-item__tags { font-size: .76rem; color: #6B4A2E; }
.xc-view { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-size: .9rem; font-weight: 600; color: var(--xc-pink-text); text-decoration: none; border-bottom: 1px solid transparent; }
.xc-view:hover { border-bottom-color: currentColor; }
.xc-view svg { flex: 0 0 auto; }
.xc-view--sm { min-height: 40px; font-size: .86rem; }
.xc-group { margin: .4rem 0 1.8rem; padding: 1.25rem 1.35rem 1.1rem; border-radius: 12px; background: color-mix(in srgb, var(--purple) 6%, #FFFAF4); border: 1px solid color-mix(in srgb, var(--purple) 28%, transparent); border-left: 4px solid var(--purple); }
.xc-group[hidden], body.xc .section p.xc-sublabel[hidden] { display: none; }
body.xc .section .xc-group h3.xc-group__title { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 600; line-height: 1.2; color: var(--charcoal); margin: 0 0 .3rem; }
body.xc .section .xc-group p.xc-group__desc { font-size: .92rem; line-height: 1.5; color: #4A3B2E; margin: 0 0 1rem; max-width: 70ch; }
body.xc .section ul.xc-group__list { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 899px) { body.xc .section ul.xc-group__list { grid-template-columns: 1fr; } }
body.xc .section ul.xc-group__list > li.xc-gcard { margin: 0; padding: .95rem 1.05rem .55rem; background: #fff; border-radius: 8px; border: 1px solid rgba(107, 85, 69, .14); display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
body.xc .section .xc-gcard p.xc-gcard__title { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; line-height: 1.2; color: var(--charcoal); margin: 0; max-width: none; }
body.xc .section .xc-gcard p.xc-gcard__source { font-size: .78rem; color: #6B4A2E; margin: 0 0 auto; max-width: none; }
body.xc .section p.xc-sublabel { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #2F5F2A; margin: 0 0 .8rem; }
/* ---------- end Surgical Palliative Care Exchange ---------- */
/* ---------- Advocacy: Black women's health — actions + accounts (Oct 16, late) ---------- */
.act-bwh__lead { margin-top: .7rem; }
.act-bwh__actions { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 1.1rem 0 .4rem; }
.act-bwh__act { padding: 1rem 1.15rem 1.05rem; border-radius: 12px; background: #fffaf4; border: 1px solid rgba(250, 120, 40, .30); border-top: 3px solid #d0702a; }
.act-bwh__act-h { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--charcoal); margin: 0 0 .5rem; line-height: 1.2; }
.act-bwh__act ul { margin: 0; padding-left: 1.05rem; columns: 2 260px; column-gap: 28px; }
.act-bwh__act li { break-inside: avoid; }
.act-bwh__act li { font-size: .9rem; line-height: 1.55; color: var(--brown); margin: 0 0 .55rem; }
.act-bwh__act li:last-child { margin-bottom: 0; }
.act-bwh__act li::marker { color: #d0702a; }
details.act-bwh__follow { --ac: var(--terracotta); margin: 1.6rem 0 .4rem; border-radius: 12px; background: color-mix(in srgb, var(--terracotta) 6%, #fffaf4); border: 1px solid rgba(250, 120, 40, .30); }
details.act-bwh__follow > summary { list-style: none; display: block; position: relative; cursor: pointer; padding: 1rem 3.6rem 1rem 1.15rem; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
details.act-bwh__follow > summary::-webkit-details-marker { display: none; }
details.act-bwh__follow > summary::marker { content: ""; }
details.act-bwh__follow > summary:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.act-bwh__follow-title { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--charcoal); line-height: 1.2; }
.act-bwh__follow-sub { display: block; font-size: .85rem; color: var(--brown); margin-top: .15rem; }
details.act-bwh__follow > summary .act-drop__toggle { top: 50%; right: 1rem; margin-top: -1.15rem; }
details.act-bwh__follow[open] > summary .act-drop__toggle::after { transform: rotate(0deg); }
details.act-bwh__follow ul.act-bwh__accounts { list-style: none; margin: 0; padding: 0 1.15rem .4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
details.act-bwh__follow ul.act-bwh__accounts li { margin: 0; padding: .65rem 0 .6rem; border-top: 1px solid rgba(250, 120, 40, .22); }
.act-bwh__handle { display: inline-block; font-weight: 600; font-size: .95rem; color: #a8461a; text-decoration: none; border-bottom: 1px solid rgba(168, 70, 26, .35); }
.act-bwh__handle:hover, .act-bwh__handle:focus-visible { color: var(--rose-deep); border-bottom-color: currentColor; }
.act-bwh__who { display: block; font-size: .86rem; line-height: 1.5; color: var(--brown); margin-top: .2rem; }
.act-bwh__follow-note { font-size: .82rem; color: var(--brown-soft); margin: .2rem 1.15rem 1rem; }
@media (max-width: 560px) { details.act-bwh__follow ul.act-bwh__accounts { grid-template-columns: 1fr; } details.act-bwh__follow > summary { padding-right: 3.2rem; } }
/* ---------- end Advocacy: Black women's health — actions + accounts ---------- */