/* ==============================================================
Dr. Vanessa Montemarano, Clinical Psychology
Editorial system. Impeccable pass: rules + whitespace + type
contrast carry the design. No kickers, no icon tiles, no floating
card grids, no gradients, no glows.
Two palettes (light paper / dark umber), one client accent
(espresso), one professional-lane accent (sage). Serif display,
sans body, both from system stacks: zero webfonts.
The colour system is deliberately small: three warm paper
neutrals (paper / white / sand) carry every surface, band, chip
and hover; espresso carries every client-lane accent; sage
carries every professional-lane accent. Alpha colours are mixed
from those same bases. The one sanctioned exception is the
coordinated care band (--care-*), a blue-grey ground with a teal
label, kept because that section speaks about a patient's wider
care team rather than about this practice. Anything else wanting
its own colour should use one of the accents instead.
Theming: light values live on :root. The dark block applies when
the visitor picks dark (html[data-theme="dark"], set by the footer
switch in site.js) or when the OS prefers dark and no explicit
light choice was made. Every colour in the file must come from
these tokens; no literals below this block.
============================================================== */
:root {
--vm-css-version: 126;
color-scheme: light;
/* Warm paper neutrals: the page ground, the raised card/band
surface, and one deeper cream tint. Every surface on the site is
one of these three. */
--paper: #faf7f2;
/* Header band: barely warmer than white, just enough to read as its own band. */
--banner: #fdf9f4;
--white: #fffcf8;
--sand: #f2e9dd;
--cream: #f7f1ea;
/* Second card surface, and the lift under a boxed panel. */
--stone: #ece9e3;
--shadow-card: 0 16px 42px rgba(84, 62, 47, 0.07);
--shadow-card-hover: 0 22px 54px rgba(84, 62, 47, 0.13);
/* Coordinated care keeps its own blue-grey ground and teal label: a
deliberate exception to the two-accent rule, set on the eating
disorder page where the section speaks about other people's care. */
--care-bg: #dfe9e8;
--care-rule: #b9ccca;
--care-ink: #4b6d6a;
--shadow-card: 0 16px 42px rgba(84, 62, 47, 0.07);
--shadow-card-hover: 0 22px 54px rgba(84, 62, 47, 0.13);
--ink: #221d18;
--ink-soft: #57504a;
--rule: rgba(34, 29, 24, 0.16);
--rule-strong: rgba(34, 29, 24, 0.38);
--accent: #47382b;
--accent-deep: #2f2419;
--on-accent: #faf9f6;
--accent-wash: rgba(71, 56, 43, 0.07);
--focus-ring: rgba(71, 56, 43, 0.13);
/* The sage surface has to clear the warm paper it sits on: deep
enough that the pill and the lane bands are legible shapes
without turning loud. */
--sage: #d8dfd0;
--sage-soft: rgba(216, 223, 208, 0.5);
--sage-hover: #d0d7c7;
--sage-rule: rgba(39, 57, 48, 0.22);
--sage-ink: #364a3d;
--sage-deep: #273930;
--forest: #1f5138;
--forest-hover: #163c29;
--sage-deep-hover: #1c2b23;
--on-sage: #faf9f6;
--placeholder: #9c948b;
--lane-hover: rgba(255, 252, 248, 0.55);
--pro-row-hover: rgba(39, 57, 48, 0.06);
/* Fixed surfaces that keep the light palette's values in both
themes: the credential chips, and the inverted close band, which
stays a dark, deliberate stop. Only the band ground deepens in
dark; the inks hold. */
--badge-bg: #faf7f2;
--badge-ink: #47382b;
--close-bg: #2f2419;
--close-bg-pro: #273930;
--close-ink: #faf9f6;
--close-ink-bright: #fffcf8;
--close-ink-soft: rgba(250, 249, 246, 0.72);
--close-rule: rgba(250, 249, 246, 0.4);
--select-arrow: url('data:image/svg+xml;utf8,');
--check-icon: url('data:image/svg+xml;utf8,');
--img-dim: none;
--radius: 8px;
--shadow-img: 0 1px 2px rgba(34, 29, 24, 0.05), 0 16px 40px rgba(34, 29, 24, 0.1);
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
--sans: "Avenir Next", Avenir, "Gill Sans", Corbel, sans-serif;
/* One reading size across the site. Hierarchy comes from typeface,
weight and spacing—not several near-identical paragraph sizes. */
--text-utility: 0.875rem;
--text-caption: 1.125rem;
--text-small: 1.125rem;
--text-body: 1.125rem;
--text-lead: 1.125rem;
--text-h3: 1.5rem;
--text-h2-compact: clamp(1.75rem, 3vw, 2rem);
--text-h2: clamp(1.75rem, 3vw, 2rem);
--text-h1: clamp(2.5rem, 4.5vw, 3.5rem);
--text-display: clamp(2.5rem, 4.5vw, 3.5rem);
}
/* Dark palette: dark espresso ground, not near-black, so it reads
as the same paper turned down rather than a different site. The
accent goes monochrome — a light warm neutral — because coloured
accents fight the dark ground; links and CTAs are carried by
weight, underline and contrast alone. Sage keeps only a whisper
of green in its surfaces. The block is stated twice — once for
an explicit choice, once for the OS preference — because CSS
offers no way to share it without dropping older browsers.
Keep both copies identical. */
:root[data-theme="dark"] {
color-scheme: dark;
--paper: #191310;
--banner: #1f1813;
--white: #221b16;
--sand: #261e18;
--cream: #1e1713;
--stone: #2a2219;
--shadow-card: 0 16px 42px rgba(0, 0, 0, 0.42);
--shadow-card-hover: 0 22px 54px rgba(0, 0, 0, 0.55);
--care-bg: #1b2422;
--care-rule: rgba(185, 204, 202, 0.24);
--care-ink: #a9c4c0;
--shadow-card: 0 16px 42px rgba(0, 0, 0, 0.42);
--shadow-card-hover: 0 22px 54px rgba(0, 0, 0, 0.55);
--ink: #f5efe6;
--ink-soft: #c4b8aa;
--rule: rgba(245, 239, 230, 0.14);
--rule-strong: rgba(245, 239, 230, 0.4);
--accent: #f0e9dd;
--accent-deep: #fffaf0;
--on-accent: #191310;
--accent-wash: rgba(245, 239, 230, 0.07);
--focus-ring: rgba(245, 239, 230, 0.3);
--sage: #262e27;
--sage-soft: rgba(38, 46, 39, 0.5);
--sage-hover: #2e372f;
--sage-rule: rgba(205, 214, 206, 0.22);
--sage-ink: #cdd6ce;
--sage-deep: #e6ece5;
--forest: #9dcbb0;
--forest-hover: #b9dcc7;
--sage-deep-hover: #f3f8f2;
--on-sage: #191310;
--placeholder: #857868;
--lane-hover: rgba(255, 252, 248, 0.05);
--pro-row-hover: rgba(230, 236, 229, 0.06);
--close-bg: #0e0a07;
--close-bg-pro: #0d120e;
--img-dim: brightness(0.9) saturate(0.96);
--select-arrow: url('data:image/svg+xml;utf8,');
--check-icon: url('data:image/svg+xml;utf8,');
--shadow-img: 0 1px 2px rgba(0, 0, 0, 0.55), 0 16px 40px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--paper: #191310;
--banner: #1f1813;
--white: #221b16;
--sand: #261e18;
--cream: #1e1713;
--stone: #2a2219;
--shadow-card: 0 16px 42px rgba(0, 0, 0, 0.42);
--shadow-card-hover: 0 22px 54px rgba(0, 0, 0, 0.55);
--care-bg: #1b2422;
--care-rule: rgba(185, 204, 202, 0.24);
--care-ink: #a9c4c0;
--shadow-card: 0 16px 42px rgba(0, 0, 0, 0.42);
--shadow-card-hover: 0 22px 54px rgba(0, 0, 0, 0.55);
--ink: #f5efe6;
--ink-soft: #c4b8aa;
--rule: rgba(245, 239, 230, 0.14);
--rule-strong: rgba(245, 239, 230, 0.4);
--accent: #f0e9dd;
--accent-deep: #fffaf0;
--on-accent: #191310;
--accent-wash: rgba(245, 239, 230, 0.07);
--focus-ring: rgba(245, 239, 230, 0.3);
--sage: #262e27;
--sage-soft: rgba(38, 46, 39, 0.5);
--sage-hover: #2e372f;
--sage-rule: rgba(205, 214, 206, 0.22);
--sage-ink: #cdd6ce;
--sage-deep: #e6ece5;
--forest: #9dcbb0;
--forest-hover: #b9dcc7;
--forest-hover: #b9dcc7;
--sage-deep-hover: #f3f8f2;
--on-sage: #191310;
--placeholder: #857868;
--lane-hover: rgba(255, 252, 248, 0.05);
--pro-row-hover: rgba(230, 236, 229, 0.06);
--close-bg: #0e0a07;
--close-bg-pro: #0d120e;
--img-dim: brightness(0.9) saturate(0.96);
--select-arrow: url('data:image/svg+xml;utf8,');
--check-icon: url('data:image/svg+xml;utf8,');
--shadow-img: 0 1px 2px rgba(0, 0, 0, 0.55), 0 16px 40px rgba(0, 0, 0, 0.5);
}
}
* { box-sizing: border-box; }
html {
font-size: 80%;
scroll-behavior: smooth;
}
[hidden] { display: none !important; }
body {
margin: 0;
color: var(--ink);
background: var(--paper);
font-family: var(--sans);
font-size: var(--text-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
animation: page-in 480ms ease both;
transition: opacity 300ms ease;
}
body.page-leaving { opacity: 0; }
@keyframes page-in {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; animation: none !important; }
}
img { display: block; max-width: 100%; height: auto; }
/* Photographs dim a touch in the dark palette so they sit in the page rather than glare. */
.portrait-frame img, .split img, .essay-portrait img { filter: var(--img-dim); }
a { color: inherit; text-decoration: none; }
p {
margin: 0;
color: var(--ink-soft);
font-size: var(--text-body);
max-width: 62ch;
}
p + p { margin-top: 14px; }
h1, h2, h3 {
margin: 0;
color: var(--ink);
font-family: var(--serif);
font-weight: 400;
}
h1 { font-size: var(--text-h1); line-height: 1.06; letter-spacing: -0.01em; }
h2 { font-size: var(--text-h2); line-height: 1.14; letter-spacing: -0.005em; }
h3 { font-size: var(--text-h3); line-height: 1.25; }
.wrap { width: min(1120px, calc(100% - 44px)); margin: 0 auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.skip-link {
position: absolute;
left: 16px;
top: -48px;
z-index: 100;
padding: 10px 16px;
background: var(--ink);
color: var(--paper);
border-radius: 999px;
font-size: var(--text-caption);
font-weight: 600;
transition: top 160ms ease;
}
.skip-link:focus { top: 12px; }
/* ---------------- Header & navigation ---------------- */
.header {
position: relative;
z-index: 20;
border-bottom: 1px solid var(--rule);
background: var(--banner);
}
.nav-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 72px;
}
/* Wordmark: drop initial, hairline rule, name. */
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark {
font-family: var(--serif);
font-size: 2.25rem;
line-height: 1;
color: var(--accent);
padding-right: 13px;
border-right: 1px solid var(--rule);
}
.brand-text { display: grid; gap: 1px; }
.brand-text strong {
font-family: var(--serif);
font-size: 1rem;
font-weight: 400;
line-height: 1.2;
}
.brand-text span {
color: var(--ink-soft);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.3;
}
.nav { display: flex; align-items: center; gap: 7px; }
.nav > a, .nav-trigger {
position: relative;
padding: 9px 10px;
border-radius: 999px;
color: var(--ink-soft);
font-size: 1rem;
font-weight: 500;
line-height: 1.2;
transition: color 160ms ease, background 160ms ease;
}
.nav > a:hover, .nav-trigger:hover, .nav-item:focus-within .nav-trigger { color: var(--ink); }
.nav > a[aria-current="page"], .nav-trigger.current {
color: var(--ink);
}
.nav > a[aria-current="page"]::after {
content: "";
position: absolute;
left: 11px;
right: 11px;
bottom: 3px;
height: 1px;
background: var(--ink);
}
.nav > a.nav-cta {
margin-left: 8px;
padding: 10px 18px;
color: var(--on-accent);
background: var(--accent);
font-weight: 600;
}
.nav > a.nav-cta:hover { background: var(--accent-deep); color: var(--on-accent); }
.nav > a.nav-cta[aria-current="page"]::after { display: none; }
.nav-item { position: relative; }
.nav-trigger {
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: 0;
font-family: var(--sans);
cursor: pointer;
}
.nav-trigger svg { width: 11px; height: 11px; margin-top: 1px; margin-left: -2px; }
/* The chevron sits in the gap after its label, so a dropdown item reads as
further from the next link than a plain one. Recover that space from the
trigger's own padding first, so the hit areas stay separate. */
.nav-trigger { padding-right: 2px; }
.dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 246px;
display: none;
padding: 6px;
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--radius);
}
.dropdown::before {
content: "";
position: absolute;
top: -8px;
left: 0;
right: 0;
height: 8px;
}
.dropdown::after {
content: "";
position: absolute;
top: -6px;
left: 22px;
width: 10px;
height: 10px;
background: var(--white);
border-top: 1px solid var(--rule);
border-left: 1px solid var(--rule);
transform: rotate(45deg);
}
.dropdown--right { left: auto; right: 0; }
.dropdown--right::after { left: auto; right: 22px; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { display: grid; }
.dropdown a {
display: flex;
align-items: center;
gap: 9px;
border-radius: 5px;
padding: 8px 11px;
color: var(--ink-soft);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.35;
}
.dropdown-icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; color: var(--accent); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dropdown a:hover { background: var(--sand); color: var(--ink); }
.dropdown a:hover .dropdown-icon { color: var(--ink); }
.dropdown a[aria-current="page"] { color: var(--ink); background: var(--accent-wash); }
.dropdown .dropdown-note {
padding: 8px 11px 4px;
color: var(--ink-soft);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Professional lane marker in the nav */
.nav .nav-pro { background: var(--sage); color: var(--sage-ink); }
.nav .nav-pro:hover, .nav-item:focus-within .nav-pro { background: var(--sage-hover); color: var(--sage-ink); }
/* Mobile menu */
.menu-toggle {
display: none;
align-items: center;
gap: 8px;
padding: 9px 15px;
background: none;
border: 1px solid var(--rule-strong);
border-radius: 999px;
color: var(--ink);
font-family: var(--sans);
font-size: var(--text-caption);
font-weight: 600;
cursor: pointer;
}
.menu-toggle svg { width: 16px; height: 16px; }
.mobile-menu {
display: none;
border-top: 1px solid var(--rule);
background: var(--paper);
padding: 10px 22px 26px;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
display: block;
padding: 12px 4px;
border-bottom: 1px solid var(--rule);
font-size: var(--text-body);
font-weight: 500;
color: var(--ink);
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu .mobile-group {
margin: 18px 0 2px;
color: var(--ink-soft);
font-size: var(--text-utility);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.mobile-menu .mobile-sub { display: flex; align-items: center; gap: 10px; padding-left: 16px; font-weight: 400; color: var(--ink-soft); }
.mobile-menu .mobile-cta {
margin-top: 18px;
border: 0;
border-radius: 999px;
background: var(--accent);
color: var(--on-accent);
text-align: center;
font-weight: 600;
padding: 13px;
}
/* ---------------- Breadcrumbs ---------------- */
.crumbs {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 26px;
color: var(--ink-soft);
font-size: var(--text-caption);
}
.crumbs a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.crumbs [aria-current="page"] { color: var(--ink); }
.crumbs .sep { color: var(--rule-strong); }
/* ---------------- Buttons & links ---------------- */
.button {
display: inline-block;
padding: 13px 26px;
color: var(--on-accent);
background: var(--accent);
border: 0;
border-radius: 999px;
font-family: var(--sans);
font-weight: 600;
font-size: var(--text-small);
line-height: 1.3;
cursor: pointer;
transition: background 160ms ease;
}
.button:hover { background: var(--accent-deep); }
.button:active { transform: translateY(1px); }
.button.ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--rule-strong);
padding: 12px 25px;
}
.button.ghost:hover { background: transparent; border-color: var(--ink); }
.text-link {
color: var(--accent);
font-weight: 600;
font-size: var(--text-small);
text-decoration: underline;
text-decoration-color: var(--rule);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
transition: text-decoration-color 160ms ease;
}
.text-link:hover { text-decoration-color: var(--accent); }
/* A link inside running prose is part of the sentence: it keeps the
surrounding size and weight, and is marked only by colour + underline. */
p .text-link, li .text-link, dd .text-link {
font-size: inherit;
font-weight: inherit;
}
.page-actions, .section-actions {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.page-actions { margin-top: 30px; }
.section-actions { margin-top: 26px; }
/* ---------------- Heroes ---------------- */
.hero {
display: grid;
grid-template-columns: 7fr 5fr;
gap: clamp(36px, 5vw, 76px);
align-items: center;
padding-block: clamp(48px, 8vh, 96px);
}
.hero h1 { font-size: var(--text-display); line-height: 1.01; }
.hero-copy > p { margin-top: 24px; font-size: var(--text-lead); line-height: 1.6; }
.hero-copy p strong { color: var(--ink); font-weight: 600; }
/* Home hero: larger lead in two short paragraphs, with a clear breath between them */
.hero--home .hero-copy > p { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.45rem); line-height: 1.55; max-width: 50ch; }
.hero--home .hero-copy > p + p { margin-top: 18px; }
.portrait-frame img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-img); }
/* Service-page hero: same shape, shorter words */
/* Service heroes start at the top: with align-items centre, a tall portrait
pushed the copy down by however tall the image happened to be, so the gap
under the header differed on every page. */
.hero--page { padding-block: clamp(40px, 6vh, 76px); align-items: start; }
.hero--page h1 { font-size: var(--text-h1); max-width: 14ch; }
.hero--page .hero-copy > p { max-width: 46ch; }
.hero--text { grid-template-columns: 1fr; }
.hero--text .hero-copy { max-width: 760px; }
.hero .crumbs { margin-bottom: 20px; }
/* Lucide icon inline with headings */
.licon {
width: 22px;
height: 22px;
vertical-align: -3px;
margin-right: 12px;
color: var(--accent);
}
/* ---------------- Credential strip ---------------- */
.cred-strip { border-block: 1px solid var(--rule); background: var(--white); }
.cred-strip-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
padding-block: 22px;
}
.cred-item { display: flex; align-items: center; gap: 14px; }
.cred-item strong {
display: block;
font-family: var(--serif);
font-size: var(--text-body);
font-weight: 400;
line-height: 1.3;
}
.cred-item small { color: var(--ink-soft); font-size: var(--text-caption); line-height: 1.45; }
.logo-badge {
flex: none;
display: grid;
place-items: center;
width: 40px;
height: 40px;
background: var(--badge-bg);
border: 1px solid var(--rule);
border-radius: 999px;
overflow: hidden;
}
.logo-badge img { width: 20px; height: 20px; }
.logo-badge b {
font-family: var(--serif);
font-weight: 400;
font-size: var(--text-body);
color: var(--badge-ink);
}
/* Long-form prose column */
.prose { max-width: 68ch; }
.prose h2 + p { margin-top: 18px; }
/* ---------------- Page head (inner pages) ---------------- */
.page-head { padding-block: clamp(40px, 6vh, 68px) clamp(30px, 4vh, 48px); }
.page-head .lede { margin-top: 18px; font-size: var(--text-lead); line-height: 1.6; }
.page-head .lede + p { margin-top: 12px; }
.refer-head.page-head { padding-block: clamp(28px, 4vh, 44px) clamp(22px, 3vh, 32px); }
.refer-head .lede { font-size: 1rem; line-height: 1.6; }
/* ---------------- Sections ---------------- */
.section { padding-block: clamp(60px, 9vh, 104px); }
.section.tight { padding-block: clamp(40px, 6vh, 68px); }
.band-white { background: var(--white); border-block: 1px solid var(--rule); }
.band-sand { background: var(--sand); }
.band-sage { background: var(--sage); border-block: 1px solid var(--sage-rule); }
.section-head { margin-bottom: clamp(32px, 4vh, 48px); }
.section-head h2 { max-width: 24ch; }
.section-head p { margin-top: 14px; max-width: 82ch; }
.section-head.center { text-align: center; }
.section-head.center h2 { max-width: none; }
.section-head.center p { margin-inline: auto; }
/* ---------------- Row list: the product catalog ---------------- */
.row-list { border-top: 1px solid var(--rule-strong); }
.row {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 190px;
gap: 18px 40px;
align-items: baseline;
padding-block: 30px;
border-bottom: 1px solid var(--rule);
transition: background 160ms ease;
}
a.row:hover { background: var(--accent-wash); }
a.row {
margin-inline: -18px;
padding-inline: 18px;
border-radius: 2px;
}
.row h3 {
display: flex;
align-items: center;
font-size: var(--text-h3);
}
.row h3 .licon {
flex: 0 0 auto;
vertical-align: 0;
}
/* Home services list: every row carries the same espresso icon on a
sand disc — the catalog reads as one set, not five colours. */
#services .row h3 .licon {
box-sizing: content-box;
padding: 9px;
margin-right: 14px;
border-radius: 999px;
color: var(--accent);
background: var(--sand);
transition: background 160ms ease;
}
/* The tinted disc makes the heading taller than its text, so baseline
alignment would drop the other columns. Align from the top instead and
let the heading's own line box do the centring. */
#services .row { align-items: start; padding-block: 22px; }
#services .row-body, #services .row-cta { padding-top: 1px; }
/* The list is long; tighten it so it reads in one screenful. */
#services { padding-block: clamp(48px, 7vh, 78px); }
#services .section-head { margin-bottom: clamp(24px, 3vh, 34px); }
#services .row h3 { font-size: 1.375rem; }
#services .row h3 .licon { padding: 8px; margin-right: 12px; }
#services a.row:hover { background: var(--accent-wash); }
.row .row-body p { max-width: 56ch; }
.row .row-meta {
margin-top: 10px;
color: var(--ink);
font-size: var(--text-caption);
}
.row .row-meta b { font-weight: 600; }
.row .row-cta {
justify-self: end;
color: var(--accent);
font-weight: 600;
font-size: var(--text-small);
white-space: nowrap;
}
.row .row-cta .arrow { display: inline-block; transition: transform 160ms ease; }
a.row:hover .row-cta .arrow { transform: translateX(3px); }
.row .row-cta.quiet-cta { color: var(--ink-soft); font-weight: 500; }
.row-list.stack .row { grid-template-columns: 1fr; gap: 10px; }
.row-list.stack .row h3 { font-size: var(--text-h3); }
/* ---------------- Writing page ---------------- */
/* The writing page keeps the site's row rhythm: the title sits alone in the
head, and essays stack close enough to scan as a list, not a sequence of
separate screens. */
.page-writing .page-head {
padding-block: clamp(48px, 7vh, 72px) clamp(28px, 4vh, 40px);
}
.page-writing .page-head h1 { max-width: 22ch; }
.page-writing .page-head .lede { margin-top: 20px; }
.page-writing .section.tight { padding-block: clamp(40px, 6vh, 64px); }
.page-writing .section-head { margin-bottom: clamp(20px, 3vh, 28px); }
.page-writing .row-list { max-width: 1000px; margin-inline: auto; }
.page-writing .row {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 170px;
gap: 14px 40px;
padding-block: 24px;
}
.page-writing .row h3 { max-width: 26ch; }
.page-writing .row .row-meta { margin-top: 6px; }
/* Research rows carry full paper titles, which need a wider measure
than the short essay titles above them. */
.page-writing .research-list .row { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr) 170px; }
.page-writing .research-list .row h3 { max-width: none; }
/* Publications: the spec sheet's label column narrows to a year. */
.page-writing .pub-list .spec-row { grid-template-columns: 96px minmax(0, 1fr); }
.page-writing .pub-list .spec-row dd { max-width: 72ch; }
.page-writing .close-band-inner { padding-block: clamp(68px, 10vh, 108px); }
/* ---------------- Recognition list ---------------- */
.recognition-list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--rule-strong);
}
.recognition-list li {
padding-block: 19px;
border-bottom: 1px solid var(--rule);
font-family: var(--serif);
font-size: var(--text-h3);
line-height: 1.35;
color: var(--ink);
}
/* Two-up variant: the quotes pair off row by row, each on its own rule. */
.recognition-list--grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 40px;
border-top: 0;
}
.recognition-list--grid li {
padding-block: 13px;
border-bottom: 0;
border-top: 1px solid var(--rule-strong);
font-size: 1.125rem;
line-height: 1.45;
}
/* ---------------- Steps ---------------- */
.steps { display: grid; gap: 26px 32px; }
.steps.cols-3 { grid-template-columns: repeat(3, 1fr); }
.steps.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Five across, with type that shrinks to fit rather than dropping to a list. */
.steps.cols-5 { grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.8vw, 26px); }
.steps.cols-5 .step-item { padding-top: clamp(10px, 1.2vw, 18px); }
.steps.cols-5 .step-item strong { font-size: clamp(0.875rem, 1.45vw, 1.125rem); }
.steps.cols-5 .step-item p { margin-top: 6px; font-size: clamp(0.75rem, 1.1vw, 0.9375rem); }
.step-item { padding-top: 18px; border-top: 1px solid var(--rule-strong); }
.step-item strong {
display: block;
font-family: var(--serif);
font-size: var(--text-h3);
font-weight: 400;
line-height: 1.3;
}
.step-item p { margin-top: 8px; font-size: var(--text-small); }
/* A sequence read as a progression rather than a list: each movement in
its own panel, marked with a tinted disc and joined by a chevron that
points across on wide screens and downward once the panels stack. */
.flow-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
--flow-gap: clamp(20px, 2.6vw, 32px);
gap: var(--flow-gap);
margin: 0;
padding: 0;
list-style: none;
}
.flow-step {
position: relative;
padding: clamp(24px, 2.8vw, 32px);
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
.flow-step-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-bottom: 18px;
border-radius: 999px;
background: var(--sand);
color: var(--accent);
}
.flow-step-mark svg { width: 22px; height: 22px; }
.flow-step h3 {
font-family: var(--serif);
font-size: var(--text-h3);
font-weight: 400;
line-height: 1.3;
}
.flow-step p { margin-top: 10px; font-size: var(--text-small); }
/* Stacked variant: the chevron turns to point down the column. */
.flow-steps--stack { grid-template-columns: minmax(0, 1fr); }
.flow-steps--stack .flow-step + .flow-step::before {
top: calc(var(--flow-gap) / -2);
left: 50%;
margin: -5px 0 0 -6px;
transform: rotate(135deg);
}
.flow-step + .flow-step::before {
content: "";
position: absolute;
top: 50%;
left: calc(var(--flow-gap) / -2);
width: 9px;
height: 9px;
margin: -6px 0 0 -5px;
border-top: 1.5px solid var(--rule-strong);
border-right: 1.5px solid var(--rule-strong);
transform: rotate(45deg);
}
.eft-open {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
gap: clamp(34px, 4.5vw, 68px);
align-items: start;
}
.eft-open-copy p { font-size: clamp(1.125rem, 1.5vw, 1.25rem); line-height: 1.65; }
.eft-open-copy p + p { margin-top: 18px; }
/* Beside the argument the panels are a slim column, not the focal point. */
.eft-open .flow-steps { --flow-gap: 16px; }
.eft-open .flow-step { padding: 20px 22px; }
.eft-open .flow-step-mark { width: 34px; height: 34px; margin-bottom: 12px; }
.eft-open .flow-step-mark svg { width: 17px; height: 17px; }
.eft-open .flow-step h3 { font-size: 1.0625rem; }
.eft-open .flow-step p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.55; }
.eft-open-flow h2 { margin-bottom: clamp(18px, 2.2vh, 24px); max-width: 18ch; font-size: clamp(1.35rem, 2vw, 1.6rem); }
@media (max-width: 980px) {
.eft-open { grid-template-columns: 1fr; gap: clamp(30px, 4vh, 44px); }
.eft-open-flow h2 { max-width: none; }
}
@media (max-width: 860px) {
.flow-steps { grid-template-columns: 1fr; }
.flow-step + .flow-step::before {
top: calc(var(--flow-gap) / -2);
left: 50%;
margin: -5px 0 0 -6px;
transform: rotate(135deg);
}
}
/* ---------------- Split (text + image) ---------------- */
.split {
display: grid;
grid-template-columns: 7fr 5fr;
gap: clamp(36px, 5vw, 76px);
align-items: center;
}
.split.media-left { grid-template-columns: 5fr 7fr; }
.split.even { grid-template-columns: 1fr 1fr; align-items: start; }
.split.even .dash-list + p { margin-top: 22px; }
.split h2 { max-width: 22ch; }
.split h2 + p { margin-top: 16px; }
.split figure { margin: 0; }
.split img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-img); }
.split figcaption { margin-top: 12px; color: var(--ink-soft); font-size: var(--text-caption); }
.split h3 { margin-top: 28px; }
.split .steps { margin-top: 24px; }
.split .spec { margin-top: 32px; }
/* Assessment page: outcomes first, process second. Both use the site's
ruled editorial grids instead of a dense side-by-side comparison. */
.assessment-outcomes .section-head,
.assessment-process .section-head { max-width: 72ch; }
.assessment-outcomes .work-item p,
.assessment-process .step-item p { font-size: var(--text-body); }
/* ---------------- Plain definition list: focus areas ---------------- */
.area-list { border-top: 1px solid var(--rule-strong); margin: 0; }
/* Warmth from the marks, not the ground: each icon sits in a sand disc, the
same device the home services list uses. The rows stay one surface. */
.area-list--warm .area dt .licon {
box-sizing: content-box;
width: 18px;
height: 18px;
padding: 8px;
margin-top: -4px;
border-radius: 999px;
color: var(--accent);
background: var(--sand);
}
.area {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
gap: 8px 40px;
padding-block: 22px;
border-bottom: 1px solid var(--rule);
}
.area dt {
display: flex;
align-items: flex-start;
gap: 12px;
font-family: var(--serif);
font-size: var(--text-lead);
line-height: 1.3;
}
.area dt .licon { flex: 0 0 auto; width: 20px; height: 20px; margin-right: 0; vertical-align: 0; margin-top: 1px; }
.area dd { margin: 0; color: var(--ink-soft); font-size: var(--text-small); max-width: 58ch; }
/* ---------------- Spec sheet ---------------- */
.spec { margin: 0; border-top: 1px solid var(--rule-strong); }
.spec-row {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 6px 40px;
padding-block: 16px;
border-bottom: 1px solid var(--rule);
}
.spec-row dt { font-size: var(--text-caption); font-weight: 600; color: var(--ink); padding-top: 2px; }
.spec-row dd { margin: 0; color: var(--ink-soft); font-size: var(--text-small); max-width: 58ch; }
/* ---------------- Pointer strip (cross-routing) ---------------- */
.pointer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-top: clamp(36px, 5vh, 56px);
padding: 24px 28px;
background: var(--sand);
border-radius: var(--radius);
}
.pointer p { color: var(--ink); font-size: var(--text-body); max-width: none; }
.pointer .text-link { white-space: nowrap; }
.pointer.flush { margin-top: 0; }
.pointer .links { display: flex; gap: 22px; flex-wrap: wrap; }
/* ---------------- Focus blocks (home narrative) ---------------- */
.focus-block h2 { font-size: var(--text-h2-compact); max-width: 22ch; }
.focus-block p { margin-top: 12px; }
.focus-block .text-link { display: inline-block; }
.focus-block + .focus-block { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--rule); }
/* ---------------- Home focus panels ----------------
Vanessa's original two-box composition, redrawn as flat paper
panels: square paper surfaces with no border, banner, shadow, or lift. */
.focus-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
/* Two side-by-side panels, each a whole click target. The primary link
stretches over its card; the secondary sits above that overlay. */
.focus-card {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(22px, 2.6vw, 30px);
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--white);
box-shadow: var(--shadow-card);
transition: box-shadow 180ms ease, transform 180ms ease;
}
.focus-card--stuck { background: var(--stone); }
.focus-card:has(.focus-link--primary:hover),
.focus-card:has(.focus-link--primary:focus-visible) {
box-shadow: var(--shadow-card-hover);
transform: translateY(-2px);
}
.focus-card .eyebrow {
color: var(--accent);
font-size: var(--text-utility);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.focus-card h2 { max-width: 19ch; font-size: clamp(1.75rem, 2.5vw, 2.35rem); line-height: 1.15; }
.focus-card p { max-width: 52ch; margin-top: 0; }
.focus-links { display: grid; justify-items: start; gap: 10px; margin-top: auto; padding-top: 18px; }
.focus-link {
color: var(--accent);
font-size: 0.9375rem;
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
}
.focus-link--primary::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.focus-links > .focus-link:not(.focus-link--primary) { position: relative; z-index: 1; }
.focus-link:hover { color: var(--accent-deep); }
/* ---------------- Professional lane band ---------------- */
.lane { background: var(--sage); border-block: 1px solid var(--sage-rule); }
.lane-inner {
display: grid;
grid-template-columns: 6fr 5fr;
gap: clamp(36px, 5vw, 76px);
padding-block: clamp(56px, 8vh, 92px);
align-items: center;
}
.lane h2 { max-width: 20ch; }
.lane h2 + p { margin-top: 14px; }
.lane-links { display: grid; }
.lane-link {
display: block;
padding: 22px 6px;
border-top: 1px solid var(--sage-rule);
transition: background 160ms ease;
}
.lane-link:last-child { border-bottom: 1px solid var(--sage-rule); }
.lane-link:hover { background: var(--lane-hover); }
.lane-link strong {
display: block;
font-family: var(--serif);
font-size: var(--text-h3);
font-weight: 400;
}
.lane-link small { display: block; margin-top: 5px; color: var(--ink-soft); font-size: var(--text-caption); line-height: 1.5; }
.lane-link .row-cta { display: inline-block; margin-top: 8px; color: var(--sage-deep); font-weight: 600; font-size: var(--text-caption); }
/* ---------------- Fit lists (two columns) ---------------- */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; }
.fit-col h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.125rem;
padding-bottom: 9px;
border-bottom: 1px solid var(--rule-strong);
}
.fit-col h3 .licon { width: 17px; height: 17px; margin-right: 0; vertical-align: 0; }
.fit-col.muted h3 .licon { color: var(--ink-soft); }
.fit-col ul { margin: 0; padding: 0; list-style: none; }
.fit-col li {
display: grid;
grid-template-columns: 17px minmax(0, 1fr);
gap: 12px;
align-items: start;
padding: 9px 0;
color: var(--ink-soft);
font-size: 0.9375rem;
line-height: 1.5;
border-bottom: 1px solid var(--rule);
}
.fit-col .fit-icon {
width: 20px;
height: 20px;
margin-top: 0.18em;
color: var(--accent);
}
.fit-col.muted .fit-icon { color: var(--ink-soft); }
/* ---------------- Fit tiles: short statements, three up ---------------- */
/* ---------------- Work grid: icon + heading + text, two up ---------------- */
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 44px; }
.work-item { padding-top: 20px; border-top: 1px solid var(--rule-strong); }
.work-item h3 { display: flex; align-items: center; gap: 12px; font-size: var(--text-h3); }
.work-item h3 .licon { flex: 0 0 auto; margin-right: 0; vertical-align: 0; }
.work-item p { margin-top: 10px; font-size: var(--text-small); }
/* A closing aside under a section, set off by a rule rather than a box */
.section-note {
max-width: 70ch;
margin-top: clamp(30px, 4vh, 44px);
padding-top: 24px;
border-top: 1px solid var(--rule);
font-size: var(--text-small);
}
/* Simple dash list inside prose */
.dash-list { margin: 18px 0 0; padding: 0; list-style: none; }
.dash-list li strong { color: var(--ink); font-weight: 600; }
.dash-list li {
position: relative;
padding: 8px 0 8px 24px;
color: var(--ink-soft);
font-size: var(--text-body);
line-height: 1.55;
}
.dash-list li::before {
content: "";
position: absolute;
left: 1px;
top: 1.15em;
width: 10px;
height: 1px;
background: var(--accent);
}
/* ---------------- About: one long-form essay ---------------- */
/* A single column of running prose. One body size throughout, one
heading size, one rhythm. Nothing here is a card or a chip. */
.essay {
width: min(680px, calc(100% - 44px));
padding-block: clamp(44px, 7vh, 80px) clamp(64px, 10vh, 112px);
}
.essay-head { margin-bottom: 14px; }
.essay-portrait { margin: 0 0 34px; }
.essay-portrait img {
width: 168px;
height: 168px;
object-fit: cover;
border-radius: 999px;
box-shadow: var(--shadow-img);
}
.essay h1 { font-size: var(--text-h1); }
/* One reading size for every paragraph on the page, lede included. */
.essay p {
max-width: none;
font-size: var(--text-lead);
line-height: 1.75;
}
.essay p + p { margin-top: 14px; }
.essay-lede { margin-top: 20px; }
.essay h2 {
margin-top: clamp(44px, 6vh, 64px);
margin-bottom: 20px;
padding-top: clamp(30px, 4vh, 42px);
border-top: 1px solid var(--rule);
font-size: var(--text-h2-compact);
}
.essay h2 + p { margin-top: 0; }
.essay .page-actions { margin-top: 34px; }
/* Where I trained: two columns of three, set small so each place fits its
half of the essay column. The mark reads as a reference, not a badge. */
.cred-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 28px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.cred-list li {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
align-items: start;
gap: 11px;
padding-top: 14px;
border-top: 1px solid var(--rule);
}
.cred-logo {
width: 20px;
height: 20px;
margin-top: 2px;
border-radius: 4px;
object-fit: contain;
}
.cred-list li > span { display: grid; gap: 3px; }
.cred-list strong { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.cred-list li > span > span {
color: var(--ink-soft);
font-size: 0.8125rem;
line-height: 1.4;
}
/* A quiet footnote under the credentials, not a paragraph of the essay */
.cred-note { margin-top: 18px; color: var(--ink-soft); font-size: var(--text-utility); line-height: 1.5; }
@media (max-width: 560px) {
.cred-list { grid-template-columns: 1fr; gap: 18px; }
}
.credential-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 8px; }
.credential {
display: flex;
gap: 14px;
align-items: center;
padding-block: 16px;
border-bottom: 1px solid var(--rule);
}
.credential strong { display: block; font-family: var(--serif); font-size: var(--text-body); font-weight: 400; line-height: 1.3; }
.credential small { color: var(--ink-soft); font-size: var(--text-caption); line-height: 1.45; }
/* ---------------- FAQ ---------------- */
.faq-list { max-width: 760px; margin-inline: auto; border-top: 1px solid var(--rule-strong); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary {
padding: 22px 40px 22px 0;
cursor: pointer;
list-style: none;
position: relative;
font-family: var(--serif);
font-size: var(--text-h3);
line-height: 1.3;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
content: "+";
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
color: var(--accent);
font-family: var(--sans);
font-size: var(--text-h3);
font-weight: 300;
}
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details > p { padding-bottom: 22px; max-width: none; }
/* Group programs: the FAQ accordion with a subtitle and a short list */
.group-list summary small {
display: block;
margin-top: 3px;
color: var(--ink-soft);
font-family: var(--sans);
font-size: var(--text-caption);
line-height: 1.5;
}
.group-list .group-body { padding-bottom: 24px; }
.group-list .group-body .dash-list { margin-top: 10px; }
.group-list .group-body .dash-list li { padding-block: 5px; font-size: var(--text-small); }
.groups-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px 28px;
flex-wrap: wrap;
max-width: 760px;
margin: 30px auto 0;
padding-top: 26px;
border-top: 1px solid var(--rule);
}
.groups-cta p { font-size: var(--text-small); max-width: 48ch; }
.groups-cta .text-link { white-space: nowrap; }
/* ---------------- Refer components (providers) ---------------- */
.refer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.refer-head .lede { max-width: 72ch; margin-top: 10px; }
.refer-head .refer-grid { margin-top: clamp(22px, 3vh, 32px); }
.refer-option {
padding: 22px;
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--radius);
display: flex;
flex-direction: column;
gap: 9px;
align-items: flex-start;
}
/* The markup uses h2 here, not h3 — this rule never matched, so these
headings were falling back to the global h2 size (up to 32px) instead of
the smaller, intended one. */
.refer-option h2 { font-size: 1.1875rem; }
.refer-option p { font-size: 0.9375rem; line-height: 1.5; }
.refer-option .button { margin-top: auto; }
/* ---------------- Contact ---------------- */
.contact-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(36px, 5vw, 64px);
align-items: start;
max-width: 840px;
padding-block: clamp(44px, 6vh, 72px) clamp(60px, 9vh, 100px);
}
.contact-layout .lede { margin-top: 18px; font-size: var(--text-lead); }
.contact-layout .consult-intro { text-wrap: balance; }
.contact-card {
margin-top: 24px;
padding: 26px;
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--radius);
}
.contact-card h2 { font-size: var(--text-h3); }
.contact-card p { margin-top: 10px; font-size: var(--text-small); }
.contact-card .button, .contact-card .text-link { margin-top: 16px; display: inline-block; }
.social-links { display: flex; gap: 18px; margin-top: 14px; }
.social-links a { color: var(--accent); font-size: var(--text-caption); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.social-links a:hover { text-decoration-color: var(--accent); }
.contact-form {
padding: clamp(28px, 4vw, 44px);
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--radius);
display: grid;
gap: 24px;
}
.form-head { display: grid; gap: 10px; }
.form-head h2 { font-size: var(--text-h2-compact); line-height: 1.3; }
.form-head p { font-size: var(--text-small); }
.field { display: grid; gap: 8px; align-content: start; }
.field label, .field legend {
color: var(--ink);
font-size: var(--text-caption);
font-weight: 600;
}
.optional-tag {
margin-left: 8px;
color: var(--ink-soft);
font-size: var(--text-utility);
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.field input, .field select, .field textarea {
width: 100%;
padding: 13px 15px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 8px;
color: var(--ink);
font-family: var(--sans);
font-size: var(--text-body);
line-height: 1.4;
transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--rule-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
background: var(--white);
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field select {
appearance: none;
-webkit-appearance: none;
padding-right: 42px;
background-image: var(--select-arrow);
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 18px;
cursor: pointer;
}
.field textarea { min-height: 150px; resize: vertical; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field-hint { font-size: var(--text-caption); line-height: 1.5; }
.interest-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
.interest-option {
display: flex;
gap: 12px;
align-items: center;
padding: 13px 15px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 8px;
font-size: var(--text-caption);
line-height: 1.35;
color: var(--ink);
cursor: pointer;
user-select: none;
transition: border-color 140ms ease, background 140ms ease;
}
.interest-option:hover { border-color: var(--rule-strong); }
/* Each option carries the same icon its service uses in the nav dropdown
and on the home services list, so the form reads as the same set. The
icon sits muted until the option is checked, letting the accent mark
selection alongside the border and wash. */
.interest-icon {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-right: -3px;
fill: none;
color: var(--ink-soft);
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: color 140ms ease;
}
.interest-option:has(input:checked) .interest-icon { color: var(--accent); }
.interest-option:has(input:checked) {
border-color: var(--accent);
background: var(--accent-wash);
}
.interest-option:has(input:focus-visible) {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.interest-option input {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0;
background: var(--white);
border: 1.5px solid var(--rule-strong);
border-radius: 6px;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
accent-color: var(--accent);
}
.interest-option input:checked {
background-color: var(--accent);
border-color: var(--accent);
background-image: var(--check-icon);
background-repeat: no-repeat;
background-position: center;
background-size: 13px;
}
.contact-form .button {
justify-self: stretch;
padding-block: 15px;
font-size: var(--text-body);
border-radius: 10px;
}
.contact-note { font-size: var(--text-caption); }
.contact-form .contact-note {
width: 100%;
max-width: none;
margin-top: -6px;
text-align: center;
font-size: var(--text-caption);
}
.form-status { min-height: 1.5em; margin-top: -14px; text-align: center; font-size: var(--text-caption); }
.form-trap { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact-form .button:disabled { cursor: wait; opacity: 0.72; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Phone widget (intl-tel-input): inherit the site palette in both themes */
/* City autocomplete: suggestions float below the location input */
.autocomplete { position: relative; }
.autocomplete-list {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 10;
margin: 0;
padding: 6px;
list-style: none;
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow-img);
}
.autocomplete-list li {
padding: 10px 12px;
border-radius: 6px;
font-size: var(--text-caption);
color: var(--ink);
cursor: pointer;
}
.autocomplete-list li:hover,
.autocomplete-list li[aria-selected="true"] { background: var(--accent-wash); }
.field .iti {
width: 100%;
--iti-border-color: var(--rule);
--iti-country-selector-bg: var(--white);
--iti-hover-color: var(--sand);
--iti-icon-color: var(--ink-soft);
--iti-arrow-color: var(--ink-soft);
}
/* The open country panel: solid, above neighbouring fields, site-shaped */
.iti .iti__country-selector {
z-index: 20;
--iti-country-selector-bg: var(--white);
background-color: var(--white);
color: var(--ink);
border-radius: var(--radius);
box-shadow: var(--shadow-img);
overflow: hidden;
}
/* .field input's padding outranks the library's, which indents the
search text past its magnifier icon — restore that indent here. */
.field .iti__search-input {
background: var(--paper);
color: var(--ink);
border: 0;
border-radius: 0;
padding: 10px
calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal))
10px
calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
}
.field .iti__search-input:focus {
border: 0;
box-shadow: none;
background: var(--paper);
}
.iti__dial-code { color: var(--ink-soft); }
@media (max-width: 640px) {
.form-row { grid-template-columns: 1fr; }
.interest-options { grid-template-columns: 1fr; }
}
/* ---------------- Close band ----------------
The one inverted surface on the site: white on near-black, so the
final ask reads as a deliberate stop rather than another section. */
.close-band { background: var(--close-bg); }
.close-band-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding-block: clamp(52px, 8vh, 84px);
flex-wrap: wrap;
}
.close-band h2 { color: var(--close-ink); font-size: var(--text-h2-compact); max-width: 24ch; }
.close-band p { margin-top: 10px; color: var(--close-ink-soft); }
.close-band .close-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* Invert the controls so they read against the dark surface */
.close-band .button { background: var(--close-ink); color: var(--close-bg); }
.close-band .button:hover { background: var(--close-ink-bright); }
.close-band .button.ghost { background: transparent; color: var(--close-ink); border-color: var(--close-rule); }
.close-band .button.ghost:hover { background: transparent; border-color: var(--close-ink); }
.close-band .text-link { color: var(--close-ink); text-decoration-color: var(--close-rule); }
.close-band .text-link:hover { text-decoration-color: var(--close-ink); }
.close-band :focus-visible { outline-color: var(--close-ink); }
/* Writing page: the sign-up box lives on the site, so a visitor hands over an
email here before Substack shows anything of its own (pledges included). */
.page-writing .close-band .close-actions { flex: 1 1 560px; max-width: 660px; }
.newsletter-form { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.newsletter-form .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.newsletter-form input {
flex: 1 1 220px;
min-width: 0;
padding: 12px 18px;
background: var(--close-ink);
border: 1px solid transparent;
border-radius: 999px;
color: var(--close-bg);
font-family: var(--sans);
font-size: var(--text-small);
line-height: 1.3;
}
.newsletter-form input::placeholder { color: rgba(47, 36, 25, 0.55); }
.newsletter-form input:focus { outline: none; box-shadow: 0 0 0 3px var(--close-rule); }
/* ---------------- Footer ---------------- */
.footer { border-top: 1px solid var(--rule); background: var(--paper); }
.footer-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr));
gap: 26px 32px;
padding-block: clamp(32px, 4.2vh, 46px) 26px;
}
.footer-brand strong {
display: block;
font-family: var(--serif);
font-size: 1.0625rem;
font-weight: 400;
}
.footer-brand span {
display: block;
margin-top: 2px;
color: var(--ink-soft);
font-size: var(--text-utility);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.footer-crisis { margin-top: 14px; font-size: 0.875rem; line-height: 1.55; max-width: 46ch; }
.footer-col { display: grid; gap: 2px; align-content: start; }
.footer-col strong {
margin-bottom: 6px;
color: var(--ink);
font-size: 0.9375rem;
font-weight: 600;
}
.footer-col a {
padding: 3px 0;
color: var(--ink-soft);
font-size: 0.9375rem;
transition: color 160ms ease;
}
.footer-col a:hover { color: var(--ink); }
.footer-legal {
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
padding-block: 16px 22px;
border-top: 1px solid var(--rule);
}
.footer-legal p { font-size: 0.875rem; }
/* Theme switch: a quiet utility control, pill-segmented, sized to
the legal line it sits beside. */
.theme-switch {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
border: 1px solid var(--rule);
border-radius: 999px;
}
.theme-switch button {
border: 0;
background: none;
padding: 4px 11px;
border-radius: 999px;
color: var(--ink-soft);
font-family: var(--sans);
font-size: var(--text-utility);
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.2;
cursor: pointer;
transition: color 160ms ease, background 160ms ease;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-pressed="true"] { background: var(--sand); color: var(--ink); }
/* ==============================================================
Professional lane theme (body.pro):
Consulting & For Providers pages swap espresso for sage.
============================================================== */
body.pro .button { background: var(--sage-deep); color: var(--on-sage); }
body.pro .button:hover { background: var(--sage-deep-hover); }
body.pro .button.ghost { background: transparent; color: var(--ink); }
body.pro .button.ghost:hover { background: transparent; }
body.pro .text-link { color: var(--sage-deep); }
body.pro .text-link:hover { text-decoration-color: var(--sage-deep); }
body.pro .row .row-cta { color: var(--sage-deep); }
body.pro a.row:hover { background: var(--pro-row-hover); }
body.pro .band-sand, body.pro .pointer { background: var(--sage); }
body.pro .quiet { background: var(--sage); }
body.pro .fit-col .fit-icon { color: var(--sage-deep); }
body.pro .fit-col.muted .fit-icon { color: var(--ink-soft); }
body.pro .dash-list li::before { background: var(--sage-deep); }
body.pro .area-list, body.pro .row-list, body.pro .spec, body.pro .steps .step-item { border-color: var(--sage-rule); }
body.pro :focus-visible { outline-color: var(--sage-deep); }
body.pro .interest-option input { accent-color: var(--sage-deep); }
/* Keep the inverted close band legible in the sage lane: these must out-rank
the body.pro .button / .text-link rules above, not just .close-band's. */
body.pro .close-band { background: var(--close-bg-pro); }
body.pro .close-band .button { background: var(--close-ink); color: var(--close-bg-pro); }
body.pro .close-band .button:hover { background: var(--close-ink-bright); }
body.pro .close-band .text-link { color: var(--close-ink); }
body.pro .close-band :focus-visible { outline-color: var(--close-ink); }
/* ==============================================================
Responsive
============================================================== */
@media (max-width: 980px) {
.nav { display: none; }
.menu-toggle { display: inline-flex; }
}
@media (min-width: 981px) {
.mobile-menu { display: none !important; }
}
@media (max-width: 820px) {
.hero, .split, .split.media-left, .split.even, .contact-layout, .lane-inner { grid-template-columns: 1fr; }
.hero { padding-block: 36px 48px; gap: 32px; }
.portrait-frame { order: -1; max-width: 440px; }
.cred-strip-inner { grid-template-columns: 1fr; gap: 16px; }
.row { grid-template-columns: 1fr; gap: 10px; padding-block: 26px; }
.row .row-cta { margin-top: 4px; }
.page-writing .page-head { padding-block: 44px 28px; }
.page-writing .section.tight { padding-block: 40px 52px; }
.page-writing .row { grid-template-columns: 1fr; gap: 10px; padding-block: 22px; }
.steps.cols-3, .steps.cols-4 { grid-template-columns: 1fr; }
.area { grid-template-columns: 1fr; gap: 6px; }
.spec-row { grid-template-columns: 1fr; gap: 4px; }
.fit-grid, .refer-grid, .credential-grid, .bio-layout, .work-grid, .focus-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
.close-band-inner { flex-direction: column; align-items: flex-start; }
.section { padding-block: 56px; }
.split .media-first { order: -1; }
}
@media (max-width: 700px) {
.recognition-list--grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
/* Phone header: the wordmark keeps the mark and the name on one line and
drops the credential rule, which otherwise wraps out of the header. */
@media (max-width: 600px) {
.brand { gap: 10px; }
.brand-mark { font-size: 1.85rem; padding-right: 10px; }
.brand-text strong { font-size: 0.9375rem; white-space: nowrap; }
.brand-text span { font-size: 0.6875rem; letter-spacing: 0.12em; }
}
/* Only a genuinely tiny screen drops them to a list. */
@media (max-width: 430px) {
.steps.cols-5 { grid-template-columns: 1fr; gap: 22px; }
.steps.cols-5 .step-item strong { font-size: var(--text-h3); }
.steps.cols-5 .step-item p { font-size: var(--text-small); }
}
/* ---------------- Assessment split section ----------------
Two-colour band: paper behind the reading side, sand behind the
list. The seam runs full-bleed and lands inside the grid gap. */
.assessment-split {
border-block: 1px solid var(--rule);
background: linear-gradient(to right, var(--white) 50%, var(--sand) 50%);
}
.assessment-split-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(48px, 7vw, 96px);
}
.assessment-purpose h2 {
max-width: 18ch;
margin-bottom: 22px;
font-size: clamp(2rem, 3.4vw, 2.65rem);
line-height: 1.12;
}
.assessment-purpose p { max-width: 58ch; }
.assessment-purpose p + p { margin-top: 13px; }
.assessment-details { display: grid; gap: 22px; align-content: start; }
.assessment-work-grid { grid-template-columns: 1fr; gap: 22px; }
.assessment-details-title {
font-family: var(--serif);
font-size: 1.3rem;
font-weight: 400;
}
/* The written report carries the client accent so it reads as the
deliverable of the four without adding another hue. */
.work-item--report { border-top: 2px solid var(--accent); }
.work-item--report h3 .licon { color: var(--accent); }
.assessment-link {
display: inline-flex;
gap: 8px;
align-items: center;
margin-top: clamp(30px, 4vh, 44px);
padding-bottom: 4px;
border-bottom: 1px solid currentColor;
color: var(--accent);
font-size: var(--text-small);
font-weight: 700;
}
.assessment-link:hover { color: var(--accent-deep); }
@media (max-width: 820px) {
.assessment-split { background: var(--white); }
.assessment-split-grid { grid-template-columns: 1fr; gap: 40px; }
.assessment-purpose h2 { max-width: none; }
/* The sand half bleeds to the viewport edges when stacked. */
.assessment-details {
margin-inline: -22px;
margin-bottom: calc(-1 * clamp(40px, 6vh, 68px));
padding: 34px 22px clamp(40px, 6vh, 68px);
background: var(--sand);
border-top: 1px solid var(--rule);
}
}
/* ---------------- Coordinated care ----------------
Sage, the surface this site already uses when other professionals are the
subject. Title and paragraph sit side by side, and the three cases below
are divided by rules rather than stacked. */
.band-care.section.tight { padding-block: clamp(34px, 4.6vh, 54px); }
.band-care { background: var(--care-bg); border-block: 1px solid var(--care-rule); }
.section-eyebrow {
display: block;
margin-bottom: 14px;
color: var(--sage-ink);
font-size: var(--text-utility);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.section-eyebrow--sentence {
font-size: var(--text-small);
letter-spacing: 0;
text-transform: none;
}
.section-head--split {
display: grid;
grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
gap: clamp(28px, 4vw, 64px);
align-items: start;
}
.section-head--split h2 { max-width: 21ch; }
.section-head--split p { margin-top: 6px; }
.band-care .section-eyebrow { color: var(--care-ink); }
.band-care h2 { font-size: clamp(1.5rem, 2.4vw, 1.8rem); }
.band-care .section-head { margin-bottom: clamp(22px, 3vh, 32px); }
.band-care .steps--ruled { border-top: 1px solid var(--care-rule); padding-top: 2px; gap: 18px 28px; }
.steps--ruled .step-item strong { font-size: 1.2rem; }
.steps--ruled .step-item p { margin-top: 6px; font-size: var(--text-utility); line-height: 1.5; }
.steps--ruled .step-item { border-top: 0; padding-top: 16px; }
.steps--ruled .step-item + .step-item {
padding-left: clamp(20px, 2.6vw, 34px);
border-left: 1px solid var(--care-rule);
}
/* Closing note: label on the left, paragraph on the right, matching the
title split above it. */
.split-note {
display: grid;
grid-template-columns: minmax(200px, 0.45fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 64px);
align-items: start;
margin-top: clamp(22px, 3vh, 30px);
padding-top: 18px;
border-top: 1px solid var(--care-rule);
}
.split-note .section-eyebrow { margin-bottom: 0; padding-top: 4px; }
.split-note p { margin: 0; max-width: none; font-size: 1rem; line-height: 1.6; }
.split-note strong { color: var(--care-ink); font-weight: 700; }
@media (max-width: 820px) {
.split-note { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 820px) {
.section-head--split { grid-template-columns: 1fr; gap: 14px; }
.steps--ruled .step-item + .step-item { padding-left: 0; border-left: 0; }
}
/* Long enough to need the full measure. */
#modalities-title { max-width: none; }
/* ---------------- GLP-1 specialty spotlight ----------------
The same ruled-band treatment as coordinated care above it, in the sage
family the site already uses for cross-links: content sits on the band
divided by rules, rather than in a card nested inside another card. */
.spotlight-section.section.tight { padding-block: clamp(34px, 4.6vh, 54px); }
.spotlight-section { background: var(--sage); border-block: 1px solid var(--sage-rule); }
.spotlight-section h2 { font-size: clamp(1.5rem, 2.4vw, 1.8rem); }
.spotlight-section .section-head { margin-bottom: clamp(22px, 3vh, 32px); }
.spotlight-section .section-head p + p { margin-top: 8px; }
.spotlight-section .assessment-link { margin-top: 14px; }
.spotlight-section .steps--ruled {
border-top: 1px solid var(--sage-rule);
padding-top: 2px;
gap: 18px 28px;
}
.spotlight-section .steps--ruled .step-item + .step-item { border-left-color: var(--sage-rule); }
.spotlight-section .split-note { border-top-color: var(--rule); }
.spotlight-section .split-note strong { color: var(--sage-deep); }
.spotlight-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
gap: clamp(28px, 4.5vw, 52px);
align-items: start;
padding: clamp(28px, 4.5vw, 48px);
border: 1px solid var(--sage-rule);
border-radius: var(--radius);
background: var(--white);
}
.spotlight-badge {
display: inline-flex;
width: fit-content;
margin-bottom: 18px;
padding: 6px 14px;
border-radius: 999px;
background: var(--sage-hover);
color: var(--sage-ink);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
}
.spotlight-copy h2 { max-width: 17ch; margin-bottom: 20px; font-size: clamp(1.9rem, 3vw, 2.45rem); }
.spotlight-copy p { max-width: 65ch; }
.spotlight-copy p + p { margin-top: 13px; }
.spotlight-copy .assessment-link { margin-top: 22px; }
.spotlight-entry-card {
padding: clamp(22px, 3.6vw, 30px);
border: 1px solid var(--sage-rule);
border-radius: var(--radius);
background: var(--sage-soft);
}
.spotlight-entry-card > .section-eyebrow { color: var(--sage-ink); }
.spotlight-entry-list { border-top: 1px solid var(--sage-rule); }
.spotlight-entry-list > div {
display: flex;
gap: 8px;
align-items: baseline;
padding: 16px 0;
border-bottom: 1px solid var(--sage-rule);
}
.spotlight-entry-list strong { flex: 0 0 auto; color: var(--ink); font-size: var(--text-small); }
.spotlight-entry-list span { color: var(--ink-soft); font-size: var(--text-small); line-height: 1.45; }
.spotlight-experience {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(200px, 0.42fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
padding-top: 26px;
border-top: 1px solid var(--rule);
}
.spotlight-experience .section-eyebrow { color: var(--sage-ink); }
.spotlight-experience p { max-width: 78ch; font-size: var(--text-small); }
.spotlight-experience strong { color: var(--forest); }
.spotlight-copy .assessment-link { color: var(--forest); }
.spotlight-copy .assessment-link:hover { color: var(--forest-hover); }
@media (max-width: 820px) {
.spotlight-panel { grid-template-columns: 1fr; }
.spotlight-copy h2 { max-width: none; }
.spotlight-experience { grid-template-columns: 1fr; gap: 10px; padding-top: 22px; }
.spotlight-entry-list > div { flex-direction: column; align-items: flex-start; gap: 3px; }
}
/* Long question lists take a step down in size so they stay compact.
Opt in per list, since some pages carry two. */
.faq-list--compact summary { font-size: 1.1875rem; padding-block: 16px; }
.faq-list--compact details > p { font-size: 1rem; padding-bottom: 18px; }
/* Hold the closing phrase of this title on one line, at full display size. */
.title-nowrap { max-width: 19ch; }
.title-nowrap span { white-space: nowrap; }
/* A two-sentence title: let it use the whole column (a ch-based measure would
shrink with the type and never change the line count) and set it a step
down, so each sentence lands in two lines rather than five. */
.hero--page h1.title-two-part { max-width: none; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.title-two-part span { display: block; }
/* Both lists on the eating disorder page run long; a step down keeps them
compact. Scoped, since the work grid is shared with two other pages. */
.page-ed .work-grid { gap: 22px 40px; }
.page-ed .work-item { padding-top: 16px; }
.page-ed .work-item h3 { font-size: 1.25rem; gap: 10px; }
.page-ed .work-item h3 .licon { width: 19px; height: 19px; }
.page-ed .work-item p { margin-top: 7px; font-size: 1rem; line-height: 1.55; }
.page-ed .section-head { margin-bottom: clamp(22px, 3vh, 32px); }
/* Six offerings on the consulting page ran long; a step down keeps them
compact. Scoped to this page, since .area-list is shared with psychotherapy. */
.page-consulting .area { padding-block: 15px; gap: 4px 40px; }
.page-consulting .area dt { font-size: 1.0625rem; }
.page-consulting .area dd { font-size: var(--text-small); line-height: 1.5; }
/* The secondary "email me" link names no address; show it underneath. */
.hero-email-note { margin-top: 8px; }
.hero-email-note a { color: var(--ink-soft); font-size: var(--text-utility); }
.hero-email-note a:hover { color: var(--ink); }
/* ---------------- Treatment approaches ----------------
Pill anchors up top, then the eight therapies as cards: an espresso mark
on a sand disc, the name, a plain-language account, and the acronym set
large and faint behind each card's corner. */
.approach-toc {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 clamp(36px, 5vh, 56px);
padding: 0;
list-style: none;
}
.approach-toc a {
display: inline-block;
padding: 8px 16px;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--white);
color: var(--accent);
font-weight: 600;
font-size: var(--text-utility);
line-height: 1.3;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.approach-toc a:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
}
/* The cards sit on the page cream, so the section carries its own rule
to keep the hero separate from the list of approaches. */
.approaches-section { border-top: 1px solid var(--rule); background: var(--cream); }
/* Named conditions: two ruled columns filled top to bottom, so the rules
line up across both and each name sits on its own line. */
.dx-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 clamp(30px, 4.5vw, 60px);
max-width: 900px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.dx-list li {
position: relative;
padding: 17px 2px 17px 20px;
border-bottom: 1px solid var(--rule);
font-family: var(--serif);
font-size: 1.125rem;
line-height: 1.35;
}
.dx-list li:nth-child(1),
.dx-list li:nth-child(2) { border-top: 1px solid var(--rule-strong); }
.dx-list li::before {
content: "";
position: absolute;
left: 0;
top: calc(17px + 0.675em - 3px);
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--accent);
opacity: 0.5;
}
@media (max-width: 760px) {
.dx-list { grid-template-columns: 1fr; }
.dx-list li:nth-child(2) { border-top: 0; }
}
/* The closing note is centred as a block but reads from the left. */
.conditions-section .section-note { max-width: 900px; margin-inline: auto; }
/* The CBT loop: three nodes spaced round a circle, joined by arcs that
run one way only — the cycle closing is the point the copy makes. */
.cbt-cycle-figure { max-width: 440px; margin: clamp(30px, 4vh, 46px) auto 0; }
/* Copy on one side, the diagram on the other, centred against it. */
.lead-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
gap: clamp(34px, 4.5vw, 64px);
align-items: center;
}
.lead-split .page-lead { max-width: none; margin-inline: 0; }
.lead-split .cbt-cycle-figure { margin-top: 0; }
@media (max-width: 980px) {
.lead-split { grid-template-columns: 1fr; gap: clamp(26px, 3.5vh, 38px); }
.lead-split .cbt-cycle-figure { margin-top: 0; }
}
.cbt-cycle { display: block; width: 100%; height: auto; color: var(--accent); }
.cbt-cycle .node circle { fill: var(--sand); stroke: var(--rule-strong); stroke-width: 1.5; }
.cbt-cycle .label text { fill: var(--ink); font-family: var(--serif); font-size: 21px; }
.cbt-cycle-figure figcaption {
margin-top: 18px;
color: var(--ink-soft);
font-size: var(--text-utility);
line-height: 1.55;
text-align: center;
}
.approach-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.approach-card {
position: relative;
overflow: hidden;
padding: clamp(22px, 2.6vw, 30px);
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--white);
box-shadow: var(--shadow-card);
scroll-margin-top: 24px;
transition: box-shadow 180ms ease, transform 180ms ease;
}
.approach-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.approach-card::after {
content: attr(data-abbr);
position: absolute;
right: 14px;
bottom: -14px;
font-family: var(--serif);
font-size: 5.5rem;
line-height: 1;
color: var(--ink);
opacity: 0.05;
pointer-events: none;
}
.approach-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-bottom: 16px;
border-radius: 999px;
background: var(--sand);
}
.approach-icon .licon { width: 22px; height: 22px; margin: 0; color: var(--accent); }
.approach-card h2 { font-size: 1.375rem; line-height: 1.25; }
.approach-card p { margin-top: 10px; max-width: none; font-size: var(--text-small); }
/* Cards drift up as they enter view; script gates this on motion settings. */
@media (max-width: 700px) {
/* The cards sit on the page cream, so the section carries its own rule
to keep the hero separate from the list of approaches. */
.approaches-section { border-top: 1px solid var(--rule); background: var(--cream); }
/* Named conditions: two ruled columns filled top to bottom, so the rules
line up across both and each name sits on its own line. */
.dx-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 clamp(30px, 4.5vw, 60px);
max-width: 900px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.dx-list li {
position: relative;
padding: 17px 2px 17px 20px;
border-bottom: 1px solid var(--rule);
font-family: var(--serif);
font-size: 1.125rem;
line-height: 1.35;
}
.dx-list li:nth-child(1),
.dx-list li:nth-child(2) { border-top: 1px solid var(--rule-strong); }
.dx-list li::before {
content: "";
position: absolute;
left: 0;
top: calc(17px + 0.675em - 3px);
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--accent);
opacity: 0.5;
}
@media (max-width: 760px) {
.dx-list { grid-template-columns: 1fr; }
.dx-list li:nth-child(2) { border-top: 0; }
}
/* The closing note is centred as a block but reads from the left. */
.conditions-section .section-note { max-width: 900px; margin-inline: auto; }
/* The CBT loop: three nodes spaced round a circle, joined by arcs that
run one way only — the cycle closing is the point the copy makes. */
.cbt-cycle-figure { max-width: 440px; margin: clamp(30px, 4vh, 46px) auto 0; }
/* Copy on one side, the diagram on the other, centred against it. */
.lead-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
gap: clamp(34px, 4.5vw, 64px);
align-items: center;
}
.lead-split .page-lead { max-width: none; margin-inline: 0; }
.lead-split .cbt-cycle-figure { margin-top: 0; }
@media (max-width: 980px) {
.lead-split { grid-template-columns: 1fr; gap: clamp(26px, 3.5vh, 38px); }
.lead-split .cbt-cycle-figure { margin-top: 0; }
}
.cbt-cycle { display: block; width: 100%; height: auto; color: var(--accent); }
.cbt-cycle .node circle { fill: var(--sand); stroke: var(--rule-strong); stroke-width: 1.5; }
.cbt-cycle .label text { fill: var(--ink); font-family: var(--serif); font-size: 21px; }
.cbt-cycle-figure figcaption {
margin-top: 18px;
color: var(--ink-soft);
font-size: var(--text-utility);
line-height: 1.55;
text-align: center;
}
.approach-grid { grid-template-columns: 1fr; }
}
/* ---------------- Modality detail pages ----------------
Each therapy's page opens under its acronym set very large and faint,
with the same disc-and-mark identity as its card. Chips carry what the
approach is often part of treating. */
.modality-head { position: relative; }
.modality-head::after {
content: attr(data-abbr);
position: absolute;
top: 0;
right: 0;
font-family: var(--serif);
font-size: clamp(6rem, 16vw, 13rem);
line-height: 1;
color: var(--ink);
opacity: 0.045;
pointer-events: none;
}
.modality-head .approach-icon { margin: 6px 0 18px; }
.modality-head .lede { max-width: 62ch; }
.chip-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.chip-list li {
padding: 9px 18px;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--sand);
color: var(--ink);
font-size: var(--text-utility);
font-weight: 500;
line-height: 1.3;
}
.chip-list--editorial {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 32px;
}
.chip-list--editorial li {
padding: 12px 0;
border: 0;
border-bottom: 1px solid var(--rule);
border-radius: 0;
background: transparent;
font-size: var(--text-small);
line-height: 1.45;
}
@media (max-width: 640px) {
.chip-list--editorial { grid-template-columns: 1fr; }
}
.approach-more { display: inline-block; margin-top: 14px; font-weight: 600; }
/* Inside the five-column modality grid the links sit in narrow columns,
so they read at utility size rather than body size. */
.cols-5 .approach-more { margin-top: 12px; font-size: var(--text-utility); }
/* A single centred column of copy, for a section that carries no heading. */
.page-lead {
max-width: 48ch;
margin-inline: auto;
font-size: clamp(1.125rem, 1.55vw, 1.3125rem);
line-height: 1.6;
}
.page-lead p + p { margin-top: 18px; }
/* ---------------- Programs ----------------
The EMBODY arc: six serif letters on sand discs, each with its phase.
The mini variant sits inside the hub card. */
.embody-arc {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px 18px;
margin: 0;
padding: 0;
list-style: none;
}
.embody-arc li { text-align: left; }
.arc-letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 12px;
border-radius: 999px;
background: var(--sand);
color: var(--accent);
font-family: var(--serif);
font-size: 1.5rem;
}
.embody-arc strong { display: block; font-family: var(--serif); font-size: 1.1875rem; font-weight: 400; }
.embody-arc p { margin-top: 4px; font-size: var(--text-utility); line-height: 1.45; }
.embody-arc .arc-weeks { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.band-sand .arc-letter { background: var(--white); }
.embody-arc--mini { margin-top: 18px; }
.embody-arc--mini .arc-letter { width: 38px; height: 38px; font-size: 1.125rem; margin-bottom: 8px; }
.embody-arc--mini p, .embody-arc--mini .arc-weeks { display: none; }
.embody-arc--mini strong { font-size: 0.9375rem; }
.program-card + .program-card { margin-top: 18px; }
.program-card h2 { max-width: none; }
@media (max-width: 900px) {
.embody-arc { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
.embody-arc { grid-template-columns: repeat(2, 1fr); }
}
/* ---------------- Coaching page ----------------
Page-scoped additions for coaching.html: the hero image, the wall of
overheard lines, numbered steps, the open Q&A grid, and the section reveal
(which only hides anything once JS is running). */
.page-coaching .section-eyebrow { color: var(--accent); }
.page-coaching .hero--page h1 { max-width: 20ch; font-size: var(--text-display); }
.page-coaching .hero--page .hero-copy > p { max-width: 50ch; }
.page-coaching .hero--page .hero-copy > p + p { margin-top: 14px; }
.coaching-photo { margin: 0; overflow: hidden; border-radius: var(--radius); }
.coaching-photo img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center;
}
/* The lines people arrive saying, as a wall of plates rather than a list. */
.voice-wall { display: flex; flex-wrap: wrap; gap: 14px; }
.voice-wall blockquote {
flex: 1 1 320px;
margin: 0;
padding: 20px 24px;
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--radius);
font-family: var(--serif);
font-size: 1.25rem;
line-height: 1.4;
color: var(--ink);
}
.voice-wall blockquote.voice--wide { flex-basis: 390px; }
.voice-wall blockquote.voice--narrow { flex-basis: 280px; }
.voice-wall blockquote.voice--accent {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
}
.steps--numbered { list-style: none; margin: 0; padding: 0; }
.work-item--lane { border-top: 2px solid var(--accent); }
.page-coaching .work-item .dash-list { margin-top: 12px; }
.page-coaching .work-item .dash-list li { padding-block: 5px; font-size: var(--text-small); }
.page-coaching .who-grid .step-item { padding-top: 16px; }
.page-coaching .persona-icon {
display: block;
width: 28px;
height: 28px;
margin-bottom: 14px;
color: var(--accent);
}
.reveal-ready [data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity 560ms ease, transform 560ms ease;
}
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
.reveal-ready [data-reveal]:focus-within { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal-ready [data-reveal] { opacity: 1; transform: none; }
}
@media print {
.reveal-ready [data-reveal] { opacity: 1; transform: none; }
}
/* ---------------- EMBODY page ----------------
Page-scoped additions for embody.html. The program carries a plum accent
of its own — the espresso lane stays the site default everywhere else —
plus the oversized translucent EMBODY wordmark behind the opening, the
cohort panel, and the open Q&A grid. Both palettes are declared here;
nothing outside :is(.page-embody,.page-compass) is affected. */
.page-embody,
.em-scope {
--em-ink: #5a4c9c;
--em-deep: #453a7d;
--em-deep-hover: #362d66;
--on-em: #faf9f6;
--em-tint: #e9e5f6;
--em-rule: rgba(90, 76, 156, 0.26);
--em-ghost: rgba(90, 76, 156, 0.085);
--em-close: #2b2340;
}
:root[data-theme="dark"] .page-embody,
:root[data-theme="dark"] .em-scope {
--em-ink: #b7abe8;
--em-deep: #cdc4f2;
--em-deep-hover: #ded8f8;
--on-em: #191310;
--em-tint: #241f33;
--em-rule: rgba(183, 171, 232, 0.26);
--em-ghost: rgba(183, 171, 232, 0.075);
--em-close: #16121f;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .page-embody,
:root:not([data-theme="light"]) .em-scope {
--em-ink: #b7abe8;
--em-deep: #cdc4f2;
--em-deep-hover: #ded8f8;
--on-em: #191310;
--em-tint: #241f33;
--em-rule: rgba(183, 171, 232, 0.26);
--em-ghost: rgba(183, 171, 232, 0.075);
--em-close: #16121f;
}
}
/* The program's accent, applied through the same seams the sage lane uses. */
:is(.page-embody,.page-compass) .section-eyebrow { color: var(--em-ink); }
:is(.page-embody,.page-compass) .button { background: var(--em-deep); color: var(--on-em); }
:is(.page-embody,.page-compass) .button:hover { background: var(--em-deep-hover); }
:is(.page-embody,.page-compass) .button.ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
:is(.page-embody,.page-compass) .button.ghost:hover { border-color: var(--em-deep); }
:is(.page-embody,.page-compass) .text-link { color: var(--em-ink); }
:is(.page-embody,.page-compass) .text-link:hover { text-decoration-color: var(--em-ink); }
:is(.page-embody,.page-compass) .dash-list li::before { background: var(--em-ink); }
:is(.page-embody,.page-compass) :focus-visible { outline-color: var(--em-deep); }
:is(.page-embody,.page-compass) .chip-list li { background: var(--em-tint); border-color: var(--em-rule); }
:is(.page-embody,.page-compass) .arc-letter {
width: 58px;
height: 58px;
background: var(--em-tint);
color: var(--em-ink);
font-size: 1.625rem;
}
:is(.page-embody,.page-compass) .embody-arc strong { font-size: 1.25rem; }
:is(.page-embody,.page-compass) .embody-arc p { font-size: 0.9375rem; }
:is(.page-embody,.page-compass) .embody-arc .arc-weeks { font-size: 0.8125rem; }
:is(.page-embody,.page-compass) .band-sand .arc-letter { background: var(--white); }
:is(.page-embody,.page-compass) .close-band { background: var(--em-close); }
:is(.page-embody,.page-compass) .close-band .button { background: var(--close-ink); color: var(--em-close); }
:is(.page-embody,.page-compass) .close-band .button:hover { background: var(--close-ink-bright); }
:is(.page-embody,.page-compass) .close-band .text-link { color: var(--close-ink); }
:is(.page-embody,.page-compass) .close-band :focus-visible { outline-color: var(--close-ink); }
/* The wordmark: caps, translucent, running along the foot of the opening
rather than tucked in the corner, with the content above it. */
:is(.page-embody,.page-compass) .modality-head { overflow: hidden; }
:is(.page-embody,.page-compass) .modality-head::after {
top: auto;
left: auto;
right: -0.02em;
bottom: -0.16em;
z-index: 0;
color: var(--em-ink);
opacity: 1;
font-size: clamp(2.5rem, 9.4vw, 9rem);
letter-spacing: -0.02em;
-webkit-text-fill-color: var(--em-ghost);
}
:is(.page-embody,.page-compass) .modality-head h1 { max-width: 12ch; }
:is(.page-embody,.page-compass) .modality-head .lede { max-width: 52ch; }
:is(.page-embody,.page-compass) .cohort-card {
padding: clamp(22px, 2.6vw, 30px);
background: var(--white);
border: 1px solid var(--em-rule);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
:is(.page-embody,.page-compass) .cohort-card .spec { border-top: 0; }
:is(.page-embody,.page-compass) .cohort-card .spec-row {
grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
gap: 4px 18px;
padding-block: 14px;
}
:is(.page-embody,.page-compass) .cohort-card .spec-row dt, :is(.page-embody,.page-compass) .cohort-card .spec-row dd { font-size: 1rem; }
:is(.page-embody,.page-compass) .cohort-card .spec-row:last-child { border-bottom: 0; padding-bottom: 2px; }
/* The arc reads as a timeline: each letter sits under its own rule. */
:is(.page-embody,.page-compass) .embody-arc { border-top: 1px solid var(--em-rule); }
:is(.page-embody,.page-compass) .embody-arc li { padding-top: 18px; }
:is(.page-embody,.page-compass) .embody-arc .arc-weeks { color: var(--em-ink); }
@media (max-width: 900px) {
:is(.page-embody,.page-compass) .modality-head .lede { max-width: 60ch; }
}
/* The opening runs copy beside a photo. The image takes a full half and
centres against the taller copy column, and the foot keeps just enough
clearance for the wordmark running beneath. */
:is(.page-embody,.page-compass) .embody-open {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
gap: clamp(28px, 4vw, 56px);
align-items: center;
padding-bottom: clamp(48px, 7vw, 96px);
}
:is(.page-embody,.page-compass) .embody-photo { margin: 0; }
:is(.page-embody,.page-compass) .embody-photo img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius);
box-shadow: var(--shadow-img);
}
@media (max-width: 900px) {
:is(.page-embody,.page-compass) .embody-open { grid-template-columns: 1fr; padding-bottom: clamp(56px, 18vw, 110px); }
:is(.page-embody,.page-compass) .embody-photo { order: -1; }
}
/* The description introduces the arc: centred, and narrower than the
grid beneath so it reads as a lead rather than a column of body copy. */
:is(.page-embody,.page-compass) .arc-intro {
max-width: 60ch;
margin: 0 auto clamp(30px, 4.5vh, 48px);
text-align: center;
font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
line-height: 1.6;
}
/* The arc sits under a centred intro, so its items centre too — otherwise
the copy floats mid-page while the letters run hard to the left edge. */
:is(.page-embody,.page-compass) .embody-arc li { text-align: center; }
:is(.page-embody,.page-compass) .embody-arc p { max-width: 26ch; margin-inline: auto; }
/* Recognition: six cards, each an icon over a single line. */
:is(.page-embody,.page-compass) .seen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
--flow-gap: clamp(20px, 2.6vw, 32px);
gap: var(--flow-gap);
margin: 0;
padding: 0;
list-style: none;
}
:is(.page-embody,.page-compass) .seen-grid li {
display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(22px, 2.6vw, 30px);
border: 1px solid var(--em-rule);
border-radius: var(--radius);
background: var(--em-tint);
}
:is(.page-embody,.page-compass) .seen-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 999px;
background: var(--white);
color: var(--em-ink);
}
:is(.page-embody,.page-compass) .seen-icon { width: 22px; height: 22px; }
:is(.page-embody,.page-compass) .seen-grid p { margin: 0; font-size: var(--text-small); line-height: 1.5; color: var(--ink); }
@media (max-width: 900px) { :is(.page-embody,.page-compass) .seen-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { :is(.page-embody,.page-compass) .seen-grid { grid-template-columns: 1fr; } }
/* The one line the page wants remembered, alone on a plum ground. */
:is(.page-embody,.page-compass) .em-band {
background: var(--em-deep);
padding-block: clamp(44px, 7vw, 84px);
}
:is(.page-embody,.page-compass) .em-band p {
max-width: 34ch;
margin: 0 auto;
color: var(--on-em);
font-family: var(--serif);
font-size: clamp(1.375rem, 2.6vw, 2rem);
line-height: 1.3;
text-align: center;
}
/* What you leave with, and what is never asked of you. */
:is(.page-embody,.page-compass) .leave-list li { font-size: var(--text-small); }
:is(.page-embody,.page-compass) .leave-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(32px, 4.5vw, 66px);
align-items: start;
}
/* The rule that used to close the section now sits mid-section, dividing
"leave with" from "how it runs" without the double section padding
that ran the two apart. */
:is(.page-embody,.page-compass) .format-chips {
grid-column: 1 / -1;
scroll-margin-top: 28px;
margin-top: clamp(12px, 1.8vh, 18px);
padding-top: clamp(22px, 3vh, 30px);
border-top: 1px solid var(--em-rule);
}
:is(.page-embody,.page-compass) .leave-col h2,
:is(.page-embody,.page-compass) .wont-ask h3 {
margin-bottom: clamp(16px, 2.2vh, 22px);
font-size: clamp(1.35rem, 2vw, 1.6rem);
line-height: 1.25;
}
@media (max-width: 860px) {
:is(.page-embody,.page-compass) .leave-split { grid-template-columns: 1fr; gap: clamp(28px, 4vh, 40px); }
}
:is(.page-embody,.page-compass) .wont-ask h3 { font-family: var(--serif); font-weight: 400; }
:is(.page-embody,.page-compass) .wont-ask li { font-size: var(--text-small); color: var(--ink-soft); }
/* The run-format chips sit centred under their heading. */
:is(.page-embody,.page-compass) .chip-list { justify-content: center; }
/* The EMBODY card on the programs page: the name takes the program's
accent at the same depth as its links, and the rest stays in site ink. */
:is(.em-scope,.co-scope) h2 { color: var(--ink); }
:is(.em-scope,.co-scope) .em-word { color: var(--em-deep); }
:is(.em-scope,.co-scope) .eyebrow { color: var(--ink-soft); }
:is(.em-scope,.co-scope) .arc-letter { background: var(--em-tint); color: var(--em-deep); }
:is(.em-scope,.co-scope) .focus-link { color: var(--em-deep); }
:is(.em-scope,.co-scope) .focus-link:hover { color: var(--em-deep-hover); }
/* Larger discs, drawn closer together. */
:is(.em-scope,.co-scope) .embody-arc { grid-template-columns: repeat(6, max-content); justify-content: center; gap: 16px clamp(14px, 2vw, 26px); }
:is(.em-scope,.co-scope) .embody-arc--mini .arc-letter { width: 54px; height: 54px; font-size: 1.5rem; margin-bottom: 10px; }
:is(.em-scope,.co-scope) .embody-arc li { text-align: center; }
:is(.em-scope,.co-scope) .embody-arc .arc-letter { margin-inline: auto; }
/* The COMPASS card on the programs page: same components, steel accent,
and seven discs rather than six. */
.co-scope {
--em-ink: #3a6478;
--em-deep: #2d5162;
--em-deep-hover: #22404e;
--em-tint: #dfeaef;
--em-rule: rgba(58, 100, 120, 0.26);
--em-ghost: rgba(58, 100, 120, 0.085);
}
:root[data-theme="dark"] .co-scope {
--em-ink: #9dc3d4;
--em-deep: #b9d7e4;
--em-deep-hover: #d2e6ef;
--em-tint: #1e2b32;
--em-rule: rgba(157, 195, 212, 0.26);
--em-ghost: rgba(157, 195, 212, 0.075);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .co-scope {
--em-ink: #9dc3d4;
--em-deep: #b9d7e4;
--em-deep-hover: #d2e6ef;
--em-tint: #1e2b32;
--em-rule: rgba(157, 195, 212, 0.26);
--em-ghost: rgba(157, 195, 212, 0.075);
}
}
.co-scope .embody-arc { grid-template-columns: repeat(7, max-content); }
/* The card carries the program's wordmark the way the EMBODY page does:
translucent plum, oversized, running off the foot of the panel. It sits
behind everything, so the card's own content is lifted above it. */
:is(.em-scope,.co-scope) { overflow: hidden; }
.em-scope::after {
content: attr(data-abbr);
position: absolute;
right: -0.03em;
bottom: -0.18em;
z-index: 0;
font-family: var(--serif);
font-size: clamp(3rem, 11vw, 8rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--em-ghost);
pointer-events: none;
}
:is(.em-scope,.co-scope) > * { position: relative; z-index: 1; }
/* ---------------- COMPASS page ----------------
COMPASS shares the program components above and swaps the accent: a
steel blue for the navigational metaphor, against EMBODY's plum. Both
palettes are declared; nothing outside .page-compass is affected. */
.page-compass {
--em-ink: #3a6478;
--em-deep: #2d5162;
--em-deep-hover: #22404e;
--on-em: #faf9f6;
--em-tint: #dfeaef;
--em-rule: rgba(58, 100, 120, 0.26);
--em-ghost: rgba(58, 100, 120, 0.085);
--em-close: #1d3039;
}
:root[data-theme="dark"] .page-compass {
--em-ink: #9dc3d4;
--em-deep: #b9d7e4;
--em-deep-hover: #d2e6ef;
--on-em: #191310;
--em-tint: #1e2b32;
--em-rule: rgba(157, 195, 212, 0.26);
--em-ghost: rgba(157, 195, 212, 0.075);
--em-close: #121d23;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .page-compass {
--em-ink: #9dc3d4;
--em-deep: #b9d7e4;
--em-deep-hover: #d2e6ef;
--on-em: #191310;
--em-tint: #1e2b32;
--em-rule: rgba(157, 195, 212, 0.26);
--em-ghost: rgba(157, 195, 212, 0.075);
--em-close: #121d23;
}
}
/* COMPASS states the same recognitions without the tinted panels: two
editorial columns, hairline rules, and the accent kept to the mark.
The filled cards read as a product grid; this reads as a page. */
.page-compass .seen-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 clamp(34px, 5vw, 72px);
max-width: 960px;
margin-inline: auto;
}
.page-compass .seen-grid li {
flex-direction: row;
align-items: flex-start;
gap: 15px;
padding: 21px 0 23px;
border: 0;
border-top: 1px solid var(--rule);
border-radius: 0;
background: none;
}
.page-compass .seen-grid li:nth-child(1),
.page-compass .seen-grid li:nth-child(2) { border-top-color: var(--rule-strong); }
.page-compass .seen-mark {
width: auto;
height: auto;
background: none;
color: var(--em-deep);
margin-top: 1px;
}
.page-compass .seen-icon { width: 20px; height: 20px; }
.page-compass .seen-grid p { font-size: 1.0625rem; line-height: 1.55; }
@media (max-width: 700px) {
.page-compass .seen-grid { grid-template-columns: 1fr; }
.page-compass .seen-grid li:nth-child(2) { border-top-color: var(--rule); }
}
/* Seven letters rather than six, so the discs need a tighter track. */
.page-compass .embody-arc { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 900px) {
.page-compass .embody-arc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.page-compass .embody-arc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}