/* Shared route stage, navigation and transition state */

@layer application {
/* Shared by navigation controls and the detail document's edge geometry. */
.route-document {
  --route-navigation-control-height: clamp(2.708rem, calc(3.4722 * var(--site-scale-unit)), 3.75rem);
  --route-navigation-control-inline-padding: clamp(
    0.469rem,
    calc(0.6019 * var(--site-scale-unit)),
    0.65rem
  );

  inline-size: var(--site-canvas-inline-size);
  min-block-size: var(--site-viewport-block-size);
  margin-inline: auto;
  overflow: hidden;
}

.page-section--route-content {
  position: relative;
  display: block;
  inline-size: 100%;
  min-block-size: 2200svh;
  padding: 0;
  place-items: initial;
  background: var(--site-canvas-background);
}

.route-stage {
  --route-view-progress: 0;
  --accordion-reveal: 0;
  --route-focus-progress: 0;
  --route-cinema-edge-size: var(--site-cinema-edge-size);
  --overview-switch-distance: clamp(2rem, calc(5 * var(--site-scale-unit)), 5rem);
  --overview-switch-ease: var(--site-ease-out);

  position: sticky;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: var(--site-viewport-block-size);
  min-block-size: var(--site-viewport-block-size);
  overflow: hidden;
  background: var(--site-canvas-background);
}

.route-stage::before,
.route-stage::after {
  /*
   * Cinema edges are viewport chrome, not part of the width-limited canvas.
   * Fixed positioning keeps them full bleed when the desktop canvas reaches
   * its maximum width and is centered in a wider browser window.
   */
  position: fixed;
  z-index: 0;
  inset-inline: 0;
  inline-size: 100vw;
  block-size: var(--route-cinema-edge-size);
  content: "";
  opacity: var(--route-focus-progress);
  transform: scaleY(calc(0.92 + 0.08 * var(--route-focus-progress)));
  pointer-events: none;
}

/*
 * Routed documents animate #content during their entry. A fixed descendant of
 * that transformed element would temporarily use the canvas as its containing
 * block. Render the routed cinema chrome on the body, outside #content, so its
 * full-bleed geometry is correct from the first paint. A high route-chrome
 * layer also guarantees that tile edges scroll underneath the gradients.
 */
.route-document:not(.route-document--home)::before,
.route-document:not(.route-document--home)::after {
  position: fixed;
  z-index: calc(var(--site-layer-navigation) - 1);
  inset-inline: 0;
  inline-size: 100vw;
  block-size: var(--site-cinema-edge-size);
  content: "";
  pointer-events: none;
}

.route-document:not(.route-document--home) .route-stage::before,
.route-document:not(.route-document--home) .route-stage::after {
  content: none;
}

/* Routed detail content scrolls underneath the fixed cinema edges. */
.route-stage.is-detail-content-visible::before,
.route-stage.is-detail-content-visible::after {
  z-index: 2;
}

.route-stage::before,
.route-document:not(.route-document--home)::before {
  inset-block-start: 0;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.9) 0%,
    rgb(0 0 0 / 0.48) 8%,
    rgb(0 0 0 / 0.22) 22%,
    rgb(0 0 0 / 0.08) 42%,
    transparent 70%
  );
  transform-origin: top;
}

.route-stage::after,
.route-document:not(.route-document--home)::after {
  inset-block-end: 0;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.9) 0%,
    rgb(0 0 0 / 0.48) 8%,
    rgb(0 0 0 / 0.22) 22%,
    rgb(0 0 0 / 0.08) 42%,
    transparent 70%
  );
  transform-origin: bottom;
}

.route-navigation .title-navigation__link {
  block-size: var(--route-navigation-control-height);
  min-block-size: var(--route-navigation-control-height);
  align-self: start;
  gap: clamp(0.1156rem, calc(0.1481 * var(--site-scale-unit)), 0.16rem);
  grid-row: 1;
  padding: clamp(0.2167rem, calc(0.2778 * var(--site-scale-unit)), 0.3rem)
    var(--route-navigation-control-inline-padding);
}

.route-navigation {
  --route-navigation-utility-size: clamp(2.528rem, calc(3.2407 * var(--site-scale-unit)), 3.5rem);
  --route-navigation-trailing-utility-size: var(--route-navigation-control-height);
  --route-navigation-columns:
    var(--route-navigation-utility-size)
    repeat(6, minmax(0, 1fr));
  /*
   * One fluid chapter column shared by the settled accordion navigation and
   * detail routes. Keep this derived from the available canvas width through
   * the eight-column corridor so the 85rem scale floor stays continuous.
   */
  --route-navigation-chapter-size: calc(
    (
        var(--site-canvas-inline-size)
        - 2 * var(--site-navigation-inline-inset)
        - var(--route-navigation-utility-size)
        - 6 * var(--site-navigation-gap)
      )
      / 6
  );
  /*
   * Smallest chapter control used by the desktop detail band immediately
   * above the 75rem mode boundary. Routed tablet headers reuse this width so
   * only their surrounding grid changes at the breakpoint.
   */
  --route-navigation-detail-chapter-size-reference: calc(
    11.0731 * var(--site-scale-unit)
  );

  grid-template-columns: var(--route-navigation-columns);
}

