/* ==========================================================================
   Base — element defaults, layout primitives and accessibility helpers.
   ========================================================================== */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure,dl,dd{margin:0;}
h1,h2,h3,h4{line-height:1.15;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
input,select,textarea,button{font:inherit;color:inherit;}

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

/* off-screen until focused */
.skip{
  position:absolute;
  left:-9999px;
  top:8px;
  z-index:50;
  padding:12px 16px;
  background:var(--c-ink);
  color:var(--c-white);
  font-size:14px;
  font-weight:700;
}
.skip:focus{left:8px;}

/* centered content column: 1184px max, 20/48px side margins */
.wrap{
  width:min(100% - 2 * var(--margin), var(--wrap));
  margin-inline:auto;
}

/* 12-column grid on desktop, one column below */
.grid12{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  column-gap:var(--gutter);
}
@media (min-width:1024px){
  .grid12{grid-template-columns:repeat(12,minmax(0,1fr));}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}