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



:root {
  --cream:      #F0EDE6;
  --ink:        #575757;
  --ink-mid:    #2e2e2b;
  --ink-footer: #7c7b76; 
  --ink-mid-footer: #b6b4ae; 
  --button: #c5c3bc; 

  --text-xs:      0.6rem;
  --text-sm:      0.7rem;
  --text-base:    0.75rem;
  --text-display: clamp(1.6rem, 3vw, 2.6rem);

  --lh-display: 1.1;
  --lh-body:    1.2;
  --lh-ui:      1.4;

  --pad-x:        clamp(16px, 2vw, 20px);
  --pad-y:        clamp(20px, 2.5vw, 35px);
  --gap-projects: clamp(60px, 8vw, 100px);

  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo:  cubic-bezier(0.3, 0, 0.65, 1);
  --duration-fast:     0.2s;
  --duration-normal:   0.4s;
  --duration-slide:    0.55s;
  --duration-drawer:   0.65s;
}

html { font-size: 18px; }

#header-spacer {
  height: 25vh;
}

@media (max-width: 860px) {
  #header-spacer { height: 8vh; }
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'SuisseIntl', sans-serif;
  overflow-x: hidden;
  max-width: 2560px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



/* ─── FONT FACES ─────────────────────────────────────────────────── */
@font-face { font-family: 'Mackay'; src: url('../fonts/Mackay/Mackay-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mackay'; src: url('../fonts/Mackay/Mackay-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; }
 
@font-face { font-family: 'SuisseIntl'; src: url('../fonts/SuisseIntl/SuisseIntl-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }