/* Taylor — Lavender split-complement monochrome landing */

:root {
  /* Lavender monochrome (blue reduced ~10%) */
  --lavender-50: #f5f3e6;
  --lavender-100: #ede9e5;
  --lavender-200: #ddd6e5;
  --lavender-300: #c4b5e4;
  --lavender-400: #a78be1;
  --lavender-500: #8b5cdd;
  --lavender-600: #7c3ad5;
  --lavender-700: #6d28c3;
  --lavender-800: #5b21a4;
  --lavender-900: #4c1d86;
  --lavender-950: #2e105b;

  /* Sage monochrome (split complement) */
  --sage-50: #f4f6f2;
  --sage-100: #e2e8db;
  --sage-200: #b8c9a8;
  --sage-300: #7d9b6a;
  --sage-400: #5a734c;
  --sage-500: #465c3a;
  --sage-600: #3a4d30;
  --sage-700: #2f3e27;
  --sage-800: #252f1f;
  --sage-900: #1c2418;
  --sage-950: #0d100b;

  /* Warm cream monochrome (split complement) */
  --cream-50: #fffbeb;
  --cream-100: #fef3c7;
  --cream-200: #fde68a;
  --cream-300: #fcd34d;
  --cream-400: #fbbf24;
  --cream-500: #f59e0b;
  --cream-600: #d97706;
  --cream-700: #b45309;
  --cream-800: #92400e;
  --cream-900: #78350f;
  --cream-950: #422006;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Fraunces", "Georgia", serif;
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  line-height: 1.65;
  color: var(--lavender-900);
  overflow-x: hidden;
}

/* Section base */
section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem);
  text-align: center;
  border-top: 4px solid;
}

section:first-child {
  border-top: none;
}

section h2 {
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

section p {
  max-width: 38rem;
  font-size: clamp(1.25rem, 2.75vw, 1.5rem);
  font-weight: 450;
  line-height: 1.65;
  letter-spacing: 0.005em;
}

/* Cream segment — hero. Main color = bg, text/borders darker */
.segment-cream {
  background: var(--cream-700);
  color: var(--cream-950);
  border-color: var(--cream-800);
}

.segment-cream h1 {
  font-size: clamp(3.5rem, 12vw, 7rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
  line-height: 1.1;
  color: var(--cream-950);
}

.segment-cream .tagline {
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 450;
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: var(--cream-950);
}

/* Sage segment. Main color = bg, text/borders darker */
.segment-sage {
  background: var(--sage-400);
  color: var(--sage-800);
  border-color: var(--sage-600);
}

.segment-sage h2,
.segment-sage p {
  color: var(--sage-800);
}

.segment-cream h2,
.segment-cream p {
  color: var(--cream-950);
}

/* Lavender segment. Main color = bg, text/borders darker */
.segment-lavender {
  background: var(--lavender-400);
  color: var(--lavender-800);
  border-color: var(--lavender-600);
}

.segment-lavender h2,
.segment-lavender p {
  color: var(--lavender-800);
}

/* CTA link */
.cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.875rem 1.75rem;
  font-size: clamp(1.0625rem, 2.25vw, 1.25rem);
  font-weight: 550;
  text-decoration: none;
  border-radius: 0;
  letter-spacing: 0.01em;
  transition: transform 0.2s, opacity 0.2s;
}

.segment-lavender .cta {
  background: var(--lavender-400);
  color: var(--lavender-800);
  border: 2px solid var(--lavender-800);
}

.segment-sage .cta {
  background: var(--sage-400);
  color: var(--sage-800);
  border: 2px solid var(--sage-800);
}

.segment-cream .cta {
  background: var(--cream-700);
  color: var(--cream-950);
  border: 2px solid var(--cream-950);
}

.cta:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}
