/* ─── Custom Properties ─────────────────────────────────────────────────── */
:root {
  --radius: 1.25rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --background: oklch(1 0 0);
  --surface: oklch(0.985 0.003 80);
  --foreground: oklch(0.18 0.01 60);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.01 60);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.01 60);
  --primary: oklch(0.22 0.015 55);
  --primary-foreground: oklch(0.985 0.003 80);
  --accent-copper: oklch(0.62 0.12 45);
  --secondary: oklch(0.965 0.005 70);
  --secondary-foreground: oklch(0.22 0.015 55);
  --muted: oklch(0.965 0.005 70);
  --muted-foreground: oklch(0.5 0.015 60);
  --accent: oklch(0.94 0.02 55);
  --accent-foreground: oklch(0.22 0.015 55);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.92 0.008 70);
  --input: oklch(0.92 0.008 70);
  --ring: oklch(0.62 0.12 45);
  --shadow-soft: 0 1px 2px rgba(20, 14, 8, 0.03), 0 8px 24px -12px rgba(20, 14, 8, 0.08);
  --shadow-elevated: 0 4px 12px -6px rgba(20, 14, 8, 0.06), 0 24px 48px -24px rgba(20, 14, 8, 0.14);
}

/* ─── Base styles ──────────────────────────────────────────────────────── */
* { border-color: var(--border); }
html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--primary);
}
p { line-height: 1.7; }

/* ─── Custom utilities (not generated by Tailwind) ─────────────────────── */
.container-lg {
  width: 100%;
  max-width: 1536px;
  margin-inline: auto;
  padding-inline: 2rem;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent-copper);
  font-family: var(--font-sans);
}
.card-soft {
  background: var(--card);
  border: 1px solid oklch(0.94 0.008 70);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 600ms;
}
.card-soft-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

/* Colors mapped to CSS vars (fallback for Tailwind utilities) */
.bg-surface { background-color: var(--surface); }
.bg-background { background-color: var(--background); }
.bg-primary { background-color: var(--primary); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-accent-copper { color: var(--accent-copper); }
.border-border { border-color: var(--border); }
.bg-primary\/5 { background-color: color-mix(in oklch, var(--primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklch, var(--primary) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in oklch, var(--primary) 20%, transparent); }
.bg-primary\/70 { background-color: color-mix(in oklch, var(--primary) 70%, transparent); }
.hover\:bg-primary\/90:hover { background-color: color-mix(in oklch, var(--primary) 90%, transparent); }
.bg-background\/85 { background-color: color-mix(in oklch, var(--background) 85%, transparent); }
.bg-background\/90 { background-color: color-mix(in oklch, var(--background) 90%, transparent); }
.hover\:bg-background\/90:hover { background-color: color-mix(in oklch, var(--background) 90%, transparent); }
.bg-background\/95 { background-color: color-mix(in oklch, var(--background) 95%, transparent); }
.text-primary-foreground\/70 { color: color-mix(in oklch, var(--primary-foreground) 70%, transparent); }
.text-background { color: var(--background); }
.text-background\/80 { color: color-mix(in oklch, var(--background) 80%, transparent); }
.border-border\/60 { border-color: color-mix(in oklch, var(--border) 60%, transparent); }
.border-primary-foreground\/25 { border-color: color-mix(in oklch, var(--primary-foreground) 25%, transparent); }
.hover\:border-accent-copper:hover { border-color: var(--accent-copper); }
.hover\:text-accent-copper:hover { color: var(--accent-copper); }
.hover\:text-foreground:hover { color: var(--foreground); }
.hover\:bg-primary-foreground\/10:hover { background-color: color-mix(in oklch, var(--primary-foreground) 10%, transparent); }
.ring-background { --tw-ring-color: var(--background); }
.ring-accent-copper { --tw-ring-color: var(--accent-copper); }
.font-display { font-family: var(--font-display); }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Nav scrolled state */
[data-nav].nav-scrolled {
  backdrop-filter: blur(12px);
  background-color: color-mix(in oklch, var(--background) 85%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
}

/* ─── Reveal Animations ────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.reveal { opacity: 0; will-change: transform, opacity; }
.reveal-in-up { animation: fadeUp 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.reveal-in-left { animation: fadeLeft 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.reveal-in-right { animation: fadeRight 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.reveal-in-scale { animation: scaleIn 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* ─── Crossfade transition ─────────────────────────────────────────────── */
[data-crossfade] img {
  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}

/* ─── Accordion transition ─────────────────────────────────────────────── */
[data-accordion-body] {
  transition: max-height 500ms ease-out, opacity 300ms ease-out;
}