/* ============================================================
   Spravato Treatment Centers of New Jersey — design system
   Direction: "Offprint" (A) carrying "Plain Answer" (C)'s two
   devices — the patient question as heading, and the fixed
   "what we don't know" panel. Owner decision 2026-09-07.

   Deliberately NOT the family formula. The four sibling sites all
   run a deep desaturated primary + cream ground + warm metallic
   accent + serif display over humanist sans. This one is white
   stock, near-black ink, one madder red, and a serif that sets
   the body copy as well as the headings.
   ============================================================ */

/* ---------- Self-hosted faces (no remote font request) ---------- */
@font-face{
  font-family:'Literata';
  src:url('../fonts/literata-normal.woff2') format('woff2-variations');
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Literata';
  src:url('../fonts/literata-italic.woff2') format('woff2-variations');
  font-weight:400 600; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-normal.woff2') format('woff2-variations');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/plex-mono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/plex-mono-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

/* ============================================================
   Tokens
   ============================================================ */
:root{
  /* Ground: white stock, like a journal offprint. The second
     surface is a warm-grey paper, not a cream. */
  --paper:      #FFFFFF;
  --paper-2:    #FBF1E6;
  --paper-3:    #F3E4D2;
  --ink:        #1C1917;
  --ink-soft:   #44403C;
  --muted:      #6A5A4E;
  --faint:      #766A5F;
  --line:       #E8DCCD;
  --line-hard:  #CDBBA5;

  /* One accent. PERSIMMON (owner pick "B", 2026-09-20), replacing the
     original madder red: red reads as alert/error on a depression-care
     site, persimmon reads as daylight. The token keeps its old name
     (--madder) so nothing else had to change. Neutrals were warmed to
     match: sunrise-tinted bands, warm stone ink. Contrast checked:
     white on persimmon 5.4:1, persimmon on white 5.4:1, --faint 5.3:1 (4.7 on the tint; do not set it on --paper-3). */
  --madder:     #B4471F;
  --madder-dim: #8F3616;
  --madder-tint:#FBE6D8;

  --font-text: 'Literata', Georgia, 'Times New Roman', serif;
  --font-ui:   'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Type scale — every size clamped, per the build brief. */
  --t-xs:   clamp(.6875rem, .66rem + .12vw, .75rem);
  --t-sm:   clamp(.8125rem, .78rem + .15vw, .875rem);
  --t-base: clamp(1rem,    .96rem + .2vw,  1.0625rem);
  --t-lg:   clamp(1.125rem,1.07rem + .28vw,1.25rem);
  --t-xl:   clamp(1.3125rem,1.2rem + .55vw,1.625rem);
  --t-2xl:  clamp(1.5rem,  1.32rem + .9vw, 2.125rem);
  --t-3xl:  clamp(1.875rem,1.55rem + 1.6vw,2.875rem);
  --t-4xl:  clamp(2.25rem, 1.75rem + 2.5vw,3.75rem);

  /* Spacing — the brief's minimum section rhythm is 96px desktop
     / 64px mobile, so --s-band is clamped between exactly those. */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;
  --s-band: clamp(4rem, 2.5rem + 4.5vw, 6rem);

  --measure: 34rem;      /* ~65 characters at --t-base in Literata */
  --rail:    13.5rem;
  --maxw:    72rem;

  --header-h: 74px;
  --bottom-nav-h: 62px;

  /* Offprint uses rules and space, not cards. These exist only for
     the two places that genuinely need to read as a lifted object. */
  --radius: 3px;
  --shadow-soft: 0 1px 2px rgba(20,22,26,.05), 0 10px 28px -18px rgba(20,22,26,.28);
  --shadow-lift: 0 2px 6px rgba(20,22,26,.07), 0 22px 44px -22px rgba(20,22,26,.36);
}

/* ---------- Dark: the same document at night ----------
   ⚠️ Contrast lesson, 2026-09-07: the first pass lifted the madder
   only to #D2705F (~5.4:1) and used a #7A7D79 label tier (~4.3:1);
   the owner could not read either. A thin stroke or a small label
   needs far more contrast than a text block at the same ratio, and
   WCAG's 3:1 non-text floor is not enough to look right. These
   values are the corrected set — do not lower them. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:      #14161A;
    --paper-2:    #1C1F24;
    --paper-3:    #23272D;
    --ink:        #EFEDE7;
    --ink-soft:   #D2D0CA;
    --muted:      #B6B9B1;
    --faint:      #989C95;
    --line:       #2E343A;
    --line-hard:  #454C53;
    --madder:     #FF8B6B;
    --madder-dim: #FFA98E;
    --madder-tint:#2A1D19;
    --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.45), 0 22px 44px -22px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:      #14161A;
  --paper-2:    #1C1F24;
  --paper-3:    #23272D;
  --ink:        #EFEDE7;
  --ink-soft:   #D2D0CA;
  --muted:      #B6B9B1;
  --faint:      #989C95;
  --line:       #2E343A;
  --line-hard:  #454C53;
  --madder:     #FF8B6B;
  --madder-dim: #FFA98E;
  --madder-tint:#2A1D19;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.45), 0 22px 44px -22px rgba(0,0,0,.9);
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:var(--t-base);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:0;
}
@media (max-width:719px){ body{ padding-bottom:var(--bottom-nav-h); } }

h1,h2,h3,h4,h5{
  margin:0; font-family:var(--font-text); font-weight:600;
  line-height:1.16; letter-spacing:-.012em; text-wrap:balance;
}
h1{font-size:var(--t-3xl); line-height:1.1}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}
p{margin:0}
p + p{margin-top:var(--s-4)}
a{color:var(--madder); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--madder-dim)}
img{max-width:100%; height:auto}
:focus-visible{outline:2px solid var(--madder); outline-offset:2px}
::selection{background:var(--madder); color:var(--paper)}

.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--s-5)}
.measure{max-width:var(--measure)}

.eyebrow{
  font-family:var(--font-mono); font-size:var(--t-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--faint);
  display:block;
}

/* Skip link — keyboard users land here first */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:12px 18px;
  font-family:var(--font-ui); font-size:var(--t-sm);
}
.skip:focus{left:0}

/* ============================================================
   Section rhythm — plain / tinted alternation.
   ⚠️ After inserting or MOVING a section, re-check the whole
   page's alternation, not just the block you touched.
   ============================================================ */
.band{padding:var(--s-band) 0}
.band-tint{background:var(--paper-2)}
.band-tight{padding:var(--s-7) 0}

/* ⚠️ BAND RULE (owner, 2026-09-07): at most one dark band per page,
   and two dark bands may NEVER sit adjacent. On a page that already
   spends its dark band on the curve hook, the CTA is a tint instead.
   Re-check the whole page's alternation after inserting or moving
   any section — not just the block you touched. */

/* Mid-page CTA on a tint. Weight comes from rules above and below
   rather than from a dark fill, which keeps the page quiet. */
.band-cta{
  border-top:1px solid var(--line-hard);
  border-bottom:1px solid var(--line-hard);
}

/* Dark CTA band — carries the aurora drift (see Motion effects).
   Reserved for pages whose dark band is NOT already spent on a chart;
   unused on the homepage since the curve hook takes that slot. */
