/* Phones (max-width 640px): the mountain fills the top with the lit summit on the page axis (focus.js anchors the
   scene's cover fit at --fx, the rules below enlarge the scene's box and move the still, the layers and the masks the
   same way), and centred in the screen the logo, the crest and the menu as ONE column of six rows, each parted by a
   short hairline, in a taller glass panel. Tracking is close (.14-.16em). Wider screens get the page exactly as it is. */
/* touch: no browser highlight box on a tap; the links' own glow and the sparks are the feedback */
a,button{-webkit-tap-highlight-color:transparent}
@media (max-width:640px){
  :root{
    --fx:29;                                     /* the summit on the page axis (focus.js / focus.css read it) */
    --row:clamp(44px,5.6dvh,50px);               /* a menu row: never under a 44 px touch target */
    --fz:1.35;--fy:11;                           /* the scene's box grows by --fz; the summit sits --fy % from the top */
  }
  .pbg-mtn,.pbg-scene .grp>img,.pbg-scene .snow .sb img{object-position:calc(var(--fx) * 1%) 50%}
  .pbg-scene.gl .m-sky,.pbg-scene.gl .m-nofront{-webkit-mask-position:calc(var(--fx) * 1%) 50%;mask-position:calc(var(--fx) * 1%) 50%}
  /* the mountain fills the top instead of empty sky: the still and the scene lay out in a larger box (the warp, the
     layers, the masks and the fog at full resolution), centred across, the summit (27.6 % down the painting) at --fy */
  .pbg-mtn{
    width:calc(104% * var(--fz));height:calc(106% * var(--fz));
    left:calc(-2% - (var(--fz) - 1) * 52%);
    top:calc(var(--fy) * 1% - 106% * var(--fz) * .276);
  }

  /* the column: centred in the screen above the footer, the summit rising behind the logo */
  main{
    justify-content:safe center;
    gap:9px;
    padding:clamp(16px,4dvh,40px) 16px 14px;
  }
  .brand{width:clamp(100px,29vw,128px)}
  .strap{font-size:9px;letter-spacing:.16em;column-gap:.7em;text-shadow:0 1px 10px rgba(1,10,36,.9)}   /* it now crosses the lit snow */
  .strap .s-l{margin-right:-.16em}
  .rule{width:68vw}

  /* the panel: the same glass strip as on wider screens, taller */
  nav{padding:6px 0}
  .menu{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .m-axis{display:none}
  .m-side{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0}
  .menu li{position:relative;justify-content:center}
  /* a short centred hairline above every row but the first (the old "/" separators retired) */
  .menu .m-l li+li::before,.menu .m-r li::before{
    display:block;content:"";position:absolute;top:0;left:50%;
    width:34px;height:1px;margin:0;opacity:1;font-size:0;
    transform:translateX(-50%);
    background:linear-gradient(to right,transparent,rgba(155,200,210,.32),transparent);
    pointer-events:none;
  }
  .menu a{
    justify-content:center;
    min-width:min(240px,70vw);height:var(--row);
    padding:0 12px;
    font-size:13px;letter-spacing:.14em;text-indent:.14em;
  }
  /* the bag hangs left of STORE, so the word itself sits on the axis like the five above it */
  .menu a .ic{margin-left:-24px}
  .menu a:focus-visible{outline-offset:-4px}

  .rule2{width:min(22vw,96px)}
  .motto{font-size:10px;letter-spacing:.16em;text-indent:.16em}

  footer{padding:14px 20px max(16px,env(safe-area-inset-bottom));gap:10px}
  .soc{gap:12px}
  .soc a{padding:12.5px;margin:-8.5px 0}         /* 44 px touch targets; the strip keeps its height */
  .copy{letter-spacing:.16em}
}