@font-face {
  font-family: "Cinzel Decorative";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/cinzel-decorative-700.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-500.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-600.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-700.woff2") format("woff2");
}

:root {
  --deep-forest: #101d1d;
  --parchment-ink: #3f3027;
  --parchment-heading: #3e2a1f;
  --parchment-accent: #667145;
  --focus: #d9ffbf;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--deep-forest);
}

body {
  color: #e8dfc6;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

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

.world {
  isolation: isolate;
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  background: url("assets/big-tiff-forest.jpg") center / cover no-repeat;
}

.world::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 50%, rgb(4 11 12 / 8%) 76%, rgb(4 11 12 / 24%) 100%),
    linear-gradient(rgb(4 9 10 / 6%), transparent 20% 73%, rgb(5 10 10 / 20%));
  box-shadow: inset 0 0 10vw rgb(3 9 9 / 25%);
}

.ambient-glow {
  position: absolute;
  z-index: 1;
  width: 4px;
  height: 4px;
  pointer-events: none;
  border-radius: 50%;
  background: #c6fff5;
  box-shadow: 0 0 5px 2px #c6fff5, 0 0 21px 9px rgb(151 248 226 / 22%);
  animation: firefly 6s ease-in-out infinite;
}

.ambient-glow-one { top: 70%; left: 51%; }
.ambient-glow-two { top: 25%; left: 91%; animation-delay: -2.8s; }

.forest-wisp {
  position: absolute;
  z-index: 2;
  width: 9px;
  height: 12px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #f2fbff 0 13%, #8fdcff 28%, #359ed8 54%, transparent 74%);
  box-shadow: 0 0 5px 2px rgb(199 239 255 / 90%), 0 0 16px 6px rgb(72 177 234 / 48%);
  animation: forest-wisp-drift 8.5s ease-in-out infinite;
}

.forest-wisp::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 3px;
  width: 3px;
  height: 25px;
  border-radius: 50%;
  background: linear-gradient(rgb(121 211 255 / 52%), transparent);
  filter: blur(2px);
  transform: rotate(11deg);
  transform-origin: top;
}

.forest-wisp-one { top: 56%; left: 8.5%; animation-delay: -1.6s; }
.forest-wisp-two { top: 19%; left: 48%; width: 7px; height: 10px; animation-duration: 10.5s; animation-delay: -5.3s; }
.forest-wisp-three { top: 64%; right: 7.5%; width: 8px; height: 11px; animation-duration: 9.5s; animation-delay: -7.1s; }

.story-mark {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.tiff-wrap {
  position: absolute;
  z-index: 3;
  bottom: 5.5%;
  left: clamp(18vw, calc(50vw - 47vh), 27vw);
  width: min(32vw, 47vh, 530px);
  aspect-ratio: 1;
  transform: translateX(-50%);
}

.tiff-art {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 6px rgb(10 7 4 / 54%)) drop-shadow(0 30px 14px rgb(8 6 3 / 50%));
}

.ground-shadow {
  position: absolute;
  z-index: 1;
  right: 3%;
  bottom: 2%;
  left: 3%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(rgb(12 8 5 / 68%) 0%, rgb(18 12 7 / 42%) 43%, transparent 76%);
  filter: blur(13px);
  opacity: 0.88;
  transform: scaleY(0.62);
}

.parchment-shell {
  position: absolute;
  z-index: 4;
  top: 4.5%;
  right: clamp(10vw, 15%, 17vw);
  width: clamp(460px, 43vw, 650px);
  aspect-ratio: 3 / 4;
  filter: drop-shadow(0 25px 30px rgb(4 9 8 / 50%));
}

.parchment-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.parchment-content {
  position: absolute;
  z-index: 2;
  inset: 12.2% 17% 13.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--parchment-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
}

.eyebrow {
  margin: clamp(60px, 10vh, 74px) 0 0.36rem;
  color: var(--parchment-heading);
  font-family: "Cinzel Decorative", Georgia, serif;
  font-size: clamp(0.58rem, 0.72vw, 0.74rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-shadow: 0 1px rgb(245 223 173 / 55%);
  text-transform: uppercase;
}

.parchment-content h2 {
  margin: 0;
  color: var(--parchment-heading);
  font-family: "Cinzel Decorative", Georgia, serif;
  font-size: clamp(1.35rem, 1.82vw, 1.95rem);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -0.025em;
  text-align: center;
}

.flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 77%;
  margin: clamp(0.58rem, 1.15vh, 0.9rem) 0 clamp(0.58rem, 1.2vh, 0.95rem);
  color: #8e6e3c;
}

.flourish span {
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}

.flourish span:last-child { transform: scaleX(-1); }
.flourish b { margin: 0 0.58rem; color: #6e7844; font-size: 0.52rem; }

.announcement-copy {
  margin: 0;
  color: var(--parchment-ink);
  font-size: clamp(1.08rem, 1.27vw, 1.34rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: 0.006em;
  text-align: left;
}

.announcement-copy-secondary { margin-top: clamp(0.38rem, 0.8vh, 0.65rem); }

.drop-cap {
  float: left;
  margin: -0.06em 0.08em -0.02em 0;
  color: var(--parchment-accent);
  font-family: "Cinzel Decorative", Georgia, serif;
  font-size: 2.7em;
  font-weight: 700;
  line-height: 0.8;
  text-shadow: 0 1px #f5dfad;
}

.coming-soon {
  margin: auto 0 0;
  padding-top: clamp(0.6rem, 1.1vh, 0.85rem);
  color: #3e2b1f;
  font-family: "Cinzel Decorative", Georgia, serif;
  font-size: clamp(0.86rem, 1vw, 1.06rem);
  font-weight: 700;
  font-kerning: none;
  letter-spacing: 0.035em;
  line-height: 1.4;
  text-align: center;
  word-spacing: 0.05em;
}

.coming-soon em { color: #5b653d; font-style: normal; }
.signature { align-self: flex-end; margin: 0.28rem 0 0; color: #755438; font-size: clamp(1rem, 1.12vw, 1.2rem); font-style: italic; font-weight: 600; }

.kickstarter-link {
  position: absolute;
  z-index: 4;
  right: -7%;
  bottom: -2.4%;
  left: -7%;
  height: 14.2%;
  padding: 0;
  overflow: visible;
  color: #3d2a1f;
  font-family: "Cinzel Decorative", Georgia, serif;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 999px;
  outline: 1px solid transparent;
  transition: filter 180ms, transform 180ms;
}

.fund-button-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.kickstarter-label {
  position: absolute;
  z-index: 2;
  inset: 14% 18% 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel Decorative", Georgia, serif;
  text-shadow: 0 1px rgb(255 226 165 / 72%);
}

.kickstarter-label > span {
  font-size: clamp(1rem, 1.24vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

.kickstarter-link:hover,
.kickstarter-link:focus-visible {
  filter: brightness(1.06) drop-shadow(0 5px 8px rgb(36 21 10 / 24%));
  outline-color: rgb(203 165 91 / 30%);
  transform: translateY(-1px);
}

.wisp-entry {
  position: fixed;
  z-index: 8;
  right: clamp(18px, 2.2vw, 36px);
  bottom: clamp(17px, 2.5vh, 31px);
  width: 44px;
  height: 44px;
  color: inherit;
  cursor: pointer;
  opacity: 0.55;
  background: transparent;
  border: 0;
  border-radius: 50%;
  outline: 1px solid transparent;
  transition: opacity 250ms, filter 250ms, transform 250ms;
}

.wisp-entry:hover,
.wisp-entry:focus-visible { opacity: 1; filter: drop-shadow(0 0 8px #9affdf); outline-color: rgb(177 245 224 / 38%); transform: translateY(-2px); }
.wisp-core { position: absolute; top: 15px; left: 20px; width: 4px; height: 7px; border-radius: 50%; background: #c9fff1; box-shadow: 0 0 5px #c9fff1, 0 0 13px #79d9c0; animation: wisp-pulse 2.7s ease-in-out infinite; }
.wisp-wing { position: absolute; top: 13px; width: 10px; height: 7px; background: rgb(160 237 218 / 8%); border: 1px solid rgb(197 255 240 / 72%); box-shadow: inset 0 0 4px rgb(201 255 242 / 28%); }
.wisp-wing-left { left: 10px; border-radius: 90% 12% 72% 20%; transform: rotate(18deg); }
.wisp-wing-right { right: 10px; border-radius: 12% 90% 20% 72%; transform: rotate(-18deg); }
.wisp-trail { position: absolute; top: 22px; left: 21px; width: 10px; height: 12px; border-bottom: 1px solid rgb(186 255 236 / 58%); border-left: 1px solid rgb(186 255 236 / 42%); border-radius: 0 0 0 100%; transform: rotate(-18deg); }

.notice {
  position: fixed;
  z-index: 12;
  right: 50%;
  bottom: 24px;
  max-width: min(90vw, 480px);
  padding: 10px 18px;
  color: #f0ddb1;
  font-size: 0.88rem;
  cursor: pointer;
  background: rgb(21 34 32 / 94%);
  border: 1px solid rgb(218 191 128 / 50%);
  border-radius: 999px;
  box-shadow: 0 12px 26px rgb(0 0 0 / 35%);
  transform: translateX(50%);
  animation: notice-in 220ms ease-out;
}

.notice[hidden] { display: none; }

.portal-dialog {
  width: min(92vw, 380px);
  padding: 38px 38px 34px;
  color: #e8dfc6;
  background: radial-gradient(circle at 80% 0, rgb(114 150 105 / 18%), transparent 40%), linear-gradient(145deg, rgb(27 45 41 / 98%), rgb(12 25 25 / 99%));
  border: 1px solid rgb(175 207 145 / 28%);
  border-radius: 24px 8px;
  box-shadow: 0 35px 75px rgb(0 0 0 / 48%), inset 0 0 34px rgb(128 161 115 / 7%);
}

.portal-dialog::backdrop { backdrop-filter: blur(7px); background: rgb(5 13 14 / 72%); }
.portal-dialog::before { content: ""; position: absolute; inset: 7px; pointer-events: none; border: 1px solid rgb(203 225 169 / 8%); border-radius: 18px 5px; }
.portal-close { position: absolute; z-index: 2; top: 11px; right: 13px; width: 32px; height: 32px; color: #b7c4a5; font-size: 1.6rem; line-height: 1; cursor: pointer; background: transparent; border: 0; border-radius: 50%; outline: 1px solid transparent; }
.portal-close:hover, .portal-close:focus-visible { color: #f0e6c9; outline-color: rgb(190 223 168 / 32%); }
.portal-eyebrow { margin: 0 0 0.45rem; color: #96aa83; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.portal-dialog h2 { margin: 0 0 1.45rem; color: #f0e5c8; font-size: 1.55rem; font-weight: 650; letter-spacing: -0.02em; }
.portal-form { display: grid; gap: 15px; }
.portal-form label { display: grid; gap: 6px; }
.portal-form label span { color: #abb89d; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.portal-form input { width: 100%; height: 44px; padding: 0 12px; color: #f3ead2; background: rgb(5 15 15 / 45%); border: 1px solid rgb(182 207 154 / 22%); border-radius: 8px 3px; outline: 1px solid transparent; }
.portal-form input:focus { border-color: rgb(190 221 159 / 48%); outline-color: rgb(190 221 159 / 16%); box-shadow: 0 0 12px rgb(116 176 147 / 12%); }
.portal-form button { height: 46px; margin-top: 4px; color: #2d291d; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; background: linear-gradient(135deg, #d8c07e, #9dae70); border: 1px solid rgb(202 179 114 / 44%); border-radius: 8px 3px; transition: filter 160ms, transform 160ms; }
.portal-form button:hover, .portal-form button:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
.portal-form button:disabled { filter: none; transform: none; opacity: 0.7; cursor: default; }
.portal-error { margin: 0; color: #e7a99a; font-size: 0.78rem; line-height: 1.35; }
.portal-error[hidden] { display: none; }

@keyframes firefly { 0%, 100% { opacity: 0.25; transform: translate(0) scale(0.8); } 45% { opacity: 0.95; transform: translate(8px, -12px) scale(1.15); } 70% { opacity: 0.55; transform: translate(-3px, -6px) scale(0.9); } }
@keyframes forest-wisp-drift { 0%, 100% { opacity: 0.28; transform: translateY(7px) scale(0.78) rotate(-4deg); } 28% { opacity: 0.92; transform: translate(9px, -8px) scale(1.08) rotate(6deg); } 57% { opacity: 0.62; transform: translate(-5px, -18px) scale(0.9) rotate(-7deg); } 78% { opacity: 0.85; transform: translate(4px, -5px) scale(1) rotate(3deg); } }
@keyframes wisp-pulse { 50% { transform: scale(1.15); box-shadow: 0 0 8px #d9fff5, 0 0 17px #79d9c0; } }
@keyframes notice-in { from { opacity: 0; transform: translate(50%, 8px); } }

@media (max-width: 900px) {
  .world { min-height: 620px; }
  .tiff-wrap { bottom: 5%; left: 23%; width: min(41vw, 45vh, 430px); }
  .parchment-shell { top: 5.8%; right: 4%; width: min(57vw, 500px); }
  .parchment-content { inset-inline: 16.5%; }
  .announcement-copy { font-size: clamp(0.94rem, 1.95vw, 1.1rem); line-height: 1.27; }
}

@media (max-width: 640px) {
  .world { min-height: 560px; background-position: 25% center; }
  .world::before { background: linear-gradient(transparent 0 45%, rgb(6 14 15 / 26%) 100%); }
  .tiff-wrap { bottom: 5%; left: 24%; width: min(54vw, 39vh, 350px); }
  .parchment-shell { top: 7%; right: -3%; width: min(80vw, 420px); }
  .parchment-content { inset: 13% 16% 15%; }
  .eyebrow { font-size: clamp(0.38rem, 1.4vw, 0.5rem); }
  .parchment-content h2 { font-size: clamp(0.9rem, 3.35vw, 1.2rem); }
  .announcement-copy { font-size: clamp(0.72rem, 2.7vw, 0.92rem); line-height: 1.22; }
  .coming-soon { font-size: clamp(0.58rem, 2.05vw, 0.76rem); }
  .signature { font-size: clamp(0.66rem, 2.3vw, 0.84rem); }
  .kickstarter-link { bottom: -4%; }
  .kickstarter-label > span { font-size: clamp(0.68rem, 2.55vw, 0.9rem); }
  .wisp-entry { right: 8px; bottom: 8px; }
}

@media (max-height: 720px) and (min-width: 641px) {
  .parchment-shell { top: 3.5%; width: min(41vw, 61vh, 560px); }
  .parchment-content { inset-block: 12.5% 14%; }
  .flourish { margin-block: 0.4rem; }
  .announcement-copy { font-size: clamp(0.81rem, 1.82vh, 1.02rem); line-height: 1.22; }
  .announcement-copy-secondary { margin-top: 0.3rem; }
  .coming-soon { padding-top: 0.35rem; }
  .tiff-wrap { bottom: 4.5%; width: min(30vw, 47vh); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Mobile storybook experience */
.mobile-world {
  display: none;
}

@media (max-width: 700px) {
  :root {
    --mobile-forest-deep: #071315;
    --mobile-forest-mid: #102524;
    --mobile-parchment-ink: #3f3027;
    --mobile-parchment-heading: #3d291f;
    --mobile-magic: #c8fff0;
    --mobile-gold: #f5d57d;
  }

  html {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: none;
    background: var(--mobile-forest-deep);
  }

  body {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow: visible;
    overscroll-behavior-x: none;
    touch-action: pan-y;
    background: var(--mobile-forest-deep);
  }

  .desktop-world {
    display: none;
  }
  /* NOTE: .portal-dialog must NOT be force-hidden here. The mobile "follow the
     light" wisp opens this shared login dialog; a closed <dialog> is already
     hidden by the UA, and hiding it while open would lock scroll with nothing
     visible. */

  .mobile-world {
    position: relative;
    display: block;
    width: 100%;
    height: 1200vh;
    height: 1200svh;
    min-height: 6400px;
    color: #f4ead0;
  }

  .mobile-world.is-unlocked {
    height: 1200vh;
    height: 1200svh;
    min-height: 6400px;
  }

  .mobile-viewport {
    position: sticky;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 540px;
    overflow: clip;
    isolation: isolate;
    background:
      radial-gradient(circle at 50% 30%, rgb(65 116 96 / 24%), transparent 28%),
      linear-gradient(180deg, rgb(6 16 17 / 12%), rgb(6 18 18 / 28%) 52%, rgb(4 12 13 / 72%)),
      url("assets/big-tiff-forest.jpg") right center / auto 116% no-repeat,
      var(--mobile-forest-deep);
  }

  .mobile-viewport::before,
  .mobile-viewport::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
  }

  .mobile-viewport::before {
    background:
      linear-gradient(90deg, rgb(2 8 9 / 55%), transparent 21% 79%, rgb(2 8 9 / 58%)),
      radial-gradient(ellipse at 50% 115%, rgb(111 141 109 / 20%), transparent 55%);
    box-shadow: inset 0 0 18vw rgb(0 5 6 / 38%);
  }

  .mobile-viewport::after {
    z-index: 10;
    background: linear-gradient(180deg, rgb(1 7 8 / 32%), transparent 10% 89%, rgb(1 7 8 / 45%));
    opacity: 0.42;
  }

  .mobile-atmosphere {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .mobile-mist {
    position: absolute;
    width: 72vw;
    height: 24vw;
    border-radius: 50%;
    background: rgb(199 255 236 / 8%);
    filter: blur(18px);
    opacity: 0.65;
  }

  .mobile-mist-one {
    top: 36%;
    left: -24%;
    animation: mobile-mist-drift 13s ease-in-out infinite alternate;
  }

  .mobile-mist-two {
    right: -22%;
    bottom: 14%;
    animation: mobile-mist-drift 16s ease-in-out -7s infinite alternate-reverse;
  }

  .mobile-star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #e9fff8;
    box-shadow: 0 0 4px 2px #baffeb, 0 0 13px 6px rgb(118 234 205 / 34%);
    animation: mobile-star-pulse 3.8s ease-in-out infinite;
  }

  .mobile-star-one { top: 27%; left: 48%; }
  .mobile-star-two { top: 58%; left: 23%; animation-delay: -1.4s; }
  .mobile-star-three { top: 69%; right: 18%; animation-delay: -2.6s; }

  .mobile-tree-layer {
    position: absolute;
    z-index: 3;
    inset: 0;
    overflow: clip;
    pointer-events: none;
  }

  .mobile-tree {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
    filter: brightness(1.58) saturate(1.2) contrast(1.04) drop-shadow(0 0 18px rgb(0 4 5 / 55%));
    transform: translate3d(0, 0, 0);
    transform-origin: center center;
    will-change: transform;
  }

  .mobile-tree img {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
    user-select: none;
  }

  .mobile-tree-canopy {
    top: -1svh;
    height: auto;
    object-fit: contain;
  }

  .mobile-tree-left .mobile-tree-canopy {
    left: -18vw;
    width: 300vw;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 26%, transparent 52%);
    mask-image: linear-gradient(to bottom, #000 0 26%, transparent 52%);
  }

  .mobile-tree-right .mobile-tree-canopy {
    right: -10vw;
    width: 185vw;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 34%, transparent 62%);
    mask-image: linear-gradient(to bottom, #000 0 34%, transparent 62%);
  }

  .mobile-tree-trunk {
    top: 0;
    height: 128svh;
    width: auto;
    opacity: 0;
    will-change: opacity, transform;
  }

  .mobile-tree-left .mobile-tree-trunk {
    left: -3vw;
  }

  .mobile-tree-right .mobile-tree-trunk {
    right: -4vw;
  }

  .mobile-title {
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 7px 16px rgb(0 6 5 / 72%));
  }

  .mobile-title-opening {
    position: absolute;
    z-index: 4;
    top: clamp(76px, 12svh, 116px);
    left: 4%;
    width: 92%;
    max-width: 470px;
    transform-origin: center top;
  }

  .mobile-wisp-cue {
    position: absolute;
    z-index: 8;
    bottom: max(58px, 9svh);
    left: calc(50% - 43px);
    width: 86px;
    height: 96px;
    padding: 0;
    color: #d9fff3;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 50%;
    touch-action: manipulation;
  }

  .mobile-wisp-cue:focus-visible {
    outline: 2px solid var(--mobile-magic);
    outline-offset: 6px;
  }

  .mobile-wisp-halo,
  .mobile-wisp-body,
  .mobile-wisp-wing,
  .mobile-wisp-tail {
    position: absolute;
    display: block;
    pointer-events: none;
  }

  .mobile-wisp-halo {
    top: 10px;
    left: 26px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(215 255 247 / 32%), rgb(98 225 199 / 12%) 46%, transparent 70%);
    filter: blur(4px);
    animation: mobile-wisp-halo 2.2s ease-in-out infinite;
  }

  .mobile-wisp-body {
    top: 20px;
    left: 39px;
    width: 8px;
    height: 13px;
    border-radius: 60% 60% 48% 48%;
    background: radial-gradient(circle at 42% 30%, #fff 0 12%, #bdfff0 30%, #69d5bd 66%, transparent 72%);
    box-shadow: 0 0 7px 3px #a7f6e4, 0 0 20px 9px rgb(80 213 183 / 36%);
  }

  .mobile-wisp-wing {
    top: 19px;
    width: 18px;
    height: 11px;
    background: rgb(202 255 243 / 7%);
    border: 1px solid rgb(216 255 246 / 78%);
  }

  .mobile-wisp-wing-left {
    left: 20px;
    border-radius: 90% 16% 72% 25%;
    transform-origin: right center;
    animation: mobile-wing-left 480ms ease-in-out infinite alternate;
  }

  .mobile-wisp-wing-right {
    right: 20px;
    border-radius: 16% 90% 25% 72%;
    transform-origin: left center;
    animation: mobile-wing-right 480ms ease-in-out infinite alternate;
  }

  .mobile-wisp-tail {
    top: 31px;
    left: 40px;
    width: 17px;
    height: 26px;
    border-bottom: 1px solid rgb(188 255 238 / 55%);
    border-left: 1px solid rgb(188 255 238 / 48%);
    border-radius: 0 0 0 100%;
    filter: drop-shadow(0 0 4px #9ef3de);
    transform: rotate(-19deg);
  }

  .mobile-wisp-instruction {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    width: max-content;
    margin-inline: auto;
    color: #e8fff7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-shadow: 0 2px 8px #00100d;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-wisp-instruction::after {
    display: block;
    width: 8px;
    height: 8px;
    margin: 7px auto 0;
    content: "";
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    animation: mobile-arrow 1.5s ease-in-out infinite;
  }

  .mobile-tiff {
    position: absolute;
    z-index: 5;
    top: 27svh;
    left: 8%;
    width: 84%;
    max-width: 400px;
    margin: 0;
    opacity: 0;
    transform: translateY(34svh) scale(0.76);
    transform-origin: center top;
    pointer-events: none;
  }

  .mobile-tiff img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 13px rgb(1 8 7 / 58%));
  }

  .mobile-scroll-stage {
    position: absolute;
    z-index: 7;
    top: 66svh;
    left: 5%;
    width: 90%;
    max-width: 430px;
    opacity: 0;
    transform: translateY(32svh);
  }

  .mobile-closed-scroll {
    position: relative;
    z-index: 3;
    width: 100%;
    filter: drop-shadow(0 12px 13px rgb(1 7 6 / 48%));
  }

  .mobile-closed-scroll img {
    display: block;
    width: 100%;
    height: auto;
  }

  .mobile-pull-rig {
    position: absolute;
    z-index: 5;
    top: 64%;
    left: 50%;
    width: 116px;
    height: 134px;
    margin-left: -58px;
  }

  .mobile-pull-cord {
    position: absolute;
    top: -4px;
    left: 50%;
    width: 3px;
    height: 56px;
    margin-left: -1.5px;
    border-radius: 999px;
    background:
      repeating-linear-gradient(90deg, rgb(78 49 25 / 86%) 0 1px, rgb(191 151 86 / 88%) 1px 2px);
    box-shadow: 1px 0 rgb(248 216 149 / 30%);
    transform-origin: top;
  }

  .mobile-pull-tag {
    position: absolute;
    top: 44px;
    left: 50%;
    width: 104px;
    margin-left: -52px;
    min-height: 70px;
    padding: 16px 12px 10px;
    color: #4b3220;
    cursor: grab;
    background:
      linear-gradient(rgb(255 239 187 / 16%), transparent),
      #d7b86f;
    border: 1px solid #74502a;
    border-radius: 7px 7px 13px 13px;
    box-shadow:
      inset 0 0 0 2px rgb(255 238 178 / 32%),
      0 8px 13px rgb(0 5 4 / 36%);
    transform-origin: 50% -44px;
    touch-action: none;
  }

  .mobile-pull-tag::before,
  .mobile-pull-tag-knot {
    position: absolute;
    left: 50%;
    border-radius: 50%;
    content: "";
  }

  .mobile-pull-tag::before {
    top: 7px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background: #60401f;
    box-shadow: inset 0 1px 2px #291b0e, 0 0 0 2px rgb(241 209 137 / 50%);
  }

  .mobile-pull-tag-knot {
    top: -4px;
    width: 11px;
    height: 8px;
    margin-left: -5.5px;
    background: #98703a;
  }

  .mobile-pull-tag:active {
    cursor: grabbing;
  }

  .mobile-pull-tag:focus-visible {
    outline: 3px solid #d8fff3;
    outline-offset: 5px;
  }

  .mobile-pull-tag-label,
  .mobile-pull-tag-hint {
    display: block;
    font-family: "Cinzel Decorative", Georgia, serif;
    text-align: center;
    text-transform: uppercase;
  }

  .mobile-pull-tag-label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.11em;
  }

  .mobile-pull-tag-hint {
    margin-top: 3px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .mobile-unfurl {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
    will-change: clip-path, opacity;
  }

  .mobile-parchment {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    color: var(--mobile-parchment-ink);
    filter: drop-shadow(0 20px 22px rgb(0 4 4 / 48%));
  }

  .mobile-parchment-art {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
  }

  .mobile-parchment-copy {
    position: absolute;
    z-index: 2;
    inset: 12.5% 15.5% 12%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Cormorant Garamond", Georgia, serif;
  }

  .mobile-eyebrow {
    margin: clamp(42px, 9.8vw, 54px) 0 0.16rem;
    color: var(--mobile-parchment-heading);
    font-family: "Cinzel Decorative", Georgia, serif;
    font-size: clamp(0.46rem, 2vw, 0.62rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
  }

  .mobile-parchment-copy h2 {
    margin: 0;
    color: var(--mobile-parchment-heading);
    font-family: "Cinzel Decorative", Georgia, serif;
    font-size: clamp(1rem, 4.5vw, 1.35rem);
    line-height: 1.1;
    text-align: center;
  }

  .mobile-flourish {
    display: flex;
    align-items: center;
    width: 78%;
    margin: clamp(6px, 1.7vw, 10px) 0;
    color: #7c6940;
  }

  .mobile-flourish span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor);
  }

  .mobile-flourish span:last-child { transform: scaleX(-1); }
  .mobile-flourish b { margin: 0 7px; font-size: 0.42rem; }

  .mobile-parchment-copy > p:not(.mobile-eyebrow, .mobile-coming-soon, .mobile-signature) {
    width: 100%;
    margin: 0;
    font-size: clamp(0.77rem, 3.25vw, 0.98rem);
    font-weight: 600;
    line-height: 1.18;
    text-align: left;
  }

  .mobile-parchment-copy > p + p:not(.mobile-coming-soon, .mobile-signature) {
    margin-top: clamp(5px, 1.4vw, 9px);
  }

  .mobile-drop-cap {
    float: left;
    margin: -0.03em 0.06em 0 0;
    color: #687141;
    font-family: "Cinzel Decorative", Georgia, serif;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 0.78;
  }

  .mobile-coming-soon {
    margin: auto 0 0;
    color: #3d2a1f;
    font-family: "Cinzel Decorative", Georgia, serif;
    font-size: clamp(0.62rem, 2.55vw, 0.79rem);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
  }

  .mobile-coming-soon em {
    color: #5b653d;
    font-style: normal;
  }

  .mobile-signature {
    align-self: flex-end;
    margin: 4px 0 0;
    color: #755438;
    font-size: clamp(0.72rem, 2.8vw, 0.9rem);
    font-style: italic;
    font-weight: 700;
  }

  .mobile-fund-button {
    position: absolute;
    z-index: 4;
    right: -4%;
    bottom: -4.6%;
    left: -4%;
    height: 14.5%;
    padding: 0;
    color: #3d291f;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 999px;
  }

  .mobile-fund-button img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
  }

  .mobile-fund-button span {
    position: relative;
    z-index: 2;
    display: grid;
    height: 100%;
    padding-top: 1.5%;
    place-items: center;
    font-family: "Cinzel Decorative", Georgia, serif;
    font-size: clamp(0.72rem, 3.1vw, 0.96rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 1px rgb(255 230 172 / 70%);
    text-transform: uppercase;
  }

  .mobile-fund-button:focus-visible {
    outline: 3px solid var(--mobile-magic);
    outline-offset: 5px;
  }

  .mobile-title-finale {
    width: 86%;
    margin: 24px auto 0;
  }

  .mobile-world.is-unlocked .mobile-pull-tag {
    pointer-events: none;
  }

  .mobile-world.is-unlocked .mobile-unfurl {
    display: block;
  }

  .mobile-world-fallback {
    height: auto;
    min-height: 0;
  }

  .mobile-world-fallback .mobile-viewport {
    position: relative;
    height: auto;
    min-height: 1500px;
  }

  .mobile-world-fallback .mobile-wisp-cue,
  .mobile-world-fallback .mobile-closed-scroll,
  .mobile-world-fallback .mobile-pull-rig {
    display: none;
  }

  .mobile-world-fallback .mobile-tiff {
    top: 190px;
    opacity: 1;
    transform: none;
  }

  .mobile-world-fallback .mobile-scroll-stage {
    top: 540px;
    opacity: 1;
    transform: none;
  }

  .mobile-world-fallback .mobile-unfurl {
    position: relative;
    height: auto;
    overflow: visible;
    opacity: 1;
    clip-path: none;
    pointer-events: auto;
  }

  @keyframes mobile-mist-drift {
    to { transform: translate(34vw, -9vw) scale(1.18); opacity: 0.34; }
  }

  @keyframes mobile-star-pulse {
    50% { opacity: 0.32; transform: scale(0.7); }
  }

  @keyframes mobile-wisp-halo {
    50% { opacity: 0.44; transform: scale(1.34); }
  }

  @keyframes mobile-wing-left {
    to { transform: rotate(21deg) scaleX(0.72); }
  }

  @keyframes mobile-wing-right {
    to { transform: rotate(-21deg) scaleX(0.72); }
  }

  @keyframes mobile-arrow {
    50% { opacity: 0.35; transform: translateY(7px) rotate(45deg); }
  }
}

@media (max-width: 360px) {
  .mobile-parchment-copy {
    inset-inline: 15%;
  }

  .mobile-eyebrow {
    margin-top: 38px;
  }

  .mobile-parchment-copy > p:not(.mobile-eyebrow, .mobile-coming-soon, .mobile-signature) {
    font-size: clamp(0.72rem, 3.2vw, 0.82rem);
    line-height: 1.15;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .mobile-world {
    height: 1200svh;
  }

  .mobile-world.is-unlocked {
    height: 1200svh;
  }

  .mobile-mist,
  .mobile-star,
  .mobile-wisp-halo,
  .mobile-wisp-wing,
  .mobile-wisp-instruction::after {
    animation: none !important;
  }

  .mobile-wisp-cue {
    bottom: max(44px, 7svh);
  }
}

/* Mobile story 7: gesture-tracked forest reveal */
@media (max-width: 700px) {
  html.mobile-story-active,
  body.mobile-story-active {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .mobile-world,
  .mobile-world.is-unlocked {
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
  }

  .mobile-viewport {
    position: relative;
    top: auto;
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 28%, rgb(82 136 108 / 20%), transparent 31%),
      linear-gradient(180deg, rgb(5 13 15 / 9%), rgb(4 13 15 / 23%) 56%, rgb(3 10 12 / 62%)),
      url("assets/big-tiff-forest.jpg") 72% center / auto 116% no-repeat,
      var(--mobile-forest-deep);
  }

  .mobile-viewport::before {
    z-index: 2;
    background:
      linear-gradient(90deg, rgb(1 7 8 / 38%), transparent 18% 82%, rgb(1 7 8 / 42%)),
      radial-gradient(ellipse at 50% 112%, rgb(95 130 99 / 15%), transparent 58%);
    box-shadow: inset 0 0 13vw rgb(0 5 6 / 33%);
  }

  .mobile-viewport::after {
    z-index: 20;
    background: linear-gradient(180deg, rgb(1 7 8 / 23%), transparent 9% 91%, rgb(1 7 8 / 42%));
    opacity: 0.34;
  }

  .mobile-tree-layer {
    z-index: 5;
    overflow: hidden;
  }

  .mobile-tree {
    filter: drop-shadow(0 7px 16px rgb(0 4 5 / 62%));
  }

  .mobile-tree img {
    top: -6svh;
    max-width: none;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
  }

  .mobile-tree-left .mobile-tree-trunk {
    right: auto;
    left: -8vw;
  }

  .mobile-tree-right .mobile-tree-trunk {
    right: -8vw;
    left: auto;
  }

  .mobile-tree-left .mobile-tree-canopy {
    right: auto;
    left: -65vw;
  }

  .mobile-tree-right .mobile-tree-canopy {
    right: -65vw;
    left: auto;
  }

  .mobile-tree-canopy {
    width: 230vw !important;
    height: auto;
    object-fit: contain;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .mobile-tree-trunk {
    width: auto;
    height: 108svh;
    opacity: 0.32;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0 24%, rgb(0 0 0 / 90%) 34%, #000 42% 100%);
    mask-image: linear-gradient(to bottom, transparent 0 24%, rgb(0 0 0 / 90%) 34%, #000 42% 100%);
  }

  .mobile-stage-three-shade {
    position: absolute;
    z-index: 3;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, transparent 0 26%, rgb(5 14 14 / 20%) 34%, rgb(4 12 11 / 82%) 72%, rgb(2 8 8 / 95%) 100%);
    will-change: opacity;
  }

  .mobile-forest-floor {
    position: absolute;
    z-index: 4;
    top: 16svh;
    left: 50%;
    display: block;
    width: 126vw;
    max-width: none;
    height: auto;
    opacity: 0;
    filter: brightness(1.04) saturate(0.94) drop-shadow(0 -8px 18px rgb(0 4 4 / 28%));
    transform: translate3d(-50%, 18svh, 0) scale(0.9);
    transform-origin: 50% 0;
    pointer-events: none;
    will-change: transform, opacity;
  }

  .mobile-title-opening {
    z-index: 8;
    top: max(calc(env(safe-area-inset-top) + 20px), 7.5svh);
    left: 5%;
    width: 90%;
    max-width: none;
  }

  .mobile-wisp-cue {
    z-index: 12;
    right: auto;
    bottom: max(calc(env(safe-area-inset-bottom) + 24px), 6svh);
    left: 50%;
    margin-left: -43px;
  }

  .mobile-tiff {
    z-index: 7;
    top: 26svh;
    left: 8%;
    width: 84%;
    max-width: none;
    transform-origin: center top;
  }

  .mobile-scroll-stage {
    z-index: 9;
    top: 64svh;
    left: 4%;
    width: 92%;
    max-width: none;
    transform-origin: center top;
    will-change: transform, opacity;
  }

  .mobile-closed-scroll,
  .mobile-pull-rig,
  .mobile-unfurl {
    will-change: opacity, transform, clip-path;
  }

  .mobile-parchment {
    aspect-ratio: 3 / 4;
  }

  .mobile-title-finale {
    position: relative;
    z-index: 6;
    width: 84%;
    margin: clamp(12px, 2svh, 22px) auto max(calc(env(safe-area-inset-bottom) + 5px), 8px);
    filter: drop-shadow(0 7px 15px rgb(0 4 4 / 72%));
  }

  .mobile-world-fallback {
    height: auto;
    min-height: 1500px;
    overflow: visible;
    touch-action: pan-y;
  }
}

@media (max-width: 390px) and (max-height: 700px) {
  .mobile-tiff {
    top: 24svh;
  }

  .mobile-scroll-stage {
    top: 62svh;
  }

  .mobile-parchment-copy > p:not(.mobile-eyebrow, .mobile-coming-soon, .mobile-signature) {
    font-size: clamp(0.68rem, 3vw, 0.78rem);
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .mobile-tree img,
  .mobile-forest-floor,
  .mobile-title-opening,
  .mobile-tiff,
  .mobile-scroll-stage {
    transition: none !important;
  }
}

/* Mobile story 8: deep forest framing and coordinated reveal */
@media (max-width: 700px) {
  .mobile-viewport {
    background:
      radial-gradient(circle at 50% 35%, rgb(35 83 67 / 12%), transparent 34%),
      linear-gradient(180deg, rgb(2 10 12 / 28%), rgb(2 10 11 / 18%) 50%, rgb(2 8 9 / 48%)),
      url("assets/mobile-forest-portrait-v2.webp") center / cover no-repeat,
      var(--mobile-forest-deep);
  }

  .mobile-viewport::before {
    z-index: 2;
    background:
      linear-gradient(90deg, rgb(1 7 8 / 44%), transparent 20% 80%, rgb(1 7 8 / 48%)),
      linear-gradient(180deg, rgb(1 7 8 / 24%), transparent 16% 76%, rgb(1 7 8 / 46%)),
      radial-gradient(ellipse at 50% 103%, rgb(83 115 82 / 12%), transparent 55%);
    box-shadow: inset 0 0 16vw rgb(0 4 5 / 36%);
  }

  .mobile-tree-layer-secondary {
    z-index: 4;
    filter: saturate(0.82) brightness(0.64);
  }

  .mobile-tree-layer-primary {
    z-index: 6;
  }

  .mobile-secondary-tree,
  .mobile-secondary-canopy {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
  }

  .mobile-secondary-tree {
    top: -2svh;
    width: auto;
    height: 112svh;
    opacity: 0.06;
    filter: drop-shadow(0 8px 18px rgb(0 3 4 / 68%));
  }

  .mobile-secondary-tree-left {
    left: -24vw;
  }

  .mobile-secondary-tree-right {
    right: -24vw;
  }

  .mobile-secondary-canopy {
    top: -2svh;
    width: 228vw;
    opacity: 0.86;
  }

  .mobile-secondary-canopy-left {
    left: -86vw;
  }

  .mobile-secondary-canopy-right {
    right: -86vw;
  }

  .mobile-tree img {
    top: -9svh;
  }

  .mobile-tree-left .mobile-tree-canopy {
    right: auto;
    left: -74vw;
  }

  .mobile-tree-right .mobile-tree-canopy {
    right: -74vw;
    left: auto;
  }

  .mobile-tree-canopy {
    width: 252vw !important;
    filter: saturate(0.94) brightness(0.78) drop-shadow(0 13px 20px rgb(0 3 4 / 62%));
  }

  .mobile-tree-trunk {
    width: auto;
    height: 124svh;
    opacity: 0.18;
    filter: saturate(0.9) brightness(0.82);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0 20%, rgb(0 0 0 / 78%) 28%, #000 37% 100%);
    mask-image: linear-gradient(to bottom, transparent 0 20%, rgb(0 0 0 / 78%) 28%, #000 37% 100%);
  }

  .mobile-tree-left .mobile-tree-trunk {
    right: auto;
    left: -39vw;
  }

  .mobile-tree-right .mobile-tree-trunk {
    right: -39vw;
    left: auto;
  }

  .mobile-tree-edge-layer {
    position: absolute;
    z-index: 10;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0 14%, transparent 21% 79%, #000 86% 100%);
    mask-image: linear-gradient(90deg, #000 0 14%, transparent 21% 79%, #000 86% 100%);
  }

  .mobile-tree-edge {
    position: absolute;
    top: -9svh;
    width: auto;
    max-width: none;
    height: 124svh;
    opacity: 0;
    filter: saturate(0.96) brightness(0.92) drop-shadow(0 7px 14px rgb(0 3 4 / 62%));
    transform-origin: center center;
    will-change: transform, opacity;
  }

  .mobile-tree-edge-left {
    left: -39vw;
  }

  .mobile-tree-edge-right {
    right: -39vw;
  }

  .mobile-title-opening {
    z-index: 12;
    top: max(calc(env(safe-area-inset-top) + 17px), 6.6svh);
    left: 14%;
    width: 72%;
  }

  .mobile-wisp-cue {
    z-index: 14;
    right: auto;
    bottom: max(calc(env(safe-area-inset-bottom) + 22px), 5.5svh);
    left: 0;
    width: 100%;
    height: 108px;
    margin-left: 0;
  }

  .mobile-wisp-anchor {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 164px;
    height: 108px;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .mobile-wisp-halo { left: 65px; }
  .mobile-wisp-body { left: 78px; }
  .mobile-wisp-wing-left { left: 59px; }
  .mobile-wisp-wing-right { right: 59px; }
  .mobile-wisp-tail { left: 79px; }

  .mobile-tiff {
    z-index: 8;
    top: 25.5svh;
    left: 14%;
    width: 72%;
  }

  .mobile-tiff-perch {
    position: absolute;
    z-index: 0;
    right: 12%;
    bottom: 0.5%;
    left: 12%;
    display: block;
    height: 17%;
    opacity: 0.88;
    background:
      linear-gradient(180deg, rgb(45 72 48 / 4%), rgb(26 54 37 / 92%)),
      url("assets/mobile-forest-floor.webp") center 70% / 170% auto no-repeat;
    border-radius: 50%;
    filter: drop-shadow(0 10px 11px rgb(0 5 5 / 50%));
    transform: perspective(280px) rotateX(64deg);
    transform-origin: center bottom;
    -webkit-mask-image: radial-gradient(ellipse, #000 28%, rgb(0 0 0 / 78%) 55%, transparent 75%);
    mask-image: radial-gradient(ellipse, #000 28%, rgb(0 0 0 / 78%) 55%, transparent 75%);
  }

  .mobile-tiff img {
    position: relative;
    z-index: 1;
  }

  .mobile-scroll-stage {
    z-index: 9;
    top: 63.5svh;
    left: 8%;
    width: 84%;
  }

  .mobile-closed-scroll {
    overflow: visible;
  }

  .mobile-cord-wrap,
  .mobile-cord-knot {
    position: absolute;
    z-index: 5;
    display: block;
    pointer-events: none;
  }

  .mobile-cord-wrap {
    top: 6%;
    width: 7px;
    height: 82%;
    border-right: 2px solid rgb(74 43 20 / 92%);
    border-left: 2px solid rgb(208 158 81 / 76%);
    border-radius: 48%;
    box-shadow: 1px 0 rgb(255 220 151 / 20%), -1px 0 rgb(34 20 9 / 36%);
  }

  .mobile-cord-wrap-left {
    left: calc(50% - 7px);
    transform: rotate(1.5deg);
  }

  .mobile-cord-wrap-right {
    right: calc(50% - 7px);
    transform: rotate(-1.5deg);
  }

  .mobile-cord-knot {
    bottom: 17%;
    left: 50%;
    width: 13px;
    height: 10px;
    margin-left: -6.5px;
    background: #8f6635;
    border: 1px solid #4b3018;
    border-radius: 52% 48% 58% 42%;
    box-shadow: inset 0 1px #d2a261;
  }

  .mobile-pull-rig {
    top: 60%;
  }

  .mobile-pull-cord {
    top: -1px;
    height: 61px;
  }

  .mobile-parchment {
    aspect-ratio: 3 / 4;
  }

  .mobile-parchment-copy {
    inset: 16.5% 18.5% 13.5%;
  }

  .mobile-eyebrow {
    margin: clamp(26px, 7vw, 37px) 0 0.18rem;
    font-size: clamp(0.48rem, 2.05vw, 0.62rem);
    letter-spacing: 0.12em;
  }

  .mobile-parchment-copy h2 {
    font-size: clamp(1.02rem, 4.3vw, 1.3rem);
    line-height: 1.12;
  }

  .mobile-flourish {
    width: 72%;
    margin: clamp(5px, 1.35vw, 8px) 0;
  }

  .mobile-parchment-copy > p:not(.mobile-eyebrow, .mobile-coming-soon, .mobile-signature) {
    max-width: 100%;
    font-size: clamp(0.88rem, 3.7vw, 1rem);
    font-weight: 600;
    line-height: 1.22;
    overflow-wrap: break-word;
  }

  .mobile-parchment-copy > p + p:not(.mobile-coming-soon, .mobile-signature) {
    margin-top: clamp(6px, 1.45vw, 9px);
  }

  .mobile-coming-soon {
    max-width: 96%;
    margin: auto auto 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(0.94rem, 3.8vw, 1.06rem);
    line-height: 1.14;
    letter-spacing: 0.035em;
  }

  .mobile-signature {
    margin-top: 5px;
    font-size: clamp(0.78rem, 3vw, 0.92rem);
  }

  .mobile-fund-button {
    right: -2%;
    bottom: -4%;
    left: -2%;
    height: 13.8%;
  }

  .mobile-fund-button span {
    font-size: clamp(0.72rem, 3vw, 0.94rem);
  }

  .mobile-forest-floor {
    z-index: 4;
    top: 10svh;
    width: 146vw;
  }

  .mobile-title-finale {
    z-index: 12;
    width: 78%;
    margin: clamp(8px, 1.2svh, 14px) auto max(calc(env(safe-area-inset-bottom) + 13px), 18px);
  }
}

@media (max-width: 390px) and (max-height: 760px) {
  .mobile-scroll-stage {
    top: 62svh;
  }

  .mobile-parchment-copy {
    inset-inline: 17.5%;
  }

  .mobile-parchment-copy > p:not(.mobile-eyebrow, .mobile-coming-soon, .mobile-signature) {
    font-size: clamp(0.78rem, 3.35vw, 0.88rem);
  }
}

/* Mobile story 9: restored tree frame and Stage 3 private entrance */
@media (max-width: 700px) {
  .mobile-tree-left .mobile-tree-trunk,
  .mobile-tree-edge-left {
    right: auto;
    left: -14vw;
  }

  .mobile-tree-right .mobile-tree-trunk,
  .mobile-tree-edge-right {
    right: -14vw;
    left: auto;
  }

  .mobile-tree-trunk {
    opacity: 0.46;
    filter: saturate(0.98) brightness(1.02) drop-shadow(0 8px 15px rgb(0 3 4 / 66%));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0 18%, rgb(0 0 0 / 86%) 27%, #000 35% 100%);
    mask-image: linear-gradient(to bottom, transparent 0 18%, rgb(0 0 0 / 86%) 27%, #000 35% 100%);
  }

  .mobile-secondary-tree-left {
    left: -18vw;
  }

  .mobile-secondary-tree-right {
    right: -18vw;
  }

  .mobile-tree-edge-layer {
    -webkit-mask-image: linear-gradient(90deg, #000 0 18%, transparent 25% 75%, #000 82% 100%);
    mask-image: linear-gradient(90deg, #000 0 18%, transparent 25% 75%, #000 82% 100%);
  }

  .mobile-tree-edge {
    filter: saturate(1.02) brightness(1.04) drop-shadow(0 7px 14px rgb(0 3 4 / 68%));
  }

  .mobile-finale-coming-soon {
    position: relative;
    z-index: 12;
    margin: clamp(18px, 2.8svh, 30px) auto 0;
    color: rgb(231 238 207 / 88%);
    font-family: "Cinzel Decorative", Georgia, serif;
    font-size: clamp(0.68rem, 2.9vw, 0.88rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 2px 8px #00100d, 0 0 14px rgb(170 225 185 / 18%);
    text-transform: uppercase;
  }

  .mobile-title-finale {
    width: 72%;
    margin: clamp(8px, 1.3svh, 14px) auto max(calc(env(safe-area-inset-bottom) + 4px), 8px);
  }

  .mobile-login-wisp {
    position: absolute;
    z-index: 19;
    right: max(calc(env(safe-area-inset-right) + 9px), 11px);
    bottom: max(calc(env(safe-area-inset-bottom) + 8px), 10px);
    width: 96px;
    height: 70px;
    padding: 0;
    color: #dffcf2;
    cursor: pointer;
    background: transparent;
    border: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 12px, 0);
    will-change: opacity, transform;
  }

  .mobile-login-wisp:focus-visible {
    outline: 2px solid rgb(217 255 244 / 82%);
    outline-offset: 2px;
    border-radius: 12px;
  }

  .mobile-login-wisp-halo,
  .mobile-login-wisp-core,
  .mobile-login-wisp-wing,
  .mobile-login-wisp-trail {
    position: absolute;
    display: block;
    pointer-events: none;
  }

  .mobile-login-wisp-halo {
    top: 9px;
    left: 50%;
    width: 31px;
    height: 31px;
    margin-left: -15.5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(219 255 244 / 72%) 0 4%, rgb(112 242 207 / 24%) 24%, transparent 68%);
    filter: blur(1px);
    animation: mobile-wisp-halo 2.8s ease-in-out infinite;
  }

  .mobile-login-wisp-core {
    top: 20px;
    left: 50%;
    width: 8px;
    height: 10px;
    margin-left: -4px;
    border-radius: 52% 48% 62% 38%;
    background: #d9fff5;
    box-shadow: 0 0 5px #a9ffe8, 0 0 13px rgb(94 238 200 / 68%);
  }

  .mobile-login-wisp-wing {
    top: 18px;
    width: 18px;
    height: 8px;
    border: 1px solid rgb(222 255 247 / 76%);
    border-radius: 60% 40% 64% 36%;
  }

  .mobile-login-wisp-wing-left {
    right: calc(50% + 4px);
    transform: rotate(15deg);
  }

  .mobile-login-wisp-wing-right {
    left: calc(50% + 4px);
    transform: rotate(-15deg);
  }

  .mobile-login-wisp-trail {
    top: 28px;
    left: 50%;
    width: 17px;
    height: 18px;
    border-bottom: 1px solid rgb(211 255 243 / 65%);
    border-left: 1px solid rgb(211 255 243 / 65%);
    border-radius: 0 0 0 90%;
    transform: rotate(-18deg);
  }

  .mobile-login-wisp-label {
    /* Hidden per request: bottom login wisp shows just the icon, no text label. */
    display: none;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .mobile-login-wisp-halo {
    animation: none;
  }
}

/* ===== Mobile announcement redesign (requested tweaks) ===== */
@media (max-width: 700px) {
  /* Slightly wider copy area so the enlarged logo + body fit with safe margins. */
  .mobile-parchment-copy {
    inset: 13% 15.5% 15%;
  }

  /* "The world is opening…" fixed 12px, centered in the middle of the curl roll
     (id beats the old .mobile-parchment-copy h2 sizing). */
  #mobile-announcement-title.mobile-curl-line {
    margin: -16px 0 0;
    font-family: "Cinzel Decorative", Georgia, serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    color: var(--mobile-parchment-heading);
  }

  /* Big Tiff's World title: dropped below the curl (clear of its drop shadow),
     scaled to fill the parchment width with safe margins. */
  .mobile-parchment-title {
    display: block;
    width: 86%;
    margin: 30px auto 2px;
  }

  /* Body text: readable, and clamps down on narrow phones so both paragraphs
     still fit under the logo. */
  .mobile-parchment-copy > p:not(.mobile-eyebrow, .mobile-coming-soon, .mobile-signature) {
    font-size: clamp(0.85rem, 3.5vw, 0.95rem);
    line-height: 1.18;
  }
  .mobile-flourish {
    margin: 3px 0;
  }

  /* Fund-button label: one size smaller than before. */
  .mobile-fund-button span {
    font-size: clamp(0.8rem, 3.4vw, 0.92rem);
    letter-spacing: 0.03em;
  }

  /* "The first book…" (with signature) sits a stable distance below the fund
     button — narrow and in the wide part of the clearing so it never drifts
     into the tree trunks or under the mobile browser toolbar on taller phones. */
  .mobile-ground-coming-soon {
    margin: 84px auto 0;
    max-width: 66%;
    color: #ffffff;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.16rem, 4.9vw, 1.36rem);
    line-height: 1.16;
    text-align: center;
    text-shadow: 0 1px 7px #001410;
  }
  .mobile-ground-coming-soon em { font-style: italic; }
  .mobile-ground-sig {
    display: block;
    margin-top: 4px;
    font-style: italic;
    font-size: 0.82em;
  }
}