.moon-home {
  --moon-header-alpha: 0;
  --moon-header-enter: 0;
  --moon-header-blur: 0px;
  --moon-header-y: -8px;
  --moon-y: 0svh;
  --moon-scale: 1;
  --moon-dusk-opacity: 1;
  --moon-island-y: 0svh;
  --moon-island-scale: 1;
  --moon-island-opacity: 1;
  --moon-far-y: 0svh;
  --moon-far-scale: 1;
  --moon-mid-y: 0svh;
  --moon-near-y: 0svh;
  --moon-line-opacity: 0;
  --moon-line-offset: 1;
  --moon-map-opacity: 0;
  --moon-map-y: 22svh;
  --moon-map-scale: .92;
  --moon-logo-x: 0px;
  --moon-logo-y: 0px;
  --moon-logo-scale: 1;
  --moon-logo-opacity: 1;
  --moon-copy-y: 0svh;
  --moon-copy-opacity: 1;
  --moon-cue-opacity: 1;
  --moon-motion-opacity: 0;
  position: relative;
  background: var(--fg-blue, #bed0d7);
}

.moon-home .masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  background: rgba(246, 241, 230, var(--moon-header-alpha)) !important;
  border-bottom-color: rgba(36, 43, 35, var(--moon-header-alpha));
  backdrop-filter: blur(var(--moon-header-blur));
}
.moon-home .masthead .brand-long,
.moon-home .masthead .brand-stacked { opacity: var(--moon-header-alpha); }
.moon-home .masthead .issue,
.moon-home .masthead nav,
.moon-home .masthead .menu-toggle {
  opacity: var(--moon-header-enter);
  transform: translateY(var(--moon-header-y));
}
.moon-home:not(.moon-header-ready) .masthead .brand-lockup,
.moon-home:not(.moon-header-ready) .masthead nav,
.moon-home:not(.moon-header-ready) .masthead .menu-toggle { pointer-events: none; }
.moon-home .masthead .reading-progress { opacity: var(--moon-header-alpha); }

