/* The Album wall (#work) and its viewer — see dv3-work.js. Builds on album.css's toolbar,
   tabs and lightbox shell. Pieces keep their own shape (portrait cards, tall phone invites,
   films) in a masonry, rather than being cropped to one ratio. */
.filt__n{font-weight:500; color:var(--gold-ink); margin-left:4px; letter-spacing:.06em;}

/* the wall runs wider than the reading column — it is pictures, not prose */
#view-work .a-body{max-width:1480px;}
.w-grid{display:flex; justify-content:center; align-items:flex-start; gap:22px; padding:30px 0 0;}
/* every column is a quarter (or a fifth, a third…) of the full width, even when fewer are filled */
.w-col{flex:0 0 calc((100% - (var(--cols) - 1) * 22px) / var(--cols)); min-width:0;}
.w-piece{
  display:block; width:100%; margin:0 0 22px;
  background:var(--paper); border:1px solid var(--gold-tint); padding:10px 10px 14px;
  text-align:left; color:inherit; box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.w-piece:hover{transform:translateY(-2px); box-shadow:var(--shadow-gold);}
.w-piece:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.w-piece__img{position:relative; display:block; overflow:hidden; background:var(--ivory-shade);}
.w-piece__img img, .w-piece__live{display:block; width:100%; height:100%; object-fit:cover;}
.w-piece__live{position:absolute; inset:0;}
.w-piece__cap{display:block; margin-top:10px; padding:0 4px;}
.w-piece__type{display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gold-ink);}
.w-piece__who{display:block; font-family:var(--font-script); font-size:28px; line-height:1; color:var(--maroon); margin-top:5px;} /* 22 to 28px, 5 Nov */

/* films carry a play mark + running time; planners say how many pages they hold */
.w-badge{
  position:absolute; left:10px; bottom:10px; z-index:1;
  display:inline-flex; align-items:center; gap:7px; padding:6px 10px 6px 8px; border-radius:999px;
  background:rgba(61,15,21,.8); color:var(--champagne);
  font-size:10px; letter-spacing:.12em; font-weight:600;
}
.w-badge i{width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent var(--champagne);}
.w-badge--pages{padding-left:10px; text-transform:uppercase;}

/* viewer: a three-row grid. The close button has the top row, the piece gets all the room
   left in the middle, and the counter, caption and button sit in their own row below it, so
   no text ever lands on the piece, whatever its shape or the screen's size. On a desktop the
   arrows have their own columns either side; on a phone they flank the counter. The frame is
   a size container, so images, films and planner pages all fit it exactly. */
