/* ==========================================================================
   Responsive: Medium (< 800px)
   ========================================================================== */

@media (max-width: 800px) {
  :root {
    --text-hero: var(--font-size-xl);
    --hero-horizon-gap: 2rem;
    --frame-inline: 40px;
    --frame-block: 40px;
    --frame-chrome-fade: 64px;
    --frame-chrome-clearance: 20px;
    --frame-content-top: calc(var(--frame-block) + 88px);
    --frame-content-bottom: var(--frame-block);
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  .site-header {
    z-index: 220;
  }

  .site-footer-bar {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
  }

  .top-nav {
    z-index: 300;
  }

  .top-nav.has-overlap-backdrop::before {
    display: none;
  }

  .menu-trigger {
    justify-content: flex-end;
  }

  .menu-trigger-toggle {
    min-height: 44px;
    margin: -15px -10px;
    padding: 15px 10px;
  }

  .top-nav .menu-links {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(var(--frame-block) + 44px) var(--frame-inline) var(--frame-block);
    align-items: flex-end;
    gap: 8px;
    color: var(--color-text-day);
    animation: mobileMenuPanelIn 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .top-nav .menu-links::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #faf9f6;
    background-image:
      linear-gradient(rgba(250, 249, 246, 0.97), rgba(250, 249, 246, 0.97)),
      url('../paper.png');
    background-size: auto, 260px 260px;
    /* The menu surface fades across the left half, then remains fully opaque
       behind the right-aligned navigation. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 50%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 50%, #000 100%);
  }

  .top-nav.is-closing .menu-links {
    pointer-events: none;
    animation: mobileMenuPanelOut 0.18s ease-in both;
  }

  .theme-night .top-nav .menu-links {
    color: #fff;
  }

  .theme-night .top-nav .menu-links::before {
    background-color: #2e2d2b;
    background-image:
      linear-gradient(rgba(46, 45, 43, 0.97), rgba(46, 45, 43, 0.97)),
      url('../paper-dark.png');
  }

  .top-nav .menu-links[hidden] {
    display: none;
  }

  .top-nav .menu-link-group {
    position: relative;
    z-index: 1;
    width: auto;
    align-items: flex-end;
    gap: 8px;
  }

  .top-nav .menu-link-group--external {
    margin-top: 8px;
    padding-top: 0;
    border: 0;
  }

  .top-nav .nav-link {
    position: relative;
    width: max-content;
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 0 0 16px;
    justify-content: flex-end;
    touch-action: manipulation;
    text-align: end;
    font-size: var(--text-ui);
    line-height: var(--leading-ui);
  }

  .top-nav .nav-link::after {
    position: absolute;
    inset-inline-end: calc(100% + 6px);
    pointer-events: none;
  }

  .menu-trigger-toggle:focus-visible,
  .top-nav .nav-link:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  /* On scrolling pages, the fixed header gets an opaque-to-transparent veil.
     Content remains visible as it passes underneath without colliding with
     the logo or menu. */
  body:has(.content-page) .site-header {
    padding-bottom: calc(var(--frame-chrome-fade) + var(--frame-chrome-clearance));
    background: linear-gradient(
      to bottom,
      rgba(var(--chrome-surface), 1) 0%,
      rgba(var(--chrome-surface), 1) calc(100% - var(--frame-chrome-fade)),
      rgba(var(--chrome-surface), 0) 100%
    );
  }

  .theme-night {
    --chrome-surface: 46, 45, 43;
  }

  .content-page::before {
    background: radial-gradient(
      ellipse 88% 120% at 50% 48%,
      rgba(var(--page-veil), 0.985) 0%,
      rgba(var(--page-veil), 0.985) 42%,
      rgba(var(--page-veil), 0.96) 52%,
      rgba(var(--page-veil), 0.72) 64%,
      rgba(var(--page-veil), 0.34) 76%,
      rgba(var(--page-veil), 0) 92%
    );
  }

  .content-surface,
  .page--prose .content-surface,
  .page--post-detail .content-surface {
    width: min(100%, 680px);
  }


  .main-logo {
    width: 210px;
    max-width: calc(65vw * 0.7);
  }

  body:has(.page[data-page-type="home"]) .center-logo,
  body:has(.page[data-page-type="about"]) .center-logo,
  body:has(.page[data-page-type="model"]) .center-logo,
  body:has(.page[data-page-type="corner-logo"]) .center-logo {
    margin-block-start: -10px;
  }

  body:has(.page[data-page-type="home"]) .main-logo,
  body:has(.page[data-page-type="about"]) .main-logo,
  body:has(.page[data-page-type="model"]) .main-logo,
  body:has(.page[data-page-type="corner-logo"]) .main-logo {
    width: 22px;
    max-width: none;
  }


  @keyframes mobileMenuPanelIn {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes mobileMenuPanelOut {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-4px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .top-nav .menu-links {
      animation-duration: 0.01ms;
    }
  }

}