@font-face {
  font-family: Instrument;
  src: url('assets/instrument-sans-regular.ttf') format('truetype');
  font-display: swap;
  font-weight: 400;
}
:root {
  color-scheme: dark;
  --ink: #102641;
  --paper: #fff3d6;
  --soft: #d7e1ea;
  --accent: #f8cf8d;
  --edge: clamp(22px, 5.5vw, 92px);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font:
    16px/1.5 Instrument,
    Arial,
    sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
}
a,
button {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 7px;
}
button:disabled {
  cursor: wait;
}
::selection {
  background: #a44432;
  color: #fff3d6;
}
/* Layer order: artwork 0, shade 1, story 2, navigation 5, status 6. */
.masthead {
  position: fixed;
  background: linear-gradient(#102641e8, #102641b0);
  backdrop-filter: blur(8px);
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px var(--edge);
  gap: 20px;
}
.wordmark {
  font-size: 27px;
  letter-spacing: -1.4px;
  white-space: nowrap;
}
.wordmark span {
  font-size: 18px;
  color: #bdcad8;
  margin: 0 13px;
}
.wordmark small {
  font-size: 12px;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.masthead > .create-yours {
  font-size: 13px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid #fff3d655;
}
.create-yours span {
  font-size: 20px;
}
.chapter {
  position: relative;
  height: 270svh;
  background: var(--ink);
}
.viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 500px;
  overflow: hidden;
  isolation: isolate;
}
.canvas-slot,
.fallback,
.shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.canvas-slot {
  z-index: 0;
}
.paper-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.live-paper .chapter {
  background: transparent;
}
.fallback {
  transition: opacity 0.2s;
}
.viewport[data-ready='true'] .fallback {
  opacity: 0;
}
.fallback .back {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.paper {
  position: absolute;
  object-fit: contain;
}
.paper.left {
  height: 70%;
  bottom: -3%;
  left: -5%;
  width: 40%;
}
.paper.right {
  height: 66%;
  bottom: -3%;
  right: -6%;
  width: 42%;
}
.paper.tram {
  width: 35%;
  height: 37%;
  bottom: 1%;
  left: 32%;
}
.paper.moon {
  width: 16%;
  height: 30%;
  top: 12%;
  right: 20%;
}
.paper.glasshouse {
  width: 45%;
  height: 55%;
  bottom: 8%;
  right: 10%;
}
.paper.roofs {
  bottom: -10%;
  width: 100%;
  height: 40%;
}
.paper.miniature {
  width: 70%;
  height: 55%;
  bottom: 10%;
  left: 15%;
}
.shade {
  z-index: 1;
  background: linear-gradient(
    180deg,
    #07162d77,
    transparent 44%,
    transparent 80%,
    #07162d99
  );
}
.copy {
  position: absolute;
  z-index: 2;
  top: 17%;
  left: var(--edge);
  max-width: 650px;
  will-change: transform, opacity;
}
.copy h1,
.copy h2,
.afterword h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.99;
  margin: 0 0 24px;
  text-wrap: balance;
}
.copy h1 {
  font-size: clamp(80px, 10vw, 160px);
  letter-spacing: -0.075em;
}
.copy h2 {
  font-size: clamp(58px, 6.7vw, 106px);
}
.copy p {
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.55;
  margin: 0 0 26px;
  color: var(--soft);
}
.copy .eyebrow,
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 23px;
}
.copy.second {
  opacity: 0;
  visibility: hidden;
  top: 18%;
  max-width: 600px;
}
.ticket {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  min-height: 52px;
  padding: 13px 24px;
  background: var(--paper);
  color: #17304c;
  border: 1px solid var(--paper);
  font-size: 14px;
  transition:
    transform 0.2s,
    background 0.2s;
}
.ticket:hover {
  background: #ffe0a7;
  transform: translateY(-3px);
}
.ticket:active {
  transform: translateY(0) scale(0.98);
}
.ticket span {
  font-size: 20px;
  line-height: 1;
}
.scene-note {
  position: absolute;
  left: var(--edge);
  bottom: 32px;
  z-index: 2;
  color: #e0e5ea;
  font-size: 12px;
  margin: 0;
  letter-spacing: 0.02em;
}
.story-anchor {
  position: absolute;
  top: 40%;
  pointer-events: none;
}
#rooftops .copy {
  top: 20%;
}
#theatre .copy {
  top: 17%;
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
  width: 80%;
  max-width: none;
}
#theatre .copy h2 {
  font-size: clamp(56px, 6.5vw, 100px);
}
#theatre .shade {
  background: linear-gradient(180deg, #07162d33, transparent 60%, #07162d66);
}
#theatre .ticket {
  margin-top: 2px;
}
.journey-nav {
  position: fixed;
  z-index: 5;
  --control-bottom: 24px;
  bottom: var(--control-bottom);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 23px;
  background: #102641f2;
  border: 1px solid #b0bac52e;
  box-shadow: 0 8px 32px #07152644;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.journey-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #bac9d9;
  min-height: 28px;
  white-space: nowrap;
}
.journey-nav a[aria-current] {
  color: #fff3d6;
}
.station {
  display: block;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}
