/* ============================================================
   CLINICAL MARGIN — editorial system for drshehan.com
   Layered on the existing tokens in global.css. Adds nothing
   to the palette except one paper tint and one caution hue.

   THREE REGISTERS. Every component belongs to exactly one:
     A  TEXT      the prose column (the argument)      660px
     B  MARGIN    the annotation column (the aside)    232px
     C  BREAKOUT  the full editorial canvas (the picture) 948px

   If a component does not declare a register, it does not ship.
   ============================================================ */

.ce {
  /* Inherited, unchanged: --navy --gold --gold-h --gold-text --cream
     --txt --txt2 --txt3 --bdr --hd --bd --px */

  /* NEW — two values only */
  --paper:      #EFE9E0;   /* breakout ground: one step under cream, no border needed */
  --caution:    #8C4A3F;   /* safety rules + eyebrows only. Never a fill. 5.9:1 on cream */
  --hair:       rgba(0,31,63,.13);
  --hair-soft:  rgba(0,31,63,.07);

  /* Measure and canvas */
  --ce-prose:   660px;     /* ≈ 63ch at 17px Source Serif 4. Never changes. */
  --ce-wide:    760px;     /* the centre column: prose + room for breakouts */
  --ce-aside:   236px;     /* related clinical pieces */
  --ce-rail:    180px;
  --ce-rail-gap:44px;

  /* Prose scale — matches the current .article system exactly */
  --ce-fs:      17px;
  --ce-lh:      1.8;
  --ce-h2:      clamp(1.35rem, 2.2vw, 1.75rem);
  --ce-h3:      clamp(1.125rem, 1.65vw, 1.3125rem);
  --ce-h4:      clamp(1.0625rem, 1.45vw, 1.1875rem);

  /* Margin scale — deliberately quieter, never competes with prose */
  --ce-m-fs:    14.5px;
  --ce-m-lh:    1.62;
  --ce-eyebrow: 10.5px;

  background: linear-gradient(180deg, var(--cream) 0%, #fbfaf8 100%);
  padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 80px);
}
@media (max-width: 640px) { .ce { --ce-fs: 16.5px; } }

/* ── SHELL ─────────────────────────────────────────────────
   <1240  one column
   1240+  sticky chapter rail on the left, prose beside it
   The prose column never changes width. Breakouts (tables, long
   lists) extend right into the air beside it.
   ────────────────────────────────────────────────────────── */
.ce__shell { max-width: var(--ce-wide); margin-inline: auto; padding-inline: var(--px); }
.ce__main  { min-width: 0; }
.ce__rail  { display: none; }

@media (min-width: 1280px) {
  .ce__shell {
    max-width: calc(var(--ce-rail) + var(--ce-rail-gap) + var(--ce-wide) + var(--ce-rail-gap) + var(--ce-aside));
    display: grid;
    grid-template-columns: var(--ce-rail) minmax(0, var(--ce-wide)) var(--ce-aside);
    column-gap: var(--ce-rail-gap);
    align-items: start;
  }
  .ce__rail  {
    display: block;
    position: sticky;
    top: 92px;
    grid-column: 1;
    max-height: calc(100vh - 92px - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
    scrollbar-gutter: stable;
  }
  .ce__main  { grid-column: 2; min-width: 0; }
  /* Right margin: video (top) + related clinical pieces (bottom) */
  .ce__aside {
    grid-column: 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
  }
  .ce__aside .ce-aside__media {
    position: sticky;
    top: 92px;
  }
  .ce__aside .ce-related {
    margin-top: auto;
    padding-top: 0;
    border-top: 0;
  }
  .ce__aside .ce-related__h { font-size: 1.02rem; margin-bottom: 14px; }
  .ce__aside .ce-related__h::before { width: 28px; }
  .ce__aside .ce-related__item { padding: 13px 0; }
  .ce__aside .ce-related__title { font-size: .96rem; line-height: 1.35; }
  .ce__aside .ce-related__why { font-size: 13px; line-height: 1.5; }
  .ce__aside .ce-related__because { font-size: 10px; }
}

/* ── REGISTER A · TEXT ─────────────────────────────────────
   Element selectors are wrapped in :where() so they carry the
   specificity of `.ce-prose` alone (0,1,0). That is high enough to
   beat global.css's `*{margin:0}` reset, and low enough that every
   component class below wins without !important. Do not use
   @layer here: unlayered rules — including that reset — outrank
   layered ones no matter how specific the layered rule is.
   ────────────────────────────────────────────────────────── */
/* ── REGISTER A · TEXT ─────────────────────────────────────── */
.ce-prose { font-size: var(--ce-fs); line-height: var(--ce-lh); color: var(--txt); }
.ce-prose :where(p) { margin: 0 0 1.2em; font-family: inherit; font-size: var(--ce-fs); line-height: var(--ce-lh); color: var(--txt2); max-width: var(--ce-prose); }
.ce-prose :where(strong) { font-weight: 700; color: var(--txt); }
.ce-prose :where(em) { font-style: italic; }

.ce-prose :where(h2) {
  font-family: var(--hd); font-size: var(--ce-h2); font-weight: 700;
  letter-spacing: -.015em; line-height: 1.3; color: var(--txt);
  margin: 2.4em 0 .7em; max-width: var(--ce-prose); scroll-margin-top: 96px;
  clear: both;
}
.ce-prose :where(h2)::before {
  content: ''; display: block; width: 36px; height: 2px;
  background: var(--gold); opacity: .55; margin-bottom: .7em;
}
.ce-prose > :where(h2:first-child) { margin-top: 0; }
.ce-prose :where(h3) {
  font-family: var(--hd); font-size: var(--ce-h3); font-weight: 700;
  line-height: 1.35; color: var(--txt); margin: 2em 0 .55em;
  max-width: var(--ce-prose); scroll-margin-top: 96px;
}
.ce-prose :where(h4) {
  font-family: var(--hd); font-size: var(--ce-h4); font-weight: 700;
  line-height: 1.38; color: var(--txt); margin: 1.7em 0 .5em;
}

.ce-prose :where(ul, ol) { margin: 0 0 1.4em; padding: 0 0 0 1.25em; list-style: none; max-width: var(--ce-prose); }
.ce-prose :where(li) { position: relative; margin: 0 0 .55em; padding-left: .85em; font-size: var(--ce-fs); line-height: var(--ce-lh); color: var(--txt2); }
.ce-prose :where(ul > li)::before {
  content: ''; position: absolute; left: 0; top: .9em; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: .72;
}
.ce-prose :where(ol) { counter-reset: ce-ol; }
.ce-prose :where(ol > li) { counter-increment: ce-ol; padding-left: 1.65em; }
.ce-prose :where(ol > li)::before {
  content: counter(ce-ol) '.'; position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--gold-text); font-size: .94em;
  font-variant-numeric: tabular-nums; font-family: var(--bd);
}

