/* Production v2.2.0 — promoted from status-bar preview v1.0.10. */
@media (max-width: 700px) {
  :root {
    --status-nav-padding: max(3.5vw, 14px);
  }

  html,
  body { background-color: var(--bg); }

  .site-stage { background-color: var(--bg); }

  /* Normal document flow lets Safari show scrolling content behind its own chrome. */
  .site-sidebar {
    position: relative;
    isolation: isolate;
    top: auto;
    margin-top: 0;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--status-nav-padding));
    padding-bottom: var(--status-nav-padding);
    background-color: var(--bg);
    background-image: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-sidebar::before { content: none; }

  .mobile-header {
    position: relative;
    z-index: 1;
    isolation: isolate;
  }

  .mobile-header::before { content: none; }

  /* The collection panel travels with its now-scrolling navigation. */
  .mobile-collection-list { position: absolute; }
}

@media (max-width: 700px) and (orientation: portrait) {
  :root {
    --portrait-nav-base-height: calc(13px + var(--status-nav-padding));
    --portrait-nav-base-bottom: calc((var(--portrait-nav-base-height) - 21px) * .8);
    --portrait-nav-base-top: calc((var(--portrait-nav-base-height) - 21px) * .2);
    --portrait-nav-top: calc(var(--portrait-nav-base-top) * 1.5);
    --portrait-nav-height: calc(21px + var(--portrait-nav-top) + var(--portrait-nav-base-bottom) * 2);
    --mobile-nav-height: var(--portrait-nav-height);
    /* Extra painted area, not a hardcoded measurement of the system status bar. */
    --status-glass-overscan: max(100px, env(safe-area-inset-top, 0px));
  }

  .site-sidebar {
    position: sticky;
    top: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: 0;
    padding-inline: 6vw;
    background-color: transparent;
    isolation: isolate;
  }

  .site-sidebar::before {
    position: absolute;
    z-index: -1;
    top: calc(0px - var(--status-glass-overscan));
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    pointer-events: none;
    background: rgba(22, 22, 22, .18);
    -webkit-backdrop-filter: blur(24px) saturate(1.25);
    backdrop-filter: blur(24px) saturate(1.25);
  }

  /* Moving an ordinary-flow element with the root scroll timeline avoids Safari's
     flat-color extension for fixed/sticky layers, while keeping it at viewport y=0.
     The overscan remains part of the scrolling page, so Safari can render it beneath
     the system indicators. Older browsers retain the sticky fallback above. */
  @supports (animation-timeline: scroll(root block)) {
    .site-sidebar {
      position: relative;
      animation: status-glass-follow 1s linear both;
      animation-timeline: scroll(root block);
    }
  }

  .mobile-header {
    height: var(--portrait-nav-height);
    align-content: end;
    align-items: last baseline;
    /* Increase only the previous top gap by 50%; retain the doubled bottom gap. */
    padding-top: var(--portrait-nav-top);
    padding-bottom: calc(var(--portrait-nav-base-bottom) * 2);
  }

  .mobile-header .site-name,
  .mobile-header .mobile-nav-trigger,
  .mobile-header .language-switch { line-height: 1; }

  .mobile-header .mobile-nav-trigger,
  .mobile-header .language-switch button { padding-top: 0; padding-bottom: 0; }

  .mobile-header .language-switch {
    align-items: baseline;
    /* Reset the desktop fixed-position inset, which also offsets relative boxes. */
    right: auto;
    left: auto;
  }

  .mobile-header { isolation: auto; }

  .mobile-collection-list {
    position: fixed;
    /* With 6px row gaps and 3px item padding, these optical edge gaps are
       slightly larger than the whitespace between visible text rows. */
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .home-view,
  .about-view { padding-top: var(--mobile-nav-height); }

  /* Align the first visible text line, rather than its extra line-height space. */
  .about-content h1 {
    margin-top: calc((1em - 1lh) / 2 - .12em);
  }

  @supports (text-box-trim: trim-start) {
    .about-content h1 {
      margin-top: 0;
      text-box-trim: trim-start;
      text-box-edge: cap alphabetic;
    }
  }
}

@keyframes status-glass-follow {
  from { transform: translateY(0); }
  to { transform: translateY(var(--status-scroll-distance, 0px)); }
}