/* Public SEO pages (exercises, recipes) rendered by server/seo.js. Same fonts, tokens and dark mode as landing.html. */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow/barlow-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow/barlow-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/barlow/barlow-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/barlow/barlow-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow/barlow-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow/barlow-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow/barlow-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow/barlow-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed/barlow-condensed-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed/barlow-condensed-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed/barlow-condensed-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed/barlow-condensed-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root{
  --bg:#EDF1F4; --surface:#FFFFFF; --surface-2:#F3F6F8; --ink:#12202A; --muted:#5A6A75; --line:#DCE3E8;
  --accent:#E8492A; --accent-press:#C93A1E; --accent-ink:#FFFFFF; --ok:#17875A; --on-ok:#FFFFFF;
  --hero:#13212B; --hero-2:#1C2D38; --hero-ink:#F2F6F8; --hero-muted:#A3B4BE;
  --figure:#2E3E4A; --shirt:#E8492A; --shorts:#13212B; --shoe:#13212B; --prop:#55666F; --ground:#C9D3D9; --figbg:#F3F6F8; --fig-shadow:rgba(19,33,43,.13);
  --font-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --font-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --elev:0 1px 2px rgba(18,32,42,.05),0 10px 30px -12px rgba(18,32,42,.18);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0C1418; --surface:#141F26; --surface-2:#1A2730; --ink:#E6EDF1; --muted:#93A3AD; --line:#24343D; --accent:#FF6A48; --accent-press:#FF8466; --accent-ink:#1B0D08; --ok:#3BC48B; --on-ok:#06231A;
  --hero:#0F1B22; --hero-2:#1A2A33; --figure:#D3DEE4; --shorts:#5C7585; --shoe:#8FA3AF; --prop:#9FB2BE; --ground:#33444E; --figbg:#1A2730; --fig-shadow:rgba(0,0,0,.38); --elev:0 1px 0 rgba(0,0,0,.35); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0C1418; --surface:#141F26; --surface-2:#1A2730; --ink:#E6EDF1; --muted:#93A3AD; --line:#24343D; --accent:#FF6A48; --accent-press:#FF8466; --accent-ink:#1B0D08; --ok:#3BC48B; --on-ok:#06231A;
  --hero:#0F1B22; --hero-2:#1A2A33; --figure:#D3DEE4; --shorts:#5C7585; --shoe:#8FA3AF; --prop:#9FB2BE; --ground:#33444E; --figbg:#1A2730; --fig-shadow:rgba(0,0,0,.38); --elev:0 1px 0 rgba(0,0,0,.35); color-scheme:dark }
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.55;background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--font-display);line-height:1.05;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:15px 26px;font-weight:700;font-size:17px;background:var(--accent);color:var(--accent-ink);text-decoration:none;transition:transform .12s,background .15s;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn:hover{background:var(--accent-press)}
.btn:active{transform:scale(.97)}
.btn.small{padding:9px 16px;font-size:15px}

/* header */
.top-band{background:radial-gradient(700px 300px at 85% 0,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),var(--hero);color:var(--hero-ink);padding-top:env(safe-area-inset-top,0px)}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;padding-block:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.12em;text-transform:uppercase}
.logo img{width:34px;height:34px;border-radius:10px}
.menu{display:flex;align-items:center;gap:12px 18px;font-size:15px;font-weight:600;flex-wrap:wrap}
.menu a{text-decoration:none;color:var(--hero-muted)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--hero-ink)}
.menu .btn{color:var(--accent-ink)}
.lang{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.08)}
.lang a{font-weight:700;font-size:12px;padding:6px 9px;border-radius:999px;letter-spacing:.04em}
.lang a[aria-current="true"]{background:rgba(255,255,255,.16);color:var(--hero-ink)}
.page-head{padding-block:22px 44px}
.crumbs{font-size:14px;color:var(--hero-muted);margin-bottom:14px}
.crumbs a{color:var(--hero-muted)}
.page-head h1{font-size:clamp(36px,6vw,64px)}
.page-head .lead{color:var(--hero-muted);font-size:clamp(17px,2vw,20px);margin-top:14px;max-width:60ch}

