:root {
  /* Accent palette */
  --sage: #ff6766;          /* soft sage green */
  --sage-deep: #ff6766;
  --vermillion: #ff6766;    /* soft vermillion */
  --vermillion-deep: #b8553d;

  /* Earthy background */
  --bg: #f1e7d6;
  --text: #2b2520;
  --muted: #6b5e54;

  /* Loader / "planet" color */
  --primary: var(--vermillion);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(217,106,79,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(142,168,136,.14), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Nav ---------- */
.nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem clamp(1.25rem, 4vw, 4rem);
}
.logo { font-weight: 700; letter-spacing: .04em; font-size: 1.1rem; }
.logo span { color: var(--vermillion); }
.nav ul { display: flex; gap: 2rem; list-style: none; }
.nav a {
  color: var(--text);
  text-decoration: none;
  font-size: .95rem;
  opacity: .85;
  transition: opacity .2s ease, color .2s ease;
}
.nav a:hover { color: var(--sage-deep); opacity: 1; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(1rem, 4vw, 3rem) clamp(1.25rem, 4vw, 4rem) 4rem;
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - 90px);
}

.content { max-width: 38rem; }
.eyebrow {
  display: inline-block;
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 1.25rem;
  padding: .35rem .75rem;
  border: 1px solid var(--sage-deep);
  border-radius: 999px;
}
h1 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 1.25rem;
}
h1 em { font-style: italic; color: var(--vermillion); font-weight: 500; }
.lede {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--muted);
  margin-bottom: 2rem;
  max-width: 32rem;
}
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.4rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .2s ease, background .2s ease, color .2s ease;
  cursor: pointer;
}
.btn-primary { background: var(--vermillion); color: #fff; }
.btn-primary:hover { background: var(--vermillion-deep); transform: translateY(-2px); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.42);
  color: #585858;
  border-color: #fff;
}
.btn-ghost:hover { border-color: var(--text); transform: translateY(-2px); }

.stats { display: flex; gap: 2.25rem; margin-top: 3rem; flex-wrap: wrap; }
.stat strong {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.75rem;
  color: var(--sage-deep);
}
.stat span { font-size: .85rem; color: var(--muted); }

/* ---------- Portrait + rings ---------- */
.portrait-wrap {
   position: relative;
   width: 100%;
   max-width: 460px;
   margin-left: auto;
   aspect-ratio: 3 / 4;
  /* Let the rings extend past the portrait on the sides */
  overflow: visible;
}

/* Portrait sits in the middle layer (z-index 2). 
   Back rings = 1, Front rings = 3 */
.portrait-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(45,30,20,.35);
}
.portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.95) contrast(1.02);
}
.portrait-tint {
  position: absolute;
  inset: 0;
  background: var(--vermillion);
  mix-blend-mode: multiply;
  opacity: .14;
  pointer-events: none;
}
.loader-rect {
  position: absolute;
  inset: 0;
  background: var(--vermillion);
  transform-origin: bottom center;
  will-change: transform, opacity;
}

/* Both ring SVGs are oversized and centered so the ellipse
   centers (y=250 in viewBox) align with the portrait's vertical middle. */
.rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  height: 110%;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}

/* Clip each layer to its half of the orbit.
   Back layer shows only the FAR side of the rings (top half of ellipse). 
   Front layer shows only the NEAR side (bottom half). */
.rings-back  { z-index: 1; clip-path: inset(0 0 50% 0); }
.rings-front { z-index: 3; clip-path: inset(50% 0 0 0); }

/* ---------- Rings: routes only, no visible stroke ---------- */
/* Base style for all three comet rings */
.ring-path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2px;
  stroke-linecap: round; /* Gives the comet a smooth, aerodynamic look */
  
  /* 50% line, 50% empty space = exactly 1 half-ring dash */
  stroke-dasharray: 50 50; 
  
  /* Optional: gives the comet trail a celestial glow */
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6)); 
}

/* Moving from 50 to -50 perfectly aligns the 'head' of the 
  CSS stroke with the 0% to 100% position of your SVG stars.
*/
@keyframes loop-tail {
  0% {
    stroke-dashoffset: 50;
  }
  100% {
    stroke-dashoffset: -50;
  }
}

/* 2. Body Keyframe (Starts at 25) */
@keyframes loop-body {
  0% {
    stroke-dashoffset: 25;
  }
  100% {
    stroke-dashoffset: -75;
  }
}

/* 3. Head Keyframe (Starts at 10) */
@keyframes loop-head {
  0% {
    stroke-dashoffset: 10;
  }
  100% {
    stroke-dashoffset: -90;
  }
}

/* --- Individual Ring Syncing --- */

/* Matches Star 1 (dur: 7s, no delay) */
.ring-path.r1 {
  animation: comet-loop 7s linear infinite;
}

