/* Gymarc blog. Tokens follow the app's own theme (gymarc code/css/style.css):
   near-black ink, soft grey fields, 24px cards with the app's card shadow,
   pill buttons, and the teal live dot. */
:root {
  --bg: #ffffff; --ink: #080808; --ink-2: #666666; --ink-3: #858585;
  --field: #f8f8f8; --field-2: #e9e9e9; --sep: #ececee;
  --pill: #111111; --pill-ink: #ffffff; --accent: #087f75; --blue: #0071e3;
  --radius: 24px;
  --card-shadow: 0 6px 22px rgb(0 0 0 / 6%), 0 1px 4px rgb(0 0 0 / 3%);
  --bar: rgba(255,255,255,.75);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0f; --ink: #f2f2f2; --ink-2: #aaaaaa; --ink-3: #909090;
    --field: #1b1b1d; --field-2: #303032; --sep: #26262a;
    --pill: #f2f2f2; --pill-ink: #0d0d0f; --accent: #50c7b7; --blue: #4aa3ff;
    --card-shadow: 0 6px 22px rgb(0 0 0 / 20%), 0 1px 4px rgb(0 0 0 / 12%);
    --bar: rgba(13,13,15,.75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d0d0f; --ink: #f2f2f2; --ink-2: #aaaaaa; --ink-3: #909090;
  --field: #1b1b1d; --field-2: #303032; --sep: #26262a;
  --pill: #f2f2f2; --pill-ink: #0d0d0f; --accent: #50c7b7; --blue: #4aa3ff;
  --card-shadow: 0 6px 22px rgb(0 0 0 / 20%), 0 1px 4px rgb(0 0 0 / 12%);
  --bar: rgba(13,13,15,.75);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1.0625rem/1.65 var(--font); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--ink); text-decoration-color: var(--field-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:where(button, input, a, summary):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.sr-only { position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Top bar: translucent, like the app's sheets */
.nav { position: sticky; top: 0; z-index: 20; background: var(--bar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.nav .in { max-width: 1040px; margin: 0 auto; padding: 0 20px; height: 56px; display:flex; align-items:center; justify-content:space-between; gap: 16px; }
.brand { display:flex; align-items:center; gap:8px; color: var(--ink); font-weight: 650; letter-spacing: -.02em; text-decoration: none; }
.mark { width: 22px; height: 22px; background: currentColor; -webkit-mask: url(/gymarc-mark.svg) center/contain no-repeat; mask: url(/gymarc-mark.svg) center/contain no-repeat; }
.nav-links { display:flex; align-items:center; gap: 6px; font-size: .9375rem; }
.nav-links a { text-decoration: none; }
.nav-links a:not(.cta) { color: var(--ink-2); padding: 8px 12px; border-radius: 999px; }
.nav-links a[aria-current] { color: var(--ink); background: var(--field); }
.cta { font-weight: 600; color: var(--pill-ink) !important; background: var(--pill); padding: 9px 16px; border-radius: 999px; transition: transform 120ms var(--ease-spring); }
.cta:active { transform: scale(.96); }

/* Pills and chips, as in the app */
.chip { display:inline-flex; align-items:center; gap: 7px; font-size: .8125rem; font-weight: 600; color: var(--ink-2); background: var(--field); padding: 6px 12px; border-radius: 999px; text-decoration: none; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- Blog index ---------- */
.blog-head { max-width: 1040px; margin: 0 auto; padding: 48px 20px 8px; }
.blog-head h1 { font-size: clamp(2.5rem, 8vw, 3.75rem); line-height: 1.02; letter-spacing: -.045em; margin: 14px 0 12px; }
.blog-head p { font-size: 1.1875rem; line-height: 1.45; color: var(--ink-2); max-width: 30em; margin: 0; letter-spacing: -.02em; }

.segments { max-width: 1040px; margin: 0 auto; padding: 24px 20px 4px; }
.back-pill { display:inline-flex; align-items:center; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--ink-2); padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--field); text-decoration: none; margin: 0 0 20px; transition: transform 120ms var(--ease-spring); }
.back-pill svg { width: 16px; height: 16px; }
.back-pill:hover { color: var(--ink); }
.back-pill:active { transform: scale(.96); }

/* Section switcher: a liquid-glass lens slides between the pills. It stretches
   to span both ends while it travels, then settles (see the script on the
   index page), and grows slightly while pressed, like iOS glass. */
.seg-wrap { position: relative; isolation: isolate; width: max-content; max-width: 100%; border-radius: 999px; overflow: hidden; background: var(--field); box-shadow: inset 0 1px 3px rgba(0,0,0,.07), inset 0 0 0 1px var(--field-2); }
.seg { position: relative; display:flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 4px; }
.seg::-webkit-scrollbar { display: none; }
.seg a { position: relative; z-index: 1; flex: none; font-size: .9375rem; font-weight: 600; color: var(--ink-2); padding: 9px 16px; border-radius: 999px; text-decoration: none; transition: color .3s; }
.seg a[aria-current="true"] { color: var(--ink); }
.seg .n { font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.lens { position:absolute; top: 4px; left: 0; width: 0; height: calc(100% - 8px); z-index: 0; pointer-events:none; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.55));
  -webkit-backdrop-filter: blur(10px) saturate(190%) brightness(1.06); backdrop-filter: blur(10px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.05), 0 0 0 1px rgba(255,255,255,.65), 0 8px 20px -6px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.08);
  transition: transform 260ms var(--ease-spring); }
.lens::after { content:""; position:absolute; left: 12%; right: 12%; top: 2px; height: 38%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); opacity:.7; }
.seg-wrap.press .lens { transform: scale(1.07, 1.14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lens { background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.09)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(255,255,255,.14), 0 8px 20px -6px rgba(0,0,0,.6); }
  :root:not([data-theme="light"]) .lens::after { opacity: .35; }
}
:root[data-theme="dark"] .lens { background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.09)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(255,255,255,.14), 0 8px 20px -6px rgba(0,0,0,.6); }
.card { will-change: transform, opacity, filter; }

