/* Visual quieting: product evidence before scroll choreography. */
.worlds {
  min-height: clamp(680px, 86svh, 860px);
  background: radial-gradient(circle at 82% 18%, rgba(88, 117, 143, .18), transparent 34%), #061e33;
}
.worlds-stage { display: block; pointer-events: none; }
.worlds-stage .shape, .worlds-stage .world-axis { display: none; }
.worlds-count {
  top: 50%; left: auto; right: clamp(18px, 5vw, 76px);
  transform: translateY(-54%); font-size: clamp(190px, 34vw, 480px);
  color: rgba(255, 255, 255, .045);
}
.worlds-copy > p { width: min(100%, 420px); }

.product-portal, .world-portal {
  position: relative; height: auto !important; min-height: 0 !important;
  padding: clamp(72px, 7vw, 120px) clamp(32px, 4vw, 72px); overflow: hidden;
}
.portal-sticky, .world-sticky {
  position: relative !important; top: auto !important;
  width: min(100%, 1680px); height: auto !important; min-height: 0 !important;
  margin: 0 auto; display: grid;
  grid-template-columns: minmax(260px, .42fr) minmax(0, 1.68fr);
  grid-template-rows: 1fr auto; column-gap: clamp(24px, 3vw, 52px);
  align-items: center; overflow: visible !important; isolation: auto;
  background: transparent !important;
}
.portal-host-layer, .world-host { display: contents; }
.portal-meta, .world-meta {
  position: relative !important; z-index: 2; top: auto !important; left: auto !important; right: auto !important;
  width: auto !important; max-width: 360px; grid-column: 1; grid-row: 1; align-self: end;
  padding: 0 0 clamp(26px, 4vh, 46px); transform: none !important;
  opacity: 1 !important; will-change: auto !important;
}
.portal-count, .world-count {
  margin: 0 0 clamp(34px, 5vh, 54px); font-size: clamp(24px, 2vw, 34px);
}
.portal-meta h2, .world-meta h2 { margin-top: 13px; font-size: clamp(46px, 4vw, 68px); }
.portal-meta > div > p, .world-meta > div > p {
  max-width: 310px; margin-top: 22px; font-size: 12px; line-height: 1.95; opacity: .74;
}
.portal-scroll-cue, .portal-continuity, .world-mark, .daylight-field, .daylight-guide,
.living-layer, .living-caption, .restraint-rule, .restraint-type, .restraint-court,
.portal-gesture-guard, .world-gesture-guard, .portal-load-state { display: none !important; }
.portal-surface, .world-frame-surface {
  position: relative !important; inset: auto !important; z-index: 1;
  grid-column: 2; grid-row: 1 / 3; width: 100%; aspect-ratio: 16 / 10;
  max-height: none; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 2px;
  box-shadow: 0 28px 74px rgba(0, 0, 0, .18); clip-path: none !important;
  transform: none !important; opacity: 1 !important; will-change: auto !important;
}
.portal-surface iframe, .world-frame-surface iframe { display: none !important; }
.portal-poster, .world-poster {
  position: absolute !important; inset: 0 !important; display: block;
  width: 100%; height: 100%; margin: 0; opacity: 1 !important;
  visibility: visible !important; transition: none !important;
}
.portal-poster img, .world-poster img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.portal-surface:hover .portal-poster img, .world-frame-surface:hover .world-poster img { transform: scale(1.012); }
.portal-exit, .world-exit {
  position: relative !important; z-index: 2; top: auto !important; right: auto !important;
  bottom: auto !important; left: auto !important; grid-column: 1; grid-row: 2;
  width: auto !important; max-width: 430px !important; padding: 0 0 4px;
  color: inherit; opacity: 1 !important; pointer-events: auto !important;
  transform: none !important; will-change: auto !important;
}
.portal-exit > p, .portal-exit > h3, .world-exit > p, .world-exit > h3,
.portal-exit a:last-child, .world-exit a:last-child { display: none !important; }
.portal-exit > div, .world-exit > div { display: block; margin: 0; }
.portal-full-link, .world-exit a:first-child {
  display: inline-flex !important; align-items: baseline; gap: 12px;
  padding: 0 0 10px !important; border-bottom: 1px solid currentColor;
  font-size: 10px !important; letter-spacing: .11em !important;
}
.portal-full-link small, .world-exit a:first-child small {
  display: block; margin: 0 0 0 3px !important; font-size: 6px !important;
  letter-spacing: .1em !important; opacity: .58;
}
.portal-full-link:focus-visible, .world-exit a:first-child:focus-visible {
  outline: 2px solid currentColor; outline-offset: 7px;
}
.product-c01 { color: #f4f0e7; background: #101c1a; }
.daylight-portal { color: #173f39; background: #eee8d5; }
.living-portal { color: #fff6e9; background: #725441; }
.restraint-portal { color: #282e27; background: #ece8df; }
.daylight-portal .world-frame-surface, .restraint-portal .world-frame-surface {
  border-color: rgba(25, 47, 38, .14); box-shadow: 0 28px 74px rgba(36, 45, 38, .14);
}
body.portal-takeover .site-header, body.world-takeover .site-header {
  opacity: 1 !important; pointer-events: auto !important;
}
@media (max-width: 699px) {
  .intro {
    min-height: 0 !important;
    padding-top: 82px;
    padding-bottom: 58px;
  }
  .intro-copy { margin-top: 58px; }
  .intro-detail { width: 88%; margin-top: 36px; }
  .arrival-signals {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 46px;
  }
  .order { padding-bottom: 50px; }
  .order-image { height: 38svh; min-height: 320px; max-height: 390px; }
  .order-copy { padding-top: 54px; padding-bottom: 30px; }
  .order-copy h2 { margin-top: 27px; }
  .order-copy > p { margin-top: 22px; }
  .order-sequence li { padding-top: 12px; padding-bottom: 12px; font-size: 16px; }
  .worlds {
    min-height: 560px;
    padding-top: 78px;
    padding-bottom: 42px;
    scroll-margin-top: 68px;
  }
  .worlds-count { right: 4vw; font-size: min(58vw, 248px); }
  .worlds-copy { bottom: 58px; }
  .worlds-copy h2 { margin-top: 24px; font-size: clamp(40px, 10.8vw, 50px); }
  .worlds-copy > p { margin-top: 18px; line-height: 1.75; }
  .worlds-copy > a { margin-top: 20px; }
  .worlds-foot { display: none; }
  .product-portal, .world-portal {
    padding: 82px 0 0;
    scroll-margin-top: 68px;
  }
  .portal-sticky, .world-sticky { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 0; }
  .portal-meta, .world-meta {
    grid-column: 1;
    grid-row: 1;
    align-self: auto;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 18px;
    max-width: none;
    padding: 0 var(--pad) 24px;
  }
  .portal-count, .world-count {
    grid-column: 1;
    margin: 1px 0 0;
    font-size: 22px;
    line-height: 1;
  }
  .portal-count small, .world-count small { display: none; }
  .portal-meta > div, .world-meta > div { grid-column: 2; }
  .portal-meta h2, .world-meta h2 {
    margin-top: 8px;
    font-size: clamp(40px, 11vw, 50px);
  }
  .portal-meta > div > p, .world-meta > div > p {
    margin-top: 13px;
    font-size: 11px;
    line-height: 1.68;
  }
  .portal-surface, .world-frame-surface {
    grid-column: 1;
    grid-row: 3;
    height: auto;
    aspect-ratio: 390 / 844;
    max-height: none;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .living-portal .world-frame-surface { aspect-ratio: 390 / 760; }
  .portal-exit, .world-exit {
    grid-column: 1;
    grid-row: 2;
    max-width: none !important;
    padding: 0 var(--pad) 26px;
  }
  .portal-full-link, .world-exit a:first-child {
    display: flex !important;
    justify-content: space-between;
    width: 100%;
    padding: 13px 0 !important;
    border-top: 1px solid currentColor;
    border-bottom-color: currentColor;
  }
  .portal-full-link small, .world-exit a:first-child small {
    margin-left: auto !important; text-align: right;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portal-poster img, .world-poster img { transition: none !important; }
  .portal-surface:hover .portal-poster img, .world-frame-surface:hover .world-poster img { transform: none; }
}
