/* ---------- Fonts ---------- */
@font-face {
  font-family: "HTF Didot";
  src: url("../fonts/didot/HTFDidot-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HTF Didot";
  src: url("../fonts/didot/HTFDidot-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HTF Didot";
  src: url("../fonts/didot/HTFDidot-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ElleNovaC";
  src: url("../fonts/ellenova/ElleNovaC-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ElleNovaC";
  src: url("../fonts/ellenova/ElleNovaC-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ElleNovaC";
  src: url("../fonts/ellenova/ElleNovaC-DemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ElleNovaC";
  src: url("../fonts/ellenova/ElleNovaC-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Boston Skyline Rough";
  src: url("../fonts/boston-skyline/BostonSkylineRough.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* colors */
  --color-ink: #0a0908;
  --color-paper: #f7f4ee;
  --color-paper-dim: #efeae1;
  --color-text-on-dark: #fffdfc;
  --color-text-on-light: #14120f;
  --color-muted-on-dark: rgba(255, 253, 252, 0.7);
  --color-muted-on-light: rgba(20, 18, 15, 0.65);
  --color-line-on-dark: rgba(255, 253, 252, 0.18);
  --color-line-on-light: rgba(20, 18, 15, 0.14);
  --color-accent: #b08d57;
  --color-terracotta: #9c4526;

  /* typography */
  --font-serif: "HTF Didot", "Times New Roman", serif;
  --font-sans: "ElleNovaC", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Boston Skyline Rough", "HTF Didot", serif;

  --step-eyebrow: 0.78rem;
  --step-body: 1.05rem;
  --step-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --step-h2: clamp(2rem, 1.5rem + 2vw, 3rem);
  --step-h1: clamp(2.75rem, 1.8rem + 4vw, 5rem);

  /* layout */
  --container-max: 1360px;
  --container-pad: clamp(1.5rem, 2vw + 0.5rem, 4rem);
  --section-pad-y: clamp(4rem, 4vw + 2rem, 8rem);

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--color-text-on-light);
  background: var(--color-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(100% - 2 * var(--container-pad), var(--container-max));
  margin-inline: auto;
}

.eyebrow {
  font-size: var(--step-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-terracotta);
}