.story-ueber { background: var(--linen); }

.story-hero {
  display: grid;
  grid-template-columns: minmax(18rem, 0.86fr) 1.14fr;
  min-height: min(92svh, 880px);
  background: var(--plaster);
  position: relative;
  overflow: hidden;
}
.story-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2.2rem, 6vh, 4rem) clamp(1.4rem, 4.5vw, 3.2rem);
}
.story-hero-copy .page-mark {
  width: 6.6rem;
  margin: 1.7rem auto 0;
}
.story-hi {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.05vw, 1.48rem);
  line-height: 1.48;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 auto 0.85rem;
  max-width: 24rem;
}
.story-hero h1 {
  font-family: "WindSong", "Segoe Script", cursive;
  font-weight: 400;
  font-size: clamp(2.35rem, 4.4vw, 3.55rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
  max-width: 12em;
  margin: 0 auto 1.2rem;
  position: relative;
}
.story-hello {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.05vw, 1.48rem);
  line-height: 1.48;
  max-width: 24rem;
  color: var(--ink);
  margin: 0 auto;
}
.story-hero-visual {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--dust);
}
.story-hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 108%;
  object-fit: cover;
  object-position: 58% 22%;
  transition: transform 1.1s ease;
}

.story-open {
  background: var(--paper);
  padding: clamp(4.2rem, 10vw, 7rem) var(--gutter);
  border-top: 1px solid color-mix(in srgb, var(--dust) 55%, transparent);
}
.story-open-inner {
  width: min(40rem, 100%);
  margin: 0 auto;
}
.story-open-title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.38rem, 2.4vw, 1.85rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--ink);
  text-align: center;
}
.story-dot,
.ask-mark {
  display: block;
  position: relative;
  width: min(7.2rem, 38vw);
  height: 11px;
  margin: 0 auto 1.85rem;
}
.story-dot::before,
.ask-mark::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--brick) 50%, var(--clay));
}
.story-dot::after,
.ask-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--brick);
  border-radius: 50%;
  background: var(--paper);
  transform: translate(-50%, -50%);
}
.story-open-body {
  text-align: left;
}
.story-open-body p { max-width: none; }
.story-open-body > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 400;
  float: left;
  font-size: 3.35rem;
  line-height: 0.78;
  padding: 0.12rem 0.4rem 0 0;
  color: var(--brick);
}

.story-block {
  width: min(40rem, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: clamp(3.4rem, 8vw, 5.4rem) 0;
}

.story-vision {
  margin: 1.55rem 0 1.7rem;
  padding: 0.15rem 0 0.15rem 1.2rem;
  border-left: 2px solid var(--brick);
}
.story-vision p {
  margin-bottom: 0.75rem;
}
.story-vision p:last-child { margin-bottom: 0; }
.story-vision p:first-child {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.22rem, 2vw, 1.48rem);
  line-height: 1.35;
  color: var(--brick);
  max-width: none;
}

.story-quote {
  background: var(--dust);
  padding: clamp(2.4rem, 5.5vw, 3.6rem) var(--gutter);
}
.story-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.32rem, 2.5vw, 1.9rem);
  line-height: 1.38;
  width: min(24rem, 100%);
  margin: 0 auto;
  color: var(--ink);
  text-align: center;
  max-width: none;
}
.qmark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.45em;
  line-height: 0;
  color: var(--brick);
  vertical-align: -0.08em;
}
.qmark-open { margin-right: 0.12em; }
.qmark-close { margin-left: 0.12em; }

.story-split {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  min-height: min(88svh, 820px);
  background: var(--linen);
}
.story-split-visual {
  position: relative;
  min-height: 36rem;
  overflow: hidden;
  background: var(--dust);
}
.story-split-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 108%;
  object-fit: cover;
  object-position: 48% 62%;
  transition: transform 1.1s ease;
}
.story-split-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.2rem, 6vw, 4.2rem) clamp(1.6rem, 5vw, 3.6rem);
  max-width: 38rem;
}

