/* Website v2 theme for the pages that share guide.css (/workouts, /train,
   the SEO guide cluster) and the legal pages. Loaded AFTER site.css and
   guide.css by scripts/theme-pages.mjs. Maps the old ink/paper tokens onto
   the v2 void/bone/steel palette and type stack, and restyles the shared
   components so the pages read as part of the same site. */

:root {
  --ink: var(--bg-0);
  --ink-2: var(--bg-1);
  --ink-3: var(--bg-2);
  --paper: var(--bone);
  --paper-2: #c9c6c0;
  --paper-3: var(--bone-dim);
  --paper-4: var(--steel-400);
  --paper-5: var(--hair-strong);
  --paper-6: var(--hair);
  --gold-3: rgba(201, 169, 106, 0.4);
  --gold-4: rgba(201, 169, 106, 0.22);
  --gold-5: rgba(201, 169, 106, 0.08);
  --display: "Big Shoulders", Impact, sans-serif;
  --text: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --label: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --easing: var(--ease-metal);
}
html { scroll-behavior: auto; }
body { background: var(--void); color: var(--paper-2); font-family: var(--text); font-size: 16px; line-height: 1.6; letter-spacing: 0; }
body::before { display: none; }
a { color: var(--gold); }
a:hover { color: var(--gold-bright); text-decoration: none; }
.hdr a, .mm a, .ft a, .btn, .ai-fab, .link { text-decoration: none !important; }
.hdr a:hover, .mm a:hover { color: var(--bone); }

/* fixed header instead of the old sticky nav */
main { padding-top: var(--nav-h) !important; }
.ft .wrap, .mm .wrap { max-width: 1440px; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- article head ---------- */
.article-head { padding: clamp(56px, 7vw, 104px) 0 clamp(24px, 3vw, 40px); }
.crumbs { display: flex; align-items: center; gap: 12px; font-family: var(--label); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--steel-300); margin-bottom: clamp(20px, 3vw, 36px); }
.crumbs::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; }
.crumbs a { color: var(--steel-300); }
.crumbs a:hover { color: var(--bone); }
h1, .w-title { font-family: "Big Shoulders", Impact, sans-serif; font-weight: 800; font-size: clamp(44px, 7.2vw, 96px) !important; line-height: .9; letter-spacing: -.012em; text-transform: uppercase; color: var(--bone); font-variation-settings: "opsz" 72; margin-bottom: clamp(18px, 2.4vw, 28px); }
.standfirst { font-family: var(--text); font-size: clamp(17px, 1.35vw, 20px) !important; line-height: 1.5; color: var(--steel-100); font-weight: 400; max-width: 60ch; }
.byline { font-family: var(--label); font-size: 11px; letter-spacing: .16em; color: var(--steel-400); border-top: 1px solid var(--hair); }

/* ---------- headings in body ---------- */
.article-body h2, .quick-answer h2, .cta h2, .related h2, .choose-card h3, .article-body h3, .faq-item h3, .card-focus, .footer-col h4 {
  font-family: "Big Shoulders", Impact, sans-serif; font-weight: 800; letter-spacing: -.005em; font-variation-settings: "opsz" 72; color: var(--bone);
}
.article-body h2 { font-size: clamp(30px, 4vw, 48px); line-height: .95; margin: clamp(48px, 6vw, 80px) 0 18px; }
.article-body h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1; margin: 36px 0 12px; }
.quick-answer h2, .cta h2 { font-size: clamp(26px, 3vw, 40px); line-height: .95; }
.related h2, .choose-card h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1; }
.faq-item h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1; }
.section-rule { background: var(--hair-strong); width: 28px; margin: clamp(40px, 5vw, 64px) 0 0; }
.article-body p, .article-body li { color: var(--paper-2); }
.article-body strong { color: var(--bone); font-weight: 500; }

