/*
 * hong-content-reskin.css — CSS-only blog content reskin (3-tier hybrid).
 * Spec: docs/superpowers/specs/2026-05-28-blog-content-reskin-design.md
 * Scoped under .entry-content. Loads at priority 26 (after legacy-acf-blocks@20,
 * legacy-content-base@21, hong-cta@22) so it wins cascade ties. No !important.
 * Bans honored: no border-left/right>1px stripes, no gradient text, no glass, no card-soup.
 */
.entry-content {
  --rsk-ink: #0a0a0a;
  --rsk-text: #1a1a1a;
  --rsk-muted: #6b6b67;
  --rsk-line: #d4d4d0;
  --rsk-accent: #cc2518;
  --rsk-cream: #f7f4ed;
  --rsk-on-ink: #ffffff;
  --rsk-measure: 88ch;     /* shared content max-width — prose AND cards align to this */
  --rsk-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rsk-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}
/* Tier rules appended in Tasks 3, 4, 5 */

/* ═══ TIER 3 — prose polish (block1 text, block5 image). 80% case. ═══ */

/* Shared measure: prose + (later) cards align to the same column edge */
.entry-content .bk1 > p,
.entry-content .bk1 > ul,
.entry-content .bk1 > ol,
.entry-content .bk1 > h2,
.entry-content .bk1 > h3,
.entry-content .bk1 > h4 {
  max-width: var(--rsk-measure);
}

/* § section markers — counter scoped to .bk1 h2 ONLY (no jumps across other blocks) */
.entry-content { counter-reset: rsk-sec; }
.entry-content .bk1 h2 {
  position: relative;
  margin-top: 1.9em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rsk-ink);
}
.entry-content .bk1 h2::before {
  counter-increment: rsk-sec;
  content: "§ " counter(rsk-sec, decimal-leading-zero);
  display: block;
  margin-bottom: 6px;
  font: 500 11px/1 var(--rsk-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rsk-accent);
}

/* Checkmark lists (ul only; keep ol numbered) */
.entry-content .bk1 ul {
  list-style: none;
  padding-left: 0;
}
.entry-content .bk1 ul > li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  /* modern-base.css + legacy-content-base.css set `.entry-content ul li
     { list-style: disc }` (0,1,2) directly on the li, which the `list-style:none`
     on the parent ul above can't override (it's applied to the li, not inherited).
     Result was a disc AND the ✓ below = double marker. Kill it here at (0,2,2). */
  list-style: none;
}
.entry-content .bk1 ul > li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--rsk-accent);
}
/* Don't checkmark nested uls (keep them simple discs) */
.entry-content .bk1 ul ul {
  list-style: disc;
  padding-left: 1.25em;
}
.entry-content .bk1 ul ul > li { padding-left: 0.25em; list-style: disc; }
.entry-content .bk1 ul ul > li::before { content: none; }

/* block5 image showcase — clean, measure-aligned for semiwidth */
.entry-content .bk5.semiwidth {
  max-width: var(--rsk-measure);
  margin-inline: auto;
}
.entry-content .bk5 > img { display: block; width: 100%; height: auto; }

/* ═══ TIER 2 — cards (cream / 1px bordered), aligned to --rsk-measure. ═══ */

/* block3 — text + pull-quote → V3 "inline aside" (magazine).
   Real DOM order (verified by curl) is .bk3-left (quote) FIRST, then .bk3-right
   (body), so the quote can float into a cream box that the body text wraps
   around — eliminating the old ~75%-empty left column. Stacks full-width on
   mobile. .bk3-right must NOT form a BFC or the text stops wrapping, so we force
   overflow:visible (legacy float layouts often set overflow:hidden here). */
