/* The site header, skip link and Menu disclosure — one source for the public
   Astro shell (app.css @imports this) and the service-rendered member pages,
   including Community, which cannot take app.css wholesale. Uses the same
   --cc-* aliases app.css defines; the service pages define them via app.css
   or, for Community, the small alias block in member-chrome.css. */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  min-height: 44px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  color: #111;
  background: var(--cc-green);
  font: 700 12px/1 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:visited { color: #111; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; top: 0; z-index: 40; background: rgba(17, 17, 17, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cc-line-soft); }
.site-header .inner { max-width: var(--cc-maxw); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--cc-ink); }
.wordmark:visited, .wordmark:hover { color: var(--cc-ink); }
.wordmark .brand-mark { width: 42px; height: 42px; object-fit: contain; flex: none; }
/* Preserve the original couch/heart artwork, tint it to the neon type palette. */
img[src*="couch-commons-logo"], img[src*="couch-commons-cursor"], .brand-mark {
  filter: grayscale(1) sepia(1) saturate(2) hue-rotate(265deg);
  mix-blend-mode: screen;
}
.wordmark .name { font-family: var(--font-display); font-size: 15px; letter-spacing: -0.01em; text-transform: uppercase; }
.site-header nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.site-header nav a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 16px; border-radius: 3px; border: 1px solid var(--cc-line-hair); text-decoration: none; color: var(--cc-ink); background: transparent; white-space: nowrap; transition: color var(--r-dur-quick) var(--r-ease), border-color var(--r-dur-quick) var(--r-ease), background var(--r-dur-quick) var(--r-ease), box-shadow var(--r-dur-quick) var(--r-ease), transform var(--r-dur-quick) var(--r-ease); }
.site-header nav a:hover { color: var(--cc-green); border-color: var(--cc-green); }
.site-header nav a[aria-current="page"] { border-color: var(--cc-green); box-shadow: inset 0 -3px 0 var(--cc-green); }
.site-header nav a.cta,
.site-header nav a.cta:visited { background: var(--cc-green); color: #111; border-color: transparent; }
.site-header nav a.cta:hover,
.site-header nav a.cta:visited:hover { color: #111; filter: brightness(1.08); }
.site-header nav a:active { transform: translateY(1px) scale(.99); }

.site-menu-toggle { display:none; }
@media(max-width:720px) {
 .site-header .inner { flex-wrap:wrap; padding:12px 16px; gap:12px; }
 .site-header .wordmark { flex:1; justify-content:flex-start; }
 .site-header .wordmark .name { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; font-size:14px; }
 .site-header.nav-ready .site-menu-toggle { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 14px; font:inherit; color:var(--cc-ink); background:transparent; border:1px solid var(--cc-line-hair); border-radius:3px; }
 .site-header nav { flex:0 0 100%; width:100%; display:grid; grid-auto-flow:row; grid-template-columns:1fr 1fr; gap:8px; }
 .site-header nav a { font-size:14px; line-height:1.35; letter-spacing:0; white-space:normal; min-height:44px; padding:10px; }
 .site-header.nav-ready .site-menu-toggle[aria-expanded="false"] + nav { display:none; }
 .site-header.nav-ready .site-menu-toggle[aria-expanded="true"] + nav { display:grid; }
}

/* Couch Commons — Direction 08 "Poster" (founder-ruled 2026-08-17, replacing
   Direction 1 seafoam). Archivo Black display + Inter for everything else, a
   near-black ground, one pink accent (#edb0e6, verified AAA against
   #111 in apps/public/test/contrast.test.ts). tokens.css is the canonical,
   versioned source; this is the standalone component layer the
   live pages render. Selector names are unchanged from the previous system on
   purpose — every page that hasn't been individually rebuilt yet (charter,
   ordering, stats, city×specialty) inherits the new palette for free through
   these same classes. */

:root {
  /* Compatibility aliases only. The canonical values live in tokens.css. */
  --font-display: var(--r-font-display);
  --font-ui: var(--r-font-ui);
  --font-body: var(--r-font-body);
  /* legacy aliases — a handful of components still reference these names */
  --font-serif: var(--font-display);
  --font-sans: var(--font-body);

  --cc-ground: var(--r-ground);
  --cc-ground-alt: var(--r-ground-alt);
  --cc-ink: var(--r-ink);
  --cc-ink-2: var(--r-ink-muted);
  --cc-ink-3: var(--r-ink-secondary);
  --cc-ink-strong: var(--r-ink-strong);
  --cc-green: var(--r-accent); /* legacy semantic name; canonical value is --r-accent */
  --cc-green-link: var(--r-action);
  --cc-green-deep: var(--r-action-deep);
  --cc-mint: var(--r-action-surface); /* dark accent-tinted fill, replaces the old light mint */
  --cc-mint-2: var(--r-action-selection);
  --cc-gold: var(--r-accent); /* retired alias */
  --cc-gold-ink: var(--r-accent);
  --cc-line: var(--r-line-translucent);
  --cc-line-soft: var(--r-line-soft-translucent);
  --cc-line-hair: var(--r-line-hair);
  --cc-panel: var(--r-panel);
  --cc-maxw: var(--r-content-max);
  --cc-grain: var(--r-grain-image);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 132px; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cc-ink);
  background: var(--cc-ground);
  background-image: var(--cc-grain);
  min-height: 100vh;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  color: var(--cc-ink);
}
h1 { color: var(--cc-green); font-size: clamp(38px, 6vw, 64px); }
h2 { color: var(--cc-ink); font-size: clamp(24px, 3.4vw, 34px); }
h3, h4 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 0.5rem;
  color: var(--cc-ink);
}
h3 { color: var(--cc-ink); font-size: 15px; }
h4 { font-size: 13px; color: var(--cc-ink-3); }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
.serif { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; }
.italic { font-style: italic; font-family: var(--font-body); text-transform: none; letter-spacing: normal; }

