/* Scar-Healing theme, screen.css
   Ported from the click dummy. Review-harness styles (annotation layer, template
   index, device toggles) are stripped: they were scaffolding, not the site.

   The accent is wired to Ghost's own publication color, so Settings > Design >
   Brand drives it. --ghost-accent-color is emitted by {{ghost_head}}; the
   fallback is the verified 4.51:1 medical blue in case the setting is ever
   cleared. */
:root{
  /* Pinned, not var(--ghost-accent-color). This token is used as link text on
     white and must clear 4.5:1; the Ghost admin accent color is a free-text
     field with no contrast check, so leaving the hook in means one admin edit
     can drop the whole site below AA. #A55200 measures 5.52:1. If the accent
     ever needs to be editable again, re-check contrast when it changes.
     The brand orange #FF8C19 lives in --accent-fill, where it sits behind
     near-black text at 8.05:1. */
  --accent: #A55200;
}


/* ═══════════════════════════════════════════════════════════════════════
   SCAR-HEALING.COM — Aug 2026 wireframes rendered in the new UI kit.
   Tokens are identical to scar-healing-ui-kit.html / -clear-override.css.
   Base theme: Clear by Outline7. Accent #FF1A75 → #0B5FA5 → #A55200 (MRJP1,
   chosen 20 Aug 2026). The literal blues left below are the internal annotation
   legend (.a-ai), which is not reader-facing.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  font-size:62.5%;
   --accent-hover:#8A4500; --accent-pressed:#6E3700;
  /* MRJP1 orange. Chosen by the client 20 Aug 2026 over the original blue.
     --accent is text-only and must clear 4.5:1 on white, which the brand orange
     (2.33:1) cannot, so #FF8C19 takes the jobs where it is a background: under
     near-black text it measures 8.05:1. The general tinted surface is gray; the
     cream is reserved for four components that make a claim. */
  --accent-bright:#FF8C19; --accent-line:#E3E5E8; --accent-surface:#F2F3F5;
  /* No cream. The evidence tiers own the warm range: Limited is #FBF0D9 on a
     #E0C377 border, and the cream panel was #FFF6E6 on #FFD467, three degrees
     of hue apart on both. A tinted warm box with a warm border IS the Limited
     badge's signature, so an "In brief" panel was reading as a grade. FR, 20
     Aug 2026. The tokens stay wired up and fall back to the gray surface, so
     reintroducing a second tint later is a two-line change, but it must not
     land in the warm range. */
  /* Solid accent fills carry their own foreground so a palette can put a
     bright hue behind dark text. --accent-rule is decoration only. */
  /* ── KNOWN ACCESSIBILITY EXCEPTION, decided by FR 21 Aug 2026 ──────────
     The primary CTA uses the Ghost accent orange #FF8C19 with white text:
     2.33:1, against 4.5:1 for normal text and 3.0:1 even for large text. It
     does not pass. Recorded here so it is never mistaken for a cleared value.
     Rationale: Ghost's members Portal renders in its own iframe and takes its
     button colour from the admin accent (#ff8c19 live), which no theme CSS can
     reach. One orange across theme and Portal was preferred to a compliant
     button that mismatches the Portal button next to it.
     Scope is the primary button only; the small fills stay at 4.60:1. */
  --accent-cta:#FF8C19; --accent-cta-hover:#E67A0C; --accent-on-cta:#FFFFFF;
  /* Icons on white or the gray surface, and the tile hover ring. Both are
     decorative: the icons repeat the text beside them and the hover ring
     enhances a tile that already has a resting border and readable text, so
     neither is bound by the 3:1 non-text minimum. The focus ring is, and uses
     --accent-pressed instead. FR, 21 Aug 2026. */
  --icon-accent:#FF8C19; --hover-ring:#FF8C19;
  --accent-fill:#B85C00; --accent-fill-hover:#9E4F00; --accent-on-fill:#FFFFFF;
  --accent-rule:#FF8C19;
  /* Citation band: dark, so the brand orange works as text (7.35:1). The band
     markup is not in the theme yet (open task #57); the tokens are here so it
     inherits the decision when it is built. */
  --band-bg:#241A0A; --band-fg:#FF8C19;
  --accent-shadow:rgba(255,140,25,.28);
  --color-base:#464646; --color-secondary:#555555;
  --color-border:#e1e1e1; --color-control:#8C8C8C; --color-bg:#ffffff;--color-surface:#ECEEF2;
  --tier-strong-fg:#1E6B3A; --tier-strong-bg:#E7F3EA; --tier-strong-bd:#9CC9AE;
  --tier-moderate-fg: #1C5C6B;  --tier-moderate-bg: #E3F0F3;  --tier-moderate-bd: #93BFC9;  /* 6.45:1 */
  --tier-limited-fg:#7A5209; --tier-limited-bg:#FBF0D9; --tier-limited-bd:#E0C377;
  --tier-weak-fg:#8A2E20; --tier-weak-bg:#FBE7E3; --tier-weak-bd:#E3AA9E;
  --font-serif:Newsreader,Georgia,"Times New Roman",serif;
  --font-sans-serif:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --regular:400; --medium:500; --semi-bold:600; --bold:700;
  --font-tiny:1.25rem; --font-small:1.5rem; --font-base:1.8rem; --font-lead:2.2rem;
  --font-subheading:2.5rem; --font-secondary-heading:2.75rem; --font-main-heading:3rem;
  --font-display:4.2rem;
  --lh-tight:1.15; --lh-body:1.6; --lh-lead:1.5;
  --width:720px; --width-wide:1160px; --header-height:100px;
  --radius:0px; --radius-sm:0px;   /* hard corners, chosen 20 Aug 2026 */
  --shadow-sm:rgba(0,0,0,.06) 0 2px 8px -1px;
  --shadow-lg:rgba(0,0,0,.14) 0 18px 40px -14px;
  --sp-1:.4rem; --sp-2:.8rem; --sp-3:1.2rem; --sp-4:1.6rem;
  --sp-5:2.4rem; --sp-6:3.2rem; --sp-7:4rem; --sp-8:6.4rem;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans-serif);font-size:var(--font-base);
  line-height:var(--lh-body);color:var(--color-base);background:#f2f3f5;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
/* 3:1 floor applies to focus indicators; #FF8C19 is 2.33:1. See the dummy. */
:focus-visible{outline:2px solid var(--accent-pressed);outline-offset:2px;border-radius:2px}

/* ══════ REVIEW CHROME (not part of the site) ══════ */
.chrome{position:sticky;top:0;z-index:900;background:#1c1c1f;color:#fff;
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-5);font-size:var(--font-tiny);
  box-shadow:0 1px 0 rgba(255,255,255,.08)}
