/* ============================================================
   INDIVIDUAL PATIENT STORY — /patient-stories/<name>
   Layered on base.css + v3.css + v9.css + stories.css. Same
   tokens, type and accent system, so it tracks every palette.
   Design rule (from content guide): person first, outcome in
   their own voice — never a success-rate scoreboard. The video
   carries the emotion; the prose below is the indexable body.
   ============================================================ */

/* Match the site-wide .container width so the story spans like every other page */
.ps-wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Back link ---------- */
.ps-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--slate-mid);
  cursor: pointer;
  transition: color 160ms var(--ease);
}
.ps-back:hover { color: var(--fg-strong); }
.ps-back .arrow { transition: transform 160ms var(--ease);}
.ps-back:hover .arrow { transform: translateX(-3px);}

/* Three links on these pages render 21.4px tall, under the 24px AA minimum:
   the back-out, "Watch on YouTube" and "All stories". Each is isolated — the
   nearest other target is well outside 44px — so each takes the full 44.
   Hit area only, through a pseudo-element; nothing moves. */
.ps-back, .yt, .all { position: relative; }
.ps-back::after, .yt::after, .all::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* ============================================================
   HERO — typographic. Name + condition + country, then the
   standfirst. No portrait: the video still below is the image.
   ============================================================ */
.ps-hero { padding: 48px 0 8px; }
.ps-hero .ps-back { margin-bottom: 36px; }

/* Two-column hero: intro text left, video right */
.ps-hero-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.ps-hero-text { min-width: 0; }
.ps-hero-media { min-width: 0; }
/* The two-column hero shares its row with the video, so the h1 was dropped to
   3.4vw — which made a patient story's title the SMALLEST h1 on the site: 49px
   at 1440 where /about is 60, /costs 66, a condition page 68, and the
   /patient-stories hub that links here is 86. Clicking a story read as a
   demotion. `[Jacob, 10 Aug 2026]`
   Now on the .display.large scale, the site's standard main-title size, so a
   story title matches /about, /costs, /eligibility and the homepage. Measured
   across all six: still 3 lines at 1440, 1200, 1024 and 768 — the column takes
   it without reflowing. At 390 it goes 34px → 40px, which matches every other
   page at that width, and the longest title gains a fourth line. */
.ps-hero-cols .ps-h1 { font-size: clamp(40px, 4.2vw, 68px); max-width: none; }
.ps-hero-cols .ps-standfirst { max-width: none; }
.ps-hero-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 26px;
}
.ps-cond {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.ps-country {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-mid);
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.ps-country::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--slate-light);
}
.ps-h1 {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(40px, 5.2vw, 74px);
  line-height: 1.03;
  letter-spacing: -0.018em;
  color: var(--fg-strong);
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.ps-h1 em { font-style: italic; }
.ps-standfirst {
  margin-top: 28px;
  max-width: var(--measure);
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.55;
  color: var(--slate-dark);
}
.ps-standfirst em { font-style: italic; color: var(--fg-strong); }

/* ============================================================
   VIDEO — the emotional centerpiece. Click-to-play facade that
   swaps the still for a youtube-nocookie embed inline.
   ============================================================ */
.ps-video-sec { padding: 44px 0 4px; }
.ps-hero-media .ps-video { margin: 0; }
.ps-video {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: linear-gradient(135deg, color-mix(in oklab, var(--sage-deep) 40%, var(--sage-ink)) 0%, var(--sage-ink) 100%);
  box-shadow: 0 24px 60px -28px rgba(31, 42, 38, 0.55);
}
.ps-video .ps-still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,26,22,0.10) 0%, transparent 34%, transparent 62%, rgba(20,26,22,0.42) 100%);
  pointer-events: none;
  transition: opacity 220ms var(--ease);
}
.ps-video .play-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in oklab, var(--ink) 62%, transparent);
  color: #F2EDE4;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  transition: transform 200ms var(--ease), background 200ms var(--ease);
  z-index: 2;
}
.ps-video .play-badge svg { width: 30px; height: 30px; margin-left: 4px; }
.ps-video:hover .play-badge { background: var(--accent); transform: translate(-50%, -50%) scale(1.06); }
.ps-video-name {
  position: absolute;
  left: 22px; bottom: 18px;
  z-index: 2;
  font-family: var(--font-serif);
  font-weight:500;
  font-size: 24px;
  letter-spacing: -0.005em;
  color: #F6F2EA;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
.ps-video.is-playing::after,
.ps-video.is-playing .play-badge,
.ps-video.is-playing .ps-video-name { display: none; }
.ps-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ps-video-cap {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ps-video-cap .t {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--slate-mid);
  max-width: var(--measure);
}
.ps-video-cap .yt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  color: var(--slate-mid);
  transition: color 160ms var(--ease);
  white-space: nowrap;
}
.ps-video-cap .yt:hover { color: var(--accent-deep); }

