/* ============================================================
   Whole Self Counseling — warm modern boutique
   ============================================================
   Design intent, v2: the page should feel like walking into a
   well-designed Nashville practice — warm, confident, layered,
   photograph-forward. Teal and cream-warm are real brand presence
   now, not rare accents. Section-label-left / hairline-divider
   editorial grid is retired as the default (it's what made the
   old system read as "essay" instead of "practice"), but it is
   still in active use on pages not yet propagated to v2 — see
   the "Legacy editorial primitives" comment below before deleting
   anything with .cols-2-8, .col-label, .hero-meta, .from-room,
   .pullquote, .philosophy, .influences, .list-dash, .list-clean,
   .faq/.faqs, .closing, or bare .label in it.
   ============================================================ */

/* --- Tokens --- */

:root {
  /* Color: cream-dominant, ink-warm, teal-as-real-brand-presence */
  --cream:        #f5f0e3;
  --cream-warm:  #efe6d1;   /* warmer/deeper alternation tone — cards, alternating sections */
  --cream-deep:  #ece4cf;   /* subtle alt for footer / table stripes (legacy) */
  --cream-on-teal: #f7f1e2; /* text-on-teal — very slightly warmer than base cream */
  --ink:          #1f1d1a;   /* warm near-black for headings */
  --ink-body:    #3a362f;   /* warm dark grey for prose */
  --ink-muted:   #6a6459;   /* warm grey for labels & meta — darkened from #6e685c for WCAG AA on cream-deep (footer) */
  --ink-soft:    #847f74;   /* lightest tier — darkened from #9d978a; still fails AA for small text, so only used for large/decorative marks (list ordinals, dash bullets) */
  --teal:         #004466;   /* primary brand color — used liberally: sections, buttons, labels */
  --teal-deep:   #003049;   /* hover / pressed state, text-on-cream */
  --olive:        #737b21;   /* reserved for the crisis block + rare accent moments */
  --plum:         #7c1a56;   /* reserved: ONLY the two .pullquote--plum statements (homepage + About). Nothing else. */
  --rule:         rgba(31, 29, 26, 0.14);
  --rule-strong: rgba(31, 29, 26, 0.28);

  /* Type */
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Helvetica, Arial, sans-serif;

  /* Type scale — generous, fluid */
  --t-xs:   0.75rem;     /* 12 — labels */
  --t-sm:   0.875rem;    /* 14 — meta */
  --t-base: 1.0625rem;   /* 17 — body */
  --t-lg:   1.1875rem;   /* 19 — lead body */
  --t-xl:   1.4375rem;   /* 23 — subheads, large body */
  --t-2xl:  1.875rem;    /* 30 */
  --t-3xl:  2.5rem;      /* 40 — section headings (legacy scale) */
  --t-4xl:  3.25rem;     /* 52 — large headings (legacy scale) */
  --t-hero: clamp(2.25rem, 5.5vw + 0.5rem, 5.25rem); /* legacy hero scale, still used by non-propagated pages' .h-hero if any appear later */

  /* v3 scale — restrained on purpose: "confident but not shouting."
     Section headings reuse the existing .h-section scale (already ~28-40px,
     which is what "around 2rem" asks for) rather than a new token. */
  --t-hero-name: clamp(2.25rem, 3vw, 3rem); /* ~36px -> 48px — her name in the hero */

  /* Space scale */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  5.5rem;
  --s-10: 7rem;
  --s-11: 9rem;
  --s-12: 12rem;  /* between major sections */

  /* Measure (line length) */
  --measure: 36rem;       /* ~62ch on most fonts — quite long, very readable */
  --measure-narrow: 28rem;
  --measure-wide: 44rem;

  /* Motion */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --slow: 700ms;
  --med:  420ms;
}

/* --- Reset --- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

a {
  color: var(--teal);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--med) var(--ease);
}
a:hover { color: var(--teal-deep); text-decoration: underline; text-decoration-color: var(--teal-deep); }

button { font: inherit; cursor: pointer; }

::selection { background: var(--teal); color: var(--cream); }

/* --- Focus visibility ---
   One consistent keyboard-focus ring, site-wide. :focus-visible keeps
   it out of the way for mouse/touch clicks while guaranteeing every
   interactive element shows it on keyboard focus. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* --- Skip link --- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: 0.6rem 1rem;
  font-size: var(--t-sm);
  z-index: 999;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- Layout primitives --- */

