/* The site's chrome — one header, one footer, the skip link — identical on every page
   (README → Navigation). Loaded AFTER each page's own <style>, and every rule is scoped to
   .site-head / .site-foot / .skip so a page's own `a`, `header` or `footer` rules never
   reach it. tests/chrome-check.mjs fails if a page's copy of the markup differs. */

.skip{position:absolute;left:12px;top:-64px;z-index:50;background:#30D158;color:#000;
      font-weight:700;padding:10px 14px;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}

.site-head,.site-foot{max-width:64rem;margin:0 auto;padding-inline:24px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* THE HEADER: the logo and the name go home; Calculator, then the one green action. */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
           padding-block:14px;position:relative;z-index:10}
.site-head .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
                  color:#fff;font-size:.95rem;font-weight:700;letter-spacing:.3em;
                  text-transform:uppercase;min-height:44px}
.site-head .brand img{width:34px;height:34px;border-radius:8px;display:block}
.site-head .links{display:flex;align-items:center;gap:18px}
.site-head .links a{text-decoration:none;font-size:.95rem;font-weight:600;
                    min-height:44px;display:inline-flex;align-items:center}
.site-head .links a:not(.join){color:rgba(255,255,255,.72)}
.site-head .links a:not(.join):hover,
.site-head .links a[aria-current="page"]:not(.join){color:#fff}
.site-head .links a[aria-current="page"]:not(.join){text-decoration:underline;
  text-decoration-color:#30D158;text-decoration-thickness:2px;text-underline-offset:6px}
.site-head .join{background:#30D158;color:#000;border-radius:10px;padding:0 14px;min-height:38px !important}
.site-head .join[aria-current="page"]{background:none;color:#30D158;box-shadow:inset 0 0 0 1.5px #30D158}
@media (max-width:400px){
  .site-head{padding-inline:16px}
  .site-head .brand{letter-spacing:.22em;gap:8px}
  .site-head .brand img{width:30px;height:30px;border-radius:7px}
  .site-head .links{gap:12px}
  .site-head .links a{font-size:.9rem}
  .site-head .join{padding:0 11px}
}
@media (max-width:350px){ .site-head .brand span{display:none} }

/* THE FOOTER: every page, the publisher named once. */
.site-foot{border-top:1px solid rgba(255,255,255,.10);margin-top:48px;
           padding-top:26px;padding-bottom:max(38px,env(safe-area-inset-bottom));
           color:rgba(255,255,255,.60);font-size:.82rem;line-height:1.5;text-align:left}
.site-foot nav{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0 0 16px}
.site-foot nav a{color:rgba(255,255,255,.80);text-decoration:none;font-size:.9rem;font-weight:600;
                 min-height:32px;display:inline-flex;align-items:center}
.site-foot nav a:hover,.site-foot nav a[aria-current="page"]{color:#fff}
.site-foot p{margin:0 0 6px}
.site-foot .nb{white-space:nowrap}