/* =====================================================================
   DR. ANJALI GUPTA — style.css
   Design system: "The Ledger" — a heritage document, not a dashboard.
   · Newsreader (literary display) + Karla (humanist body)
   · Aged-paper sepia ground, sindoor maroon, antique gold
   · Fixed sidebar table-of-contents; chapters scroll like a book
   · Hairline rules, dotted leaders, drop caps, a wax-seal CTA
   · Light default + full dark theme (html[data-theme="dark"])
   Sharp corners everywhere — this site does not borrow the
   rounded-card language of a modern SaaS page. That is the point.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --paper:    #F6F0E1;  /* aged paper ground */
  --paper-2:  #FBF7EB;  /* lighter leaf */
  --ink:      #2B2318;  /* sepia ink */
  --muted:    #6F6049;  /* faded ink */
  --maroon:   #7A2E2E;  /* sindoor maroon — the practice's colour */
  --maroon-d: #5E2222;
  --gold:     #A17E2E;  /* antique gold */
  --rule:     #D9CCAE;  /* hairlines */
  --rule-2:   #C4B48D;
  --shadow:   0 14px 40px -20px rgba(43,35,24,.28);
  --serif:    "Newsreader", Georgia, "Times New Roman", serif;
  --sans:     "Karla", "Segoe UI", system-ui, sans-serif;
  --ease:     cubic-bezier(.25,.7,.3,1);
}

html[data-theme="dark"] {
  --paper:   #1A1510;
  --paper-2: #221C13;
  --ink:     #EFE7D2;
  --muted:   #A99C82;
  --maroon:  #C06060;
  --maroon-d:#A54D4D;
  --gold:    #C7A45A;
  --rule:    #3A3125;
  --rule-2:  #4A3E2D;
  --shadow:  0 14px 40px -20px rgba(0,0,0,.6);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background .4s var(--ease), color .4s var(--ease);
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.005em; margin: 0 0 .45em; line-height: 1.18; }
p { margin: 0 0 1.1em; }
a { color: var(--maroon); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--maroon) 35%, transparent); transition: color .2s, border-color .2s; }
a:hover { color: var(--gold); border-bottom-color: var(--gold); }
ul { list-style: none; margin: 0; padding: 0; }
img, svg { max-width: 100%; vertical-align: middle; }
:focus-visible { outline: 2px dashed var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; z-index: 200; background: var(--maroon); color: #F6F0E1; padding: 10px 16px; }
.skip-link:focus { left: 0; }

/* sample badge — placeholder content pending client confirmation */
.sample {
  display: inline-block; font: 700 9.5px/1 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; color: #F6F0E1; background: var(--gold);
  padding: 4px 8px; vertical-align: middle; cursor: help; border-radius: 0;
}
mark.sample { font: 700 10px/1 var(--sans); letter-spacing: .06em; padding: 2px 7px; background: var(--gold); color: #F6F0E1; border-radius: 0; text-transform: uppercase; }
.sample-card { border: 1px dashed var(--gold); }

/* ---------- 3. The book grid: sidebar + leaf ---------- */
.book { display: grid; grid-template-columns: 316px 1fr; min-height: 100vh; }

.sidebar {
  border-right: 1px solid var(--rule);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--maroon) 5%, var(--paper)), var(--paper) 30%),
    var(--paper);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  scrollbar-width: thin;
}
.side-inner { display: flex; flex-direction: column; height: 100%; padding: 34px 26px 26px; }

