/* Photography: their original page, evolved (see p_photography.py). Loaded after site.css on photography.html only.
   Same seven sections, same photographs, same words; refined type, full-bleed moments, masked reveals, a lightbox.
   Scroll-settled values arrive as --mgp (0 to 1): from CSS scroll timelines where supported (html.mg-sdt),
   otherwise from photography.js. Only transform and opacity move. */
@property --mgp{syntax:'<number>';inherits:true;initial-value:0}
@property --hs{syntax:'<number>';inherits:true;initial-value:1.08}
@keyframes mgP{from{--mgp:0}to{--mgp:1}}
html{scrollbar-gutter:stable}
.pg-photography{--hh:64px}
@media (max-width:699px){.pg-photography{--hh:56px}}

/* ---------------------------------------------------------------- type */
.pa-hero-h{font:300 clamp(2.9rem,5.4vw,6.4rem)/.98 var(--serif);letter-spacing:-.025em}
.pa-h2{font:300 clamp(2.4rem,4.2vw,4.8rem)/1 var(--serif);letter-spacing:-.022em}
.pa-h2 em{font-weight:300}
.pa-h3{font:400 clamp(1.6rem,2.1vw,2.1rem)/1.1 var(--serif);letter-spacing:-.01em}
.pa-body{font:300 15.5px/1.75 var(--sans);color:var(--fg2);max-width:30em}
.pa-note{font:300 14px/1.6 var(--sans);color:var(--ink2);text-align:center;max-width:22em;margin:0 auto}
.pa-sub{font:300 15.5px/1.6 var(--sans);color:var(--ink2);margin-top:14px}
.pa-k{color:inherit;opacity:.72;margin-bottom:22px}

/* ---------------------------------------------------------------- photographs */
.pa-pl{position:relative;min-width:0}
.pa-pl .slot{background:var(--slot)}
.pa-pl .slot[role=button]{cursor:zoom-in}
.pa-pl .slot:focus-visible{outline:0}
.pa-pl .slot:focus-visible::after{content:'';position:absolute;inset:8px;z-index:4;border:2px solid #fff;box-shadow:0 0 0 2px #000,inset 0 0 0 2px #000;pointer-events:none}
/* reveal: each photograph unmasks upward and settles */
.js .pa-pl:not(.pa-bleed-pl):not(.pa-hero-pl) .slot{clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease)}
.js .pa-pl:not(.pa-bleed-pl):not(.pa-hero-pl) .slot>img{transform:scale(1.14);transition:transform 2s var(--ease)}
.js .pa-pl.in .slot{clip-path:inset(0 0 0 0)!important}
.js .pa-pl.in:not(.pa-bleed-pl):not(.pa-hero-pl) .slot>img{transform:none}
@media (hover:hover) and (pointer:fine){
  .pa-pl.in:not(.pa-bleed-pl):not(.pa-hero-pl):not(.pa-loupe-pl) .slot:hover>img{transform:scale(1.03);transition-duration:1.4s}
}
.mg-sdt [data-mgp=cover]{animation:mgP linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.mg-sdt [data-mgp=exit]{animation:mgP linear both;animation-timeline:view();animation-range:exit 0% exit 100%}

/* ---------------------------------------------------------------- 1 hero */
.pa-hero{position:relative;height:max(100svh,600px);overflow:hidden;color:#000}
.pa-hero-pl{position:absolute;inset:0}
.pa-hero-pl .slot{position:absolute;inset:0;aspect-ratio:auto!important}
.pa-hero-pl .slot>img{object-position:50% 42%;transform:translate3d(0,calc(var(--mgp) * 14%),0) scale(var(--hs));transition:--hs 2.6s var(--ease)}
.pa-hero.go{--hs:1}
.pa-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 46% 40% at 74% 66%,rgba(255,255,255,.62),rgba(255,255,255,0) 70%)}
.pa-hero-t{position:absolute;z-index:2;left:52%;right:var(--m);top:58%;text-align:center;transform:translate3d(0,calc(var(--mgp) * -40%),0)}
.js .pa-hero .pa-k{opacity:0;transition:opacity 1.2s var(--ease) .9s}
.pa-hero.go .pa-k{opacity:.72}
.js .pa-hero .ln>span{transition-duration:1.2s;transition-delay:.35s}
.js .pa-hero .ln:nth-child(2)>span{transition-delay:.47s}
@media (max-width:699px){
  .pa-hero{height:max(100svh,560px)}
  .pa-hero-pl .slot>img{object-position:61% 50%}
  .pa-hero::after{background:radial-gradient(ellipse 80% 30% at 50% 76%,rgba(255,255,255,.66),rgba(255,255,255,0) 72%)}
  .pa-hero-t{left:var(--m);right:var(--m);top:auto;bottom:max(64px,11svh)}
  .pa-hero-h{font-size:clamp(2.8rem,12.6vw,3.7rem)}
}
@media (min-width:700px) and (max-width:1099px) and (orientation:portrait){
  .pa-hero-pl .slot>img{object-position:58% 50%}
  .pa-hero::after{background:radial-gradient(ellipse 70% 26% at 50% 74%,rgba(255,255,255,.66),rgba(255,255,255,0) 72%)}
  .pa-hero-t{left:var(--m);right:var(--m);top:auto;bottom:16svh}
  .pa-hero-h{font-size:clamp(3.4rem,8.6vw,5.4rem)}
}