.entry-content .bk3 {
  display: block;
  max-width: var(--rsk-measure);
  margin-inline: auto;
  padding: 24px 0;
  border-top: 1px solid var(--rsk-line);
}
.entry-content .bk3::after { content: ""; display: block; clear: both; } /* contain the float */
.entry-content .bk3-left,
.entry-content .bk3-right { float: none; width: auto; padding: 0; }
.entry-content .bk3-left:empty { display: none; } /* no empty cream box */
.entry-content .bk3-left {
  background: var(--rsk-cream);
  border: 1px solid var(--rsk-line);
  padding: 16px 18px;
  margin: 2px 0 14px;
  font: 400 italic clamp(17px,1.9vw,21px)/1.4 var(--rsk-sans);
  color: var(--rsk-ink);
  text-wrap: balance;
}
.entry-content .bk3-left::before { content: "“"; color: var(--rsk-accent); margin-right: 4px; }
.entry-content .bk3-right { overflow: visible; font-size: 16px; line-height: 1.7; color: var(--rsk-text); }
.entry-content .bk3-right > :first-child { margin-top: 0; }
@media (min-width: 720px) {
  .entry-content .bk3-left { float: right; width: 42%; max-width: 320px; margin: 4px 0 16px 28px; }
}

/* block2 REPEATER ONLY — disambiguated from block4-extend by div + .bkn */
.entry-content div.bk2.bkn {
  max-width: var(--rsk-measure);
  margin-inline: auto;
}
.entry-content div.bk2.bkn .bk2-top { margin-bottom: 16px; }
.entry-content div.bk2.bkn .rep-subs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rsk-line);
  border: 1px solid var(--rsk-line);
}
@media (min-width: 700px) {
  .entry-content div.bk2.bkn .rep-subs { grid-template-columns: 1fr 1fr; }
}
.entry-content div.bk2.bkn .rep-sub {
  background: #fff;
  padding: 18px 20px;
  margin: 0;
  width: auto;
  float: none;
}
/* alternating cream/white cards + bold underlined "impact" header so the
   repeater reads as a scannable card series instead of flat white boxes */
.entry-content div.bk2.bkn .rep-sub:nth-child(odd) { background: var(--rsk-cream); }
.entry-content div.bk2.bkn .rep-sub:nth-child(even) { background: #fff; }
.entry-content div.bk2.bkn .rep-sub-t {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rsk-line);
  font: 700 17px/1.3 var(--rsk-sans);
  color: var(--rsk-ink);
}
.entry-content div.bk2.bkn .rep-sub-d { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--rsk-text); }

/* block4 image+text — BOTH variants: section.bk4 (normal) + section.bk2.bkw (extend, id b4_) */
.entry-content section.bk4,
.entry-content section.bk2.bkw {
  max-width: var(--rsk-measure);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 760px) {
  .entry-content section.bk4,
  .entry-content section.bk2.bkw {
    grid-template-columns: minmax(0,5fr) minmax(0,7fr);
    gap: 28px;
    align-items: start;
  }
  /* These blocks hold 3 children (section title + image + text). With no
     grid-template-areas the title+image take row 1 and the text gets dumped into
     row 2 col 1 (narrow) — crammed and misaligned. Pin them: title spans full
     width, image→col 1, text→wide col 2 (both top-aligned via align-items:start). */
  .entry-content section.bk4 .sec-title,
  .entry-content section.bk2.bkw .sec-title { grid-column: 1 / -1; }
  .entry-content section.bk4 .bkw-left,
  .entry-content section.bk2.bkw .bkw-left { grid-column: 1; }
  .entry-content section.bk4 .bkw-right,
  .entry-content section.bk2.bkw .bkw-right { grid-column: 2; }
}
.entry-content section.bk4 .bkw-left,
.entry-content section.bk4 .bkw-right,
.entry-content section.bk2.bkw .bkw-left,
.entry-content section.bk2.bkw .bkw-right { float: none; width: auto; padding: 0; }
/* V1 "figure card": the image reads as a labeled plate — 1px frame + a mono
   caption attached under a hairline rule (evidence, not decoration). */
.entry-content section.bk4 img,
.entry-content section.bk2.bkw img { display: block; width: 100%; height: auto; border: 1px solid var(--rsk-line); }
.entry-content .bkw-righti > :first-child { margin-top: 0; }
.entry-content .im-caption { margin: 8px 0 0; padding-top: 7px; border-top: 1px solid var(--rsk-line); font: 400 11.5px/1.5 var(--rsk-mono); letter-spacing: 0.04em; color: var(--rsk-muted); }
.entry-content .im-caption:empty { display: none; } /* no stray rule when uncaptioned */

