/* ============================================================
   Condition hubs, the owner-approved illustrated redesign (2026-09-13):
   /dc/conditions, /dc/mental-health, /dc/secondary-pairs and
   /dc/secondary-conditions (CLAUDE-CONDITION-HUBS-ILLUSTRATED-REDESIGN-
   HANDOFF-2026-09-13.md, mockup CONDITION-HUBS-MOCKUP-V1-2026-09-13, both in
   the share folder). Loaded by those four pages only, and every selector sits
   under body.chub-page, so no other page moves.

   SIZES ARE THE MOCKUP'S, EXACTLY (owner directive 2026-09-13: follow the
   mockup first, question later). Every value below is the mockup's design.css
   pixel converted to rem on the site's 17px root, with the pixel in the
   comment; untracked_files/hubs-size-diff.mjs measures both builds. The only
   additions are integration needs the mockup's review shell never had: the
   sticky site navigation (anchor and sidebar offsets), the site breadcrumb
   above the opening, the site's dark-theme form rule, [hidden], and the
   two dark-theme mechanisms.

   TYPE ROLES follow the handoff: content headings and illustrated card titles
   Source Serif 4 600, controls, labels and the shared Related rail Inter.
   ============================================================ */

body.chub-page {
  --chub-ink: var(--color-primary);
  --chub-art-bg: #f5efe3;        /* the illustrations are painted on this cream, in both themes */
  --chub-rule: var(--color-accent-light);
  --chub-gold-text: #8a5c10;     /* gold numerals that clear AA on white and cream */
  --chub-hover: #f6edcf;
}
:root[data-theme="dark"] body.chub-page {
  --chub-ink: var(--color-text);
  --chub-gold-text: var(--color-accent);
  --chub-hover: #232b36;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.chub-page {
    --chub-ink: var(--color-text);
    --chub-gold-text: var(--color-accent);
    --chub-hover: #232b36;
  }
}

body.chub-page [hidden] { display: none !important; }
body.chub-page main .container { max-width: calc(1204px + 3rem); }
body.chub-page main [id] { scroll-margin-top: calc(var(--nav-height) + 1.25rem); }
body.chub-page .chub-hero,
body.chub-page .chub-catalogue,
body.chub-page .chub-chapters,
body.chub-page .chub-section,
body.chub-page .chub-separate,
body.chub-page .chub-kept { line-height: 1.6; }

body.chub-page .chub-hero :focus-visible,
body.chub-page .chub-catalogue :focus-visible,
body.chub-page .chub-chapters :focus-visible,
body.chub-page .chub-section :focus-visible,
body.chub-page .chub-separate :focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}

body.chub-page .chub-eyebrow {
  font: 600 .706rem/1.5 var(--font-sans);          /* 12px */
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: left;
  max-width: none;
  margin: 0 0 .882rem;                             /* 15px */
}

/* ---------- opening ---------- */
body.chub-page .chub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17.059rem; /* 290px */
  gap: 3.765rem;                                   /* 64px */
  align-items: center;
  /* The mockup's 52px top sits under its own nav; the site's breadcrumb and
     main padding already make that gap. */
  padding: 0 0 2.353rem;                           /* 40px */
}
body.chub-page .chub-hero h1 {
  font-size: clamp(2.118rem, 4.1vw, 3.294rem);     /* 36px to 56px */
  line-height: 1.15;
  letter-spacing: -1.5px;
  color: var(--chub-ink);
  text-align: left;
  max-width: 49.412rem;                            /* 840px */
  margin: 0;
}
body.chub-page .chub-opening { margin-top: 1.294rem; max-width: 44.706rem; } /* 22px, 760px */
body.chub-page .chub-opening p {
  font: 400 1.118rem/1.65 var(--font-serif);       /* 19px */
  color: var(--color-text-muted);
  text-align: left;
  max-width: none;
  margin: 0;
}
body.chub-page .chub-hero-links { border-top: 3px solid var(--chub-rule); }
body.chub-page .chub-resource {
  display: flex;
  justify-content: space-between;
  gap: .941rem;                                    /* 16px */
  padding: 1.176rem 0;                             /* 20px */
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}
body.chub-page .chub-resource > span:first-child { font: 400 1rem/1.6 var(--font-sans); } /* the mockup's 17px line the inline title sits on */
body.chub-page .chub-resource strong { font: 600 1.235rem/1.25 var(--font-serif); color: var(--chub-ink); } /* 21px, inline as drawn */
body.chub-page .chub-resource small {
  display: block;
  margin-top: .471rem;                             /* 8px */
  font: 400 .765rem/1.55 var(--font-sans);         /* 13px */
  color: var(--color-text-muted);
}
body.chub-page .chub-resource-arrow { color: var(--color-accent); font: 400 1.412rem/1.6 var(--font-sans); } /* 24px */
body.chub-page .chub-resource:hover strong { text-decoration: underline; }
body.chub-page .chub-note { padding: 1.471rem 0; }  /* 25px */
body.chub-page .chub-note .chub-eyebrow,
body.chub-page .chub-separate .chub-eyebrow { margin-bottom: 0; line-height: 1.6rem; } /* an inline label in the mockup, on its parent's 27.2px line */
body.chub-page .chub-note-lines {
  font: 600 1.529rem/1.45 var(--font-serif);       /* 26px */
  color: var(--chub-ink);
  text-align: left;
  max-width: none;
  margin: 0 0 1rem;                                /* 17px */
}
body.chub-page .chub-note a { font: 600 .765rem/1.6 var(--font-sans); color: var(--color-primary); text-decoration: none; } /* 13px */
body.chub-page .chub-note a:hover { text-decoration: underline; }

