:root {
  --min-screen-width: 320px;
  --max-screen-width: 1280px;

  /* Typography Scale */

  --text-xs: clamp(0.66rem, calc(-0.16vw + 0.69rem), 0.56rem);
  --text-s: clamp(0.82rem, calc(-0.05vw + 0.83rem), 0.8rem);
  --text-m: clamp(1.03rem, calc(0.16vw + 1rem), 1.13rem);
  --text-l: clamp(1.29rem, calc(0.5vw + 1.19rem), 1.59rem);
  --text-xl: clamp(1.61rem, calc(1.06vw + 1.4rem), 2.25rem);
  --text-2xl: clamp(2.01rem, calc(1.94vw + 1.63rem), 3.18rem);
  --text-3xl: clamp(2.52rem, calc(3.3vw + 1.86rem), 4.5rem);
  --text-4xl: clamp(3.15rem, calc(5.35vw + 2.08rem), 6.36rem);

  /* Spacing Scale */
  --space-4xs: clamp(0.33rem, calc(-0.03vw + 0.33rem), 0.31rem);
  --space-3xs: clamp(0.41rem, calc(0.05vw + 0.4rem), 0.44rem);
  --space-2xs: clamp(0.51rem, calc(0.18vw + 0.48rem), 0.62rem);
  --space-xs: clamp(0.64rem, calc(0.39vw + 0.56rem), 0.88rem);
  --space-s: clamp(0.8rem, calc(0.73vw + 0.65rem), 1.24rem);
  --space-m: clamp(1rem, calc(1.25vw + 0.75rem), 1.75rem);
  --space-l: clamp(1.25rem, calc(2.04vw + 0.84rem), 2.47rem);
  --space-xl: clamp(1.56rem, calc(3.23vw + 0.92rem), 3.5rem);
  --space-2xl: clamp(1.95rem, calc(4.99vw + 0.95rem), 4.95rem);
  --space-3xl: clamp(2.44rem, calc(7.59vw + 0.92rem), 7rem);
  --space-4xl: clamp(3.05rem, calc(11.4vw + 0.77rem), 9.89rem);

  /* Brand – Primary (Crimson #a7062e) */
  --primary: hsla(345, 93%, 34%, 1);
  --primary-5: hsla(345, 93%, 34%, 0.05);
  --primary-10: hsla(345, 93%, 34%, 0.1);
  --primary-20: hsla(345, 93%, 34%, 0.2);
  --primary-30: hsla(345, 93%, 34%, 0.3);
  --primary-40: hsla(345, 93%, 34%, 0.4);
  --primary-50: hsla(345, 93%, 34%, 0.5);
  --primary-60: hsla(345, 93%, 34%, 0.6);
  --primary-70: hsla(345, 93%, 34%, 0.7);
  --primary-80: hsla(345, 93%, 34%, 0.8);
  --primary-90: hsla(345, 93%, 34%, 0.9);
  --primary-d-1: hsla(345, 90%, 28%, 1);
  --primary-d-2: hsla(346, 88%, 21%, 1);
  --primary-d-3: hsla(348, 80%, 14%, 1);
  --primary-d-4: hsla(350, 70%, 9%, 1);
  --primary-l-1: hsla(345, 70%, 50%, 1);
  --primary-l-2: hsla(344, 76%, 70%, 1);
  --primary-l-3: hsla(343, 80%, 85%, 1);
  --primary-l-4: hsla(342, 85%, 95%, 1);

  /* Brand – Secondary (Coral / Apricot) */
  --secondary: hsla(18, 80%, 65%, 1);
  --secondary-5: hsla(18, 80%, 65%, 0.05);
  --secondary-10: hsla(18, 80%, 65%, 0.1);
  --secondary-20: hsla(18, 80%, 65%, 0.2);
  --secondary-30: hsla(18, 80%, 65%, 0.3);
  --secondary-40: hsla(18, 80%, 65%, 0.4);
  --secondary-50: hsla(18, 80%, 65%, 0.5);
  --secondary-60: hsla(18, 80%, 65%, 0.6);
  --secondary-70: hsla(18, 80%, 65%, 0.7);
  --secondary-80: hsla(18, 80%, 65%, 0.8);
  --secondary-90: hsla(18, 80%, 65%, 0.9);
  --secondary-d-1: hsla(18, 65%, 52%, 1);
  --secondary-d-2: hsla(15, 55%, 38%, 1);
  --secondary-d-3: hsla(12, 45%, 25%, 1);
  --secondary-d-4: hsla(10, 35%, 14%, 1);
  --secondary-l-1: hsla(20, 85%, 75%, 1);
  --secondary-l-2: hsla(22, 90%, 84%, 1);
  --secondary-l-3: hsla(24, 90%, 90%, 1);
  --secondary-l-4: hsla(26, 90%, 95%, 1);

  /* Semantic */
  --bg-body: #FBF7F4;
  --bg-surface: hsla(0, 0%, 100%, 1);
  --bg-warm: hsla(24, 50%, 95%, 1);
  --bg-deep: hsla(345, 50%, 15%, 1);
  --text-body: hsla(345, 14%, 22%, 1);
  --text-muted: hsla(345, 9%, 42%, 1);
  --text-title: hsla(345, 35%, 12%, 1);
  --border-primary: hsla(345, 18%, 80%, 0.5);
  --border-soft: hsla(345, 28%, 90%, 1);
  --shadow-primary: hsla(345, 40%, 20%, 0.12);

  /* Typeface roles (tweakable) */
  --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;
  --font-heading: 'Lora', 'Newsreader', Georgia, serif;

  /* Utility – Light */
  --light: hsla(0, 0%, 100%, 1);
  --light-5: hsla(0, 0%, 100%, 0.05);
  --light-10: hsla(0, 0%, 100%, 0.1);
  --light-20: hsla(0, 0%, 100%, 0.2);
  --light-30: hsla(0, 0%, 100%, 0.3);
  --light-40: hsla(0, 0%, 100%, 0.4);
  --light-50: hsla(0, 0%, 100%, 0.5);
  --light-60: hsla(0, 0%, 100%, 0.6);
  --light-70: hsla(0, 0%, 100%, 0.7);
  --light-80: hsla(0, 0%, 100%, 0.8);
  --light-90: hsla(0, 0%, 100%, 0.9);

  /* Utility – Dark */
  --dark: hsla(0, 0%, 0%, 1);
  --dark-5: hsla(0, 0%, 0%, 0.05);
  --dark-10: hsla(0, 0%, 0%, 0.1);
  --dark-20: hsla(0, 0%, 0%, 0.2);
  --dark-30: hsla(0, 0%, 0%, 0.3);
  --dark-40: hsla(0, 0%, 0%, 0.4);
  --dark-50: hsla(0, 0%, 0%, 0.5);
  --dark-60: hsla(0, 0%, 0%, 0.6);
  --dark-70: hsla(0, 0%, 0%, 0.7);
  --dark-80: hsla(0, 0%, 0%, 0.8);
  --dark-90: hsla(0, 0%, 0%, 0.9);

  /* Status */
  --success: hsla(136, 95%, 40%, 1);
  --success-5: hsla(136, 95%, 56%, 0.05);
  --success-10: hsla(136, 95%, 56%, 0.1);
  --success-20: hsla(136, 95%, 56%, 0.2);
  --error: hsla(351, 95%, 56%, 1);
  --error-5: hsla(351, 95%, 56%, 0.05);
  --error-10: hsla(351, 95%, 56%, 0.1);
  --error-20: hsla(351, 95%, 56%, 0.2);

  /* Grid */
  --columns-1: repeat(1, minmax(0, 1fr));
  --columns-2: repeat(2, minmax(0, 1fr));
  --columns-3: repeat(3, minmax(0, 1fr));
  --columns-4: repeat(4, minmax(0, 1fr));
  --columns-5: repeat(5, minmax(0, 1fr));
  --columns-6: repeat(6, minmax(0, 1fr));
  --columns-7: repeat(7, minmax(0, 1fr));
  --columns-8: repeat(8, minmax(0, 1fr));

  /* Border Radius */
  --radius-xs: clamp(0.25rem, calc(0vw + 0.25rem), 0.25rem);
  --radius-s: clamp(0.38rem, calc(-0.19vw + 0.54rem), 0.5rem);
  --radius-m: clamp(0.63rem, calc(-0.19vw + 0.79rem), 0.75rem);
  --radius-l: clamp(1rem, calc(-0.37vw + 1.32rem), 1.25rem);
  --radius-xl: clamp(1.63rem, calc(-0.56vw + 2.11rem), 2rem);
  --radius-full: 999rem;

  /* Shadows */
  --shadow-xs: 0 1px 2px var(--shadow-primary);
  --shadow-s: 0 1.5px 3px var(--shadow-primary);
  --shadow-m: 0 2px 6px var(--shadow-primary);
  --shadow-l: 0 3px 12px var(--shadow-primary);
  --shadow-xl: 0 6px 48px var(--shadow-primary);
}

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

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: 1.65;
  color: var(--text-body);
  background-color: var(--bg-body);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 36;
}

header, main, footer {
  display: block;
}

img, picture, svg, video {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-title);
  margin-bottom: var(--space-m);
}

h1 { font-size: var(--text-4xl); line-height: 1.1; }
h2 { font-size: var(--text-3xl); line-height: 1.2; }
h3 { font-size: var(--text-2xl); line-height: 1.3; }
h4 { font-size: var(--text-xl);  line-height: 1.3; }
h5 { font-size: var(--text-l);   line-height: 1.3; }
h6 { font-size: var(--text-m);   line-height: 1.4; }

p {
  max-width: 70ch;
  margin-bottom: var(--space-m);
}

*:last-child {
  margin-bottom: 0;
}