.grid { max-width: 1040px; margin: 0 auto; padding: 24px 20px 56px; display:grid; gap: 18px; }
.card { display:flex; flex-direction:column; background: var(--field); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; text-decoration: none; color: var(--ink); transition: transform 300ms var(--ease-ios); }
.card:hover { transform: translateY(-2px); }
.card:active { transform: scale(.985); }
.card .thumb { background: #ffffff; aspect-ratio: 16 / 8; }
.card .thumb img { display:block; width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 18px 20px 20px; display:flex; flex-direction:column; gap: 8px; }
.card h2 { margin: 2px 0 0; font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.025em; }
.card p { margin: 0; color: var(--ink-2); font-size: .9688rem; line-height: 1.5; }
.card .meta { font-size: .8125rem; color: var(--ink-3); }
.card.feature .body { padding: 22px 24px 26px; }
.card.feature h2 { font-size: clamp(1.5rem, 4.2vw, 2rem); letter-spacing: -.035em; }
.empty { background: var(--field); border-radius: var(--radius); padding: 28px 24px; color: var(--ink-2); text-align: center; }
.empty b { display:block; color: var(--ink); font-size: 1.0625rem; margin-bottom: 4px; }
[hidden] { display: none !important; }
@media (min-width: 760px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .card.feature { grid-column: 1 / -1; }
  .card.feature .body { padding: 36px 40px 40px; }
  .empty { grid-column: 1 / -1; }
}

/* ---------- Article ---------- */
.article { max-width: 720px; margin: 0 auto; padding: 36px 20px 40px; }
.article-top { display:flex; flex-wrap: wrap; align-items:center; gap: 8px; margin: 0 0 18px; }
.article-top .back { display:inline-flex; align-items:center; gap: 4px; font-size: .875rem; font-weight: 600; color: var(--ink-2); background: var(--field); padding: 7px 14px 7px 9px; border-radius: 999px; text-decoration: none; margin-right: 4px; transition: transform 120ms var(--ease-spring); }
.article-top .back:active { transform: scale(.96); }
h1 { font-size: clamp(2.25rem, 7vw, 3.25rem); line-height: 1.05; letter-spacing: -.045em; font-weight: 700; margin: 0 0 16px; text-wrap: balance; }
.dek { font-size: 1.25rem; line-height: 1.45; color: var(--ink-2); letter-spacing: -.02em; margin: 0 0 16px; }
.byline { display:flex; align-items:center; gap: 10px; font-size: .875rem; color: var(--ink-2); margin: 0 0 32px; padding-bottom: 24px; border-bottom: 1px solid var(--sep); }
.byline .mark { width: 28px; height: 28px; padding: 6px; background: var(--ink); -webkit-mask: none; mask: none; border-radius: 50%; position: relative; }
.byline .mark::after { content:""; position:absolute; inset: 6px; background: var(--bg); -webkit-mask: url(/gymarc-mark.svg) center/contain no-repeat; mask: url(/gymarc-mark.svg) center/contain no-repeat; }
.byline b { color: var(--ink); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 4.4vw, 1.875rem); line-height: 1.15; letter-spacing: -.03em; font-weight: 700; margin: 52px 0 12px; text-wrap: balance; scroll-margin-top: 80px; }
h3 { font-size: 1.25rem; letter-spacing: -.02em; margin: 28px 0 8px; }
.article p, .article li { color: var(--ink); }
.article p a, .article li a { text-decoration-line: underline; }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: 6px; }

