/* The paper world. Type stays in the document. The box and the constellations sit behind it. */
html { --cross: 0; --px: 0; --py: 0; }

.world {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.world__space {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1400px;
}
.world__box {
  --d: 108px;
  position: relative;
  width: min(42vw, 340px);
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(8deg + var(--py) * -4deg))
    rotateY(calc(-18deg + var(--px) * 6deg + var(--cross) * 48deg))
    translateZ(calc(var(--cross) * 160px))
    scale(calc(0.98 + var(--cross) * 0.55));
  opacity: 0.55;
}
.world__face {
  position: absolute;
  inset: 0;
  background: #F3E6D0 center / cover no-repeat;
  border: 1px solid rgba(134, 88, 47, .38);
  box-shadow: inset 0 0 0 1px rgba(251, 248, 241, .35);
}
.world__face--front {
  transform: translateZ(calc(var(--d) / 2));
  background-color: #F1E6D1;
  background-position: 50% 18%;
  mix-blend-mode: multiply;
  box-shadow: -22px 16px 0 -12px #C4A27A, -34px 26px 36px rgba(91, 72, 55, .16);
}
.world__face--front.is-sketch { background-position: 72% 48%; }
.world__face--back {
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  background-color: #E7E4D4;
}
.world__face--right,
.world__face--left { width: var(--d); background-image: linear-gradient(180deg, #E7D3B4, #C4A27A); }
.world__face--right { left: 100%; transform-origin: left center; transform: rotateY(90deg); }
.world__face--left { right: 100%; left: auto; transform-origin: right center; transform: rotateY(-90deg); }
.world__face--top,
.world__face--bottom { height: var(--d); }
.world__face--top {
  bottom: 100%; top: auto; transform-origin: bottom center; transform: rotateX(90deg);
  background: #FBF8F1;
}
.world__face--bottom {
  top: 100%; bottom: auto; transform-origin: top center; transform: rotateX(-90deg);
  background: #E4E6D6;
}
.world__gl {
  display: block;
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(78vw, 760px);
  height: min(78vw, 760px);
  transform: translate(-50%, -50%) scale(calc(0.86 + var(--cross) * 0.18));
  opacity: calc(0.28 + var(--cross) * 0.5);
}
html.has-mirror .world__gl { opacity: 0.92; }
.world__where {
  position: absolute;
  left: max(20px, var(--gutter));
  top: 92px;
  display: grid;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--c-oak-deep);
  letter-spacing: 0.01em;
}
.world__where span { grid-area: 1 / 1; }
.world__where [data-out] { opacity: calc(1 - var(--cross)); }
.world__where [data-in] { opacity: var(--cross); }
.world__grain {
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: calc(0.35 + var(--cross) * 0.45);
  mix-blend-mode: multiply;
}

body.has-world { isolation: isolate; }
body.has-world main { position: relative; z-index: 2; }
.keep-still {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--c-sand);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-ivory) 88%, transparent);
  color: var(--ink);
  font-size: 0.95rem;
}
.keep-still:focus-visible { outline: 2px solid var(--c-sage-deep); outline-offset: 3px; }

@media (min-width: 960px) {
  .world__space { place-items: center end; padding-right: 8vw; }
  .world__box { width: min(26vw, 360px); opacity: 1; }
  .world__gl { left: auto; right: 6vw; top: 50%; opacity: 0.72; }
  html:not(.world-still) body.has-world .hero .wrap {
    width: auto;
    max-width: 740px;
    margin-left: var(--gutter);
    margin-right: min(42vw, 540px);
  }
  html:not(.world-still) body.has-world .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy";
  }
  html:not(.world-still) body.has-world .hero__art,
  html:not(.world-still) body.has-world .phero__art:has(img) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  html:not(.world-still) body.has-world .phero__grid:has(img) {
    grid-template-columns: minmax(0, 1fr);
  }
  html:not(.world-still) body.has-world .phero:has(.phero__art img) .wrap {
    width: auto;
    max-width: 720px;
    margin-left: var(--gutter);
    margin-right: min(38vw, 460px);
  }
}

body.has-world .site-header {
  background: color-mix(in srgb, var(--c-cream) 78%, transparent);
  backdrop-filter: blur(10px);
}
body.has-world .hero,
body.has-world .phero { background: transparent; }
body.has-world .spine { display: none; }
body.has-world .hero {
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  padding-top: 6.25rem;
  padding-bottom: 2rem;
}
body.has-world .hero h1 {
  font-size: clamp(2.45rem, 3.5vw, 4rem);
  line-height: 0.96;
  max-width: 16ch;
  letter-spacing: -0.025em;
}
body.has-world .hero__copy > * + * { margin-top: 0.85rem; }
body.has-world .hero__lead { font-size: 1.05rem; line-height: 1.45; }
body.has-world .door { padding: 1rem 1.1rem 0.9rem; }
body.has-world .door__text { margin-bottom: 0.75rem; }
body.has-world .phero { min-height: calc(100svh - 72px); display: flex; align-items: center; }
body.has-world .phero h1 {
  font-size: clamp(2.8rem, 5.6vw, 6.2rem);
  line-height: 0.92;
  max-width: 13ch;
  letter-spacing: -0.025em;
}
body.has-world .doors { perspective: 900px; }
body.has-world .door { transition: transform var(--dur-2) var(--ease-out); }
body.has-world .door:hover { transform: translateY(-4px) rotateX(2deg); }
body.world--quiet .phero,
body.world--quiet .phero--plain { min-height: 0; display: block; padding-block: 8vh 2vh; }
body.world--quiet .phero h1,
body.world--quiet .phero--plain h1,
body.world--quiet .article__head h1 { font-size: clamp(2.5rem, 4vw, 4.4rem); max-width: 16ch; }
body.has-world .article__head { padding-top: 8vh; }
body.has-world .article__head h1 { font-size: clamp(2.8rem, 5vw, 5.2rem); line-height: 0.92; letter-spacing: -0.025em; }
body.has-world #tool.reflect-page,
body.has-world .bookpage { background: transparent; }
body.has-world .tool,
body.has-world .bookpage__widget {
  background: color-mix(in srgb, var(--c-ivory) 84%, transparent);
  backdrop-filter: blur(8px);
}
[data-portal] { transform-style: preserve-3d; will-change: transform; }
body.has-world .scene { width: min(680px, 100%); }

html.is-leaving main { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.is-leaving .world__box {
  transform: rotateY(78deg) translateZ(460px) scale(2.4) !important;
  transition: transform .7s var(--ease-out);
}
html.is-leaving .world__face--front { opacity: 0; transition: opacity .45s linear; }
html.is-arriving main { animation: world-rise .9s var(--ease-out) both; }
@keyframes world-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 759px) {
  .world__where { display: none; }
  .world__box { width: min(68vw, 280px); opacity: 0.28; }
  .keep-still { display: none; }
  body.has-world .hero { min-height: auto; padding-top: 5.5rem; align-items: start; }
  body.has-world .hero h1 { font-size: clamp(2.15rem, 8.5vw, 2.65rem); max-width: 18ch; }
  body.has-world .hero__art { width: min(58%, 210px); margin-inline: 0; }
  body.has-world .phero { min-height: 0; display: block; padding-top: var(--s-6); }
  body.has-world main { padding-bottom: 4.5rem; }
}

html.world-still .world { display: none; }
@media (prefers-reduced-motion: reduce) {
  .world { display: none !important; }
  html.is-leaving main, html.is-arriving main { animation: none; opacity: 1; transform: none; transition: none; }
  body.has-world .hero__art {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
  }
}