/* ============================================================================
   post.css — the blog: one post, the blog archive, the category archives.

   Loaded on top of tokens.css + base.css + archive.css (fourth sheet, exactly
   as home.css is): the archive pages reuse `.archive`, `.archive-head`,
   `.results-head`, `.noresults`, `.pager` and `.chip` verbatim and this sheet
   only adds what is genuinely new — a reading column, a table of contents, a
   post card and the directory CTA.

   NO NEW COLOURS AND NO NEW TYPE SCALE. Every value below resolves to a token
   already declared in tokens.css. Same breakpoints as its three siblings:
   1180 (gutters step down), 980 (two-column blocks collapse), 640 (the 390px
   artboard).

   THE ONE NUMBER THAT MATTERS MOST IS `--post-measure`. The imported template
   ran body text the full 1,300px of the shell; sixty-five to seventy-five
   characters is the width prose is legible at, and every rule that could widen
   the column again (the hero, the CTA, the TOC) is deliberately outside it
   rather than inside.

   Every `var()` that guards a layout carries its own fallback — RENDER-NOTES
   §8.6: a rule that depends on a token defined in another stylesheet fails
   OPEN, not closed, so `max-width: var(--undefined)` becomes `none` and the
   column goes full width again.
   ========================================================================== */

:root {
  /* 68 characters. Measured, not guessed: the harness and the browser check
     agree it lands between 60 and 75ch at every breakpoint. */
  --post-measure: 68ch;
  --post-col: 760px;
  --post-wide: 920px;
}

/* ---------------------------------------------------------------------------
   1 · The single post — the reading column
   -------------------------------------------------------------------------- */

.post { padding: 0 var(--pad, 80px) 8px; }

.post-head,
.post-wrap,
.prel {
  max-width: var(--post-col, 760px);
  margin-left: auto;
  margin-right: auto;
}

