/* Weave Study Guides web edition, unified with the shared site design system.
   Scoped under .study so the shared site nav/footer keep their own styling.

   BRANDCRAFT v4 (batch 4, Knowledge cluster). This corpus is the densest
   reading surface in the product: a resident revising 22 guides against a
   September exam. It is treated as a QUIET surface throughout (DESIGN-V4
   sec 7), so the paper arrives as ground and stock rather than as decoration.
   Two treatments, chosen by what the page is FOR:

     the 22 guide pages  a white sheet laid on the quiet desk. One surface,
                         nothing competing with the text on it.
     the hub             no sheet. The guide cards ARE the paper, laid out
                         on the desk, because the hub is a browsing and
                         filtering surface, not a reading one.

   Zero rotation anywhere in this file. The cards reorder live under the JS
   filter and sort, so a wonky per-card angle would visibly jump on every
   keystroke; the running text is exam material and rotation never touches it.
   Shadows are the offset-solid ink tint (DESIGN-V4 sec 6), never blur glows. */

/* The desk. Quiet-pale ground under everything, including the crisis block and
   footer that sit outside main. Route-scoped in practice: this stylesheet is
   linked only from the 23 study pages. */
html, body{ background:var(--paper-quiet); }

:root{
  --st-field:var(--thread-sage); --st-field-dk:var(--thread-sage);
  --st-coral:var(--thread-teal); --st-coral-dk:var(--thread-teal);
  --st-ink:var(--ink); --st-soft:var(--ink-2); --st-grey:var(--ink-3);
  --st-rule:var(--hairline); --st-tint:color-mix(in srgb, var(--thread-sage) 6%, var(--cloth));
  --st-petrol:var(--thread-teal);
}
.study{
  --disp:var(--font-display);
  --serif:var(--font-ui);
  max-width:760px; margin:0 auto; padding:42px 22px 90px;
  font-family:var(--serif); color:var(--st-ink); font-size:1.06rem; line-height:1.62;
  overflow-x:clip; /* safety net: no single element can scroll the whole page */
}
/* Wrap long, unbreakable medical terms everywhere text lives. */
.study :where(p,li,dt,dd,td,th,blockquote,figcaption,.lr-term,.device,.qa-q,.qa-a,
  .gc-name,.c-title,.g-title,.ma-chip,h3.sec,h4.sub,h5.subsub){
  overflow-wrap:break-word; word-break:normal;
}
.study :where(p,li,dd){ hyphens:manual; }
.study :where(img,svg,video){ max-width:100%; height:auto; }
/* A <strong> inside a matrix table header used to force ink onto the petrol
   header fill: 2.81:1 light, 1.60:1 dark. Pre-existing at HEAD (both rules
   ship there); the header's own colour wins now. */
.study strong{ color:var(--st-ink); }
.study table.mx th strong{ color:inherit; }
.study em{ font-style:italic; }
.study a{ color:var(--st-coral-dk); }

/* The sheet. Only the guide pages get it: they are read, not scanned. */
.study-guide{
  background:var(--cloth-card);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-lift);
  margin-bottom:var(--space-12);
}

/* Hub */
.study-hub{ max-width:980px; }
.hub-hero{ border-bottom:2px solid var(--marker); padding-bottom:26px; margin-bottom:26px; }
.hub-eyebrow{ font-family:var(--disp); font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--st-coral); font-size:.82rem; }
.hub-eyebrow::before, .g-eyebrow::before, .c-eyebrow::before{ content:""; display:inline-block;
  width:1.35em; height:1.35em; margin-right:.5em; vertical-align:-.3em;
  background:url("/img/sprig.svg") no-repeat center / contain; }
/* Room for the scribble, which is absolutely positioned and adds no height. */
.hub-title{ font-family:var(--disp); font-weight:700; font-size:3.1rem; line-height:1.02;
  color:var(--st-ink); margin:.3rem 0 .5rem; padding-bottom:.4em; }
.hub-title .c{ color:var(--st-coral); }
.hub-dek{ font-size:1.16rem; color:var(--st-soft); max-width:64ch; }
.hub-downloads{ margin-top:20px; display:grid; grid-template-columns:repeat(5,1fr); gap:11px; }
.dl-label{ font-family:var(--disp); font-weight:600; color:var(--st-soft); font-size:.9rem;
  grid-column:1/-1; margin-bottom:2px; }
/* Full-width download boxes, in the sitewide hand-button voice: ink border,
   uneven radius, marker face, offset-solid shadow that shortens on hover so
   the button settles onto the page instead of floating off it. Replaces a
   teal gradient carrying two blur-glow shadows (DESIGN-V4 sec 6). */
.hub-downloads .dl-btn{ display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--cloth-card); color:var(--ink); font-family:var(--font-hand);
  font-weight:700; letter-spacing:.3px; text-decoration:none; padding:15px 14px;
  border-radius:var(--wonky-1); font-size:1.0625rem; border:2.5px solid var(--ink);
  box-shadow:var(--shadow-lift);
  transition:transform .15s ease, box-shadow .25s ease, border-radius .22s var(--ease-weave), background .2s ease; }
.hub-downloads .dl-btn:hover{ background:var(--fill-cool);
  transform:translateY(-2px); border-radius:var(--wonky-2);
  box-shadow:var(--shadow-soft); }
/* Five equal columns are a desktop shape and the two-up rule started at 640, so
   the whole 641-767 band kept five tracks. Measured at 700px: the hub is 656px
   inside its padding, which is 122px per button once the four 11px gaps are
   taken out, and "Supplement" needs more than that on its own. Two-up now
   starts at 767; the 640 block further down then tightens padding and type for
   phones, and is left alone. */
@media (max-width:767px){
  .hub-downloads{ grid-template-columns:repeat(2,1fr); }
}

.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:14px; }
/* Guide cards match the Library tiles */
/* The cards ARE the paper on the hub: white stock on the quiet ground, already
   on the offset-solid token at rest. Zero rotation by law, see the file header. */
.g-card{ display:flex; flex-direction:column; gap:3px; text-decoration:none;
  border:1px solid var(--hairline-firm); border-radius:var(--radius-card); padding:16px 18px;
  background:var(--cloth-card); box-shadow:var(--shadow-soft);
  transition:border-color .2s ease, transform .18s ease, box-shadow .25s ease; }
.g-card:hover{ border-color:var(--st-field); transform:translateY(-3px);
  box-shadow:var(--shadow-lift); }
/* filter fix: .g-card sets display:flex, which beats the UA [hidden]{display:none};
   without this rule, filtered-out cards never hide and matched cards (appendChild'd
   to the grid end) appear to sort to the bottom. This repairs paper/high-yield/name filters. */
.study .g-card[hidden]{ display:none; }
.gc-num{ font-family:var(--disp); font-weight:700; color:var(--st-coral); font-size:.92rem; }
.gc-name{ font-family:var(--disp); font-weight:700; color:var(--st-ink); font-size:1.06rem; line-height:1.2; }
.gc-meta{ color:var(--st-grey); font-size:.82rem; }
.gc-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
/* Floor pass: .66rem was 10.6px and .64rem was 10.2px, both under the 12px
   absolute micro floor (INVARIANTS, typography). Raised, not recoloured. */
.gc-paper{ font-family:var(--disp); font-size:.75rem; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--st-grey); }
.gc-foot{ display:flex; align-items:center; justify-content:space-between; gap:6px 8px; margin-top:6px; flex-wrap:wrap; }
.gc-meta{ white-space:nowrap; }
/* Yield badge as a small stamp: bordered chip, uneven radius, tabular
   numerals. Zero rotation, see the file header (these ride reordering cards). */
.gc-badge{ font-family:var(--disp); font-weight:700; font-size:.75rem; letter-spacing:.6px;
  text-transform:uppercase; padding:2px 9px 1px; border-radius:4px 9px 5px 10px;
  white-space:nowrap; border:1.5px solid currentColor;
  font-variant-numeric:tabular-nums lining-nums; }
.gc-high{ background:transparent; color:var(--st-field); }
.gc-moderate{ background:transparent; color:var(--st-petrol); }

/* Hub browse controls */
.hub-controls{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; min-height:44px;
  justify-content:space-between; margin:4px 0 10px; }
.paper-chips{ display:flex; flex-wrap:wrap; gap:7px; }
/* Filter chips become stamps: 2px ink border, uppercase, tracked, uneven
   radius, tabular numerals for the Roman paper numbers.
   ONE deliberate departure from DESIGN-V4 sec 6, which gives stamps a tiny
   rotation: these are live controls whose active state swaps under the
   pointer, and a rotated chip flipping fill mid-click reads as a glitch
   rather than as a hand. The stamp voice carries; the wobble does not. */
