/* ===========================================================================
   cbttherapy.us.com
   Grammar: chaptered editorial. Seven chapters, hard cuts, margin folio,
   one signature move (the re-rating rail in chapter 3).
   The engine (engine/scrollcraft.css, engine/scrollcraft.js) is untouched:
   everything below is either a token override or this page's own markup.
   ========================================================================= */

/* ------------------------------------------------------------- faces ---- */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

/* ------------------------------------------------------------ tokens ---- */
:root {
  /* six roles, one hue: deep petrol ground, bone ink, warm coral accent */
  --sc-canvas:     #0b1d22;
  --sc-surface:    #102b31;
  --sc-ink:        #efe9df;
  --sc-ink-soft:   #a8bcbd;
  --sc-accent:     #e0725e;
  --sc-accent-ink: #0b1d22;

  --sc-hairline:        rgba(239, 233, 223, 0.16);
  --sc-hairline-strong: rgba(239, 233, 223, 0.32);

  --sc-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Inter", system-ui, -apple-system, sans-serif;

  --focus:     #ffbf47;
  --focus-ink: #0b1d22;

  /* type ramp. Tracking tightens as size grows. */
  --t-title: clamp(2.05rem, 5.1vw, 4.3rem);
  --t-h2:    clamp(1.62rem, 3.2vw, 2.75rem);
  --t-h3:    clamp(1.06rem, 0.98rem + 0.5vw, 1.32rem);
  --t-body:  clamp(1rem, 0.965rem + 0.18vw, 1.09rem);
  --t-lede:  clamp(1.12rem, 1.02rem + 0.55vw, 1.4rem);
  --t-small: clamp(0.82rem, 0.79rem + 0.16vw, 0.9rem);
  --t-fine:  clamp(0.74rem, 0.72rem + 0.1vw, 0.8rem);

  --gutter: clamp(1rem, 4vw, 3.5rem);
  --measure: 62ch;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ------------------------------------------------------------- shell ---- */
html { background: #0b1d22; }
body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--t-body);
  font-variation-settings: "wght" 420;
  line-height: 1.68;
  letter-spacing: 0.004em;
  overflow-x: clip;
}
::selection { background: var(--sc-accent); color: #0b1d22; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-ink), 0 0 0 6px rgba(11, 29, 34, 0.45);
  border-radius: 2px;
}
/* On the bone ground the amber measures 1.36:1, so the two rings swap: the
   petrol outline carries the contrast against bone (14.3:1) and the amber
   becomes the 2px inner ring against the petrol (10.6:1). Both grounds pass. */
.ch--light :focus-visible,
body.is-light .folio :focus-visible,
body.is-light .rail :focus-visible {
  outline: 2px solid var(--focus-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus), 0 0 0 6px rgba(239, 233, 223, 0.5);
}

.skip {
  position: absolute; left: var(--gutter); top: 0.5rem;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--sc-ink); color: #0b1d22;
  padding: 0.55rem 0.9rem;
  font-size: var(--t-small);
  text-decoration: none;
  transition: transform 180ms var(--ease);
}
.skip:focus-visible { transform: none; }

.wrap {
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: 70rem; }

/* ------------------------------------------------------- display type --- */
.display {
  font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 72, "wght" 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}
h1.title {
  font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 80, "wght" 440;
  font-size: var(--t-title);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0;
  max-width: 17ch;
  text-wrap: balance;
}
.ch__h {
  font-size: var(--t-h2);
  letter-spacing: -0.022em;
  max-width: 22ch;
}
h3, .h3 {
  font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 24, "wght" 500;
  font-size: var(--t-h3);
  line-height: 1.24;
  letter-spacing: -0.012em;
  margin: 0;
}
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
.body + .body { margin-top: 1.1em; }
.soft { color: var(--sc-ink-soft); }
.lede {
  font-size: var(--t-lede);
  line-height: 1.48;
  letter-spacing: -0.012em;
  max-width: 34ch;
}
strong, b { font-variation-settings: "wght" 600; }

