/* ==========================================================================
   GynoTreatment.com: site.css

   Look: the cool grey of a locker room, slate ink, one blue for links and
   marks (like athletic tape), one mustard for highlights. Archivo for
   headings and labels, Newsreader for reading.

   1.  Tokens (light and dark)
   2.  Base
   3.  Header and menu
   4.  Page layout
   5.  Article top: crumbs, title, byline, hero
   6.  Prose
   7.  Quick answer, contents
   8.  Sections: steps, tables, charts, callouts, do/don't, stories
   9.  Exercise drawings
   10. Products, picks, reader ratings
   11. Download box
   12. Ad positions
   13. Questions, sources, disclaimer
   14. Comments and forms
   15. Keep reading, side rail
   16. Home and hubs
   17. 404
   18. Cookie box
   19. Footer
   19b. Interactive tools
   20. Print
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --paper:        #f2f4f6;
  --sheet:        #ffffff;
  --ink:          #17202e;
  --ink-soft:     #4b5566;
  --line:         #d7dce3;
  --tape:         #1d6a86;
  --tape-soft:    #e1eef3;
  --on-tape:      #ffffff;
  --mustard:      #e2a92f;
  --mustard-soft: #fbf1d8;
  --on-mustard:   #17202e;
  --warn:         #b4462f;
  --warn-soft:    #f8e6e1;
  --good:         #2f7a4f;
  --good-soft:    #e3f1e8;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Newsreader", Georgia, "Times New Roman", serif;

  --step--1: 0.875rem;
  --step-0:  1.125rem;
  --step-1:  1.35rem;
  --step-2:  1.75rem;
  --step-3:  2.4rem;
  --radius:  10px;
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #10151d;
    --sheet:        #171e29;
    --ink:          #e7ebf0;
    --ink-soft:     #a3adbb;
    --line:         #2b3544;
    --tape:         #6cb7d3;
    --tape-soft:    #16303b;
    --on-tape:      #0e1a20;
    --mustard:      #f0c05a;
    --mustard-soft: #33290f;
    --on-mustard:   #17202e;
    --warn:         #ec8b74;
    --warn-soft:    #3a1f19;
    --good:         #74c896;
    --good-soft:    #15301f;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:        #10151d;
  --sheet:        #171e29;
  --ink:          #e7ebf0;
  --ink-soft:     #a3adbb;
  --line:         #2b3544;
  --tape:         #6cb7d3;
  --tape-soft:    #16303b;
  --on-tape:      #0e1a20;
  --mustard:      #f0c05a;
  --mustard-soft: #33290f;
  --on-mustard:   #17202e;
  --warn:         #ec8b74;
  --warn-soft:    #3a1f19;
  --good:         #74c896;
  --good-soft:    #15301f;
  color-scheme: dark;
}


/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--tape);
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--mustard);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-stretch: 112%;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.narrow {
  max-width: 760px;
}

.eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tape);
}

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

.skip {
  position: absolute;
  left: -9999px;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
}

.skip:focus {
  left: 1rem;
  top: 1rem;
}

.hint {
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tape-soft);
  color: var(--tape);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.btn--tape {
  background: var(--tape);
  color: var(--on-tape);
}

.btn--mustard {
  background: var(--mustard);
  color: var(--on-mustard);
}

.btn--small {
  padding: 6px 12px;
  font-size: 0.85rem;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.draft-note {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  background: var(--mustard-soft);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   3. Header and menu
   -------------------------------------------------------------------------- */

.site-head {
  background: var(--sheet);
  border-bottom: 1px solid var(--line);
}

.site-head__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 14px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}

.logo__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  font-stretch: 118%;
}

.logo__name span {
  color: var(--tape);
}

.nav-toggle {
  display: none;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
}

.main-nav a {
  color: var(--ink);
  text-decoration: none;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--tape);
}

@media (max-width: 860px) {
  .js .nav-toggle {
    display: block;
  }

  .js .main-nav {
    display: none;
    flex-basis: 100%;
  }

  .js .main-nav.is-open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0;
  }

  .main-nav a {
    display: block;
    padding: 10px 0;
    border-top: 1px solid var(--line);
  }
}


