:root {
  --mobile-nav-line: rgba(31, 20, 16, 0.18);
  --mobile-nav-backdrop: rgba(31, 20, 16, 0.48);
  --mobile-nav-control-line: rgba(31, 20, 16, 0.3);
}

@media (max-width: 820px) {
  html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

  .side-rail,
  .rail-tab,
  .rail-backdrop { display: none !important; }

  main,
  .footer,
  body.has-rail main,
  body.has-rail .footer {
    width: 100% !important;
    margin-left: 0 !important;
    transition: none;
  }

  .hero-contents { display: none; }

  .hero-text { position: static; }
  /* The mark rides inside the photograph's frame: it holds 44px from the top
     of the screen while the picture passes, then the frame's bottom edge
     carries it up with the page. Sticky needs the frame to stop clipping, so
     the clip moves to the picture element. */
  .home-mark { display: none !important; }
  .hero-photo {
    overflow: visible;
    padding: 44px 44px 44px 0;
    box-sizing: border-box;
  }
  .hero-photo picture { position: absolute; inset: 0; overflow: hidden; }
  .hero-photo .home-mark--photo {
    display: block !important;
    position: sticky;
    top: 44px;
    z-index: 3;
    width: 156px;
    margin: 0 0 0 auto;
  }

  .carte-rail { left: 0 !important; }

  .mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 68px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--paper-deep);
    border-top: 1px solid var(--mobile-nav-line);
  }

  .mobile-nav__item {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 68px;
    gap: 3px;
    padding: 8px 2px;
    color: var(--ink-soft);
    font-family: var(--body);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .mobile-nav__item svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-nav__item.is-current { color: var(--accent-text); }

  .mobile-nav__item:focus-visible,
  .mobile-more-sheet a:focus-visible,
  .mobile-more-sheet button:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: -2px;
  }

  .mobile-more-sheet {
    width: 100%;
    max-width: none;
    max-height: min(62dvh, 430px);
    margin: auto 0 0;
    padding: var(--s4) var(--s4) max(var(--s4), env(safe-area-inset-bottom));
    color: var(--ink);
    background: var(--paper);
    border: 0;
  }

  .mobile-more-sheet::backdrop { background: var(--mobile-nav-backdrop); }

  .mobile-more-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s2);
  }

  .mobile-more-sheet__home {
    display: flex;
    align-items: center;
    min-height: 44px;
    border: 0 !important;
  }
  .mobile-more-sheet__home img { width: 104px; height: auto; display: block; }

  .mobile-more-sheet__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--mobile-nav-control-line);
    border-radius: 0;
  }
  .mobile-more-sheet__close svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    fill: none;
  }

  .mobile-more-sheet nav { border-top: 1px solid var(--mobile-nav-line); }

  .mobile-more-sheet a {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: var(--ink);
    font-family: var(--display);
    font-size: 1.4rem;
    border-bottom: 1px solid var(--mobile-nav-line);
  }
}

@media (min-width: 821px) {
  .mobile-nav,
  .mobile-more-sheet { display: none; }
}

@media (min-width: 821px) {
  .home-mark { width: 156px; }
  .home-mark--photo { display: none; }
}