/* ---------- Tokens ---------- */
:root {
  --font-display: "Fraunces", Georgia, serif;
  --font-utility: "Inter", system-ui, sans-serif;

  --bone: #f4e9d8;
  --straw: #e8d4b8;
  --clay: #d9c4a3;
  --amber: #e8b87a;
  --ink: #2a2520;
  --soft-ink: #5c524a;
  /* Right-edge average from `family at the table.png` (paper beside the art) */
  --grounded-paper: #f4edde;
}

/* ---------- Globals ---------- */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-utility);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero Layout ---------- */
.hero {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bone);
}

/* Canopy shimmer — simulates wind moving through the treetops at the top of
   the photograph. Positioned above the figure so it interacts with the actual
   tree pixels in the PNG, masked so it only affects the top ~35% of the hero,
   and composited with `soft-light` so bright dapples brighten existing leaves
   rather than washing them out. Uses two stacked animations with short, more
   jittery motion to feel like leaves fluttering rather than branches drifting. */
.hero::before {
  content: "";
  position: absolute;
  top: -6%;
  left: -8%;
  right: -8%;
  height: 48%;
  z-index: 2;
  pointer-events: none;
  background:
    /* small bright leaf-gap flecks (hot sun punching through) */
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 246, 216, 0.7) 0%,
      rgba(255, 246, 216, 0) 3%
    ),
    radial-gradient(
      circle at 22% 8%,
      rgba(255, 240, 206, 0.55) 0%,
      rgba(255, 240, 206, 0) 2.5%
    ),
    radial-gradient(
      circle at 34% 26%,
      rgba(255, 244, 214, 0.6) 0%,
      rgba(255, 244, 214, 0) 3%
    ),
    radial-gradient(
      circle at 46% 12%,
      rgba(255, 238, 200, 0.5) 0%,
      rgba(255, 238, 200, 0) 2.5%
    ),
    radial-gradient(
      circle at 58% 32%,
      rgba(255, 246, 218, 0.6) 0%,
      rgba(255, 246, 218, 0) 3%
    ),
    radial-gradient(
      circle at 70% 16%,
      rgba(255, 242, 210, 0.55) 0%,
      rgba(255, 242, 210, 0) 2.5%
    ),
    radial-gradient(
      circle at 82% 28%,
      rgba(255, 246, 216, 0.65) 0%,
      rgba(255, 246, 216, 0) 3%
    ),
    radial-gradient(
      circle at 92% 10%,
      rgba(255, 240, 206, 0.5) 0%,
      rgba(255, 240, 206, 0) 2.5%
    ),
    /* mid-size warm pools (larger breaks in the canopy) */
    radial-gradient(
      ellipse 16% 10% at 28% 20%,
      rgba(255, 228, 178, 0.35) 0%,
      rgba(255, 228, 178, 0) 75%
    ),
    radial-gradient(
      ellipse 18% 12% at 62% 22%,
      rgba(255, 232, 186, 0.3) 0%,
      rgba(255, 232, 186, 0) 75%
    ),
    radial-gradient(
      ellipse 14% 10% at 88% 30%,
      rgba(255, 224, 172, 0.32) 0%,
      rgba(255, 224, 172, 0) 75%
    ),
    /* cool leaf-shadow pockets (soft olive shadow) */
    radial-gradient(
      ellipse 12% 8% at 18% 30%,
      rgba(58, 66, 50, 0.28) 0%,
      rgba(58, 66, 50, 0) 75%
    ),
    radial-gradient(
      ellipse 14% 10% at 52% 28%,
      rgba(62, 70, 54, 0.22) 0%,
      rgba(62, 70, 54, 0) 75%
    ),
    radial-gradient(
      ellipse 10% 8% at 78% 22%,
      rgba(58, 66, 50, 0.25) 0%,
      rgba(58, 66, 50, 0) 75%
    );
  mix-blend-mode: soft-light;
  filter: blur(0.5px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 55%,
    rgba(0, 0, 0, 0.6) 75%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 55%,
    rgba(0, 0, 0, 0.6) 75%,
    rgba(0, 0, 0, 0) 100%
  );
  will-change: transform, opacity;
  animation: canopy-flutter 11s ease-in-out infinite alternate;
}

/* Leaf flutter — smaller, faster, more jittery motion than the sky drifts,
   so the canopy reads as leaves reacting to gusts rather than slow drift. */
