/* Design tokens + primitives. Palette sampled from Julieny's logo artwork. */

:root {
  /* brand — sampled from the resume/logo raster */
  --lavender:   #d3d9ee;  /* logo background */
  --periwinkle: #6073bd;  /* script-wordmark blue */
  --muted:      #a7adcd;  /* "Rossini" gray-lavender */
  --mist:       #eff3f3;  /* pale mint card white */
  --slate:      #6f849c;
  --navy:       #1c3849;  /* text on light */

  /* night sky (darkened periwinkle family) */
  --night-deep: #232948;
  --night-mid:  #333c6b;
  --night-soft: #454f8a;
  --starlight:  #eef0fa;

  /* dawn — the only warm color on the page */
  --dawn:       #f2c6a0;
  --dawn-deep:  #e8ac7d;

  --font-body:   "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  --font-display:"Fraunces", "Georgia", serif;
  --font-script: "Sacramento", cursive;

  --wrap: 68rem;
  --radius: 1.4rem;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--navy);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 7.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); margin-bottom: 1rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }

a { color: var(--periwinkle); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.4rem; }
.wrap.narrow { max-width: 46rem; }

.brand-script,
.section-script,
.hero-script {
  font-family: var(--font-script);
  font-weight: 400;
}

.section-script {
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  color: var(--periwinkle);
  margin-bottom: 0.2rem;
}

/* ---- buttons ---- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-dawn {
  background: linear-gradient(160deg, var(--dawn), var(--dawn-deep));
  color: #4a2f18;
  box-shadow: 0 6px 22px rgba(232, 172, 125, 0.45);
}
.btn-dawn:hover { box-shadow: 0 10px 28px rgba(232, 172, 125, 0.6); }

.btn-ghost {
  color: var(--starlight);
  border: 1.5px solid rgba(238, 240, 250, 0.45);
}
.btn-ghost:hover { background: rgba(238, 240, 250, 0.1); }

.btn-navy {
  background: var(--navy);
  color: var(--mist);
  box-shadow: 0 6px 22px rgba(28, 56, 73, 0.3);
}

/* ---- entrance motion ---- */
.rise {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.d1 { animation-delay: 0.1s; } .d2 { animation-delay: 0.25s; }
.d3 { animation-delay: 0.4s; } .d4 { animation-delay: 0.6s; }
.d5 { animation-delay: 0.8s; } .d6 { animation-delay: 1s; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .reveal { opacity: 1; transform: none; animation: none; transition: none; }
  .stars, .moon, .scroll-cue span { animation: none !important; }
}