.prp-portfolio {
  --prp-bg: #08090d;
  --prp-text: #f6f7fa;
  --prp-muted: #9ca3af;
  --prp-line: rgba(255,255,255,.14);
  position: relative;
  left: 50%;
  width: min(1480px, calc(100vw - 2rem));
  margin: 1rem 0 2rem;
  padding: clamp(1.25rem, 4vw, 4rem);
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--prp-bg);
  color: var(--prp-text);
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.prp-portfolio *, .prp-portfolio *::before, .prp-portfolio *::after { box-sizing: border-box; }
.prp-intro { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr); align-items:end; gap:2rem; margin-bottom:clamp(2rem,5vw,4.5rem); }
.prp-kicker { display:block; margin-bottom:1rem; color:var(--prp-muted); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; }
.prp-intro h2 { max-width:11ch; margin:0; color:var(--prp-text); font:400 clamp(2.8rem,7vw,7rem)/.9 Georgia,serif; letter-spacing:-.05em; }
.prp-intro-copy p { margin:0; color:var(--prp-muted); font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.6; }
.prp-intro-copy > span { display:block; margin-top:1rem; color:#d8dde7; font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; }
.prp-toolbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 -.35rem 1.25rem; padding:.7rem .35rem; background:linear-gradient(var(--prp-bg) 82%,transparent); }
.prp-filters { display:flex; flex-wrap:wrap; gap:.5rem; }
.prp-filter { min-height:44px; padding:.6rem 1rem; border:1px solid var(--prp-line); border-radius:999px; background:transparent; color:var(--prp-muted); cursor:pointer; }
.prp-filter:hover, .prp-filter:focus-visible { color:var(--prp-text); border-color:rgba(255,255,255,.45); }
.prp-filter.is-active { background:var(--prp-text); color:#08090d; border-color:var(--prp-text); }
.prp-count { color:var(--prp-muted); font-size:.85rem; white-space:nowrap; }
.prp-gallery { columns:3 300px; column-gap:clamp(.8rem,1.5vw,1.25rem); }
.prp-photo { position:relative; display:block; width:100%; margin:0 0 clamp(.8rem,1.5vw,1.25rem); padding:0; overflow:hidden; break-inside:avoid; border:1px solid var(--prp-line); border-radius:1rem; background:#11141a; color:var(--prp-text); text-align:left; cursor:zoom-in; isolation:isolate; }
.prp-photo[hidden] { display:none; }
.prp-photo img { display:block; width:100%; height:auto; transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s; }
.prp-photo::after { content:""; position:absolute; inset:30% 0 0; z-index:1; background:linear-gradient(transparent,rgba(2,3,6,.9)); opacity:0; transition:opacity .3s; pointer-events:none; }
.prp-caption { position:absolute; right:0; bottom:0; left:0; z-index:2; padding:1.15rem; opacity:0; transform:translateY(.4rem); transition:opacity .3s,transform .3s; }
.prp-caption small { display:block; color:#ccd2dc; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; }
.prp-caption strong { display:block; margin-top:.15rem; color:var(--prp-text); font:400 1.25rem/1.1 Georgia,serif; }
.prp-photo:hover img, .prp-photo:focus-visible img { transform:scale(1.025); filter:saturate(1.06); }
.prp-photo:hover::after, .prp-photo:focus-visible::after, .prp-photo:hover .prp-caption, .prp-photo:focus-visible .prp-caption { opacity:1; }
.prp-photo:hover .prp-caption, .prp-photo:focus-visible .prp-caption { transform:translateY(0); }
.prp-photo:focus-visible { outline:3px solid #a8c7ff; outline-offset:3px; }
.prp-links { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:1.25rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--prp-line); }
.prp-links a { color:var(--prp-muted); font-size:.9rem; text-underline-offset:.25rem; }
.prp-links a:hover { color:var(--prp-text); }
.prp-lightbox { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; overflow:hidden; border:0; background:rgba(3,4,7,.97); color:var(--prp-text); }
.prp-lightbox::backdrop { background:#020307; }
.prp-viewer { display:flex; flex-direction:column; height:100%; padding:1rem; overflow-y:auto; }
.prp-viewer-top { position:sticky; top:0; z-index:4; display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:1rem; background:rgba(3,4,7,.97); }
.prp-position { color:var(--prp-muted); font-size:.85rem; }
.prp-icon-button { display:grid; place-items:center; width:48px; height:48px; padding:0; border:1px solid var(--prp-line); border-radius:50%; background:rgba(255,255,255,.06); color:var(--prp-text); font-size:1.55rem; cursor:pointer; }
.prp-viewer-heading { width:min(100%, 52rem); margin:0 auto; padding:.25rem 1rem .65rem; text-align:center; }
.prp-viewer-label { display:block; margin-bottom:.3rem; color:#ccd2dc; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.prp-viewer-heading strong { display:block; color:var(--prp-text); font:400 1.4rem/1.25 Georgia,serif; }
.prp-stage { position:relative; display:grid; flex:0 0 auto; place-items:center; width:100%; margin:0; padding:.25rem 4rem; }
.prp-stage img { display:block; max-width:100%; max-height:66dvh; border-radius:.4rem; object-fit:contain; }
.prp-nav { position:absolute; top:50%; transform:translateY(-50%); }
.prp-prev { left:0; }
.prp-next { right:0; }
.prp-viewer-caption { flex:0 0 auto; width:min(100%, 60rem); margin:0 auto; padding:1rem 1rem 2rem; text-align:center; color:var(--prp-muted); }
.prp-viewer-description { margin:0 auto; color:#d8dce4; font-size:1rem; line-height:1.55; white-space:pre-line; }
.prp-viewer-description[hidden] { display:none; }
@media (max-width:820px) {
  .prp-portfolio { width:calc(100vw - 1rem); padding:1rem; border-radius:1rem; }
  .prp-intro { grid-template-columns:1fr; }
  .prp-toolbar { overflow-x:auto; }
  .prp-filters { flex-wrap:nowrap; }
  .prp-filter { white-space:nowrap; }
  .prp-count { display:none; }
  .prp-gallery { columns:2 150px; }
  .prp-photo::after, .prp-caption { opacity:1; }
  .prp-caption { transform:none; padding:.8rem; }
  .prp-caption strong { font-size:1rem; }
  .prp-stage { padding-inline:0; }
  .prp-nav { top:auto; bottom:.3rem; z-index:2; }
  .prp-viewer { padding:.75rem; }
  .prp-viewer-heading { padding:.15rem .5rem .55rem; }
  .prp-viewer-heading strong { font-size:1.2rem; }
  .prp-stage img { max-height:58dvh; }
  .prp-viewer-caption { padding:.8rem .5rem 1.5rem; }
  .prp-viewer-description { font-size:.95rem; line-height:1.5; }
}
@media (max-width:480px) { .prp-gallery { columns:1; } }
@media (prefers-reduced-motion:reduce) { .prp-photo img, .prp-caption { transition:none; } }