.a-note {background:#FBF0D9;border-color:#7A5209;color:#5C3E07}
.a-data {background:#E7F3EA;border-color:#1E6B3A;color:#17512C}
.a-ghost{background:#EDE7F7;border-color:#5B3FA0;color:#432E78}
.a-ai   {background:#EEF5FC;border-color:#0B5FA5;color:#062F52}
.a-todo {background:#FBE7E3;border-color:#8A2E20;color:#6B2419}
/* The shipping header had NO desktop rule at all: `.site-head` appeared only
   inside the mobile media query, so above 700px the theme rendered an
   unstyled flex-less header. Found by checking which classes used in the .hbs
   templates are styled only inside a max-width query. Kept in sync with the
   click dummy.

   Sticky at every width: the pages run 8 to 17 screens, so the way back has to
   travel with the reader. --head-h is measured from the real header by
   syncHeadH() in site.js and written to :root; the value here is only a
   pre-measurement fallback, and .anchornav pins to it so header and rail read
   as one bar. */
/* --head-top must be DEFINED here even though it is always 0 on the live site.
   The injected mobile layer sets `.site-head { top: var(--head-top) }`, and an
   unresolved var() makes the whole declaration invalid, which computes `top`
   to auto and silently kills position:sticky. The offset exists for the click
   dummy, whose black review bar is itself sticky above the header; there is no
   such bar here, so chrome height and gap are both zero and the header pins
   flush to the top of the viewport. */
:root{--head-h:83px;--chrome-h:0px;--head-gap:0px;--head-top:0px}
.site-head{position:sticky;top:var(--head-top);z-index:500;display:flex;align-items:center;gap:var(--sp-5);
  padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--color-border);background:#fff}

/* Equal air under the page head whether or not an anchor rail follows it.
   With the rail: pagehead 24 + rail 16 + section 32 = 48px. Without it it was
   pagehead 24 + section 32 = 56px, so pages with and without a rail sat
   differently. Both are 48px now. The [hidden] variant matters where the rail
   is toggled off rather than removed, so it is still the adjacent sibling. */
.pagehead + .sec,
.pagehead + .anchornav[hidden] + .sec{padding-top:var(--sp-5)}

.logo{display:block;text-decoration:none;color:var(--color-base);flex:none}
.logo b{display:block;font-size:2rem;font-weight:var(--bold);letter-spacing:-.4px;line-height:1.1}
.logo small{display:block;font-size:1.1rem;color:var(--color-secondary);margin-top:2px}
nav.main{display:flex;gap:var(--sp-5);margin-right:auto}
.navitem{position:relative}
.navitem > a.top{font-size:var(--font-small);font-weight:var(--semi-bold);color:var(--color-base);
  text-decoration:none;padding:var(--sp-3) 0;display:inline-block;border-bottom:2px solid transparent}
.navitem > a.top:hover{color:var(--accent)}
.navitem > a.top.here{color:var(--accent);border-bottom-color:var(--accent)}
.mega{position:absolute;top:100%;left:-var(--sp-4);display:none;
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:var(--sp-5);width:640px;
  grid-template-columns:1fr 1fr 1fr;gap:var(--sp-5)}
.navitem:hover .mega,.navitem:focus-within .mega{display:grid}
.mega h5{font-size:1.1rem;font-weight:var(--bold);letter-spacing:.09em;text-transform:uppercase;
  color:var(--color-secondary);margin:0 0 var(--sp-3)}
.mega a{display:block;font-size:var(--font-small);color:var(--color-base);
  text-decoration:none;padding:5px 0}
.mega a:hover{color:var(--accent);text-decoration:underline}
.head-right{display:flex;align-items:center;gap:var(--sp-3);flex:none}
.searchbox{display:flex;align-items:center;font-size:var(--font-small);color:var(--color-secondary);
  background:#fff;border:1px solid var(--color-control);border-radius:var(--radius-sm);
  padding:1rem 1.4rem}
/* Raised to .btn.burger: plain .burger lost to .btn{display:inline-flex},
   which is declared later with the same specificity, so it leaked onto desktop. */
.btn.burger{display:none}
/* Mobile nav — the Menu button now actually opens something. */
.mobilenav{display:none;border-bottom:1px solid var(--color-border);background:#fff;
  padding:var(--sp-3) var(--sp-4)}
.mobilenav.open{display:block}
.mobilenav a{display:block;font-size:var(--font-base);font-weight:var(--semi-bold);
  color:var(--color-base);text-decoration:none;padding:var(--sp-3) 0;
  border-bottom:1px solid var(--color-border)}
.mobilenav a:last-child{border-bottom:0}
.mobilenav a.sub{font-weight:var(--regular);font-size:var(--font-small);
  padding-left:var(--sp-4);color:var(--color-secondary)}
.mobilenav a:hover{color:var(--accent)}
/* Tinted, not white. The footer is the only signal that the page has ended,
   and on a phone a white footer against white content gives the reader no
   edge at all. #ECEEF2 sits 1.16 off white, enough to see without reading as
   a coloured block, and every foreground stays well above WCAG AA on it:
   body 8.13, secondary 6.42, links 5.66.
   It is also deliberately NOT #F2F3F5, which is the click dummy's own page
   backdrop: at 1.000 against it the footer would have disappeared into the
   review surround. */
.site-foot{background:var(--color-surface);border-top:1px solid var(--color-border);
  padding:var(--sp-7) var(--sp-6) var(--sp-5)}
.gfoot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:var(--sp-5)}
.gfoot h4{font-size:1.1rem;font-weight:var(--bold);letter-spacing:.09em;text-transform:uppercase;
  color:var(--color-secondary);margin:0 0 var(--sp-3)}
.gfoot a{display:block;font-size:var(--font-small);color:var(--color-base);
  text-decoration:none;padding:4px 0}
.gfoot a:hover{color:var(--accent);text-decoration:underline}
.gfoot p{font-size:var(--font-small);line-height:1.55;color:var(--color-secondary);margin:var(--sp-3) 0 0}
.disclaimer{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--color-border);
  font-size:var(--font-tiny);color:var(--color-secondary);text-align:center}

/* ══════ PAGE STRUCTURE ══════ */
.sec{padding:var(--sp-6) var(--sp-6)}
.sec + .sec{border-top:1px solid var(--color-border)}
.sec.tint{background:var(--accent-surface)}
.wrap{max-width:var(--width);margin:0 auto}
.crumbs{padding:var(--sp-4) var(--sp-6) 0;font-size:var(--font-small);color:var(--color-secondary)}
.crumbs a{color:var(--accent);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs i{font-style:normal;margin:0 var(--sp-2);color:#bbb}
.kicker{font-size:var(--font-tiny);font-weight:var(--semi-bold);letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-3)}
h1.d{font-size:var(--font-display);line-height:var(--lh-tight);letter-spacing:-1px;
  font-weight:var(--bold);margin:0 0 var(--sp-4)}
h1.p{font-size:var(--font-main-heading);line-height:var(--lh-tight);letter-spacing:-.5px;
  font-weight:var(--bold);margin:0 0 var(--sp-3)}
h2.s{font-size:var(--font-secondary-heading);line-height:var(--lh-tight);
  font-weight:var(--bold);margin:0 0 var(--sp-4)}
h3.t{font-size:var(--font-subheading);line-height:1.2;font-weight:var(--bold);margin:0 0 var(--sp-3)}
h4.q{font-size:2rem;line-height:1.2;font-weight:var(--bold);margin:0 0 var(--sp-2)}
.lead{font-size:var(--font-lead);line-height:var(--lh-lead);color:var(--color-secondary);
  margin:0 0 var(--sp-4);max-width:62ch}
p.body{font-size:var(--font-base);line-height:var(--lh-body);margin:0 0 var(--sp-4);max-width:66ch}
p.small{font-size:var(--font-small);line-height:1.55;color:var(--color-secondary);margin:0 0 var(--sp-3)}
/* Unverified-sample marker. This is review metadata, not design — so it rides
   with the annotations layer instead of showing by default. Toggle annotations
   on to see which copy still needs writing and fact-checking. */
.sample{border-bottom:none}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.revstamp{display:inline-flex;align-items:center;font-size:var(--font-tiny);
  color:var(--color-secondary);letter-spacing:.02em}
.g23 .trustbox{margin:0}
.trustbox .pillar-row:last-of-type{margin-bottom:0}
.trustbox h2.q{font-size:2rem;line-height:1.2;font-weight:var(--bold);margin:0 0 var(--sp-2)}
.g23{display:grid;grid-template-columns:1.9fr 1fr;gap:var(--sp-6);align-items:start}
.g13{display:grid;grid-template-columns:230px 1fr;gap:var(--sp-6);align-items:start}
.rowflex{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:inherit;font-size:var(--font-small);font-weight:var(--semi-bold);line-height:1;
  padding:1.3rem 2.2rem;border-radius:var(--radius-sm);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:background-color .12s,border-color .12s,color .12s}
.btn.solid{background:var(--accent-cta);color:var(--accent-on-cta)}
.btn.solid:hover{background:var(--accent-cta-hover)}
.btn.out{background:#fff;color:var(--accent);border-color:var(--accent)}
.btn.out:hover{background:var(--accent-surface)}
.btn.quiet{background:transparent;color:var(--color-base);border-color:var(--color-border)}
.btn.quiet:hover{border-color:var(--color-base)}
.btn.small{font-size:var(--font-tiny);padding:.9rem 1.5rem}

/* Evidence tier badge. The word is the label; color only reinforces it. */
.grade{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-tiny);
  font-weight:var(--bold);letter-spacing:.02em;padding:.5rem 1rem;border-radius:99px;
  border:1px solid;white-space:nowrap;line-height:1;vertical-align:middle}
.grade .dot{width:7px;height:7px;border-radius:50%;flex:none}
.grade.none{color:var(--color-secondary);background:#f2f2f2;border-color:var(--color-border)}
.grade.none .dot{background:var(--color-secondary);opacity:.4}
.gradewrap{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;max-width:34ch}
.gradewrap .qual{font-size:var(--font-tiny);line-height:1.45;color:var(--color-secondary)}
.prose .mod{margin:var(--sp-5) 0 var(--sp-6)}
.prose .mod>*{margin-bottom:0}
.gradedefs .box{display:flex;flex-direction:column}
.gradedefs h3.t{font-size:var(--font-subheading)}
.qgrid{align-items:start}
.qstep{display:flex;flex-direction:column}
.qstep .opt:last-of-type .obox{margin-bottom:0}

/* ── Comparison, scroll-free ── */
.viewswitch{display:inline-flex;gap:4px;padding:4px;background:var(--accent-surface);
  border:1px solid var(--accent-line);border-radius:99px}
.vbtn{font:inherit;font-size:var(--font-tiny);font-weight:var(--semi-bold);cursor:pointer;
  border:0;background:transparent;color:var(--accent-pressed);border-radius:99px;
  padding:.8rem 1.6rem;transition:background .15s,color .15s}
.vbtn.on{background:var(--accent-fill);color:var(--accent-on-fill)}
.cmpq{margin-top:var(--sp-6)}
.cmpq-h{font-size:var(--font-subheading);font-weight:var(--bold);margin:0 0 var(--sp-4);
  padding-bottom:var(--sp-3);border-bottom:2px solid var(--accent-line);scroll-margin-top:90px}
.cmplist{display:grid;gap:var(--sp-4)}
/* Hover must not move anything. The row sat at padding-left:0 and gained
   padding-left:16px on hover, with .who cancelling it so the title held still,
   which meant the whole right-hand column jumped 16px sideways and the row grew
   wider than its container. Geometry is constant at every state now; hover
   changes colour only. */
.cmprow{display:grid;grid-template-columns:230px 1fr;gap:var(--sp-5);align-items:baseline;
  padding:var(--sp-4);border-bottom:1px solid var(--color-border);
  border-left:2px solid transparent;transition:border-color .15s,background .15s}
.cmprow:last-child{border-bottom:0}
.cmprow:hover{background:var(--accent-surface);border-left-color:var(--accent)}
.cmprow .who{display:block;text-decoration:none}
.cmprow .nm{display:block;font-size:var(--font-small);font-weight:var(--bold);
  color:var(--color-primary);line-height:1.35;letter-spacing:-.01em}
.cmprow .who::after{content:"Open hub \2192";display:block;margin-top:4px;
  font-size:var(--font-tiny);font-weight:var(--semi-bold);color:var(--accent);
  opacity:0;transition:opacity .15s}
.cmprow:hover .who::after{opacity:1}
.cmprow .who:hover .nm{color:var(--accent)}
.cmprow p{margin:0;font-size:var(--font-small);line-height:1.65;color:var(--color-secondary);max-width:76ch}
/* Anchor targets must clear the sticky header. */
[id]{scroll-margin-top:90px}
html{scroll-behavior:smooth}

/* ── The five commitments ── */
.commit{border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;background:#fff}
.commit>header{padding:var(--sp-5) var(--sp-5) var(--sp-4);border-bottom:1px solid var(--color-border);
  background:var(--accent-surface)}
.commit>header h3{font-size:var(--font-subheading);font-weight:var(--bold);margin:0 0 var(--sp-2)}
.commit>header p{margin:0;font-size:var(--font-small);line-height:1.55;color:var(--color-secondary);max-width:70ch}
.commit ol{list-style:none;margin:0;padding:0;counter-reset:none}
.commit li{display:grid;grid-template-columns:auto auto 1fr auto;gap:var(--sp-4);align-items:start;
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--color-border);
  border-left:3px solid transparent;transition:background .15s,border-color .15s}
.commit li:hover{background:var(--accent-surface);border-left-color:var(--accent)}
.commit li .num{font-family:ui-monospace,Menlo,monospace;font-size:var(--font-tiny);
  font-weight:var(--semi-bold);color:var(--accent);opacity:.55;padding-top:3px;letter-spacing:.04em}
.commit li .ic{display:inline-flex;width:20px;height:20px;flex:none;color:var(--icon-accent)}
.commit li .ic svg{width:100%;height:100%}
.commit li.no .ic{color:var(--tier-weak-fg)}
.commit li .txt{display:block;min-width:0}
.commit li .txt b{display:block;font-size:var(--font-small);font-weight:var(--bold);
  line-height:1.4;margin-bottom:3px}
.commit li .txt span{display:block;font-size:var(--font-tiny);line-height:1.55;color:var(--color-secondary)}
.commit li .act{align-self:center;white-space:nowrap;font-size:var(--font-tiny);
  font-weight:var(--semi-bold);color:var(--accent);text-decoration:none}
.commit li .act:hover{text-decoration:underline}
.commit>footer{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;
  justify-content:space-between;padding:var(--sp-4) var(--sp-5);background:var(--color-surface,#FAFAFA)}
.commit>footer p{margin:0;font-size:var(--font-tiny);color:var(--color-secondary);max-width:52ch}
@media (max-width:700px){
  .commit li{grid-template-columns:auto 1fr;gap:var(--sp-3)}
.commit li .num{display:none}
.commit li .act{grid-column:2;justify-self:start;margin-top:4px}
.commit>footer{flex-direction:column;align-items:flex-start}
}
.aihead .gl{display:inline-flex;width:30px;height:30px;flex:none;color:var(--accent);
  background:#fff;border:1px solid var(--accent-line);border-radius:50%;padding:5px}
.aihead .gl svg{width:100%;height:100%}

/* ── Self-care: do vs do not ──
   Two identical gray boxes made the reader parse the heading to tell a
   recommendation from a warning. Now differentiated three ways at once, so it
   survives grayscale printing and color blindness (WCAG 1.4.1: never color alone):
   color, a per-item icon, and the heading text itself. */
.carepair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);align-items:start}
.care{border:1px solid;border-radius:var(--radius);overflow:hidden;background:#fff}
.care>header{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid}
.care>header h4{margin:0;font-size:var(--font-small);font-weight:var(--bold);letter-spacing:.01em}
.care>header .ic{display:inline-flex;width:26px;height:26px;flex:none;border-radius:50%;
  padding:4px;background:#fff;border:1px solid}
.care>header .ic svg{width:100%;height:100%}
.care ul{list-style:none;margin:0;padding:var(--sp-4) var(--sp-5)}
.care li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);align-items:start;
  font-size:var(--font-small);line-height:1.6;padding:var(--sp-3) 0;
  border-bottom:1px solid var(--color-border)}
.care li:last-child{border-bottom:0;padding-bottom:0}
.care li:first-child{padding-top:0}
.care li .m{display:inline-flex;width:17px;height:17px;flex:none;margin-top:2px}
.care li .m svg{width:100%;height:100%}
.care.do{border-color:var(--tier-strong-bd)}
.care.do>header{background:var(--tier-strong-bg);border-bottom-color:var(--tier-strong-bd)}
.care.do>header h4{color:var(--tier-strong-fg)}
.care.do>header .ic{color:var(--tier-strong-fg);border-color:var(--tier-strong-bd)}
.care.do li .m{color:var(--tier-strong-fg)}
.care.dont{border-color:var(--tier-weak-bd)}
.care.dont>header{background:var(--tier-weak-bg);border-bottom-color:var(--tier-weak-bd)}
.care.dont>header h4{color:var(--tier-weak-fg)}
.care.dont>header .ic{color:var(--tier-weak-fg);border-color:var(--tier-weak-bd)}
.care.dont li .m{color:var(--tier-weak-fg)}
.care.dont li span:last-child{color:var(--color-secondary)}

/* Nav and footer group labels. Formerly h5 and h4, which put eight headings
   ahead of the page h1 in the document outline. They label navigation, not
   content, so they are no longer headings; the visual result is unchanged. */
.mega .mh{display:block;font-size:var(--font-tiny);font-weight:var(--semi-bold);
  text-transform:uppercase;letter-spacing:.07em;color:var(--color-secondary);
  margin-bottom:var(--sp-3)}
.gfoot .fh{display:block;font-size:var(--font-tiny);font-weight:var(--semi-bold);
  text-transform:uppercase;letter-spacing:.07em;color:var(--color-secondary);
  margin-bottom:var(--sp-3)}
.care h3{font-size:var(--font-small);font-weight:var(--bold);margin:0 0 var(--sp-3)}
.care h3{margin:0}

/* ── LEARN ── */
.learnwrap{display:grid;grid-template-columns:1fr 250px;gap:var(--sp-6);align-items:start}
.learnmain{min-width:0}
.learnrail .toc{position:sticky;top:90px}
.lsec{padding-bottom:var(--sp-5);margin-bottom:var(--sp-5);border-bottom:1px solid var(--color-border)}
.lsec:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.lsec h2.s{scroll-margin-top:90px}
.lartlist{display:grid;gap:0;border:1px solid var(--color-border);border-radius:var(--radius);
  overflow:hidden;background:#fff}
.lart{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:start;
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--color-border);
  text-decoration:none;border-left:2px solid transparent;transition:background .15s,border-color .15s;
  scroll-margin-top:90px}
.lart:last-child{border-bottom:0}
.lart:hover{background:var(--accent-surface);border-left-color:var(--accent)}
.lart .num{font-family:ui-monospace,Menlo,monospace;font-size:var(--font-tiny);
  font-weight:var(--semi-bold);color:var(--accent);opacity:.55;padding-top:3px;letter-spacing:.04em}
.lart .n{display:block;font-weight:var(--bold);
  margin-bottom:3px}
.lart:hover .n{color:var(--accent)}
.lart .d{display:block;font-size:var(--font-tiny);line-height:1.55;color:var(--color-secondary)}
.learnrail .toc a.grp{margin-top:var(--sp-3);font-weight:var(--semi-bold);color:var(--color-primary)}
.learnrail .toc a.sub{padding-left:var(--sp-3);font-size:var(--font-tiny);opacity:.85}
@media (max-width:900px){.learnwrap{grid-template-columns:1fr}
.learnrail{display:none}}
.vbox{background:var(--accent-highlight);border:1px solid var(--accent-highlight-line);
  border-radius:var(--radius);padding:var(--sp-4)}
.vframe{position:relative;aspect-ratio:16/9;background:#000;border-radius:calc(var(--radius) - 2px);
  overflow:hidden}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video figcaption{display:flex;flex-wrap:wrap;gap:.4rem var(--sp-3);align-items:baseline;
  margin:var(--sp-3) 2px 0;font-size:var(--font-tiny);line-height:1.5}
.video figcaption b{font-weight:var(--bold);color:var(--accent-pressed)}
.video figcaption span{color:var(--color-secondary)}
@media (max-width:700px){.carepair{grid-template-columns:1fr}}
.report>header{padding:var(--sp-5);background:var(--accent-surface);border-bottom:1px solid var(--color-border)}
.report>header h3{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--font-subheading);
  font-weight:var(--bold);margin:0 0 var(--sp-2)}
.report>header h3 svg{width:22px;height:22px;flex:none;color:var(--accent)}
.report>header p{margin:0;font-size:var(--font-small);line-height:1.55;color:var(--color-secondary);max-width:66ch}
.report ol{list-style:none;margin:0;padding:0}
.report li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:start;
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--color-border)}
.report li .num{font-family:ui-monospace,Menlo,monospace;font-size:var(--font-tiny);
  font-weight:var(--semi-bold);color:var(--accent);opacity:.55;padding-top:3px;letter-spacing:.04em}
.report li .txt b{display:block;font-size:var(--font-small);font-weight:var(--bold);line-height:1.4;margin-bottom:3px}
.report li .txt span{display:block;font-size:var(--font-tiny);line-height:1.55;color:var(--color-secondary)}
.report>footer{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;padding:var(--sp-5)}
.report>footer p{margin:0;font-size:var(--font-tiny);color:var(--color-secondary);max-width:46ch}
.btn.pending{opacity:.45;cursor:not-allowed}
.cmpcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--sp-4);
  margin-top:var(--sp-5)}
.cmpcard{border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;background:#fff}
.cmpcard header{padding:var(--sp-4);border-bottom:1px solid var(--color-border)}
.cmpcard header .photo{margin:0 0 var(--sp-3);aspect-ratio:3/2;border-radius:calc(var(--radius) - 2px);
  overflow:hidden;background:var(--color-border)}
.cmpcard header .photo img{width:100%;height:100%;object-fit:cover;display:block}
.cmpcard h3{font-size:var(--font-subheading);font-weight:var(--bold);margin:0 0 var(--sp-3);line-height:1.25}
.cmpcard dl{margin:0;padding:var(--sp-4)}
.cmpcard dl>div{padding-bottom:var(--sp-4);margin-bottom:var(--sp-4);border-bottom:1px solid var(--color-border)}
.cmpcard dl>div:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.cmpcard dt{font-size:var(--font-tiny);text-transform:uppercase;letter-spacing:.06em;
  font-weight:var(--semi-bold);color:var(--color-secondary);margin-bottom:6px}
.cmpcard dd{margin:0;font-size:var(--font-small);line-height:1.6}
@media (max-width:700px){
  .cmprow{grid-template-columns:1fr;gap:var(--sp-3)}
.cmpcards{grid-template-columns:1fr}
.viewswitch{display:flex;width:100%}
.vbtn{flex:1;text-align:center}
}
.artbody h2.s:first-child{margin-top:0}
.artbody h3{font-size:var(--font-subheading);font-weight:var(--bold);margin:var(--sp-5) 0 var(--sp-3)}
.artbody p{margin:0 0 var(--sp-4);line-height:var(--lh-body)}
.artbody ul,.artbody ol{margin:0 0 var(--sp-4) var(--sp-5);line-height:var(--lh-body)}
.artbody li{margin-bottom:var(--sp-2)}
.artbody a{color:var(--accent);overflow-wrap:anywhere}
/* Works Cited prints full URLs; without this they push the column wide. */
.works-cited a,.works-cited li{overflow-wrap:anywhere}
.cf-f input,.libsearch input{min-width:0}
.artbody img{max-width:100%;height:auto;border-radius:var(--radius);margin:var(--sp-4) 0}
.artbody table{width:100%;border-collapse:collapse;font-size:var(--font-small);margin:var(--sp-4) 0}
.artbody th,.artbody td{padding:var(--sp-3);border:1px solid var(--color-border);text-align:left;vertical-align:top}
.artbody th{background:var(--accent-surface);font-weight:var(--semi-bold)}
.artbody blockquote{margin:var(--sp-4) 0;padding:var(--sp-4) var(--sp-5);
  border-left:3px solid var(--accent);background:var(--accent-highlight);border-radius:0 var(--radius) var(--radius) 0}
.toc{position:sticky;top:80px}

/* ── Reading measure ──
   A 68ch cap on the paragraph inside a 1045px box left a dead band on the right.
   The measure is correct; the container was the problem. Prose-only blocks now
   cap at the theme's own prose width and let the text fill them edge to edge.
   Grids, tables, card rows and image modules stay full width. */
.prose{max-width:var(--width)}
.prose p,.prose ul,.prose ol{max-width:none}
.box.proseonly{max-width:var(--width)}
.box.proseonly p.body,.box.proseonly p.small{max-width:none}
/* Intro paragraphs that sit above a grid inside a full-width box: the box must
   stay wide for the grid, so the paragraph fills it instead of being capped. */
p.body.fill,p.small.fill{max-width:none}

/* ── The library ── */
.libbar{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;justify-content:space-between;
  margin-bottom:var(--sp-4)}
.libsearch{display:flex;align-items:center;gap:var(--sp-2);flex:1 1 320px;max-width:440px;
  border:1px solid var(--color-border);border-radius:var(--radius);padding:0 var(--sp-4);background:#fff}
.libsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-surface)}
.libsearch input{border:0;outline:0;width:100%;padding:1.1rem 0;font:inherit;
  font-size:var(--font-small);background:transparent;color:var(--color-primary)}
.libsort{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.libsort .lbl{font-size:var(--font-tiny);text-transform:uppercase;letter-spacing:.06em;
  font-weight:var(--semi-bold);color:var(--color-secondary);margin-right:var(--sp-2)}
.sbtn,.chip{font:inherit;font-size:var(--font-tiny);font-weight:var(--semi-bold);cursor:pointer;
  border:1px solid var(--color-border);background:#fff;color:var(--color-secondary);
  border-radius:99px;padding:.7rem 1.3rem;transition:all .15s}
.sbtn:hover,.chip:hover{border-color:var(--accent);color:var(--accent)}
.sbtn.on,.chip.on{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-on-fill)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-4);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--color-border)}
.chip .c{margin-left:.7rem;opacity:.65;font-weight:var(--semi-bold)}
.libcount{font-size:var(--font-tiny);text-transform:uppercase;letter-spacing:.06em;
  color:var(--color-secondary);font-weight:var(--semi-bold);margin-bottom:var(--sp-4)}
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-4)}
/* Base margin, NOT only in the mobile layer. `.libmore { margin-top }` lived
   inside the media query alone, so on desktop the Show more button sat flush
   against the last row of cards with zero gap above it and 32px below. Same
   fault as .libpickers (never hidden on desktop) and .site-head (never styled
   on desktop): a component whose only rule is inside @media is unstyled at
   every other width. Matches the grid's own gap. */