/* ---------- catalogue: toolbar ---------- */
body.chub-page .chub-catalogue { font-family: var(--font-sans); font-size: 1rem; margin-bottom: 2.824rem; } /* 48px */
body.chub-page .chub-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 1.176rem;                                   /* 20px */
  padding: 1.412rem;                               /* 24px */
  margin-bottom: 1.647rem;                         /* 28px */
  background: var(--color-bg-alt);
  border-radius: 12px;
}
body.chub-page .chub-field { min-width: 0; }
body.chub-page .chub-field--search { flex: 1; }
body.chub-page .chub-field--primary { width: 15.588rem; } /* 265px */
body.chub-page .chub-field--system { display: none; }
body.chub-page .chub-field label {
  display: block;
  margin-bottom: .471rem;                          /* 8px */
  font: 600 .824rem/1.6 var(--font-sans);          /* 14px */
  color: var(--color-text);
}
body.chub-page .chub-field label span { font-weight: 400; }
body.chub-page .chub-search {
  display: flex;
  align-items: center;
  padding-left: .824rem;                           /* 14px */
  background: var(--color-surface);
  border: 1px solid var(--color-control-border);
  border-radius: 6px;
}
body.chub-page .chub-search svg {
  flex: none;
  width: .847rem;                                  /* the 25px search glyph draws 14.4px wide */
  height: .847rem;
  margin-right: .529rem;                           /* 9px */
  color: var(--color-text-muted);
}
body.chub-page .chub-search input[type="search"] {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 2.882rem;                            /* 49px */
  margin: 0;
  padding: .588rem .471rem;                        /* 10px 8px */
  font: 400 .882rem/1.6 var(--font-sans);          /* 15px */
  color: var(--color-text);
  /* dc.css paints every dark-theme input with !important; the field is the box around it here. */
  background: transparent !important;
  border: 0;
  box-shadow: none;
}
body.chub-page .chub-catalogue .chub-search input[type="search"]:focus-visible { outline: 2px solid var(--color-accent-light); outline-offset: 2px; } /* the mockup's search-field ring */
body.chub-page .chub-search input::placeholder { color: var(--color-text-muted); opacity: 1; }
body.chub-page .chub-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
body.chub-page .chub-search [data-chub-clear] {
  padding: .588rem;                                /* 10px */
  font: 400 .765rem/1.6 var(--font-sans);          /* 13px */
  color: var(--color-primary);
  background: transparent;
  border: 0;
  cursor: pointer;
}
body.chub-page .chub-toolbar .chub-field select {
  width: 100%;
  min-height: 2.941rem;                            /* 50px */
  padding: .588rem 1.765rem .588rem .706rem;       /* 10px 30px 10px 12px */
  font: 400 1rem/1.2 var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-control-border);
  border-radius: 6px;
  cursor: pointer;
}