.band-ink{
  background:#1C1917; color:#EFEDE7;
  padding:var(--s-band) 0;
}
.band-ink h2, .band-ink h3{color:#EFEDE7}
.band-ink p{color:#B6B9B1}
.band-ink .eyebrow{color:#989C95}

/* ============================================================
   Header — desktop is a "Menu" pill, never a hamburger.
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.5) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  height:var(--header-h); display:flex; align-items:center; gap:var(--s-5);
  max-width:var(--maxw); margin:0 auto; padding:0 var(--s-5);
}
.brand{display:flex; flex-direction:column; gap:1px; text-decoration:none; color:inherit; margin-right:auto}
.brand .bn{font-family:var(--font-text); font-weight:600; font-size:1rem; letter-spacing:-.01em; line-height:1.1}
.brand .bs{
  font-family:var(--font-mono); font-size:.625rem; text-transform:uppercase;
  letter-spacing:.13em; color:var(--faint);
}
.nav-main{display:none; gap:var(--s-5); align-items:center}
.nav-main a{
  font-family:var(--font-ui); font-size:var(--t-sm); color:var(--ink-soft);
  text-decoration:none; padding:6px 0; position:relative;
}
/* Underline reveal on hover — the brief bans a plain colour change */
.nav-main a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--madder); transform:scaleX(0); transform-origin:right center;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.nav-main a:hover::after, .nav-main a[aria-current="page"]::after{
  transform:scaleX(1); transform-origin:left center;
}
.nav-main a[aria-current="page"]{color:var(--ink)}
@media(min-width:900px){ .nav-main{display:flex} }

.menu-pill{
  display:none; font-family:var(--font-ui); font-size:var(--t-sm);
  padding:8px 16px; border:1px solid var(--line-hard); border-radius:999px;
  background:transparent; color:var(--ink); cursor:pointer;
  transition:border-color .2s, background .2s;
}
.menu-pill:hover{border-color:var(--ink); background:var(--paper-2)}
@media(min-width:900px){ .menu-pill{display:inline-flex; align-items:center; gap:8px} }
.menu-pill .chev{transition:transform .25s ease}
.menu-pill[aria-expanded="true"] .chev{transform:rotate(180deg)}

.menu-panel{
  position:absolute; right:var(--s-5); top:calc(var(--header-h) - 6px);
  min-width:290px; background:var(--paper); border:1px solid var(--line-hard);
  box-shadow:var(--shadow-lift); padding:var(--s-4);
  display:none; grid-template-columns:1fr; gap:2px;
}
.menu-panel.open{display:grid}
.menu-panel a{
  font-family:var(--font-ui); font-size:var(--t-sm); color:var(--ink-soft);
  text-decoration:none; padding:9px 11px; display:block;
  transition:background .16s, color .16s;
}
.menu-panel a:hover{background:var(--paper-2); color:var(--ink)}
.menu-panel .mp-head{
  font-family:var(--font-mono); font-size:.625rem; text-transform:uppercase;
  letter-spacing:.13em; color:var(--faint); padding:9px 11px 4px;
}

/* CTA — pill with a shifting arrow, never a plain rectangle */
.cta{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-ui); font-weight:600; font-size:var(--t-sm);
  padding:11px 20px; border-radius:999px; border:1px solid var(--madder);
  background:var(--madder); color:#FFFFFF; text-decoration:none; cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s;
  min-height:44px;
}
.cta:hover{background:var(--madder-dim); border-color:var(--madder-dim); color:#FFFFFF}
.cta .arw{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.cta:hover .arw{transform:translateX(4px)}
:root[data-theme="dark"] .cta, .cta.on-ink{color:#1C1917}
.cta.on-ink{background:#FF8B6B; border-color:#FF8B6B}
.cta.on-ink:hover{background:#FFA98E; border-color:#FFA98E; color:#1C1917}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cta{color:#14161A} }

.cta-ghost{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-ui); font-size:var(--t-sm); color:var(--ink);
  text-decoration:none; padding:11px 0; min-height:44px; position:relative;
}
.cta-ghost::after{
  content:""; position:absolute; left:0; right:18px; bottom:8px; height:1px;
  background:var(--line-hard); transition:background .2s, right .25s cubic-bezier(.22,1,.36,1);
}
.cta-ghost:hover{color:var(--madder)}
.cta-ghost:hover::after{background:var(--madder); right:0}
.cta-ghost .arw{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.cta-ghost:hover .arw{transform:translateX(4px)}

/* Magnetic button wrapper — desktop only, ≤6px travel */
.magnetic{display:inline-block; padding:6px}

/* ============================================================
   Mobile bottom bar — thumb zone, per the brief
   ============================================================ */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  height:var(--bottom-nav-h);
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:saturate(1.5) blur(12px);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr);
}
@media(min-width:720px){ .bottom-nav{display:none} }
.bottom-nav a, .bottom-nav button{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-family:var(--font-ui); font-size:.625rem; letter-spacing:.02em;
  color:var(--muted); text-decoration:none; background:none; border:0; cursor:pointer;
  min-height:44px; padding:0;
}
.bottom-nav a[aria-current="page"]{color:var(--madder)}
.bottom-nav svg{width:19px; height:19px; stroke-width:1.6}

.sheet-backdrop{
  position:fixed; inset:0; z-index:80; background:rgba(20,22,26,.5);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.sheet-backdrop.open{opacity:1; pointer-events:auto}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:85;
  background:var(--paper); border-top:1px solid var(--line-hard);
  border-radius:14px 14px 0 0; padding:var(--s-5) var(--s-5) calc(var(--s-6) + var(--bottom-nav-h));
  transform:translateY(100%); transition:transform .32s cubic-bezier(.22,1,.36,1);
  max-height:80vh; overflow-y:auto;
}
.sheet.open{transform:translateY(0)}
.sheet-grab{width:38px; height:4px; border-radius:2px; background:var(--line-hard); margin:0 auto var(--s-4)}
.sheet a{
  display:block; font-family:var(--font-ui); font-size:var(--t-base);
  color:var(--ink); text-decoration:none; padding:13px 4px;
  border-bottom:1px solid var(--line); min-height:44px;
}
.sheet a:last-of-type{border-bottom:0}

/* ============================================================
   THE MARGIN RAIL — Offprint's signature structure.
   References sit beside the sentence they support, not in a
   footnote nobody scrolls to.
   ============================================================ */
.railed{
  display:grid; grid-template-columns:1fr; gap:var(--s-5);
}
@media(min-width:900px){
  .railed{ grid-template-columns:minmax(0,1fr) var(--rail); gap:var(--s-7); }
  .railed.rail-left{ grid-template-columns:var(--rail) minmax(0,1fr); }
  .railed.rail-left > .rail{ order:-1; border-left:0; border-right:1px solid var(--line); padding-left:0; padding-right:var(--s-5); }
}
.rail{
  border-left:1px solid var(--line); padding-left:var(--s-5);
  display:flex; flex-direction:column; gap:var(--s-5);
  align-self:start;
}
@media(max-width:899px){
  .rail{ border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:var(--s-4); }
}
.ref{font-size:var(--t-xs); line-height:1.55; color:var(--muted)}
.ref .n{
  display:block; font-family:var(--font-mono); font-size:.625rem; font-weight:500;
  color:var(--madder); margin-bottom:3px; letter-spacing:.04em;
}
.ref cite{font-style:italic}
.ref a{color:var(--muted); text-decoration-color:var(--line-hard)}
.ref a:hover{color:var(--madder)}

/* Inline reference marks in body copy */
sup.rm{
  font-family:var(--font-mono); font-size:.625rem; font-weight:500;
  color:var(--madder); vertical-align:super; line-height:0; margin-left:1px;
}
sup.rm a{text-decoration:none; color:inherit}
sup.rm a:hover{text-decoration:underline}

/* Section numbering — an evidence page genuinely is a sequenced
   argument, so the numbers carry information rather than decorate. */
.sec-no{
  font-family:var(--font-mono); font-size:var(--t-xs); font-weight:500;
  color:var(--faint); letter-spacing:.1em; text-transform:uppercase;
}

/* Signature block — every clinical page is signed and dated */
.signature{
  border-top:1px solid var(--line-hard); margin-top:var(--s-6); padding-top:var(--s-4);
  font-family:var(--font-mono); font-size:var(--t-xs); color:var(--faint);
  line-height:1.7;
}
.signature b{color:var(--ink-soft); font-weight:500}

/* ============================================================
   PLAIN ANSWER's two devices, folded in (owner: A + C)
   ============================================================ */

/* The patient's own question as the heading, answered outright in
   the first sentence before any context. */
.question{
  font-size:var(--t-2xl); font-weight:600; line-height:1.15;
  letter-spacing:-.016em; margin-bottom:var(--s-4); text-wrap:balance;
}
.answer{font-size:var(--t-lg); line-height:1.55; color:var(--ink)}
.answer b, .answer strong{font-weight:600}
.answer + p{margin-top:var(--s-4); color:var(--muted); font-size:var(--t-base)}

/* "What we don't know yet" — a fixed component, so naming the limit
   is structural rather than a thing we remember to do. */
.unknown{
  background:var(--madder-tint); border-left:3px solid var(--madder);
  padding:var(--s-5); align-self:start;
}
.unknown h4{
  font-size:var(--t-base); margin-bottom:var(--s-2); letter-spacing:-.008em;
}
.unknown p{font-size:var(--t-sm); line-height:1.6; color:var(--muted)}
.unknown .eyebrow{margin-bottom:var(--s-2); color:var(--madder)}

/* ============================================================
   Figures / statistics row — rules, not cards
   ============================================================ */
.figrow{
  display:flex; flex-wrap:wrap;
  border-top:1px solid var(--line-hard); border-bottom:1px solid var(--line-hard);
}
.fig{flex:1 1 11rem; padding:var(--s-4) var(--s-5) var(--s-4) 0; border-right:1px solid var(--line)}
.fig:last-child{border-right:0}
@media(min-width:720px){ .fig{padding-left:var(--s-5)} .fig:first-child{padding-left:0} }
.fig .v{
  font-family:var(--font-mono); font-size:var(--t-xl); font-weight:500;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; display:block;
}
.fig .k{
  font-family:var(--font-ui); font-size:var(--t-xs); text-transform:uppercase;
  letter-spacing:.11em; color:var(--faint); margin-top:3px; display:block;
}

/* Prose lists */
.plain-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s-4)}
.plain-list li{padding-left:var(--s-5); position:relative; color:var(--muted); font-size:var(--t-sm); line-height:1.6}
.plain-list li::before{
  content:""; position:absolute; left:0; top:.72em; width:11px; height:1px; background:var(--madder);
}
.plain-list li strong{color:var(--ink); font-weight:600}

/* Two-column prose block, asymmetric by default */
.split{display:grid; grid-template-columns:1fr; gap:var(--s-6)}
@media(min-width:820px){
  .split{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--s-7); align-items:start}
  .split.split-narrow-first{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
}

/* ============================================================
   FAQ — native details/summary, glided open by main.js
   ============================================================ */
.faq{border-top:1px solid var(--line-hard)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:var(--s-4) 0;
  display:flex; align-items:flex-start; gap:var(--s-4);
  font-size:var(--t-lg); font-weight:600; line-height:1.35;
  min-height:44px; transition:color .18s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--madder)}
.faq-item summary .mk{
  flex:0 0 auto; width:15px; height:15px; margin-top:.34em; position:relative;
}
.faq-item summary .mk::before, .faq-item summary .mk::after{
  content:""; position:absolute; background:var(--madder); transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.faq-item summary .mk::before{left:0; right:0; top:7px; height:1.5px}
.faq-item summary .mk::after{top:0; bottom:0; left:7px; width:1.5px}
.faq-item[open] summary .mk::after{transform:rotate(90deg)}
.faq-item .faq-body{overflow:hidden}
.faq-item .faq-body > *{padding-bottom:var(--s-5)}
.faq-item p{color:var(--muted); font-size:var(--t-sm); line-height:1.65; max-width:var(--measure)}

/* ============================================================
   Footer
   ============================================================ */
/* Dark footer (owner, 2026-10-03): the night palette scoped to the footer, so every footer rule below keeps using
   the same tokens. Values are the corrected dark set from the token block (do not lower them). In dark mode it sits
   one step lighter than the page ground. check.py refuses a page whose last band is dark (two darks never touch).
   Contrast raised 2026-10-03 (owner: too low): links #E2DED6 ~13:1, labels #C9C3B8 ~10:1 on #1C1917. */
.site-footer{
  --paper:#1C1917; --ink:#F5F3EE; --ink-soft:#E6E2DA; --muted:#E2DED6; --faint:#C9C3B8;
  --line:#4A433D; --line-hard:#5A524B; --madder:#FF8B6B; --madder-dim:#FFA98E;
  color:var(--ink); padding:var(--s-7) 0 var(--s-6); background:var(--paper);
}
.site-footer ::selection{background:#FF8B6B; color:#1C1917}
.footer-grid{display:grid; grid-template-columns:1fr; gap:var(--s-6)}
@media(min-width:760px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:var(--s-6)} }
.footer-grid h5{
  font-family:var(--font-mono); font-size:.625rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.13em; color:var(--faint); margin-bottom:var(--s-3);
}
.footer-grid a{
  display:block; font-family:var(--font-ui); font-size:var(--t-sm); color:var(--muted);
  text-decoration:none; padding:5px 0; min-height:32px;
}
.footer-grid a:hover{color:var(--madder)}
.footer-legal{
  border-top:1px solid var(--line); margin-top:var(--s-6); padding-top:var(--s-4);
  font-family:var(--font-mono); font-size:var(--t-xs); color:var(--faint);
  display:flex; flex-wrap:wrap; gap:var(--s-4) var(--s-5); justify-content:space-between;
}

/* ============================================================
   MOTION EFFECTS
   Ported from the quietmindhealth.com reference implementation and
   retuned for this palette. Ground rules that came out of that
   build, kept verbatim because each one cost a review round:
     · every effect honours prefers-reduced-motion, in JS AND in the
       CSS fallback block at the end of this section
     · animate only transform / opacity / clip-path
     · never a CSS transform animation and a JS inline transform on
       the same element — use a wrapper for the JS half
     · no filter:blur() on large ambient layers; bake the softness
       into a multi-stop radial gradient instead
     · scroll-scrubbed beats time-based when a reveal must not be
       missed
   ============================================================ */

/* --- Staggered rise reveal (auto-applied by main.js) --- */
.rise{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--rise-delay, 0s);
}
.rise.in{opacity:1; transform:none}

/* --- Staggered word reveal on one headline per page --- */
.reveal-word{
  display:inline-block; opacity:0; transform:translateY(.36em);
  transition:opacity .62s cubic-bezier(.22,1,.36,1), transform .62s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--w-delay, 0s);
}
.reveal-word.in{opacity:1; transform:none}

