.portfolio-page { background:var(--paper); }
.portfolio-nav .nav-links { margin-left:auto; }
.portfolio-main { overflow:hidden; }
.portfolio-hero { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(42px,9vw,130px); align-items:center; min-height:calc(86svh - 76px); padding-block:clamp(72px,10vw,140px); }
.portfolio-hero h1 { max-width:760px; }
.portfolio-hero-copy > p:not(.eyebrow) { max-width:570px; color:var(--muted); font-size:1.08rem; line-height:1.65; }
.portfolio-hero-art { position:relative; min-height:500px; display:grid; place-items:center; overflow:hidden; border-radius:22px; background:var(--surface); isolation:isolate; }
.portfolio-orbit { position:absolute; width:420px; height:420px; border:1px solid color-mix(in srgb,var(--orange) 58%,transparent); border-radius:50%; box-shadow:inset 0 0 0 76px color-mix(in srgb,var(--orange) 7%,transparent); }
.portfolio-orbit::after { content:""; position:absolute; width:165px; height:165px; right:-36px; bottom:12px; border:1px solid var(--blue); border-radius:50%; }
.pass-icon { position:relative; z-index:1; display:block; width:66%; max-width:330px; height:auto; aspect-ratio:1 / 1; object-fit:contain; flex:none; border-radius:25%; box-shadow:0 32px 70px rgba(15,38,83,.24); }
.browser-visual { position:relative; z-index:1; width:88%; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:0 32px 70px rgba(0,0,0,.18); }
.browser-bar { height:38px; display:flex; align-items:center; gap:6px; padding-inline:15px; border-bottom:1px solid var(--line); }
.browser-bar i { width:7px; height:7px; border-radius:50%; background:var(--line); }
.browser-visual img { display:block; width:100%; height:auto; }
.portfolio-section { padding-block:clamp(90px,12vw,155px); border-top:1px solid var(--line); }
.project-card { display:grid; grid-template-columns:.88fr 1.12fr; gap:clamp(38px,8vw,112px); align-items:center; }
.project-media { min-width:0; overflow:hidden; border-radius:20px; background:var(--surface); }
.project-media img { display:block; width:100%; height:auto; }
.project-gallery { overflow:visible; background:transparent; }
.screenshot-gallery { min-width:0; }
.screenshot-track { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:20px; }
.screenshot-track::-webkit-scrollbar { display:none; }
.screenshot-track figure { flex:0 0 100%; margin:0; overflow:hidden; scroll-snap-align:start; border:1px solid var(--line); border-radius:20px; background:var(--surface); }
.screenshot-track img { width:100%; aspect-ratio:16 / 10; object-fit:cover; }
.screenshot-track figcaption { padding:11px 14px; color:var(--muted); font-size:.78rem; font-weight:650; }
.gallery-controls { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; }
.gallery-button { display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--paper); cursor:pointer; }
.gallery-button:hover { color:var(--orange); border-color:currentColor; }
.gallery-count { min-width:48px; color:var(--muted); font-size:.78rem; text-align:center; }
.project-copy h2 { margin-bottom:24px; }
.project-copy > p:not(.eyebrow) { max-width:590px; color:var(--muted); font-size:1.02rem; line-height:1.65; }
.project-meta { display:flex; flex-wrap:wrap; gap:8px; margin:25px 0 30px; padding:0; list-style:none; }
.project-meta li { padding:8px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.74rem; font-weight:650; }
.status-badge { display:inline-flex; align-items:center; gap:8px; margin-bottom:20px; padding:8px 11px; border-radius:999px; background:color-mix(in srgb,var(--orange) 11%,transparent); color:var(--orange); font-size:.72rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.status-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 5px color-mix(in srgb,currentColor 14%,transparent); }
html[data-theme="dark"] .status-badge { color:var(--blue); background:color-mix(in srgb,var(--blue) 12%,transparent); }
.project-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; }
.portfolio-empty { margin-top:58px; padding:28px; border:1px dashed var(--line); border-radius:16px; color:var(--muted); }
@media (max-width:760px) { .portfolio-hero,.project-card { grid-template-columns:1fr; }.portfolio-hero { min-height:auto; padding-top:58px; }.portfolio-hero-art { min-height:390px; order:-1; }.portfolio-nav .nav-links { display:none; }.project-media { order:-1; }.portfolio-section { padding-block:80px; } }