/* ============================================================
   Male Health Guide — site stylesheet
   Direction: a serious health publication. Petrol green, plenty of
   breathing room, a serif. Zero external fonts (speed + privacy).
   Editing here changes every page on the site.
   ============================================================ */

:root{
  /* Green-tinted neutrals — no pure grey, so everything harmonises */
  --ink:        #12211E;   /* body text */
  --ink-soft:   #566661;   /* byline, caption, meta */
  --ink-faint:  #68756F;   /* monospaced labels */

  /* Brand — a green that reads as green, not as black.
     #0E7C68 on white gives 5.2:1 contrast (passes AA) and is as
     light as it can be without failing. */
  --petrol:      #0E7C68;  /* brand colour: links, rules, accents */
  --petrol-deep: #0A6153;  /* top bar and footer */
  --petrol-lift: #12987F;  /* hover */

  /* Surfaces */
  --paper:  #FFFFFF;
  --wash:   #E7F3EF;       /* short answer, table header */
  --wash-2: #F4FAF8;       /* secondary boxes */
  --rule:   #D6E4DF;       /* hairline */

  /* Warning — used sparingly, only where there is real risk */
  --amber:      #8A5A1B;
  --amber-wash: #FBF3E4;
  --amber-rule: #E8D5AC;

  /* Typography — legibility comes before everything else.
     A system sans-serif: the face the reader already looks at all day,
     and the least tiring on screen. No external font. */
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono",
           "Segoe UI Mono", Consolas, "Liberation Mono", monospace;

  /* The serif for body copy. Georgia is present on virtually every
     Windows machine, Mac and phone, so the US reader sees what we
     designed — and nothing is downloaded from outside, which would
     make the privacy page a lie. Headings and labels stay sans:
     that contrast is what makes it read like a magazine. */
  --serif: Georgia, "Times New Roman", Times, serif;

  /* Measurements */
  --measure: 41rem;   /* comfortable reading measure in a serif */
  --max:     73rem;
  --gutter:  4.5rem;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:20px;
  line-height:1.62;
  font-kerning:normal;
}

/* Headings, navigation and small print stay sans-serif. Only text
   that is READ in blocks gets the serif. */
h1,h2,h3,h4,h5,h6,
.section-head,
.brand,.site-nav,
.byline,
.article-list a,
.sidebar,
.site-footer,
.stat-card,
.standard h3{ font-family:var(--sans) }

img{ max-width:100%; height:auto; display:block }

a{ color:var(--petrol); text-decoration-thickness:1px; text-underline-offset:.18em }
a:hover{ color:var(--petrol-lift) }

:focus-visible{ outline:2px solid var(--petrol); outline-offset:3px; border-radius:2px }

