/* Responsive authority: 720/767 mobile transformations and 1024 rail dock. */
:root {
  /* The page ends clear of the one bottom instrument, Menu (bottom-right: 18px inset, 52px
     box, one 26px gap); no bottom band is reserved (UI round 11). */
  --content-end-clearance: max(118px, calc(env(safe-area-inset-bottom, 0px) + 96px));
}

html {
  overflow-x: clip;
  scroll-padding-block: calc(var(--vessel-visual-inset) + 24px) var(--content-end-clearance);
}

body {
  overflow-x: clip;
  overflow-y: visible;
}

.shell,
.site-main {
  overflow: visible;
}

.site-main {
  max-width: 100%;
  padding-bottom: var(--content-end-clearance);
}

.site-main :where(img, picture, video, canvas, svg, iframe) {
  max-width: 100%;
}

.site-main :where(h1, h2, h3, p, li, a, code, pre, dd, dt) {
  overflow-wrap: anywhere;
}

.site-main :where(pre, table, [data-bounded-reader]) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])) {
  min-height: 44px;
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  position: relative;
  z-index: 2;
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 82%, transparent);
}

.site-rail {
  max-height: calc(100dvh - (2 * var(--vessel-visual-inset)));
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

.site-rail :where(a, button),
.rail-trigger,
.scheme-toggle {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

@media (min-width: 1024px) {
  .site-main {
    width: calc(100% - var(--rail-width) - var(--vessel-visual-inset));
  }

  body[data-guide-state="closed"] .site-main {
    width: 100%;
  }

  .site-rail {
    top: var(--vessel-visual-inset);
    right: var(--vessel-visual-inset);
    bottom: var(--vessel-visual-inset);
    width: var(--rail-width);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-main {
    width: 100%;
  }

  .site-rail {
    top: var(--vessel-visual-inset);
    right: var(--vessel-visual-inset);
    bottom: var(--vessel-visual-inset);
    left: auto;
    width: min(var(--rail-width), calc(100vw - (2 * var(--vessel-visual-inset))));
  }

  body[data-guide-state="open"] .rail-scrim {
    display: block;
  }
}

@media (max-width: 767px) {
  .site-main {
    width: 100%;
    padding-inline:
      max(24px, calc(env(safe-area-inset-left, 0px) + 18px))
      max(24px, calc(env(safe-area-inset-right, 0px) + 18px));
  }

  .site-rail {
    top: var(--vessel-visual-inset);
    right: var(--vessel-visual-inset);
    bottom: var(--vessel-visual-inset);
    left: var(--vessel-visual-inset);
    width: auto;
  }

  .home-identity,
  .home-identity h1,
  .site-main > * {
    max-width: 100%;
  }

  .home-identity h1 {
    font-size: clamp(3.25rem, 20vw, 7rem);
  }

  .rail-trigger {
    right: max(14px, calc(env(safe-area-inset-right, 0px) + 14px));
  }
}

@media (max-width: 720px) {
  .site-main {
    padding-top: max(96px, calc(env(safe-area-inset-top, 0px) + 80px));
  }

  :where(.work-grid, .concept-grid, .gallery, .gallery.two, .narrative, .fact-strip, .entry-header, .work-feature) {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-rail .rail-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-context-list a {
    padding-block: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}