/* Called to Heal Counseling. The flyer's gold serif caps and cross, set on
   warm cream and white: light grounds, gold as the accent, the espresso dark
   kept for the footer. Section bodies come from the CMS as rich text, so the
   selectors below style the markup an editor produces (p, ul, ol, h2, h3).
   Gold on cream is too faint for small text: text and links use --gold-deep,
   and the brighter golds are for the mark, rules, icons and button fills.

   One plane (2026-09-27): every block starts at the container's content edge
   (wrap left + --pad). A two-column block puts its copy in the first column
   and its visual (photo, prints, drawing, card) in a second column of one
   shared width, --col2, after one shared gutter, so the second edge is the
   same on every page. A narrow page keeps that left edge and caps each
   block at --measure; nothing is centered in the page. */
:root {
  --cream: #fbf8f2;
  --paper: #ffffff;
  --linen: #f3ece1;
  --sand: #e9dfcf;
  --ink: #1d1612;
  --text: #2a211a;
  --text-soft: #4a3d32;
  --gold: #c49a4f;
  --gold-mark: #a97c30;
  --gold-deep: #7f5a1b;
  --gold-hi: #e2bf7e;
  --text-light: #f1e9dc;
  --text-light-soft: #c7b9a6;
  --rule: rgba(42, 33, 26, .2);
  --rule-gold: rgba(169, 124, 48, .55);
  --serif: "Alegreya", Georgia, serif;
  --sans: "Alegreya Sans", system-ui, sans-serif;
  --caps: "Cinzel", "Times New Roman", serif;
  --pad: clamp(16px, 5vw, 48px);
  --max: 1160px;
  --measure: 700px;
  --col2: clamp(300px, 40%, 420px);
  --gutter: clamp(40px, 6vw, 80px);
  --top-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--text); font: 400 18px/1.55 var(--sans); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; color: var(--text); }
h2 { font-family: var(--serif); font-size: clamp(32px, 5.6vw, 50px); line-height: 1.06; letter-spacing: -.01em; margin-bottom: 18px; }
h3 { font-family: var(--serif); font-size: 24px; line-height: 1.25; }
/* no one-word last lines on a heading or the opening line */
h1:not(.mark), h2, h3, .hero-line { text-wrap: balance; }
p { margin: 0 0 16px; }
[id] { scroll-margin-top: calc(var(--top-h) + 12px); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
/* a narrow page: the same left edge as every other, each block capped at the measure */
.narrow > * { max-width: var(--measure); }
/* the two-column blocks share one second edge from 900px */
@media (min-width: 900px) {
  .hero-grid, .svc-hero-grid, .about-grid, .about-page-grid, .fees-grid, .book-grid, .split-grid, .panel {
    grid-template-columns: minmax(0, 1fr) var(--col2); column-gap: var(--gutter);
  }
}

/* ---- wordmark, as on his flyer: one tall cross to the left of CALLED TO / HEAL */
.mark { display: inline-grid; grid-template-columns: auto auto; align-items: end; column-gap: .14em; text-decoration: none; color: var(--gold-mark); line-height: 1; }
.mark-cross { display: block; fill: currentColor; width: .46em; height: 1.15em; }
.mark-words { display: flex; flex-direction: column; }
.mark-small { font-family: var(--caps); font-weight: 700; font-size: .3em; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .2em; }
.mark-heal { font-family: var(--caps); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: .8; }
.mark-sub { grid-column: 1 / -1; font-family: var(--caps); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--text); }
.mark-sm { font-size: 25px; flex: none; }
.mark-sm .mark-small { font-size: 10px; letter-spacing: .14em; }
.mark-lg { font-size: clamp(68px, 18vw, 132px); margin-bottom: 26px; }
.mark-lg .mark-sub { font-size: clamp(14px, 3.3vw, 21px); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule-gold); }

/* ---- header: one line at every width. The nav collapses into the menu early
   (below 1100px); the phone is an icon until there is room for the number. */
.top { position: sticky; top: 0; z-index: 20; background: rgba(251, 248, 242, .985); border-bottom: 1px solid var(--rule); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); }
.top-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-height: var(--top-h); white-space: nowrap; }
.top .mark { margin-right: auto; padding: 6px 0; }
.nav { display: none; gap: 8px; }
.nav a { text-decoration: none; color: var(--text); font-size: 16px; font-weight: 500; padding: 12px 9px; }
.nav a:hover, .nav a:focus-visible { color: var(--gold-deep); }
.top-call { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; border-radius: 22px; color: var(--gold-deep); text-decoration: none; font-weight: 700; font-size: 16px; }
.top-call svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.top-call span { display: none; }
.top-call:hover span { text-decoration: underline; text-underline-offset: 4px; }

.menu { position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border-radius: 4px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 24px; height: 24px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; }
.menu-panel { position: absolute; right: 0; top: 52px; min-width: 250px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 0; box-shadow: 0 18px 40px -24px rgba(42, 33, 26, .45); }
.menu-panel a { display: block; padding: 12px 20px; text-decoration: none; font-size: 17px; white-space: nowrap; }
.menu-panel a:active { background: var(--linen); }