/* ---------- Monospaced label: the house typographic gesture ---------- */
.answer-block h2,
.sidebar h3,
.stat-card cite,
.byline,
figcaption{
  font-family:var(--mono);
  font-variant-ligatures:none;
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header{ background:var(--petrol-deep); color:#fff }

.site-header .wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:1.05rem 1.5rem;
  display:flex;
  align-items:baseline;
  gap:1rem 3.5rem;
  flex-wrap:wrap;
}

.brand{
  font-size:1.22rem;
  font-weight:700;
  letter-spacing:-.012em;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}
.brand:hover{ color:#fff; text-decoration:underline; text-underline-offset:.22em }

/* The menu sits at the right of the bar: it separates cleanly from
   the site name and anchors the header at both ends. */
.site-nav{ display:flex; gap:1.45rem; flex-wrap:wrap; margin-left:auto }

.site-nav a{
  font-family:var(--sans);
  font-size:.815rem;
  font-weight:500;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:rgba(255,255,255,.74);
  text-decoration:none;
}
.site-nav a:hover{ color:#fff }

/* ============================================================
   STRUCTURE
   ============================================================ */

.layout{
  max-width:var(--max);
  margin:0 auto;
  padding:3.5rem 1.5rem 6rem;
  display:grid;
  grid-template-columns:minmax(0,1fr) 17rem;
  gap:var(--gutter);
  align-items:start;
}

main{ min-width:0 }
main > article > *{ max-width:var(--measure) }
/* .prose is only a wrapper: it is its children that must respect the
   reading measure, otherwise a diagram or table inside .prose comes
   out narrower than one outside it. */
main > article > .prose{ max-width:none }
main > article > .prose > *{ max-width:var(--measure) }
main > article > .prose > figure,
main > article > .prose > .table-wrap,
main figure,
main .table-wrap{ max-width:none }

/* ---------- Breadcrumb: where the page lives ----------
   Same register as the site's labels (mono, uppercase, quiet).
   The last item is the current page and is not a link — you do not
   link to where the reader already is. */
.crumbs{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.075em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 1.35rem;
  line-height:1.7;
}
.crumbs a{
  color:var(--ink-faint);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.crumbs a:hover{ color:var(--petrol); border-bottom-color:var(--petrol) }
.crumbs span[aria-hidden]{ margin:0 .5rem; color:var(--rule) }
.crumbs strong{ font-weight:inherit; color:var(--ink-soft) }

/* ============================================================
   TITLE AND CREDITS
   ============================================================ */

h1{
  font-size:clamp(1.95rem, 1.45rem + 2vw, 2.85rem);
  line-height:1.18;
  letter-spacing:-.024em;
  font-weight:700;
  margin:0 0 1.1rem;
  text-wrap:balance;
}

.byline{
  font-size:.775rem;
  line-height:1.65;
  letter-spacing:.012em;
  color:var(--ink-soft);
  margin:0 0 2.2rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--rule);
}
.byline a{ color:var(--ink-soft) }

/* ---------- Affiliate notice: honest, not hidden ---------- */
.disclosure{
  font-family:var(--sans);
  font-size:.845rem;
  line-height:1.62;
  color:var(--ink-soft);
  background:var(--wash-2);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:.95rem 1.15rem;
  margin:0 0 2.4rem;
}
.disclosure strong{ color:var(--ink); font-weight:600 }

/* ============================================================
   IMAGES
   ============================================================ */

figure{ margin:0 0 2.6rem }

figure img{
  border-radius:3px;
  background:var(--wash);
}

figcaption{
  font-size:.775rem;
  line-height:1.6;
  color:var(--ink-soft);
  margin-top:.85rem;
  padding-left:.95rem;
  border-left:2px solid var(--rule);
}

/* ============================================================
   SHORT ANSWER — the block an AI quotes
   ============================================================ */

.answer-block{
  background:var(--wash);
  border-left:3px solid var(--petrol);
  padding:1.55rem 1.85rem 1.7rem;
  margin:0 0 3rem;
}

.answer-block h2{
  margin:0 0 .7rem;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--petrol);
}

.answer-block p{
  margin:0;
  font-size:1.075rem;
  line-height:1.66;
}

/* ============================================================
   PROSE
   ============================================================ */

.prose h2,
.faq h2,
.sources h2{
  font-size:1.62rem;
  line-height:1.24;
  letter-spacing:-.018em;
  font-weight:700;
  margin:3.6rem 0 1.05rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  text-wrap:balance;
}

.prose h3,
.faq h3{
  font-size:1.16rem;
  line-height:1.34;
  font-weight:700;
  margin:2.4rem 0 .6rem;
  text-wrap:balance;
}

.prose p{ margin:0 0 1.35rem; color:var(--ink) }

.prose ul,.prose ol{ margin:0 0 1.6rem; padding-left:1.35rem }
.prose li{ margin:0 0 .72rem; padding-left:.3rem }
.prose li::marker{ color:var(--petrol) }
.prose strong{ font-weight:600 }

/* ============================================================
   SOURCE STAMP — the site's visual signature
   Every claim carries its paperwork.
   ============================================================ */

.stat-card{
  background:var(--wash-2);
  border-left:3px solid var(--petrol);
  padding:1.4rem 1.6rem 1.25rem;
  margin:2.4rem 0;
}

.stat-card p{
  margin:0 0 1.05rem;
  font-size:1.055rem;
  line-height:1.62;
}

.stat-card cite{
  display:block;
  font-style:normal;
  font-size:.695rem;
  line-height:1.55;
  letter-spacing:.075em;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding-top:.8rem;
  border-top:1px solid var(--rule);
}

/* ============================================================
   CALLOUT BOXES
   ============================================================ */

.callout{
  padding:1.3rem 1.55rem;
  margin:2.4rem 0;
  border-radius:3px;
}
.callout p{ margin:0 0 .9rem; font-size:1.005rem; line-height:1.66 }
.callout p:last-child{ margin-bottom:0 }

.callout strong:first-child{
  display:block;
  margin-bottom:.55rem;
  font-family:var(--sans);
  font-size:.775rem;
  font-weight:600;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.callout.tip{ background:var(--wash); border:1px solid #CEE0D9 }
.callout.tip strong:first-child{ color:var(--petrol) }

.callout.warn{ background:var(--amber-wash); border:1px solid var(--amber-rule) }
.callout.warn strong:first-child{ color:var(--amber) }
.callout.warn a{ color:var(--amber) }

/* ============================================================
   TABLES
   ============================================================ */

/* A table scrolls sideways when it does not fit. The shadows at the
   edges signal that there is more — without them the table looks cut
   off on a phone. They fade out on their own at the end of the scroll. */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  margin:2.5rem 0;
  border:1px solid var(--rule);
  border-radius:3px;

  background:
    linear-gradient(to right,  var(--paper) 30%, rgba(255,255,255,0)) left  center,
    linear-gradient(to left,   var(--paper) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0    50%, rgba(14,124,104,.22), rgba(14,124,104,0)) left  center,
    radial-gradient(farthest-side at 100% 50%, rgba(14,124,104,.22), rgba(14,124,104,0)) right center;
  background-repeat:no-repeat;
  background-size:2.6rem 100%, 2.6rem 100%, .85rem 100%, .85rem 100%;
  background-attachment:local, local, scroll, scroll;
}

table{
  border-collapse:collapse;
  width:100%;
  min-width:34rem;
  font-family:var(--sans);
  font-size:.9rem;
  line-height:1.55;
  background:transparent;
}

th,td{
  padding:.85rem 1rem;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--rule);
}
td + td,th + th{ border-left:1px solid var(--rule) }
tbody tr:last-child td{ border-bottom:none }

th{
  background:var(--wash);
  font-weight:600;
  font-size:.735rem;
  letter-spacing:.075em;
  text-transform:uppercase;
  color:var(--petrol);
}

/* ============================================================
   PULL QUOTE — the judgement, not the data
   ============================================================ */

blockquote{
  margin:2.6rem 0;
  padding:0 0 0 1.6rem;
  border-left:2px solid var(--petrol);
  font-size:1.185rem;
  line-height:1.55;
  font-style:italic;
  color:var(--ink);
}
blockquote p{ margin:0 }

/* ============================================================
   CLUSTER, FAQ AND SOURCES
   ============================================================ */

/* ---------- Key takeaways: the close of the article ----------
   The partner of .answer-block at the top. That one has a fill and
   opens the piece; this one closes it, which is why it has no fill:
   the page already carries three filled boxes (answer, stat, cluster)
   and a fourth would be noise. A strong rule above is enough to say
   "the argument ends here". */
.takeaways{
  margin:3.4rem 0;
  padding:1.6rem 0 1.45rem;
  border-top:2px solid var(--petrol);
  border-bottom:1px solid var(--rule);
}

.takeaways h2{
  margin:0 0 1.05rem;
  padding-top:0;
  border-top:none;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--petrol);
}

.takeaways ul{ margin:0; padding:0; list-style:none }

.takeaways li{
  position:relative;
  margin:0 0 .82rem;
  padding-left:1.55rem;
  font-size:1.055rem;
  line-height:1.6;
}
.takeaways li:last-child{ margin-bottom:0 }

/* A square marker instead of a bullet: it matches the straight rules
   used everywhere else, since nothing on this site is rounded. */
.takeaways li::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:.5rem;
  height:.5rem;
  background:var(--petrol);
}

.cluster-box{
  background:var(--wash-2);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:1.9rem 2rem 2rem;
  margin:3.6rem 0;
}
.cluster-box h2{
  margin:0 0 .85rem;
  padding-top:0;
  border-top:none;
  font-size:1.28rem;
  line-height:1.3;
  font-weight:600;
  letter-spacing:-.01em;
}
.cluster-box p{ margin:0 0 1.1rem; font-size:1rem; color:var(--ink-soft) }
.cluster-box ul{ margin:0; padding-left:1.25rem }
.cluster-box li{ margin:0 0 .75rem; font-size:1rem; line-height:1.6 }
.cluster-box li::marker{ color:var(--petrol) }

.faq h3{ margin-top:2.1rem }
.faq p{ margin:0 0 1.2rem }

.sources ol{ padding-left:1.4rem }
.sources li{
  margin:0 0 .85rem;
  font-size:.895rem;
  line-height:1.6;
  color:var(--ink-soft);
}
.sources li::marker{ color:var(--ink-faint) }
.sources a{ word-break:break-word }

/* ============================================================
   AUTHOR AND MEDICAL DISCLAIMER
   ============================================================ */

.author-box{
  display:flex;
  gap:1.35rem;
  align-items:flex-start;
  border-top:2px solid var(--petrol);
  padding:1.7rem 0 0;
  margin:4rem 0 0;
}

