/* ─────────────────────────────────────────────────────────────
   MAGNIFICA LAND — redesign
   Anthropic Sans / Serif / Mono · day into night
   Atmosphere over decoration. The emotion is recognition.
   ───────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  /* ── brand palette ─────────────────────────────────────────── */
  --bark-sand: #a8916e;
  --oak: #8b6340;
  --charred-wood: #2c1a08;
  --pine-shadow: #243818;
  --hillside-green: #8db86a;
  --morning-meadow: #d4e8c2;
  --forest: #557a3c;
  --warm-candlelight: #f2d4a0;
  --golden-hour: #d4903a;
  --deep-night-sky: #1a3650;
  --hazy-hills: #6b9cc0;

  /* ── derived warm neutrals (DAY) ───────────────────────────── */
  --linen: #f4eddf;
  --linen-soft: #efe6d4;
  --plaster: #eae0cb;
  --sand-100: #e3d6bc;
  --sand-200: #d8c8a8;
  --sand-300: #cdba94;

  /* warm inks */
  --ink: #2c1a08;
  --ink-soft: #5a3e22;
  --ink-faint: #7a5c3c;
  --timber: #6b4a2a;
  --walnut: #3a2410;

  /* ── night darks ───────────────────────────────────────────── */
  --night-forest: #0e1410; /* warm-dark (night-rest) */
  --night-forest-2: #0a0f0a;
  --night-deep: #07100c;
  --blue-1: #0a1a2a; /* blue hour only */
  --blue-2: #102a42;
  --blue-deep: #06121e;

  /* ── type ──────────────────────────────────────────────────── */
  --sans:
    'Anthropic Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    sans-serif;
  --serif:
    'Anthropic Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --mono: 'Anthropic Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1320px;
}

body {
  font-family: var(--sans);
  background: var(--linen);
  color: var(--ink);
  overflow-x: hidden;
  font-feature-settings: 'kern', 'liga';
  font-weight: 400;
  letter-spacing: -0.006em;
}

/* film grain over the whole page — quiet atmosphere */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ─── shared rhythm ─────────────────────────────────────────── */
.section {
  padding: clamp(7rem, 13vh, 11rem) clamp(1.4rem, 5vw, 4rem);
  position: relative;
}

.section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--mono);
  font-size: clamp(0.66rem, 0.8vw, 0.76rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--forest);
}
.eyebrow::before {
  content: '';
  width: 1.7em;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.section-title {
  font-family: var(--sans);
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--ink);
  margin-top: 1.4rem;
}
.section-title em {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  color: var(--golden-hour);
}

.section-body {
  font-size: clamp(1.05rem, 1.2vw, 1.12rem);
  font-weight: 300;
  line-height: 1.78;
  max-width: 44ch;
  color: var(--ink-soft);
  letter-spacing: -0.07px;
}

.divider-rule {
  width: 54px;
  height: 2px;
  background: currentColor;
  opacity: 0.4;
  margin: 1.8rem 0 1.6rem;
  border-radius: 2px;
}

/* reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
.reveal.d1 {
  transition-delay: 0.1s;
}
.reveal.d2 {
  transition-delay: 0.2s;
}
.reveal.d3 {
  transition-delay: 0.32s;
}
.reveal.d4 {
  transition-delay: 0.44s;
}

/* ─── nav ───────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem clamp(1.4rem, 4vw, 2.6rem);
  pointer-events: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition:
    background 0.6s ease,
    border-color 0.6s ease,
    backdrop-filter 0.6s ease,
    -webkit-backdrop-filter 0.6s ease;
}
nav.scrolled {
  background: rgba(251, 243, 228, 0.12);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
html[data-phase='hero'] nav.scrolled,
html[data-phase='dusk'] nav.scrolled,
html[data-phase='night'] nav.scrolled {
  background: rgba(8, 5, 3, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.04);
}
nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: -1;
}
html[data-phase='hero'] nav::before,
html[data-phase='dusk'] nav::before,
html[data-phase='night'] nav::before {
  opacity: 1;
}

.nav-brand {
  pointer-events: all;
  text-decoration: none;
  color: var(--warm-candlelight);
  display: flex;
  align-items: center;
  gap: 0.7em;
  transition: color 0.6s ease;
}
.nav-brand .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--golden-hour);
  box-shadow: 0 0 14px 1px var(--golden-hour);
  transition:
    background 0.6s ease,
    box-shadow 0.6s ease;
}
.nav-right {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.nav-lang {
  background: none;
  border: none;
  color: inherit;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5em;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(242, 212, 160, 0.55);
  transition: color 0.6s ease;
}
.nav-lang .sep {
  opacity: 0.45;
}
.nav-lang .opt {
  transition:
    opacity 0.3s ease,
    color 0.3s ease;
  opacity: 0.45;
}
.nav-lang .opt.on {
  opacity: 1;
  color: var(--warm-candlelight);
}

/* phase-driven nav color */
html[data-phase='hero'] .nav-brand {
  color: #fbf3e4;
}
html[data-phase='hero'] .nav-lang {
  color: rgba(251, 243, 228, 0.55);
}
html[data-phase='hero'] .nav-lang .opt.on {
  color: #fbf3e4;
}

html[data-phase='day'] .nav-brand {
  color: var(--charred-wood);
}
html[data-phase='day'] .nav-brand .dot {
  background: var(--golden-hour);
  box-shadow: 0 0 0 0 transparent;
}
html[data-phase='day'] .nav-lang {
  color: var(--ink-soft);
}
html[data-phase='day'] .nav-lang .opt.on {
  color: var(--charred-wood);
}

html[data-phase='dusk'] .nav-brand {
  color: #cfe0ee;
}
html[data-phase='dusk'] .nav-brand .dot {
  background: var(--hazy-hills);
  box-shadow: 0 0 14px var(--hazy-hills);
}
html[data-phase='dusk'] .nav-lang {
  color: rgba(167, 182, 199, 0.6);
}
html[data-phase='dusk'] .nav-lang .opt.on {
  color: #cfe0ee;
}