/* --------------------------------------------------------------------------
   4. Page layout
   -------------------------------------------------------------------------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-block: 28px 64px;
}

@media (min-width: 1000px) {
  .layout {
    grid-template-columns: minmax(0, var(--measure)) 290px;
    justify-content: space-between;
  }
}

.article {
  min-width: 0;
}


/* --------------------------------------------------------------------------
   5. Article top
   -------------------------------------------------------------------------- */

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.crumbs li + li::before {
  content: "/";
  margin-right: 4px;
}

.crumbs a {
  color: var(--ink-soft);
}

.article h1 {
  margin-top: 6px;
  font-size: clamp(2rem, 5vw, var(--step-3));
  font-weight: 850;
}

.standfirst {
  margin: 14px 0 18px;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
}

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.byline a {
  color: var(--ink);
  text-decoration: none;
}

.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tape-soft);
  color: var(--tape);
  font-family: var(--font-display);
  font-weight: 800;
}

.avatar--big {
  width: 64px;
  height: 64px;
  font-size: 1.6rem;
}

.disclosure {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.disclosure--top {
  margin: 14px 0 0;
}

.hero {
  margin: 24px 0 8px;
}

.hero__img,
.hero .infocard {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.hero figcaption {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* Infocard parts take their colours from the tokens, so it follows the theme. */
.ic-bg     { fill: var(--sheet); }
.ic-panel  { fill: var(--paper); }
.ic-ink    { fill: var(--ink); }
.ic-soft   { fill: var(--ink-soft); }
.ic-tape   { fill: var(--tape); }
.ic-on-tape { fill: var(--on-tape); }
.ic-mus    { fill: var(--mustard); }
.ic-line   { stroke: var(--ink); fill: none; }


/* --------------------------------------------------------------------------
   6. Prose
   -------------------------------------------------------------------------- */

.prose > * + * {
  margin-top: 1.1em;
}

.prose h2 {
  margin-top: 2em;
  font-size: var(--step-2);
  font-weight: 800;
  scroll-margin-top: 20px;
}

.prose h3 {
  margin-top: 1.6em;
  font-size: var(--step-1);
  font-weight: 750;
}

.prose p,
.prose li {
  max-width: var(--measure);
}

.prose p {
  margin-bottom: 0;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
  margin-bottom: 0;
}

.prose li + li {
  margin-top: 0.4em;
}


/* --------------------------------------------------------------------------
   7. Quick answer, contents
   -------------------------------------------------------------------------- */

.quick-answer {
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--tape);
  border-radius: var(--radius);
  background: var(--sheet);
}

.prose .quick-answer h2 {
  margin: 0 0 6px;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tape);
}

.quick-answer p {
  margin: 0;
}

.quick-answer p + p {
  margin-top: 0.7em;
}

.toc-inline {
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.toc-inline summary {
  font-weight: 700;
  cursor: pointer;
}

.toc-inline ol {
  margin: 0.6rem 0 0.2rem;
}

.toc-inline a {
  color: var(--ink);
}

@media (min-width: 1000px) {
  .toc-inline {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   8. Sections
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 14px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.prose .steps {
  padding-left: 0;
}

.steps > li {
  position: relative;
  max-width: none;
  padding: 16px 18px 16px 62px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
  counter-increment: step;
}

.prose .steps > li + li {
  margin-top: 0;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
}

.prose .steps h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.steps p {
  margin: 0;
}

.table-wrap {
  position: relative;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--sheet);
  font-size: 1rem;
}

.data-table caption {
  padding-bottom: 8px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  text-align: left;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.data-table tbody th {
  font-family: var(--font-display);
  font-weight: 700;
}

.table--wide {
  min-width: 620px;
}

.table-note {
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.barchart {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
}

.barchart__cap {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
}

.barchart__cap span {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.barchart__rows {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prose .barchart__rows {
  padding-left: 0;
}

.barchart__rows li {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  max-width: none;
  font-family: var(--font-display);
}

.prose .barchart__rows li + li {
  margin-top: 0;
}

.barchart__label {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}

.barchart__label small {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.barchart__track {
  height: 1.1rem;
  overflow: hidden;
  border-radius: 4px;
  background: var(--paper);
}

.barchart__bar {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--tape);
}

.barchart__value {
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .barchart__rows li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .barchart__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.callout {
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--tape-soft);
}

.callout__kicker {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
}

.callout p {
  margin: 0;
}

.callout p + p,
.callout ul {
  margin-top: 0.7em;
}

.callout--personal {
  background: var(--mustard-soft);
}

.callout--warning,
.callout--doctor {
  background: var(--warn-soft);
}

.callout--warning .callout__kicker,
.callout--doctor .callout__kicker {
  color: var(--warn);
}

.callout--myth {
  border: 1px dashed var(--ink-soft);
  background: var(--sheet);
}

.callout--help {
  border-left: 6px solid var(--tape);
}

.dodont {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}

.dodont > div {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
}

.dodont h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.prose .dodont h3 {
  margin-top: 0;
}

.dodont .do h3 {
  color: var(--good);
}

.dodont .dont h3 {
  color: var(--warn);
}

.dodont ul {
  margin: 8px 0 0;
}

.story {
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--mustard-soft);
}

.story--real {
  border: 1px solid var(--line);
  background: var(--sheet);
}

.story__tag {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.prose .story h3 {
  margin: 6px 0 0;
  font-size: 1.15rem;
}

.story p {
  margin: 6px 0 0;
}

.story__source {
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
}

.prose .related {
  padding-left: 0;
}

.prose .related li + li {
  margin-top: 0;
}

.related a {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
  color: var(--ink);
  text-decoration: none;
}

.related a:hover {
  border-color: var(--tape);
}

.related .eyebrow {
  font-size: 0.72rem;
}

.related strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.3;
}


/* --------------------------------------------------------------------------
   9. Exercise drawings (and the figure frame the charts share)
   -------------------------------------------------------------------------- */

.fig {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
}

.fig svg {
  display: block;
  width: 100%;
  height: auto;
}

.fig figcaption {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.exercise-fig__cues {
  margin: 12px 0 0;
  padding-left: 1.4em;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.5;
}

.exercise-fig__cues li + li {
  margin-top: 4px;
}

.exercise-fig__dose {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--tape);
}

.svg-text        { fill: var(--ink); font-family: var(--font-display); }
.svg-soft        { fill: var(--ink-soft); font-family: var(--font-display); }
.svg-grid        { stroke: var(--line); stroke-width: 2; }
.svg-stroke      { stroke: var(--ink); fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.svg-stroke-tape { stroke: var(--tape); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.svg-head        { fill: var(--sheet); stroke: var(--ink); stroke-width: 3.5; }
.svg-bench       { fill: var(--line); }
.svg-dumbbell    { fill: var(--mustard); stroke: var(--ink); stroke-width: 1.5; }
.ex-body         { stroke: var(--ink); fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.ex-arm          { stroke: var(--tape); fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.ex-head         { fill: var(--ink); }


/* --------------------------------------------------------------------------
   10. Products, picks, reader ratings
   -------------------------------------------------------------------------- */

.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
  scroll-margin-top: 20px;
}

@media (min-width: 640px) {
  .product {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

.product__media img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  background: #ffffff;
}

.product__noimg {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  max-width: 100%;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.product__body {
  min-width: 0;
}

.product__rank {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--mustard);
  color: var(--on-mustard);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.prose .product h2,
.prose .product h3 {
  margin: 0;
  font-size: 1.25rem;
}

.product__for {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--tape);
}

.product p {
  margin: 10px 0 0;
}

.pros-cons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 10px 20px;
  margin-top: 14px;
}

.pros-cons h4 {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pros-cons__pro h4 {
  color: var(--good);
}

.pros-cons__con h4 {
  color: var(--warn);
}

.pros-cons ul {
  margin: 6px 0 0;
  padding-left: 1.2em;
  font-size: 1rem;
}

.product__buy {
  margin-top: 16px;
}

.reader-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--step--1);
}

.reader-rating__now,
.reader-rating__mine {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.reader-rating__note {
  flex-basis: 100%;
  color: var(--ink-soft);
}

.product .reader-rating__note {
  margin: 0;
}

.stars {
  display: inline-flex;
  gap: 2px;
}

.star-on  { fill: var(--mustard); }
.star-off { fill: var(--line); }

.rate-buttons {
  display: inline-flex;
}

.rate-buttons button {
  padding: 3px;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
}

.rate-buttons svg {
  display: block;
}

.rate-status {
  color: var(--good);
}

.picks td,
.picks th {
  vertical-align: middle;
}

.picks td:nth-child(2) {
  font-family: var(--font-display);
  font-weight: 700;
}

.picks__img {
  float: left;
  width: 48px;
  height: 48px;
  margin-right: 10px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 6px;
}


/* --------------------------------------------------------------------------
   11. Download box
   -------------------------------------------------------------------------- */

.download-box {
  display: grid;
  gap: 10px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
}

.download-box .eyebrow {
  color: var(--mustard);
}

.prose .download-box h3 {
  margin: 0;
  color: var(--paper);
  font-size: 1.35rem;
}

.download-box p {
  margin: 0;
  opacity: 0.88;
}

.download-box .btn {
  justify-self: start;
}


/* --------------------------------------------------------------------------
   12. Ad positions
   Nothing prints until there is code. These rules size what does print.
   -------------------------------------------------------------------------- */

.ad-slot {
  clear: both;
  margin: 2rem auto;
  text-align: center;
}

.prose .ad-slot {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.ad-slot__label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.ad-unit {
  max-width: 100%;
  margin: 0 auto;
}

.ad-unit--rect   { width: 300px; height: 250px; }
.ad-unit--fluid  { width: 100%; min-height: 200px; }
.ad-unit--banner { width: 300px; height: 250px; }

@media (min-width: 420px) {
  .ad-unit--rect { width: 336px; height: 280px; }
}

@media (min-width: 800px) {
  .ad-unit--banner { width: 728px; height: 90px; }
}

ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

.ad-slot:has(ins[data-ad-status="unfilled"]) {
  display: none;
}

.ad-slot--html img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
}

/* Preview boxes: only a signed-in owner with ?adpreview=1 sees these. */
.ad-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 2px dashed var(--mustard);
  border-radius: 8px;
  background: var(--mustard-soft);
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--ink);
}

.ad-unit--fluid.ad-preview {
  height: 220px;
}

.ad-preview strong {
  font-size: 1.15rem;
}

.ad-preview__state {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   13. Questions, sources, disclaimer
   -------------------------------------------------------------------------- */

.faq details {
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
}

.faq details + details {
  margin-top: 10px;
}

.faq summary {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.faq details p {
  margin: 10px 0 0;
}

.sources ol {
  font-size: 0.95rem;
}

.sources li {
  max-width: none;
}

.reviewed {
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.disclaimer {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}


/* --------------------------------------------------------------------------
   14. Comments and forms
   -------------------------------------------------------------------------- */

.comments__empty {
  color: var(--ink-soft);
}

.comment {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.comment--reply {
  margin-top: 12px;
  padding: 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--sheet);
}

.comment--author {
  border-left: 4px solid var(--tape);
}

.comment__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mustard-soft);
  font-family: var(--font-display);
  font-weight: 800;
}

.comment__meta {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.comment p {
  margin: 4px 0 0;
}

.comment-form,
.message-form form {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
}

.comment-form label,
.form-grid label {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
}

.comment-form input,
.comment-form textarea,
.form-grid input,
.form-grid textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.comment-form .hint {
  margin: 0;
}

.message-form {
  padding: 0;
}

.prose .message-form h2 {
  margin-top: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0 1rem;
}

.form-grid__wide {
  grid-column: 1 / -1;
}

.form-grid p {
  margin: 0 0 0.9rem;
}

.form-grid label {
  display: block;
  margin-bottom: 0.25rem;
}

.hp {
  position: absolute;
  left: -9999px;
}

.form-ok,
.form-error {
  padding: 0.7rem 1rem;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
}

.form-ok {
  background: var(--good-soft);
  color: var(--good);
}

.form-error {
  background: var(--warn-soft);
  color: var(--warn);
}


/* --------------------------------------------------------------------------
   15. Side rail
   -------------------------------------------------------------------------- */

.rail {
  min-width: 0;
}

.rail__inner {
  display: grid;
  gap: 18px;
}

@media (min-width: 1000px) {
  .rail__inner {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 20px);
  }
}

.side-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
  font-family: var(--font-display);
  font-size: 0.92rem;
}

.side-card h2 {
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.toc h2 {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.toc ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.2em;
}

.toc a {
  color: var(--ink);
  text-decoration: none;
}

.toc a:hover {
  color: var(--tape);
}

.side-card--dark {
  border: 0;
  background: var(--ink);
  color: var(--paper);
}

.side-card--dark h2 {
  color: var(--paper);
  font-size: 1.2rem;
}

.side-card--dark p {
  font-family: var(--font-body);
  font-size: 1rem;
  opacity: 0.88;
}

@media (max-width: 999px) {
  .toc {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   16. Home and hubs
   -------------------------------------------------------------------------- */

.home-intro {
  border-bottom: 1px solid var(--line);
  background: var(--sheet);
}

.home-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-block: 40px;
}

@media (min-width: 900px) {
  .home-intro__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: center;
  }
}

.home-intro h1 {
  margin-top: 8px;
  font-size: clamp(2.1rem, 5.5vw, 3.2rem);
  font-weight: 900;
}

.home-intro__text p {
  max-width: var(--measure);
}

.home-intro__card {
  display: grid;
  gap: 10px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
}

.home-intro__card .eyebrow {
  color: var(--mustard);
}

.home-intro__card h2 {
  font-size: 1.5rem;
}

.home-intro__card p {
  margin: 0;
  opacity: 0.88;
}

.home-intro__card .btn {
  justify-self: start;
}

.home-block {
  padding-block: 36px 8px;
}

.home-block > h2,
.home-columns h2 {
  margin-bottom: 16px;
  font-size: var(--step-2);
}

.door-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.door {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--tape);
  border-radius: var(--radius);
  background: var(--sheet);
  color: var(--ink);
  text-decoration: none;
}

.door:hover {
  border-color: var(--tape);
}

.door strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-stretch: 112%;
}

.door small {
  font-family: var(--font-display);
  color: var(--ink-soft);
}

.home-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 32px;
  padding-block: 36px 8px;
}

.card-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-list a {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
  color: var(--ink);
  text-decoration: none;
}

.card-list a:hover {
  border-color: var(--tape);
}

.card-list strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.card-list span {
  color: var(--ink-soft);
  font-size: 1rem;
}

.home-prose {
  max-width: var(--measure);
  padding-block: 20px;
}

.author-box {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--mustard-soft);
}

.author-box h2 {
  font-size: 1.3rem;
}

.author-box p {
  max-width: var(--measure);
  margin: 6px 0 8px;
}

.hub {
  padding-block: 28px 64px;
}

.hub__head {
  max-width: 820px;
}

.hub__head h1 {
  margin-top: 6px;
  font-size: clamp(2rem, 5vw, var(--step-3));
  font-weight: 850;
}

.hub__intro,
.hub__faq {
  max-width: var(--measure);
  margin-top: 1.5rem;
}

.hub__list-title {
  margin: 2.2rem 0 1rem;
  font-size: var(--step-2);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  display: grid;
  align-content: start;
  gap: 6px;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
  color: var(--ink);
  text-decoration: none;
}

.card:hover {
  border-color: var(--tape);
}

.card strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.3;
}

.card span:last-child {
  color: var(--ink-soft);
  font-size: 1rem;
}

.empty {
  color: var(--ink-soft);
}


/* --------------------------------------------------------------------------
   17. 404
   -------------------------------------------------------------------------- */

.lost {
  padding-block: 3rem 4rem;
}

.lost__code {
  margin: 0;
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  color: var(--tape);
}

.lost h1 {
  margin: 0.3rem 0 0.8rem;
  font-size: var(--step-3);
}

.lost h2 {
  margin: 2rem 0 0.8rem;
  font-size: 1.3rem;
}

.pill-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.pill-links a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--sheet);
  font-family: var(--font-display);
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   18. Cookie box (bottom left)
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
  box-shadow: 0 10px 30px rgba(10, 20, 30, 0.18);
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.45;
}

.consent[hidden],
.consent [hidden] {
  display: none !important;
}

.consent h2 {
  font-size: 1.05rem;
}

.consent p {
  margin: 0;
  color: var(--ink-soft);
}

.consent__gpc {
  color: var(--good) !important;
  font-weight: 600;
}

.consent__choices {
  display: grid;
  gap: 8px;
}

.consent__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--paper);
  cursor: pointer;
}