.ce-prose :where(a) {
  color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px; text-decoration-color: rgba(0,31,63,.3);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.ce-prose :where(a):hover { color: var(--gold-text); text-decoration-color: var(--gold); }

.ce-prose sup.cite-ref { vertical-align: super; font-size: .65em; line-height: 1; font-weight: 700;
  color: var(--gold-text); white-space: nowrap; }
.ce-prose sup.cite-ref a { color: inherit; text-decoration: none; border-bottom: 0; padding: 0; }
.ce-prose sup.cite-ref a:hover { color: var(--navy); }

/* Scene break — short gold rule, never a full-width divider */

/* A1 · STANDFIRST — the one paragraph that sets the stakes */
.ce-standfirst {
  font-family: var(--hd); font-size: clamp(1.06rem, 1.3vw, 1.18rem); font-weight: 400;
  line-height: 1.6; color: var(--txt2); margin: 0 0 1.4em; max-width: 52ch;
}

/* A2 · PULL QUOTE — at most two per page, one of the author's own
   sentences promoted where it already stands. Nothing is duplicated. */
.ce-prose .ce-quote {
  margin: clamp(2em, 3.4vw, 2.8em) 0;
  padding: 0 0 0 clamp(20px, 2.6vw, 28px);
  border-left: 2px solid var(--gold);
  font-family: var(--hd);
  font-size: clamp(1.14rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  color: var(--txt);
  max-width: 46ch;
}
.ce-prose .ce-quote strong { font-weight: 400; color: inherit; }

/* ── REGISTER C · BREAKOUT ─────────────────────────────────── */
.ce-break { margin: clamp(2.6em, 4.5vw, 3.6em) 0; }
.ce-prose .ce-break, .ce-break { width: 100%; max-width: none; }

.ce-break__tag {
  font-family: var(--bd); font-size: var(--ce-eyebrow); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 .55em;
}
.ce-break__title {
  font-family: var(--hd); font-size: clamp(1.15rem, 1.7vw, 1.35rem); font-weight: 700;
  line-height: 1.3; color: var(--txt); margin: 0 0 .35em; letter-spacing: -.012em;
}
.ce-break__intro { font-size: 15px; line-height: 1.65; color: var(--txt2); margin: 0 0 clamp(20px, 2.4vw, 28px); max-width: 62ch; }
.ce-break__note {
  margin: clamp(16px, 2vw, 22px) 0 0; padding-top: 14px; border-top: 1px solid var(--hair-soft);
  font-size: 13.5px; line-height: 1.6; color: var(--txt3); max-width: 68ch;
}

/* Eyebrow rule: gold-text on cream/white only. On the paper ground it drops
   to 4.19:1, so eyebrows sitting on --paper use navy instead. */
.ce-lenses__resolve .ce-break__tag { margin-bottom: .5em; color: var(--navy); }
.ce-practice__tag, .ce-map .ce-break__tag { color: var(--navy); }
@media (min-width: 760px) {
  .ce-lenses__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 36px); }
  .ce-lens { padding: 0; border-top: 0; }
  .ce-lens:first-child { padding-top: 0; }
}