/* ---------- blocks ---------- */
.quick-answer { background: var(--bg-1); border: 1px solid var(--hair); border-left: 2px solid var(--gold); border-radius: 0; padding: clamp(24px, 3vw, 36px); }
.quick-answer p { color: var(--paper-2); font-size: 16px; }
.callout { border-left: 1px solid var(--hair-strong); color: var(--bone-dim); }
.callout strong { color: var(--bone); }
.table-scroll { border: 1px solid var(--hair); border-radius: 0; }
table { font-size: 14px; }
th { background: var(--bg-1); font-family: var(--label); font-size: 10.5px; letter-spacing: .16em; color: var(--steel-300); border-bottom: 1px solid var(--hair); }
td { border-bottom: 1px solid var(--hair); color: var(--bone-dim); }
td strong { color: var(--bone); }
tr.is-evolve td { background: rgba(201, 169, 106, .06); }
.tag { font-family: var(--label); border-radius: 0; letter-spacing: .14em; }
.choose-grid { gap: 2px; }
.choose-card { background: var(--bg-1); border: 1px solid var(--hair); border-radius: 0; }
.choose-card.is-evolve { border-color: rgba(201, 169, 106, .45); background: var(--bg-2); }
.choose-card li { color: var(--bone-dim); }
.choose-card li::before { background: var(--gold); width: 4px; height: 4px; border-radius: 50%; top: 9px; }
.faq-item { border-color: var(--hair); padding: 24px 0; }
.faq-item p { color: var(--bone-dim); }

/* ---------- CTA block ---------- */
.cta { background: var(--bg-1); border: 1px solid var(--hair); border-radius: 0; padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px); text-align: left; }
.cta p { margin: 0 0 26px; max-width: 56ch; color: var(--bone-dim); }
.cta-row { justify-content: flex-start; }
.btn { display: inline-flex; align-items: center; gap: 12px; border-radius: 0; font-family: var(--label); font-weight: 400; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding: 17px 22px; border: 1px solid var(--hair-strong); color: var(--bone); background: transparent; line-height: 1; transition: background .35s var(--ease-metal), color .35s var(--ease-metal), border-color .35s; }
.btn:hover { border-color: var(--bone); background: rgba(255,255,255,.04); color: var(--bone); opacity: 1; }
.btn-gold { background: var(--bone); color: var(--void); border-color: var(--bone); }
.btn-gold:hover { background: var(--gold); border-color: var(--gold); color: var(--void); opacity: 1; }
.btn-ghost { border-color: var(--hair-strong); color: var(--bone); }
.btn-ghost:hover { border-color: var(--bone); color: var(--bone); }
.btn.fill { background: var(--bone); color: var(--void); border-color: var(--bone); }
.btn.gold { background: var(--gold); color: var(--void); border-color: var(--gold); }
.btn.sm { padding: 12px 16px; font-size: 11px; }

/* ---------- related / sources ---------- */
.related li { border-color: var(--hair); }
.related a { color: var(--bone); font-family: var(--text); }
.related a:hover { color: var(--gold); }
.related span { color: var(--steel-400); }
.sources { border-color: var(--hair); }
.sources h2 { font-family: var(--label); font-size: 11px; letter-spacing: .2em; color: var(--steel-400); }
.sources li { color: var(--steel-400); }