/* block43 (tb6) list + image */
.entry-content section.tbk6 {
  max-width: var(--rsk-measure);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 760px) { .entry-content section.tbk6 { grid-template-columns: minmax(0,5fr) minmax(0,7fr); } }
.entry-content .tb6-right, .entry-content .tb6-left { float: none; width: auto; padding: 0; }
.entry-content .tb6-right img { display: block; width: 100%; height: auto; }
.entry-content .tb6-ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rsk-ink); }
.entry-content .tb6-item { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--rsk-line); width: auto; }
.entry-content .tb6-t { margin: 0; display: flex; gap: 12px; align-items: baseline; font: 600 18px/1.3 var(--rsk-sans); color: var(--rsk-ink); }
.entry-content .tb6-num { font: 500 14px/1 var(--rsk-mono); color: var(--rsk-accent); flex-shrink: 0; }
.entry-content .tb6-d { margin: 0; font-size: 15px; line-height: 1.55; color: var(--rsk-text); }

/* block44 (tb7) alternating rows */
.entry-content section.tbk7 { max-width: var(--rsk-measure); margin-inline: auto; }
.entry-content .tb7-rows { border-top: 2px solid var(--rsk-ink); border-bottom: 2px solid var(--rsk-ink); }
.entry-content .tb7-row { padding: 20px 0; border-top: 1px solid var(--rsk-line); font-size: 15.5px; line-height: 1.6; color: var(--rsk-text); }
.entry-content .tb7-row:first-child { border-top: 0; }
.entry-content section.tbk7.tb7-odd .tb7-row:nth-child(odd) { background: var(--rsk-cream); padding-inline: 20px; }
/* Legacy "extending overlay" remnant: .tb7-ext / .tb7-row paint an absolutely
   positioned white/#f9f9f9 block at left:100% (width:200%, z-index:99/999) to mask
   the old full-bleed layout. It is pointless under the reskin (rows get their tint
   directly) and a stray off-white block / z-index landmine — remove it. Same
   left:100% mask pattern lives on .b31-ext (block31 extended variant). */
.entry-content section.tbk7::after,
.entry-content .tbk7 .tb7-row::after,
.entry-content .bk31 .b31-ext::before { content: none; }

/* block45 (tb8) title + description rows */
.entry-content section.tbk8 { max-width: var(--rsk-measure); margin-inline: auto; }
.entry-content .tb8-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 18px 0; border-top: 1px solid var(--rsk-line); }
.entry-content .tb8-row:first-child { border-top: 2px solid var(--rsk-ink); }
.entry-content .tb8-row:last-child { border-bottom: 2px solid var(--rsk-ink); }
@media (min-width: 700px) { .entry-content .tb8-row { grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: 28px; } }
.entry-content .tb8-title { margin: 0; font: 600 18px/1.3 var(--rsk-sans); color: var(--rsk-ink); }
.entry-content .tb8-des { margin: 0; font-size: 15px; line-height: 1.6; color: var(--rsk-text); }
/* tb8 children carry legacy `width:40-50%; float:left/right` (legacy-acf-blocks.css).
   The grid can't size them until those are cleared, or .tb8-des collapses to
   ~147px and wraps into a ~600px-tall sliver (rows became 6491px total). Clear
   float/width and pin columns explicitly: title→narrow (1), description→wide (2). */
.entry-content .tbk8 .tb8-title,
.entry-content .tbk8 .tb8-des { float: none; width: auto; max-width: none; margin-right: 0; }
@media (min-width: 700px) {
  .entry-content .tbk8 .tb8-title { grid-column: 1; }
  .entry-content .tbk8 .tb8-des { grid-column: 2; }
}
/* drop the legacy 28px paragraph margin trailing each description — the row
   padding already separates rows, so this just bloats row height. */
.entry-content .tbk8 .tb8-des > :last-child { margin-bottom: 0; }

/* ═══ TIER 1 — bold "moments" (ink + accent). Re-arm text in dark bands. ═══ */