.story-bleed {
  position: relative;
  margin: 0;
  min-height: min(78svh, 740px);
  overflow: hidden;
  background: var(--cacao);
}
.story-bleed-tick {
  position: absolute;
  left: var(--gutter);
  bottom: 1.6rem;
  width: 2.2rem;
  height: 2.2rem;
  border-left: 1.5px solid color-mix(in srgb, var(--paper) 72%, transparent);
  border-bottom: 1.5px solid color-mix(in srgb, var(--paper) 72%, transparent);
  pointer-events: none;
}
.story-bleed img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 108%;
  object-fit: cover;
  object-position: 50% 16%;
  transition: transform 1.1s ease;
}

.story-places {
  background: var(--plaster);
  padding: clamp(3.6rem, 8vw, 5.8rem) 0 clamp(3.2rem, 7vw, 5.2rem);
  border-block: 1px solid color-mix(in srgb, var(--brick) 12%, transparent);
  overflow: hidden;
}
.story-places > p {
  width: min(42rem, calc(100% - 2 * var(--gutter)));
  margin: 0 auto 0.4rem;
  font-size: 1.28rem;
  line-height: 1.62;
}

.place-show {
  --focus-scale: 1.14;
  --t: 15s;
  width: min(84rem, calc(100% - 2 * var(--gutter)));
  margin: 2.2rem auto 0;
  overflow: hidden;
  perspective: 1400px;
}
.place-frame {
  --frame-h: min(30rem, 64svh);
  position: relative;
  overflow: hidden;
  height: var(--frame-h);
  touch-action: pan-y;
}
.place-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(18.5rem, 26%);
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: var(--dust);
  transform: translate(-50%, -50%) scale(0.55);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  backface-visibility: hidden;
  filter: blur(4px) brightness(0.9) saturate(0.86);
}
.place-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.place-card.is-on {
  opacity: 1;
  z-index: 6;
  pointer-events: auto;
  filter: drop-shadow(0 22px 44px color-mix(in srgb, var(--cacao) 24%, transparent)) blur(0) brightness(1) saturate(1);
  transform: translate(-50%, -50%) scale(var(--focus-scale));
}
.place-card.is-prev2,
.place-card.is-next2,
.place-card.is-prev,
.place-card.is-next {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}
.place-card.is-far-left,
.place-card.is-far-right {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition: none;
}
.place-card.is-far-left {
  transform: translate(-50%, -50%) translateX(-110%) scale(0.62);
}
.place-card.is-far-right {
  transform: translate(-50%, -50%) translateX(110%) scale(0.62);
}
.place-card.is-prev2 {
  z-index: 2;
  transform: translate(-50%, -50%) translateX(-162%) scale(0.64);
}
.place-card.is-prev {
  z-index: 3;
  transform: translate(-50%, -50%) translateX(-102%) scale(0.78);
}
.place-card.is-next {
  z-index: 3;
  transform: translate(-50%, -50%) translateX(102%) scale(0.78);
}
.place-card.is-next2 {
  z-index: 2;
  transform: translate(-50%, -50%) translateX(162%) scale(0.64);
}

.place-words {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  list-style: none;
  width: min(44rem, 100%);
  margin: 1.15rem auto 0;
  padding: 0;
  text-align: center;
}
.place-words button {
  appearance: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0.35rem 0.15rem;
  min-height: 44px;
  width: 100%;
  cursor: pointer;
}
.place-words button[aria-current="true"] { color: var(--ink); }
.place-words button:hover { color: var(--brick); }