/* ---------- catalogue: sidebar and results ---------- */
body.chub-page .chub-layout {
  display: grid;
  grid-template-columns: 11.647rem minmax(0, 1fr); /* 198px */
  gap: 1.882rem;                                   /* 32px */
}
body.chub-page .chub-sidebar {
  align-self: start;
  position: sticky;
  top: calc(var(--nav-height) + 1.294rem);         /* 22px below the site's sticky nav */
}
body.chub-page .chub-sidebar .chub-eyebrow { font-size: .618rem; letter-spacing: 1px; } /* 10.5px */
body.chub-page .chub-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .588rem;                                    /* 10px */
  width: 100%;
  min-height: 2.353rem;                            /* 40px */
  margin: 0 0 .235rem;                             /* 4px */
  padding: .588rem .647rem;                        /* 10px 11px */
  font: 400 .765rem/1.35 var(--font-sans);         /* 13px */
  color: var(--color-text);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
body.chub-page .chub-filter span { font-size: .706rem; color: var(--color-text-muted); } /* 12px */
body.chub-page .chub-filter[aria-pressed="true"] { background: var(--chub-ink); color: var(--color-bg); font-weight: 600; }
body.chub-page .chub-filter[aria-pressed="true"] span { color: inherit; }
body.chub-page .chub-side-help {
  display: block;
  margin-top: 1.412rem;                            /* 24px */
  padding: 1.059rem .529rem;                       /* 18px 9px */
  border-top: 1px solid var(--color-border);
  font: 400 .765rem/1.6 var(--font-sans);          /* 13px */
  color: var(--color-primary);
  text-decoration: none;
}
body.chub-page .chub-side-help:hover { text-decoration: underline; }

body.chub-page .chub-result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .706rem;                                    /* 12px */
}
body.chub-page .chub-count {
  margin: 0;
  max-width: none;
  font: 600 .824rem/1.6 var(--font-sans);          /* 14px */
  color: var(--color-text);
  text-align: left;
}
body.chub-page .chub-result-head [data-chub-reset] {
  padding: 0;
  font: 400 .765rem/1.6 var(--font-sans);          /* 13px */
  color: var(--color-primary);
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}
body.chub-page .chub-art-note {
  max-width: 44.706rem;                            /* 760px */
  margin: .471rem 0 1.471rem;                      /* 8px 0 25px */
  font: 400 .706rem/1.6 var(--font-sans);          /* 12px */
  color: var(--color-text-muted);
  text-align: left;
}
body.chub-page .chub-empty {
  padding: 2.059rem;                               /* 35px */
  border: 2px solid var(--chub-rule);
  border-radius: 12px;
}
body.chub-page .chub-empty h2 {
  margin: 0;
  font-size: 1.765rem;                             /* 30px */
  line-height: 1.15;
  color: var(--chub-ink);
  text-align: left;
}
body.chub-page .chub-empty p {
  max-width: none;
  margin: .882rem 0 1rem;                          /* 15px 0 17px */
  font: 400 1rem/1.6 var(--font-sans);
  color: var(--color-text);
  text-align: left;
}
body.chub-page .chub-empty [data-chub-reset-all] {
  padding: .706rem .941rem;                        /* 12px 16px */
  font: 400 1rem/1.6 var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--chub-rule);
  border-radius: 6px;
  cursor: pointer;
}
body.chub-page .chub-empty > a {
  display: block;
  margin-top: .941rem;                             /* 16px */
  font: 400 1rem/1.6 var(--font-sans);
  color: var(--color-primary);
}

body.chub-page .chub-group { margin-bottom: 1.882rem; } /* 32px */
body.chub-page .chub-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .706rem;                                    /* 12px */
  margin: 0 0 .824rem;                             /* 14px */
  padding-top: .588rem;                            /* 10px */
}
body.chub-page .chub-group-head h2 {
  margin: 0;
  font-size: 1.706rem;                             /* 29px */
  line-height: 1.15;
  color: var(--chub-ink);
  text-align: left;
}
body.chub-page .chub-group-count { font: 400 .706rem/1.6 var(--font-sans); color: var(--color-text-muted); white-space: nowrap; } /* 12px */

/* ---------- illustrated cards ---------- */
body.chub-page .chub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .941rem; } /* 16px */
body.chub-page .chub-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.chub-page .chub-group .chub-grid > .chub-card:only-child { grid-column: 1 / -1; }
body.chub-page .chub-group .chub-grid > .chub-card:only-child .chub-card-copy { padding: 1.118rem 1.294rem; } /* 19px 22px */
body.chub-page .chub-group .chub-grid > .chub-card:only-child .chub-card-desc { max-width: 32.353rem; } /* 550px */

