/* ==============================================================
   BASE
   Reset, element defaults and small utilities.
   ============================================================== */
@layer base{
  *,*::before,*::after{box-sizing:border-box}
  [hidden]{display:none!important}

  html{
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--nav-h) + var(--s-5));
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink-2);
    font-family:var(--font-sans);
    font-size:var(--text-base);
    line-height:var(--leading-body);
    font-kerning:normal;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  img,svg,canvas{display:block;max-width:100%}
  a{color:inherit}
  h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:var(--weight-display);text-wrap:balance}
  p{margin:0;text-wrap:pretty}
  ul,ol,dl,dd,figure{margin:0;padding:0;list-style:none}
  button,input,select,textarea{font:inherit;color:inherit}
  kbd{font-family:var(--font-mono);font-size:var(--text-2xs)}

  ::selection{background:var(--accent);color:var(--on-accent)}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}

  /* ---------- utilities ---------- */
  .wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
  .sprite{position:absolute;width:0;height:0;overflow:hidden}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .skip{position:absolute;left:var(--s-4);top:-64px;z-index:100;padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);
    background:var(--btn-bg);color:var(--btn-ink);font-weight:var(--weight-ui);text-decoration:none}
  .skip:focus{top:var(--s-4)}

  .i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .muted{color:var(--ink-3)}
  .accent{color:var(--accent-ink)}

  /* a small "current" pulse */
  .status-dot{position:relative;display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--ok)}
  .status-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:ping 2s var(--ease-out) infinite}
  @keyframes ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.6);opacity:0}}
}