/* block41 STEPS / timeline */
.entry-content section.bk41 { max-width: var(--rsk-measure); margin-inline: auto; }
.entry-content .b41-steps {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--rsk-line);
  gap: 1px;
  background: var(--rsk-line);
}
@media (min-width: 720px) { .entry-content .b41-steps { grid-template-columns: repeat(3, 1fr); } }
.entry-content .b41-step { background: #fff; padding: 24px 22px; display: grid; gap: 10px; align-content: start; width: auto; }
/* legacy-acf-blocks.css sets `.b41-step { width: 30% }` (a float-era width). Under
   this grid that 30% resolves against the 301px track = ~90px, squeezing each step
   into a 1000px-tall sliver. width:auto fills the track; max-width clamps any legacy
   child width (e.g. .b41-line) so nothing overflows the step. */
.entry-content .b41-step > * { max-width: 100%; }
.entry-content .b41-step-t { font: 600 11px/1 var(--rsk-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rsk-ink); order: 2; }
.entry-content .b41-head {
  font: 400 clamp(36px,4.5vw,52px)/0.95 var(--rsk-mono);
  color: var(--rsk-accent);
  /* legacy-acf-blocks.css styles .b41-head as a 30px circular badge
     (border-radius:50%; border:3px; width/height:30px). The reskin wants a big
     accent numeral, not a badge — the 52px font overflowed the 30px circle and
     showed as a malformed loop. Strip the badge so the numeral renders clean. */
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  min-width: 0;
  background: none;
}
.entry-content .b41-line { order: 1; }
.entry-content .b41-step-b { font-size: 14.5px; line-height: 1.55; color: var(--rsk-text); order: 3; }
.entry-content .b41-title { margin: 0 0 18px; font: 600 clamp(22px,2.6vw,28px)/1.2 var(--rsk-sans); color: var(--rsk-ink); }

/* Long-content step blocks: when the steps carry sub-lists (e.g. a treatment
   list — "Medicamentos / Reabilitação / …" each with bullets), the 3-col timeline
   crams each step into a ~286px column that wraps ~700px tall ("too thin / too
   vertical"). Detect them with :has() and lay them out as full-width numbered
   timeline rows instead — the accent number + rule already read as the timeline
   marker — and flow each sub-list into 2 columns. Short step blocks (no list)
   keep the 3-col timeline above. Universal: applies wherever block41 is used. */
@media (min-width: 720px) {
  .entry-content .b41-steps:has(.b41-step ul) { grid-template-columns: 1fr; }
  /* Per step, lay the number in a left rail aligned with the content. .b41-head
     nests inside .b41-line (a full-width 3px rule that otherwise strikes through
     the numeral and juts past the padding); display:contents unwraps it so the
     numeral becomes a grid item and the stray rule is dropped. */
  .entry-content .b41-steps:has(.b41-step ul) .b41-step {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 2px;
    align-content: start;
  }
  .entry-content .b41-steps:has(.b41-step ul) .b41-line { display: contents; }
  .entry-content .b41-steps:has(.b41-step ul) .b41-head { grid-column: 1; grid-row: 1 / span 2; align-self: start; font-size: clamp(28px, 3.2vw, 40px); }
  .entry-content .b41-steps:has(.b41-step ul) .b41-step-t { grid-column: 2; grid-row: 1; align-self: center; }
  .entry-content .b41-steps:has(.b41-step ul) .b41-step-b { grid-column: 2; grid-row: 2; }
  .entry-content .b41-steps:has(.b41-step ul) .b41-step-b ul { columns: 2; column-gap: 40px; }
  .entry-content .b41-steps:has(.b41-step ul) .b41-step-b ul li { break-inside: avoid; }
}

/* block33 STANDALONE QUOTE → V2 "oversized mark".
   Drop the top/bottom sandwich rules; hang a big accent quote-glyph in the left
   margin (asymmetric, editorial). Holds for short pull-quotes and long
   explanatory quotes alike. .bk33 quotes can be a full paragraph (verified). */
.entry-content .bk33 {
  position: relative;
  max-width: var(--rsk-measure);
  margin: clamp(40px,6vw,64px) auto;
  padding: 6px 0 6px clamp(40px,6vw,68px);
  border: 0;
}
.entry-content .bk33 .icon-quote { display: none; }
.entry-content .bk33::before {
  content: "“";
  position: absolute;
  left: -2px;
  top: -0.22em;
  font: 400 clamp(58px,8vw,100px)/1 var(--rsk-sans);
  color: var(--rsk-accent);
  pointer-events: none;
}
.entry-content .b33-quote {
  font: 400 italic clamp(21px,2.8vw,29px)/1.34 var(--rsk-sans);
  color: var(--rsk-ink);
  text-wrap: balance;
}
.entry-content .b33-quote::before,
.entry-content .b33-quote::after { content: none; }

/* block31 sub-blocks — dot/number-led headings + multi-col */
.entry-content section.bk31 { max-width: var(--rsk-measure); margin-inline: auto; }
.entry-content .bk31 .subb { margin: 0 0 26px; }
.entry-content .b3111 { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--rsk-ink); }
.entry-content .b3111-dots { width: 8px; height: 8px; background: var(--rsk-accent); align-self: center; background-image: none; }
.entry-content .b3111-title > * { margin: 0; font: 600 clamp(20px,2.2vw,26px)/1.2 var(--rsk-sans); color: var(--rsk-ink); }
.entry-content .b3112-dash > *::before { content: "— "; color: var(--rsk-accent); }
.entry-content .subb.b313 { display: grid; gap: 24px; }
@media (min-width: 720px) {
  .entry-content .subb.b313-2 { grid-template-columns: repeat(2,1fr); }
  .entry-content .subb.b313-3 { grid-template-columns: repeat(3,1fr); }
}
/* block31 grid children keep legacy float/% widths too (`.b313-col{float:left;width:48%}`,
   `.b3111-title{float:left;width:75%}`, `.b3111-dots{float:right}`). Clear them so the
   grid tracks control sizing — otherwise .b313-col collapses to ~164px and stacks ~757px tall. */
