:root{
  --ink:#000000;
  --paper:#f2efe9;
  --mute:#8f8b83;
  --line:rgba(0,0,0,.16);
  --serif:'Didot','Playfair Display','Times New Roman',serif;
  --sans:'Inter',system-ui,sans-serif;
  --pad:clamp(1rem,3vw,2.5rem);
  --edge:1.1rem;
  --side-fs:clamp(.85rem,1.05vw,1.1rem);   /* MENU / CONTACT / VENDORS */
  --logo:clamp(2.4rem,8.9vw,6.6rem);   /* top DEEA & FLO on mobile (20% larger again) */
  --ease:cubic-bezier(.7,0,.2,1);
}
@media(max-width:759px){:root{--side-fs:1.02rem}}
/* white band at the top: tall enough for the logo and the MENU label, plus --edge above and below */
:root{--menu-h:calc(var(--side-fs) + .4rem);--menu-len:calc(var(--side-fs)*3.3 + .4rem);--bar:calc((max(var(--logo)*.8, var(--menu-len)) + 2*var(--edge))*1.3)}   /* mobile: 30% taller band */
@media(min-width:760px){:root{--bar:calc((max(var(--logo)*.8, var(--menu-len)) + 2*var(--edge))*1.69)}}   /* desktop: another 30% taller; logo + MENU stay centred */   /* mobile: MENU / CONTACT / VENDORS 20% larger */
@media(min-width:760px){:root{--logo:clamp(1.2rem,4.4vw,4.4rem)}}   /* desktop: 20% smaller than before */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* Site is white / black text everywhere. The overlay menu and the vendors
   sheet-veil are the only two elements that stay dark, by design. */
