/* Learn route styles. Shared shell primitives remain in tokens.css.
   v4 BRANDCRAFT pass, batch 4 lane C (2026-08-08). This file is the single
   owner of the learn cluster's rendering: the hub, the nine articles, the
   for-residents download index. Fourteen of its class names are also used by
   the psychotherapy hub and the thirteen WP volumes (lane D), so the hero
   cluster, .cta-section and .resident-intro__inner are styled ONCE here at
   pattern level and land on both routes deliberately (DEC-016(2)).

   Three things this pass holds to:
   - Reading surfaces stay readable. Long article prose gets LAW-9 typographic
     structure, not tape and rotation. Rotation is on containers only, never on
     running text, and the 54-card download index carries none at all.
   - The riso art is LIGHT. Measured against every paper stock, this corpus
     multiplies down to 2.0-3.0:1 against the sheet it sits on, which is the
     watermark failure DEC-019 recorded for one-page on sky. Every hero piece
     therefore sits on a white .art-plate, so multiply happens over white and
     the drawing keeps its full value. The tilt lives on the img, never on the
     plate (stacking-context law).
   - Accent-coloured copy sits on white cards or runs full ink. Nothing in this
     file puts teal, sage or terracotta text directly on a coloured sheet. */

:root {
  --learn-soft-teal: color-mix(in srgb, var(--thread-teal) 7%, var(--cloth));
  --learn-soft-sage: color-mix(in srgb, var(--thread-sage) 7%, var(--cloth));
  --learn-soft-clay: color-mix(in srgb, var(--thread-terracotta) 6%, var(--cloth));
  /* --thread-terracotta measures 4.21:1 on white, under the 4.5 floor, so the
     psychotherapy family marker gets a darkened clay for small copy only.
     5.57:1 on white, 4.86:1 on the pale band. Dark theme keeps the token. */
  --learn-clay-ink: #AC4A2D;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --learn-soft-teal: color-mix(in srgb, var(--thread-teal) 11%, var(--cloth));
    --learn-soft-sage: color-mix(in srgb, var(--thread-sage) 11%, var(--cloth));
    --learn-soft-clay: color-mix(in srgb, var(--thread-terracotta) 10%, var(--cloth));
    --learn-clay-ink: var(--thread-terracotta);
  }
}

[data-theme="dark"] {
  --learn-soft-teal: color-mix(in srgb, var(--thread-teal) 11%, var(--cloth));
  --learn-soft-sage: color-mix(in srgb, var(--thread-sage) 11%, var(--cloth));
  --learn-soft-clay: color-mix(in srgb, var(--thread-terracotta) 10%, var(--cloth));
  --learn-clay-ink: var(--thread-terracotta);
}

main { overflow: hidden; overflow-x: clip; }
.container { width: min(1184px, calc(100% - 3rem)); margin-inline: auto; }
/* care.css also defines .content-width, at 720px with a matching max-width.
   The route is 46rem (736px), so the route states max-width too: without it
   care.css's max-width survives and quietly narrows the route by 16px. No
   page on this route uses the class today; the rule is here so the next one
   that does gets the route measure. (Wave 2c, the six-collision list.) */
.content-width { width: min(46rem, 100%); max-width: 46rem; margin-inline: auto; }
.section--centered { text-align: center; }
/* Paper banding for the 54-card catalog: alternating groups read as separate
   sheets without spending a torn seam on every one of the seven. */
