.pho-menu[hidden] { display: none; }
.pho-menu { position: fixed; inset: 0; z-index: 100; max-width: var(--pho-max); margin-inline: auto; }
.pho-menu__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); cursor: default; }
.pho-menu__panel { position: relative; width: min(86%, 360px); height: 100%; background: #0b0b0e; border-right: 1px solid var(--pho-line); box-shadow: 20px 0 55px rgba(0,0,0,.4); padding: max(14px, env(safe-area-inset-top)) 14px 20px; overflow-y: auto; animation: pho-menu-in .18s ease-out; }
.pho-menu__top { height: 52px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--pho-line); padding-bottom: 10px; margin-bottom: 8px; }
.pho-menu__top img { width: 135px; height: auto; }
.pho-menu__close { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; border: 0; border-radius: 50%; background: var(--pho-bg-soft); cursor: pointer; }
.pho-menu__links { display: grid; }
.pho-menu__link { min-height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 10px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.065); font-size: 15px; font-weight: 660; letter-spacing: .01em; }
.pho-menu__link .pho-icon { color: var(--pho-pink); width: 22px; }
.pho-menu__link:active { background: rgba(255,255,255,.06); }
.pho-menu__meta { padding: 20px 10px; color: var(--pho-dim); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
body.pho-menu-open { overflow: hidden; }
@keyframes pho-menu-in { from { transform: translateX(-18px); opacity: .5; } to { transform: translateX(0); opacity: 1; } }
@media (max-width: 430px) { .pho-menu__panel { width: 88%; } }
@media (max-width: 390px) { .pho-menu__panel { width: 90%; padding-inline: 12px; } }