/* --- Hand-drawn madder underline, once per page ---
   ⚠️ Watch descender collisions (g/j/p/q/y) at the end of the
   phrase — the underline sits close, and a trailing descender
   crosses it. Pick the phrase accordingly.
   ⚠️ Never place inside a headline carrying [data-reveal]; the word
   splitter rewrites innerHTML and destroys the SVG. */
.draw-line{position:relative; white-space:nowrap}
.draw-line svg{
  position:absolute; left:-2%; bottom:-.16em; width:104%; height:.34em;
  overflow:visible; pointer-events:none;
}
.draw-line path{
  fill:none; stroke:var(--madder); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100;
}
.draw-line.in path{transition:stroke-dashoffset .9s ease .25s; stroke-dashoffset:0}

/* --- Scroll-scrubbed curtain photo reveal ---
   The outer frame carries the border and shadow, because clip-path
   clips the element's own shadow away. */
.curtain-frame{border:1px solid var(--line); box-shadow:var(--shadow-soft); overflow:hidden}
.curtain{clip-path:inset(0 100% 0 0); overflow:hidden; display:block}
.curtain img{display:block; width:100%; transform:scale(1.12)}
.curtain-cap{
  font-family:var(--font-mono); font-size:var(--t-xs); color:var(--faint);
  padding:var(--s-3) var(--s-4); border-top:1px solid var(--line); background:var(--paper-2);
}