@keyframes canopy-flutter {
  0% {
    transform: translate3d(-1.8%, 0, 0) scale(1.02) rotate(-0.4deg);
    opacity: 0.85;
  }
  18% {
    transform: translate3d(1.2%, -0.4%, 0) scale(1.04) rotate(0.3deg);
    opacity: 1;
  }
  38% {
    transform: translate3d(-0.6%, 0.6%, 0) scale(1.01) rotate(-0.2deg);
    opacity: 0.7;
  }
  55% {
    transform: translate3d(2.2%, -0.2%, 0) scale(1.05) rotate(0.4deg);
    opacity: 1;
  }
  72% {
    transform: translate3d(-1.4%, 0.4%, 0) scale(1.03) rotate(-0.3deg);
    opacity: 0.8;
  }
  88% {
    transform: translate3d(1.6%, 0, 0) scale(1.06) rotate(0.2deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(-2%, -0.3%, 0) scale(1.02) rotate(-0.2deg);
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before {
    animation: none;
  }
}

/* Legibility scrim — a warm-dark vignette on the left copy block: (1) a very
   narrow (≈8% wide) left-edge linear wash, sized to the middle fifth of the
   viewport (20% height, top at 40%) so only that strip is deepened, plus
   (2) a soft radial aligned with the headline. A top fade mask thins the
   whole layer in the first ~20% of screen height, keeping the canopy bright. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 8%,
    rgba(0, 0, 0, 0.55) 16%,
    #000 24%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 8%,
    rgba(0, 0, 0, 0.55) 16%,
    #000 24%,
    #000 100%
  );
  /* Layer 1 (top in paint order): a slim strip on the far left, middle fifth
     of the viewport only (size 8% x 20%, top at 40%). */
  /* Layer 2: soft radial on the copy block. */
  background:
    linear-gradient(
      to right,
      rgba(42, 37, 32, 0.26) 0%,
      rgba(42, 37, 32, 0.12) 55%,
      rgba(42, 37, 32, 0) 100%
    )
      0% 40% / 8% 20% no-repeat,
    radial-gradient(
      ellipse 52% 44% at 25% 56%,
      rgba(42, 37, 32, 0.56) 0%,
      rgba(42, 37, 32, 0.4) 26%,
      rgba(42, 37, 32, 0.2) 50%,
      rgba(42, 37, 32, 0.06) 70%,
      rgba(42, 37, 32, 0) 85%
    );
}

/* Layer 1 — dappled morning sunlight behind the PNG's transparent sky cutout.
   Built in three layers so the light can breathe:
     .sky            — static morning wash (clean cool-warm base + small sun core)
     .sky::before    — large warm dapples that slowly drift & scale  (leaf gaps)
     .sky::after     — smaller speckles + cool olive-shadow pockets, different rhythm
   The two animated layers run on different, non-looping-feeling durations so the
   pattern never visibly repeats; it feels like a breeze moving through branches. */
.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    /* tight sun core — bright white-gold, 9:30 AM height */
    radial-gradient(
      circle at 74% 12%,
      rgba(255, 252, 242, 0.9) 0%,
      rgba(255, 248, 234, 0.45) 6%,
      rgba(255, 244, 226, 0) 20%
    ),
    /* outer halo — desaturated, barely tinted, reads as clear sky glow */
    radial-gradient(
      circle at 74% 12%,
      rgba(230, 222, 210, 0.22) 0%,
      rgba(230, 222, 210, 0) 55%
    ),
    /* 9:30 AM April wash — pale ivory at top, cool-warm parchment mid,
       soft sage-stone at base; much less amber saturation than golden hour */
    linear-gradient(
      180deg,
      #f8f5f0 0%,
      #ede8df 22%,
      #e2d9ca 48%,
      #d4c8b2 74%,
      #c8ba9e 100%
    );
}

/* Large warm dapples — main "leaf gap" light pools */
.sky::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 32% 22% at 20% 14%,
      rgba(235, 222, 200, 0.48) 0%,
      rgba(235, 222, 200, 0) 72%
    ),
    radial-gradient(
      ellipse 26% 20% at 48% 22%,
      rgba(242, 232, 214, 0.4) 0%,
      rgba(242, 232, 214, 0) 75%
    ),
    radial-gradient(
      ellipse 34% 24% at 88% 30%,
      rgba(222, 208, 182, 0.42) 0%,
      rgba(222, 208, 182, 0) 72%
    ),
    radial-gradient(
      ellipse 28% 22% at 12% 46%,
      rgba(232, 218, 195, 0.32) 0%,
      rgba(232, 218, 195, 0) 75%
    ),
    radial-gradient(
      ellipse 30% 24% at 62% 56%,
      rgba(228, 214, 190, 0.28) 0%,
      rgba(228, 214, 190, 0) 78%
    );
  mix-blend-mode: screen;
  filter: blur(2px);
  will-change: transform, opacity;
  animation: dapple-drift-a 18s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Smaller speckles + cool olive-shadow pockets */