.consent__row input {
  margin-top: 4px;
  accent-color: var(--tape);
}

.consent__row strong {
  display: block;
  color: var(--ink);
}

.consent__row span {
  color: var(--ink-soft);
}

.consent__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.consent__btn {
  padding: 9px 12px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.consent__btn--quiet {
  grid-column: 1 / -1;
  border-color: var(--line);
  background: var(--sheet);
  color: var(--ink);
}

.consent__btn[data-consent="save"] {
  grid-column: 1 / -1;
  border-color: var(--tape);
  background: var(--tape);
  color: var(--on-tape);
}


/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.site-foot {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--step--1);
}

.site-foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 24px;
  padding-block: 36px 20px;
}

.site-foot h2 {
  margin-bottom: 10px;
  font-size: 1rem;
  color: var(--paper);
}

.site-foot p {
  margin: 0;
  opacity: 0.8;
  max-width: 40ch;
}

.site-foot ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-foot a,
.site-foot .link-button {
  color: var(--paper);
}

.site-foot__legal {
  padding-block: 16px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.site-foot__legal p {
  max-width: none;
  opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
  .related a,
  .card,
  .door,
  .card-list a,
  .btn {
    transition: border-color 0.15s, transform 0.15s;
  }

  .btn:hover {
    transform: translateY(-1px);
  }
}


/* --------------------------------------------------------------------------
   19b. Interactive tools (app/views/tools/, assets/js/tools.js)
   -------------------------------------------------------------------------- */

.tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 1.5rem 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
}