/* ============================================================
   STORY BODY — editorial reading column with pull-out quotes
   that break wider than the prose.
   ============================================================ */
.ps-body { padding: 76px 0 8px; }
/* Reading measure, flush-left to the page gutter, not centered.
   680px at the 17px the body was actually rendering measured 92 characters
   per line — already past --measure-wide. Widening alone would have taken it
   to ~106, so the width and the type moved together. Measured after:
   780px at 20px renders 80 characters per line at 1440 and 71 at 768, so the
   column got 100px wider and the line got shorter.
   [DECISION — Jacob, 8 Aug 2026] */
.ps-prose { max-width: 780px; margin: 0; }
.ps-prose .ps-kicker {
  display: block;
  margin-bottom: 30px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
/* 🔴 :root:root is load-bearing here, same reason as v3.css:621.
   `.ps-prose p` is (0,1,1) and loses to v3.css's `:root:root p` (0,2,1), so
   the 18px this rule used to declare was dead — the pages rendered 17px for
   as long as it existed. The prefix takes it to (0,3,1) so the declared size
   is the size that ships. Anything overriding this rule needs to outrank
   (0,3,1); the .lead and <=640 rules below both do. */
:root:root .ps-prose p {
  font-size: 20px;
  line-height: 1.78;
  color: var(--slate-dark);
  margin: 0 0 1.35em;
}
/* (0,4,1) — must stay above the rule it overrides, which is now (0,3,1) */
:root:root .ps-prose p.lead {
  font-size: clamp(21px, 2vw, 25px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 1.4em;
}
.ps-prose p em { font-style: italic; color: var(--fg-strong); }
.ps-prose p q, .ps-prose p .said { font-style: italic; color: var(--fg-strong); }

/* Pull-out quote — breaks wider than the 780px column.
   Kept proportional to that column: 860 against 680 was a 180px break, and
   holding it at 860 once the prose reached 780 would have left 80px, which
   reads as a misalignment rather than a deliberate break. */
.ps-pull {
  max-width: 960px;
  margin: 52px 0;
  padding-left: 34px;
  border-left: 2px solid var(--accent);
}
.ps-pull blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.24;
  letter-spacing: -0.008em;
  color: var(--fg-strong);
  text-wrap: pretty;
}
.ps-pull blockquote em { font-style: italic; color: var(--accent-deep); }
.ps-pull .cite {
  display: block;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--slate-mid);
}
.ps-pull .cite b { color: var(--fg-strong); font-weight: 600; }

/* ============================================================
   CONDITION CROSS-LINK
   ============================================================ */
.ps-xlink { padding: 40px 0; }
.ps-xlink-card {
  max-width: 860px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--sage-pale);
  border-radius: 14px;
  padding: 30px 36px;
}
.ps-xlink-card .l { max-width: 46ch; }
.ps-xlink-card .l .eyebrow { color: var(--sage-deep); margin-bottom: 12px; }
.ps-xlink-card .l .eyebrow::before { background: var(--sage-deep); }
.ps-xlink-card .l p {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(24px,1.8vw, 24px);
  line-height: 1.3;
  color: var(--sage-ink);
  margin: 0;
}
.ps-xlink-card .l p b { font-weight: 600; }
.ps-xlink-card .go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--sage-ink);
  white-space: nowrap;
  border-bottom: 1px solid color-mix(in oklab, var(--sage-ink) 40%, transparent);
  padding-bottom: 4px;
}
.ps-xlink-card .go .arrow { transition: transform 160ms var(--ease);}
.ps-xlink-card .go:hover .arrow { transform: translateX(4px);}