.wrap {
  width: 100%;
  max-width: 72rem;       /* 1152 */
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.measure { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }
.measure-wide { max-width: var(--measure-wide); }

section { position: relative; }

.section {
  padding-block: clamp(4.5rem, 9vw, var(--s-12));
}

.section-tight { padding-block: clamp(3rem, 6vw, var(--s-10)); }

.divider {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* --- Typography --- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.012em;
  font-feature-settings: "kern", "liga", "calt";
}

.h-hero {
  font-size: var(--t-hero);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 22ch;
}
.h-hero em { font-style: italic; }

/* Page-hero H1s and sub-page closing headings both use this class, so one
   rule puts every inner page's title in deep teal (9.1:1 on cream — AAA at
   normal text size, well clear at display size). The homepage hero uses
   .h-name instead and is deliberately left ink; see that rule. */
.h-display {
  font-size: clamp(2rem, 4.5vw, var(--t-4xl));
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 22ch;
  color: var(--teal);
}

/* Section headings sit in deep teal — the large serif line under each
   small section label. 9.1:1 on cream and 8.4:1 on cream-warm (AAA at
   normal text size, so comfortably clear at heading size). Page-hero
   h1s (.h-display / .h-name) stay ink; this is section-level only. */
.h-section {
  font-size: clamp(1.75rem, 3.5vw, var(--t-3xl));
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 22ch;
  color: var(--teal);
}

.h-sub {
  font-size: var(--t-xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 500;
}

.lede {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.8vw, var(--t-xl));
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  max-width: var(--measure);
}

p {
  margin: 0 0 1em 0;
  max-width: var(--measure);
}

p + p { margin-top: 1em; }

.prose p {
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--ink-body);
}

.prose p:last-child { margin-bottom: 0; }

/* Section label — small caps, restrained */
.label {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.label::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--ink-muted);
}

.label.no-rule::before { display: none; }

/* Numbered service labels ("01 · Individual" on the Services page) —
   teal, matching the service names they sit above. */
.label-accent { color: var(--teal); }
.label-accent::before { background: var(--teal); }

/* The space between label and heading */
.label + .h-section,
.label + .h-display,
.label + .h-hero {
  margin-top: 1.5rem;
}

/* The space between heading and following content */
.h-section + .lede,
.h-display + .lede,
.h-hero + .lede,
.h-section + p,
.h-display + p,
.h-hero + p {
  margin-top: 1.75rem;
}

.lede + p,
.lede + .prose,
.prose + .lede {
  margin-top: 1.5rem;
}

/* --- Header --- */

.site-header {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: rgba(245, 240, 227, 0.94);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  z-index: 50;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

.wordmark {
  font-family: var(--font-serif);
  color: var(--teal);
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.wordmark:hover { color: var(--ink); }
.wordmark .name { font-style: normal; }
.brand-mark { height: 28px; width: auto; display: block; }
.wordmark .sep {
  color: var(--ink-soft);
  font-size: 0.85em;
}
.wordmark .city {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.nav-primary a {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-body);
  letter-spacing: 0.005em;
  text-decoration: none;
}

.nav-primary a:hover,
.nav-primary a[aria-current="page"] {
  color: var(--teal);
}

.nav-primary .cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 0.5rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--teal);
  color: var(--teal);
  border-radius: 999px;
  font-size: var(--t-sm);
  transition: background var(--med) var(--ease), color var(--med) var(--ease);
}
.nav-primary .cta:hover {
  background: var(--teal);
  color: var(--cream);
}

