/* style.css */
:root{
  --step--1: clamp(0.88rem, 0.80rem + 0.4vw, 1.00rem); /* small text */
  --step-0:  clamp(1.00rem, 0.90rem + 0.8vw, 1.125rem);/* base (≈16–18px) */
  --step-1:  clamp(1.25rem, 1.00rem + 1.5vw, 1.75rem); /* h3 */
  --step-2:  clamp(1.60rem, 1.10rem + 2.4vw, 2.25rem); /* h2 */
  --step-3:  clamp(2.00rem, 1.20rem + 3.6vw, 3.00rem); /* h1 */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; } /* don’t break iOS zoom */
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  color: #111;
  background: #fff;
}

.container {
  max-width: 70ch;           /* comfortable line length */
  padding: 1rem clamp(1rem, 4vw, 2rem);
  margin: 0 auto;
}

h1 { font-size: var(--step-3); line-height: 1.2; margin: 1rem 0; }
h2 { font-size: var(--step-2); line-height: 1.25; margin: 1rem 0; }
h3 { font-size: var(--step-1); line-height: 1.3; margin: 0.75rem 0; }

img { max-width: 100%; height: auto; display: block; }