* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: #000;
  color: #f5f5f7;
  overflow: hidden;
}

#field {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #000;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 1.4s ease,
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
}

body.loading::before {
  opacity: 1;
}

body.loading #field {
  opacity: 0;
  transform: scale(1.25);
}

body.warping #field,
body.traveling #field {
  transform: scale(1.08);
}

#space-ui {
  position: fixed;
  inset: 0;
  overflow: hidden;
  perspective: 1000px;
}

.scene {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
} 

.scene.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0s;
}

.scene.no-motion,
.scene.no-motion .space-object {
  transition: none !important;
}

.space-object {
  --px: 0px;
  --py: 0px;

  opacity: 1;
  filter: blur(0);
  transform: translate3d(var(--px), var(--py), 0) scale(1);
  transition:
    opacity 0.95s ease,
    filter 1s ease,
    transform 1.15s cubic-bezier(0.12, 0.85, 0.16, 1);
  will-change: transform, opacity, filter;
}

body.loading .space-object {
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(var(--px), calc(var(--py) + 32px), 0) scale(0.72);
}



/* ---------------- SPACE CAMERA TRANSITIONS ---------------- */

/*
  --travel-x and --travel-y point from the screen center toward
  the selected corner button.

  Example:
  top-right button:
    --travel-x is positive
    --travel-y is negative

  During zoom-in:
    old home UI moves opposite that direction and gets huge
    new page UI comes from that direction and grows into place
*/

/* Entering a deeper page: old scene flies past you */
.scene.zoom-forward-out .space-object {
  opacity: 0;
  filter: blur(10px);
  transform:
    translate3d(
      calc(var(--px) - var(--travel-x, 0px) * 0.95),
      calc(var(--py) - var(--travel-y, 0px) * 0.95),
      0
    )
    scale(3.15);
}

/* New deeper page begins tiny near clicked destination */
.scene.zoom-forward-in .space-object {
  opacity: 0;
  filter: blur(10px);
  transform:
    translate3d(
      calc(var(--px) + var(--travel-x, 0px) * 0.8),
      calc(var(--py) + var(--travel-y, 0px) * 0.8),
      0
    )
    scale(0.22);
}

/* Leaving current page: it shrinks back toward its origin */
.scene.zoom-back-out .space-object {
  opacity: 0;
  filter: blur(10px);
  transform:
    translate3d(
      calc(var(--px) + var(--travel-x, 0px) * 0.8),
      calc(var(--py) + var(--travel-y, 0px) * 0.8),
      0
    )
    scale(0.22);
}

/* Previous page returns from huge/past-camera state */
.scene.zoom-back-in .space-object {
  opacity: 0;
  filter: blur(10px);
  transform:
    translate3d(
      calc(var(--px) - var(--travel-x, 0px) * 0.95),
      calc(var(--py) - var(--travel-y, 0px) * 0.95),
      0
    )
    scale(3.15);
}

/* ---------------- HOME ---------------- */

#homeLinks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

#homeLinks .corner-link {
  pointer-events: auto;
  z-index: 6;
}