.place-track {
  position: relative;
  width: min(44rem, 100%);
  height: 36px;
  margin: 0 auto;
}
.place-draw {
  position: absolute;
  left: 10%;
  width: 80%;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--brick) 55%, var(--clay));
}
.place-dot {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--brick);
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: pointer;
  appearance: none;
}
.place-dot.d1 { left: 10%; }
.place-dot.d2 { left: 26%; }
.place-dot.d3 { left: 42%; }
.place-dot.d4 { left: 58%; }
.place-dot.d5 { left: 74%; }
.place-dot.d6 { left: 90%; }
.place-dot::before {
  content: "";
  position: absolute;
  inset: -14px;
}
.place-dot[aria-current="true"] { background: var(--brick); }
.place-core,
.return-core {
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  pointer-events: none;
}
.place-core {
  background: var(--brick);
  opacity: 0;
}
.return-core { background: var(--brick); }
.place-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--brick);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
}
.place-pulse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--brick);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.place-dot.is-home .place-core { opacity: 1; }
.place-traveler {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brick);
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}

html.js .place-draw { width: 0; }
html.js .place-dot {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
}
html.js .place-words li {
  opacity: 0;
  transform: translateY(0.4rem);
}
html.js .place-traveler { opacity: 0; }

html.js .place-dot.is-shown,
html.js .place-show.is-built .place-dot {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
html.js .place-words li.is-shown,
html.js .place-show.is-built .place-words li {
  opacity: 1;
  transform: none;
}
html.js .place-show.is-built .place-draw { width: 80%; }
html.js .place-show.is-built .place-traveler { opacity: 1; }
html.js .place-show.is-flowing .place-card,
html.js .place-show.is-flowing .place-draw,
html.js .place-show.is-flowing .place-traveler {
  transition: none;
}

.story-ask {
  background: var(--dust);
  text-align: center;
  padding: clamp(2.8rem, 6.5vw, 4.2rem) var(--gutter);
}
.ask-mark {
  margin: 1.25rem auto 0;
}
.story-ask .ask-mark::after { background: var(--dust); }
.story-ask p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.48rem, 3vw, 2.2rem);
  line-height: 1.28;
  width: min(22rem, 100%);
  margin: 0 auto;
  color: var(--ink);
  max-width: none;
}

.story-band-paper { background: var(--paper); }
.story-band-paper .story-block {
  padding-top: clamp(3.2rem, 7vw, 4.8rem);
  padding-bottom: clamp(2.8rem, 6vw, 4.2rem);
}

.story-return {
  --rt: 7s;
  background: var(--plaster);
  padding: clamp(4rem, 9vw, 6.2rem) var(--gutter) clamp(3.4rem, 7vw, 5.2rem);
  border-block: 1px solid color-mix(in srgb, var(--brick) 12%, transparent);
}
.story-return-inner {
  width: min(40rem, 100%);
  margin: 0 auto;
}
.story-return-title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.38rem, 2.4vw, 1.85rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--ink);
  text-align: center;
}
.story-return .story-dot::after { background: var(--plaster); }
.story-return-inner > p { max-width: none; }
.story-return-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.12rem, 1.9vw, 1.32rem);
  line-height: 1.4;
  text-align: center;
  color: var(--brick);
  margin: 2.1rem auto 0;
}
.story-return-inner { padding-bottom: 3.2rem; }
.return-stage {
  width: min(44rem, 100%);
  margin: 0 auto;
}
.return-words {
  list-style: none;
  position: relative;
  height: 2.9rem;
  margin: 0;
  padding: 0;
}
.return-words li {
  position: absolute;
  top: 0;
  width: 7.4rem;
  margin: 0;
  padding: 0 0.1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.78rem, 1.55vw, 0.98rem);
  line-height: 1.28;
  text-align: center;
  color: var(--ink);
  transform: translateX(-50%);
}
.return-words li:nth-child(1) { left: 10%; }
.return-words li:nth-child(2) { left: 36.666%; }
.return-words li:nth-child(3) { left: 63.333%; }
.return-words li:nth-child(4) { left: 90%; }
.return-track {
  position: relative;
  height: 36px;
  margin: 0 auto;
}
.return-draw {
  position: absolute;
  left: 10%;
  width: 80%;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--brick) 55%, var(--clay));
}
.return-dot {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--brick);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.return-dot.d1 { left: 10%; }
.return-dot.d2 { left: 36.666%; }
.return-dot.d3 { left: 63.333%; }
.return-dot.d4 { left: 90%; }
.return-traveler {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brick);
  transform: translate(-50%, -50%);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}