.libmore{margin-top:var(--sp-4)}
.libcard{display:flex;flex-direction:column;border:1px solid var(--color-border);
  border-radius:var(--radius);overflow:hidden;background:#fff;text-decoration:none;
  transition:border-color .15s,box-shadow .15s}
.libcard:hover{border-color:var(--hover-ring);box-shadow:0 2px 12px var(--accent-shadow)}
/* Inset, not full bleed. The Recently reviewed card sits its photo inside the
   card's padding and reads better for it; the library card ran the image to
   three edges. Margin matches .libcard .body's padding so the image and the
   text below it share one left and right edge. */
.libcard .photo{margin:var(--sp-5) var(--sp-5) 0;border-radius:var(--radius-sm);
  aspect-ratio:3/2;overflow:hidden;background:var(--color-border)}
.libcard .photo img{width:100%;height:100%;object-fit:cover;display:block}
.libcard .body{display:flex;flex-direction:column;flex:1;padding:var(--sp-5);gap:var(--sp-2)}
/* Size, weight and colour all come from the shared article-listing rule above,
   so the library, the Recently reviewed cards and the learn list cannot drift
   apart again. This used to set its own 18px and its own blue, which is why
   the same component looked like two different components on two pages. */
/* One rule governs every article listing: the library, the Recently reviewed
   cards and the learn list. They had drifted to three different sizes and two
   different colours because each component set its own. Colour matters here
   because .libcard is an <a> and was inheriting the default link blue while
   .card.art inherited dark from .card. */
.card.art h3, .libcard .n, .lart .n{
  font-family:var(--font-serif);
  text-transform:none;
  letter-spacing:-.01em;
  font-size:var(--font-base);
  font-weight:var(--bold);
  line-height:1.3;
  color:var(--color-base);
}
.libcard .d{font-size:var(--font-tiny);line-height:1.5;color:var(--color-secondary);flex:1}
/* Every tag renders, so the row wraps freely. Articles carry 3 to 6 tags
   (mean 3.3), which is why the date sits on its own line above them rather
   than competing for the same row. */
.libcard .foot{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
  margin-top:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--color-border);
  font-size:var(--font-tiny);color:var(--color-secondary)}
.libcard .foot time{font-weight:var(--semi-bold);letter-spacing:.02em}
.libcard .tagwrap{display:flex;flex-wrap:wrap;gap:.4rem}
.libcard .tg{background:var(--accent-surface);color:var(--accent-pressed);
  border-radius:99px;padding:.3rem .8rem;font-weight:var(--semi-bold)}
.libcard .tg.hit{background:var(--accent-fill);color:var(--accent-on-fill)}
.libempty{font-size:var(--font-small);color:var(--color-secondary);padding:var(--sp-6) 0}

/* ── Article header, standard Ghost post shape ── */
.posthead{margin-bottom:var(--sp-5)}
.tagrow{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:var(--sp-3)}
.tagrow .tg{background:var(--accent-surface);color:var(--accent-pressed);border-radius:99px;
  padding:.4rem 1rem;font-size:var(--font-tiny);font-weight:var(--semi-bold)}
.postmeta{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;margin-top:var(--sp-3);
  font-size:var(--font-tiny);color:var(--color-secondary)}
.postmeta span{display:inline-flex;align-items:center}
.postfeat{margin:0 0 var(--sp-5);aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);
  background:var(--color-border)}
.postfeat img{width:100%;height:100%;object-fit:cover;display:block}
.postsum{background:var(--accent-surface);border:1px solid var(--accent-line);
  border-radius:var(--radius);padding:var(--sp-5);margin-bottom:var(--sp-6);max-width:var(--width)}