/* Key takeaways: an app card */
.takeaways { background: var(--field); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 22px 24px; }
.takeaways h2 { display:flex; align-items:center; gap: 8px; font-size: .9375rem; margin: 0 0 10px; letter-spacing: -.01em; color: var(--ink-2); }
.takeaways h2::before { content:""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.takeaways ul { margin: 0; padding-left: 1.1em; }

/* Contents */
.toc { margin: 22px 0 0; display:flex; flex-wrap: wrap; gap: 8px; }
.toc a { font-size: .875rem; font-weight: 500; color: var(--ink-2); background: var(--bg); box-shadow: inset 0 0 0 1px var(--field-2); padding: 7px 13px; border-radius: 999px; text-decoration: none; }
.toc a:hover { color: var(--ink); }

/* Rank heading */
.rank { display:flex; align-items:baseline; gap: 12px; }
.rank .num { flex: none; display:inline-grid; place-items:center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; transform: translateY(-3px); }

figure { margin: 22px 0; }
figure .frame { background: #ffffff; border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; }
figure img { display:block; width: 100%; height: auto; }
figcaption { font-size: .875rem; color: var(--ink-2); margin: 10px 4px 0; }

/* Table as an app list */
.table-card { background: var(--field); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 6px 18px; margin: 24px 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { text-align: left; padding: 13px 8px; border-bottom: 1px solid var(--field-2); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { color: var(--ink-2); font-weight: 600; font-size: .8125rem; }
td:first-child { font-weight: 700; }

/* "Log it in Gymarc": a slice of the app's workout screen */
.applog { background: var(--bg); border-radius: 32px; box-shadow: var(--card-shadow), 0 0 0 1px var(--field-2); padding: 20px; margin: 22px 0; }
.applog .bar { display:flex; align-items:center; gap: 10px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.applog .live { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.applog .input { display:flex; align-items:center; gap: 10px; margin-bottom: 14px; }
.applog .input span { flex: 1; font-size: 1.1875rem; font-weight: 500; color: var(--ink-3); letter-spacing: -.015em; }
.applog .input b { background: var(--pill); color: var(--pill-ink); padding: 9px 16px; border-radius: 999px; font-size: .9375rem; }
.applog .entries { display:flex; flex-direction:column; gap: 10px; }
.applog .entry { background: var(--field); border-radius: 20px; padding: 13px 16px; }
.applog .entry code { display:block; font: 600 .9375rem var(--mono); color: var(--ink); }
.applog .entry span { display:block; font-size: .875rem; color: var(--ink-2); margin-top: 2px; }

.sources { font-size: .9375rem; }
.sources li { color: var(--ink-2); }

/* Waitlist card */
.join { margin: 56px 0 0; padding: 30px 26px; border-radius: 32px; background: var(--field); box-shadow: var(--card-shadow); text-align: center; }
.join .mark { width: 40px; height: 40px; margin: 0 auto 12px; display:block; }
.join h2 { margin: 0 0 8px; }
.join p { color: var(--ink-2); margin: 0 auto 20px; max-width: 26em; }
.field { display:flex; gap:6px; padding:5px; background: var(--bg); border-radius: 999px; max-width: 440px; margin: 0 auto; text-align: left; }
.field input { flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font: 1.0625rem var(--font); padding: 0 6px 0 16px; outline: none; }
.btn { border:0; cursor:pointer; font: 600 1.0625rem var(--font); color: var(--pill-ink); background: var(--pill); padding: 13px 20px; border-radius: 999px; white-space: nowrap; transition: transform 120ms var(--ease-spring); }
.btn:active { transform: scale(.96); }
.btn[disabled] { opacity: .5; }
.hp { position:absolute; left:-9999px; }
.note { margin: 10px 4px 0 !important; font-size: .875rem; }
.err { margin: 8px 4px 0 !important; font-size: .875rem; color: #d70015 !important; }
.err:empty { display:none; }
.done { display:none; font-size: 1.0625rem; color: var(--ink) !important; }
.join.is-done .field, .join.is-done .note, .join.is-done .err { display:none; }
.join.is-done .done { display:block; }
@media (max-width: 420px) { .field { flex-direction: column; border-radius: 22px; } .field input { padding: 14px 12px; } .btn { width: 100%; } }

.more { margin: 48px 0 0; }
.more h2 { font-size: 1.25rem; margin: 0 0 14px; }

footer { border-top: 1px solid var(--sep); padding: 22px 20px 40px; font-size: .8125rem; color: var(--ink-2); }
footer .in { max-width: 1040px; margin: 0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap: 10px 24px; }
footer nav { display:flex; gap: 20px; }
footer a { color: var(--ink-2); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }