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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;              /* 16px floor: stops iOS zooming on focus */
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* nothing may scroll the page sideways */

  /* Cross-platform touch behaviour. Android Chrome and iOS Safari each need
     their own line here; neither inherits the other's default. */
  -webkit-tap-highlight-color: rgba(127, 178, 221, .22);  /* Android's grey flash */
  -webkit-touch-callout: none;                            /* iOS long-press menu */
  touch-action: manipulation;                             /* kills the 300ms delay */

  /* Notches, punch-holes and gesture bars, on both platforms. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Text you are meant to read and copy keeps its selection behaviour. */
p, li, blockquote, .msg, .prompt-block, .field-input, .synthesis { -webkit-touch-callout: default; user-select: text; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(1.45rem, 5.5vw, 2.3rem); }
h2 { font-size: clamp(1.18rem, 4.2vw, 1.6rem); }
h3 { font-size: clamp(1.02rem, 3.4vw, 1.15rem); }

a { color: var(--blue-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
p { margin: 0 0 0.9em; overflow-wrap: break-word; }
img, svg, video { max-width: 100%; height: auto; }

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