/* --- Aurora drift on the dark CTA band ---
   Softness from multi-stop gradient falloff, NOT filter:blur —
   large blurred surfaces silently fail on some GPU/driver combos. */
.band-ink{position:relative; overflow:hidden}
.band-ink > .container{position:relative; z-index:2}
.band-ink::before, .band-ink::after{
  content:""; position:absolute; z-index:1; border-radius:50%;
  width:50vw; height:50vw; min-width:440px; min-height:440px; pointer-events:none;
}
.band-ink::before{
  background:radial-gradient(circle, rgba(255,139,107,.30) 0%, rgba(255,139,107,.16) 30%, rgba(255,139,107,.06) 55%, transparent 72%);
  top:-32%; left:-10%;
  animation:band-glow-a 26s ease-in-out infinite alternate;
}
.band-ink::after{
  background:radial-gradient(circle, rgba(120,146,168,.26) 0%, rgba(120,146,168,.14) 30%, rgba(120,146,168,.05) 55%, transparent 72%);
  bottom:-36%; right:-12%;
  animation:band-glow-b 34s ease-in-out infinite alternate;
}
@keyframes band-glow-a{ to{ transform:translate(22vw, 9vh) scale(1.16); } }
@keyframes band-glow-b{ to{ transform:translate(-18vw, -7vh) scale(1.12); } }

/* --- Cursor spotlight, desktop pointers only --- */
@media (hover:hover) and (pointer:fine){
  .spot{position:relative; overflow:hidden}
  .spot::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
      color-mix(in srgb, var(--madder) 13%, transparent), transparent 62%);
    opacity:0; transition:opacity .3s ease;
  }
  .spot:hover::before{opacity:1}
  .spot > *{position:relative; z-index:1}
}

/* --- Reading progress bar (articles only) --- */
.progress-bar{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:90;
  background:var(--madder); transform:scaleX(0); transform-origin:left center;
  pointer-events:none;
}

/* --- The hook: the ESCAPE-TRD curve that separates --- */
.curve-band{background:#1C1917; color:#EFEDE7; padding:var(--s-band) 0; position:relative}
.curve-band .eyebrow{color:#B6B9B1}
.curve-band h2{color:#EFEDE7}
.curve-wrap{max-width:41rem}
.curve-lede{color:#B6B9B1; max-width:52ch; margin-bottom:var(--s-6)}
.curve-chart{width:100%; height:auto; display:block; overflow:visible}
#pEsk, #pQue{stroke-dasharray:var(--len); stroke-dashoffset:var(--len)}
.curve-chart .dot{opacity:0}
.curve-cap{
  font-family:var(--font-mono); font-size:var(--t-xs); line-height:1.65; color:#989C95;
  margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid #454C53;
}
.curve-cap b{color:#EFEDE7; font-weight:500}
.curve-cap em{color:#B6B9B1; font-style:italic}

/* --- Reduced motion: everything simply present. Non-negotiable —
   this audience includes people who report hidden content as a
   broken site, and a health property must never gate meaning on
   motion. --- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .rise{opacity:1; transform:none}
  .reveal-word{opacity:1; transform:none}
  .draw-line path{stroke-dashoffset:0}
  .curtain{clip-path:none}
  .curtain img{transform:none}
  .band-ink::before, .band-ink::after{animation:none}
  #pEsk, #pQue{stroke-dashoffset:0}
  .curve-chart .dot{opacity:1}
}

/* Same-origin page cross-fade in Chromium; ignored elsewhere. */
@view-transition{ navigation:auto; }

/* ============================================================
   BATCH 1 COMPONENTS (2026-09-20) — assembled by build/build.py.
   Patient-facing pages: plain layouts, rules and space, photos.
   ============================================================ */

/* Utilities used by page files */
.h-sec{margin:var(--s-3) 0 var(--s-5); max-width:26ch}
.muted{color:var(--muted)}
.lg{font-size:var(--t-lg); line-height:1.55}
.mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)}

/* Header: phone number + two-column Menu panel */
.hdr-phone{
  display:none; font-family:var(--font-mono); font-size:var(--t-sm); color:var(--ink);
  text-decoration:none; white-space:nowrap;
}
.hdr-phone:hover{color:var(--madder)}
@media(min-width:1180px){ .hdr-phone{display:inline} }
.menu-panel{min-width:34rem; grid-template-columns:1fr 1fr; column-gap:var(--s-4)}
.mp-col{display:flex; flex-direction:column; gap:2px}
.menu-panel .mp-col a[aria-current="page"]{background:var(--paper-2); color:var(--ink)}

/* Breadcrumb */
.crumbs{border-bottom:1px solid var(--line); background:var(--paper)}
.crumbs ol{
  list-style:none; margin:0; padding:10px 0; display:flex; flex-wrap:wrap; gap:2px 0;
  font-family:var(--font-mono); font-size:var(--t-xs); color:var(--faint);
}
.crumbs li + li::before{content:"/"; margin:0 .65em; color:var(--line-hard)}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--madder)}
.crumbs [aria-current]{color:var(--ink-soft)}

/* Hero: plain (text only) and photo (text + photo) */
.hero{padding:clamp(2.25rem, 1.25rem + 4vw, 4.75rem) 0 var(--s-band)}
.hero-grid{display:grid; gap:var(--s-6); grid-template-columns:1fr}
@media(min-width:900px){
  .hero-photo .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:var(--s-7); align-items:center}
}
.hero-copy h1{
  margin:var(--s-4) 0 var(--s-5); font-size:clamp(2rem, 1.45rem + 2.6vw, 3.5rem);
  line-height:1.07; max-width:18ch;
}
.hero-plain .hero-copy{max-width:46rem}
.hero-plain .hero-copy h1{max-width:24ch}
.lede{font-size:var(--t-lg); line-height:1.5; max-width:36rem}
.hero-more{color:var(--muted); margin-top:var(--s-4); max-width:34rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); align-items:center; margin-top:var(--s-6)}

