:root {
  --radius: 0.375rem;

  --background-rgb: 245 244 241;
  --foreground-rgb: 37 34 32;

  --card-rgb: 251 250 248;
  --card-foreground-rgb: 37 34 32;
  --popover-rgb: 251 250 248;
  --popover-foreground-rgb: 37 34 32;

  --primary-rgb: 37 34 32;
  --primary-foreground-rgb: 247 247 244;
  --secondary-rgb: 235 233 229;
  --secondary-foreground-rgb: 37 34 32;
  --muted-rgb: 235 233 229;
  --muted-foreground-rgb: 95 91 87;
  --accent-rgb: 235 230 216;
  --accent-foreground-rgb: 37 34 32;
  --destructive-rgb: 189 67 52;
  --destructive-foreground-rgb: 247 247 244;

  --border-rgb: 218 217 213;
  --input-rgb: 218 217 213;
  --ring-rgb: 183 146 75;

  --graphite-rgb: 31 28 26;
  --graphite-soft-rgb: 50 46 44;
  --graphite-foreground-rgb: 244 243 240;
  --gold-rgb: 192 149 73;
  --gold-soft-rgb: 215 193 151;
  --gold-foreground-rgb: 27 24 19;
  --sand-rgb: 240 237 228;
  --hairline-rgb: 213 210 205;

  --background: rgb(var(--background-rgb));
  --foreground: rgb(var(--foreground-rgb));

  --card: rgb(var(--card-rgb));
  --card-foreground: rgb(var(--card-foreground-rgb));
  --popover: rgb(var(--popover-rgb));
  --popover-foreground: rgb(var(--popover-foreground-rgb));

  --primary: rgb(var(--primary-rgb));
  --primary-foreground: rgb(var(--primary-foreground-rgb));
  --secondary: rgb(var(--secondary-rgb));
  --secondary-foreground: rgb(var(--secondary-foreground-rgb));
  --muted: rgb(var(--muted-rgb));
  --muted-foreground: rgb(var(--muted-foreground-rgb));
  --accent: rgb(var(--accent-rgb));
  --accent-foreground: rgb(var(--accent-foreground-rgb));
  --destructive: rgb(var(--destructive-rgb));
  --destructive-foreground: rgb(var(--destructive-foreground-rgb));

  --border: rgb(var(--border-rgb));
  --input: rgb(var(--input-rgb));
  --ring: rgb(var(--ring-rgb));

  --graphite: rgb(var(--graphite-rgb));
  --graphite-soft: rgb(var(--graphite-soft-rgb));
  --graphite-foreground: rgb(var(--graphite-foreground-rgb));
  --gold: rgb(var(--gold-rgb));
  --gold-soft: rgb(var(--gold-soft-rgb));
  --gold-foreground: rgb(var(--gold-foreground-rgb));
  --sand: rgb(var(--sand-rgb));
  --hairline: rgb(var(--hairline-rgb));

  --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

@layer base {
  * {
    border-color: var(--border);
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  ::selection {
    background-color: var(--gold-soft);
    color: var(--gold-foreground);
  }

  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
}

/* ---- utilities ---- */

.container-editorial {
  width: 100%;
  margin-inline: auto;
  max-width: 84rem;
  padding-inline: 1.5rem;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.display-xl {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.display-md {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.rule-gold {
  display: block;
  height: 1px;
  width: 3.5rem;
  background-color: var(--gold);
}

.grid-rose {
  background-image:
    linear-gradient(to right, var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
}

.grid-rose-dark {
  background-image:
    linear-gradient(to right, #ffffff0f 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff0f 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
}

.link-gold {
  color: var(--foreground);
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 0.35s ease;
}

.link-gold:hover {
  background-size: 100% 1px;
}

.reveal-hidden {
  opacity: 0;
  transform: translateY(1.25rem);
}

.reveal-shown {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}