html[data-phase='night'] .nav-brand {
  color: var(--warm-candlelight);
}
html[data-phase='night'] .nav-brand .dot {
  background: var(--golden-hour);
  box-shadow: 0 0 16px var(--golden-hour);
}
html[data-phase='night'] .nav-lang {
  color: rgba(242, 212, 160, 0.5);
}
html[data-phase='night'] .nav-lang .opt.on {
  color: var(--warm-candlelight);
}

/* ─── HERO ──────────────────────────────────────────────────── */
/*
  !! DO NOT MODIFY — PROTECTED BLOCK !!
  Hero slider images are set here via CSS custom properties.
  Do not remove, rename, restructure, or move these vars.
  Do not add SVG placeholders or change asset paths.
  All img src attributes in the HTML are final — do not touch them.
*/
#hero {
  --hero-img-1: url('assets/magnifica-hero-1.jpeg');
  --hero-img-2: url('assets/magnifica-hero-2.jpeg');
  --hero-img-3: url('assets/magnifica-hero-3.jpeg');
}
/* END PROTECTED BLOCK */

#hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fbf3e4;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      ellipse 92% 58% at 50% 96%,
      rgba(212, 144, 58, 0.34) 0%,
      transparent 64%
    ),
    radial-gradient(
      ellipse 70% 42% at 50% 82%,
      rgba(242, 212, 160, 0.2) 0%,
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #0c100e 0%,
      #11150f 26%,
      #1a1e16 52%,
      #2e281e 74%,
      #3a2a1a 90%,
      #2a1e12 100%
    );
}
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation: heroFade 32s ease-in-out infinite;
  transform-origin: center center;
  will-change: opacity, transform;
}
.hero-slide:nth-child(1) {
  background-image: var(--hero-img-1, none);
  animation-delay: 0s;
}
.hero-slide:nth-child(2) {
  background-image: var(--hero-img-2, none);
  animation-delay: 8s;
}
.hero-slide:nth-child(3) {
  background-image: var(--hero-img-3, none);
  animation-delay: 16s;
}
.hero-slide:nth-child(4) {
  background-image: var(--hero-img-4, none);
  animation-delay: 24s;
}
@keyframes heroFade {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }
  12% {
    opacity: 1;
    transform: scale(1.05);
  }
  33.33% {
    opacity: 1;
    transform: scale(1.09);
  }
  48% {
    opacity: 0;
    transform: scale(1.1);
  }
  48.1% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 80% 70% at 50% 46%,
      rgba(0, 0, 0, 0.28) 0%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.04) 38%,
      rgba(0, 0, 0, 0.46) 100%
    );
}
.hero-stars {
  position: absolute;
  inset: 0 0 30% 0;
  pointer-events: none;
}
.hero-stars .s {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: tw var(--d, 4s) var(--del, 0s) ease-in-out infinite;
}
@keyframes tw {
  0%,
  100% {
    opacity: var(--lo, 0.15);
  }
  50% {
    opacity: var(--hi, 0.6);
  }
}

.hero-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-scene svg {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-mist {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(212, 144, 58, 0.07) 42%,
    rgba(42, 30, 18, 0.5) 100%
  );
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: 8rem 1.6rem;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-eyebrow {
  font-family: var(--mono);
  color: rgba(242, 212, 160, 0.82);
  margin-bottom: 2.4rem;
  letter-spacing: 0.4em;
  font-size: clamp(0.66rem, 0.85vw, 0.78rem);
  text-transform: uppercase;
  opacity: 0;
  animation: fadeUp 1.4s 0.3s ease forwards;
}
.hero-eyebrow::before {
  display: none;
}
.hero-title {
  font-family: Georgia, serif;
  font-size: clamp(3.3rem, 12vw, 10.5rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: #fcf5e7;
  text-shadow: 0 4px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  animation: fadeUp 1.6s 0.55s ease forwards;
}
.hero-title span {
  font-size: 0.86em;
  display: block;
  opacity: 0.89;
}
.hero-title em {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0em;
  color: var(--warm-candlelight);
}
.hero-sub {
  margin-top: 2.4rem;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  font-weight: 300;
  line-height: 1.72;
  color: rgba(252, 245, 231, 0.82);
  max-width: 40ch;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: fadeUp 1.6s 0.85s ease forwards;
}
.hero-domain {
  margin-top: 2.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: rgba(252, 245, 231, 0.5);
  text-transform: lowercase;
  opacity: 0;
  animation: fadeUp 1.6s 1.05s ease forwards;
}

.hero-scroll {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 3;
  opacity: 0;
  animation: fadeUp 1.6s 1.6s ease forwards;
  text-align: center;
}
.hero-scroll .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hillside-green);
  box-shadow: 0 0 16px rgba(141, 184, 106, 0.7);
  animation: pulseDot 2.4s ease-in-out infinite;
}
.hero-scroll .line {
  width: 1px;
  height: 56px;
  background: linear-gradient(
    180deg,
    rgba(141, 184, 106, 0.55) 0%,
    rgba(242, 212, 160, 0.25) 60%,
    transparent 100%
  );
}
.hero-scroll .label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242, 212, 160, 0.62);
  white-space: nowrap;
}
@keyframes pulseDot {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── HERO QUOTE · the breath ───────────────────────────────── */
#hero-quote {
  background:
    radial-gradient(
      ellipse 70% 90% at 50% 50%,
      rgba(212, 144, 58, 0.07) 0%,
      transparent 70%
    ),
    var(--linen);
  padding: clamp(5rem, 10vh, 8rem) 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.breath-wave {
  width: min(220px, 40vw);
  height: 16px;
  display: block;
  color: var(--bark-sand);
  opacity: 0.6;
  position: relative;
  z-index: 1;
}
.breath-wave svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.breath {
  position: relative;
  z-index: 1;
  max-width: 880px;
  font-family: var(--serif);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--oak);
  text-wrap: balance;
  margin: 2.4rem 0;
}
.breath em {
  font-style: normal;
  color: var(--golden-hour);
}

/* ─── WOOD CROSS-SECTION (section dividers) ─────────────────── */
.wc-wrap {
  display: flex;
  justify-content: center;
  padding: 1rem 0 3.4rem;
}

.wc {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  isolation: isolate;
  /* growth-ring grain + warm heartwood body */
  background:
    repeating-radial-gradient(
      circle at 45% 42%,
      rgba(44, 26, 8, 0.4) 0 1px,
      rgba(44, 26, 8, 0) 1px 3.5px,
      rgba(44, 26, 8, 0.2) 3.5px 4.5px,
      rgba(44, 26, 8, 0) 4.5px 7px
    ),
    radial-gradient(
      circle at 45% 42%,
      #9a6a3d 0%,
      #8b6340 30%,
      #74502c 58%,
      #5e4123 82%,
      #4a3219 100%
    );
  box-shadow:
    inset 0 0 0 2.5px rgba(44, 26, 8, 0.6),
    inset 0 2px 7px rgba(0, 0, 0, 0.45),
    inset 0 -2px 6px rgba(255, 224, 180, 0.06),
    0 8px 22px rgba(0, 0, 0, 0.3);
}
/* breathing halo */
.wc::before {
  content: '';
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--wc-glow, rgba(212, 144, 58, 0.3)) 0%,
    transparent 62%
  );
  z-index: -1;
  pointer-events: none;
  animation: wcHalo 5.5s ease-in-out infinite;
}
@keyframes wcHalo {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}
.wc .core {
  position: relative;
  z-index: 3;
  border-radius: 50%;
  box-shadow:
    inset 0 0 4px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(44, 26, 8, 0.45);
}
.wc .ring {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
  .wc.pulse .ring {
    animation: ring var(--dur, 3s) var(--delay, 0s) ease-in-out infinite;
  }
}
@keyframes ring {
  0%,
  100% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

/* phase-scoped wood tints */
#day-trail .wc {
  --wc-glow: rgba(212, 144, 58, 0.4);
}
#blue-hour .wc {
  --wc-glow: rgba(107, 156, 192, 0.42);
  background:
    repeating-radial-gradient(
      circle at 45% 42%,
      rgba(6, 18, 30, 0.5) 0 1px,
      rgba(6, 18, 30, 0) 1px 3.5px,
      rgba(6, 18, 30, 0.26) 3.5px 4.5px,
      rgba(6, 18, 30, 0) 4.5px 7px
    ),
    radial-gradient(
      circle at 45% 42%,
      #5e6f7e 0%,
      #4a5c6b 32%,
      #384a58 60%,
      #283844 84%,
      #1a2630 100%
    );
  box-shadow:
    inset 0 0 0 2.5px rgba(6, 18, 30, 0.65),
    inset 0 2px 7px rgba(0, 0, 0, 0.5),
    inset 0 -2px 6px rgba(167, 182, 199, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.45);
}
#night-rest .wc,
footer .wc {
  --wc-glow: rgba(242, 212, 160, 0.34);
}

/* ─── DAY · THE LAND ────────────────────────────────────────── */
#day-land {
  background:
    radial-gradient(
      ellipse 90% 60% at 80% 0%,
      rgba(242, 212, 160, 0.28) 0%,
      transparent 55%
    ),
    linear-gradient(180deg, var(--linen-soft) 0%, var(--plaster) 100%);
  color: var(--ink);
}
#day-land .eyebrow {
  color: var(--forest);
}
#day-land .section-body {
  color: var(--ink-soft);
  max-width: none;
}

.land-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-auto-rows: auto;
  gap: 3rem 5rem;
  align-items: start;
  margin-top: 3rem;
}
.land-img-stack {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 260px 210px;
  gap: 16px;
}
.ph {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #2a1f15;
  isolation: isolate;
  box-shadow:
    0 18px 40px rgba(44, 26, 8, 0.18),
    inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.ph .caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 247, 232, 0.62);
  font-family: var(--mono);
  z-index: 4;
}
.ph .num {
  position: absolute;
  right: 16px;
  top: 14px;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: rgba(255, 247, 232, 0.5);
  font-family: var(--mono);
  z-index: 4;
}
.ph svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* real photo — drop a file at the img's src path and it fills the slot */
.ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.ph-img.is-loaded {
  opacity: 1;
}
.ph-img.is-missing {
  display: none;
}

/* placeholder shown until the photo is imported — intentional, not a broken icon */
.ph::before,
.valley-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(242, 212, 160, 0.05) 0 2px,
    transparent 2px 12px
  );
}
.ph-file {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: rgba(242, 212, 160, 0.42);
  pointer-events: none;
}
.ph-file::before {
  content: '⤓ ';
  letter-spacing: 0;
}

.ph .vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.5),
    inset 0 -44px 80px rgba(0, 0, 0, 0.42);
}
.land-img-stack .ph:nth-child(1) {
  grid-row: span 2;
}

.land-text {
  padding-top: 0.4rem;
}
.land-text .section-body {
  margin-top: 1.4rem;
}

.land-pullquote {
  margin: 0 0 2.4rem;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.7vw, 2.4rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--walnut);
  text-wrap: balance;
}
.land-pullquote em {
  color: var(--golden-hour);
  font-style: normal;
}
.land-pullquote .swash {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 3.4rem;
  line-height: 0.2;
  color: var(--bark-sand);
  opacity: 0.55;
  margin-bottom: 1.4rem;
  height: 1.4rem;
}
.cherry-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oak);
  margin-bottom: 1.2rem;
}
.cherry-story {
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  font-weight: 400;
  line-height: 1.78;
  color: var(--ink-soft);
  max-width: 48ch;
}
.cherry-story em {
  color: var(--golden-hour);
  font-style: normal;
  font-family: var(--serif);
  font-size: 1.18em;
}
.cherry-story .gap {
  display: block;
  height: 1.3em;
}

/* ─── DAY · THE LAND — single-column layout ────────────────── */
.day-intro {
  text-align: center;
  max-width: 640px;
  margin: 3.5rem auto 0;
}
.day-intro .section-title {
  margin-top: 0.8rem;
}
.day-intro .divider-rule {
  margin-left: auto;
  margin-right: auto;
}
.day-intro .section-body {
  margin-top: 1.4rem;
  /* max-width and centering handled in second-pass fixes */
}

.day-strip {
  display: flex;
  height: 60vh;
  min-height: 280px;
  max-height: 620px;
  margin-top: 5rem;
  margin-inline: 0; /* overridden by task-fixes: adds positive margin + border-radius */
  gap: 0;
  overflow: hidden;
}
.day-strip-slot {
  position: relative;
  overflow: hidden;
  background: #2a1f15;
  flex: 1;
  isolation: isolate;
}
.day-strip-slot.focal {
  flex: 2;
}

.day-strip-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(242, 212, 160, 0.05) 0 2px,
    transparent 2px 12px
  );
}
.day-strip-slot .ph-file {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: rgba(242, 212, 160, 0.42);
  pointer-events: none;
}
.day-strip-slot .ph-file::before {
  content: '⤓ ';
  letter-spacing: 0;
}
.day-strip-slot .ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.day-strip-slot .ph-img.is-loaded {
  opacity: 1;
}
.day-strip-slot .ph-img.is-missing {
  display: none;
}
.day-strip-slot .vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.5),
    inset 0 -44px 80px rgba(0, 0, 0, 0.42);
}
.day-strip-slot .caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 4;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 247, 232, 0.62);
  font-family: var(--mono);
}
.day-strip-slot .num {
  position: absolute;
  right: 16px;
  top: 14px;
  z-index: 4;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: rgba(255, 247, 232, 0.5);
  font-family: var(--mono);
}

.day-pullquote-wrap {
  max-width: 720px;
  margin: 7rem auto 0;
  text-align: center;
}
.day-pullquote-wrap .land-pullquote {
  margin-bottom: 0;
}
.day-pullquote-wrap .land-pullquote .swash {
  display: block;
  margin-bottom: 1.4rem;
}

/* cherry story — layout moved to task-fixes section at end of file */

@media (max-width: 640px) {
  .day-strip {
    flex-direction: column;
    height: auto;
    min-height: unset;
    max-height: unset;
  }
  .day-strip-slot {
    height: 50vw;
    flex: none;
  }
  .day-strip-slot.focal {
    height: 70vw;
  }
  /* .day-cherry-img mobile height handled in task-fixes */
}

/* ─── DAY · THE TRAIL ───────────────────────────────────────── */
#day-trail {
  background: linear-gradient(
    178deg,
    var(--plaster) 0%,
    var(--sand-100) 28%,
    var(--sand-200) 72%,
    var(--sand-300) 100%
  );
  color: var(--charred-wood);
}
#day-trail .eyebrow {
  color: var(--forest);
}
#day-trail .section-body {
  color: var(--ink-soft);
}

.trail-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 5rem;
  align-items: start;
  margin-top: 3rem;
}
.trail-svg-wrap {
  position: relative;
  height: 180px;
  overflow: visible;
}
.trail-svg-wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.trail-label {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.7;
}
.trail-coords {
  position: absolute;
  right: 0;
  bottom: 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--forest);
  opacity: 0.5;
}
.osm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  padding: 1rem;
}

.osm-wrap {
  position: relative;
  margin-top: 1.6rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(85, 122, 60, 0.28);
  background: #1a1a1a;
  filter: saturate(0.8) contrast(0.96);
  box-shadow: 0 16px 36px rgba(44, 26, 8, 0.18);
}
.osm-wrap iframe {
  width: 100%;
  height: 260px;
  border: none;
  display: block;
}
.osm-caption {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.65;
  margin-top: 0.9rem;
  text-align: center;
}
.osm-fallback-link {
  display: block;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--golden-hour);
  opacity: 0.85;
  margin-top: 0.5rem;
  text-decoration: underline;
}
.route-thumb-link {
  display: block;
  max-width: 220px;
  margin: 1.4rem auto 0;
  text-decoration: none;
}
.route-thumb {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(85, 122, 60, 0.28);
  background: #1a1a1a;
}
.route-thumb .ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.route-thumb .ph-img.is-loaded {
  opacity: 1;
}
.route-thumb-caption {
  display: block;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.65;
  margin-top: 0.6rem;
}
.trail-map-full {
  grid-column: 1 / -1;
  margin-top: 2rem;
}
.trail-map-full .osm-wrap {
  margin-top: 0;
}
.trail-map-full .osm-wrap iframe {
  height: 340px;
}

.trail-quote {
  margin: 6rem auto 0;
  max-width: 860px;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: var(--walnut);
  text-wrap: balance;
}
.trail-quote .swash {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 3.6rem;
  line-height: 0.2;
  color: var(--bark-sand);
  opacity: 0.5;
  margin-bottom: 1.4rem;
  height: 1.6rem;
}

/* ─── MAP TRANSITION ────────────────────────────────────────── */
#map-transition {
  position: relative;
  width: 100%;
  line-height: 0;
  background: #1a0a02;
  isolation: isolate;
}
#map-transition::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(
    180deg,
    var(--sand-300) 0%,
    rgba(205, 186, 148, 0.4) 42%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}
#map-transition::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 260px;
  background: linear-gradient(
    0deg,
    var(--blue-deep) 0%,
    rgba(6, 18, 30, 0.6) 50%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}
#map-transition img {
  width: 100%;
  display: block;
  height: auto;
  filter: saturate(1.02);
}

/* ─── BLUE HOUR (blue tones only here) ──────────────────────── */
#blue-hour {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--blue-deep) 0%,
    #0b1d30 18%,
    #142e48 38%,
    var(--deep-night-sky) 55%,
    #143047 72%,
    #0b1d30 90%,
    var(--blue-deep) 100%
  );
  color: #d6e4f0;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(7rem, 12vh, 10rem) clamp(1.4rem, 5vw, 4rem)
    clamp(8rem, 14vh, 11rem);
}
#blue-hour::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: min(960px, 92vw);
  height: min(720px, 72vh);
  background: radial-gradient(
    ellipse,
    rgba(167, 182, 199, 0.12) 0%,
    transparent 64%
  );
  pointer-events: none;
}
.bh-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.bh-stars .s {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: tw var(--d, 5s) var(--del, 0s) ease-in-out infinite;
}
.bh-inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
}
.bh-eyebrow {
  color: var(--hazy-hills);
}
.bh-eyebrow::before {
  background: var(--hazy-hills);
}
.bh-title {
  font-family: var(--sans);
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.032em;
  color: #dce8f2;
  text-wrap: balance;
  text-align: center;
  max-width: 20ch;
  margin: 1.4rem auto 0;
}
.bh-title em {
  font-family: var(--serif);
  font-style: normal;
  color: var(--hazy-hills);
}
.bh-head {
  text-align: center;
  margin-bottom: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.valley-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 21/9;
  max-width: 1460px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 70% 40% at 50% 95%,
      rgba(167, 182, 199, 0.18) 0%,
      transparent 70%
    ),
    linear-gradient(180deg, #091824 0%, var(--deep-night-sky) 60%, #0b1d30 100%);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(167, 182, 199, 0.08);
}
/* These photos are closer to square — on mobile use the same aspect-ratio
   treatment as the rest of the site's mobile image grids, instead of the
   wide desktop crop. Desktop (21/9 above) stays untouched. */