.tool__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tool > *, .tool__form > * { min-width: 0; }
.tool select, .tool input { box-sizing: border-box; max-width: 100%; }
.tool select,
.tool input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.tool .form-grid label { font-family: var(--font-display); font-size: var(--step--1); font-weight: 600; }

.tool__q { margin: 0; padding: 0; border: 0; min-width: 0; }
.tool__q legend {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
}
.tool__num {
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--tape);
  color: var(--on-tape);
  font-size: 0.85em;
}
.tool__opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 6px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.4;
}
.tool__opt:has(input:checked) { border-color: var(--tape); background: var(--tape-soft); }
.tool__opt input { margin-top: 0.25em; accent-color: var(--tape); flex: none; }
.tool__q--inline { display: flex; flex-wrap: wrap; gap: 8px; }
.tool__q--inline legend { width: 100%; }
.tool__q--inline .tool__opt { margin: 0; }
.tool__q--flags .tool__opt:has(input:checked) { border-color: var(--warn); background: var(--warn-soft); }

.tool__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.tool__actions .btn--small { background: transparent; color: var(--ink); border: 1px solid var(--line); }

.tool__result {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--tape-soft);
  border-left: 5px solid var(--tape);
}
.tool__result[hidden] { display: none; }
.tool__result:focus { outline: none; }
.tool__result--doctor { background: var(--warn-soft); border-left-color: var(--warn); }
.tool__result--fat { background: var(--good-soft); border-left-color: var(--good); }
.prose .tool__result h3 { margin: 0 0 8px; }
.tool__result p:last-child, .tool__result ul:last-child { margin-bottom: 0; }

