/* Final responsive navigation refinement
   Keeps the desktop navigation style, but switches tablets and phones to a proper side drawer. */
@media (max-width: 1199px){
  body.portfolio-page .l-header{
    background:rgba(255,255,255,.92) !important;
    backdrop-filter:blur(18px) saturate(145%);
    -webkit-backdrop-filter:blur(18px) saturate(145%);
  }
  body.portfolio-page .nav{
    height:calc(var(--header-height) + 1.1rem) !important;
    width:min(100% - 1.5rem, 1120px);
    margin-inline:auto;
  }
  body.portfolio-page .nav__brand-logo{
    height:52px !important;
    max-width:190px !important;
    object-fit:contain;
  }
  body.portfolio-page .nav__toggle{
    display:grid !important;
    place-items:center;
    width:44px;
    height:44px;
    position:relative;
    z-index:10002;
    color:#fff !important;
    background:#0009 !important;
    border:1px solid rgba(255,255,255,.24) !important;
    border-radius:16px;
    box-shadow:0 12px 30px rgba(0,0,0,.22);
  }
  body.portfolio-page .nav__toggle i{font-size:1.65rem;line-height:1;}
  body.portfolio-page .nav__menu{
    position:fixed !important;
    top:0 !important;
    right:-105% !important;
    width:min(86vw, 390px) !important;
    height:100vh !important;
    min-height:100svh;
    padding:calc(var(--header-height) + 1.55rem) 1.25rem 2rem !important;
    background:#0009 !important;
    background-color:rgba(0,0,0,.6) !important;
    backdrop-filter:blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(160%) !important;
    border-left:1px solid rgba(255,255,255,.16) !important;
    box-shadow:-26px 0 70px rgba(0,0,0,.42) !important;
    z-index:10000 !important;
    overflow-y:auto;
    overscroll-behavior:contain;
    transition:right .36s cubic-bezier(.2,.72,.2,1) !important;
  }
  body.portfolio-page .nav__menu.show{right:0 !important;}
  body.portfolio-page .nav__list{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:.35rem !important;
    padding:0 !important;
    margin:0 !important;
  }
  body.portfolio-page .nav__item{
    margin:0 !important;
    width:100%;
  }
  body.portfolio-page .nav__menu .nav__link{
    width:100%;
    min-height:44px;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    padding:.72rem .85rem !important;
    border-radius:16px 22px 16px 22px;
    color:#fff !important;
    font-weight:900;
    letter-spacing:.01em;
    text-shadow:0 1px 2px rgba(0,0,0,.45);
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
  }
  body.portfolio-page .nav__menu .nav__link::after,
  body.portfolio-page .nav__menu .nav__link.active::after{
    display:none !important;
  }
  body.portfolio-page .nav__menu .nav__link:hover,
  body.portfolio-page .nav__menu .nav__link.active{
    color:#ffd9bd !important;
    background:rgba(255,255,255,.095);
    border-color:rgba(255,217,189,.28);
  }
  body.portfolio-page .nav__menu .nav__link--cta{
    justify-content:center;
    color:#fff !important;
    background:var(--brush-periwinkle, #8f96ff) !important;
    border-color:transparent !important;
    text-shadow:none;
    box-shadow:0 12px 26px rgba(143,150,255,.28);
  }
  body.menu-open{overflow:hidden;}
}

@media (min-width: 1200px){
  body.portfolio-page .nav__toggle{display:none !important;}
  body.portfolio-page .nav__menu{
    position:static !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  body.portfolio-page .nav__list{
    display:flex !important;
    align-items:center;
    gap:.34rem;
    padding:0 !important;
    margin:0 !important;
    flex-wrap:nowrap;
  }
  body.portfolio-page .nav__item{margin:0 !important;}
  body.portfolio-page .nav__link{white-space:nowrap;}
}

@media (max-width: 420px){
  body.portfolio-page .nav__menu{width:min(90vw, 360px) !important; padding-inline:1rem !important;}
  body.portfolio-page .nav__brand-logo{height:48px !important; max-width:170px !important;}
}