.paper-chips .chip{ font-family:var(--disp); font-weight:700; font-size:.875rem;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--st-ink); background:var(--cloth-card); border:2px solid var(--ink);
  padding:5px 12px 4px; border-radius:4px 9px 5px 10px; cursor:pointer;
  font-variant-numeric:tabular-nums lining-nums;
  transition:background .12s ease, color .12s ease, border-color .12s ease; }
.paper-chips .chip:hover{ background:var(--fill-cool); }
.paper-chips .chip.active{ background:var(--ink); color:var(--cloth-card); border-color:var(--ink); }
.hub-controls-r{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.hy-toggle{ font-family:var(--disp); font-size:.875rem; color:var(--ink-2);
  display:flex; align-items:center; gap:5px; cursor:pointer; }
.hy-toggle input{ accent-color:var(--st-field); }
#sort-by,#filter-text{ font-family:var(--disp); font-size:.875rem; color:var(--st-ink);
  border:1px solid var(--hairline-firm); border-radius:var(--radius-sm); padding:6px 10px;
  background:var(--cloth-card); }
#sort-by:focus-visible,#filter-text:focus-visible{ outline:2px solid var(--st-field); outline-offset:2px; }
#filter-text{ min-width:150px; }
.hub-count{ font-family:var(--disp); font-size:.8125rem; color:var(--ink-2); margin:0 0 14px; }
.hub-empty{ font-size:1rem; color:var(--st-soft); padding:28px 0; text-align:center; }

/* Most-asked callout on guide pages */
.most-asked{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:13px 0 2px; }
.ma-label{ font-family:var(--disp); font-weight:700; font-size:.875rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--st-petrol); }
.ma-chip{ font-size:.875rem; color:var(--st-ink); background:var(--st-tint);
  border:1px solid var(--hairline-firm); padding:3px 10px; border-radius:4px 9px 5px 10px; }

/* Guide page */
.study-guide{ font-size:1.08rem; }
.back-hub{ display:inline-block; font-family:var(--disp); font-weight:600; font-size:.9rem;
  color:var(--st-coral-dk); text-decoration:none; margin:0 0 18px; }
.g-eyebrow{ font-family:var(--disp); font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--st-coral); font-size:.82rem; }
.g-title{ font-family:var(--disp); font-weight:700; font-size:2.5rem; line-height:1.05;
  color:var(--st-ink); margin:.25rem 0 .4rem; }
.g-dek{ font-style:italic; color:var(--st-coral-dk); font-size:1.1rem;
  border-top:1.5px solid var(--st-rule); padding-top:12px; }
.chap-nav{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 8px; }
.chap-nav a{ font-family:var(--disp); font-size:.875rem; font-weight:600; text-decoration:none;
  color:var(--st-ink); background:var(--st-tint); border:1px solid var(--hairline-firm);
  padding:5px 11px; border-radius:4px 9px 5px 10px; }
.chap-nav a:hover{ border-color:var(--st-field); }
.g-chap{ margin:30px 0; scroll-margin-top:80px; }
.c-eyebrow{ font-family:var(--disp); font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--st-petrol); font-size:.8125rem; }
.c-title{ font-family:var(--disp); font-weight:700; font-size:1.7rem; color:var(--st-ink);
  margin:.2rem 0 .6rem; padding-bottom:8px; border-bottom:2px solid var(--marker); }

/* content headings (mapped from md) */
.study h3.sec{ font-family:var(--disp); font-weight:700; font-size:1.3rem; color:var(--st-ink); margin:1.4rem 0 .4rem; }
.study h4.sub{ font-family:var(--disp); font-weight:700; font-size:1.08rem; color:var(--st-coral-dk); margin:1.1rem 0 .3rem; }
.study h5.subsub{ font-family:var(--disp); font-weight:700; font-size:.92rem; text-transform:uppercase;
  letter-spacing:.5px; color:var(--st-soft); margin:.9rem 0 .3rem; }
.study hr{ border:none; border-top:1px solid var(--st-rule); margin:1.3rem 0; }
.study code{ font-family:var(--font-data); font-size:.86em;
  background:var(--st-tint); padding:1px 5px; border-radius:3px;
  overflow-wrap:anywhere; white-space:break-spaces; }
.dia-arrow{ color:var(--st-coral); font-weight:700; }

/* label-rows */
.study .lrows{ margin:1rem 0 1.2rem; }
.study .lr-head{ font-family:var(--disp); font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--st-petrol); font-size:.875rem; margin-bottom:5px; }
.study .lrow{ padding:9px 0; border-bottom:1px solid var(--st-rule); }
.study .lrow:last-child{ border-bottom:none; }
.study .lr-term{ color:var(--st-coral-dk); font-weight:700; }
.study .lr-term.disp{ font-family:var(--disp); }

/* matrix tables (scrollable on small screens) */
.tw{ overflow-x:auto; margin:1.1rem 0 1.3rem; -webkit-overflow-scrolling:touch; }
.tw-hint{ display:none; } /* Swipe affordance for wide tables, shown only on phones */
.study table.mx{ width:100%; border-collapse:collapse; font-size:.96rem; line-height:1.36; min-width:520px; }
.study table.mx th{ background:var(--st-petrol); color:var(--cloth); text-align:left; font-family:var(--disp);
  font-weight:700; font-size:.875rem; letter-spacing:.4px; text-transform:uppercase; padding:9px 11px;
  vertical-align:top; font-variant-numeric:tabular-nums lining-nums; }
.study table.mx td{ padding:8px 11px; border-bottom:1px solid var(--st-rule); vertical-align:top; }
.study table.mx tbody tr:nth-child(even) td{ background:var(--st-tint); }
.study table.mx td:first-child{ font-weight:600; color:var(--st-coral-dk); }

/* boxes. The old shape was a thick accent stripe down one side, which is both
   a default-UI trope and an accent box under Wilfred's standing design bans,
   and which the v4-landed pages (index, services, medication-faq) already
   carry none of. Pre-existing at HEAD, fixed here.
   What replaces it does the same job better: a full neutral hairline makes the
   callout an object on the sheet rather than a striped band, and the type
   signal moves into the label, which is now a bordered stamp carrying the
   accent colour AND the word. A reader scanning for the clinical box gets
   "CLINICAL" in petrol instead of a petrol edge they have to decode. Zero
   rotation, this sits on running exam material. Label is 14px, up from 12.2px
   which was under the doc's own label floor. */
.study .box{ margin:1.1rem 0; padding:12px 16px 14px; background:var(--st-tint);
  border:1px solid var(--hairline-firm); border-radius:var(--radius-sm); }
.study .box .box-label, .study .vignette .box-label{
  display:inline-block; font-family:var(--disp); font-weight:700; font-size:.875rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--st-coral-dk);
  border:1.5px solid currentColor; border-radius:4px 9px 5px 10px;
  padding:1px 9px 0; margin-bottom:6px; }
.study .box-clinical .box-label{ color:var(--st-petrol); }
.study .box-mnemonic{ background:var(--cloth-card); }
.study .box-mnemonic .box-label{ color:var(--st-field); }
.study .box-mnemonic .device{ font-family:var(--disp); font-weight:700; font-size:1.12rem; margin:4px 0; }
.study .box-diagram{ background:var(--cloth-card); border:1px solid var(--st-rule); text-align:center; }
.study .qa{ margin:1rem 0; padding:9px 0; border-bottom:1px solid var(--st-rule); }
.study .qa-q{ font-weight:700; color:var(--st-coral-dk); }
/* The answer sits in from the question against a neutral margin rule, the
   ruled-notebook idiom. Was a 2px sage accent rail, one-sided; pre-existing
   at HEAD, replaced under the same ban as the box stripes. */
.study .qa-a{ padding-left:14px; border-left:1px solid var(--hairline-firm); }
.study .vignette{ background:var(--st-tint); border:1px solid var(--hairline-firm);
  border-radius:var(--radius-sm); padding:12px 16px; margin:1.1rem 0; }

/* Pagefind UI theming.
   The component's own stylesheet sets the key cap at 11px, under the 12px
   absolute floor, and pins it with a specificity hack
   (:is(*, #\#) repeated three times, so three ID levels). Overridden hard,
   the same way the searchbox width is overridden lower down in this file. */
.pf-trigger-key{ font-size:.75rem !important; }

