/*
 * AlexEmme menu portal — 1.16.31
 * // by Alessandro Monfregola
 */

.alexemme-theme .menu-toggle{
  position:relative;
  padding:9px 13px;
  border:1px solid transparent;
  border-radius:999px;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.alexemme-theme .menu-toggle:hover,
.alexemme-theme.nav-open .menu-toggle{
  background:#f3f1ed;
  border-color:rgba(29,29,27,.10);
}
.alexemme-theme .menu-mark{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#eaf0f6;
  color:#52678e;
  transition:transform .32s cubic-bezier(.2,.7,.2,1),background .25s ease,color .25s ease;
}
.alexemme-theme.nav-open .menu-mark{
  transform:rotate(90deg);
  background:#1d1d1b;
  color:#fff;
}

.alexemme-theme .main-nav{
  top:var(--header-h);
  height:0;
  overflow:hidden;
  overflow-y:auto;
  background:#f8f7f3;
  color:var(--ink);
  border-top:1px solid rgba(29,29,27,.07);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px);
  transition:
    height .46s cubic-bezier(.2,.7,.2,1),
    opacity .25s ease,
    transform .46s cubic-bezier(.2,.7,.2,1),
    visibility 0s linear .46s;
  overscroll-behavior:contain;
}
.alexemme-theme.nav-open .main-nav{
  height:calc(100vh - var(--header-h));
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition:
    height .46s cubic-bezier(.2,.7,.2,1),
    opacity .3s ease .04s,
    transform .46s cubic-bezier(.2,.7,.2,1),
    visibility 0s linear 0s;
}

.alexemme-theme .nav-portal{
  width:var(--shell);
  min-height:100%;
  margin:0 auto;
  padding:34px 0 42px;
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.55fr);
  gap:28px;
  align-items:stretch;
}