.sky::after {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  background:
    /* bright speckles (leaf-gap flecks) */
    radial-gradient(
      circle at 32% 8%,
      rgba(255, 246, 220, 0.7) 0%,
      rgba(255, 246, 220, 0) 8%
    ),
    radial-gradient(
      circle at 58% 16%,
      rgba(255, 240, 210, 0.55) 0%,
      rgba(255, 240, 210, 0) 6%
    ),
    radial-gradient(
      circle at 80% 6%,
      rgba(255, 244, 216, 0.6) 0%,
      rgba(255, 244, 216, 0) 7%
    ),
    radial-gradient(
      circle at 14% 28%,
      rgba(255, 238, 204, 0.5) 0%,
      rgba(255, 238, 204, 0) 6%
    ),
    radial-gradient(
      circle at 44% 40%,
      rgba(255, 242, 210, 0.45) 0%,
      rgba(255, 242, 210, 0) 5%
    ),
    radial-gradient(
      circle at 70% 44%,
      rgba(255, 240, 206, 0.4) 0%,
      rgba(255, 240, 206, 0) 5%
    ),
    /* cool olive-shadow pockets (silvery green-gray, very subtle) */
    radial-gradient(
      ellipse 30% 20% at 6% 16%,
      rgba(168, 178, 150, 0.22) 0%,
      rgba(168, 178, 150, 0) 75%
    ),
    radial-gradient(
      ellipse 36% 22% at 38% 52%,
      rgba(152, 166, 138, 0.2) 0%,
      rgba(152, 166, 138, 0) 78%
    ),
    radial-gradient(
      ellipse 28% 20% at 82% 62%,
      rgba(160, 172, 144, 0.22) 0%,
      rgba(160, 172, 144, 0) 78%
    );
  mix-blend-mode: soft-light;
  filter: blur(1px);
  will-change: transform, opacity;
  animation: dapple-drift-b 26s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Breeze — two independent drifts so the compound pattern never feels looped.
   Noticeable travel (3–6%) with subtle scale + opacity swings so the dapples
   feel like they're genuinely moving through shifting branches. */
@keyframes dapple-drift-a {
  0% {
    transform: translate3d(-3.5%, -2%, 0) scale(1.02);
    opacity: 0.75;
  }
  30% {
    transform: translate3d(3%, 1.2%, 0) scale(1.08);
    opacity: 1;
  }
  55% {
    transform: translate3d(-1.5%, 3%, 0) scale(1.05);
    opacity: 0.85;
  }
  80% {
    transform: translate3d(4.5%, -1%, 0) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate3d(-2%, 2.4%, 0) scale(1.06);
    opacity: 0.9;
  }
}

@keyframes dapple-drift-b {
  0% {
    transform: translate3d(2.5%, 1.4%, 0) scale(1.04);
    opacity: 0.7;
  }
  35% {
    transform: translate3d(-4%, -1.2%, 0) scale(1.1);
    opacity: 1;
  }
  65% {
    transform: translate3d(2%, -3%, 0) scale(1.06);
    opacity: 0.8;
  }
  90% {
    transform: translate3d(-3%, 2.2%, 0) scale(1.12);
    opacity: 1;
  }
  100% {
    transform: translate3d(3.5%, 0.6%, 0) scale(1.05);
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sky::before,
  .sky::after {
    animation: none;
  }
}

/* Layer 2 — the PNG figure at natural aspect, full-viewport width.
   A soft alpha mask fades all four edges so the photo dissolves into the sky
   instead of ending on a hard rectangle. The top uses the deepest fade since
   the PNG's sky cutout is there; the bottom fades into the warm ground tone. */
.figure {
  position: relative;
  display: block;
  width: 100vw;
  height: auto;
  margin: 0;
  margin-top: 24px;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;

  /* Soft fade on the top of the photo — the upper portion dissolves into the
     sky gradient over a long falloff, so there's no visible horizon line where
     the image begins. Sides and bottom stay crisp. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 6%,
    rgba(0, 0, 0, 0.2) 14%,
    rgba(0, 0, 0, 0.5) 24%,
    rgba(0, 0, 0, 0.85) 34%,
    #000 42%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 6%,
    rgba(0, 0, 0, 0.2) 14%,
    rgba(0, 0, 0, 0.5) 24%,
    rgba(0, 0, 0, 0.85) 34%,
    #000 42%,
    #000 100%
  );
}

/* ---------- Sun ray through the canopy ----------
   A warm shaft of light that originates in the upper-right (aligned with
   the sun in the sky gradient) and angles down-left across the photo, as
   if it's slipping through a gap in the morning canopy. Rendered as two
   rotated, soft-edged vertical bands with screen blend so the light reads
   as volumetric rather than painted — it brightens what it passes over,
   fades to nothing against the bright sky. A secondary fainter ray adds
   the natural messiness of light streaming through leaves. Motion is a
   very slow opacity breathe + tiny rotation drift (canopy shifting). */
.glint {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

/* Three overlapping rays at fixed angles. Each breathes opacity independently
   on incommensurable rhythms (29s / 41s / 53s). When one dims, another is
   near its peak — the interplay reads as the light shifting without any
   actual physical movement. A very faint ±0.4° rotation is retained purely
   for organic quality, not as perceptible motion. */

/* Ray A — primary, warmest, widest fan */
.glint::before {
  content: "";
  position: absolute;
  top: -10%;
  left: calc(69% - 10.5vmin);
  width: 30vmin;
  height: 140%;
  transform-origin: 50% 0%;
  transform: rotate(18deg);
  clip-path: polygon(32% 0%, 68% 0%, 88% 100%, 12% 100%);
  background: linear-gradient(
    to right,
    rgba(255, 248, 220, 0) 0%,
    rgba(255, 242, 210, 0.14) 22%,
    rgba(255, 244, 214, 0.58) 44%,
    rgba(255, 252, 232, 0.75) 50%,
    rgba(255, 244, 214, 0.58) 56%,
    rgba(255, 242, 210, 0.14) 78%,
    rgba(255, 248, 220, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 8%,
    rgba(0, 0, 0, 0.15) 18%,
    rgba(0, 0, 0, 0.45) 28%,
    rgba(0, 0, 0, 0.78) 38%,
    #000 48%,
    #000 62%,
    rgba(0, 0, 0, 0.6) 78%,
    rgba(0, 0, 0, 0.15) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 8%,
    rgba(0, 0, 0, 0.15) 18%,
    rgba(0, 0, 0, 0.45) 28%,
    rgba(0, 0, 0, 0.78) 38%,
    #000 48%,
    #000 62%,
    rgba(0, 0, 0, 0.6) 78%,
    rgba(0, 0, 0, 0.15) 92%,
    transparent 100%
  );
  filter: blur(7px);
  will-change: opacity;
  animation: ray-fade-a 13s ease-in-out -3s infinite alternate;
}

/* Ray B — slightly steeper, narrower, offset right */
.glint::after {
  content: "";
  position: absolute;
  top: -8%;
  left: calc(55% - 8vmin);
  width: 22vmin;
  height: 130%;
  transform-origin: 50% 0%;
  transform: rotate(24deg);
  clip-path: polygon(34% 0%, 66% 0%, 82% 100%, 18% 100%);
  background: linear-gradient(
    to right,
    rgba(255, 248, 220, 0) 0%,
    rgba(255, 240, 206, 0.12) 32%,
    rgba(255, 250, 226, 0.52) 46%,
    rgba(255, 252, 230, 0.66) 50%,
    rgba(255, 250, 226, 0.52) 54%,
    rgba(255, 240, 206, 0.12) 68%,
    rgba(255, 248, 220, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 10%,
    rgba(0, 0, 0, 0.2) 20%,
    rgba(0, 0, 0, 0.55) 32%,
    rgba(0, 0, 0, 0.85) 42%,
    #000 52%,
    #000 65%,
    rgba(0, 0, 0, 0.5) 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 10%,
    rgba(0, 0, 0, 0.2) 20%,
    rgba(0, 0, 0, 0.55) 32%,
    rgba(0, 0, 0, 0.85) 42%,
    #000 52%,
    #000 65%,
    rgba(0, 0, 0, 0.5) 82%,
    transparent 100%
  );
  filter: blur(6px);
  will-change: opacity;
  animation: ray-fade-b 18s ease-in-out -12s infinite alternate;
}

/* Ray C — between A and B in angle, softest, slightly different start offset */
.glint-c {
  display: block;
  position: absolute;
  top: -12%;
  left: calc(62% - 7vmin);
  width: 18vmin;
  height: 145%;
  transform-origin: 50% 0%;
  transform: rotate(21deg);
  clip-path: polygon(35% 0%, 65% 0%, 80% 100%, 20% 100%);
  background: linear-gradient(
    to right,
    rgba(255, 248, 220, 0) 0%,
    rgba(255, 244, 212, 0.10) 30%,
    rgba(255, 248, 220, 0.42) 46%,
    rgba(255, 252, 230, 0.55) 50%,
    rgba(255, 248, 220, 0.42) 54%,
    rgba(255, 244, 212, 0.10) 70%,
    rgba(255, 248, 220, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.06) 12%,
    rgba(0, 0, 0, 0.25) 24%,
    rgba(0, 0, 0, 0.6) 36%,
    #000 46%,
    #000 68%,
    rgba(0, 0, 0, 0.45) 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.06) 12%,
    rgba(0, 0, 0, 0.25) 24%,
    rgba(0, 0, 0, 0.6) 36%,
    #000 46%,
    #000 68%,
    rgba(0, 0, 0, 0.45) 84%,
    transparent 100%
  );
  filter: blur(8px);
  will-change: opacity;
  animation: ray-fade-c 22s ease-in-out -5s infinite alternate;
}

/* Dust-mote shimmer — the rays are stationary; only opacity fluctuates.
   Many irregular keyframes at slightly different values so the variation
   feels organic (like particles drifting through the beam) rather than a
   mechanical sine-wave breathe. The two rays use incommensurable durations
   and completely different patterns so they never pulse in unison. */
/* Five independent gentle fades — incommensurable durations (29/41/53/37/61s)
   mean the combined pattern never visibly repeats. Each ray starts at a
   different opacity so the ensemble is always in motion without any single
   beat. The overlapping beams at five slightly different angles produce
   the compound shifting of morning light through a canopy. */
/* Each animation is a clean high→low→high wave with clear turning points.
   Delays are set so the five rays are spread across different cycle phases
   at page load — some cresting, some in the trough, some rising/falling —
   ensuring they always counterbalance each other. */
@keyframes ray-fade-a {
  0%   { opacity: 0.63; }
  30%  { opacity: 1;    }
  62%  { opacity: 0.63; }
  85%  { opacity: 0.98; }
  100% { opacity: 0.65; }
}

@keyframes ray-fade-b {
  0%   { opacity: 0.97; }
  26%  { opacity: 0.63; }
  55%  { opacity: 1;    }
  80%  { opacity: 0.63; }
  100% { opacity: 0.94; }
}

@keyframes ray-fade-c {
  0%   { opacity: 0.65; }
  24%  { opacity: 1;    }
  52%  { opacity: 0.63; }
  74%  { opacity: 0.98; }
  100% { opacity: 0.65; }
}

@keyframes ray-fade-d {
  0%   { opacity: 0.82; }
  22%  { opacity: 0.63; }
  48%  { opacity: 0.98; }
  70%  { opacity: 0.63; }
  90%  { opacity: 1;    }
  100% { opacity: 0.76; }
}

@keyframes ray-fade-e {
  0%   { opacity: 0.63; }
  28%  { opacity: 0.98; }
  54%  { opacity: 0.63; }
  78%  { opacity: 1;    }
  100% { opacity: 0.65; }
}

/* Ray D — shallower angle than A, sits just to its left */
.glint-d {
  display: block;
  position: absolute;
  top: -10%;
  left: calc(64% - 8vmin);
  width: 20vmin;
  height: 138%;
  transform-origin: 50% 0%;
  transform: rotate(15deg);
  clip-path: polygon(33% 0%, 67% 0%, 83% 100%, 17% 100%);
  background: linear-gradient(
    to right,
    rgba(255, 248, 220, 0) 0%,
    rgba(255, 242, 210, 0.12) 30%,
    rgba(255, 248, 220, 0.46) 46%,
    rgba(255, 252, 230, 0.61) 50%,
    rgba(255, 248, 220, 0.46) 54%,
    rgba(255, 242, 210, 0.12) 70%,
    rgba(255, 248, 220, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 9%,
    rgba(0, 0, 0, 0.22) 20%,
    rgba(0, 0, 0, 0.6) 34%,
    #000 46%,
    #000 64%,
    rgba(0, 0, 0, 0.55) 80%,
    rgba(0, 0, 0, 0.12) 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 9%,
    rgba(0, 0, 0, 0.22) 20%,
    rgba(0, 0, 0, 0.6) 34%,
    #000 46%,
    #000 64%,
    rgba(0, 0, 0, 0.55) 80%,
    rgba(0, 0, 0, 0.12) 93%,
    transparent 100%
  );
  filter: blur(7px);
  will-change: opacity;
  animation: ray-fade-d 16s ease-in-out -11s infinite alternate;
}

/* Ray E — steeper than B, widest fan, sits slightly further right */
.glint-e {
  display: block;
  position: absolute;
  top: -9%;
  left: calc(72% - 11vmin);
  width: 26vmin;
  height: 132%;
  transform-origin: 50% 0%;
  transform: rotate(27deg);
  clip-path: polygon(31% 0%, 69% 0%, 86% 100%, 14% 100%);
  background: linear-gradient(
    to right,
    rgba(255, 248, 220, 0) 0%,
    rgba(255, 240, 206, 0.09) 26%,
    rgba(255, 246, 218, 0.44) 44%,
    rgba(255, 250, 228, 0.59) 50%,
    rgba(255, 246, 218, 0.44) 56%,
    rgba(255, 240, 206, 0.09) 74%,
    rgba(255, 248, 220, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 11%,
    rgba(0, 0, 0, 0.18) 22%,
    rgba(0, 0, 0, 0.52) 35%,
    rgba(0, 0, 0, 0.88) 46%,
    #000 55%,
    #000 70%,
    rgba(0, 0, 0, 0.42) 85%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 11%,
    rgba(0, 0, 0, 0.18) 22%,
    rgba(0, 0, 0, 0.52) 35%,
    rgba(0, 0, 0, 0.88) 46%,
    #000 55%,
    #000 70%,
    rgba(0, 0, 0, 0.42) 85%,
    transparent 100%
  );
  filter: blur(9px);
  will-change: opacity;
  animation: ray-fade-e 28s ease-in-out -21s infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .glint::before,
  .glint::after {
    animation: none;
  }
  .glint::before { opacity: 0.85; }
  .glint::after  { opacity: 0.68; }
  .glint-c       { opacity: 0.75; }
  .glint-d       { opacity: 0.72; }
  .glint-e       { opacity: 0.65; }
}

/* ---------- Top bar (layer 3) ---------- */
.bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 112px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  background: transparent;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  width: clamp(132px, 12vw, 180px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 10px rgba(42, 37, 32, 0.16));
}

.nav {
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--soft-ink);
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav a {
  color: var(--soft-ink);
  transition: color 200ms ease;
}

.nav a:hover {
  color: var(--ink);
}

.nav .dot {
  color: var(--soft-ink);
  opacity: 0.55;
}

/* ---------- Copy block (layer 4) ----------
   Cream `--bone` type over the warm morning sky, sitting on top of the hero
   scrim. Multi-layer text-shadows provide crisp edges, mid-range lift, and a
   wide deep ambient halo so the type is bulletproof across the dappled bg. */
.copy {
  position: absolute;
  left: 6vw;
  top: 40vh;
  max-width: 560px;
  z-index: 5;
  color: var(--bone);
  text-shadow:
    0 0 1px rgba(42, 37, 32, 0.85),
    0 1px 3px rgba(42, 37, 32, 0.8),
    0 3px 14px rgba(42, 37, 32, 0.6),
    0 6px 28px rgba(42, 37, 32, 0.4),
    0 0 60px rgba(42, 37, 32, 0.3);
}

.headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(52px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--bone);
  margin: 0 0 28px;
}

.subhead {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--bone);
  max-width: 460px;
  margin: 0 0 44px;
}

.cta {
  display: inline-block;
  font-family: var(--font-utility);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bone);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(244, 233, 216, 0.45);
  transition: border-color 200ms ease;
}

.cta:hover,
.cta:focus-visible {
  border-bottom-color: var(--bone);
  outline: none;
}

/* ---------- Section 2 ---------- */
.grounded {
  position: relative;
  display: grid;
  overflow: hidden;
  padding: 0;
  background: var(--grounded-paper);
}

.grounded-art {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: center;
  width: min(100%, 1344px);
  margin: 0 auto;
  background: var(--grounded-paper);
}

.grounded-side {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(24px, 7vw, 112px);
  background: transparent;
}

.grounded-photo {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.grounded-copy {
  position: relative;
  z-index: 1;
  width: min(460px, calc(100vw - 48px));
  margin: 0;
  padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 28px);
  color: var(--ink);
  background: rgba(244, 233, 216, 0.94);
  border: 1px solid rgba(42, 37, 32, 0.1);
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(42, 37, 32, 0.06),
    0 10px 36px rgba(42, 37, 32, 0.12);
}

.grounded-copy .section-headline {
  color: var(--ink);
  font-size: clamp(32px, 3.6vw, 52px);
  margin: 0 0 18px;
}

.grounded-copy .section-subtext {
  color: var(--soft-ink);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.48;
  margin: 0 0 clamp(14px, 1.8vw, 20px);
}

.grounded-cta {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.35;
}

.grounded-cta a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(42, 37, 32, 0.35);
  padding-bottom: 2px;
  transition: border-color 200ms ease, color 200ms ease;
}

.grounded-cta a:hover,
.grounded-cta a:focus-visible {
  color: var(--soft-ink);
  border-bottom-color: var(--ink);
  outline: none;
}

.section-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0 0 28px;
}

.section-subtext {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 400;
  line-height: 1.52;
  margin: 0;
}

/* ---------- Section 3 — Glasshouse range ---------- */
.glasshouse-range {
  background: var(--bone);
  padding: clamp(72px, 10vw, 120px) clamp(24px, 5vw, 48px) clamp(96px, 12vw, 140px);
}

.range-inner {
  max-width: 1320px;
  margin: 0 auto;
}

.range-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

/* No height: 100% — in a grid row, that ties every card to the tallest card’s height when one
   <details> opens, so the whole row grows and the other columns look “expanded” too. */
.range-card {
  display: flex;
  flex-direction: column;
  align-self: start;
  width: 100%;
  background: rgba(255, 252, 248, 0.65);
  border: 1px solid rgba(42, 37, 32, 0.08);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(42, 37, 32, 0.04);
}

.range-card-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--straw);
}