.route-navigation__compact-context {
  display: none;
}

.route-navigation .title-navigation__link--chapter {
  grid-column: var(--navigation-column);
}

.route-navigation .title-navigation__link.is-active {
  z-index: 2;
  animation: route-navigation-activate 520ms var(--site-ease-spring);
  background: var(--site-surface);
  box-shadow:
    inset 5px 5px 11px var(--site-surface-shadow),
    inset -5px -5px 11px var(--site-surface-highlight);
  color: #090909;
  font-size: var(--type-size-navigation-active);
  font-weight: var(--type-weight-semibold);
  letter-spacing: 0.045em;
  transition:
    color 300ms ease,
    box-shadow 300ms ease,
    transform 560ms var(--site-ease-out),
    font-size 320ms var(--site-ease-spring),
    font-weight 320ms ease,
    letter-spacing 320ms ease;
}

.route-navigation
  .title-navigation__link.is-active
  :is(.title-navigation__label, .title-navigation__icon-frame) {
  font-size: var(--type-size-navigation-control-active);
}

.route-navigation
  .title-navigation__link.is-active
  .title-navigation__label {
  letter-spacing: 0.045em;
}

.route-navigation.is-route-detail .title-navigation__link.is-active,
.route-navigation.is-route-detail
  .title-navigation__link.is-active:hover,
.route-navigation.is-route-detail
  .title-navigation__link.is-active:focus-visible {
  transform: translateX(0);
}

.route-navigation .title-navigation__link.is-active .title-navigation__icon {
  inline-size: 1.3em;
  block-size: 1.3em;
}

@keyframes route-navigation-activate {
  0% {
    scale: 1;
  }

  52% {
    scale: 1.055;
  }

  76% {
    scale: 0.985;
  }

  100% {
    scale: 1;
  }
}

.route-navigation .title-navigation__link.is-active:hover,
.route-navigation .title-navigation__link.is-active:focus-visible {
  transform: none;
}

.route-navigation .title-navigation__link.is-active:active {
  box-shadow:
    inset 6px 6px 13px var(--site-surface-shadow),
    inset -6px -6px 13px var(--site-surface-highlight);
}

.route-navigation .title-navigation__link:not(.is-active) {
  border-color: var(--site-surface);
  box-shadow:
    calc(6px * (1 - var(--route-view-progress)))
    calc(6px * (1 - var(--route-view-progress)))
    calc(12px * (1 - var(--route-view-progress)))
    rgb(197 197 197 / calc(1 - var(--route-view-progress))),
    calc(-6px * (1 - var(--route-view-progress)))
    calc(-6px * (1 - var(--route-view-progress)))
    calc(12px * (1 - var(--route-view-progress)))
    rgb(255 255 255 / calc(1 - var(--route-view-progress)));
  color: #090909;
  transform: none;
  pointer-events: auto;
}

.route-navigation
  .title-navigation__link:not(.is-active):is(:hover, :focus-visible) {
  transform: scale(1.035);
}

.route-navigation.is-route-detail .title-navigation__link:not(.is-active) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.route-navigation .title-navigation__link:not(.is-active) > span,
.route-navigation .title-navigation__link:not(.is-active) .title-navigation__icon-frame {
  opacity: calc(1 - var(--route-navigation-content-progress, 0));
}

/* Detail navigation and its compact menu */

.route-navigation__entry-title {
  position: relative;
  z-index: 1;
  grid-row: 1;
  grid-column: 3 / -1;
  display: none;
  align-self: center;
  justify-self: stretch;
  inline-size: auto;
  min-inline-size: 0;
  max-inline-size: 100%;
  block-size: var(--route-navigation-control-height);
  margin: 0;
  opacity: 0;
  padding-inline: 0;
  font-family: var(--type-family-display);
  font-size: var(--type-size-navigation-entry-title);
  font-weight: var(--type-weight-thin);
  letter-spacing: 0.1em;
  line-height: 1.2;
  transform: translateX(calc(-1.5rem * var(--route-title-offset, 1)));
  transition:
    opacity 260ms ease,
    transform 320ms var(--site-ease-out);
  pointer-events: none;
}

.route-navigation.is-route-detail .route-navigation__entry-title {
  display: flex;
  align-items: center;
  opacity: var(--route-title-opacity, 0);
  padding-inline: clamp(0.8rem, calc(1.35 * var(--site-scale-unit)), 1.35rem);
  transform: translateX(calc(-1.5rem * var(--route-title-offset, 1)));
}