[aria-current] .station {
  background: var(--accent);
  border-color: var(--accent);
}
.route-line {
  width: 24px;
  height: 1px;
  background: #667b90;
}
.unfold {
  width: 176px;
  justify-content: center;
  white-space: nowrap;
  position: fixed;
  z-index: 5;
  right: var(--edge);
  --control-bottom: 25px;
  bottom: var(--control-bottom);
  border: 1px solid #b0bac54a;
  background: #102641e8;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 16px;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}
.unfold[hidden] {
  display: none;
}
.unfold:hover {
  background: #234467;
  transform: translateY(-2px);
}
.unfold[aria-pressed='true'] {
  background: #fff3d6;
  color: #102641;
}
.unfold-icon {
  font-size: 27px;
  line-height: 1;
}
.unfold-label {
  font-size: 12px;
}
.render-status {
  position: fixed;
  z-index: 6;
  right: var(--edge);
  bottom: 84px;
  font-size: 12px;
  max-width: 260px;
  padding: 0;
  color: var(--paper);
  background: #102641;
}
.render-status:empty {
  display: none;
}
.at-end .journey-nav,
.at-end .unfold {
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
}
.at-end .journey-nav {
  transform: translate(-50%, 18px);
}
.afterword {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 6vw;
  align-items: center;
  min-height: 90svh;
  padding: 100px var(--edge);
  background: #0c2038;
}
.afterword-art {
  position: relative;
  min-width: 0;
}
.city-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  isolation: isolate;
}
.city-poster {
  display: block;
}
.city-poster img,
.city-canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: contain;
}
.city-source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.city-canvas {
  opacity: 0;
  pointer-events: none;
}
.afterword-art[data-ready='true'] .city-canvas {
  opacity: 1;
}
.afterword-art[data-ready='true'] .city-poster img {
  opacity: 0;
}
.city-motion {
  display: block;
  min-height: 44px;
  margin: 10px auto 0;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--soft);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}
.city-motion[hidden] {
  display: none;
}
.city-motion:hover {
  color: var(--paper);
}
.city-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.city-stars i {
  position: absolute;
  top: -7%;
  left: 31%;
  width: 1px;
  height: 18%;
  background: linear-gradient(transparent, #e3ccab66);
  transform-origin: top center;
  animation: city-sway 5.3s ease-in-out infinite alternate paused;
}
.city-stars i::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: -10px;
  width: 22px;
  height: 23px;
  background: repeating-linear-gradient(34deg, #ffdb89 0 2px, #edc16d 3px 4px);
  clip-path: polygon(
    50% 0,
    62% 33%,
    98% 37%,
    71% 60%,
    81% 98%,
    49% 78%,
    16% 96%,
    25% 59%,
    0 36%,
    36% 31%
  );
  animation: city-glimmer 3.7s ease-in-out infinite alternate paused;
}
.city-stars i:nth-child(2) {
  left: 65%;
  height: 23%;
  animation-delay: -2s;
}
.city-stars i:nth-child(3) {
  left: 83%;
  height: 17%;
  animation-delay: -4s;
}
.city-stars i:nth-child(4) {
  left: 7%;
  height: 13%;
  animation-delay: -1s;
}
.city-stars i:nth-child(5) {
  left: 45%;
  height: 10%;
  animation-delay: -3s;
}
.city-stars i:nth-child(even)::after {
  width: 15px;
  height: 16px;
  left: -7px;
  animation-delay: -2s;
}
.afterword-art[data-playing='true'] .city-stars i,
.afterword-art[data-playing='true'] .city-stars i::after {
  animation-play-state: running;
}
@keyframes city-sway {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(5deg);
  }
}
@keyframes city-glimmer {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .city-stars i,
  .city-stars i::after {
    animation: none;
  }
}
.afterword h2 {
  font-size: clamp(54px, 5.8vw, 88px);
  margin-bottom: 24px;
}
.afterword p:not(.eyebrow) {
  max-width: 320px;
  color: var(--soft);
  margin-bottom: 28px;
}
.replay {
  display: block;
  width: fit-content;
  padding: 20px 0 8px;
  font-size: 12px;
  border-bottom: 1px solid #ffffff44;
}
.replay span {
  margin-left: 20px;
}
.paper-footer {
  position: relative;
  background: #0c2038;
  border-top: 1px solid #ffffff1a;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 32px var(--edge);
  color: #c4cfdb;
  font-size: 11px;
}
.paper-footer p {
  margin: 0;
  line-height: 1.8;
}
.paper-footer [data-experiment-controls] {
  display: contents;
}
.paper-footer [data-experiment-tools] {
  justify-content: flex-start;
  font: inherit;
}
.paper-footer #scenario-experiment-analytics .scenario-experiment-controls {
  justify-content: flex-start;
  font: inherit;
}
@media (min-width: 701px) and (max-width: 1100px) {
  .paper-footer {
    grid-template-columns: 1fr auto;
    gap: 8px 24px;
  }
  .paper-footer > p {
    grid-column: 1 / -1;
  }
}
.skip {
  position: fixed;
  z-index: 10;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  background: var(--paper);
  color: var(--ink);
  padding: 14px;
}
.skip:focus {
  transform: none;
}
@media (max-width: 1100px) {
  .scene-note {
    bottom: 96px;
  }
  .unfold {
    right: 24px;
  }
  .journey-nav {
    left: var(--edge);
    transform: none;
  }
  .at-end .journey-nav {
    transform: translateY(18px);
  }
}
@media (max-width: 700px) {
  .masthead {
    padding: 18px 22px;
  }
  .wordmark {
    font-size: 24px;
  }
  .wordmark span {
    margin: 0 7px;
  }
  .wordmark small {
    font-size: 10px;
  }
  .masthead > .create-yours {
    font-size: 11px;
    gap: 10px;
  }
  .chapter {
    height: 235svh;
  }
  .viewport {
    min-height: 440px;
  }
  .copy {
    top: 16%;
    left: 24px;
    right: 20px;
    max-width: none;
  }
  .copy h1 {
    font-size: clamp(67px, 16vw, 104px);
    margin-bottom: 18px;
  }
  .copy h2 {
    font-size: clamp(48px, 12vw, 76px);
  }
  .copy p {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .copy .eyebrow {
    font-size: 9px;
    margin-bottom: 15px;
  }
  .ticket {
    min-height: 48px;
    padding: 11px 18px;
    font-size: 12px;
    gap: 28px;
  }
  .scene-note {
    left: 24px;
    bottom: 88px;
    font-size: 10px;
    max-width: 60%;
  }
  .journey-nav {
    left: 16px;
    --control-bottom: max(16px, env(safe-area-inset-bottom));
    bottom: var(--control-bottom);
    padding: 10px 13px;
    gap: 9px;
  }
  .journey-nav a {
    font-size: 10px;
    gap: 6px;
    min-height: 26px;
  }
  .route-line {
    width: 9px;
  }
  .unfold {
    right: 16px;
    --control-bottom: max(16px, env(safe-area-inset-bottom));
    bottom: var(--control-bottom);
    width: 46px;
    min-height: 48px;
    justify-content: center;
    padding: 8px;
  }
  .unfold-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .unfold-icon {
    font-size: 30px;
  }
  .render-status {
    bottom: 82px;
    right: 20px;
  }
  .copy.second {
    top: 18%;
  }
  #rooftops .copy {
    top: 17%;
  }
  #theatre .copy {
    top: 17%;
    left: 50%;
    right: auto;
    width: 92%;
  }
  #theatre .copy h2 {
    font-size: clamp(48px, 12vw, 74px);
  }
  #theatre .copy p {
    font-size: 13px;
  }
  .afterword {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 70px 26px 65px;
    min-height: 0;
  }
  .afterword-art {
    order: 2;
    margin-top: 22px;
  }
  .afterword h2 {
    font-size: 62px;
  }
  .afterword p:not(.eyebrow) {
    font-size: 15px;
  }
  .paper-footer {
    grid-template-columns: 1fr;
    padding: 30px 24px 140px;
    gap: 8px;
  }
  .paper-footer p {
    font-size: 10px;
  }
  .paper.left {
    width: 65%;
    height: 48%;
    left: -25%;
    bottom: 0;
  }
  .paper.right {
    width: 65%;
    height: 46%;
    right: -26%;
    bottom: 0;
  }
  .paper.tram {
    width: 67%;
    height: 26.4%;
    left: 14%;
    bottom: 9%;
  }
  .paper.glasshouse {
    width: 90%;
    height: 42%;
    right: -14%;
    bottom: 10%;
  }
  .paper.moon {
    width: 25%;
    right: 9%;
    top: 38%;
  }
  .paper.roofs {
    height: 28%;
    bottom: -2%;
    width: 170%;
    left: -30%;
  }
  .paper.miniature {
    width: 110%;
    left: -5%;
    bottom: 16%;
    height: 40%;
  }
}
@media (max-height: 600px) and (min-width: 701px) {
  .copy {
    top: 19%;
  }
  .copy h1 {
    font-size: 82px;
  }
  .copy h2,
  #theatre .copy h2 {
    font-size: 60px;
  }
  .copy p {
    font-size: 14px;
  }
  .scene-note {
    display: none;
  }
  .viewport {
    min-height: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  .copy.second {
    display: none;
  }
  .scene-note {
    bottom: 90px;
  }
  .story-anchor {
    top: 0;
  }
  .unfold {
    display: none;
  }
}
.no-webgl .chapter {
  height: 100svh;
  min-height: 600px;
}
.no-webgl .viewport {
  min-height: 600px;
  height: 100%;
  position: relative;
}
.no-webgl .copy.second {
  display: none;
}
.no-webgl .unfold {
  display: none;
}