.range-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.range-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 26px) clamp(24px, 3vw, 32px);
}

.range-spec {
  font-family: var(--font-utility);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--soft-ink);
  margin: 0 0 12px;
  line-height: 1.5;
}

.range-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.85vw, 28px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.15;
}

.range-tagline {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 500;
  font-style: italic;
  color: var(--soft-ink);
  margin: 0 0 16px;
  line-height: 1.35;
}

.range-prose {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.range-more {
  margin-top: auto;
  border-top: 1px solid rgba(42, 37, 32, 0.1);
}

.range-more-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 4px;
  font-family: var(--font-utility);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft-ink);
  cursor: pointer;
  list-style: none;
  transition: color 180ms ease;
}

.range-more-summary::-webkit-details-marker {
  display: none;
}

.range-more-summary::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  margin-top: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform 200ms ease;
  opacity: 0.75;
}

.range-more[open] .range-more-summary::after {
  transform: rotate(-135deg);
  margin-top: 6px;
}

.range-more-summary:hover,
.range-more-summary:focus-visible {
  color: var(--ink);
  outline: none;
}

.range-more-summary:focus-visible {
  box-shadow: 0 0 0 2px var(--bone), 0 0 0 4px var(--ink);
  border-radius: 2px;
}

.range-more-label {
  pointer-events: none;
}