.route-navigation__entry-title-item {
  position: relative;
  z-index: 1;
  display: none;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-navigation__entry-title-item.is-active {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  inline-size: 100%;
}

.route-navigation__entry-title-context,
.route-navigation__entry-title-subtitle {
  display: block;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  text-indent: 0;
  text-align: start;
}

.route-navigation__entry-title-context {
  margin-block-end: 0.05rem;
  font-size: var(--type-scale-navigation-context);
  font-weight: var(--type-weight-light);
  letter-spacing: 0.08em;
  line-height: 1.05;
}

.route-navigation__entry-title-subtitle {
  font-size: var(--type-scale-navigation-subtitle);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.055em;
  line-height: 1.08;
}

.route-navigation-menu__toggle {
  position: absolute;
  z-index: 5;
  inset-block-start: 50%;
  inset-inline-start: var(--site-page-inline-padding);
  display: none;
  inline-size: calc(var(--site-navigation-height) - 1rem);
  block-size: var(--site-navigation-height);
  border: 1px solid var(--site-surface);
  border-radius: 0.5rem;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.18), transparent 58%),
    var(--site-surface);
  box-shadow:
    6px 6px 12px var(--site-surface-shadow),
    -6px -6px 12px var(--site-surface-highlight);
  cursor: pointer;
  opacity: 0;
  place-items: center;
  transform: translateY(-50%) scale(0.94);
  transition:
    opacity 260ms ease,
    transform 320ms var(--site-ease-out),
    box-shadow 260ms ease;
}

.route-navigation .route-navigation-menu__toggle--persistent {
  position: relative;
  inset: auto;
  grid-row: 1;
  grid-column: 1;
  display: grid;
  align-self: start;
  justify-self: start;
  inline-size: var(--route-navigation-utility-size);
  block-size: var(--route-navigation-control-height);
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.route-navigation .route-navigation-menu__toggle--compact-only {
  display: none;
}

.route-navigation .route-navigation-menu__toggle--persistent:hover,
.route-navigation .route-navigation-menu__toggle--persistent:focus-visible {
  transform: translateY(-2px);
}

.route-navigation .route-navigation-menu__toggle--persistent:active,
.route-navigation.is-detail-menu-open
  .route-navigation-menu__toggle--persistent {
  transform: none;
}

.route-navigation-menu__home {
  color: var(--site-ink);
  text-decoration: none;
}

.route-navigation .route-navigation-menu__home.is-active {
  background: var(--site-surface);
  box-shadow:
    inset
    calc(5px * (1 - var(--route-view-progress)))
    calc(5px * (1 - var(--route-view-progress)))
    calc(11px * (1 - var(--route-view-progress)))
    rgb(197 197 197 / calc(1 - var(--route-view-progress))),
    inset
    calc(-5px * (1 - var(--route-view-progress)))
    calc(-5px * (1 - var(--route-view-progress)))
    calc(11px * (1 - var(--route-view-progress)))
    rgb(255 255 255 / calc(1 - var(--route-view-progress)));
}

.route-navigation-menu__home svg {
  inline-size: 1.45rem;
  block-size: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.route-navigation-menu__toggle span {
  grid-area: 1 / 1;
  inline-size: 1.05rem;
  block-size: 1.5px;
  border-radius: 999px;
  background: var(--site-ink);
  transition:
    transform 260ms var(--site-ease-out),
    opacity 180ms ease;
}

.route-navigation-menu__toggle span:nth-child(1) {
  transform: translateY(-0.38rem);
}

.route-navigation-menu__toggle span:nth-child(3) {
  transform: translateY(0.38rem);
}

.route-navigation-menu__toggle:hover,
.route-navigation-menu__toggle:focus-visible {
  transform: translateY(-50%) scale(1.04);
}

.route-navigation-menu__toggle:active,
[data-site-navigation].is-detail-menu-open .route-navigation-menu__toggle {
  box-shadow:
    inset 4px 4px 9px var(--site-surface-shadow),
    inset -4px -4px 9px var(--site-surface-highlight);
}

[data-site-navigation].is-detail-menu-open .route-navigation-menu__toggle span:nth-child(1) {
  transform: rotate(45deg);
}

[data-site-navigation].is-detail-menu-open .route-navigation-menu__toggle span:nth-child(2) {
  opacity: 0;
}

[data-site-navigation].is-detail-menu-open .route-navigation-menu__toggle span:nth-child(3) {
  transform: rotate(-45deg);
}

.route-navigation.is-route-detail .route-navigation-menu__toggle {
  display: grid;
  opacity: var(--route-title-opacity, 0);
  pointer-events: auto;
  transform: none;
}

.route-navigation .title-navigation__link > span {
  transition: opacity 360ms ease;
}

.route-navigation-menu__panel {
  --route-navigation-menu-border-color: rgb(70 70 70 / 0.12);
  --route-navigation-menu-item-radius: 0.68rem;
  --route-navigation-menu-item-block-size: 2.35rem;
  --route-navigation-menu-item-gap: 0.55rem;
  --route-navigation-menu-bridge-size: 1rem;
  --route-navigation-menu-state-color: rgb(17 17 17 / 0.62);
  --route-navigation-menu-min-inline-size: clamp(13rem, calc(18 * var(--site-scale-unit)), 16.5rem);
  --route-navigation-menu-shadow: 0 0.85rem 1.8rem rgb(45 45 45 / 0.22);
  --route-navigation-menu-viewport-inset: 8px;

  position: absolute;
  z-index: 4;
  inset-block-start: var(--detail-menu-anchor-block, 0);
  inset-inline-start: var(--detail-menu-panel-inline, 0);
  display: grid;
  inline-size: max-content;
  min-inline-size: var(--route-navigation-menu-min-inline-size);
  max-inline-size: calc(
    100vw
    - var(--route-navigation-menu-viewport-inset)
    - var(--route-navigation-menu-viewport-inset)
  );
  padding: clamp(0.45rem, calc(0.8 * var(--site-scale-unit)), 0.65rem);
  border: 1px solid var(--route-navigation-menu-border-color);
  border-radius: clamp(0.9rem, calc(1.4 * var(--site-scale-unit)), 1.25rem);
  background: var(--site-surface);
  box-shadow: var(--route-navigation-menu-shadow);
  gap: clamp(0.25rem, calc(0.45 * var(--site-scale-unit)), 0.4rem);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.45rem) scale(0.98);
  transform-origin: var(--detail-menu-pointer-inline, 50%) top;
  transition:
    opacity 220ms ease,
    transform 280ms var(--site-ease-out),
    visibility 220ms ease;
  visibility: hidden;
}

.route-navigation-menu__panel::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block-start: -0.48rem;
  inset-inline-start: var(--detail-menu-pointer-inline, 50%);
  inline-size: 0.9rem;
  block-size: 0.9rem;
  border-block-start: 1px solid var(--route-navigation-menu-border-color);
  border-inline-start: 1px solid var(--route-navigation-menu-border-color);
  background: var(--site-surface);
  transform: translateX(-50%) rotate(45deg);
}