/* content */
main{padding-block:40px 70px}
.sec{margin-top:44px}
.sec:first-child{margin-top:0}
.sec h2{font-size:clamp(28px,4vw,38px);margin-bottom:16px}
.card{background:var(--surface);border-radius:22px;padding:24px;box-shadow:var(--elev)}
.ex-grid{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:28px;align-items:start}
.fig-card{aspect-ratio:1;border-radius:24px;background:radial-gradient(circle at 50% 42%,var(--surface) 0,var(--figbg) 75%);box-shadow:var(--elev);padding:6%}
.facts{display:grid;gap:16px;margin:0}
.facts dt{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:2px 0 0;font-size:18px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chip{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:600}
.chip.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);box-shadow:none}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:14px}
.steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start}
.steps li::before{content:counter(s);flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--hero);color:var(--hero-ink);font-family:var(--font-display);font-weight:700;font-size:19px}
.steps li span{padding-top:5px}
.mistake{border-left:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.mistake b{display:block;font-family:var(--font-display);font-size:20px;margin-bottom:4px}
.cta{margin-top:48px;background:var(--hero);color:var(--hero-ink);border-radius:26px;padding:34px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.cta h2{font-size:clamp(26px,3.6vw,36px);max-width:24ch}
.cta p{color:var(--hero-muted);margin-top:8px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;list-style:none;padding:0;margin:0}
.tile{display:flex;flex-direction:column;gap:8px;text-decoration:none;background:var(--surface);border-radius:20px;padding:12px;box-shadow:var(--elev);height:100%}
.tile:hover{box-shadow:inset 0 0 0 2px var(--accent),var(--elev)}
.tile .mini{aspect-ratio:1;border-radius:14px;background:radial-gradient(circle at 50% 42%,var(--surface) 0,var(--figbg) 75%)}
.tile b{font-weight:700;font-size:16px;line-height:1.25}
.tile small{color:var(--muted);font-size:13px}
.rlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;list-style:none;padding:0;margin:0}
.rlist .tile{padding:18px}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:14px}
.macros{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0}
.macros div{background:var(--surface);border-radius:18px;padding:16px;box-shadow:var(--elev);text-align:center}
.macros dt{color:var(--muted);font-size:14px}
.macros dd{margin:2px 0 0;font-family:var(--font-display);font-weight:700;font-size:30px}
.ing{list-style:none;padding:0;margin:0}
.ing li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.ing li:first-child{border-top:0}
.ing span:last-child{color:var(--muted);white-space:nowrap}
.cols{display:grid;grid-template-columns:1fr 1.3fr;gap:28px;align-items:start}
.note{color:var(--muted);font-size:14px;margin-top:12px}
footer{padding-block:34px calc(34px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px}
footer nav{display:flex;gap:18px;flex-wrap:wrap}

/* animated figure, same rules as landing.html */
.fig{width:100%;height:100%;display:block;overflow:visible}
.fig .ground{stroke:var(--ground);stroke-width:1.2;stroke-linecap:round}
.fig .shadow{fill:var(--fig-shadow)}
.fig .sg{fill:none;stroke-linecap:round}
.fig .far{opacity:.4}
.fig .gap{stroke:var(--figbg)}
.fig .limb{stroke:var(--figure)}
.fig .shirt{stroke:var(--shirt)}
.fig .shorts{stroke:var(--shorts)}
.fig .head{fill:var(--figure);stroke:var(--figbg);stroke-width:1.6}
.fig .hand{fill:var(--figure)}
.fig .shoe{fill:var(--shoe)}
.fig .db{fill:var(--prop)}
.fig .db-plate{fill:var(--shirt)}
.fig .bench{fill:var(--prop);opacity:.55}
.fig .bench-leg{stroke:var(--prop);stroke-width:2.5;opacity:.55}
.fig .bar{stroke:var(--prop);stroke-width:2.8;stroke-linecap:round}

@media (max-width:800px){
  .ex-grid,.cols{grid-template-columns:1fr}
  .fig-card{max-width:360px;width:100%;margin:0 auto}
  .macros{grid-template-columns:repeat(2,1fr)}
  .menu .nav-link{display:none}
  .cta{padding:26px}
}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }