/* Project pages, small screens (up to 900px): the full nav is replaced by a chamfered hamburger + menu panel,
   the same as the portfolio home page. The bar hides on scroll down and returns on scroll up (pj-nav.js). */
.pj-menu-cta, .pj-menu-panel { display: none; }
.wordmark .wordmark__logo { height: 40px; width: auto; }
@media (max-width: 900px) {
  .masthead { grid-template-columns: 1fr auto !important; gap: 12px !important; min-height: 0 !important; padding: 10px 4% !important; align-items: center !important; justify-items: stretch !important;
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
  .masthead > .main-nav, .masthead > .ek-btn { display: none !important; }
  .masthead.is-hidden { transform: translateY(calc(-100% - 24px)); }
  .wordmark .wordmark__logo { height: 34px; }
  .pj-menu-cta { display: grid; place-items: center; position: relative; isolation: isolate; width: 54px; height: 38px; padding: 0; border: 0; background: transparent; cursor: pointer; color: #faf7ff; justify-self: end; }
  .pj-menu-cta .pj-outline, .pj-item .pj-outline { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; pointer-events: none; }
  .pj-outline path { fill: rgba(5, 3, 9, .5); stroke: rgba(183, 108, 255, .85); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke .2s ease, filter .2s ease; }
  .pj-menu-cta:hover .pj-outline path, .pj-menu-cta:focus-visible .pj-outline path, .pj-menu-cta.is-open .pj-outline path { stroke: #c98cff; filter: drop-shadow(0 0 4px rgba(201, 140, 255, .95)) drop-shadow(0 0 11px rgba(139, 66, 255, .48)); }
  .pj-menu-cta:focus-visible, .pj-item:focus-visible { outline: none; }
  .pj-bars { display: grid; gap: 4px; width: 19px; }
  .pj-bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 6px rgba(183, 108, 255, .7); transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; }
  .pj-menu-cta.is-open .pj-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .pj-menu-cta.is-open .pj-bars i:nth-child(2) { opacity: 0; }
  .pj-menu-cta.is-open .pj-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .pj-menu-panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(78vw, 300px); display: flex; flex-direction: column; gap: 4px; padding: 14px; isolation: isolate; background: transparent; z-index: 5; }
  .pj-menu-panel[hidden] { display: none; }
  .pj-menu-panel > .pj-outline { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; pointer-events: none; }
  .pj-menu-panel > .pj-outline path { fill: rgba(5, 3, 9, .94); }
  .pj-item { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 48px; padding: 0 16px; border: 0; background: transparent; color: #faf7ff; cursor: pointer; text-align: left; text-decoration: none;
    font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .055em; text-transform: uppercase; }
  .pj-item:hover, .pj-item:focus-visible { color: #fff; text-shadow: 0 0 12px rgba(224, 31, 253, .7); }
  .pj-item--cta { justify-content: center; margin-top: 8px; min-height: 52px; }
}
@media (max-width: 700px) { .wordmark .wordmark__logo { height: 30px; } }
@media (prefers-reduced-motion: reduce) { .masthead, .pj-bars i { transition: none !important; } }
@media (max-width: 900px) { .masthead > .wordmark { justify-self: start !important; } }