/* ============================================================
   base.css — reset, document defaults, typography base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;       /* sticky header offset for anchors */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* Paper grain — a very subtle on-concept texture so it never sits on flat white */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: url("../svg/grain.svg");
  background-repeat: repeat;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
img { font-style: italic; }   /* alt text shown nicely if an image fails */

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

:where(h1, h2, h3, h4) {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;            /* safety net for long German compounds */
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: var(--lh-snug); }
h4 { font-size: var(--step-1); line-height: var(--lh-snug); }

p { text-wrap: pretty; }

::selection { background: var(--c-brand); color: #fff; }

:focus-visible {
  outline: 2.5px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

:target { scroll-margin-top: 6rem; }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--sp-sm);
  top: -4rem;
  z-index: var(--z-modal);
  background: var(--c-ink);
  color: var(--c-bg);
  padding: .65rem 1.1rem;
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: var(--step--1);
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: var(--sp-sm); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}