/* Peptide Goals Atlas — athletic-coach goal atlas */
:root{
  --sand:#F5F0E8;
  --cream:#FBF8F2;
  --olive:#4A5D3C;
  --olive-deep:#3a4a2f;
  --accent:#D85C2F;
  --accent-deep:#b34a25;
  --ink:#1A1A1A;
  --muted:#7A7468;
  --line:#d8d1c2;
  --line-soft:#e8e1d2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:'Manrope',system-ui,sans-serif;
  font-weight:800;
  color:var(--olive);
  line-height:1.1;
  letter-spacing:-0.02em;
  margin:0 0 .6em;
}
h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:800}
h2{font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:700;margin-top:2.2em}
h3{font-size:1.25rem;font-weight:700;margin-top:1.8em}
p{margin:0 0 1.1em}
a{color:var(--olive);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent)}
strong{font-weight:600;color:var(--ink)}
.container{max-width:1180px;margin:0 auto;padding:0 28px}
.narrow{max-width:760px;margin:0 auto;padding:0 28px}

/* ---------- HEADER ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--sand);
  position:sticky;top:0;z-index:50;
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:18px;padding-bottom:18px;
}
.logo{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--olive);
}
.logo svg{display:block;color:var(--olive)}
.logo-text{
  font-family:'Manrope',sans-serif;font-weight:800;
  font-size:17px;letter-spacing:-0.01em;line-height:1;
}
.logo-text small{display:block;font-weight:500;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-top:4px}
nav.primary{display:flex;gap:28px;align-items:center}
nav.primary a{
  font-family:'Manrope',sans-serif;
  font-size:14px;font-weight:600;
  text-decoration:none;color:var(--ink);
  letter-spacing:.01em;
}
nav.primary a:hover{color:var(--accent)}
@media(max-width:720px){nav.primary{gap:18px}nav.primary a:nth-child(n+4){display:none}}

/* ---------- HERO ---------- */
.hero{padding:80px 0 60px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:end}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.eyebrow{
  font-family:'Manrope',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:24px;
  display:inline-block;
}
.hero h1{margin-bottom:.4em}
.hero-lede{
  font-size:1.18rem;color:var(--muted);max-width:48ch;
}
.hero-side{
  border-left:2px solid var(--olive);
  padding-left:24px;
}
.hero-side dl{margin:0}
.hero-side dt{
  font-family:'Manrope',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-top:14px;
}
.hero-side dt:first-child{margin-top:0}
.hero-side dd{margin:0 0 4px;font-weight:500;color:var(--ink)}

