for 'video' ones (see
buildEventSlide(), ca-render.js) — so this needs the usual link resets
regardless of which tag it actually is, plus cursor:pointer for the
non-anchor case. */
.ca-hero-slide { position: relative; flex: 0 0 100%; min-height: 420px; border-radius: var(--size-radius-rounded); overflow: hidden; display: flex; align-items: flex-start; text-decoration: none; color: inherit; cursor: pointer; }
/* The background photo is a real ![]()
now, not a CSS background-image —
needed so it can zoom on hover independently of the card's own fixed
border-radius/overflow-hidden frame, same technique as every other
card's thumbnail (.ca-card__thumb img). Sits behind the scrim/content
(z-index 0, both of which are position:relative/z-index:1) and fills
the slide exactly via object-fit:cover, matching the old background-
size:cover behavior pixel-for-pixel. */
.ca-hero-slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform var(--transition-slow); }
@media (hover: hover) { .ca-hero-slide:hover .ca-hero-slide__bg { transform: scale(1.04); } }
/* --hero-slide-scrim (gradient, desktop) / --hero-slide-scrim-mobile (flat,
≤767px — see the media query below) are set inline per-slide
(ca-render.js, from the item's optional scrimColor in events.json); these
are the fallbacks for slides that don't set one. See CLAUDE.md "Hero
carousel". The fading 3-stop gradient works on desktop, where content is
capped at 75% width and never reaches the low-opacity edge — but at
mobile widths content spans the full card and a long title/subtitle can
wrap right into that low-opacity zone and go illegible against the photo
(a real bug, confirmed on a real device screenshot), so mobile gets a
flat, constant-opacity wash instead. */
.ca-hero-slide__scrim { position: absolute; inset: 0; background: var(--hero-slide-scrim, linear-gradient(90deg, rgba(0,119,190,0.88) 0%, rgba(0,119,190,0.55) 45%, rgba(0,119,190,0.05) 75%)); }
/* align-items: flex-start (on the flex column itself) — without it,
flex's default `stretch` cross-axis alignment blockifies the badge's
inline-block display and forces it (and anything else that isn't
already a full-width block) to fill the column's width instead of
hugging its own content.
No `gap` here (deliberately) — the vertical rhythm between tag / date /
title / subtitle / city / CTA is non-uniform per direct spec (8 / 8 / 0
/ 8 / 24px), which a single flex `gap` can't express since it applies
the same value between every pair of children. Each child instead
carries its own margin-bottom below, in that exact sequence.
padding is a uniform 40px/lg on all 4 sides — "content should always
be 40px from the top", per direct spec — the top-align comes from
.ca-hero-slide's own align-items: flex-start (this element's own
padding-top just sets the exact 40px gap once anchored there).
padding-bottom is still deliberately larger than the other 3 sides
(2xl+sm = 96px, not lg's 40px) — this isn't in tension with top-align,
it's a *separate* reserved-space concern: the controls overlay is
absolutely positioned at the card's own bottom (out of flow, so it
can't push the card taller on its own), and .ca-hero-slide has no
fixed height — its own height is however tall its content forces it to
be. For a SHORT slide, min-height covers this with room to spare and
the extra bottom padding is invisible slack. But for the TALLEST slide
(a 3-line-wrapping title, confirmed via a real device screenshot on
mobile, where content is 100% width) the content's natural height
already exceeds min-height, so the card's real height becomes exactly
"content's own height" with zero slack — without this reserved bottom
padding, the CTA's bottom would land flush with the card's bottom edge
and directly collide with the controls (confirmed: the "Register"
button and the nav arrow sat at the same height in that screenshot).
Removing this reservation once (reasoning it was made obsolete by
top-align) was wrong — it only looked fine on a short slide. Every
slide is stretched to match the tallest one anyway (.ca-hero-carousel
__track's default flex `stretch`), so this padding effectively grows
the *whole carousel's* height enough for its tallest current slide,
not just this one.
max-width: 75% — "about 3/4 of the width of the card on desktop", per
direct spec (was a fixed 560px). */
.ca-hero-slide__content { position: relative; z-index: 1; padding: var(--size-space-lg) var(--size-space-lg) calc(var(--size-space-2xl) + var(--size-space-sm)) var(--size-space-lg); max-width: 75%; display: flex; flex-direction: column; align-items: flex-start; }
.ca-hero-slide__content .ca-badge { margin-bottom: var(--size-space-2xs); } /* tag -> date: 8px */
.ca-hero-slide__date { color: #FFFFFF; margin-bottom: var(--size-space-2xs); } /* date -> title: 8px */
.ca-hero-slide__title { color: #FFFFFF; margin: 0; } /* title -> subtitle: 0px */
/* 20px semibold italic, per direct spec ("subtitle is semi bold") — no
utility class covers italic, so this stays a scoped override rather
than a new .Title/.Body variant just for one field. */
.ca-hero-slide__subtitle { color: #FFFFFF; font-size: var(--typography-scale-lg); font-weight: var(--typography-weight-semibold); font-style: italic; margin: 0 0 var(--size-space-2xs) 0; } /* subtitle -> faculty: 8px */
/* faculty is available on every hero promo contentType (2026-09-28, was
video-only) — 8px above (from title or subtitle, whichever is the
nearest preceding sibling; margins collapse to whichever is larger when
both are present), 24px below to the CTA. */
.ca-hero-slide__faculty { color: #FFFFFF; margin: var(--size-space-2xs) 0 var(--size-space-md) 0; }
.ca-hero-slide__content .ca-btn { align-self: flex-start; font-size: var(--typography-scale-base); margin-top: 0; }
/* statement (2026-09-28) — an optional line styled like faculty, but
rendered after the CTA button rather than before it (e.g. a CME-credit
note). */
.ca-hero-slide__statement { color: rgba(255, 255, 255, 0.9); margin: var(--size-space-md) 0 0 0; max-width: 560px; } /* 24px below the CTA = the 24px above it; 14px regular (BodySmall) + capped width so the fine print wraps to ~2 lines and stays quieter than the faculty (2026-11-04) */
.ca-hero-slide__faculty { line-height: 1.5; }
/* CTA reflects hover even when the pointer is elsewhere on the card, not
just directly over the CTA span itself — the whole card is the click
target now, so its most visible affordance should visually respond to
that. Same treatment .ca-btn--white:hover already gives itself. */
@media (hover: hover) { .ca-hero-slide:hover .ca-btn { background: var(--color-light-blue); transform: scale(1.03); } }
/* Overlaid at the bottom of the card itself — not a separate row below
the carousel like before. bottom: 24px/md is a direct user spec (not
matched to the content block's own 40px/lg padding — those are
independent insets that happen to both be design-token values).
Colors are inverted from the shared .ca-carousel__arrow/__dot styling
(white circle + blue icon, white-outline inactive dots) because this
sits on a photo, not the white section background every other
carousel's controls sit on. */
/* pointer-events: none on the row itself, re-enabled on the dots/arrows
individually (2026-09-25) — now that the whole slide is a click/hover
target of its own, this row's `justify-content: space-between` leaves
a wide empty gap between the dots (left) and arrows (right) that's
still part of this container's own bounding box, spanning almost the
full card width at a fixed height near the bottom — without this, that
empty strip silently ate every hover/click meant for the slide
underneath it, confirmed directly ("the bottom portion of the card is
still not reflecting the hover/click"). This is a pure visual overlay
now; only its two real controls remain interactive. */
.ca-carousel__controls--hero { position: absolute; left: var(--size-space-lg); right: var(--size-space-lg); bottom: var(--size-space-md); z-index: 2; pointer-events: none; }
.ca-carousel__controls--hero .ca-carousel__dot,
.ca-carousel__controls--hero .ca-carousel__arrow { pointer-events: auto; }
.ca-carousel__controls--hero .ca-carousel__dot { background: transparent; border: 1.5px solid #FFFFFF; }
.ca-carousel__controls--hero .ca-carousel__dot.is-active { background: var(--color-navy); border-color: var(--color-navy); }
.ca-carousel__controls--hero .ca-carousel__arrow { background: #FFFFFF; }
@media (hover: hover) { .ca-carousel__controls--hero .ca-carousel__arrow:hover:not(:disabled) { background: var(--color-light-blue); } }
.ca-carousel__controls--hero .ca-carousel__arrow::before { background: var(--color-link); }
/* ============================================================
SECTIONS — generic wrapper
============================================================ */
.ca-section { padding: var(--size-space-2xl) 0; background: #FFFFFF; }
.ca-section--tinted { background: var(--color-surface-primary); }
/* Two plain (non-tinted, white) sections back to back would otherwise each
contribute their own 80px top+bottom padding, doubling into a 160px gap
at the shared boundary — generic rule (2026-09-26), replacing what used
to be individually hand-tuned #video-updates/#steering-committee padding
overrides: whenever a plain .ca-section is immediately followed by
another plain .ca-section, the TOP one's bottom padding collapses to 0
and the following section's own top padding is left to supply the gap
instead — the same "one owner per boundary" pattern used site-wide
(see Hero -> Video Updates below). .ca-section--tinted is excluded on
both sides: a background-color change at the boundary still needs the
full gap to read as two distinct sections. This is a :has() rule so any
future pair of adjacent white sections gets it automatically — no need
to hand-add another #id override every time one's added. */
.ca-section:not(.ca-section--tinted):has(+ .ca-section:not(.ca-section--tinted)) {
padding-bottom: 0;
}
/* The rule above only checks the IMMEDIATE next sibling's class — it
doesn't know that a section can go empty and hide itself at runtime
(CA.hideIfEmpty, see CLAUDE.md "Content lifecycle"). Practice Aids and
More Resources are both .ca-section--tinted and both CAN go fully empty
(unlike ASAM/Project ECHO, which never hide) — when one does, its
[hidden] attribute gives it zero visual height, but it's still the DOM
sibling the rule above inspects, so it still reads as "the next section
is tinted" and refuses to collapse the white section before it. Result:
a real double gap (confirmed directly — emptying Practice Aids left
Education's own 80px bottom padding AND ASAM's own 80px top padding both
in effect, 160px total, reported via screenshot). This second rule
bridges exactly that one-hidden-section-in-between case: a plain white
section whose next sibling is a HIDDEN tinted one, itself followed by
another plain white section, also collapses its own bottom padding —
same as if the hidden tinted section weren't there at all. Covers both
real cases on this page (Education -> hidden Practice Aids -> ASAM, and
ASAM -> hidden More Resources -> Project ECHO) without hardcoding either
pair's ids. */
.ca-section:not(.ca-section--tinted):has(+ .ca-section--tinted[hidden] + .ca-section:not(.ca-section--tinted)) {
padding-bottom: 0;
}
/* Steering Committee keeps its own tighter 40px top padding (not the
standard 80px) since it reads as a sub-section of Video Updates, not a
fully separate section (it has no sub-nav entry of its own — see
"Sections" above) — orthogonal to the generic white-adjacency rule
above, which only ever touches the PRECEDING section's bottom padding. */
#steering-committee { padding-top: var(--size-space-lg); }
/* Hero -> Video Updates: Hero now owns a small slice of this gap on its
own bottom (var(--size-space-md), 2026-09-28 — see .ca-hero's own
padding-bottom comment for why) so its carousel's drop-shadow has room
to render before Hero's own overflow:hidden clips it. Video Updates
gives back that exact same amount from its top so the total gap is
unchanged from the standard 80px — same "one owner per boundary" idea
as the rest of this file, just split across two owners instead of one
for this specific pair, since the amount taken off the top here only
exists to compensate for what Hero now needs on its own bottom. */
#video-updates { padding-top: calc(var(--size-space-2xl) - var(--size-space-md)); }
/* ============================================================
CARDS — Video Updates / Education / Project ECHO
============================================================ */
.ca-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
.ca-card__thumb { position: relative; border-radius: var(--size-radius-rounded); overflow: hidden; aspect-ratio: 16/9; background: var(--color-surface-primary); }
.ca-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
@media (hover: hover) { .ca-card:hover .ca-card__thumb img { transform: scale(1.04); } }
.ca-card__meta { padding: var(--size-space-md) 0 var(--size-space-xs) 0; } /* thumb -> meta: 24px, per direct spec (was 12px); bottom unchanged */
.ca-card__date { color: var(--color-text-secondary); margin: 0 0 var(--size-space-2xs) 0; }
.ca-card__title { color: var(--color-link); margin: 0 0 var(--size-space-2xs) 0; transition: color var(--transition-base); }
@media (hover: hover) { .ca-card:hover .ca-card__title { color: var(--color-link-hover); } }
.ca-card__faculty { color: var(--color-text-secondary); margin: 0; }
/* Featured search-result rows only (.ca-card__subtitle, .ca-card--list
.ca-badge) — subtitle is bolder/black, one step down from the title,
distinct from the plain gray .ca-card__faculty meta line right below
it; badge gets the same small bottom
margin .ca-tag-pill already has elsewhere, so it doesn't sit flush
against the date line above it. See buildFeaturedListRow(). */
.ca-card__subtitle { color: var(--color-text-primary); font-weight: var(--typography-weight-semibold); margin: 0 0 var(--size-space-2xs) 0; }
.ca-card--list .ca-badge { margin-bottom: var(--size-space-2xs); }
/* margin-top: 0 — the faculty -> credit 8px gap is supplied by
.ca-card__faculty's own margin-bottom (scoped to Education above), not
here; .ca-card__credit only ever renders in Education (buildEduMeta),
so stacking a second 8px here would double the gap to 16px. */
.ca-card__credit { color: var(--color-text-secondary); margin: 0; display: flex; align-items: center; }
/* Coming Soon (2026-09-25) — a non-clickable variant of any of the three
card types that use this shared .ca-card shell (Video Updates,
Education carousel, Project ECHO). The date text itself is swapped to
"Coming Soon" in the card builders (buildCardDateHtml(), ca-render.js);
this class just needs to (1) turn the title black instead of link-blue,
since it's no longer a link, and (2) cancel the shared :hover
treatments above — .ca-card:hover still fires on mouseover regardless
of whether the element is actually clickable (no click handler behind
it doesn't stop :hover from matching), so without this override a
coming-soon card would still visually invite a click it doesn't honor.
cursor:default for the same reason. Equal specificity to the base
.ca-card:hover rules (one class + :hover each) but declared later in
the cascade, so it correctly wins for cards carrying both classes. */
.ca-card--coming-soon { cursor: default; }
.ca-card--coming-soon .ca-card__title { color: var(--color-text-primary); }
@media (hover: hover) { .ca-card--coming-soon:hover .ca-card__thumb img { transform: none; } }
@media (hover: hover) { .ca-card--coming-soon:hover .ca-card__title { color: var(--color-text-primary); } }
/* Education's featured card reuses this same .ca-card--coming-soon class
(see renderEducation()/buildFeaturedActivity() — a Coming Soon item can
still legitimately land in the featured slot when it's the only
content available) but has its own separate hover rules
(.ca-edu-featured__link:hover ...) targeting its own thumb/title
classes, not .ca-card__thumb's — so the two overrides above don't
reach it. Same cancellation, scoped to the featured wrapper instead. */
@media (hover: hover) { .ca-edu-featured__link.ca-card--coming-soon:hover .ca-edu-featured__thumb img { transform: none; } }
@media (hover: hover) { .ca-edu-featured__link.ca-card--coming-soon:hover .ca-card__title { color: var(--color-text-primary); } }
/* Corner ribbon — a small square wrapper (overflow:hidden) clipping an
oversized inner band, rotated -45deg. Wrapper W=160px, band width 300px.
top/left given directly by the user (tuned by hand against the real
reference until it looked right, after several rounds of this session's
own math-derived offsets not landing correctly) — treat these two values
as the source of truth for this rule rather than re-deriving them. */
.ca-ribbon-wrap { position: absolute; top: 0; left: 0; width: 160px; height: 160px; overflow: hidden; z-index: 1; pointer-events: none; }
.ca-ribbon { position: absolute; top: 29px; left: -96px; width: 300px; text-align: center; transform: rotate(-45deg); background: var(--color-negative); color: #FFFFFF; font-family: var(--typography-family-title); font-size: var(--typography-scale-base); font-weight: var(--typography-weight-semibold); padding: 10px 0; line-height: 20px; text-transform: capitalize; }
/* Video Updates-specific overrides — scoped to .ca-card--update rather than
the shared .ca-card__faculty/.ca-carousel__track rules, since those are
also used by Education and Project ECHO. Project ECHO hasn't been
reviewed yet and still uses the shared gray-name / 16px-gap treatment;
Education has since gotten its own equivalent 24px-gap override below. */
.ca-card--update .ca-card__faculty { color: var(--color-text-primary); }
[data-carousel-track="updates"] { gap: var(--size-space-md); }
/* Education's own 24px carousel gap — see the Video Updates comment above
for why this is scoped per-track rather than touching the shared
--carousel-gap token (Project ECHO still uses it at 16px, unreviewed).
ca-carousel.js reads each track's real gap from its computed style, so
no JS change was needed to keep 3 cards fitting flush at this width. */
[data-carousel-track="activities"] { gap: var(--size-space-md); }
/* List (search results) modifier — same content, compact horizontal row.
align-items: flex-start (was center, 2026-09-25) — the thumbnail should
top-align with its meta content, not sit vertically centered against
it, per direct spec. */
.ca-card--list { flex-direction: row; gap: var(--size-space-sm); align-items: flex-start; }
.ca-card--list .ca-card__thumb { flex: 0 0 140px; aspect-ratio: 16/9; }
.ca-card--list .ca-card__meta { padding: 0; }
/* The "New" ribbon (.ca-ribbon-wrap) is a fixed 160x160px box hand-sized
for a full carousel thumbnail — in this compact list layout (search
results only) the thumb shrinks to 140x78.75px, so the ribbon's own
overflow:hidden clipping happens at the wrong point and the diagonal
band cuts off abruptly instead of reading as a clean corner ribbon
(reported directly via screenshot). Scaled down to match instead of
re-deriving new pixel constants — same proven geometry, just smaller. */
.ca-card--list .ca-ribbon-wrap { transform: scale(0.5); transform-origin: top left; }
/* ============================================================
VIDEO UPDATES / EDUCATION carousels — their spec-driven overrides
([data-carousel-track="updates"|"activities"], .ca-card--update .ca-card__faculty)
live up with the shared .ca-card rules above, not here.
============================================================ */
/* ============================================================
STEERING COMMITTEE / FACULTY person cards
============================================================ */
/* 24px gap between person blocks, both directions, per direct spec (was
80px column / 40px row). */
.ca-committee-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-space-md); }
.ca-person { display: flex; gap: var(--size-space-md); }
.ca-person__photo { width: 94px; height: 120px; object-fit: cover; border-radius: var(--size-radius-rounded); flex-shrink: 0; }
.ca-person__info { flex: 1; min-width: 0; }
.ca-person__name { color: var(--color-text-primary); margin: 0; } /* name -> credentials: 0px, per direct spec */
.ca-person__credentials { color: var(--color-text-primary); margin: 0 0 var(--size-space-2xs) 0; } /* renamed from .ca-person__institution (2026-09-25), matching Faculty's own institutionLines->credentials rename */
/* Standardized to the shared .ca-link treatment (2026-09-25) — was its own
one-off style (static text-decoration:underline, color-only hover),
out of step with every other text link on the site (ASAM's list links,
Practice Aids, More Resources, the video modal's Sources list), which
all share .ca-link's no-default-underline + animated-underline-on-
hover + color-transition treatment via the shared class. The .ca-link
class is added directly in the markup (buildPersonCard(), ca-render.js)
rather than duplicated here; only the button-element resets that
.ca-link doesn't cover (it's normally used on ) stay in this rule. */
.ca-person__bio-link { background: none; border: none; padding: 0; }
/* ============================================================
EDUCATION
============================================================ */
.ca-edu-featured { margin-bottom: var(--size-space-lg); }
.ca-edu-featured__link { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-space-md); text-decoration: none; color: inherit; align-items: stretch; } /* thumb -> details: 24px, per direct spec (was 40px) */
/* Featured card's title hover, and (2026-09-25) its thumbnail zoom — the
shared .ca-card:hover rules don't reach here, since the featured card
is a different wrapper (.ca-edu-featured__link, not .ca-card), the same
gap missed twice now when Video Updates/carousel cards got their hover
treatment: the title-color fix already accounted for this; the
thumbnail zoom (.ca-card:hover .ca-card__thumb img { transform:
scale(1.04) }) was the same class of miss, just not caught until a
direct screenshot comparison against other cards' hover behavior. */
@media (hover: hover) { .ca-edu-featured__link:hover .ca-card__title { color: var(--color-link-hover); } }
@media (hover: hover) { .ca-edu-featured__link:hover .ca-edu-featured__thumb img { transform: scale(1.04); } }
.ca-edu-featured__thumb { position: relative; border-radius: var(--size-radius-rounded); overflow: hidden; }
.ca-edu-featured__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 320px; transition: transform var(--transition-slow); }
/* justify-content: flex-start (was center) — top-align the meta block
against the thumb, per direct spec. align-items: flex-start is the same
inline-block-gets-stretched-by-flex fix as the hero badge/committee
pattern earlier: without it, the tag pill (display:inline-block) was
being cross-axis-stretched to the column's full width. Title size no
longer needs a CSS override here — it's set directly via the TitleXLarge
utility class in buildEduMeta()'s markup now (30px, matching the
carousel card's own TitleMedium/18px override), per this project's
convention that utility classes are the source of truth for type sizes. */
.ca-edu-featured__details { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
/* Education-specific spacing/color, scoped rather than touching the
shared .ca-tag-pill/.ca-card__faculty rules (also used by Project ECHO,
not yet reviewed): tag -> date 16px (was the shared 8px), faculty color
black (was the shared gray) with an 8px gap to credit (was 0). */
.ca-edu-featured__details .ca-tag-pill,
.ca-card--activity .ca-tag-pill { margin-bottom: var(--size-space-sm); }
.ca-edu-featured__details .ca-card__faculty,
.ca-card--activity .ca-card__faculty { color: var(--color-text-primary); margin-bottom: var(--size-space-2xs); }
/* ============================================================
PRACTICE AIDS
============================================================ */
.ca-practice-aids { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--size-space-2xl); row-gap: var(--size-space-lg); }
.ca-practice-aids__category { margin-bottom: var(--size-space-lg); } /* 40px between subsections, per direct spec — already matched, unchanged */
.ca-practice-aids__category:last-child { margin-bottom: 0; }
.ca-practice-aids__category-heading { color: var(--color-text-primary); margin: 0 0 var(--size-space-md) 0; } /* subheader -> list: 24px (was 16px) */
.ca-practice-aids .ca-link-list { gap: 4px; } /* was 0px — bumped for breathing room (2026-09-25, direct spec, applied to every link-list site-wide), no spacing token this small */
.ca-practice-aids .ca-link-item { flex-direction: row; }
.ca-practice-aids .ca-link-item::before { content: '\2022'; color: var(--color-link); margin-right: var(--size-space-2xs); }
/* List item: 16px regular (was the shared .ca-link-item .ca-link's semibold)
— scoped to Practice Aids specifically, since that shared rule also
drives ASAM/More Resources link lists, unreviewed and still semibold. */
.ca-practice-aids .ca-link-item .ca-link { font-weight: var(--typography-weight-regular); }
/* Practice Aids never shows a description sub-line by design (unlike ASAM/
More Resources, which deliberately do) — description still exists on
every Practice Aids item for search matching, it just shouldn't ever
render. Originally hidden with a CSS override here, but that only
reached this live section, not a Practice Aids row reused inside the
search-results modal (a different DOM context entirely) — so a search
result still leaked the description through (reported directly,
2026-09-26). Suppressed properly at the source instead: buildLinkItem()
takes an opts.hideDescription flag, passed by both this section's own
renderer and ca-search.js's practiceAids category, so neither context
can regress independently of the other. */
/* ============================================================
ASAM RESOURCES
============================================================ */
/* 40px between header/logo/description/list, per direct spec (a follow-up
correction — an earlier pass had set these to 0, since superseded).
Heading -> logo-row is already 40px via the shared .ca-section-heading
margin-bottom, so logo-row itself only needs a bottom margin, not top. */
.ca-asam__logo-row { margin: 0 0 var(--size-space-lg) 0; }
/* Same full lockup as the hero collaborator logo, larger since this
section has the full-width column to itself. */
/* 500px on desktop, per direct spec (was 320px) — the global `img {
max-width:100%}` reset (base.css) already shrinks it on narrow
viewports, so no separate mobile breakpoint override is needed. */
.ca-asam__logo-row img { width: 500px; height: auto; display: block; }
/* max-width removed — description spans the full section width, per
direct spec (was capped at 960px). margin-bottom 40px — logo -> desc and
desc -> list gaps, per the follow-up spec above. */
.ca-asam__description { color: var(--color-text-primary); margin: 0 0 var(--size-space-lg) 0; }
/* Group headings (2026-09-30) — ASAM's list grew from one flat list to
several categorized ones (item.groupHeading, renderAsam()), same idea as
Practice Aids' category headings / More Resources' group headings, so
reuses their exact 20px-bold-black treatment (TitleLarge) rather than a
new size. 40px between groups matches Practice Aids' own subsection
spacing; 16px heading->list matches More Resources' group heading. */
.ca-asam__group { margin-bottom: var(--size-space-lg); }
.ca-asam__group:last-child { margin-bottom: 0; }
.ca-asam__group-heading { color: var(--color-text-primary); margin: 0 0 var(--size-space-sm) 0; }
.ca-link-list--asam { gap: 4px; } /* was 0px, bumped for breathing room (2026-09-25) — see .ca-practice-aids .ca-link-list above */
/* Bullet pulled out via absolute positioning into a reserved left padding,
rather than the item's old flex-row-with-wrap layout — that approach
needed the description's margin-left to *guess* the bullet+gap's real
rendered width (a fixed 24px token that didn't actually match it,
confirmed via pixel measurement: description sat ~7px right of the
link's own left edge). With both the link and description now simply
block children inside the same padding-box, they share an exact left
edge with no guessing. */
.ca-link-list--asam .ca-link-item { display: block; position: relative; padding-left: var(--size-space-sm); }
.ca-link-list--asam .ca-link-item::before { content: '\2022'; color: var(--color-link); position: absolute; left: 0; top: 0; }
.ca-link-list--asam .ca-link-item .ca-link { font-weight: var(--typography-weight-regular); } /* 16px no bold — scoped, Practice Aids/More Resources unaffected */
.ca-link-list--asam .ca-link-item__desc { margin-left: 0; font-size: var(--typography-scale-base); color: var(--color-text-primary); } /* 16px black (was 14px gray) */
/* ============================================================
MORE RESOURCES accordion
============================================================ */
/* Panels sit flush together as one bordered group ("sandwich") — the
group itself (not each panel) carries the border/radius/overflow-hidden,
so only the very first and last panel's corners actually round (clipped
by the group's own shape); middle panels are flat. Panels no longer
have their own border/radius/margin-bottom — a shared border-bottom
(skipped on the last panel) draws the single divider line between each,
instead of doubled-up per-panel borders with gaps. */
.ca-accordion { border: 1px solid var(--color-border-midgray); border-radius: var(--size-radius-rounded); overflow: hidden; } /* 16px corner radius, per direct spec (was 4px) */
.ca-accordion__panel { border-bottom: 1px solid var(--color-border-midgray); background: #FFFFFF; }
.ca-accordion__panel:last-child { border-bottom: none; }
/* Inactive: #FAFDFE background + link-blue text (was white bg). This exact
value is a one-off, direct from the user — a near-white pale blue, not
the same as the --color-light-blue token (#E5F1F8, visibly bluer) used
elsewhere for tag pills etc., so it's a raw hex here rather than a
reused/renamed token. Active (.is-open): solid link-blue background +
white text — unchanged, this already matched the mockup. */
.ca-accordion__header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--size-space-sm) var(--size-space-md); background: #FAFDFE; border: none; cursor: pointer; color: var(--color-link); text-align: left; transition: background-color var(--transition-base); }
/* Hover uses the existing --color-light-blue token (#E5F1F8) — the same
"light hover" already established elsewhere (.ca-btn--white/--outline)
— rather than inventing another one-off color. Only for the inactive
state; an open panel's own solid-blue background doesn't need a hover
treatment. */
@media (hover: hover) { .ca-accordion__header:hover { background: var(--color-light-blue); } }
.ca-accordion__panel.is-open .ca-accordion__header { background: var(--color-button-primary); color: #FFFFFF; }
@media (hover: hover) { .ca-accordion__panel.is-open .ca-accordion__header:hover { background: var(--color-button-primary); } }
/* Same dropdown-arrow.svg double-chevron as the specialty trigger above —
no rotation, the header's background color already carries open/closed
state. */
.ca-accordion__chevron { width: 10px; height: 16px; flex-shrink: 0; background: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; -webkit-mask-image: url('../images/icons/dropdown-arrow.svg'); mask-image: url('../images/icons/dropdown-arrow.svg'); }
/* Animated open/close (2026-09-25) — same max-height + overflow:hidden
technique already proven for the mobile drawer's accordion panels (see
CLAUDE.md "Mobile navigation" > Animation for the full history of why
grid-template-rows: 0fr/1fr was tried and rejected there: it doesn't
reliably collapse to a true zero height inside auto-height ancestors,
leaking a sliver of content even while "closed"). Padding moved off
this element onto a new .ca-accordion__body-inner, same split the
mobile version already uses — confirmed directly (not assumed) that
max-height:0 on box-sizing:border-box does NOT force the box's own
padding down to zero, so a padded max-height:0 element still renders
at its padding's height (measured 48px, i.e. the two var(--size-
space-md) top/bottom, when this was tried on this element directly).
With no padding of its own, this element collapses to a genuine 0.
1600px is a generous cap, not a measured exact height (same tradeoff
the mobile version accepts, deliberately, in exchange for needing no
JS height measurement) — the real content today (the largest panel,
"Resources for All Clinicians", 3 groups/18 items) measures ~1065px
via scrollHeight, so this comfortably covers it plus room to grow. */
.ca-accordion__body { max-height: 0; overflow: hidden; transition: max-height var(--transition-base); }
.ca-accordion__panel.is-open .ca-accordion__body { max-height: 1600px; }
.ca-accordion__body-inner { padding: var(--size-space-md); }
.ca-accordion__group { margin-bottom: var(--size-space-lg); }
.ca-accordion__group:last-child { margin-bottom: 0; }
.ca-accordion__group-heading { color: var(--color-text-primary); margin: 0 0 var(--size-space-sm) 0; } /* 20px bold black, via TitleLarge class */
/* Optional italic intro line above a group's list (e.g. Clinical Trials'
"the following are actively recruiting..." disclaimer) — only rendered
when a group's JSON sets `note`, per real source content from the
user's own PDF, not present on every group. */
.ca-accordion__group-note { font-style: italic; color: var(--color-text-primary); margin: 0 0 var(--size-space-sm) 0; } /* 16px black, via BodyBase class (was BodySmall/14px gray) */
/* Same list treatment as ASAM (see "ASAM Resources" above): tight (4px
gap, was 0px — see .ca-practice-aids .ca-link-list above) items, 16px
regular link text, 16px black description, bullet absolutely
positioned into a reserved padding so the link and description share
one exact left edge instead of a guessed margin. */
.ca-accordion__group .ca-link-list { gap: 4px; }
.ca-accordion__group .ca-link-item { display: block; position: relative; padding-left: var(--size-space-sm); }
.ca-accordion__group .ca-link-item::before { content: '\2022'; color: var(--color-link); position: absolute; left: 0; top: 0; }
.ca-accordion__group .ca-link-item .ca-link { font-weight: var(--typography-weight-regular); }
.ca-accordion__group .ca-link-item__desc { margin-left: 0; font-size: var(--typography-scale-base); color: var(--color-text-primary); }
/* ============================================================
PROJECT ECHO
============================================================ */
/* 40px between header/logo/description/carousel, per direct spec — same
pattern as ASAM: heading -> logo is already 40px via the shared
.ca-section-heading margin-bottom, so logo-row only needs its own
bottom margin (was 24px top+bottom). Description's own 40px
margin-bottom already covered desc -> carousel, no change needed there. */
.ca-echo__logo-row { margin: 0 0 var(--size-space-lg) 0; }
.ca-echo__logo-row img { width: 200px; height: auto; }
/* max-width removed — full section width, per direct spec (was 1100px). */
.ca-echo__description { color: var(--color-text-primary); margin: 0 0 var(--size-space-lg) 0; }
/* Carousel card — bring up to the same treatment Video Updates/Education
already got: 16px tag->date gap (was the shared 8px) and black faculty
(was gray) — matching Education's carousel card specifically, since
ECHO's card shape (tag + date + title + faculty) is the same one. */
.ca-card--echo .ca-tag-pill { margin-bottom: var(--size-space-sm); }
.ca-card--echo .ca-card__faculty { color: var(--color-text-primary); }
[data-carousel-track="echo"] { gap: var(--size-space-md); } /* 24px carousel gap, same scoped pattern as Video Updates/Education */
/* ============================================================
FACULTY — full-bleed auto-scroll carousel
============================================================ */
.ca-faculty { position: relative; overflow: hidden; padding: var(--size-space-2xl) 0; background: linear-gradient(180deg, var(--color-brand) 0%, var(--color-navy) 100%); }
.ca-faculty__heading { text-align: center; color: #FFFFFF; margin: 0 0 var(--size-space-lg) 0; }
.ca-faculty-carousel { overflow: hidden; }
.ca-faculty-carousel__track { display: flex; gap: 32px; width: max-content; animation: ca-faculty-scroll var(--faculty-duration, 90s) linear infinite; }
@keyframes ca-faculty-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (hover: hover) { .ca-faculty-carousel:hover .ca-faculty-carousel__track { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .ca-faculty-carousel__track { animation: none; } }
.ca-faculty-card { flex: 0 0 350px; border-radius: var(--size-radius-rounded); overflow: hidden; background: #FFFFFF; text-align: center; } /* was 260px, per direct spec */
.ca-faculty-card__band { position: relative; height: 60px; background: var(--color-mid-blue); }
.ca-faculty-card__band img { position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%); width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 4px solid #FFFFFF; }
.ca-faculty-card__name { margin: 60px var(--size-space-sm) 0 var(--size-space-sm); color: var(--color-text-primary); } /* 16px bold black, via TitleBase class; 0px to credentials, per direct spec (was 8px) */
.ca-faculty-card__credentials { margin: 0 var(--size-space-sm) var(--size-space-md) var(--size-space-sm); color: var(--color-text-primary); } /* 14px black — renamed from .ca-faculty-card__institution now that Faculty is derived from activities.json's faculty[] (name+credentials+photo), not a separate roster with institutionLines */
/* ============================================================
PODCAST
============================================================ */
/* padding-bottom: 0 — the episodes panel matching the LEFT column's own
height (via grid stretch, below) isn't enough on its own to reach the
section's literal bottom edge, since the section's own standard 80px
bottom padding still sits beneath the whole grid either way. Direct
spec ("goes all the way to the bottom of the section with no padding
under") means the section boundary itself, not just column-to-column
parity — confirmed by a follow-up screenshot showing a large gap below
the panel that an earlier pass's height-matching alone didn't close.
podcast_bg.webp (a soft, near-white decorative photo) also lives here now
— moved up from .ca-podcast (the inner grid/container) per direct spec,
so "top left" resolves against the section's own box rather than the
centered, inset .container beneath it. */
#podcasts {
position: relative;
padding-bottom: 0;
background-image: url('../images/podcast/podcast_bg.webp');
background-repeat: no-repeat;
background-position: top left;
background-size: auto;
}
/* align-items: stretch (was start) — makes both grid columns match the
taller one's height, which is what lets the episodes panel's own
height:100% (below) reach flush to the section's bottom edge instead of
stopping wherever its own content happened to end, per direct spec
("the episode tray goes all the way to the bottom of the section with
no padding under"). */
.ca-podcast {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--size-space-2xl);
align-items: stretch;
position: relative;
}
.ca-podcast__heading { margin: 0 0 var(--size-space-lg) 0; }
.ca-podcast__now-playing-label { color: var(--color-link); margin: 0 0 var(--size-space-sm) 0; }
.ca-podcast__now-playing { position: relative; z-index: 1; display: flex; flex-direction: column; }
/* Content sits above the background photo, not blended into it. No
background/padding/radius here — the mockup has no visible "card"
boundary, content just flows on the section's own background. */
.ca-podcast__now-playing-card { position: relative; z-index: 1; }
.ca-podcast__np-date { color: var(--color-text-secondary); margin: 0 0 4px 0; } /* 4px — no spacing token this small */
.ca-podcast__np-title { color: var(--color-text-primary); margin: 0 0 var(--size-space-2xs) 0; } /* 8px */
.ca-podcast__np-faculty { color: var(--color-text-primary); margin: 0 0 var(--size-space-md) 0; } /* 24px */
.ca-podcast__transport { display: flex; align-items: center; gap: var(--size-space-2xs); } /* 8px between play/time/scrubber/time, per direct spec (was 16px). 40px before platform CTAs is already supplied by .ca-podcast__platforms' own margin-top below — was already correct, not duplicated here */
.ca-podcast__play { width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--color-button-primary); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background var(--transition-base); }
@media (hover: hover) { .ca-podcast__play:hover:not(:disabled) { background: var(--color-link-hover); } }
.ca-podcast__play:disabled { opacity: 0.5; cursor: default; }
/* mask-image, white fill (was a plain ![]()
with a fill="black" source —
a real bug: a black triangle on a blue circle read as nearly invisible,
confirmed against the mockup which shows it clearly white). */
.ca-podcast__play-icon { display: block; width: 16px; height: 18px; background-color: #FFFFFF; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
.ca-podcast__play-icon--play { -webkit-mask-image: url('../images/icons/play.svg'); mask-image: url('../images/icons/play.svg'); }
.ca-podcast__play-icon--pause { -webkit-mask-image: url('../images/icons/pause.svg'); mask-image: url('../images/icons/pause.svg'); width: 14px; }
.ca-podcast__scrubber { flex: 1; height: 4px; accent-color: var(--color-button-primary); cursor: pointer; }
.ca-podcast__time { color: var(--color-text-secondary); min-width: 40px; font-size: var(--typography-scale-xs); }
/* Platform CTAs — corrected after directly pixel-sampling the mockup,
which showed something different from an earlier "colored circle +
white icon" badge design: there's no circle at all. Each icon is just
rendered in its own brand color, directly on the white button
background — confirmed by scanning the mockup's actual pixels around
each icon (no solid color fill anywhere near the size of a circle, only
the icon's own linework colored). Border-radius is a small 4px (was a
full pill) and text is black/gray, not blue. */
.ca-podcast__platforms { display: flex; gap: var(--size-space-sm); margin-top: var(--size-space-lg); flex-wrap: wrap; }
.ca-podcast__platform-btn { display: flex; align-items: center; gap: var(--size-space-2xs); border: 1px solid var(--color-border-midgray); border-radius: var(--size-radius-minimal); padding: var(--size-space-2xs) var(--size-space-sm); text-decoration: none; color: var(--color-text-secondary); font-family: var(--typography-family-body); font-size: var(--typography-scale-xs); transition: all var(--transition-base); }
@media (hover: hover) { .ca-podcast__platform-btn:hover { background: var(--color-surface-primary); border-color: var(--color-text-secondary); } }
.ca-podcast__platform-btn strong { font-family: var(--typography-family-title); font-size: var(--typography-scale-sm); color: var(--color-text-primary); }
.ca-podcast__platform-icon { display: block; flex-shrink: 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.ca-podcast__platform-icon--apple { width: 21px; height: 24px; background-color: #B54DEF; -webkit-mask-image: url('../images/icons/apple.svg'); mask-image: url('../images/icons/apple.svg'); }
.ca-podcast__platform-icon--spotify { width: 24px; height: 24px; background-color: #1DB954; -webkit-mask-image: url('../images/icons/spotify.svg'); mask-image: url('../images/icons/spotify.svg'); }
/* TuneIn: real (recolored) icon image, capped by height like the other
non-square real icon files elsewhere on the site (see CLAUDE.md
"Icons") so it doesn't stretch. */
.ca-podcast__platform-icon--plain { width: auto; height: 26px; }
/* align-self: start (2026-09-25, replaces the earlier height:100% +
JS height-sync approach) — this panel now sizes to its own natural
content (header + the list's own max-height cap below) instead of
being grid-stretched to match the left column and then measured back
via JS. The old approach (a ResizeObserver reading the left column's
rendered height and applying it as this panel's inline height) broke
down the moment the episode list's own natural content grew taller
than the left column: grid's align-items:stretch pulls the SHORTER
side up to match the TALLER one, so once the list became the taller
side, it was stretching the left column to match the list instead of
the other way around — and the JS then measured that inflated,
list-driven height and fed it right back onto the panel, so the "cap"
grew in lockstep with the very thing it was supposed to be capping
(confirmed directly: 20 episodes produced a 1922px cap that barely
exceeded the list's own 1942px content height, instead of the fixed
left-column-driven cap this was meant to enforce). A plain CSS
max-height on the list (below) doesn't have this feedback-loop
failure mode, and align-self:start here means this panel no longer
participates in the grid's stretch behavior at all — simpler and
robust regardless of episode count, at the cost of the two columns no
longer being guaranteed pixel-flush at the bottom on every screen
(an accepted tradeoff for dropping the fragile JS). */
/* Border is a plain light gray (was --color-link/blue) — confirmed against
the mockup: the panel's own edge is --color-border-midgray, not blue. */
/* Bottom corners square (was rounded on all 4) — matches the section's
own bottom edge treatment (see #podcasts padding-bottom:0 above). */
.ca-podcast__episodes { align-self: start; display: flex; flex-direction: column; border: 1px solid var(--color-border-midgray); border-radius: var(--size-radius-rounded) var(--size-radius-rounded) 0 0; overflow: hidden; }
/* --color-brand (#0077BE), not --color-button-primary (#009FE3) — the
mockup's header is a darker, more saturated blue than the lighter link
blue used elsewhere; confirmed by sampling the actual mockup pixels. */
.ca-podcast__episodes-header { background: var(--color-brand); color: #FFFFFF; padding: var(--size-space-sm) var(--size-space-md); flex-shrink: 0; }
/* max-height + overflow-y:auto — a real, fixed cap (was an unbounded
flex:1 relying on the JS height-sync above to ever actually engage
scrolling; see the .ca-podcast__episodes comment for why that broke).
455px is a direct spec value, comfortably shows ~4-5 episodes before
scrolling kicks in.
min-height:0 stays even though max-height alone is normally enough to
cap a flex item — belt-and-suspenders against the known flex
min-height:auto gotcha (flex items default to never shrinking below
their own content's natural height, which can fight overflow:auto in
some browsers/layouts) that this exact list already hit once before. */
.ca-podcast__episodes-list { flex: 1; min-height: 0; max-height: 455px; overflow-y: auto; }
/* Custom scrollbar — thin and quiet rather than the OS default's full
width, so it reads as part of the design instead of a browser chrome
afterthought. scrollbar-width/scrollbar-color cover Firefox; the
::-webkit-scrollbar-* rules cover Chrome/Safari/Edge. Neutral gray
(--color-border-midgray), matching the panel's own border color,
darkening on hover for a little feedback without introducing a new
one-off color. */
.ca-podcast__episodes-list { scrollbar-width: thin; scrollbar-color: var(--color-border-midgray) transparent; }
.ca-podcast__episodes-list::-webkit-scrollbar { width: 6px; }
.ca-podcast__episodes-list::-webkit-scrollbar-track { background: transparent; }
.ca-podcast__episodes-list::-webkit-scrollbar-thumb { background: var(--color-border-midgray); border-radius: var(--size-radius-full); }
@media (hover: hover) { .ca-podcast__episodes-list::-webkit-scrollbar-thumb:hover { background: var(--color-text-secondary); } }
.ca-podcast__episode { padding: var(--size-space-sm) var(--size-space-md); cursor: pointer; transition: background var(--transition-fast); }
@media (hover: hover) { .ca-podcast__episode:hover { background: var(--color-surface-primary); } }
.ca-podcast__episode.is-active { background: var(--color-light-blue); }
.ca-podcast__episode-date { color: var(--color-text-secondary); margin: 0 0 4px 0; } /* 4px — no spacing token this small */
.ca-podcast__episode-title { color: var(--color-link); margin: 0 0 4px 0; } /* 4px */
.ca-podcast__episode.is-active .ca-podcast__episode-title { color: var(--color-navy); }
.ca-podcast__episode-faculty { color: var(--color-text-primary); margin: 0; }
/* ============================================================
FOOTER
============================================================ */
.ca-footer { background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-navy) 100%); padding: var(--size-space-2xl) 0; }
.ca-footer__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--size-space-lg); flex-wrap: wrap; }
/* align-items: flex-start — same "flex default stretch" bug fixed
elsewhere this session (hero badge, committee tag pill): without it,
the logo ![]()
(width:auto) was being cross-axis-stretched to match
the container's own width, which is wider than the logo's own natural
size — the wordmark rendered shifted right/"centered" relative to the
icon row below it rather than flush left, confirmed by both boxes'
widths being identical (247.25px) when they shouldn't be. */
.ca-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--size-space-sm); }
.ca-footer__logo { height: 30px; width: auto; }
.ca-footer__social { display: flex; gap: var(--size-space-2xs); }
.ca-footer__social-icon { width: 42px; height: 42px; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center; transition: transform var(--transition-fast); }
@media (hover: hover) { .ca-footer__social-icon:hover { transform: scale(1.08); } }
/* mask-image, blue fill (was a plain ![]()
, black by default — the
mockup shows these blue, confirmed by sampling its actual pixels).
mask-size:contain fits each glyph's own aspect ratio (facebook's "f" is
narrow, youtube's play-badge is taller, etc.) within one fixed box
without stretching, same effect as the old cap-by-height approach but
without needing per-icon dimensions. */
.ca-footer__social-icon-glyph { display: block; width: 20px; height: 20px; background-color: var(--color-link); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.ca-footer__copyright { color: rgba(255,255,255,0.85); margin: 0; } /* 16px via BodyBase class in index.html (was BodySmall/14px) */
.ca-footer__links { display: flex; align-items: center; gap: var(--size-space-2xs); flex-wrap: wrap; margin-top: var(--size-space-md); }
.ca-footer__links a { color: #FFFFFF; text-decoration: underline; font-family: var(--typography-family-body); font-size: var(--typography-scale-base); } /* 16px, was 14px — legal links are JS-generated with no utility class in the markup to swap, so this stays a direct token reference like the rest of this file's link styling */
.ca-footer__links-sep { color: rgba(255,255,255,0.6); }
/* ============================================================
MODAL
============================================================ */
body.ca-scroll-lock { overflow: hidden; }
.ca-modal-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(22,26,46,0.6); display: none; align-items: center; justify-content: center; padding: var(--size-space-md); }
.ca-modal-overlay.is-open { display: flex; }
.ca-modal { position: relative; background: #FFFFFF; border-radius: var(--size-radius-rounded); max-width: 720px; width: 100%; max-height: 88vh; overflow-y: auto; padding: var(--size-space-lg); }
/* No circle/background (was a gray filled circle) — plain blue "X", per
the reference screenshot. Covers every modal (bio, video, search
results, share) since they all share this one close button markup.
Sized/inset so `inset + size` never exceeds .ca-modal's own 40px
padding (var(--size-space-lg)) — the previous 24px inset + 28px size
summed to 52px, 12px past the content box's top-right corner, so the
button visually overlapped whatever content started there (e.g. the
video player's own corner). 12px inset + 24px size = 36px, a 4px
buffer inside the padding gutter — button and content never overlap,
at any modal size, including once extra content (sources list, etc.)
is added below. */
.ca-modal__close { position: absolute; top: var(--size-space-xs); right: var(--size-space-xs); width: 24px; height: 24px; border-radius: var(--size-radius-minimal); border: none; background: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: opacity var(--transition-fast); z-index: 1; }
@media (hover: hover) { .ca-modal__close:hover { opacity: 0.7; } }
/* close.svg (user-supplied) — replaces the earlier x.svg reuse of the
share modal's network-icon glyph with a dedicated close icon. */
.ca-modal__close-icon { display: block; width: 16px; height: 16px; background-color: var(--color-link); -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; -webkit-mask-image: url('../images/icons/close.svg'); mask-image: url('../images/icons/close.svg'); }
.ca-bio-modal { display: flex; gap: var(--size-space-lg); flex-wrap: wrap; }
.ca-bio-modal__photo { width: 140px; height: 180px; object-fit: cover; border-radius: var(--size-radius-rounded); flex-shrink: 0; }
.ca-bio-modal__body { flex: 1; min-width: 240px; }
.ca-bio-modal__name { margin: 0 0 var(--size-space-2xs) 0; }
.ca-bio-modal__credentials { color: var(--color-text-secondary); margin: 0 0 var(--size-space-sm) 0; } /* renamed from .ca-bio-modal__institution (2026-09-25) */
.ca-bio-modal__bio { color: var(--color-text-primary); margin: 0; }
.ca-video-modal__player { border-radius: var(--size-radius-rounded); overflow: hidden; margin-bottom: var(--size-space-sm); background: #000; }
.ca-video-modal__player video { width: 100%; display: block; }
/* JW Player iframe embed — the 56.25%-padding-bottom aspect-ratio box
trick (JWP's own recommended markup), since an iframe has no
intrinsic size for the browser to lay out against the way a