.section--alt { background: var(--paper-quiet); }
.grid-2, .grid-3 { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Paper seams. The torn edge is the sheet's FIRST child and its fill is the
   sheet ABOVE, so the colour helper names the sheet it is tearing away from.
   The sheet carries no top padding; the inner wrap does. */
.torn--cloth { color: var(--cloth); }
.torn--green { color: var(--paper-green); }
.torn--butter { color: var(--paper-butter); }
.torn--terra { color: var(--paper-terra); }
.torn--sky { color: var(--paper-sky); }
.torn--quiet { color: var(--paper-quiet); }
/* The seam law, stated so it cannot lose. A sheet never carries top padding,
   the inner wrap does, or the torn edge floats off its own seam. This is
   !important because it is a law and because a two-class rule elsewhere in
   this file (.residents-page .section) already beat the plain form once and
   pushed a seam 102px down the page. Measured, not assumed. */
.sheet-green, .sheet-butter, .sheet-terra, .sheet-sky, .sheet-quiet, .sheet-white { padding-top: 0 !important; }

/* Explicit colour rules are the only way ink-2 or an accent reaches a
   coloured sheet, since the sheet itself already re-scopes inherited colour
   to full ink. These are the ones that do, so these run ink too: teal on
   terracotta measured 1.90:1 and ink-2 on terracotta 2.93:1. */
.sheet-green .eyebrow--teal, .sheet-butter .eyebrow--teal,
.sheet-terra .eyebrow--teal, .sheet-sky .eyebrow--teal,
.sheet-green .hero-quote cite, .sheet-butter .hero-quote cite,
.sheet-terra .hero-quote cite, .sheet-sky .hero-quote cite,
.sheet-green .exam-section__subtitle, .sheet-butter .exam-section__subtitle,
.sheet-terra .exam-section__subtitle, .sheet-sky .exam-section__subtitle { color: var(--ink); }
.sheet-pad { padding-top: var(--space-section); }
.sheet-pad--compact { padding-top: clamp(4.5rem, 7vw, 7rem); }

/* The white plate. Delicate riso pieces are taped down on white so multiply
   lands on paper-white, not on the coloured stock. Transform on the img. */
.art-plate {
  position: relative;
  width: min(100%, 24rem);
  margin-inline: auto;
  padding: var(--space-5);
  border: 2.5px solid var(--ink);
  border-radius: var(--wonky-3);
  background: #FFFFFF;
  box-shadow: var(--shadow-lift);
}
.art-plate > img { width: 100%; transform: rotate(-1.4deg); }
.art-plate--alt { border-radius: var(--wonky-4); }
.art-plate--alt > img { transform: rotate(1.3deg); }
/* The reveal pass would otherwise put a transform on the plate, which is an
   ancestor of blended art. Fade only: the plate never takes a transform. */
html.reveal-ready:not(.reveal-complete) .art-plate.reveal,
html.reveal-ready:not(.reveal-complete) .art-plate.reveal.in { transform: none; }

.learn-hero,
.hero,
.article-hero {
  position: relative;
  padding: 0 0 clamp(4rem, 8vw, 7rem);
  border-bottom: 0;
}
.learn-hero__grid,
.hero__inner,
.article-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(16rem, 5fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  width: min(1184px, calc(100% - 3rem));
  margin-inline: auto;
  padding-top: clamp(8rem, 14vw, 11rem);
}
/* The scribble hangs below the h1 box, so the headline carries clearance or
   the marker stroke lands on the first line of whatever follows it. Same
   value, same reason, as the letters hero. */
.learn-hero h1, .hero h1, .article-hero h1 { margin-bottom: var(--space-10); }
.hero__content, .article-hero__content { min-width: 0; }
.hero__illustration { display: grid; place-items: center; }
.hero__img, .learn-hero__art { width: min(100%, 30rem); margin-inline: auto; }
.art-plate .hero__img, .art-plate .learn-hero__art { width: 100%; }

/* Eyebrow badges become stamps: bordered, uppercase, full ink. The old teal
   at 12px was accent colour under the 19px floor and off a white card; the
   stamp fixes both at once (currentColor border, ink text).
   Raised from 13.5px to 16px on 2026-09-04 (Wave 2c): a stamp is a LABEL and
   hard rule 41 floors labels at 16px. Tracking drops 0.13em to 0.11em in the
   same move, because 0.13em at 16px is 2.08px a letter and the longer badges
   on this route ("Learn, Sleep & Mental Health") then wrap at 390. The Wave 1b
   article carried these two values as an inline style while the route sheet
   was another wave's file; the sheet now says it once, for all 31 pages. */
.hero__badge, .article-hero__tag {
  display: inline-block;
  margin-bottom: var(--space-5);
  padding: 5px 12px 4px;
  border: 2px solid currentColor;
  border-radius: 4px 9px 5px 10px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
  transform: rotate(-1deg);
  opacity: 0.92;
  font-variant-numeric: tabular-nums lining-nums;
}
.hero__badge::before, .article-hero__tag::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.45em;
  vertical-align: -0.25em;
  background: url("/img/sprig.svg") no-repeat center / contain;
}
[data-surface="quiet"] .hero__badge, [data-surface="quiet"] .article-hero__tag { transform: none; border-color: var(--hairline-firm); color: var(--ink-2); }
.hero__sub, .article-hero__sub { max-width: 60ch; color: var(--ink); font-size: var(--text-lede); line-height: 1.65; }
.sheet-white .hero__sub, .sheet-white .article-hero__sub { color: var(--ink-2); }

