/* ── shared base for design variants: fonts + reset + common copy layout ── */

@font-face {
  font-family: "Euclid Circular A";
  src: url("/static/fonts/euclid-circular-a-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Euclid Circular A";
  src: url("/static/fonts/euclid-circular-a-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Euclid Circular A";
  src: url("/static/fonts/euclid-circular-a-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Euclid Circular A";
  src: url("/static/fonts/euclid-circular-a-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Euclid Circular A";
  src: url("/static/fonts/euclid-circular-a-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Euclid Circular A";
  src: url("/static/fonts/euclid-circular-a-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/jetbrains-mono-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --euclid: "Euclid Circular A", "Segoe UI", sans-serif;
  --jbmono: "JetBrains Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--euclid); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }

/* shared layout primitives — variants restyle, not relayout */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.section { padding: clamp(3.5rem, 8vh, 6rem) 0; }

/* reveal on scroll (used by all variants) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}