/* Mobile menu */
.menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 44px;            /* touch target */
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 860px) {
  /* THE actual overlay bug: .site-header carries backdrop-filter, and any
     element with backdrop-filter/filter/transform becomes the containing
     block for its position:fixed descendants. .nav-primary lives inside
     the header, so "position: fixed; inset: 0" was resolving against the
     ~80px header box instead of the viewport — which is exactly why page
     content showed through (the overlay only ever covered the header
     strip) and why the first item was clipped (a 6rem top padding inside
     an 80px box pushes it out of view). Dropping the blur at mobile
     widths restores the viewport as the containing block. An earlier fix
     changed justify-content and added overflow here, which addressed the
     symptom but not this cause — hence it still failed on device. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--cream);
  }

  .nav-primary {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--cream);   /* fully opaque — no alpha */
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6rem clamp(2rem, 8vw, 4rem) clamp(2rem, 8vw, 4rem);
    gap: 1.25rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform var(--slow) var(--ease);
    z-index: 60;
  }
  .nav-primary.open { transform: translateX(0); }
  .nav-primary a {
    font-family: var(--font-serif);
    font-size: var(--t-2xl);
    line-height: 1.2;
    color: var(--ink);
    padding-block: 0.5rem;   /* >=44px touch target on the large serif links */
  }
  /* Filled teal, matching .btn-primary everywhere else — the shared
     .nav-primary .cta rule above is an outline treatment tuned for the
     desktop header bar, which read as a secondary/ghost button here. */
  .nav-primary .cta {
    margin-left: 0;
    margin-top: 1rem;
    font-family: var(--font-sans);
    font-size: var(--t-base);
    background: var(--teal);
    color: var(--cream);
    border-color: var(--teal);
    box-shadow: 0 8px 20px rgba(0, 68, 102, 0.18);
  }
  .nav-primary .cta:hover {
    background: var(--teal-deep);
    border-color: var(--teal-deep);
    color: var(--cream);
  }
  /* Sits above the overlay (60) inside the header's stacking context, and
     is the same element in the same header slot as the hamburger — so the
     × lands exactly where the hamburger was. */
  .menu-toggle { display: inline-flex; z-index: 70; position: relative; }

  body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
  }
}

/* --- Buttons / inline CTAs --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 44px;          /* touch target */
  padding: 0.85rem 1.4rem;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--med) var(--ease), color var(--med) var(--ease), border-color var(--med) var(--ease);
  letter-spacing: 0.005em;
}

.btn-primary {
  background: var(--teal);
  color: var(--cream);
  border-color: var(--teal);
  box-shadow: 0 8px 20px rgba(0, 68, 102, 0.18);
}
.btn-primary:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: var(--cream);
  box-shadow: 0 10px 24px rgba(0, 68, 102, 0.24);
}

.btn-ghost {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
}
.btn-ghost:hover {
  background: var(--teal);
  color: var(--cream);
}

.btn .arrow { transition: transform var(--med) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Inline link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link-arrow:hover { color: var(--teal-deep); text-decoration: none; }
.link-arrow .arrow { transition: transform var(--med) var(--ease); }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* --- Hero: contained, ordinary document flow, no full-bleed and no color
   panel. Just her portrait beside her name. This is the third hero attempt —
   the first two failed on overflow (full-bleed + vh-driven centering could
   push content under the sticky header) and on shouting type. Neither
   failure mode is structurally possible here: the photo is capped in px
   (not vw, so it can't outgrow tiffany-hero.jpg's 684x1024 source), the
   whole thing sits inside .wrap at ordinary padding, and nothing is
   vertically centered in an oversized box. --- */

.hero { padding-block: clamp(3rem, 6vw, 5rem); }

.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 760px) {
  .hero-split {
    grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  }
}

.hero-photo-col img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.hero-copy .band-label { margin-bottom: 1rem; }

.h-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-hero-name);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.hero-credentials {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  color: var(--ink-muted);
  margin-top: 0.6rem;
}

.hero-copy .lede {
  margin-top: 1.5rem;
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-style: normal;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

.hero-meta {
  margin-top: clamp(4rem, 7vw, 6rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 1.5rem;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  color: var(--ink-muted);
}
.hero-meta > div {
  display: grid;
  gap: 0.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.hero-meta > div:first-child {
  padding-top: 0;
  border-top: 0;
}
.hero-meta dt {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted); /* was --ink-soft — real label text (2.55:1) needs the AA-passing tier */
}
.hero-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-base);
  font-family: var(--font-serif);
  line-height: 1.5;
}
@media (min-width: 640px) {
  .hero-meta > div {
    grid-template-columns: minmax(150px, 200px) 1fr;
    align-items: baseline;
    gap: 0.5rem 2rem;
  }
}

/* --- Two-column section: label on left, content on right (desktop) --- */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

@media (min-width: 860px) {
  .cols-2-8 {
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 4fr);
    gap: clamp(2rem, 5vw, 5rem);
  }
  .cols-1-1 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .cols-3-2 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
}

/* Section labels stick beside the content on desktop only.
   On mobile they render inline above each section (static). */