/* Pagefind UI theming */
/* hidden-but-indexable filter tokens (Pagefind reads them; users never see them) */
.pf-filter{ position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; }
/* search affordance (modal trigger sits top-right; Ctrl+K also opens it) */
.study-searchbar{ max-width:980px; min-height:48px; margin:96px auto 0; padding:0 22px;
  display:flex; justify-content:flex-end; }
.hub-searchbox{ display:block; width:100%; min-height:64px; margin:6px 0 30px; }
/* Stretch the inline Pagefind search to the full content width.
   Pagefind's component CSS pins .pf-searchbox to max-width:480px + inline-block, so override hard. */
.hub-searchbox .pf-searchbox{ width:100% !important; max-width:none !important; display:block !important; }
.hub-searchbox .pf-searchbox-input-wrapper{ width:100% !important; max-width:none !important; }
.hub-searchbox .pf-searchbox-input{ width:100% !important; max-width:none !important; box-sizing:border-box;
  font-size:1.06rem; padding:15px 18px; border-radius:12px; }

/* Pagefind Component UI theming (these --pf-* vars pierce the shadow DOM) */
:root{
  --pf-font:var(--font-ui);
  --pf-text:var(--ink); --pf-text-secondary:var(--ink-2); --pf-text-muted:var(--ink-3);
  --pf-background:var(--cloth); --pf-border:var(--hairline); --pf-border-focus:#0F766E;
  --pf-hover:color-mix(in srgb, var(--thread-sage) 6%, var(--cloth)); --pf-mark:#0F766E; --pf-border-radius:10px;
  --pf-modal-backdrop:rgba(42,34,24,.45); --pf-modal-top:8vh;
  --pf-result-title-font-size:1.05rem;
  --pf-outline-focus:#0F766E; --pf-outline-width:2px;
}

/* In-guide jump menu */
.jump-toc{ margin:4px 0 22px; border:1px solid var(--hairline-firm); border-radius:var(--radius-sm);
  background:var(--cloth-card); overflow:hidden; }
.jump-toc>summary{ cursor:pointer; list-style:none; padding:11px 16px;
  font-family:var(--disp); font-weight:700; font-size:.95rem; color:var(--st-coral-dk);
  background:var(--st-tint); display:flex; align-items:center; gap:9px; }
.jump-toc>summary::-webkit-details-marker{ display:none; }
.jump-toc>summary::before{ content:"\2630"; color:var(--st-coral); font-size:.95rem; }
.jump-toc[open]>summary{ border-bottom:1px solid var(--st-rule); }
.jt-body{ padding:12px 16px 14px; columns:2; column-gap:26px; }
.jt-group{ break-inside:avoid; margin-bottom:11px; }
.jt-chap{ display:block; font-family:var(--disp); font-weight:700; font-size:.75rem;
  letter-spacing:.7px; text-transform:uppercase; color:var(--ink-2); margin-bottom:3px; }
.jt-group a{ display:block; font-size:.92rem; color:var(--st-ink); text-decoration:none;
  padding:2px 0; line-height:1.35; }
