:root{--bg:#fffdf6;--ink:#1d1c1b;--muted:#6b6863;--gap:clamp(10px,1.4vw,20px);--pad:clamp(20px,3.5vw,48px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:400 1rem/1.65 "DM Sans",system-ui,sans-serif}
main{flex:1 0 auto}
.site-footer{flex-shrink:0;margin-top:auto}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Fixed, transparent header. difference blend keeps white text readable on light and dark photos */
.site-header{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:var(--pad);padding-block:clamp(14px,2vw,26px);color:#fff;mix-blend-mode:difference;pointer-events:none}
.site-header>*{pointer-events:auto}
.logo img{height:clamp(30px,3.4vw,44px);width:auto}
nav{display:flex;gap:clamp(16px,2.4vw,36px);font-size:.95rem}
nav a{text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current=page]{border-bottom-color:currentColor}
.menu-btn{display:none;background:none;border:0;color:inherit;font:inherit;cursor:pointer}

.hero{position:relative;height:100svh;min-height:420px;overflow:hidden;background:#222}
.hero img{width:100%;height:100%;object-fit:cover;animation:hero-in 1.6s ease-out both}
.hero-line{position:absolute;left:var(--pad);bottom:var(--pad);margin:0;color:#fff;
  font:300 clamp(1.6rem,4vw,3rem)/1.1 Fraunces,Georgia,serif;text-shadow:0 1px 18px rgba(0,0,0,.35);max-width:14ch}
@keyframes hero-in{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}

.gallery{columns:3;column-gap:var(--gap);padding:var(--gap)}
.shot{display:block;margin:0 0 var(--gap);break-inside:avoid;cursor:zoom-in;overflow:hidden;background:#ddd}
.shot img{width:100%;transition:transform .5s ease}
.shot:hover img{transform:scale(1.02)}

/* Weddings: 4 columns, even gaps. Landscape cells are 4:3; portraits span 2 rows.
   Row height uses cqw (not %) so it tracks column width — % rows were resolving
   against container height and producing a tall, heavily cropped frame. */
.gallery-wedding{
  columns:unset;column-gap:unset;
  container-type:inline-size;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap);
  padding:var(--gap);
  grid-auto-rows:calc((100cqw - 3 * var(--gap)) / 4 * 3 / 4);
}
.gallery-wedding .shot{margin:0;width:100%;height:100%;min-height:0;background:#ddd;overflow:hidden}
.gallery-wedding .shot img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Street: 4 columns × 5 rows (20 images), 4:3 cells, even gaps */
.gallery-street{
  columns:unset;column-gap:unset;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap);
  padding:var(--gap);
  padding-top:clamp(72px,10vw,110px);
}
.gallery-street .shot{margin:0;width:100%;aspect-ratio:4/3;background:#ddd;overflow:hidden}
.gallery-street .shot img{width:100%;height:100%;object-fit:cover;object-position:center}

.page-cta{display:flex;justify-content:center;padding:clamp(48px,8vw,96px) var(--pad) clamp(24px,4vw,48px)}
.page-cta a{
  font:300 clamp(1.4rem,3vw,2rem)/1 Fraunces,Georgia,serif;
  letter-spacing:.12em;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px
}
.page-cta a:hover{opacity:.7}

.video-page{padding:clamp(110px,14vw,170px) var(--pad) 80px;max-width:1100px;margin:auto}
.video-page h1{margin-bottom:1em}
.video-embed{position:relative;width:100%;aspect-ratio:16/9;background:#111;overflow:hidden}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.text-page{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);
  padding:clamp(110px,14vw,170px) var(--pad) 80px;max-width:1200px;margin:auto;align-items:start}
.text-page.narrow{grid-template-columns:minmax(0,640px);justify-content:center}
h1{font:300 clamp(2rem,4.5vw,3.4rem)/1.1 Fraunces,Georgia,serif;margin:0 0 .6em}
.text-page p{max-width:60ch;color:var(--muted)}
form{display:grid;gap:18px;margin-top:28px}
label{display:grid;gap:6px;font-size:.9rem;color:var(--muted)}
input,textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--muted);padding:8px 0;border-radius:0}
input:focus,textarea:focus{outline:0;border-bottom-color:var(--ink)}
.btn{display:inline-block;font:inherit;color:var(--bg);background:var(--ink);border:0;padding:12px 28px;text-decoration:none;cursor:pointer;justify-self:start}
.btn:hover{opacity:.85}

.site-footer{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;padding:36px var(--pad) 48px;font-size:.9rem;color:var(--muted)}

.lightbox{border:0;padding:0;background:rgba(10,10,10,.94);width:100vw;height:100vh;max-width:none;max-height:none;color:#fff}
.lightbox::backdrop{background:#000}
.lightbox[open]{display:grid;place-items:center}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font:inherit;cursor:pointer;padding:16px}
.lb-close{top:8px;right:12px}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:2.4rem;line-height:1}
.lb-prev{left:8px}.lb-next{right:8px}

@media(max-width:900px){
  .gallery{columns:2}
  .gallery-wedding{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:calc((100cqw - var(--gap)) / 2 * 3 / 4);
  }
  .gallery-wedding .shot[style]{grid-column:auto!important;grid-row:auto!important}
  .gallery-wedding .landscape{grid-row:span 1}
  .gallery-wedding .portrait{grid-row:span 2}
  .gallery-street{grid-template-columns:repeat(2,minmax(0,1fr))}
  .text-page{grid-template-columns:1fr}
}
@media(max-width:640px){
  .gallery{columns:1}
  .gallery-wedding{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
  }
  .gallery-wedding .shot[style]{grid-column:auto!important;grid-row:auto!important}
  .gallery-wedding .landscape{grid-row:auto;aspect-ratio:4/3;height:auto}
  .gallery-wedding .portrait{grid-row:auto;aspect-ratio:3/4;height:auto}
  .gallery-wedding .shot img{object-fit:cover}
  .gallery-street{grid-template-columns:1fr}
  .menu-btn{display:block}
  nav{display:none;position:fixed;inset:0;background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:22px;font-size:1.4rem;color:#000;mix-blend-mode:normal}
  nav.open{display:flex}
  .site-header:has(nav.open){mix-blend-mode:normal;color:#000}
  .site-header:has(nav.open) .logo{visibility:hidden}
  .site-header:has(nav.open) .menu-btn{position:relative;z-index:2}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}