/* Hair Loss Notes, friendly interactive UI */

/* Self-hosted variable fonts. No third-party request, no visitor IP leaves this
   host. Both faces are SIL OFL 1.1: see fonts/LICENSE.txt */
@font-face {
  font-family: "DM Sans";
  src: url("fonts/dmsans-normal-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/dmsans-normal-latin-ext.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/dmsans-italic-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/dmsans-italic-latin-ext.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-normal-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-normal-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Paper only: the owner disabled dark mode on 2026-07-30. This stops the
     browser from auto-darkening form controls and scrollbars to match a dark
     OS, which would strand dark chrome on a cream page. */
  color-scheme: light;
  --bg: #f4f1eb;
  --bg-alt: #ebe6dc;
  --surface: #fffcf7;
  --ink: #1a1714;
  --muted: #5f584f;
  --line: #ddd4c6;
  --brand: #0f6b5c;
  --brand-deep: #0a4f44;
  --brand-soft: #d5efe8;
  --warn: #8c520f;
  --warn-soft: #f6e7cf;
  --danger: #8b2e2e;
  --bias: #5b4b8a;
  --bias-soft: #ebe6f7;
  --good: #1f6b3a;
  --good-soft: #def0e4;
  --mid: #3d6f8f;
  --shadow: 0 14px 40px rgba(26, 23, 20, 0.08);
  --radius: 20px;
  --font: "DM Sans", system-ui, sans-serif;
  --display: "Fraunces", Georgia, serif;
  --wrap: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
/* No global smooth scrolling. On a page this tall, a nav click under
   `scroll-behavior: smooth` animates for several seconds at the browser's
   fixed pace, which for a stressed reader is dead time between question and
   answer. Anchor jumps land instantly; app.js adds a short glide only when
   the target is within about a screen and a half (see goTo). */
html { scroll-behavior: auto; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(900px 480px at 0% -10%, #dff3ec 0%, transparent 55%),
    radial-gradient(800px 420px at 100% 0%, #f5e6d2 0%, transparent 50%),
    var(--bg);
  line-height: 1.55;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; }
h1, h2, h3, .lane-card, .women-card, .lede, p, li, .calm-strip {
  overflow-wrap: anywhere;
  word-break: break-word;
}
a { color: var(--brand-deep); }
img { max-width: 100%; }
em { font-style: italic; color: var(--brand-deep); }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: #fff; padding: .5rem 1rem; z-index: 1000;
}
.skip-link:focus { left: .5rem; top: .5rem; }

.wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: .75rem; box-sizing: border-box; }
.wrap.narrow { width: min(720px, 100%); }
.center { text-align: center; }
.center-head { text-align: center; margin-inline: auto; max-width: 40rem; }
.center-actions { justify-content: center; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(244, 241, 235, 0.9);
  border-bottom: 1px solid rgba(221, 212, 198, 0.85);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 64px;
}
.brand {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: inherit; min-width: 0;
}
.brand-mark {
  width: 2rem; height: 2rem; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--brand); color: #fff; font-weight: 700; flex-shrink: 0;
}
.brand strong { display: block; font-size: .98rem; }
.brand-sub { display: block; font-size: .72rem; color: var(--muted); }

.nav { display: none; gap: .55rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.nav a {
  text-decoration: none; color: var(--muted); font-size: .88rem; font-weight: 700;
  padding: .4rem .65rem; border-radius: 999px; border: 1px solid transparent;
}
.nav a:hover { color: var(--brand-deep); background: var(--brand-soft); }
.nav a.is-active {
  color: var(--brand-deep); background: var(--brand-soft); border-color: rgba(15,107,92,.22);
}

.header-actions {
  display: flex; align-items: center; gap: .45rem; flex-shrink: 0;
}
.nav-toggle {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: .55rem 1rem;
  min-height: 44px; font: inherit; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.search-launch {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: .5rem .75rem .5rem .7rem;
  min-height: 44px; font: inherit; font-weight: 700; cursor: pointer;
  color: var(--muted); transition: border-color .15s, color .15s, background .15s;
}
.search-launch:hover,
.search-launch[aria-expanded="true"] {
  border-color: var(--brand); color: var(--brand-deep); background: #fff;
}
.search-launch-icon {
  font-size: 1.05rem; line-height: 1; color: var(--brand-deep);
}
.search-launch-label { font-size: .88rem; }
.search-kbd {
  display: none; font-family: inherit; font-size: .72rem; font-weight: 700;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  border-radius: 6px; padding: .12rem .35rem; margin-left: .15rem;
}
.mobile-nav {
  display: grid; gap: .1rem; padding: .4rem .75rem 1rem;
  border-top: 1px solid var(--line); background: rgba(255,252,247,.98);
  max-height: min(78vh, 640px); overflow: auto;
}
.mobile-nav[hidden] { display: none !important; }
.mobile-nav a,
.mobile-search-btn {
  text-decoration: none; color: var(--ink);
  padding: .85rem .75rem; border-radius: 12px; font-weight: 600; min-height: 44px;
  display: flex; align-items: center;
}
.mobile-nav a:hover { background: var(--brand-soft); }
.mobile-search-btn {
  width: 100%; border: 1px dashed var(--line); background: var(--bg);
  font: inherit; cursor: pointer; color: var(--muted); margin-bottom: .25rem;
  justify-content: flex-start;
}
.mobile-search-btn:hover { background: var(--brand-soft); color: var(--brand-deep); border-style: solid; }
.mobile-nav-label {
  margin: .65rem .75rem .15rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
body.nav-open { overflow: hidden; }
body.search-open { overflow: hidden; }
body.has-dock { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Site search modal */
.search-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: start center;
  padding: max(12vh, 1.25rem) 1rem 1.5rem;
}
.search-modal[hidden] { display: none !important; }
.search-backdrop {
  position: absolute; inset: 0;
  background: rgba(26, 23, 20, 0.45);
  backdrop-filter: blur(4px);
}
.search-dialog {
  position: relative; width: min(640px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(26, 23, 20, 0.22);
  overflow: hidden;
  max-height: min(78vh, 720px);
  display: flex; flex-direction: column;
}
.search-bar {
  display: flex; align-items: center; gap: .55rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fffefb, var(--surface));
}
.search-bar-icon {
  color: var(--brand); font-size: 1.2rem; line-height: 1; flex-shrink: 0;
}
.search-input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 1.05rem; font-weight: 600; color: var(--ink);
  min-height: 40px;
}
.search-input::placeholder { color: #9a9287; font-weight: 500; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-esc {
  display: none; font-family: inherit; font-size: .72rem; font-weight: 700;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  border-radius: 6px; padding: .2rem .4rem;
}
.search-close {
  border: 0; background: var(--bg); color: var(--muted);
  width: 36px; height: 36px; border-radius: 10px;
  font-size: 1.35rem; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.search-close:hover { background: var(--brand-soft); color: var(--brand-deep); }
.search-hint {
  margin: 0; padding: .55rem 1rem .15rem;
  font-size: .82rem; color: var(--muted);
}
.search-chips {
  display: flex; flex-wrap: wrap; gap: .35rem;
  padding: .35rem 1rem .55rem;
}
.schip {
  border: 1px solid var(--line); background: var(--bg);
  border-radius: 999px; padding: .35rem .7rem;
  font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--brand-deep); cursor: pointer; min-height: 34px;
}
.schip:hover, .schip.is-on {
  background: var(--brand-soft); border-color: var(--brand);
}
.search-results {
  overflow: auto; padding: .35rem .55rem .7rem;
  display: grid; gap: .3rem;
  overscroll-behavior: contain;
}
.search-empty {
  padding: 1.15rem 1.1rem 1.35rem; text-align: center;
}
.search-empty[data-mode="idle"] {
  padding-top: .85rem;
}
.search-empty p { margin: .25rem 0; }
.search-result {
  display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem;
  align-items: start;
  width: 100%; text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 12px;
  padding: .7rem .75rem;
  font: inherit; color: inherit; cursor: pointer;
}
.search-result:hover,
.search-result[aria-selected="true"] {
  background: var(--brand-soft);
  border-color: rgba(15, 107, 92, 0.18);
}
.search-result-kind {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-deep);
  background: #fff;
  border: 1px solid rgba(15, 107, 92, 0.2);
  border-radius: 999px;
  padding: .28rem .5rem;
  white-space: nowrap;
}
.search-result-kind.kind-treatment { color: var(--good); border-color: rgba(31,107,58,.25); }
.search-result-kind.kind-video { color: var(--mid); border-color: rgba(61,111,143,.3); }
.search-result-kind.kind-risk { color: var(--warn); border-color: rgba(154,91,18,.3); }
.search-result-kind.kind-checklist { color: var(--bias); border-color: rgba(91,75,138,.28); }
.search-result-title {
  font-weight: 700; font-size: .98rem; line-height: 1.25;
}
.search-result-title mark {
  background: #ffe8a3; color: inherit; border-radius: 3px; padding: 0 .1em;
}
.search-result-snip {
  grid-column: 2;
  font-size: .84rem; color: var(--muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.search-result-snip mark {
  background: #ffe8a3; color: inherit; border-radius: 2px;
}
.search-footer {
  display: none; gap: .9rem; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding: .55rem 1rem;
  font-size: .78rem; color: var(--muted);
  background: var(--bg);
}
.search-footer kbd,
.search-hint kbd {
  font-family: inherit; font-size: .72rem; font-weight: 700;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 5px; padding: .08rem .32rem;
  margin-right: .15rem;
}
.mark-hit {
  animation: markPulse 1.6s ease;
  outline: 3px solid rgba(15, 107, 92, 0.45);
  outline-offset: 4px;
  border-radius: 12px;
}
@keyframes markPulse {
  0% { outline-color: rgba(15, 107, 92, 0.75); background-color: rgba(213, 239, 232, 0.55); }
  100% { outline-color: transparent; background-color: transparent; }
}

@media (min-width: 960px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
  body.nav-open { overflow: auto; }
  .search-launch-label { display: inline; }
  .search-kbd { display: inline-block; }
  .search-esc { display: inline-block; }
  .search-footer { display: flex; }
  .search-close { display: none; }
}
@media (max-width: 959px) {
  .search-launch-label { display: none; }
  .search-modal { padding-top: max(8vh, .75rem); align-items: start; }
  .search-dialog { max-height: min(88vh, 760px); border-radius: 16px; }
}

/* Type */
.eyebrow {
  display: inline-block; margin: 0 0 .6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand);
}
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .45rem; }
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); margin-bottom: .9rem; }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: 1.15rem; }
.lede { font-size: 1.08rem; color: var(--muted); max-width: 38rem; }
.fine-print { font-size: .86rem; color: var(--muted); }
.section { padding: 2.75rem 0; }
.section.alt {
  background: linear-gradient(180deg, rgba(235,230,220,.7), rgba(235,230,220,.15));
  border-block: 1px solid rgba(221,212,198,.7);
}
.section-head { margin-bottom: 1.4rem; }
.section-head p { color: var(--muted); margin: .35rem 0 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: .75rem 1.2rem;
  text-decoration: none; font-weight: 700; font-size: .95rem;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.btn.primary { background: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-deep); }