[data-route-menu].route-navigation-menu__panel {
  --route-navigation-menu-min-inline-size: clamp(16rem, calc(22 * var(--site-scale-unit)), 20rem);
}

[data-site-navigation].is-detail-menu-open [data-route-menu],
.route-navigation-menu__panel--chapter.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.route-navigation-menu__panel--chapter {
  position: fixed;
  z-index: var(--site-layer-navigation);
  margin: 0;
}

.route-navigation-menu__panel--chapter::after,
[data-route-menu].route-navigation-menu__panel::after {
  position: absolute;
  inset-block-start: calc(-1 * var(--route-navigation-menu-bridge-size));
  inset-inline: 0;
  block-size: var(--route-navigation-menu-bridge-size);
  content: "";
}

.route-navigation-menu__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
}

.route-navigation-menu__item--expandable {
  grid-template-columns:
    minmax(0, 1fr)
    var(--route-navigation-menu-item-block-size);
  border-radius: var(--route-navigation-menu-item-radius);
  transition:
    background 180ms ease,
    box-shadow 180ms ease;
}

.route-navigation-menu__item--expandable:has(
  > .route-navigation-menu__link:hover,
  > .route-navigation-menu__link:focus-visible,
  > .route-navigation-menu__disclosure:hover,
  > .route-navigation-menu__disclosure:focus-visible
) {
  box-shadow: inset 0 0 0 1px var(--route-navigation-menu-state-color);
}

.route-navigation-menu__item--expandable:has(
  > .route-navigation-menu__link.is-active
) {
  background: var(--site-surface);
  box-shadow:
    inset 3px 3px 7px var(--site-surface-shadow),
    inset -3px -3px 7px var(--site-surface-highlight);
}

.route-navigation-menu__link,
.route-navigation-menu__disclosure,
.route-navigation-menu__subview {
  font-size: var(--type-size-navigation-menu-item);
}

