:root {
  --color-canvas: #071016;
  --color-canopy-distant: #142b2b;
  --color-canopy-middle: #0d2021;
  --color-canopy-front: #09191a;
  --color-moon: #eeead7;
  --color-text: #eeead7;
  --color-text-quiet: #bac9c3;
  --color-sunny: #e7c769;
  --color-sky: #81d3d8;
  --color-bark: #5d4634;
  --color-bark-dark: #2e261f;
  --color-bark-edge: #a18a6d;
  --color-rib: rgba(186, 201, 195, 0.16);
  --color-star: rgba(238, 234, 215, 0.72);
  --color-moon-edge: rgba(238, 234, 215, 0.34);
  --color-shadow: rgba(0, 0, 0, 0.52);
  --color-contact-shadow: rgba(0, 0, 0, 0.18);
  --color-menu: rgba(7, 16, 22, 0.96);
  /* Honest local stacks: this sandbox ships no licensed font files or remote font requests. */
  --font-display: Georgia, "Times New Roman", Times, serif;
  --font-body: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --size-display: clamp(5rem, 10vw, 9.5rem);
  --size-h2: clamp(3rem, 6vw, 6.5rem);
  --size-h3: clamp(2rem, 3.5vw, 4rem);
  --size-body-large: clamp(1.05rem, 1.6vw, 1.35rem);
  --size-body: 1rem;
  --size-small: 0.875rem;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --leading-display: 0.78;
  --leading-heading: 0.95;
  --leading-body: 1.55;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --content-max: 90rem;
  --reading-max: 34rem;
  --header-height: 5rem;
  --touch-target: 2.75rem;
  --line-thin: 0.0625rem;
  --line-medium: 0.125rem;
  --line-branch: clamp(2.5rem, 4.5vw, 4.75rem);
  --line-branch-edge: clamp(0.12rem, 0.3vw, 0.3rem);
  --focus-width: 0.2rem;
  --focus-offset: 0.3rem;
  --shadow-contact: 0 0.1875rem 0.375rem var(--color-contact-shadow);
  --layer-back: 1;
  --layer-middle: 2;
  --layer-content: 3;
  --layer-branch: 4;
  --layer-birds: 5;
  --layer-front: 6;
  --layer-title: 7;
  --layer-header: 10;
  --layer-skip: 20;
  --motion-fast: 160ms;
  --motion-entrance: 780ms;
  --motion-ease: cubic-bezier(0.2, 0.72, 0.24, 1);
  --entrance-distance: 0.75rem;
  --depth-x: 0px;
  --depth-y: 0px;
}

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

html {
  background: var(--color-canvas);
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
}

body,
button,
a {
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-underline-offset: var(--space-2);
}

button {
  color: inherit;
  font: inherit;
}

h1,
h2,
h3,
p,
figure {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-sky);
  outline-offset: var(--focus-offset);
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--layer-skip);
  padding: var(--space-3) var(--space-4);
  background: var(--color-moon);
  color: var(--color-canvas);
  font-weight: var(--weight-bold);
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform var(--motion-fast) var(--motion-ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--layer-header);
  min-height: var(--header-height);
}

.site-nav {
  width: min(100%, var(--content-max));
  min-height: var(--header-height);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.wordmark,
.footer-wordmark {
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.wordmark span {
  margin-inline: var(--space-2);
  color: var(--color-sunny);
  font-style: italic;
}

.site-menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-menu a {
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  color: var(--color-text-quiet);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.site-menu a:hover,
.site-menu a:focus-visible {
  color: var(--color-moon);
}

.menu-toggle {
  display: none;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-inline: var(--space-3);
  border: var(--line-thin) solid var(--color-text-quiet);
  background: var(--color-menu);
  cursor: pointer;
}

.menu-icon {
  display: grid;
  gap: var(--space-2);
}

.menu-icon span {
  width: var(--space-5);
  height: var(--line-medium);
  background: var(--color-text);
  transition: transform var(--motion-fast) var(--motion-ease);
}

.menu-toggle[aria-expanded="true"] .menu-icon span:first-child {
  transform: translateY(var(--space-1)) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-icon span:last-child {
  transform: translateY(calc(var(--space-1) * -1)) rotate(-45deg);
}

.hero-habitat {
  position: relative;
  isolation: isolate;
  min-height: max(50rem, 100svh);
  overflow: hidden;
  background: var(--color-canvas);
}

.scene-definitions {
  position: absolute;
}

.habitat-plane {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translate3d(var(--depth-x), var(--depth-y), 0);
}

.js:not(.is-ready) .canopy-foreground,
.is-depth-active .habitat-plane {
  will-change: transform;
}

.canopy-back {
  z-index: var(--layer-back);
}

.moon-disc {
  position: absolute;
  top: calc(var(--header-height) + var(--space-6));
  left: 74%;
  width: clamp(4.5rem, 6vw, 6rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-moon);
  opacity: 0.65;
  transform: translateX(-50%);
  -webkit-mask: radial-gradient(circle at 27% 38%, transparent 0 57%, black 58%);
  mask: radial-gradient(circle at 27% 38%, transparent 0 57%, black 58%);
}

.star-field {
  position: absolute;
  inset: 0;
}

.star {
  position: absolute;
  width: 0.2rem;
  aspect-ratio: 1;
  background: var(--color-star);
  transform: rotate(45deg);
}

.star:nth-child(1) { top: 14%; left: 13%; }
.star:nth-child(2) { top: 23%; left: 25%; width: 0.13rem; opacity: 0.62; }
.star:nth-child(3) { top: 10%; left: 34%; }
.star:nth-child(4) { top: 20%; left: 74%; width: 0.28rem; }
.star:nth-child(5) { top: 11%; left: 87%; }
.star:nth-child(6) { top: 32%; left: 92%; width: 0.12rem; opacity: 0.58; }
.star:nth-child(7) { top: 45%; left: 7%; }
.star:nth-child(8) { top: 55%; left: 30%; width: 0.26rem; }
.star:nth-child(9) { top: 48%; left: 68%; }
.star:nth-child(10) { top: 66%; left: 91%; width: 0.14rem; opacity: 0.64; }
.star:nth-child(11) { top: 75%; left: 17%; }
.star:nth-child(12) { top: 81%; left: 76%; width: 0.25rem; }

.aviary-ribs,
.back-branches {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.aviary-ribs {
  fill: none;
}

.aviary-ribs path {
  stroke: var(--color-rib);
  stroke-width: 1.4;
}

.back-branch {
  fill: var(--color-canopy-distant);
}

.back-branch-light {
  fill: none;
  stroke: rgba(161, 138, 109, 0.18);
  stroke-linecap: round;
  stroke-width: 2;
}

.canopy-middle {
  z-index: var(--layer-middle);
}

.middle-foliage,
.front-foliage {
  position: absolute;
  top: 0;
  height: 100%;
}

.middle-foliage {
  width: min(42vw, 36rem);
}

.foliage-left,
.front-left {
  left: 0;
}

.foliage-right,
.front-right {
  right: 0;
}

.branch-fill {
  fill: var(--color-bark-dark);
}

.branch-fill-light,
.branch-front-light {
  fill: none;
  stroke: rgba(161, 138, 109, 0.38);
  stroke-linecap: round;
  stroke-width: 2;
}

.leaf-fill {
  fill: var(--color-canopy-distant);
}

.leaf-stem {
  fill: none;
  stroke: var(--color-bark-dark);
  stroke-linecap: round;
  stroke-width: 5;
}

.leaf-blade {
  fill: inherit;
  stroke: var(--color-moon-edge);
  stroke-width: 0.7;
}

.leaf-vein {
  fill: none;
  stroke: rgba(238, 234, 215, 0.2);
  stroke-linecap: round;
  stroke-width: 0.8;
}

.hero-content {
  position: relative;
  width: min(100%, var(--content-max));
  min-height: max(50rem, 100svh);
  margin-inline: auto;
}

.hero-title-block {
  position: absolute;
  top: 19%;
  left: var(--gutter);
  z-index: var(--layer-title);
}

h1 {
  margin-bottom: 0;
  font-size: var(--size-display);
  line-height: var(--leading-display);
  letter-spacing: -0.055em;
}

h1 span {
  display: block;
}

h1 span:last-child {
  color: var(--color-sunny);
}

h1 i {
  color: var(--color-sky);
  font-weight: var(--weight-regular);
}

.residents {
  position: absolute;
  inset: 0;
  z-index: var(--layer-title);
}

.resident {
  position: absolute;
  margin: 0;
}

.resident-cutout {
  position: relative;
  z-index: var(--layer-content);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0.94) saturate(0.9) contrast(1.02) drop-shadow(var(--shadow-contact));
}

.resident-sunny {
  top: 19%;
  left: 39%;
  width: clamp(20rem, 30vw, 27rem);
  aspect-ratio: 1366 / 1152;
}

.resident-sunny figcaption {
  top: calc(100% + 2.5rem);
  left: 18%;
  bottom: auto;
  color: var(--color-sunny);
}

.resident-sky {
  top: 14%;
  right: 3%;
  width: clamp(16rem, 22vw, 21rem);
  aspect-ratio: 2 / 3;
}

.resident-sky figcaption {
  right: 15%;
  bottom: 7%;
  color: var(--color-sky);
}

.resident figcaption {
  position: absolute;
  z-index: var(--layer-title);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-style: italic;
}

.resident-support,
.moment-support {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}

.resident-support {
  inset: 0;
  z-index: var(--layer-middle);
  width: 100%;
  height: 100%;
}

.support-shadow {
  fill: var(--color-contact-shadow);
  opacity: 0.72;
}

.support-wood {
  fill: var(--color-bark);
}

.support-intermediate {
  display: none;
}

.support-boundary {
  fill: none;
  stroke: var(--color-bark-edge);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.support-contact-shadow {
  fill: none;
  stroke: var(--color-contact-shadow);
  stroke-linecap: round;
  stroke-width: 22;
}

.support-fissure {
  fill: none;
  stroke: var(--color-bark-dark);
  stroke-linecap: round;
  stroke-width: 7;
}

.branch-main,
.branch-edge {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.habitat-branch .branch-shadow {
  fill: none;
  stroke: var(--color-shadow);
  stroke-width: calc(var(--line-branch) + var(--space-4));
}

.habitat-branch .branch-main {
  stroke: var(--color-bark);
  stroke-width: var(--line-branch);
}

.habitat-branch .segment-two {
  stroke-width: calc(var(--line-branch) * 0.76);
}

.habitat-branch .segment-three {
  stroke-width: calc(var(--line-branch) * 0.54);
}

.habitat-branch .branch-shadow.segment-two {
  stroke-width: calc((var(--line-branch) * 0.76) + var(--space-3));
}

.habitat-branch .branch-shadow.segment-three {
  stroke-width: calc((var(--line-branch) * 0.54) + var(--space-2));
}

.branch-edge {
  stroke: var(--color-bark-edge);
  stroke-width: var(--line-branch-edge);
}

.hero-note {
  position: absolute;
  right: auto;
  bottom: 3%;
  left: var(--gutter);
  z-index: var(--layer-title);
  width: min(32rem, 44vw);
}

.hero-note p {
  margin-bottom: var(--space-3);
  color: var(--color-text-quiet);
  font-family: var(--font-display);
  font-size: var(--size-body-large);
  font-style: italic;
}

.hero-note a,
.moment-copy a {
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-sky);
  font-weight: var(--weight-bold);
  text-decoration-thickness: var(--line-medium);
}

.hero-note a:hover,
.moment-copy a:hover {
  color: var(--color-sunny);
}

.canopy-foreground {
  z-index: var(--layer-front);
}

.front-foliage {
  width: min(12vw, 11rem);
  filter: blur(0.5px);
  opacity: 0.96;
}

.branch-front {
  fill: var(--color-bark-dark);
}

.leaf-front {
  fill: var(--color-canopy-front);
}

.js .canopy-foreground[data-entrance] {
  --depth-y: var(--entrance-distance);
  transition: transform var(--motion-entrance) var(--motion-ease);
}

.js.is-ready .canopy-foreground[data-entrance] {
  --depth-y: 0px;
}

.js.entrance-complete .canopy-foreground[data-entrance] {
  transition: none;
}

.moments-habitat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-10) var(--gutter);
  background: var(--color-canvas);
}

.moment-foliage {
  position: absolute;
  z-index: var(--layer-back);
  width: min(28vw, 24rem);
  height: 52rem;
  color: var(--color-canopy-middle);
  fill: currentColor;
  opacity: 0.6;
  pointer-events: none;
}

.moment-foliage-left {
  top: 10rem;
  left: -11rem;
}

.moment-foliage-right {
  right: -11rem;
  bottom: 10rem;
}

.moments-intro,
.moment-sequence {
  position: relative;
  width: min(100%, var(--content-max));
  margin-inline: auto;
}

.moments-intro {
  z-index: var(--layer-content);
  margin-bottom: var(--space-10);
  padding-left: 8%;
}

h2 {
  max-width: 13ch;
  margin-bottom: 0;
  font-size: var(--size-h2);
  line-height: var(--leading-heading);
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.habitat-branch {
  position: absolute;
  inset: 18rem 0 0;
  z-index: var(--layer-middle);
  width: 100%;
  height: calc(100% - 18rem);
  overflow: visible;
}

.habitat-branch-compact {
  display: none;
}

.compact-branch-shadow {
  fill: var(--color-shadow);
}

.habitat-branch .compact-branch-main {
  fill: var(--color-bark);
  stroke: none;
}

.habitat-branch .branch-main.segment-three {
  fill: var(--color-bark);
  stroke: none;
}

.habitat-branch .branch-fill-shadow {
  fill: var(--color-contact-shadow);
  stroke: none;
}

.habitat-branch .support-boundary {
  stroke-width: 1.5;
}

.compact-branch-edge {
  stroke-width: 2;
}

.compact-branch-mark {
  stroke-width: 5;
}

.branch-mark {
  fill: none;
  stroke: var(--color-bark-dark);
  stroke-linecap: round;
  stroke-width: 10;
}

.moment-sequence {
  display: grid;
  gap: 9rem;
}

.moment {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-7);
}

.moment-opening {
  position: relative;
  min-width: 0;
}

.moment-image-link:focus-visible {
  outline: var(--focus-width) solid var(--color-sky);
  outline-offset: var(--focus-offset);
}

.moment-image-link:focus-visible::after {
  position: absolute;
  z-index: var(--layer-front);
  inset: calc(var(--focus-offset) * -1);
  border: var(--focus-width) solid var(--color-sky);
  content: "";
  pointer-events: none;
}

.moment-watermelon .moment-opening,
.moment-strawberries .moment-opening {
  grid-column: span 8;
}

.moment-watermelon .moment-copy,
.moment-strawberries .moment-copy {
  grid-column: span 4;
}

.moment-strawberries .moment-opening {
  grid-column: 5 / span 8;
}

.moment-strawberries .moment-copy {
  grid-column: 1 / span 4;
  grid-row: 1;
  padding-left: var(--space-7);
}

.moment-obsessions .moment-opening {
  grid-column: 2 / span 5;
}

.moment-obsessions .moment-copy {
  grid-column: 8 / span 4;
}

.moment-image-link {
  position: relative;
  display: block;
  width: 100%;
}

.moment-watermelon .moment-image-link,
.moment-strawberries .moment-image-link {
  aspect-ratio: 8 / 5;
}

.moment-obsessions .moment-image-link {
  aspect-ratio: 4 / 5;
}

.moment-context {
  position: absolute;
  top: 0;
  right: 0;
  z-index: var(--layer-back);
  width: 42%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--space-2);
}

.moment-context img {
  position: absolute;
  max-width: none;
  height: auto;
}

.moment-watermelon .moment-context img {
  top: 0;
  left: -133.333%;
  width: 233.333%;
}

.moment-strawberries .moment-context img {
  top: -4.364%;
  left: -154.545%;
  width: 254.545%;
}

.moment-bird {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: var(--layer-content);
  width: 68%;
  height: auto;
  filter: brightness(0.94) saturate(0.9) contrast(1.02) drop-shadow(var(--shadow-contact));
}

.moment-obsessions .moment-context {
  right: auto;
  left: 0;
  width: 58%;
  aspect-ratio: 1;
}

.moment-obsessions .moment-context img {
  top: -50%;
  left: -100%;
  width: 200%;
}

.moment-obsessions .moment-bird {
  right: 0;
  left: auto;
  width: 72%;
}

.moment-copy {
  position: relative;
  z-index: var(--layer-branch);
  max-width: var(--reading-max);
}

.moment-number {
  display: block;
  margin-bottom: var(--space-5);
  color: var(--color-sunny);
  font-family: var(--font-display);
  font-size: var(--size-body-large);
  font-style: italic;
}

h3 {
  margin-bottom: var(--space-4);
  font-size: var(--size-h3);
  line-height: var(--leading-heading);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.moment-copy p {
  margin-bottom: var(--space-5);
  color: var(--color-text-quiet);
  font-size: var(--size-body-large);
}

.moment-support {
  bottom: 0;
  left: 0;
  z-index: var(--layer-middle);
  width: 68%;
  aspect-ratio: 1448 / 1086;
}

.site-footer {
  position: relative;
  min-height: 14rem;
  padding: var(--space-8) var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-5);
  overflow: hidden;
  background: var(--color-canvas);
  color: var(--color-text-quiet);
}

.site-footer > * {
  position: relative;
  z-index: var(--layer-content);
}

.site-footer > a:not(.footer-wordmark) {
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-footer p {
  margin-bottom: 0;
  text-align: right;
}

@media (max-width: 64rem) {
  :root {
    --size-display: clamp(4.5rem, 11.5vw, 7.5rem);
    --line-branch: clamp(2rem, 5vw, 3.5rem);
  }

  .resident-sunny {
    top: 19%;
    left: 30%;
    width: clamp(19rem, 40vw, 24rem);
  }

  .resident-sky {
    right: 1%;
    width: clamp(14rem, 30vw, 19rem);
  }

  .front-foliage {
    width: 10vw;
  }

  .moment-sequence {
    gap: 10rem;
  }
}

@media (min-width: 52.0625rem) and (max-width: 63.9375rem) {
  .resident-sunny {
    left: 38%;
  }

  .resident-sky {
    top: calc(39% - min(24.75vw, 15.675rem));
  }

}

@media (max-width: 52rem) {
  :root {
    --header-height: 4rem;
    --size-display: clamp(3.45rem, 14vw, 6rem);
    --size-h2: clamp(2.8rem, 10vw, 5rem);
    --size-h3: clamp(2rem, 7vw, 3rem);
    --gutter: clamp(1rem, 4vw, 2rem);
  }

  .site-nav {
    flex-wrap: wrap;
  }

  html:not(.js) .site-header {
    position: relative;
  }

  html:not(.js) .site-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline: 0;
    background: transparent;
  }

  .js .menu-toggle {
    display: inline-flex;
  }

  .site-menu {
    width: calc(100% - (var(--gutter) * 2));
    margin-inline: var(--gutter);
    padding: var(--space-3) var(--space-4) var(--space-4);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    background: var(--color-menu);
  }

  .site-menu a {
    justify-content: center;
  }

  .js .site-menu[hidden] {
    display: none;
  }

  .hero-habitat,
  .hero-content {
    min-height: max(43rem, 100svh);
  }

  .moon-disc {
    top: calc(var(--header-height) + var(--space-5));
    right: var(--gutter);
    left: auto;
    width: clamp(2.25rem, 10vw, 2.75rem);
    transform: none;
  }

  .aviary-ribs path {
    stroke-width: 1.5;
  }

  .middle-foliage {
    width: 46vw;
  }

  .front-foliage {
    width: 7vw;
  }

  .hero-title-block {
    top: 12%;
    left: var(--gutter);
  }

  .resident-sunny {
    top: 27%;
    left: -2%;
    width: clamp(13rem, 54vw, 21rem);
  }

  .resident-sky {
    top: 28%;
    right: 0;
    width: clamp(10rem, 40vw, 17rem);
  }

  @media (min-width: 25.0625rem) {
    .resident-sunny .support-wide {
      display: none;
    }

    .resident-sunny .support-intermediate {
      display: block;
    }
  }

  .resident figcaption {
    font-size: 1.05rem;
  }

  .resident-sunny figcaption {
    left: 22%;
    bottom: auto;
  }

  .resident-sky figcaption {
    right: 20%;
    bottom: 8%;
  }

  .hero-note {
    right: auto;
    bottom: 3%;
    left: var(--gutter);
    width: calc(100% - (var(--gutter) * 2));
  }

  .hero-note p {
    margin-bottom: var(--space-2);
  }

  .moments-habitat {
    min-height: 0;
    padding-block: var(--space-9) var(--space-10);
  }

  .moments-intro {
    margin-bottom: var(--space-9);
    padding-left: 8%;
  }

  .habitat-branch:not(.habitat-branch-compact) {
    display: none;
  }

  .habitat-branch-compact {
    display: block;
    inset: 15rem 0 0;
    width: 100%;
    height: calc(100% - 15rem);
  }

  .moment-foliage {
    width: 12rem;
    height: 34rem;
    opacity: 0.5;
  }

  .moment-foliage-left { left: -8rem; }
  .moment-foliage-right { right: -8rem; }

  .moment-sequence {
    gap: 6rem;
  }

  .moment {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-left: var(--space-6);
  }

  .moment-watermelon .moment-opening,
  .moment-strawberries .moment-opening,
  .moment-obsessions .moment-opening,
  .moment-watermelon .moment-copy,
  .moment-strawberries .moment-copy,
  .moment-obsessions .moment-copy {
    grid-column: 1;
    grid-row: auto;
  }

  .moment-strawberries .moment-copy {
    padding-left: 0;
  }

  .moment-copy {
    padding-left: var(--space-5);
  }

  .site-footer {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .site-footer > a:not(.footer-wordmark) {
    justify-content: flex-start;
  }

  .site-footer p {
    text-align: left;
  }
}

@media (max-width: 25rem) {
  :root {
    --size-display: clamp(3rem, 13.5vw, 3.5rem);
  }

  .resident-sunny {
    top: 30%;
    width: 62vw;
  }

  .resident-sky {
    top: 28%;
    width: 48vw;
  }

  .hero-note {
    font-size: var(--size-small);
  }

  .moment {
    padding-left: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    transition-delay: 0ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }

  .habitat-plane,
  .js .canopy-foreground[data-entrance],
  .js.is-ready .canopy-foreground[data-entrance] {
    --depth-x: 0px;
    --depth-y: 0px;
    transform: none;
  }
}