/* Tarmo public content pages. Shared by start/first-30-seconds/what-you-get/gym-cold-plunge.
   Deliberately NOT used by index.html: the app inlines its own fonts because it must work with no
   network at all. These pages are ordinary web pages, so they link the same woff2 files instead and
   get them cached once across the whole set. Same origin, no third party, nothing to consent to. */

@font-face{font-family:'PlexS';src:url('plex-sans.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PlexC';src:url('plex-cond.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'PlexM';src:url('plex-mono.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --bg:#17120d; --panel:#221a12; --ink:#f0e4d4; --dim:#b39c80; --faint:#85715a; --rule:#3a2e20;
  --heat:#e07a34; --cold:#5aa7cf; --accent:#e07a34;
  --thermo-a:rgba(224,122,52,.20); --thermo-b:rgba(224,122,52,.11);
  color-scheme:dark;
}
/* Daylight is a real reading condition for these pages, so light is offered and remembered.
   The contour ground drops to roughly half strength on paper, same reason as in the app: on a
   pale ground the lines land at the same value as the type and start competing with it. */
:root[data-theme="light"]{
  --bg:#f4efe6; --panel:#fbf8f1; --ink:#241d16; --dim:#6b5d4a; --faint:#9a8a6c; --rule:#e0d6c2;
  --heat:#c0561f; --cold:#2f6f95; --accent:#c0561f;
  --thermo-a:rgba(192,86,31,.11); --thermo-b:rgba(192,86,31,.06);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.62 'PlexS',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:clip; position:relative;
}

/* the same thermal contour ground the app uses, densest top-right, faded out before the bottom */
.thermo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.thermo::before,.thermo::after{content:'';position:absolute;inset:-12% -12% 0 -12%;
  -webkit-mask-image:linear-gradient(192deg,#000 0 5%,rgba(0,0,0,.66) 38%,rgba(0,0,0,.24) 64%,transparent 86%);
          mask-image:linear-gradient(192deg,#000 0 5%,rgba(0,0,0,.66) 38%,rgba(0,0,0,.24) 64%,transparent 86%)}
.thermo::before{background-image:repeating-radial-gradient(ellipse 880px 620px at 99% -5%,transparent 0 16px,var(--thermo-a) 16px 17px)}
.thermo::after{background-image:repeating-radial-gradient(ellipse 690px 800px at 112% 8%,transparent 0 22px,var(--thermo-b) 22px 23px)}

.wrap{max-width:690px;margin:0 auto;padding:0 22px}

/* masthead */
.top{display:flex;align-items:center;gap:10px;padding:22px 0 0;max-width:690px;margin:0 auto;padding-left:22px;padding-right:22px}
.mark{display:inline-flex;align-items:center;gap:7px;font-family:'PlexC',sans-serif;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;font-size:.9rem;color:var(--ink);text-decoration:none}
.mark svg{width:18px;height:18px}
.top .sp{margin-left:auto}
.tbtn{background:none;border:1px solid var(--rule);color:var(--dim);font:inherit;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;padding:9px 13px;border-radius:999px;cursor:pointer;min-height:40px}
.tbtn:hover{border-color:var(--accent);color:var(--accent)}
.tbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the temperature scale, used as a divider */
.tscale{margin:26px 0 0}
.tscale .tsb{height:7px;border-radius:2px;background:linear-gradient(90deg,var(--heat),#c98a4a 40%,#7d9fb4 60%,var(--cold))}
.tscale .tst{display:flex;justify-content:space-between;font-family:'PlexM',monospace;font-size:.58rem;
  letter-spacing:.1em;color:var(--faint);padding-top:5px;font-variant-numeric:tabular-nums}

article{padding:16px 0 0}
.eyebrow{font-family:'PlexM',monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:26px 0 10px}
h1{font-family:'PlexC',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.9rem,6.4vw,2.9rem);line-height:1.04;margin:0 0 14px;text-wrap:balance}
h2{font-family:'PlexC',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.12rem,3.4vw,1.4rem);margin:38px 0 10px;text-wrap:balance}
.lede{font-size:1.12rem;color:var(--dim);margin:0 0 8px}
p{margin:0 0 15px}
b,strong{font-weight:600;color:var(--ink)}
a{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
ul{margin:0 0 15px;padding-left:20px}
li{margin:0 0 7px}

/* safety callout. Never softened, never hidden, and it keeps its weight in both themes. */
.safety{border:1px solid var(--heat);border-left-width:3px;border-radius:10px;padding:14px 16px;margin:22px 0;
  background:color-mix(in srgb,var(--heat) 8%,transparent)}
.safety h3{font-family:'PlexC',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.74rem;margin:0 0 7px;color:var(--heat)}
.safety p:last-child,.safety ul:last-child{margin-bottom:0}

/* evidence grade chips */
.grade{display:inline-block;font-family:'PlexM',monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--rule);border-radius:999px;padding:3px 9px;color:var(--dim);
  margin:0 0 8px}

/* cards linking the set together */
.cards{display:grid;gap:2px;margin:18px 0 0;border-top:1px solid var(--rule)}
.cards a{display:block;padding:16px 2px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.cards a:hover{color:var(--accent)}
.cards .ct{font-family:'PlexC',sans-serif;font-weight:600;font-size:1.06rem;letter-spacing:.01em;display:block}
.cards .cd{color:var(--dim);font-size:.94rem;display:block;margin-top:3px}

.cta{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;text-decoration:none;
  font-weight:600;padding:14px 22px;border-radius:11px;margin:6px 0 0;min-height:48px}
.cta:hover{filter:brightness(1.08)}
.note{color:var(--faint);font-size:.88rem;margin-top:12px}

footer{border-top:1px solid var(--rule);margin:46px 0 0;padding:22px 0 54px;color:var(--faint);font-size:.86rem}
footer a{color:var(--dim)}
footer .fmark{font-family:'PlexC',sans-serif;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);font-size:.8rem;display:block;margin-bottom:8px}
footer nav{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px 16px}