/* Page-specific styles for portfolio.html (portfolio page). Shared styles live in base.css. */

.fbd .hero{position:relative;padding:80px 24px 60px;overflow:hidden}
.fbd .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% -10%,rgba(155,35,53,.3),transparent 55%),radial-gradient(ellipse at 90% 110%,rgba(203,161,78,.12),transparent 50%)}
.fbd .hero-inner{position:relative;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:150px 1fr;gap:40px;align-items:center}
.fbd .hero img{width:150px;height:150px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;box-shadow:0 0 40px rgba(203,161,78,.25);margin:0 auto}
.fbd .hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,5vw,3.4rem);margin:8px 0 4px;color:var(--ink)}
.fbd .hero p.bio{color:var(--ink-dim);margin-top:14px;max-width:600px}
.fbd .btn{display:inline-block;padding:12px 28px;border:1px solid var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:.83rem;color:var(--gold);transition:all .25s}
.fbd .stats{max-width:1100px;margin:0 auto;padding:0 24px 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.fbd .stat{border:1px solid rgba(203,161,78,.2);background:var(--bg-card);text-align:center;padding:26px 12px}
.fbd .stat .v{font-family:var(--display);font-size:2.2rem;color:var(--gold)}
.fbd .stat .l{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-top:4px}
.fbd .wrap{max-width:1200px;margin:0 auto}
.fbd .sub{text-align:center;color:var(--ink-dim);max-width:600px;margin:0 auto 44px}
.fbd .filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:42px}
.fbd .filters button{background:none;border:1px solid rgba(203,161,78,.3);color:var(--ink-dim);font-family:var(--fbody);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;padding:9px 20px;cursor:pointer;transition:all .2s}
.fbd .filters button:hover{border-color:var(--gold);color:var(--gold)}
.fbd .filters button.active{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.fbd .vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.fbd .vcard{background:var(--bg-card);border:1px solid rgba(203,161,78,.16);transition:border-color .25s,transform .25s}
.fbd .vcard:hover{border-color:var(--gold);transform:translateY(-4px)}
.fbd .vcard video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:#000}
.fbd .vmeta{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.fbd .vmeta h4{font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--ink)}
.fbd .vmeta .cat{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--crimson);white-space:nowrap}
.fbd .vcard.hidden{display:none}
.fbd .partners{background:linear-gradient(180deg,var(--bg-soft),var(--bg));border-top:1px solid var(--gold-soft);border-bottom:1px solid var(--gold-soft)}
.fbd .pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.fbd .pcol{border:1px solid rgba(203,161,78,.18);padding:26px 22px;background:rgba(12,10,15,.6)}
.fbd .pcol h4{font-family:var(--display);font-size:1.25rem;color:var(--gold);font-weight:600;margin-bottom:10px}
.fbd .pcol p{color:var(--ink-dim);font-size:.95rem}
.fbd .aud{max-width:760px;margin:0 auto}
.fbd .bar{margin-bottom:18px}
.fbd .bar .row{display:flex;justify-content:space-between;font-size:.95rem;color:var(--ink-dim);margin-bottom:6px}
.fbd .bar .track{height:8px;background:rgba(203,161,78,.12)}
.fbd .bar .fill{height:100%;background:linear-gradient(90deg,var(--crimson),var(--gold))}
.fbd .off-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.fbd .off{background:var(--bg-card);border:1px solid rgba(203,161,78,.18);padding:32px 26px}
.fbd .off h4{font-family:var(--display);font-size:1.4rem;font-weight:600;margin-bottom:10px;color:var(--ink)}
.fbd .off ul{list-style:none}
.fbd .off ul li{color:var(--ink-dim);font-size:.95rem;padding:5px 0}
.fbd .off ul li::before{content:"\2014  ";color:var(--gold)}

@media(max-width:700px){
.fbd .hero-inner{grid-template-columns:1fr;text-align:center}
}