.author-box img{
  width:4.1rem; height:4.1rem;
  flex:none;
  border-radius:50%;
  background:var(--wash);
}

.author-box h3{
  margin:0 0 .45rem;
  font-size:1.055rem;
  font-weight:600;
  letter-spacing:-.005em;
}

.author-box p{
  margin:0;
  font-size:.925rem;
  line-height:1.62;
  color:var(--ink-soft);
}

.disclaimer{
  font-family:var(--sans);
  font-size:.845rem;
  line-height:1.66;
  color:var(--ink-soft);
  background:var(--wash-2);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:1.15rem 1.35rem;
  margin:2.6rem 0 0;
}
.disclaimer strong{ color:var(--ink); font-weight:600 }

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar{
  position:sticky;
  top:2rem;
  font-family:var(--sans);
  font-size:.895rem;
  line-height:1.58;
}

.sidebar section{
  padding:0 0 1.6rem;
  margin:0 0 1.6rem;
  border-bottom:1px solid var(--rule);
}
.sidebar section:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0 }

.sidebar h3{
  margin:0 0 .95rem;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.sidebar ul{ margin:0; padding:0; list-style:none }
.sidebar li{ margin:0 0 .7rem; padding-left:.9rem; position:relative }
.sidebar li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:.32rem; height:1px;
  background:var(--petrol);
}
.sidebar a{ text-decoration:none }
/* A link inside a paragraph needs a cue that is not colour alone */
.sidebar p a{ text-decoration:underline; text-underline-offset:.18em }
.sidebar a:hover{ text-decoration:underline; text-underline-offset:.18em }

.sidebar p{ margin:0 0 .55rem; color:var(--ink-soft) }
.sidebar .author-mini img{
  width:3.4rem; height:3.4rem;
  border-radius:50%;
  background:var(--wash);
  margin-bottom:.85rem;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer{ background:var(--petrol-deep); color:rgba(255,255,255,.72) }

.site-footer .wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:2.6rem 1.5rem 3rem;
  font-family:var(--sans);
  font-size:.845rem;
  line-height:1.72;
}
.site-footer p{ margin:0 0 .7rem; max-width:52rem }
.site-footer p:last-child{ margin-bottom:0; font-size:.79rem; color:rgba(255,255,255,.55) }
.site-footer a{ color:rgba(255,255,255,.9); text-decoration:none }
.site-footer a:hover{ color:#fff; text-decoration:underline; text-underline-offset:.2em }

/* "We earn nothing from anything you buy" is a STATEMENT by the site,
   not small print. It has to beat the rule above that dims the last
   footer paragraph, hence the higher specificity. */
.site-footer .wrap p.earn-note{
  font-size:.845rem;
  color:rgba(255,255,255,.72);
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:1rem;
  margin-top:1.15rem;
}
.site-footer .wrap p.earn-note strong{ color:#fff; font-weight:600 }
.site-footer .wrap p.earn-note a{ text-decoration:underline; text-underline-offset:.2em }

/* ============================================================
   HOME
   The home page does not use the two-column grid of the articles.
   It is a sequence of bands, each on the same reading measure.
   ============================================================ */

.wrap-narrow{
  max-width:52rem;
  margin:0 auto;
  padding:0 1.5rem;
}

/* ---------- Thesis ---------- */

.home-hero{
  padding:5.5rem 0 4.5rem;
  border-bottom:1px solid var(--rule);
}

/* ---------- Home with a background photo ----------
   The green sits underneath: if the image fails to load (or does not
   exist yet), the hero stays readable instead of breaking. */
.home-hero.has-image{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--petrol-deep);
  color:#fff;
  padding:6.5rem 0 5.5rem;
  border-bottom:none;
}

.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* The photo has the horizon and the man in the lower half — the
     framing pulls down there rather than showing only sky. */
  object-position:center 58%;
  z-index:-2;
}