.return-core {
  background: var(--brick);
}
.return-dot.d4::before,
.return-dot.d4::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--brick);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
}

html.js .return-draw { width: 0; }
html.js .return-dot {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
}
html.js .return-words li {
  opacity: 0;
  transform: translate(-50%, 0.4rem);
}

.story-origin {
  background: var(--paper);
  padding: clamp(4rem, 9vw, 6.2rem) var(--gutter) clamp(3.2rem, 7vw, 5rem);
  text-align: center;
}
.story-origin-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.55rem, 3.1vw, 2.25rem);
  line-height: 1.28;
  max-width: 18em;
  margin: 0 auto 0.95rem;
  color: var(--ink);
}
.brand-caps {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  margin: 0.08em 0 0.04em;
}
.story-origin .story-dot {
  margin: 0 auto 2.1rem;
}
.story-origin-body {
  width: min(40rem, 100%);
  margin: 0 auto;
  text-align: left;
}

.story-close {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  min-height: min(88svh, 840px);
  background: var(--linen);
}
.story-close-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.6rem, 7vw, 4.8rem) clamp(1.6rem, 5vw, 3.8rem);
  max-width: 38rem;
}
.story-close-copy p {
  font-family: inherit;
  font-style: normal;
  font-weight: 300;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  max-width: none;
}
.story-yours {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.42rem, 3vw, 2.05rem) !important;
  line-height: 1.22 !important;
  margin: 1.5rem 0 1.55rem !important;
  color: var(--ink) !important;
}

.story-close-copy .text-link { font-style: normal; }
.story-close-visual {
  position: relative;
  margin: 0;
  min-height: 36rem;
  overflow: hidden;
  background: var(--dust);
}
.story-close-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1.1s ease;
}