/* ---------------------------------------------------------------- 2 three across: large format imaging */
.pa-trio{padding:var(--s1) var(--m) var(--s1);row-gap:56px;align-items:start}
.pa-trio-t{text-align:center;padding:clamp(26px,3.4vw,48px) 4% 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.pa-loupe{position:absolute;left:0;top:0;z-index:3;width:clamp(120px,12vw,190px);aspect-ratio:1;border-radius:50%;overflow:hidden;pointer-events:none;
  transform:translate3d(var(--lx,-999px),var(--ly,-999px),0) translate(-50%,-50%) scale(.6);opacity:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.95),0 20px 50px rgba(0,0,0,.3);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.pa-loupe.on{opacity:1;transform:translate3d(var(--lx),var(--ly),0) translate(-50%,-50%) scale(1);transition:opacity .4s var(--ease)}
.pa-loupe i{position:absolute;inset:0;background-repeat:no-repeat;background-size:var(--bw,0) var(--bh,0);background-position:var(--bx,0) var(--by,0);background-color:#eee}
@media (hover:hover) and (pointer:fine){.pa-loupe-pl .slot{cursor:zoom-in}}
@media (hover:none),(pointer:coarse){.pa-loupe{display:none}}


/* ---------------------------------------------------------------- 3 timeless style for lasting effect */
.pa-time{padding:var(--s1) var(--m) calc(var(--s1) * 1.5);row-gap:56px;align-items:start}
.pa-time-l{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,36px);padding-top:clamp(64px,9vw,150px)}
.pa-time-r .pa-h2{text-align:center;margin-bottom:clamp(26px,4vh,48px)}


/* ---------------------------------------------------------------- 4 + 7 full bleed */
.pa-bleed{position:relative;height:max(100svh,560px);overflow:hidden;color:#fff}
.pa-bleed-pl{position:absolute;inset:0}
.pa-bleed-pl .slot{position:absolute;inset:0;aspect-ratio:auto!important}
.pa-bleed-pl .slot>img{transform:translate3d(0,calc((var(--mgp) - .5) * -9%),0) scale(1.12)}
.pa-bleed::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
.pa-bleed-h{position:relative;z-index:2;font:300 clamp(2.6rem,5.2vw,6.2rem)/1 var(--serif);letter-spacing:-.025em;text-shadow:0 2px 40px rgba(0,0,0,.18)}
.pa-story{height:max(min(100svh,64vw),560px)}
.pa-story .slot>img{object-position:50% 47%}
.pa-story::after{background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.12) 46%,rgba(0,0,0,0) 70%)}
.pa-story .pa-bleed-h{position:absolute;left:var(--m);bottom:clamp(40px,9vh,96px);max-width:9.5em}
.pa-award .slot>img{object-position:50% 60%}
.pa-award::after{background:linear-gradient(270deg,rgba(0,0,0,.58),rgba(0,0,0,.22) 44%,rgba(0,0,0,0) 70%)}
.pa-award-t{position:absolute;z-index:2;right:var(--m);top:50%;transform:translate3d(0,-50%,0);width:min(44vw,40rem);text-align:center}
.pa-award-t .pa-bleed-h{font-size:clamp(2.6rem,4.6vw,5.6rem)}
.pa-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 30px;margin-top:clamp(28px,4.4vh,48px)}
.pa-cta .solid{min-width:200px}
@media (max-width:699px){
  .pa-bleed{height:88svh;min-height:520px}
  .pa-story{height:88svh}
  .pa-story .slot>img{object-position:50% 36%}
  .pa-story::after{background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 52%)}
  .pa-story .pa-bleed-h{top:auto;bottom:44px;right:var(--m);max-width:none;font-size:clamp(2.7rem,11.8vw,3.6rem)}
  .pa-award{height:100svh}
  .pa-award .slot>img{object-position:50% 50%}
  .pa-award::after{background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,0) 56%)}
  .pa-award-t{left:var(--m);right:var(--m);top:auto;bottom:40px;width:auto;transform:none}
  .pa-award-t .pa-bleed-h{font-size:clamp(2.6rem,11.2vw,3.4rem)}
  .pa-cta{flex-direction:column}
  .pa-cta .solid{width:100%}
}
@media (min-width:700px) and (max-width:1099px) and (orientation:portrait){
  .pa-bleed{height:min(100svh,118vw)}
  .pa-story::after{background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0) 50%)}
  .pa-story .pa-bleed-h{top:auto;bottom:9svh}
  .pa-award::after{background:linear-gradient(0deg,rgba(0,0,0,.56),rgba(0,0,0,0) 55%)}
  .pa-award-t{left:var(--m);right:var(--m);top:auto;bottom:8svh;width:auto;transform:none}
}

/* ---------------------------------------------------------------- 5 why years count */
.pa-years{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:min(100svh,60vw)}
.pa-years-pl{position:relative;min-height:100%}
.pa-years-pl .slot{position:absolute;inset:0;aspect-ratio:auto!important}
.pa-years-pl .slot>img{object-position:50% 62%}
.pa-years-t{background:var(--bone);display:flex;flex-direction:column;justify-content:center;gap:0;padding:var(--s1) var(--m)}
.pa-years-t .pa-h2{margin-bottom:14px}
.pa-years-k{font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:28px}
@media (max-width:699px){
  .pa-years{grid-template-columns:1fr}
  .pa-years-pl{aspect-ratio:4/5;min-height:0}
  .pa-years-t{padding:56px var(--m) 64px}
}

/* ---------------------------------------------------------------- 6 pure art. pure you. */
.pa-pure{padding:var(--s2) var(--m) calc(var(--s1) * 1.5);row-gap:var(--g);align-items:start}
.pa-pure-h{text-align:center;margin-bottom:clamp(30px,5vh,64px)}
.pa-pure-h .pa-h2{display:inline-block}
@media (min-width:700px){.pa-pure .pa-pure-b{margin-top:9vh}}


/* ---------------------------------------------------------------- lightbox: the plates, one at a time */
.mg-lb{position:fixed;inset:0;z-index:85;background:#000;color:#fff;opacity:0;transition:opacity .5s var(--ease);touch-action:none;overscroll-behavior:contain}
.mg-lb.open{opacity:1}
.mg-lb-stage{position:absolute;inset:0;overflow:hidden}
.mg-lb-img{position:absolute;left:0;top:0;max-width:none;user-select:none;-webkit-user-drag:none;will-change:transform;transform-origin:0 0;background:#0E0E0E}
.mg-lb-top{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;height:64px;padding:0 var(--m);pointer-events:none}
.mg-lb-top>*{pointer-events:auto}
.mg-lb-top .num{display:flex;gap:26px;color:#fff;font-size:12px}
.mg-lb-of{color:rgba(255,255,255,.5)}
.mg-lb-x{display:flex;align-items:center;gap:12px;min-height:44px;font:500 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#fff}
.mg-lb-x i{position:relative;width:20px;height:20px}
.mg-lb-x i::before,.mg-lb-x i::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transform:rotate(45deg)}
.mg-lb-x i::after{transform:rotate(-45deg)}
.mg-lb-nav{position:absolute;z-index:2;top:64px;bottom:112px;width:max(64px,16vw);display:flex;align-items:center;opacity:0;transition:opacity .3s}
.mg-lb-nav:hover,.mg-lb-nav:focus-visible{opacity:1}
.mg-lb-nav.prev{left:0;justify-content:flex-start;padding-left:var(--m);cursor:w-resize}
.mg-lb-nav.next{right:0;justify-content:flex-end;padding-right:var(--m);cursor:e-resize}
.mg-lb-nav i{width:16px;height:16px;border-top:1px solid #fff;border-left:1px solid #fff;transform:rotate(-45deg)}
.mg-lb-nav.next i{transform:rotate(135deg)}
.mg-lb-bot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 var(--m) 18px;pointer-events:none}
.mg-lb-bot>*{pointer-events:auto}
.mg-lb-bot .cap{color:rgba(255,255,255,.66);min-width:10em;padding-bottom:4px}
.mg-lb-rail{display:flex;gap:6px;max-width:min(62vw,900px);overflow-x:auto;scrollbar-width:none;padding:3px}
.mg-lb-rail::-webkit-scrollbar{display:none}
.mg-lb-rail button{flex:none;width:34px;height:44px;opacity:.34;transition:opacity .3s,transform .3s var(--ease)}
.mg-lb-rail button:hover{opacity:.8}
.mg-lb-rail button.on{opacity:1;box-shadow:0 0 0 1px #fff;transform:translateY(-3px)}
.mg-lb-rail img{width:100%;height:100%;object-fit:cover;background:#1a1a1a}
@media (max-width:699px){
  .mg-lb-top{height:56px}
  .mg-lb-nav{display:none}
  .mg-lb-rail{display:none}
  .mg-lb-bot{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}

.mg-lb-bot{justify-content:center}
.mg-lb-rail{max-width:min(80vw,900px)}
.mg-lb-rail button{width:40px;height:54px}


/* ---------------------------------------------------------------- iPad + desktop: the swipe groups are plain grid cells */
.pa-track{display:none}
@media (min-width:700px){
  .pa-swipe{display:contents}
  .pa-trio .pa-swipe>.pa-pl,.pa-pure .pa-swipe>.pa-pl{grid-column:var(--c)}
  .pa-time-a{order:1}.pa-note{order:2}.pa-time-b{order:3}
}
@media (min-width:700px) and (max-width:1099px){.pa-trio .pa-swipe>.pa-pl,.pa-pure .pa-swipe>.pa-pl{grid-column:var(--ct,var(--c))}}

/* ---------------------------------------------------------------- phone: its own composition
   Edge-to-edge photographs, one idea per screen, photo groups become swipe sequences that snap,
   headlines sized for the hand. Nothing waits on a reveal here: everything is visible from the start. */
@media (max-width:699px){
  .js .pa-pl .slot{clip-path:none!important;transition:none!important}
  .js .pa-pl:not(.pa-bleed-pl):not(.pa-hero-pl) .slot>img{transform:none!important;transition:none!important}
  .pg-photography main .rv .ln>span{transform:none!important;transition:none!important}
  .pg-photography main .rv:not(:has(.ln)){opacity:1!important;transform:none!important}
  .js .pa-hero .pa-k{opacity:.72}
  .pa-h2{font-size:clamp(2.7rem,11.8vw,3.6rem);line-height:1}
  .pa-h3{font-size:clamp(2.3rem,9.6vw,2.9rem)}
  .pa-body,.pa-sub{font-size:16px}
  .pa-note{font-size:15px;max-width:none;padding:0 6%}

  /* sequences: swipe sideways inside the section, the page itself only scrolls down */
  .pa-swipe{display:flex;gap:10px;margin:0 calc(var(--m) * -1);padding:0 var(--m);overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding:0 var(--m);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pa-swipe::-webkit-scrollbar{display:none}
  .pa-swipe>.pa-pl{flex:0 0 84vw;scroll-snap-align:start;margin:0!important}
  .pa-swipe>.pa-pl:last-child{scroll-snap-align:end}
  .pa-track{display:block;position:relative;height:1px;margin:16px var(--m) 0;background:#DCDCDC;overflow:hidden}
  .pa-track i{position:absolute;left:0;top:0;bottom:0;width:var(--tw,50%);background:#000;transform:translate3d(var(--tx,0px),0,0)}

  /* 2: large format, edge to edge, then the two portraits as a sequence */
  .pa-trio{padding:0 var(--m) 64px;row-gap:0}
  .pa-trio-a .pa-loupe-pl{margin:0 calc(var(--m) * -1)}
  .pa-trio-t{padding:30px 0 34px;gap:14px}

  /* 3: the headline and the large plate first, then the pair as a sequence with its line */
  .pa-time{padding:0 var(--m) 64px;row-gap:0}
  .pa-time>.pa-time-r{order:-1}
  .pa-time-l{padding-top:36px;gap:0}
  .pa-time-r .pa-h2{margin:0 0 26px;text-align:center}
  .pa-time-r .pa-time-c{margin:0 calc(var(--m) * -1)}
  .pa-time-l .pa-note{margin-top:22px}

  /* 5: the bride full width, then the words */
  .pa-years-t{padding:48px var(--m) 60px}
  .pa-years-t .pa-h2{margin-bottom:16px}

  /* 6: pure art, three as a sequence */
  .pa-pure{padding:64px var(--m) 64px;row-gap:0}
  .pa-pure-h{margin-bottom:28px}
  .pa-pure-h .pa-h2{display:block}
}
@media (max-width:399px) and (max-height:700px){ /* small phones (375 x 667) */
  .pa-swipe>.pa-pl{flex-basis:78vw}
  .pa-hero-h{font-size:clamp(2.3rem,10.4vw,2.9rem)}
}

/* ---------------------------------------------------------------- reduced motion: everything still */
@media (prefers-reduced-motion:reduce){
  .mg-sdt [data-mgp]{animation:none}
  .pa-hero-pl .slot>img,.pa-bleed-pl .slot>img,.pa-hero-t{transform:none!important}
  .js .pa-pl .slot{clip-path:none!important}
  .js .pa-pl .slot>img{transform:none!important}
  .js .pa-hero .pa-k{opacity:.72}
}
/* full-page review captures only (the screenshot script adds html.shot) */
.shot [data-mgp]{animation:none!important;--mgp:.5!important}
.shot .pa-hero{--mgp:0!important}