@font-face {
  font-family: 'Michroma';
  src: url('../assets/fonts/michroma-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Microgramma D';
  src: url('../assets/fonts/microgramma-d-ext-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Unison Pro';
  src: url('../assets/fonts/unison-pro-light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Unison Pro';
  src: url('../assets/fonts/unison-pro-light-italic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Unison Pro';
  src: url('../assets/fonts/unison-pro-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Unison Pro';
  src: url('../assets/fonts/unison-pro-bold-italic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../assets/fonts/instrument-sans-var.woff2') format('woff2');
  font-weight: 400 700; font-stretch: 75% 100%;
  font-style: normal; font-display: swap;
}

:root {
  
  --gcg-green-slate: #383d3c;
  --gcg-warm-gray:   #7d8180;
  --gcg-carbon:      #333333;
  --gcg-ink:         #191c1c;

  --gcg-bone:  #ede8df;
  --gcg-sand:  #d8d1c1;
  --gcg-stone: #b3ab9a;
  --gcg-olive: #5a5b3e;
  --gcg-moss:  #4a5148;
  --gcg-rust:  #8a4a32;
  --gcg-ochre: #b38a3a;
  --gcg-steel: #505759;
  --gcg-fog:   #a3a49e;

  --font-display: 'Michroma', 'Eurostile Extended', 'Bank Gothic', sans-serif;
  --font-microgramma: 'Microgramma D', 'Eurostile Extended', 'Bank Gothic', sans-serif;
  --font-ui:      'Unison Pro', 'Microgramma D', system-ui, sans-serif;
  --font-sans:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-prose:   'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
                  'Liberation Mono', monospace;

  --fs-display:  clamp(31px, 5.6vw, 74px);   
  --fs-section:  clamp(26px, 3.9vw, 54px);   
  --fs-sub:      clamp(19px, 1.7vw, 26px);   
  --fs-lead:     clamp(17px, 1.35vw, 23px);  
  --fs-body:     clamp(15px, 0.95vw, 17px);  
  --fs-small:    0.8125rem;                  
  --fs-meta:     0.6875rem;                  
  --fs-nav:      0.8125rem;                  
  --fs-wordmark: clamp(0.75rem, 1.05vw, 0.9375rem);

  --lh-display: 1.06;    
  --lh-tight: 1.02;
  --lh-snug:  1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.7;

  --track-display: -0.012em;
  --track-body:   -0.005em;
  --track-caps-xl: 0.22em;
  --track-caps-l:  0.14em;
  --track-caps-m:  0.08em;

  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  --r-0: 0;

  --nav-h:     72px;
  --nav-h-top: clamp(84px, 69px + 1.875vw, 96px);
  --nav-pad-x: clamp(16px, 3.2vw, 48px);

  --mark-w:     52px;
  --mark-w-top: clamp(56px, 48.5px + 0.9375vw, 62px);

  --glass-blur: 16px;
  --glass-sat: 1.6;
  --glass-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));

  --nav-fill-top:      color-mix(in srgb, var(--bg-1) 24%, transparent);
  --nav-fill-scrolled: color-mix(in srgb, var(--bg-1) 78%, transparent);

  --wrap-max: 1440px;
  --wrap-pad: clamp(20px, 4.4vw, 64px);

  --section-pad-y: clamp(64px, 7.2vw, 112px);
  --section-gap:   clamp(40px, 4.6vw, 72px);   

  --section-pad-lg: clamp(80px, 9vw, 148px);
  --section-pad-sm: clamp(56px, 5.8vw, 92px);

  --maxw-prose: 68ch;
  --maxw-lead:  46ch;

  --veil-rgb: 25, 28, 28;
  --media-veil:      rgba(var(--veil-rgb), var(--veil-a));
  --media-veil-edge: rgba(var(--veil-rgb), var(--veil-edge-a));
  --veil-a: .52;
  --veil-edge-a: .72;

  --media-scale: 1.03;   
  --media-filter: saturate(.42) sepia(.10) contrast(1.06) brightness(.82);
  
  --panel-filter: saturate(.62) sepia(.06) contrast(1.05) brightness(.94);
  --grain-opacity: .07;

  --shadow-panel:
    0 1px 2px rgba(0, 0, 0, .34),
    0 14px 30px -14px rgba(0, 0, 0, .85);
  
  --panel-edge: color-mix(in srgb, var(--fg-1) 14%, transparent);

  --dur-1: 120ms;   
  --dur-2: 200ms;   
  --dur-3: 320ms;   
  --ease-standard:   cubic-bezier(.2, 0, .2, 1);
  --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
  
  --ease-rise: cubic-bezier(.16, 1, .3, 1);

  --reveal-y: 16px;
  --dur-reveal: 620ms;
  
  --reveal-step: 60ms;

  --dur-step:  480ms;   
  --dur-sheet: 400ms;   
}

:root {
  --bg-1: var(--gcg-ink);
  --bg-2: #222625;
  --bg-3: #2a2e2d;

  --fg-1: var(--gcg-bone);       
  --fg-2: #c9c6bd;               
  --fg-3: #8b8d85;               
  --fg-4: #6f7370;               

  --border-1: #383d3c;           
  --border-2: #4d5251;           
  --border-strong: #6a706e;

  --accent: #c2beb4;
  --accent-hover: #d9d5cb;
  --accent-press: #ede8df;

  --signal: var(--gcg-ochre);
  --signal-ink: #c9a052;
  --danger: #b5654a;
  --info: #8a9294;

  --mark-frame: url('../assets/brand/mark-frame-bone.svg');
  --emblem: url('../assets/brand/emblem-bone.svg');
  --mark-color: var(--gcg-bone);

  --lockup: url('../assets/brand/logo-lockup.svg');

  --lattice-rgb: 237, 232, 223;
  --lattice-alpha: 1;

  --card-fill: color-mix(in srgb, var(--bg-2) 34%, transparent);
  --card-fill-hover: color-mix(in srgb, var(--bg-2) 62%, transparent);
  --card-rule: color-mix(in srgb, var(--border-1) 78%, transparent);
}