/* THE BUTTON LAW: 2px accent border (the mockup's own card border), card-fx
   glow (cardfx-pop), and the border shifts to primary on hover. */
body.chub-page .chub-card {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: 12px;
}
body.chub-page .chub-card:hover { background: var(--chub-hover); border-color: var(--color-primary); box-shadow: 0 5px 16px rgba(0, 0, 0, .05); }
body.chub-page .chub-card-art {
  flex: none;
  display: flex;
  align-items: center;
  width: 7.294rem;                                 /* 124px */
  overflow: hidden;
  background: var(--chub-art-bg);
}
body.chub-page .chub-card-art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
body.chub-page .chub-card-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 1.176rem 1rem;                          /* 20px 17px */
}
body.chub-page .chub-card-type {
  display: block;
  margin-bottom: .471rem;                          /* 8px */
  font: 600 .588rem/1.5 var(--font-sans);          /* 10px */
  letter-spacing: 1.25px;
  color: var(--color-text-muted);
}
body.chub-page .chub-card h3 {
  margin: 0 0 .529rem;                             /* 9px */
  font-size: 1.353rem;                             /* 23px */
  line-height: 1.15;
  color: var(--chub-ink);
  text-align: left;
  overflow-wrap: anywhere;
}
body.chub-page .chub-card-desc { display: block; font: 400 .765rem/1.55 var(--font-sans); color: var(--color-text-muted); } /* 13px */
body.chub-page .chub-card-action {
  display: flex;
  align-items: center;
  gap: .706rem;                                    /* 12px */
  margin-top: auto;
  padding-top: 1rem;                               /* 17px */
  font: 600 .706rem/1.5 var(--font-sans);          /* 12px */
  color: var(--color-primary);
}
body.chub-page .chub-card-action > span { font-size: 1.059rem; } /* 18px */
body.chub-page .chub-card--pair .chub-card-type { font-size: .529rem; letter-spacing: .7px; } /* 9px */
body.chub-page .chub-pair-primary {
  display: block;
  margin: 0 0 .706rem;                             /* 12px */
  font: 400 .765rem/1.6 var(--font-sans);          /* 13px */
  color: var(--color-text-muted);
}
body.chub-page .chub-pair-primary strong { display: block; font-size: .882rem; font-weight: 600; color: var(--chub-ink); } /* 15px */
body.chub-page .chub-pair-stats {
  display: block;
  width: 100%;
  padding-top: .588rem;                            /* 10px */
  border-top: 1px solid var(--color-border);
  font: 400 .706rem/1.5 var(--font-sans);          /* 12px */
  color: var(--color-text-muted);
}
body.chub-page .chub-card--feature .chub-card-art { width: 10.588rem; }      /* 180px */
body.chub-page .chub-card--feature .chub-card-art img { aspect-ratio: 1 / 1; object-fit: cover; }
body.chub-page .chub-card--feature .chub-card-copy { padding: 1.412rem; }    /* 24px */
body.chub-page .chub-card--feature h3 { font-size: 1.765rem; }               /* 30px */
body.chub-page .chub-card--feature .chub-card-desc { font-size: .824rem; }   /* 14px */
body.chub-page .chub-grid--three .chub-card-art { width: 5.412rem; }         /* 92px */
body.chub-page .chub-grid--three .chub-card-copy { padding: 1.059rem .882rem; } /* 18px 15px */
body.chub-page .chub-grid--three .chub-card h3 { font-size: 1.294rem; }      /* 22px */

