:root {
  /* Shared responsive primitives. Page-specific art direction may override them. */
  --thp-viewport-height: 100svh;
  --thp-gutter: clamp(18px, 2.083vw, 40px);
  --thp-gutter-wide: clamp(24px, 3.125vw, 60px);
  --thp-section-inset: clamp(32px, 6.296svh, 68px);
  --thp-display-size: clamp(40px, min(2.917vw, 5.185svh), 56px);
  --thp-body-size: clamp(14px, min(.833vw, 1.481svh), 16px);
  --thp-space-1: 4px;
  --thp-space-2: 8px;
  --thp-space-3: 12px;
  --thp-space-4: 16px;
  --thp-space-6: 24px;
  --thp-space-8: 32px;
  --thp-space-12: 48px;
}

@supports (height: 100dvh) {
  :root {
    --thp-viewport-height: 100dvh;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

/* Opt-in primitives for new sections. They do not override approved page art direction. */
.thp-viewport-section {
  min-height: var(--thp-viewport-height);
}

.thp-page-gutter {
  padding-inline: var(--thp-gutter);
}