/* --- Orbit 1 Taper Setup --- */
.r1 { animation: comet-loop 7s linear infinite; }

/* 1. The long, thin tail (50% of the ring) */
.r1.tail {
  stroke-width: 1px;
  stroke-dasharray: 50 50;
  --dash-len: 50;
  opacity: 0.4;
  animation-name: loop-tail;
}
/* 2. The medium mid-section (25% of the ring) */
.r1.body {
  stroke-width: 1.25px;
  stroke-dasharray: 25 75;
  --dash-len: 25;
  opacity: 0.8;
  animation-name: loop-body;
}
/* 3. The short, thick head (10% of the ring) */
.r1.head {
  stroke-width: 1.75px;
  stroke-dasharray: 10 90;
  --dash-len: 10;
  opacity: 1;
  animation-name: loop-head;
}

/* Matches Star 2 (dur: 10s, delay: -2.5s) */
.ring-path.r2 {
  animation: comet-loop 10s linear infinite;
  animation-delay: -2.5s;
}
.r2 { animation: comet-loop 10s linear infinite; }

/* 1. The long, thin tail (50% of the ring) */
.r2.tail {
  stroke-width: 1px;
  stroke-dasharray: 50 50;
  --dash-len: 50;
  opacity: 0.4;
  animation-name: loop-tail;
}
/* 2. The medium mid-section (25% of the ring) */
.r2.body {
  stroke-width: 1.25px;
  stroke-dasharray: 25 75;
  --dash-len: 25;
  opacity: 0.8;
  animation-name: loop-body;
}
/* 3. The short, thick head (10% of the ring) */
.r2.head {
  stroke-width: 1.75px;
  stroke-dasharray: 10 90;
  --dash-len: 10;
  opacity: 1;
  animation-name: loop-head;
}

/* Matches Star 3 (dur: 8.5s, delay: -5s) */
.ring-path.r3 {
  animation: comet-loop 8.5s linear infinite;
  animation-delay: -5s;
}
/* --- Orbit 1 Taper Setup --- */
.r3 { animation: comet-loop 8.5s linear infinite; }
/* 1. The long, thin tail (50% of the ring) */
.r3.tail {
  stroke-width: 1px;
  stroke-dasharray: 50 50;
  --dash-len: 50;
  opacity: 0.4;
  animation-name: loop-tail;
}
/* 2. The medium mid-section (25% of the ring) */
.r3.body {
  stroke-width: 1.25px;
  stroke-dasharray: 25 75;
  --dash-len: 25;
  opacity: 0.8;
  animation-name: loop-body;
}
/* 3. The short, thick head (10% of the ring) */
.r3.head {
  stroke-width: 1.75px;
  stroke-dasharray: 10 90;
  --dash-len: 10;
  opacity: 1;
  animation-name: loop-head;
}

/* ---------- Comet head ---------- */
.star.s1,
.star.s2,
.star.s3 {
  fill: #ffffff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95))
          drop-shadow(0 0 14px rgba(255, 255, 255, 0.5));
}

/* ---------- Comet trail ---------- */
.trail {
  fill: #ffffff;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
}
.trail.t1 { opacity: 0.55; }
.trail.t2 { opacity: 0.40; }
.trail.t3 { opacity: 0.28; }
.trail.t4 { opacity: 0.18; }
.trail.t5 { opacity: 0.10; }

/* ---------- Load sequence ---------- */
.is-loading .content > * { opacity: 0; transform: translateY(14px); }
.content > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0s);
}
.eyebrow { --d: .9s; }
h1        { --d: 1.0s; }
.lede     { --d: 1.15s; }
.cta-row  { --d: 1.3s; }
.stats    { --d: 1.45s; }

.is-loading .loader-rect { transform: scaleY(1); opacity: 1; }
.loader-rect {
  transform: scaleY(0);
  opacity: 0;
  transition:
    transform .7s cubic-bezier(.77,0,.18,1) .25s,
    opacity .2s ease 1.05s;
}
.is-loading .ring-path { animation-play-state: paused; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav ul { display: none; }
  .hero {
    grid-template-columns: 1fr;
    text-align: left;
    padding-top: 1rem;
    gap: 2.5rem;
  }
  .portrait-wrap {
    order: -1;
    margin: 10vh auto;
    /* Changed: Scales portrait down so the 200% SVG fits safely on screen */
    width: 50vw; 
    max-width: 430px; 
    aspect-ratio: 3 / 4;
    overflow: visible;
  }
  .stats { gap: 1.5rem; margin-top: 2rem; }
  .stat strong { font-size: 1.4rem; }
}

@media (max-width: 420px) {
  .portrait-wrap { 
    /* Changed: Keeps it perfectly scaled on tiny screens */
    width: 50vw; 
    max-width: 210px;
  }
  .cta-row .btn { flex: 1; justify-content: center; }
}