.route-navigation-menu__link,
.route-navigation-menu__subview {
  font-weight: var(--type-weight-regular);
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.route-navigation-menu__link {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  align-items: center;
  min-block-size: var(--route-navigation-menu-item-block-size);
  padding: 0.28rem 0.55rem;
  border-radius: var(--route-navigation-menu-item-radius);
  color: var(--site-ink);
  gap: var(--route-navigation-menu-item-gap);
  transition:
    background 180ms ease,
    box-shadow 180ms ease;
}

.route-navigation-menu__item--expandable
  > .route-navigation-menu__link {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.route-navigation-menu__item--expandable
  > .route-navigation-menu__link:hover,
.route-navigation-menu__item--expandable
  > .route-navigation-menu__link:focus-visible,
.route-navigation-menu__item--expandable
  > .route-navigation-menu__link.is-active {
  background: transparent;
  box-shadow: none;
}

.route-navigation-menu__link:hover,
.route-navigation-menu__link:focus-visible {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--route-navigation-menu-state-color);
}

.route-navigation-menu__link.is-active {
  background: var(--site-surface);
  box-shadow:
    inset 3px 3px 7px var(--site-surface-shadow),
    inset -3px -3px 7px var(--site-surface-highlight);
}

.route-navigation-menu__disclosure {
  display: grid;
  min-inline-size: 0;
  min-block-size: var(--route-navigation-menu-item-block-size);
  padding: 0;
  border: 0;
  border-radius:
    0
    var(--route-navigation-menu-item-radius)
    var(--route-navigation-menu-item-radius)
    0;
  background: transparent;
  color: var(--site-ink);
  cursor: pointer;
  place-items: center;
}

.route-navigation-menu__disclosure:focus-visible {
  outline: 0;
}

.route-navigation-menu__disclosure-arrow {
  inline-size: 0.68em;
  block-size: 0.68em;
  border-inline-end: 0.13em solid currentColor;
  border-block-end: 0.13em solid currentColor;
  transform: translateY(-0.16em) rotate(45deg);
  transition: transform 220ms var(--site-ease-out);
}

.route-navigation-menu__disclosure:hover
  .route-navigation-menu__disclosure-arrow,
.route-navigation-menu__disclosure:focus-visible
  .route-navigation-menu__disclosure-arrow {
  transform: translateY(-0.16em) rotate(45deg) scale(1.12);
}

.route-navigation-menu__disclosure[aria-expanded="true"]
  .route-navigation-menu__disclosure-arrow {
  transform: translateY(0.16em) rotate(225deg);
}

.route-navigation-menu__subviews {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  min-inline-size: 0;
  opacity: 0;
  transition:
    grid-template-rows 300ms var(--site-ease-out),
    opacity 180ms ease,
    visibility 300ms ease;
  visibility: hidden;
}

.route-navigation-menu__item.is-expanded
  > .route-navigation-menu__subviews {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}

.route-navigation-menu__subview-tree {
  --route-navigation-menu-tree-inline: 1.075rem;
  --route-navigation-menu-subview-inline: 2.4rem;

  position: relative;
  display: grid;
  min-block-size: 0;
  padding-block: 0.28rem 0.12rem;
  overflow: hidden;
  gap: clamp(0.16rem, calc(0.3 * var(--site-scale-unit)), 0.28rem);
}

.route-navigation-menu__subview-tree::before {
  position: absolute;
  inset-block-start: 0;
  inset-block-end: calc(
    0.12rem
    + (var(--route-navigation-menu-item-block-size) / 2)
  );
  inset-inline-start: var(--route-navigation-menu-tree-inline);
  inline-size: 1px;
  background: var(--site-ink);
  content: "";
}

.route-navigation-menu__subview {
  position: relative;
  display: grid;
  grid-template-columns: 1.05rem minmax(0, 1fr);
  align-items: center;
  min-block-size: var(--route-navigation-menu-item-block-size);
  padding: 0 0 0 var(--route-navigation-menu-subview-inline);
  color: var(--site-ink);
  gap: var(--route-navigation-menu-item-gap);
}

.route-navigation-menu__subview::before {
  position: absolute;
  z-index: 0;
  inset-block-start: 50%;
  inset-inline-start: var(--route-navigation-menu-tree-inline);
  inline-size: calc(
    var(--route-navigation-menu-subview-inline)
    - var(--route-navigation-menu-tree-inline)
  );
  block-size: 1px;
  background: var(--site-ink);
  content: "";
}

.route-navigation-menu__subview:hover,
.route-navigation-menu__subview:focus-visible {
  background: transparent;
  box-shadow: none;
}

.route-navigation-menu__subview-label {
  position: relative;
  display: flex;
  align-self: stretch;
  align-items: center;
  min-inline-size: 0;
  padding-inline: var(--route-navigation-menu-item-gap);
  border-radius: var(--route-navigation-menu-item-radius);
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.route-navigation-menu__subview
  > .route-navigation-menu__subview-label {
  margin-inline-end: var(--route-navigation-menu-tree-inline);
}

.route-navigation-menu__subview-label::before {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(-1 * var(--route-navigation-menu-item-gap));
  inline-size: var(--route-navigation-menu-item-gap);
  block-size: 1px;
  background: var(--site-ink);
  content: "";
  opacity: 0;
  transition: opacity 180ms ease;
}

.route-navigation-menu__subview:hover
  .route-navigation-menu__subview-label::before,
.route-navigation-menu__subview:focus-visible
  .route-navigation-menu__subview-label::before,
.route-navigation-menu__subview.is-current
  .route-navigation-menu__subview-label::before,
.route-navigation-menu__link--subview:hover
  .route-navigation-menu__subview-label::before,
.route-navigation-menu__link--subview:focus-visible
  .route-navigation-menu__subview-label::before,
.route-navigation-menu__link--subview.is-active
  .route-navigation-menu__subview-label::before {
  opacity: 1;
}

.route-navigation-menu__subview:hover
  .route-navigation-menu__subview-label,
.route-navigation-menu__subview:focus-visible
  .route-navigation-menu__subview-label,
.route-navigation-menu__link--subview:hover
  .route-navigation-menu__subview-label,
.route-navigation-menu__link--subview:focus-visible
  .route-navigation-menu__subview-label {
  box-shadow: inset 0 0 0 1px var(--route-navigation-menu-state-color);
}

.route-navigation-menu__subview.is-current
  .route-navigation-menu__subview-label,
.route-navigation-menu__link--subview.is-active
  .route-navigation-menu__subview-label {
  background: var(--route-navigation-menu-state-color);
  box-shadow: none;
  color: #fff;
}

.route-navigation-menu__subview.is-current
  .route-navigation-menu__index,
.route-navigation-menu__link--subview.is-active
  .route-navigation-menu__index {
  border-color: var(--route-navigation-menu-state-color);
  background: var(--route-navigation-menu-state-color);
  color: #fff;
}

.route-navigation-menu__subview > * {
  position: relative;
  z-index: 1;
}

.route-navigation-menu__icon {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  object-fit: contain;
}

.route-navigation-menu__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  font-family: var(--type-family-text);
  font-size: var(--type-size-navigation-menu-index);
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  text-indent: 0;
}

.route-navigation-menu__index-value {
  display: block;
  translate: 0.055em 0;
}

.route-navigation-menu__icon--text {
  display: grid;
  place-items: center;
  font-family: var(--type-family-display);
  font-size: var(--type-size-navigation-menu-symbol);
  font-weight: var(--type-weight-medium);
  line-height: 1;
}

svg.route-navigation-menu__icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.route-navigation-menu__link--subview:hover,
.route-navigation-menu__link--subview:focus-visible,
.route-navigation-menu__link--subview.is-active {
  background: transparent;
  box-shadow: none;
}

.route-view {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(
    var(--route-navigation-dock-offset)
    + var(--site-navigation-height)
    + var(--site-navigation-content-gap)
  );
  inset-block-end: calc(
    var(--site-chrome-edge-offset)
    + var(--site-floating-action-size)
    + var(--site-navigation-content-gap)
  );
  inset-inline: 0;
  padding-block: 0;
  padding-inline: var(--site-content-inline-padding);
}

:is(
  .route-document--detail,
  .route-document--timeline
) .route-detail-view {
  /*
   * Routed detail and timeline decks reach both physical viewport edges.
   * Their own shared content-start contract places the first surface below
   * the navigation, so the generic route-view offset must not be added a
   * second time.
   */
  inset-block-start: 0;
  inset-block-end: 0;
}

/* Navigation transition overlay */

.overview-switch-overlay {
  position: absolute;
  z-index: 4;
  inset-block-start: calc(
    var(--route-navigation-dock-offset)
    + var(--site-navigation-height)
    + var(--site-navigation-content-gap)
  );
  inset-block-end: calc(
    var(--site-chrome-edge-offset)
    + var(--site-floating-action-size)
    + var(--site-navigation-content-gap)
  );
  inset-inline: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  padding-inline: var(--site-page-inline-padding);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}

.overview-switch-overlay__group {
  display: none;
  inline-size: min(100%, calc(88 * var(--site-scale-unit)), 72rem);
  min-inline-size: 0;
  min-block-size: clamp(14rem, calc(29 * var(--site-scale-unit)), 24rem);
  align-content: center;
  justify-items: stretch;
  gap: clamp(0.15rem, calc(0.45 * var(--site-block-unit)), 0.45rem);
}

.overview-switch-overlay__group.is-active {
  display: grid;
}

.overview-switch-overlay__title-row {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-self: center;
  inline-size: fit-content;
  min-inline-size: 0;
  max-inline-size: 100%;
  gap: clamp(0.75rem, calc(1.35 * var(--site-scale-unit)), 1.35rem);
  margin-inline: auto;
  opacity: 0;
  transition: opacity 360ms ease;
}

.overview-switch-overlay__icon {
  display: block;
  flex: none;
  inline-size: clamp(1.65rem, calc(3.35 * var(--site-scale-unit)), 3.85rem);
  block-size: clamp(1.65rem, calc(3.35 * var(--site-scale-unit)), 3.85rem);
  object-fit: contain;
}

.overview-switch-overlay__title {
  min-inline-size: 0;
  margin: 0;
  color: #111;
  font-family: var(--type-family-display);
  font-size: var(--type-size-route-transition-title);
  font-weight: var(--type-weight-thin);
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  text-wrap: balance;
  text-transform: uppercase;
  white-space: normal;
}

.overview-switch-overlay__polaroids {
  --overview-switch-polaroid-gap: clamp(
    0.75rem,
    calc(2 * var(--site-scale-unit)),
    2rem
  );

  position: relative;
  z-index: 1;
  display: flex;
  min-block-size: clamp(13rem, calc(27 * var(--site-scale-unit)), 22rem);
  align-items: center;
  justify-content: center;
  gap: var(--overview-switch-polaroid-gap);
  isolation: isolate;
}

.overview-switch-overlay__polaroids::before {
  position: absolute;
  z-index: 0;
  inset-inline: 50%;
  inset-block-start: 50%;
  inline-size: calc(
    var(--site-canvas-inline-size) - (2 * var(--site-page-inline-padding))
  );
  block-size: clamp(11rem, calc(19 * var(--site-scale-unit)), 17rem);
  border-block: 2px solid #111;
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0);
  transform-origin: center;
  transition:
    opacity 420ms ease,
    transform 620ms cubic-bezier(0.2, 0.9, 0.2, 1);
  pointer-events: none;
}

