/* Two glass paths, with the existing local liquid-glass module providing optics. */
#gate #pPortfolio,
#gate #pCurriculum {
  /* Keep layout and type in CSS: hosted URL rewriting damaged quoted inline
     font styles on the Curriculum anchor. Both semantic controls share geometry. */
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: clamp(240px, 30vw, 340px);
  height: clamp(84px, 10vw, 104px);
  padding: 0;
  border-radius: 999px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
  animation: gatefu .8s .6s both;
  isolation: isolate;
  overflow: visible;
  border: 1px solid var(--path-rim) !important;
  color: var(--path-light) !important;
  background: var(--path-tint) !important;
  box-shadow:
    0 16px 40px -14px rgba(0, 0, 0, .7),
    0 0 34px -9px var(--path-glow),
    0 0 76px -26px var(--path-glow),
    inset 0 1px 1px rgba(255, 255, 255, .82),
    inset 0 -1px 2px var(--path-rim),
    inset 0 -12px 24px rgba(255, 255, 255, .035);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease !important;
  -webkit-tap-highlight-color: transparent;
}

#gate #pPortfolio {
  --path-light: #ffd9ad;
  --path-rim: rgba(255, 191, 136, .85);
  --path-glow: rgba(255, 112, 74, .67);
  --path-tint: linear-gradient(135deg, rgba(246, 176, 81, .30), rgba(192, 66, 60, .36) 54%, rgba(87, 28, 61, .52));
}

#gate #pCurriculum {
  animation-delay: .72s;
  --path-light: #bcf5ff;
  --path-rim: rgba(143, 230, 255, .75);
  --path-glow: rgba(60, 179, 255, .56);
  --path-tint: linear-gradient(135deg, rgba(57, 209, 229, .29), rgba(50, 117, 213, .32) 53%, rgba(100, 59, 180, .43));
  opacity: 1;
  cursor: pointer;
}

/* The top reflection and lower caustic stay separate from selectable labels. */
#gate #pPortfolio::before,
#gate #pCurriculum::before {
  content: "";
  position: absolute;
  inset: 3px 9px 48%;
  border-radius: 999px 999px 55% 55%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .19), rgba(255, 255, 255, .015));
  pointer-events: none;
  z-index: 0;
}

#gate #pPortfolio::after,
#gate #pCurriculum::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--path-light), transparent);
  box-shadow: 0 1px 12px 1px var(--path-glow);
  pointer-events: none;
}

#gate #pPortfolio > span:nth-child(-n+3),
#gate #pCurriculum > span:nth-child(-n+3) { display: none; }

#gate #pPortfolio > span:nth-child(4) > span:first-child,
#gate #pCurriculum > span:nth-child(4) > span:first-child {
  color: #fffaf5 !important;
  text-shadow: 0 2px 9px rgba(2, 8, 24, .42);
}

#gate #pPortfolio > span:nth-child(4) > span:last-child { color: #ffe0c6 !important; }
#gate #pCurriculum > span:nth-child(4) > span:last-child { color: #c7e7ff !important; }

@media (hover: hover) {
  #gate #pPortfolio:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: #ffe6c9 !important;
    box-shadow: 0 18px 38px -12px rgba(0, 0, 0, .6), 0 0 43px -7px var(--path-glow), 0 0 92px -22px rgba(255, 103, 76, .52), inset 0 1px 2px #fff9, inset 0 -1px 3px var(--path-rim);
  }
}

#gate #pPortfolio:focus-visible {
  outline: 2px solid #fff2dd;
  outline-offset: 7px;
}
#gate #pPortfolio:active:not(:disabled) { transform: translateY(0) scale(.985); }

@media (max-width: 600px) {
  #gate #pPortfolio,
  #gate #pCurriculum { width: min(310px, 82vw) !important; min-height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  #gate #pPortfolio,
  #gate #pCurriculum { animation: none !important; transition: none !important; }
  #gate #pPortfolio:hover:not(:disabled),
  #gate #pPortfolio:active:not(:disabled) { transform: none; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  #gate #pPortfolio { background: #632b24 !important; }
  #gate #pCurriculum { background: #153d64 !important; }
  #gate #pPortfolio,
  #gate #pCurriculum { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: inset 0 1px 0 #fff8; }
  #gate #pPortfolio::before, #gate #pPortfolio::after,
  #gate #pCurriculum::before, #gate #pCurriculum::after { display: none; }
}

@media (forced-colors: active) {
  #gate #pPortfolio,
  #gate #pCurriculum { background: ButtonFace !important; color: ButtonText !important; border: 2px solid ButtonText !important; box-shadow: none; }
  #gate #pCurriculum { border-color: GrayText !important; }
  #gate #pPortfolio > span:nth-child(4) > span,
  #gate #pCurriculum > span:nth-child(4) > span { color: ButtonText !important; text-shadow: none; }
  #gate #pCurriculum > span:nth-child(4) > span { color: GrayText !important; }
  #gate #pPortfolio::before, #gate #pPortfolio::after,
  #gate #pCurriculum::before, #gate #pCurriculum::after { display: none; }
  #gate #pPortfolio:focus-visible { outline-color: Highlight; }
}

/* The curriculum path is now a native link to the five learning destinations. */
#gate #pCurriculum:hover{color:var(--path-light);border-color:#dcf8ff!important;transform:translateY(-3px);box-shadow:0 18px 38px -12px #0009,0 0 43px -7px var(--path-glow),0 0 92px -22px #3c9aff66,inset 0 1px 2px #fff9}
#gate #pCurriculum:focus-visible{outline:2px solid #dcf8ff;outline-offset:7px}
#gate #pCurriculum:active{transform:translateY(0) scale(.985)}
@media(prefers-reduced-motion:reduce){#gate #pCurriculum:hover,#gate #pCurriculum:active{transform:none}}
@media(forced-colors:active){#gate #pCurriculum{border-color:ButtonText!important}#gate #pCurriculum>span:nth-child(4)>span{color:ButtonText!important}#gate #pCurriculum:focus-visible{outline-color:Highlight}}