.moon-scroll-story { position: relative; height: 310svh; }
.moon-story-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #163243;
}
.moon-dusk,
.moon-map-world { position: absolute; inset: 0; }
.moon-dusk {
  z-index: 1;
  overflow: hidden;
  opacity: var(--moon-dusk-opacity);
  background:
    radial-gradient(circle at 35% 30%, rgba(190, 208, 215, .12), transparent 30%),
    linear-gradient(165deg, #102934, #244659 58%, #37594f);
}
.moon-dusk::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .15;
  mix-blend-mode: screen;
  background: url("/assets/personal/field-guide-paper-v1.png") center/cover;
  filter: grayscale(1) contrast(1.15);
}
.moon-orb {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 6svh;
  width: min(46vw, 590px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate3d(-50%, var(--moon-y), 0) scale(var(--moon-scale));
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.72), transparent 9%),
    radial-gradient(circle at 62% 66%, rgba(167,141,98,.18), transparent 16%),
    radial-gradient(circle at 42% 48%, #fff8e9, #e9d8b6 76%, #d6bd8e);
  box-shadow: 0 0 80px rgba(246,241,230,.18), inset -24px -18px 50px rgba(120,96,61,.13);
}
.moon-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .2;
  background: url("/assets/personal/field-guide-paper-v1.png") center/170%;
  mix-blend-mode: multiply;
}
.moon-star { position: absolute; z-index: 2; color: #d47b52; line-height: 1; }
.moon-star-a { left: 12vw; top: 20svh; font-size: 28px; transform: translateY(var(--moon-star-a-y, 0)); }
.moon-star-b { right: 12vw; top: 33svh; color: #bed0d7; font-size: 20px; transform: translateY(var(--moon-star-b-y, 0)); }
.moon-star-c { right: 24vw; top: 14svh; color: #f6f1e6; font-size: 38px; opacity: .7; }

.moon-paper-island {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(60vw, 800px);
  height: min(68svh, 620px);
  transform: translate(-50%, -50%) translateY(var(--moon-island-y)) scale(var(--moon-island-scale));
  opacity: var(--moon-island-opacity);
  background: #f6f1e6;
  clip-path: polygon(0 8%,6% 3%,14% 7%,24% 2%,34% 6%,44% 1%,55% 5%,66% 1%,77% 6%,88% 2%,100% 8%,98% 91%,90% 96%,79% 92%,68% 98%,56% 93%,44% 97%,33% 92%,22% 96%,11% 91%,2% 95%);
  box-shadow: 0 28px 50px rgba(10,27,34,.24);
}
.moon-paper-island::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  background: url("/assets/personal/field-guide-paper-v1.png") center/cover;
  mix-blend-mode: multiply;
}
.moon-landscape { position: absolute; z-index: 2; left: -4%; width: 108%; bottom: -3px; transform-origin: bottom; }
.moon-landscape-far {
  height: 44%; background: #77908b; opacity: .84;
  clip-path: polygon(0 74%,8% 54%,15% 65%,23% 39%,30% 63%,41% 32%,49% 62%,58% 44%,66% 68%,76% 38%,85% 62%,92% 45%,100% 68%,100% 100%,0 100%);
  transform: translateY(var(--moon-far-y)) scale(var(--moon-far-scale));
}
.moon-landscape-mid {
  z-index: 4; height: 34%; background: #5f6847;
  clip-path: polygon(0 45%,10% 67%,20% 30%,30% 60%,39% 35%,50% 66%,60% 28%,71% 64%,82% 34%,92% 58%,100% 42%,100% 100%,0 100%);
  transform: translateY(var(--moon-mid-y));
}
.moon-landscape-near {
  z-index: 5; height: 22%; background: #263d34;
  clip-path: polygon(0 52%,9% 30%,20% 70%,32% 32%,44% 68%,55% 25%,68% 64%,78% 29%,90% 68%,100% 38%,100% 100%,0 100%);
  transform: translateY(var(--moon-near-y));
}
.moon-through-line { position: absolute; z-index: 12; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: var(--moon-line-opacity); }
.moon-through-line path { fill: none; stroke: #c86f49; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--moon-line-offset); filter: drop-shadow(0 2px 2px rgba(36,43,35,.12)); }

.moon-map-world {
  z-index: 0;
  top: 88px;
  background: #bed0d7;
  opacity: var(--moon-map-opacity);
  transform: translateY(var(--moon-map-y)) scale(var(--moon-map-scale));
  transform-origin: center bottom;
  pointer-events: none;
}
.moon-map-ready .moon-map-world { pointer-events: auto; }
.moon-map-ready .moon-dusk,
.moon-map-ready .moon-opening-copy,
.moon-map-ready .moon-scroll-cue,
.moon-map-ready .moon-motion-note { pointer-events: none; }
.moon-map-world .method.section { height: 100%; overflow: hidden; }

.moon-opening-copy {
  position: absolute;
  z-index: 13;
  left: 50%;
  top: 50%;
  width: min(900px, 75vw);
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.2svh, 14px);
  text-align: center;
  transform: translate(-50%, -50%);
}
.moon-traveling-logo {
  position: relative;
  z-index: 31;
  display: block;
  width: min(52vw, 680px);
  height: auto;
  margin: -10px 0 -14px;
  opacity: var(--moon-logo-opacity);
  transform: translate3d(var(--moon-logo-x), var(--moon-logo-y), 0) scale(var(--moon-logo-scale));
  transform-origin: center;
  will-change: transform;
}
.moon-edition,
.moon-opening-copy h1,
.moon-introduction { transform: translateY(var(--moon-copy-y)); opacity: var(--moon-copy-opacity); }
.moon-edition { margin: 0 0 2px; color: #a65334; font: 600 .62rem/1.4 "DM Sans",Arial,sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.moon-opening-copy h1 { margin: 7px 0 0; color: #242b23; font: 400 clamp(2rem,3.25vw,3.55rem)/.99 "Instrument Serif",Georgia,serif; letter-spacing: -.012em; }
.moon-opening-copy h1 em { color: #5f6847; font-weight: 400; }
.moon-introduction { max-width: 540px; margin: 0; color: #242b23; font: 400 clamp(.88rem,1.05vw,1rem)/1.55 "DM Sans",Arial,sans-serif; }

.moon-scroll-cue {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: 4svh;
  display: grid;
  place-items: center;
  gap: 10px;
  transform: translateX(-50%);
  color: #f6f1e6;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .61rem;
  letter-spacing: .24em;
  opacity: var(--moon-cue-opacity);
}
.moon-scroll-cue i { width: 1px; height: 42px; background: currentColor; animation: moon-breathe 1.8s ease-in-out infinite; }
.moon-motion-note { position: absolute; z-index: 14; right: 2.6vw; bottom: 3svh; margin: 0; color: #f6f1e6; text-transform: uppercase; letter-spacing: .18em; font-size: .58rem; opacity: var(--moon-motion-opacity); }
@keyframes moon-breathe { 50% { transform: scaleY(.62); transform-origin: top; opacity: .55; } }

@media (max-width: 980px) {
  .moon-map-world { top: 76px; }
  .moon-orb { width: min(76vw, 520px); top: 9svh; }
  .moon-paper-island { width: 96vw; height: min(74svh, 650px); }
  .moon-opening-copy { width: min(88vw, 660px); gap: 14px; }
  .moon-traveling-logo { width: min(62vw, 300px); }
  .moon-opening-copy h1 { margin-top: 6px; font-size: clamp(1.85rem,8.4vw,2.8rem); }
  .moon-introduction { max-width: 42ch; font-size: .9rem; }
}
@media (max-width: 640px) {
  .moon-scroll-story { height: 280svh; }
  .moon-edition { max-width: 34ch; font-size: .55rem; line-height: 1.6; }
  .moon-introduction { max-width: 35ch; line-height: 1.45; }
  .moon-motion-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .moon-scroll-story { height: 200svh; }
  .moon-story-stage { position: relative; height: 200svh; overflow: hidden; background: #bed0d7; }
  .moon-dusk { inset: 0 0 auto; height: 100svh; opacity: 1; }
  .moon-opening-copy { top: 50svh; opacity: 1; }
  .moon-opening-copy > * { opacity: 1; transform: none; }
  .moon-scroll-cue { top: calc(100svh - 78px); bottom: auto; opacity: 1; }
  .moon-scroll-cue span { font-size: 0; }
  .moon-scroll-cue span::after { content: "Continue to the map"; font-size: .61rem; }
  .moon-scroll-cue i { animation: none; }
  .moon-motion-note { display: none; }
  .moon-map-world { inset: 100svh 0 0; height: 100svh; opacity: 1; transform: none; pointer-events: auto; }
  .moon-home .masthead { background: rgba(246,241,230,.98) !important; border-bottom-color: rgba(36,43,35,.24); backdrop-filter: blur(12px); }
  .moon-home .masthead .brand-long,.moon-home .masthead .brand-stacked,.moon-home .masthead .issue,.moon-home .masthead nav,.moon-home .masthead .menu-toggle { opacity: 1; transform: none; pointer-events: auto; }
}