a { color: var(--cc-green-link); text-decoration-color: rgba(237,176,230,0.5); text-underline-offset: 3px; }
/* visited keeps its identity but steps down one green — a directory is a page
   of links, and "which of these have I already read" is real information */
a:visited { color: var(--cc-green-deep); }
.btn:visited, .cta:visited, nav a:visited, .site-footer a:visited { color: inherit; }
a:hover { color: var(--cc-ink); }
::selection { background: var(--cc-mint-2); color: var(--cc-ink); }
:focus-visible { outline: 2px solid var(--cc-green); outline-offset: 3px; border-radius: 2px; }

.quiet { color: var(--cc-ink-3); }

.tap-target { min-width: 44px; min-height: 44px; }

/* ── header / footer ─────────────────────────────────────────────────────── */

.site-footer { background: #0a0a0a; color: var(--cc-ink-3); padding: 44px 24px 40px; margin-top: 3rem; border-top: 1px solid var(--cc-line-soft); }
.site-footer .inner { max-width: var(--cc-maxw); margin: 0 auto; font-size: 14px; }
.site-footer .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px 40px; align-items: start; }
.site-footer .footer-brand { display: grid; gap: 10px; }
.site-footer .footer-lockup { display: flex; align-items: center; gap: 12px; }
.site-footer .brand-mark { width: 48px; height: 48px; object-fit: contain; flex: none; }
.site-footer .cc-mark { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--cc-ink); }
.site-footer .footer-tag { font-size: 13px; max-width: 24ch; line-height: 1.5; }
.site-footer .footer-operator { font-size: 13px; line-height: 1.5; margin: 18px auto 0; }
.site-footer .footer-col { display: grid; gap: 2px; justify-items: start; }
.site-footer .footer-k { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cc-ink-2); margin-bottom: 8px; }
.site-footer a { color: var(--cc-ink-3); text-decoration: none; display: inline-block; padding: 5px 0; }
.site-footer .footer-col a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.site-footer a:hover { color: var(--cc-green); }
@media (max-width: 720px) { .site-footer .footer-grid { grid-template-columns: 1fr 1fr; } .site-footer .footer-brand { grid-column: 1 / -1; } }

/* ── shell ───────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--cc-maxw); margin: 0 auto; padding: 0 24px; }
main { display: block; }
/* Pages that drop bare content into <main> (charter, ordering, stats, articles,
   city×specialty) get a centered reading column. The home/find/profile pages use
   full-bleed background bands or .wrap, which opt out here. */
main > :not(.hero-band):not(.search-band):not(.profile-band):not(.system-motion-band):not(.proof-band):not(.promises-band):not(.clinician-band):not(.directory-preview):not(.final-cta):not(.wrap) {
  max-width: 40rem; /* ~75 characters of 16px Inter, the top of the reading measure */
  margin-inline: auto;
  padding-inline: 24px;
}
main > :first-child:not(.hero-band) { margin-top: 2.5rem; }