@media (min-width: 720px) { .top-call span { display: inline; } .top-call { padding: 0 6px; } .top-row { gap: 14px; } }
@media (min-width: 1100px) {
  .nav { display: flex; margin-right: 8px; }
  .menu { display: none; }
  .top-row { gap: 18px; }
}

/* ---- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 700 16px/1 var(--sans); letter-spacing: .02em; text-decoration: none; white-space: nowrap; border: 1.5px solid transparent; transition: background-color .15s, border-color .15s, transform .15s; }
.btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-gold:hover, .btn-gold:focus-visible { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn-line { border-color: var(--rule-gold); color: var(--gold-deep); background: var(--paper); }
.btn-line:hover, .btn-line:focus-visible { border-color: var(--gold); background: var(--linen); }
.btn:active { transform: translateY(1px); }
.btn-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.top-book { min-height: 44px; padding: 0 16px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.link-quiet { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }

.format { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 0; padding: 8px 14px 8px 12px; border: 1.5px solid var(--rule-gold); border-radius: 999px; background: var(--paper); color: var(--gold-deep); font-weight: 700; font-size: 15px; line-height: 1.3; }
.format svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- hero */
.hero { padding: clamp(36px, 8vw, 96px) 0 clamp(48px, 8vw, 96px); background: linear-gradient(180deg, var(--paper), var(--cream)); }
.hero-grid { display: grid; gap: 36px; align-items: center; }
.hero-line { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 4.4vw, 32px); line-height: 1.25; color: var(--text); max-width: 22em; margin-bottom: 14px; }
.hero-body { color: var(--text); max-width: 29em; }
.hero-body p:last-child { margin-bottom: 12px; }
/* the drawn cross fills the second column's box (its own edge is the shared one) and is drawn centered in it */
.hero-cross { display: none; width: 100%; max-height: 440px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.fx .hero-cross path { stroke-dashoffset: 1; animation: draw 2.4s .3s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (min-width: 900px) {
  .hero-cross { display: block; }
}

/* ---- autoplay stages (core motion.js drives --t, .on/.out on panels, .in on
   [data-at] parts, aria-current on the rail, and adds the pause button) */
.stage { position: relative; overflow: clip; background: var(--paper); border-top: 1px solid var(--rule); padding: clamp(40px, 7vw, 72px) 0 0; }
.stage-process { background: var(--linen); }
.stage-in { position: relative; display: flex; flex-direction: column; min-height: min(640px, calc(100svh - var(--top-h))); padding-bottom: 78px; }
/* the head: a small cross and a caps label, the heading, the lede under it, all on the one edge */
.stage-head { display: grid; }
.stage-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 700 14px/1 var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.stage-kicker svg { display: block; width: 8px; height: 20px; fill: var(--gold); }
.stage-head h2 { margin-bottom: 12px; }
.stage-lede, .stage-lede p { color: var(--text); font-size: clamp(18px, 2.4vw, 20px); margin-bottom: 0; max-width: 29em; }
.stage-foot { margin: 6px 0 0; }
.panels { display: grid; flex: 1; align-content: center; margin: clamp(20px, 4vw, 40px) 0 clamp(16px, 3vw, 28px); }
/* a panel: the copy first, on the edge; the drawing in the second column from 900px */
.panel { grid-area: 1 / 1; display: grid; gap: 18px; align-content: start; }   /* stacked: art and copy start at one line on every step, nothing hops */
.panel-art { position: relative; display: block; width: clamp(110px, 32vw, 240px); color: var(--gold-mark); }
.panel-art svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
/* the number behind the drawing: a tint of the ground, light rather than shadow, strong enough to read as a numeral */
.panel-no { position: absolute; z-index: 0; inset: 0; display: grid; place-items: center; font: 700 clamp(88px, 26vw, 250px)/1 var(--caps); letter-spacing: -.04em; color: var(--sand); pointer-events: none; user-select: none; -webkit-user-select: none; }
.stage-process .panel-no { color: #dbcdb7; }   /* on linen, the same step down as sand on white */
.panel-k { margin: 0 0 8px; font: 700 14px/1 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.panel-k span { color: var(--text-soft); font-weight: 600; }
.panel h3 { font-size: clamp(28px, 5vw, 42px); line-height: 1.1; margin-bottom: 10px; }
.panel h3 a { text-decoration: none; padding: 6px 0; }
.panel h3 a:hover { color: var(--gold-deep); }
.panel-copy p:not(.panel-k) { color: var(--text); font-size: clamp(18px, 2.4vw, 20px); max-width: 29em; }
.panel-act { margin: 0; }
@media (min-width: 900px) {
  .panel { align-items: center; align-content: center; }
  .panel-copy { grid-column: 1; grid-row: 1; }
  .panel-art { grid-column: 2; grid-row: 1; width: min(100%, 280px); }
  .panel-no { font-size: clamp(190px, 18vw, 250px); }
}

.ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* the two stage drawings share one drawn weight: 48 and 120 unit boxes both
   land near 4.5px at 240px wide and 2.3px on a phone */
.ico-lg { stroke-width: 1; }
.step-art { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* the moving states: only with motion running (html.fx), never otherwise.
   A panel rises in and its copy follows a beat behind, line by line; each
   part of the drawing is drawn as a stroke (pathLength="1" on every shape)
   when its data-at mark passes, the hero cross's own vocabulary. */
html.fx .stage .panel { opacity: 0; transform: translateY(22px); pointer-events: none; transition: opacity .45s ease, transform .6s var(--ease); }
html.fx .stage .panel.on { opacity: 1; transform: none; pointer-events: auto; }
html.fx .stage .panel.out { opacity: 0; transform: translateY(-22px); }
html.fx .stage .panel-copy > * { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .7s var(--ease); }
html.fx .stage .panel.on .panel-copy > * { opacity: 1; transform: none; }
html.fx .stage .panel.on .panel-copy > :nth-child(2) { transition-delay: .09s; }
html.fx .stage .panel.on .panel-copy > :nth-child(3) { transition-delay: .18s; }
html.fx .stage .panel.on .panel-copy > :nth-child(4) { transition-delay: .27s; }
html.fx .stage [data-at] { opacity: 0; transition: opacity .3s ease; }
html.fx .stage [data-at] > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease); }
html.fx .stage [data-at].in { opacity: 1; }
html.fx .stage [data-at].in > * { stroke-dashoffset: 0; }

/* the rail, an instrument rather than dots: a numeral at the start of each
   segment, a track that fills with --t, and, from a landscape tablet up, the
   step's name beside the numeral, always on one line. Under 1024px only the
   numerals show: every step shares the width evenly, each a 44px target, and
   nothing scrolls; the name stays in the button for a screen reader, and the
   current step's name is the slide heading anyway. A click seeks. Indented
   on the left for the pause button motion.js puts there (44px wide). */
.rail { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; gap: 0; padding: 0 var(--pad) 0 calc(var(--pad) + 52px); }
.rail button { position: relative; flex: 1 1 0; min-width: 0; min-height: 44px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-items: end; justify-content: start; column-gap: 7px; row-gap: 8px; padding: 0 3px; margin: 0; background: none; border: 0; cursor: pointer; font: 600 14px/1.25 var(--sans); color: var(--text-soft); text-align: left; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color .2s; }
.rail b { grid-column: 1; font: 700 13px/1 var(--caps); letter-spacing: .06em; color: var(--gold-deep); font-variant-numeric: tabular-nums; padding-bottom: 1px; }
.rail span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.rail i { grid-column: 1 / -1; position: relative; display: block; height: 3px; background: var(--sand); overflow: hidden; }
.rail i::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(clamp(0, var(--t, 0) * var(--n, 3) - var(--seg, 0), 1)); }
.rail button:hover, .rail button[aria-current="step"] { color: var(--text); }
.rail button[aria-current="step"] b { color: var(--gold-mark); }
.rail button:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }
@media (min-width: 1024px) {
  /* a quiet fallback should an edited name outrun the width: the rail scrolls
     sideways, no bar, no mask; 8px of vertical padding (the rail sits 8px
     lower to keep the buttons where they were) so the focus ring paints whole */
  .rail { gap: 14px; padding: 8px var(--pad) 8px calc(var(--pad) + 58px); bottom: 6px; overflow-x: auto; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail button { flex: 1 0 auto; grid-template-columns: auto auto; padding: 0; }
  .rail b { font-size: 12px; }
  .rail span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; grid-column: 2; display: block; }
}
/* a tablet in landscape: one size down so all six names fit on the line */
@media (min-width: 1024px) and (max-width: 1099px) {
  .rail { gap: 12px; }
  .rail button { font-size: 13px; }
}
.stage .stage-pp { color: var(--gold-deep); }
@media (min-width: 900px) {
  .stage-in { padding-bottom: 92px; }
}

/* no motion (reduced motion, no JS, or motion.js bailed): every step shows,
   stacked, and nothing waits on a clock */
html:not(.fx) .stage-in { min-height: 0; padding-bottom: clamp(40px, 7vw, 72px); }
html:not(.fx) .panels { gap: 44px; }
html:not(.fx) .panel { grid-area: auto; }
html:not(.fx) .rail { display: none; }
html:not(.fx) .panel-art { width: clamp(96px, 22vw, 180px); }
@media (prefers-reduced-motion: reduce) {
  .stage-in { min-height: 0; padding-bottom: clamp(40px, 7vw, 72px); }
  .stage .panels { gap: 44px; }
  .stage .panel, html.fx .stage .panel { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; transition: none; }
  html.fx .stage .panel-copy > * { opacity: 1; transform: none; transition: none; }
  html.fx .stage [data-at] { opacity: 1; transform: none; transition: none; }
  html.fx .stage [data-at] > * { stroke-dashoffset: 0; transition: none; }
  .rail, .stage .stage-pp { display: none; }
  html.fx .hero-cross path { animation: none; stroke-dashoffset: 0; }
}

/* ---- about: the flyer rebuilt, the words as real text on the edge, the photo in the second column */
.about { background: var(--cream); padding: clamp(56px, 10vw, 112px) 0; border-top: 1px solid var(--rule); }
.about-grid { display: grid; gap: 32px; }
.portrait { margin: 0; max-width: 420px; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 24%; border-radius: 6px; }
.kicker { margin: 0 0 10px; font: 700 14px/1 var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.about-body p { color: var(--text); max-width: 29em; }
.about-body > p:first-child { font-family: var(--serif); font-size: clamp(20px, 3.6vw, 24px); line-height: 1.4; color: var(--text); }
.pull { margin: 26px 0; padding-left: 18px; border-left: 3px solid var(--gold); font-family: var(--serif); font-style: italic; font-size: clamp(26px, 5vw, 36px); line-height: 1.15; color: var(--gold-deep); }
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 28px; max-width: 36em; }
.svc-list a { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--text); font-weight: 600; }
.svc-list a:hover span { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 4px; }
.svc-list .ico { width: 24px; height: 24px; color: var(--gold-mark); }
.triad { margin: 18px 0 0; font: 600 12px/1.4 var(--caps); letter-spacing: .32em; text-transform: uppercase; color: var(--text-soft); }
.triad span { color: var(--gold); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--rule); max-width: 36em; }
.facts dt { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.facts dd { margin: 2px 0 0; color: var(--text); font-weight: 600; }
@media (min-width: 620px) { .svc-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .about-grid { align-items: center; }   /* the portrait sits centred on the column beside it (Eric, 2026-09-27) */
  .about-grid .about-copy { grid-column: 1; grid-row: 1; }
  .about-grid .portrait { grid-column: 2; grid-row: 1; }
  .portrait img { aspect-ratio: 614 / 1060; object-position: 50% 30%; }
}

/* ---- fees */
.fees { background: var(--paper); border-top: 1px solid var(--rule); padding: clamp(56px, 10vw, 104px) 0; }
.fees-grid { display: grid; gap: 28px; }
.fees p { color: var(--text); max-width: 29em; }
.rates { margin: 0; background: var(--cream); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 22px; align-self: start; }
.rates div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.rates div:last-child { border-bottom: 0; }
.rates dd { margin: 0; color: var(--gold-deep); font-weight: 700; text-align: right; }
.fees .fine { font-size: 15px; margin: 0; }
@media (min-width: 900px) {
  .fees .fine { grid-column: 1 / -1; }
}

/* ---- supervision */
.supervision { padding: clamp(56px, 10vw, 100px) 0; background: var(--linen); border-top: 1px solid var(--rule); }
.supervision p { color: var(--text); max-width: 29em; }

/* ---- booking + crisis */
.book { padding: clamp(56px, 10vw, 104px) 0; background: var(--cream); border-top: 1px solid var(--rule); }
.book-grid { display: grid; gap: 36px; }
.book p { color: var(--text); max-width: 29em; }
.book-meta { margin-top: 22px; line-height: 1.9; }
.book-meta a { color: var(--gold-deep); font-weight: 700; padding: 12px 2px; margin: 0 -2px; }
.crisis { background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--gold); border-radius: 8px; padding: 22px 22px 8px; align-self: start; }
.crisis h3 { font-size: 22px; margin-bottom: 10px; }
.crisis p { font-size: 17px; color: var(--text); max-width: 29em; }
/* inline links in running text: vertical padding on an inline element widens
   the tap box without moving a line */
