/* Floating project exhibition — inspired by 21st.dev's portfolio gallery. */
#portfolio { padding:8rem 5vw 10rem; overflow:clip; background:radial-gradient(ellipse at 50% 28%,#1a2315 0, #0c100d 30%, #090b0b 65%); }
#portfolio .pf-grid-bg { display:none; }
#portfolio .portfolio-header { max-width:1440px; margin:0 auto 2rem; text-align:center; }
#portfolio .portfolio-header h2 { font-size:clamp(4rem,7.5vw,7.5rem); font-weight:200; letter-spacing:-.065em; line-height:1.15; padding-block:.1em; margin:0; }
#portfolio .portfolio-header h2 br { display:none; }
#portfolio .portfolio-header h2 strong { display:inline; margin-left:.18em; }
#portfolio .portfolio-header p { margin:1.4rem auto 0; max-width:32rem; font-size:.95rem; }
.pf-stage-label { display:flex; justify-content:space-between; align-items:center; max-width:1440px; margin:0 auto 2.5rem; font-size:.68rem; letter-spacing:.17em; text-transform:uppercase; color:#9ca595; }
.pf-stage-label span:first-child { color:var(--accent); }
.pf-stage-label span:first-child::before { content:""; display:inline-block; width:6px; height:6px; background:var(--accent); border-radius:50%; margin-right:10px; }
#portfolio .pf-toolbar { max-width:1440px; padding:1rem 0; border:0; border-bottom:1px solid #ffffff20; border-radius:0; background:none; margin:3rem auto 0; gap:.6rem; }
#portfolio .pf-filter { border:0; border-radius:0; color:#9fa49c; padding:.65rem .8rem; background:none; }
#portfolio .pf-filter[aria-pressed="true"] { color:var(--accent); background:none; box-shadow:inset 0 -2px var(--accent); }
#portfolio .pf-tools { gap:1rem; }
#portfolio .pf-search { background:none; border:0; border-bottom:1px solid #ffffff25; border-radius:0; width:170px; }
#portfolio .pf-view { background:none; border:0; border-radius:0; color:#92988e; font-size:.75rem; }
#portfolio .pf-view[aria-pressed="true"] { color:var(--accent); }
#portfolio .pf-count { width:auto; margin:0; padding:0; font-size:.7rem; }
#portfolio .pf-list:not([data-view="list"]) { max-width:1320px; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12%; row-gap:7rem; padding:9rem 4% 9rem; perspective:1600px; }
#portfolio .pf-list:not([data-view="list"]) .pf-item { position:relative; padding:0; border:1px solid #ffffff27; border-radius:7px; background:#141b16; aspect-ratio:1.15; overflow:hidden; box-shadow:0 30px 70px #0006; transform:translate3d(0,var(--float-y,0px),0) rotate(var(--float-r,var(--tilt,-5deg))); transition:box-shadow .35s,border-color .35s; }
#portfolio .pf-list:not([data-view="list"]) .pf-item:nth-child(even) { top:10rem; --tilt:7deg; }
#portfolio .pf-list:not([data-view="list"]) .pf-item:nth-child(4n+3) { --tilt:-8deg; }
#portfolio .pf-list:not([data-view="list"]) .pf-item:nth-child(4n+4) { --tilt:4deg; }
#portfolio .pf-list:not([data-view="list"]) .pf-media { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; margin:0; padding:0; }
#portfolio .pf-list:not([data-view="list"]) .pf-media img { object-fit:cover; object-position:50% 15%; border:0; border-radius:0; width:100%; height:100%; transition:transform .65s; }
#portfolio .pf-list:not([data-view="list"]) .pf-media--portrait img { object-fit:contain; padding:1rem 0 4rem; background:radial-gradient(ellipse at top,#36452e,#111811); }
#portfolio .pf-list:not([data-view="list"]) .pf-item::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#0003,transparent 28%,#0002 48%,#060a08f2 100%); pointer-events:none; }
#portfolio .pf-list:not([data-view="list"]) .pf-item-left { position:absolute; inset:0; padding:1.6rem; display:flex; flex-direction:column; justify-content:flex-end; z-index:1; }
#portfolio .pf-list:not([data-view="list"]) .pf-item-meta { position:absolute; top:1.3rem; left:1.3rem; right:1.3rem; justify-content:space-between; }
#portfolio .pf-list:not([data-view="list"]) .pf-category { color:#11170b; background:var(--accent); border-radius:3px; padding:.4rem .6rem; font-size:.6rem; }
#portfolio .pf-list:not([data-view="list"]) .pf-item-badge { color:#fff; background:#080d09b3; border:1px solid #ffffff30; font-size:.58rem; border-radius:3px; }
#portfolio .pf-list:not([data-view="list"]) .pf-item-title { font-size:clamp(1.7rem,3.3vw,3rem); font-weight:600; line-height:1.15; letter-spacing:-.045em; padding-right:2rem; overflow-wrap:normal; }
#portfolio .pf-list:not([data-view="list"]) .pf-item-desc { margin:.6rem 3rem 0 0; color:#c0c7bd; font-size:.78rem; line-height:1.5; max-width:35ch; }
#portfolio .pf-list:not([data-view="list"]) .pf-item-link { position:absolute; bottom:1.5rem; right:1.3rem; z-index:2; margin:0; padding:0; border:1px solid #ffffff45; border-radius:50%; width:44px; height:44px; justify-content:center; font-size:0; background:#ffffff0c; }
#portfolio .pf-list:not([data-view="list"]) .pf-item-arrow { color:var(--accent); font-size:1.5rem; }
#portfolio .pf-list:not([data-view="list"]) .pf-item:hover,#portfolio .pf-list:not([data-view="list"]) .pf-item:focus-visible { border-color:var(--accent); box-shadow:0 35px 90px #0009,0 0 0 1px var(--accent); z-index:3; }
#portfolio .pf-list:not([data-view="list"]) .pf-item:hover img { transform:scale(1.055); }
#portfolio .pf-list[data-view="list"] { margin-top:3rem; }
.pf-stage-end { max-width:1320px; margin:5rem auto 0; padding-top:2rem; border-top:1px solid #ffffff20; display:flex; justify-content:space-between; color:#a4ac9e; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
@media(min-width:1100px) {
 #portfolio .pf-list:not([data-view="list"])::before { content:"SELECTED\A WORK"; white-space:pre; position:absolute; top:27%; left:-3%; right:-3%; font-size:clamp(8rem,20vw,20rem); font-weight:900; line-height:.95; letter-spacing:-.07em; color:#ffffff03; -webkit-text-stroke:1px #b6ff0a13; pointer-events:none; text-align:center; transform:rotate(-90deg); z-index:-1; }
}
@media(max-width:900px) {
 #portfolio .pf-list:not([data-view="list"]) { column-gap:9%; padding:5rem 3% 7rem; row-gap:4rem; }
 #portfolio .pf-list:not([data-view="list"]) .pf-item { aspect-ratio:.85; }
 #portfolio .pf-list:not([data-view="list"]) .pf-item:nth-child(even) { top:6rem; }
 #portfolio .pf-list:not([data-view="list"]) .pf-item-left { padding:1rem; }
 #portfolio .pf-list:not([data-view="list"]) .pf-item-meta { top:1rem; left:1rem; right:1rem; }
 #portfolio .pf-list:not([data-view="list"]) .pf-item-badge { display:none; }
}
@media(max-width:600px) {
 #portfolio { padding:5rem 6vw; }
 #portfolio .portfolio-header h2 { font-size:clamp(3.5rem,16vw,6rem); }
 #portfolio .portfolio-header h2 strong { display:block; margin-left:0; }
 .pf-stage-label { font-size:.55rem; letter-spacing:.1em; margin-bottom:2rem; }
 #portfolio .portfolio-header p { font-size:.85rem; }
 #portfolio .pf-toolbar { margin-top:2rem; }
 #portfolio .pf-tools { gap:.5rem; }
 #portfolio .pf-search { width:120px; }
 #portfolio .pf-count { margin-left:auto; }
 #portfolio .pf-list:not([data-view="list"]) { display:flex; flex-direction:column; gap:3.5rem; padding:3.5rem 4% 1rem; }
 #portfolio .pf-list:not([data-view="list"]) .pf-item { width:94%; aspect-ratio:.95; flex:none; transform:rotate(-3deg); }
 #portfolio .pf-list:not([data-view="list"]) .pf-item:nth-child(even) { top:auto; align-self:flex-end; transform:rotate(3deg); }
 #portfolio .pf-list:not([data-view="list"]) .pf-item-title { font-size:1.8rem; }
 #portfolio .pf-list:not([data-view="list"]) .pf-item-desc { font-size:.75rem; }
 .pf-stage-end { gap:1rem; font-size:.55rem; margin-top:3rem; }
}
@media(prefers-reduced-motion:reduce) {
 #portfolio .pf-list:not([data-view="list"]) .pf-item { transform:none; }
 #portfolio .pf-list:not([data-view="list"]) .pf-item img { transition:none; }
}