/* wordmark + wax seal */
.wordmark { display: flex; gap: 14px; align-items: center; color: var(--ink); border-bottom: 0; padding-bottom: 24px; margin-bottom: 26px; }
.wordmark:hover { color: var(--ink); }
.seal {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font: 500 19px/1 var(--serif); color: #F6F0E1;
  background: radial-gradient(120% 120% at 30% 25%, #9C4A4A, var(--maroon) 60%, var(--maroon-d));
  box-shadow: inset 0 0 0 2px rgba(246,240,225,.35), inset 0 0 12px rgba(0,0,0,.25), var(--shadow);
}
.seal-sm { width: 38px; height: 38px; font-size: 15px; }
.wm-text { display: flex; flex-direction: column; gap: 2px; }
.wm-text strong { font: 600 20px/1.1 var(--serif); }
.wm-text small { font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wm-text em { font: 400 12.5px/1.2 var(--serif); font-style: italic; color: var(--gold); }

/* chapters TOC with dotted leaders */
.chapters { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.chap {
  display: flex; align-items: baseline; gap: 10px;
  font: 500 15.5px/1.3 var(--sans); color: var(--muted);
  padding: 10px 8px; border-bottom: 0; border-left: 2px solid transparent;
  transition: color .2s, border-left-color .2s, background .2s;
}
.chap:hover { color: var(--ink); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.chap.active { color: var(--maroon); border-left-color: var(--maroon); font-weight: 700; }
.chap .no { font: 500 13px/1 var(--serif); font-style: italic; color: var(--gold); width: 22px; flex: none; }
.chap.active .no { color: var(--maroon); }
.chap .dots { flex: 1; border-bottom: 1.5px dotted var(--rule-2); transform: translateY(-3px); }

/* sidebar footer */
.side-foot { border-top: 3px double var(--rule-2); padding-top: 18px; margin-top: 18px; }
.side-contacts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.side-contacts a { font: 700 14px/1.2 var(--sans); }
.side-actions { display: flex; flex-direction: column; gap: 10px; }
.theme-toggle {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font: 600 12.5px/1 var(--sans); letter-spacing: .04em; color: var(--muted);
  background: transparent; border: 1px solid var(--rule-2); padding: 9px 14px;
  cursor: pointer; transition: color .2s, border-color .2s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--gold); }
.ic-moon { display: none; }
html[data-theme="dark"] .ic-sun { display: none; }
html[data-theme="dark"] .ic-moon { display: inline; }
.begin-btn {
  display: block; text-align: center; border: 0; border-bottom: 0;
  font: 700 14px/1 var(--sans); letter-spacing: .02em;
  background: var(--maroon); color: #F6F0E1; padding: 14px 18px;
  transition: background .2s, transform .2s var(--ease);
}
.begin-btn:hover { background: var(--maroon-d); color: #F6F0E1; transform: translateY(-1px); }

/* ---------- 4. The leaf (main column) ---------- */
.leaf { background: var(--paper-2); border-left: 0; position: relative; min-width: 0; }
.leaf::before { /* subtle paper grain + spine line */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--rule) 18%, transparent) 3px 4px);
  opacity: .35; mix-blend-mode: multiply;
}
html[data-theme="dark"] .leaf::before { opacity: .18; mix-blend-mode: normal; }

.view { display: none; position: relative; }
.view.active { display: block; animation: leafIn .5s var(--ease); }
@keyframes leafIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.chapter-head {
  padding: 72px 0 0; max-width: 720px; margin: 0 auto; padding-left: 46px; padding-right: 46px;
}
.chapter-no { font: 500 13px/1 var(--serif); font-style: italic; color: var(--gold); margin: 0 0 10px; }
.chapter-title {
  font-size: clamp(2.2rem, 4.4vw, 3.1rem); font-weight: 400;
  border-bottom: 3px double var(--rule-2); padding-bottom: 18px; margin-bottom: 8px;
}
.chapter-sub { font: 400 1.02rem/1.4 var(--serif); font-style: italic; color: var(--muted); margin-bottom: 0; }
.col { max-width: 720px; margin: 0 auto; padding: 44px 46px 90px; }

/* ---------- 5. Editorial type ---------- */
.drop::first-letter {
  float: left; font: 400 4.1em/0.82 var(--serif); color: var(--maroon);
  padding: 8px 12px 0 0;
}
.rule-h {
  font-size: 1.5rem; margin: 54px 0 18px; padding-top: 26px;
  border-top: 3px double var(--rule-2);
}
.col p { color: color-mix(in srgb, var(--ink) 88%, var(--muted)); }
.col strong { color: var(--ink); }

/* verified numbers colophon — double-ruled like a ledger line, no boxy border */
.numbers {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-block: 3px double var(--rule-2);
  background: color-mix(in srgb, var(--gold) 4%, var(--paper));
  margin: 44px 0 8px;
}
.number { padding: 24px 18px; border-right: 1px solid var(--rule); text-align: center; }
.number:last-child { border-right: 0; }
.number strong { display: block; font: 400 2.35rem/1 var(--serif); color: var(--maroon); font-variant-numeric: oldstyle-nums; }
.number strong span { font-size: 1.6rem; color: var(--gold); }
.number span { display: block; font: 400 11.5px/1.45 var(--sans); color: var(--muted); margin-top: 7px; }
.src { font-size: 11px; }

/* "what people bring" list */
.brought { margin: 10px 0 0; }
.brought li {
  display: grid; grid-template-columns: 128px 1fr; gap: 18px;
  padding: 20px 0; border-bottom: 1px solid var(--rule);
}
.brought em { font: 500 1.15rem/1.2 var(--serif); font-style: italic; color: var(--maroon); }
.brought p { margin: 0; font-size: 14.8px; color: var(--muted); }

/* pull quote */
.pullquote { margin: 48px 0 0; padding: 26px 30px; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 6%, var(--paper)); position: relative; }
.pullquote blockquote { margin: 0; font: 400 1.28rem/1.5 var(--serif); font-style: italic; }
.pullquote figcaption { margin-top: 12px; font: 700 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* invitation (CTA) */
.invitation { margin-top: 64px; border: 1px solid var(--rule-2); background: var(--paper); padding: 36px 34px; text-align: center; }
.invitation h2 { font-size: 1.6rem; margin-bottom: 8px; }
.invitation p { color: var(--muted); max-width: 40em; margin: 0 auto 22px; }
.seal-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 15px/1 var(--sans); background: var(--maroon); color: #F6F0E1;
  border: 0; border-bottom: 0; padding: 16px 28px; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px rgba(246,240,225,.3), var(--shadow);
  transition: background .2s, transform .25s var(--ease);
}
.seal-btn:hover { background: var(--maroon-d); color: #F6F0E1; transform: translateY(-2px); border-bottom: 0; }

/* ---------- 6. Clinician chapter ---------- */
.two-col { display: grid; grid-template-columns: 1.35fr .95fr; gap: 44px; align-items: start; }
.records { border: 1px solid var(--rule-2); background: var(--paper); padding: 26px 24px; position: sticky; top: 24px; }
.rec-h { font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.rec-list { margin-bottom: 26px; }
.rec-list li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px dotted var(--rule-2); }
.rec-list span { font: 700 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rec-list strong { font: 600 13.8px/1.45 var(--sans); }
.rec-links li { padding: 9px 0; border-bottom: 1px dotted var(--rule-2); }
.rec-links a { font: 700 13.5px/1.35 var(--sans); }

/* ---------- 7. Way of working ---------- */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule-2); background: var(--paper); margin: 26px 0; }
.mode { padding: 24px 22px; border-right: 1px solid var(--rule); }
.mode:last-child { border-right: 0; }
.mode em { display: block; font: 500 1.12rem/1.2 var(--serif); font-style: italic; color: var(--maroon); margin-bottom: 8px; }
.mode p { margin: 0; font-size: 13.8px; color: var(--muted); }

/* ---------- 8. The Ledger (services table) ---------- */
.ledger-table { width: 100%; border-collapse: collapse; margin-top: 12px; background: var(--paper); border: 1px solid var(--rule-2); }
.ledger-table th {
  font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 14px 18px; border-bottom: 2px solid var(--rule-2);
}
.ledger-table td { padding: 20px 18px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ledger-table tr:last-child td { border-bottom: 0; }
.ledger-table tr:hover td { background: color-mix(in srgb, var(--gold) 6%, transparent); }
.ledger-table td strong { font: 500 1.1rem/1.25 var(--serif); }
.ledger-table td:nth-child(2) { font-size: 14px; color: var(--muted); width: 46%; }
.ledger-table .num { text-align: right; white-space: nowrap; font: 500 1.2rem/1.1 var(--serif); color: var(--maroon); }
.ledger-table .num .per { display: block; font: 400 10.5px/1.3 var(--sans); color: var(--muted); text-transform: none; }
.ledger-note { font-size: 13px; color: var(--muted); margin-top: 18px; }

/* fee stamp */
.fee-stamp {
  margin: 44px auto 0; width: 230px; height: 230px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  color: var(--maroon);
}
.stamp-ring { position: absolute; inset: 6px; border: 2px solid var(--maroon); border-radius: 50%; opacity: .7; }
.stamp-ring::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--maroon); border-radius: 50%; }
.fee-stamp strong { font: 500 3rem/1 var(--serif); }
.fee-stamp span { font: 700 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin: 6px 14px 8px; }
.fee-stamp a { font: 700 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid currentColor; }