/* ---------- chaptered hubs (mental health, secondary conditions) ---------- */
body.chub-page .chub-chapters {
  display: flex;
  flex-wrap: wrap;
  gap: .471rem 1.647rem;                           /* 8px 28px */
  margin: 0 0 2.353rem;                            /* 40px */
  padding: 1.059rem 0;                             /* 18px */
  border-block: 1px solid var(--color-border);
}
body.chub-page .chub-chapters a { font: 600 .765rem/1.6 var(--font-sans); color: var(--color-primary); text-decoration: none; } /* 13px */
body.chub-page .chub-chapters a:hover { text-decoration: underline; }
body.chub-page .chub-section-head { margin: 0 0 1.353rem; } /* 23px */
body.chub-page .chub-section-head h2 {
  margin: 0 0 .706rem;                             /* 12px */
  font-size: 2.118rem;                             /* 36px */
  line-height: 1.15;
  letter-spacing: -.6px;
  color: var(--chub-ink);
  text-align: left;
}
body.chub-page .chub-section-head > p:not(.chub-eyebrow) {
  max-width: 41.176rem;                            /* 700px */
  margin: 0;
  font: 400 .882rem/1.6 var(--font-sans);          /* 15px */
  color: var(--color-text-muted);
  text-align: left;
}
body.chub-page .chub-chapter { margin-top: 2.824rem; padding-top: 1.765rem; border-top: 1px solid var(--color-border); } /* 48px, 30px */

/* Printable shelf: the existing poster previews, grouped. */
body.chub-page .chub-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .941rem; } /* 16px */
body.chub-page .chub-shelf > .vg-mini-preview,
body.chub-page .chub-shelf > .visual-guide-card {
  display: flex;
  align-items: center;
  gap: 1.176rem;                                   /* 20px */
  max-width: none;
  margin: 0;
  padding: 1.176rem;                               /* 20px */
  color: var(--color-text-muted);
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: none;
}
body.chub-page .chub-shelf > .vg-mini-preview:hover { border-color: var(--color-primary); }
body.chub-page .chub-shelf img { flex-shrink: 0; width: 4.353rem; height: auto; max-height: 200px; object-fit: contain; } /* 74px */
body.chub-page .chub-shelf figcaption { padding: 0; }
body.chub-page .chub-shelf .vg-mini-preview__copy,
body.chub-page .chub-shelf figcaption { font-size: .824rem; color: var(--color-text-muted); } /* 14px */
body.chub-page .chub-shelf strong { color: var(--color-text); }

/* Secondary conditions: three task choices, then the alternate map view. */
body.chub-page #choose.chub-section { padding-top: 1.647rem; border-top: 1px solid var(--color-border); } /* 28px */
body.chub-page .chub-tasks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.176rem; } /* 20px */
body.chub-page .chub-task {
  display: flex;
  gap: 1.059rem;                                   /* 18px */
  padding: 1.529rem;                               /* 26px */
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: 12px;
}
body.chub-page .chub-task:hover { border-color: var(--color-primary); }
body.chub-page .chub-task-num {
  flex: none;
  box-sizing: border-box;
  height: 2rem;                                    /* 34px */
  font: 600 1.118rem/1.5 var(--font-serif);        /* 19px */
  color: var(--chub-gold-text);
  border-bottom: 2px solid var(--chub-rule);
}
body.chub-page .chub-task-copy { display: flex; flex-direction: column; min-width: 0; }
body.chub-page .chub-task h3 {
  margin: 0 0 1.059rem;                            /* 18px */
  font-size: 1.706rem;                             /* 29px */
  line-height: 1.15;
  color: var(--chub-ink);
  text-align: left;
}
body.chub-page .chub-task-action { display: block; font: 700 .824rem/1.5 var(--font-sans); color: var(--chub-ink); } /* 14px */
body.chub-page .chub-task-desc { display: block; margin: .706rem 0 1.353rem; font: 400 .824rem/1.6 var(--font-sans); color: var(--color-text-muted); } /* 12px 0 23px */
body.chub-page .chub-task-dest { margin-top: auto; font: 600 .765rem/1.6 var(--font-sans); color: var(--color-primary); } /* 13px */
body.chub-page .chub-map-alt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.176rem;                                   /* 20px */
  margin-top: 1.059rem;                            /* 18px */
  padding: 1.294rem 1.471rem;                      /* 22px 25px */
  font: 400 .882rem/1.6 var(--font-sans);          /* 15px */
  color: var(--color-primary);
  text-decoration: none;
  background: var(--color-bg-alt);
  border-radius: 8px;
}
body.chub-page .chub-map-alt strong { margin-right: .471rem; color: var(--chub-ink); } /* 8px */
body.chub-page .chub-map-alt small { display: block; margin-top: .353rem; font-size: .765rem; color: var(--color-text-muted); } /* 6px, 13px */

