/* ==========================================================================
   FRAME / 01 — project view + lightbox
   ========================================================================== */

.pv {
  --bg: #0b0b0a; --fg: #eeebe4; --mut: rgba(238, 235, 228, 0.58); --line: rgba(238, 235, 228, 0.2);
  position: fixed; inset: 0; z-index: 200; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: var(--bg); color: var(--fg);
  visibility: hidden; opacity: 0; transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s;
  scrollbar-width: thin; scrollbar-color: rgba(238, 235, 228, 0.3) transparent;
}
.pv[hidden] { display: block; }
.pv.is-open { visibility: visible; opacity: 1; transition: opacity 0.6s var(--ease), visibility 0s; }
.pv.is-instant { transition: none; }
.pv .ph__in { inset: 0; }
.pv .ph::after { background: var(--bg); }

.pv__bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--hdr-h); margin-bottom: calc(var(--hdr-h) * -1); padding-inline: var(--gut); color: #fff; mix-blend-mode: difference; pointer-events: none; }
.pv__bar > * { pointer-events: auto; }
.pv__close { display: inline-flex; align-items: center; gap: 0.9rem; min-height: 44px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.pv__close i { position: relative; width: 22px; height: 22px; transition: transform 0.6s var(--ease); }
.pv__close i::before, .pv__close i::after { content: ""; position: absolute; left: 1px; right: 1px; top: 10.5px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.pv__close i::after { transform: rotate(-45deg); }
.pv__close:hover i { transform: rotate(90deg); }
.pv__count { display: none; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.pv__arrows { display: flex; gap: 0.2rem; margin-right: -10px; }
.pv__arrows button { display: grid; place-items: center; width: 44px; height: 44px; }
.pv__arrows svg { width: 22px; height: 22px; transition: transform 0.5s var(--ease); }
.pv__arrows button:hover svg:first-child { transform: translateX(-3px); }
.pv__arrows .pv__nx:hover svg { transform: translateX(3px); }
@media (min-width: 720px) { .pv__count { display: block; } }

/* Hero */
.pv__hero { position: relative; display: flex; height: 100svh; min-height: 540px; overflow: hidden; }
.pv__heroimg { position: absolute; inset: 0; overflow: hidden; background: #151513; }
.pv__heroimg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 2.2s var(--ease); }
.pv.is-ready .pv__heroimg img { transform: scale(1); }
.pv__heroimg.is-hidden { visibility: hidden; }
.pv__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 11, 10, 0.82), rgba(11, 11, 10, 0) 58%); pointer-events: none; }
.pv__head { position: relative; z-index: 3; align-self: flex-end; width: 100%; padding: 0 var(--gut) clamp(28px, 5vh, 60px); }
.pv__head > * { opacity: 0; transform: translateY(26px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.pv.is-ready .pv__head > * { opacity: 1; transform: none; }
.pv.is-ready .pv__head > :nth-child(2) { transition-delay: 0.08s; }
.pv.is-ready .pv__head > :nth-child(3) { transition-delay: 0.2s; }
.pv__kicker { display: flex; flex-wrap: wrap; margin-bottom: 1.1rem; color: rgba(238, 235, 228, 0.78); }
.pv__title { font-family: var(--serif); font-weight: 400; font-size: clamp(3.4rem, 15vw, 6rem); line-height: 0.9; letter-spacing: -0.03em; text-wrap: balance; }
@media (min-width: 640px) { .pv__title { font-size: clamp(4rem, 12.4vw, 14rem); } }
.pv__scrollcue { display: inline-flex; align-items: center; gap: 0.9rem; margin-top: clamp(1.4rem, 4vh, 2.6rem); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(238, 235, 228, 0.7); }
.pv__scrollcue i { display: block; width: 40px; height: 1px; background: currentColor; }

@media (min-width: 900px) {
  .pv__hero--port .pv__heroimg { inset: 0 0 0 auto; width: 44%; }
  .pv__hero--port::after { display: none; }
  .pv__hero--port .pv__head { width: 56%; padding-right: 3rem; }
  .pv__hero--port .pv__title { font-size: clamp(3.6rem, 8.4vw, 10.5rem); }
}

/* Info */
.pv__info { display: grid; gap: clamp(2.4rem, 6vw, 4rem); padding: clamp(4.5rem, 11vw, 11rem) var(--gut); max-width: 1760px; margin-inline: auto; }
.pv__desc { font-family: var(--serif); font-size: clamp(1.45rem, 2.9vw, 2.9rem); line-height: 1.18; letter-spacing: -0.015em; max-width: 24em; }
.pv__meta { display: grid; gap: 1.6rem; align-content: start; }
.pv__meta h3 { margin-bottom: 0.8rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); }
.pv__meta dl { display: grid; }
.pv__meta dl > div { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 0.75rem; border-top: 1px solid var(--line); font-size: 0.95rem; }
.pv__meta dl > div:last-child { border-bottom: 1px solid var(--line); }
.pv__meta dt { color: var(--mut); }
.pv__meta dd { text-align: right; }
@media (min-width: 900px) {
  .pv__info { grid-template-columns: repeat(12, 1fr); column-gap: clamp(14px, 2vw, 36px); }
  .pv__desc { grid-column: 1 / span 7; }
  .pv__meta { grid-column: 9 / span 4; }
}

/* Gallery — asymmetric, composed from image proportions */
.pv__gal { display: grid; grid-template-columns: 1fr; row-gap: clamp(2.4rem, 7vw, 4rem); padding-inline: var(--gut); padding-bottom: clamp(5rem, 12vw, 12rem); max-width: 1760px; margin-inline: auto; }
.g { position: relative; }
.g__btn { display: block; width: 100%; text-align: left; }
.g .ph { display: block; }
.g__cap { display: flex; justify-content: space-between; margin-top: 0.8rem; color: var(--mut); }
.g--land { margin-inline: calc(var(--gut) * -1); }
.g--land .g__cap { padding-inline: var(--gut); }
.g--port { width: 84%; }
@media (max-width: 899px) { .g--port:nth-of-type(even) { margin-left: auto; } }
.g .ph img { transition: transform 1.6s var(--ease); }
.g .ph.is-in:hover img { transform: scale(1.03); }

@media (min-width: 900px) {
  .pv__gal { grid-template-columns: repeat(12, 1fr); column-gap: clamp(14px, 2vw, 36px); row-gap: clamp(4rem, 9vw, 10rem); }
  .g--land, .g--port { width: auto; margin-inline: 0; margin-left: 0; }
  .g--land.w-full { grid-column: 1 / -1; margin-inline: calc(var(--gut) * -1); }
  .g--land.w-full .g__cap { padding-inline: var(--gut); }
  .g--land.w-l { grid-column: 3 / span 10; }
  .g--land.w-r { grid-column: 1 / span 9; }
  .g--port.p-a { grid-column: 1 / span 5; }
  .g--port.p-b { grid-column: 8 / span 4; margin-top: 12vw; }
  .g--port.p-c { grid-column: 4 / span 6; }
  .g--port.p-d { grid-column: 2 / span 4; }
  .g--port.p-e { grid-column: 7 / span 5; margin-top: 6vw; }
}

/* Next project */
.pv__next { position: relative; display: grid; align-items: end; min-height: 78svh; padding: clamp(3rem, 7vw, 6rem) var(--gut); overflow: hidden; text-align: left; width: 100%; color: var(--bone); background: #050505; }
.pv__next .pv__nimg { position: absolute; inset: 0; }
.pv__next .pv__nimg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.52; transform: scale(1.06); transition: transform 2s var(--ease), opacity 1s var(--ease); }
.pv__next:hover .pv__nimg img, .pv__next:focus-visible .pv__nimg img { transform: scale(1); opacity: 0.7; }
.pv__next::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 5, 5, 0.75), transparent 60%); }
.pv__ntxt { position: relative; z-index: 2; display: grid; gap: 1rem; }
.pv__ntxt .lbl { color: rgba(238, 235, 228, 0.75); }
.pv__ntxt strong { font-family: var(--serif); font-weight: 400; font-size: clamp(3.2rem, 11vw, 11rem); line-height: 0.92; letter-spacing: -0.03em; }
.pv__ntxt strong em { font-style: italic; }
.pv__ntxt .arrow { display: inline-flex; align-items: center; gap: 1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.pv__ntxt .arrow svg { width: 44px; height: 44px; padding: 12px; border: 1px solid rgba(238, 235, 228, 0.6); border-radius: 50%; transition: background-color 0.5s var(--ease), color 0.5s var(--ease); }
.pv__next:hover .arrow svg { background: var(--bone); color: var(--ink); }
.pv__back { display: flex; justify-content: center; padding: 1.6rem var(--gut) calc(1.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.pv__back button { min-height: 44px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mut); transition: color 0.4s; }
.pv__back button:hover { color: var(--fg); }

/* Shared-element ghost used for open/close transitions */
.ghost { position: fixed; z-index: 250; margin: 0; overflow: hidden; pointer-events: none; background: #151513; will-change: left, top, width, height; }
.ghost img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: clamp(56px, 8vh, 90px) clamp(16px, 6vw, 110px); background: rgba(8, 8, 7, 0.97); color: var(--bone); visibility: hidden; opacity: 0; transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s; }
.lb[hidden] { display: grid; }
.lb.is-open { visibility: visible; opacity: 1; transition: opacity 0.5s var(--ease), visibility 0s; }
.lb__fig { display: grid; gap: 0.9rem; justify-items: center; max-width: 100%; max-height: 100%; min-height: 0; touch-action: pan-y; }
.lb__fig img { max-width: 100%; max-height: calc(100svh - 190px); width: auto; height: auto; object-fit: contain; transition: opacity 0.4s var(--ease), transform 0.7s var(--ease); }
.lb__fig img.is-swap { opacity: 0; transform: translateY(12px) scale(0.985); }
.lb__fig figcaption { display: flex; gap: 1.5rem; color: rgba(238, 235, 228, 0.65); }
.lb__fig figcaption span + span::before { display: none; }
.lb__close { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; }
.lb__close span { position: absolute; left: 12px; right: 12px; top: 23px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.lb__close span + span { transform: rotate(-45deg); }
.lb__nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; border: 1px solid rgba(238, 235, 228, 0.3); border-radius: 50%; transition: background-color 0.4s, color 0.4s; }
.lb__nav svg { width: 22px; height: 22px; }
.lb__nav:hover { background: var(--bone); color: var(--ink); }
.lb__nav--prev { left: clamp(10px, 2vw, 32px); }
.lb__nav--next { right: clamp(10px, 2vw, 32px); }
@media (max-width: 719px) {
  .lb { padding-inline: 10px; }
  .lb__nav { top: auto; bottom: 16px; margin: 0; width: 46px; height: 46px; }
  .lb__nav--prev { left: 16px; } .lb__nav--next { right: 16px; }
}

.pv.is-open.is-swap { opacity: 0; transition: opacity 0.4s var(--ease); }