.identity {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

.identity-inner {
  transform: translateY(-1vh);
  pointer-events: none;
}

.identity h1 {
  font-size: clamp(4.5rem, 14vw, 13rem);
  font-weight: 800;
  letter-spacing: 0.34em;
  line-height: 0.85;
  margin-right: -0.34em;
  color: rgba(255, 255, 255, 0.96);
  text-shadow:
    0 0 18px rgba(205, 215, 255, 0.72),
    0 0 48px rgba(150, 170, 255, 0.38),
    0 0 105px rgba(85, 110, 255, 0.28),
    0 0 180px rgba(65, 85, 255, 0.16);
}

.identity p {
  margin-top: 28px;
  font-size: clamp(0.95rem, 2vw, 1.45rem);
  letter-spacing: 1.15em;
  margin-right: -1.15em;
  color: rgba(215, 220, 255, 0.74);
  text-shadow: 0 0 22px rgba(150, 170, 255, 0.18);
}

.identity-inner {
  transform: translateY(-1vh);
}

.corner-link,
.back-button {
  position: absolute;
  appearance: none;
  border: 1px solid rgba(190, 200, 255, 0.26);
  background:
    radial-gradient(circle at top left, rgba(150, 165, 255, 0.2), transparent 55%),
    rgba(5, 8, 22, 0.34);
  color: rgba(245, 247, 255, 0.9);
  border-radius: 999px;
  padding: 13px 18px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 24px rgba(90, 110, 255, 0.08),
    inset 0 0 18px rgba(255, 255, 255, 0.03);
}

.corner-link::after,
.back-button::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(160, 175, 255, 0);
  opacity: 0;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.corner-link:hover,
.back-button:hover {
  color: #fff;
  border-color: rgba(220, 228, 255, 0.58);
  box-shadow:
    0 0 34px rgba(130, 150, 255, 0.22),
    inset 0 0 20px rgba(255, 255, 255, 0.055);
}

.corner-link:hover::after,
.back-button:hover::after {
  opacity: 1;
  border-color: rgba(160, 175, 255, 0.18);
}

.top-left {
  top: clamp(24px, 5vw, 54px);
  left: clamp(22px, 5vw, 62px);
}

.top-right {
  top: clamp(24px, 5vw, 54px);
  right: clamp(22px, 5vw, 62px);
}

.bottom-left {
  bottom: clamp(24px, 5vw, 54px);
  left: clamp(22px, 5vw, 62px);
}

.bottom-right {
  bottom: clamp(24px, 5vw, 54px);
  right: clamp(22px, 5vw, 62px);
}

/* ---------------- SUBPAGES ---------------- */

.back-button {
  top: clamp(24px, 5vw, 54px);
  left: clamp(22px, 5vw, 62px);
  z-index: 5;
}

.page-scene {
  display: grid;
  place-items: center;
  padding: 88px 24px;
}

.page-content {
  width: min(780px, 88vw);
  max-height: min(620px, 72vh);
  overflow-y: auto;
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid rgba(185, 195, 255, 0.18);
  border-radius: 32px;
  background:
    radial-gradient(circle at top left, rgba(120, 140, 255, 0.16), transparent 48%),
    rgba(3, 5, 15, 0.42);
  backdrop-filter: blur(18px);
  box-shadow:
    0 0 65px rgba(80, 100, 255, 0.12),
    inset 0 0 28px rgba(255, 255, 255, 0.025);
}

.page-content::-webkit-scrollbar {
  width: 8px;
}

.page-content::-webkit-scrollbar-thumb {
  background: rgba(180, 190, 255, 0.18);
  border-radius: 99px;
}

.page-kicker {
  color: rgba(160, 175, 255, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.page-content h2 {
  font-size: clamp(2.3rem, 7vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.08em;
  margin-bottom: 28px;
  text-shadow:
    0 0 24px rgba(150, 170, 255, 0.24),
    0 0 70px rgba(80, 100, 255, 0.11);
}

.page-content p {
  color: rgba(225, 228, 245, 0.82);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.8;
  margin-bottom: 18px;
}

.page-content ul {
  list-style: none;
  display: grid;
  gap: 13px;
  margin-top: 22px;
}

.page-content li {
  color: rgba(232, 235, 255, 0.85);
  padding: 15px 17px;
  border: 1px solid rgba(180, 190, 255, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.page-content strong {
  color: #fff;
}

/* ---------------- REUSABLE SPACE PAGE SYSTEM ---------------- */

.content-scene {
  display: grid;
  place-items: center;
  padding: 88px 24px;
}

.content-layout {
  position: relative;
  width: min(1120px, 92vw);
  height: min(720px, 78vh);
  display: grid;
  place-items: center;
}

.space-panel {
  width: min(720px, 82vw);
  max-height: min(600px, 70vh);
  overflow-y: auto;
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid rgba(185, 195, 255, 0.18);
  border-radius: 32px;
  background:
    radial-gradient(circle at top left, rgba(120, 140, 255, 0.16), transparent 48%),
    rgba(3, 5, 15, 0.42);
  backdrop-filter: blur(18px);
  box-shadow:
    0 0 65px rgba(80, 100, 255, 0.12),
    inset 0 0 28px rgba(255, 255, 255, 0.025);
}

.space-panel::-webkit-scrollbar {
  width: 8px;
}

.space-panel::-webkit-scrollbar-thumb {
  background: rgba(180, 190, 255, 0.18);
  border-radius: 99px;
}

.page-kicker {
  color: rgba(160, 175, 255, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.space-panel h2 {
  font-size: clamp(2.3rem, 7vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.08em;
  margin-bottom: 28px;
  text-shadow:
    0 0 24px rgba(150, 170, 255, 0.24),
    0 0 70px rgba(80, 100, 255, 0.11);
}

.space-panel p {
  color: rgba(225, 228, 245, 0.82);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.8;
  margin-bottom: 18px;
}

.space-panel ul {
  list-style: none;
  display: grid;
  gap: 13px;
  margin-top: 22px;
}

.space-panel li {
  color: rgba(232, 235, 255, 0.85);
  padding: 15px 17px;
  border: 1px solid rgba(180, 190, 255, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.space-panel strong {
  color: #fff;
}

.node-cloud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.space-card {
  position: absolute;
  width: min(245px, 38vw);
  appearance: none;
  border: 1px solid rgba(190, 200, 255, 0.22);
  background:
    radial-gradient(circle at top left, rgba(150, 165, 255, 0.18), transparent 58%),
    rgba(5, 8, 22, 0.34);
  color: rgba(245, 247, 255, 0.9);
  border-radius: 24px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(14px);
  box-shadow:
    0 0 32px rgba(90, 110, 255, 0.1),
    inset 0 0 18px rgba(255, 255, 255, 0.03);
}

.space-card h3 {
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.space-card p {
  color: rgba(218, 224, 255, 0.72);
  font-size: 0.92rem;
  line-height: 1.5;
}

.space-card:hover {
  border-color: rgba(220, 228, 255, 0.6);
  box-shadow:
    0 0 38px rgba(130, 150, 255, 0.25),
    inset 0 0 20px rgba(255, 255, 255, 0.055);
}

/* ---------------- VEILED MEDIA ---------------- */

.content-layout:has(.space-media) {
  width: min(1400px, 96vw);
}

.content-layout:has(.space-media) .space-panel {
  width: min(680px, 74vw);
}

.space-media {
  --media-size: 96px;
  --media-visible-width: 240px;
  --media-visible-height: 180px;
  --media-caption-offset: 106px;

  position: absolute;
  width: var(--media-size);
  height: var(--media-size);
  margin: 0;
  pointer-events: auto;
  z-index: 2;

  transform: translate3d(var(--px), var(--py), 0);
  transition: z-index 0s linear 0.25s;
}

.media-frame {
  left: 50%;
  top: 50%;
  position: absolute;
  width: var(--media-size);
  height: var(--media-size);
  overflow: hidden;
  border: 1px solid rgba(180, 205, 255, 0.38);
  border-radius: 50%;
  background: rgba(10, 18, 60, 0.62);
  box-shadow:
    0 0 20px rgba(80, 125, 255, 0.28),
    0 0 46px rgba(190, 215, 255, 0.12),
    inset 0 0 18px rgba(195, 220, 255, 0.2);
  filter: saturate(0.82) sepia(0.2) hue-rotate(174deg) brightness(0.82);
  opacity: 0.36;
  transform: translate(-50%, -50%) rotate(var(--media-rotation, -4deg));
  transition:
    width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.5s ease,
    opacity 0.35s ease,
    filter 0.45s ease,
    box-shadow 0.45s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  mask-image: radial-gradient(
    circle at center,
    black 39%,
    rgba(0, 0, 0, 0.76) 63%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    circle at center,
    black 39%,
    rgba(0, 0, 0, 0.76) 63%,
    transparent 100%
  );
}

.media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 34% 26%, rgba(170, 205, 255, 0.38), transparent 42%),
    linear-gradient(145deg, rgba(35, 75, 235, 0.52), rgba(125, 170, 255, 0.14));
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.94;
  transition: object-fit 0.2s ease;
}

.space-media figcaption {
  position: absolute;
  top: calc(50% + var(--media-caption-offset));
  left: 50%;
  width: 220px;
  color: rgba(235, 240, 255, 0.94);
  font-size: 0.84rem;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 0 14px rgba(90, 115, 255, 0.8);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition:
    opacity 0.25s ease,
    transform 0.35s ease;
}

.space-media:hover,
.space-media:focus-within {
  z-index: 10;
  outline: none;
  transition-delay: 0s;
}

.space-media:hover .media-frame,
.space-media:focus-within .media-frame {
  width: var(--media-visible-width);
  height: var(--media-visible-height);
  border-radius: 10px;
  opacity: 1;
  filter: saturate(1) hue-rotate(180deg) brightness(1);
  box-shadow:
    0 0 28px rgba(135, 170, 255, 0.52),
    0 0 74px rgba(180, 210, 255, 0.24),
    inset 0 0 18px rgba(235, 245, 255, 0.2);
  transform: translate(-50%, -50%) rotate(0deg);
  mask-image: none;
  -webkit-mask-image: none;
}

.space-media:hover .media-frame img,
.space-media:focus-within .media-frame img {
  object-fit: contain;
}

.space-media:hover .media-frame::after,
.space-media:focus-within .media-frame::after {
  opacity: 0.3;
}

.space-media:hover figcaption,
.space-media:focus-within figcaption {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Six non-overlapping side lanes around the central panel */
.media-left-top {
  top: 10%;
  left: 10%;
  --media-rotation: -8deg;
}

.media-left-middle {
  top: 43%;
  left: 10%;
  --media-rotation: 5deg;
}

.media-left-bottom {
  bottom: 10%;
  left: 10%;
  --media-rotation: -5deg;
}

.media-right-top {
  top: 10%;
  right: 10%;
  --media-rotation: 7deg;
}

.media-right-middle {
  top: 43%;
  right: 10%;
  --media-rotation: -5deg;
}

.media-right-bottom {
  right: 10%;
  bottom: 10%;
  --media-rotation: 6deg;
}

.media-left-top .media-frame,
.media-left-middle .media-frame,
.media-left-bottom .media-frame {
  transform-origin: right center;
}

.media-right-top .media-frame,
.media-right-middle .media-frame,
.media-right-bottom .media-frame {
  transform-origin: left center;
}

@media (max-width: 820px) {
  .space-media {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 12px auto 170px;
  }

  .media-left-top .media-frame,
  .media-left-middle .media-frame,
  .media-left-bottom .media-frame,
  .media-right-top .media-frame,
  .media-right-middle .media-frame,
  .media-right-bottom .media-frame {
    transform-origin: center;
  }
}

/* ---------------- CURVED STACK NAV ---------------- */

.curved-stack {
  position: absolute;
  top: 50%;
  right: clamp(-28px, 1.5vw, 26px);

  width: min(430px, 36vw);
  max-height: min(760px, 92vh);

  transform: translate3d(var(--px), calc(var(--py) - 50%), 0);
  overflow-y: auto;
  overflow-x: visible;

  /*
    Extra left padding prevents glow from getting cut off.
    Huge vertical padding lets the wheel extend beyond the visible area.
  */
  padding: 42vh 42px 42vh 54px;

  pointer-events: auto;

  /*
    Keep the top/bottom fade, but make it gentler.
  */
  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 5%,
      black 95%,
      transparent
    ),
    linear-gradient(
      to right,
      transparent,
      black 14%,
      black 100%
    );

  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 5%,
      black 95%,
      transparent
    ),
    linear-gradient(
      to right,
      transparent,
      black 14%,
      black 100%
    );

  -webkit-mask-composite: source-in;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.curved-stack::-webkit-scrollbar {
  display: none;
}

.stack-label {
  margin: 0 0 28px 22px;
  color: rgba(160, 175, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
  font-weight: 800;
}

.stack-item {
  width: min(330px, 100%);
  margin: 0 0 34px 0;
  display: block;
  text-decoration: none;

  --stack-x: 0px;
  --stack-rotate: 0deg;
  --stack-tilt: 0deg;
  --stack-scale: 1;
  --stack-opacity: 1;

  appearance: none;
  border: 1px solid rgba(190, 200, 255, 0.18);
  background:
    radial-gradient(circle at top left, rgba(150, 165, 255, 0.16), transparent 58%),
    rgba(5, 8, 22, 0.38);
  color: rgba(245, 247, 255, 0.9);
  border-radius: 24px;
  padding: 20px 21px;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(14px);
  box-shadow:
    0 0 34px rgba(90, 110, 255, 0.1),
    inset 0 0 18px rgba(255, 255, 255, 0.025);

  opacity: var(--stack-opacity);

  transform:
  translate3d(var(--stack-x), 0, 0)
  rotateZ(var(--stack-rotate))
  rotateY(var(--stack-tilt))
  scale(var(--stack-scale));

  transform-origin: center center;
}

.stack-item h3 {
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.stack-item p {
  color: rgba(218, 224, 255, 0.7);
  font-size: 0.93rem;
  line-height: 1.5;
  margin: 0;
}

.stack-item:hover,
.stack-item-center {
  border-color: rgba(225, 232, 255, 0.62);
  box-shadow:
    0 0 46px rgba(130, 150, 255, 0.3),
    inset 0 0 24px rgba(255, 255, 255, 0.06);
}

.stack-item:visited {
  color: rgba(245, 247, 255, 0.9);
}




/* ---------------- POEM PAGE UI ---------------- */

.poem-panel {
  width: min(760px, 84vw);
  max-height: min(680px, 74vh);
  overflow-y: auto;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(185, 195, 255, 0.18);
  border-radius: 34px;
  background:
    radial-gradient(circle at top left, rgba(120, 140, 255, 0.12), transparent 48%),
    rgba(3, 5, 15, 0.48);
  backdrop-filter: blur(20px);
  box-shadow:
    0 0 75px rgba(80, 100, 255, 0.13),
    inset 0 0 32px rgba(255, 255, 255, 0.025);
}

.poem-panel::-webkit-scrollbar {
  width: 8px;
}

.poem-panel::-webkit-scrollbar-thumb {
  background: rgba(180, 190, 255, 0.18);
  border-radius: 99px;
}

.poem-title {
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.08em;
  margin-bottom: 12px;
}

.poem-subtitle {
  color: rgba(160, 175, 255, 0.76);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
  font-weight: 800;
  margin-bottom: 34px;
}

.poem-text {
  white-space: pre-wrap;
  color: rgba(238, 241, 255, 0.9);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.9;
}

.poem-note {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(180, 190, 255, 0.14);
  color: rgba(210, 218, 255, 0.72);
  font-size: 0.98rem;
  line-height: 1.7;
}


/* Card orbit positions controlled by JSON */
.orbit-top-left {
  top: 5%;
  left: 2%;
}

.orbit-top-right {
  top: 5%;
  right: 2%;
}

.orbit-bottom-left {
  bottom: 5%;
  left: 2%;
}

.orbit-bottom-right {
  bottom: 5%;
  right: 2%;
}

.orbit-left {
  top: 42%;
  left: 0;
}

.orbit-right {
  top: 42%;
  right: 0;
}

.orbit-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.orbit-bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.space-card[disabled] {
  cursor: default;
  opacity: 0.55;
}

.space-card {
  text-decoration: none;
  display: block;
}

.space-card:visited {
  color: rgba(245, 247, 255, 0.9);
}

@media (max-width: 820px) {
  .content-layout {
    height: auto;
    min-height: 78vh;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .node-cloud {
    position: static;
    display: grid;
    gap: 14px;
    width: min(720px, 82vw);
  }

  .space-card {
    position: static;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .identity h1 {
    letter-spacing: 0.18em;
    margin-right: -0.18em;
  }

  .identity p {
    letter-spacing: 0.7em;
    margin-right: -0.7em;
  }

  .corner-link,
  .back-button {
    font-size: 0.68rem;
    padding: 11px 13px;
    letter-spacing: 0.12em;
  }

  .page-scene {
    padding: 84px 16px 28px;
  }

  .page-content {
    width: 92vw;
    max-height: 72vh;
  }
}

.content-layout {
  position: relative;
  width: min(1120px, 92vw);
  height: min(720px, 78vh);
  display: grid;
  place-items: center;
}

/* Only pages with a stack, currently Writing, shift the panel left */
.content-layout.has-stack {
  width: min(1280px, 94vw);
  grid-template-columns: minmax(0, 760px) 360px;
  align-items: center;
  justify-content: center;
  gap: clamp(54px, 8vw, 128px);
}

.content-layout.has-stack .space-panel {
  justify-self: end;
}