@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@600;700&family=Mulish:wght@400;600;700;800&display=swap');

/* Science Meets Gym: shared, site-wide styles.
   Loaded on EVERY page via site-sync (see tools/site-sync/). This is the single
   home for CSS that applies across the whole site. Keep page-specific design in
   each page's own <style> block; only put genuinely universal rules here.

   Design reference for the site chrome: healthline.com/fitness. Solid black
   masthead over an otherwise white page, one teal accent (#02838D), square
   corners, no shadows, no gradients, warm cream footer. */

/* Outbound Kensui product CTA hook.
   Every kensui.com/products link carries class="kensui-cta" as a stable
   GTM/analytics selector. Intentionally NO visual override here so each page
   keeps styling its own button. Add a site-wide CTA rule below only if you want
   it to apply to every CTA on every page. */
.kensui-cta { /* analytics selector only, no visual styling on purpose */ }

/* =====================================================================
   Canonical NAV + FOOTER: one look for every page (site-sync manages the
   markup; this styles it). Loaded after each page's inline <style>, so these
   rules win and unify the header/footer across all designs. Every property a
   page might also set is restated here so no page's inline chrome CSS bleeds
   through. Colors are hardcoded (not CSS vars) so they render the same
   regardless of a page's own palette. Edit the site's header/footer look ONLY
   here.
   ===================================================================== */