.illustrated .chapter {
  height: 100svh;
  min-height: 600px;
}
.illustrated .viewport {
  min-height: 600px;
  height: 100%;
  position: relative;
}
.illustrated .copy.second {
  display: none;
}
.illustrated .story-anchor {
  top: 0;
}

.unfolded .copy {
  opacity: 0 !important;
  visibility: hidden !important;
}
.unfolded .scene-note {
  opacity: 0;
}
:root {
  --experiment-footer-bg: #0c2038;
  --experiment-footer-ink: #c4cfdb;
  --experiment-footer-border: #ffffff1a;
}
/* Keep exploration available while the shared consent banner is open. */
body:has([data-testid='consent-banner-root']) .journey-nav,
body:has([data-testid='consent-banner-root']) .unfold {
  translate: 0 calc(-100dvh + 100% + var(--control-bottom) + 88px);
}
@media (max-width: 700px) {
  body:has([data-testid='consent-banner-root']) .journey-nav,
  body:has([data-testid='consent-banner-root']) .unfold {
    translate: 0 calc(-100dvh + 100% + var(--control-bottom) + 78px);
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-height: 600px) and (orientation: landscape) {
  .viewport {
    min-height: 100svh;
  }
  .copy,
  .copy.second,
  #rooftops .copy {
    top: 88px;
  }
  .copy .eyebrow {
    display: none;
  }
  .copy h1 {
    font-size: 68px;
    margin-bottom: 12px;
  }
  .copy h2,
  #theatre .copy h2 {
    font-size: 46px;
    margin-bottom: 12px;
  }
  .copy p {
    font-size: 13px;
    margin-bottom: 15px;
  }
  .ticket {
    min-height: 44px;
    padding: 8px 18px;
    font-size: 12px;
  }
  .scene-note {
    display: none;
  }
  .journey-nav {
    --control-bottom: 12px;
    bottom: var(--control-bottom);
    padding: 8px 16px;
  }
  .unfold {
    --control-bottom: 12px;
    bottom: var(--control-bottom);
    min-height: 44px;
  }
}

/* Keep the shared banner's text legible against its light button surface. */
html body [data-testid='consent-banner-customize-button'] {
  color: #8a3b30;
}

.sound-control {
  --sound-bottom: 85px;
  position: fixed;
  z-index: 5;
  right: var(--edge);
  bottom: var(--sound-bottom);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 176px;
  padding: 0 16px;
  background: transparent;
  color: var(--soft);
  border: 0;
  cursor: pointer;
  font-size: 11px;
  text-shadow: 0 1px 5px #102641;
}
.sound-control[hidden] {
  display: none;
}
.sound-control:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sound-feedback {
  position: fixed;
  z-index: 6;
  right: var(--edge);
  bottom: 142px;
  max-width: 230px;
  padding: 8px 12px;
  background: var(--ink);
  font-size: 12px;
}
.sound-feedback:empty {
  display: none;
}
body:has([data-testid='consent-banner-root']) .sound-control {
  translate: 0 calc(-100dvh + 100% + var(--sound-bottom) + 146px);
}
@media (max-width: 1100px) {
  .sound-control {
    right: 24px;
  }
}
@media (max-width: 700px) {
  .sound-control {
    --sound-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 58px);
    right: 16px;
    width: 98px;
    justify-content: flex-end;
    padding: 0;
  }
  body:has([data-testid='consent-banner-root']) .sound-control {
    translate: 0 calc(-100dvh + 100% + var(--sound-bottom) + 136px);
  }
}
@media (max-height: 600px) and (orientation: landscape) {
  .sound-control {
    --sound-bottom: 66px;
  }
}

@media (max-width: 700px) {
  body:has([data-testid='consent-banner-root']) .copy {
    top: max(190px, 25%);
  }
}

@media (min-width: 1101px) {
  .at-end .sound-control {
    --sound-bottom: 128px;
  }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .at-end .sound-control {
    --sound-bottom: 168px;
  }
}

.illustrated .journey-nav {
  transition: none;
}