.tool__big {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-3);
  line-height: 1.05;
}
.tool__big small,
.tool__stats small {
  display: block;
  margin-top: 4px;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-soft);
}
.tool__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 12px; margin-bottom: 8px; }
.tool__stats p { margin: 0; }
.tool__stats .tool__big { display: block; font-size: var(--step-2); }

.tool__range { margin: 10px 0 14px; }
.tool__range-bar {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--good-soft), var(--mustard));
}
.tool__range-dot {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border: 3px solid var(--sheet);
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: left 0.25s ease;
}
.tool__range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.tool__table { margin: 10px 0 0; font-size: var(--step--1); }
.tool__sub { padding-top: 6px; border-top: 1px solid var(--line); }
.prose .tool__sub h3 { margin-top: 12px; }
.tool__note { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.tool__unit { font-weight: 500; color: var(--ink-soft); }

@media (max-width: 520px) {
  .tool { padding: 16px; }
  .tool__table thead { display: none; }
  .tool__table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .tool__table tbody th, .tool__table tbody td { display: block; padding: 0; border: 0; }
  .tool__table tbody td:last-child { grid-column: 1 / -1; }
}


/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-head,
  .site-foot,
  .rail,
  .ad-slot,
  .consent,
  .comments,
  .toc-inline {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
  }
}