/* Photos */
.photo{
  margin:0; position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--paper-3); aspect-ratio:var(--ratio, 4/3);
}
.photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 28%}
@media(max-width:899px){ .hero-fig{aspect-ratio:16/10} }
.photo-side{max-width:27rem}
@media(min-width:820px){ .split.split-center{align-items:center} }

/* Proof strip */
.proof{margin-top:var(--s-7)}
.stat-note{
  font-family:var(--font-mono); font-size:var(--t-xs); color:var(--faint);
  margin-top:var(--s-3); max-width:60rem; line-height:1.6;
}

/* CTA band */
.cta-split{align-items:center}
.band-cta h2{margin:var(--s-3) 0 var(--s-4)}
.band-cta p{max-width:48ch; color:var(--muted)}
.cta-actions{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); align-items:center}

/* Numbered steps */
.steps{list-style:none; margin:0; padding:0; counter-reset:step; border-top:1px solid var(--line-hard)}
.steps li{
  counter-increment:step; display:grid; grid-template-columns:2.4rem minmax(0,1fr);
  column-gap:var(--s-3); padding:var(--s-4) 0; border-bottom:1px solid var(--line);
}
.steps li::before{
  content:counter(step); font-family:var(--font-mono); font-size:var(--t-sm);
  font-weight:500; color:var(--madder); padding-top:.2em;
}
.steps li strong{display:block; font-weight:600}
.steps li span{grid-column:2; color:var(--muted); font-size:var(--t-sm); line-height:1.6}

/* Office cards */
.office-grid{display:grid; gap:var(--s-6) var(--s-5); grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr))}
.office-card{border-top:2px solid var(--ink); padding-top:var(--s-4); display:flex; flex-direction:column; gap:var(--s-3)}
.office-card h3{font-size:var(--t-xl)}
.office-card h3 a{color:var(--ink); text-decoration:none}
.office-card h3 a:hover{color:var(--madder)}
.oc-sub{font-family:var(--font-mono); font-size:.625rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint)}
.oc-note{font-size:var(--t-sm); color:var(--muted)}
.office-card address{font-style:normal; font-size:var(--t-sm); line-height:1.55}
.oc-hours-label{font-family:var(--font-mono); font-size:.625rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin:0 0 calc(-1 * var(--s-2))}
.oc-hours{list-style:none; margin:0; padding:0; font-size:var(--t-sm); color:var(--muted); line-height:1.65}
.oc-hours span{font-family:var(--font-mono); font-size:var(--t-xs); color:var(--ink-soft); display:inline-block; min-width:4.8em}
.oc-links{display:flex; gap:var(--s-4); margin:auto 0 0; padding-top:var(--s-2); font-family:var(--font-ui); font-size:var(--t-sm)}

/* Insurance block */
.ins-block{border:1px solid var(--line-hard); border-left:3px solid var(--madder); padding:var(--s-5); background:var(--paper)}
.ins-price{font-size:var(--t-2xl); font-weight:600; line-height:1.15; margin:var(--s-2) 0 var(--s-4)}
.ins-price .mono{color:var(--madder)}
.ins-block .cta-ghost{margin-top:var(--s-3)}

/* Big tap-to-call number */
.call-big{
  display:inline-block; font-family:var(--font-mono); font-size:var(--t-2xl); font-weight:500;
  color:var(--ink); text-decoration:none; letter-spacing:-.02em; border-bottom:2px solid var(--madder);
}
.call-big:hover{color:var(--madder)}

/* Lead form */
.form-card{background:var(--paper); border:1px solid var(--line-hard); padding:var(--s-6); box-shadow:var(--shadow-soft)}
.form-card h2{font-size:var(--t-xl); margin-bottom:var(--s-5)}
.lead-form{display:flex; flex-direction:column; gap:var(--s-5)}
.lf-grid{display:grid; gap:var(--s-4); grid-template-columns:1fr}
@media(min-width:560px){ .lf-grid{grid-template-columns:1fr 1fr} }
.lf-full{grid-column:1 / -1}
.lf-field label{display:block; font-family:var(--font-ui); font-size:var(--t-sm); font-weight:600; margin-bottom:6px}
.lf-field .req{color:var(--madder)}
.lf-field input, .lf-field select{
  width:100%; min-height:48px; padding:10px 12px; font-family:var(--font-ui); font-size:1rem;
  color:var(--ink); background:var(--paper); border:1px solid var(--line-hard); border-radius:var(--radius);
}
.lf-field input:focus, .lf-field select:focus{outline:2px solid var(--madder); outline-offset:1px; border-color:var(--madder)}
.lf-field input[aria-invalid="true"]{border-color:var(--madder); background:var(--madder-tint)}
.lf-more{border:1px solid var(--line); border-radius:var(--radius); padding:0 var(--s-4)}
.lf-more summary{
  cursor:pointer; min-height:48px; display:flex; align-items:center;
  font-family:var(--font-ui); font-size:var(--t-sm); font-weight:600;
}
.lf-more[open] summary{margin-bottom:var(--s-3)}
.lf-more .lf-grid{padding-bottom:var(--s-4)}
.lf-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.lf-consent{font-size:var(--t-xs); color:var(--muted); line-height:1.6; max-width:38rem}
.lead-form .cta{align-self:flex-start; border:1px solid var(--madder)}
.lf-status{min-height:1.5em; font-family:var(--font-ui); font-size:var(--t-sm); margin:0}
.lf-status[data-state="error"]{color:var(--madder-dim); font-weight:600}
.lf-status[data-state="ok"]{color:var(--ink-soft)}
/* clinician referral form, inside the "refer" CTA card (owner, 2026-10-12) */
.ref-form{align-self:stretch; display:flex; flex-direction:column; gap:var(--s-3); margin-top:var(--s-3)}
.ref-form[hidden]{display:none}
.ref-form .lf-field input{width:100%; max-width:none; box-sizing:border-box}
.ref-form .cta{align-self:flex-start; margin-top:var(--s-2)}
.ref-form .lf-status:empty{display:none}
.ref-done{margin-top:var(--s-3)}
.ref-done:focus{outline:none}
.ref-done-h{font-family:var(--font-text); font-size:var(--t-lg); font-weight:600; color:var(--madder-dim); margin:0 0 var(--s-2)}
.lead-form button[disabled]{opacity:.65; cursor:progress}