/* The hub's nine topic cards are the one grid in this route that gets the
   full pasted treatment: a marketing spread, not a reading surface. Rotation
   alternates by sibling and settles to zero on hover. */
.topic-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 3.4vw, 2.75rem);
  text-align: left;
}
.topic-card {
  position: relative;
  grid-column: span 5;
  border: 2.5px solid var(--ink);
  border-radius: var(--wonky-1);
  background: var(--cloth-card);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transform: rotate(var(--rot, -0.9deg));
  transition: transform 350ms var(--ease-settle), box-shadow 300ms var(--ease-weave), border-radius var(--duration-ui) var(--ease-weave);
}
/* Adjacent siblings alternate sign, always. The 4n pair only varies the
   magnitude inside the sign its parity already fixed. */
.topic-card:nth-child(even) { --rot: 0.9deg; border-radius: var(--wonky-2); }
.topic-card:nth-child(4n + 3) { --rot: -1.35deg; }
.topic-card:nth-child(4n) { --rot: 1.35deg; }
.topic-card:nth-child(4n + 1), .topic-card:nth-child(4n) { grid-column: span 7; }
.topic-card__media {
  display: grid;
  place-items: center;
  min-height: 15rem;
  margin: var(--space-5) var(--space-5) 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
}
.topic-card__media img { width: min(64%, 14rem); max-height: 16rem; object-fit: contain; }
.topic-card__body { padding: clamp(1.25rem, 3vw, 2rem); }
/* The card category tag is the stamp badge's sibling, so it takes the same
   floor. Raised from 13.5px to 16px on 2026-09-05 (teacher-check fix F-1):
   Wave 2c raised .hero__badge and .article-hero__tag and missed this class,
   and hard rule 41 floors a LABEL at 16px. Tracking drops 0.12em to 0.10em in
   the same move, the L54 idiom, so the tracking in px is unchanged and the
   widest hub tag grows by glyph width alone. Measured at 390: the widest tag
   ("Lifestyle") is 116.5px inside a 317.8px card body, so nothing wraps. */
.topic-card__tag, .exam-card__tag {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: 4px 10px 3px;
  border: 1.5px solid currentColor;
  border-radius: 4px 9px 5px 10px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: 0.92;
  font-variant-numeric: tabular-nums lining-nums;
}
.topic-card__title { margin-bottom: var(--space-3); }
.topic-card__excerpt { margin-bottom: var(--space-5); color: var(--ink-2); font-size: var(--text-base); line-height: 1.6; }
.topic-card__read { color: var(--thread-sage); font-family: var(--font-hand); font-size: 1.125rem; font-weight: 700; }
.topic-card:hover { border-radius: var(--wonky-3); box-shadow: var(--shadow-lift); transform: rotate(0deg) translateY(-4px); }
/* reveal resets transform to none on .in, which would flatten every paste */
html.reveal-ready:not(.reveal-complete) .topic-card.reveal.in { transform: rotate(var(--rot, -0.9deg)) translateY(0); }

/* The clinician band: a panel pasted onto terracotta paper. Its two doorways
   are white cards so the teal label keeps a white ground under it. */
.clinician-band {
  display: grid;
  grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}