/* C5 · TABLE */
.ce-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.ce-table caption {
  text-align: left;
  font-family: var(--hd);
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--txt);
  padding-bottom: 11px;
}
.ce-table th, .ce-table td { text-align: left; vertical-align: top; padding: 13px 18px 13px 0; border-bottom: 1px solid var(--hair-soft); line-height: 1.55; }
.ce-table thead { border-top: 1px solid var(--hair); }
.ce-table th { font-family: var(--bd); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--txt); border-bottom-color: var(--hair); }
.ce-table td { color: var(--txt2); }
.ce-table tbody th { font-family: var(--hd); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--txt); }
.ce-prose > .ce-table__scroll {
  margin: clamp(2.2em, 3.8vw, 3.1em) 0;
  width: 100%;
  max-width: none;
}
.ce-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ce-table__scroll:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.ce-prose .ce-table-note {
  margin: clamp(-1.9em, -2.4vw, -1.4em) 0 clamp(2.4em, 3.6vw, 3em);
  padding-top: 0;
  border-top: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--txt3);
  max-width: 68ch;
}
@media (min-width: 1280px) {
  .ce-prose > .ce-table__scroll {
    width: calc(100% + var(--ce-rail-gap) + var(--ce-aside));
  }
}
/* Markdown tables: same full canvas as the signature plate (centre + right) */
.ce-prose > .table-scroll {
  margin: clamp(2.6em, 4.2vw, 3.6em) 0;
  width: 100%;
  max-width: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ce-prose > .table-scroll:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.ce-prose > .table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.ce-prose > .table-scroll th,
.ce-prose > .table-scroll td {
  text-align: left;
  vertical-align: top;
  padding: 13px 18px 13px 0;
  border-bottom: 1px solid var(--hair-soft);
  line-height: 1.55;
}
.ce-prose > .table-scroll th {
  font-family: var(--bd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt3);
  border-bottom-color: var(--hair);
}
.ce-prose > .table-scroll td { color: var(--txt2); }
.ce-prose > .table-scroll tbody th {
  font-family: var(--hd);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--txt);
}
@media (min-width: 1280px) {
  .ce-prose > .table-scroll {
    width: calc(var(--ce-wide) + var(--ce-rail-gap) + var(--ce-aside));
    max-width: none;
  }
}

/* ── PAGE CHROME ───────────────────────────────────────────── */

/* Breadcrumbs */
.ce-crumbs ol { display: flex; flex-wrap: wrap; gap: 0 .65em; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--txt3); }
.ce-crumbs li { display: inline-flex; align-items: baseline; }
.ce-crumbs li:not(:last-child)::after { content: '/'; margin-left: .65em; opacity: .45; }
.ce-crumbs a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(0,31,63,.25); }
.ce-crumbs [aria-current] { color: var(--txt2); font-weight: 600; }

/* Header */
.ce-head { margin: 22px 0 clamp(26px, 3.4vw, 38px); }
.ce-head__kicker {
  font-family: var(--bd); font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-text); margin: 0 0 16px;
}
.ce-head__title {
  font-family: var(--hd); font-size: clamp(2rem, 4.1vw, 3.05rem); font-weight: 700;
  line-height: 1.14; letter-spacing: -.022em; color: var(--txt); margin: 0 0 20px; max-width: 22ch;
}

/* CHROME 1 · TRUST LINE — the highest-value single addition.
   Surfaces metadata the site already holds but never renders. */
.ce-trust {
  margin: clamp(22px, 3vw, 30px) 0 0; padding: 18px 0 0; border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
}
.ce-trust__who { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ce-trust__name { font-family: var(--hd); font-size: 15.5px; font-weight: 700; color: var(--txt); line-height: 1.3; }
.ce-trust__creds { font-family: var(--hd); font-size: 14px; font-weight: 400; color: var(--txt2); }
.ce-trust__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--bd); font-size: 12px; color: var(--txt2); letter-spacing: .01em; }
.ce-trust__facts > span { display: inline-flex; align-items: baseline; gap: 6px; }
.ce-trust__facts b { font-weight: 600; color: var(--txt2); }
.ce-trust__facts a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.ce-trust__reviewed b { color: var(--gold-text); }

/* CHROME 2 · CHAPTER RAIL (≥1240 only) */
.ce-rail__tag {
  font-family: var(--bd); font-size: var(--ce-eyebrow); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--txt3); margin: 0 0 16px;
}
.ce-rail__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hair); }
.ce-rail__list a {
  display: block; padding: 7px 0 7px 16px; margin-left: -1px;
  border-left: 1px solid transparent;
  font-family: var(--bd); font-size: 12.5px; line-height: 1.42; color: var(--txt2);
  transition: color .18s ease, border-color .18s ease;
}
.ce-rail__list a:hover { color: var(--navy); }
.ce-rail__list a[aria-current='true'] { color: var(--navy); font-weight: 600; border-left-color: var(--gold); }
.ce-rail__progress { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hair-soft); font-family: var(--bd); font-size: 11px; letter-spacing: .06em; color: var(--txt3); }

/* CHROME 3 · CONTENTS PANEL (<1240 fallback, and service pages) */
.ce-contents { margin: 0 0 clamp(28px, 3.6vw, 40px); padding: 22px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.ce-contents__tag { font-family: var(--bd); font-size: var(--ce-eyebrow); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--txt3); margin: 0 0 12px; }
.ce-contents ol { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; padding: 0; list-style: none; counter-reset: ce-toc; }
.ce-contents li { counter-increment: ce-toc; }
.ce-contents a { font-size: 15px; line-height: 1.5; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0,31,63,.22); }
.ce-contents a::before { content: counter(ce-toc, decimal-leading-zero); font-family: var(--bd); font-size: 10.5px; font-weight: 700; color: var(--gold-text); margin-right: 8px; letter-spacing: .06em; }
.ce-contents a:hover { text-decoration-color: var(--gold); }
@media (min-width: 1280px) { .ce-contents--railed { display: none; } }