.post-head {
  margin: 34px auto 0;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.pmeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-3);
}
.pmeta li { display: inline-flex; align-items: center; gap: 10px; }
.pmeta li + li::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-4);
  flex-shrink: 0;
}
.pmeta-c a {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
.pmeta-c > :not(a) {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pmeta-r { gap: 6px; }
.pmeta-r svg { width: 14px; height: 14px; color: var(--ink-4); }
/* Readable text, so `--ink-3` — see the note on `.opt.is-off` in archive.css.
   `--ink-4` is for shapes: dots, rules, borders. */
.pmeta-u { color: var(--ink-3); }

.post-t {
  margin-top: 14px;
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: -0.024em;
  max-width: 22ch;
}
.post-lede {
  margin-top: 16px;
  max-width: var(--post-measure, 68ch);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* -- Hero ------------------------------------------------------------------ */
/* Wider than the reading column on purpose: the image is the one element of
   the page that benefits from the shell's width, and it is the only one. */
.post-hero {
  max-width: var(--post-wide, 1040px);
  margin: 28px auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl, 22px);
  background: var(--bg-2);
}
/* `max-height` is applied to a box whose ratio is already known — from the
   width/height attributes, or from the `is-ratio` rule below — so the height
   is the same before and after the bytes arrive and the cap costs no layout
   shift. Without it a 1024×531 hero is 539px tall at this width and the
   article's first paragraph starts below the fold. */
.post-hero img {
  width: 100%;
  height: auto;
  max-height: 390px;
  object-fit: cover;
}
/* No intrinsic size recorded for this file, so the BOX reserves the space
   instead of the image. Either way nothing below it moves when the bytes
   arrive — which is the whole point — and neither way is a dimension this
   renderer invented. */
.post-hero.is-ratio img { aspect-ratio: 16 / 7; }

.post-wrap { margin-top: 30px; }

/* -- Table of contents ----------------------------------------------------- */
/*
   Closed markup, open on desktop. `::details-content` is the only way to
   reveal a closed <details> from CSS, and it is why the element is authored
   closed rather than authored `open` and forced shut: a browser without the
   pseudo-element renders a closed disclosure with a real label — one click
   from open — whereas the other arrangement would render a mobile TOC that
   cannot be collapsed at all. See the note on `tableOfContents` in post.js.
*/
.toc {
  margin: 0 0 30px;
  padding: 4px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg, 16px);
}
.toc-sum {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}
.toc-sum::-webkit-details-marker { display: none; }
.toc-sum::marker { content: ""; }
.toc-t {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.toc-n { font-size: 12.5px; color: var(--ink-3); margin-left: auto; }
.toc-chev {
  display: inline-flex;
  color: var(--ink-3);
  transition: transform 0.15s ease;
}
.toc-chev svg { width: 16px; height: 16px; }
.toc[open] .toc-chev { transform: rotate(90deg); }

.toc-nav { padding: 2px 0 16px; }
.toc-l { display: grid; gap: 8px; }
.toc-i { font-size: 14.5px; line-height: 1.4; }
.toc-i a { color: var(--ink-2); }
.toc-i a:hover { color: var(--sage-deep); }
.toc-i.is-sub { padding-left: 18px; font-size: 13.5px; }
.toc-i.is-sub a { color: var(--ink-3); }

/* ---------------------------------------------------------------------------
   2 · The body — typographic rhythm
   -------------------------------------------------------------------------- */

.post-body {
  max-width: var(--post-measure, 68ch);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
  text-wrap: pretty;
}

.post-body > * + * { margin-top: 1.15em; }

.post-body h2 {
  margin-top: 1.9em;
  font-size: 29px;
  line-height: 1.18;
  letter-spacing: -0.018em;
  scroll-margin-top: 20px;
}
.post-body h3 {
  margin-top: 1.6em;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  scroll-margin-top: 20px;
}
.post-body h2 + p,
.post-body h3 + p,
.post-body h2 + ul,
.post-body h3 + ul { margin-top: 0.6em; }

.post-body p { color: var(--ink); }
.post-body strong { font-weight: 600; color: var(--ink); }
.post-body em { font-style: italic; }

.post-body a {
  color: var(--sage-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  /* ⚠ THE ONE THING THAT GAVE BOTH LEGAL PAGES A SIDEWAYS SCROLL ON EVERY PHONE.
     Found by the launch sweep, 17 Aug 2026: the imported privacy policy and
     terms use RAW URLS AS LINK TEXT —
     "https://support.google.com/analytics/answer/6004245" is a single 434px
     unbreakable token. On a 320px viewport it pushed the document 134px wider
     than the window, which does not just add a scrollbar: it shrinks every tap
     target on the page and lets the reader scroll the text out of view.

     `anywhere` rather than `break-word` because break-word will not split a
     token that has no break opportunity at all, which is exactly what a URL
     with no spaces is. This is scoped to links inside imported prose — a body
     we do not control and cannot proof-read, since it comes out of WordPress —
     and deliberately not applied to headings or UI text, where mid-word breaks
     would be a defect rather than a rescue. */
  overflow-wrap: anywhere;
}
.post-body a:hover { color: var(--sage); }

.post-body ul,
.post-body ol {
  padding-left: 1.35em;
  display: grid;
  gap: 0.5em;
}
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { padding-left: 0.2em; }
.post-body li::marker { color: var(--ink-4); }
.post-body li > ul,
.post-body li > ol { margin-top: 0.5em; }

.post-body blockquote {
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--sage-tint-2, var(--sage-tint));
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink-2);
}
.post-body blockquote p + p { margin-top: 0.6em; }

.post-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 2px 5px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm, 6px);
}
.post-body pre {
  padding: 16px 18px;
  overflow-x: auto;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius, 10px);
}
.post-body pre code { padding: 0; border: none; background: none; }

/* Images inside the body carry width/height from the export, so they reserve
   their own space. `height: auto` keeps that ratio while the column narrows. */
.post-body figure { margin: 1.6em 0; }
.post-body img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius, 10px);
}
.post-body figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
}
.post-body th,
.post-body td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.post-body th { font-weight: 600; color: var(--ink-2); }

.post-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2em 0;
}

/* ---------------------------------------------------------------------------
   3 · The directory CTA
   -------------------------------------------------------------------------- */

/* Stacked, not two-column. Both CTAs live inside a 760px reading column — a
   button parked on the right of that leaves the copy about 390px wide, which
   turned "Family conflicts — therapists you can start with" into four ragged
   lines. Full-width copy, action underneath. */
.pcta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin: 34px 0;
  padding: 26px 28px;
  background: var(--sage-tint);
  border: 1px solid var(--sage-line, var(--line));
  border-radius: var(--radius-xl, 22px);
}
/* The mid-article one sits INSIDE the reading column, so it is the one place
   the column is allowed to be interrupted — and it is narrower than the end
   card because it is standing in the middle of somebody's sentence. */