.clinician-band__art { width: min(100%, 22rem); margin-inline: auto; }
.art-plate .clinician-band__art { width: 100%; }
.clinician-doorways { display: grid; gap: var(--space-5); margin-top: var(--space-8); border-top: 0; }
.clinician-doorway {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  border: 2px solid var(--ink);
  border-radius: var(--wonky-2);
  background: var(--cloth-card);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--duration-ui) var(--ease-settle), box-shadow var(--duration-ui) var(--ease-weave), border-radius var(--duration-ui) var(--ease-weave);
}
.clinician-doorway:nth-child(even) { border-radius: var(--wonky-1); }
.clinician-doorway:hover { border-radius: var(--wonky-4); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.clinician-doorway p { margin: 0; color: var(--ink-2); }
.clinician-doorway span { color: var(--thread-teal); font-family: var(--font-hand); font-size: 1.125rem; font-weight: 700; }

/* ------------------------------------------------------------------ article
   Long-form reading surface. LAW 9 gives each block typographic structure
   without spending a single new word: the opening line of every section is
   weighted by ::first-line, and each h2 carries a short marker tick. No
   rotation reaches running text here. */
.article {
  width: min(46rem, calc(100% - 3rem));
  margin-inline: auto;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.article h2 { position: relative; margin-top: clamp(3rem, 7vw, 5rem); padding-top: var(--space-5); }
.article h2::before { content: ""; position: absolute; top: 0; left: 0; width: 52px; height: 3px; background: var(--marker); }
.article .section--centered h2::before { left: 50%; margin-left: -26px; }
.article > section:first-child h2 { margin-top: 0; }
.article h3 { margin-top: var(--space-8); }
.article p { margin-bottom: var(--space-5); font-size: var(--text-base); line-height: 1.75; }
/* LAW 9 without spending a word: the opening line of the article and of every
   section inside it is weighted, so a long run of same-size paragraphs gets
   visible structure. Eight of the nine articles open with prose directly under
   .article, one nests everything in sections, so both are covered. */
.article > p:first-of-type::first-line,
.article > section > p:first-of-type::first-line { font-size: 1.12em; font-weight: 600; letter-spacing: -0.01em; }
.article ul, .article ol { margin: var(--space-4) 0 var(--space-6); padding-left: 1.4rem; }
.article li { margin-bottom: var(--space-2); color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
/* Pulled lines, framed top and bottom by full rules. A one-side accent
   stripe is the default trope the house rejected on letters; the block rule
   is the idiom that shipped there and it costs the page no words. */
.article blockquote, .hero-quote {
  margin: var(--space-8) 0;
  padding-block: var(--space-5);
  padding-inline: 0;
  border: 0;
  border-block: 1.5px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--text-lede);
  font-style: italic;
  line-height: 1.5;
}
.article .grid-2, .article .grid-3 { margin-block: var(--space-6); }
.article .section--centered .grid-2, .article .section--centered .grid-3 { text-align: left; }
.article details { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); border: 1.5px solid var(--hairline-firm); border-radius: var(--radius-card); background: var(--cloth-card); }
.article details summary { min-height: 44px; color: var(--ink); font-weight: 600; cursor: pointer; }
.hero-quote { margin-block: var(--space-6); }
.hero-quote cite { display: block; margin-top: var(--space-3); color: var(--ink-2); font-family: var(--font-ui); font-size: 0.875rem; font-style: normal; }
/* Raised 14px to 16px on 2026-09-04 (Wave 2c, Fable's ruling). The foot
   disclaimer is running text on a patient page, so hard rule 41's 16px floor
   binds. cognitive-gate never reported it: its walk does not reach a <div>
   whose only text sits in a child <em>, so the 14px was measured by hand and
   not by the gate.

   The measure is capped in the same edit, and the cap is the bigger defect of
   the two. The disclaimer sits in the crisis section's full-width shell with
   no max-width of its own: measured at 1280 its content box is 1136px, which
   is 123ch at 16px and was 141ch at 14px, against rule 41's 75ch ceiling. The
   gate reports 0 measure findings on these pages because its walk does not
   reach this element either, so both numbers are hand-measured. 66ch is the
   value .faq__answer p and .not-list p already use in care.css. At 390 the
   box is 310px, 34ch, and the cap does not bind. */
.article-disclaimer {
  max-width: 66ch;
  margin-top: var(--space-16);
  padding: var(--space-6);
  border: 1px solid var(--hairline-firm);
  border-radius: var(--radius-card);
  background: var(--cloth-card);
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.65;
}

/* Article body cards. Hand-drawn borders and the offset-solid shadow carry
   the paper feel; rotation deliberately does NOT, because every one of these
   boxes holds running prose. */
.card, .profile, .women-section, .gold-section, .setback-note, .pattern-block, .style-block,
.symptom-list li, .treatment-card, .does-not-help li, .warning-signs li, .do-block,
.dont-block, .cause-block, .topic-block, .india-note, .protocol-step, .checklist-section,
.wrecker-block, .redflags-list li, .age-block, .cultural-idiom {
  border: 1.5px solid var(--hairline-firm);
  border-radius: var(--radius-card);
  background: var(--cloth-card);
}
.article .card, .article .profile, .article .women-section, .article .gold-section,
.article .setback-note, .article .treatment-card, .article .do-block, .article .dont-block,
.article .checklist-section, .article .protocol-step {
  border: 2px solid var(--ink);
  border-radius: var(--wonky-1);
  box-shadow: var(--shadow-soft);
}
.article .card:nth-of-type(even), .article .profile:nth-of-type(even),
.article .treatment-card:nth-of-type(even), .article .protocol-step:nth-of-type(even) { border-radius: var(--wonky-2); }
.women-section, .gold-section, .setback-note, .do-block, .dont-block, .checklist-section { margin: var(--space-8) 0; padding: clamp(1.5rem, 4vw, 2.5rem); }
.pattern-block, .style-block, .treatment-card, .cause-block, .topic-block, .age-block, .wrecker-block { margin-bottom: var(--space-4); padding: var(--space-5) var(--space-6); }
/* Measured, not guessed: .card, .india-note and .protocol-step carried zero
   padding while carrying a border, so body text sat on the rule. It was a
   hairline before and invisible; at 2px ink it is a defect. 76 .card
   instances across the nine articles. */
.profile, .article .card, .article .india-note, .article .protocol-step { padding: var(--space-5) var(--space-6); }
.article .protocol-step { padding-right: var(--space-16); }
.profile__title, .card__title { margin-bottom: var(--space-3); font-size: 1.3125rem; line-height: 1.25; }
.profile__text, .card__text { margin-bottom: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.style-block__label, .age-block__label { margin-bottom: var(--space-2); color: var(--thread-sage); font-family: var(--font-hand); font-size: 1.125rem; font-weight: 700; }
.familiar-group { margin: var(--space-8) 0; }
/* The fifth and last member of this sheet's stamped-label family, and the third
   raised in one lane (teacher-check fix F-1, 2026-09-05). Same grammar to the
   byte as .topic-card__tag above, so it takes the same floor: hard rule 41 puts
   a LABEL at 16px, and learn/addictions.html, the only page that carries this
   class, is a care page. Tracking drops 0.12em to 0.10em in the same move, the
   L54 idiom, so the tracking in px is unchanged. Measured at 390: "Substances"
   goes 125.313px to 141.25px inside a 342px container, so it cannot wrap. */
.familiar-group__label {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: 4px 10px 3px;
  border: 1.5px solid currentColor;
  border-radius: 4px 9px 5px 10px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.92;
}
.symptom-list, .warning-signs, .does-not-help, .redflags-list, .misdiagnosis-list, .not-list { margin: var(--space-5) 0; padding: 0; list-style: none; }
.symptom-list li, .warning-signs li, .does-not-help li, .redflags-list li, .misdiagnosis-list li, .not-list li { margin-bottom: var(--space-2); padding: var(--space-3) var(--space-4); color: var(--ink-2); font-size: 1rem; }
.misdiagnosis-list li, .not-list li { border: 1.5px solid var(--hairline-firm); border-radius: var(--radius-sm); background: var(--cloth-card); }
.misdiagnosis-list li::before { content: "\2192  "; color: var(--thread-terracotta); }
.not-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.not-list li::before { content: "\00D7  "; color: var(--thread-terracotta); font-weight: 700; }
.do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.do-block h3 { color: var(--thread-sage); }
.dont-block h3 { color: var(--thread-terracotta); }
.cultural-idiom { display: inline-block; margin: var(--space-1) var(--space-1) 0 0; padding: var(--space-2) var(--space-3); font-size: 1rem; }
.protocol-step { position: relative; }
.protocol-step__number { position: absolute; top: var(--space-4); right: var(--space-5); color: var(--ink); font-family: var(--font-pen); font-size: 2.25rem; font-weight: 700; line-height: 1; }
.medication-row { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--hairline); }
.medication-row__name { color: var(--ink); font-weight: 600; }
.medication-row__effect { color: var(--ink-2); }
/* Raised 15px to 16px on 2026-09-04 (Wave 2c). Table cells are body text on
   a care page, so hard rule 41's 16px floor binds: cognitive-gate reported
   112 failures on the supplements pricing table and 32 on the sexual-health
   referral table, 8 rows each over two viewports and two themes. Both tables
   already scroll inside their own box below 768px, so the wider cells do not
   reach the page edge. */
.referral-table, .pricing-table { width: 100%; margin: var(--space-5) 0; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums lining-nums; }
.referral-table th, .referral-table td, .pricing-table th, .pricing-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.referral-table th, .pricing-table th { color: var(--ink); background: var(--fill-cool); font-weight: 600; }
.hierarchy-list { padding: 0; counter-reset: hierarchy; list-style: none; }
.hierarchy-list li { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); counter-increment: hierarchy; }
.hierarchy-list li::before { content: counter(hierarchy, decimal-leading-zero); color: var(--ink); font-family: var(--font-pen); font-size: 1.5rem; line-height: 1.1; }
.supplement-section { margin: var(--space-12) 0; padding-top: var(--space-8); border-top: 2px solid var(--ink); }