/* CHROME 4 · KEY TAKEAWAYS — rules, not a card */
.ce-takeaways { margin: 0 0 clamp(30px, 4vw, 44px); padding: clamp(24px, 3vw, 30px) 0; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--hair); }
.ce-takeaways__tag { font-family: var(--bd); font-size: var(--ce-eyebrow); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 16px; }
.ce-takeaways ul { margin: 0; padding: 0; list-style: none; }
.ce-takeaways li { position: relative; padding-left: 22px; margin: 0 0 .95em; font-size: 15.5px; line-height: 1.68; color: var(--txt2); }
.ce-takeaways li:last-child { margin-bottom: 0; }
.ce-takeaways li::before { content: ''; position: absolute; left: 0; top: .78em; width: 11px; height: 1px; background: var(--gold); }
.ce-takeaways strong { color: var(--txt); font-weight: 700; }

/* CHROME 5 · FAQ ACCORDION — content always in the DOM, works with JS off */
.ce-faq { margin: clamp(2.6em, 4vw, 3.4em) 0 0; }
.ce-faq__item { border-top: 1px solid var(--hair-soft); }
.ce-faq__item:last-child { border-bottom: 0; }
.ce-faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  width: 100%; cursor: pointer; list-style: none; padding: 18px 0;
  font-family: var(--hd); font-size: 1.06rem; font-weight: 700; line-height: 1.42;
  color: var(--txt); -webkit-tap-highlight-color: transparent;
}
.ce-faq__q::-webkit-details-marker { display: none; }
.ce-faq__q:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ce-faq__q::after {
  content: ''; flex: none; width: .5em; height: .5em; margin-top: .42em;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(45deg); opacity: .6; transition: transform .2s ease;
}
.ce-faq__item[open] .ce-faq__q::after { transform: rotate(225deg); margin-top: .62em; }
.ce-faq__a { padding: 0 0 22px; }
.ce-faq__a p { margin: 0 0 .9em; font-size: 15.5px; line-height: 1.72; color: var(--txt2); }
.ce-faq__a > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .ce-faq__q::after { transition: none; } }

/* CHROME 6 · REFERENCES DRAWER (unchanged behaviour, restyled) */
.ce-refs { margin-top: clamp(40px, 5vw, 56px); padding-top: clamp(26px, 3vw, 34px); border-top: 1px solid var(--hair); }
.ce-refs__summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none; font-family: var(--hd); font-size: var(--ce-h2);
  font-weight: 700; color: var(--txt); padding: 4px 0;
}
.ce-refs__summary::-webkit-details-marker { display: none; }
.ce-refs__summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.ce-refs__count { display: none; }
.ce-refs ol { margin: 1.2em 0 0; padding-left: 1.5em; font-size: 15px; line-height: 1.7; color: var(--txt2); }
.ce-refs li { margin: 0 0 .8em; scroll-margin-top: 96px; }
.ce-refs a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* CHROME 7 · DISCLAIMER */
.ce-disclaimer { margin-top: clamp(32px, 4vw, 44px); padding-top: 20px; border-top: 1px solid var(--hair-soft); font-family: var(--bd); font-size: 13px; line-height: 1.65; color: var(--txt3); max-width: none; }
.ce-disclaimer .ce-disclaimer__h { font-family: var(--bd); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--txt3); display: block; margin-bottom: .55em; }

/* CHROME 8 · RELATED READING — a list with hairlines, not four more cards */
.ce-related { margin-top: clamp(42px, 5vw, 60px); padding-top: clamp(26px, 3vw, 34px); border-top: 1px solid var(--hair); }
.ce-related__tag { font-family: var(--bd); font-size: var(--ce-eyebrow); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 6px; }
.ce-related__h {
  font-family: var(--hd); font-size: var(--ce-h2); font-weight: 700;
  line-height: 1.3; letter-spacing: -.015em; color: var(--txt); margin: 0 0 20px;
}
.ce-related__h::before {
  content: ''; display: block; width: 36px; height: 2px;
  background: var(--gold); opacity: .55; margin-bottom: .7em;
}
.ce-related__item { display: block; padding: 18px 0; border-top: 1px solid var(--hair-soft); color: inherit; }
.ce-related__item:first-of-type { border-top: 0; }
.ce-related__because { font-family: var(--bd); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt3); margin: 0 0 6px; }
.ce-related__title { font-family: var(--hd); font-size: var(--ce-h3); font-weight: 700; line-height: 1.35; color: var(--txt); margin: 0 0 5px; letter-spacing: -.012em; transition: color .18s ease; }
.ce-related__item:hover .ce-related__title { color: var(--gold-text); }
.ce-related__why { font-size: 15px; line-height: 1.6; color: var(--txt2); margin: 0; }

