/* ===========================================================
   모바일 메뉴
   좁은 화면에서는 .nav__links가 숨겨진다. 그 상태로 두면 폰에서는
   어느 섹션으로도, 매거진으로도 갈 수 없다. 이 패널이 그 유일한 이동 수단이다.
   =========================================================== */

.nav__menu{
  display:none; width:42px; height:42px; padding:0; margin-left:auto;
  border:0; background:transparent; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:7px;
}
.nav__menu i{
  display:block; width:22px; height:1px; background:var(--ink);
  transition:transform .45s var(--ease), opacity .3s;
}
.nav__menu.is-open i:first-child{ transform:translateY(4px) rotate(45deg); }
.nav__menu.is-open i:last-child{ transform:translateY(-4px) rotate(-45deg); }
@media (max-width:1020px){ .nav__menu{ display:flex; } }

/* 헤더가 패널 위에 있어야 닫기 버튼을 누를 수 있다 */
.nav{ z-index:60; }
.menu{
  position:fixed; inset:0; z-index:55; background:var(--warm-white);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(28px,5vh,52px);
  padding:clamp(90px,14vh,140px) var(--pad) clamp(40px,7vh,70px);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.menu.is-open{ opacity:1; visibility:visible; transform:none; }

.menu__links{ display:flex; flex-direction:column; }
.menu__links a{
  padding:clamp(14px,2.2vh,22px) 0; border-bottom:1px solid var(--line);
  font-size:clamp(22px,6vw,34px); font-weight:200; color:var(--ink); letter-spacing:-.03em;
  opacity:0; transform:translateY(14px);
  transition:color .35s;
}
.menu.is-open .menu__links a{
  animation:menuIn .55s var(--ease) forwards;
  animation-delay:calc(.08s + var(--i, 0) * .05s);
}
.menu__links a:first-child{ border-top:1px solid var(--line); }
.menu__links a:active{ color:var(--peach-deep); }
@keyframes menuIn{ to{ opacity:1; transform:none; } }

.menu__cta{ align-self:flex-start; opacity:0; }
.menu.is-open .menu__cta{ animation:menuIn .55s var(--ease) .42s forwards; }

@media (prefers-reduced-motion:reduce){
  .menu,.menu__links a,.menu__cta{ transition:none !important; animation:none !important; opacity:1 !important; transform:none !important; }
  .menu{ visibility:hidden; }
  .menu.is-open{ visibility:visible; }
}