@layer base {
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
  body {
    margin: 0;
    padding-top: var(--nav-h);
    background: var(--bg);
    color: var(--ink);
    font: var(--fs-base)/1.6 var(--font-sans);
  }
  a { color: var(--accent2); text-decoration: none; }
  a:hover { text-decoration: underline; }
  img { max-width: 100%; }

  /* The ground texture. Drawn on ::before at low opacity: the tiles are near-black and vanish if blended into --bg. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("../images/patterns/office_@2X.png") repeat;
    opacity: .55;
  }

  /* Every icon is a <use> of the inline sprite; currentColor lets CSS tint it */
  .ic {
    width: 1em;
    height: 1em;
    display: inline-block;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* :where() keeps specificity at zero, so any element can adjust its ring without !important */
  :where(a, button, summary, [tabindex]):focus-visible {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-off);
  }

  /* Visually hidden, still read aloud */
  .vh {
    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: -9999px;
    top: 8px;
    z-index: 200;
    padding: 8px 14px;
    border-radius: 6px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
  }
  .skip:focus { left: 8px; }

  /* Dev-only error box, drawn by problem_marker() where broken content would have been */
  .problems {
    margin: 8px 0;
    padding: 8px 12px 8px 28px;
    border: 1px solid var(--error);
    border-radius: 6px;
    background: var(--error-bg);
    color: var(--error-ink);
    font: 13px/1.5 var(--font-mono);
  }
}