/* CHROME 9 · NEXT STEP — one calm ask, never a banner */
.ce-next { margin-top: clamp(44px, 5.5vw, 64px); padding: clamp(30px, 4vw, 42px) 0 0; border-top: 2px solid var(--navy); }
.ce-next__h { font-family: var(--hd); font-size: clamp(1.3rem, 2.1vw, 1.65rem); font-weight: 700; line-height: 1.3; color: var(--txt); margin: 0 0 12px; letter-spacing: -.015em; max-width: 24ch; }
.ce-next__body { font-size: 16px; line-height: 1.72; color: var(--txt2); margin: 0 0 26px; max-width: 56ch; }
.ce-next__micro { font-family: var(--hd); font-style: italic; font-size: 14.5px; line-height: 1.55; color: var(--txt3); margin: 16px 0 0; max-width: 52ch; }

/* Buttons — unchanged from global.css, restated for the standalone prototype */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 30px; border-radius: 0; font-family: var(--bd); font-size: 13.5px; font-weight: 600; letter-spacing: .07em; line-height: 1; transition: all .25s ease; cursor: pointer; border: none; }
.btn:hover { transform: translateY(-1px); }
.btn--g { background: var(--gold); color: var(--navy); }
.btn--g:hover { background: var(--gold-h); }
.btn--o2 { background: transparent; border: 1px solid rgba(0,31,63,.25); color: var(--navy); }
.btn--o2:hover { border-color: var(--navy); }
.btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 640px) { .btns { flex-direction: column; align-items: stretch; } .btns .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } .btn { transition: none; } }

/* ── SERVICE-PAGE VARIANT ──────────────────────────────────
   Same system, different rhythm: shorter sections, fit first,
   pathway instead of argument, evidence held in a drawer.
   ────────────────────────────────────────────────────────── */
.ce--service .ce-head__title { max-width: 16ch; }

.ce-section { padding-top: clamp(30px, 4vw, 44px); }
.ce-section--rule { border-top: 1px solid var(--hair); margin-top: clamp(34px, 4.5vw, 52px); }
.ce-svc-summary { display: grid; grid-template-columns: 1fr; gap: 0; margin: clamp(26px, 3.4vw, 36px) 0 0; }
.ce-svc-summary__item { padding: 16px 0; border-top: 1px solid var(--hair-soft); }
.ce-svc-summary__item:first-child { border-top: 0; padding-top: 0; }
.ce-svc-summary__k { font-family: var(--bd); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--txt3); margin: 0 0 6px; }
.ce-svc-summary__v { font-family: var(--hd); font-size: 1.02rem; font-weight: 500; line-height: 1.45; color: var(--txt); margin: 0; }
@media (min-width: 760px) {
  .ce-svc-summary { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 32px); }
  .ce-svc-summary__item { padding: 18px 0 0; border-top: 1px solid var(--hair); }
  .ce-svc-summary__item:first-child { padding-top: 18px; }
}

/* ── SPECIFICITY NOTE ──────────────────────────────────────
   Register A uses :where() (0,1,0). Every component class below
   is (0,1,0) or higher and declared later, so components always
   win. There is no !important in this file.
   ────────────────────────────────────────────────────────── */
@media (min-width: 820px) { .ce-fit__h { min-height: 2.5em; } }

/* ── UTILITIES ─────────────────────────────────────────────── */
.ce-prose .ce-full, .ce-full { width: 100%; max-width: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media print {
  .ce__rail, .ce-next, .ce-related { display: none; }
  .ce-faq__item, .ce-refs { display: block; }
  .ce-note { float: none; width: auto; margin: 1.4em 0; }
}

/* ============================================================
   DERIVED TREATMENTS
   Every rule below styles something already present in the
   source. None of them requires a word of new copy.
   ============================================================ */

/* D1 · SECTION — a wrapper so a whole section can be treated */
.ce-sec { margin: 0; }
.ce-sec + .ce-sec { margin-top: 0; }

/* D2 · SAFETY SECTION — detected from the author's own heading
   ("Is X safe? Side effects and cautions", "What it does not replace").
   No label is added: the ground and the rule carry it. */
.ce-sec--safety {
  background: var(--paper);
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 30px) clamp(6px, 1vw, 12px);
  margin: clamp(2.2em, 3.6vw, 3em) 0;
}

.ce-sec--safety > h2 { margin-top: 0; }
.ce-sec--safety > h2::before { background: var(--caution); opacity: .85; width: 48px; }
.ce-sec--safety :where(p) { color: var(--txt2); max-width: var(--ce-prose); }
.ce-sec--safety > :last-child { margin-bottom: 0; }
/* breakouts nested inside the padded safety ground stay inside it */
.ce-sec--safety .ce-break, .ce-sec--safety .ce-listbreak, .ce-sec--safety .ce-figure { width: 100%; max-width: none; }
/* the safety ground is already full-width, so its note sits in flow
   rather than hanging into the margin */

/* D7 · LIST BREAKOUT — lists of five or more items use the wide canvas */
.ce-listbreak { margin: clamp(1.8em, 3vw, 2.4em) 0; }
.ce-listbreak > ul { margin-bottom: 0; }
@media (min-width: 900px) {
  .ce-listbreak > ul { columns: 2; column-gap: clamp(32px, 4vw, 56px); }
  .ce-listbreak > ul > li { break-inside: avoid; }
}