a { color: inherit; }
.link {
  color: var(--sc-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(224, 114, 94, 0.55);
  transition: text-decoration-color 160ms var(--ease), color 160ms var(--ease);
  word-break: break-word;
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
}
.link:active { transform: translateY(1px); display: inline-block; }

/* --------------------------------------------------------- the folio ---- */
/* Navigation for the whole page. There is no bar. */
.folio {
  position: fixed;
  z-index: 80;
  font-size: var(--t-fine);
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--sc-ink);
}
.folio__chap { display: flex; gap: 0.55rem; align-items: baseline; margin: 0; max-width: none; }
.folio__num {
  font-family: var(--sc-font-display);
  font-variation-settings: "opsz" 14, "wght" 500;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--sc-accent);
  font-variant-numeric: tabular-nums;
}
.folio__title { color: var(--sc-ink); opacity: 0.86; }
.folio__stamp {
  margin: 0;
  color: var(--sc-ink-soft);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.folio__stamp[data-on="1"] { opacity: 1; }
.folio__stamp b {
  font-family: var(--sc-font-display);
  font-variation-settings: "opsz" 14, "wght" 500;
  color: var(--sc-accent);
}
.folio__link {
  color: var(--sc-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--sc-hairline-strong);
  transition: text-decoration-color 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .folio__link:hover { text-decoration-color: var(--sc-accent); }
}

/* narrow: a quiet strip at the top, two rows, never over the prose */
@media (max-width: 1279px) {
  .folio {
    top: 0; left: 0; right: 0;
    background: var(--sc-canvas);
    border-bottom: 1px solid var(--sc-hairline);
    padding: 0.45rem var(--gutter) 0.5rem;
    display: grid;
    gap: 0.1rem;
  }
  .folio__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .folio__chap { min-width: 0; }
  .folio__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .folio__stamp { white-space: nowrap; }
}
/* wide: the left margin of the page, at the foot, as a printed folio */
@media (min-width: 1280px) {
  .folio {
    left: 2rem;
    bottom: 2.75rem;
    width: 9.5rem;
    display: grid;
    gap: 0.9rem;
  }
  .folio__row { display: grid; gap: 0.5rem; }
  .folio__chap { display: grid; gap: 0.3rem; }
  .folio__num { font-size: 1.5rem; }
  .folio::before {
    content: "";
    display: block;
    width: 2.25rem; height: 1px;
    background: var(--sc-accent);
  }
}

/* ---------------------------------------------------- the re-rating rail */
/* The signature move. Fixed in the right margin for the length of chapter 3,
   stepping down on the evidence the reader passes. Wide screens only; below
   1200px the same figure lives in the folio strip. */
.rail {
  position: fixed;
  right: 2rem;
  top: 50%;
  translate: 0 -50%;
  width: 8.5rem;
  z-index: 80;
  display: none;
  opacity: 0;
  transition: opacity 420ms var(--ease);
}
@media (min-width: 1280px) {
  .rail { display: block; }
  .rail[data-on="1"] { opacity: 1; }
}
.rail__label {
  font-size: var(--t-fine);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0 0 0.75rem;
}
.rail__fig {
  font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 60, "wght" 400;
  font-size: clamp(2rem, 2.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.rail__fig em { font-style: normal; color: var(--sc-accent); }
.rail__of { font-size: var(--t-fine); color: var(--sc-ink-soft); letter-spacing: 0.02em; }
.rail__name { font-size: var(--t-fine); color: var(--sc-ink-soft); margin: 0.45rem 0 1rem; }
.rail__track {
  position: relative;
  height: 8.5rem;
  width: 1px;
  background: var(--sc-hairline);
  margin-left: 0.2rem;
}
.rail__tick {
  position: absolute; left: 0; width: 0.55rem; height: 1px;
  background: var(--sc-hairline-strong);
}
.rail__mark {
  position: absolute; left: -0.28rem; top: 0;
  width: 0.62rem; height: 0.62rem;
  background: var(--sc-accent);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: top 520ms var(--ease);
}

/* ------------------------------------------------------- the chapters --- */
main { padding-top: 3.6rem; }
/* The folio and the rail live in the page margins, so the TEXT column is inset
   at wide widths, never the section. A chapter's ground has to run edge to
   edge or the hard cut between petrol and bone reads as a floating panel. */
@media (min-width: 1280px) {
  main { padding-top: 0; }
  /* The margins belong to the furniture: the folio on the left, the re-rating
     rail on the right. Reserving them on the SECTION keeps every ground running
     edge to edge, and the reading block then centres in the space between them
     with symmetric gutters instead of hugging the left and leaving a dead third
     on the right. */
  .ch { padding-inline: 12.5rem 11rem; }
  .wrap { max-width: 62rem; }
  .wrap--wide { max-width: 92rem; }
}

.ch {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  position: relative;
  padding-block: clamp(3rem, 6vw, 6rem);
}
.ch--tight { padding-block-start: 0; }
.ch--light {
  --sc-canvas: #efe9df;
  --sc-surface: #e7dfd2;
  --sc-ink: #0b1d22;
  --sc-ink-soft: #41565a;
  --sc-accent: #9e3a26;
  --sc-accent-ink: #efe9df;
  --sc-hairline: rgba(11, 29, 34, 0.2);
  --sc-hairline-strong: rgba(11, 29, 34, 0.42);
  color: var(--sc-ink);
  background: var(--sc-canvas);
  font-variation-settings: "wght" 400;
}
.ch--light .link { text-decoration-color: rgba(158, 58, 38, 0.5); }

/* chapter opening: a thin accent rule, then the heading. The space belongs
   above the heading, not below it. */
.open { display: grid; gap: clamp(0.8rem, 1.5vw, 1.2rem); margin-bottom: clamp(1.3rem, 2.2vw, 2rem); }
.open__rule { width: 3.25rem; height: 1px; background: var(--sc-accent); border: 0; margin: 0; }
.open + .body { margin-top: 0; }
.ch__h + .body { margin-top: clamp(1.35rem, 2.1vw, 2.1rem); }
.h-gap { margin-top: clamp(2.6rem, 5vw, 4.5rem); }
.h-gap + * { margin-top: clamp(1.35rem, 2.1vw, 2.1rem); }

/* ============================================================ chapter 1 = */
.titlepage {
  min-height: calc(100svh - 3.6rem);
  display: grid;
  align-content: center;
  padding-block: clamp(3rem, 9vh, 7rem);
  position: relative;
  overflow: clip;
}
@media (min-width: 1280px) {
  /* No forced viewport height: generous padding makes this a title page
     rather than an empty screen, and the type sets the height. */
  .titlepage { min-height: 0; padding-block: 14vh 10vh; }
  /* the title block and the opening column share one left edge */
  #chapter-1 .wrap { max-width: 78rem; }
  h1.title { font-size: clamp(4.4rem, 3.5rem + 3.333vw, 7.5rem); letter-spacing: -0.034em; }
}

/* The reader's own thought, above the title and plainly readable. It sits in
   the flow, so it can never cross the headline at any width. */
.titleblock { display: grid; gap: clamp(0.85rem, 1.8vw, 1.5rem); justify-items: start; }
.thought {
  margin: 0;
  max-width: 24ch;
  font-family: var(--sc-font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 32, "wght" 400;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: 1.24;
  letter-spacing: -0.012em;
  color: var(--sc-ink-soft);
  text-wrap: balance;
}
.titlepage__inner { position: relative; z-index: 1; display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.byline {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--sc-ink-soft);
  max-width: 54ch;
}
.byline b { color: var(--sc-ink); font-variation-settings: "wght" 560; }
.titlelinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  max-width: none;
  font-size: var(--t-small);
  letter-spacing: 0.02em;
}

/* chapter 1 body: the lede column beside the scene plate */
.opening {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 860px) {
  .opening { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: clamp(2.5rem, 5vw, 5rem); }
}
.opening__text { display: grid; gap: 1.4rem; align-content: start; }
.standfirst {
  font-size: var(--t-lede);
  line-height: 1.5;
  letter-spacing: -0.008em;
  max-width: 40ch;
}
.creds {
  font-size: var(--t-small);
  color: var(--sc-ink-soft);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--sc-hairline);
  padding-top: 1rem;
  max-width: 40ch;
}

/* the scene: an arch-masked photograph in the chapter-one media column, the
   same arch as the chapter-six portraits. The frame is static so the caption
   under it never moves; only the image inside it carries the parallax, and it
   is oversized top and bottom so no edge of the plane can enter the arch. */
.scene { margin: 0; display: grid; gap: 0.9rem; }
.scene__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: clip;
  border-radius: 50vw 50vw 2px 2px;   /* the arch */
  background: #0d232a;
  box-shadow: 0 2px 4px rgba(4, 12, 15, 0.3), 0 18px 40px -12px rgba(4, 12, 15, 0.5);
}
.scene__frame picture { display: contents; }
.scene__frame img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(0.9) contrast(1.02);
  will-change: transform;
}
/* the caption rule runs the full width of the frame above it, never short of
   it; the column itself is what keeps the measure honest. */
