/* Keep controls clear of the device cutout. */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.site-header { top: env(safe-area-inset-top, 0px); }
html { scroll-padding-top: calc(110px + env(safe-area-inset-top, 0px)); }

/* Safari 26 stops sampling a sticky edge element when that same element owns
   backdrop-filter (WebKit 319479). Keep the sticky header itself filter-free
   and render the glass on a real inset child instead. Native page scrolling
   and rubber-band overscroll remain untouched. */
@supports (-webkit-touch-callout: none) {
  .fluid-layer { visibility: hidden; }
  .fluid-layer canvas { visibility: visible; }
}

/* Safari 26 deliberately paints an opaque color extension above any fixed or
   sticky element that touches the top viewport edge (WebKit 301756). That
   browser-owned region cannot contain CSS backdrop blur. Give Safari one
   stable edge pixel to tint from, then render the real frosted surface on an
   inset child as recommended for WebKit 319479. */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 979px) and (display-mode: browser) {
    html:has(> body:not([data-page="iv"])) {
      background:
        radial-gradient(ellipse at 86% -4%, #503f6566, transparent 58%),
        radial-gradient(ellipse at 4% 72%, #26485322, transparent 58%),
        #101012;
      background-attachment: fixed;
    }
    body { padding-top: 0; }
    body:not([data-page="iv"]) { background: transparent; }
    body:not([data-page="iv"])::before {
      position: absolute;
      inset: 0 0 auto;
      height: calc(100lvh + 120px);
    }
    body > .site-header {
      top: 0;
      width: 100%;
      margin-top: 0;
      margin-inline: 0;
      padding-top: 12px;
      background: transparent;
      border-bottom: 0;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      view-transition-name: none;
    }
    body > .site-header {
      position: fixed;
      top: -12px;
      right: 0;
      left: 0;
      padding-top: 18px;
      padding-bottom: 6px;
      --header-bottom-padding: 6px;
    }
    body > .site-header::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      z-index: 0;
      background: #1c1722;
      pointer-events: none;
    }
    body > main.container { margin-top: 70px; }
    body[data-page="iv"][data-iv-top-bleed] {
      padding-top: 0;
      height: calc(100dvh + var(--iv-browser-bleed));
    }
    body[data-page="iv"] .iv-gallery #root {
      top: 0;
      height: 100%;
    }
    body[data-page="iv"] .iv-gallery::before { inset: 0; }
    body[data-page="iv"] .iv-gallery-heading { top: 100px; }
    body > .site-header > .site-header-glass {
      display: block;
      position: absolute;
      inset: 1px 0 0;
      z-index: 0;
      background: rgb(16 16 18 / 10%);
      border-bottom: 1px solid var(--line);
      -webkit-backdrop-filter: blur(26px) saturate(135%);
      backdrop-filter: blur(26px) saturate(135%);
      pointer-events: none;
    }
    body > .site-header > .nav-wrap {
      width: calc(100vw - 32px);
      max-width: none;
      position: relative;
      z-index: 1;
      left: 50%;
      margin: 0;
      transform: translateX(-50%);
      view-transition-name: site-header;
    }
    @media screen and (max-width: 640px) {
      body > main.container { margin-top: 66px; }
      body[data-page="iv"] .iv-gallery-heading { top: 88px; }
    }
  }
}


/* Safari's 120px lower canvas extension is browser-chrome background, not
   visible scene space: keep the title below the header and center the drop in
   the actual viewport. */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 979px) and (display-mode: browser) {
    body[data-page="iv"] .iv-gallery-heading { top: 22px; }
    body[data-page="iv"] .iv-gallery #root {
      transform: translateY(calc(var(--iv-browser-bleed) / -2));
    }
  }
}