.crisis a { color: var(--gold-deep); font-weight: 700; padding: 12px 2px; margin: 0 -2px; }
@media (min-width: 900px) { .book-grid { align-items: start; } }

/* ---- contact form (/contact). Text at 17px so iOS does not zoom on focus;
   every control at least 48px tall. */
.cform-band { border-top: 1px solid var(--rule); padding-bottom: clamp(48px, 8vw, 88px); }
/* one column on the content edge: the heading and intro, then the form under them, capped at --measure */
.cform-grid { display: grid; gap: 28px; }
.cform-lede { max-width: var(--measure); }
.cform-lede p { color: var(--text); font-size: 18px; max-width: 29em; }
.cform { display: grid; gap: 18px; max-width: 560px; }
.cform-field { display: grid; gap: 6px; }
.cform label { font-weight: 700; font-size: 16px; color: var(--text); }
.cform input, .cform select, .cform textarea { width: 100%; min-height: 48px; padding: 11px 14px; font: 400 17px/1.4 var(--sans); color: var(--text); background: var(--paper); border: 1px solid rgba(42, 33, 26, .32); border-radius: 8px; }
.cform textarea { min-height: 128px; resize: vertical; }
.cform select { appearance: none; padding-right: 40px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%237f5a1b' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 16px center; }
.cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; border-color: var(--gold-deep); }
.cform-notice { background: var(--linen); border-left: 3px solid var(--gold); border-radius: 6px; padding: 12px 16px; }
.cform-notice p { margin: 0; font-size: 16px; color: var(--text); }
.cform-notice p + p { margin-top: 4px; }
.cform-notice a { color: var(--gold-deep); font-weight: 700; display: inline-block; padding: 10px 0; }
.cform-hint { margin: 0; font-size: 15px; color: var(--text-soft); }
/* the error is text on the same edge as the labels, a red rule under it, not a box that indents it */
.cform-err { margin: 0; padding: 0 0 8px; border-bottom: 2px solid #b3452a; color: #7a2a14; font-weight: 700; }
.cform-send { justify-self: start; min-width: 160px; }
.cform-sent { background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: 8px; padding: 22px; }
.cform-sent h3 { margin-bottom: 8px; }
.cform-sent p { margin: 0; color: var(--text); }
.cform-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- service, services index and /book pages */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0 0 18px; padding: 0; font-size: 15px; line-height: 1.6; color: var(--text-soft); }   /* 24px line + 20px padding = a 44px crumb */
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--gold); }
.crumbs a { color: var(--gold-deep); text-decoration: none; display: inline-block; padding: 10px 5px; margin: 0 -5px; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { padding: 10px 0; }
.svc-hero { padding: clamp(16px, 3vw, 32px) 0 clamp(44px, 8vw, 88px); background: linear-gradient(180deg, var(--paper), var(--cream)); }
.svc-hero-grid { display: grid; gap: 32px; align-items: center; }
/* a page with no photo in Admin > Pages draws no figure: its copy takes the row */
.svc-hero-grid > :only-child, .about-grid > :only-child, .about-page-grid > :only-child { grid-column: 1 / -1; }
.svc-hero h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 7.4vw, 60px); line-height: 1.04; letter-spacing: -.01em; margin-bottom: 18px; }
.ico-hero { width: 56px; height: 56px; color: var(--gold-mark); stroke-width: 1.5; margin-bottom: 16px; }
.lede, .lede-prose p { font-family: var(--serif); font-size: clamp(21px, 3.4vw, 25px); line-height: 1.4; color: var(--text); max-width: 30em; }
.lede-prose p + p { font-family: var(--sans); font-size: 18px; color: var(--text); line-height: 1.6; max-width: 29em; }
.svc-photo { margin: 0; width: 100%; max-width: 440px; }
.svc-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: var(--linen); }
/* /services: four square tiles in a 2x2 */
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--linen); }
@media (min-width: 900px) {
  .svc-photo { justify-self: start; }
}
.svc-body { padding: clamp(48px, 8vw, 88px) 0 clamp(24px, 4vw, 40px); background: var(--cream); }
.prose { color: var(--text); }
.prose > p, .prose > h2, .prose > h3, .prose > ol { max-width: 29em; }
.prose > p:first-child { font-size: 20px; color: var(--text); }
.prose h2 { font-size: clamp(26px, 4.6vw, 34px); margin: 44px 0 14px; }
.prose h3 { margin: 28px 0 8px; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 16px; }
.svc-body .prose ul { list-style: none; padding: 0; display: grid; gap: 0 28px; }
.svc-body .prose li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--rule); color: var(--text); font-weight: 500; }
.svc-body .prose li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 12px; height: 7px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
@media (min-width: 760px) { .svc-body .prose ul { grid-template-columns: 1fr 1fr; } }
.prose a { color: var(--gold-deep); }