.lb{
  display:grid; padding:12px 18px 20px;
  grid-template-columns:56px minmax(0,1fr) 56px; column-gap:14px;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"top top top" "prev frame next" "meta meta meta";
  align-items:center; justify-items:center;
}
.lb:focus{outline:none;}
.lb__close{position:static; grid-area:top; justify-self:end; min-height:44px; padding:0 6px;}
.lb__nav, .lb__nav.prev, .lb__nav.next{position:relative; top:auto; left:auto; right:auto; transform:none;}
.lb__nav{grid-area:prev;}
.lb__nav.next{grid-area:next;}
.lb__frame{
  grid-area:frame; width:100%; height:100%; max-width:none; max-height:none; min-height:0;
  display:flex; align-items:center; justify-content:center; container-type:size;
}
.lb__frame img{max-width:100cqw; max-height:100cqh;}
.lb__frame video{display:block; max-width:100cqw; max-height:100cqh; border-radius:2px; box-shadow:var(--shadow-lg); background:#000;}
.lb__frame [hidden]{display:none !important;}
.lb__pages{
  display:flex; gap:16px; max-width:100cqw; height:100cqh; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding-bottom:10px;
  scrollbar-color:var(--gold-soft) transparent;
}
.lb__pages{position:relative; align-items:center; scroll-snap-type:x proximity; scroll-padding-inline:0;}
.lb__pages img{height:auto; width:auto; max-height:calc(100cqh - 10px); max-width:100cqw; flex:none; scroll-snap-align:start; border-radius:2px; box-shadow:var(--shadow-lg); user-select:none;}

/* a set of pages: which pages are in view, and a thin bar for where the strip has got to */
.lb__pinfo{display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:12px;}
.lb__pinfo[hidden]{display:none;}
.lb__pinfo-txt{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--champagne); font-variant-numeric:tabular-nums;}
.lb__pinfo-track{position:relative; display:block; width:min(220px,60%); height:2px; border-radius:2px; background:rgba(255,250,241,.18); overflow:hidden;}
.lb__pinfo-bar{position:absolute; top:0; bottom:0; left:0; width:100%; border-radius:2px; background:var(--gold-soft); transition:left .2s linear, width .2s linear;}
.lb__pinfo.is-all .lb__pinfo-track{display:none;}
/* the arrows say when the next press leaves the set for the next piece */
.lb__nav::after{
  content:attr(data-hint); position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  width:min-content; text-align:center; line-height:1.35; font-size:8px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--gold-soft); opacity:0; transition:opacity var(--dur-base) var(--ease-soft); pointer-events:none;
}
.lb__nav.is-onward::after{opacity:1;}
.lb__nav:disabled{opacity:.3; cursor:default;}
.lb__meta{position:static; grid-area:meta; width:100%; padding:16px 0 0;}
@media (max-width:600px){
  .lb{
    padding:6px 10px 16px; column-gap:8px;
    grid-template-columns:44px minmax(0,1fr) 44px;
    grid-template-areas:"top top top" "frame frame frame" "prev meta next";
  }
  .lb__nav{align-self:start; margin-top:12px;}
  .lb__nav.prev, .lb__nav.next{left:auto; right:auto;}
  .lb__meta{padding:14px 0 0;}
}
/* short screens (a phone on its side): a tighter caption row leaves the piece more height */
@media (max-height:520px){
  .lb{padding-top:4px; padding-bottom:10px;}
  .lb__close{min-height:36px;}
  .lb__meta{padding-top:8px;}
  .lb__cap{margin-top:4px; font-size:16px;}
  .lb__cta{margin-top:8px; min-height:0; padding:7px 14px 7px 16px;}
}

/* ── project page: the films + the wardrobe planner (concept-Dv3.js renderStory) ── */
.story-films__row{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:clamp(16px,1.8vw,24px);}
.story-film{margin:0;}
.story-film .post-video{aspect-ratio:9/16;}
/* a still invitation in the Digital Invitations row: shown whole on paper, not cropped to the film frame */
.story-film .post-video--still{cursor:zoom-in; background:var(--paper, #f6efe4);}
.story-film .post-video--still .post-video__poster{object-fit:contain;}
.story-film__cap{margin-top:10px; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gold-ink);}
.story-film__cap span{color:var(--text-muted); margin-left:6px; letter-spacing:.08em;}
.story-planner__row{display:flex; gap:16px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; padding-bottom:12px; scrollbar-color:var(--gold-soft) transparent;}
.story-planner__page{flex:none; padding:0; border:1px solid var(--gold-tint); background:var(--paper); scroll-snap-align:start;
  transition:transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);}
.story-planner__page:hover{transform:translateY(-2px); box-shadow:var(--shadow-gold);}
.story-planner__page img{display:block; height:min(460px,60vh); width:auto;}

/* the "See the full project" button only for couples with a project page; it keeps its
   space when absent so the piece stays the same size as the visitor steps through */
.lb__cta[hidden]{display:inline-flex !important; visibility:hidden;}

/* ── the film control bar (concept-Dv3.js filmControls): sits inside the card, shows while
   paused or under the pointer, quiet while the film plays ── */
.vctl{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:8px; padding:26px 10px 10px;
  background:linear-gradient(180deg,transparent,rgba(30,12,16,.82));
  color:var(--champagne); opacity:0; transition:opacity var(--dur-base) var(--ease-soft);
}
.post-video:hover .vctl, .post-video.is-paused .vctl, .vctl:focus-within{opacity:1;}
.vctl__btn{flex:none; display:grid; place-items:center; min-width:30px; height:30px; padding:0 6px; border-radius:999px;
  background:rgba(255,250,241,.12); border:1px solid rgba(213,180,113,.45); color:var(--champagne);
  font-size:9.5px; letter-spacing:.1em; font-weight:600; text-transform:uppercase; cursor:pointer;}
.vctl__btn:hover{background:rgba(213,180,113,.28);}
.vctl__btn:focus-visible{outline:2px solid var(--champagne); outline-offset:2px;}
.vctl__ico{display:block;}
.vctl__ico.is-play{width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent currentColor; margin-left:2px;}
.vctl__ico.is-pause{width:8px; height:10px; border-left:3px solid currentColor; border-right:3px solid currentColor;}
.vctl__snd{margin-left:auto;}
.vctl__t{flex:none; font-size:10px; letter-spacing:.06em; font-variant-numeric:tabular-nums; white-space:nowrap;}
.vctl__seek{
  flex:1; min-width:40px; height:16px; margin:0; background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none;
}
.vctl__seek::-webkit-slider-runnable-track{height:3px; border-radius:3px; background:linear-gradient(90deg,var(--gold-soft) var(--p,0%),rgba(255,250,241,.3) var(--p,0%));}
.vctl__seek::-moz-range-track{height:3px; border-radius:3px; background:linear-gradient(90deg,var(--gold-soft) var(--p,0%),rgba(255,250,241,.3) var(--p,0%));}
.vctl__seek::-webkit-slider-thumb{-webkit-appearance:none; width:11px; height:11px; margin-top:-4px; border-radius:50%; background:var(--champagne); border:0;}
.vctl__seek::-moz-range-thumb{width:11px; height:11px; border-radius:50%; background:var(--champagne); border:0;}
.vctl__seek:focus-visible{outline:2px solid var(--champagne); outline-offset:2px;}
/* portrait films are narrow, so the timeline always takes its own full-width row above the
   buttons — long enough to drag precisely */
.vctl{flex-wrap:wrap; row-gap:6px;}
.vctl__seek{order:-1; flex:1 0 100%;}
.has-vctl:hover .vctl, .has-vctl.is-paused .vctl{opacity:1;}

/* gallery viewer: the film box carries the control bar */
.lb__film{position:relative; line-height:0;}
.lb__film .vctl{line-height:normal;}

/* ── the film window (concept-Dv3.js openFilm): the page dims away, the film sits at its own
   size — no larger than its 720×1280 source, so it never goes soft ── */
.fmodal{position:fixed; inset:0; z-index:var(--z-lb,1000); display:flex; align-items:center; justify-content:center;
  background:rgba(22,8,11,.985); padding:4vh 8vw;}
.fmodal[hidden]{display:none !important;}
.fmodal__fig{margin:0; display:flex; flex-direction:column; align-items:center; gap:14px;}
.fmodal__stage{position:relative; height:min(84vh,1280px); aspect-ratio:9/16; border-radius:6px; overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8); background:#000;}
.fmodal__stage video{display:block; width:100%; height:100%; object-fit:contain;}
.fmodal__cap{display:flex; gap:14px; align-items:baseline; color:var(--champagne); font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;}
.fmodal__ttl{font-family:var(--font-display); font-style:italic; text-transform:none; letter-spacing:0; font-size:18px; font-weight:400; color:var(--ivory);}
.fmodal__count, .fmodal__who{color:var(--gold-soft);}
.fmodal__close{position:absolute; top:18px; right:24px; background:none; border:0; color:var(--ivory);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; cursor:pointer;}
.fmodal__nav{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid var(--line-on-dark,rgba(255,255,255,.2)); color:var(--ivory); font-size:22px; cursor:pointer;}
.fmodal__nav.prev{left:24px;} .fmodal__nav.next{right:24px;}
.fmodal.is-single .fmodal__nav{display:none;}
.fmodal button:focus-visible{outline:2px solid var(--champagne); outline-offset:3px;}
.fmodal .vctl{padding:40px 14px 14px; gap:10px;}
body.is-film .totop{display:none !important;}

/* ── wardrobe planner: more pages wait to the right — the row fades at its edge, a small
   arrow offers the next page, and on first sight the pages slide a hand's width and back ── */
.story-planner__frame{position:relative;}
.story-planner__frame.has-more .story-planner__row{
  -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent);}
.story-planner__frame.has-less .story-planner__row{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%); mask-image:linear-gradient(90deg,transparent,#000 18%);}
.story-planner__frame.has-more.has-less .story-planner__row{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);}
/* the strip's own arrows, by its heading: each press moves it one screenful of pages */
.story-planner__ctl{margin-left:auto; display:flex; gap:8px; align-self:center;}
.story-planner__arw{width:42px; height:42px; border-radius:50%; border:1px solid var(--gold-tint); background:var(--paper); color:var(--maroon);
  font-size:20px; line-height:1; display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-md);
  transition:opacity var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft);}
