/* MuscleFuel.fit — editorial gym */

:root {
  --ink: #1c1916;
  --paper: #f6f2eb;
  --paper-2: #efe8dc;
  --header: #161310;
  --accent: #c44e1a;
  --accent-dark: #9a3a12;
  --muted: #6d655c;
  --line: #e2d8cb;
  --link: #a33d14;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Figtree", "Segoe UI", Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
}

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

a { color: var(--link); }
a:hover { color: var(--accent-dark); }

h1, h2, h3 {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  letter-spacing: 0.01em;
  color: var(--ink);
}
h1 { font-size: 2.35rem; line-height: 1.15; margin: 18px 0 14px; font-weight: 800; }
h2 { font-size: 1.65rem; margin: 44px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--line); scroll-margin-top: 20px; font-weight: 700; }
h3 { font-size: 1.4rem; font-weight: 700; }

p { margin-bottom: 16px; }

.topbar { background: var(--header); border-bottom: 1px solid #2a241e; font-size: 12.5px; color: #a39b90; }
.topbar-inner { padding: 7px 20px; }
.topbar a { color: #cbbfb0; }

.site-header { border-bottom: 3px solid var(--accent); background: var(--header); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.logo { display: flex; flex-direction: column; text-decoration: none; }
.logo-text {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.85rem; font-weight: 800; color: #f4efe8;
  letter-spacing: 0.04em; line-height: 1.05; text-transform: uppercase;
}
.logo-accent {
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: var(--accent);
}
.logo-tld { color: #8a8176; font-weight: 700; font-size: 0.58em; letter-spacing: 0; margin-left: 2px; text-transform: none; }
.logo-tagline {
  font-size: 10px; font-weight: 600; color: #8a8176;
  text-transform: uppercase; letter-spacing: 0.16em; margin-top: 4px;
}
.main-nav a { color: #d5cdc2; text-decoration: none; font-size: 14.5px; font-weight: 600; margin-left: 22px; }
.main-nav a:hover { color: var(--accent); }

.layout { padding-top: 8px; }
.content { padding-bottom: 30px; }

.breadcrumbs { font-size: 13px; color: var(--muted); margin-top: 14px; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

.byline { display: flex; align-items: center; gap: 10px; margin: 6px 0 20px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.byline-text { display: flex; flex-direction: column; font-size: 14px; color: #4a453f; }
.byline-meta { color: var(--muted); font-size: 13px; }
.fact-checked { color: var(--accent); font-weight: 600; }

.intro { font-size: 18px; color: #3a3530; }

.hero-img { margin: 4px 0 22px; }
.hero-img img { width: 100%; height: auto; display: block; border-radius: 2px; }
.hero-img figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.inline-img { margin: 22px 0; }
.inline-img img { width: 100%; height: auto; display: block; border-radius: 2px; }
.inline-img figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.verdict-box {
  background: #f3e6d8; border: 1px solid #e2c8b0; border-left: 4px solid var(--accent);
  border-radius: 2px; padding: 14px 16px; margin: 20px 0; font-size: 15.5px;
}

.medical-note {
  background: #fff8e6; border: 1px solid #f0dfae; border-left: 4px solid #c4921a;
  border-radius: 2px; padding: 13px 16px; margin: 20px 0; font-size: 14.5px; color: #5c4a00;
}
.medical-note a { color: #5c4a00; }

.table-note { font-size: 13px; color: var(--muted); margin-top: 8px; }

.toc {
  background: #fffdf8; border: 1px solid var(--line); border-radius: 2px;
  padding: 16px 18px; margin: 20px 0 30px; font-size: 15px;
}
.toc ol { margin: 8px 0 10px 22px; }
.toc li { margin-bottom: 4px; }

.review-card {
  border: 1px solid var(--line); border-radius: 2px;
  padding: 20px 22px; margin: 0 0 26px;
  position: relative;
  scroll-margin-top: 20px;
  background: #fffdf8;
  box-shadow: 0 1px 0 rgba(28,25,22,0.04);
}
.review-card > .badge {
  display: inline-block;
  background: #3a3530; color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 2px;
  margin-bottom: 12px;
}
.badge-first { background: var(--accent); }

.review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.review-title h3 { margin-bottom: 4px; }

.stars { position: relative; display: inline-block; font-size: 18px; line-height: 1; letter-spacing: 2px; vertical-align: middle; }
.stars-empty { color: #d8d0c4; }
.stars-fill { color: var(--accent); position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.rating-text { font-size: 14px; color: #555; margin-left: 8px; font-weight: 600; }

.review-cta { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.btn-visit {
  display: inline-block; background: var(--accent); color: #fff !important;
  text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 10px 26px; border-radius: 2px; white-space: nowrap;
}
.btn-visit:hover { background: var(--accent-dark); }
.cta-sub { font-size: 12px; color: #999; }

.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 14px 0 16px; }
.pros, .cons { background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; }
.pros h4 { color: var(--accent); font-size: 14px; margin-bottom: 6px; }
.cons h4 { color: #a33a2b; font-size: 14px; margin-bottom: 6px; }
.pros ul, .cons ul { list-style: none; }
.pros li, .cons li { font-size: 14.5px; padding-left: 20px; position: relative; margin-bottom: 5px; }
.pros li::before { content: "✓"; color: var(--accent); position: absolute; left: 0; font-weight: 700; }
.cons li::before { content: "✕"; color: #a33a2b; position: absolute; left: 0; font-weight: 700; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 4px; }
.spec-table th, .spec-table td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
.spec-table th { background: var(--paper-2); color: #555; font-weight: 600; width: 17%; white-space: nowrap; }
.spec-table td { width: 33%; }

.table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.compare-table th { background: var(--paper-2); border: 1px solid var(--line); padding: 10px 12px; text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: #555; }
.compare-table td { border: 1px solid var(--line); padding: 10px 12px; vertical-align: middle; }
.compare-table tbody tr:nth-child(odd) { background: #fffdf8; }
.compare-table tbody tr:first-child { background: #f3e6d8; }
.btn-small {
  display: inline-block; background: var(--accent); color: #fff !important; text-decoration: none;
  font-weight: 700; font-size: 13px; padding: 6px 16px; border-radius: 2px;
}
.btn-small:hover { background: var(--accent-dark); }

.method-list { margin: 0 0 16px 22px; }
.method-list li { margin-bottom: 10px; }

details { border: 1px solid var(--line); border-radius: 2px; margin-bottom: 10px; background: #fffdf8; }
summary { cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: 16px; color: var(--ink); }
summary:hover { background: var(--paper); }
details p { padding: 0 16px 14px; color: #4a453f; }

.author-box {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fffdf8; border: 1px solid var(--line); border-radius: 2px;
  padding: 16px 18px; margin-top: 40px; font-size: 14.5px; color: #4a453f;
}

.site-footer { border-top: 3px solid var(--accent); background: var(--header); margin-top: 40px; padding: 26px 0 30px; font-size: 13px; color: #a39b90; }
.site-footer p { margin-bottom: 10px; max-width: 760px; }
.footer-links a { color: #cbbfb0; }
.copyright { color: #7a736a; }

@media (max-width: 700px) {
  h1 { font-size: 1.75rem; }
  .main-nav { display: none; }
  .pros-cons { grid-template-columns: 1fr; }
  .review-head { flex-direction: column; }
  .review-cta { flex-direction: row; align-items: center; gap: 10px; }
  .spec-table th { width: auto; white-space: normal; }
}