/* Green scrim: guarantees text contrast over any photo.
   Stronger on the left, where the text begins. */
.home-hero.has-image::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  /* Light scrim: only enough for the white text to have contrast on
     the left. The landscape on the right stays almost clean. */
  background:
    linear-gradient(100deg, rgba(6,44,38,.82) 0%, rgba(6,44,38,.66) 36%, rgba(6,44,38,.34) 66%, rgba(6,44,38,.08) 100%),
    linear-gradient(to bottom, rgba(6,44,38,.4) 0%, rgba(6,44,38,0) 24%);
}

.home-hero.has-image .eyebrow{ color:#7FD6BF }
.home-hero.has-image h1{ color:#fff }
.home-hero.has-image .lede{ color:rgba(255,255,255,.9) }
.home-hero.has-image .hero-proof{
  color:rgba(255,255,255,.82);
  border-left-color:#7FD6BF;
}
.home-hero.has-image .hero-proof strong{ color:#fff }
.home-hero.has-image .hero-proof a{ color:#fff; text-decoration-color:rgba(255,255,255,.55) }
.home-hero.has-image .hero-proof a:hover{ text-decoration-color:#fff }

/* ---------- LIGHT variant ----------
   A white veil in place of the green scrim, and dark text.
   Same photo, opposite personality: airy instead of grave.
   To go back to the dark version, remove the .light class in the HTML. */

.home-hero.has-image.light{ background:#DCE6E4; color:var(--ink) }

.home-hero.has-image.light::after{
  background:
    linear-gradient(100deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.86) 34%, rgba(255,255,255,.62) 64%, rgba(255,255,255,.3) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 22%);
}

.home-hero.has-image.light{ border-bottom:1px solid var(--rule) }
.home-hero.has-image.light .eyebrow{ color:var(--petrol) }
.home-hero.has-image.light h1{ color:var(--ink) }
.home-hero.has-image.light .lede{ color:var(--ink) }
.home-hero.has-image.light .hero-proof{
  color:var(--ink-soft);
  border-left-color:var(--petrol);
}
.home-hero.has-image.light .hero-proof strong{ color:var(--ink) }
.home-hero.has-image.light .hero-proof a{ color:var(--petrol); text-decoration-color:rgba(14,124,104,.5) }
.home-hero.has-image.light .hero-proof a:hover{ color:var(--petrol-lift) }

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--petrol);
  margin:0 0 1.4rem;
}

.home-hero h1{
  font-size:clamp(2.5rem, 1.5rem + 3.9vw, 4.35rem);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:700;
  margin:0 0 1.6rem;
  max-width:16ch;
}

.lede{
  font-size:clamp(1.14rem, 1.03rem + .48vw, 1.4rem);
  line-height:1.5;
  color:var(--ink);
  margin:0 0 2.4rem;
  max-width:38rem;
}

.hero-proof{
  font-family:var(--sans);
  font-size:.94rem;
  line-height:1.62;
  color:var(--ink-soft);
  margin:0;
  max-width:34rem;
  padding-left:1.15rem;
  border-left:3px solid var(--petrol);
}
.hero-proof strong{ color:var(--ink); font-weight:600 }

/* ---------- Bands ---------- */

.home-section{ padding:4.2rem 0 }
.home-section + .home-section{ border-top:1px solid var(--rule) }
.standards-band,.who-band{ background:var(--wash-2); border-top:1px solid var(--rule) }

.section-head{
  font-size:1.62rem;
  line-height:1.24;
  letter-spacing:-.018em;
  font-weight:700;
  margin:0 0 .8rem;
}

.section-dek{
  font-size:1.12rem;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0 0 2.4rem;
  max-width:36rem;
}
.section-head + .article-list{ margin-top:2.2rem }

/* ---------- Editorial article list ---------- */

.article-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--rule);
}

.article-list li{
  padding:1.6rem 0;
  border-bottom:1px solid var(--rule);
}

.article-list > li > a{
  display:block;
  font-size:1.24rem;
  line-height:1.32;
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--ink);
  text-decoration:none;
  margin-bottom:.5rem;
  text-wrap:balance;
}
.article-list > li > a:hover{
  color:var(--petrol);
  text-decoration:underline;
  text-underline-offset:.16em;
}