/* ============================================================
   DISCLAIMER — with the story, verbatim. Never an 11px footer.
   ============================================================ */
.ps-disc { padding: 24px 0 8px; }
.ps-disc-inner {
  max-width: 860px;
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
  padding: 24px 30px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg-card) 55%, var(--bg));
  border: 1px solid var(--border-soft);
  border-left: 2px solid color-mix(in oklab, var(--accent) 42%, var(--border-soft));
}
.ps-disc-inner .lbl {
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--slate-mid);
  white-space: nowrap;
  padding-top: 4px;
}
.ps-disc-inner p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px,1.5vw, 20px);
  line-height: 1.48;
  color: var(--slate-dark);
  max-width: 48ch;
}

/* ============================================================
   CTA — reuses .st-cta / .st-cta-panel from stories.css
   ============================================================ */
.ps-cta { padding: 72px 0 0; }

/* ============================================================
   MORE STORIES — reuses .st-card from stories.css
   ============================================================ */
.ps-more { padding: var(--section-py) 0 calc(var(--section-py) * 1.2); }
.ps-more-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 34px;
}
.ps-more-head .h {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.01em;
  color: var(--fg-strong);
}
.ps-more-head .rule { flex: 1; height: 1px; background: var(--border); }
.ps-more-head .all {
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  color: var(--slate-mid);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.ps-more-head .all:hover { color: var(--fg-strong); }
.ps-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 28px;
}

/* ============================================================
   VERIFY FLAGS — mirrors the site's pending pattern. Only shown
   ============================================================ */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .ps-hero-cols { grid-template-columns: 1fr; gap: 32px; }
  .ps-hero-cols .ps-h1 { max-width: 20ch; }
  .ps-hero-cols .ps-standfirst { max-width: var(--measure); }
}
@media (max-width: 880px) {
  .ps-more-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .ps-hero { padding: 32px 0 0; }
  .ps-hero .ps-back { margin-bottom: 26px; }
  .ps-body { padding: 56px 0 4px; }
  /* Promoted with the desktop rule — a bare `.ps-prose p` here is (0,1,1)
     and would now lose to the (0,3,1) base rule, putting 20px on phones.
     The column is viewport-bound below 640, so measure is not the constraint
     and this stays at the 17px body baseline. */
  :root:root .ps-prose p { font-size: 17px; }
  .ps-pull { padding-left: 22px; margin: 40px auto; }
  .ps-video .play-badge { width: 66px; height: 66px; }
  .ps-video .play-badge svg { width: 24px; height: 24px; }
  .ps-xlink-card { padding: 26px 24px; }
  .ps-more-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Section headings inside the narrative — template v2.
   Added 24 Aug 2026. Before this the six pages carried exactly one H2
   between them ("Wondering if this could be…"), identical on all six, so
   a crawler read six near-duplicates. See docs/patient-story-template-v2.md §1.

   🔴 Specificity: `.ps-prose p` ships as :root:root (0,3,1) — see the note at
   line 248. These headings are h2, not p, so they do not collide; but anything
   overriding them still needs to outrank (0,2,0).
   ============================================================ */
.ps-prose .ps-h2 {
  max-width: 780px;
  margin: 48px 0 0.55em;
  padding-top: 30px;
  /* Site rule convention — matches .editorial-ref (v3.css:1301), which is the
     existing precedent inside Patient Stories, and the same 1px/--border-soft
     hairline used across v3.css and base.css. */
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-display, var(--font-serif, Georgia, serif));
  font-size: clamp(23px, 2.1vw, 27px);
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink, #12161c);
}
/* A heading that opens a block straight after a pull-quote: the quote already
   supplies 52px of separation, so the rule keeps its hairline but drops the
   duplicated air above it. */