.faq { padding: clamp(32px, 6vw, 64px) 0 clamp(56px, 9vw, 96px); background: var(--cream); }
.faq h2 { font-size: clamp(26px, 4.6vw, 34px); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 0; font: 700 20px/1.35 var(--serif); color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq h2 a { padding: 8px 0; }
.faq-a p { color: var(--text); max-width: 29em; }

.book-band { background: var(--linen); }
.book-ways { margin-top: 18px; }
.soon { padding: 14px 18px; border: 1px dashed var(--rule-gold); border-radius: 8px; background: var(--paper); color: var(--text-soft); max-width: 32em; }
.soon strong { color: var(--text); }
.book-page .actions { margin-top: 16px; }

.siblings { padding: clamp(48px, 8vw, 88px) 0; background: var(--paper); border-top: 1px solid var(--rule); }
.siblings-index { border-top: 0; background: var(--cream); padding-top: clamp(24px, 4vw, 40px); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cards a { height: 100%; display: grid; grid-template-columns: 30px 1fr; align-content: start; gap: 4px 14px; padding: 20px 20px 18px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); text-decoration: none; transition: border-color .15s, transform .2s var(--ease); }
.siblings:not(.siblings-index) .cards a { background: var(--cream); }
.cards a:hover { border-color: var(--gold); transform: translateY(-2px); }
.cards .ico { grid-row: 1 / span 3; width: 28px; height: 28px; color: var(--gold-mark); margin-top: 2px; }
.cards strong { font: 700 22px/1.25 var(--serif); color: var(--text); }
.cards span { color: var(--text-soft); font-size: 16px; line-height: 1.5; }
.cards em { font-style: normal; font-weight: 700; color: var(--gold-deep); margin-top: 8px; font-size: 15px; }
@media (min-width: 700px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* ---- footer: the one dark band, on the same left edge as the rest of the page */
.foot { padding: 44px 0 calc(40px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--text-light); }
.foot-row { display: grid; gap: 8px; text-align: left; }
.foot-row p { margin: 0; }
.foot-name { font: 700 15px/1.4 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.foot-words { font: 600 13px/1.4 var(--caps); letter-spacing: .3em; text-transform: uppercase; color: var(--text-light-soft); }
.foot-words span, .foot-links span { color: var(--gold); }
.foot-small { font-size: 14px; color: var(--text-light-soft); }
/* link rows are lists: two columns on a phone (no separators to strand at a
   line end), one dotted line where there is room; the first link sits on the edge */
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 24px; font-size: 15px; color: var(--text-light-soft); }
.foot-links li { display: flex; align-items: center; justify-content: flex-start; }
.foot-links li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.foot-links a { display: inline-block; padding: 12px 0; line-height: 1.5; color: var(--gold-hi); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .foot-links { display: flex; flex-wrap: wrap; column-gap: 0; }
  .foot-links li + li::before { content: "·"; color: var(--gold); margin: 0 10px; }
}
.foot-crisis { font-size: 14px; color: var(--text-light-soft); }
.foot-crisis a { color: var(--gold-hi); font-weight: 700; padding: 14px 3px; margin: 0 -3px; }
/* the two directory badges: the ORC image and the Psychology Today one built
   here, same box (200 by 57), side by side or stacked, on the edge either way */
.foot-badges { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 14px; margin-top: 14px; }
.foot-badge { display: inline-block; border-radius: 12px; line-height: 0; }
.foot-badge img { display: block; width: 200px; height: auto; }
.foot-badge-pt { display: grid; grid-template-columns: 38px 1fr; align-items: center; column-gap: 12px; width: 200px; height: 57px; padding: 0 14px; border-radius: 12px; background: var(--linen); color: var(--ink); text-decoration: none; line-height: 1.1; text-align: left; }
.foot-badge-pt svg { width: 38px; height: 38px; fill: none; stroke: var(--gold-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.foot-badge-pt small { display: block; font: 700 9px/1 var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 3px; }
.foot-badge-pt strong { display: block; font: 700 15px/1.1 var(--sans); color: var(--ink); white-space: nowrap; }
.foot-badge-pt em { display: block; font: 400 11px/1.2 var(--sans); font-style: normal; color: var(--text-soft); margin-top: 2px; }
.foot-badge-pt:hover { background: var(--paper); }
.foot a:focus-visible { outline-color: var(--gold-hi); }

/* ---- rich-text bodies */
.about-body a, .fees-body a, .supervision-body a, .book-body a, .hero-body a { color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.about-body ul, .fees-body ul, .supervision-body ul, .book-body ul { padding-left: 1.2em; margin: 0 0 16px; }
.fees-body p:last-child, .book-body p:last-child { margin-bottom: 0; }

/* ---- skip link, focus */
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--gold); color: var(--ink); font-weight: 700; border-radius: 4px; text-decoration: none; }
.skip:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; }

/* ---- a plain CMS page (privacy notice and the like) */
.page { background: var(--cream); padding: clamp(48px, 9vw, 96px) 0 clamp(56px, 10vw, 110px); }
.page h1 { font-family: var(--serif); font-size: clamp(34px, 7vw, 52px); line-height: 1.1; margin-bottom: 24px; }
.page .prose { max-width: 32em; }

/* ---- 404 / 500 */
.err { padding: clamp(56px, 12vw, 140px) 0; background: var(--cream); }
.err .mark-lg { font-size: clamp(56px, 14vw, 96px); margin-bottom: 36px; }
.err h1 { font-family: var(--serif); font-size: clamp(30px, 6vw, 44px); line-height: 1.1; margin-bottom: 20px; }
.err a:not(.btn) { color: var(--gold-deep); }
.err p { color: var(--text-soft); max-width: 29em; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.cards + p { margin: 24px 0 0; }

/* Gallery on /about: polaroid prints as ONE stacked column. Each print
   alternates side (a small left/right offset) and tilt, caption under it.
   Tilt is static (never animated); the hover lift is decoration only. */
.gallery-lede { color: var(--text); max-width: 34em; margin: 0; }
.prints { list-style: none; margin: 32px 0 0; padding: 0 0 12px; max-width: 520px; display: grid; gap: 30px; }
.print { width: 86%; justify-self: start; --tilt: -2deg; }
.print:nth-child(even) { justify-self: end; --tilt: 2.2deg; }
.print:nth-child(3n) { --tilt: -1.2deg; }
.print:nth-child(4n) { --tilt: 1.4deg; }
.print figure { margin: 0; background: #fff; padding: 10px 10px 0; transform: rotate(var(--tilt));
  box-shadow: 0 1px 2px rgba(40, 30, 15, .12), 0 10px 24px -8px rgba(40, 30, 15, .28); }
.print img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--paper); }
.print figcaption { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 6px 4px 8px;
  font: italic 400 18px/1.2 var(--serif); color: var(--text-soft); text-align: center; }
/* A print with no caption (the photo is the figure's last child): the white
   frame closes under the photo with a small lip, so a photo-only print looks
   finished. flow-root keeps that margin inside the frame. In the pile, a
   captioned print sets the shared height and the lip grows to the caption
   band, so a mixed pile stays one size as it flips. */
.print figure { display: flow-root; }
.print img:last-child { margin-bottom: 28px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .print figure { transition: transform .35s ease, box-shadow .35s ease; }
  .print:hover figure { transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 2px 4px rgba(40, 30, 15, .12), 0 18px 36px -10px rgba(40, 30, 15, .32); }
}

/* The pile (site.js adds .is-stack): every print in one grid cell, the top
   one flat and in full, the next three peeking out at small offsets and
   tilts. A flip sends the top print off to the side and to the bottom of the
   pile. Without JS none of this applies and the column above shows. */
.stack.is-stack { max-width: 420px; margin: 32px 0 0; }
.is-stack .prints { display: grid; grid-template-areas: "pile"; margin: 0; padding: 0 0 18px; max-width: none;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: pointer; }
.is-stack .prints:focus-visible { outline: 2px solid var(--gold); outline-offset: 10px; border-radius: 4px; }
.is-stack .print { grid-area: pile; width: 88%; justify-self: start; z-index: 1; opacity: 0; pointer-events: none;
  transform: translate(0, 18px) rotate(0deg); }
.is-stack .print figure { transform: none; height: 100%; display: flex; flex-direction: column; }
.is-stack .print figcaption { flex: 1; min-height: 64px; font-size: 17px; padding: 8px 10px 12px; }
.is-stack .print img { -webkit-user-drag: none; }
.is-stack .print[data-pos="0"] { z-index: 5; opacity: 1; pointer-events: auto; transform: rotate(-1deg); }
.is-stack .print[data-pos="1"] { z-index: 4; opacity: 1; transform: translate(10px, 6px) rotate(3deg); }
.is-stack .print[data-pos="2"] { z-index: 3; opacity: 1; transform: translate(-12px, 10px) rotate(-4deg); }
.is-stack .print[data-pos="3"] { z-index: 2; opacity: 1; transform: translate(6px, 16px) rotate(1.5deg); }
.is-stack .print.out-l { z-index: 6; opacity: 0; transform: translate(-72%, -10px) rotate(-14deg); }
.is-stack .print.out-r { z-index: 6; opacity: 0; transform: translate(72%, -10px) rotate(14deg); }
.is-stack .print.snap { transition: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .is-stack .print { transition: transform .35s cubic-bezier(.3, .7, .2, 1), opacity .35s ease; }
}
.is-stack .print:hover figure { transform: none; }
.stack-ctl { display: flex; align-items: center; justify-content: flex-start; gap: 18px; margin-top: 10px; }
.stack-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
  border-radius: 999px; border: 1px solid var(--rule-gold); background: var(--paper); color: var(--gold-deep); cursor: pointer; }