/* D8 · VIDEO — the explainer this page already carries in its .astro config */
.ce-video { margin: clamp(24px, 3vw, 34px) 0 0; }
.ce-video--portrait { max-width: 268px; }
.ce-video__frame {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--hair); background: var(--navy);
}
.ce-video--portrait .ce-video__frame { aspect-ratio: 9/16; }
.ce-video--landscape .ce-video__frame { aspect-ratio: 16/9; }
.ce-video__frame img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.ce-video__frame:hover img { opacity: 1; }
.ce-video__play {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%; background: rgba(0,31,63,.85);
  display: flex; align-items: center; justify-content: center;
}
.ce-video__play::after {
  content: ''; border-left: 12px solid #fff;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px;
}

/* D9 · FAQ DRAWER — the whole block collapses to one line, like references.
   Every question stays in the DOM, so schema and crawling are unaffected. */
.ce-faq-drawer { margin-top: clamp(36px, 4.5vw, 52px); }
.ce-faq-drawer .ce-faq { margin-top: 18px; }

/* ============================================================
   D10 · MECHANISM FIGURE — the signature plate
   Four stages, arrows between them, cards inside them, and the three
   medical systems annotated in one shared treatment. Built in HTML so
   every word is real text that reflows to a single column on a phone.
   ============================================================ */
.ce-figure {
  margin: clamp(2.6em, 4.2vw, 3.6em) 0;
  background: var(--paper);
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 38px) clamp(28px, 3.2vw, 40px);
}
/* the plate uses the full editorial canvas: centre column plus the right column */
.ce-prose .ce-figure { width: 100%; max-width: none; }
@media (min-width: 1280px) {
  .ce-prose .ce-figure {
    width: calc(100% + var(--ce-rail-gap) + var(--ce-aside));
    max-width: none;
  }
}
.ce-figure__title {
  display: block; font-family: var(--hd);
  font-size: clamp(1.3rem, 2vw, 1.62rem); font-weight: 700; line-height: 1.25;
  letter-spacing: -.015em; color: var(--txt);
  margin: 0 0 clamp(26px, 3vw, 36px); padding-bottom: clamp(16px, 1.8vw, 20px);
  border-bottom: 2px solid var(--gold);
}

.ce-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.ce-prose .ce-stages { counter-reset: none; max-width: none; }
.ce-prose .ce-stage__nodes { max-width: none; }
.ce-prose .ce-stages > li { padding: 0 0 46px; margin: 0; max-width: none; counter-increment: none; }
.ce-prose .ce-stages > li:last-child { padding-bottom: 0; }
.ce-prose .ce-stages > li::before { content: none; }

.ce-stage { position: relative; }
/* the arrow between stages */
.ce-prose .ce-stage:not(:last-child)::after {
  content: ''; position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%);
  width: 15px; height: 22px; background: var(--gold);
  clip-path: polygon(40% 0, 60% 0, 60% 56%, 100% 56%, 50% 100%, 0 56%, 40% 56%);
}
.ce-stage__label {
  font-family: var(--bd); font-size: 10.5px; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--navy); margin: 0 0 14px; text-align: center;
}
.ce-stage__nodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ce-prose .ce-node {
  position: static; margin: 0; padding: 13px 16px; max-width: none;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(0,31,63,.07);
  font-size: 14px; line-height: 1.45; color: var(--txt); text-align: center;
}
.ce-prose .ce-node::before { content: none; }
.ce-stage__lenses { margin-top: 16px; display: grid; gap: 10px; }

/* one treatment for all three systems, so none reads as subordinate */
.ce-lensnote {
  margin: 0; padding-left: 13px; border-left: 2px solid var(--gold);
  font-size: 12.5px; line-height: 1.5; color: var(--txt2); font-style: italic; max-width: none;
}
.ce-lensnote__tag {
  display: block; font-family: var(--bd); font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold-text); margin-bottom: .35em;
}
/* Foot lens note matches in-column Ayurveda/conventional notes - no hairline */
.ce-figure__foot {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}
.ce-figure__foot .ce-lensnote { max-width: 76ch; }

@media (min-width: 860px) {
  .ce-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(30px, 3.4vw, 46px); }
  .ce-prose .ce-stages > li { padding-bottom: 0; }
  .ce-prose .ce-stage:not(:last-child)::after {
    left: auto; right: clamp(-33px, -2.4vw, -22px); bottom: auto; top: 46px; transform: none;
    width: 22px; height: 15px;
    clip-path: polygon(0 40%, 56% 40%, 56% 0, 100% 50%, 56% 100%, 56% 60%, 0 60%);
  }
}

/* D11 · PULL QUOTE — centred, italic, quote marks, attribution beneath */
.ce-prose blockquote.ce-quote {
  margin: clamp(2.4em, 4vw, 3.2em) auto;
  padding: 0 clamp(18px, 3vw, 44px);
  border: 0; text-align: center; max-width: 46ch;
}
.ce-prose blockquote.ce-quote p {
  position: relative; margin: 0; max-width: none;
  font-family: var(--hd); font-style: italic; font-weight: 400;
  font-size: clamp(1.16rem, 1.75vw, 1.36rem); line-height: 1.5; color: var(--txt);
}
.ce-prose blockquote.ce-quote p::before { content: '\201C'; }
.ce-prose blockquote.ce-quote p::after  { content: '\201D'; }
.ce-prose blockquote.ce-quote p::before,
.ce-prose blockquote.ce-quote p::after {
  font-family: var(--hd); font-style: normal; color: var(--gold); opacity: .75;
}
.ce-prose blockquote.ce-quote strong { font-weight: 400; color: inherit; }
.ce-quote__attr {
  display: block; margin-top: 1em; font-family: var(--bd); font-style: normal;
  font-size: 10.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold-text);
}
.ce-quote__attr::before { content: '\2014\00a0'; }

