
/* ============================================================
   READING LAYER - glp1-explained
   Generated 2026-09-14 by 2026-09-14_build_reading_css.py
   Linked LAST in <head> so it wins over each page's inline <style>.
   Element selectors first (every page has them); component classes
   are progressive enhancement and style themselves only when present.
   Remove the one <link> to revert the whole site.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500&display=swap');

:root{
  --rl-paper:#f2f1ec; --rl-surface:#fbfaf7; --rl-surface-2:#eceae3;
  --rl-ink:#191d1b; --rl-ink-2:#414a46; --rl-muted:#6d7772;
  --rl-rule:#ddd9d0; --rl-rule-2:#c6c1b5;
  --rl-accent:#2f5d50; --rl-accent-2:#22463c; --rl-wash:#e4ece8;
  --rl-alert:#8c4a2f; --rl-alert-wash:#f4e7e0;
}

html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--rl-paper) !important;
  color:var(--rl-ink) !important;
  font-family:'Newsreader',Georgia,serif !important;
  font-size:18.5px; line-height:1.72; -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
}

/* --- reading measure, whichever generation of wrapper the page uses --- */
.container, .wrap, main > article, article.post,
[class*="max-w-"]{
  max-width:720px !important; margin-inline:auto !important;
}
.container, .wrap{ padding-inline:20px; }

/* --- headings --- */
h1{
  font-family:'Newsreader',Georgia,serif !important; font-weight:500 !important;
  font-size:clamp(31px,5.4vw,48px) !important; line-height:1.1 !important;
  letter-spacing:-.016em; margin:0 0 20px !important; text-wrap:balance;
  color:var(--rl-ink) !important;
}
h2{
  font-family:'Newsreader',Georgia,serif !important; font-weight:500 !important;
  font-size:clamp(23px,3.4vw,28px) !important; line-height:1.24 !important;
  letter-spacing:-.011em; margin:50px 0 15px !important; text-wrap:balance;
  color:var(--rl-ink) !important;
}
h3{
  font-family:'Karla',system-ui,sans-serif !important; font-weight:600 !important; font-size:17px !important;
  margin:32px 0 10px !important; color:var(--rl-ink) !important; letter-spacing:-.004em;
}

/* --- text --- */
p{ margin:0 0 21px; color:var(--rl-ink); }
a{ color:var(--rl-accent); text-underline-offset:3px; text-decoration-thickness:1px; }
a:focus-visible{ outline:2px solid var(--rl-accent); outline-offset:3px; }
strong,b{ color:var(--rl-ink); }
blockquote{
  margin:30px 0; padding:4px 0 4px 22px; border-left:3px solid var(--rl-accent);
  font-size:20px; line-height:1.55; color:var(--rl-ink-2); font-style:normal;
}
hr, .divider{ border:0 !important; height:1px !important; background:var(--rl-rule) !important; margin:42px 0 !important; }

/* --- lists: the single biggest readability win on these pages --- */
ul{ list-style:none; padding-left:0; margin:0 0 23px; }
ul li{ position:relative; padding-left:25px; margin-bottom:9px; }
ul li::before{
  content:""; position:absolute; left:3px; top:.76em; width:7px; height:7px;
  border:1.5px solid var(--rl-accent); border-radius:50%;
}
ol{ padding-left:22px; margin:0 0 23px; }
ol li{ margin-bottom:9px; padding-left:4px; }
ol li::marker{ color:var(--rl-accent); font-family:'Karla',system-ui,sans-serif; font-size:.9em; }

/* --- tables --- */
table{ width:100%; border-collapse:collapse; margin:28px 0; font-family:'Karla',system-ui,sans-serif; font-size:15px; }
th,td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--rl-rule); }
th{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--rl-muted); background:var(--rl-surface-2);
}
td{ font-variant-numeric:tabular-nums; }

/* --- data band --- */
.stat-hero{
  display:grid !important; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)) !important;
  gap:1px !important; background:var(--rl-rule) !important; border:1px solid var(--rl-rule) !important;
  margin:34px 0 !important; border-radius:3px; overflow:hidden; padding:0 !important;
}
.stat-item{ background:var(--rl-surface) !important; padding:19px 18px 21px !important; border:0 !important; }
.stat-num{
  font-family:'Karla',system-ui,sans-serif !important; font-weight:700 !important; font-size:28px !important;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums; line-height:1 !important;
  color:var(--rl-accent) !important; margin-bottom:8px !important;
}
.stat-label{ font-family:'Karla',system-ui,sans-serif !important; font-size:12.5px !important; line-height:1.45 !important; color:var(--rl-muted) !important; }

/* --- contents --- */
.toc{ margin:32px 0 !important; padding:22px 26px 24px !important; background:var(--rl-surface) !important;
  border:1px solid var(--rl-rule) !important; border-radius:3px; }
.toc-title{ font-family:'Karla',system-ui,sans-serif !important; font-size:11px !important; font-weight:600 !important;
  letter-spacing:.15em; text-transform:uppercase; color:var(--rl-muted) !important; margin-bottom:13px !important; }
.toc ol{ padding-left:0; list-style:none; counter-reset:toc; margin:0; }
.toc li{ counter-increment:toc; padding:5px 0; margin:0; }
.toc a{ font-family:'Karla',system-ui,sans-serif; font-size:14.5px; text-decoration:none; color:var(--rl-ink-2);
  display:flex; gap:12px; align-items:baseline; }