.range-details {
  margin: 0;
  padding: 16px 0 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.range-detail {
  margin: 0;
}

.range-detail dt {
  font-family: var(--font-utility);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soft-ink);
  margin: 0 0 6px;
}

.range-detail dd {
  font-family: var(--font-display);
  font-size: clamp(13px, 0.98vw, 15px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* ---------- Section 4 — Process ---------- */
.process {
  background: color-mix(in srgb, var(--bone) 82%, var(--straw));
  padding: clamp(72px, 10vw, 120px) clamp(24px, 5vw, 48px) clamp(96px, 12vw, 140px);
}

@supports not (background: color-mix(in srgb, white, black)) {
  .process {
    background: var(--bone);
  }
}

.process-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.process-intro {
  max-width: 720px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  text-align: center;
}

.process-headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 clamp(20px, 2.5vw, 28px);
}

.process-lead {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--soft-ink);
  margin: 0;
}

.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 3.5vw, 40px) clamp(24px, 4vw, 48px);
  counter-reset: process-step;
}

.process-step {
  margin: 0;
  padding: clamp(22px, 2.5vw, 28px) clamp(22px, 2.5vw, 28px) clamp(26px, 3vw, 32px);
  background: rgba(255, 252, 248, 0.72);
  border: 1px solid rgba(42, 37, 32, 0.08);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(42, 37, 32, 0.04);
  counter-increment: process-step;
  position: relative;
}