/* D12 · KEY TAKEAWAYS — back to a panel, as it was */
.ce-takeaways {
  background: rgba(255,255,255,.82);
  border: 1px solid var(--hair);
  padding: clamp(24px, 3vw, 30px) clamp(24px, 3vw, 30px) clamp(22px, 2.6vw, 26px);
  margin: 0 0 clamp(30px, 4vw, 44px);
}

/* D13 · TRUST LINE with the portrait */
.ce-trust { display: flex; align-items: flex-start; gap: 16px; }
.ce-trust__face {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--paper); outline: 1px solid var(--hair); outline-offset: -1px;
}
.ce-trust__lines { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding-top: 3px; }

/* ── LIVE OVERRIDES (from fibromyalgia prototype D12/D13) ── */
.ce-takeaways {
  background: rgba(255,255,255,.82);
  border: 1px solid var(--hair);
  padding: clamp(24px, 3vw, 30px) clamp(24px, 3vw, 30px) clamp(22px, 2.6vw, 26px);
  margin: 0 0 clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.ce-trust {
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
}
.ce-trust__face {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center center;
  flex: none; background: var(--paper);
  outline: 1px solid var(--hair); outline-offset: -1px;
}
.ce-trust__lines { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding-top: 3px; }
.ce-trust__who { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ce-trust__name { font-family: var(--hd); font-size: 15.5px; font-weight: 700; color: var(--txt); line-height: 1.3; }
.ce-trust__creds { font-family: var(--hd); font-size: 14px; font-weight: 400; color: var(--txt2); }
.ce-trust__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--bd); font-size: 12px; color: var(--txt2); letter-spacing: .01em; }
.ce-trust__facts > span { display: inline-flex; align-items: baseline; gap: 6px; }
.ce-trust__facts b { font-weight: 600; color: var(--txt2); }
.ce-trust__reviewed b { color: var(--gold-text); }

/* Disclaimer + author note: smaller muted chrome, not body prose */
.ce-disclaimer {
  margin-top: clamp(32px, 4vw, 44px); padding-top: 20px;
  border-top: 1px solid var(--hair-soft);
  font-family: var(--bd); font-size: 13px; line-height: 1.65;
  color: var(--txt3); max-width: none;
}
.ce-disclaimer__h {
  font-family: var(--bd); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--txt3);
  display: block; margin-bottom: .55em;
}
.ce-disclaimer__body { font-size: inherit; line-height: inherit; color: inherit; }
.ce-authornote {
  margin: 14px 0 0; font-family: var(--bd); font-size: 13px; line-height: 1.65;
  color: var(--txt3); font-style: italic; font-weight: 400; max-width: none;
}

/* Markdown --- rules: CE already has h2 eyebrow bars; never show <hr> lines */
.ce-prose > hr,
.ce-prose hr,
.ce .ce-prose hr { display: none; }

/* Map existing video embed into CE spacing */
.ce .article__video { margin: clamp(24px, 3vw, 34px) 0 0; }
.ce .article__video--portrait { max-width: 268px; }

/* References: reuse CE drawer look on existing markup */
.ce .article__refs,
.ce .ce-refs { margin-top: clamp(40px, 5vw, 56px); padding-top: clamp(26px, 3vw, 34px); border-top: 1px solid var(--hair); }
.ce .article__refs-summary,
.ce .ce-refs__summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none; font-family: var(--hd); font-size: var(--ce-h2);
  font-weight: 700; color: var(--txt); padding: 4px 0;
}
.ce .article__refs-summary::-webkit-details-marker,
.ce .ce-refs__summary::-webkit-details-marker { display: none; }
.ce .article__refs-list,
.ce .ce-refs ol { margin: 1.2em 0 0; padding-left: 1.5em; font-size: 15px; line-height: 1.7; color: var(--txt2); }
.ce .article__ref-item { margin: 0 0 .8em; scroll-margin-top: 96px; }
.ce .article__ref-link { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* Soften conflict with legacy insights article chrome when CE is active */
.ce .ctn { max-width: none; padding: 0; margin: 0; }
.ce-faq-wrap { margin-top: clamp(2.6em, 4vw, 3.4em); }
.ce-faq-wrap > .ce-related__h { margin-bottom: 0; }

.ce .article__video { margin: 0; width: 100%; }
.ce .article__video--portrait { max-width: none; }
.ce-aside__media .article__video--portrait { max-width: none; }
.ce-aside__photo { margin: 0; width: 100%; }
.ce-aside__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  object-fit: cover;
}
.ce-aside__media .ce-aside__photo img { aspect-ratio: 3 / 4; }
.ce-prose .ce-video-pair .ce-aside__photo img { aspect-ratio: auto; }