@media (max-width: 640px) {
  .valley-scene {
    aspect-ratio: 4/3;
  }
}
.valley-scene svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.valley-caption {
  position: absolute;
  left: 26px;
  bottom: 20px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(167, 182, 199, 0.6);
  z-index: 3;
}
.valley-coords {
  position: absolute;
  right: 26px;
  bottom: 20px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  color: rgba(167, 182, 199, 0.6);
  z-index: 3;
}
.bh-body-row {
  max-width: 640px;
  margin: 5rem auto 0;
  text-align: center;
}
.bh-body-row .body {
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.78;
  color: rgba(190, 206, 222, 0.86);
}

/* blue-hour data row */
.bh-data {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 4rem;
  margin-top: 4rem;
  padding: 2.4rem 0;
  border-top: 1px solid rgba(167, 182, 199, 0.15);
  border-bottom: 1px solid rgba(167, 182, 199, 0.15);
}
.bh-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-width: 120px;
}
.bh-stat-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(167, 182, 199, 0.55);
}
.bh-stat-value {
  font-family: var(--serif);
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  color: #dce8f2;
  letter-spacing: 0.02em;
  text-align: center;
}

/* blue-hour pull quote — mirrors .trail-quote in night palette */
.bh-quote {
  margin: 5.5rem auto 0;
  max-width: 860px;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: #dce8f2;
  text-wrap: balance;
}
.bh-quote .swash {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 3.6rem;
  line-height: 0.2;
  color: rgba(167, 182, 199, 0.45);
  margin-bottom: 1.4rem;
  height: 1.6rem;
}

.bh-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 4.5rem;
}
.bh-strip .ph {
  aspect-ratio: 4/3;
  background: #0a1828;
}
.bh-strip .ph:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16/9;
}
/* Night sky images: cover (not contain) so there's no empty letterbox space —
   contain was leaving big striped bars on the sides since the photos' native
   aspect ratio doesn't match a wide strip. Cropping is minor at these ratios. */
.bh-strip .ph .ph-img {
  object-fit: cover;
}

/* ─── NIGHT · REST (warm candlelight on dark) ───────────────── */
#night-rest {
  background:
    radial-gradient(
      ellipse 60% 50% at 50% 70%,
      rgba(212, 144, 58, 0.1) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      var(--blue-deep) 0%,
      #0a130d 26%,
      var(--night-forest) 58%,
      var(--night-forest-2) 100%
    );
  color: var(--warm-candlelight);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#night-rest .eyebrow {
  color: var(--warm-candlelight);
  opacity: 0.78;
}
#night-rest .eyebrow::before {
  background: var(--warm-candlelight);
}
#night-rest .section-title {
  color: var(--warm-candlelight);
}
#night-rest .section-title em {
  color: var(--golden-hour);
}
#night-rest .section-body {
  color: rgba(242, 212, 160, 0.74);
}
.nr-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.nr-stars .s {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: tw var(--d, 4s) var(--del, 0s) ease-in-out infinite;
}
.nr-inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
}
.nr-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 5rem;
  align-items: start;
  margin-top: 3rem;
}
.nr-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 3.4rem;
  max-width: 440px;
}
.nr-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.nr-icon .circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(242, 212, 160, 0.28);
  display: grid;
  place-items: center;
  animation: iconGlow var(--idur, 3s) var(--idel, 0s) ease-in-out infinite;
}
@keyframes iconGlow {
  0%,
  100% {
    border-color: rgba(242, 212, 160, 0.18);
    filter: drop-shadow(0 0 0 rgba(242, 212, 160, 0));
  }
  50% {
    border-color: rgba(242, 212, 160, 0.58);
    filter: drop-shadow(0 0 9px rgba(212, 144, 58, 0.55));
  }
}
.nr-icon svg {
  stroke: rgba(242, 212, 160, 0.82);
}
.nr-icon .lbl {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 212, 160, 0.6);
}
.nr-images {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: 320px 250px;
  gap: 16px;
}
.nr-images .ph {
  background: #0a0d05;
}
.nr-images .ph:nth-child(1) {
  grid-row: span 2;
}

.night-quote {
  margin: 7rem auto 0;
  max-width: 880px;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: rgba(244, 224, 184, 0.95);
  text-wrap: balance;
}
.night-quote .swash {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 3.6rem;
  line-height: 0.2;
  color: rgba(212, 144, 58, 0.5);
  margin-bottom: 1.4rem;
  height: 1.6rem;
}

/* ─── FOOTER ────────────────────────────────────────────────── */
footer {
  background: var(--night-deep);
  padding: 6rem 2rem 4.5rem;
  text-align: center;
  color: var(--warm-candlelight);
  position: relative;
}
.f-brand {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hazy-hills);
  opacity: 0.85;
  margin-top: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1em;
}
.f-brand-sep {
  color: var(--hazy-hills);
  opacity: 0.4;
  letter-spacing: 0;
}
.f-place {
  font-family: var(--sans);
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--warm-candlelight);
}
.f-domain {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  text-transform: lowercase;
  color: var(--bark-sand);
}
.f-sep {
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, rgba(242, 212, 160, 0.45), transparent);
  margin: 2.2rem auto;
}
.f-loc {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(107, 156, 192, 0.72);
}
.f-coords {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: rgba(168, 145, 110, 0.78);
}
.f-map {
  width: 100%;
  max-width: 320px;
  height: 200px;
  margin: 2rem auto 0;
  border-radius: 6px;
  overflow: hidden;
  opacity: 0.72;
  border: 1px solid rgba(107, 156, 192, 0.18);
  transition: opacity 0.3s ease;
}
.f-map:hover {
  opacity: 1;
}

