:root {
    --ink: #1F1B18;
  --graphite: #353A42;
  --ground: #EDE9E3;
  --paper: #DFD9D2;
  --cream: #F4F0E9;
  --green: #495B30;
  --gold: #DAA83B;
  --muted: #5A5249;         --muted-dark: #C9C2B8;  
    --ink-rgb: 31 27 24;
  --graphite-rgb: 53 58 66;
  --shade-rgb: 24 20 17;
  --cream-rgb: 244 240 233;
  --ground-rgb: 237 233 227;
  --white-rgb: 255 255 255;

    --f-display: 'Oswald', 'Arial Narrow', sans-serif;
  --f-body: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-label: var(--f-body); 
    --ease: cubic-bezier(.22, 1, .36, 1);
  --t1: 200ms;
  --t2: 320ms;
  --t3: 600ms;

    --gut: clamp(16px, 4vw, 40px);
  --maxw: 1320px;
  --header-h: 96px;
  --dock-h: 76px;
  --radius: 4px;
  --focus: var(--ink);

    --shadow-tag: 0 1px 0 rgb(var(--ink-rgb) / .35), 0 8px 14px -10px rgb(var(--ink-rgb) / .55);
  --shadow-tag-hover: 0 1px 0 rgb(var(--ink-rgb) / .35), 0 14px 18px -10px rgb(var(--ink-rgb) / .6);
  --shadow-tag-active: 0 0 0 rgb(var(--ink-rgb) / .35), 0 3px 6px -4px rgb(var(--ink-rgb) / .5);
  --shadow-photo: 0 16px 24px -18px rgb(var(--ink-rgb) / .65);
}