body{background:#fff;color:#000;font-family:var(--sans);font-weight:300;font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.loading,body.menu-open,body.is-single,body.sheet-open{overflow:hidden}
[hidden]{display:none!important}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
/* MENU / VENDORS / CLOSE never get a box: no v1 button hover fill (block pages), no outline on mouse click */
.side,.side:hover,.side:focus,.sheet .sheet-close,.sheet .sheet-close:hover{background:none!important;border:0!important;box-shadow:none!important}
.side:hover{color:#fff}
.sheet .sheet-close:hover{color:#000}
.side:focus:not(:focus-visible),.sheet-close:focus:not(:focus-visible){outline:none}

/* ---------- the wordmark: DEEA top-left, FLO bottom-right, pinned to the browser ----------
   white + difference = black over white panels, inverted over photos.
   Every word sits in a mask and rises into it: that is the "cutout". Hidden on
   single-post pages the two words step aside for BACK / VENDORS. */
.logo,.side{position:fixed;z-index:60;color:#fff;mix-blend-mode:difference}
.logo{font-family:var(--serif);font-weight:400;text-transform:uppercase;line-height:.8;font-size:var(--logo);visibility:hidden;transition:transform 1s var(--ease)}
body.logos-in .logo{visibility:visible}
.logo--a{top:calc(var(--edge) + env(safe-area-inset-top,0px));left:var(--edge);display:flex;align-items:center;gap:.28em}
/* the final logo is the intro logo, smaller, in the top-left corner: "&" in sans bold, words rise in one after another */
.logo--a .amp{font-family:var(--sans);font-weight:700;font-size:.42em;font-style:normal}
.logo--a .mask:nth-child(2) .rise{transition-delay:.08s}
.logo--a .mask:nth-child(3) .rise{transition-delay:.16s}
.logo--b{display:none!important}
/* logo centred at the top on every page */
.logo.logo--a{left:50%;transform:translateX(-50%)}
.logo--b{bottom:calc(var(--edge) - var(--logo)*.05 + env(safe-area-inset-bottom,0px));right:var(--edge)}
/* on single posts, nudge DEEA right so it doesn't collide with BACK */
/* and FLO left so it doesn't collide with VENDORS */
body.is-single .logo--b{transform:translateX(calc(clamp(2.4rem,3.4vw,3.4rem) * -1))}

.mask{display:block;overflow:hidden;padding:.05em .12em .22em .12em;margin:-.05em -.12em -.22em -.12em}
.rise{display:block;transform:translateY(160%);transition:transform .95s var(--ease)}
body.logos-in .logo .rise{transform:none}

/* first-load: DEEA & FLO centred, the "&" half the size, centred on the caps */
.intro-word{position:fixed;inset:0;z-index:61;display:flex;align-items:center;justify-content:center;gap:.28em;pointer-events:none;
  font-family:var(--serif);font-weight:400;text-transform:uppercase;line-height:.8;color:#fff;mix-blend-mode:difference;font-size:clamp(3rem,11vw,11rem);visibility:hidden}
.intro-word .rise{transition-duration:.8s}
.intro-word .amp{font-family:var(--sans);font-weight:700;font-size:.42em;font-style:normal}
.intro-word .mask:nth-child(2) .rise{transition-delay:.1s}
.intro-word .mask:nth-child(3) .rise{transition-delay:.2s}
body.word-in .intro-word{visibility:visible}
body.word-in .intro-word .rise{transform:none}
body.word-out .intro-word .rise{transform:translateY(-160%);transition-duration:.6s}
.intro-word.gone{display:none}



/* vertical labels (arrive together with the corner words) */
.side{font:700 var(--side-fs)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;writing-mode:vertical-rl;padding:.2rem;
  opacity:0;transition:opacity .8s ease .3s}
body.logos-in .side{opacity:1}
/* side labels: MENU / BACK start on DEEA's cap line, VENDORS ends on FLO's baseline (minus the label's own padding) */
.back{top:calc(env(safe-area-inset-top,0px) + var(--edge) - .2rem)}
.menu-btn{top:calc(env(safe-area-inset-top,0px) + var(--edge) - var(--logo)*.03 - .2rem - var(--menu-fs)*.14)}
/* home only: a white band at the top, logo and MENU both centred on it */
body:not(.is-single) .logo--a{top:calc(env(safe-area-inset-top,0px) + (var(--bar) - var(--logo)*.8)/2)}
body:not(.is-single) .menu-btn{top:calc(env(safe-area-inset-top,0px) + (var(--bar) - var(--logo)*.8)/2 - var(--logo)*.03 - .2rem - var(--menu-fs)*.14)}
@media(max-width:759px){   /* wedding page on mobile: the same white band */
  body.is-single .logo--a{top:calc(env(safe-area-inset-top,0px) + (var(--bar) - var(--logo)*.8)/2)}
  body.is-single .menu-btn{top:calc(env(safe-area-inset-top,0px) + (var(--bar) - var(--logo)*.8)/2 - var(--logo)*.03 - .2rem - var(--menu-fs)*.14)}
}
.menu-btn{right:calc(var(--edge) - .2rem)}
/* bigger invisible tap area around the thin vertical labels, so a tap never falls through to the post underneath */
.menu-btn,.back,.vendors,.sheet-close{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.menu-btn::before,.back::before,.vendors::before,.sheet-close::before{content:'';position:absolute;inset:-1.1rem -1.1rem -1.1rem -1.4rem}
.back{left:calc(var(--edge) - .2rem);transform:rotate(180deg);display:none}
.vendors{bottom:calc(var(--edge) - .2rem + env(safe-area-inset-bottom,0px));right:calc(var(--edge) - .2rem);display:none}
body.is-single .back,body.is-single .vendors{display:block}
body.menu-open .back,body.menu-open .vendors{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s}
/* CONTACT: bottom-right, same style as MENU (on wedding pages with vendors, VENDORS takes that corner) */
.contact-side{bottom:calc(var(--edge) - .2rem + env(safe-area-inset-bottom,0px));right:calc(var(--edge) - .2rem);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.contact-side::before{content:'';position:absolute;inset:-1.1rem -1.1rem -1.1rem -1.4rem}
body.is-single .contact-side{display:none}   /* not on wedding pages */
body.menu-open .contact-side,body.sheet-open .contact-side{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s}

/* ---------- page change: fade out on leave, fade up on arrival ---------- */
#db-main{min-height:100vh;transition:opacity .4s ease,transform .7s var(--ease),filter .5s ease}
body.is-home #db-main{min-height:0}   /* home: the footer follows the grid directly, no white gap when there are few weddings */
body.leaving #db-main{opacity:0;transform:translateY(-1rem)}
/* leaving a page: the logo, MENU / VENDORS and the footer fade out quickly with the content */
body.leaving .logo,body.leaving .side,body.leaving .foot{opacity:0!important;transition:opacity .3s ease!important}
body.arriving #db-main{opacity:0;transform:translateY(1.4rem);transition:none}
body.sheet-open #db-main{filter:blur(9px)}
/* vendors open: everything behind the sheet (photos, logo, labels) dims */
body::after{content:'';position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.28);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,visibility 0s .5s}
body.sheet-open::after{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s 0s}

/* ---------- home: edge-to-edge grid, symmetric, no gaps ---------- */
/* home: the grid starts at the very top (under DEEA) and runs edge to edge, no white above or at the sides */
body.is-home{margin:0!important;padding:0!important}
body.is-home .v2-main,body.is-home .view--home{margin:0!important;padding:0!important;max-width:none!important;border:0}
#grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;
  column-gap:2vw;row-gap:3vw;padding:var(--bar) 0 6vw;   /* collage runs to the screen edges */
  position:relative;width:100vw;max-width:none;margin:0 0 0 calc(50% - 50vw)}
.tile{position:relative;display:block;min-width:0;color:#fff;will-change:transform;container-type:inline-size}
@media(min-width:760px){
  /* desktop: 2 per row, big + small, alternating sides */
  .tile:nth-child(4n+1){grid-column:1/7;margin-left:var(--pad)}      /* big, left: lines up with the footer links */
  .tile:nth-child(4n+2){grid-column:8/12;margin-top:10vw}   /* small, lower */
  .tile:nth-child(4n+3){grid-column:2/6;margin-top:3vw}     /* small */
  .tile:nth-child(4n){grid-column:7/13;margin-right:var(--pad)}      /* big, right: same margin on the right */
}
@media(max-width:759px){
  #grid{column-gap:0;row-gap:18vw;padding:var(--bar) 0 10vw}   /* double space between weddings */
  /* mobile: one per row, pattern of 6 (widths as a share of the screen):
     1 big centred (90%), 2 flush left (65%), 3 centred (20% smaller: 72%),
     4 big centred (90%), 5 flush right (65%), 6 centred (72%), then again */
  .tile{grid-column:1/13}
  .tile:nth-child(6n+1),.tile:nth-child(6n+4){width:calc(100% - 2rem);justify-self:center}   /* big ones: 1rem white margin each side */
  .tile:nth-child(6n+2){width:65%;justify-self:start}   /* 20% larger than before */
  .tile:nth-child(6n+5){width:65%;justify-self:end}
  .tile:nth-child(6n+3),.tile:nth-child(6n){width:72%;justify-self:center}
}
body.intro #grid .tile{opacity:0}
/* offer intro: the page waits under the collage, then fades in as the photos land in place */
body.offer-intro #db-main{transition:opacity .9s ease}
body.offer-intro.intro #db-main,body.offer-intro.loading #db-main{opacity:0}
body.offer-intro.intro:not(.loading) #db-main{opacity:1}
.intro-clone{position:fixed;z-index:50;margin:0;object-fit:cover;pointer-events:none;will-change:transform;background:#eee}
/* no hover (caption, zoom) and no clicks on the tiles until the intro has finished */
body.intro #grid,body.loading #grid{pointer-events:none}
.media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#eee}
.slide img{transition:transform 1s var(--ease)}
.slide{position:absolute;inset:0;transform:translateY(100%);transition:transform .95s var(--ease);
  background:#e9e6e1}
.slide img,.ph img,.about-media img,.about-media video{width:100%;height:100%;object-fit:cover}
.slide.is-on{transform:none}
.slide.is-out{transform:translateY(-100%)}
/* rotating tiles: quick cross-fade between photos */
.slide,.slide.is-on,.slide.is-out{transform:none!important}
.slide{opacity:0;transition:opacity .35s ease!important}
.slide.is-on{opacity:1;z-index:1}
.slide.is-out{transition:opacity 0s .35s!important}   /* the old photo stays under the new one until it has faded in, so there's no dip */
.cap{position:absolute;z-index:2;left:clamp(.9rem,1.6vw,1.5rem);bottom:clamp(.9rem,1.6vw,1.4rem);display:flex;flex-direction:column;gap:.35rem;
  opacity:0;transform:translateY(.4rem);transition:opacity .5s ease,transform .6s var(--ease);pointer-events:none}
.cap b{font:normal 400 clamp(1.5rem,2.1vw,2.1rem)/1.05 var(--serif);text-transform:none;letter-spacing:0}
.cap span{font:700 .68rem/1 var(--sans);text-transform:uppercase;letter-spacing:.04em}
/* mobile: title + location on one line right under the photo, on the left (Didot title, small sans location), sized to the tile */
@media(max-width:759px){
  .cap{position:static;flex-direction:row;align-items:baseline;gap:.55em;margin-top:.6rem;color:#000;opacity:1;transform:none;
    white-space:nowrap;overflow:hidden;transition:opacity .6s ease}
  .cap b{font-size:clamp(.95rem,6.3cqi,1.22rem);flex:none}   /* ~20% larger */
  .cap span{font-size:clamp(.5rem,3.1cqi,.62rem);font-weight:700;letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;min-width:0}
  body.intro .cap,body.loading .cap{opacity:0}   /* the titles appear once the intro has settled */
  .tile:nth-child(6n+2) .cap{padding-left:4vw}   /* photo flush with the left edge: keep the title off the edge */
}
/* desktop: title + location under the photo on the left too, always visible */
@media(min-width:760px){
  .cap{position:static;flex-direction:row;align-items:baseline;gap:.6em;margin-top:.8rem;color:#000;opacity:1;transform:none;
    white-space:nowrap;overflow:hidden;transition:opacity .6s ease}
  .cap b{font-size:clamp(1rem,4.2cqi,1.45rem);flex:none}
  .cap span{font-size:clamp(.58rem,2.2cqi,.72rem);font-weight:700;letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;min-width:0}
  body.intro .cap,body.loading .cap{opacity:0}
}
@media(hover:hover){.tile:hover .slide img{transform:scale(1.04)}}

/* ---------- single: split hero, then a horizontal strip with white margins between frames ---------- */
.hs{height:100vh;height:100dvh;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:none;background:#fff;color:#000;cursor:default;-webkit-overflow-scrolling:touch}
.hs::-webkit-scrollbar{display:none}
.hs.drag{cursor:default;user-select:none}   /* normal arrow, dragging still works */
.hero-text{flex:none;width:50vw;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--pad);background:#fff;color:#000}
.venue{font:600 clamp(.9rem,1.1vw,1.15rem)/1.05 var(--sans);text-transform:uppercase;margin-bottom:.9rem}
.names{font:normal 400 clamp(3rem,7vw,6.5rem)/1 var(--serif);letter-spacing:-.01em;color:#000}
.names .amp{font-family:var(--sans);font-weight:700;font-style:normal;font-size:.42em;margin-left:.12em}   /* same "&" as the logo */
.names .n2{display:block}
.short-intro{max-width:34rem;margin-top:1.6rem;font:400 .92rem/1.7 var(--sans);color:#555}
.intro-below{display:none}   /* mobile only */
.pane{flex:none;height:100%}
:root{--pane-p:clamp(3.4rem,7vw,5.6rem)}   /* white above / below the gallery photos (desktop) */
.pane:not(.hero-photo){padding:var(--pane-p) clamp(1.1rem,2.25vw,1.8rem)}   /* desktop: double white above and below; sides unchanged (mobile overrides below) */
@media(min-width:760px){.hero-photo + .pane,.hero-photo + .intro-below + .pane{padding-left:clamp(4.4rem,9vw,7.2rem)}}   /* first photo after the hero: double gap on the left */
.ph{position:relative;overflow:hidden;height:100%;margin:0;background:#e9e6e1}
.pane:not(.hero-photo) > .ph{aspect-ratio:var(--r)}
.hero-photo.ph{width:50vw;aspect-ratio:auto}
.end{flex:none;width:min(24rem,80vw);height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(1.5rem,4vw,4rem);background:#fff;color:#000}
.end small{display:block;margin-bottom:1rem;color:#000;font:600 .85rem/1 var(--sans);text-transform:uppercase;letter-spacing:.08em}
.end a{font:italic 400 clamp(1.7rem,3vw,2.3rem)/1.15 var(--serif);display:inline-block;align-self:flex-start}
.scroll-cue{display:none}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}
@media(max-width:759px){
  /* mobile: the single post scrolls vertically, photos stacked full width */
  .hs{flex-direction:column;overflow-x:hidden;overflow-y:auto;cursor:auto}
  /* the white band is part of the scrolling gallery, so it scrolls away with the page (nothing stays fixed) */
  body.is-single .hs{height:100vh;height:100dvh;padding-top:var(--bar)}
  body.is-single .hero-text{top:var(--bar)}
  /* MENU and VENDORS centred in the 2rem white strip at the right of the photos */
  .hero-text,.hero-photo.ph{width:100%;height:calc(100svh - var(--bar));flex:none}
  /* hero: the text sits on top of the full-screen first photo, white, over a soft dark veil */
  .hs{position:relative}
  .hero-text{position:absolute;top:0;left:0;z-index:2;background:linear-gradient(to bottom,rgba(0,0,0,.28),rgba(0,0,0,.12) 40%,rgba(0,0,0,.38));color:#fff;padding:0 2.6rem}
  .hero-text .venue,.hero-text .names{color:#fff}
  .hero-text .names{font-size:clamp(2.8rem,13vw,4.2rem)}
  /* mobile: only location + names over the photo, placed low (clear of faces); the intro moves under the photo on white */
  .hero-text{justify-content:flex-end;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8.5rem)}
  .hero-text .short-intro{display:none}
  .intro-below{display:block;width:100%;flex:none;padding:2.4rem 1rem 1rem;background:#fff}
  .intro-below p{max-width:30rem;margin:0 auto;text-align:center;font:400 .95rem/1.75 var(--sans);color:#555}
  .scroll-cue{display:flex;position:absolute;left:50%;bottom:calc(2.2rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);flex-direction:column;align-items:center;gap:1rem;
    font:500 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap}
  .scroll-cue i{display:block;width:1px;height:3rem;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
  .scroll-cue i::after{content:'';position:absolute;left:0;top:0;width:100%;height:40%;background:#fff;animation:cue 1.8s var(--ease) infinite}
  /* even white: 2rem at the sides = the 2rem between two photos; the first photo after the hero gets 2rem above */
  .pane:not(.hero-photo){width:100%;height:auto;padding:.5rem 1rem}   /* 16px at the sides and 16px between photos */
  .hero-photo + .pane,.intro-below + .pane{padding-top:1rem}
  .pane:not(.hero-photo) > .ph{width:100%;height:auto}
  .end{width:100%;height:auto;padding:5rem 1rem 7rem}   /* lines up with the photos */
}

/* ---------- vendors sheet: full-width panel that rises from the bottom ---------- */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;color:#000;text-align:center;
  padding:clamp(3rem,7vw,5rem) var(--pad) calc(3rem + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .7s var(--ease);max-height:70vh;overflow-y:auto}
body.sheet-open .sheet{transform:none}
.sheet h2{font:700 clamp(1.8rem,5vw,3rem)/1.1 var(--sans);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:1.8rem}
.sheet dl{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2.4rem;font-size:.95rem}
.sheet dt{color:var(--mute);text-transform:uppercase;letter-spacing:.07em;font-size:.72rem;display:block;margin-bottom:.15rem}
.sheet dd{font-weight:500}
/* CLOSE sits inside the sheet, top right */
.sheet .sheet-close{position:absolute;z-index:1;top:clamp(1.1rem,2.4vw,1.8rem);right:var(--pad);margin:0;
  font:700 .85rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;writing-mode:horizontal-tb;padding:.6rem;color:#000;
  transition:opacity .3s ease}
.sheet .sheet-close:hover,.sheet .sheet-close:focus-visible{opacity:.5}
/* while the vendors sheet is open, CLOSE takes MENU's spot: hide MENU and VENDORS underneath */
body.sheet-open .menu-btn,body.sheet-open .vendors{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s}

/* ---------- about / contact ---------- */
/* note: WordPress also puts the class "page" on <body> for every page, so these rules target only our .view.page section */
.view.page{padding:calc(var(--bar) + clamp(.8rem,2vw,1.6rem)) var(--pad) 6rem}   /* content starts under the logo band */
body.page{padding-top:0!important}
/* offer pages (v1 blocks): smaller page title, e.g. "Weddings 2027" */
body:not(.is-about) .v2-blocks .db-page-header__title{font-size:clamp(1.7rem,3vw,2.2rem)!important}   /* About keeps its title size */
/* secondary pages: once you scroll, the logo words slide up out of their masks (like the intro exit)
   and rise back in when you return to the top */
body.logos-in.logo-away .logo--a .rise{transform:translateY(-160%);transition-duration:.7s}
body.logo-away .logo--a{pointer-events:none}
/* offer pages: the 3-photo banner runs edge to edge (no side padding) */
.v2-blocks .db-image-section--three_column{padding-left:0!important;padding-right:0!important}
.v2-blocks .db-image-section--three_column .db-image-section__grid{max-width:none!important;width:100%;margin-left:0;margin-right:0}
/* pages built with v1 blocks: half the v1 top spacing too */
.v2-blocks > *:first-child,.v2-blocks .db-page-header{padding-top:calc(var(--bar) + .8rem)!important}
/* About: half the gap between the logo and the page title */
.view.page.page--about,body.is-about .view.page,body.is-about .v2-blocks > *:first-child,body.is-about .v2-blocks .db-page-header{
  padding-top:calc((var(--bar) + var(--logo)*.8)/2 + clamp(1.6rem,2.35vw,1.95rem))!important}   /* title ~30% further from the logo than before */
.view.page.page--about h1,body.is-about .view.page h1,body.is-about .db-page-header__title{margin-top:0!important}
@media(max-width:759px){   /* mobile: more room between the logo and the About title */
  .view.page.page--about,body.is-about .view.page,body.is-about .v2-blocks > *:first-child,body.is-about .v2-blocks .db-page-header{
    padding-top:calc((var(--bar) + var(--logo)*.8)/2 + 2.8rem)!important}
}
.view.page h1{font:italic 400 clamp(2.6rem,6vw,4.6rem)/1.05 var(--serif);margin-bottom:1.6rem;color:#000}
.about-row{display:grid;gap:var(--pad);grid-template-columns:1fr}
.about-row + .about-row{margin-top:clamp(3rem,8vw,7rem)}
.about-row p{max-width:32rem;margin-bottom:1.2rem}
.about-text > :last-child{margin-bottom:0}
.about-row h2{font:italic 400 clamp(1.8rem,3.4vw,2.6rem)/1.1 var(--serif);margin-bottom:1.1rem;color:#000}
.about-media{position:relative;overflow:hidden;background:#e9e6e1}
.video-ph{aspect-ratio:3/4}
.photo-ph{aspect-ratio:4/5}
/* mobile order: video, story, photo, approach (the photo jumps above its text) */
@media(max-width:859px){.about-row .photo-ph{order:-1}}
@media(min-width:860px){.about-row{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,6vw,5rem)}}

.contact{display:grid;gap:clamp(2.5rem,6vw,6rem);grid-template-columns:1fr}
.big-link{display:block;font:italic 400 clamp(1.6rem,3.6vw,2.6rem)/1.2 var(--serif);padding:.5rem 0;border-bottom:1px solid var(--line);margin-bottom:.5rem;overflow-wrap:anywhere}
.contact .note{color:var(--mute);margin:1.4rem 0 0;max-width:26rem}
.form label{display:block;color:var(--mute);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-top:1.4rem}
.form input,.form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:#000;font:inherit;padding:.6rem 0;border-radius:0}
.form input:focus,.form textarea:focus{outline:none;border-color:#000}
.form .row2{display:grid;gap:var(--pad);grid-template-columns:1fr}
.btn{margin-top:2rem;padding:.9rem 2.2rem;border:1px solid #000;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;transition:background .4s ease,color .4s ease}
.btn:hover,.btn:focus-visible{background:#000;color:#fff}
@media(min-width:860px){
  .contact{grid-template-columns:1fr 1fr}
  .form .row2{grid-template-columns:1fr 1fr}
}

/* ---------- footer: right-aligned menu under FLO, white / black, ~30% shorter ---------- */
/* wedding page: the footer sits at the end of the gallery, on mobile only */
body.is-single .foot{display:none}
@media(max-width:759px){body.is-single .foot.foot--gallery{display:flex;flex:none;width:100%;margin:0!important}}
.foot{background:#fff;color:#000;text-align:left;box-sizing:border-box;display:flex;align-items:center;
  /* as tall as the pinned CONTACT label (≈ 5.5em of its font + padding) with the same --edge gap above and below,
     so at the end of the page the links sit on the label's centre line */
  height:calc(var(--side-fs)*5.5 + 2*var(--edge) + env(safe-area-inset-bottom,0px));
  padding:0 var(--pad) env(safe-area-inset-bottom,0px)}
.foot ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:1rem clamp(1.8rem,3.5vw,3.2rem)}
.foot li{font:400 clamp(1.14rem,1.38vw,1.38rem)/1 var(--serif);letter-spacing:.06em;text-transform:uppercase}   /* Didot caps, 20% larger */
.foot a{transition:opacity .45s ease}
.foot ul:hover a{opacity:.35}
.foot ul a:hover,.foot ul a:focus-visible{opacity:1}
/* mobile: stack the links on the left so they never run into the pinned FLO */
@media(max-width:759px){.foot ul{display:grid;grid-template-columns:auto auto;justify-content:start;gap:.7rem 2.2rem}.foot li{font-size:1.02rem}}   /* mobile: 2 rows of 2 */
/* mobile: footer hugs the links (less white on top), links and CONTACT share the same centre line */
@media(max-width:759px){.foot{height:auto;padding:1.5rem var(--pad) calc(1.5rem + env(safe-area-inset-bottom,0px))}}
/* footer runs edge to edge and to the very bottom, whatever wraps it */
html,body{margin-bottom:0!important;padding-bottom:0!important}
body{padding-left:0!important;padding-right:0!important;overflow-x:clip}   /* 100vw blocks never cause a sideways scroll */
.foot{position:relative;width:100vw;max-width:none!important;margin:0 0 0 calc(50% - 50vw)!important;border-radius:0}
/* footer: very light neutral grey, links on the left, copyright far right on the same line, all centred vertically */
.foot{background:#fff;justify-content:space-between;align-items:center;gap:1.5rem}
.foot-copy{margin:0;font:400 .7rem/1 var(--sans);letter-spacing:.04em;color:#000;white-space:nowrap}
/* thin line across the full width between the page and the footer */
.foot{border-top:1px solid rgba(0,0,0,.14)}
body.foot-dark .foot{border-top-color:rgba(255,255,255,.16)}
@media(max-width:759px){
  .foot{padding:1.6rem var(--pad) calc(1.6rem + env(safe-area-inset-bottom,0px))!important;flex-direction:column;align-items:flex-start;gap:1.1rem}
  .foot-copy{font-size:.62rem;line-height:1.1;color:#000}   /* under the links, left, black */
}
body.foot-dark .foot-copy{color:#fff}
/* Contact + About: black footer, white text */
body.foot-dark .foot{background:#000;color:#fff}
body.foot-dark .foot-follow{border-color:#fff}
/* footer stays hidden during the home intro, then fades in */
.foot{transition:opacity .6s ease}
body.intro .foot,body.loading .foot{opacity:0;visibility:hidden}
/* Instagram follow button under the footer links */
.foot-follow{display:inline-flex;align-items:center;gap:.7rem;margin-top:clamp(1.8rem,3.5vw,2.6rem);padding:.85rem 1.6rem;border:1px solid #000;
  font:500 .8rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.foot-follow svg{width:1rem;height:1rem;flex:none}
.foot .foot-follow{transition:background-color .45s ease,color .45s ease,border-color .45s ease}   /* fills in with a fade (beats the .foot a opacity-only transition) */
.foot-follow:hover,.foot-follow:focus-visible{background:#000;color:#fff}
body.foot-dark .foot-follow:hover,body.foot-dark .foot-follow:focus-visible{background:#fff;color:#000}
/* desktop: follow button on the same line as the links, at the far right (mobile keeps it under the links) */


/* ---------- overlay menu: CONTACT + small Instagram / mail on the left, PORTFOLIO + ABOUT US lower right ---------- */
.menu{position:fixed;inset:0;z-index:40;background:var(--ink);color:var(--paper);
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease),visibility 0s .8s}
.menu.open{clip-path:inset(0);visibility:visible;transition:clip-path .8s var(--ease),visibility 0s 0s}
.menu-group{position:absolute;padding:0 var(--pad)}
.menu-group ul{list-style:none}
.menu-group ul a{display:block;overflow:hidden;font:italic 400 clamp(2.3rem,11vw,5rem)/1.02 var(--serif);text-transform:none;letter-spacing:0;color:var(--paper);
  transition:opacity .4s ease;
  padding:0 0 .12em .04em;margin:0 0 -.12em -.04em}
.menu-group a span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease)}
.menu.open .menu-group a span{transform:none}
.menu:has(a:hover) a:not(:hover){opacity:.35}   /* the hovered link stays bright, the rest dim */
/* left block starts under DEEA */
.menu-left{left:0;top:calc(env(safe-area-inset-top,0px) + var(--edge) + var(--logo)*.8 + clamp(3rem,10vh,6rem));padding-right:calc(var(--pad) + 2rem)}
.menu-sub{display:flex;flex-wrap:nowrap;align-items:baseline;gap:1.2rem;margin-top:.9rem;white-space:nowrap}
.menu-sub a{display:block;overflow:hidden;font:700 clamp(.72rem,3.1vw,.95rem)/1.1 var(--sans);text-transform:uppercase;letter-spacing:.02em;color:var(--paper);transition:opacity .4s ease}
.menu.open .menu-sub a span{transition-delay:.12s}
/* right block sits lower, well above FLO */
.menu-right{right:0;text-align:right;bottom:calc(env(safe-area-inset-bottom,0px) + var(--edge) + var(--logo)*.8 + clamp(4rem,14vh,9rem))}
.menu-right ul{display:flex;flex-direction:column;align-items:flex-end}
.menu.open .menu-right li:nth-child(1) a span{transition-delay:.1s}
.menu.open .menu-right li:nth-child(2) a span{transition-delay:.18s}
/* menu panel (desktop and mobile): white, slides in from the right, the rest of the site dims and blurs like with Vendors */
  .menu{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    left:auto;right:0;width:26.667vw;z-index:70;background:#fff;color:#000;padding:0 clamp(2rem,3.5vw,3.5rem);
    clip-path:none;transform:translateX(100%);transition:transform .8s var(--ease),visibility 0s .8s;
    box-shadow:-1px 0 0 rgba(0,0,0,.06)}
  .menu.open{clip-path:none;transform:none;transition:transform .8s var(--ease),visibility 0s 0s}
  .menu-group ul a,.menu-sub a{color:#000}
  body.menu-open #db-main{filter:blur(9px)}
  body.menu-open::after{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s 0s}
  body.menu-open .menu-btn{z-index:75}      /* CLOSE stays on top of the panel */
  .menu-group{position:static;padding:0}
  .menu-right{order:1;text-align:left}
  .menu-right ul{align-items:flex-start}
  .menu-left{order:2;padding-right:0}
  .menu.open .menu-left li a span{transition-delay:.26s}
  .menu.open .menu-sub a span{transition-delay:.32s}
@media(max-width:859px){.menu{width:86vw;padding:0 calc(var(--pad) + .6rem)}}   /* phone: a third would be too narrow */


/* ---------- WordPress bits ---------- */
.db-skip-link{position:absolute!important;left:-9999px}
.db-skip-link:focus{left:1rem;top:1rem;z-index:100;background:#fff;color:#000;padding:.6rem 1rem}
/* pages built with v1 blocks keep the v1 body typography */
body.v2-block-page{font-weight:400;line-height:1.75}
.v2-blocks{padding-bottom:4rem}

/* ---------- contact form (v1 AJAX form, v2 look) ---------- */
.db-contact-form-wrap{max-width:none}
.db-contact-form__row{margin:0}
.db-contact-form label{display:block;color:var(--mute);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-top:1.4rem}
.db-contact-form input,.db-contact-form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:#000;font:inherit;padding:.6rem 0;border-radius:0}
.db-contact-form input:focus,.db-contact-form textarea:focus{outline:none;border-color:#000}
.db-contact-form__row--split{display:grid;gap:var(--pad);grid-template-columns:1fr}
@media(min-width:860px){.db-contact-form__row--split{grid-template-columns:1fr 1fr}}
.db-contact-form__hp{position:absolute!important;left:-9999px}
.db-contact-form__submit{margin-top:2rem;padding:.9rem 2.2rem;border:1px solid #000;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;transition:background .4s ease,color .4s ease}
.db-contact-form__submit:hover,.db-contact-form__submit:focus-visible{background:#000;color:#fff}
.db-contact-form__submit:disabled{opacity:.5;cursor:not-allowed}
.db-contact-form__error{color:#8a2b20;margin-top:1rem}
.db-contact-form__success p{font:italic 400 clamp(1.4rem,3vw,2rem)/1.3 var(--serif);padding-top:1.4rem}
.menu-links,.foot-links{list-style:none}
.foot-links{display:flex;flex-wrap:wrap;gap:1rem clamp(1.8rem,3.5vw,3.2rem)}
@media(max-width:759px){.foot-links{flex-direction:column;align-items:flex-start;gap:1.1rem}}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{padding:1rem 0;border-bottom:1px solid var(--line);font-weight:400}
.form-msg--err{color:#8a2b20}
.prose{max-width:38rem}
.prose p,.prose ul,.prose ol{margin-bottom:1.2rem}
.prose a{text-decoration:underline;text-underline-offset:.2em}
.prose h2{font:italic 400 clamp(1.6rem,3vw,2.2rem)/1.15 var(--serif);margin:2rem 0 .8rem}
.empty p{color:var(--mute);max-width:30rem}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
/* keep the pinned wordmark clear of the WordPress admin bar when logged in */
.admin-bar .logo--a,.admin-bar .menu-btn,.admin-bar .back,.admin-bar .sheet-close{margin-top:32px}
@media(max-width:782px){.admin-bar .logo--a,.admin-bar .menu-btn,.admin-bar .back,.admin-bar .sheet-close{margin-top:46px}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- single: preload loader ----------
   While the gallery loads the hero photo is darkened and a percentage counts up in its centre;
   when everything is in, the veil lifts and the counter fades. */
.hero-photo::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .9s ease;pointer-events:none;z-index:1}
body.preloading .hero-photo::after{opacity:1}
.loader{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);color:#fff;font:500 clamp(1.7rem,3.2vw,3.1rem)/1 var(--sans);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .6s ease;pointer-events:none;white-space:nowrap}
body.preloading .loader{opacity:1}
@media(max-width:759px){
  .hero-text{transition:opacity .8s ease .15s}
  body.preloading .hero-text{opacity:0}
}

/* ---------- mobile full-screen gallery (tap a photo on a wedding page) ----------
   white, quiet: a counter and CLOSE on top, one photo per screen, native swipe with snapping */
.lb{position:fixed;inset:0;z-index:90;background:#fff;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.lb.open{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s 0s}
.lb-bar{flex:none;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 1rem) 1.25rem 1rem;
  font:500 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#000}
.lb-count{font-variant-numeric:tabular-nums}
.lb-close{font:700 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#000;padding:.6rem;margin:-.6rem;background:none!important;border:0}
.lb-track{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{flex:none;width:100%;height:100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;
  padding:0 0 calc(env(safe-area-inset-bottom,0px) + 3rem)}
.lb-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
body.lb-open{overflow:hidden}
body.lb-open .logo,body.lb-open .side{opacity:0!important;pointer-events:none}
.pane:not(.hero-photo) img{cursor:zoom-in}
/* desktop: more white around the photo, left / right half of the screen steps back / forward */
@media(min-width:760px){
  .lb-bar{padding:1.6rem 2rem}
  .lb-bar,.lb-close{font-size:.8rem}
  .lb-slide{padding:0 clamp(2rem,6vw,7rem) 3.5rem}
  .lb-track,.lb-slide img{cursor:default}   /* normal arrow; the hand only on the arrows and CLOSE */
  .lb-track{overflow-x:hidden;scroll-snap-type:none}   /* desktop: photos swap instantly (arrows, keys, wheel), no sliding */
}

/* mobile: offers and About have a 2rem white strip at the sides; MENU sits centred in it (as on wedding pages) */
@media(max-width:759px){
  .view.page.page--about,.view.page.page--contact{padding-left:1rem;padding-right:1rem}
  .v2-blocks > *{padding-left:1rem!important;padding-right:1rem!important}   /* offers: same 16px sides (the 3-photo banner stays edge to edge) */
  /* footer text lines up with the photos / text (2rem) on these pages and on wedding pages */
  /* footer: same alignment on every page as on the home page (16px) */
}

/* MENU label sits in a mask like the logo words */
.mb-mask{display:block;overflow:hidden}
.mb-rise{display:block;transition:transform .95s var(--ease)}
/* mobile: MENU hides on scroll down together with the logo, and comes back on scroll up */
@media(max-width:759px){
  /* same mask slide and timing as the logo: out upwards (.7s), back in from below (.95s) */
  body.logo-away .menu-btn{pointer-events:none}
  body.logos-in.logo-away .menu-btn .mb-rise{transform:translateY(-160%);transition-duration:.7s}
}

/* coming back on scroll up: logo and MENU rise in quickly */
body.logo-back .logo--a .rise,body.logo-back .menu-btn .mb-rise{transition-duration:.45s!important}
body.logo-back .logo--a .mask:nth-child(2) .rise{transition-delay:.04s}
body.logo-back .logo--a .mask:nth-child(3) .rise{transition-delay:.08s}

/* MENU / CLOSE: horizontal, letters a little closer (the band keeps its height) */
.menu-btn{writing-mode:horizontal-tb;letter-spacing:.02em;font-size:var(--menu-fs)}
:root{--menu-fs:var(--side-fs)}
@media(max-width:759px){:root{--menu-fs:calc(var(--side-fs)*.7)}}   /* mobile: 30% smaller */

/* desktop: VENDORS horizontal too, same lettering as MENU */
@media(min-width:760px){.vendors{writing-mode:horizontal-tb;letter-spacing:.02em}}

/* desktop wedding page: VENDORS starts centred under the title, near the bottom of the window;
   once the strip scrolls it slides out of its mask and rises back in, in the bottom-right corner */
@media(min-width:760px){
  body.is-single.vendors-start .vendors{right:auto;left:25vw;transform:translateX(-50%);bottom:calc(var(--edge) + 1rem + env(safe-area-inset-bottom,0px))}
  body.start-hide .vendors .mb-rise{transform:translateY(-160%);transition-duration:.6s}
  /* logo: not shown at first; it rises in (centred on the page) once the strip scrolls, and leaves again at the start */
  body.is-single.logos-in.strip-start .logo--a .rise{transform:translateY(160%)}
  body.is-single.strip-start .logo--a{pointer-events:none}
}

/* desktop menu panel is 20% narrower: type scales with it, the small links may wrap */
@media(min-width:860px){
  .menu-group ul a{font-size:clamp(2rem,3.4vw,4.2rem)}
  .menu-sub{flex-wrap:wrap;white-space:normal;row-gap:.6rem}
}

/* BACK on wedding pages: top-left, horizontal, same size and line as MENU */
.side.back{writing-mode:horizontal-tb;transform:none;letter-spacing:.02em;font-size:var(--menu-fs);
  top:calc(env(safe-area-inset-top,0px) + var(--edge) - var(--logo)*.03 - .2rem - var(--menu-fs)*.14)}
@media(max-width:759px){
  body.is-single .side.back{top:calc(env(safe-area-inset-top,0px) + (var(--bar) - var(--logo)*.8)/2 - var(--logo)*.03 - .2rem - var(--menu-fs)*.14)}
  body.logo-away .back{pointer-events:none}
  body.logos-in.logo-away .back .mb-rise{transform:translateY(-160%);transition-duration:.7s}
}
body.logo-back .back .mb-rise{transition-duration:.45s!important}

/* desktop: thin full-width line under the header band (logo + MENU), like the one above the footer; scrolls with the page */
@media(min-width:760px){
  body:not(.is-single) #db-main{position:relative}
  body:not(.is-single) #db-main::before{content:'';position:absolute;left:0;right:0;z-index:1;pointer-events:none;
    top:var(--bar);border-top:1px solid rgba(0,0,0,.14);transition:opacity .6s ease}
  body.intro #db-main::before,body.loading #db-main::before,body.leaving #db-main::before{opacity:0}
  /* white space under the line, so photos and titles never touch it */
  #grid{padding-top:calc(var(--bar) + clamp(1.6rem,2.4vw,2.6rem))}
  .view.page,.view.page.page--about,body.is-about .view.page,
  .v2-blocks > *:first-child,.v2-blocks .db-page-header,body.is-about .v2-blocks > *:first-child,body.is-about .v2-blocks .db-page-header{
    padding-top:calc(var(--bar) + clamp(1.6rem,2.4vw,2.6rem))!important}
}

/* desktop wedding page: BACK and MENU centred on the white strip above the photos,
   VENDORS (once it has moved to the corner) centred on the white strip below them */
@media(min-width:760px){
  body.is-single .menu-btn,body.is-single .side.back{top:calc(var(--pane-p)/2 - (var(--menu-fs) + .4rem)/2)}
  body.is-single:not(.vendors-start) .vendors{bottom:calc(var(--pane-p)/2 - (var(--side-fs) + .4rem)/2)}
}

/* full-screen gallery: thin arrows left / right (desktop) */
.lb-arrow{display:none}
@media(min-width:760px){
  .lb-arrow{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;z-index:2;width:4.5rem;height:4.5rem;margin-top:-2.25rem;
    padding:0;background:none!important;border:0;color:#000;cursor:pointer;transition:opacity .3s ease}
  .lb-arrow svg{width:2.6rem;height:2.6rem;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
  .lb-prev{left:clamp(.5rem,1.5vw,1.5rem)}
  .lb-next{right:clamp(.5rem,1.5vw,1.5rem)}
  .lb-arrow:hover,.lb-arrow:focus-visible{opacity:.45}
  .lb.lb-first .lb-prev,.lb.lb-last .lb-next{opacity:0;pointer-events:none}
}

/* full-screen gallery: always the normal arrow cursor (overrides anything a plugin or an older cached file might set);
   only the arrows and CLOSE show the hand */
.lb,.lb *{cursor:default!important}
.lb .lb-arrow,.lb .lb-arrow *,.lb .lb-close{cursor:pointer!important}

/* full-screen gallery on desktop: a fixed stage with two stacked images (instant swap, no white flash) */
.lb-stage{display:none}
@media(min-width:760px){
  .lb .lb-track{display:none}
  .lb-stage{display:block;flex:1;position:relative;margin:0 clamp(2rem,6vw,7rem) 3.5rem}
  .lb-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;visibility:hidden}
  .lb-pic.on{visibility:visible}
}
.lb .lb-arrow:focus,.lb .lb-arrow:focus-visible,.lb .lb-close:focus{outline:none}   /* no box around the arrows after a click */

/* desktop: everything at the top a little smaller (about 15%): corner logo, intro logo, MENU / BACK / VENDORS, menu links */
@media(min-width:760px){
  :root{--logo:clamp(1.05rem,3.75vw,3.75rem);--side-fs:clamp(.75rem,.9vw,.95rem)}
  .intro-word{font-size:clamp(2.6rem,9.35vw,9.35rem)}
  .menu-group ul a{font-size:clamp(1.7rem,2.9vw,3.6rem)}
  .menu-sub a{font-size:clamp(.66rem,.75vw,.82rem)}
}