/* The learn FAQ and the care FAQ are different components with the same class
   names. On the fifteen reshaped articles care.css loads FIRST (ledger L39), so
   the route wins every declaration it states and inherits every one it does not.
   Measured with both sheets loaded, three reached the route: .faq took
   display:grid with gap:0, .faq__item took 24px of block padding (this route
   pads the question and the answer instead), and .faq__item:first-child took a
   1px hairline that landed directly under the route's own 2px rule. The route
   states all three rather than relying on the load order to be right. */
.faq { display: block; margin-top: var(--space-8); border-top: 2px solid var(--ink); }
.faq__item { padding: 0; border-bottom: 1px solid var(--hairline); }
.faq__item:first-child { border-top: 0; }
.faq__question { margin: 0; padding: var(--space-4) 0 var(--space-2); color: var(--ink); font-size: 1.125rem; text-align: left; }
.article .faq__question { margin-top: 0; padding-top: var(--space-4); }
.article .faq__question::before { content: none; }
.faq__answer { padding-bottom: var(--space-4); color: var(--ink-2); }
.cta-section { position: relative; padding-block: 0; border-top: 0; text-align: center; }
.cta-section > .container, .cta-section > .shell { padding-block: clamp(4rem, 8vw, 7rem); }
.cta-section p { max-width: 46rem; margin-inline: auto; color: var(--ink); }
.cta-section .btn-group { justify-content: center; }