.stack-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stack-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.stack-count { min-width: 4.5em; text-align: center; font: 600 15px/1 var(--sans); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.stack-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- /about: the bio, facts and approaches; the prints beside it on desktop */
.about-page-grid { display: grid; gap: 56px; }
.about-page .prose { max-width: 36em; }
.about-page-life { padding-top: 8px; border-top: 1px solid var(--rule); }
.about-page-life .kicker { margin-top: 28px; }
.about-page-life h2 { max-width: 16em; }
.ways-h { font-size: clamp(24px, 4.4vw, 30px); margin: 36px 0 12px; }
.ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 28px; max-width: 36em; }
.ways li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--rule); color: var(--text); font-weight: 500; }
.ways li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 12px; height: 7px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.ways-note { margin: 14px 0 0; color: var(--text); max-width: 34em; }
@media (min-width: 620px) { .ways { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .about-page-grid { align-items: start; }
  .about-page-life { border-top: 0; padding-top: 0; }
  .about-page-life .kicker { margin-top: 0; }
  .about-page .ways { grid-template-columns: 1fr; }
}

/* ---- home teasers, and the "more" links under a section */
.more { margin: 4px 0 0; }
.fees-teaser .fees-body { margin-bottom: 8px; }

/* ---- /contact, /fees, /supervision, /faq */
.contact-page h1, .fees-page h1, .supervision-page h1, .faq-page h1, .sec-page h1 { font-family: var(--serif); font-size: clamp(36px, 7.4vw, 60px); line-height: 1.04; margin-bottom: 18px; }
.contact-list { margin-top: 26px; max-width: 30em; background: var(--paper); }
.contact-list dd { min-width: 0; overflow-wrap: anywhere; }
.rates dd a { color: var(--gold-deep); padding: 12px 2px; margin: 0 -2px; }
.fees-page .rates { background: var(--paper); }
.gfe { color: var(--text); max-width: 29em; }
.faq-all h2 { margin: 44px 0 6px; font-size: clamp(24px, 4.4vw, 30px); }
.faq-all h2:first-child { margin-top: 0; }
.faq-all h2 a { color: var(--text); text-decoration-color: var(--rule-gold); text-underline-offset: 5px; }
.faq-more { margin: 18px 0 0; }

/* ---- footer page list */
.foot-nav { display: grid; gap: 0; }
.foot-svc { font-size: 14px; }

/* ---- section types the dashboard can add to any page (modules/calledtoheal/sections.php) */
.rates dt small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--text-soft); }
.facts-band .rates { margin-top: 24px; max-width: 34em; background: var(--paper); }
.cards .card { height: 100%; display: grid; align-content: start; gap: 4px; padding: 20px 20px 18px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); text-decoration: none; }
.cards-plain a.card, .cards-plain .card { grid-template-columns: 1fr; }
.cards-own .card { background: var(--cream); }
.split-grid { display: grid; gap: 32px; align-items: center; }
.split-photo { margin: 0; }
.split-photo img { display: block; width: 100%; height: auto; border-radius: 10px; }
@media (min-width: 900px) {
  .sec-split-left .split-grid { grid-template-columns: var(--col2) minmax(0, 1fr); }
  .sec-split-left .split-photo { order: -1; }
}
.sec-crisis { padding-top: 8px; }

