/* Portfolio page layout only. Components and tokens live in site.css.
   Structure: intro · sticky collection nav · six collections (one large plate that bleeds
   to the viewport edge, sides alternating, once full width; + an editorial grid of the rest) ·
   closing band (free visualization, the three prices, a call). */

/* --pfnav-h on :root (this file loads only here) so the html scroll padding can clear the header
   AND the sticky collection nav: focused photos and #gallery-* anchors never land under the nav */
:root{--pfnav-h:53px}
html{scroll-padding-top:calc(var(--hdr-h) + var(--pfnav-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.pf{padding-bottom:var(--section)}

/* ---------- intro: crumbs, a one-line H1 and the gift line on the left; the lede bottom-aligned on the right ---------- */
.pf-intro{align-items:end;row-gap:var(--space-sm);padding-top:var(--space-2xs);padding-bottom:clamp(24px,2.4vw,40px)}
.pf-intro__main{grid-column:1 / 9;display:grid;justify-items:start}
.pf-intro__title{margin-top:var(--space-2xs)}
.pf-intro__gift{display:flex;flex-wrap:wrap;align-items:center;column-gap:.4em;margin-top:var(--space-xs);font-size:var(--fs-ui);line-height:1.5;color:var(--ink-2)}
.pf-intro__gift .link-arrow{color:var(--ink)}
.pf-intro__lede{grid-column:9 / 13;max-width:36ch;padding-bottom:8px;font-size:var(--fs-lead);line-height:1.45;color:var(--ink-2)}

/* ---------- collection nav: sticks under the site header until the gallery ends ---------- */
.pf-nav{position:sticky;top:var(--hdr-h);z-index:40;background:var(--bone);border-block:1px solid var(--rule)}
.pf-nav__in{display:flex;align-items:center;gap:var(--space-xl)}
.pf-nav__t{flex:none;font-size:var(--fs-small);color:var(--ink-3)}
.pf-nav ul{display:flex;gap:clamp(20px,2.4vw,36px);min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.pf-nav ul::-webkit-scrollbar{display:none}
.pf-nav li{flex:none}
.pf-nav a{display:inline-flex;align-items:center;gap:7px;min-height:calc(var(--pfnav-h) - 2px);font-size:var(--fs-ui);color:var(--ink-2);text-decoration:none;white-space:nowrap;background:linear-gradient(var(--ink),var(--ink)) 0 100% / 0 2px no-repeat;transition:background-size .5s var(--ease-expo),color .25s var(--ease-quart)}
.pf-nav a:hover{color:var(--ink)}
.pf-nav a[aria-current="true"]{color:var(--ink);background-size:100% 2px}
.pf-nav__n{font-size:.75rem;line-height:1;color:var(--ink-3);font-variant-numeric:tabular-nums;transform:translateY(-.45em)}

/* ---------- a collection ---------- */
.plate{position:relative;margin:0}
.coll{margin-top:var(--section);scroll-margin-top:8px}
.pf-nav + .coll{margin-top:var(--space-lg)}
.coll__top{align-items:start}
.coll__head{grid-column:9 / 13;grid-row:1;display:grid;gap:var(--space-md);padding-top:var(--space-sm);border-top:1px solid var(--ink)}
.coll__about{display:grid;gap:var(--space-md)}
.coll__intro{color:var(--ink-2);max-width:38ch}
.coll__spec > div{grid-template-columns:5rem 1fr}
.coll__lead{grid-column:1 / 9;grid-row:1;margin-left:calc(var(--edge) * -1)}
.coll--r .coll__head{grid-column:1 / 5}
.coll--r .coll__lead{grid-column:5 / 13;margin-left:0;margin-right:calc(var(--edge) * -1)}
.coll__lead .media{width:100%;aspect-ratio:3 / 2;max-height:calc(100svh - var(--hdr-h) - var(--pfnav-h) - 40px);min-height:380px}
.coll__chip{position:absolute;left:var(--edge);top:var(--space-md);z-index:2;pointer-events:none;max-width:calc(100% - 2 * var(--space-md));white-space:normal}
.coll--r .coll__chip{left:var(--space-md)}
/* once per page the lead runs edge to edge (21:9) and the head sits under it as a row */
@media (min-width:901px){
  .coll--w .coll__lead{grid-column:1 / -1;grid-row:1;margin-inline:calc(var(--edge) * -1)}
  .coll--w .coll__lead .media{aspect-ratio:21 / 9;min-height:0}
  .coll--w .coll__head{grid-column:1 / -1;grid-row:2;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start;margin-top:var(--space-xl)}
  .coll--w .coll__title{grid-column:1 / 6}
  .coll--w .coll__about{grid-column:7 / 13}
}

/* plates: the whole photo is the button that opens the full-screen viewer.
   --pos = focal point, --z = extra crop that keeps a fixture or a ceiling edge out of the frame */
.preview-open{display:block;width:100%;padding:0;margin:0;border:0;background:none;color:inherit;text-align:left;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.preview-open .media img{object-position:var(--pos,50% 50%);transform:scale(var(--z,1));transform-origin:var(--pos,50% 50%);transition:transform 1.4s var(--ease-expo)}
.preview-open:hover .media img{transform:scale(calc(var(--z,1) * 1.03))}
.preview-open:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
/* leads run to the screen edge, where an outside ring is clipped: draw it inside, ink + bone so it reads on light and dark photos */
.coll__lead .preview-open:focus-visible{outline:none}
.coll__lead .preview-open:focus-visible .media::before{content:"";position:absolute;inset:0;z-index:3;border:2px solid var(--ink);box-shadow:inset 0 0 0 2px var(--bone);pointer-events:none}
/* quiet "enlarge" mark, bottom right */
.preview-open .media::after{content:"";position:absolute;right:12px;bottom:12px;z-index:2;width:40px;height:40px;background:var(--bone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 2.5h4v4M13.5 2.5 9 7M6.5 13.5h-4v-4M2.5 13.5 7 9' fill='none' stroke='%232a2119' stroke-width='1.3'/%3E%3C/svg%3E") center / 15px no-repeat;opacity:0;transform:translateY(4px);transition:opacity .35s var(--ease-quart),transform .5s var(--ease-expo)}
.preview-open:hover .media::after,.preview-open:focus-visible .media::after{opacity:1;transform:none}
/* touch screens: the mark only on the lead plates (every photo is the button anyway) */
@media (hover:none){
  .preview-open .media::after{display:none}
  .coll__lead .preview-open .media::after{display:block;opacity:.92;transform:none;width:36px;height:36px;right:10px;bottom:10px}
}

/* ---------- the rest of a collection: an editorial grid (three patterns, mirrored on alternate collections) ---------- */
.rest{margin-top:clamp(56px,7vw,112px);row-gap:clamp(48px,6vw,88px);align-items:start}
.rest .cap{margin-top:var(--space-xs)}
/* every photo fits the screen under the header + collection nav (tall 4:5 slots crop a little on
   short windows), so a photo focused with the keyboard never tucks its top under the sticky nav */
.rest .media{width:100%;max-height:calc(100svh - var(--hdr-h) - var(--pfnav-h) - 40px)}
/* four photos */
.rest--a > :nth-child(1){grid-column:1 / 8;grid-row:1}
.rest--a > :nth-child(2){grid-column:9 / 13;grid-row:1;margin-top:clamp(48px,7vw,112px)}
.rest--a > :nth-child(3){grid-column:2 / 6;grid-row:2}
.rest--a > :nth-child(4){grid-column:7 / 13;grid-row:2;align-self:end}
.rest--a > :nth-child(1) .media{aspect-ratio:3 / 2}
.rest--a > :nth-child(2) .media{aspect-ratio:4 / 5}
.rest--a > :nth-child(3) .media{aspect-ratio:1}
.rest--a > :nth-child(4) .media{aspect-ratio:16 / 9}
.rest--a.rest--flip > :nth-child(1){grid-column:6 / 13}
.rest--a.rest--flip > :nth-child(2){grid-column:1 / 5}
.rest--a.rest--flip > :nth-child(3){grid-column:8 / 12}
.rest--a.rest--flip > :nth-child(4){grid-column:1 / 7}
/* three photos (the tall one holds a vertically composed daylight photo) */
.rest--b > :nth-child(1){grid-column:1 / 7;grid-row:1 / span 2}
.rest--b > :nth-child(2){grid-column:8 / 13;grid-row:1;margin-top:clamp(40px,6vw,96px)}
.rest--b > :nth-child(3){grid-column:9 / 13;grid-row:2}
.rest--b > :nth-child(1) .media{aspect-ratio:4 / 5}
.rest--b > :nth-child(2) .media{aspect-ratio:3 / 2}
.rest--b > :nth-child(3) .media{aspect-ratio:4 / 3}
.rest--b.rest--flip > :nth-child(1){grid-column:7 / 13}
.rest--b.rest--flip > :nth-child(2){grid-column:1 / 6}
.rest--b.rest--flip > :nth-child(3){grid-column:1 / 5}
/* two photos */
.rest--c > :nth-child(1){grid-column:1 / 8;grid-row:1}
.rest--c > :nth-child(2){grid-column:9 / 13;grid-row:1;margin-top:clamp(48px,7vw,112px)}
.rest--c > :nth-child(1) .media{aspect-ratio:3 / 2}
.rest--c > :nth-child(2) .media{aspect-ratio:4 / 5}
.rest--c.rest--flip > :nth-child(1){grid-column:6 / 13}
.rest--c.rest--flip > :nth-child(2){grid-column:1 / 5}

/* ---------- closing band: the free visualization, the three prices, a call ---------- */

/* ---------- full-screen viewer ---------- */
.pf-lb .dlg__inner{gap:0}
.pf-lb img{min-height:0}
#lightboxImage{touch-action:pinch-zoom}
.pf-lb__cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--space-sm);min-width:0}
.pf-lb__cap strong{font-weight:500;line-height:1.4}
.pf-lb__count{font-size:var(--fs-small);color:var(--ink-2);font-variant-numeric:tabular-nums}
.pf-lb .dlg__nav{flex:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .pf-intro__main{grid-column:1 / -1}
  .pf-intro__lede{grid-column:1 / 11;max-width:62ch;padding-bottom:0;font-size:var(--fs-body);line-height:1.55}
  .pf-nav__t{display:none}
  .coll__head{grid-column:8 / 13}
  .coll__lead{grid-column:1 / 8}
  .coll--r .coll__head{grid-column:1 / 6}
  .coll--r .coll__lead{grid-column:6 / 13}
  /* a 3:2 plate with a 380 px floor is wider than seven columns below ~1100 px: let it be 4:3 */
  .coll__lead .media{aspect-ratio:4 / 3;min-height:0}
}
@media (max-width:900px){
  :root{--pfnav-h:49px}
  /* phones: crumbs + H1, then the photos (the dock carries the free-visualization CTA) */
  .pf-intro{padding-top:0;padding-bottom:var(--space-sm)}
  .pf-intro__title{margin-top:0}
  .pf-intro__gift,.pf-intro__lede{display:none}
  .pf-nav__in{width:100%;padding-inline:0}
  .pf-nav ul{gap:var(--space-lg);padding-inline:var(--margin);scroll-padding-inline:var(--margin)}
  .pf-nav a{font-size:var(--fs-small)}
  .pf-nav + .coll{margin-top:var(--space-sm)}

  .coll__top{display:flex;flex-direction:column;align-items:stretch}
  .coll__head{display:contents}
  .coll__title{order:1;padding-top:var(--space-sm);border-top:1px solid var(--ink)}
  .coll__lead,.coll--r .coll__lead{order:2;margin:var(--space-md) calc(var(--margin) * -1) 0}
  .coll__about{order:3;margin-top:var(--space-md)}
  .coll__lead .media{aspect-ratio:4 / 3;max-height:none;min-height:0}
  .coll__chip,.coll--r .coll__chip{left:var(--margin);top:var(--space-sm)}
  .coll__spec > div:not(:first-child){display:none}
  /* the first collection opens on its photo, right under the collection nav */
  .pf-nav + .coll .coll__lead{order:1;margin-top:0}
  .pf-nav + .coll .coll__title{order:2;margin-top:var(--space-md)}

  .rest{margin-top:var(--space-xl);row-gap:var(--space-xl)}
  .rest > .plate,.rest.rest--flip > .plate{grid-row:auto;margin-top:0;align-self:start}
  .rest--a > :nth-child(1),.rest--a.rest--flip > :nth-child(1){grid-column:1 / -1}
  .rest--a > :nth-child(2),.rest--a.rest--flip > :nth-child(2){grid-column:1 / 4}
  .rest--a > :nth-child(3),.rest--a.rest--flip > :nth-child(3){grid-column:4 / 7;margin-top:var(--space-xl)}
  .rest--a > :nth-child(4){grid-column:2 / 7}
  .rest--a.rest--flip > :nth-child(4){grid-column:1 / 6}
  .rest--a > :nth-child(3) .media{aspect-ratio:4 / 5}
  .rest--b > :nth-child(1),.rest--b.rest--flip > :nth-child(1){grid-column:1 / 4}
  .rest--b > :nth-child(2),.rest--b.rest--flip > :nth-child(2){grid-column:4 / 7;margin-top:var(--space-xl)}
  .rest--b > :nth-child(3){grid-column:2 / 7}
  .rest--b.rest--flip > :nth-child(3){grid-column:1 / 6}
  .rest--b > :nth-child(2) .media{aspect-ratio:4 / 5}
  .rest--b > :nth-child(3) .media{aspect-ratio:3 / 2}
  .rest--c > :nth-child(1),.rest--c.rest--flip > :nth-child(1){grid-column:1 / -1}
  .rest--c > :nth-child(2){grid-column:3 / 7}
  .rest--c.rest--flip > :nth-child(2){grid-column:1 / 5}
  /* half-width pairs: one caption line */
  .rest--a > :nth-child(2) .cap span,.rest--a > :nth-child(3) .cap span,
  .rest--b > :nth-child(1) .cap span,.rest--b > :nth-child(2) .cap span{display:none}
  .rest--a > :nth-child(2) .cap b,.rest--a > :nth-child(3) .cap b,
  .rest--b > :nth-child(1) .cap b,.rest--b > :nth-child(2) .cap b{font-size:var(--fs-small);line-height:1.4}

  .pf-lb .dlg__inner{padding:56px 0 calc(var(--space-sm) + env(safe-area-inset-bottom))}
  .pf-lb .dlg__bar{padding-inline:var(--margin)}
}
/* portrait phones: the photo and its caption bar sit together in the middle, not 450 px apart */
@media (max-width:900px) and (orientation:portrait){
  .pf-lb .dlg__inner{grid-template-rows:auto auto;align-content:center;row-gap:var(--space-md)}
  .pf-lb img{height:auto;max-height:70svh}
}