.crisis-block { display: grid; grid-template-columns: minmax(0, 3fr) minmax(14rem, 2fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.crisis-block__art { width: min(100%, 20rem); max-height: 25rem; object-fit: contain; justify-self: center; }

/* ------------------------------------------------- residents and volumes
   The download index is a reference catalog: 54 entries a resident scans at
   speed. Hairline cards, stamped tags, zero rotation, three visible families
   (study guide teal, Assimilate sage, psychotherapy terracotta). */
.resident-hero .hero__badge, .psychotherapy-page .hero__badge { color: var(--ink); }
.residents-page .section, .psychotherapy-page .section { padding-block: clamp(4rem, 8vw, 7rem); }
.residents-page .exam-section__title, .psychotherapy-page .exam-section__title { color: var(--ink); }
.exam-section__subtitle { max-width: 52rem; color: var(--ink-2); }
.exam-grid, .volume-rail { margin-top: var(--space-8); border-top: 2px solid var(--ink); }
.exam-card, .volume-row {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr) minmax(8rem, auto);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-5) 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}
/* The tag column, widened for .exam-card only (teacher-check fix F-1,
   2026-09-05). The tag is a blockified grid item that fills its column and
   inherits overflow-wrap: break-word, so a word longer than the column breaks
   mid-word rather than overflowing: at the shared max of 9rem (144px, 121px
   inside the padding and border) the thirteen "Psychotherapy" tags read
   PSYCHOTHER / APY at 1280. The max is measured, not guessed. The widest tag
   needs 178.781px in Switzer, 180.219px in the metric-matched Weave Switzer
   Fallback and 186.828px in bare Arial, the last face in the stack, so 12rem
   (192px) is the first round value that clears every face the page can render
   in, by 5.172px at the worst of the three. Left on .volume-row, which shares
   the rule above: its column holds "VOL 01" at 72px of content and needs
   nothing, and its own page overrides these columns in a page-level style
   block. Below 768px the media query at the end of this file collapses the
   card to one column, so this line has no effect at 390. */
