/* ==========================================================================
   JANGE — Reset & typography
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Public Sans', system-ui, -apple-system, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, select{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }

h1,h2,h3,h4{ font-family:'Manrope', system-ui, sans-serif; text-wrap:balance; margin:0; }
p{ margin:0; }

.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }

svg.icon{
  width:16px; height:16px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none;
}
svg.icon.lg{ width:20px; height:20px; }

::selection{ background:var(--indigo-soft); color:var(--indigo-strong); }

:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.scroll-x{ overflow-x:auto; }