/* Handmade stage compositions, including the illustrated fallback. */
.paper.sun {
  width: 26%;
  height: 37%;
  right: 27%;
  top: 23%;
}
.paper.cloud {
  width: 27%;
  height: 24%;
  right: 9%;
  top: 17%;
}
.paper.garden-tree {
  width: 30%;
  height: 61%;
  left: -4%;
  bottom: 6%;
}
.paper.windmill {
  width: 28%;
  height: 54%;
  right: 3%;
  bottom: 8%;
}
.paper.meadow {
  width: 110%;
  height: 43%;
  left: -5%;
  bottom: -12%;
}
.paper.finale-sun {
  width: 18%;
  height: 30%;
  right: 24%;
  top: 26%;
}
.paper.finale-cloud {
  width: 24%;
  height: 20%;
  left: 18%;
  top: 25%;
}
.paper.carousel {
  width: 33%;
  height: 47%;
  right: 13%;
  bottom: 9%;
}
.paper.finale-tree {
  width: 19%;
  height: 43%;
  left: 8%;
  bottom: 10%;
}
.paper.proscenium {
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: fill;
}
#theatre .paper.miniature {
  width: 56%;
  left: 9%;
  bottom: 10%;
}
#theatre .copy {
  top: 18%;
}
#theatre .copy h2 {
  font-size: clamp(48px, 6vw, 90px);
}
.journey-nav {
  gap: 12px;
}
@media (max-width: 700px) {
  .journey-nav {
    left: 12px;
    right: 72px;
    gap: 7px;
    padding: 12px 10px;
    justify-content: space-between;
  }
  .journey-nav a {
    gap: 5px;
    font-size: 10px;
  }
  .journey-nav .route-line {
    display: none;
  }
  .paper.sun {
    width: 48%;
    height: 30%;
    right: 17%;
    top: 32%;
  }
  .paper.cloud {
    width: 43%;
    right: -6%;
    top: 35%;
  }
  .paper.garden-tree {
    width: 59%;
    left: -20%;
    height: 44%;
    bottom: 8%;
  }
  .paper.windmill {
    width: 52%;
    right: -13%;
    height: 40%;
    bottom: 8%;
  }
  .paper.meadow {
    width: 150%;
    left: -25%;
    height: 31%;
    bottom: -1%;
  }
  .paper.finale-sun {
    width: 32%;
    right: 13%;
    top: 39%;
  }
  .paper.finale-cloud {
    width: 46%;
    left: 4%;
    top: 37%;
  }
  .paper.carousel {
    width: 55%;
    height: 33%;
    right: 0;
    bottom: 12%;
  }
  .paper.finale-tree {
    width: 36%;
    height: 30%;
    left: -4%;
    bottom: 16%;
  }
  #theatre .paper.miniature {
    width: 89%;
    left: -5%;
    bottom: 19%;
  }
  #theatre .copy {
    top: 17%;
  }
  #theatre .copy h2 {
    font-size: clamp(42px, 11vw, 62px);
  }
}
@media (max-width: 360px) {
  .journey-nav a {
    font-size: 9px;
    gap: 4px;
  }
  .journey-nav .station {
    width: 4px;
    height: 4px;
  }
}

@media (min-width: 701px) {
  .copy {
    left: max(var(--edge), 9vw);
  }
  #theatre .copy {
    left: 50%;
  }
}

@media (max-width: 700px) {
  #daybreak .copy.second p {
    display: none;
  }
}
.fallback .paper:not(.proscenium) {
  filter: drop-shadow(1px 0 0 #f6efd9) drop-shadow(-1px 0 0 #f6efd9)
    drop-shadow(0 1px 0 #f6efd9) drop-shadow(1px 2px 0 #967344);
}
.viewport[data-ready='true'] .fallback {
  visibility: hidden;
}

@media (max-height: 600px) and (orientation: landscape) {
  .masthead {
    padding: 7px 30px;
  }
  .wordmark {
    font-size: 24px;
  }
  .copy,
  .copy.second,
  #rooftops .copy,
  #theatre .copy {
    top: 78px;
  }
  .copy h1 {
    font-size: 58px;
  }
  .copy h2,
  #theatre .copy h2 {
    font-size: 34px;
    margin-bottom: 12px;
  }
  .copy p {
    font-size: 12px;
  }
  #theatre .copy {
    width: 340px;
  }
}