.has-mouse .story-hero-visual img,
.has-mouse .story-split-visual img {
  transform: translate3d(calc(var(--gaze-x) * -14px), calc(var(--gaze-y) * -10px), 0) scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  html.js .place-draw { width: 80%; }
  html.js .place-dot,
  html.js .place-words li {
    opacity: 1;
    transform: none;
  }
  html.js .place-dot { transform: translate(-50%, -50%); }
  html.js .place-traveler { opacity: 1; }
  html.js .return-dot,
  html.js .return-words li {
    opacity: 1;
  }
  html.js .return-draw { width: 80%; }
  html.js .return-dot { transform: translate(-50%, -50%); }
  html.js .return-words li { transform: translateX(-50%); }
  html.js .return-traveler { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .place-card:not(.is-far-left):not(.is-far-right) {
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease, opacity 0.35s ease;
  }
  .place-card.is-prev2 {
    transform: translate(-50%, -50%) translateX(-162%) scale(0.64) rotateY(16deg);
  }
  .place-card.is-prev {
    transform: translate(-50%, -50%) translateX(-102%) scale(0.78) rotateY(8deg);
  }
  .place-card.is-on {
    transform: translate(-50%, -50%) scale(var(--focus-scale)) rotateY(0deg);
  }
  .place-card.is-next {
    transform: translate(-50%, -50%) translateX(102%) scale(0.78) rotateY(-8deg);
  }
  .place-card.is-next2 {
    transform: translate(-50%, -50%) translateX(162%) scale(0.64) rotateY(-16deg);
  }
  html.js .place-show.is-built .place-traveler {
    transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .place-words button,
  .place-dot {
    transition: color 0.35s ease, background-color 0.35s ease;
  }

  .place-dot.is-home .place-core {
    animation: place-beat 1.15s ease-in-out infinite;
  }
  .place-dot.is-home .place-pulse {
    animation: place-ring 2s ease-out infinite;
  }
  .place-dot.is-home .place-pulse::after {
    animation: place-ring 2s 1s ease-out infinite;
  }

  html.js .return-stage.is-in .return-draw {
    animation: return-line var(--rt) cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  html.js .return-stage.is-in .return-traveler {
    opacity: 1;
    animation: return-go var(--rt) cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  html.js .return-stage.is-in .d1 { animation: return-d1 var(--rt) cubic-bezier(0.22, 1, 0.36, 1) both; }
  html.js .return-stage.is-in .d2 { animation: return-d2 var(--rt) cubic-bezier(0.22, 1, 0.36, 1) both; }
  html.js .return-stage.is-in .d3 { animation: return-d3 var(--rt) cubic-bezier(0.22, 1, 0.36, 1) both; }
  html.js .return-stage.is-in .d4 {
    animation: return-d4 var(--rt) cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  html.js .return-stage.is-in .return-core {
    animation: place-beat 1.15s 7s ease-in-out infinite;
  }
  html.js .return-stage.is-in .d4::before {
    animation: return-ring 2s 7s ease-out infinite;
  }
  html.js .return-stage.is-in .d4::after {
    animation: return-ring 2s 8s ease-out infinite;
  }
  html.js .return-stage.is-in .return-words li:nth-child(1) { animation: return-c1 var(--rt) cubic-bezier(0.22, 1, 0.36, 1) both; }
  html.js .return-stage.is-in .return-words li:nth-child(2) { animation: return-c2 var(--rt) cubic-bezier(0.22, 1, 0.36, 1) both; }
  html.js .return-stage.is-in .return-words li:nth-child(3) { animation: return-c3 var(--rt) cubic-bezier(0.22, 1, 0.36, 1) both; }
  html.js .return-stage.is-in .return-words li:nth-child(4) { animation: return-c4 var(--rt) cubic-bezier(0.22, 1, 0.36, 1) both; }
}

@keyframes place-line {
  0%, 8% { width: 0; }
  20%, 28% { width: 16%; }
  36%, 44% { width: 32%; }
  52%, 60% { width: 48%; }
  68%, 76% { width: 64%; }
  84%, 100% { width: 80%; }
}
@keyframes place-go {
  0%, 8% { left: 10%; opacity: 1; }
  20%, 28% { left: 26%; }
  36%, 44% { left: 42%; }
  52%, 60% { left: 58%; }
  68%, 76% { left: 74%; }
  84%, 100% { left: 90%; opacity: 1; }
}
@keyframes place-d1 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  4%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes place-c1 {
  0% { opacity: 0; transform: translateY(0.4rem); }
  4%, 100% { opacity: 1; transform: none; }
}
@keyframes place-d2 {
  0%, 19% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  20%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes place-c2 {
  0%, 19% { opacity: 0; transform: translateY(0.4rem); }
  20%, 100% { opacity: 1; transform: none; }
}
@keyframes place-d3 {
  0%, 35% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  36%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes place-c3 {
  0%, 35% { opacity: 0; transform: translateY(0.4rem); }
  36%, 100% { opacity: 1; transform: none; }
}
@keyframes place-d4 {
  0%, 51% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  52%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes place-c4 {
  0%, 51% { opacity: 0; transform: translateY(0.4rem); }
  52%, 100% { opacity: 1; transform: none; }
}
@keyframes place-d5 {
  0%, 67% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  68%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes place-c5 {
  0%, 67% { opacity: 0; transform: translateY(0.4rem); }
  68%, 100% { opacity: 1; transform: none; }
}
@keyframes place-d6 {
  0%, 83% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  84%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes place-c6 {
  0%, 83% { opacity: 0; transform: translateY(0.4rem); }
  84%, 100% { opacity: 1; transform: none; }
}
@keyframes place-beat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.55); }
  28% { transform: scale(1); }
  40% { transform: scale(1.28); }
  55% { transform: scale(1); }
}
@keyframes place-ring {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.45; }
  100% { transform: translate(-50%, -50%) scale(4.4); opacity: 0; }
}

@keyframes return-line {
  0%, 12% { width: 0; }
  32%, 40% { width: 26.666%; }
  56%, 64% { width: 53.333%; }
  80%, 100% { width: 80%; }
}
@keyframes return-go {
  0%, 12% { left: 10%; opacity: 1; }
  32%, 40% { left: 36.666%; }
  56%, 64% { left: 63.333%; }
  80%, 100% { left: 90%; opacity: 1; }
}
@keyframes return-d1 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  8%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes return-c1 {
  0%, 4% { opacity: 0; transform: translate(-50%, 0.4rem); }
  18%, 100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes return-d2 {
  0%, 28% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  36%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes return-c2 {
  0%, 34% { opacity: 0; transform: translate(-50%, 0.4rem); }
  48%, 100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes return-d3 {
  0%, 52% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  60%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes return-c3 {
  0%, 58% { opacity: 0; transform: translate(-50%, 0.4rem); }
  72%, 100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes return-d4 {
  0%, 76% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  84%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes return-c4 {
  0%, 80% { opacity: 0; transform: translate(-50%, 0.4rem); }
  92%, 100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes return-ring {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(4.4); opacity: 0; }
}

@media (max-width: 960px) {
  .story-hero,
  .story-split,
  .story-close { grid-template-columns: 1fr; }
  .story-hero { min-height: 0; }
  .story-hero-visual {
    order: -1;
    height: 56svh;
    min-height: 56svh;
  }
  .story-hero-visual img { object-position: 58% 12%; }
  .story-hero-copy { padding: 2.2rem var(--gutter) 2.8rem; }
  .story-hero-copy .page-mark { width: 5.6rem; margin: 1.35rem auto 0; }
  .story-split-visual {
    min-height: 0;
    height: 52svh;
  }
  .story-split-copy {
    padding: 2.2rem var(--gutter) 3rem;
    max-width: none;
  }
  .place-show { --focus-scale: 1.1; }
  .place-frame { --frame-h: min(28rem, 58svh); }
  .place-card { width: min(16.5rem, 70%); }
  .place-card.is-prev2 { transform: translate(-50%, -50%) translateX(-124%) scale(0.64); }
  .place-card.is-prev { transform: translate(-50%, -50%) translateX(-74%) scale(0.8); }
  .place-card.is-on { transform: translate(-50%, -50%) scale(var(--focus-scale)); }
  .place-card.is-next { transform: translate(-50%, -50%) translateX(74%) scale(0.8); }
  .place-card.is-next2 { transform: translate(-50%, -50%) translateX(124%) scale(0.64); }
  .place-words button { font-size: 0.72rem; }
  .place-words,
  .place-track { width: min(40rem, calc(100% - 2 * var(--gutter))); }
  .return-words { height: 2.7rem; }
  .return-words li { width: 5.6rem; font-size: 0.72rem; }
  .return-stage { width: min(40rem, 100%); }
  .story-open-body > p:first-of-type::first-letter { font-size: 2.7rem; }
  .story-close { min-height: 0; }
  .story-close-visual {
    order: -1;
    min-height: 0;
    height: 56svh;
  }
  .story-close-copy {
    padding: 2.4rem var(--gutter) 3.2rem;
    max-width: none;
  }
}

@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  .place-card.is-prev2 {
    transform: translate(-50%, -50%) translateX(-124%) scale(0.64) rotateY(12deg);
  }
  .place-card.is-prev {
    transform: translate(-50%, -50%) translateX(-74%) scale(0.8) rotateY(6deg);
  }
  .place-card.is-on {
    transform: translate(-50%, -50%) scale(var(--focus-scale)) rotateY(0deg);
  }
  .place-card.is-next {
    transform: translate(-50%, -50%) translateX(74%) scale(0.8) rotateY(-6deg);
  }
  .place-card.is-next2 {
    transform: translate(-50%, -50%) translateX(124%) scale(0.64) rotateY(-12deg);
  }
}

@media (max-width: 480px) {
  .place-words button { font-size: 0.58rem; }
  .return-words li { width: 4.8rem; font-size: 0.64rem; }
  .story-hero h1 { font-size: clamp(2.15rem, 9.5vw, 2.7rem); }
}