/* Short beside its section: vertically centred on the full section block */
.ce-video-slot,
.ce-video-pair-start,
.ce-video-pair-end { display: none; }
.ce-prose .ce-video-pair {
  margin: 0 0 1.2em;
}
.ce-prose .ce-video-pair__copy > :last-child { margin-bottom: 0; }
.ce-prose .ce-video-sticky {
  margin: clamp(24px, 3vw, 34px) auto;
  max-width: min(300px, 78vw);
  width: 100%;
}
.ce-prose .ce-video-sticky .article__video { margin: 0; width: 100%; }
.ce-prose .ce-video-sticky .article__video--portrait { max-width: none; }
.ce-prose .ce-video-sticky--stack {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4.5vw, 52px);
}
.ce-prose .ce-video-sticky--spread {
  gap: clamp(56px, 8vw, 96px);
}
@media (min-width: 1280px) {
  .ce-prose .ce-video-pair {
    position: relative;
    display: block;
    width: calc(100% + var(--ce-rail-gap) + var(--ce-aside));
    max-width: none;
    /* Height from the copy only; the player is out of flow and centred on it. */
  }
  .ce-prose .ce-video-pair__copy {
    width: calc(100% - var(--ce-rail-gap) - var(--ce-aside));
    min-width: 0;
  }
  .ce-prose .ce-video-pair .ce-video-sticky {
    position: absolute;
    top: 50%;
    right: 0;
    width: var(--ce-aside);
    max-width: none;
    margin: 0;
    transform: translateY(-50%);
    z-index: 1;
  }
  .ce-prose .ce-video-pair .ce-video-sticky .article__video {
    position: relative;
    width: 100%;
    margin: 0;
  }
  /* Caption hangs under the frame so centering uses the player only. */
  .ce-prose .ce-video-pair .ce-video-caption {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 10px;
  }
  /* Stacked shorts: keep captions in flow so they do not overlap the next player. */
  .ce-prose .ce-video-pair .ce-video-sticky--stack .ce-video-caption {
    position: static;
  }
  /* Evidence-section pattern: pin to the section height and space shorts apart. */
  .ce-prose .ce-video-pair .ce-video-sticky--spread {
    top: 0;
    bottom: 0;
    transform: none;
    height: auto;
    min-height: 100%;
    justify-content: space-between;
    gap: clamp(72px, 10vw, 140px);
  }
}
.ce-video-caption {
  margin: 10px 0 0;
  padding: 0;
  font-family: var(--bd);
  font-size: 12px;
  line-height: 1.45;
  color: var(--txt3);
  text-align: center;
  font-weight: 400;
  max-width: none;
}

/* Below the 3-col breakpoint: related at end; slotted video stays inline in prose */
@media (max-width: 1279px) {
  .ce__shell {
    display: flex;
    flex-direction: column;
  }
  .ce__main {
    display: contents;
  }
  .ce__aside {
    display: contents;
  }
  .ce__main-top { order: 1; }
  .ce-aside__media {
    order: 2;
    margin: 0 0 clamp(28px, 3.6vw, 40px);
    max-width: min(300px, 78vw);
    margin-inline: auto;
    width: 100%;
  }
  .ce__main-body { order: 3; }
  .ce__aside > .ce-related {
    order: 4;
    margin-top: clamp(42px, 5vw, 60px);
    padding-top: clamp(26px, 3vw, 34px);
    border-top: 1px solid var(--hair);
  }
}

/* D14 · SECTION-END DIAGRAM — large plate spanning prose into the right column */
.ce-prose .ce-diagram {
  margin: clamp(2em, 3.4vw, 2.8em) 0 clamp(1.6em, 2.4vw, 2.2em);
  padding: 0;
  width: 100%;
  max-width: none;
  clear: both;
}
.ce-diagram__open {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hair);
  background: var(--paper);
  cursor: zoom-in;
  line-height: 0;
}
.ce-diagram__open:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.ce-diagram__open img {
  width: 100%;
  height: auto;
  display: block;
}
.ce-prose .ce-diagram > figcaption {
  margin: 20px 0 0;
  max-width: none;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--txt3);
}
@media (min-width: 1280px) {
  .ce-prose .ce-diagram {
    width: calc(100% + var(--ce-rail-gap) + var(--ce-aside));
    max-width: none;
  }
  .ce-prose .ce-diagram--clear-aside {
    margin-bottom: calc(clamp(1.6em, 2.4vw, 2.2em) + 136px);
  }
}

/* Full-screen expand dialog for diagrams */
.ce-diagram-dialog {
  padding: 0;
  border: 0;
  width: min(96vw, 1200px);
  max-width: 96vw;
  max-height: 92vh;
  background: transparent;
}
.ce-diagram-dialog::backdrop {
  background: rgba(0, 23, 47, 0.72);
  backdrop-filter: blur(4px);
}
.ce-diagram-dialog__panel {
  position: relative;
  background: var(--paper, #EFE9E0);
  padding: clamp(16px, 2vw, 28px);
  max-height: 92vh;
  overflow: auto;
}
.ce-diagram-dialog__panel img {
  width: 100%;
  height: auto;
  display: block;
}
.ce-diagram-dialog__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  border: 0;
  background: rgba(0, 31, 63, 0.88);
  color: #fff;
  font-family: var(--bd);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
}
.ce-diagram-dialog__close:hover { background: var(--navy); }