.pcta.is-mid {
  margin: 2em 0;
  padding: 22px 24px;
  background: var(--bg-2);
  border-color: var(--line);
}
.pcta-body { min-width: 0; }
.pcta-t {
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.016em;
}
.pcta.is-mid .pcta-t { font-size: 20px; }
.pcta-x {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.pcta-n {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.pcta-n b { font-weight: 500; color: var(--sage-deep); }
.pcta-a { flex-shrink: 0; }
.pcta-a .btn svg { width: 18px; height: 18px; }

/* The mid-article CTA is INSIDE `.post-body`, so every prose rule above reaches
   into it — the button came out underlined, because body links are. It is a UI
   card standing in the middle of an article, not part of the article. */
.post-body .pcta a { text-decoration: none; }
.post-body .pcta p { color: var(--ink-2); }
.post-body .pcta .btn { color: var(--on-sage); }
.post-body .pcta .btn:hover { text-decoration: none; }
.post-body .pcta-n { color: var(--ink-2); }

/* ---------------------------------------------------------------------------
   4 · Prev / next
   -------------------------------------------------------------------------- */

.pnx {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 34px;
}
.pnx-i {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 16px);
}
.pnx-i.is-next { text-align: right; }
.pnx-i.is-off { background: transparent; border: none; }
.pnx-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pnx-t {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.25;
  color: var(--ink);
}
a.pnx-i:hover { border-color: var(--sage-line, var(--line)); text-decoration: none; }
a.pnx-i:hover .pnx-t { color: var(--sage-deep); }

/* ---------------------------------------------------------------------------
   5 · Post cards — the archive grid and "keep reading"
   -------------------------------------------------------------------------- */

.prel { margin-top: 48px; }
.prel .hsec-head { margin-bottom: 18px; }
.prel .hsec-head h2 { font-size: 26px; letter-spacing: -0.018em; }

.pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.blog .pgrid { margin-top: 22px; }

.pcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl, 22px);
}
.pcard-img { display: block; background: var(--bg-2); }
.pcard-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.pcard-b { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.pcard-m { margin-top: 0; font-size: 12px; gap: 3px 8px; }
.pcard-m a { color: var(--ink-2); }
.pcard-m a:hover { color: var(--sage-deep); }
.pcard-t {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.pcard-t a { color: var(--ink); }
.pcard-t a:hover { color: var(--sage-deep); text-decoration: none; }
.pcard-x {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.pcard-more { margin-top: auto; padding-top: 4px; }
.pcard-more a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  color: var(--sage-deep);
}
.pcard-more svg { width: 15px; height: 15px; }

/* -- The lead post --------------------------------------------------------- */
.pcard.is-lead {
  flex-direction: row;
  align-items: stretch;
  margin-bottom: 22px;
  border-radius: var(--radius-2xl, 28px);
  box-shadow: var(--shadow-sm);
}
.pcard.is-lead .pcard-img { flex: 0 0 46%; }
/* The ratio here sets the whole card's height — the body is always shorter —
   so it is a layout decision, not a crop preference. 16/10 made a 380px card
   with 140px of empty space under the excerpt. */
.pcard.is-lead .pcard-img img { height: 100%; aspect-ratio: 16 / 9; }
.pcard.is-lead .pcard-b { padding: 32px 36px; gap: 12px; justify-content: center; }
/* Not pinned to the bottom: on the lead card the whole block is centred, and an
   auto margin would open a gap in the middle of it. */
.pcard.is-lead .pcard-more { margin-top: 2px; }
.pcard.is-lead .pcard-t { font-size: 32px; letter-spacing: -0.02em; line-height: 1.12; }
.pcard.is-lead .pcard-x { font-size: 15.5px; max-width: 52ch; }

/* ---------------------------------------------------------------------------
   6 · Category nav + the filter line on a category archive
   -------------------------------------------------------------------------- */

.blog-filter { margin-top: 16px; font-size: 14.5px; }
.blog-filter a { display: inline-flex; align-items: center; gap: 4px; }
.blog-filter svg { width: 15px; height: 15px; }

.pnav { margin-top: 22px; }
.pnav-l { display: flex; flex-wrap: wrap; gap: 8px; }
.pnav-c { gap: 7px; }
.pnav-c:hover { border-color: var(--sage-line, var(--line)); color: var(--sage-deep); text-decoration: none; }
.pnav-c.is-on {
  background: var(--sage);
  color: var(--on-sage);
  border-color: var(--sage);
}
.pnav-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pnav-c.is-on .pnav-n { color: var(--on-sage); opacity: 0.75; }

/* ---------------------------------------------------------------------------
   7 · Breakpoints
   -------------------------------------------------------------------------- */

/* Desktop: the table of contents is a caption with a list under it, not a
   disclosure. `content-visibility` is what reveals a closed <details>; the
   summary keeps its focusable box but cannot toggle anything away, because the
   contents no longer depend on `[open]` at this width. */
@media (min-width: 641px) {
  .toc::details-content {
    content-visibility: visible;
    block-size: auto;
    overflow: visible;
  }
  .toc-sum { cursor: default; pointer-events: none; padding-bottom: 6px; }
  .toc-chev, .toc-n { display: none; }
}

@media (max-width: 1180px) {
  .post-t { font-size: 40px; }
  .pgrid { gap: 18px; }
  .pcard.is-lead .pcard-b { padding: 28px 28px; }
  .pcard.is-lead .pcard-t { font-size: 28px; }
}

@media (max-width: 980px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .post { padding: 0 var(--pad, 20px) 4px; }
  .post-head { margin-top: 22px; padding-bottom: 20px; }
  .post-t { font-size: 27px; line-height: 1.14; letter-spacing: -0.018em; max-width: none; }
  .post-lede { margin-top: 12px; }
  .pmeta { font-size: 12.5px; }
  .pmeta-c a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Every entry in the table of contents is a jump link, and each one was a
     16px line. */
  .toc-sum { min-height: 48px; }
  .toc-l { gap: 0; }
  .toc-i { font-size: 15px; }
  .toc-i a { display: flex; align-items: center; min-height: 44px; }

  .post-hero { margin-top: 18px; border-radius: var(--radius-lg, 16px); }
  .post-hero img { max-height: 260px; }
  .post-wrap { margin-top: 22px; }

  .toc { margin-bottom: 22px; padding: 2px 16px; }
  .pnav-l { flex-wrap: wrap; }
  .pnav-c { min-height: 44px; padding: 6px 13px; font-size: 13.5px; }

  /* Reading sizes up, label sizes unchanged — the same rule as the other three
     sheets. The post body was already 16px; the lede and the CTA copy were not,
     and they are the two paragraphs either side of it. */
  .post-lede { font-size: 16px; }
  .post-body { font-size: 16px; line-height: 1.65; }
  .post-body h2 { font-size: 23px; margin-top: 1.7em; }
  .post-body h3 { font-size: 18.5px; }
  .post-body blockquote { font-size: 17.5px; padding-left: 16px; }

  .pcta { margin: 26px 0; padding: 20px; gap: 16px; border-radius: var(--radius-lg, 16px); }
  .pcta-t { font-size: 20px; }
  .pcta-a { width: 100%; }
  .pcta-a .btn { width: 100%; }
  .pcta.is-mid .pcta-t { font-size: 18px; }

  .pnx { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 26px; }
  .pnx-i.is-next { text-align: left; }
  .pnx-i.is-off { display: none; }

  .pgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .prel { margin-top: 34px; }

  .pcard.is-lead { flex-direction: column; border-radius: var(--radius-xl, 22px); }
  .pcard.is-lead .pcard-img { flex: none; }
  .pcard.is-lead .pcard-img img { aspect-ratio: 16 / 9; height: auto; }
  .pcard.is-lead .pcard-b { padding: 20px 22px 22px; }
  .pcard.is-lead .pcard-t { font-size: 23px; }
  .pcard.is-lead .pcard-x { font-size: 15px; }
  .pcard-x { font-size: 15px; }
  /* Same trick as the therapist card's name: the padding grows the hit box to
     44px and the equal negative margin gives the space back to the layout. */
  .pcard-t a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .pcard-m { font-size: 12.5px; }
  .pcard-m a { display: inline-flex; align-items: center; min-height: 44px; }
  .pcard-more a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
  .pcta-x { font-size: 15.5px; }

  .pnav-l { gap: 6px; }
}

@media print {
  .toc, .pcta, .pnx, .prel, .pnav, .pager { display: none; }
  .post-body { max-width: none; }
}