@media (min-width: 860px) {
  .cols .col-label .label {
    position: sticky;
    top: calc(var(--s-9) + var(--s-2));
  }
}

/* --- Lists --- */

ul, ol { margin: 0; padding: 0; }

.list-clean {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  max-width: var(--measure-wide);
}

.list-clean li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--ink);
}

.list-clean li:first-child { border-top: 1px solid var(--rule); }

.list-clean .num {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  padding-top: 0.45rem;
  font-variant-numeric: tabular-nums;
}

.list-clean .desc {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 0.25rem;
}

/* Two-column variant on wide screens for long lists */
@media (min-width: 720px) {
  .list-clean.cols-2 {
    column-count: 2;
    column-gap: 3rem;
  }
  .list-clean.cols-2 li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
}

/* Plain bulleted-style list with em-dash */
.list-dash {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  max-width: var(--measure-wide);
}
.list-dash li {
  position: relative;
  padding-left: 1.75rem;
  padding-block: 0.5rem;
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--ink);
}
.list-dash li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-soft);
}

/* --- Pull quote --- */

.pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  line-height: 1.3;
  color: var(--ink);
  max-width: 28ch;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Plum is reserved for exactly two moments on the whole site: the
   homepage inclusive statement and the About page's "a line I return to."
   Nothing else uses it — deliberately a modifier rather than a change to
   .pullquote itself, since other pullquotes exist and must stay ink. */
.pullquote--plum { color: var(--plum); }

.pullquote-block {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 1.25rem;
}

.pullquote-source {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- Services list (homepage) --- */

.services {
  margin-top: 2.5rem;
}

.service-row {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: single column, number above */
  align-items: start;
  gap: 0.5rem;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--rule);
}

.service-row:last-child { border-bottom: 1px solid var(--rule); }

.service-row .num {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  padding-top: 0;
  font-variant-numeric: tabular-nums;
}

.service-row .body { display: grid; gap: 0.75rem; }

.service-row h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 1.8vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--teal);
  margin: 0;
}
.service-row p {
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0;
  max-width: 56ch;
}

.service-row .link-arrow { margin-top: 0.25rem; }

@media (min-width: 720px) {
  .service-row {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }
  .service-row .num { padding-top: 0.6rem; }
}

@media (min-width: 860px) {
  .service-row {
    grid-template-columns: 4rem minmax(0, 1fr) auto;
  }
  .service-row .link-arrow {
    align-self: end;
    justify-self: end;
    margin-top: 0;
  }
}

/* --- Anchors & deep-link services pages --- */

.anchor-target {
  scroll-margin-top: 6rem;
}

/* --- About / philosophy blocks --- */

.philosophy {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

.philosophy article {
  display: grid;
  gap: 0.75rem;
  max-width: var(--measure);
}

.philosophy h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

.philosophy h3::before {
  content: "—";
  color: var(--ink-soft);
  margin-right: 0.5rem;
}

.philosophy p {
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--ink-body);
  margin: 0;
}

/* --- Influences (approach page) --- */

.influences {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2rem;
}

@media (min-width: 720px) {
  .influences { grid-template-columns: repeat(2, 1fr); }
}

.influence {
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--rule);
}

.influence .label {
  margin: 0 0 0.6rem 0;
}

.influence h3 {
  font-family: var(--font-serif);
  font-size: var(--t-xl);
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 0.5rem 0;
}
.influence p {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}

/* --- FAQ accordion (native) --- */

.faqs { margin-top: 2.5rem; }

.faq {
  border-top: 1px solid var(--rule);
  padding: 1.25rem 0;
}
.faq:last-child { border-bottom: 1px solid var(--rule); }

.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1.5rem;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.8vw, var(--t-xl));
  line-height: 1.25;
  font-weight: 400;
  color: var(--ink);
  padding: 0.8rem 0;        /* >=44px touch target */
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: 1.5rem;
  color: var(--ink-muted);
  transition: transform var(--med) var(--ease), color var(--med) var(--ease);
  line-height: 1;
  font-weight: 300;
}
.faq[open] summary::after {
  transform: rotate(45deg);
  color: var(--teal);
}

.faq-body {
  padding: 1rem 0 0.5rem 0;
  max-width: var(--measure);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--ink-body);
}
.faq-body p { margin: 0 0 1em 0; }
.faq-body p:last-child { margin-bottom: 0; }

/* --- Essays / resources --- */

