/* The continuation occupies the page's space, with no inset stage or mockups. */
.direction-continuation {
  --story-a: #ffc1aa;
  --story-b: #d8b0eb;
  position: relative;
  display: grid;
  isolation: isolate;
  background: var(--bg);
}
.direction-continuation[data-kind="development"] {
  --story-a: #a1e3d3;
  --story-b: #9dbfe8;
}
.direction-continuation[data-kind="media"] {
  --story-a: #d7b8f1;
  --story-b: #eec4ac;
}
.continuation-space {
  position: sticky;
  top: 0;
  grid-area: 1/1;
  align-self: start;
  width: 100%;
  height: 100svh;
  pointer-events: none;
  overflow: clip;
}
.continuation-space canvas,
.continuation-atmosphere,
.continuation-shade,
.continuation-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.continuation-space canvas {
  opacity: 0;
  transition: opacity 1s;
}
.direction-continuation[data-world-ready] .continuation-space canvas {
  opacity: 1;
}
.continuation-atmosphere {
  background:
    radial-gradient(
      ellipse at 74% 47%,
      color-mix(in srgb, var(--story-b), transparent 88%),
      transparent 65%
    ),
    radial-gradient(
      ellipse at 83% 74%,
      color-mix(in srgb, var(--story-a), transparent 95%),
      transparent 52%
    );
  transition: transform 1.5s;
}
.direction-continuation[data-act="1"] .continuation-atmosphere {
  transform: none;
  background:
    radial-gradient(
      ellipse at 24% 47%,
      color-mix(in srgb, var(--story-b), transparent 88%),
      transparent 65%
    ),
    radial-gradient(
      ellipse at 18% 74%,
      color-mix(in srgb, var(--story-a), transparent 95%),
      transparent 52%
    );
}
.continuation-shade {
  background:
    linear-gradient(90deg, #131615e6, #131615b8 48%, transparent 82%),
    linear-gradient(#131615, transparent 12%, transparent 87%, #131615);
  transition: opacity 0.8s;
}
.direction-continuation[data-act="1"] .continuation-shade {
  background:
    linear-gradient(270deg, #131615e6, #131615b8 48%, transparent 82%),
    linear-gradient(#131615, transparent 12%, transparent 87%, #131615);
}
.continuation-fallback {
  color: var(--story-a);
  opacity: 0.25;
}
.direction-continuation[data-world-ready] .continuation-fallback {
  display: none;
}
.continuation-content {
  position: relative;
  grid-area: 1/1;
  min-width: 0;
  z-index: 1;
  pointer-events: none;
}
.direction-continuation .continuation-chapter {
  display: flex;
  align-items: center;
  min-height: 115svh;
  padding: 140px var(--pad);
  max-width: 1680px;
  margin-inline: auto;
  scroll-margin-top: 0;
}
.continuation-copy {
  width: 62%;
  max-width: 850px;
  pointer-events: auto;
}
.continuation-kicker {
  display: block;
  color: var(--story-a);
  font-size: 10px;
  letter-spacing: 0.17em;
}
.continuation-copy h2 {
  font: 400 clamp(46px, 6.5vw, 100px) / 1.05 var(--display);
  letter-spacing: -0.045em;
  margin: 35px 0;
  text-wrap: balance;
}
.continuation-copy > p {
  max-width: 490px;
  font-size: 17px;
  line-height: 1.9;
  color: #b1b6b0;
}
.continuation-cue {
  display: inline-flex;
  align-items: center;
  gap: 35px;
  min-height: 48px;
  margin-top: 30px;
  font-size: 12px;
  color: var(--story-a);
}
.continuation-cue span {
  font-size: 18px;
  transition: transform 0.3s;
}
.continuation-cue:hover span {
  transform: translateY(4px);
}
.continuation-connections {
  justify-content: flex-end;
}
.continuation-connections .continuation-copy {
  width: 55%;
  max-width: 780px;
}
.continuation-connections h2 {
  font-size: clamp(43px, 5.7vw, 85px);
}
.continuation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 35px;
}
.continuation-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  min-height: 49px;
  padding: 10px 0;
  border-bottom: 1px solid #adb4ab44;
  border-radius: 0;
  font-size: 13px;
  color: var(--muted);
  transition:
    color 0.3s,
    border-color 0.3s;
}
.continuation-actions button span {
  font-size: 13px;
}
.continuation-actions button[aria-pressed="true"],
.continuation-actions button:hover {
  color: var(--story-a);
  border-color: var(--story-a);
}
.continuation-actions button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.continuation-copy .continuation-feedback {
  font-size: 12px;
  color: var(--story-a);
  margin-top: 18px;
  min-height: 52px;
  line-height: 1.75;
}
.continuation-handoff .continuation-copy {
  width: 67%;
  max-width: 900px;
}
.continuation-handoff h2 {
  color: var(--story-a);
}
.continuation-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: 25px 38px;
  margin: 42px 0;
}
.continuation-outputs li {
  font-size: 13px;
  max-width: 210px;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}
.continuation-outputs li span {
  display: block;
  color: var(--story-a);
  font-size: 9px;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.continuation-contact {
  display: inline-flex;
  gap: 35px;
  align-items: center;
  min-height: 48px;
  color: var(--story-a);
  font-size: 16px;
  border-bottom: 1px solid var(--story-a);
}
.direction-continuation:not([data-continuation-ready]) .continuation-actions,
.direction-continuation:not([data-continuation-ready]) .continuation-feedback {
  display: none;
}
@media (max-width: 1100px) {
  .continuation-copy {
    width: 68%;
  }
  .continuation-connections .continuation-copy {
    width: 60%;
  }
  .continuation-handoff .continuation-copy {
    width: 76%;
  }
  .continuation-copy > p {
    font-size: 16px;
  }
}
@media (max-width: 760px) {
  .direction-continuation .continuation-chapter {
    min-height: 105svh;
    padding-block: 110px;
  }
  .continuation-copy,
  .continuation-connections .continuation-copy,
  .continuation-handoff .continuation-copy {
    width: 100%;
    max-width: 550px;
  }
  .continuation-copy h2,
  .continuation-connections h2 {
    font-size: clamp(36px, 8.5vw, 62px);
    overflow-wrap: anywhere;
    margin-block: 28px;
  }
  .continuation-copy > p {
    font-size: 15px;
    max-width: 420px;
  }
  .continuation-shade,
  .direction-continuation[data-act="1"] .continuation-shade {
    background:
      linear-gradient(90deg, #131615df, #13161588),
      linear-gradient(#131615, transparent 18%, transparent 80%, #131615);
  }
  .continuation-actions {
    gap: 12px 22px;
  }
  .continuation-actions button {
    font-size: 12px;
    gap: 20px;
  }
  .continuation-outputs {
    gap: 20px;
  }
  .continuation-outputs li {
    max-width: 45%;
  }
  .continuation-contact {
    font-size: 14px;
  }
}
html[data-motion-static] .direction-continuation *,
html[data-motion-paused] .direction-continuation * {
  transition-duration: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  .direction-continuation * {
    transition: none !important;
  }
}
@media print {
  .continuation-space {
    display: none;
  }
  .direction-continuation .continuation-chapter {
    min-height: 0;
    padding-block: 30px;
  }
  .continuation-copy,
  .continuation-connections .continuation-copy,
  .continuation-handoff .continuation-copy {
    width: 100%;
  }
}

/* The last reading chapter and the invitation share one persistent world. */
.direction-continuation:has(.home-contact) .continuation-shade {
  opacity: calc(1 - var(--contact-arrival, 0) * .38);
}
.direction-continuation .home-contact { --discipline: var(--story-a); }
.direction-continuation .home-contact h2 em { color: var(--story-a); }
.direction-continuation:has(.home-contact) .continuation-handoff { min-height: 100svh; }
.service-horizontal-page .direction-continuation section.home-contact { scroll-margin-top: 0; }

.direction-reading { position: relative; pointer-events: auto; }
.direction-continuation:has(.direction-reading) .continuation-space canvas {
  opacity: calc(1 - var(--reading-quiet, 0) * .25);
}
.direction-continuation:has(.direction-reading) .continuation-atmosphere {
  opacity: calc(1 - var(--reading-quiet, 0) * .6);
}

/* Reading planes leave a clear side of the shared world for the silk. */
.direction-reading .faq-scene { width: 66%; margin-left: 0; margin-right: auto; }
.direction-reading #faq { margin-left: auto; margin-right: 0; }
.direction-reading .faq-heading { grid-template-columns: 1fr; gap: 26px; }
.direction-reading .faq-intro { justify-self: start; max-width: 36em; }
.direction-reading .faq-heading h2 { font-size: clamp(48px,5.1vw,76px); }
.direction-reading .faq-scene { --faq-number-width: 24px; --faq-gap: 20px; }
.direction-reading .capability-grid { grid-template-columns: 1fr; }
.direction-continuation:has(.direction-reading) .continuation-space canvas { opacity: 1; }
@media (max-width: 800px) {
  .direction-reading .faq-scene { width: 100%; }
  .direction-reading .faq-heading h2 { font-size: clamp(42px,10vw,64px); }
  .direction-continuation:has(.direction-reading) .continuation-space canvas { opacity: calc(1 - var(--reading-quiet,0) * .32); }
}
.direction-reading .faq-scene[id] { --faq-number-width: 24px; --faq-gap: 20px; }
.direction-continuation:is([data-act="2"],[data-act="3"]):has(.direction-reading) .continuation-shade {
  background: linear-gradient(calc(90deg + var(--reading-side,0) * 180deg),#131615e6,#131615b8 48%,transparent 82%),linear-gradient(#131615,transparent 12%,transparent 87%,#131615);
}