.process-step::before {
  content: counter(process-step);
  font-family: var(--font-display);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 600;
  color: var(--amber);
  display: block;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.process-step-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.65vw, 24px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.2;
}

.process-step-body {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* ---------- Section 5 — Collaboration ---------- */
.collab {
  background: var(--grounded-paper);
  padding: clamp(72px, 10vw, 120px) clamp(24px, 5vw, 48px) clamp(96px, 12vw, 140px);
}

.collab-inner {
  max-width: 900px;
  margin: 0 auto;
}

.collab-headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 clamp(40px, 5vw, 56px);
  text-wrap: balance;
}

.collab-pillars {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 44px);
}

.collab-pillar {
  margin: 0;
  padding: 0;
  border: none;
  border-left: 3px solid var(--amber);
  padding-left: clamp(20px, 2.5vw, 28px);
}

.collab-pillar--together {
  border-left-color: var(--soft-ink);
}

.collab-pillar-label {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.75vw, 26px);
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.2;
}

.collab-pillar-body {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 1.58;
  color: var(--soft-ink);
  margin: 0;
}

/* ---------- Section 6 — Inquiry ---------- */
.inquiry {
  background: var(--bone);
  padding: clamp(72px, 10vw, 120px) clamp(24px, 5vw, 48px) clamp(96px, 12vw, 140px);
}

