/* ===== Monano Land — portfolio ===== */
.portfolio-hero-stack{position:relative;width:230px;height:230px;flex:none}
.portfolio-hero-art{position:absolute;width:170px;height:170px;border-radius:14px;border:1px solid rgba(212,175,55,.3);box-shadow:0 18px 50px rgba(0,0,0,.5);object-fit:cover}
.portfolio-hero-art:first-child{top:0;inset-inline-start:0;transform:rotate(-5deg)}
.portfolio-hero-art:last-child{bottom:0;inset-inline-end:0;transform:rotate(4deg)}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.3rem}
.portfolio-card{border:1px solid var(--border,rgba(255,255,255,.09));background:linear-gradient(170deg,rgba(255,255,255,.03),transparent);border-radius:16px;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;display:flex;flex-direction:column}
.portfolio-card:hover{transform:translateY(-4px);border-color:rgba(0,245,160,.45);box-shadow:0 16px 44px rgba(0,0,0,.35)}
.portfolio-card-art{position:relative;display:block;aspect-ratio:16/9;background:linear-gradient(135deg,rgba(212,175,55,.14),rgba(39,216,255,.07))}
.portfolio-card-art img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.portfolio-card:hover .portfolio-card-art img{transform:scale(1.04)}
.portfolio-card-body{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.portfolio-card-body .muted{font-size:.8rem;margin:0}
.portfolio-tech{display:flex;flex-wrap:wrap;gap:.35rem}
.portfolio-tech-tag{font:600 .62rem 'JetBrains Mono',monospace;letter-spacing:.05em;padding:.28rem .6rem;border-radius:999px;border:1px solid rgba(0,245,160,.3);color:var(--cyber-green,#00f5a0);background:rgba(0,245,160,.06)}
.portfolio-links{display:flex;gap:.8rem}
.portfolio-link{font:700 .7rem 'JetBrains Mono',monospace;color:hsl(var(--net-hue,172) 90% 66%)}
.portfolio-link:hover{color:hsl(var(--net-hue,172) 95% 78%)}
[data-theme=light] .portfolio-card{border-color:rgba(0,0,0,.12);background:rgba(255,255,255,.6)}
[data-theme=light] .academy-card-title a{color:#2a2620}
[data-theme=light] .portfolio-tech-tag{color:#0b7a55;border-color:rgba(11,122,85,.35);background:rgba(11,122,85,.06)}
/* ---------- Card as a gallery trigger ---------- */
/* The art area is a real button now, so the whole card opens the popup instead of
   jumping to an external site. Reset the user-agent button box first. */
.portfolio-card-art{width:100%;padding:0;border:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer;appearance:none}
.portfolio-card-art picture{display:block;width:100%;height:100%}
.portfolio-card-art:focus-visible{outline:2px solid hsl(var(--net-hue,172) 90% 60%);outline-offset:-2px}
.portfolio-title-btn{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
.portfolio-title-btn:hover{color:var(--cyber-green,#00f5a0)}
.portfolio-card-zoom{position:absolute;inset-block-end:.7rem;inset-inline-start:.7rem;width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;background:rgba(8,12,16,.62);border:1px solid rgba(0,245,160,.35);color:#eafaf3;font-size:.95rem;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease}
.portfolio-card:hover .portfolio-card-zoom,.portfolio-card-art:focus-visible .portfolio-card-zoom{opacity:1;transform:none}
.portfolio-card-count{position:absolute;inset-block-end:.7rem;inset-inline-end:.7rem;font:700 .62rem 'JetBrains Mono',monospace;letter-spacing:.06em;padding:.25rem .55rem;border-radius:999px;background:rgba(8,12,16,.62);border:1px solid rgba(255,255,255,.16);color:#e8f6f0}

/* ---------- Gallery popup ---------- */
.plb{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:clamp(.6rem,3vw,2rem)}
.plb[hidden]{display:none}
.plb-backdrop{position:absolute;inset:0;background:rgba(4,7,10,.82);backdrop-filter:blur(6px)}
body.plb-open{overflow:hidden}
.plb-panel{position:relative;width:min(1040px,100%);max-height:min(92vh,100%);overflow:auto;border-radius:20px;border:1px solid rgba(0,245,160,.22);background:linear-gradient(180deg,rgba(14,19,24,.98),rgba(9,13,17,.98));box-shadow:0 30px 90px rgba(0,0,0,.6);animation:plb-in .22s ease}
.plb-panel:focus{outline:none}
@keyframes plb-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.plb-close{position:absolute;inset-block-start:.7rem;inset-inline-end:.7rem;z-index:2;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(8,12,16,.7);color:#eafaf3;cursor:pointer;font-size:.9rem;line-height:1}
.plb-close:hover{border-color:rgba(0,245,160,.5)}
.plb-stage{position:relative;background:radial-gradient(600px 300px at 50% 0,rgba(0,245,160,.08),transparent 70%)}
.plb-figure{margin:0;position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;background:#05080b}
.plb-figure img{width:100%;height:100%;object-fit:contain}
.plb-figure img[hidden]{display:none}
.plb-empty{margin:0;padding:1rem;text-align:center;color:var(--text-muted,#93a3ad);font-size:.85rem}
.plb-counter{position:absolute;inset-block-end:.6rem;inset-inline-start:.8rem;font:700 .66rem 'JetBrains Mono',monospace;letter-spacing:.08em;padding:.22rem .6rem;border-radius:999px;background:rgba(6,10,13,.72);border:1px solid rgba(255,255,255,.14);color:#dff3ea}
.plb-nav{position:absolute;inset-block-start:50%;transform:translateY(-50%);z-index:2;width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(8,12,16,.66);color:#eafaf3;cursor:pointer;font-size:1.4rem;line-height:1}
.plb-nav:hover{border-color:rgba(0,245,160,.55);color:#fff}
.plb-prev{inset-inline-start:.7rem}
.plb-next{inset-inline-end:.7rem}
/* In RTL the arrows sit on the opposite side, so the glyph has to face the other way. */
[dir=rtl] .plb-glyph{display:inline-block;transform:scaleX(-1)}
.plb-thumbs{display:flex;gap:.5rem;overflow-x:auto;padding:.7rem .9rem;border-block-start:1px solid rgba(255,255,255,.07)}
.plb-thumbs[hidden]{display:none}
.plb-thumb{flex:none;width:72px;height:52px;padding:0;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0a0f13;cursor:pointer;opacity:.62;transition:opacity .2s ease,border-color .2s ease}
.plb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.plb-thumb:hover{opacity:.9}
.plb-thumb[aria-current=true]{opacity:1;border-color:rgba(0,245,160,.7);box-shadow:0 0 0 1px rgba(0,245,160,.35)}
.plb-body{padding:1.1rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.55rem}
.plb-kicker{font:700 .62rem 'JetBrains Mono',monospace;letter-spacing:.16em;color:var(--cyber-green,#00f5a0)}
.plb-title{margin:0;font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:800}
.plb-summary{margin:0;font-size:.85rem}
.plb-summary[hidden]{display:none}
.plb-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.35rem}
.plb-actions [hidden]{display:none}
[data-theme=light] .plb-backdrop{background:rgba(20,28,26,.6)}
[data-theme=light] .plb-panel{background:linear-gradient(180deg,#fff,#f6f8f7);border-color:rgba(11,122,85,.25)}
[data-theme=light] .plb-title{color:#20262a}
[data-theme=light] .plb-close,[data-theme=light] .plb-nav{background:rgba(255,255,255,.86);color:#20262a;border-color:rgba(0,0,0,.14)}
[data-theme=light] .plb-counter{background:rgba(255,255,255,.86);color:#20262a;border-color:rgba(0,0,0,.12)}
[data-theme=light] .plb-figure{background:#eef2f0}
@media(max-width:640px){.plb{padding:0}.plb-panel{border-radius:0;max-height:100vh;height:100%}.plb-thumb{width:60px;height:44px}}

@media(max-width:760px){.music-hero-inner .portfolio-hero-stack{display:none}}