/* ---- MASTHEAD ---- */
.nav {
  background: #000;
  position: relative;
  top: auto;
  z-index: 100;
  padding: 0;
  border: none;
  border-bottom: none;
  box-shadow: none;
  font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Legacy gradient rule kept dark in case a stale page still ships the element. */
.nav-accent { display: none; }
.nav-main {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 74px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  background: transparent;
}
.nav-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.nav-logo img {
  height: 34px;
  width: auto;
  display: block;
  opacity: 1;
  filter: brightness(0) invert(1);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  position: static;
  flex-direction: row;
}
.nav-links li { list-style: none; margin: 0; padding: 0; border: none; }
.nav-links a {
  display: inline-block;
  font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  letter-spacing: 0;
  text-transform: none;
  padding: 6px 0;
  border: none;
  border-radius: 0;
  background: none;
  text-decoration: none;
  transition: color .15s;
}
.nav-links a:hover,
.nav-links a:focus-visible { color: #7fc9cf; background: none; text-decoration: none; }
.nav-links a.active {
  color: #fff;
  background: none;
  font-weight: 700;
  box-shadow: inset 0 -3px 0 0 #02838D;
}
.nav-actions { display: flex; align-items: center; gap: 4px; margin-left: 20px; }
.nav-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  font-size: 1rem;
  background: none;
  border: none;
  text-decoration: none;
  transition: color .15s;
}
.nav-search:hover { color: #7fc9cf; text-decoration: none; }

/* NOTE: no hamburger. David removed it on 2026-08-14, the same call he made on
   SGG: on a phone that row is the first thing above the headline and he wanted
   the space back. The masthead is the logo and the search icon, and the nav
   links are desktop only as a result (see Mobile). Don't reintroduce a toggle
   without asking him. */

/* ---- FOOTER ---- */
.footer {
  background: #FBF5ED;
  border-top: 1px solid #DCDBDB;
  padding: 44px 24px 32px;
  font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  text-align: left;
}
.footer-logo { display: inline-flex; }
.footer-logo img {
  height: 32px;
  width: auto;
  display: block;
  opacity: 1;
  filter: none;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  justify-content: flex-start;
}
.footer-links li { list-style: none; margin: 0; }
.footer-links a {
  font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: .875rem;
  font-weight: 600;
  color: #231F20;
  text-decoration: none;
  transition: color .15s;
}
.footer-links a:hover { color: #02838D; text-decoration: underline; }
.footer-copy {
  display: block;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #E3DACB;
  font-size: .75rem;
  line-height: 1.6;
  color: #767474;
}

/* ---- Mobile: the masthead is the logo and the search icon ----
   The section links are hidden rather than tucked behind a panel: with the
   hamburger gone nothing can open one, and a permanently visible row of links
   would put a second line of chrome above every headline. They stay in the DOM
   for desktop and crawlers, and the footer carries the same sections. ---- */
@media (max-width: 768px) {
  .nav-main { min-height: 62px; padding: 0 20px; gap: 12px; }
  .nav-logo img { height: 28px; }
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
  .footer { padding: 36px 20px 28px; }
  .footer-links { gap: 10px 24px; }
}

@media (max-width: 480px) {
  .nav-main { padding: 0 16px; }
  .footer { padding: 32px 16px 24px; }
  .footer-links { flex-direction: column; gap: 0; }
  .footer-links li + li { border-top: 1px solid #EFE6D8; }
  .footer-links a { display: block; padding: 11px 0; }
}

/* =====================================================================
   FOOTER SOCIAL. Instagram + Facebook, sitting between the footer links and
   the copyright line. Markup comes from
   tools/site-sync/partials/sciencemeetsgym/footer.html (Remy, 2026-08-12:
   "can you also add our socials (instagram and facebook on the bottom)").
   Icons are inline SVG on purpose: Font Awesome is not loaded site-wide.
   ===================================================================== */

.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.footer-social li { list-style: none; margin: 0; padding: 0; border: none; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #231F20;
  background: transparent;
  border: 1px solid #DCD2C2;
  border-radius: 0;
  text-decoration: none;
  transition: color .15s, background .15s, border-color .15s;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: #fff;
  background: #02838D;
  border-color: #02838D;
  text-decoration: none;
}
.footer-social svg { display: block; }

/* =====================================================================
   NEWSLETTER CAPTURE. Full-bleed dark band stamped directly above the footer
   on every page by site-sync (partials/sciencemeetsgym/email-capture.html).
   Remy, 2026-08-12: "since there is a lot of traffic i dont think it can hurt
   to collect emails", modelled on the menshealth.com article-foot block.
   Every property a page might also set is restated here, and this file loads
   after each page's inline <style>, so no page design can bleed into it.
   ===================================================================== */

.smg-signup {
  background: #101820;
  padding: 54px 24px;
  margin: 0;
  font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.smg-signup-inner { max-width: 1200px; margin: 0 auto; text-align: left; }

.smg-signup-badge {
  display: inline-block;
  background: #02838D;
  color: #fff;
  font-family: inherit;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 0;
}
.smg-signup-title {
  font-family: 'Archivo Narrow', 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.01em;
  text-transform: none;
  color: #fff;
  margin: 18px 0 10px;
  padding: 0;
  border: none;
  max-width: 720px;
}
.smg-signup-sub {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #c3ccce;
  margin: 0 0 24px;
  padding: 0;
  max-width: 640px;
}
.smg-signup-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  padding: 0;
  max-width: 700px;
}
.smg-signup-field {
  position: relative;
  flex: 1 1 300px;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 0;
}
.smg-signup-icon { position: absolute; left: 14px; color: #6f797b; pointer-events: none; }
.smg-signup-label {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.smg-signup-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 15px 14px 15px 42px;
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.3;
  color: #101820;
}
.smg-signup-input::placeholder { color: #8b9496; opacity: 1; }
.smg-signup-input:focus { outline: 2px solid #02838D; outline-offset: 2px; }
.smg-signup-btn {
  flex: 0 0 auto;
  display: inline-block;
  background: #02838D;
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: 15px 28px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.smg-signup-btn:hover { background: #016d76; }
.smg-signup-btn:disabled { opacity: .55; cursor: default; }
.smg-signup-status {
  flex: 1 1 100%;
  margin: 2px 0 0;
  padding: 0;
  font-family: inherit;
  font-size: .86rem;
  line-height: 1.5;
  color: #c3ccce;
}
.smg-signup-status:empty { display: none; }
.smg-signup-status[data-state="error"] { color: #ffb1a3; }
.smg-signup-status[data-state="ok"] { color: #6fd3c4; font-weight: 700; }
.smg-signup-form[data-newsletter-done] .smg-signup-field,
.smg-signup-form[data-newsletter-done] .smg-signup-btn { display: none; }
.smg-signup-fine {
  font-family: inherit;
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.6;
  color: #7d8789;
  margin: 16px 0 0;
  padding: 0;
  max-width: 640px;
}

@media (max-width: 768px) {
  .footer-social { margin-top: 18px; }
  .smg-signup { padding: 42px 20px; }
  .smg-signup-title { font-size: 1.7rem; }
  /* Stacked: the flex basis now sizes HEIGHT, so reset it or the input grows
     to fill the column. */
  .smg-signup-form { flex-direction: column; max-width: none; }
  .smg-signup-field { flex: 0 0 auto; }
  .smg-signup-status { flex: 0 0 auto; }
  .smg-signup-btn { width: 100%; padding: 16px 20px; }
}

@media (max-width: 480px) {
  .smg-signup { padding: 36px 16px; }
  .smg-signup-title { font-size: 1.5rem; }
  .smg-signup-sub { font-size: .95rem; }
}

/* =====================================================================
   AUTHOR BIO BOX. site-sync stamps the markup from
   tools/site-sync/partials/sciencemeetsgym/author-bio.html at the foot of
   every article, above the newsletter block; this styles it. Who signs which
   page lives in tools/site-sync/authors.mjs, never in a page.

   The avatar is the byline's portrait when it has one and the site mark
   when it does not. Read the header comment in authors.mjs before changing
   which: what a byline may and may not claim is a rule there, not a
   styling choice here.
   ===================================================================== */
.smg-author {
  background: #FBF5ED;
  border-top: 1px solid #E3DACB;
  padding: 46px 24px;
  font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.smg-author-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.smg-author-avatar {
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #02838D;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Archivo Narrow', 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .06em;
}
.smg-author-body { min-width: 0; }
.smg-author-name {
  margin: 0;
  font-family: 'Archivo Narrow', 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #02838D;
}
.smg-author-role {
  margin: 4px 0 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7477;
}
.smg-author-bio {
  margin: 12px 0 0;
  font-size: .95rem;
  line-height: 1.65;
  color: #231F20;
}
.smg-author-link {
  display: inline-block;
  margin: 14px 0 0;
  font-size: .92rem;
  font-weight: 700;
  color: #231F20;
  text-decoration: none;
  border-bottom: 2px solid #02838D;
  padding-bottom: 2px;
}
.smg-author-link:hover { color: #02838D; }
/* FTC affiliate disclosure. Sits inside the sync-managed author bio so every
   article on the site carries it and no page can be shipped without one. */
.smg-author-disclosure {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(35,31,32,.14);
  font-size: .82rem;
  line-height: 1.6;
  color: #5B6572;
}

@media (max-width: 768px) {
  .smg-author { padding: 34px 20px; }
  .smg-author-inner { gap: 16px; }
  .smg-author-avatar { flex-basis: 58px; width: 58px; height: 58px; font-size: .95rem; }
}
@media (max-width: 480px) {
  .smg-author-inner { flex-direction: column; }
}

/* Photo variant of the bio-box avatar. Used when a byline in authors.mjs carries
   a `photo`. Same 74px circle as the mark. */
.smg-author-photo { object-fit: cover; background: #EFE6D8; }

/* =====================================================================
   TOP BYLINE PORTRAIT. Remy, 2026-08-12: "No image of Chris (I see one on
   the bottom)". site-sync stamps the same portrait the bio box uses into
   the byline under each article's headline (step 2.56 in sync-site.mjs).

   It goes INSIDE whatever avatar element that page's byline already has,
   so it inherits that page's size, shape and position. That is why nothing
   here sets width or height: those belong to the page, and overriding them
   would flatten every byline on the site into one look.
   ===================================================================== */
.smg-byline-photo,
.smg-byline-photo-solo { object-fit: cover; background: #EFE6D8; }
.smg-byline-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* ---------------------------------------------------------------------
   THE STAMPED BYLINE ITSELF (sync step 2.54), for articles that never had
   one. David, 2026-08-13: "all pages should have a top byline."

   This lands inside six different hero designs, several of them on their own
   background colour, so it inherits font and colour from the page instead of
   declaring its own. Don't hardcode a colour here: one of these heroes is
   dark and the byline would disappear into it.
   --------------------------------------------------------------------- */
.smg-byline {
  /* inline-flex, not flex, so the byline follows the hero's own text-align.
     One of these heroes centres its whole text column; a block-level flex row
     would sit hard left in the middle of a centred hero. */
  display: inline-flex;
  align-items: center;
  gap: 13px;
  max-width: 100%;
  margin: 24px 0 0;
}
.smg-byline-body { text-align: left; }
.smg-byline-avatar {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(128, 128, 128, .22);
}
.smg-byline-body { min-width: 0; }
.smg-byline-name,
.smg-byline-meta {
  font: inherit;
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.smg-byline-name {
  margin: 0;
  font-size: .98rem;
  font-weight: 400;
  line-height: 1.3;
}
.smg-byline-name strong { font-weight: 700; }
.smg-byline-meta {
  margin: 3px 0 0;
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.45;
  opacity: .72;
}
@media (max-width: 480px) {
  .smg-byline { gap: 11px; margin-top: 20px; }
  .smg-byline-avatar { flex-basis: 40px; width: 40px; height: 40px; }
  .smg-byline-name { font-size: .92rem; }
  .smg-byline-meta { font-size: .78rem; }
}

/* Standalone variant, for bylines that are a line of text with no avatar
   element of their own. This one has to size itself. 34px matches the avatar
   the sibling listicle format already uses. */
.smg-byline-photo-solo,
.smg-byline-mark-solo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 auto;
  align-self: center;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

/* Fallback when a byline in authors.mjs has no `photo`: the site mark, in the
   same slot. Both sites ship portraits today, so this is the safety net that
   keeps a byline from rendering as an empty hole if one is ever removed. */
.smg-byline-mark,
.smg-byline-mark-solo {
  background: #02838D;
  color: #fff;
  font-family: 'Archivo Narrow', 'Mulish', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .06em;
  text-align: center;
}
.smg-byline-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.smg-byline-mark-solo { line-height: 34px; }

/* =====================================================================
   ARTICLE LEDE VISUAL (above the fold). site-sync stamps the markup from
   tools/site-sync/partials/sciencemeetsgym/lede.html directly under the
   page's <h1 class="article-title">; this styles it. Which pages get one
   lives in tools/site-sync/ledes.mjs, and the image URL comes from
   articles.json, never from a page.

   Remy, 2026-08-12: "I think some image or something should be visible
   above fold". The tier lists were the only format here that opened with
   no image at all, so on a 375px phone the first pixel of imagery sat
   1058px down, past two screens of type.

   Two constraints this block exists to hold:
     - The crop is FIXED at 16/9 via aspect-ratio + object-fit, so the
       height is known before the image loads (no layout shift under the
       headline) and a square source crops to the same band as a wide one.
     - It has to leave room for the headline. A 16/9 crop of a 375px
       column is ~188px tall, which lands photo AND caption inside the
       first screen with the kicker and a three-line headline above it.
       Anything taller starts pushing the headline off, which trades one
       problem for a worse one.

   The caption deliberately sets no font-family: these articles each carry
   their own palette and type, and the lede reads as part of the piece
   rather than as site chrome (unlike .sgg-author, which is chrome). The
   rule beside it is neutral for the same reason, and a page can claim it
   with --lede-accent without touching this file.
   ===================================================================== */
.smg-lede { margin: 0 0 24px; }
.smg-lede-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #F1F3F5;
}
.smg-lede-cap {
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--lede-accent, rgba(35,31,32,.18));
  font-size: .88rem;
  line-height: 1.5;
  color: #5B6572;
}

@media (max-width: 768px) {
  .smg-lede { margin-bottom: 20px; }
  .smg-lede-cap { margin-top: 10px; font-size: .84rem; }
}
/* Short viewports (landscape phones, small laptops): cap the photo so the
   headline above it is never pushed out of the first screen. */
@media (max-height: 640px) {
  .smg-lede-img { max-height: 42vh; }
}

/* ─────────────────────────────────────────────────────────────
   owner-photo — buyer photos pulled from Kensui customer reviews
   (Remy, 2026-08-12: "add some images of the product in use ...
   raw unfiltered and believable"). Deliberately unstyled beyond
   layout: no filters, no crops, no borders that impose a palette,
   so each page keeps its own visual identity and the photos keep
   the phone-camera look that makes them believable.
   ───────────────────────────────────────────────────────────── */
figure.owner-photo {
  margin: 32px auto;
  max-width: 560px;
  padding: 0;
}
figure.owner-photo img {
  display: block;
  max-width: 100%;
  /* Phone shots are mostly portrait; cap the height so one buyer photo never
     takes over the column, and let landscape shots still fill the width. */
  max-height: 620px;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
}
figure.owner-photo figcaption {
  margin: 10px 0 0;
  font-size: .82rem;
  line-height: 1.45;
  text-align: left;
  opacity: .72;           /* inherits each page's own text colour */
}
@media (max-width: 768px) {
  figure.owner-photo { margin: 24px auto; max-width: 100%; }
  figure.owner-photo figcaption { font-size: .78rem; }
}

/* ─────────────────────────────────────────────────────────────
   ab-author — split-test author arms (tests.mjs type:'author').
   sync stamps BOTH arms' byline portraits + bio boxes into a
   registered page, tagged .ab-author-a / .ab-author-b; the arm
   assignment script sets data-cta on <html> before first paint.
   JS-off and crawlers see arm A only. Generic on purpose: any
   future author test reuses these three rules unchanged.
   ───────────────────────────────────────────────────────────── */
.ab-author-b { display: none !important; }
html[data-cta="b"] .ab-author-a { display: none !important; }
html[data-cta="b"] .ab-author-b { display: revert !important; }