/* Shared base for every page: body text, containers and form controls. Pages add their own styles on top. */
:root{--bg:#0f0f0f;--ink:#f3f1ec;--muted:#9b9891}
html[data-theme="light"]{--bg:#f7f5f0;--ink:#1f1d1a;--muted:#6b665c}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* Responsive base for every page */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img,video,iframe{max-width:100%;height:auto}
button,a,summary,input,select,textarea{touch-action:manipulation}
@media (max-width:900px){.wnav-links a{padding:.8rem 1rem}}
@media (max-width:600px){
  input,select,textarea{font-size:16px}      /* stops iPhones zooming in on focus */
  h1{font-size:clamp(1.7rem,8vw,2.2rem)}
  .wnav{padding-left:max(.8rem,env(safe-area-inset-left));padding-right:max(.8rem,env(safe-area-inset-right))}
}
@media (max-width:520px){
  .wnav{gap:.5rem}
  .wnav-brand{font-size:14px}
  .wnav-tools{gap:.35rem}
  .wnav-btn{padding:.45rem .6rem}
  .wnav-btn-label{display:none}
}

/* Phosphor icons: sized with the text around them */
.ph{line-height:1;vertical-align:-.125em;font-size:1.1em}