.entry-content .bk31 .b313-col { float: none; width: auto; margin-right: 0; }
.entry-content .bk31 .b3111-title { float: none; width: auto; margin-right: 0; }
.entry-content .bk31 .b3111-dots { float: none; }

/* block31 b317 region/feature boxes. Legacy renders these as floated ~50% boxes
   (~330px, "too thin") with a tall single-column symptom list, and a tofu fontello
   marker before each title. Reskin: stack full-width, rule-separated, with the list
   flowed into 2 columns; swap the marker for a clean accent square. */
.entry-content .bk31 .subb.b317 { display: block; }
.entry-content .bk31 .b317-box {
  width: auto;
  float: none;
  margin: 0;
  padding: 22px 0;
  border-top: 1px solid var(--rsk-line);
}
.entry-content .bk31 .subb.b317 .b317-box:first-child { border-top: 0; padding-top: 0; }
.entry-content .bk31 .b317-box::after { display: none; }
.entry-content .bk31 .b317-box ul { columns: 2; column-gap: 36px; margin: 10px 0 0; }
.entry-content .bk31 .b317-box ul li { break-inside: avoid; }
.entry-content .bk31 .b317-box h4::before {
  content: "";
  font-family: inherit;
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--rsk-accent);
  margin-right: 10px;
  vertical-align: middle;
}

/* block31 b316a numbered list → numbered cards: big accent number in a left rail,
   bold title + body in the content column, alternating cream/white backgrounds,
   hairline dividers. Turns the flat legacy numbered list into a polished series. */
.entry-content .bk31 .b316a-ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rsk-line);
  border: 1px solid var(--rsk-line);
}
.entry-content .bk31 .b316a-item {
  background: #fff;
  margin: 0;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 6px;
  align-items: start;
}
.entry-content .bk31 .b316a-item:nth-child(even) { background: var(--rsk-cream); }
.entry-content .bk31 .b316a-num { grid-column: 1; grid-row: 1 / span 9; font: 400 clamp(26px,2.8vw,36px)/1 var(--rsk-mono); color: var(--rsk-accent); }
.entry-content .bk31 .b316a-item > :not(.b316a-num) { grid-column: 2; min-width: 0; }
.entry-content .bk31 .b316a-item > h4 { margin: 0; font: 700 17px/1.3 var(--rsk-sans); color: var(--rsk-ink); }

/* OPTIONAL dark variant for block31 alert sub-blocks (.b31-ink opt-in).
   Text re-armed to white so legacy-content-base can't force black-on-black. */
.entry-content .bk31 .b31-ink { background: var(--rsk-ink); padding: 22px 24px; }
.entry-content .bk31 .b31-ink,
.entry-content .bk31 .b31-ink p,
.entry-content .bk31 .b31-ink li,
.entry-content .bk31 .b31-ink h3,
.entry-content .bk31 .b31-ink h4 { color: var(--rsk-on-ink); }

/* ═══════════════════════════════════════════════════════════════════
   DEFENSIVE NET — robustness for the global rollout (all ~735 posts)
   ─────────────────────────────────────────────────────────────────────
   Each block the reskin converts to a grid above resets the legacy
   float/%-width on its OWN content children (tb8-title/des, b313-col,
   bkw-left/right, b41-step, …). Verified by force-loading this stylesheet
   onto non-pilot posts (bursite-isquiatica, cervicobraquialgia): the
   block31 sub-variants the reskin does NOT grid (b312 heading, b314
   title|body 2-col, b315, b316/b316a list, b316b items) render cleanly at
   the 88ch measure in their legacy layout — so NO blanket width reset is
   applied here on purpose (it would collapse those working 2-cols and the
   accent dots/numbers). The only universal guard needed is min-width:0 so a
   long medical term or URL can't blow out a grid track on an unseen post. */
.entry-content .bk3 > *,
.entry-content div.bk2.bkn .rep-subs > *,
.entry-content section.bk4 > *,
.entry-content section.bk2.bkw > *,
.entry-content section.tbk6 > *,
.entry-content .tb8-row > *,
.entry-content .b41-steps > .b41-step,
.entry-content .subb.b313 > *,
.entry-content .b3111 > * { min-width: 0; }

/* ═══ block01 (.bk1) editorial blend — modernization (2026-05-28) ═══
 * Approved low-risk lift over the Tier-3 prose base:
 *   1. prose holds the shared 88ch measure (aligns with cards at one right edge;
 *      wider reading column by preference over the 65-75ch ideal) + looser leading
 *   2. tonal ✓ key-point panels (cream + 1px border, square to match block2/3)
 *   3. faint hairline section dividers + more air; § eyebrow stays on top
 * CSS-only, content-agnostic, scoped to .entry-content .bk1. No !important. */
.entry-content { --rsk-prose: var(--rsk-measure); }

/* 1. reading measure — narrow prose only */
.entry-content .bk1 > p,
.entry-content .bk1 > ol,
.entry-content .bk1 > h3,
.entry-content .bk1 > h4,
.entry-content .bk1 > blockquote { max-width: var(--rsk-prose); }
.entry-content .bk1 > p { line-height: 1.72; }

/* 2. section rhythm — faint divider between § sections; keep eyebrow + under-rule */
.entry-content .bk1 > h2 {
  max-width: var(--rsk-prose);
  margin-top: 3em;
  padding-top: 1.4em;
  border-top: 1px solid var(--rsk-line);
}
.entry-content .bk1:first-of-type > h2:first-child {
  margin-top: 0.6em; padding-top: 0; border-top: 0;
}

/* 3. ✓ key-point panel — top-level checkmark lists as a tonal evidence surface */
.entry-content .bk1 > ul {
  max-width: var(--rsk-prose);
  background: var(--rsk-cream);
  border: 1px solid var(--rsk-line);
  padding: 16px 22px;
}
.entry-content .bk1 > ul ul { background: none; border: 0; padding: 0 0 0 1.25em; }

/* 4. link polish */
.entry-content .bk1 a { text-underline-offset: 0.16em; text-decoration-thickness: 1px; }

/* ═══ block4/5 section-title — mobile fix (2026-05-28) ═══
 * The `.sec-title` (block4/5/bkw heading row) carries a legacy desktop inset of
 * padding:0 95px. On a ~304px phone that leaves only ~114px of content, so the
 * heading ("Diagnóstico de artrose na coluna") collapses to one word per line.
 * Two contributing legacy rules pile on: `.bk4-h3{float:left;max-width:400px}`
 * (its own ≤767px reset is overridden by source order) and the `.bk4-dot`
 * decoration (float:right, 165px). Fix on mobile: drop the section-title's own
 * horizontal inset (it's redundant inside .entry-content), re-arm the heading to
 * full width, and hide the decorative dots. */
