@font-face {
  font-family: 'Source Sans 3';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('fonts/source-sans-3-300-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/source-sans-3-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('fonts/source-sans-3-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/source-sans-3-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('fonts/source-sans-3-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/source-sans-3-700-normal.woff2') format('woff2');
}

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

  /* Typography Scale */
  --text-xs: clamp(0.63rem, calc(0vw + 0.63rem), 0.63rem);
  --text-s: clamp(0.8rem, calc(0.17vw + 0.76rem), 0.88rem);
  --text-m: clamp(1rem, calc(0.54vw + 0.89rem), 1.25rem);
  --text-l: clamp(1.25rem, calc(1.12vw + 1.02rem), 1.77rem);
  --text-xl: clamp(1.56rem, calc(2.03vw + 1.16rem), 2.5rem);
  --text-2xl: clamp(1.95rem, calc(3.42vw + 1.26rem), 3.53rem);
  --text-3xl: clamp(2.44rem, calc(5.54vw + 1.33rem), 5rem);
  --text-4xl: clamp(3.05rem, calc(8.69vw + 1.31rem), 7.07rem);

  /* Spacing Scale */
  --space-xs: clamp(0.44rem, calc(0.64vw + 0.3rem), 0.78rem);
  --space-s: clamp(0.67rem, calc(0.96vw + 0.46rem), 1.17rem);
  --space-m: clamp(1rem, calc(1.45vw + 0.68rem), 1.75rem);
  --space-l: clamp(1.5rem, calc(2.17vw + 1.03rem), 2.63rem);
  --space-xl: clamp(2.25rem, calc(3.25vw + 1.54rem), 3.94rem);
  --space-2xl: clamp(3.38rem, calc(4.88vw + 2.31rem), 5.91rem);
  --space-3xl: clamp(5.06rem, calc(7.32vw + 3.46rem), 8.86rem);

  /* Brand – Primary (Goldton #c59a4a) */
  --primary: #c59a4a;
  --primary-5: hsla(36, 49%, 53%, 0.05);
  --primary-10: hsla(36, 49%, 53%, 0.1);
  --primary-20: hsla(36, 49%, 53%, 0.2);
  --primary-30: hsla(36, 49%, 53%, 0.3);
  --primary-40: hsla(36, 49%, 53%, 0.4);
  --primary-50: hsla(36, 49%, 53%, 0.5);
  --primary-60: hsla(36, 49%, 53%, 0.6);
  --primary-70: hsla(36, 49%, 53%, 0.7);
  --primary-80: hsla(36, 49%, 53%, 0.8);
  --primary-90: hsla(36, 49%, 53%, 0.9);
  --primary-d-1: #a07d38;
  --primary-d-2: #7a5f28;
  --primary-d-3: #54421a;
  --primary-d-4: #2e240d;
  --primary-l-1: #d4b06e;
  --primary-l-2: #e0c794;
  --primary-l-3: #ecdbba;
  --primary-l-4: #f7f0e2;

  /* Primary Gradient */
  --primary-gradient: linear-gradient(100deg, #d7b97f, #9f7c32);

  /* Semantic */
  --bg-body: #fafafa;
  --bg-surface: hsla(0, 0%, 100%, 1);
  --bg-gray: #f7f7f7;
  --text-body: #3d2f1f;
  --text-title: #1a1208;
  --text-muted: #6b5a45;
  --border-primary: hsla(0, 0%, 50%, 0.2);
  --shadow-primary: hsla(0, 0%, 0%, 0.1);

  /* 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%, 35%, 1);
  --error: hsla(351, 95%, 56%, 1);

  /* Border Radius */
  --radius-xs: 0.25rem;
  --radius-s: 0.5rem;
  --radius-m: 0.75rem;
  --radius-l: 1.25rem;
  --radius-xl: 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);
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.05);
}

*, *::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: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  font-size: var(--text-m);
  line-height: 1.6;
  color: var(--text-body);
  background-color: var(--bg-body);
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

header, main, footer {
  display: block;
}

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

h1, h2, h3, h4, h5, h6 {
  color: var(--text-title);
  line-height: 1.2;
}

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

p {
  max-width: 70ch;
}

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