.postsum p{margin:0;font-size:var(--font-lead);line-height:var(--lh-lead);color:var(--accent-pressed)}
.policylist.compact li{margin-bottom:var(--sp-3)}
.policylist.compact li span:last-child{font-size:var(--font-small)}
.grade.strong{color:var(--tier-strong-fg);background:var(--tier-strong-bg);border-color:var(--tier-strong-bd)}
.grade.strong .dot{background:var(--tier-strong-fg)}
.grade.moderate{color:var(--tier-moderate-fg);background:var(--tier-moderate-bg);border-color:var(--tier-moderate-bd)}
.grade.moderate .dot{background:var(--tier-moderate-fg)}
.grade.limited{color:var(--tier-limited-fg);background:var(--tier-limited-bg);border-color:var(--tier-limited-bd)}
.grade.limited .dot{background:var(--tier-limited-fg)}
.grade.weak{color:var(--tier-weak-fg);background:var(--tier-weak-bg);border-color:var(--tier-weak-bd)}
.grade.weak .dot{background:var(--tier-weak-fg)}
.pill{display:inline-flex;align-items:center;font-size:var(--font-tiny);font-weight:var(--semi-bold);
  color:var(--color-secondary);background:#f2f2f2;border:1px solid var(--color-border);
  border-radius:99px;padding:.5rem 1rem;line-height:1}

/* Cards */
.card{border:1px solid var(--color-border);border-radius:var(--radius);background:#fff;
  padding:var(--sp-5);display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:border-color .14s,transform .14s}
.card:hover{border-color:var(--hover-ring);transform:translateY(-2px)}
.card .eyebrow{font-size:var(--font-tiny);font-weight:var(--semi-bold);letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-3)}
.card h3{font-size:2rem;line-height:1.2;font-weight:var(--bold);margin:0 0 var(--sp-2)}
.card p{font-size:var(--font-small);line-height:1.5;color:var(--color-secondary);margin:0 0 var(--sp-3)}
.card .foot{margin-top:auto;display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  font-size:var(--font-tiny);font-weight:var(--semi-bold);color:var(--color-secondary)}
/* Real photography. Every third-party image carries a visible credit; production
   self-hosts copies rather than hotlinking. */
/* All imagery renders at a 3:2 ratio (FR, 16 Aug 2026) — one consistent shape
   across cards, boxes and article slots; width is set by the container. */
figure.photo{margin:0 0 var(--sp-3);border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--color-border)}
figure.photo img{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover}
.triage{background:#FBE7E3;border:1px solid #E3AA9E;border-left:3px solid var(--tier-weak-fg);
  border-radius:var(--radius);padding:var(--sp-4) var(--sp-5);margin:var(--sp-4) 0}
.triage h3,.triage h4{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--font-base);
  font-weight:var(--bold);color:var(--tier-weak-fg);margin:0 0 var(--sp-2)}
/* Scoped to h4 only. When the heading became h3 the SVG lost its width and
   filled the box. Any bare inline icon needs an explicit box. */
.triage h3 svg,.triage h4 svg{width:18px;height:18px;flex:none}
.triage ul{margin:0;padding-left:2rem;font-size:var(--font-small);line-height:1.6;color:#6B2419}
.triage li{margin-bottom:var(--sp-1)}

/* Boxes */
.box{border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--sp-5);background:#fff}
.box.tint{background:var(--accent-surface);border-color:var(--accent-line)}
.keyanswer{background:var(--accent-highlight);border:1px solid var(--accent-highlight-line);
  border-left:3px solid var(--accent);border-radius:var(--radius);
  padding:var(--sp-5);margin:var(--sp-4) 0}
.keyanswer p{font-size:var(--font-lead);line-height:var(--lh-lead);color:var(--accent-pressed);
  margin:0 0 var(--sp-3);max-width:none}

/* Reviewer bar */
.byline{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;
  background:var(--accent-surface);border:1px solid var(--accent-line);border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-5);margin:var(--sp-4) 0}
.byline .avatar{width:44px;height:44px;border-radius:50%;background:var(--accent-fill);color:var(--accent-on-fill);
  display:flex;align-items:center;justify-content:center;font-weight:var(--bold);
  font-size:var(--font-small);flex:none}
.byline .who{font-size:var(--font-small);line-height:1.5}
.byline .who b{display:block;color:var(--accent-pressed)}
.byline .who span{color:var(--color-secondary)}
.byline .when{margin-left:auto;font-size:var(--font-tiny);color:var(--color-secondary);text-align:right}

/* Tables */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;font-size:var(--font-small);min-width:600px}
table.cmp th{text-align:left;font-weight:var(--semi-bold);font-size:var(--font-tiny);
  text-transform:uppercase;letter-spacing:.06em;color:var(--color-secondary);
  padding:var(--sp-3) var(--sp-4);border-bottom:2px solid var(--accent-line);white-space:nowrap}
table.cmp td{padding:var(--sp-4);border-bottom:1px solid var(--color-border);vertical-align:middle}
table.cmp tbody tr:hover{background:var(--accent-surface)}
table.cmp td a{color:var(--accent);text-decoration:none;font-weight:var(--semi-bold);white-space:nowrap}
table.cmp td a:hover{text-decoration:underline}
.cost{font-family:ui-monospace,Menlo,monospace;color:var(--color-secondary);letter-spacing:1px}

/* FAQ */
.faq-item{border-bottom:1px solid var(--color-border);padding:var(--sp-4) 0}
.faq-item:last-child{border-bottom:0}
.faq-item b{display:block;font-size:var(--font-base);font-weight:var(--semi-bold);margin-bottom:var(--sp-2)}
.faq-item p{font-size:var(--font-small);line-height:1.6;color:var(--color-secondary);margin:0;max-width:70ch}

/* Works cited */
.works-cited{border-top:2px solid var(--accent-line);padding-top:var(--sp-5)}
.works-cited h3{font-size:var(--font-subheading);font-weight:var(--bold);margin:0 0 var(--sp-2)}
.works-cited .wc-meta{font-size:var(--font-tiny);color:var(--color-secondary);margin:0 0 var(--sp-4)}
.works-cited ol{margin:0;padding-left:2.2rem;font-size:var(--font-small);line-height:1.65}
.works-cited li{margin-bottom:var(--sp-3);color:var(--color-secondary)}
.works-cited li cite{font-style:normal;color:var(--color-base)}
.works-cited li a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-word}

/* TOC */
.toc{position:sticky;top:56px;border-left:2px solid var(--accent-line);padding-left:var(--sp-4)}
.toc .h{font-size:var(--font-tiny);font-weight:var(--bold);letter-spacing:.09em;
  text-transform:uppercase;color:var(--color-secondary);margin-bottom:var(--sp-3)}
.toc a{display:block;font-size:var(--font-small);color:var(--color-base);
  text-decoration:none;padding:5px 0}
.toc a:hover{color:var(--accent)}
.toc a.on{color:var(--accent);font-weight:var(--semi-bold)}

/* ── Condition-hub hero ──
   The earlier version put only a kicker + H1 in the left column beside a 3:2
   image, so the image set the row height and left a dead band under the
   headline. Now the left column carries the whole opening (answer, meta, CTAs)
   and both columns are centered, so the height is filled by content. */
.hubhero{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-6);
  align-items:center;padding:var(--sp-5) var(--sp-6) var(--sp-6)}
.hubhero h1{font-size:var(--font-display);line-height:1.1;letter-spacing:-1px;
  font-weight:var(--bold);margin:0 0 var(--sp-3)}
.hubhero .answer{font-size:var(--font-lead);line-height:1.45;color:var(--color-base);
  margin:0 0 var(--sp-4);max-width:34ch}
.hubhero figure.photo{margin:0}
/* No image? Then there is no second column to hold. The hero goes full width
   and the copy stretches into the space instead of leaving a blank right half.
   Measures are still capped so the display type does not run to unreadable
   line lengths at 1160px. */
.hubhero.solo{grid-template-columns:1fr;gap:0}
.hubhero.solo h1{max-width:24ch}
.hubhero.solo .answer{max-width:62ch;font-size:2.6rem;line-height:1.35}
.hubhero.solo .hubmeta{max-width:none}
.hubmeta{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;
  font-size:var(--font-tiny);color:var(--color-secondary);
  padding-top:var(--sp-3);border-top:1px solid var(--color-border);margin-bottom:var(--sp-4)}
.hubmeta b{color:var(--color-base);font-weight:var(--semi-bold)}
.hubmeta a{color:var(--accent);text-decoration:none}
.hubmeta a:hover{text-decoration:underline}

/* Key facts — the block most likely to be lifted verbatim by an AI answer */
.keyfacts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;
  border:1px solid var(--accent-line);border-radius:var(--radius);overflow:hidden}
.keyfacts > div{display:flex;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--accent-line)}
.keyfacts > div:nth-child(odd){border-right:1px solid var(--accent-line)}
.keyfacts > div:nth-last-child(-n+2){border-bottom:0}
.keyfacts dt{flex:0 0 40%;font-size:var(--font-tiny);font-weight:var(--bold);
  color:var(--color-secondary);margin:0}
.keyfacts dd{margin:0;font-size:var(--font-small);line-height:1.45;color:var(--color-base)}

/* ── Policy / sources blocks (About) ──
   Pills were replaced with icon lists: a pill reads as a tag, and these are
   commitments. A list with a mark against each one reads as a standard. */
.policylist{list-style:none;margin:var(--sp-4) 0 0;padding:0}
.policylist li{display:flex;gap:var(--sp-3);align-items:flex-start;
  padding:var(--sp-3) 0;border-top:1px solid var(--color-border);
  font-size:var(--font-small);line-height:1.5}
.policylist li:first-child{border-top:0}
.policylist.cols{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--sp-6)}
.policylist.cols li{border-top:1px solid var(--color-border)}
.policylist.cols li:nth-child(-n+2){border-top:0}
/* Report-an-error is one line of business, not a column — a slim full-width
   bar. As a half-width box it stretched to match the policy list and left a
   dead field of white below the button. */
.reportbar{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  border:1px solid var(--color-border);border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:var(--sp-4) var(--sp-5);margin-top:var(--sp-4);background:#fff}
.reportbar .ic{flex:none;width:20px;height:20px;color:var(--accent)}
.reportbar .ic svg{width:20px;height:20px;display:block}
.reportbar div{flex:1 1 340px}
.reportbar b{display:block;font-size:var(--font-small);font-weight:var(--semi-bold);margin-bottom:2px}
.reportbar span{font-size:var(--font-tiny);color:var(--color-secondary);line-height:1.5}
.reportbar .btn{flex:none}
.policylist .ic{flex:none;width:18px;height:18px;color:var(--icon-accent);margin-top:1px}
.policylist .ic svg{width:18px;height:18px;display:block}
.policylist .no{color:var(--tier-weak-fg)}
.policylist b{font-weight:var(--semi-bold)}

/* AI workflow — three beats, so the process is visible at a glance */
.box h3.t span[style*="inline-flex"]{vertical-align:-3px}
.aiflow{display:flex;align-items:stretch;gap:0;margin:var(--sp-4) 0 0;
  border:1px solid var(--accent-line);border-radius:var(--radius);overflow:hidden;background:#fff}
.aiflow .step{flex:1;padding:var(--sp-4) var(--sp-5);position:relative}
.aiflow .step + .step{border-left:1px solid var(--accent-line)}
.aiflow .n{font-size:1.05rem;font-weight:var(--bold);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-2)}
.aiflow h5{font-size:var(--font-small);font-weight:var(--semi-bold);margin:0 0 var(--sp-1);
  color:var(--color-base)}
.aiflow p{font-size:var(--font-tiny);line-height:1.5;color:var(--color-secondary);margin:0}

/* Top sources — named, ranked, with real counts */
.sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0;
  border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;
  margin-top:var(--sp-3);background:#fff}
.sources .src{display:block;padding:var(--sp-4) var(--sp-5);text-decoration:none;
  border-bottom:1px solid var(--color-border);border-right:1px solid var(--color-border);
  transition:background-color .12s ease}
.sources .src:hover{background:var(--accent-surface)}
.sources .src .nm{font-size:var(--font-small);font-weight:var(--semi-bold);line-height:1.35;
  color:var(--accent);display:block}
.sources .src .ct{display:block;font-size:var(--font-tiny);font-weight:var(--regular);
  color:var(--color-secondary);margin-top:2px}

/* Section anchor nav */
.anchornav{display:flex;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-4) var(--sp-6);
  border-bottom:1px solid var(--color-border);background:#fff;position:sticky;
  top:calc(var(--head-top) + var(--head-h));z-index:400}