/* ---- signed in: each section's edit pill is drawn by editor.css (loaded for editors only) */

/* ---- the Journal: /journal (post list) and /journal/<slug> (one post) */
.journal-list-band { padding: clamp(8px, 2vw, 16px) 0 clamp(56px, 9vw, 96px); background: var(--cream); }
.journal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 980px; }
.journal-item { display: grid; gap: 16px; padding: 28px 0; border-top: 1px solid var(--rule); }
.journal-item:last-child { border-bottom: 1px solid var(--rule); }
.journal-photo { display: block; border-radius: 8px; overflow: hidden; background: var(--linen); }
.journal-photo img { width: 100%; aspect-ratio: 40 / 21; object-fit: cover; transition: transform .4s var(--ease); }
.journal-item:hover .journal-photo img { transform: scale(1.02); }
.journal-date { margin: 0 0 8px; font: 700 13px/1.4 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.journal-item h2 { font-size: clamp(26px, 4.4vw, 34px); line-height: 1.12; margin-bottom: 10px; }
/* the whole title is the link; padding keeps the tap target tall without moving the text */
.journal-item h2 a { text-decoration: none; display: inline; padding: 6px 0; }
.journal-item h2 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.journal-excerpt { color: var(--text-soft); max-width: 36em; margin: 0; }
.journal-empty { color: var(--text-soft); }
@media (min-width: 760px) {
  .journal-item { grid-template-columns: minmax(240px, 38%) 1fr; gap: 32px; align-items: center; }
  .journal-item.no-photo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .journal-photo img { transition: none; } .journal-item:hover .journal-photo img { transform: none; } }

.post-hero { padding-bottom: clamp(24px, 4vw, 40px); }
.post-hero h1 { max-width: 20em; }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 16px; color: var(--text-soft); }
.post-meta span::after { content: "\00B7"; margin-left: 14px; color: var(--gold); }
.post-photo { margin: 0 auto; max-width: var(--max); }
.post-photo img { width: 100%; max-width: 1080px; aspect-ratio: 40 / 21; object-fit: cover; border-radius: 8px; background: var(--linen); }
.post-main { padding: clamp(32px, 6vw, 64px) 0 clamp(40px, 7vw, 72px); background: var(--cream); }
.post-body > p, .post-body > ul, .post-body > ol, .post-body > h2, .post-body > h3 { max-width: 34em; }
.post-body > p:first-child { font-family: var(--serif); font-size: clamp(21px, 3.2vw, 24px); line-height: 1.45; }
.post-body h2 { font-size: clamp(26px, 4.4vw, 34px); line-height: 1.12; margin: 44px 0 14px; }
.post-body ul, .post-body ol { padding-left: 1.2em; margin: 0 0 18px; }
.post-body li { margin: 0 0 10px; padding-left: 4px; }
.post-body li::marker { color: var(--gold-mark); }
.post-body a { color: var(--gold-deep); text-underline-offset: 3px; overflow-wrap: anywhere; }
.post-faq { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--rule); }
.post-faq h2 { font-size: clamp(26px, 4.4vw, 34px); margin: 32px 0 14px; }
.post-faq h3 { margin: 22px 0 8px; }
.post-back { margin: 40px 0 0; }
.post-back a { display: inline-block; padding: 11px 0; color: var(--gold-deep); font-weight: 700; }
.post-back a::before { content: "\2190"; margin-right: 8px; }

/* ---- a text section added in Admin > Home page: Light, Warm or Dark */
.home-text { padding: clamp(56px, 10vw, 104px) 0; background: var(--cream); border-top: 1px solid var(--rule); }
.home-text-tint { background: var(--linen); }
.home-text-dark { background: var(--ink); border-top-color: var(--ink); color: var(--text-light); }
.home-text-dark h2, .home-text-dark h3, .home-text-dark .prose, .home-text-dark .prose > p:first-child { color: var(--text-light); }
.home-text-dark .kicker, .home-text-dark .prose a { color: var(--gold-hi); }
.home-text .prose > :last-child { margin-bottom: 0; }
.home-text .prose img { border-radius: 8px; }