/* generic panel used by the secondary pages — poster idiom: sharp corners,
   hairline border, no soft drop shadow */
.panel { background: var(--cc-panel); border: 1px solid var(--cc-line); border-radius: 4px; padding: 1.4rem 1.6rem; margin-block: 1.25rem; }
.panel > :first-child { margin-top: 0; }
/* a <ul> of .panel cards shouldn't wear disc bullets + indent (articles, city×specialty) */
li.panel { list-style: none; }
ul:has(> li.panel) { list-style: none; padding-left: 0; margin-left: 0; }
.ordering-label { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-ink-3); }
.badge { display: inline-flex; align-items: center; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 3px; background: var(--cc-mint); color: var(--cc-green); margin: 0 0.3rem 0.3rem 0; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font: inherit; font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; min-height: 50px; padding: 0 28px; border-radius: 3px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: color var(--r-dur-quick) var(--r-ease), background var(--r-dur-quick) var(--r-ease), border-color var(--r-dur-quick) var(--r-ease), filter var(--r-dur-quick) var(--r-ease), transform var(--r-dur-quick) var(--r-ease); }
.btn[hidden], .badge[hidden] { display: none; } /* the display rules above beat [hidden]'s UA default — a hidden control must stay gone */
.btn-primary,
.btn-primary:visited {
  background: var(--cc-green);
  color: #111 !important;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.btn-primary:hover,
.btn-primary:visited:hover { color: #111; filter: brightness(1.08); }
.btn-soft { background: var(--cc-mint); color: var(--cc-green); border-color: var(--cc-line-hair); }
.btn-soft:hover { color: var(--cc-ink); border-color: var(--cc-green); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-pill { border-radius: 999px; min-height: 44px; padding: 0 20px; }

/* ── kicker / chips / pills ──────────────────────────────────────────────── */
.kicker-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: transparent; border: 1px solid var(--cc-line-hair); font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-green); }
.kicker-pill .gd { width: 6px; height: 6px; border-radius: 50%; background: var(--cc-green); flex: none; }
.chip { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 6px 12px; border-radius: 999px; background: var(--cc-mint); color: var(--cc-green); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.chip-outline { background: transparent; border: 1px solid var(--cc-line-hair); color: var(--cc-ink); }
.chip .gd { width: 5px; height: 5px; border-radius: 50%; background: var(--cc-green); flex: none; }
.gold-rule { height: 1px; background: linear-gradient(90deg, var(--cc-green), rgba(237,176,230,0)); border: 0; margin: 12px 0 16px; }
.eyebrow { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-ink-3); }

/* ── the poster name treatment — shared by the profile hero and the homepage
   masthead. Huge Archivo Black, uppercase, one outlined line, one accent line. ── */
.poster-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.8; font-size: clamp(40px, 9vw, 120px); }
.poster-name span { display: block; }
.poster-name .outline { color: transparent; -webkit-text-stroke: 1.5px var(--cc-ink); }
.poster-name .accent { color: var(--cc-green); }

@media (forced-colors: active) {
  .poster-name .outline { color: CanvasText; -webkit-text-stroke: 0; }
}

/* ── the license receipt as a document — the load-bearing element, never a
   badge. Shared by the profile page, the article byline, and the homepage
   sample receipt. ── */
.receipt-doc { border-top: 1px solid var(--cc-ink); border-bottom: 1px solid var(--cc-ink); padding: 28px 0; }
.receipt-doc-k { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cc-ink-3); margin-bottom: 22px; }
.receipt-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.receipt-grid div span { display: block; font-family: var(--font-ui); font-size: 12px; line-height: 1.35; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cc-ink-3); margin-bottom: 9px; }
.receipt-grid div b { font-family: var(--font-display); font-weight: 400; font-size: 17px; letter-spacing: -0.01em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.receipt-doc-note { font-size: 12.5px; color: var(--cc-ink-3); margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cc-line-soft); }
@media (max-width: 640px) {
  .receipt-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
}

/* ── monogram avatars ─────────────────────────────────────────────────────── */
.mono { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); text-transform: uppercase; color: #111; background: var(--cc-green); flex: none; }
.mono-56 { width: 56px; height: 56px; font-size: 18px; }
.mono-62 { width: 62px; height: 62px; font-size: 20px; }
.mono-104 { width: 104px; height: 104px; font-size: 32px; box-shadow: 0 0 0 6px var(--cc-ground), 0 0 0 7px var(--cc-line-hair); }