.ps-pull + .ps-prose .ps-h2:first-child { margin-top: 8px; }
@media (max-width: 640px) {
  .ps-prose .ps-h2 {
    font-size: 21px;
    margin: 36px 0 0.5em;
    padding-top: 24px;
  }
}

/* ============================================================
   Hero close + closing blocks — refinement pass, 24 Aug 2026.
   Brief: soften the two closing blocks toward the Claude Design
   treatment (soft depth, more air, lighter fill) and rule the hero
   off full-bleed. 🔴 Palette is UNCHANGED — the Claude Design comp
   is on the older warm cream ramp; the live site is the cool ramp
   (--bg #FAFBFC / --sage-pale #E8EDF3 / --accent #C16C60).
   ============================================================ */

/* Full-bleed rule closing the hero. Spans the viewport, not the
   1320px container — the container would stop it 40px short each
   side and read as a boxed divider rather than a section close. */
.ps-hero {
  padding-bottom: 64px;
  border-bottom: 1px solid var(--border-soft);
}

/* ---- Condition cross-link ---- */
/* Widened from 860px so the sentence breaks over two lines, not three.
   The measure moves with it: 46ch was tuned to the old width. */
.ps-xlink { padding: 56px 0 8px; }
.ps-xlink-card {
  max-width: 1080px;
  background: color-mix(in oklab, var(--sage-pale) 52%, var(--bg-card));
  border: 1px solid color-mix(in oklab, var(--sage-deep) 12%, transparent);
  border-radius: 18px;
  padding: 38px 46px;
  gap: 40px;
  box-shadow:
    0 1px 2px rgba(36, 47, 67, 0.04),
    0 12px 28px -14px rgba(36, 47, 67, 0.16);
}
.ps-xlink-card .l { max-width: 56ch; }
.ps-xlink-card .go {
  border-bottom-color: color-mix(in oklab, var(--sage-ink) 26%, transparent);
  transition: border-bottom-color 160ms var(--ease);
}
.ps-xlink-card .go:hover {
  border-bottom-color: color-mix(in oklab, var(--sage-ink) 60%, transparent);
}

/* ---- Disclaimer ----
   🔴 No box. It is a footnote to the story, not a card competing with the
   cross-link above it — two stacked panels read as two equal-weight calls,
   and this one is the quietest thing on the page. A hairline and a change
   of voice (italic serif) carry it instead. */
/* 36px here + the 8px left by .ps-xlink puts ~44px between the card and the
   rule, against 30px below it. The rule has to sit clearly closer to the note
   it introduces than to the card above it, or it reads as the card's underline. */
.ps-disc { padding: 36px 0 8px; }
.ps-disc-inner {
  max-width: 1080px;
  background: none;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  box-shadow: none;
  padding: 30px 0 0;
  gap: 34px;
}
.ps-disc-inner .lbl {
  font-variant: normal;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--slate-mid);
  padding-top: 7px;
}
/* 🔴 :root:root required — v3.css ships `:root:root p` at (0,2,1), so a plain
   `.ps-disc-inner p` (0,1,1) loses and the declared size never renders. The
   rule this replaces declared 20px and shipped 17px for exactly this reason.
   Same trap documented at the .ps-prose p rule above. */
:root:root .ps-disc-inner p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.5vw, 21px);
  line-height: 1.62;
  color: var(--slate-dark);
  max-width: 54ch;
}

@media (max-width: 640px) {
  .ps-hero { padding-bottom: 30px; }
  .ps-xlink { padding: 36px 0 8px; }
  .ps-xlink-card { padding: 26px 24px; border-radius: 14px; gap: 22px; }
  .ps-disc-inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 24px;
  }
  .ps-disc-inner .lbl { padding-top: 0; }
}