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

body {
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 16px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--surface); padding: 12px 20px; font-weight: 600; z-index: var(--z-skip); }
.skip-link:focus { left: 12px; top: 12px; }

.app {
  max-width: var(--container-max); margin: 0 auto; min-height: 100vh;
  background: var(--bg); position: relative;
  padding-bottom: 4px; overflow: hidden;
}
.pad { padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* ─── Tablet+ (≥ 600px) ─────────────────────────────────────────── */
@media (width >= 600px) {
  .app {
    box-shadow: var(--shadow-app);
  }
}

.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;
}