.article-list p{
  margin:0;
  font-size:1.075rem;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:40rem;
}

/* The first three are numbered — here the order is information:
   it is the sequence we recommend reading them in. */
.article-list.lead{ counter-reset:lead }
.article-list.lead li{
  counter-increment:lead;
  display:grid;
  grid-template-columns:2.6rem 1fr;
  gap:0 .6rem;
}
.article-list.lead li::before{
  content:counter(lead,decimal-leading-zero);
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--petrol);
  padding-top:.42rem;
}
.article-list.lead li > a,
.article-list.lead li > p{ grid-column:2 }

/* ---------- House standards ---------- */

.standards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.2rem;
}

.standard{
  padding-top:1.1rem;
  border-top:2px solid var(--petrol);
}

.standard h3{
  font-size:1.055rem;
  line-height:1.32;
  font-weight:600;
  margin:0 0 .65rem;
  text-wrap:balance;
}

.standard p{
  margin:0 0 .9rem;
  font-size:.94rem;
  line-height:1.62;
  color:var(--ink-soft);
}

.standard .proof{
  margin:0;
  font-family:var(--sans);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.03em;
}

/* ---------- Who writes here ---------- */

.who{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2.4rem;
  margin-bottom:2.2rem;
}

.who-item h3{
  font-size:1.055rem;
  font-weight:600;
  margin:0 0 .6rem;
}
.who-item p{
  margin:0;
  font-size:.965rem;
  line-height:1.62;
  color:var(--ink-soft);
}

.who-note{
  font-family:var(--sans);
  font-size:.88rem;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  max-width:40rem;
}

/* ---------- What is coming ---------- */

.upcoming{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--rule);
}
.upcoming li{
  padding:1.05rem 0;
  border-bottom:1px solid var(--rule);
  font-size:1rem;
  line-height:1.5;
  color:var(--ink-soft);
  display:grid;
  grid-template-columns:9rem 1fr;
  gap:.5rem 1rem;
}
.upcoming span{
  font-family:var(--mono);
  font-size:.73rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--petrol);
  padding-top:.28rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:64rem){
  :root{ --gutter:3rem }
  .layout{ grid-template-columns:minmax(0,1fr) 15rem }
  .standards{ gap:1.7rem }
}

@media (max-width:60rem){
  .standards{ grid-template-columns:1fr; gap:2rem }
  .who{ grid-template-columns:1fr; gap:1.9rem }
}

