/* Igor Andrić — the phone's menu (Lazar, 6 Oct; reference: a cream card over a dark page).
   Below 761px the five links do not fit in the bar, so the bar keeps the dot and gets one button. The menu is the
   page's own ink — the palette turned over, no new colour — from edge to edge and top to bottom (Lazar, 6 Oct: the
   card first stood 8px off every edge), its content on the page's gutter.

   It lives inside .nav on purpose: .nav is a stacking context (fixed, z 120), and the button has to stay above the
   menu to be its X. Above 760px none of this is drawn — the desktop bar is untouched. Built by menu.js. */

.burger,.menu{display:none}

@media (max-width:760px){
  /* the bar: the dot on the left, the button on the right; the links live in the menu now */
  .nav .nav-links{display:none}
  /* open, the bar (and the menu in it) rises over the music player (z 150) and stays under the sheet (z 180);
     it comes down only once the menu has closed */
  .nav{transition:z-index 0s linear .6s}
  .nav.has-menu{z-index:170;transition:none}

  /* the button: 44px to hit, its mark ends on the gutter (the 11px of air on the right reach past it) */
  /* its colour follows what is under it: the menu opens out of this corner, so it turns dark at once, and closes
     into it, so the button stays on the ink until the last moment and turns light only then (.4s into the .55s) */
  .burger{display:block;position:relative;z-index:2;min-width:44px;height:44px;margin-right:-11px;padding:0;border:0;
    background:none;color:var(--ink);transition:color .15s ease .4s}
  /* open it is always the menu's ink — stronger than the hero's photo colour for the bar (hero.css, 0,3,1) */
  .nav.has-menu .burger[aria-expanded="true"]{color:var(--bg);transition:color .2s ease}
  .burger:focus{outline:none}
  .burger:focus-visible{outline:1px solid currentColor;outline-offset:-4px}
  .burger>span{position:absolute;inset:0;display:block;pointer-events:none}

  /* ---------- the button, three ideas (Lazar, 6 Oct: not the usual two lines, and a closing that is more than an
     X). ?mi=1 Natpis · 2 Nota · 3 Pero; menu.js draws the one asked for. When one is chosen the other two go. */

  /* 1 Natpis — the word MENU turns into CLOSE letter by letter, left to right: the roll the bar has on a desktop */
  .burger[data-mi="1"]{padding:0 11px}
  .burger[data-mi="1"]>span{position:static;display:grid;justify-items:end;align-content:center;height:100%}
  .mi-word{display:grid;justify-items:end;overflow:hidden;max-width:none;font-weight:var(--fw-bold);letter-spacing:.04em;
    text-transform:uppercase;line-height:1.2}
  .mi-word>b{grid-area:1/1;font-weight:inherit;white-space:nowrap}
  .mi-word i{display:inline-block;font-style:normal;transition:transform .55s cubic-bezier(.65,0,.35,1) calc(var(--k) * .04s)}
  .mi-b i{transform:translateY(105%)}
  [aria-expanded="true"] .mi-a i{transform:translateY(-105%)}
  [aria-expanded="true"] .mi-b i{transform:none}

  /* 2 Nota — a note head in the space between two staff lines. Open, the head opens into a ring and the two lines
     cross inside it: the player's X (a 44px ring, 18px strokes), so the site closes things one way */
  /* both ends sit on the gutter: closed, the staff ends there; open, the ring does (the X slides 11px left into it) */
  .burger[data-mi="2"]{width:44px;margin-right:0}
  .burger[data-mi="2"] i{position:absolute;display:block}
  .mn-l1,.mn-l2{left:22px;top:22px;width:22px;height:1px;background:currentColor;
    transition:transform .55s cubic-bezier(.65,0,.35,1)}
  .mn-l1{transform:translate(0,-4px) rotate(0) scaleX(1)}
  .mn-l2{transform:translate(0,4px) rotate(0) scaleX(1)}
  .mn-head{left:24px;top:19px;width:8px;height:6px;border-radius:50%;background:currentColor;
    transform:translateX(0) rotate(-20deg) scale(1);
    transition:transform .45s cubic-bezier(.65,0,.35,1),opacity .25s ease .1s}
  .mn-ring{left:0;top:0;width:44px;height:44px;border:1px solid currentColor;border-radius:50%;opacity:0;
    transform:translateX(6px) scale(.18);transition:transform .45s cubic-bezier(.65,0,.35,1),opacity .2s ease .15s}
  [aria-expanded="true"] .mn-l1{transform:translate(-11px,0) rotate(45deg) scaleX(.82);transition-delay:.1s}
  [aria-expanded="true"] .mn-l2{transform:translate(-11px,0) rotate(-45deg) scaleX(.82);transition-delay:.1s}
  [aria-expanded="true"] .mn-head{transform:translateX(-6px) rotate(-20deg) scale(.6);opacity:0;
    transition:transform .45s cubic-bezier(.65,0,.35,1),opacity .15s ease .1s}
  [aria-expanded="true"] .mn-ring{opacity:1;transform:none;
    transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .15s ease .05s}

  /* 3 Pero — one line, and the pen (the site's dot, small) resting at its end. Open, the pen runs back over the line
     and writes the X, one stroke after the other, and lifts; closing, it takes the X back and writes the line again.
     menu.js drives it (one animation, played forwards to open and backwards to close) */
  .burger[data-mi="3"]{width:44px}
  .mp{position:absolute;left:11px;top:11px;width:22px;height:22px;overflow:visible}
  .mp path{fill:none;stroke:currentColor;stroke-width:1}
  .mp circle{fill:currentColor}

  /* ---------- the menu: the page round it goes dark while it opens out of the corner the button is in */
  .menu{display:block;position:fixed;inset:0;z-index:1;visibility:hidden;
    transition:visibility 0s linear .6s;
    --menu-mute:rgba(26,21,19,.66)}                       /* --bg over the ink, 5:1 — AA for 14px */
  .menu::before{content:'';position:absolute;inset:0;background:var(--bg);opacity:0;transition:opacity .6s ease}
  .menu-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
    gap:var(--sp-12);padding:calc(var(--nav-h) + var(--sp-10)) var(--gut) calc(var(--gut) + env(safe-area-inset-bottom,0px));
    background:var(--ink);color:var(--bg);overflow-y:auto;overscroll-behavior:contain;
    clip-path:inset(0 0 100% 100%);transition:clip-path .55s cubic-bezier(.65,0,.35,1)}
  .menu.is-open{visibility:visible;transition:visibility 0s}
  .menu.is-open::before{opacity:.6}
  .menu.is-open .menu-card{clip-path:inset(0);transition:clip-path .8s cubic-bezier(.16,1,.3,1)}

  /* the links: H3, one under the other, each with its line beside it on the same baseline. They stand in the middle
     of the room the contact block leaves (a third of the way down a phone, as in the reference), not under the X */
  .menu-links{display:flex;flex-direction:column;margin:auto 0}
  .menu-link{display:flex;align-items:baseline;gap:var(--sp-2);padding:var(--sp-1) 0;color:var(--bg)}
  .menu-link:focus{outline:none}
  .menu-link:focus-visible .menu-w{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
  /* each word rises into its own line: clip-path, not overflow, so the line keeps its baseline for the caption */
  .menu-w{display:block;max-width:none;flex:0 0 auto;font-weight:var(--fw-bold);text-transform:uppercase;
    clip-path:inset(0 -.25em)}
  .menu-w>span{display:block;transform:translateY(110%);transition:transform 0s linear .6s}
  .menu-sub{display:block;max-width:none;flex:0 1 auto;min-width:0;font-weight:var(--fw-semi);color:var(--menu-mute);
    opacity:0;transition:opacity 0s linear .6s}
  .menu.is-open .menu-w>span{transform:none;
    transition:transform .9s cubic-bezier(.16,1,.3,1) calc(.18s + var(--i) * .06s)}
  .menu.is-open .menu-sub{opacity:1;transition:opacity .6s ease calc(.45s + var(--i) * .06s)}

  /* how to reach Igor: a label over each, the links underlined (there is no hover on a phone to find them) */
  .menu-foot{display:flex;flex-direction:column;gap:var(--sp-6);opacity:0;transition:opacity 0s linear .6s}
  .menu.is-open .menu-foot{opacity:1;transition:opacity .6s ease .55s}
  .menu-lbl{font-weight:var(--fw-semi);letter-spacing:.15em;text-transform:uppercase;color:var(--menu-mute)}
  .menu-row a{background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(100% - .1em) / 100% 1px}
  .menu-mail{font-weight:var(--fw-semi)}
  .menu-soc{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-6);max-width:none}
  .menu-soc a{font-weight:var(--fw-bold);letter-spacing:.012em;text-transform:uppercase}
  .menu-row a:focus{outline:none}
  .menu-row a:focus-visible{outline:1px solid currentColor;outline-offset:4px}

  /* the sheet: on a phone its bar keeps the dot and its X; the menu is on the page under it */
  .sheet-bar .nav-links{display:none}
  .sheet-close{margin-left:auto}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .burger *,.menu::before,.menu-card,.menu.is-open .menu-card,
  .menu.is-open .menu-w>span,.menu.is-open .menu-sub,.menu.is-open .menu-foot{transition-duration:.01ms !important;transition-delay:0s !important}
}