.alexemme-theme .nav-portal-intro{
  position:relative;
  min-width:0;
  padding:42px 38px 34px;
  border-radius:26px;
  overflow:hidden;
  background:#e8eef5;
  border:1px solid rgba(94,111,157,.10);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.alexemme-theme .nav-portal-intro::before,
.alexemme-theme .nav-portal-intro::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.alexemme-theme .nav-portal-intro::before{
  width:170px;
  height:170px;
  right:-68px;
  top:-54px;
  border-radius:50%;
  background:rgba(255,255,255,.50);
}
.alexemme-theme .nav-portal-intro::after{
  width:90px;
  height:90px;
  left:-32px;
  bottom:54px;
  border:20px solid rgba(197,111,83,.08);
  transform:rotate(12deg);
}
.alexemme-theme .nav-portal-eyebrow{
  position:relative;
  z-index:1;
  margin:0 0 20px;
  font:.72rem/1 var(--mono);
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#5e6f9d;
}
.alexemme-theme .nav-portal-title{
  position:relative;
  z-index:1;
  margin:0;
  max-width:430px;
  font:500 clamp(2.8rem,4.2vw,5.3rem)/.92 var(--serif);
  letter-spacing:-.062em;
  color:#20211f;
}
.alexemme-theme .nav-portal-copy{
  position:relative;
  z-index:1;
  max-width:410px;
  margin:25px 0 0;
  font-size:1.02rem;
  line-height:1.55;
  color:#555c67;
}
.alexemme-theme .nav-portal-pixels{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:30px;
}
.alexemme-theme .nav-portal-pixels span{
  width:10px;
  height:10px;
  border-radius:2px;
  background:#c56f53;
}
.alexemme-theme .nav-portal-pixels span:nth-child(2){background:#5e6f9d}
.alexemme-theme .nav-portal-pixels span:nth-child(3){background:#c4a55d}
.alexemme-theme .nav-portal-pixels span:nth-child(4){background:#7f8c80}
.alexemme-theme .nav-portal-pixels span:nth-child(5){background:#d7c7a3}
.alexemme-theme .nav-portal-signature{
  position:relative;
  z-index:1;
  margin:auto 0 0;
  padding-top:38px;
  font:500 1.1rem/1.35 var(--serif);
  color:#333733;
}
.alexemme-theme .nav-portal-hint{
  position:relative;
  z-index:1;
  margin:10px 0 0;
  font:.65rem/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#737a83;
}

.alexemme-theme .nav-portal-links{
  min-width:0;
  display:flex;
  align-items:center;
}
.alexemme-theme .nav-portal-links > ul,
.alexemme-theme .nav-portal-links .menu{
  counter-reset:alexemme-nav;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.alexemme-theme .main-nav .nav-portal-links li{
  counter-increment:alexemme-nav;
  margin:0;
  border:0;
  min-width:0;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .42s ease,transform .52s cubic-bezier(.2,.7,.2,1);
}
.alexemme-theme.nav-open .main-nav .nav-portal-links li{
  opacity:1;
  transform:none;
}
.alexemme-theme.nav-open .main-nav .nav-portal-links li:nth-child(1){transition-delay:.07s}
.alexemme-theme.nav-open .main-nav .nav-portal-links li:nth-child(2){transition-delay:.10s}
.alexemme-theme.nav-open .main-nav .nav-portal-links li:nth-child(3){transition-delay:.13s}
.alexemme-theme.nav-open .main-nav .nav-portal-links li:nth-child(4){transition-delay:.16s}
.alexemme-theme.nav-open .main-nav .nav-portal-links li:nth-child(5){transition-delay:.19s}
.alexemme-theme.nav-open .main-nav .nav-portal-links li:nth-child(6){transition-delay:.22s}
.alexemme-theme.nav-open .main-nav .nav-portal-links li:nth-child(7){transition-delay:.25s}
.alexemme-theme.nav-open .main-nav .nav-portal-links li:nth-child(8){transition-delay:.28s}
.alexemme-theme.nav-open .main-nav .nav-portal-links li:nth-child(9){transition-delay:.31s}

.alexemme-theme .main-nav .nav-portal-links a{
  --nav-accent:#5e6f9d;
  position:relative;
  min-height:105px;
  padding:22px 58px 20px 58px;
  border:1px solid rgba(29,29,27,.10);
  border-radius:18px;
  background:#fff;
  display:flex;
  align-items:center;
  font:500 clamp(1.55rem,2.15vw,2.45rem)/1 var(--serif);
  letter-spacing:-.045em;
  color:#252522;
  opacity:1;
  transform:none;
  transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;
  overflow:hidden;
}
.alexemme-theme .main-nav .nav-portal-links a::before{
  content:counter(alexemme-nav,decimal-leading-zero);
  position:absolute;
  left:20px;
  top:21px;
  font:.62rem/1 var(--mono);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--nav-accent);
}
.alexemme-theme .main-nav .nav-portal-links a::after{
  content:"↗";
  position:absolute;
  right:18px;
  top:50%;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f4f2ee;
  color:#363633;
  font:500 1rem/1 var(--sans);
  transform:translateY(-50%);
  transition:transform .25s ease,background .25s ease,color .25s ease;
}
.alexemme-theme .main-nav .nav-portal-links li:nth-child(1) a{--nav-accent:#c56f53}
.alexemme-theme .main-nav .nav-portal-links li:nth-child(2) a{--nav-accent:#5e6f9d}
.alexemme-theme .main-nav .nav-portal-links li:nth-child(3) a{--nav-accent:#c4a55d}
.alexemme-theme .main-nav .nav-portal-links li:nth-child(4) a{--nav-accent:#7f8c80}
.alexemme-theme .main-nav .nav-portal-links li:nth-child(5) a{--nav-accent:#b87d6c}
.alexemme-theme .main-nav .nav-portal-links li:nth-child(6) a{--nav-accent:#7a8da8}
.alexemme-theme .main-nav .nav-portal-links li:nth-child(7) a{--nav-accent:#a08c5b}
.alexemme-theme .main-nav .nav-portal-links li:nth-child(8) a{--nav-accent:#8d829e}
.alexemme-theme .main-nav .nav-portal-links li:nth-child(9) a{--nav-accent:#6f8e89}

@media (hover:hover) and (pointer:fine){
  .alexemme-theme .main-nav .nav-portal-links a:hover{
    opacity:1;
    transform:translateY(-3px);
    border-color:var(--nav-accent);
    background:#fffdf9;
    box-shadow:0 12px 30px rgba(29,29,27,.07);
  }
  .alexemme-theme .main-nav .nav-portal-links a:hover::after{
    transform:translateY(-50%) rotate(45deg);
    background:var(--nav-accent);
    color:#fff;
  }
}
.alexemme-theme .main-nav .nav-portal-links a:focus-visible,
.alexemme-theme .menu-toggle:focus-visible{
  outline:2px solid #5e6f9d;
  outline-offset:3px;
}
.alexemme-theme .main-nav .current-menu-item > a,
.alexemme-theme .main-nav .current_page_item > a{
  border-color:var(--nav-accent);
  box-shadow:inset 4px 0 0 var(--nav-accent);
}

@media(max-width:1100px){
  .alexemme-theme .nav-portal{
    grid-template-columns:minmax(240px,.72fr) minmax(0,1.45fr);
    gap:18px;
    padding-top:24px;
  }
  .alexemme-theme .nav-portal-intro{padding:32px 28px 28px}
  .alexemme-theme .main-nav .nav-portal-links a{
    min-height:92px;
    padding:18px 52px 17px 52px;
  }
}

@media(max-width:820px){
  .alexemme-theme .main-nav{
    -webkit-overflow-scrolling:touch;
  }
  .alexemme-theme .nav-portal{
    display:block;
    min-height:auto;
    padding:16px 0 28px;
  }
  .alexemme-theme .nav-portal-intro{
    min-height:auto;
    padding:24px 23px;
    border-radius:20px;
  }
  .alexemme-theme .nav-portal-title{
    font-size:clamp(2.45rem,10vw,3.8rem);
    max-width:none;
  }
  .alexemme-theme .nav-portal-copy{
    margin-top:15px;
    max-width:560px;
  }
  .alexemme-theme .nav-portal-pixels{margin-top:18px}
  .alexemme-theme .nav-portal-signature{
    margin-top:18px;
    padding-top:0;
  }
  .alexemme-theme .nav-portal-hint{display:none}
  .alexemme-theme .nav-portal-links{margin-top:14px}
  .alexemme-theme .nav-portal-links > ul,
  .alexemme-theme .nav-portal-links .menu{
    grid-template-columns:1fr;
    gap:8px;
  }
  .alexemme-theme .main-nav .nav-portal-links a{
    min-height:72px;
    padding:16px 48px 15px 50px;
    border-radius:15px;
    font-size:clamp(1.45rem,6vw,2rem);
  }
  .alexemme-theme .main-nav .nav-portal-links a::before{
    left:18px;
    top:17px;
  }
  .alexemme-theme .main-nav .nav-portal-links a::after{
    right:14px;
    width:28px;
    height:28px;
  }
}

@media(max-width:520px){
  .alexemme-theme .menu-toggle{padding:7px 8px}
  .alexemme-theme .menu-toggle > span:first-child{display:none}
  .alexemme-theme .nav-portal-intro{padding:20px}
  .alexemme-theme .nav-portal-copy{font-size:.93rem}
  .alexemme-theme .nav-portal-signature{font-size:1rem}
}

@media(prefers-reduced-motion:reduce){
  .alexemme-theme .main-nav,
  .alexemme-theme .menu-mark,
  .alexemme-theme .main-nav .nav-portal-links li,
  .alexemme-theme .main-nav .nav-portal-links a,
  .alexemme-theme .main-nav .nav-portal-links a::after{
    transition:none!important;
  }
  .alexemme-theme .main-nav .nav-portal-links li{
    opacity:1;
    transform:none;
  }
}