.essays {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 2.5rem;
}

.essay {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
}
.essay:last-child { border-bottom: 1px solid var(--rule); }

.essay .meta {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  gap: 1rem;
  align-items: baseline;
}

.essay h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.essay p {
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 62ch;
  margin: 0.25rem 0 0;
}

@media (min-width: 720px) {
  .essay { grid-template-columns: 9rem minmax(0, 1fr); gap: 2.5rem; }
  .essay .meta { flex-direction: column; gap: 0.25rem; }
}

/* --- Audience list (who you might recognize yourself in) --- */

.audience {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 2rem;
  max-width: 46rem;
}

.audience li {
  list-style: none;
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--ink);
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}
.audience li:last-child { border-bottom: 1px solid var(--rule); }

/* --- Contact / form --- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 860px) {
  .contact-grid { grid-template-columns: 5fr 7fr; }
}

.contact-details {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.contact-detail dt {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}
.contact-detail dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--ink);
}

.form {
  display: grid;
  gap: 1.5rem;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field label {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.field input,
.field select,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 0.65rem 0;
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--ink);
  width: 100%;
  border-radius: 0;
  transition: border-color var(--med) var(--ease);
}

.field textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-bottom-color: var(--teal);
}

/* Restore a visible ring for keyboard focus specifically — the plain
   :focus rule above only suppresses it for mouse/touch clicks. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.field-row {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.form .submit-row {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.form .submit-note {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  color: var(--ink-muted);
  max-width: 32ch;
}

.honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* --- Footer --- */

.site-footer {
  background: var(--cream-deep);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--rule);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
  }
}

.footer-grid .about p {
  font-family: var(--font-serif);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink-body);
  max-width: 36ch;
  margin: 0.75rem 0 0;
}

.footer-grid h3 {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.25rem 0;
  font-weight: 600;
}

.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.footer-grid a {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  color: var(--ink-body);
  text-decoration: none;
  letter-spacing: 0.005em;
}
.footer-grid a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 0.2em; }

.footer-bottom {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.crisis {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-body);
  background: rgba(31, 29, 26, 0.04);
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--olive);
  border-radius: 0;
  max-width: 60ch;
  margin: 2rem 0 0;
}
.crisis strong { color: var(--ink); font-weight: 600; }

/* --- Page hero (sub-pages) --- */

.page-hero {
  padding-block: clamp(4rem, 8vw, var(--s-10));
}

.page-hero .h-display {
  margin-top: 1.5rem;
}

.page-hero .lede {
  margin-top: 1.75rem;
}

/* Quiet list of anchor links, not a nav bar — wraps cleanly at any width */
.onpage-nav {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.75rem;
}
.onpage-nav a {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.onpage-nav a:hover { color: var(--teal); }

/* --- Closing CTA block --- */

.closing {
  padding-block: clamp(4rem, 8vw, var(--s-10));
  border-top: 1px solid var(--rule);
}

.closing .h-section { max-width: 24ch; }
.closing .lede { margin-top: 1.25rem; }
.closing .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }

/* --- Scroll reveal --- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- Photo placeholders ---
   Aspect-ratio boxes with a small label inside. They render as real
   layout-blockers, so when actual photography arrives the swap is a
   straight <img> drop-in with no layout shift. */

.photo-ph {
  background: var(--cream-deep);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1rem;
  position: relative;
  width: 100%;
  border-radius: 2px;
}
.photo-ph::before {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 1px dashed rgba(31, 29, 26, 0.18);
  pointer-events: none;
}
.photo-ph .ph-label {
  position: relative;
  z-index: 1;
  max-width: 22rem;
  line-height: 1.5;
}
.photo-ph-portrait  { aspect-ratio: 4 / 5; }
.photo-ph-landscape { aspect-ratio: 16 / 9; }
.photo-ph-square    { aspect-ratio: 1 / 1; }

.hero-photo {
  margin-top: clamp(3rem, 6vw, 5rem);
  max-width: 56rem;
}
.hero-photo figcaption {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.85rem;
}

/* --- "From the room" — personal block layout ---
   Portrait left, ~80 words of philosophy-led copy right.
   Mobile collapses to single column with portrait on top. */