/* ─── responsive ────────────────────────────────────────────── */
@media (max-width: 880px) {
  .land-grid,
  .trail-grid,
  .nr-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .land-img-stack {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 220px);
  }
  .land-img-stack .ph:nth-child(1) {
    grid-row: span 1;
  }
  .bh-head {
    margin-bottom: 3rem !important;
  }
  .bh-body-row {
    margin-top: 3rem;
  }
  .bh-data {
    gap: 1.8rem 2.4rem;
  }
  .bh-quote {
    font-size: clamp(1.4rem, 4.5vw, 2rem);
    margin-top: 3.5rem;
  }
  .bh-strip {
    grid-template-columns: 1fr;
  }
  .bh-strip .ph:first-child {
    aspect-ratio: 4/3;
  }
  .nr-images {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 220px);
  }
  .nr-images .ph:nth-child(1) {
    grid-row: span 1;
  }
  .nr-icons {
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
  }
}

/* ─── cyclist motion ────────────────────────────────────────── */
.cyclist {
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes drawTrail {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .wc::before {
    animation: none;
  }
}

/* ─── TASK FIXES ────────────────────────────────────────────── */

/* 1. Hero quote — mobile font smaller, one sentence per line feel */
@media (max-width: 640px) {
  .breath {
    font-size: clamp(1.35rem, 5.5vw, 2rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
}

/* 2. Day The Land image strip — add edge margin and border-radius */
.day-strip {
  margin-top: 5rem;
  margin-inline: clamp(1rem, 3vw, 3rem);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(44, 26, 8, 0.22);
}

/* 3. Cherry story — two-column desktop, stacked centered mobile */
.day-cherry-wrap {
  margin: 5.5rem 0 2rem;
}
.day-cherry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1.4rem, 5vw, 4rem);
}
.day-cherry-content {
  padding-top: 1rem;
}
.day-cherry-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 2.9rem);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--walnut);
  text-wrap: balance;
  margin: 0 0 2.6rem;
  line-height: 1.15;
}
.day-cherry-text {
  max-width: none;
  margin: 0;
  margin-top: 2rem;
  padding: 0;
  text-align: left;
}
.cherry-para {
  font-size: clamp(1.04rem, 1.15vw, 1.16rem);
  /* line-height: 1.88; */
  color: var(--ink);
  font-weight: 300;
  line-height: 1.95;
  margin-bottom: 2.2rem;
}
.day-cherry-img {
  width: 100%;
  height: 72vh;
  min-height: 380px;
  overflow: hidden;
  background: #2a1f15;
  border-radius: 6px;
  box-shadow: 0 28px 70px rgba(44, 26, 8, 0.22);
}
.day-cherry-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.day-cherry-img img.is-loaded {
  opacity: 1;
}
.day-cherry-img img.is-missing {
  display: none;
}

@media (max-width: 860px) {
  .day-cherry-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .day-cherry-title {
    text-align: center;
    margin: 0 auto;
    max-width: 600px;
  }
  .day-cherry-text {
    text-align: center;
    max-width: 540px;
    margin: 0 auto;
  }
  .cherry-para {
    margin-left: 0;
  }
  .day-cherry-img {
    height: 50vw;
    min-height: 260px;
  }
  .day-cherry-wrap {
    margin-bottom: 0;
  }
  #day-trail {
    padding-top: clamp(3rem, 6vh, 5rem);
  }
}

/* 4. Trail — bike SVG smaller on mobile, map label */
.trail-map-label {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
  color: var(--walnut);
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0.88;
}

@media (max-width: 640px) {
  .trail-svg-wrap {
    height: 120px;
  }
}

/* 5. Consistent quote design — all section quotes match .breath style */
/* land-pullquote */
.land-pullquote {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.7vw, 2.4rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--oak);
  text-wrap: balance;
  margin: 0 0 2.4rem;
}
.land-pullquote .swash {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 3.4rem;
  line-height: 0.2;
  color: var(--bark-sand);
  opacity: 0.55;
  margin-bottom: 1.4rem;
  height: 1.4rem;
}
.land-pullquote em {
  color: var(--golden-hour);
  font-style: normal;
}

/* trail-quote — match breath */
.trail-quote {
  margin: 6rem auto 0;
  max-width: 860px;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: var(--walnut);
  text-wrap: balance;
}

@media (max-width: 640px) {
  .land-pullquote {
    font-size: clamp(1.3rem, 5vw, 1.7rem);
  }
  .trail-quote {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }
  .night-quote {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }
}

/* Day strip mobile — already handled above but ensure images are visible */
@media (max-width: 640px) {
  .day-strip {
    margin-inline: 1rem;
    border-radius: 6px;
  }
}

/* ─── SECOND PASS FIXES ─────────────────────────────────────── */

/* Fix 1: Day Land intro text — consistent centered padding on mobile */
.day-intro {
  text-align: center;
  max-width: 640px;
  margin: 3.5rem auto 0;
  padding: 0 clamp(1.2rem, 4vw, 2rem);
}
.day-intro .section-body {
  max-width: 52ch;
  margin: 1.4rem auto 0;
  text-align: center;
}

/* Fix 2: Day strip — gap between images on desktop, stacked full on mobile */
.day-strip {
  gap: 3px; /* thin gap between panels */
}
.day-strip-slot {
  gap: 3px;
}

/* Mobile: all images stacked, full visible height */
@media (max-width: 640px) {
  .day-strip {
    flex-direction: column;
    height: auto;
    min-height: unset;
    max-height: unset;
    gap: 3px;
  }
  .day-strip-slot,
  .day-strip-slot.focal {
    height: 72vw;
    flex: none;
    width: 100%;
  }
}

/* Fix 3: Birds image placeholder — between pullquote and cherry */
.day-birds-wrap {
  max-width: var(--maxw);
  margin: 4rem auto 0;
  padding: 0 clamp(1.4rem, 5vw, 4rem);
}
.day-birds-ph {
  width: 100%;
  height: clamp(220px, 38vh, 440px);
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(44, 26, 8, 0.18);
}

/* Fix 4: Cherry image on mobile — full height, not cut */
@media (max-width: 860px) {
  .day-cherry-img {
    height: auto;
    aspect-ratio: 3/4;
    min-height: unset;
  }
}