/* Footer additions */
.footer-blurb{font-size:var(--t-sm); color:var(--muted); max-width:32ch}
.footer-grid .footer-call a{display:inline-block; font-family:var(--font-mono); font-size:var(--t-lg); color:var(--ink); padding:2px 0; min-height:0}
.footer-call{margin-top:var(--s-3)}
.footer-crisis{font-size:var(--t-sm); color:var(--muted); margin-top:var(--s-2)}
.footer-grid .footer-crisis a{display:inline; padding:0; min-height:0; color:var(--madder)}
.footer-sisters{
  margin-top:var(--s-6); padding-top:var(--s-4); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:2px var(--s-5); align-items:baseline;
}
.footer-sisters h5{
  font-family:var(--font-mono); font-size:.625rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.13em; color:var(--faint); margin:0;
}
.footer-sisters a{font-family:var(--font-ui); font-size:var(--t-sm); color:var(--muted); text-decoration:none; padding:5px 0}
.footer-sisters a:hover{color:var(--madder)}
.footer-legal a{color:inherit}
.bottom-nav .bn-call{color:var(--madder); font-weight:600}

/* Preview-only helpers (never present in a --live build) */
.owner-flag{
  background:#FFF1A8; color:#3D2E00; padding:1px 6px; border-radius:3px;
  font-family:var(--font-mono); font-size:.85em; outline:1px dashed #B58900;
}
.stub-note{margin-top:var(--s-6); padding:var(--s-5); border:1px dashed var(--line-hard); background:var(--paper-2); max-width:44rem; font-size:var(--t-sm); color:var(--muted)}
.stub-note p + p{margin-top:var(--s-3)}

/* Phones: the bottom bar carries Call + Evaluation, so the header keeps only the brand */
@media (max-width:719px){
  .site-header .magnetic{display:none}
  .brand .bn{font-size:1.0625rem}
}

/* Tap targets: 44px minimum on touch layouts */
@media (max-width:899px){
  .footer-grid a, .footer-sisters a{min-height:44px; display:flex; align-items:center}
  .footer-grid .footer-call a, .footer-grid .footer-crisis a{display:inline-flex; min-height:44px; align-items:center}
  .oc-links a{display:inline-flex; align-items:center; min-height:44px}
  .call-big{display:inline-flex; align-items:center; min-height:44px}
  .brand{min-height:44px; justify-content:center}
}

/* ============================================================
   Patient registration (/get-started/) - posts to /snj-patient-reg/,
   the same Airtable table as the sibling sites' registration pages.
   ============================================================ */
.lf-field textarea{
  width:100%; min-height:96px; padding:10px 12px; font-family:var(--font-ui); font-size:1rem; line-height:1.5;
  color:var(--ink); background:var(--paper); border:1px solid var(--line-hard); border-radius:var(--radius); resize:vertical;
}
.lf-field textarea:focus{outline:2px solid var(--madder); outline-offset:1px; border-color:var(--madder)}
.lf-field textarea[aria-invalid="true"]{border-color:var(--madder); background:var(--madder-tint)}
.lf-hint{display:block; font-family:var(--font-ui); font-size:var(--t-xs); font-weight:400; color:var(--muted); margin-top:2px; line-height:1.5}
.reg-form{display:flex; flex-direction:column; gap:var(--s-6)}
.reg-form fieldset{border:0; border-top:1px solid var(--line-hard); padding:var(--s-5) 0 0; margin:0; min-width:0}
.reg-form legend{
  font-family:var(--font-text); font-size:var(--t-lg); font-weight:600; letter-spacing:-.01em;
  padding:0 var(--s-3) 0 0; color:var(--ink);
}
.reg-form legend .n{font-family:var(--font-mono); font-size:var(--t-sm); color:var(--madder); margin-right:var(--s-2)}
.reg-form .fs-note{font-size:var(--t-sm); color:var(--muted); margin:var(--s-2) 0 var(--s-4); max-width:44rem}
.lf-choices{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); margin:0; padding:0; border:0}
.lf-choices.stack{flex-direction:column; gap:var(--s-2)}
.lf-choices label{display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:400; margin:0; cursor:pointer}
.lf-choices input{width:20px; height:20px; min-height:0; accent-color:var(--madder); flex:none}
.lf-q{grid-column:1 / -1; padding:var(--s-3) 0; border-bottom:1px solid var(--line)}
.lf-q > .q{display:block; font-family:var(--font-ui); font-size:var(--t-sm); font-weight:600; margin-bottom:4px}
.lf-q[data-invalid="true"] > .q{color:var(--madder-dim)}
.lf-q[data-invalid="true"]{background:var(--madder-tint)}
.reg-cond[hidden]{display:none}
.reg-crisis{background:var(--madder-tint); border-left:3px solid var(--madder); padding:var(--s-4); font-size:var(--t-sm); margin-top:var(--s-4)}
.reg-form .cta{align-self:flex-start; border:1px solid var(--madder)}
.reg-form button[disabled]{opacity:.65; cursor:progress}

/* Data tables: office hours, drive times (Batch 3) */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.data-table{width:100%; border-collapse:collapse; font-family:var(--font-ui); font-size:var(--t-sm); font-variant-numeric:tabular-nums}
.data-table th, .data-table td{text-align:left; padding:10px 12px 10px 0; border-bottom:1px solid var(--line); vertical-align:top}
.data-table thead th{font-family:var(--font-mono); font-size:var(--t-xs); font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line-hard)}
.data-table tbody th{font-weight:600; color:var(--ink)}
.data-table td strong{color:var(--madder-dim); font-weight:600}
/* the one row that matters most (owner, 2026-10-12): bigger, bold, madder, on a tint */
.data-table tr.row-key > *{font-size:var(--t-base); font-weight:600; color:var(--madder-dim); background:var(--madder-tint); padding-top:14px; padding-bottom:14px}
.data-table tr.row-key > th{padding-left:12px}
.hours-table{max-width:24rem}
.hours-table tr.closed td, .hours-table tr.closed th{color:var(--faint, var(--muted)); font-weight:400}
.table-note{font-size:var(--t-xs); color:var(--muted); margin-top:var(--s-3); max-width:40rem}
.nearby-list{list-style:none; margin:0; padding:0; display:grid; gap:0 var(--s-5); grid-template-columns:1fr}
@media(min-width:560px){ .nearby-list{grid-template-columns:1fr 1fr} }
.nearby-list li{display:flex; justify-content:space-between; gap:var(--s-3); padding:10px 0; border-bottom:1px solid var(--line); font-family:var(--font-ui); font-size:var(--t-sm)}
.nearby-list .mono{font-family:var(--font-mono); color:var(--muted)}
.office-grid.office-grid-one{grid-template-columns:1fr; max-width:26rem}

/* Real Google review excerpts (verbatim, no names; each links to the original review) */
.quote-grid{display:grid; gap:var(--s-5); grid-template-columns:1fr; margin-top:var(--s-5)}
@media(min-width:720px){ .quote-grid{grid-template-columns:1fr 1fr} }
.quote-card{margin:0; padding:var(--s-5); background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--madder)}
.quote-card blockquote{margin:var(--s-2) 0 var(--s-3)}
.quote-card blockquote p{font-size:var(--t-lg); line-height:1.5; color:var(--ink)}
.quote-card figcaption{font-family:var(--font-ui); font-size:var(--t-xs); color:var(--muted)}
.quote-card .eyebrow{margin-bottom:0}