.inquiry-inner {
  max-width: 42rem;
  margin: 0 auto;
}

.inquiry-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 clamp(28px, 3.5vw, 40px);
  text-wrap: balance;
}

.inquiry-form {
  margin: 0;
}

.inquiry-letter {
  margin: 0 0 clamp(40px, 5vw, 56px);
}

.inquiry-letter-panel {
  padding: clamp(22px, 2.8vw, 32px) clamp(22px, 2.8vw, 28px);
  background: rgba(255, 252, 248, 0.85);
  border: 1px solid rgba(42, 37, 32, 0.1);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.inquiry-letter-panel:hover {
  border-color: rgba(42, 37, 32, 0.14);
}

.inquiry-letter-panel:focus-within {
  border-color: rgba(42, 37, 32, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 3px rgba(232, 184, 122, 0.25);
}

.inquiry-panel-lede {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.85vw, 26px);
  font-weight: 600;
  font-style: italic;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 10px;
}

.inquiry-panel-sub {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: var(--soft-ink);
  margin: 0 0 clamp(16px, 2vw, 22px);
}

.inquiry-body {
  display: block;
  width: 100%;
  min-height: min(22rem, 52vh);
  margin: 0;
  padding: clamp(14px, 1.5vw, 18px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 0;
  border-top: 1px solid rgba(42, 37, 32, 0.08);
  box-shadow: none;
  resize: vertical;
  transition: color 180ms ease;
}

.inquiry-body::placeholder {
  color: var(--soft-ink);
  opacity: 0.72;
  font-style: italic;
}

.inquiry-body:focus {
  outline: none;
}

.inquiry-signature {
  margin: 0 0 clamp(32px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 24px);
}

.inquiry-sig-field {
  margin: 0;
}

.inquiry-sig-label {
  display: block;
  font-family: var(--font-utility);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft-ink);
  margin: 0 0 8px;
  opacity: 0.88;
}

.inquiry-sig-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(42, 37, 32, 0.18);
  border-radius: 0;
  transition: border-color 180ms ease;
}