@media (max-width: 767px) {
  .entry-content .sec-title { padding-left: 0; padding-right: 0; }
  .entry-content .bk4-h3 { float: none; width: auto; max-width: 100%; min-height: 0; }
  .entry-content .bk4-dot { display: none; }
}

/* ═══ block02 repeater — numbered series (2026-05-28, approved) ═══
 * Lead each repeater card with an accent numeral in a left rail so the set reads
 * as a scannable sequence (matches the §/b316a number language). Keeps the
 * existing alternating cream/white + bold underlined titles. */
.entry-content div.bk2.bkn .rep-subs { counter-reset: rep; }
.entry-content div.bk2.bkn .rep-sub {
  counter-increment: rep;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-content: start;
}
.entry-content div.bk2.bkn .rep-sub::before {
  content: counter(rep, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 2;
  font: 400 clamp(24px, 2.6vw, 32px)/1 var(--rsk-mono);
  color: var(--rsk-accent);
}
.entry-content div.bk2.bkn .rep-sub-t,
.entry-content div.bk2.bkn .rep-sub-d { grid-column: 2; min-width: 0; }

/* ═══ block36 — FAQ (mini). V1 ruled Q/A list (2026-05-29, approved) ═══
 * Was raw legacy, restyled as a V1 ruled Q/A list. The click-to-expand
 * accordion script was retired in R5 (no published post renders block36 on a
 * public route), so the FAQ is now a static ruled list: every answer stays open,
 * which is also the progressive-enhancement default (no max-height is set). The
 * legacy fontello chevron is hidden in favour of a clean +/× indicator; the
 * .is-open / .is-accordion rules below stay inert with no script to drive them.
 * Each question is a bold heading a touch larger than body with an accent "P."
 * marker; answer muted; hairline between pairs. Legacy 10% indent + red
 * title-bar dropped to sit on the measure. */
.entry-content section.bk36 { max-width: var(--rsk-measure); margin-inline: auto; }
.entry-content .bk36 .b36-t { cursor: pointer; }
.entry-content .bk36 .b36-t::after { content: none; display: none; }       /* hide dead fontello chevron */
/* accordion mechanics: bodies clip; the transition is gated to .is-accordion
   (added by JS after the initial states) so the first collapse is instant. */
.entry-content .bk36 .b36-b { overflow: hidden; }
.entry-content .bk36.is-accordion .b36-b { transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
/* clean +/× toggle indicator (replaces the hidden legacy chevron), pinned to the
   right of the flex question row; glyph swaps on .is-open. */
.entry-content .bk36 .b36-t > *::after { content: "+"; margin-left: auto; flex-shrink: 0; font: 400 24px/1 var(--rsk-sans); color: var(--rsk-accent); }
.entry-content .bk36 .b36-faq.is-open .b36-t > *::after { content: "\00d7"; }
.entry-content .bk36 .b36-title.b36-dash { padding-left: 0; margin: 0 0 6px; }
.entry-content .bk36 .b36-title.b36-dash::before { content: none; }       /* drop legacy red bar */
.entry-content .bk36 .b36-title > * { margin: 0; font: 700 clamp(22px,2.6vw,30px)/1.15 var(--rsk-sans); color: var(--rsk-ink); }
.entry-content .bk36 .b36-title h2:empty { display: none; }                 /* no lone mark when untitled */
.entry-content .bk36 .b36-faqs { padding-left: 0; border-top: 2px solid var(--rsk-ink); }
.entry-content .bk36 .b36-faq { padding: 16px 0; border-top: 1px solid var(--rsk-line); border-bottom: 0; }
.entry-content .bk36 .b36-faq:first-child { border-top: 0; }
.entry-content .bk36 .b36-t { width: auto; margin: 0 0 6px; }
.entry-content .bk36 .b36-t > * { margin: 0; display: flex; gap: 10px; font: 600 clamp(17px,1.7vw,20px)/1.32 var(--rsk-sans); color: var(--rsk-ink); }
.entry-content .bk36 .b36-t > *::before { content: "P."; flex-shrink: 0; color: var(--rsk-accent); font: 500 0.82em/1.4 var(--rsk-mono); }
.entry-content .bk36 .b36-b { width: auto; color: var(--rsk-text); font-size: 15.5px; line-height: 1.65; }
.entry-content .bk36 .b36-b > :first-child { margin-top: 0; }
.entry-content .bk36 .b36-b > :last-child { margin-bottom: 0; }

/* ═══ block32 — Titles. V1 eyebrow + rule (2026-05-29, approved) ═══
 * Hide the legacy dots; the tagline becomes a mono accent eyebrow ABOVE the bold
 * title with a hairline under. bk321 nests the tagline inside .b32-title; bk322
 * keeps it as a sibling in .bk32-i — both are hoisted above via flex order. */
.entry-content .bk32 { max-width: var(--rsk-measure); margin-inline: auto; }
.entry-content .bk32 .b32-dots { display: none; }
.entry-content .bk32 .bk32-i { display: flex; flex-direction: column; }
.entry-content .bk32 .bk32-i > .b32-tagline { order: -1; }
.entry-content .bk32 .b32-title { display: flex; flex-direction: column; gap: 5px; padding-bottom: 12px; border-bottom: 1px solid var(--rsk-line); }
.entry-content .bk32 .b32-title > :is(h1,h2,h3,h4,h5) { margin: 0; order: 2; font: 700 clamp(22px,2.8vw,32px)/1.12 var(--rsk-sans); color: var(--rsk-ink); }
.entry-content .bk32 .b32-title.b32-dash > :is(h1,h2,h3,h4,h5)::before { content: none; }
.entry-content .bk32 .b32-tagline { order: 1; margin: 0; font: 500 11.5px/1.4 var(--rsk-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rsk-accent); }

/* ═══ block31 sub-family — harmonize the unstyled sub-blocks (2026-05-29) ═══
 * b312 text, b314 text+quote, b315 image, b316b checklist rendered raw legacy.
 * Bring them into the existing reskin language. Also activates the b311 heading
 * grid: the real wrapper class is .b311.bk3111 (the old .b3111 rule matched
 * nothing). All CSS-only, scoped under .bk31. */
.entry-content .bk31 .b311.bk3111 { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--rsk-ink); }

.entry-content .bk31 .subb.b312 { font-size: 16px; line-height: 1.7; color: var(--rsk-text); }
.entry-content .bk31 .subb.b312 > :first-child { margin-top: 0; }

.entry-content .bk31 .subb.b314 { display: block; }
.entry-content .bk31 .subb.b314::after { content: ""; display: block; clear: both; }
.entry-content .bk31 .b314-left,
.entry-content .bk31 .b314-right { float: none; width: auto; }
.entry-content .bk31 .b314-left:empty { display: none; }
.entry-content .bk31 .b314-left {
  background: var(--rsk-cream); border: 1px solid var(--rsk-line); padding: 14px 16px; margin: 2px 0 14px;
  font: 400 italic clamp(16px,1.8vw,20px)/1.4 var(--rsk-sans); color: var(--rsk-ink);
}
.entry-content .bk31 .b314-left > :first-child { margin-top: 0; }
.entry-content .bk31 .b314-left > :last-child { margin-bottom: 0; }
.entry-content .bk31 .b314-right { overflow: visible; font-size: 16px; line-height: 1.7; color: var(--rsk-text); }
.entry-content .bk31 .b314-right > :first-child { margin-top: 0; }
@media (min-width: 720px) {
  .entry-content .bk31 .b314-left { float: right; width: 42%; max-width: 320px; margin: 4px 0 16px 28px; }
}

.entry-content .bk31 .b315 img { display: block; width: 100%; height: auto; border: 1px solid var(--rsk-line); }

.entry-content .bk31 .b316b-tl { background: var(--rsk-cream); border: 1px solid var(--rsk-line); padding: 16px 20px; display: grid; gap: 9px; }
.entry-content .bk31 .b316b-item { position: relative; margin: 0; padding-left: 26px; color: var(--rsk-text); font-size: 15.5px; line-height: 1.5; }
.entry-content .bk31 .b316b-item::before { content: "✓"; position: absolute; left: 0; top: 0; font-family: var(--rsk-sans); font-weight: 700; color: var(--rsk-accent); }