/* One paper surface for the document and its temporary navigation leaf. */
:root {
  --paper-wash: radial-gradient(circle at 76% 18%, rgba(184,95,62,.055), transparent 34%), radial-gradient(circle at 15% 76%, rgba(79,123,114,.065), transparent 36%), radial-gradient(ellipse at 14% 12%, rgba(255,252,246,.46), transparent 42%), linear-gradient(115deg, #f0ece5 0%, #f3efe9 56%, #eeebe4 100%);
}
body.interior, body.home {
  background-color: var(--paper-background);
  background-image: var(--paper-wash);
  background-size: 100% 100svh;
  background-position: center top;
  background-attachment: fixed;
}
body.interior::before, body.home::before { content: none; }
.route-flip { z-index: 40; top: var(--route-header-height, var(--home-header-height)); }
.route-flip--preflight { z-index: 39; }
.route-flip .route-flip__paper {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  background-color: var(--paper-background);
  background-image: var(--paper-wash);
  background-size: 100% 100svh;
  background-position: center calc(-1 * var(--route-header-height, var(--home-header-height)));
}
.route-flip .route-flip__paper::before { content: none; }
.route-flip .route-flip__paper::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: calc(-1 * var(--route-header-height, var(--home-header-height))) 0 0;
  pointer-events: none;
  background: var(--paper-texture) center / 420px 420px repeat;
  opacity: var(--paper-texture-opacity);
  mix-blend-mode: multiply;
}
.route-flip .route-flip__paper > .home-main {
  justify-content: flex-start;
  padding-top: calc(132px - var(--route-header-height, var(--home-header-height)));
}
.route-flip .route-flip__paper > .home-main .home-stage { min-height: 0; }
.route-flip .route-flip__paper > .home-main .home-tools { color: var(--ink); }
.route-flip[data-direction="back"] .route-flip__turn { opacity: 0; transform: perspective(1800px) rotateY(-18deg); }
.route-flip__visual--destination .route-flip__content { opacity: 0; }
.route-flip.is-turning .route-flip__visual--source .route-flip__content {
  animation: route-content-leave var(--route-turn-duration) linear both;
}
.route-flip.is-turning .route-flip__visual--destination .route-flip__content {
  animation: route-content-enter var(--route-turn-duration) linear both;
}
/* The text intervals do not overlap: the page surface keeps turning throughout. */
@keyframes route-content-leave { 0% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes route-content-enter { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }
.route-flip.is-complete .route-flip__visual--source { visibility: hidden; }
.route-flip.is-complete .route-flip__visual--destination .route-flip__content { animation: none; opacity: 1; }
.is-page-turning { height: auto; }

.tools-overview__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .4fr);
  column-gap: clamp(28px, 4vw, 64px);
  align-items: center;
  max-width: none;
}
.tools-overview__head > .tools-overview__eyebrow { grid-area: 1 / 1; }
.tools-overview__head > h2 { grid-area: 2 / 1; margin-top: 0; }
.tools-overview__head > .tools-overview__intro { grid-area: 3 / 1; }
.tools-overview__head > .tools-overview__art { grid-area: 1 / 2 / 4 / 3; width: 100%; max-width: 340px; justify-self: end; }
.about-panorama { margin: 24px 0 0; width: 100%; overflow: hidden; }
.about-panorama .line-art { width: 100%; }
.about-panorama svg { width: 100%; height: clamp(150px, 18vw, 220px); }
.about-panorama path { stroke-width: 1.2; }
.about-panorama .art-space, .about-panorama .art-detail { opacity: .7; }
.about-panorama + .about-content > .about-section:first-child { padding-top: 24px; }
@media (max-width: 1100px) {
  .route-flip .route-flip__paper > .home-main { padding-top: calc(116px - var(--route-header-height, var(--home-header-height))); }
}
@media (max-width: 720px) {
  .tools-overview__head { grid-template-columns: minmax(0, 1fr); }
  .tools-overview__head > .tools-overview__art { grid-area: 3 / 1; width: 170px; margin: 4px 0 6px; justify-self: end; }
  .tools-overview__head > .tools-overview__intro { grid-area: 4 / 1; margin-top: 8px; }
  .about-panorama { margin-top: 22px; }
  .about-panorama svg { height: 132px; }
  .about-panorama + .about-content > .about-section:first-child { padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .route-flip.is-turning .route-flip__content { animation: none; }
}