.story-planner__arw:hover:not(:disabled){border-color:var(--gold); transform:translateY(-1px);}
.story-planner__arw:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.story-planner__arw:disabled{opacity:.35; cursor:default; box-shadow:none;}
.story-planner__ctl[hidden]{display:none;}
.story-planner__row.is-nudge .story-planner__page{animation:plannerNudge 1.3s var(--ease-soft);}
@keyframes plannerNudge{0%,100%{translate:0} 45%{translate:-56px} 70%{translate:-56px}}

/* phones: the upright film fits the screen width, with Close above it and the caption below */
@media(max-width:700px){
  .fmodal__stage{height:min(72vh,calc(94vw*16/9));}
  .fmodal__fig{max-width:94vw;}
  .fmodal__cap{flex-wrap:wrap; justify-content:center; text-align:center; gap:4px 12px;}
  .fmodal__count{white-space:nowrap;}
}

/* the smallest phones: the contact details and footer email stay inside the screen */
.contact__grid > *{min-width:0;}
@media(max-width:380px){
  .contact__lines .v,.contact__lines a{font-size:17px; overflow-wrap:anywhere;}
  .foot a[href^="mailto:"]{font-size:13px; overflow-wrap:anywhere;}
}
/* the home WhatsApp link stays on one line, with its arrow beside it */
@media(max-width:480px){
  .reply-card .reply-wa{letter-spacing:.1em; white-space:nowrap;}
}

/* no lone word on the last line of a paragraph, on browsers that can avoid it */
p,li{text-wrap:pretty;}

/* phones: a project's videos swipe sideways like its gallery, instead of a long column of
   9:16 films nobody scrolls through (2 Nov call) */
@media(max-width:860px){
  .story-films__row{display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px;}
  .story-films__row::-webkit-scrollbar{display:none;}
  .story-film{flex:0 0 min(62vw,260px); scroll-snap-align:center;}
}

/* the type tabs (audit R4, 4 Nov). Everywhere: they stay in reach while the wall scrolls, held
   just under the top bar. Phones: two rows that scroll sideways together under one thumb. */
.filts__in{display:contents;}
/* desktop too (audit Q5, 5 Nov): the wall is ~15,000px tall, so the tabs ride under the top bar */
@media(min-width:901px){
  #view-work .a-toolbar{position:sticky; top:var(--wall-bar-top,79px); z-index:6; background:var(--ivory);
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); padding-block:18px 8px;
    box-shadow:0 10px 14px -14px rgba(42,30,40,.35);}
}
@media(max-width:900px){
  #view-work .a-toolbar{position:sticky; top:var(--wall-bar-top,60px); z-index:6; background:var(--ivory);
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
    box-shadow:0 10px 14px -14px rgba(42,30,40,.35);}
}
@media(max-width:600px){
  #view-work .a-toolbar{padding-block:6px 2px;}
  /* the row runs edge to edge, and the first tab's word lines up with the logo and the wall
     (it sat a second gutter in before, 4 Nov call); the tab's own 14px padding is taken off */
  #view-work .filts{display:block; padding-block:2px 4px; align-self:stretch; width:auto;
    padding-inline:calc(var(--gutter) - 14px); scroll-padding-inline:calc(var(--gutter) - 14px);
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent);}
  #view-work .filts.is-end{-webkit-mask-image:none; mask-image:none;}
  .filts__in{display:flex; flex-wrap:wrap; width:var(--pair-w,max-content); gap:0;}
  #view-work .filt{min-height:40px; padding:0 14px; scroll-snap-align:none;}
}

/* phones (5 Nov): the top bar tucks away while the wall scrolls down, and the tabs take its place
   (see syncTuck in dv3-work.js). Scrolling up brings both back. */
@media(max-width:900px){
  #view-work .a-toolbar{transition:top .32s var(--ease-soft,ease);}
  #topbar{transition:transform .32s var(--ease-soft,ease),background var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft),padding var(--dur-base) var(--ease-soft);}
  body.wall-tuck #topbar{transform:translateY(-100%);}
  body.wall-tuck #view-work .a-toolbar{top:0;}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  #view-work .a-toolbar,#topbar{transition:none;}
}