.jt-group a:hover{ color:var(--st-coral-dk); }
@media(max-width:640px){ .jt-body{ columns:1; } .study-searchbar{ margin-top:80px; padding:0 16px; }
  .hub-controls{ gap:9px; } .hub-controls-r{ width:100%; }
  /* 16px: anything smaller makes iOS Safari zoom the page on focus. */
  #filter-text{ flex:1; min-width:0; font-size:1rem; } }

/* Tactile feedback stays subtle for study material */
.g-card, .dl-btn, .chap-nav a, .hub-cta{ transition:transform .12s ease, border-color .15s ease, background .15s ease; }
.g-card:active, .dl-btn:active, .chap-nav a:active{ transform:scale(.98); }

/* Phone, <= 640px */
@media (max-width:640px){
  .hub-title{ font-size:2.35rem; }
  .g-title{ font-size:1.95rem; line-height:1.08; }
  .study{ padding:28px 16px 72px; font-size:1.05rem; }
  .study-guide{ font-size:1.06rem; line-height:1.66; }
  .hub-dek{ font-size:1.06rem; }

  /* download buttons: two-up on phones, easy to tap */
  .hub-downloads{ grid-template-columns:repeat(2,1fr); gap:9px; }
  .hub-downloads .dl-btn{ padding:14px 12px; font-size:.95rem; }

  /* chapter nav: short labels wrap to show all six, nothing scrolls off-edge */
  .chap-nav{ flex-wrap:wrap; gap:7px; margin:16px 0 12px; }
  .chap-nav a{ padding:7px 13px; font-size:.86rem; }

  .c-title{ font-size:1.5rem; }
  .study h3.sec{ font-size:1.24rem; }

  /* Narrow two-column tables dissolve into labeled cards */
  .study .tw:not(.tw-wide){ overflow:visible; margin:1rem 0 1.3rem; }
  .study .tw:not(.tw-wide) table.mx{ display:block; width:100%; min-width:0; border-collapse:separate; font-size:1rem; }
  .study .tw:not(.tw-wide) table.mx thead{ display:none; }
  .study .tw:not(.tw-wide) table.mx tbody{ display:block; }
  .study .tw:not(.tw-wide) table.mx tr{
    display:block; margin:0 0 13px; background:var(--cloth-card);
    border:1px solid var(--st-rule); border-radius:var(--radius-sm); overflow:hidden;
    box-shadow:var(--shadow-soft);
  }
  .study .tw:not(.tw-wide) table.mx tbody tr:nth-child(even) td{ background:transparent; }
  .study .tw:not(.tw-wide) table.mx td{
    display:block; text-align:left; padding:8px 16px;
    border-bottom:1px solid var(--st-rule); border-radius:0;
    background:transparent; color:var(--st-ink); font-weight:400;
    overflow-wrap:break-word; word-break:normal;
  }
  .study .tw:not(.tw-wide) table.mx td:last-child{ border-bottom:none; }
  .study .tw:not(.tw-wide) table.mx td::before{
    content:attr(data-th); display:block;
    font-family:var(--disp); font-weight:700; font-size:.75rem; letter-spacing:.7px;
    text-transform:uppercase; color:var(--ink-2); margin-bottom:1px;
  }
  /* First cell becomes the card title bar with the knowledge accent */
  /* Card title bar. The 3px coral stripe down its left edge went with the
     other side tabs (pre-existing at HEAD); the tint field, the weight and the
     accent type already mark this as the header without it. */
  .study .tw:not(.tw-wide) table.mx td:first-child{
    display:block; padding:11px 16px 10px;
    background:var(--st-tint); border-bottom:1px solid var(--st-rule);
    font-family:var(--disp); font-weight:700; font-size:1.05rem; color:var(--st-coral-dk);
  }
  .study .tw:not(.tw-wide) table.mx td:first-child::before{ display:none; }
  /* if a cell has no label (rare), do not show an empty tag */
  .study .tw:not(.tw-wide) table.mx td[data-th=""]::before{ display:none; }

  /* Wide comparison tables stay tabular and scroll horizontally */
  .study .tw-hint{ display:block; font-family:var(--disp); font-weight:700;
    font-size:.75rem; letter-spacing:.7px; text-transform:uppercase;
    color:var(--ink-2); margin:1rem 0 -.2rem; }
  .study .tw-wide{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:.2rem 0 1.3rem; }
  .study .tw-wide table.mx{ width:max-content; min-width:100%; font-size:.9rem; }
  .study .tw-wide table.mx td{ max-width:72vw; } /* verbose cells wrap, not one giant column */
  .study .tw-wide table.mx th:first-child,
  .study .tw-wide table.mx td:first-child{ position:sticky; left:0; z-index:1; }
  .study .tw-wide table.mx td:first-child{
    background:var(--cloth-card); color:var(--st-coral-dk); font-weight:700;
    box-shadow:1px 0 0 var(--st-rule);
  }
  .study .tw-wide table.mx tbody tr:nth-child(even) td:first-child{ background:var(--st-tint); }
}

.hub-eyebrow, .g-eyebrow, .c-eyebrow, .gc-num, .gc-paper, .gc-badge,
.paper-chips .chip, .ma-label, .ma-chip, .dl-label, .back-hub, .chap-nav a,
.hub-count, .jt-chap, .lr-head, .box-label, .study table.mx th, #sort-by,
#filter-text, .hy-toggle{ font-family:var(--font-ui); }

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

@media (prefers-reduced-motion:reduce){
  .g-card, .dl-btn, .chap-nav a, .hub-cta{ transition:none; }
  .g-card:active, .dl-btn:active, .chap-nav a:active{ transform:none; }
}