/* ── cards / panels ──────────────────────────────────────────────────────── */
.card-white { background: var(--cc-panel); border: 1px solid var(--cc-line); border-radius: 4px; padding: 24px; }
.mint-card { background: var(--cc-mint); border-radius: 4px; padding: 26px; }

/* ── forms ───────────────────────────────────────────────────────────────── */
label { display: block; }
input, select, textarea { width: 100%; font: inherit; color: var(--cc-ink); background: var(--cc-panel); border: 1px solid var(--cc-line-hair); border-radius: 3px; padding: 12px 14px; }
input::placeholder, textarea::placeholder { color: var(--cc-ink-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--cc-green); }
select { appearance: none; -webkit-appearance: none; min-height: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238c8c86' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; }
.field-label { display: block; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 6px; color: var(--cc-ink-2); }
.field-mini { display: block; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-ink-3); padding: 2px 0 5px 12px; }

/* ── responsive base ─────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .cc-two-col { grid-template-columns: 1fr !important; }
  .cc-sticky { position: static !important; }
}
@media (max-width: 560px) {
  .site-header .inner { padding: 9px 12px; gap: 8px; }
  .site-header .wordmark { flex: 0 0 44px; justify-content: center; }
  .site-header .wordmark .brand-mark { width: 40px; height: 40px; }
  .site-header .wordmark .name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .wrap { padding: 0 16px; }
}

/* ── article page ─────────────────────────────────────────────────────────── */
.cc-article { max-width: 42rem; margin: 0 auto; padding: 2.5rem 1.5rem 0; }
.cc-kicker { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cc-green); margin: 0; }
.cc-article h1 { font-size: clamp(30px, 5vw, 46px); line-height: 0.94; margin: 14px 0 0; text-wrap: balance; }
.cc-article-body { font-family: var(--font-body); font-size: 18px; line-height: 1.72; color: var(--cc-ink-strong); }
.cc-figure { margin: 28px 0; }
.cc-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--cc-line); border-radius: 4px; }

.cc-receipt { background: var(--cc-panel); border: 1px solid var(--cc-line); border-radius: 4px; padding: 19px 21px; margin: 30px 0 0; }
.cc-receipt-top { display: flex; align-items: center; gap: 13px; }
.cc-receipt-mono { width: 46px; height: 46px; border-radius: 50%; background: var(--cc-mint); color: var(--cc-green); display: grid; place-items: center; font-family: var(--font-display); text-transform: uppercase; font-size: 15px; flex: none; }
.cc-receipt-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; font-size: 16px; line-height: 1.2; }
.cc-receipt-name a { color: var(--cc-ink); }
.cc-receipt-sub { font-size: 13.5px; margin-top: 2px; }
.cc-receipt-rule { border: 0; border-top: 1px solid var(--cc-line-soft); margin: 15px 0; }
.cc-receipt-dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13.5px; margin: 0; }
.cc-receipt-dl dt { color: var(--cc-ink-3); }
.cc-receipt-dl dd { margin: 0; color: var(--cc-ink-strong); }
.cc-receipt-ok { color: var(--cc-green); font-weight: 600; }
.cc-tick { margin-right: 6px; }

/* citation ladder — badge inline, full pulled out. Max two "full" per article,
   enforced in claims.ts. Never hue-only: datedClaim renders icon + label too. */
.r-claim--badge { display: inline-flex; align-items: baseline; gap: 6px; background: var(--cc-mint); border-radius: 3px; padding: 1px 8px; font-family: var(--font-body); font-size: 13px; color: var(--cc-green); white-space: nowrap; }
.r-claim--full { display: block; margin: 28px 0; border-left: 3px solid var(--cc-green); background: var(--cc-panel); border-radius: 0 4px 4px 0; padding: 17px 20px; font-family: var(--font-body); }
.r-claim--full .rc-claim { font-family: var(--font-body); font-size: 18px; line-height: 1.45; color: var(--cc-ink); display: block; margin-bottom: 9px; }
.r-claim--full .rc-source, .r-claim--full time, .r-claim--full .rc-label { font-size: 13px; color: var(--cc-ink-3); }