/* ---------- workouts (/workouts) ---------- */
.levels { gap: 2px; }
.lvl { background: var(--bg-1); color: var(--steel-300); border: 1px solid var(--hair); border-radius: 0; font-family: var(--label); font-size: 11px; letter-spacing: .18em; padding: 15px 10px; }
.lvl[aria-pressed="true"] { background: var(--bone); color: var(--void); border-color: var(--bone); font-weight: 400; }
.cards { gap: 2px; }
.card { background: var(--bg-1); border: 1px solid var(--hair); border-radius: 0; padding: 24px 22px; }
.card:hover { border-color: rgba(201, 169, 106, .5); transform: none; background: var(--bg-2); }
.card-focus { font-size: 28px !important; line-height: .95; letter-spacing: -.005em !important; margin-bottom: 10px; }
.card-meta { font-family: var(--label); color: var(--steel-400); letter-spacing: .14em; }
.card-sum, .card p { color: var(--bone-dim); }
.disclaimer { border: 1px solid var(--hair); border-left: 2px solid var(--gold); border-radius: 0; background: var(--bg-1); color: var(--bone-dim); }
.disclaimer strong { color: var(--bone); }
.back-link { font-family: var(--label); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--steel-300); }
.w-meta { font-family: var(--label); letter-spacing: .18em; color: var(--steel-400); }
.w-sum { color: var(--bone-dim); }
.w-prog-bar { background: var(--hair); border-radius: 0; }
.w-prog-fill { background: var(--gold); border-radius: 0; }
.w-prog-num { font-family: var(--label); letter-spacing: .14em; color: var(--steel-400); }
.block, .ex, .exercise { background: var(--bg-1); border-color: var(--hair); border-radius: 0; }
.rest-bar { background: var(--bg-2); border-top: 1px solid var(--hair); font-family: var(--label); letter-spacing: .14em; }
.rest-bar-t { font-family: var(--label); color: var(--gold); }
.rest-bar-x { font-family: var(--label); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- exercise library (/train) ---------- */
.controls input, .controls select, .facets select, #q { background: var(--bg-1); border: 1px solid var(--hair); border-radius: 0; color: var(--bone); font-family: var(--text); }
.controls input:focus, #q:focus, .facets select:focus { border-color: var(--gold); outline: none; }
.count, .btn-clear { font-family: var(--label); letter-spacing: .16em; text-transform: uppercase; border-radius: 0; }
.btn-clear { border: 1px solid var(--hair); color: var(--steel-300); background: transparent; }
#list li, .ex-row { border-color: var(--hair); }
#list li h3, .ex-name { font-family: var(--text); font-weight: 500; color: var(--bone); letter-spacing: 0; }
.ex-meta, .meta { font-family: var(--label); letter-spacing: .14em; color: var(--steel-400); }
.attrib { color: var(--steel-400); }

/* ---------- legal pages (/privacy, /terms) ---------- */
.legal-hero { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--hair); }
.legal-hero h1 { font-size: clamp(48px, 8vw, 128px) !important; }
.legal-hero h1 em { font-style: normal; background: linear-gradient(180deg, var(--bone) 0%, var(--bone) 38%, var(--steel-400) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.legal-hero-eyebrow { font-family: var(--label); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--steel-300); }
.legal-hero-eyebrow .rule { background: var(--hair-strong); }
.legal-hero-meta dt { font-family: var(--label); font-size: 10.5px; letter-spacing: .18em; color: var(--steel-400); }
.legal-hero-meta dd { font-family: var(--label); font-size: 13px; color: var(--bone); }
.legal-hero-summary { color: var(--bone-dim); font-size: 16px; }
.toc { background: var(--bg-1); border-bottom: 1px solid var(--hair); }
.toc-head { font-family: var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--steel-400); font-size: 11px; }
.toc a { color: var(--bone-dim); }
.toc a:hover { color: var(--bone); }
.toc .num { font-family: var(--label); color: var(--gold); }
.legal-section { border-color: var(--hair); }
.legal-section-num { font-family: var(--label); font-size: 11px; letter-spacing: .2em; color: var(--gold); }
.legal-section h2 { font-family: "Big Shoulders", Impact, sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 44px); line-height: .95; letter-spacing: -.005em; text-transform: uppercase; color: var(--bone); }
.legal-section h3 { font-family: var(--text); font-weight: 500; color: var(--bone); letter-spacing: 0; }
.legal-section p, .legal-section li { color: var(--paper-2); }
.legal-section strong { color: var(--bone); font-weight: 500; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .article-head { padding-top: 40px; }
  .cta { padding: 28px 20px; }
}

