/* The menu shares the sky photograph and glass treatment with the finale. */
@media (max-width:767px) {
  body.menu-open .journey-header {
    height:88px; min-height:88px; padding:18px max(16px,4vw);
    background:linear-gradient(#07192bf2,#07192b00); border-color:transparent;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    opacity:1; transform:none; pointer-events:auto;
  }
  body.menu-open .journey-header .brand { position:relative; align-self:flex-start; margin-top:7px; }
  body.menu-open .journey-header .brand::after {
    content:'THE SKY GOES ON'; position:absolute; top:35px; left:39px;
    white-space:nowrap; font:400 7px/1.5 var(--font-latin); letter-spacing:.29em; color:#c3d8e7;
  }
  body.menu-open .reading-progress { opacity:0; }
  html.js #mobile-menu {
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    padding:120px max(24px,8.5vw) max(48px,env(safe-area-inset-bottom));
    background:#07182a; backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  html.js #mobile-menu:not([hidden]) {
    background-image:linear-gradient(115deg,#03101ee6,#0c28447a),url('/assets/actual/community/cloud-canyon-seo-800.webp');
    background-size:cover; background-position:center;
  }
  html.js #mobile-menu[hidden] { display:none; }
  #mobile-menu .mobile-menu__intro {
    flex:none; margin:0 0 14px; color:#c3d8e7; font:400 10px/2 var(--font-latin); letter-spacing:.3em;
  }
  #mobile-menu .mobile-menu__intro::after { content:''; display:block; width:26px; height:1px; margin-top:22px; background:#c3d8e7; }
  #mobile-menu > a {
    flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
    margin:0; padding:20px 0; border-bottom:1px solid #c3d8e765;
    font-family:var(--font-latin),var(--font-jp); font-size:clamp(24px,5vw,36px); line-height:1.35;
  }
  #mobile-menu .menu-arrow { flex:none; width:22px; height:22px; fill:none; color:#fff; }
  #mobile-menu .mobile-menu__download-label { margin:34px 0 14px; font:400 10px/1.5 var(--font-latin); letter-spacing:.23em; color:#c3d8e7; }
  #mobile-menu a:focus-visible { outline:2px solid #b1e9fc; outline-offset:4px; }
  html:not(.js) #mobile-menu > p { display:none; }
}
@media (max-width:767px) and (max-height:520px) {
  html.js #mobile-menu { padding-top:102px; }
  #mobile-menu .mobile-menu__intro { font-size:9px; }
  #mobile-menu > a { padding-block:14px; }
}