/* ============================================================
   2026-10-03 owner picks from the "connections" ideas:
   #1 synapse field (dark band, right quarter), #5 treatment-course
   diagram, #7 cursor glow on CTAs. All decorative layers are
   aria-hidden; all motion stops under prefers-reduced-motion.
   ============================================================ */

/* #1 — dark band; a field of nodes beside the heading assembles into a brain (owner, 2026-10-03) */
.synapse-head{display:grid; gap:var(--s-5); grid-template-columns:1fr; align-items:center; margin-bottom:var(--s-6)}
@media(min-width:720px){ .synapse-head{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:var(--s-6)} }
/* the brain is a photograph (StockCake CC0) on black: screen-blended onto the band colour and feathered at the
   edges so it has no box; the canvas on top only adds light (main.js initSynapse) */
.synapse-brain{position:relative; width:100%; aspect-ratio:3 / 2; max-width:680px; justify-self:end; pointer-events:none; background:#1C1917;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 46%, #000 52%, transparent 100%); mask-image:radial-gradient(ellipse 50% 50% at 50% 46%, #000 52%, transparent 100%)}
.synapse-brain img, .synapse-brain canvas{position:absolute; inset:0; display:block; width:100%; height:100%}
.synapse-brain img{mix-blend-mode:screen; filter:contrast(1.18) brightness(calc(.62 + .32 * var(--bloom, 1))) saturate(calc(.25 + .75 * var(--bloom, 1))); transition:opacity 1.8s ease, transform 2.6s cubic-bezier(.2,.7,.2,1)}
.synapse-brain.is-pending img{opacity:0; transform:scale(1.05)}
.synapse-brain.is-on img{opacity:1; transform:none}
.band-synapse{background:#1C1917; color:#EFEDE7; padding:var(--s-band) 0; position:relative; overflow:hidden}
.band-synapse > .container{position:relative; z-index:2}
.band-synapse h1, .band-synapse h2, .band-synapse h3{color:#EFEDE7}
.band-synapse p, .band-synapse .lg{color:#EFEDE7}
.band-synapse p.muted, .band-synapse .muted{color:#B6B9B1}
.band-synapse .eyebrow{color:#B6B9B1}
.band-synapse .rail{border-color:#2E343A}
.band-synapse .ref{color:#B6B9B1}
.band-synapse .ref .n{color:#FF8B6B}
.band-synapse sup.rm{color:#FF8B6B}

/* Shared by the treatment-schedule graphic (.dose-compare, below) */
.vc-title{font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.vc-sub{font-size:var(--t-sm); color:var(--muted); margin:var(--s-1) 0 var(--s-4)}
.vc-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px}
.vc-dow{font-family:var(--font-mono); font-size:10px; color:var(--muted); text-align:center}

/* #7 — a soft glow that blooms from the cursor on CTAs, plus one ripple on click */
.cta{position:relative; overflow:hidden; isolation:isolate}
.cta::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:var(--gx,50%); top:var(--gy,50%); width:220px; height:220px; border-radius:50%;
  transform:translate(-50%,-50%) scale(.2); opacity:0;
  background:radial-gradient(circle, rgba(255,214,190,.55) 0%, rgba(255,214,190,.18) 35%, transparent 65%);
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.cta:hover::before{transform:translate(-50%,-50%) scale(1); opacity:1}
.cta-ripple{position:absolute; z-index:-1; pointer-events:none; border-radius:50%; width:16px; height:16px;
  transform:translate(-50%,-50%) scale(0); background:rgba(255,236,224,.55); animation:cta-ripple .6s ease-out forwards}
@keyframes cta-ripple{to{transform:translate(-50%,-50%) scale(18); opacity:0}}
@media (prefers-reduced-motion: reduce){ .cta::before{transition:none} .cta-ripple{display:none} }
@media(max-width:639px){ .course{overflow-x:auto; -webkit-overflow-scrolling:touch} .course svg{min-width:600px} }

/* ============================================================
   Blog posts (layout: article in build.py), the blog index, and the 404 link list
   ============================================================ */
.post-col{max-width:46rem}
.post-head h1{margin-top:var(--s-3); max-width:24ch}
.post-head .lede{margin-top:var(--s-4)}
.post-meta{margin-top:var(--s-5); font-family:var(--font-ui); font-size:var(--t-sm); color:var(--muted); line-height:1.6}
.post-meta a{color:inherit}
.post-fig{margin-top:var(--s-6); max-width:46rem}
.prose > * + *{margin-top:var(--s-4)}
.prose h2{font-size:var(--t-xl); margin-top:var(--s-7); scroll-margin-top:calc(var(--header-h) + var(--s-4))}
.prose h3{font-size:var(--t-lg); margin-top:var(--s-6)}
.prose ul, .prose ol{padding-left:1.25rem}
.prose li + li{margin-top:var(--s-2)}
.prose .unknown{margin-top:var(--s-5)}
.post-toc{margin-bottom:var(--s-6); padding:var(--s-4) var(--s-5); border-left:2px solid var(--madder); background:var(--paper-2)}
.post-toc ol{margin:var(--s-2) 0 0; padding-left:1.25rem; font-family:var(--font-ui); font-size:var(--t-sm)}
.post-toc li + li{margin-top:var(--s-1)}
.post-sources{font-size:var(--t-sm); color:var(--muted)}
.post-sources li{scroll-margin-top:calc(var(--header-h) + var(--s-4))}
.related-list{margin-top:var(--s-4)}
.related-list a{font-size:var(--t-lg)}
.post-list{list-style:none; margin:0; padding:0; max-width:46rem; border-top:1px solid var(--line-hard)}
.post-item{padding:var(--s-5) 0; border-bottom:1px solid var(--line-hard)}
.post-item-meta{font-size:var(--t-xs); color:var(--muted)}
.h-item{font-size:var(--t-xl); margin:var(--s-2) 0}
.h-item a{color:var(--ink); text-decoration:none}
.h-item a:hover, .h-item a:focus-visible{color:var(--madder); text-decoration:underline}
.post-item p:last-child{color:var(--muted)}
.link-list{list-style:none; margin:0; padding:0; max-width:40rem; border-top:1px solid var(--line-hard)}
.link-list li{border-bottom:1px solid var(--line-hard)}
.link-list a{display:block; padding:var(--s-4) 0; min-height:44px; font-family:var(--font-ui); font-weight:600; color:var(--ink); text-decoration:none}
.link-list a span{display:block; margin-top:2px; font-family:var(--font-text); font-weight:400; font-size:var(--t-sm); color:var(--muted)}
.link-list a:hover, .link-list a:focus-visible{color:var(--madder)}

.site-footer .footer-grid h5, .site-footer .footer-sisters h5{font-size:.6875rem}

/* CTA band: the intent's own lead, then the two standard ways to start (owner, 2026-10-03: every page offers the
   quick coverage check AND the evaluation). Cards, not a button row, so each offer says what it costs you in time. */
@media(min-width:900px){ .band-cta .cta-split{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)} }
.cta-offers{display:flex; flex-direction:column; gap:var(--s-4)}
.offers{display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr))}
.offer{display:flex; flex-direction:column; gap:var(--s-2); align-items:flex-start;
  background:var(--paper); border:1px solid var(--line-hard); border-top:3px solid var(--madder); padding:var(--s-4) var(--s-5) var(--s-5)}
.offer + .offer{border-top-color:var(--line-hard)}
.band-cta .offer p{font-size:var(--t-sm); line-height:1.55; color:var(--muted); margin:0 0 var(--s-2); max-width:none}
.offer .cta{margin-top:auto}
.offer-kick{font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.offer-lead{display:flex; flex-direction:column; gap:var(--s-1)}
.offer-lead .cta-actions{gap:var(--s-2) var(--s-5)}
.cta.cta-outline{background:transparent; color:var(--madder)}
.cta.cta-outline:hover{background:var(--madder); color:#FFFFFF}
:root[data-theme="dark"] .cta.cta-outline{color:var(--madder)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cta.cta-outline{color:var(--madder)} }
:root[data-theme="dark"] .cta.cta-outline:hover{color:#14161A}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cta.cta-outline:hover{color:#14161A} }

/* The treatment schedule, one graphic (owner, 2026-10-03): a daily antidepressant on the left, the same 28 pills every
   month; Spravato that month on the right, a sunburst on each treatment day. main.js initDoseCompare steps month 1 ->
   2 -> 3+ every few seconds once it's in view, and re-pops the Spravato days on each step (no pop under reduced
   motion; the stepping itself continues). Without JS: month 1 only, and the buttons are hidden. */
.dose-compare{margin-top:var(--s-6)}
.dc-tabs{display:none; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-4)}
.dc-js .dc-tabs{display:flex}
.dc-tab{font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase;
  padding:8px 14px; min-height:40px; border-radius:999px; border:1px solid var(--line-hard); background:var(--paper);
  color:var(--ink-soft); cursor:pointer; position:relative; overflow:hidden}
.dc-tab[aria-pressed="true"]{border-color:var(--madder); color:var(--madder)}
.dc-play{margin-left:auto; font-family:var(--font-ui); font-size:var(--t-xs); color:var(--muted); background:none; border:0;
  padding:8px 4px; min-height:40px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.dc-play:hover{color:var(--madder)}
.dc-tab[aria-pressed="true"]::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--madder)}
.dc-auto .dc-tab[aria-pressed="true"]::after{animation:dc-fill var(--dc-step, 4.5s) linear forwards}
@keyframes dc-fill{to{width:100%}}
/* side by side at every width: the contrast IS the message, so the two panels never stack */
.dc-panels{display:grid; gap:var(--s-5); grid-template-columns:repeat(2, minmax(0,1fr))}
.dc-panel{margin:0; border:1px solid var(--line-hard); background:var(--paper); padding:var(--s-5)}
.dc-panel, .dc-stage:not([hidden]){display:flex; flex-direction:column}
.dc-stage{flex:1}
.dc-panel .vc-grid{margin-top:auto}   /* grids line up even when one title wraps */
.dc-panel .vc-title{display:block; line-height:1.45}
.dc-count{font-family:var(--font-ui); font-size:var(--t-sm); color:var(--ink); margin:var(--s-2) 0 0}
.dc-n{font-family:var(--font-text); font-size:2.6rem; font-weight:600; line-height:1; margin-right:4px; font-variant-numeric:tabular-nums}
.dc-daily .dc-n{color:var(--ink-soft)}
.dc-spravato .dc-n{color:var(--madder)}
.dc-panel .vc-sub{margin:var(--s-1) 0 var(--s-4); min-height:2.9em}
.dc-stage[hidden]{display:none}
.dc-cell{aspect-ratio:1; border-radius:50%; display:grid; place-items:center}
.dc-cell svg{width:78%; height:78%}
.dc-pill, .dc-off{background:var(--paper-2); border:1px solid var(--line)}
.dc-pill .pill-a{fill:#FFFFFF; stroke:var(--faint); stroke-width:1.2}
.dc-pill .pill-b{fill:var(--faint)}
.dc-on{background:var(--madder); border:1px solid var(--madder)}
.dc-maybe{background:transparent; border:1.5px dashed var(--madder)}
.dc-on .sun-c{fill:#FFFFFF}
.dc-on .sun-r{stroke:#FFFFFF; stroke-width:1.9; stroke-linecap:round; fill:none}
:root[data-theme="dark"] .dc-pill .pill-a{fill:#2E343A}
:root[data-theme="dark"] .dc-on .sun-c{fill:#14161A}
:root[data-theme="dark"] .dc-on .sun-r{stroke:#14161A}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dc-pill .pill-a{fill:#2E343A}
  :root:not([data-theme="light"]) .dc-on .sun-c{fill:#14161A}
  :root:not([data-theme="light"]) .dc-on .sun-r{stroke:#14161A}
}
.dc-eff-cell{background:var(--paper-2); border:1px solid var(--line)}
.dc-eff-cell svg{width:70%; height:70%}
.eff-i, .eff-i *{fill:none; stroke:var(--faint); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.dc-effects-mode .dc-on .sun-c{fill:#FFFFFF}
.dc-effects-mode .dc-on svg{width:70%; height:70%}
.dc-effects-mode .dc-on .sun-r{stroke-width:1.7; stroke-linejoin:round}
.dc-effects{min-height:6em; margin:var(--s-4) 0 0; padding-top:var(--s-3); border-top:1px solid var(--line); font-size:var(--t-sm); line-height:1.5; color:var(--ink-soft)}
.dc-eff-k{display:block; font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:2px}
.dc-effects-good{color:var(--ink)}
.dc-effects-good .dc-eff-k{color:var(--madder)}
.dc-pop .dc-spr{animation:dc-pop .45s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i) * 110ms)}
.dc-pop .dc-n{animation:dc-fade .4s ease both}
@keyframes dc-pop{from{opacity:0; transform:scale(.3)}}
@keyframes dc-fade{from{opacity:0; transform:translateY(4px)}}
@media (prefers-reduced-motion: reduce){ .dc-pop .dc-spr, .dc-pop .dc-n{animation:none} }
@media(max-width:719px){
  .dc-panels{gap:var(--s-2)}
  .dc-panel{padding:var(--s-3) var(--s-2)}
  .dc-panel .vc-grid{gap:3px}
  .dc-panel .vc-dow{font-size:9px}
  .dc-panel .vc-title{font-size:9px; letter-spacing:.03em}
  .dc-n{font-size:1.9rem}
  .dc-panel .vc-sub{font-size:var(--t-xs); min-height:4.2em}
  .dc-cell svg{width:86%; height:86%}
}

/* One real patient review as a pull quote (home, owner 2026-10-03) */
.pull-quote{margin:0 auto; max-width:46rem; text-align:center}
.pull-quote blockquote{margin:0}
.pull-quote blockquote p{font-family:var(--font-text); font-size:clamp(1.35rem, 1.1rem + 1.2vw, 2rem); line-height:1.4; color:var(--ink)}
.pull-quote blockquote p::before{content:"\201C"; display:block; font-size:3.5rem; line-height:.6; margin-bottom:var(--s-3); color:var(--madder)}
.pull-quote figcaption{margin-top:var(--s-5); font-family:var(--font-ui); font-size:var(--t-xs); color:var(--muted)}

@media(max-width:719px){ .dc-effects{min-height:8.5em; margin-top:var(--s-3); padding-top:var(--s-2); font-size:var(--t-xs)} .dc-eff-k{font-size:9px; letter-spacing:.03em} }