/* Phones in portrait (phone.css's phone block): the menu as an app tab bar, the owner's pick 7 of 27.10 («поставь 7 -
   попробуем»), from the variant _qa/phone_variants/v7.css. The six links leave the glass strip and become a floating
   capsule at the foot of the screen (a thin line icon over a short label each; STORE keeps its own bag and embers), the
   socials and the © fold into one unglazed line above it, and the scene between the crest and the bar stays open (glass
   on 7 % of a 390x844 screen, was 45 %). Loaded after phone.css (and after soon.css on the Soon page). The menu rules
   hold only inside nav, never on the Soon page's invisible menu copy; there the notice becomes the same capsule. */
@media (max-width:640px) and (orientation:portrait),(max-width:640px) and (min-height:501px){
  :root{
    --dock:62px;                                 /* the bar's inner height: icon + label, a 44 px target with room */
    --dock-m:10px;                               /* the gap around the floating bar */
    --dock-b:max(var(--dock-m),env(safe-area-inset-bottom));
  }
  /* the scene: the lower half darkened far less; only the last fifth deepens, under the bar and the socials */
  .pbg-dark{background:linear-gradient(rgba(2,7,16,.04),rgba(2,7,16,.04)),
    linear-gradient(transparent 46%,rgba(5,12,22,.22) 70%,rgba(3,9,16,.62) 92%,rgba(3,9,16,.74))}

  /* the crest centred between the top and the socials line (owner, 27.10: центрируй лого и надписи) */
  main{justify-content:safe center;gap:9px;padding:12px 16px}
  .strap{font-size:11px;letter-spacing:.04em;column-gap:.55em;text-transform:none;opacity:.9;color:#a9b8bd;
    text-shadow:0 1px 3px rgba(1,8,20,.9),0 0 14px rgba(1,10,36,.85)}
  .strap .s-l{margin-right:-.04em}
  .rule{width:58vw}
  .rule2{display:none}
  .motto{font-size:11px;letter-spacing:.04em;text-indent:.04em;color:#a9b8bd;opacity:.85;
    text-shadow:0 1px 3px rgba(1,8,20,.9),0 0 14px rgba(1,10,36,.85)}

  /* the bar: a floating capsule of frosted night glass, a cyan glint along its top edge */
  nav{
    position:fixed;z-index:5;left:var(--dock-m);right:var(--dock-m);bottom:var(--dock-b);
    width:auto;padding:0 2px;border-radius:22px;
    background:rgba(5,12,21,.58);
    -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
    border:1px solid rgba(155,200,210,.15);
    box-shadow:0 12px 32px rgba(0,4,12,.45),inset 0 1px 0 rgba(255,255,255,.035);
  }
  nav::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:1px;pointer-events:none;
    background:linear-gradient(to right,transparent,rgba(111,216,228,.55),transparent)}
  nav .menu{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0}
  nav .m-side{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:0}
  nav .menu li{flex:1 1 0;min-width:0;justify-content:center}
  nav .menu .m-l li+li::before,nav .menu .m-r li::before{display:none}
  /* the desktop's "/" axis, kept as a short upright hairline between the two halves */
  nav .m-axis{display:block;align-self:start;width:1px;height:24px;margin-top:15px;font-size:0;opacity:1;
    background:linear-gradient(transparent,rgba(155,200,210,.32),transparent)}

  nav .menu a{
    flex-direction:column;justify-content:center;align-items:center;gap:6px;
    width:100%;min-width:0;height:var(--dock);padding:0;
    font-size:clamp(9.5px,2.6vw,10.5px);line-height:1;letter-spacing:.03em;text-indent:0;
    color:rgba(203,215,219,.82);text-shadow:none;
  }
  nav .menu a::before{
    content:"";display:block;flex:none;width:22px;height:22px;background:currentColor;
    -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
    opacity:.92;
  }
  nav .menu a:hover,nav .menu a:focus-visible{color:var(--acc);text-shadow:0 0 14px rgba(111,216,228,.5)}
  nav .menu a:focus-visible{outline:1px solid var(--acc);outline-offset:-6px;border-radius:14px}
  nav a[href="blog.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M8.5 13h7M8.5 16.5h5'/%3E%3C/svg%3E")}
  nav a[href="music.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5.6l10-2.1V16'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='16.5' cy='16' r='2.5'/%3E%3C/svg%3E")}
  nav a[href="cs2.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2.5v5M12 16.5v5M2.5 12h5M16.5 12h5'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
  nav a[href="gallery.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2.5'/%3E%3Cpath d='M3.5 17.5l5.5-6 3.5 3.5 2.5-2.5 5.5 5'/%3E%3Ccircle cx='15.5' cy='9' r='1.5'/%3E%3C/svg%3E")}
  nav a[href="about.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5 20c1-3.6 3.8-5.4 7-5.4s6 1.8 7 5.4'/%3E%3C/svg%3E")}
  /* STORE: its own bag (the ember glow) stands in for the icon */
  nav .menu a[data-ember]::before{display:none}
  nav .menu a .ic{width:22px;height:22px;margin:0}
  nav .menu a[data-ember] .fx{line-height:1}

  /* the Soon page (soon.css): its notice takes the bar's place and shape, a capsule exactly as tall as the bar (64 px),
     so the crest, the rule and the motto sit where they sit on the main page (no jump between the two, sweep.mjs); the
     invisible copy of the menu that held the old strip's height has nothing left to hold */
  .soon{
    position:fixed;z-index:5;left:var(--dock-m);right:var(--dock-m);bottom:var(--dock-b);
    width:auto;height:calc(var(--dock) + 2px);box-sizing:border-box;padding:0;border-radius:22px;
    background:rgba(5,12,21,.58);
    -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
    border:1px solid rgba(155,200,210,.15);
    box-shadow:0 12px 32px rgba(0,4,12,.45),inset 0 1px 0 rgba(255,255,255,.035);
  }
  .soon::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:1px;pointer-events:none;
    background:linear-gradient(to right,transparent,rgba(111,216,228,.55),transparent)}
  .soon-ghost{display:none}
  .soon-t{font-size:13px;letter-spacing:.04em;text-indent:.04em;padding:0}

  /* the footer: no strip; the icons left and the © right on one line, just above the bar (or the Soon capsule) */
  footer{
    flex-direction:row;justify-content:space-between;align-items:center;gap:8px;
    padding:0 10px calc(var(--dock) + 2px + var(--dock-b) + 8px);
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;
  }
  .soc{gap:0}
  .soc a{padding:12.5px;margin:0;opacity:.78;color:#a9b8bd}
  .soc svg{filter:drop-shadow(0 1px 3px rgba(1,8,20,.9))}
  .copy{font-size:10px;letter-spacing:.04em;padding-right:6px;color:#a9b8bd;opacity:.85;
    text-shadow:0 1px 3px rgba(1,8,20,.9),0 0 12px rgba(1,10,36,.85)}
}