.btn.ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { border-color: var(--brand); }
.btn-xl { width: 100%; min-height: 52px; font-size: 1.02rem; margin-top: .4rem; }

.hero { padding: 2.5rem 0 1.25rem; }
.hero-grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.3fr .85fr; align-items: start; }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.2rem 0 .9rem; }
.trust-row {
  display: flex; flex-wrap: wrap; gap: .55rem .9rem;
  color: var(--muted); font-size: .88rem; font-weight: 600;
}
@media (max-width: 960px) {
  .trust-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem .65rem;
    max-width: 22rem;
  }
  .trust-row span {
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(221, 212, 198, 0.85);
    border-radius: 999px;
    padding: .35rem .55rem;
    text-align: center;
    font-size: .8rem;
    line-height: 1.25;
  }
}
.hero-stat-card, .hero-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem 1.25rem; box-shadow: var(--shadow);
}
.stat-label { margin: 0 0 .7rem; font-weight: 700; color: var(--brand-deep); }
.mini-flow { list-style: none; margin: 0; padding: 0; }
.mini-flow li {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .45rem 0; border-bottom: 1px dashed var(--line); color: var(--muted);
}
.mini-flow li:last-child { border-bottom: 0; }
.mini-flow span {
  width: 1.5rem; height: 1.5rem; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--brand-soft);
  color: var(--brand-deep); font-size: .78rem; font-weight: 800;
}