.toc a::before{ content:counter(toc,decimal-leading-zero); font-size:11px; color:var(--rl-accent);
  font-variant-numeric:tabular-nums; flex:none; }
.toc a:hover{ color:var(--rl-accent); text-decoration:underline; }

/* --- protocol / tip --- */
.protocol-box,.tip-card{
  background:var(--rl-surface) !important; border:1px solid var(--rl-rule) !important;
  border-left:3px solid var(--rl-accent) !important; border-radius:3px;
  padding:21px 25px !important; margin:30px 0 !important; color:var(--rl-ink) !important;
}
.protocol-label,.tip-tag{
  display:block; font-family:'Karla',system-ui,sans-serif !important; font-size:10.5px !important; font-weight:700 !important;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rl-accent) !important; margin-bottom:12px !important;
}

/* --- medical / safety warning: the only place alert colour appears --- */
.warning-box{
  background:var(--rl-alert-wash) !important; border:1px solid var(--rl-alert) !important;
  border-left-width:3px !important; border-radius:3px; padding:21px 25px !important;
  margin:30px 0 !important; color:var(--rl-ink) !important;
}
.warning-label{
  font-family:'Karla',system-ui,sans-serif !important; font-size:10.5px !important; font-weight:700 !important;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rl-alert) !important;
  margin-bottom:12px !important; display:flex; align-items:center; gap:9px;
}
.warning-label::before{
  content:""; width:14px; height:14px; flex:none; border:1.5px solid var(--rl-alert); border-radius:50%;
  background:linear-gradient(var(--rl-alert),var(--rl-alert)) center 2.5px/1.5px 5px no-repeat,
             linear-gradient(var(--rl-alert),var(--rl-alert)) center 9.5px/1.5px 1.5px no-repeat;
}
.warning-box ul li::before{ border-color:var(--rl-alert); }

/* --- product recommendation --- */
.affiliate-block{
  background:var(--rl-surface) !important; border:1px solid var(--rl-rule-2) !important;
  border-radius:3px; margin:34px 0 !important; overflow:hidden; padding:0 !important;
}
.affiliate-label{
  display:block; font-family:'Karla',system-ui,sans-serif !important; font-size:10.5px !important; font-weight:700 !important;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rl-muted) !important;
  padding:13px 25px !important; border-bottom:1px solid var(--rl-rule);
  background:var(--rl-surface-2) !important;
}
.affiliate-item{ display:flex; gap:17px; padding:22px 25px; align-items:flex-start; }
/* emoji icons are hidden behind a drawn mark rather than deleted from 1,458 files */
.affiliate-icon{
  font-size:0 !important; width:42px; height:42px; flex:none; border-radius:50%;
  border:1px solid var(--rl-rule-2); background:var(--rl-wash); position:relative;
}
.affiliate-icon::after{
  content:""; position:absolute; inset:13px; border:1.5px solid var(--rl-accent);
  border-radius:50% 50% 50% 0; transform:rotate(-45deg);
}
.affiliate-text strong{ font-family:'Karla',system-ui,sans-serif; font-weight:600; font-size:16px; display:block; margin-bottom:6px; }
.affiliate-text p{ font-size:15.5px; color:var(--rl-ink-2); margin-bottom:15px; }
.affiliate-btn{
  display:inline-block !important; font-family:'Karla',system-ui,sans-serif !important; font-size:14px !important;
  font-weight:600 !important; text-decoration:none !important; color:#fff !important;
  background:var(--rl-accent) !important; border:1px solid var(--rl-accent) !important;
  padding:11px 22px !important; border-radius:2px !important;
}
.affiliate-btn:hover{ background:var(--rl-accent-2) !important; border-color:var(--rl-accent-2) !important; }

/* --- meta / disclaimer --- */
.meta{ font-family:'Karla',system-ui,sans-serif !important; font-size:13px !important; color:var(--rl-muted) !important; }
.disclaimer{
  font-family:'Karla',system-ui,sans-serif !important; font-size:13.5px !important; color:var(--rl-muted) !important;
  border-top:1px solid var(--rl-rule); padding-top:17px; margin-top:40px; line-height:1.65;
}

/* --- images, wherever a page already has them --- */
img{ max-width:100%; height:auto; }
figure{ margin:32px 0; }
figure img{ border-radius:3px; width:100%; }
figcaption{ font-family:'Karla',system-ui,sans-serif; font-size:12.5px; color:var(--rl-muted); margin-top:9px;
  display:flex; gap:10px; align-items:baseline; line-height:1.5; }
figcaption::before{ content:""; width:16px; height:1px; background:var(--rl-rule-2);
  flex:none; transform:translateY(-4px); }

/* --- topic hero photograph, inserted after the h1 on matching pages only --- */
.rl-hero{ margin:26px 0 34px; }
.rl-hero img{
  width:100%; aspect-ratio:3/2; object-fit:cover; object-position:center 45%;
  border-radius:3px; background:var(--rl-surface-2);
}

@media (max-width:560px){
  body{ font-size:17.5px; }
  .affiliate-item{ flex-direction:column; gap:14px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }
