/* fiberprobiotic.com shared styles: tokens, masthead, footer */
:root{
  --white:#FFFFFF;--leaf:#4E8A3E;--leaf-text:#3F7432;--leaf-tint:#EEF4E9;--oat:#F3EBDD;--oat-deep:#E6DAC4;
  --tomato:#D9532B;--ink:#1F2A1C;--ink-2:#4B5447;--ink-3:#6D7468;--rule:#E2DDD2;
  --serif:"Bitter",Georgia,serif;--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--wrap:1220px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--tomato);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);margin:0;color:var(--ink)}
h1,h2{text-wrap:balance}
p{margin:0}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font:700 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--leaf-text)}
.kicker .sep{width:1px;height:12px;background:var(--rule);display:inline-block}
.kicker .muted{color:var(--ink-3)}
.kicker a{text-decoration:none}
.kicker a:hover{text-decoration:underline}

/* masthead */
.masthead{text-align:center;padding:0}
.dateline{border-bottom:1px solid var(--rule);font:500 13px/1.4 var(--sans);color:var(--ink-2)}
.dateline .wrap{display:flex;justify-content:space-between;align-items:center;gap:6px 20px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
.dateline time{font-weight:700;color:var(--ink);letter-spacing:.02em}
.masthead .brandrow{padding-top:22px}
.publine{margin-top:6px;font-size:14px;color:var(--ink-2)}
.publine a{font-weight:700;color:var(--leaf-text);text-underline-offset:3px}
.masthead h1,.masthead .site{margin:0;font:inherit}
.wordmark{display:inline-block;text-decoration:none;font-family:var(--serif);font-weight:800;font-size:46px;line-height:1;letter-spacing:-.025em}
.wordmark .f{color:var(--leaf)}.wordmark .p{color:var(--ink)}
.tagline{margin-top:8px;font-size:15px;color:var(--ink-2)}
.sections{margin-top:20px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sections ul{list-style:none;margin:0 auto;padding:0 12px;display:flex;justify-content:center;gap:2px;max-width:var(--wrap)}
.sections a{display:flex;align-items:center;min-height:50px;padding:0 14px;font:700 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.sections a:hover{color:var(--leaf-text)}
.sections a[aria-current="page"]{color:var(--leaf-text);box-shadow:inset 0 -3px 0 var(--leaf)}
.sections .shop a{color:var(--leaf-text)}

/* footer: newspaper style */
.foot{margin-top:80px;background:var(--ink);color:#E9EDE4;padding:48px 0 34px}
.foot a{color:#fff}
.foot-brand{display:flex;justify-content:space-between;align-items:end;gap:12px 32px;flex-wrap:wrap;padding-bottom:22px;border-bottom:3px double rgba(255,255,255,.35)}
.foot .wordmark{font-size:34px}
.foot .wordmark .f{color:#8CC276}.foot .wordmark .p{color:#fff}
.foot .disclose{font-size:16px;line-height:1.5;color:#fff;max-width:52ch}
.foot .disclose a{font-weight:700;text-underline-offset:4px}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:22px 0 30px;border-bottom:1px solid rgba(255,255,255,.18)}
.foot-cols nav{padding:0 22px}
.foot-cols nav:first-child{padding-left:0}
.foot-cols nav + nav{border-left:1px solid rgba(255,255,255,.18)}
.foot h2{font:700 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#B9C7B0;margin-bottom:6px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a{display:flex;align-items:center;min-height:38px;text-decoration:none;font:600 15.5px/1.3 var(--serif)}
.foot li a:hover{text-decoration:underline;text-underline-offset:3px}
.legal{padding-top:24px;display:grid;gap:8px;font-size:14.5px;line-height:1.55;color:#DCE3D6;max-width:860px}
.legal .copy{margin-top:6px;color:#B9C7B0;font-size:14px}

@media (max-width:1000px){
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .foot-cols nav:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .dateline .wrap{justify-content:center;text-align:center}
  .masthead .brandrow{padding-top:18px}
  .publine{font-size:13.5px;padding:0 12px}
  .wordmark{font-size:36px}
  .tagline{font-size:14px}
  .sections{margin-top:16px}
  .sections ul{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 8px;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .sections ul::-webkit-scrollbar{display:none}
  .sections a{padding:0 12px;font-size:12px;min-height:48px}
  .foot-cols nav{padding:0 14px}
  .foot-cols nav:nth-child(odd){padding-left:0;border-left:0}
}
