/* Next Turn type scale - ONE place for every text size on the site (owner, 28 Oct 2026: "the website should be one
 * product, same identity over all the pages"; nothing under 12 px). Pages use these names, never their own numbers.
 * Exceptions on purpose: the home hero title, and display numbers (a price, a big ticker, the 404 code). */
:root{
  --fs-title:clamp(28px,3.6vw,36px);   /* page title (h1), and home section headings */
  --fs-h2:22px;                        /* section heading */
  --fs-h3:17px;                        /* card title, sub-heading, lead text */
  --fs-body:15px;                      /* body text, buttons */
  --fs-small:13px;                     /* captions, notes, card text, nav */
  --fs-label:12px;                     /* labels, chips, tags, table headers, footer - the smallest text */
  /* labels drawn inside charts (canvas / SVG) are 11 px: set in the scripts, they cannot read these */
}
/* headings keep tight lines when they wrap (pages that set their own line-height keep it: their styles come later) */
h1,h2,h3{line-height:1.2}
.fam .h{line-height:1.2}   /* the Rhythms card headline wraps on phones */

/* the footer lines up with the HEADER on every page - its text starts under the logo and ends under the menu, so
   the two frame the page and the content sits between them (owner, 29 Oct; it followed the content width 28-29 Oct) */
html body footer.ntf{width:auto;max-width:none;margin-left:30px;margin-right:30px;padding-left:0;padding-right:0;box-sizing:border-box}
@media (max-width:700px){html body footer.ntf{margin-left:16px;margin-right:16px}}
/* the line above the footer runs edge to edge like the header's, so the page sits between two full-width rules
   (owner, 29 Oct). border-image-outset draws past the box
   without widening the page, so no sideways scroll */
html body footer.ntf{border-top:0;position:relative}
html body footer.ntf::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  border-image:linear-gradient(rgba(255,255,255,.08) 0 0) fill 0 / 0 / 0 100vw}
/* short pages (sign-in, account, 404, legal notice): the footer sits at the bottom of the window, not mid-screen */
html body main.short{min-height:calc(100vh - 62px - 150px);box-sizing:border-box}
/* the phone menu (menu.js): under 700 px the header's links fold into one "Menu" button beside the Sign in pill */
.menubtn,.menupanel{display:none}
@media (max-width:700px){
  html body header{flex-wrap:nowrap !important;height:58px !important;padding:0 16px !important;gap:10px !important;position:relative}
  html body header > a.tag, html body header > a.navlink, html body header nav:not(.menupanel) > a:not(.cta-pill), html body header .grow,
  html body header .rule, html body header .tagline, html body header div.tag{display:none !important}
  html body header .cta-pill{order:2 !important;margin-left:auto !important}
  html body header .menubtn{display:inline-flex;align-items:center;gap:8px;order:3 !important;margin:0 !important;appearance:none;
    background:transparent;border:1px solid var(--line);color:var(--txt);border-radius:999px;padding:6px 13px;cursor:pointer;
    font:500 var(--fs-small)/1 "IBM Plex Sans",system-ui,sans-serif}
  html body header .menubtn i{display:block;width:14px;height:2px;background:currentColor;box-shadow:0 -4px 0 currentColor,0 4px 0 currentColor;margin:4px 0}
  html body header.menuopen .menubtn{border-color:var(--acc);color:var(--acc)}
  html body header .menupanel{position:absolute;top:58px;left:0;right:0;z-index:60;background:#0D1117;
    border-bottom:1px solid var(--line);padding:4px 16px 12px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
  html body header.menuopen .menupanel{display:block}
  html body header .menupanel a{display:block;padding:13px 4px;border-bottom:1px solid var(--line);color:var(--txt);
    font:500 var(--fs-body)/1.2 "IBM Plex Sans",system-ui,sans-serif;text-decoration:none}
  html body header .menupanel a:last-child{border-bottom:0}
  html body header .menupanel a.here{color:var(--acc)}
}
/* narrow phones (about 300 px, the owner's Android): logo + Sign in + "Menu" did not fit - the button shows its icon only */
@media (max-width:360px){html body header .menubtn{font-size:0;gap:0;padding:8px 11px}}
/* 280 px: logo + pill + menu still ran 5 px past the edge and the whole page slid sideways (phone test, 30 Oct) -
   narrower margins and gaps, and the logo a touch smaller */
@media (max-width:300px){html body header{padding:0 10px !important;gap:6px !important}html body header .logo{height:23px}}
/* buttons without their own font take the site's, not the browser's default (the notice's "I understand" was Arial) */
button{font-family:"IBM Plex Sans",system-ui,sans-serif}