.scene__caption {
  border-top: 1px solid var(--sc-hairline);
  padding-top: 0.8rem;
  line-height: 1.6;
  max-width: 100%;
}
.scene__caption a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--sc-hairline-strong);
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .scene__caption a:hover { color: var(--sc-ink); text-decoration-color: var(--sc-accent); }
}
@media (max-width: 859px) {
  .scene { max-width: 22rem; }
  .scene__frame { aspect-ratio: 4 / 5; }
}

/* ============================================================ chapter 2 = */
/* six steps, one hairline at a time. Numbers sit in the margin. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.steps > li {
  display: grid;
  gap: 0.35rem 1.5rem;
  padding-block: clamp(1.1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--sc-hairline);
}
.steps > li:last-child { border-bottom: 1px solid var(--sc-hairline); }
@media (min-width: 760px) {
  .steps > li { grid-template-columns: 3.25rem minmax(0, 1fr); }
}
.steps__n {
  font-family: var(--sc-font-display);
  font-variation-settings: "opsz" 20, "wght" 400;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--sc-accent);
  font-variant-numeric: tabular-nums;
}
.steps p { max-width: 58ch; margin: 0; }
.steps strong { color: var(--sc-ink); }

/* the technique run: term and explanation across a hairline */
.defs { display: grid; margin-top: clamp(1.4rem, 2.5vw, 2rem); }
.defs > div {
  display: grid;
  gap: 0.4rem 2rem;
  padding-block: clamp(1.15rem, 2vw, 1.7rem);
  border-top: 1px solid var(--sc-hairline);
}
.defs > div:last-child { border-bottom: 1px solid var(--sc-hairline); }
@media (min-width: 760px) {
  .defs > div { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); }
}
.defs p { max-width: 56ch; }

/* a quieter aside column, for the walk-through */
.aside-note {
  border-left: 1px solid var(--sc-accent);
  padding-left: clamp(1rem, 2vw, 1.6rem);
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
}

/* ============================================================ chapter 3 = */
.record {
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  box-shadow: inset 0 1px 0 rgba(239, 233, 223, 0.07),
              0 3px 6px rgba(4, 12, 15, 0.28),
              0 24px 60px -18px rgba(4, 12, 15, 0.55);
  padding: clamp(1.2rem, 3vw, 2.6rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.record__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--sc-hairline-strong);
  max-width: none;
}
.record__title {
  font-family: var(--sc-font-display);
  font-variation-settings: "opsz" 24, "wght" 500;
  font-size: var(--t-h3);
  letter-spacing: -0.01em;
  margin: 0;
}
.record__meta { font-size: var(--t-fine); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0; }
.record__rows { margin: 0; display: grid; }
.record__row {
  display: grid;
  gap: 0.3rem 2rem;
  padding-block: clamp(0.9rem, 1.6vw, 1.35rem);
  border-bottom: 1px solid var(--sc-hairline);
}
.record__row:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 720px) {
  .record__row { grid-template-columns: 11rem minmax(0, 1fr); }
}
.record__row dt {
  font-size: var(--t-fine);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  padding-top: 0.2em;
}
.record__row dd { margin: 0; max-width: 56ch; }
.record__row dd q, .record__row dd .said {
  font-family: var(--sc-font-display);
  font-variation-settings: "opsz" 28, "wght" 400;
  font-size: clamp(1.1rem, 1.6vw, 1.38rem);
  line-height: 1.34;
  letter-spacing: -0.012em;
  display: block;
}
/* the balanced thought wipes across the automatic one */
.wipe { display: grid; }
.wipe__from, .wipe__to {
  grid-area: 1 / 1;
  padding-block: 0.14em 0.22em;
}
.wipe__to {
  background: var(--sc-surface);
  color: var(--sc-ink);
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  align-self: start;
}
.wipe__from { color: var(--sc-ink-soft); opacity: 0.45; align-self: start; }
@media (prefers-reduced-motion: reduce) {
  .wipe__to { clip-path: none !important; }
}
.record__note { margin-top: clamp(1.4rem, 2.5vw, 2rem); }

.list { list-style: none; margin: 0; padding: 0; display: grid; }
.list > li {
  padding-block: clamp(0.85rem, 1.4vw, 1.15rem);
  border-top: 1px solid var(--sc-hairline);
  max-width: 68ch;
}
.list > li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.list strong { color: var(--sc-ink); }
.list--loose > li { padding-block: clamp(1rem, 1.8vw, 1.5rem); }

/* ============================================================ chapter 4 = */
.spread { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem) clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 900px) {
  .spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.spread article { display: grid; gap: 0.5rem; padding-top: 1.1rem; border-top: 1px solid var(--sc-hairline); }
.spread article p { max-width: 46ch; }

.cmp-wrap { overflow-x: auto; overscroll-behavior-x: contain; margin-top: clamp(1.4rem, 2.5vw, 2rem); }
.cmp-wrap:focus-visible { outline-offset: 4px; }
table.cmp {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: var(--t-small);
  text-align: left;
}
table.cmp th, table.cmp td {
  border-top: 1px solid var(--sc-hairline);
  padding: 0.85rem 1.25rem 0.85rem 0;
  vertical-align: top;
  max-width: 22ch;
}
table.cmp thead th {
  border-top: 0;
  border-bottom: 1px solid var(--sc-hairline-strong);
  font-family: var(--sc-font-display);
  font-variation-settings: "opsz" 20, "wght" 500;
  font-size: var(--t-h3);
  letter-spacing: -0.01em;
  padding-bottom: 0.9rem;
}
table.cmp tbody th {
  font-variation-settings: "wght" 560;
  color: var(--sc-ink);
  width: 9rem;
}
table.cmp td { color: var(--sc-ink-soft); }

/* ========================================================== chapter 4b = */
.faq { margin-top: clamp(1.2rem, 2vw, 1.8rem); border-top: 1px solid var(--sc-hairline); }
.faq details { border-bottom: 1px solid var(--sc-hairline); }
.faq summary {
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  padding-block: clamp(0.95rem, 1.6vw, 1.25rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--sc-font-display);
  font-variation-settings: "opsz" 22, "wght" 500;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.012em;
  transition: color 160ms var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.85rem; height: 0.85rem;
  margin-top: 0.4em;
  background:
    linear-gradient(var(--sc-accent), var(--sc-accent)) center/100% 1px no-repeat,
    linear-gradient(var(--sc-accent), var(--sc-accent)) center/1px 100% no-repeat;
  transition: transform 220ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(180deg); background-size: 100% 1px, 0 0; }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--sc-accent); }
}
.faq summary:focus-visible { outline-offset: -2px; }
.faq details > p { padding-bottom: clamp(1rem, 1.8vw, 1.5rem); max-width: 58ch; }
.faq details > p:first-of-type { margin-top: -0.2rem; }

/* =========================================================== chapter 5 = */
/* a printed plate on bone, hard cut from the petrol */
.plate {
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  /* The plate is sized by what is printed on it. Left to fill the wide
     column it would stretch a third wider than the route text can reach,
     which is the empty panel the reading measure was there to prevent. */
  max-width: 60rem;
  padding: clamp(1.2rem, 3vw, 2.75rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 0 2px 3px rgba(11, 29, 34, 0.07), 0 20px 44px -22px rgba(11, 29, 34, 0.28);
}
.routes { display: grid; }
.routes > article {
  display: grid;
  gap: 0.6rem 2.5rem;
  padding-block: clamp(1.25rem, 2.4vw, 2rem);
  border-top: 1px solid var(--sc-hairline);
}
.routes > article:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 880px) {
  .routes > article { grid-template-columns: 8.5rem minmax(0, 1fr); }
}
.routes__n {
  font-family: var(--sc-font-display);
  font-variation-settings: "opsz" 28, "wght" 400;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.2;
  color: var(--sc-accent);
  letter-spacing: -0.01em;
}
.routes h3 { margin-bottom: 0.15rem; }
.routes p { max-width: 62ch; }

/* =========================================================== chapter 6 = */
.people { display: grid; margin-top: clamp(1.4rem, 2.5vw, 2.2rem); }
/* Four therapists read as two pairs, not a column with a long empty right
   side. Each block stays a row: the arch beside the name, so the frame height
   sits against the text height and no gap opens under either. */
@media (min-width: 1024px) {
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
  .person:nth-last-child(-n + 2) { border-bottom: 1px solid var(--sc-hairline); }
}
.person {
  --frame: 132px;
  display: grid;
  grid-template-columns: var(--frame) minmax(0, 1fr);
  gap: 0.9rem clamp(1.1rem, 2.2vw, 1.6rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--sc-hairline);
  align-items: start;
}
.person:last-child { border-bottom: 1px solid var(--sc-hairline); }
@media (max-width: 479px) {
  .person { --frame: 96px; }
}
.person__frame {
  position: relative;
  width: var(--frame);
  aspect-ratio: 4 / 5;   /* the frame's natural shape, and its floor */
  align-self: stretch;   /* taller text pulls the arch down with it, so the
                            column beside the name never ends in dead space */
  overflow: clip;
  border-radius: 50vw 50vw 2px 2px;   /* the arch */
  background: var(--sc-surface);
}
.person__frame img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 50% 15%;
  filter: saturate(0.82) contrast(1.02);
  will-change: transform;
}
.person__body { display: grid; gap: 0.5rem; }
.person__name { margin: 0; }
.person__name span { color: var(--sc-ink-soft); font-variation-settings: "opsz" 24, "wght" 400; }
.person p { max-width: 54ch; }
.person .link { font-size: var(--t-small); }

.filmstrip { margin: clamp(2.2rem, 4vw, 3.5rem) 0 0; display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .filmstrip { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); align-items: end; gap: clamp(2rem, 4vw, 3.5rem); }
}
.filmstrip video {
  width: 100%;
  height: auto;
  filter: saturate(0.88);
  border: 1px solid var(--sc-hairline);
  background: #08171b;
}
.filmstrip figcaption {
  font-size: var(--t-small);
  color: var(--sc-ink-soft);
  border-top: 1px solid var(--sc-hairline);
  padding-top: 0.9rem;
  max-width: 34ch;
}

/* =========================================================== chapter 7 = */
.colophon {
  border-top: 1px solid var(--sc-hairline-strong);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.5rem);
  font-size: var(--t-small);
}
@media (min-width: 880px) {
  .colophon { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.colophon p { max-width: 44ch; line-height: 1.7; }
.colophon .mark { width: 8.5rem; height: auto; opacity: 0.9; margin-bottom: 1.1rem; }
.address { display: grid; gap: 0.15rem; }
.crisis {
  border-top: 1px solid var(--sc-accent);
  padding-top: 1rem;
  color: var(--sc-ink);
  font-variation-settings: "wght" 520;
}
.fineprint { color: var(--sc-ink-soft); font-size: var(--t-fine); }

/* the legal line: a quiet hairline row of underlined links, full width of
   the colophon grid at desktop, echoing the folio's own underline treatment
   rather than the coral .link accent, so it stays below the CTAs. */
.colophon__legal {
  grid-column: 1 / -1;
  margin-top: clamp(0.4rem, 1vw, 0.8rem);
  padding-top: 1rem;
  border-top: 1px solid var(--sc-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}
.colophon__legal a {
  font-size: var(--t-small);
  color: var(--sc-ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--sc-hairline-strong);
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .colophon__legal a:hover { color: var(--sc-ink); text-decoration-color: var(--sc-accent); }
}

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .scene__frame img, .person__frame img { transform: none !important; }
  .rail__mark, .folio__stamp, .faq summary::after { transition: none; }
}

/* ------------------------------------------------------------- narrow --- */
@media (max-width: 420px) {
  h1.title { font-size: clamp(1.85rem, 8.4vw, 2.3rem); }
  .thought { font-size: clamp(1.35rem, 5.6vw, 1.6rem); }
}

/* ---------------------------------------------------------- utilities --- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.faq summary h3 { margin: 0; font: inherit; letter-spacing: inherit; }

/* ------------------------------------------ folio on the light ground --- */
/* The folio and the rail are fixed, so the ground changes under them. When a
   chapter cuts to bone, page.js sets .is-light and they re-ink. The token is
   restated together with `color`, because inherited colour does not re-resolve
   on its own. */
body.is-light .folio,
body.is-light .rail {
  --sc-canvas: #efe9df;
  --sc-ink: #0b1d22;
  --sc-ink-soft: #41565a;
  --sc-accent: #9e3a26;
  --sc-hairline: rgba(11, 29, 34, 0.2);
  --sc-hairline-strong: rgba(11, 29, 34, 0.42);
  color: var(--sc-ink);
}