/* Fix 5: Trail map header — wayfinding coordinate marker style */
.trail-map-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  margin-bottom: 1.4rem;
  padding: 0.9rem 0;
}
.trail-map-pin {
  color: var(--forest);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.trail-map-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.72;
  font-style: normal;
  font-weight: 400;
}
.trail-map-name {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oak);
  opacity: 0.9;
}
.trail-map-header::before,
.trail-map-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--forest);
  opacity: 0.2;
}

/* Fix 6: Trail quote — consistent with other quotes */
.trail-quote-wrap {
  margin-top: 0;
  position: relative;
}
.trail-quote-cyclist {
  width: 100%;
  height: 80px;
  position: relative;
  overflow: visible;
  margin-bottom: -1rem;
}
.trail-cyclist-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.trail-quote {
  display: block;
  margin: 0 auto;
  max-width: 860px;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: var(--walnut);
  text-wrap: balance;
  padding: 2rem 2rem 4rem;
}
.trail-quote .swash {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 3.6rem;
  line-height: 0.2;
  color: var(--bark-sand);
  opacity: 0.5;
  margin-bottom: 1.4rem;
  height: 1.6rem;
}

/* Hide the old osm-caption since coords are now in trail-map-header */
.trail-map-full .osm-caption {
  display: none;
}

@media (max-width: 640px) {
  .trail-map-header {
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: center;
  }
  .trail-map-header::before,
  .trail-map-header::after {
    display: none;
  }
  .trail-quote-cyclist {
    height: 60px;
  }
  .trail-quote {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }
}

/* Ensure day-intro body text centers properly */
.day-intro .section-body {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Section-inner centered context — section body should center */
.section-inner[style*='text-align:center'] .section-body,
.section-inner[style*='text-align: center'] .section-body {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ─── THIRD PASS FIXES ──────────────────────────────────────── */

/* Cyclist below trail quote */
.trail-cyclist-wrap {
  width: 100%;
  height: 70px;
  position: relative;
  overflow: visible;
  margin-top: 1rem;
}
.trail-cyclist-wrap .trail-cyclist-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Trail quote — remove top margin since cyclist comes after */
.trail-quote {
  margin: 5rem auto 0;
  padding: 0 2rem 0;
}

/* Map header — fix desktop alignment: pin + coords on one line, name below centered */
.trail-map-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  margin-bottom: 1.4rem;
  padding: 1rem 0 0.6rem;
}
.trail-map-header::before,
.trail-map-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--forest);
  opacity: 0.18;
  max-width: 200px;
}
.trail-map-pin {
  color: var(--forest);
  display: flex;
  align-items: center;
  opacity: 0.72;
  flex-shrink: 0;
}
.trail-map-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.65;
  font-style: normal;
  white-space: nowrap;
}
/* Separator dot between coords and name */
.trail-map-sep {
  color: var(--forest);
  opacity: 0.3;
  font-size: 0.55rem;
}
.trail-map-name {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oak);
  opacity: 0.75;
  white-space: nowrap;
}

/* Mobile: stack vertically, hide side rules */
@media (max-width: 640px) {
  .trail-map-header {
    flex-wrap: wrap;
    gap: 0.4em 0.6em;
    justify-content: center;
    padding: 0.6rem 1rem;
  }
  .trail-map-header::before,
  .trail-map-header::after {
    display: none;
  }
  .trail-map-pin {
    /* hide icon on mobile to save space */
    display: none;
  }
  .trail-cyclist-wrap {
    height: 55px;
  }
}

/* Trail quote color — explicitly match oak (warmer, same as day pullquote) */
.trail-quote {
  color: var(--walnut);
}

/* Remove old trail-quote-cyclist container styles if present */
.trail-quote-cyclist {
  display: none;
}
.trail-quote-wrap {
  display: contents;
}

/* ─── FOURTH PASS FIXES ─────────────────────────────────────── */

/* Cherry story: image LEFT (spans both rows), title then story RIGHT — desktop unchanged */
.day-cherry-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 5rem;
  row-gap: 0;
  align-items: stretch;
}
.day-cherry-img {
  order: -1; /* image first (left), spans both rows */
  grid-row: span 2;
}
.day-cherry-title {
  order: 0;
}
.day-cherry-content {
  order: 1; /* story second (right) */
  display: flex; /* ADD */
  flex-direction: column; /* ADD */
  justify-content: flex-start; /* ADD */
  /* padding-top: 1rem;   */
}
@media (max-width: 860px) {
  .day-cherry-img {
    order: -1;
    grid-row: auto;
  }
  .day-cherry-content {
    order: 1;
  }
  .day-cherry-grid {
    row-gap: 3rem;
  }
}

/* Map header — consolidated single definition, all on one baseline */
.trail-map-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin-bottom: 1.4rem;
  padding: 1rem 0 0.6rem;
}
/* The horizontal rules */
.trail-map-header::before,
.trail-map-header::after {
  content: '' !important;
  display: block !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--forest) !important;
  opacity: 0.18 !important;
  align-self: center !important;
}
/* Spacing between inner elements */
.trail-map-pin {
  display: flex;
  align-items: center;
  color: var(--forest);
  opacity: 0.7;
  margin: 0 0.6em;
  flex-shrink: 0;
}
.trail-map-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.65;
  font-style: normal;
  font-weight: 400;
  white-space: nowrap;
  margin: 0 0.5em;
}
.trail-map-sep {
  color: var(--forest);
  opacity: 0.3;
  font-size: 0.55rem;
  margin: 0 0.5em;
  flex-shrink: 0;
}
.trail-map-name {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oak);
  opacity: 0.75;
  white-space: nowrap;
  margin: 0 0.5em;
}

/* Mobile: wrap allowed, no side rules, keep compact */
@media (max-width: 760px) {
  .trail-map-header {
    flex-wrap: wrap !important;
    padding: 0.6rem 1rem;
    gap: 0.3em 0.5em !important;
  }
  .trail-map-header::before,
  .trail-map-header::after {
    display: none !important;
  }
  .trail-map-pin {
    display: none;
  }
  .trail-map-label,
  .trail-map-sep,
  .trail-map-name {
    margin: 0 0.2em;
  }
}

