.design-journey{position:relative;background:var(--black);--journey-header:74px}
.journey-stage{position:relative}
.journey-fractal{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.journey-tools{display:none;align-items:center;gap:24px;color:#fff;padding:0 var(--gutter)}
.journey-tools .text-button,.journey-tools .text-link{font-size:13px;min-height:44px}
.journey-tools .text-link{margin-left:auto}
.journey-tools :focus-visible{outline-color:var(--mint)}
.journey-active{height:calc(280svh - var(--journey-header))}
.journey-active .journey-stage{position:sticky;top:var(--journey-header);height:calc(100svh - var(--journey-header));overflow:hidden;isolation:isolate}
.journey-active .topic-landscape{height:auto;max-height:none;transform-origin:50% 50%;overflow:visible}
.journey-active .topic-panel{aspect-ratio:1;min-height:0}
.journey-active .topic-label,.journey-active .topic-caption{opacity:var(--journey-label-opacity,1)}
.journey-active .journey-tools{display:flex;position:absolute;z-index:3;left:0;right:0;bottom:24px;gap:24px}
.journey-active .journey-tools>*{background:#000;color:#fff;padding:8px 16px}
.journey-static .journey-tools{display:flex;padding-block:12px}
.journey-arrival{position:relative;z-index:2;margin-top:calc(-1 * var(--journey-overlap));background:var(--paper);padding-top:24px;min-height:80svh;box-shadow:0 -1px 0 #00000012}
.home-notebook:focus{outline:none}
.journey-arrival .section-toolbar{min-height:90px}
@media(max-width:700px){
  .design-journey{--journey-header:106px}
  .journey-active{height:calc(255svh - var(--journey-header));--journey-row:clamp(44px,calc((100svh - var(--journey-header) - 88px - 100vw)/2),112px)}
  .journey-active .topic-landscape{grid-template-columns:1fr}
  .journey-active .topic-panel{aspect-ratio:auto;min-height:var(--journey-row)}
  .journey-active .topic-panel.design{aspect-ratio:1;min-height:0;width:min(100%,calc(100svh - var(--journey-header) - 88px - var(--journey-row) - var(--journey-row)));justify-self:center}
  .journey-active .topic-label{left:22px;bottom:min(24px,calc(var(--journey-row)/4));gap:12px}
  .journey-active .topic-label strong{font-size:clamp(22px,calc(var(--journey-row)/2),32px)}
  .journey-active .design .topic-label strong{font-size:39px}
  .journey-active .topic-label .icon{width:clamp(22px,calc(var(--journey-row)/2),30px)}
  .journey-active .topic-caption{display:none}
  .journey-active .journey-tools{bottom:20px;gap:12px}
  .journey-tools .text-button,.journey-tools .text-link{font-size:12px}
  .journey-active .journey-tools>*{padding:6px 10px}
  .journey-arrival{padding-top:10px}
}
@media(max-width:1024px) and (orientation:landscape) and (max-height:500px){
  .journey-active{--journey-row:112px}
  .journey-active .topic-landscape{grid-template-columns:repeat(3,minmax(0,1fr))}
  .journey-active .topic-panel{aspect-ratio:auto;min-height:0;height:min(calc(100svh - var(--journey-header) - 88px),calc(100vw/3))}
  .journey-active .topic-panel.design{width:min(100%,calc(100svh - var(--journey-header) - 88px));height:auto;aspect-ratio:1;justify-self:center}
  .journey-active .topic-label{left:12px;bottom:16px;gap:8px}
  .journey-active .design .topic-label strong{font-size:clamp(14px,calc((100svh - var(--journey-header) - 88px)*.14),32px)}
  .journey-active .topic-label .icon{width:18px}
}
@media(prefers-reduced-motion:reduce){
  .journey-active{height:auto}
  .journey-active .journey-stage{height:auto;position:relative;top:0}
  .journey-active .journey-fractal{display:none}
  .journey-arrival{margin-top:0}
}

.journey-held .topic-canvas,.journey-held .topic-image{transform:var(--journey-held-transform,scale(1.015))!important;transition:none}
.journey-captured .topic-landscape{position:relative;z-index:1}
.journey-captured .topic-panel{background:transparent}
.journey-captured .topic-canvas,.journey-captured .topic-image{visibility:hidden}