.exam-card { grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr) minmax(8rem, auto); grid-template-areas: "tag title button" "tag description button"; transform: none; }
.exam-card__tag { grid-area: tag; align-self: start; }
.exam-card__title { grid-area: title; }
.exam-card__desc { grid-area: description; }
.exam-card__btn { grid-area: button; }
/* The tag chip carries its own white fill, so an accent-coloured 16px label
   is always measured against a white card and never against the paper band. */
.exam-card__tag { margin: 0 0 var(--space-2); background: var(--cloth-card); color: var(--thread-teal); transform: none; }
.exam-card__title { margin: 0; font-size: var(--text-h3); }
.exam-card__desc { margin: 0; color: var(--ink-2); font-size: 1rem; }
.exam-card__btn, .exam-card__cta {
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--thread-teal);
  border-radius: 4px 9px 5px 10px;
  background: var(--cloth-card);
  color: var(--thread-teal);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--duration-ui) var(--ease-weave), color var(--duration-ui) var(--ease-weave);
}
.exam-card__btn:hover { background: var(--thread-teal); color: var(--cloth-card); }
.exam-card__btn:disabled { opacity: 0.6; cursor: not-allowed; }
.exam-card--assimilate .exam-card__tag, .exam-card--assimilate .exam-card__btn { color: var(--thread-sage); border-color: var(--thread-sage); }
.exam-card--assimilate .exam-card__btn:hover { background: var(--thread-sage); color: var(--cloth-card); }
.exam-card--psychotherapy .exam-card__tag, .exam-card--psychotherapy .exam-card__btn { color: var(--learn-clay-ink); border-color: var(--learn-clay-ink); }
.exam-card--psychotherapy .exam-card__btn:hover { background: var(--learn-clay-ink); color: var(--cloth-card); }

/* Shared component, two routes: for-residents' "How to Use These Notes" and
   the psychotherapy hub's own intro card. Styled once, on purpose. LAW 9
   weights the opening line; the double bezel carries the hand. */
.resident-intro { padding: 6px; border: 2px solid var(--ink); border-radius: var(--wonky-2); background: var(--cloth-warm); box-shadow: var(--shadow-soft); }
.resident-intro__inner { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--hairline-firm); border-radius: var(--radius-inner); background: var(--cloth-card); }
.resident-intro__inner > p:first-of-type::first-line { font-size: 1.1em; font-weight: 600; letter-spacing: -0.01em; }
.resident-intro__inner p { color: var(--ink-2); }
.resident-intro__inner p:last-child { margin-bottom: 0; }