.polaroid-card {
  --polaroid-rotation: 0deg;
  --polaroid-offset-y: 0;

  position: relative;
  z-index: 2;
  display: grid;
  flex: 0 0 auto;
  margin: 0;
  padding: clamp(0.4rem, calc(0.7 * var(--site-scale-unit)), 0.66rem)
    clamp(0.4rem, calc(0.7 * var(--site-scale-unit)), 0.66rem)
    clamp(1.55rem, calc(2.65 * var(--site-scale-unit)), 2.65rem);
  border-radius: clamp(0.25rem, calc(0.5 * var(--site-scale-unit)), 0.45rem);
  background: linear-gradient(145deg, #ededed 0%, #fff 100%);
  box-shadow:
    0 2.3rem 4.6rem rgb(0 0 0 / 32%),
    0 0.75rem 1.8rem rgb(0 0 0 / 22%),
    0 0.18rem 0.5rem rgb(0 0 0 / 22%),
    inset 0 0 0 1px rgb(0 0 0 / 14%);
  transform: translateY(var(--polaroid-offset-y)) rotate(var(--polaroid-rotation));
  transform-origin: center 82%;
}

.overview-switch-overlay__polaroid {
  --polaroid-enter-delay: 0ms;
  --polaroid-enter-x: clamp(-52rem, calc(-72 * var(--site-scale-unit)), -28rem);

  inline-size: clamp(7.75rem, calc(13.2 * var(--site-scale-unit)), 12.7rem);
  opacity: 0;
  will-change: opacity, transform;
}

.overview-switch-overlay__polaroid:nth-child(1) {
  --polaroid-rotation: -8deg;
  --polaroid-enter-delay: 330ms;
  --polaroid-offset-y: clamp(0.55rem, calc(1.15 * var(--site-scale-unit)), 1.1rem);
  z-index: 2;
}

.overview-switch-overlay__polaroid:nth-child(2) {
  --polaroid-rotation: 4.5deg;
  --polaroid-enter-delay: 220ms;
  --polaroid-offset-y: clamp(-0.8rem, calc(-1.05 * var(--site-scale-unit)), -0.4rem);
  z-index: 4;
}

.overview-switch-overlay__polaroid:nth-child(3) {
  --polaroid-rotation: -2.5deg;
  --polaroid-enter-delay: 110ms;
  --polaroid-offset-y: clamp(0.2rem, calc(0.55 * var(--site-scale-unit)), 0.55rem);
  z-index: 3;
}

.overview-switch-overlay__polaroid:nth-child(4) {
  --polaroid-rotation: 8.5deg;
  --polaroid-offset-y: clamp(0.65rem, calc(1.2 * var(--site-scale-unit)), 1.2rem);
  z-index: 1;
}

.polaroid-card__media {
  display: grid;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: clamp(0.12rem, calc(0.25 * var(--site-scale-unit)), 0.22rem);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 55%), rgb(0 0 0 / 14%)),
    #d7d7d7;
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 13%),
    inset 0 0 2.6rem rgb(0 0 0 / 10%);
}