/* Trail quote color — match oak (same as hero/land quotes) */
.trail-quote {
  color: var(--oak) !important;
}

/* Fix cherry mobile — single centered column: title, then main image, then story */
@media (max-width: 860px) {
  .day-cherry-grid {
    grid-template-columns: 1fr !important;
  }
  .day-cherry-title {
    order: 1 !important;
  }
  .day-cherry-img {
    order: 2 !important;
    grid-row: auto !important;
  }
  .day-cherry-content {
    order: 3 !important;
    padding-top: 0 !important;
  }
}

/* ── LAYOUT FIX: remove double padding from cherry/birds ──────
   Section already has clamp(1.4rem,5vw,4rem) horizontal padding.
   Internal containers only need max-width + margin:auto.        */
.day-cherry-grid {
  padding-left: 0;
  padding-right: 0;
}
.day-birds-wrap {
  padding-left: 0;
  padding-right: 0;
}

/* Day strip — constrain to same content width as rest of site */
.day-strip {
  max-width: 1320px;
  margin-inline: auto;
}

/* Blue hour — reduce gap between title and valley image to match other sections */
.bh-head {
  margin-bottom: 5rem;
}

/* Blue hour title — increase top margin to match visual gap other sections get from divider-rule */
.bh-title {
  margin-top: 3.6rem;
}

/* ─── FOOTER INSTAGRAM LINK ────────────────────────────────── */
.f-ig-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  color: var(--hazy-hills);
  opacity: 0.85;
  transition:
    opacity 0.3s ease,
    color 0.3s ease;
}
.f-ig-link:hover {
  opacity: 1;
  color: var(--warm-candlelight);
}
.f-ig-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.f-ig-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.7;
}
.f-ig-name {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ─── FOOTER TERMS LINK ─────────────────────────────────────── */
.f-terms-link {
  text-decoration: none;
  color: var(--hazy-hills);
  transition:
    opacity 0.3s ease,
    color 0.3s ease;
}
.f-terms-link:hover {
  color: var(--warm-candlelight);
  opacity: 1;
}

/* ─── HEX WOOD DIVIDER ──────────────────────────────────────── */
@keyframes hex-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: var(--ring-opacity);
  }
  50% {
    transform: scale(1.045);
    opacity: calc(var(--ring-opacity) * 0.6);
  }
}
@keyframes hex-pulse-2 {
  0%,
  100% {
    transform: scale(1);
    opacity: var(--ring-opacity);
  }
  50% {
    transform: scale(1.06);
    opacity: calc(var(--ring-opacity) * 0.55);
  }
}
@keyframes hex-pulse-3 {
  0%,
  100% {
    transform: scale(1);
    opacity: var(--ring-opacity);
  }
  50% {
    transform: scale(1.075);
    opacity: calc(var(--ring-opacity) * 0.5);
  }
}
@keyframes hex-pulse-4 {
  0%,
  100% {
    transform: scale(1);
    opacity: var(--ring-opacity);
  }
  50% {
    transform: scale(1.09);
    opacity: calc(var(--ring-opacity) * 0.45);
  }
}

.hex-divider-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto 1.6rem;
}
.hex-divider-wrap-footer {
  margin: 0 auto 1.8rem;
}
.hex-divider {
  display: block;
  overflow: visible;
}

/* ─── Cyclist v2 — spinning wheels, undulating path, no terrain ─── */
.trail-cyclist-wrap {
  width: 100%;
  height: 120px;
  position: relative;
  overflow: visible;
  margin-top: 1.5rem;
}
.trail-cyclist-wrap .trail-cyclist-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

@media (max-width: 640px) {
  .trail-cyclist-wrap {
    height: 90px;
    margin-top: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE GRID GALLERIES — Day The Land, Birds, Trees, Trail
   Desktop: grid 2-3 cols, Mobile: 1 col stack, images fully visible
   ══════════════════════════════════════════════════════════════ */

/* shared grid item base */
.dlg-item {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #2a1f15;
  aspect-ratio: 4/3;
  box-shadow: 0 14px 36px rgba(44, 26, 8, 0.16);
}
.dlg-item .ph-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1s ease;
}
.dlg-item .ph-img.is-loaded {
  opacity: 1;
}
.dlg-item .ph-img.is-missing {
  display: none;
}
.dlg-item .vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(0, 0, 0, 0.18) 100%
  );
  pointer-events: none;
}

/* Day The Land — main grid, 6 images, 3 cols desktop
   Note: no horizontal padding here — this sits as a direct child of
   .section, which already applies clamp(1.4rem,5vw,4rem) side padding.
   Adding padding here too was causing the double-padding/misalignment bug. */
.day-land-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1320px;
  margin: 4rem auto 0;
}

@media (max-width: 860px) {
  .day-land-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }
}
@media (max-width: 640px) {
  .day-land-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
}

/* Birds — single image (birds-2), standard content width, matching rest of site */
.day-birds-wrap {
  max-width: 1320px;
  margin: 4rem auto 0;
}
.day-birds-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.day-birds-grid .dlg-item {
  aspect-ratio: 21/9;
}
.day-birds-caption {
  display: block;
  text-align: center;
  margin-top: 1.2rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.7;
}

@media (max-width: 640px) {
  .day-birds-grid .dlg-item {
    aspect-ratio: 4/3;
  }
}

/* Trees grid — below cherry story, 3 images
   No own padding, inherits from parent .section (same fix as land/birds grids). */
.day-trees-wrap {
  max-width: 1320px;
  margin: 4rem auto 0;
}
.day-trees-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5rem;
}

@media (max-width: 640px) {
  .day-trees-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
}

/* Trail image grid — 2x2, occupies same column space as the old single image */
.trail-img-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.9rem;
  height: 560px;
}
.trail-img-grid .dlg-item {
  aspect-ratio: auto;
  height: 100%;
}

@media (max-width: 860px) {
  .trail-img-grid {
    height: auto;
    grid-template-rows: none;
  }
  .trail-img-grid .dlg-item {
    aspect-ratio: 4/3;
    height: auto;
  }
}
@media (max-width: 640px) {
  .trail-img-grid {
    grid-template-columns: 1fr;
  }
}