/* ---------- GOAL CARDS ---------- */
.goals{padding:80px 0;background:var(--cream);border-bottom:1px solid var(--line)}
.section-head{
  display:flex;justify-content:space-between;align-items:end;
  gap:40px;margin-bottom:48px;flex-wrap:wrap;
}
.section-head h2{margin:0;font-size:clamp(1.6rem,2.4vw,2.1rem)}
.section-head p{margin:0;color:var(--muted);max-width:38ch}
.goal-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);
}
@media(max-width:900px){.goal-grid{grid-template-columns:1fr}}
.goal-card{
  padding:36px 32px 40px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--cream);
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  transition:background .2s;
  position:relative;
}
.goal-card:last-child{border-right:none}
@media(max-width:900px){.goal-card{border-right:none}}
.goal-card:hover{background:var(--sand)}
.goal-card .num{
  font-family:'Manrope',sans-serif;font-weight:800;
  font-size:64px;line-height:1;color:var(--olive);
  letter-spacing:-0.04em;margin-bottom:32px;
  opacity:.92;
}
.goal-card .tag-row{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.pill{
  display:inline-block;
  font-family:'Manrope',sans-serif;font-weight:600;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 10px;border-radius:2px;
}
.pill-goal{background:var(--accent);color:#fff}
.pill-time{background:transparent;color:var(--olive);border:1px solid var(--olive)}
.pill-soft{background:rgba(74,93,60,.12);color:var(--olive)}
.goal-card h3{
  font-size:1.4rem;line-height:1.2;margin:0 0 12px;color:var(--ink);font-weight:800;
}
.goal-card p{color:var(--muted);font-size:.97rem;margin:0;flex:1}
.goal-card .read{
  margin-top:24px;font-family:'Manrope',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.04em;color:var(--accent);
}

/* ---------- ABOUT/METHOD TEASER ---------- */
.split{padding:80px 0;border-bottom:1px solid var(--line)}
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
@media(max-width:760px){.split-grid{grid-template-columns:1fr;gap:40px}}
.split-block h3{
  font-family:'Manrope',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin:0 0 16px;
}
.split-block h2{margin-top:0;font-size:1.8rem}
.split-block p{color:var(--ink)}
.btn-link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Manrope',sans-serif;font-weight:700;
  font-size:14px;letter-spacing:.04em;
  color:var(--accent);text-decoration:none;
  border-bottom:2px solid var(--accent);padding-bottom:4px;
}
.btn-link:hover{color:var(--accent-deep);border-color:var(--accent-deep)}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:#d8d1c2;padding:60px 0 36px;margin-top:0}
footer h4{
  font-family:'Manrope',sans-serif;color:#fff;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;margin:0 0 16px;font-weight:600;
}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:48px}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr;gap:32px}}
.foot-grid p{color:#a09a8a;margin:0 0 .8em}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:8px}
.foot-grid a{color:#d8d1c2;text-decoration:none;font-size:14px}
.foot-grid a:hover{color:var(--accent)}
.foot-bottom{
  border-top:1px solid #333;padding-top:20px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12px;color:#807a6e;
}
.foot-bottom .indep{color:#d8d1c2}

/* ---------- ARTICLE PAGE ---------- */
.article-header{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.article-header .tag-row{margin-bottom:24px}
.article-header h1{
  font-size:clamp(2rem,4vw,3.3rem);max-width:18ch;margin-bottom:24px;
}
.byline{
  font-family:'Manrope',sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.byline span+span:before{content:" · ";color:var(--line)}

.bluf{
  background:var(--cream);
  border-left:4px solid var(--accent);
  padding:28px 32px;
  margin:48px 0 36px;
  font-size:1.07rem;line-height:1.7;
  color:var(--ink);
}
.bluf strong{color:var(--olive-deep)}

.article-body{padding:8px 0 40px}
.article-body h2{
  font-size:1.7rem;border-top:1px solid var(--line);
  padding-top:48px;margin-top:48px;
}
.article-body h2:first-of-type{border-top:none;padding-top:0}
.article-body ul,.article-body ol{padding-left:1.3em;margin:0 0 1.2em}
.article-body li{margin-bottom:.4em}
.article-body hr{display:none}

/* Comparison table */
.table-wrap{overflow-x:auto;margin:32px 0 40px;border:1px solid var(--line)}
.comparison-table{
  width:100%;border-collapse:collapse;
  font-size:.92rem;background:var(--cream);
  min-width:680px;
}
.comparison-table th,.comparison-table td{
  text-align:left;padding:12px 14px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}
.comparison-table th{
  background:var(--olive);color:#fff;
  font-family:'Manrope',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.comparison-table tr:nth-child(even) td{background:rgba(74,93,60,.06)}
.comparison-table tr:hover td{background:rgba(216,92,47,.06)}

/* Vendor entries */
.vendor-entry{
  background:var(--cream);
  border:1px solid var(--line);
  padding:36px 36px 28px;
  margin:32px 0;
}
.vendor-entry h2{
  border:none;padding:0;margin:0 0 16px;
  font-size:1.55rem;
}
.vendor-entry .meta{
  font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.06em;color:var(--muted);
  margin:0 0 24px;padding-bottom:16px;border-bottom:1px solid var(--line);
}
.vendor-entry .meta strong{color:var(--accent)}
.vendor-entry h4{
  font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--olive);
  margin:24px 0 10px;
}
.vendor-entry h3{
  font-family:'Manrope',sans-serif;font-size:1rem;color:var(--ink);
  margin:18px 0 8px;
}
.vendor-entry ul{padding-left:1.3em}
.vendor-entry li{margin-bottom:.3em;font-size:.96rem}
.vendor-entry .closer{
  margin-top:16px;padding:14px 18px;background:var(--sand);
  font-size:.95rem;border-left:3px solid var(--olive);
}

/* FAQ */
.faq{margin:48px 0}
.faq details{
  border-bottom:1px solid var(--line);
  padding:20px 0;
}
.faq details[open]{padding-bottom:22px}
.faq summary{
  font-family:'Manrope',sans-serif;font-weight:700;
  font-size:1.08rem;color:var(--olive);
  cursor:pointer;list-style:none;
  position:relative;padding-right:36px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:0;top:-2px;
  font-size:1.6rem;font-weight:400;color:var(--accent);
  line-height:1;
}
.faq details[open] summary::after{content:"−"}
.faq details > div{padding-top:14px;color:var(--ink)}
.faq details > div p{margin-bottom:.8em}

/* Article footer */
.article-foot{
  margin-top:60px;padding:32px;background:var(--cream);
  border:1px solid var(--line);
}
.article-foot .bio{
  font-style:italic;color:var(--muted);font-size:.95rem;
  margin-bottom:0;
}
.disclaimer{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  font-family:'Manrope',sans-serif;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:600;
}

/* Related */
.related{padding:64px 0;background:var(--cream);border-top:1px solid var(--line)}
.related h3{
  font-family:'Manrope',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin:0 0 28px;
}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
@media(max-width:680px){.related-grid{grid-template-columns:1fr}}
.related-card{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);background:var(--sand);
  padding:28px;transition:border-color .2s;
}
.related-card:hover{border-color:var(--olive)}
.related-card .pill{margin-bottom:14px}
.related-card h4{
  font-family:'Manrope',sans-serif;font-size:1.25rem;
  color:var(--olive);margin:0 0 8px;font-weight:700;
}
.related-card p{margin:0;color:var(--muted);font-size:.92rem}

/* Page-style narrow content */
.page-body{padding:60px 0 80px}
.page-body h2{font-size:1.5rem;margin-top:2em}
.page-body h3{font-size:1.1rem}
.page-body ul li{margin-bottom:.5em}
.author-card{
  background:var(--cream);border-left:3px solid var(--olive);
  padding:24px 28px;margin:32px 0;
}
.author-card h4{
  font-family:'Manrope',sans-serif;font-size:1rem;
  color:var(--olive);margin:0 0 6px;
}
.author-card p{margin:0;color:var(--muted);font-size:.95rem}

/* Back link */
.back-link{
  display:inline-block;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;margin-bottom:8px;
}
.back-link:hover{color:var(--accent)}
.back-link:before{content:"← "}