@media (max-width:53rem){
  body{ font-size:19px; line-height:1.6 }
  .layout{
    grid-template-columns:1fr;
    gap:0;
    padding:2.25rem 1.25rem 4rem;
  }
  main > article > *{ max-width:none }
  .sidebar{
    position:static;
    order:2;
    margin-top:3.5rem;
    padding-top:2rem;
    border-top:2px solid var(--petrol);
  }
  /* On a phone the menu wraps to the line below — there it goes back
     to aligning left, otherwise it hangs off to the right. */
  .site-header .wrap{ gap:.75rem 1.5rem; padding:.95rem 1.25rem }
  .site-nav{ gap:1.1rem; margin-left:0 }
  .answer-block{ padding:1.3rem 1.35rem 1.4rem }
  .cluster-box{ padding:1.5rem 1.35rem }
  .author-box{ flex-direction:column; gap:1rem }

  /* Table on a phone: tightened enough to fit most of it, and what
     does not fit scrolls sideways with the shadow to signal it. */
  .table-wrap{ margin:2rem 0 }
  table{ min-width:27rem; font-size:.825rem; line-height:1.5 }
  th,td{ padding:.68rem .7rem }
  th{ font-size:.675rem; letter-spacing:.06em }

  /* Callout boxes sit further from the screen edge */
  .callout{ padding:1.15rem 1.2rem }
  .stat-card{ padding:1.2rem 1.25rem 1.1rem }
  blockquote{ padding-left:1.1rem; font-size:1.09rem }
  figcaption{ padding-left:.8rem }

  /* On a phone the diagram runs to both edges of the screen. That is
     40px of extra width, and because the whole drawing scales with it,
     every letter inside grows by 11%. The caption stays aligned with
     the text. */
  main figure{
    margin-left:-1.25rem;
    margin-right:-1.25rem;
    width:calc(100% + 2.5rem);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    background:
      linear-gradient(to right, var(--paper) 30%, rgba(255,255,255,0)) left  center,
      linear-gradient(to left,  var(--paper) 30%, rgba(255,255,255,0)) right center,
      radial-gradient(farthest-side at 0    50%, rgba(14,124,104,.22), rgba(14,124,104,0)) left  center,
      radial-gradient(farthest-side at 100% 50%, rgba(14,124,104,.22), rgba(14,124,104,0)) right center;
    background-repeat:no-repeat;
    background-size:2.6rem 100%, 2.6rem 100%, .85rem 100%, .85rem 100%;
    background-attachment:local, local, scroll, scroll;
  }
  /* The diagram is 1200px wide. Squeezed onto a phone screen its
     letters end up around 5px and nobody can read them. So it keeps a
     legible minimum width and scrolls sideways, like the tables. */
  main figure > img{ min-width:40rem; border-radius:0 }
  main figure > figcaption{
    position:sticky;
    left:1.25rem;
    width:calc(100% - 2.5rem);
    margin-left:1.25rem;
    margin-right:1.25rem;
  }

  /* Home on a phone */
  .wrap-narrow{ padding:0 1.25rem }
  .home-hero{ padding:3.4rem 0 3rem }
  .home-hero.has-image{ padding:4rem 0 3.6rem }
  /* On a phone the photo is vertical and the text fills most of it:
     darken evenly instead of using a side gradient. */
  .home-hero.has-image::after{
    background:linear-gradient(to bottom, rgba(6,44,38,.74) 0%, rgba(6,44,38,.86) 100%);
  }
  .home-section{ padding:3rem 0 }
  .article-list > li > a{ font-size:1.14rem }
  .article-list.lead li{ grid-template-columns:2.1rem 1fr }
  .upcoming li{ grid-template-columns:1fr; gap:.15rem }
  .upcoming span{ padding-top:0 }
}

/* Very narrow screens (iPhone SE and similar) */
@media (max-width:24rem){
  .layout{ padding:1.75rem 1rem 3.5rem }
  table{ min-width:23rem; font-size:.79rem }
  th,td{ padding:.6rem .58rem }
  .site-nav{ gap:.85rem }
  .site-nav a{ font-size:.76rem }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}

/* ============================================================
   PRINT
   Several articles tell the reader to take a record to their doctor.
   The printed page had better be usable.
   ============================================================ */

@media print{
  body{ font-size:11pt; line-height:1.5; color:#000; background:#fff }
  .site-header,.site-footer,.sidebar,.disclosure,.cluster-box{ display:none }
  .layout{ display:block; max-width:none; padding:0 }
  main > article > *{ max-width:none }
  .answer-block,.stat-card,.callout{
    border:1px solid #999; background:none; break-inside:avoid;
  }
  .prose h2,.faq h2,.sources h2{ break-after:avoid; page-break-after:avoid }
  table{ break-inside:avoid }
  a{ color:#000; text-decoration:underline }
  .sources a::after{ content:" (" attr(href) ")"; font-size:8pt; word-break:break-all }
}


/* "See all" link at the end of a home or section block */
.section-more{margin-top:1.6rem}
.section-more a{font-weight:600;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.section-more a:hover{opacity:.75}


/* ============================================================
   HOME SECTION CARDS
   Live card = a link. Planned card = text, not clickable.
   ============================================================ */
.sections{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem 1.8rem;
  list-style:none;
  margin:0;
  padding:0;
}
.section-card{
  border-top:2px solid var(--rule);
  padding-top:1.05rem;
}
.section-card.live{ border-top-color:var(--petrol) }

.section-card .label{
  font-family:var(--mono);
  font-size:.73rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:block;
  margin-bottom:.5rem;
}
.section-card.live .label{ color:var(--petrol) }

.section-card h3{
  font-size:1.18rem;
  line-height:1.25;
  margin:0 0 .45rem;
  letter-spacing:-.012em;
}
.section-card.live h3 a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid var(--petrol);
  padding-bottom:1px;
}
.section-card.live h3 a:hover{ color:var(--petrol-lift); border-bottom-color:var(--petrol-lift) }

.section-card p{
  margin:0;
  font-size:1.02rem;
  line-height:1.5;
  color:var(--ink-soft);
}
.section-card .count{
  display:block;
  margin-top:.6rem;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
/* No opacity: transparency destroys contrast. The difference between
   a live and a planned card comes from the rule and the label colour. */
.section-card:not(.live) .label{ color:var(--ink-faint) }

@media (max-width:900px){ .sections{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .sections{ grid-template-columns:1fr; gap:1.3rem } }

/* ====================================================================
   SECTION LANDING PAGES
   The three area pages (/prostate/, /sleep/, /testosterone/) were a
   white sheet with a headline on it. Two changes, both reusing what the
   home already does: a green band at the top so the page has a lid and
   you can see which area you are in, and alternating washed bands so
   the groups of articles read as groups instead of one long column.
   ==================================================================== */

.section-hero{
  background:var(--petrol-deep);
  color:#fff;
  /* Deliberately tight at the top: the breadcrumb should sit close under
     the header bar rather than floating in the middle of the green. */
  padding:2.2rem 0 2.6rem;
}

/* The breadcrumb sits inside the green, so it needs the light versions.
   The gaps are tighter here than in the body, so the band stays short. */
.section-hero .crumbs{ color:rgba(255,255,255,.66); margin-bottom:.85rem }
.section-hero .eyebrow{ margin-bottom:.55rem }
.section-hero .section-head{ margin-bottom:.65rem }
.section-hero .crumbs a{ color:rgba(255,255,255,.9); text-decoration-color:rgba(255,255,255,.45) }
.section-hero .crumbs a:hover{ color:#fff; text-decoration-color:#fff }
.section-hero .crumbs strong{ color:#fff }

/* Same mint the home hero uses for its eyebrow over green. */
.section-hero .eyebrow{ color:#7FD6BF }
.section-hero .section-head{ color:#fff }
.section-hero .section-dek{
  color:rgba(255,255,255,.88);
  max-width:44rem;
  margin-bottom:0;
}

/* Alternating bands. nth-of-type counts every <section>, and the hero is
   the first one, so ODD lands on the 3rd, 5th, 7th content band — which
   makes the first band after the hero white. Do not "fix" this to even. */
.section-page .home-section:nth-of-type(odd){ background:var(--wash-2) }

/* .standards-band did this job by hand on one section per page. With the
   alternation it would double up, so it is no longer used on these pages. */

@media (max-width:53rem){
  .section-hero{ padding:1.5rem 0 2rem }
  .section-hero .section-dek{ font-size:1.04rem }
}