.breadcrumb { padding-top: 7.5rem; color: var(--ink-3); font-size: 0.875rem; }
.breadcrumb a { color: var(--ink-2); }
.volume-row__number { color: var(--thread-teal); font-family: var(--font-data); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.volume-row__copy h3 { margin-bottom: var(--space-2); }
.volume-row__copy p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.volume-row__cta { color: var(--thread-teal); font-size: 0.875rem; font-weight: 600; }

.wp-volume { overflow-x: hidden; }
.wp-volume #main-content { padding-top: 6rem; overflow: visible; }
.wp-volume nav.pt-back {
  position: relative;
  z-index: 10;
  padding: var(--space-4) max(var(--space-6), calc((100vw - 1184px) / 2));
  border-bottom: 1px solid var(--hairline);
  background: var(--cloth);
  color: var(--ink-3);
  font-family: var(--font-ui) !important;
  font-size: 0.875rem;
}
.wp-volume nav.pt-back a { color: var(--thread-teal); font-weight: 600; text-decoration: none; }
.wp-volume .site-footer { font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-body); }

/* The download gate is a live data-collection form. FULL QUIET: the markup
   carries data-surface="quiet", which re-scopes the display face to the
   serif, kills every rotation and hides annotations. These rules only make
   the inputs match the house form field. */
.download-gate__fallback input[type="text"], .download-gate__fallback input[type="email"] { min-height: 48px; width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--hairline-firm); border-radius: var(--radius-sm); background: var(--cloth-card); color: var(--ink); font-size: var(--text-base); }
.download-gate__fallback input[type="text"]:focus, .download-gate__fallback input[type="email"]:focus { outline: 2px solid var(--thread-sage); outline-offset: 2px; }
.download-gate[data-surface="quiet"] .download-gate__inner { background: var(--cloth-card); }
.download-gate[data-surface="quiet"] .eyebrow { transform: none; }
.download-gate__privacy, .download-gate__status { color: var(--ink-2); }

@media print {
  .wp-volume .site-header, .wp-volume .site-footer, .wp-volume .wp-crisis { display: none !important; }
  .wp-volume #main-content { padding-top: 0; }
}

@media (max-width: 767px) {
  .container, .learn-hero__grid, .hero__inner, .article-hero__inner { width: min(100% - 2rem, 680px); }
  .learn-hero__grid, .hero__inner, .article-hero__inner, .clinician-band { grid-template-columns: 1fr; }
  .learn-hero__grid, .hero__inner, .article-hero__inner { padding-top: clamp(6.5rem, 18vw, 8.5rem); }
  .hero__illustration { grid-row: 1; }
  .hero__img, .learn-hero__art { width: min(70%, 18rem); }
  .art-plate { width: min(80%, 17rem); padding: var(--space-4); }
  .art-plate .hero__img, .art-plate .learn-hero__art, .art-plate .clinician-band__art { width: 100%; }
  .topic-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .topic-card, .topic-card:nth-child(4n + 1), .topic-card:nth-child(4n) { grid-column: auto; }
  .topic-card { --rot: -0.5deg; }
  .topic-card:nth-child(even) { --rot: 0.5deg; }
  .topic-card__media { min-height: 12rem; }
  .grid-2, .grid-3, .do-dont, .not-list { grid-template-columns: 1fr; }
  .care-bridge { grid-template-columns: 1fr; }
  .crisis-block { grid-template-columns: 1fr; }
  .crisis-block__art { grid-row: 1; width: min(58%, 14rem); max-height: 17rem; }
  .exam-card, .volume-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .exam-card { grid-template-areas: "tag" "title" "description" "button"; }
  .exam-card__btn, .exam-card__cta { justify-self: start; width: auto; }
  .medication-row { grid-template-columns: 1fr; }
  .referral-table, .pricing-table { display: block; overflow-x: auto; }
  .breadcrumb { padding-top: 6.5rem; }
  .article h2 { padding-top: var(--space-4); }
}