/* Quiz */
.opt{display:block;margin-bottom:var(--sp-3)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .obox{display:block;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:var(--sp-4);font-size:var(--font-small);cursor:pointer;transition:border-color .12s,background-color .12s}
.opt .obox b{display:block;font-weight:var(--semi-bold);margin-bottom:2px}
.opt .obox span{color:var(--color-secondary);font-size:var(--font-tiny)}
.opt:hover .obox{border-color:#bdbdbd}
.opt input:checked + .obox{border-color:var(--accent);background:var(--accent-surface);
  box-shadow:inset 0 0 0 1px var(--accent)}
.progress{height:4px;background:var(--color-border);border-radius:99px;overflow:hidden;margin-bottom:var(--sp-4)}
.progress i{display:block;height:100%;background:var(--accent);border-radius:99px}

/* Trust pillars — icon + claim. No live numbers anywhere: the corpus grows
   2–3 articles a week and any figure baked into a template goes stale. Every
   claim here is structurally true and stays true as the site grows. */
/* Trust pillars — four equal columns on a subgrid, so the icon, heading and
   body of every pillar sit on the same three lines however long each heading
   runs. Without it the two-line heading pushed its body out of alignment with
   the other three, which read as broken rather than authoritative. */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto auto;gap:0;
  border-top:2px solid var(--accent-line);margin-top:var(--sp-5)}
.pillar{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-5) var(--sp-5) 0}
.pillar + .pillar{padding-left:var(--sp-5);border-left:1px solid var(--color-border)}
.pillar .ico{width:38px;height:38px;border-radius:50%;background:var(--accent-surface);
  border:1px solid var(--accent-line);display:flex;align-items:center;justify-content:center;
  color:var(--accent);align-self:start}
.pillar .ico svg{width:19px;height:19px;display:block}
.pillar h4{font-size:var(--font-small);font-weight:var(--semi-bold);margin:0;
  line-height:1.35;color:var(--color-base);align-self:start}
.pillar p{font-size:var(--font-tiny);line-height:1.6;color:var(--color-secondary);
  margin:0;align-self:start}
@supports not (grid-template-rows: subgrid){
  .pillar{display:block}
.pillar h4{min-height:3.6em;margin:var(--sp-3) 0 var(--sp-2)}
}
.pillar-row{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;
  border-bottom:1px solid var(--color-border)}
.pillar-row:last-child{border-bottom:0}
.pillar-row .ico{flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--accent-surface);display:flex;align-items:center;justify-content:center;
  color:var(--accent)}
.pillar-row .ico svg{width:15px;height:15px;display:block}
.pillar-row span{font-size:var(--font-tiny);line-height:1.45}
.pillar-row b{font-weight:var(--semi-bold);color:var(--color-base)}
.pending{display:flex;gap:var(--sp-3);align-items:flex-start;background:#f5f5f5;
  border:1px dashed var(--color-control);border-radius:var(--radius);padding:var(--sp-4) var(--sp-5)}
.pending .tagp{font-size:1.1rem;font-weight:var(--bold);letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-secondary);background:#e6e6e6;border-radius:3px;padding:4px 8px;flex:none}
.pending p{font-size:var(--font-small);line-height:1.55;color:var(--color-secondary);margin:0}

/* Index page */
.tpl-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
@media (max-width:900px){
  .g3,.g4,.g23,.g13,.gfoot,.tpl-list{grid-template-columns:1fr}
nav.main{display:none}
}

/* ── page-book chrome ── */
.pb-index{max-width:var(--width-wide);margin:0 auto;padding:var(--sp-6)}
.s-ready{background:var(--tier-strong-bg);color:var(--tier-strong-fg)}
.s-thin{background:var(--tier-limited-bg);color:var(--tier-limited-fg)}
.prose h2{font-size:var(--font-secondary-heading);line-height:1.2;font-weight:var(--bold);margin:var(--sp-6) 0 var(--sp-3)}
.prose p{font-size:var(--font-base);line-height:var(--lh-body);margin:0 0 var(--sp-4);max-width:68ch}
.prose ul{margin:0 0 var(--sp-4);padding-left:2.2rem;font-size:var(--font-base);line-height:1.7;max-width:68ch}
.prose li{margin-bottom:var(--sp-2)}
/* ── Scar-types A to Z index ──
   The canonical map of the condition axis, so it earns real treatment: the
   licensed hub photo, the name, a one-line description, and the live article
   count. Previously .n and .d were inline spans, so the name and description
   ran together with no break. Both are block now. */
.typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--sp-4)}
.typecard{display:flex;flex-direction:column;border:1px solid var(--color-border);
  border-radius:var(--radius);overflow:hidden;background:#fff;text-decoration:none;color:inherit;
  transition:border-color .14s,transform .14s,box-shadow .14s}
.typecard:hover{border-color:var(--hover-ring);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.typecard figure{margin:0;border:0;border-radius:0}
.typecard figure img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.typecard .body{padding:var(--sp-4) var(--sp-5) var(--sp-5);display:flex;flex-direction:column;flex:1}
.typecard .n{display:block;font-size:2rem;font-weight:var(--bold);line-height:1.2;
  color:var(--color-base);margin-bottom:var(--sp-2)}
.typecard:hover .n{color:var(--accent)}
.typecard .d{display:block;font-size:var(--font-small);line-height:1.55;
  color:var(--color-secondary);margin-bottom:var(--sp-4)}
.typecard .foot{margin-top:auto;display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--font-tiny);font-weight:var(--semi-bold);color:var(--color-secondary);
  padding-top:var(--sp-3);border-top:1px solid var(--color-border)}
.typecard .foot .go{margin-left:auto;color:var(--accent)}
.typecard .empty{color:var(--tier-limited-fg)}

/* Text index, used by the Learn hub */
.idxlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-3)}
.idxlist a{display:block;border:1px solid var(--color-border);border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-5);text-decoration:none;color:inherit;background:#fff;
  transition:border-color .14s}
.idxlist a:hover{border-color:var(--hover-ring)}
.idxlist .n{display:block;font-size:var(--font-base);font-weight:var(--semi-bold);
  color:var(--accent);line-height:1.35;margin-bottom:var(--sp-1)}
.idxlist .d{display:block;font-size:var(--font-small);color:var(--color-secondary);line-height:1.55}
.idxlist a.planned{background:#fafafa;border-style:dashed;pointer-events:none}
.idxlist a.planned .n{color:var(--color-secondary)}
.idxlist a.planned .n::after{content:' · in progress';font-weight:var(--regular);
  font-size:var(--font-tiny);color:var(--color-secondary)}


/* ═══════════════════════════════════════════════════════════════════════
   Ghost editor cards
   Required by gscan: the editor can set a card to wide or full bleed, and the
   theme has to honour it or the setting silently does nothing.
   ═══════════════════════════════════════════════════════════════════════ */
.artbody .kg-card{margin:var(--sp-5) 0}
.artbody .kg-width-wide{max-width:1096px;margin-left:calc(50% - 548px);margin-right:calc(50% - 548px)}
.artbody .kg-width-full{max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.artbody .kg-image{max-width:100%;height:auto;border-radius:var(--radius)}
.artbody .kg-width-full .kg-image{width:100vw;border-radius:0}
.artbody figcaption{font-size:var(--font-tiny);color:var(--color-secondary);
  text-align:center;margin-top:var(--sp-3);line-height:1.5}
.artbody .kg-embed-card{display:flex;flex-direction:column;align-items:center}
.artbody .kg-embed-card iframe{max-width:100%}
.artbody .kg-gallery-container{display:flex;flex-direction:column;gap:var(--sp-3)}
.artbody .kg-gallery-row{display:flex;gap:var(--sp-3)}
.artbody .kg-gallery-image img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.artbody .kg-bookmark-card a{display:flex;border:1px solid var(--color-border);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;background:#fff}
.artbody .kg-callout-card{display:flex;gap:var(--sp-4);padding:var(--sp-5);
  border-radius:var(--radius);background:var(--accent-surface);border:1px solid var(--accent-line)}
.artbody .kg-toggle-card{border:1px solid var(--color-border);border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-5);margin:var(--sp-4) 0}
.artbody .kg-button-card a{display:inline-flex;align-items:center;background:var(--accent);
  color:#fff;border-radius:var(--radius-sm);padding:1.2rem 2rem;text-decoration:none;
  font-weight:var(--semi-bold)}

@media (max-width:1200px){
  .artbody .kg-width-wide{max-width:100%;margin-left:0;margin-right:0}
}

/* Custom fonts, set in Settings > Design > Brand. Ghost emits these variables
   from {{ghost_head}}; without referencing them the setting does nothing. */
body{font-family:var(--gh-font-body, var(--font-sans-serif))}
/* Headings are the serif face. The port had Inter here, which silently
   dropped Newsreader from every h1 and h2 in the theme. */
h1,h2,h3,h4,h5,.d,.p,.s,.t,.q,.cmpq-h{font-family:var(--gh-font-heading, var(--font-serif));
  font-optical-sizing:auto;letter-spacing:-.2px}

/* ══════ ARTICLE: review badge, share, newsletter ══════ */

/* The only date on the page that means "checked against the literature".
   Tinted so it does not read as one more grey meta item next to the
   publish date, which is a different kind of claim. */
.postmeta .reviewed{background:var(--accent-surface);border:1px solid var(--accent-line);
  border-radius:99px;padding:.3rem 1.1rem;color:var(--accent-pressed)}
.postmeta .reviewed b{font-weight:var(--semi-bold)}
.postmeta .metalink{display:inline-flex;align-items:center;color:var(--accent);
  text-decoration:none;font-weight:var(--semi-bold)}
.postmeta .metalink:hover{text-decoration:underline}

.share{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--color-border)}
.share-h{font-size:var(--font-tiny);font-weight:var(--bold);letter-spacing:.09em;
  text-transform:uppercase;color:var(--color-secondary)}
.share-btns{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.sh{display:inline-flex;align-items:center;gap:.6rem;font:inherit;cursor:pointer;
  font-size:var(--font-small);font-weight:var(--semi-bold);line-height:1;
  color:var(--color-base);text-decoration:none;background:#fff;
  border:1px solid var(--color-border);border-radius:99px;padding:.9rem 1.4rem;
  transition:border-color .12s,color .12s,background .12s}
.sh:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-surface)}
.sh svg{width:15px;height:15px;flex:none}
.sh.done{border-color:var(--accent);color:var(--accent);background:var(--accent-surface)}

.subscribe{display:grid;grid-template-columns:1fr minmax(0,380px);gap:var(--sp-5);
  align-items:center;background:var(--accent-surface);border:1px solid var(--accent-line);
  border-radius:var(--radius);padding:var(--sp-5)}