.inquiry-sig-input::placeholder {
  color: var(--soft-ink);
  opacity: 0.45;
}

.inquiry-sig-input:hover {
  border-bottom-color: rgba(42, 37, 32, 0.28);
}

.inquiry-sig-input:focus {
  outline: none;
  border-bottom-color: var(--amber);
}

.inquiry-send {
  display: inline-block;
  margin: 0;
  padding: 0 0 8px;
  font-family: var(--font-utility);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(42, 37, 32, 0.35);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}

.inquiry-send:hover,
.inquiry-send:focus-visible {
  color: var(--soft-ink);
  border-bottom-color: var(--ink);
  outline: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .bar {
    height: 80px;
    padding: 0 20px;
  }

  .brand-mark {
    width: 128px;
  }

  .nav a,
  .nav .dot {
    display: none;
  }

  .nav a[href="#inquire"] {
    display: inline;
  }

  .figure {
    margin-top: 20px;
  }

  .copy {
    left: 20px;
    right: 20px;
    top: 30vh;
    max-width: none;
  }

  .headline {
    font-size: clamp(42px, 9vw, 58px);
  }

  .subhead {
    font-size: 18px;
  }

  .grounded {
    display: block;
  }

  .grounded-art {
    width: 100%;
    max-width: min(1008px, 96vw);
    margin: 0 auto;
  }

  .grounded-side {
    position: relative;
    justify-content: center;
    padding: 0 20px 56px;
    background: var(--grounded-paper);
  }

  .grounded-copy {
    width: 100%;
    max-width: 400px;
    margin: -40px auto 0;
    transform: none;
    padding: clamp(18px, 3.5vw, 24px);
  }

  .grounded-copy .section-headline {
    font-size: clamp(28px, 7vw, 40px);
    margin-bottom: 14px;
  }

  .grounded-copy .section-subtext {
    font-size: 15px;
    line-height: 1.45;
  }

  .section-subtext {
    font-size: 17px;
  }

  .glasshouse-range {
    padding: 56px 20px 72px;
  }

  .range-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .range-card-visual {
    aspect-ratio: 16 / 10;
  }

  .process {
    padding: 56px 20px 72px;
  }

  .process-intro {
    margin-bottom: 40px;
    text-align: left;
  }

  .process-steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .collab {
    padding: 56px 20px 72px;
  }

  .collab-headline {
    margin-bottom: 32px;
  }

  .collab-pillars {
    gap: 28px;
  }

  .inquiry {
    padding: 56px 20px 80px;
  }

  .inquiry-title {
    font-size: clamp(22px, 5.5vw, 28px);
    margin-bottom: 24px;
  }

  .inquiry-panel-lede {
    font-size: clamp(18px, 4.8vw, 22px);
  }

  .inquiry-body {
    min-height: 16rem;
  }
}