.from-room {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 760px) {
  .from-room {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}
.from-room .photo-ph { width: 100%; }
.from-room .text > * + * { margin-top: 1.25rem; }
.from-room .text p { max-width: 38rem; font-family: var(--font-serif); font-size: var(--t-lg); line-height: 1.55; color: var(--ink-body); }
.from-room .text p.bio-lede {
  font-size: clamp(1.25rem, 2vw, var(--t-xl));
  line-height: 1.5;
  color: var(--ink);
  font-weight: 400;
}
.from-room .signature {
  font-family: var(--font-serif);
  color: var(--ink);
  font-size: var(--t-base);
  margin-top: 1.75rem;
}
.from-room .signature em { color: var(--ink-soft); }
.from-room .credential {
  display: block;
  margin: 0.4rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  max-width: none;
}

/* --- Photo embeds (real photography) ---
   Shared treatment for portrait/landscape photos dropped into the
   established layout primitives (.from-room, .cols-2-8, standalone
   figures). Soft radius, no shadow — stays editorial, not glossy. */

.photo-embed { margin: 0; }
.photo-embed figcaption {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 0.65rem;
}
.photo-embed img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.photo-embed--narrow {
  max-width: 26rem;
  margin-inline: auto;
}
.photo-embed--landscape {
  max-width: 36rem;
  margin-inline: auto;
}

.from-room img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* --- Footer brand block --- */

.footer-brand {
  display: inline-block;
  line-height: 0;          /* kill inline-image baseline gap */
}
.footer-wordmark {
  width: 140px;
  height: auto;
  display: block;
}
/* Override .footer-grid .about p so the tagline reads as small caps,
   not body serif. Specificity must beat .footer-grid .about p. */
.footer-grid .about p.footer-tagline {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  max-width: none;
  margin: 0.85rem 0 0;
}

/* --- Headline orphan control --- */

.h-hero, .h-display, .h-section { text-wrap: balance; }
.lede, .prose p { text-wrap: pretty; }

/* --- Mobile header: mark only, no text wordmark (<=768px) --- */

/* Mobile header: keep the practice name visible next to the mark — it used
   to be display:none here, which left an unlabelled feather. The name is
   scaled down (and kept on one line) rather than dropped. At 320px the
   mark + name measures roughly 170px against ~204px of available space,
   so it clears the hamburger without crowding it. */
@media (max-width: 768px) {
  .wordmark { font-size: 0.9375rem; }
  .wordmark .name { white-space: nowrap; }
  .brand-mark { height: 24px; }
  .site-header .wrap { gap: var(--s-4); }
}

/* --- Utilities --- */

.muted { color: var(--ink-muted); }
.serif { font-family: var(--font-serif); }
.italic { font-style: italic; }
.center { text-align: center; }
.hidden { display: none; }
.no-wrap { white-space: nowrap; }

/* ============================================================
   v2 components — "warm modern boutique"
   Full-width color bands replace the label-left editorial grid.
   New here, additive only: nothing below redefines a class that
   a non-propagated page still depends on (.cols-2-8, .col-label,
   .label base, .pullquote, .list-dash/.list-clean, .from-room,
   .philosophy, .influences, .hero-meta, .faq/.faqs, .closing are
   all untouched — see file header note).
   ============================================================ */

/* --- Band: full-width section, subtle warm/cream alternation only —
   no teal panels, no high-contrast blocks. Padding matches the brief's
   "5rem desktop, 3rem mobile," mobile-first. --- */

.band { padding-block: clamp(3rem, 6vw, 5rem); position: relative; }
.band--cream { background: var(--cream); }
.band--warm { background: var(--cream-warm); }

.band-inner {
  max-width: 46rem;
  margin-inline: auto;
}
.band-inner--wide { max-width: 65rem; }

/* Section label: quiet meta text above the heading, not a side column */
.band-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.75rem;
}

/* --- Bio feature ("Hi, I'm Tiffany") — the emotional center --- */

.bio-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 800px) {
  .bio-feature {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}

/* Photo and credentials are grouped in one aside so they stay together in
   both layouts: left column on desktop, and photo -> credentials -> bio
   text when the grid collapses to a single column on mobile. Previously
   the credentials were the last children of .bio-feature-text, which put
   them at the very bottom of the section on mobile, far from the photo. */
.bio-feature-aside {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}
.bio-feature-photo { margin: 0; }
.bio-feature-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.bio-feature-credentials .signature {
  font-family: var(--font-serif);
  color: var(--ink);
  font-size: var(--t-lg);
  line-height: 1.4;
  margin: 0;
  max-width: none;
}
.bio-feature-credentials .credential {
  display: block;
  margin: 0.4rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  max-width: none;
}

.bio-feature-text .bio-lede {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.35;
  color: var(--ink);
  font-weight: 400;
  margin: 0;
}
.bio-feature-text p:not(.bio-lede) {
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  line-height: 1.65;
  color: var(--ink-body);
  margin-top: 1.25rem;
}
.bio-feature-text > * + * { margin-top: 1.25rem; }

/* --- Photo shadow — subtle, only for photos sitting against a flat cream/warm field --- */

.photo-shadow { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06); }

/* --- Photo row: photo + text, two columns on desktop, the default
   pairing whenever a photo sits alongside content --- */

.photo-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 760px) {
  .photo-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .photo-row.photo-right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .photo-row.photo-right .photo-row-photo { order: 2; }
}
.photo-row-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* --- Photo strip: a small gallery of the office, side by side --- */

.photo-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 700px) {
  .photo-strip { grid-template-columns: repeat(4, 1fr); }
}
.photo-strip picture { display: block; }
.photo-strip img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* --- Sticky mobile CTA — injected by js/script.js, mobile only.
   Hidden until the hero/page-hero scrolls out of view, and hidden while
   the mobile nav (which has its own CTA) is open. --- */

.sticky-cta {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.sticky-cta.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
body.menu-open .sticky-cta { display: none; }
@media (min-width: 860px) {
  .sticky-cta { display: none; }
}

/* Print — a readable offline reference, not a screenshot of the page.
   Strips chrome and interaction, keeps prose, credentials, and a way
   to reach the practice or a crisis line. */
@media print {
  * {
    box-shadow: none !important;
    text-shadow: none !important;
    background: transparent !important;
  }

  body {
    background: white;
    color: black;
    font-family: var(--font-serif);
    font-size: 11pt;
    line-height: 1.45;
  }

  h1, h2, h3, h4, h5, h6,
  .label, .h-hero, .h-display, .h-section, .h-sub, .h-name {
    font-family: var(--font-serif) !important;
    color: black;
  }
  .band-label { color: black; }

  h1 { font-size: 20pt; }
  h2 { font-size: 16pt; }
  h3 { font-size: 13pt; }
  h4, h5, h6 { font-size: 11pt; }

  a { color: black; text-decoration: underline; }

  /* Scroll-reveal sections never got scrolled into view before
     printing, so without this they'd print at opacity:0. */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* --- Hide screen-only chrome, interaction, and decoration --- */
  .site-header,
  .nav-primary,
  .menu-toggle,
  .skip,
  .sticky-cta,
  form,
  .form,
  .btn,
  .link-arrow,
  .hero-actions,
  .hero-photo-col,
  .photo-embed,
  .arrow,
  .label::before {
    display: none !important;
  }

  /* Footer: drop the nav columns and legal line, keep the crisis
     block — display:none on a parent can't be undone from a child,
     so the footer itself stays a plain (unstyled) container instead
     of being hidden wholesale. */
  .site-footer {
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
  }
  .site-footer .footer-grid,
  .site-footer .footer-bottom {
    display: none !important;
  }

  /* --- Print-only header with practice contact info --- */
  body::before {
    content: "Whole Self Counseling · Nashville, TN · tiffany@wholeselfcounselingcenter.com";
    display: block;
    font-family: var(--font-sans);
    font-size: 9pt;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: black;
    border-bottom: 1px solid black;
    padding-bottom: 6pt;
    margin-bottom: 14pt;
  }

  /* Crisis resources stay visible wherever they appear on the page —
     inside the footer on most pages, inside the contact aside on
     contact.html. */
  .crisis {
    display: block !important;
    color: black;
    background: none;
    border: 1px solid black;
    border-left-width: 2px;
    padding: 8pt 10pt;
    page-break-inside: avoid;
  }

  /* --- Reveal destination URLs for external links --- */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    font-weight: 400;
  }

  /* --- Don't split these across a page break --- */
  .service-row,
  .influence,
  .philosophy article,
  .faq {
    page-break-inside: avoid;
  }

  /* Native <details> hides its body via content-visibility unless
     [open] is set — display:override alone can't undo that, so
     script.js actually opens each one on the beforeprint event. */
  .faq summary::after {
    content: none;
  }
}