.subscribe h2.t{margin:0 0 var(--sp-2);display:flex;align-items:center;gap:.7rem}
.subscribe p{margin:0;color:var(--color-secondary)}
.subform{display:flex;gap:var(--sp-2);flex-wrap:wrap;position:relative}
.subform input{flex:1 1 200px;min-width:0;font:inherit;font-size:var(--font-small);
  padding:1.1rem 1.4rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:#fff;color:var(--color-base)}
.subform input:focus-visible{outline:2px solid var(--accent-bright);outline-offset:1px}
.subform .btn{flex:none}
/* Ghost toggles these by adding .success / .error to the form element. */
.submsg{display:none;flex-basis:100%;font-size:var(--font-tiny);margin:0;color:var(--accent-pressed)}
.submsg.err{color:var(--tier-weak-fg)}
form.success .submsg[data-members-success]{display:block}
form.error .submsg[data-members-error]{display:block}

/* Visually hidden, still read by screen readers. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:700px){
  .subscribe{grid-template-columns:1fr}
  .share{gap:var(--sp-2)}
}
/* ══════ MOBILE LAYER: generated from mobile.css, do not edit here ══════ */
/* ══════════════════════════════════════════════════════════════════════════
   MOBILE. Rebuilt 19 Aug 2026 on the design system's own tokens.

   The first version wrote 80 raw rem values and used the spacing scale zero
   times; 41 of those values (2.8rem, 1.4rem, 0.6rem, 0.2rem) were not on the
   scale at all. That is why spacing looked arbitrary and why components blended
   together: there was no shared rhythm, because nothing was measured against
   one.

   This version redefines the TOKENS inside the media query. Every component
   already consumes them, so the whole site re-scales coherently and the
   per-component overrides mostly disappear. What is left below is genuine
   mobile layout: stacking, the sheet, the table-to-card conversion.

   Type follows the iOS Dynamic Type ladder at the Large default (Apple HIG:
   body 17pt, 11pt floor), spaced on the project's 4px grid.
   ══════════════════════════════════════════════════════════════════════════ */

/* Base state, deliberately BEFORE the media query: CSS resolves equal
   specificity by order, and putting this after would re-hide these at every
   width.

   Every mobile-only element in the markup MUST be listed here. The markup is
   shared, so anything the media query switches ON is otherwise switched on at
   all widths. `.libpickers` was missed and shipped a desktop library page
   showing the two native pickers AND the 27 chips AND the sort buttons: three
   filters for one list. qa/desktop.js now asserts this list, because the
   mobile pass never looked at desktop and would not have caught it again. */
.btn.burger  { display: none; }
.libpickers  { display: none; }

@media (max-width: 700px) {

  /* ── THE TOKENS ───────────────────────────────────────────────────────
     One place. Everything downstream follows automatically.
     Scale stays on the 4px grid: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40. */
  :root {
    --font-display:            2.8rem;   /* Title 1  */
    --font-main-heading:       2.4rem;
    --font-secondary-heading:  2.2rem;   /* Title 2  */
    --font-subheading:         1.9rem;
    --font-lead:               1.8rem;
    --font-base:               1.7rem;   /* Body 17  */
    --font-small:              1.5rem;   /* Subhead  */
    --font-tiny:               1.3rem;   /* Footnote */

    --sp-5: 2rem;     /* 20px: the mobile gutter          */
    --sp-6: 2.4rem;   /* 24px: was 32, section padding    */
    --sp-7: 3.2rem;   /* 32px: was 40, between big blocks */
    --sp-8: 4rem;     /* 40px: was 64                     */

    --radius: 1.4rem;
    --lh-tight: 1.18;
    --lh-lead: 1.5;
  }

  /* ── RHYTHM ───────────────────────────────────────────────────────────
     Section padding now comes from the token, so the gap under any block
     equals the gap above the next one. */
  .sec        { padding: var(--sp-6) var(--sp-5); }
  .crumbs     { padding: var(--sp-4) var(--sp-5) 0; }
  /* Seven section chips wrapped to two rows and read as a scattered pile.
     One scrolling row instead: the standard mobile pattern for a section
     rail, and it keeps the page rhythm intact. Scrollbar hidden, edge fade
     signals there is more. */
  .anchornav  { padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
                flex-wrap: nowrap; overflow-x: auto; gap: var(--sp-2);
                scrollbar-width: none; -webkit-overflow-scrolling: touch;
                -webkit-mask-image: linear-gradient(90deg,#000 88%,transparent);
                mask-image: linear-gradient(90deg,#000 88%,transparent); }
  .anchornav::-webkit-scrollbar { display: none; }
  .anchornav .btn { flex: 0 0 auto; white-space: nowrap; }
  .anchornav::after { content: ''; flex: 0 0 var(--sp-5); }
  /* Sticky: on a phone the pages run 8 to 17 screens, so the way back has
     to travel with the reader. The anchor rail sits directly under it and
     stays sticky too, so the two form one bar rather than overlapping. */
  /* top: var(--head-top), NOT 0. This block is injected last, so a hard-coded
     top:0 here beat the base rule at equal specificity and the header pinned
     under the black review bar at mobile widths while desktop was correct.
     The bar wraps to three rows at 390px, which is exactly why its height is
     measured rather than assumed. */
  .site-head  { padding: var(--sp-3) var(--sp-5); gap: var(--sp-4);
                position: sticky; top: var(--head-top); z-index: 500;
                background: #fff;
                border-bottom: 1px solid var(--color-border); }
  /* Fallback only. syncHeadH() measures the real header and overwrites
     --head-h on :root, so this matters for the first paint alone. It used to
     be a hard-coded top:61px here and top:44px on desktop, neither of which
     tracked the header. */
  :root        { --head-h: 61px; }
  .site-foot  { padding: var(--sp-6) var(--sp-5); }
  .hubhero    { padding: var(--sp-5) var(--sp-5) var(--sp-6); gap: var(--sp-5); }

  /* ── TYPE THE TOKENS DO NOT REACH ─────────────────────────────────────
     Only rules whose desktop value is hard-coded rather than tokenised, and
     each matches the specificity of the rule it replaces. */
  h1, h1.d, h1.p, .hubhero h1, .hubhero.solo h1
              { font-size: var(--font-display); line-height: var(--lh-tight);
                letter-spacing: -.3px; max-width: none; }
  h2.s, .artbody h2.s, .prose h2, .cmpq-h
              { font-size: var(--font-secondary-heading); line-height: 1.26; }
  h3.t, h3.q, .artbody h3, .prose h3
              { font-size: var(--font-subheading); line-height: 1.3; }
  .lead, .answer, .hubhero .answer, .hubhero.solo .answer
              { font-size: var(--font-lead); line-height: var(--lh-lead); max-width: none; }
  .prose p, .artbody p, .artbody li, .body, .sec > p, .postsum p
              { font-size: var(--font-base); line-height: 1.62; }
  .kicker     { margin-bottom: var(--sp-2); }

  /* ── TOUCH ────────────────────────────────────────────────────────────
     WCAG 2.5.5 wants 44px. Inline links in prose are exempt. */
  .btn, .chip, .sbtn, .vbtn, .sh, .anchornav .btn.quiet
              { min-height: 44px; display: inline-flex; align-items: center;
                justify-content: center; }
  input, textarea, select { font-size: 16px; min-height: 44px; }
  /* iOS zooms in on a focused input under 16px and does not zoom back. */

  /* ── HEADER ───────────────────────────────────────────────────────────
     Identity and one action. Search and the assessment CTA move into the
     sheet, where the CTA is the first and largest thing. */
  .logo small, .head-right .searchbox, .head-right .assessbtn, nav.main
              { display: none; }
  .head-right { margin-left: auto; }
  .btn.burger { display: inline-flex; width: 44px; height: 44px; padding: 0;
                align-items: center; justify-content: center; background: #fff;
                border: 1px solid var(--color-border); border-radius: 1.2rem; }
  .btn.burger .bars   { position: relative; width: 18px; height: 12px; display: block; }
  .btn.burger .bars i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
                background: var(--color-base); transition: transform .22s ease, opacity .15s ease; }
  .btn.burger .bars i:nth-child(1) { top: 0; }
  .btn.burger .bars i:nth-child(2) { top: 5px; }
  .btn.burger .bars i:nth-child(3) { top: 10px; }

  /* ── STACKING ─────────────────────────────────────────────────────────
     flex-direction AND grid-template-columns: some of these are flex and
     some are grid, and each ignores the other's property. .aiflow is flex,
     which is why setting only the grid property left it in three columns. */
  .aiflow, .pillars, .policylist.cols, .gradedefs, .sources,
  .g2, .g3, .g4, .g23, .g13, .gfoot,
  .cmpcards, .idxlist, .typegrid, .libgrid,
  .tgroups, .tgroups-home, .carepair, .rf-row,
  .learnwrap, .toolwrap, .subscribe, .pb-grid, .tpl-list,
  .commit > footer, .keyfacts
              { grid-template-columns: 1fr; flex-direction: column; }
  .learnrail, .toolrail { position: static; }
  .rowflex    { display: grid; gap: var(--sp-2); }
  .rowflex > .btn, .box > .btn { width: 100%; }
  /* The footer is a column flex with align-items:flex-start from the desktop
     sheet, so its .rowflex hugged its content at 155px inside a 348px footer
     and the two policy buttons came out half width while every other stacked
     button on the site is full width. The buttons were already 100% — of the
     wrong parent. (A `.commit > footer > .btn` rule used to sit here and never
     matched anything: the buttons are inside .rowflex, not direct children.) */
  .commit > footer { align-items: stretch; }
  /* .rowflex becomes a grid so the buttons can go full width, but grid items
     stretch by default and .rowflex also carries non-button children. The
     treatment-hub verdict card put a grade badge in one, and it stretched from
     its natural 79px to the full 306px column, reading as a broken bar rather
     than a pill. Anything that is not a button hugs its content instead. */
  .rowflex > *:not(.btn) { justify-self: start; }

  /* ── HUB HERO ─────────────────────────────────────────────────────────
     Answer first, photo after. It had no mobile rule at all, so on all 18
     hubs the headline rendered into a ~160px column. */
  .hubhero    { grid-template-columns: 1fr; }
  .hubhero > div:last-child { order: 2; }
  .hubhero figure.photo img { width: 100%; height: auto; aspect-ratio: 16/10;
                object-fit: cover; border-radius: var(--radius); }
  .hubhero .hubmeta { gap: var(--sp-2) var(--sp-4); }

  /* ── EVIDENCE TABLE → CARDS ───────────────────────────────────────────
     600px of table in a 350px column hid 250px behind a sideways scroll, on
     the most important block on the page. Hierarchy inside each card:
     the name is the heading, the grade sits with it, the sentence explains,
     and the labelled facts are clearly subordinate. */
  .tscroll    { overflow-x: visible; }
  table.cmp   { min-width: 0; display: block; border: 0; }
  table.cmp thead { display: none; }
  table.cmp tbody, table.cmp tr, table.cmp td { display: block; width: 100%; }
  table.cmp tr { border: 1px solid var(--color-border); border-radius: var(--radius);
                padding: var(--sp-4); margin-bottom: var(--sp-3); background: #fff; }
  table.cmp td { border: 0; padding: 0; }
  table.cmp td:first-child { font-size: var(--font-lead); line-height: 1.3;
                font-family: var(--font-serif); }
  table.cmp td:first-child .small { display: block; margin-top: var(--sp-2);
                font-family: var(--font-sans-serif); line-height: 1.55; }
  table.cmp td:nth-child(2) { margin: var(--sp-3) 0; }
  /* labelled facts sit in a tinted block so they read as one group, not as
     three more paragraphs competing with the sentence above */
  /* Label ABOVE the value, not beside it. The 9rem/1fr split left the value
     column 214px wide, and these cells carry prose, not one-word facts: the
     silicone hub's EFFECT cell ran seven lines at roughly 28 characters each.
     Stacked, the same text gets the full 316px and reads in three. This also
     matches .keyfacts below, which was stacked for the same reason, so the two
     labelled-fact patterns on the site now behave the same way. */
  table.cmp td[data-label]:not(:nth-child(2)):not(:empty) {
                display: block; padding: var(--sp-3) 0;
                border-top: 1px solid var(--color-border);
                font-size: var(--font-small); }
  table.cmp td[data-label]:not(:nth-child(2))::before {
                content: attr(data-label); display: block;
                margin-bottom: var(--sp-1); font-size: var(--font-tiny);
                font-weight: var(--bold); letter-spacing: .06em;
                text-transform: uppercase; color: var(--color-secondary); }
  /* The link row has no label, so it must not sit in the label grid. The
     selector has to carry the same weight as the rule above it: a bare
     table.cmp td[data-label=""] is (0,2,2) and loses to (0,4,1), which left
     the link indented into the value column. */
  table.cmp td[data-label=""]:not(:nth-child(2)):not(:empty) {
                display: block; padding-top: var(--sp-3); }
  table.cmp td[data-label=""]::before { content: none; display: none; }
  table.cmp td:empty { display: none; }

  /* ── KEY FACTS ────────────────────────────────────────────────────────
     Was two columns at ~90px, one word per line. Label above value, with a
     rule between pairs so four facts read as four, not as one block. */
  /* The desktop container has a tinted border and overflow:hidden. With the
     row hairlines added below, the two frames doubled up and the last row's
     rule landed on the container edge. Hairlines alone read cleaner. */
  .keyfacts   { gap: 0; border: 0; overflow: visible; background: none; padding: 0; }
  .keyfacts > div { display: block; padding: var(--sp-3) 0;
                border-bottom: 1px solid var(--color-border); }
  .keyfacts > div:first-child { padding-top: 0; }
  .keyfacts > div:last-child  { border-bottom: 0; padding-bottom: 0; }
  .keyfacts dt { font-size: var(--font-tiny); font-weight: var(--bold);
                letter-spacing: .06em; text-transform: uppercase;
                color: var(--color-secondary); margin-bottom: var(--sp-1); }
  .keyfacts dd { margin: 0; font-size: var(--font-base); line-height: 1.5;
                color: var(--color-base); }

  /* ── IN BRIEF ─────────────────────────────────────────────────────────
     Was running above body size for a paragraph of six lines or more. */
  .keyanswer p, .keyanswer .body, .kans p
              { font-size: var(--font-base); line-height: 1.62; }

  /* ── STEPPER, COMMITMENTS, PILLARS ────────────────────────────────── */
  /* Same fault: no horizontal padding inside a card, so the step text ran
     to the edges of its own white panel. */
  .aiflow .step { padding: var(--sp-4); border-left: 0;
                border-bottom: 1px solid var(--accent-line); }
  /* Drop the hairline on the last step, but KEEP its padding. .aiflow carries
     the border and radius and has no padding of its own, so each step's
     padding is the card's inner padding: zeroing it here left the last step's
     text flush against the card's bottom edge while every other step had 16px
     under it. The same mistake as the earlier `padding: 16px 0` cards, in the
     other axis. */
  .aiflow .step:last-child { border-bottom: 0; }
  .aiflow .step h4 { font-size: var(--font-subheading); margin: var(--sp-1) 0 var(--sp-2);
                text-transform: none; letter-spacing: 0; font-family: var(--font-serif); }
  /* padding was 16px 0, so inside a bordered card the text touched both
     edges and read as clipped. Horizontal padding to match the card. */
  /* Stacking every child to one column gave the number a row and the icon
     another, so two of the four rows in each commitment carried no words: the
     eye travelled 01, icon, title before reaching anything to read. Number and
     icon pair on one line as a compact meta row, and the text takes the full
     width beneath them. */
  .commit li  { grid-template-columns: auto auto 1fr;
                gap: var(--sp-2) var(--sp-3); padding: var(--sp-4);
                align-items: center; }
  .commit li .num { grid-column: 1; grid-row: 1; }
  .commit li .ic  { grid-column: 2; grid-row: 1; }
  .commit li .txt { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .commit li .act { grid-column: 1 / -1; grid-row: 3;
                justify-self: start; margin-top: var(--sp-2); }
  .commit li .num { display: inline-flex; align-items: center; justify-content: center;
                width: 26px; height: 26px; border-radius: 99px;
                background: var(--accent-surface); color: var(--accent-pressed); }
  /* ── ROW SEPARATORS THAT BECOME COLUMN SEPARATORS ────────────────────
     The desktop sheet marks divisions between side-by-side items with
     `X + X { padding-left; border-left }`. Correct in a row, wrong the moment
     the mobile layer stacks them: the first item keeps no left padding and no
     rule while every following one gains both, so item 1 sits 21px to the left
     of items 2, 3 and 4 and a vertical rule runs down beside them.

     Note the specificity. `.aiflow .step + .step` is (0,3,0) and beats the
     `border-left: 0` already set on `.aiflow .step` at (0,2,0), so that one
     needs the sibling selector to be answered with the sibling selector.

     Audited rather than fixed one at a time: exactly three rules in the base
     sheet use this idiom, and all three were live. FR reported the .pillar one
     three times before I looked for the pattern. */
  .pillar + .pillar { padding-left: 0; border-left: 0;
                padding-top: var(--sp-4);
                border-top: 1px solid var(--color-border); }
  .aiflow .step + .step         { border-left: 0; }
  .mega.mega-evid .pane + .pane { border-left: 0; }

  .pillar     { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
                align-items: center; }
  .pillar .ico { width: 34px; height: 34px; }
  .pillar h3  { margin: 0; }
  .pillar p   { grid-column: 1 / -1; margin: var(--sp-1) 0 0; }

  /* ── HERO SEARCH ──────────────────────────────────────────────────────
     The hero search is a mocked <span>, not an <input>, so its placeholder
     text wrapped to two lines at 390px and the field grew to match. A real
     input never does that: it clips the placeholder on one line. Clip it here
     so the mock behaves like the control it stands for, rather than editing
     the example queries to fit.
     There is no .hero wrapper: the field sits in .g23. The header's own
     .searchbox is already display:none under 700px, so a plain selector
     matches only the hero one.

     min-width:0 on the grid children is REQUIRED, not decorative. Grid and
     flex items default to min-width:auto, which resolves to min-content, and
     the min-content width of a nowrap span is the whole string. Without it the
     column grows to fit the text instead of clipping it and drags the entire
     page wider than the viewport. Same trap as flex-basis changing axis: the
     property is fine, the formatting context is what bites. */
  .g23 > *, .g13 > * { min-width: 0; }
  .searchbox  { white-space: nowrap; overflow: hidden;
                text-overflow: ellipsis; display: block; max-width: 100%; }

  /* ── CITATION BAND ────────────────────────────────────────────────────
     The claim is "every claim is cited to sources like these", so the names
     have to be visible. The desktop marquee is a 3368px animated track that
     cannot work here; the same names wrap as a static list instead. Hiding
     them left the page promising evidence it did not show. */
  .band       { grid-template-columns: 1fr; gap: var(--sp-3); }
  .bandtrack  { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  /* Wrapped as flex items the names landed ragged: one on some rows, three on
     others, with nothing tying them together, so the block read as broken
     rather than deliberate. Set as running text with middot separators it
     reads as one source line and wraps the way a sentence does.

     Three things all have to be true for that to work, and each one was a
     separate failed attempt:

     1. The names are joined with no whitespace between them, so the separator
        must supply its own spaces or the line has no break opportunity at all.
     2. `.sname` is white-space:nowrap, which is correct (a name should never
        break mid-phrase) but the separator renders INSIDE that box and
        inherited it, gluing the row into one unbreakable 1300px run. The
        pseudo needs its own white-space:normal.
     3. The separator sits on ::after so a wrap never starts a line with a
        middot. The duplicate marquee row is child 13 and display:none, which
        makes the last visible name :nth-last-child(2): suppress its separator
        there so the list does not end in a dangling middot. */
  .bandtrack, .bandrun { white-space: normal; }
  .bandrun    { animation: none; width: auto; display: block; line-height: 1.9; }
  .bandrun > span[aria-hidden] { display: none; }
  .bandrun .sname { font-size: var(--font-tiny); display: inline; }
  /* Comma, not middot. At 390px most names take a line to themselves, so the
     separator lands at the end of the line: a trailing middot reads as a
     stray bullet, a trailing comma is invisible because that is what running
     prose does. */
  .bandrun .sname::after { content: ", "; color: var(--color-secondary);
                white-space: normal; }
  .bandrun .sname:nth-last-child(2)::after { content: none; }
  .bandrun .sname:nth-last-child(2)::after { content: none; }

  /* ── ARTICLE CONTENTS ─────────────────────────────────────────────────
     Eight entries put 440px between the headline and the first paragraph. */
  details.toc { position: static; border: 1px solid var(--color-border);
                border-left: 1px solid var(--color-border); border-radius: 1.2rem;
                padding: 0; margin-bottom: var(--sp-5); background: #fff; }
  details.toc > summary { list-style: none; cursor: pointer; display: flex;
                align-items: center; justify-content: space-between; min-height: 48px;
                padding: 0 var(--sp-4); font-size: var(--font-tiny);
                font-weight: var(--bold); letter-spacing: .08em;
                text-transform: uppercase; color: var(--color-secondary); }
  details.toc > summary::-webkit-details-marker { display: none; }
  details.toc > summary::after { content: ''; width: 9px; height: 9px; flex: none;
                border-right: 2px solid var(--color-control);
                border-bottom: 2px solid var(--color-control);
                transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
  details.toc[open] > summary { border-bottom: 1px solid var(--color-border); }
  details.toc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  details.toc .toclinks { padding: var(--sp-1) var(--sp-4) var(--sp-3); }
  details.toc a { display: flex; align-items: center; min-height: 44px;
                font-size: var(--font-small); padding: 0; }

  /* ── VIEW SWITCH ──────────────────────────────────────────────────────
     Two equal columns forced "Browse by scar type" onto two lines inside a
     pill. Let each option size to its label and sit on the scale.

     It must be allowed to WRAP, though. Both labels are white-space:nowrap,
     so the control's min-content width is both pills side by side: 331px.
     That fits the 342px available at 390, but at 320 the content box is
     272px, and because the page head is a grid the oversized min-content
     widened the whole column, dragging the kicker and h1 out with it. This
     was the only overflow left anywhere at 320. Wrapping keeps the labels on
     one line where there is room and stacks them full width where there is
     not, instead of pushing the page sideways. */
  .viewswitch { display: inline-flex; width: auto; max-width: 100%;
                flex-wrap: wrap; border-radius: 99px;
                padding: .4rem; gap: .4rem; }
  .vbtn       { border-radius: 99px; padding: 0 var(--sp-4); white-space: nowrap;
                min-height: 40px; flex: 1 1 auto; }
  /* Grid items default to min-width:auto (= min-content), which is how the
     switch was able to widen its column in the first place. */
  .hubhero > *, .pagehead > * { min-width: 0; }

  /* ── SHARE ROW ────────────────────────────────────────────────────────
     Five labelled buttons wrapped to three rows. Icons only, one row. */
  .share      { gap: var(--sp-3); }
  .share-btns { gap: var(--sp-2); }
  .sh         { width: 44px; padding: 0; }
  .sh span    { position: absolute; width: 1px; height: 1px; overflow: hidden;
                clip: rect(0 0 0 0); white-space: nowrap; }
  .sh svg     { width: 17px; height: 17px; }

  /* ── THE LIBRARY ──────────────────────────────────────────────────────
     27 tag chips over twelve rows plus four sort chips over two put ~600px
     of controls before the first article. A phone already has a good control
     for "one of 27": its own picker. */
  .libbar     { display: grid; gap: var(--sp-3); }
  .libsort, .chips { display: none; }
  .libpickers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .libpickers .pick { display: grid; gap: var(--sp-1); min-width: 0; }
  .libpickers label { font-size: var(--font-tiny); font-weight: var(--bold);
                letter-spacing: .06em; text-transform: uppercase;
                color: var(--color-secondary); }
  .libpickers select { -webkit-appearance: none; appearance: none; width: 100%;
                background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8C8C' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--sp-3) center/16px;
                border: 1px solid var(--color-border); border-radius: 1.2rem;
                padding: 0 var(--sp-7) 0 var(--sp-3); color: var(--color-base);
                font-weight: var(--semi-bold); text-overflow: ellipsis; }
  .libmore    { width: 100%; margin-top: var(--sp-4); }
  .libsearch  { width: 100%; }

  /* ── PROSE TABLES ─────────────────────────────────────────────────────
     Author-written, any shape. Scroll rather than crush. */
  .artbody table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .artbody table th, .artbody table td { min-width: 9rem; }

  /* ── GRADE DEFINITIONS ────────────────────────────────────────────────
     Each card carried the tier twice: once in the coloured badge and again
     as an uppercase heading directly beneath it. The badge is the stronger
     signal and it is the component used everywhere else, so the heading
     goes and the definition sits with it. */
  .gradedefs .box h3.t { position: absolute; width: 1px; height: 1px;
                overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gradedefs .box { gap: var(--sp-2); }
  .gradedefs .box .grade { margin-bottom: var(--sp-1); }

  /* ── FORMS ────────────────────────────────────────────────────────────
     Every field spans the column, so a 140px submit floating at the left
     reads as unfinished. The primary action matches the fields it submits.
     Field labels stay uppercase and small: they ARE labels, not headings,
     which is the distinction the heading rule below relies on. */
  .reportform .btn.solid, .subform .btn, form .btn[type="submit"]
              { width: 100%; }
  .reportform label, .rf-row { display: block; }
  .reportform input, .reportform textarea { width: 100%; }

  /* ── QUESTION HEADINGS ────────────────────────────────────────────────
     Sentence case in the serif for headings whose text is a SENTENCE. A
     question like "Which scar cream ingredients have evidence?" set in
     uppercase with .07em tracking wraps to three lines in a 390px column,
     and caps remove the word-shape cues readers use on long strings.

     Card and tile headings are deliberately NOT in this list. The desktop
     design sets them as an uppercase sans label at --font-tiny on purpose:
     the hierarchy comes from the caps, the tracking and the weight rather
     than from size, which is what keeps a short title from competing with
     the body copy beneath it. Enlarging it into a serif heading made it read
     as too small next to the copy, and sizing it up made it too heavy. FR,
     19 Aug 2026. Mobile now inherits the desktop split, including desktop's
     own exemption for article listings (.card.art h3, .libcard .n, .lart .n),
     which keep the serif because a headline there is content, not a label.

     Nothing is overridden here any more. The rule that used to sit here also
     listed `.faq h3, .qa h3` for question headings, but `.qa` does not exist
     in the markup and no rendered route produces a `.faq h3`: the question
     headings on Corrections come through the base sheet and are already serif
     sentence case. A rule matching nothing is worse than no rule, because it
     reads as if it were doing something. */

  /* ── CARDS AND CALLOUTS ───────────────────────────────────────────── */
  .box        { padding: var(--sp-4); }
  .reportbar  { flex-direction: column; align-items: flex-start; gap: var(--sp-3);
                padding: var(--sp-4); }
  /* flex-basis follows flex-direction. The desktop rule is
     `.reportbar div { flex: 1 1 340px }`, which sizes the WIDTH in a row and
     the HEIGHT once we switch to a column: the text block was being forced
     340px tall, leaving ~240px of dead space above the button. Same family of
     bug as `grid-template-columns` on a flex container. Reset the basis
     whenever a row-oriented flex child is restacked. */
  .reportbar div  { flex: 0 1 auto; }
  .reportbar .btn { width: 100%; }
  .triage     { padding: var(--sp-4); }
  /* Horizontal padding, not `var(--sp-4) 0`. The row carries a tinted
     background and a 2px accent rule on hover/tap, and with no side padding
     the text sat 2px from that rule and flush against the right edge: the
     highlight read as a broken full-bleed band. Padding on all four sides is
     also what the desktop row now uses, so the two match. */
  .cmprow     { grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-4); }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE MENU SHEET
   Not inside the media query: the sheet only ever renders when the burger is
   visible, and keeping the component whole makes it easier to reason about.
   ══════════════════════════════════════════════════════════════════════════ */

body.navopen .btn.burger .bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.navopen .btn.burger .bars i:nth-child(2) { opacity: 0; }
body.navopen .btn.burger .bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.navscrim          { position: fixed; inset: 0; z-index: 1000; background: rgba(16,22,30,.5);
                     opacity: 0; transition: opacity .24s ease; }
body.navopen .navscrim { opacity: 1; }

/* Full screen, not a 90vw drawer. The strip of page left showing down the side
   served no purpose: the scrim behind it is fully covered anyway, and it made
   the sheet read as a panel over the page rather than as its own view.
   No shadow either, for the same reason: nothing is behind it to lift off. */
.mobilenav         { position: fixed; inset: 0; z-index: 1001;
                     width: 100%; background: #fff; display: flex;
                     flex-direction: column;
                     transform: translateX(100%);
                     transition: transform .28s cubic-bezier(.32,.72,0,1); }
body.navopen .mobilenav { transform: translateX(0); }

.mn-head           { display: flex; align-items: center; justify-content: space-between;
                     padding: 1.2rem 1.2rem 1.2rem 2rem; flex: none;
                     border-bottom: 1px solid var(--color-border); }
/* The wordmark is one thing in three places: desktop header, mobile header
   and the menu sheet. It was Newsreader here and Public Sans in the header,
   so the sheet read as a different brand. Values copied from .logo b. */
.mn-logo           { font-family: var(--font-sans-serif); font-size: 2rem;
                     font-weight: var(--bold); letter-spacing: -.4px; line-height: 1.1;
                     color: var(--color-base); text-decoration: none; }
.mn-close          { width: 44px; height: 44px; display: inline-flex; align-items: center;
                     justify-content: center; background: none; border: 0; cursor: pointer;
                     color: var(--color-secondary); border-radius: 12px; }
.mn-close svg      { width: 21px; height: 21px; }
.mn-close:hover    { background: var(--accent-surface); color: var(--accent); }

.mn-body           { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
                     padding: 2rem 2rem calc(3.2rem + env(safe-area-inset-bottom, 0px)); }

/* The assessment CTA. Explicit sizes on the svg because icon() writes an
   inline 16px width on its wrapper, which no stylesheet rule can reach. */
/* a.mn-cta, not .mn-cta: a single-class rule loses to the anchor styling in
   the base sheet, which left this as display:block so margin-left:auto on the
   arrow did nothing and the card would not fill its column. */
a.mn-cta           { display: flex; align-items: center; gap: 1.4rem;
                     background: var(--accent); border-radius: 14px; padding: 1.6rem 1.8rem;
                     text-decoration: none; margin-bottom: 2.4rem; }
.mn-cta, .mn-cta * { color: #fff; }
.mn-cta-ic         { display: inline-flex; width: 26px; height: 26px; flex: none; }
.mn-cta-ic svg     { width: 26px; height: 26px; }
.mn-cta-t          { flex: 1; font-size: 1.7rem; font-weight: var(--semi-bold); line-height: 1.3; }
.mn-cta-go         { margin-left: auto; display: inline-flex; width: 20px; height: 20px; flex: none; }
.mn-cta-go svg     { width: 20px; height: 20px; }

.mn-grp            { border-top: 1px solid var(--color-border); }
/* Navigation is Public Sans everywhere: desktop top level, mega-menu headings
   and links all use it. The sheet's group headings were the only serif in the
   nav system. Size is a step up from the desktop 15px because these are
   section headers in a sheet, not items in a bar. */
.mn-grp > summary  { list-style: none; cursor: pointer; display: flex; align-items: center;
                     justify-content: space-between; min-height: 56px; font-size: 1.7rem;
                     font-family: var(--font-sans-serif); font-weight: var(--semi-bold);
                     letter-spacing: -.1px; color: var(--color-base); }
.mn-grp > summary::-webkit-details-marker { display: none; }
.mn-grp > summary i { width: 9px; height: 9px; flex: none;
                     border-right: 2px solid var(--color-control);
                     border-bottom: 2px solid var(--color-control);
                     transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.mn-grp[open] > summary i { transform: rotate(-135deg) translateY(-2px); }
/* Same shape as the desktop mega-menu link. These were built as a different
   pattern entirely: a left rail (border-left: 2px) with a square tint and no
   arrow, so the same navigation looked like two different systems depending on
   the device. `.mega a` is the reference: rounded, tinted on interaction,
   accent text, and a → that fades in. Copied here, with :active carrying the
   state because a touch screen has no hover.
   The negative margin lets the tint bleed to the sheet's padding edge rather
   than stopping short, which is what makes the desktop version read as a full
   row rather than an inset chip. */
.mn-links          { display: flex; flex-direction: column; padding-bottom: 1.2rem; }
.mn-links a        { position: relative; display: flex; align-items: center;
                     justify-content: space-between; gap: var(--sp-3);
                     min-height: 46px; font-size: 1.6rem;
                     font-weight: var(--medium); color: var(--color-base);
                     text-decoration: none;
                     padding: 0 var(--sp-3); margin: 0 calc(-1 * var(--sp-3));
                     border-radius: var(--radius-sm); border-bottom: 0;
                     transition: background .12s ease, color .12s ease; }
.mn-links a::after { content: "→"; font-size: var(--font-tiny); color: var(--accent);
                     opacity: 0; transform: translateX(-4px);
                     transition: opacity .12s ease, transform .12s ease; }
.mn-links a:active { background: var(--accent-surface); color: var(--accent); }
.mn-links a:active::after { opacity: 1; transform: translateX(0); }
.mn-links a.all    { color: var(--accent); font-weight: var(--semi-bold);
                     margin-top: .4rem; }
.mn-links a.all::after { content: none; }

/* Newsletter, at the foot of the sheet under the last group. Ghost's members
   script binds to data-members-form / data-members-email, so this is native
   and needs no JS of ours. Input font is 16px on purpose: iOS zooms the page
   for anything smaller and does not zoom back out. */
.mn-subform        { border-top: 1px solid var(--color-border);
                     margin-top: .8rem; padding-top: 2rem;
                     display: flex; flex-direction: column; gap: .8rem; }
.mn-subform b      { font-size: 1.6rem; font-weight: var(--semi-bold);
                     color: var(--color-base); }
.mn-subform p      { margin: 0; font-size: 1.4rem; line-height: 1.5;
                     color: var(--color-secondary); }
.mn-subform input  { width: 100%; min-height: 46px; font: inherit; font-size: 1.6rem;
                     padding: 0 1.4rem; border: 1px solid var(--color-border);
                     border-radius: var(--radius-sm); background: #fff;
                     color: var(--color-base); }
.mn-subform input:focus { outline: 0; border-color: var(--accent);
                     box-shadow: 0 0 0 3px var(--accent-surface); }
.mn-subform .btn   { width: 100%; }
.mn-subform .sunote { font-size: 1.3rem; color: var(--color-secondary); margin: 0; }
.mn-sub            { font-size: 1.2rem; font-weight: var(--bold); letter-spacing: .08em;
                     text-transform: uppercase; color: var(--color-secondary);
                     margin: 1.6rem 0 .4rem; }

@media (prefers-reduced-motion: reduce) {
  .mobilenav, .navscrim, .btn.burger .bars i,
  .mn-grp > summary i, details.toc > summary::after { transition: none; }
}
/* ══════ END MOBILE LAYER ══════ */

/* ══════ HARD CORNERS ══════════════════════════════════════════════════
   --radius and --radius-sm are 0, which squares everything that follows the
   tokens. These rules write a literal radius and cannot follow a token, so
   they are squared explicitly. border-radius:50% is left alone: that is a
   circle mask on avatars, not a rounded corner. Generated from this sheet,
   not typed. */
.grade,
.viewswitch,
.vbtn,
.vframe,
.cmpcard header .photo,
.artbody blockquote,
.sbtn,
.chip,
.libcard .tg,
.tagrow .tg,
.pill,
.reportbar,
.progress,
.progress i,
.pending .tagp,
.postmeta .reviewed,
.sh,
.btn.burger,
.btn.burger .bars i,
.commit li .num,
details.toc,
.libpickers select,
.mn-close,
a.mn-cta{border-radius:0}

/* ══════════════════════════════════════════════════════════════════════════
   GHOST INTEGRATION LAYER
   Added 21 Aug 2026, after the theme went live and rendered wrong.

   Everything above this line was authored against the click dummy's markup and
   ported wholesale. Two things do not survive that port, and neither was
   visible in any check I ran, because every check inspected the FILES rather
   than a rendered page:

   1. THERE IS NO PAGE CONTAINER. In the click dummy every page sat inside
      #stage, a white card with a max-width on a grey body. The port carried
      `body{background:#f2f3f5}` but not the card, so on Ghost the content sat
      directly on the grey at full browser width with no side padding. The
      layout was not broken, it was absent.

   2. {{navigation}} EMITS GHOST'S MARKUP, NOT OURS. Ghost outputs
      <ul class="nav"><li class="nav-topics"><a>. The ported nav CSS targets
      .navitem > a.top, which is the click dummy's markup and which Ghost never
      produces. With nothing matching, the menu fell back to a browser-default
      bulleted list.

   The lesson worth keeping: porting a stylesheet to a CMS is not a copy. Any
   markup the CMS generates itself has to be styled on the CMS's terms.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. The page container ─────────────────────────────────────────────────── */
.site-head{
  max-width:var(--width-wide);
  margin:0 auto;
  border-bottom:1px solid var(--color-border);
}
.site-main{
  max-width:var(--width-wide);
  margin:0 auto var(--sp-8);
  background:#fff;
  padding:0 var(--sp-6) var(--sp-6);
}
.site-foot{
  max-width:var(--width-wide);
  margin:0 auto var(--sp-6);
  background:var(--color-surface);
  padding:var(--sp-6);
}
/* .sec only carries padding-top in the ported sheet; the horizontal padding
   came from #stage, which no longer exists. It lives on .site-main now. */

@media (max-width:820px){
  .site-main{padding:0 var(--sp-4) var(--sp-5)}
  .site-foot{padding:var(--sp-5) var(--sp-4)}
}

/* ── 2. Ghost's navigation markup ──────────────────────────────────────────── */
nav.main .nav{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
}
nav.main .nav li{margin:0}
nav.main .nav a{
  font-size:var(--font-small); font-weight:var(--semi-bold);
  color:var(--color-base); text-decoration:none;
  padding:var(--sp-3) 0; display:inline-block;
  border-bottom:2px solid transparent;
}
nav.main .nav a:hover{color:var(--accent)}
/* Ghost adds .nav-current to the <li> of the page you are on. */
nav.main .nav li.nav-current a{color:var(--accent);border-bottom-color:var(--accent)}

/* The mobile sheet reads the same navigation, so it needs the same treatment. */
.mn-links .nav{list-style:none;margin:0;padding:0;display:block}
.mn-links .nav a{display:block}

/* ── 3. Icons inside buttons ───────────────────────────────────────────────
   The icon partials carry class="ico" on the <svg>, and nothing sized it. An
   unsized inline SVG in a flex row takes its viewBox aspect and stretches to
   the line box, so the assessment CTA rendered with a 44px glyph and its label
   wrapped onto three lines. Same class of miss as the container: markup that
   only exists in the theme, styled by a sheet written for other markup. */
.btn .ico, .btn svg{width:18px;height:18px;flex:none}
.btn{white-space:nowrap}
.btn.assessbtn{white-space:nowrap}