/* video facade — nothing third-party loads until the reader presses play */
.cc-video { margin: 28px 0; }
.cc-video-facade { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; border: 1px solid var(--cc-line); background: linear-gradient(150deg, #1a2408, var(--cc-green) 130%); display: grid; place-items: center; }
.cc-play { width: 74px; height: 74px; border-radius: 50%; border: 0; cursor: pointer; background: var(--cc-ink); display: grid; place-items: center; }
.cc-play-tri { width: 0; height: 0; margin-left: 5px; border-left: 22px solid #111; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.cc-video-dur { position: absolute; right: 14px; bottom: 13px; font-family: var(--font-ui); font-size: 12px; color: var(--cc-ink); background: rgba(0, 0, 0, 0.62); border-radius: 3px; padding: 3px 8px; }
.cc-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 4px; }
.cc-video-cap { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-family: var(--font-ui); font-size: 12.5px; color: var(--cc-ink-3); }
.cc-video-disclose { color: var(--cc-green); border: 1px solid var(--cc-line-hair); border-radius: 3px; padding: 2px 8px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

/* reading section front */
.cc-section-lede { font-size: 18px; line-height: 1.6; color: var(--cc-ink-2); max-width: 52ch; margin: 18px 0 0; }
.cc-index { padding-top: 1.5rem; }
.cc-index-list { list-style: none; padding: 0; margin: 0; }
.cc-index-list li { border-top: 1px solid var(--cc-line-soft); padding: 22px 0; }
.cc-index-list h2 { font-size: 22px; margin: 0 0 6px; }
.cc-index-by { font-family: var(--font-ui); font-size: 12.5px; letter-spacing: 0.02em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.cc-index-ok { color: var(--cc-green); }
.cc-index-dot { color: var(--cc-ink-3); }
.cc-index-ex { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--cc-ink-strong); margin: 10px 0 0; }
.cc-empty { background: var(--cc-panel); border: 1px solid var(--cc-line); border-radius: 4px; padding: 24px 26px; margin-top: 28px; }
.cc-empty p { margin: 0 0 10px; }
.cc-empty p:last-child { margin-bottom: 0; }

/* related reading — internal only */
.cc-related { margin: 40px 0 0; border-top: 1px solid var(--cc-line-soft); padding-top: 20px; }
.cc-related h2 { font-size: 18px; }
.cc-related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

/* also worth your time — external only */
.cc-also { background: var(--cc-ground-alt); border-top: 1px solid var(--cc-line-soft); padding: 36px 1.5rem 42px; margin-top: 3rem; }
.cc-also > * { max-width: 38rem; margin-inline: auto; }
.cc-also-lede { font-size: 14px; margin: 5px 0 20px; }
.cc-also-list { list-style: none; padding: 0; margin: 0; }
.cc-also-list li { border-top: 1px solid var(--cc-line-soft); padding: 15px 0; }
.cc-also-tag { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-green); border: 1px solid var(--cc-line-hair); border-radius: 3px; padding: 1px 5px; margin-left: 6px; }
.cc-also-note { font-size: 15px; color: var(--cc-ink-strong); margin: 5px 0 0; line-height: 1.55; }
.cc-also-by { font-size: 13px; margin-top: 6px; }

/* Public navigation keeps readable labels instead of shrinking every link. */

/* ── the satin ground ──────────────────────────────────────────────────────
   Flowing black satin (ported from mentalwealthsolutions.org) behind the body
   ground. Hidden until the renderer reports ready; never under reduced-motion,
   forced-colors or print. Paper bands and the hero film paint over it. */
.cc-satin { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; visibility: hidden; }
@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  body[data-surface-ready="true"] > .cc-satin { visibility: visible; opacity: .52; }
}
@media (max-width: 780px) { body[data-surface-ready="true"] > .cc-satin { opacity: .44; } }
/* a soft veil under the content column: the folds stay visible, body type keeps its contrast over a bright fold */
body[data-surface-ready="true"] main { background: linear-gradient(90deg, rgba(17,17,17,.42), rgba(17,17,17,.28) 55%, rgba(17,17,17,.42)); }
@media (forced-colors: active), print { .cc-satin { display: none !important; } }
/* opaque chrome contains the fixed surface at the foot of the page; the header keeps its own
   sticky z-index: 40 above (a z-index: 1 here put every z-indexed section over the nav — QA-1) */
.site-footer { position: relative; z-index: 1; }
/* when the satin is off, the translucent accent strips sit on the plain ground: keep them solid */
body:not([data-surface-ready="true"]) :is(.proof-band, .clinician-band, .final-cta) { background: var(--cc-green); }