/* ===== Portfolio Hero ===== */
.pf-hero{
  position:relative; overflow:hidden; background:var(--paper); color:var(--ink);
  padding:5rem 0 4rem;
}
.pf-hero-inner{ max-width:820px; }
.pf-back-link{
  display:inline-flex; align-items:center; gap:0.4rem;
  font-family:var(--font-display-alt); font-size:0.85rem; font-weight:600;
  text-decoration:none; color:var(--ink); opacity:0.65;
  margin-bottom:1.75rem; transition:opacity .15s ease, gap .15s ease;
}
.pf-back-link:hover{ opacity:1; gap:0.6rem; color:var(--cyan); }
.pf-hero-title{
  font-family:var(--font-title); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.4rem, 6vw, 4.6rem); line-height:1.05; margin:0 0 1.5rem;
  letter-spacing:0.015em;
}
.pf-hero-title .script{ text-transform:none; font-size:0.85em; }
.pf-hero-lede{ font-size:1.05rem; max-width:56ch; opacity:0.9; }

/* ===== Grid ===== */
.pf-grid-section{ background:var(--paper); padding-top:0; }
.pf-grid{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3, 1fr); gap:1.75rem;
}
.pf-card{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:1/1; cursor:pointer; background:var(--paper-dim);
  border:0; padding:0; width:100%; display:block; text-align:left;
}
.pf-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.pf-card:hover img{ transform:scale(1.06); }
.pf-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(19,16,18,0.82) 0%, rgba(19,16,18,0.15) 45%, rgba(19,16,18,0) 65%);
  pointer-events:none;
}
.pf-card-label{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:1.5rem; color:var(--paper);
}
.pf-card-label h3{
  font-family:var(--font-title); font-weight:400; text-transform:uppercase;
  font-size:1.4rem; margin:0 0 0.25rem; letter-spacing:0.01em;
}
.pf-card-label span{
  font-family:var(--font-display-alt); font-size:0.82rem; opacity:0.85;
  text-transform:uppercase; letter-spacing:0.05em;
}
.pf-card:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }

.pf-card--skeleton{
  cursor:default; background:linear-gradient(90deg, var(--paper-dim) 25%, #e4e0e0 37%, var(--paper-dim) 63%);
  background-size:400% 100%; animation:pf-shimmer 1.4s ease infinite;
}
@keyframes pf-shimmer{
  0%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

@media (max-width: 980px){
  .pf-grid{ grid-template-columns:repeat(2, 1fr); gap:1.25rem; }
}
@media (max-width: 600px){
  .pf-grid{ grid-template-columns:1fr; }
  .pf-hero{ padding:3.5rem 0 2.5rem; }
}

/* ===== Lightbox (vertical scroll panel) ===== */
.pf-lightbox{
  position:fixed; inset:0; z-index:300; background:var(--ink);
  display:flex; flex-direction:column;
}
.pf-lightbox[hidden]{ display:none; }

.pf-lightbox-head{
  flex-shrink:0; z-index:3; position:relative;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1.25rem 1.5rem; background:linear-gradient(to bottom, rgba(6,5,6,0.95), rgba(6,5,6,0.7) 80%, rgba(6,5,6,0));
}
.pf-lightbox-head-info{ color:var(--paper); }
.pf-lightbox-head h2{
  font-family:var(--font-title); font-weight:400; text-transform:uppercase;
  font-size:1.4rem; margin:0; letter-spacing:0.01em;
}
.pf-lightbox-head span{
  font-family:var(--font-display-alt); font-size:0.85rem; opacity:0.6;
}
.pf-lightbox-close{
  flex-shrink:0; background:none; border:0; color:var(--paper); font-size:2.2rem;
  line-height:1; cursor:pointer; padding:0.3rem 0.5rem;
}
.pf-lightbox-close:hover{ color:var(--cyan); }

.pf-lightbox-progress{
  position:absolute; top:0; left:0; right:0; height:3px; z-index:4;
  background:rgba(255,255,255,0.12);
}
.pf-lightbox-progress span{
  display:block; height:100%; width:0%; background:var(--cyan);
  transition:width .1s linear;
}

.pf-lightbox-scroll{
  flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  margin-top:-4.5rem; padding-top:4.5rem;
  scroll-behavior:smooth;
}
.pf-lightbox-stack{
  max-width:1100px; margin:0 auto; padding:0.5rem 1rem 4rem;
  display:flex; flex-direction:column; gap:0.75rem;
}
.pf-lightbox-stack img{
  width:100%; height:auto; display:block; border-radius:4px;
  background:rgba(255,255,255,0.03);
}
.pf-lightbox-stack img[data-loaded="false"]{ min-height:40vh; }

.pf-scroll-hint{
  position:absolute; left:50%; bottom:1.5rem; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:0.3rem;
  color:var(--paper); opacity:0.75; pointer-events:none;
  font-family:var(--font-display-alt); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em;
  animation:pf-bounce 1.6s ease-in-out infinite;
  transition:opacity .25s ease;
}
.pf-scroll-hint svg{ width:1.4rem; height:1.4rem; }
.pf-scroll-hint.is-hidden{ opacity:0; }
@keyframes pf-bounce{
  0%, 100%{ transform:translate(-50%, 0); }
  50%{ transform:translate(-50%, 6px); }
}

@media (max-width: 640px){
  .pf-lightbox-head{ padding:1rem; }
  .pf-lightbox-head h2{ font-size:1.05rem; }
  .pf-lightbox-stack{ padding:0.5rem 0.5rem 3rem; gap:0.5rem; }
}