body.chub-page .chub-learning { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3.824rem; } /* 65px */
body.chub-page .chub-learning-note {
  max-width: 21.765rem;                            /* 370px */
  margin: 0 0 1rem;
  font: 400 1.118rem/1.7 var(--font-serif);        /* 19px */
  color: var(--color-text-muted);
  text-align: left;
}
body.chub-page .chub-learning-link {
  display: flex;
  align-items: flex-start;
  gap: 1.176rem;                                   /* 20px */
  padding: 1.294rem 0;                             /* 22px */
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
body.chub-page .chub-learning-link:first-child { padding-top: 0; }
body.chub-page .chub-learning-link h3 {
  margin: 0 0 .588rem;                             /* 10px */
  font-size: 1.529rem;                             /* 26px */
  line-height: 1.15;
  color: var(--chub-ink);
  text-align: left;
}
body.chub-page .chub-learning-link:hover h3 { text-decoration: underline; }
body.chub-page .chub-learning-desc { display: block; font: 400 .824rem/1.6 var(--font-sans); color: var(--color-text-muted); } /* 14px */
body.chub-page .chub-step { flex: none; padding-top: .353rem; font: 400 .765rem/1.6 var(--font-sans); color: var(--color-text-muted); } /* 6px, 13px */
body.chub-page .chub-learning-arrow { margin-left: auto; color: var(--color-primary); }

body.chub-page .chub-separate {
  margin-top: 2.588rem;                            /* 44px */
  padding: 1.588rem 1.765rem;                      /* 27px 30px */
  background: var(--color-bg-alt);
  border-left: 4px solid var(--chub-rule);
}
body.chub-page .chub-separate h2 { margin: 0; font-size: 1.647rem; line-height: 1.15; color: var(--chub-ink); text-align: left; } /* 28px */
body.chub-page .chub-separate p:not(.chub-eyebrow) {
  max-width: 46.471rem;                            /* 790px */
  margin: .882rem 0;                               /* 15px */
  font: 400 .882rem/1.6 var(--font-sans);          /* 15px */
  color: var(--color-text-muted);
  text-align: left;
}
body.chub-page .chub-separate a { font: 600 .824rem/1.6 var(--font-sans); color: var(--color-primary); } /* 14px */

/* ---------- the kept sections, as the mockup's preserved-content block ---------- */
body.chub-page .chub-kept { margin-top: 2.824rem; padding-top: 1.412rem; border-top: 1px solid var(--color-border); } /* 48px, 24px */
body.chub-page .chub-kept .guide-section { margin: 0; padding: 1.294rem 0; background: none; border: 0; box-shadow: none; } /* 22px */
body.chub-page .chub-kept h2 {
  margin: 0 0 1.059rem;                            /* 18px */
  padding: 0;
  font-size: 1.824rem;                             /* 31px */
  line-height: 1.15;
  color: var(--chub-ink);
  text-align: left;
  border: 0;
}
body.chub-page .chub-kept p,
body.chub-page .chub-kept li {
  font: 400 1rem/1.75 var(--font-serif);           /* 17px */
  color: var(--color-text-muted);
}
body.chub-page main .chub-kept p { max-width: none; margin: 0 0 1rem; text-align: left; }
body.chub-page main .chub-kept p.chub-eyebrow { margin-bottom: .882rem; } /* the mockup's !important 15px */
body.chub-page main .chub-kept ul { max-width: none; margin-left: 0; margin-right: 0; }
body.chub-page .chub-kept li { margin-bottom: 0; }
body.chub-page .chub-kept .rel-cards { gap: .941rem; }       /* 16px */
body.chub-page .chub-kept .rel-card { padding: 1.176rem; }   /* 20px */
body.chub-page .chub-kept .rc-t { font-size: 1.294rem; font-weight: 600; line-height: 1.25; } /* 22px */
body.chub-page .chub-kept .rc-d { font-size: .824rem; line-height: 1.6; }                 /* 14px */
body.chub-page .chub-kept table { font-size: .824rem; }                                   /* 14px */
body.chub-page .chub-kept th,
body.chub-page .chub-kept td { padding: .706rem; }                                        /* 12px */
body.chub-page .sc-posters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.059rem; margin-top: 0; } /* 18px */
body.chub-page .sc-posters .vg-mini-preview {
  align-items: flex-start;
  gap: .941rem;                                    /* 16px */
  margin: 0;
  padding: 1.176rem;                               /* 20px */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
body.chub-page .sc-posters .vg-mini-preview:hover { border-color: var(--color-primary); }
body.chub-page .sc-posters .vg-mini-preview img { flex-shrink: 0; width: 4.118rem; height: auto; max-width: 120px; object-fit: fill; } /* 70px */
body.chub-page .sc-posters .vg-mini-preview__copy { font: 400 .765rem/1.6 var(--font-sans); color: var(--color-text-muted); } /* 13px */
body.chub-page .sc-posters .vg-mini-preview__copy strong {
  display: block;
  margin-bottom: .529rem;                          /* 9px */
  font: 600 1.176rem/1.3 var(--font-serif);        /* 20px */
  color: var(--chub-ink);
}
body.chub-page .chub-kept .vg-links a { font-size: .824rem; } /* 14px */

/* ---------- responsive ---------- */
@media (min-width: 1400px) {
  body.chub-page .chub-card-art { width: 8.588rem; } /* 146px */
}
@media (max-width: 1000px) {
  body.chub-page .chub-hero { grid-template-columns: minmax(0, 1fr) 14.118rem; gap: 1.765rem; } /* 240px, 30px */
  body.chub-page .chub-layout { grid-template-columns: 10rem minmax(0, 1fr); gap: 1.294rem; }  /* 170px, 22px */
  body.chub-page .chub-card-art { width: 5.588rem; }                                          /* 95px */
  body.chub-page .chub-card-copy { padding: 1rem .765rem; }                                   /* 17px 13px */
  body.chub-page .chub-card h3,
  body.chub-page .chub-card--feature h3,
  body.chub-page .chub-grid--three .chub-card h3 { font-size: 1.235rem; }                     /* 21px */
  body.chub-page .chub-card--feature .chub-card-copy { padding: 1.412rem; }
  body.chub-page .chub-card--feature .chub-card-art { width: 8.235rem; }                      /* 140px */
  body.chub-page .chub-grid--three { grid-template-columns: minmax(0, 1fr); }
  body.chub-page .chub-grid--three .chub-card-art { width: 8.235rem; }                        /* 140px */
  body.chub-page .chub-grid--three .chub-card-copy { padding: 1.059rem .882rem; }
  body.chub-page .chub-task { gap: .706rem; padding: 1.176rem; }                              /* 12px, 20px */
  body.chub-page .chub-task h3 { font-size: 1.471rem; }                                       /* 25px */
  body.chub-page .chub-learning { gap: 2.059rem; }                                            /* 35px */
  body.chub-page .sc-posters { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body.chub-page main .container { padding-left: 1.176rem; padding-right: 1.176rem; }         /* 20px */
  body.chub-page .chub-hero { display: block; padding: 0 0 1.647rem; }                        /* 28px */
  body.chub-page .chub-hero h1 { font-size: 2.235rem; letter-spacing: -1px; }                 /* 38px */
  body.chub-page .chub-opening { margin-top: 1.059rem; }                                      /* 18px */
  body.chub-page .chub-opening p { font-size: 1.059rem; }                                     /* 18px */
  body.chub-page .chub-hero-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1.059rem; margin-top: 1.471rem; } /* 18px, 25px */
  body.chub-page .chub-hero-links.chub-hero-links--note { display: none; }
  body.chub-page .chub-resource { padding: .882rem 0; }                                       /* 15px */
  body.chub-page .chub-resource strong { font-size: 1.118rem; }                               /* 19px */
  body.chub-page .chub-resource small { font-size: .706rem; }                                 /* 12px */
  body.chub-page .chub-resource-arrow { display: none; }
  body.chub-page .chub-eyebrow { font-size: .588rem; letter-spacing: 1.3px; }                 /* 10px */
  body.chub-page .chub-toolbar { display: block; padding: 1rem; margin-bottom: 1.412rem; }    /* 17px, 24px */
  body.chub-page .chub-field label { font-size: .765rem; }                                    /* 13px */
  body.chub-page .chub-field--system { display: block; margin-top: .882rem; }                 /* 15px */
  body.chub-page .chub-field--primary { width: 100%; margin-top: .882rem; }
  body.chub-page .chub-search input[type="search"] { font-size: .824rem; }                    /* 14px */
  body.chub-page .chub-layout { display: block; }
  body.chub-page .chub-sidebar { display: none; }
  body.chub-page .chub-grid { grid-template-columns: minmax(0, 1fr); }
  body.chub-page .chub-group { margin-bottom: 1.765rem; }                                     /* 30px */
  body.chub-page .chub-card-art { width: 6.235rem; }                                          /* 106px */
  body.chub-page .chub-card-copy { padding: 1.118rem .941rem; }                               /* 19px 16px */
  body.chub-page .chub-card h3,
  body.chub-page .chub-grid--three .chub-card h3 { font-size: 1.412rem; }                     /* 24px */
  body.chub-page .chub-card-desc { font-size: .765rem; }                                      /* 13px */
  body.chub-page .chub-art-note { font-size: .647rem; }                                       /* 11px */
  body.chub-page .chub-section-head h2 { font-size: 1.824rem; }                               /* 31px */
  body.chub-page .chub-chapters { gap: .588rem 1.176rem; padding: .941rem 0; margin-bottom: 1.765rem; } /* 10px 20px, 16px, 30px */
  body.chub-page .chub-chapters a { font-size: .706rem; }                                     /* 12px */
  body.chub-page .chub-card--feature .chub-card-art { width: 6.765rem; }                      /* 115px */
  body.chub-page .chub-card--feature .chub-card-copy { padding: 1.176rem .941rem; }           /* 20px 16px */
  body.chub-page .chub-card--feature h3 { font-size: 1.647rem; }                              /* 28px */
  body.chub-page .chub-card--feature .chub-card-desc { font-size: .765rem; }                  /* 13px */
  body.chub-page .chub-chapter { margin-top: 1.882rem; padding-top: 1.529rem; }               /* 32px, 26px */
  body.chub-page .chub-grid--three .chub-card-art { width: 6.235rem; }                        /* 106px */
  body.chub-page .chub-shelf { grid-template-columns: minmax(0, 1fr); }
  body.chub-page .chub-shelf > .vg-mini-preview,
  body.chub-page .chub-shelf > .visual-guide-card { gap: .941rem; padding: .941rem; }         /* 16px */
  body.chub-page .chub-shelf img { width: 4.353rem; height: auto; }                           /* 74px, over dc.css's 56px phone thumb */
  body.chub-page .chub-kept h2 { font-size: 1.647rem; }                                       /* 28px */
  body.chub-page .chub-kept table { font-size: .706rem; }                                     /* 12px */
  body.chub-page .chub-kept th,
  body.chub-page .chub-kept td { padding: .588rem .412rem; }                                  /* 10px 7px */
  body.chub-page .chub-kept .rel-cards { grid-template-columns: 1fr; }
  body.chub-page .chub-tasks { grid-template-columns: minmax(0, 1fr); gap: .824rem; }         /* 14px */
  body.chub-page .chub-task { gap: 1.176rem; padding: 1.353rem; }                             /* 20px, 23px */
  body.chub-page .chub-task h3 { margin-bottom: .706rem; font-size: 1.706rem; }               /* 12px, 29px */
  body.chub-page .chub-task-desc { margin-bottom: 1.059rem; }                                 /* 18px */
  body.chub-page .chub-task-num { font-size: 1.176rem; }                                      /* 20px */
  body.chub-page .chub-learning { display: block; }
  body.chub-page .chub-learning-note { max-width: none; }
  body.chub-page .chub-learning-link:first-child { padding-top: .882rem; }                    /* 15px */
  body.chub-page .chub-learning-link h3 { font-size: 1.471rem; }                              /* 25px */
  body.chub-page .chub-separate { padding: 1.294rem; }                                        /* 22px */
  body.chub-page .chub-map-alt { padding: 1.059rem; font-size: .824rem; }                     /* 18px, 14px */
  body.chub-page .chub-map-alt strong { display: block; }
  body.chub-page .sc-posters { display: block; }
  body.chub-page .sc-posters > * { margin-bottom: 1.059rem; }                                 /* 18px */
  body.chub-page .sc-posters .vg-mini-preview img { width: 4.118rem; height: auto; }          /* 70px */
  body.chub-page .chub-empty { padding: 1.412rem; }                                           /* 24px */
  body.chub-page .chub-empty h2 { font-size: 1.647rem; }                                      /* 28px */
}