/* Journey */
.journey-wrap {
  position: sticky;
  top: 64px;
  z-index: 40;
  background: rgba(244, 241, 235, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(221, 212, 198, 0.75);
  max-width: 100%;
  overflow: hidden;
}
.journey-bar {
  display: flex; gap: .4rem; overflow-x: auto; padding: .55rem 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}
.journey-bar::-webkit-scrollbar { display: none; }
.j-step {
  flex: 0 0 auto; text-decoration: none; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: .45rem .75rem .45rem .45rem;
  font-size: .82rem; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px;
}
.j-step i {
  width: 1.4rem; height: 1.4rem; border-radius: 999px;
  display: grid; place-items: center; font-style: normal;
  background: var(--bg-alt); font-size: .75rem;
}
.j-step.active, .j-step:hover {
  border-color: var(--brand); color: var(--brand-deep); background: var(--brand-soft);
}
.j-step.active i { background: var(--brand); color: #fff; }
.j-search {
  flex: 0 0 auto; margin-left: auto;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 1rem; cursor: pointer; color: var(--brand-deep);
}
.j-search:hover { background: var(--brand-soft); border-color: var(--brand); }

/* Mobile: fewer sticky journey chips + More menu */
.j-more-menu {
  flex: 0 0 auto;
  position: relative;
  display: none;
}
.j-more-menu > summary {
  list-style: none;
  cursor: pointer;
}
.j-more-menu > summary::-webkit-details-marker { display: none; }
.j-more-menu[open] > summary,
.j-more-menu.has-active > summary {
  border-color: var(--brand);
  color: var(--brand-deep);
  background: var(--brand-soft);
}
.j-more-menu[open] > summary i,
.j-more-menu.has-active > summary i {
  background: var(--brand);
  color: #fff;
}
.j-more-panel {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  z-index: 45;
  min-width: 10.5rem;
  display: grid;
  gap: .2rem;
  padding: .45rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.j-more-panel a {
  text-decoration: none;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 700;
  padding: .55rem .7rem;
  border-radius: 10px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.j-more-panel a:hover,
.j-more-panel a.is-active {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
@media (max-width: 959px) {
  .journey-bar .j-step.j-more { display: none; }
  .j-more-menu { display: block; }
  .j-step {
    min-height: 44px;
    padding: .45rem .7rem .45rem .45rem;
    font-size: .8rem;
  }
  /* One primary sticky layer on small screens: section TOCs scroll with content */
  .women-toc,
  .causes-toc,
  .tools-toc {
    position: static;
    top: auto;
    backdrop-filter: none;
    background: transparent;
    border: 0;
    padding: 0 0 .35rem;
    margin-bottom: .85rem;
    justify-content: flex-start;
  }
  .women-toc a,
  .causes-toc a,
  .tools-toc a {
    min-height: 44px;
  }
  section[id], .women-card[id], #start, #top { scroll-margin-top: 7.25rem; }
  .women-card[id] { scroll-margin-top: 7.25rem; }
}
@media (min-width: 960px) {
  .j-more-menu { display: none !important; }
  .journey-bar .j-step.j-more { display: inline-flex; }
}

/* 60-second version links (hero card) */
.mini-flow a {
  color: inherit; font-weight: 700;
  text-decoration: underline; text-decoration-color: rgba(15,107,92,.35);
  text-underline-offset: 2px;
}
.mini-flow a:hover { color: var(--brand-deep); text-decoration-color: var(--brand); }

/* Start lanes */
.start-section { padding-top: 1.25rem; }

/* Triage row, 3 big choices before the full grid */
.triage-row {
  display: grid; gap: .6rem;
  grid-template-columns: 1fr;
  margin: 0 0 1.3rem;
}
@media (min-width: 480px) {
  .triage-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .triage-row { grid-template-columns: repeat(4, 1fr); }
}
.triage-women { box-shadow: 0 0 0 1px rgba(15,107,92,.16), var(--shadow); }
.triage-btn {
  display: grid; gap: .2rem; justify-items: center; text-align: center;
  text-decoration: none; color: inherit;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 1rem .9rem;
  min-height: 78px;
  box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s, background .15s;
}
.triage-btn:hover { border-color: var(--brand); transform: translateY(-1px); }
.triage-btn strong {
  font-family: var(--display); font-size: 1.08rem; letter-spacing: -.02em; line-height: 1.2;
}
.triage-btn span { color: var(--muted); font-size: .85rem; line-height: 1.35; }
.triage-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.triage-primary span { color: rgba(255,255,255,.85); }
.triage-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.browse-label {
  margin: 0 0 .6rem; text-align: center;
  font-size: .78rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
#urgent { scroll-margin-top: 8rem; }
.lane-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .lane-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .lane-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.lane-card {
  display: grid; gap: .35rem;
  text-decoration: none; color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1rem 1.05rem;
  box-shadow: var(--shadow);
  min-height: 118px;
  min-width: 0;
  transition: border-color .15s, transform .15s, background .15s;
}
.lane-card:hover {
  border-color: var(--brand);
  background: #fff;
  transform: translateY(-1px);
}
.lane-card strong {
  font-family: var(--display);
  font-size: clamp(1.02rem, 3.5vw, 1.12rem);
  letter-spacing: -.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.lane-card > span:last-child {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.lane-kicker {
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand);
}
.lane-women { box-shadow: 0 0 0 1px rgba(15,107,92,.12), var(--shadow); }
.lane-causes .lane-kicker { color: #6b4f0f; }
.lane-causes { box-shadow: 0 0 0 1px rgba(154, 91, 18, 0.14), var(--shadow); }
.lane-warn .lane-kicker { color: var(--warn); }
.lane-warn:hover { border-color: var(--warn); }
.calm-strip {
  margin-top: 1rem;
  display: grid; gap: .75rem;
  background: var(--warn-soft);
  border: 1px solid rgba(154, 91, 18, 0.28);
  border-radius: 16px;
  padding: .95rem 1.05rem;
  color: var(--ink);
  font-size: .92rem;
}
.calm-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.btn-sm { padding: .45rem .8rem; min-height: 38px; font-size: .86rem; }

/* Thumb dock + back top */
.thumb-dock {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: .35rem .2rem calc(.35rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 252, 247, 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(26,23,20,.08);
}
.dock-item {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-size: .62rem; font-weight: 800;
  color: var(--muted); text-decoration: none;
  display: grid; justify-items: center; gap: .1rem;
  padding: .3rem .1rem; min-height: 52px; cursor: pointer;
  border-radius: 12px;
  min-width: 0;
  width: 100%;
}
.dock-item span {
  width: 1.55rem; height: 1.55rem; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--bg); font-size: .85rem; color: var(--ink);
  flex-shrink: 0;
}
.dock-item em {
  font-style: normal;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-item.is-active, .dock-item:hover { color: var(--brand-deep); }
.dock-item.is-active span, .dock-item:hover span {
  background: var(--brand-soft); color: var(--brand-deep);
}
.dock-urgent span,
.dock-urgent:hover span { background: var(--warn-soft); color: var(--warn); font-weight: 800; }
.dock-urgent:hover, .dock-urgent.is-active { color: var(--warn); }


/* Floating helpers fade in instead of popping */
@keyframes floatIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes floatInCenter {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.back-top:not([hidden]) { animation: floatIn .25s ease; }
.resume-banner:not([hidden]) { animation: floatInCenter .35s ease; }

/* Resume banner */
.resume-banner {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px));
  z-index: 65;
  display: flex; align-items: center; gap: .2rem;
  background: var(--ink); color: #fff;
  border-radius: 999px;
  padding: .3rem .4rem .3rem 1rem;
  box-shadow: 0 14px 40px rgba(26,23,20,.32);
  max-width: min(92vw, 26rem);
}
.resume-banner[hidden] { display: none !important; }
.resume-go {
  display: grid; gap: .05rem; text-align: left; min-width: 0;
  background: none; border: 0; color: inherit; font: inherit;
  padding: .3rem .4rem; cursor: pointer;
}
.resume-go span {
  font-size: .66rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; opacity: .72;
}
.resume-go strong {
  font-size: .95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.resume-close {
  flex-shrink: 0;
  background: rgba(255,255,255,.14); border: 0; color: #fff;
  width: 36px; height: 36px; border-radius: 999px;
  font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.resume-close:hover { background: rgba(255,255,255,.26); }
@media (min-width: 960px) {
  .resume-banner { bottom: 1.4rem; }
}
.back-top {
  position: fixed;
  right: 1rem;
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--brand-deep);
  border-radius: 999px;
  padding: .65rem .9rem;
  font: inherit; font-weight: 800; font-size: .85rem;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.back-top[hidden] { display: none !important; }
@media (min-width: 960px) {
  .back-top { bottom: 1.25rem; }
  .thumb-dock { display: none !important; }
  body.has-dock { padding-bottom: 0; }
}
@media (max-width: 959px) {
  .thumb-dock { display: grid; }
  body.has-dock { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .journey-wrap { top: 57px; }
  section[id], .women-card[id], #start, #top { scroll-margin-top: 7.75rem; }
  .hero .lede {
    font-size: 1rem;
    max-width: none;
  }
  .start-section h2 {
    font-size: clamp(1.45rem, 7vw, 2rem);
    padding-inline: .15rem;
  }
  .lane-grid { gap: .65rem; }
  .calm-strip { font-size: .88rem; }
  .header-inner { min-height: 56px; }
  /* Search icon-only is fine; keep Menu visible */
  .search-launch { padding-inline: .7rem; }
}

/* Planner */
.planner {
  display: grid; gap: 1rem;
  max-width: 820px; margin-inline: auto;
}
.planner-form {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px); padding: 1.2rem;
  box-shadow: var(--shadow);
}
.q-block { margin-bottom: 1.1rem; }
.q-title { font-weight: 800; margin: 0 0 .55rem; }
.q-row { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .q-row { grid-template-columns: 1fr 1fr; }
}
.choice-grid { display: grid; gap: .55rem; }
@media (min-width: 640px) {
  .choice-grid:not(.compact) { grid-template-columns: 1fr 1fr; }
}
.choice-grid.compact { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.choice { cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-face {
  display: block; border: 1.5px solid var(--line); background: #fff;
  border-radius: 16px; padding: .85rem .9rem; transition: .15s ease;
  min-height: 64px;
}
.choice-face b { display: block; font-size: .98rem; }
.choice-face small { display: block; color: var(--muted); font-size: .82rem; margin-top: .2rem; line-height: 1.35; }
.choice input:focus-visible + .choice-face { outline: 3px solid var(--brand-soft); }
.choice input:checked + .choice-face {
  border-color: var(--brand); background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.plan-result {
  background: linear-gradient(180deg, #e8f7f1, var(--surface));
  border: 1px solid #b7d9cf; border-radius: var(--radius);
  padding: 1.2rem 1.25rem; box-shadow: var(--shadow);
}
.plan-result .tag {
  display: inline-block; background: var(--brand); color: #fff;
  border-radius: 999px; padding: .18rem .6rem; font-size: .75rem; font-weight: 800; margin-bottom: .5rem;
}
.plan-result h3 { margin-top: 0; }
.plan-result ol, .plan-result ul { color: var(--muted); }
.plan-result .next-links {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem;
}

/* Playbooks */
.playbook-tabs {
  display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .5rem;
  margin-bottom: .85rem; -webkit-overflow-scrolling: touch;
}
.ptab {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: .55rem .95rem; font: inherit; font-weight: 700;
  color: var(--muted); cursor: pointer; min-height: 42px;
}
.ptab.active, .ptab:hover {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.playbook {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow);
}
.playbook[hidden] { display: none !important; }
.pb-head {
  display: flex; flex-wrap: wrap; gap: .7rem; justify-content: space-between;
  align-items: flex-start; margin-bottom: 1rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--line);
}
.pb-head p { margin: .25rem 0 0; color: var(--muted); }
.pb-grid { display: grid; gap: 1.1rem; }
@media (min-width: 800px) { .pb-grid { grid-template-columns: 1fr 1fr; } }
.pb-col h4 { margin: 0 0 .55rem; font-size: 1rem; color: var(--brand-deep); }

.stack-list { list-style: none; margin: 0; padding: 0; }
.stack-list li {
  display: flex; gap: .65rem; padding: .55rem 0;
  border-bottom: 1px dashed var(--line);
}
.stack-list li:last-child { border-bottom: 0; }
.stack-list b { display: block; }
.stack-list small { display: block; color: var(--muted); font-size: .84rem; margin-top: .15rem; }
.dot {
  width: .7rem; height: .7rem; border-radius: 999px; margin-top: .45rem; flex-shrink: 0;
}
.dot.good { background: var(--good); }
.dot.mid { background: var(--mid); }
.dot.soft { background: #c4b8a4; }

.week-chip-row { display: grid; gap: .4rem; }
.day {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: .55rem .7rem; font-size: .9rem;
}
.day b { color: var(--brand-deep); margin-right: .35rem; }
.note { font-size: .84rem; color: var(--muted); }
.plain { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.plain.small { font-size: .9rem; }
.check-preview {
  margin: 0 0 1rem; padding-left: 1.1rem; color: var(--muted);
}

.badge {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: .2rem .6rem; font-size: .72rem; font-weight: 800;
  background: #eee8dc; color: var(--muted); white-space: nowrap;
}
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bias { background: var(--bias-soft); color: var(--bias); }
.pill {
  display: inline-flex; border-radius: 999px; padding: .15rem .5rem;
  font-size: .72rem; font-weight: 800;
}
.pill.bias { background: var(--bias-soft); color: var(--bias); }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }

.callout {
  margin-top: .8rem; padding: .9rem 1rem; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface);
}
.callout.warn { background: var(--warn-soft); border-color: #e2c9a0; }
.callout.tight { margin-top: .5rem; }
.example-box {
  background: var(--brand-soft); border: 1px solid #b7d9cf;
  border-radius: 14px; padding: .9rem 1rem; margin-top: .7rem;
}
.example-box p { margin: .35rem 0 0; color: var(--muted); }
.center-box { text-align: center; max-width: 36rem; margin: 1.2rem auto 0; }

/* Week board */
.week-board {
  max-width: 720px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow);
}
.week-board-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; margin-bottom: .75rem;
}
.progress {
  font-size: .8rem; font-weight: 800; color: var(--brand-deep);
  background: var(--brand-soft); border-radius: 999px; padding: .2rem .55rem;
}
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { margin: .2rem 0; }
.check-list label {
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  padding: .45rem .2rem; border-radius: 10px; min-height: 44px;
}
.check-list label:hover { background: var(--bg); }
.check-list.big label { font-size: 1rem; padding: .55rem .25rem; }
.check-list input { margin-top: .3rem; accent-color: var(--brand); width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

/* Expect */
.expect-track {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.expect-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 1rem; box-shadow: var(--shadow);
}
.expect-card .when {
  display: inline-block; font-size: .75rem; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; color: var(--brand);
  margin-bottom: .35rem;
}
.expect-card p { margin: 0; color: var(--muted); font-size: .93rem; }
.expect-card .mood {
  margin-top: .7rem; font-size: .82rem; font-weight: 700;
  color: var(--brand-deep); background: var(--brand-soft);
  border-radius: 999px; padding: .3rem .65rem; display: inline-block;
}
.warn-card { border-color: #e2c9a0; background: linear-gradient(180deg, #fff8ee, var(--surface)); }
.good-card { border-color: #b7d9cf; background: linear-gradient(180deg, #eef8f3, var(--surface)); }
.timeline-lite { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.timeline-lite li { margin: .4rem 0; }

/* Treatment cards */
.filter-bar {
  display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem;
  margin-bottom: 1rem; -webkit-overflow-scrolling: touch;
}
.chip {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); border-radius: 999px; padding: .45rem .85rem;
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; min-height: 40px;
}
.chip.active, .chip:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.t-grid {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.t-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 0; overflow: hidden;
}
.t-card.dimmed { opacity: .28; filter: grayscale(.35); }
.t-card summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap;
  gap: .45rem; justify-content: space-between; align-items: center;
  padding: .95rem 1rem; font-weight: 700; min-height: 64px;
}
.t-card summary::-webkit-details-marker { display: none; }
.t-card summary::after {
  content: "+"; color: var(--brand); font-weight: 800; font-size: 1.1rem;
}
.t-card[open] summary::after { content: "–"; }
.t-title { font-family: var(--display); font-size: 1.05rem; }
.t-body { padding: 0 1rem 1rem; color: var(--muted); border-top: 1px solid var(--line); }
.t-body p { margin: .55rem 0 0; font-size: .93rem; }
.t-body .bias { margin-top: .65rem; }

/* Checklists grid */
.checklist-grid {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.checklist-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow);
}
.checklist-card.danger {
  border-color: #e2b4b4;
  background: linear-gradient(180deg, #fff7f7, var(--surface));
}
.checklist-top {
  display: flex; justify-content: space-between; gap: .6rem; align-items: start;
  margin-bottom: .55rem;
}
.checklist-actions { margin-top: 1rem; text-align: center; }

/* Accordion */
.accordion details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: .2rem .95rem; margin-bottom: .55rem;
}
.accordion summary {
  cursor: pointer; font-weight: 700; padding: .85rem 0; list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion details[open] summary { border-bottom: 1px dashed var(--line); margin-bottom: .4rem; }
.accordion p, .accordion li { color: var(--muted); }

/* Videos, theater + playlist */
.vid-filters {
  display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .55rem;
  margin-bottom: .85rem; -webkit-overflow-scrolling: touch;
}
.vchip {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); border-radius: 999px; padding: .45rem .9rem;
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; min-height: 40px;
}
.vchip.active, .vchip:hover {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

.video-theater {
  display: grid; gap: 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px); padding: .85rem;
  box-shadow: var(--shadow);
}
@media (min-width: 900px) {
  .video-theater {
    grid-template-columns: 1.45fr .9fr;
    align-items: start;
    padding: 1rem;
  }
}

.player-frame {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  background: #111; border-radius: 14px; overflow: hidden;
}
.player-poster {
  position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer;
  width: 100%; height: 100%; background: #111; color: #fff;
}
/* Locally drawn poster: no thumbnail is fetched from YouTube until play */
.poster-art {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 2.6rem 1.5rem 3.4rem;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1rem, 2.4vw, 1.45rem);
  line-height: 1.25;
  color: rgba(255, 255, 255, .92);
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(15, 107, 92, .55) 0%, transparent 60%),
    radial-gradient(110% 80% at 100% 100%, rgba(154, 91, 18, .38) 0%, transparent 55%),
    #14201d;
  transition: opacity .25s ease;
}
.player-poster:hover .poster-art { opacity: .82; }
.play-orb {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 4.1rem; height: 4.1rem; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(15, 107, 92, .92); color: #fff;
  font-size: 1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.poster-label {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(0,0,0,.55); padding: .35rem .7rem; border-radius: 999px;
}
.player-embed {
  position: absolute; inset: 0;
}
.player-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.now-playing { padding: .75rem .25rem .15rem; }
.now-kicker {
  margin: 0 0 .25rem; font-size: .72rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--brand);
}
.now-playing h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.now-insight { margin: 0 0 .7rem; color: var(--muted); font-size: .95rem; }
.now-meta {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .65rem;
}
.player-nav { display: flex; gap: .45rem; flex-wrap: wrap; }
.btn-sm { padding: .45rem .8rem; font-size: .85rem; min-height: 38px; }

.playlist {
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg);
  max-height: min(70vh, 560px); display: flex; flex-direction: column; overflow: hidden;
}
.playlist-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; padding: .75rem .85rem; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.playlist-head h3 { margin: 0; font-size: 1rem; }
.playlist-count {
  font-size: .75rem; font-weight: 800; color: var(--brand-deep);
  background: var(--brand-soft); border-radius: 999px; padding: .18rem .55rem;
}
.playlist-list {
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .4rem;
  display: grid; gap: .35rem;
}
.plist-item {
  display: grid; grid-template-columns: 96px 1fr; gap: .65rem; align-items: center;
  width: 100%; text-align: left; border: 1px solid transparent;
  background: var(--surface); border-radius: 12px; padding: .4rem;
  cursor: pointer; font: inherit; color: inherit;
}
.plist-thumb {
  width: 96px; height: 54px; border-radius: 8px; display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(15, 107, 92, .5) 0%, transparent 65%),
    #17241f;
  color: rgba(255, 255, 255, .82);
}
.plist-thumb i { font-style: normal; font-size: .85rem; }
.plist-item.active .plist-thumb { background: var(--brand); color: #fff; }
.plist-item b { display: block; font-size: .9rem; line-height: 1.25; }
.plist-item small { display: block; color: var(--muted); font-size: .78rem; margin-top: .15rem; }
.plist-item:hover { border-color: var(--brand); }
.plist-item.active {
  border-color: var(--brand); background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.plist-item.dimmed { display: none; }

.watch-path {
  margin-top: 1.1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 1rem 1.1rem;
}
.watch-path h3 { margin: 0 0 .5rem; }
.watch-path ol { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.watch-path li { margin: .4rem 0; }
.text-link {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 800;
  color: var(--brand-deep); text-decoration: underline; cursor: pointer;
}
.text-link:hover { color: var(--brand); }

.channel-board {
  margin-top: 1.4rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem;
}
.channel-board h3 { margin: 0 0 .75rem; }
.channel-grid {
  display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.channel-grid div {
  background: var(--bg); border-radius: 12px; padding: .75rem .8rem;
  border: 1px solid var(--line);
}
.channel-grid b { display: block; margin-bottom: .2rem; }
.channel-grid span { color: var(--muted); font-size: .88rem; }

@media (max-width: 899px) {
  .playlist { max-height: 340px; }
  .plist-item { grid-template-columns: 84px 1fr; }
  .plist-thumb { width: 84px; height: 48px; }
}

.cta-end { padding-bottom: 3.5rem; }
.cta-end .lede { margin-inline: auto; }

/* Women hub */
.women-toc {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin: 0 0 1.15rem;
  position: sticky;
  top: 118px;
  z-index: 35;
  padding: .55rem .35rem;
  background: rgba(244, 241, 235, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 16px;
  max-width: 100%;
  min-width: 0;
}
.women-toc a {
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  color: var(--brand-deep);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4rem .7rem;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.women-toc a:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.women-card[id] { scroll-margin-top: 7.5rem; }
.women-router { margin: 0 0 1.15rem; }
@media (min-width: 960px) {
  .women-router { grid-template-columns: 1fr 1fr 1fr; }
}
.bias-banner {
  background: var(--bias-soft);
  border: 1px solid rgba(91, 75, 138, 0.25);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin: 0 0 1.25rem;
}
.bias-banner .pill { margin-bottom: .45rem; }
.bias-banner ul { margin: .35rem 0 0; }
.women-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .women-grid { grid-template-columns: 1fr 1fr; }
}
.women-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow);
}
.women-card h3 { margin: 0 0 .55rem; font-size: 1.12rem; }
.women-card h4 {
  margin: .85rem 0 .35rem;
  font-size: .95rem;
  color: var(--brand-deep);
  font-family: var(--font);
  letter-spacing: 0;
}
.women-card .plain { margin: .25rem 0; padding-left: 1.1rem; color: var(--muted); }
.women-card .plain li { margin: .35rem 0; }
.women-card .muted-li { list-style: none; margin-left: -1.1rem; }
.ladder {
  margin: .4rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
}
.ladder li { margin: .65rem 0; }
.ladder b { color: var(--ink); }
.ladder small {
  display: block;
  margin-top: .25rem;
  font-size: .88rem;
  line-height: 1.45;
}
.source-strip {
  margin-top: 1.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.source-strip h3 { margin: 0 0 .55rem; }
.source-links {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
}
.source-links li { margin: .4rem 0; }
.callout {
  border-radius: 14px;
  padding: .85rem 1rem;
  margin: .85rem 0 0;
  border: 1px solid var(--line);
  background: var(--bg);
}
.callout.good {
  background: var(--good-soft);
  border-color: rgba(31, 107, 58, 0.25);
}
.callout.warn {
  background: var(--warn-soft);
  border-color: rgba(154, 91, 18, 0.28);
}
.callout.tight { font-size: .92rem; }


/* Causes hub */
.causes-toc {
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
  margin: 0 0 1.1rem; position: sticky; top: 118px; z-index: 34;
  padding: .55rem .35rem; background: rgba(244,241,235,.94);
  backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 16px;
  max-width: 100%;
}
.causes-toc a {
  text-decoration: none; font-size: .78rem; font-weight: 800;
  color: var(--brand-deep); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: .4rem .7rem;
  min-height: 36px; display: inline-flex; align-items: center;
}
.causes-toc a:hover { background: var(--brand-soft); border-color: var(--brand); }
.cause-grid {
  display: grid; gap: .85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .cause-grid { grid-template-columns: 1fr 1fr; }
}
.cause-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.05rem 1.15rem; box-shadow: var(--shadow);
  min-width: 0;
}
.cause-card.cause-hero,
.cause-card.cause-actions,
#c-connect, #c-bias { grid-column: 1 / -1; }
.cause-card header { margin-bottom: .55rem; }
.cause-card h3 {
  font-family: var(--display); font-size: 1.15rem; letter-spacing: -.02em;
  margin: 0 0 .25rem; line-height: 1.25;
}
.cause-card h4 { margin: .35rem 0 .3rem; font-size: .95rem; }
.cause-head-row {
  display: flex; flex-wrap: wrap; gap: .45rem .65rem;
  align-items: center; justify-content: space-between;
}
.cause-pill-grid {
  display: grid; gap: .55rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .cause-pill-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .cause-pill-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
.cause-pill {
  display: grid; gap: .2rem; text-decoration: none; color: inherit;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px; padding: .75rem .8rem; min-height: 74px;
}
.cause-pill:hover { border-color: var(--brand); background: #fff; }
.cause-pill b { font-size: .92rem; line-height: 1.25; }
.cause-pill span { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.ev-tag {
  display: inline-block; font-size: .68rem; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase;
  border-radius: 999px; padding: .22rem .5rem; white-space: nowrap;
}
.ev-strong { background: #d8f0e8; color: #0c4f43; }
.ev-mixed { background: #f3e7c8; color: #6b4f0f; }
.ev-thin { background: #f0e2f2; color: #5b3b66; }
.ev-fix { background: var(--brand-soft); color: var(--brand-deep); }
.ev-note, .do-note {
  font-size: .9rem; line-height: 1.45; margin: .65rem 0 0;
  padding: .65rem .75rem; border-radius: 12px; background: var(--bg);
  border: 1px dashed var(--line);
}
.do-note { background: #eef7f4; border-style: solid; border-color: rgba(15,107,92,.18); }
.bias-box {
  margin-top: .65rem; padding: .65rem .75rem; border-radius: 12px;
  background: var(--bias-soft, #f3eefc);
  border: 1px solid rgba(91, 75, 138, 0.2);
  font-size: .88rem;
}
.bias-box b { display: block; margin-bottom: .25rem; }
.plain.tight { margin: .25rem 0 0; padding-left: 1.05rem; }
.plain.tight li { margin: .15rem 0; }
.bias-grid {
  display: grid; gap: .65rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .bias-grid { grid-template-columns: 1fr 1fr; }
}
.bias-grid > div {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: .7rem .8rem;
}
.bias-grid h4 { margin: 0 0 .25rem; font-size: .9rem; color: var(--brand-deep); }
.bias-grid p { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.4; }
.do-grid {
  display: grid; gap: .75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .do-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.do-grid > div {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px; padding: .75rem .85rem;
}
.callout.soft {
  background: var(--bg-alt, #f3efe6);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: .9rem 1rem;
  margin-bottom: 1rem;
}
#c-map, #c-pattern, #c-stress, #c-food, #c-labs, #c-allergy, #c-mold, #c-meds,
#c-connect, #c-do, #c-bias, #c-how-to-read { scroll-margin-top: 7.75rem; }


/* Tools hub + simple mode */
.simple-toggle {
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  color: var(--brand-deep); font: inherit; font-size: .78rem; font-weight: 800;
  border-radius: 999px; padding: .4rem .7rem; min-height: 38px; cursor: pointer;
}
.simple-toggle[aria-pressed="true"],
body.simple-mode .simple-toggle {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.mobile-simple-btn {
  display: block; width: calc(100% - 1.5rem); margin: .5rem .75rem;
  border: 1px solid var(--line); background: var(--brand-soft);
  color: var(--brand-deep); font: inherit; font-weight: 800;
  border-radius: 12px; padding: .7rem .85rem; cursor: pointer; text-align: left;
}
body.simple-mode .simple-hide,
body.simple-mode .simple-hide-link { display: none !important; }
body.simple-mode .j-step[data-step="videos"] { display: none; }
/* Simple mode also drops the explanatory aside under each freshness stamp.
   The date and the ageing rate stay: those are information, the sentence
   explaining them is the kind of extra reading Simple mode exists to remove. */
body.simple-mode .freshness-why { display: none; }

.tools-toc {
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
  margin: 0 0 1.1rem; position: sticky; top: 118px; z-index: 34;
  padding: .55rem .35rem; background: rgba(244,241,235,.94);
  backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 16px;
}
.tools-toc a {
  text-decoration: none; font-size: .78rem; font-weight: 800;
  color: var(--brand-deep); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: .4rem .7rem;
  min-height: 36px; display: inline-flex; align-items: center;
}
.tools-toc a:hover { background: var(--brand-soft); border-color: var(--brand); }
.tool-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.1rem 1.15rem; box-shadow: var(--shadow);
  margin-bottom: .9rem; min-width: 0;
}
.tool-head {
  display: flex; flex-wrap: wrap; gap: .45rem .65rem;
  align-items: center; justify-content: space-between; margin-bottom: .45rem;
}
.tool-card h3 {
  font-family: var(--display); font-size: 1.18rem; letter-spacing: -.02em;
  margin: 0; line-height: 1.25;
}
.tool-card h4 { margin: .7rem 0 .35rem; font-size: .95rem; }
.lede-mini { color: var(--muted); margin: 0 0 .65rem; font-size: .95rem; }
.tool-grid {
  display: grid; gap: .75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .tool-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.tool-grid > div {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px; padding: .75rem .85rem;
}
.script-box {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px; padding: .85rem 1rem;
}
.say-script {
  margin: .4rem 0 .75rem; padding: .75rem .9rem;
  border-left: 4px solid var(--brand);
  background: #eef7f4; border-radius: 0 12px 12px 0;
  font-size: .95rem; line-height: 1.45;
}
.faq-list { display: grid; gap: .45rem; }
.faq-item {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); padding: .15rem .7rem;
}
.faq-item summary {
  cursor: pointer; font-weight: 800; padding: .65rem 0;
  list-style: none; display: flex; justify-content: space-between; gap: .5rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--brand); font-weight: 800; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 0 .65rem; font-size: .92rem; line-height: 1.45; }
.cost-table-wrap { overflow-x: auto; max-width: 100%; border-radius: 14px; border: 1px solid var(--line); }
.cost-table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
  min-width: 520px; background: var(--bg);
}
.cost-table th, .cost-table td {
  text-align: left; padding: .65rem .7rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.cost-table th { background: #e7f2ee; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.cost-table tr:last-child td { border-bottom: 0; }
.cost-table td:nth-child(2) { font-weight: 800; white-space: nowrap; color: var(--brand-deep); }
#tools, #photos, #clinic, #faq, #costs, #camouflage, #simple-help, #hope, #g-hope,
#food, #f-real, #f-overlap, #f-swaps, #f-prep, #f-recipes, #f-meds, #f-bias,
#judge, #j-counterfactual, #j-natural, #j-who, #j-clock, #j-protocol, #j-risk, #dismissed,
#pipeline, #pl-read, #pl-close, #pl-early, #pl-warn,
#work, #w-adhere, #w-nonresponse, #w-stopping { scroll-margin-top: 7.75rem; }
.hope-strip { margin-top: 1rem; }
.hope-strip li { margin: .35rem 0; }

@media (max-width: 959px) {
  .simple-toggle { font-size: .72rem; padding: .35rem .55rem; }
  .search-launch-label, .search-kbd { display: none; }
}
.site-footer {
  border-top: 1px solid var(--line); padding: 1.4rem 0 2rem; background: #e8e2d7;
}
.footer-inner p { margin: .2rem 0; }
.footer-inner .muted { font-size: .88rem; color: var(--muted); }
.footer-jumps { margin-top: .55rem; font-size: .9rem; }
.footer-jumps a { font-weight: 700; text-decoration: none; }
.footer-jumps a:hover { text-decoration: underline; }
code {
  font-size: .86em; background: #efe8dc; padding: .1rem .35rem; border-radius: 6px;
}

@media (max-width: 959px) {
  .hero { padding-top: 1.5rem; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; min-height: 48px; }
  .section { padding: 2.1rem 0; }
  section[id] { scroll-margin-top: 5rem; }
  .brand-sub { max-width: 40vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 420px) {
  .brand-sub { display: none; }
}

/* Reduced motion: no scroll animation, no decorative movement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Special paths lane */
.lane-paths { border-color: color-mix(in srgb, var(--warn, #a63e2b) 35%, var(--line, #ddd)); }
.lane-paths .lane-kicker { color: var(--warn, #a63e2b); }
.paths-toc { position: sticky; top: 118px; z-index: 35; }
@media (max-width: 959px) {
  .paths-toc { position: static; }
}

/* Print: this guide gets taken to appointments, so make paper sane */
@media print {
  .site-header, .journey-wrap, .thumb-dock, .back-top, .current-section,
  .outline-toggle,
  .resume-banner, .search-modal, .mobile-nav, .women-toc, .causes-toc,
  .tools-toc, .filter-bar, .vid-filters, .playbook-tabs, .video-theater,
  .playlist, .skip-link, .triage-row, .lane-grid, .search-chips {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000;
    font-size: 11pt;
    padding-bottom: 0 !important;
  }
  .wrap { width: 100%; padding-inline: 0; }
  .section { padding: .6rem 0; break-inside: auto; }
  /* open every collapsed card so nothing prints blank */
  details > summary { list-style: none; }
  details:not([open]) > *:not(summary) { display: revert !important; }
  .t-card, .faq-item, .accordion details { break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; }
  .tool-card, .women-card, .cause-card, .checklist-card, .expect-card {
    box-shadow: none !important;
    border: 1px solid #bbb;
    break-inside: avoid;
  }
  /* show destinations for external references */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }
  a { text-decoration: underline; color: #000; }
}

/* ============================================================
   REFINEMENT LAYER
   Editorial polish: real typographic hierarchy, less uniform
   plastic, and motion that is felt rather than noticed.
   ============================================================ */

/* Paper grain. Kills the flat-gradient look, costs one inline SVG. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* Variable-font craft: optical sizing that actually changes with size */
h1 {
  font-variation-settings: "opsz" 144;
  letter-spacing: -.035em;
  line-height: 1.02;
}
h2 { font-variation-settings: "opsz" 96; letter-spacing: -.028em; }
h3 { font-variation-settings: "opsz" 48; letter-spacing: -.018em; }
h4 { font-variation-settings: "opsz" 24; }

/* Eyebrow gets an editorial rule instead of floating alone */
.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  letter-spacing: .12em; font-size: .72rem;
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px; min-width: 1.5rem;
  background: linear-gradient(90deg, rgba(15,107,92,.35), transparent);
}
.center-head .eyebrow { justify-content: center; }
.center-head .eyebrow::after { display: none; }

/* Section heads: more air above, tighter block, clearer rag */
.section-head { margin-bottom: 1.75rem; }
.section-head p { max-width: 46ch; }
.center-head p { margin-inline: auto; }

/* Cards: crisp edge, whisper of a shadow. Uniform heavy drop shadows
   on every surface are what makes a page look machine-assembled. */
.lane-card, .tool-card, .women-card, .cause-card, .expect-card,
.checklist-card, .playbook, .week-board, .planner-form, .hero-stat-card,
.channel-board, .video-theater, .triage-btn {
  box-shadow: 0 1px 2px rgba(26, 23, 20, .04), 0 8px 24px -14px rgba(26, 23, 20, .18);
}
.tool-card, .women-card, .cause-card { border-radius: 16px; }

/* Numbered card headings read as editorial numerals */
.tool-card h3, .women-card h3, .cause-card h3 { font-weight: 600; }

/* Hero: primary action leads, secondaries share a row instead of
   three identical stacked capsules */
@media (max-width: 959px) {
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }
  .hero-actions .btn { width: 100%; min-height: 46px; font-size: .92rem; }
  .hero-actions .btn.primary { grid-column: 1 / -1; min-height: 54px; font-size: 1rem; }
}

/* Trust row: quieter, more like a masthead credit line than four buttons */
@media (max-width: 960px) {
  .trust-row {
    grid-template-columns: 1fr 1fr;
    max-width: none;
    gap: .3rem .9rem;
  }
  .trust-row span {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: .15rem 0;
    text-align: left;
    font-size: .82rem;
    color: var(--muted);
  }
}

/* Links inside prose: underline that sits below the baseline properly */
.tool-card p a, .women-card p a, .cause-card p a, .plain a, .lede a, .fine-print a {
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(15, 107, 92, .4);
}
.tool-card p a:hover, .women-card p a:hover, .cause-card p a:hover,
.plain a:hover, .lede a:hover, .fine-print a:hover {
  text-decoration-color: var(--brand);
}

/* Accessibility: one clear, consistent focus ring everywhere */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Tables read as data, not as decorated boxes */
.cost-table th {
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--brand-deep);
}
.cost-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .45); }

/* Section rhythm: a hairline instead of another gradient band */
.section + .section { border-top: 1px solid rgba(221, 212, 198, .55); }
.section.alt + .section, .section + .section.alt { border-top: 0; }



/* Swap table: this is prose comparison, not a price list, so it must not
   inherit the cost table's bold nowrap money column. */
.swap-table td:nth-child(2) {
  font-weight: 600;
  white-space: normal;
  color: var(--warn);
}
.swap-table td:nth-child(3) { color: var(--brand-deep); }
.swap-table { min-width: 0; }

/* On a phone a multi-column table is unreadable, so each row becomes a
   small labelled block instead of something to scroll sideways. Used by the
   reflux swap table and by the protein/iron/zinc reference tables, which
   otherwise made a phone reader scroll sideways to see the actual numbers. */
@media (max-width: 700px) {
  .swap-wrap, .stack-wrap { overflow-x: visible; border: 0; border-radius: 0; }
  .swap-table, .stack-table { min-width: 0; background: transparent; }
  .swap-table thead, .stack-table thead { display: none; }
  .swap-table tr, .stack-table tr {
    display: block;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: .7rem .85rem;
    margin-bottom: .55rem;
  }
  .swap-table tbody tr:nth-child(odd), .stack-table tbody tr:nth-child(odd) { background: var(--bg); }
  .swap-table td, .stack-table td {
    display: grid;
    grid-template-columns: 1fr;
    gap: .1rem;
    border: 0;
    padding: .3rem 0;
  }
  .swap-table td + td, .stack-table td + td { border-top: 1px dashed var(--line); }
  .swap-table td::before, .stack-table td::before {
    content: attr(data-l);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* Floating helpers sit above text, so make them read as an overlay rather
   than a collision, and keep the end of the page clear of them. */
.back-top {
  backdrop-filter: blur(8px);
}
@media (max-width: 959px) {
  body.has-dock { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   FIELD-GUIDE LAYER
   Genre: plain-language clinical reference notes. Warm paper, dense,
   scannable while frightened. Decisions recorded in DESIGN-CHARTER.md.
   ============================================================ */

:root {
  /* Radius is a scale with meaning, not a default applied everywhere.
     Pills are reserved for badges and tags: things that are genuinely
     label-shaped. Buttons and cards are rectangles with softened corners. */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
}

/* Undo the capsule-everything default */
.btn, .nav-toggle, .search-launch, .mobile-search-btn, .simple-toggle,
.chip, .schip, .vchip, .ptab, .j-step, .j-search, .back-top,
.resume-banner, .resume-close, .cause-pill, .triage-btn, .search-close,
.women-toc a, .causes-toc a, .tools-toc a, .j-more-panel a, .progress {
  border-radius: var(--r-sm);
}
.lane-card, .tool-card, .women-card, .cause-card, .expect-card,
.checklist-card, .playbook, .week-board, .planner-form, .channel-board,
.video-theater, .callout, .bias-box, .bias-banner, .example-box,
.script-box, .faq-item, .day, .do-grid > div, .tool-grid > div,
.bias-grid > div, .search-dialog, .search-result, .plist-item, .t-card {
  border-radius: var(--r-md);
}
.hero-stat-card, .plan-result, .answer-block { border-radius: var(--r-lg); }
/* Badges and tags stay label-shaped: that is what the form means */
.badge, .pill, .ev-tag, .brand-mark, .dock-item span, .mini-flow span,
.playlist-count, .lane-kicker { border-radius: var(--r-pill); }
.dock-item, .search-kbd, .search-esc { border-radius: var(--r-xs); }

/* Wordmark instead of a glyph in a coloured square */
.brand { display: block; line-height: 1.1; }
.brand strong {
  font-family: var(--display);
  font-variation-settings: "opsz" 40;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.brand-sub {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Masthead: a publication credit line, not a marketing stack ---- */
.hero { padding: 2.25rem 0 1.5rem; }
.masthead {
  border-bottom: 2px solid var(--ink);
  padding-bottom: .85rem;
  margin-bottom: 1.6rem;
}
.masthead h1 {
  font-size: clamp(2.3rem, 6.2vw, 4rem);
  font-weight: 600;
  margin: 0 0 .45rem;
}
.masthead-meta {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  align-items: baseline;
  margin: 0;
  font-size: .95rem;
  color: var(--muted);
  max-width: 52ch;
}
.masthead-meta span {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--warn);
  white-space: nowrap;
}

/* ---- The answer, given the weight it deserves ----
   This is the page's real content, so it opens the page. Large numerals
   against small labels supply the scale contrast the page was missing. */
.answer-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  padding: 1.35rem 1.4rem 1.2rem;
  margin-bottom: 1.4rem;
}
.answer-kicker {
  margin: 0 0 .9rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.answer-flow { list-style: none; margin: 0; padding: 0; }
.answer-flow li {
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  gap: .1rem .9rem;
  align-items: baseline;
  padding: .62rem 0;
  border-top: 1px solid rgba(221, 212, 198, .8);
}
.answer-flow li:first-child { border-top: 0; padding-top: 0; }
.answer-flow b {
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  font-size: 2.1rem;
  font-weight: 500;
  line-height: .95;
  color: var(--brand);
  font-feature-settings: "tnum" 1;
}
.answer-flow div { font-size: 1.02rem; line-height: 1.45; }
.answer-flow a { font-weight: 600; }
.answer-foot {
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--muted);
  max-width: 60ch;
}

/* ---- Colour legend: the palette already means something, so say so ---- */
.legend {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center;
  padding: .75rem .9rem;
  background: rgba(255, 255, 255, .4);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  font-size: .82rem;
  color: var(--muted);
}
.legend-title {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
  width: 100%;
}
.legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.legend-item i { font-style: normal; }
@media (min-width: 700px) { .legend-title { width: auto; } }

/* ---- Motion: response, not arrival ----
   Content is present the moment it renders. Movement happens when the
   reader does something, which is the only time it carries information. */
.btn, .lane-card, .triage-btn, .cause-pill, .t-card summary,
.faq-item summary, .chip, .schip, .dock-item, .j-step {
  transition: background-color .14s ease, border-color .14s ease,
              color .14s ease, box-shadow .14s ease;
}
.btn:active, .triage-btn:active, .lane-card:active, .cause-pill:active {
  transform: translateY(1px);
}
.lane-card:hover, .triage-btn:hover, .cause-pill:hover {
  transform: none;
  border-color: var(--brand);
  background: #fff;
}
details[open] > .t-body, details[open] > p, details[open] > div {
  animation: unfold .18s ease-out;
}
@keyframes unfold {
  from { opacity: .4; transform: translateY(-2px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active, .triage-btn:active, .lane-card:active, .cause-pill:active { transform: none; }
  details[open] > .t-body, details[open] > p, details[open] > div { animation: none; }
}

/* Journey rail: a running head, not a row of badges.
   The old version nested a chip inside a circle inside a glyph, and numbered
   sections 1-8 as if they were required steps, which contradicts a guide built
   for jumping straight to your own situation. Position is shown by weight and
   a rule, which is what a running head has always done. */
.journey-bar { gap: 0; padding: .15rem 0; }
.j-step {
  border: 0;
  background: none;
  border-radius: 0;
  padding: .55rem .75rem;
  min-height: 40px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  gap: 0;
}
.j-step i { display: none; }
.j-step:hover {
  background: none;
  color: var(--ink);
  border-bottom-color: var(--line);
}
.j-step.active {
  background: none;
  color: var(--brand-deep);
  font-weight: 700;
  border-bottom-color: var(--brand);
}
.j-search {
  width: auto; height: 40px;
  border: 0; background: none;
  border-radius: 0;
  padding: .55rem .25rem .55rem .75rem;
  font-size: .85rem; font-weight: 600;
  color: var(--brand-deep);
  border-bottom: 2px solid transparent;
}
.j-search:hover { background: none; border-bottom-color: var(--brand); }
.j-more-menu > summary {
  border: 0; background: none; border-radius: 0;
  padding: .55rem .75rem;
  border-bottom: 2px solid transparent;
  color: var(--muted); font-weight: 600; font-size: .85rem;
}
.j-more-menu[open] > summary,
.j-more-menu.has-active > summary {
  background: none;
  color: var(--brand-deep);
  border-bottom-color: var(--brand);
}

/* End-of-section next link. In the flow, so it never sits on top of the text
   it belongs to, and it reads as "you have finished this part" rather than as
   a control hovering over the page. */
.section-next {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  margin-top: 1.75rem;
  padding: .7rem 1.1rem .7rem 0;
  text-decoration: none;
  color: var(--brand-deep);
  border-top: 2px solid var(--ink);
  width: 100%;
  min-height: 48px;
}
.section-next[hidden] { display: none !important; }
.section-next span {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.section-next strong {
  font-family: var(--display);
  font-variation-settings: "opsz" 48;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.section-next strong::after { content: " \2192"; }
.section-next:hover strong { color: var(--brand); }
.section-next:hover { border-top-color: var(--brand); }

/* Callout titles are real headings so the document outline has no gaps,
   but they should still read as a box label, not a section heading. */
.callout-title {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 .35rem;
}

/* Spacing utilities. These replaced 45 inline style="" attributes, which is
   what allowed 'unsafe-inline' to be dropped from the style-src policy. */
.u-note { margin: 0; font-size: .93rem; }
.u-m0 { margin: 0; }
.u-mb-05 { margin: 0 0 .5rem; }
.u-my-035 { margin: .35rem 0; }
.u-mt-035, .u-mt-035t { margin-top: .35rem; }
.u-mt-04 { margin: .4rem 0 0; }
.u-mt-05 { margin-top: .5rem; }
.u-mt-055 { margin: .55rem 0 0; }
.u-mt-06 { margin: .6rem 0 0; }
.u-mt-065 { margin-top: .65rem; }
.u-mt-07 { margin-top: .7rem; }
.u-mt-075 { margin-top: .75rem; }
.u-mt-085 { margin-top: .85rem; }
.u-mt-1 { margin-top: 1rem; }
.u-mt-125 { margin-top: 1.25rem; }

/* Tight desktop band: the nav appears at 960px, and between there and ~1140px
   the masthead plus 8 nav items plus the two header buttons do not fit on one
   row, so the nav wraps and overlaps the sticky journey rail below. Trim the
   wordmark and the nav spacing just in that band.
   Still required after the wordmark got SHORTER in the 2026-07-25 rebrand:
   removing this rule reproduces the wrap at 1024px and 1060px. Measured, not
   assumed. Guarded by qc/tests/header-fit.mjs. */
@media (min-width: 960px) and (max-width: 1140px) {
  .brand strong { font-size: .95rem; }
  .brand-sub { font-size: .6rem; letter-spacing: .1em; }
  .nav { gap: .25rem; }
  .nav a { padding-left: .45rem; padding-right: .45rem; font-size: .84rem; }
}

/* Recipe at-a-glance line. Serves, time, keeps, freezes: the things you need
   before you decide to cook, not after you have read the method. */
.recipe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .55rem;
  margin: .1rem 0 .7rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--brand-deep);
  letter-spacing: .01em;
}
.recipe-meta span {
  background: var(--brand-soft);
  border-radius: 5px;
  padding: .2rem .5rem;
}
.recipe-note { margin-top: .5rem; }

/* Per-section freshness. Medical content ages at very different rates: the
   pipeline card is stale in months, the handling playbook in years. A single
   "Updated July 2026" in the footer told a reader nothing about which. */
.freshness {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .5rem;
  margin: .8rem 0 0;
  font-size: .72rem;
  color: var(--muted);
}
.center-head .freshness { justify-content: center; }
.freshness-date {
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.freshness-rate {
  font-weight: 700;
  color: var(--brand-deep);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: .12rem .5rem;
}
.freshness-why { flex: 1 1 100%; }
.center-head .freshness-why { text-align: center; }
@media (max-width: 700px) {
  .freshness { font-size: .68rem; }
}

/* Corrections. The site's credibility is the entire product, and it has
   already had to publish one factual correction. Without a reported-error
   route, mistakes survive until the author personally trips over them. */
.footer-correct {
  margin: .1rem 0 .9rem;
  max-width: 62ch;
  font-size: .84rem;
  color: var(--muted);
}

/* Reading time counts only what is visible: content inside a collapsed
   <details> is not read until it is opened, and counting it would make the
   food section claim 47 minutes when the page as presented is a third of that. */
.freshness-time { font-weight: 700; }
.freshness-time::after { content: ""; }

/* ============================================================ dark scheme
   The reader this site is written for is frequently looking at it late at
   night, anxious, on a phone. That is not a preference, it is the primary
   use case, so dark is a first-class scheme rather than an inversion.

   Warm near-black rather than pure black, to keep the paper identity. The
   semantic colour meanings are unchanged: green still means stronger
   evidence, amber caution, purple bias. Only their lightness flips, because
   on a dark ground the readable version of a colour is the light one.

   Every pairing here is verified by qc/tests/contrast-test.mjs, which walks
   every distinct colour/background/size combination in BOTH schemes. */
/* ===========================================================================
   Dark mode: DISABLED by the owner, 2026-07-30. "Don't make it dark, no
   brown." Every visitor gets the paper scheme, at night included. The block
   below is kept intact but gated behind `not all`, which never matches, so
   re-enabling later is a one-line change rather than an archaeology dig.
   qc/tests/dark-surfaces.mjs now asserts the OPPOSITE of its original claim:
   under a dark OS preference the page must still render as paper.
   ======================================================================== */
@media not all {
  :root {
    /* Lifted off pure black to a warm charcoal. Near-black plus bright accents
       is the thing that makes a dark theme look cheap, and it is harsher to
       read at night, which is the whole reason this scheme exists. */
    /* Recut 2026-07-30 after the owner's verdict on the first dark palette:
       "crappy colors". The diagnosis was value compression. bg #1a1714 to
       surface #262119 was a whisper of a step, and every accent was pulled
       down toward the same brown band, so the scheme read as murk. The dark
       themes that look expensive (Linear is the reference) run a DEEP floor
       with a wide value range and let the accents carry real chroma against
       it. Warm hue bias stays; the mud goes. */
    --bg: #131110;
    --bg-alt: #191512;
    --surface: #1f1a15;
    /* Not white. Warm off-white, brighter than the first cut because the
       floor is deeper: same glare ceiling, more range under it. */
    --ink: #ece6da;
    --muted: #ab9f8e;
    --line: #362f26;
    /* Luminous against the deep floor, not neon. The first cut desaturated
       these into politeness; on #131110 they can afford chroma and still sit
       calm. All pairings re-checked AA by contrast-test.mjs in both schemes. */
    --brand: #7cc9ab;
    --brand-deep: #97d8bd;
    --brand-soft: #142f27;
    --warn: #dfab66;
    --warn-soft: #302410;
    --danger: #e4928a;
    --bias: #b2a5e0;
    --bias-soft: #251f3c;
    --good: #84cb9c;
    --good-soft: #132e1e;
    --mid: #8fbcda;
    --shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  }
  body {
    background:
      radial-gradient(900px 480px at 0% -10%, #0c231d 0%, transparent 55%),
      radial-gradient(800px 420px at 100% 0%, #271d0f 0%, transparent 50%),
      var(--bg);
  }
  /* Cards and panels that were hardcoded white in the light scheme. */
  .tool-card, .cause-card, .lane-card, .women-card, .t-card, .checklist-card,
  .expect-card, .faq-item, .search-modal, .search-result, .accordion details,
  .playbook-panel, .cost-table, .callout, .resume-banner, .thumb-dock, .site-header,
  .journey-wrap, .mobile-nav {
    background-color: var(--surface);
    color: var(--ink);
  }
  /* Images and the share card are authored light; take the glare off. */
  img { filter: brightness(.92) contrast(1.02); }

  /* Every hardcoded light background in the light scheme, enumerated by
     scanning styles.css for background declarations above 55% luminance
     rather than by hunting them one failure at a time. */
  .lane-card:hover, .triage-btn:hover, .cause-pill:hover,
  .choice-face, .search-hint kbd, .search-launch[aria-expanded="true"],
  .search-bar { background: var(--bg-alt); color: var(--ink); }
  .do-note, .say-script { background: #102822; }
  .plan-result { background: #0e2923; }
  .badge { background: #2b261e; color: var(--ink); }
  .warn-card { background: #251c11; }
  .good-card { background: #0f2819; }
  .checklist-card.danger { background: #271616; }
  .ev-strong { background: #0e2821; }
  .ev-mixed { background: #2b210c; }
  .ev-thin { background: #241b2e; }
  .bias-box { background: #1f1a34; }
  .callout.soft { background: #1a1713; }
  .cost-table th { background: #112721; }
  .site-footer { background: #161310; }
  code { background: #2a251e; color: var(--ink); }
  .search-result-title mark, .search-result-snip mark {
    background: #5c4410; color: #ffe8a3;
  }

  /* Text sitting ON the brand colour. In light mode --brand is dark and the
     text on it is white; in dark mode --brand is light, so the text on it has
     to become dark or it disappears. Same rule, inverted. */
  .btn.primary, .triage-primary, .plan-result .tag, .brand-mark,
  .ptab.active, .ptab:hover, .chip.active, .chip:hover,
  .vchip.active, .vchip:hover, body.simple-mode .simple-toggle,
  .j-step.active i, .j-more-menu.has-active > summary i {
    color: #0c231e;
  }
  .btn.primary span, .triage-primary span, .triage-primary strong,
  .btn.primary strong { color: #0c231e; }

  /* Evidence tags: backgrounds were flipped above, the label colours too. */
  .ev-strong { color: #8adcc6; }
  .ev-mixed  { color: #e8c67f; }
  .ev-thin   { color: #cfa9dc; }

  .lane-kicker { color: var(--brand-deep); }
  .lane-causes .lane-kicker { color: var(--warn); }

  .skip-link { background: var(--ink); color: var(--bg); }

  /* Two things only visible at mobile widths, which is exactly why a
     desktop-only contrast sweep never saw them.
     .nav-toggle sets no colour of its own, so it inherited the browser default
     black: fine on cream, 1.3:1 on charcoal. The thumb dock and the mobile nav
     both hardcode a near-white rgba background that outranked the surface
     override above. */
  .nav-toggle { color: var(--ink); }
  .thumb-dock { background: rgba(38, 33, 25, 0.96); }

  /* The four sticky section TOCs hardcode a near-white translucent background.
     In dark mode they rendered as glaring cream slabs pinned to the top of
     every hub section. They passed the contrast test, because their chips are
     dark-on-light and legible; they just looked broken. */
  .tools-toc, .causes-toc, .women-toc, .paths-toc {
    background: rgba(34, 30, 25, 0.94);
  }
  /* The other status dots use theme variables; this one was a hardcoded tan
     and stayed the lightest thing on a dark page. */
  .dot.soft { background: #5c5446; }
  .mobile-nav { background: rgba(38, 33, 25, 0.98); }

  /* The big 01-05 numerals are a quiet dark green on cream. Rendered in the
     accent colour on dark they became the loudest thing on the page, which is
     backwards: they are ordinals, not the content. */
  .answer-flow b { color: var(--muted); opacity: .75; }

  /* Underlines on dark carry more visual weight than on paper, and the answer
     block is six links in five short lines. Thin them out. */
  a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
  a:hover, a:focus-visible { text-decoration-color: currentColor; }

  /* White alpha overlays. On paper these are a subtle lift; on a dark ground
     they become a grey wash that reads as a different, lighter surface.
     They pass AA either way, so the contrast test cannot catch this: it is a
     look problem, found by looking. Same effect, inverted. */
  .legend { background: rgba(255, 255, 255, .045); }
  .cost-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .035); }
  .trust-row span { background: rgba(255, 255, 255, .06); }
  .resume-close { background: rgba(255, 255, 255, .12); }
  .resume-close:hover { background: rgba(255, 255, 255, .2); }

  /* Recut 2026-07-30, same pass as the palette above. With the brighter
     accents, anything filled SOLID with --brand or --mid became a glowing
     slab, and dark-surfaces.mjs correctly flagged four of them. The dark
     grammar for an active state is a tinted fill with the accent as text
     and border (what the expensive dark themes do), not a solid bright
     chip. Light mode keeps its solid fills; there the brand is deep. */
  .chip.active, .chip:hover,
  .vchip.active, .vchip:hover,
  .ptab.active, .ptab:hover,
  .btn.primary, .triage-primary {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
  }
  .btn.primary, .btn.primary span, .btn.primary strong,
  .triage-primary, .triage-primary span, .triage-primary strong {
    color: var(--brand);
  }
  .plist-item.active .plist-thumb { background: var(--brand-soft); color: var(--brand); }
  .j-step.active i, .j-more-menu.has-active > summary i {
    background: var(--brand-soft); color: var(--brand);
  }
  /* An indicator dot is a mark, not text: AA does not apply, so it can drop
     to a deeper cut of the same hue instead of glowing. */
  .dot.mid { background: #4a7c9e; }
  .dot.good { background: #3f7d55; }

  /* Lamplight, not greyscale: display type runs a step warmer and brighter
     than body ink, so headlines glow faintly cream against the deep floor
     instead of sharing one value with the prose. This is the cheapest
     richness a dark editorial page can buy. */
  .section-head h2, .site-title, .answer-flow .answer-title, h1 {
    color: #f6eedc;
  }
  /* The section-opening rule reads as structure in light mode but as a
     glare bar in dark. Half-strength keeps the anchor without the shout. */
  .section-head { border-top-color: #57503f; }
  .wrap > .section-head, .wrap > .section-head.center-head { border-top-color: #57503f; }
}

/* Funding disclosure. The site now has a commercial interest, and its entire
   method is asking who profits from a claim. Applying that to itself, in the
   open, is the only version of this that stays consistent. */
.funding {
  max-width: 68ch;
  margin: .2rem 0 1.1rem;
  padding: .9rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 8px);
  background: var(--bg-alt);
  font-size: .84rem;
  color: var(--muted);
}
.funding p { margin: 0 0 .55rem; }
.funding p:last-child { margin-bottom: 0; }
.funding-head { color: var(--ink); }

/* The masthead tagline is hidden on narrow screens by a rule at max-width
   420px, but the later refinement layer re-declares `display: block`
   unconditionally and outranks it by source order. The result was
   "SERIOUS EVIDENCE, PL…" truncated mid-word on a phone, which looks like a
   bug rather than a design. Truncation is never better than absence here, so
   drop it wherever the header is tight. Must stay at the end of the file. */
@media (max-width: 700px) {
  .brand-sub { display: none; }
}

/* ==========================================================================
   EDITORIAL LAYER, 2026-07-28
   The page had become card soup: a bordered rounded rectangle inside a
   bordered rounded rectangle inside another, with almost no scale contrast
   between a card title and body text. Everything had the same visual weight,
   so nothing had any. Three moves, in order of how much they change:

   1. ONE border depth. A container and its children may not both be outlined.
      Nested items group by tone and space instead.
   2. Real scale contrast. Card titles step up into the display face at a size
      that reads as a heading, not as bold body text.
   3. A spine. Major cards hang off a left rule, so the eye has one edge to
      track down a 60,000px page instead of scanning box outlines.
   ========================================================================== */

/* --- 1. one border depth ------------------------------------------------- */
.tool-card, .cause-card, .checklist-card, .expect-card {
  border: 0;
  border-left: 2px solid var(--line);
  border-radius: 0;
  padding-left: clamp(1rem, 2.4vw, 1.9rem);
  background: transparent;
  box-shadow: none;
}
.tool-card, .cause-card { margin-block: clamp(2.2rem, 4vw, 3.4rem); }
/* the spine picks up brand colour on the cards that carry an action */
.tool-card:has(.do-note), .cause-card:has(.do-note) { border-left-color: var(--brand); }

/* nested items lose their outlines entirely and group by tone */
.cause-pill, .lane-card, .women-card, .mix-card, .do-grid > div, .tool-grid > div {
  border: 0;
  border-radius: 6px;
  background: var(--bg-alt);
}
.cause-pill { padding: .8rem .9rem; }
.cause-pill:hover, .lane-card:hover { background: var(--surface); }

/* The sticky section TOC is navigation, not a panel.
   Reworked 2026-07-30: the earlier treatment was pill chips on a translucent
   blurred band. Mid-scroll, that renders as boxes floating over body text,
   which reads as debris, and pill radius on navigation violates this site's
   own charter (pills are for badges and tags). The editorial answer is an
   apparatus rail: an opaque band the colour of the page, plain links, one
   hairline rule underneath. It reads as a running head, not as UI chrome. */
.tools-toc, .causes-toc, .women-toc, .paths-toc {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding-inline: 0;
  background: var(--bg);
  backdrop-filter: none;
  gap: 0 .35rem;
}
.tools-toc a, .causes-toc a, .women-toc a, .paths-toc a {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: .55rem .45rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.tools-toc a:hover, .causes-toc a:hover, .women-toc a:hover, .paths-toc a:hover {
  background: transparent;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- 2. scale contrast --------------------------------------------------- */
.tool-card > header h3, .cause-card > header h3,
.tool-head h3, .cause-card h3 {
  font-family: var(--display);
  font-variation-settings: "opsz" 48;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  line-height: 1.12;
  letter-spacing: -.018em;
  margin: 0 0 .35rem;
}
.tool-card h4, .cause-card h4 {
  font-size: 1.02rem;
  letter-spacing: -.005em;
  margin-top: 1.5rem;
}
.section-head h2 {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.028em;
}

/* --- 3. section openers get presence ------------------------------------- */
.section-head.center-head { text-align: left; }
.center-head .freshness, .center-head .freshness-why { justify-content: flex-start; text-align: left; }
.section-head {
  max-width: 62ch;
  padding-top: clamp(1rem, 3vw, 2.4rem);
  border-top: 3px solid var(--ink);
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.section-head .eyebrow {
  font-size: .68rem;
  letter-spacing: .18em;
  margin-bottom: .5rem;
}

/* The section head was still centred as a block, so a left-aligned ragged edge
   floated in the middle of the page and the rule above it had nothing to sit
   against. Pin it to the left edge and let the rule run the full measure. */
.wrap > .section-head,
.wrap > .section-head.center-head {
  margin-inline: 0;
  max-width: 46ch;
  border-top: 3px solid var(--ink);
}
.section-head.center-head > * { margin-inline: 0; }
.section-head p { max-width: 46ch; }

/* Remaining outlined panels. Same rule as the cards: group by tone, not by
   drawing another rectangle around something already inside one. */
.callout, .legend, .bias-banner {
  border: 0;
  border-left: 2px solid var(--line);
  border-radius: 0;
  padding-left: 1.1rem;
  background: transparent;
}
.callout.soft { background: transparent; }
.callout.warn { border-left-color: var(--warn); }
.bias-banner { border-left-color: var(--bias); }

/* Chip rows are navigation. They do not need a container, but the sticky
   band must stay OPAQUE: transparent here let body text ghost through the
   rail mid-scroll, which read as broken. Page colour, not glass. */
.tools-toc, .causes-toc, .women-toc, .paths-toc {
  justify-content: flex-start;
  background: var(--bg);
  backdrop-filter: none;
}

/* .callout.soft is two classes and outranks the single-class rule above, so
   the legend panel kept its full outline while every neighbour lost theirs. */
.callout.soft, .callout.warn, .callout.good {
  border: 0;
  border-left: 2px solid var(--line);
  border-radius: 0;
  padding-left: 1.1rem;
  background: transparent;
}
.callout.warn { border-left-color: var(--warn); }
.callout.good { border-left-color: var(--good); }

/* ===========================================================================
   Revision 2026-07-30: editorial section openers
   ---------------------------------------------------------------------------
   Reference: award-winning long-form science journalism (Quanta Magazine).
   Its section openers do four things this page was doing only two of:
   a coloured small-caps eyebrow over a rule, a large serif headline on tight
   leading, a SERIF DECK set distinctly larger than body copy, and real air
   before the body starts.

   The deck is the piece that was missing. It was set in body sans at body size
   in --muted, so the opener read as "heading, then more text" instead of
   "heading, then a stated promise, then the detail".

   Note on italics: Quanta sets its deck in serif italic. Fraunces is
   self-hosted in the upright cut only (see @font-face at the top of this file,
   there is no fraunces-italic-*.woff2), so asking for italic here would make
   the browser synthesise a slanted upright. A faked oblique on a high-contrast
   serif looks broken. The deck is therefore upright Fraunces at a lighter
   weight, which carries the same editorial signal honestly.
   ======================================================================== */

.section-head > p:not(.eyebrow):not(.freshness) {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 28;
  font-weight: 370;
  font-size: clamp(1.1rem, 1.7vw, 1.36rem);
  line-height: 1.46;
  letter-spacing: -.008em;
  color: var(--text);
  opacity: .88;
  max-width: 44ch;
  margin: .85rem 0 0;
  text-wrap: pretty;
}

/* Scale contrast: the headline needs to clear the deck by a visible step, not
   a measurable one. Deck tops out at 1.36rem, so the headline floor rises. */
.section-head h2 {
  font-size: clamp(2.35rem, 5.4vw, 3.75rem);
  line-height: .99;
  letter-spacing: -.032em;
}

/* Air between the opener and the first thing under it. Award-winning editorial
   pages are mostly space around the type; this page was running the body
   straight into the deck. */
.section-head {
  margin-bottom: clamp(1.9rem, 4vw, 3rem);
  padding-bottom: .2rem;
}

/* The freshness strip is metadata, not part of the opener's voice. Push it
   down and lighten it so it stops competing with the deck. */
.section-head .freshness { margin-top: 1.5rem; }

@media (max-width: 640px) {
  .section-head > p:not(.eyebrow):not(.freshness) { max-width: none; }
}

/* ==========================================================================
   CHARTS, 2026-07-30
   Styles for the four hand-built inline SVG figures added to #j-counterfactual,
   #j-clock and #w-adhere. No script, no library, no external request, no
   animation. Four rules hold this together:

   1. No text ever sits on top of a coloured bar. --brand and --warn invert
      between the two schemes, so any fixed text colour on a bar passes in one
      and fails in the other. Labels live in the whitespace.
   2. Text colour is declared with `color` and painted with
      `fill: currentColor`. contrast-test.mjs reads getComputedStyle().color,
      not fill. Setting fill alone would make the test measure a colour that is
      not on screen.
   3. Reference lines are drawn twice: a --bg halo underneath, then --ink on
      top. A dashed ink rule crossing a --brand bar is otherwise invisible in
      light mode.
   4. font-size in px inside a viewBox is user units, so it scales with the
      chart. The max-width cap is what keeps a 13px label from rendering at
      38px inside the 1080px wrap.
   ========================================================================== */

.chart-fig {
  margin: 1.5rem 0 1.7rem;
  padding: 0;
}
.chart-fig svg {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: auto;
  overflow: visible;
}

/* Caption. Carries the finding in words, so a screen reader or a reader who
   skips the graphic still gets the point. */
.chart-cap {
  max-width: 34rem;
  margin: .6rem 0 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--muted);
}
.chart-cap b { color: var(--ink); font-weight: 600; }

/* Type inside the plot */
.chart-label {
  color: var(--ink); fill: currentColor;
  font-family: var(--font);
  font-size: 13px; font-weight: 600;
}
.chart-note {
  color: var(--ink); fill: currentColor;
  font-family: var(--font);
  font-size: 11.5px; font-weight: 600;
}
.chart-tick,
.chart-axis-title {
  color: var(--muted); fill: currentColor;
  font-family: var(--font);
  font-size: 11.5px; font-weight: 500;
}
.chart-mid { text-anchor: middle; }
.chart-end { text-anchor: end; }

/* Marks. Semantic colour only: --brand for the evidence-backed move,
   --warn for the losing side. No decorative colour. */
.chart-bar-brand { fill: var(--brand); }
/* Not var(--warn): that value is cut dark enough to pass AA as TEXT on cream,
   and at bar size it reads as brown, which the owner has banned outright. A
   graphic fill only needs 3:1 against the paper (WCAG 1.4.11), so the bars
   get a brighter ochre cut of the same caution colour: amber the moment you
   see it, same meaning, no mud. Owner directive 2026-07-30: no brown. */
.chart-bar-warn  { fill: #c07a14; }
.chart-band {
  fill: var(--brand); fill-opacity: .18;
  stroke: var(--brand); stroke-width: 1;
}

/* Structure */
.chart-axis,
.chart-tickmark { stroke: var(--line); stroke-width: 1; }
.chart-baseline { stroke: var(--ink); stroke-width: 1.2; }
.chart-bracket  { stroke: var(--muted); stroke-width: 1; fill: none; }
.chart-leader   { stroke: var(--ink); stroke-width: 1; }
.chart-rule-halo { stroke: var(--bg); stroke-width: 4; }
.chart-rule {
  stroke: var(--ink); stroke-width: 1.4;
  stroke-dasharray: 3 3;
}

/* ==========================================================================
   Simple mode, second cut: the page collapses to an outline
   --------------------------------------------------------------------------
   Simple mode used to hide two library sections and little else, which left
   a frightened reader facing roughly 97,000px of scroll. It now collapses
   every major section to its opener plus a control, so the whole guide fits
   in a few screens and the reader chooses what to open. Two sections are
   never collapsed: #start, which is the answer, and #plan, which is the
   thing the answer tells them to do.

   The collapse is written as a :not() list rather than "hide everything,
   then set display back on three children". Restoring a display value means
   guessing what it was (block? grid? flex?), and that guess breaks the first
   time a section head becomes a grid. Never hiding the exceptions in the
   first place has no such failure mode.

   .ten-second is the summary line another pass adds directly after the
   section head. It is part of the outline by design: head, summary, control.
   ========================================================================== */

/* Screen only. This guide gets printed and taken to appointments, and a
   collapsed outline must never be what comes out of the printer just because
   Simple mode happened to be on. Scoping the hide to @media screen is why the
   print block needs no counter-rule: the rules simply do not apply on paper. */
@media screen {
  body.simple-mode section.section.outline-collapsed > .wrap > *:not(.section-head):not(.ten-second):not(.outline-toggle) {
    display: none;
  }
  /* An outline row is a line in a list, not a full section of the page. */
  body.simple-mode section.section.outline-collapsed { padding: 1.35rem 0; }
  body.simple-mode section.section.outline-collapsed > .wrap > .section-head {
    margin-bottom: .75rem;
    padding-top: clamp(.7rem, 2vw, 1.2rem);
  }
  /* The deck and the freshness strip are the long read. In an outline the
     headline and the ten-second line carry it. */
  body.simple-mode section.section.outline-collapsed > .wrap > .section-head > p:not(.eyebrow) {
    display: none;
  }
  body.simple-mode section.section.outline-collapsed > .wrap > .ten-second {
    margin: 0 0 .85rem;
  }
}

/* The control. It exists only inside Simple mode: outside it the button is
   not rendered at all, so the ordinary page is untouched. Rectangle with
   softened corners, per the radius scale: a button is not a label, so no
   pill. 44px minimum, focus ring inherited from the global rule. */
.outline-toggle { display: none; }
body.simple-mode .outline-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  min-height: 44px;
  padding: .6rem 1.05rem;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--brand-deep);
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
}
body.simple-mode .outline-toggle:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
/* An expanded section keeps its control so the reader can put it away again;
   give it air from the content above it. */
body.simple-mode section.section:not(.outline-collapsed) > .wrap > .outline-toggle {
  margin-bottom: 1.2rem;
}

/* ==========================================================================
   Current-section label (narrow viewports)
   --------------------------------------------------------------------------
   Under 900px the header nav folds behind Menu, so mid-page the reader can
   lose track of where they are. This is a status chip, not navigation: it is
   aria-hidden because the headings and the journey rail already carry the
   same fact to assistive tech, and it is created in JS, so it simply does
   not exist when scripts do not run.

   Position was chosen against the measured occupancy at 390x780: header and
   journey rail hold 0-103px, the thumb dock 716-780px, and the back-to-top
   button 648-692px at x 304-374. Bottom-left in the back-to-top's band is
   the one clear corner. It mirrors that button, and its max-width stops well
   short of it. The resume banner also lives near the bottom, so the label
   stays hidden until the banner has retired (see LABEL_MIN_Y in app.js).
   ========================================================================== */

.current-section {
  position: fixed;
  left: 1rem;
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 54;
  /* Status label only. Content scrolls beneath it, so it must never eat a
     tap meant for a link or button under it. */
  pointer-events: none;
  max-width: calc(100vw - 9rem);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  padding: .42rem .62rem;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: var(--shadow);
}
.current-section[hidden] { display: none !important; }
@media (min-width: 900px) {
  .current-section { display: none !important; }
}