.polaroid-card__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.polaroid-card__media img[hidden],
.overview-switch-overlay__polaroid--fallback {
  display: none;
}

.overview-switch-overlay__group.is-protected-locked
  [data-overview-switch-protected-frame] {
  display: none;
}

.overview-switch-overlay__group.is-protected-locked
  .overview-switch-overlay__polaroid--fallback {
  display: grid;
}

@media (max-width: 75rem) {
  .overview-switch-overlay__group,
  .overview-switch-overlay__polaroids {
    inline-size: 100%;
  }

  .overview-switch-overlay__polaroids {
    --overview-switch-polaroid-gap: clamp(
      0.5rem,
      calc(1.5 * var(--site-scale-unit)),
      1.25rem
    );
  }

  .overview-switch-overlay__polaroids::before {
    inline-size: 100%;
  }

  .overview-switch-overlay__polaroid {
    inline-size: min(
      calc(
        (100% - 3 * var(--overview-switch-polaroid-gap)) / 4
      ),
      10.5rem
    );
  }

  .route-navigation {
    --route-navigation-columns:
      var(--route-navigation-utility-size)
      minmax(0, 1fr)
      var(--route-navigation-trailing-utility-size);

    overflow: visible;
    padding-inline: var(--site-page-inline-padding);
  }

  .route-navigation
    :is(.title-navigation__link--chapter, .route-navigation-menu__home) {
    display: none;
  }

  .route-navigation .route-navigation-menu__toggle--compact-only {
    display: grid;
  }

  .route-navigation__compact-context {
    position: relative;
    z-index: 2;
    grid-row: 1;
    grid-column: 2;
    display: flex;
    min-inline-size: 0;
    block-size: var(--route-navigation-control-height);
    gap: clamp(0.35rem, calc(0.6 * var(--site-scale-unit)), 0.55rem);
    align-items: center;
    justify-content: center;
    margin: 0;
    padding-inline: var(--route-navigation-control-inline-padding);
    overflow: hidden;
    border: 1px solid var(--site-surface);
    border-radius: 0.5rem;
    background: var(--site-surface);
    box-shadow:
      inset 5px 5px 11px var(--site-surface-shadow),
      inset -5px -5px 11px var(--site-surface-highlight);
    color: var(--site-ink);
    font-family: var(--type-family-compact-text);
    font-size: var(--type-size-navigation-control-active);
    font-weight: var(--type-weight-semibold);
    letter-spacing: 0.045em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
  }

  .route-navigation__compact-context > span {
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .route-navigation__compact-context-icon {
    inline-size: 1.15em;
    block-size: 1.15em;
    flex: none;
    object-fit: contain;
  }

  .route-view:not(.route-detail-view) {
    inset-block-start: calc(
      var(--site-chrome-edge-offset)
      + var(--site-navigation-height)
      + var(--site-navigation-content-gap)
    );
    inset-block-end: calc(
      var(--site-chrome-edge-offset)
      + var(--site-floating-action-size)
      + var(--site-navigation-content-gap)
    );
    padding-block: clamp(1.5rem, calc(4 * var(--site-scale-unit)), 4rem);
  }
}

@media (max-width: 46rem) {
  .overview-switch-overlay__polaroid {
    padding-block-start: clamp(
      0.25rem,
      1.3vi,
      calc(0.7 * var(--site-scale-unit))
    );
    padding-inline: clamp(
      0.25rem,
      1.3vi,
      calc(0.7 * var(--site-scale-unit))
    );
    padding-block-end: clamp(
      0.9rem,
      4.9vi,
      calc(2.65 * var(--site-scale-unit))
    );
    border-radius: clamp(
      0.18rem,
      0.9vi,
      calc(0.5 * var(--site-scale-unit))
    );
  }

  .overview-switch-overlay__polaroid .polaroid-card__media {
    border-radius: clamp(
      0.06rem,
      0.45vi,
      calc(0.25 * var(--site-scale-unit))
    );
  }
}

@media (max-width: 32rem) {
  .overview-switch-overlay__title-row {
    gap: clamp(0.4rem, 2.5vi, 0.75rem);
  }

  .overview-switch-overlay__icon {
    inline-size: clamp(1.25rem, 8vi, 2.25rem);
    block-size: clamp(1.25rem, 8vi, 2.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-navigation .title-navigation__link.is-active,
  .route-navigation-menu__panel,
  .route-navigation-menu__link,
  .route-navigation-menu__item--expandable,
  .route-navigation-menu__disclosure-arrow,
  .route-navigation-menu__subviews,
  .route-navigation-menu__subview,
  .route-navigation-menu__subview-label,
  .route-navigation-menu__subview-label::before {
    transition: none;
  }
}

/* Overview and detail scene containers */

.chapter-overview {
  display: grid;
  container-type: inline-size;
  align-items: center;
  justify-items: start;
  opacity: var(--content-overview-opacity, 0);
  transform: translateY(var(--content-overview-offset, 0));
  will-change: opacity, transform;
}
}