/* ---------- mobile density (<=760px) ---------- */
@media (max-width: 760px) {
  main { padding-top: var(--nav-h) !important; }
  .article-head { padding: 28px 0 18px; }
  .crumbs { margin-bottom: 14px; }
  h1, .w-title { font-size: clamp(40px, 12vw, 52px) !important; margin-bottom: 12px; }
  .standfirst { font-size: 16px !important; line-height: 1.45; }
  .byline { margin-top: 16px; padding-top: 12px; gap: 6px 14px; }
  body { font-size: 15.5px; line-height: 1.55; }
  .article-body h2 { font-size: 30px; margin: 34px 0 12px; }
  .article-body h3 { font-size: 22px; margin: 24px 0 8px; }
  .article-body p { margin-bottom: 14px; }
  .article-body ul, .article-body ol { margin: 0 0 16px 18px; }
  .article-body li { margin-bottom: 6px; }
  .section-rule { margin: 28px 0 0; }
  .quick-answer { padding: 18px 16px; margin: 24px 0; }
  .quick-answer h2, .cta h2 { font-size: 26px; }
  .quick-answer p { font-size: 15px; }
  .callout { margin: 18px 0; padding: 2px 0 2px 16px; font-size: 15px; }
  .table-scroll { margin: 16px 0 10px; }
  .table-note { margin-bottom: 16px; }
  .choose-grid { margin: 18px 0; }
  .choose-card { padding: 18px 16px; }
  .choose-card li { margin-bottom: 7px; font-size: 14.5px; }
  .faq-item { padding: 14px 0; }
  .faq-item h3 { font-size: 22px; margin-bottom: 6px; }
  .cta { padding: 22px 18px; margin: 32px 0 12px; }
  .cta p { margin-bottom: 16px; font-size: 15px; }
  .related { margin-top: 28px; }
  .related a { padding: 11px 0; font-size: 15px; }
  .related span { font-size: 13px; }
  .sources { margin-top: 28px; padding-top: 16px; }
  .sources li { font-size: 12.5px; margin-bottom: 5px; }

  /* workouts */
  .prog-wrap .levels { margin: 14px 0 14px; }
  .prog-wrap .lvl { padding: 13px 8px; }
  .prog-wrap .card { padding: 14px 16px; }
  .prog-wrap .card-focus { font-size: 24px !important; margin-bottom: 6px; }
  .prog-wrap .card-meta { font-size: 10px; }
  .prog-wrap .card-sum, .prog-wrap .card p { font-size: 14.5px; line-height: 1.45; }
  .prog-wrap .disclaimer { padding: 14px 16px; font-size: 14px; margin-top: 18px; }
  .prog-wrap .w-head { margin-bottom: 14px; }
  .prog-wrap .w-sum { font-size: 15px; }
  .prog-wrap .w-warm { padding: 12px 14px; font-size: 14.5px; }
  .prog-wrap .block { padding: 14px 0; }

  /* exercise library */
  .train-wrap .controls { margin: 14px 0; }
  .train-wrap .attrib { font-size: 12.5px; margin-top: 20px; }

  /* legal */
  .legal-hero { padding-top: 28px; padding-bottom: 20px; }
  .legal-hero h1 { font-size: clamp(44px, 13vw, 60px) !important; }
  .legal-hero-meta { gap: 6px 14px; margin: 14px 0; }
  .legal-hero-meta dt { margin: 0; }
  .legal-hero-summary { font-size: 15px; }
  .toc { padding: 18px 0; }
  .toc ol { gap: 4px 12px; }
  .toc li a { padding: 6px 0; }
  .legal-body { padding: 8px 0 24px; }
  .legal-section { padding: 22px 0; }
  .legal-section h2 { font-size: 26px; margin-bottom: 10px; }
  .legal-section p, .legal-section li { font-size: 15px; margin-bottom: 10px; }
}