/* ---------- 9. Words & numbers ---------- */
.plaque { display: grid; grid-template-columns: 1fr 1.2fr; border: 3px double var(--rule-2); background: var(--paper); margin: 36px 0; }
.plaque-num { padding: 30px; border-right: 1px solid var(--rule); text-align: center; }
.plaque-num strong { display: block; font: 400 4.2rem/1 var(--serif); color: var(--maroon); }
.plaque-num strong span { font-size: 2.4rem; color: var(--gold); }
.plaque-num em { display: block; font: 400 1rem/1.4 var(--serif); font-style: italic; color: var(--muted); margin-top: 8px; }
.plaque-side { padding: 30px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.plaque-side strong { font: 500 1.5rem/1.2 var(--serif); }
.plaque-side span { font-size: 13.5px; color: var(--muted); }
.plaque-side a { font: 700 13.5px/1 var(--sans); align-self: flex-start; margin-top: 8px; }
.press { margin: 8px 0 40px; }
.press li {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: baseline;
  padding: 14px 4px; border-bottom: 1px solid var(--rule);
}
.press strong { font: 500 1.05rem/1.2 var(--serif); }
.press span { font-size: 13.5px; color: var(--muted); }
.press a { font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote { margin: 0; padding: 24px; border: 1px solid var(--rule-2); background: var(--paper); position: relative; }
.quote .sample { position: absolute; top: 12px; right: 12px; }
.quote blockquote { margin: 0 0 12px; font: 400 1.05rem/1.55 var(--serif); font-style: italic; }
.quote figcaption { font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.fine { font-size: 12.5px; color: var(--muted); margin-top: 20px; }

/* ---------- 10. Fair questions (FAQ) ---------- */
.qq { border: 1px solid var(--rule); background: var(--paper); margin-bottom: 10px; }
.qq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px;
  align-items: center; padding: 18px 22px; font: 600 1.02rem/1.4 var(--sans);
  transition: color .2s;
}
.qq summary:hover { color: var(--maroon); }
.qq summary::-webkit-details-marker { display: none; }
.qq-mark { font: 400 1.5rem/1 var(--serif); color: var(--gold); transition: transform .3s var(--ease); flex: none; }
.qq[open] .qq-mark { transform: rotate(45deg); }
.qq[open] summary { border-bottom: 1px dotted var(--rule-2); color: var(--maroon); }
.qq p { padding: 18px 22px 20px; margin: 0; font-size: 14.5px; color: var(--muted); }

/* ---------- 11. The Registry (booking) ---------- */
.registry-col { max-width: 780px; }
.registry-intro { font: 400 1.06rem/1.6 var(--serif); font-style: italic; color: var(--muted); }
.registry-form { border: 1px solid var(--rule-2); background: var(--paper); padding: 34px 34px 30px; margin: 28px 0 40px; }
.reg-row { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px dotted var(--rule-2); }
.reg-row label { font: 700 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.reg-row label span { font-weight: 400; text-transform: none; letter-spacing: 0; color: color-mix(in srgb, var(--muted) 70%, transparent); }
.reg-row input, .reg-row select, .reg-row textarea {
  font: 400 15.5px/1.45 var(--serif); color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--rule-2);
  padding: 6px 2px 10px; width: 100%; border-radius: 0;
  transition: border-color .25s;
}
.reg-row textarea { resize: vertical; line-height: 1.6; }
.reg-row input:focus, .reg-row select:focus, .reg-row textarea:focus { outline: none; border-bottom-color: var(--maroon); }
.reg-row input.invalid { border-bottom-color: #B03A2E; }
.reg-wide { border-bottom: 0; }
.reg-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-top: 10px; }
.reg-note { font-size: 12px; color: var(--muted); margin: 0; }

.rooms { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
.rooms-map { border: 1px solid var(--rule-2); background: var(--paper); }
.rooms-map iframe { display: block; width: 100%; height: 300px; border: 0; filter: sepia(.25) saturate(.85); }
.rooms-foot { padding: 18px 20px; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--rule); }
.rooms-foot strong { font: 500 1.15rem/1.2 var(--serif); }
.rooms-foot span { font-size: 13px; color: var(--muted); }
.rooms-foot a { font: 700 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; align-self: flex-start; margin-top: 5px; }
.rooms-side { display: flex; flex-direction: column; gap: 20px; }
.hours { border: 1px solid var(--rule-2); background: var(--paper); padding: 20px 22px; }
.hours h2 { font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.hours ul li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dotted var(--rule-2); font-size: 14px; }
.hours ul li:last-child { border-bottom: 0; }
.hours ul span { color: var(--muted); }
.tel { display: inline-block; margin-top: 12px; font: 700 15px/1 var(--sans); }
.crisis { border: 1px solid color-mix(in srgb, var(--maroon) 45%, var(--rule)); background: color-mix(in srgb, var(--maroon) 7%, var(--paper)); padding: 20px 22px; }
.crisis h2 { font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); margin-bottom: 8px; }
.crisis > p { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crisis ul { display: flex; flex-direction: column; gap: 8px; }
.crisis li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.crisis li strong { font: 600 13px/1 var(--sans); color: var(--ink); }
.crisis li a { font: 700 14px/1 var(--sans); color: var(--maroon); }

/* ---------- 12. Colophon (footer) ---------- */
.colophon { border-top: 3px double var(--rule-2); background: var(--paper); }
.colophon .col { padding: 34px 46px 44px; max-width: 720px; }
.colophon p { font: 400 14px/1.6 var(--serif); color: var(--muted); margin: 0; }
.colophon-fine { font-size: 12px; margin-top: 6px !important; }

/* ---------- 13. Topbar (mobile) + toast ---------- */
.topbar {
  display: none; position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule);
}
.topbar-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); border-bottom: 0; padding: 12px 18px; }
.topbar-brand:hover { color: var(--ink); }
.topbar-brand strong { display: block; font: 600 16px/1.1 var(--serif); }
.topbar-brand small { font: 600 9.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: 8px; padding-right: 14px; }
.topbar-actions .theme-toggle { padding: 8px 10px; }
.burger { display: flex; flex-direction: column; gap: 4px; width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--rule-2); cursor: pointer; }
.burger span { width: 18px; height: 2px; background: var(--ink); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.toast {
  position: fixed; left: 50%; bottom: 24px; translate: -50% 18px; z-index: 300;
  background: var(--ink); color: var(--paper); font: 700 13.5px/1.4 var(--sans);
  padding: 13px 22px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .35s, translate .35s var(--ease);
  max-width: min(92vw, 440px); text-align: center;
}
.toast.show { opacity: 1; translate: -50% 0; }

/* reveal */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- 14. Responsive ---------- */
@media (max-width: 1240px) {
  .col, .chapter-head { padding-left: 36px; padding-right: 36px; }
}
@media (max-width: 1000px) {
  .book { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); z-index: 120;
    transform: translateX(-102%); transition: transform .38s var(--ease);
    box-shadow: 0 0 60px rgba(0,0,0,.3);
  }
  .sidebar.open { transform: none; }
  .topbar { display: flex; justify-content: space-between; align-items: center; }
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .number:nth-child(2) { border-right: 0; }
  .number:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .two-col { grid-template-columns: 1fr; }
  .records { position: static; }
  .modes { grid-template-columns: 1fr; }
  .mode { border-right: 0; border-bottom: 1px solid var(--rule); }
  .mode:last-child { border-bottom: 0; }
  .plaque { grid-template-columns: 1fr; }
  .plaque-num { border-right: 0; border-bottom: 1px solid var(--rule); }
  .quotes { grid-template-columns: 1fr; }
  .rooms { grid-template-columns: 1fr; }
  .press li { grid-template-columns: 90px 1fr auto; }
}
Truly Beautiful. I'm absolutely in love with your work. But, I need you to add photos of them, and apart from it as well, we need photos and visuals, which set the mood and theme and make the potential clients of therapist pay to therapist, which in turn, make these therapists pay me. Go Meta-Cognitive. Use Neuromarketing. On their clients, and through design, in my clients. Rest assured, you have done a remarkable job. Proceed for the next 3.  
@media (max-width: 640px) {
  .col, .chapter-head { padding-left: 24px; padding-right: 24px; }
  .chapter-head { padding-top: 54px; }
  .col { padding-top: 32px; }
  .brought li { grid-template-columns: 1fr; gap: 6px; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .ledger-table td:nth-child(2) { display: none; }
  .ledger-table th:nth-child(2) { display: none; }
  .registry-form { padding: 24px 18px; }
  .press li { grid-template-columns: 1fr auto; }
  .press span { grid-column: 1 / -1; }
  .crisis li { flex-direction: column; gap: 2px; align-items: flex-start; }
}

/* ---------- 15. Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}

/* ---------- Plates (photography, added in the photo pass) ----------
   Presented the way old books present images: a double-ruled frame,
   sepia-leaning treatment, a numbered caption set in small caps.     */

.plate {
  margin: 40px 0; border: 3px double var(--rule-2); background: var(--paper);
  padding: 12px; position: relative;
}
.plate img {
  display: block; width: 100%; max-height: 460px; object-fit: cover;
  filter: sepia(.22) saturate(.9) contrast(.98);
  transition: filter .4s ease;
}
.plate:hover img { filter: sepia(.05) saturate(1); }
.plate figcaption {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 12px 6px 4px; border-top: 1px solid var(--rule);
  margin-top: 10px;
}
.plate-no {
  font: 700 11px/1 var(--sans); letter-spacing: .18em; color: var(--gold);
  flex-shrink: 0;
}
.plate figcaption span:last-child, .plate figcaption > span:not(.plate-no) {
  font: 400 13px/1.6 var(--serif); font-style: italic; color: var(--muted);
}
.plate-wide img { max-height: 340px; }
.plate-soft { margin: 30px 0; }
.plate-soft img { max-height: 300px; filter: sepia(.3) saturate(.85); }

/* illustrative-image marker, quieter than a badge */
.smp {
  font-style: normal; font-size: .82em; opacity: .7;
  border: 1px dashed currentColor; border-radius: 999px; padding: 0 7px; margin-left: 5px;
}

@media (max-width: 640px) {
  .plate { padding: 8px; margin: 30px 0; }
  .plate img { max-height: 320px; }
  .plate-wide img, .plate-soft img { max-height: 240px; }
}


/* ---------- 18. Cover plate (real signage, first thing seen) ---------- */
.plate-cover { margin: 26px 0 30px; }
.plate-cover img { max-height: 420px; }
@media (max-width: 640px){ .plate-cover img { max-height: 300px; } }

/* —— mobile tap-target patch (appended by nanonetes mobile pass) —— */
@media (max-width: 720px) {
  .icon-btn,
  [class*="icon-btn"],
  [class*="theme-toggle"],
  button[class*="toggle"] {
    min-width: 44px;
    min-height: 44px;
  }
  nav a,
  header nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 8px;
  }
  a[href*="wa.me"],
  a[href*="whatsapp"],
  a[class*="book"],
  button[class*="book"] {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}