/* Site chrome around the calculator: header, footer, home. Same palette as calculator.css. */
:root{--ink:#141a2b;--ink-2:#2b3350;--mute:#5d6377;--line:#dcdde3;--soft:#f5f5f1;--paper:#ffffff;--accent:#f2b705}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.55}
a{color:var(--ink-2)}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:100000}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.site-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;max-width:1152px;margin:0 auto;padding:14px 16px;border-bottom:1px solid var(--line)}
.site-brand{font-weight:800;font-size:1.1rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.site-head nav{display:flex;gap:16px;font-size:.95rem}
.site-head nav a{color:var(--mute);text-decoration:none}
.site-head nav a:hover{color:var(--ink)}
main{padding:24px 16px 64px}
.site-foot{max-width:1152px;margin:0 auto;padding:20px 16px 32px;border-top:1px solid var(--line);color:var(--mute);font-size:.85rem}
.site-foot p{margin:.3em 0}
.home{max-width:760px;margin:0 auto;padding-block:24px}
.home h1{font-size:clamp(1.9rem,4.5vw,2.8rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
.lede{font-size:1.1rem;color:var(--mute);margin:0 0 24px}
.home-links{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.home-links a{display:grid;gap:4px;border:2px solid var(--ink);border-radius:12px;padding:16px 18px;text-decoration:none;color:var(--ink)}
.home-links a:hover{background:var(--soft)}
.home-links span{color:var(--mute);font-size:.95rem}