/*
SEED: 892892
- Layout: Horizontal scroll hero (first section horizontal, rest vertical)
- Color: Soft sage (#8fa888) base + near-black type + dusty pink accent
- Typography: Display: DM Serif Display | Body: Space Grotesk
- Visual Style: Geometric SVG shapes: circles/rectangles as frames & section markers
- Navigation: Breadcrumb trail (minimal top path + floating menu button)
- Tone: Luxury restrained (evocative, sparse, implies quality)
*/

:root {
  /* Palette — soft sage, near-black, dusty pink */
  --surface-base: #8fa888;
  --surface-lift: #9bb694;
  --surface-deep: #7a9474;
  --surface-panel: #f4f1ec;
  --surface-panel-soft: rgba(244, 241, 236, 0.82);
  --surface-ink: #141414;
  --brand-primary: #c4879a;
  --brand-primary-deep: #a86b7f;
  --brand-secondary: #5f735a;
  --text-primary: #141414;
  --text-muted: rgba(20, 20, 20, 0.72);
  --text-faint: rgba(20, 20, 20, 0.48);
  --text-on-ink: #f4f1ec;
  --text-on-accent: #141414;
  --line: rgba(20, 20, 20, 0.18);
  --line-strong: rgba(20, 20, 20, 0.32);
  --geo-stroke: rgba(20, 20, 20, 0.22);
  --geo-fill: rgba(196, 135, 154, 0.18);
  --shadow-soft: 0 18px 48px rgba(20, 20, 20, 0.12);

  /* Typography — DM Serif Display + Space Grotesk */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "Space Grotesk", "Segoe UI", sans-serif;

  /* Fluid Typography Scale */
  --text-hero: clamp(3rem, 8vw, 7rem);
  --text-h1: clamp(2rem, 5vw, 4rem);
  --text-h2: clamp(1.5rem, 3.5vw, 2.5rem);
  --text-h3: clamp(1.15rem, 2vw, 1.5rem);
  --text-body: clamp(0.95rem, 1.2vw, 1.1rem);
  --text-small: clamp(0.78rem, 0.9vw, 0.88rem);
  --text-caption: clamp(0.72rem, 0.8vw, 0.8rem);

  --lh-tight: 1.05;
  --lh-snug: 1.28;
  --lh-body: 1.7;
  --tracking-display: -0.01em;
  --tracking-label: 0.16em;

  /* Spacing Scale */
  --space-xs: clamp(0.4rem, 0.8vw, 0.75rem);
  --space-sm: clamp(0.5rem, 1vw, 1rem);
  --space-md: clamp(1rem, 2vw, 2rem);
  --space-lg: clamp(2rem, 4vw, 4rem);
  --space-xl: clamp(3rem, 6vw, 6rem);
  --space-2xl: clamp(4.5rem, 8vw, 9rem);

  --page-pad: clamp(1rem, 3vw, 2.5rem);
  --measure: 40rem;
  --radius-sm: 2px;
  --radius-md: 4px;
  --float-size: 3.25rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;
}

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

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  background: var(--surface-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--brand-primary-deep);
}

ul, ol { list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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