/* Your own overrides. Loaded last, never regenerated by the build. Anything here wins over the generated page styles. Nudge one element (.d = desktop, .m = mobile): .d .sie-welcome_7 { top: 600px; } Hide something on mobile only: .m .sie-welcome_7 { display: none; } */ /* --------------------------------------------------------------- Portfolio typography, 2026-10-21 Venue captions +20% as asked (15 -> 18 desktop, 10 -> 12 mobile). Vendor credits were a literal 5px: +20% would be 6px, still below anything readable, so they go to 9px. Dial to taste - this file is never regenerated by the build. --------------------------------------------------------------- */ /* venue captions - the big text */ /* Venue captions stay at their original 15px. Measured: at 16px the Punta Cana caption wraps to a third line, at 17px two of them do, and a third line overflows the 16px anchor box into the row below. Growing these needs wider boxes, not a bigger font - say the word and I'll widen them. */ .m .p-portfolio .sie-new-canvas_11-text { font-size: 12px; } /* planning + photography credits */ .d .p-portfolio .sie-new-canvas_12-text, .m .p-portfolio .sie-new-canvas_12-text, .d .p-portfolio .sie-new-canvas_13-text, .m .p-portfolio .sie-new-canvas_13-text, .d .p-portfolio .sie-new-canvas_14-text, .m .p-portfolio .sie-new-canvas_14-text, .d .p-portfolio .sie-new-canvas_15-text, .m .p-portfolio .sie-new-canvas_15-text, .d .p-portfolio .sie-new-canvas_16-text, .m .p-portfolio .sie-new-canvas_16-text, .d .p-portfolio .sie-new-canvas_17-text, .m .p-portfolio .sie-new-canvas_17-text, .d .p-portfolio .sie-new-canvas_18-text, .m .p-portfolio .sie-new-canvas_18-text, .d .p-portfolio .sie-new-canvas_19-text, .m .p-portfolio .sie-new-canvas_19-text, .d .p-portfolio .sie-new-canvas_20-text, .m .p-portfolio .sie-new-canvas_20-text, .d .p-portfolio .sie-new-canvas_21-text, .m .p-portfolio .sie-new-canvas_21-text, .d .p-portfolio .sie-new-canvas_22-text, .m .p-portfolio .sie-new-canvas_22-text, .d .p-portfolio .sie-new-canvas_23-text, .m .p-portfolio .sie-new-canvas_23-text { font-size: 9px; letter-spacing: 0.16em; } /* A linked vendor credit should look clickable. Named one by one on purpose. This was [class*="sie-new-canvas_1"], which is a substring match - so it also caught sie-new-canvas_10 and _11, the Tuscan Hills and Mackey House captions, and underlined two venue names that are not vendor links. Credits are _12 to _23; nothing else. */ .p-portfolio a .se-t.sie-new-canvas_12-text, .p-portfolio a .se-t.sie-new-canvas_13-text, .p-portfolio a .se-t.sie-new-canvas_14-text, .p-portfolio a .se-t.sie-new-canvas_15-text, .p-portfolio a .se-t.sie-new-canvas_16-text, .p-portfolio a .se-t.sie-new-canvas_17-text, .p-portfolio a .se-t.sie-new-canvas_18-text, .p-portfolio a .se-t.sie-new-canvas_19-text, .p-portfolio a .se-t.sie-new-canvas_20-text, .p-portfolio a .se-t.sie-new-canvas_21-text, .p-portfolio a .se-t.sie-new-canvas_22-text, .p-portfolio a .se-t.sie-new-canvas_23-text { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 0.5px; } /* --------------------------------------------------------------- Minimum readable text, 2026-10-21 34 rules across the site rendered at 5-8px - footers, vendor credits, service-area lines. Below ~9px is effectively invisible on a phone and fails basic accessibility. 10px floor. --------------------------------------------------------------- */ .d .sie-footer-1_4-text, .d .sie-footer-2_4-text, .d .sie-footer-3_4-text, .d .p-portfolio .sie-new-canvas_12-text, .d .p-portfolio .sie-new-canvas_13-text, .d .p-portfolio .sie-new-canvas_14-text, .d .p-portfolio .sie-new-canvas_15-text, .d .p-portfolio .sie-new-canvas_16-text, .d .p-portfolio .sie-new-canvas_17-text, .d .p-portfolio .sie-new-canvas_18-text, .d .p-portfolio .sie-new-canvas_19-text, .d .p-portfolio .sie-new-canvas_20-text, .d .p-portfolio .sie-new-canvas_21-text, .d .p-portfolio .sie-new-canvas_22-text, .d .p-portfolio .sie-new-canvas_23-text { font-size: 10px; } .m .sie-welcome-4_2-text { font-size: 8px; } /* Mobile gives these credits very little vertical room: at 10px the text wraps to an extra line, spills out of its fixed-height box and collides with the block below. 8px is the largest that still fits. */ /* --------------------------------------------------------------- Why mobile type was NOT increased Every element sits in a fixed-height, absolutely-positioned box. On mobile those boxes are ~20px tall. Raising the credits from 5px to 8px, or the captions from 10px to 12px, made long venue names wrap to three lines (54px of text in a 20px box), which spilled out and collided with the row beneath. Nothing reflows on this canvas, so bigger mobile type needs every element below it repositioned - a layout job, not a font-size one. Desktop has the room; mobile stays as designed. --------------------------------------------------------------- */ /* --------------------------------------------------------------- Mobile portfolio grid, 2026-10-22 Showit left every tile, caption and credit on its own ad-hoc coordinates: the two columns started 3-6px apart, one tile was 7px wider than the rest, and the two long venue names ran past their boxes into the credits underneath them. This is one grid instead. 320-wide canvas, two columns centred on x=76 and x=244, and a single 272px row pitch: tile (140 tall) -> caption at +150 -> credit lines at +210 and +236. Both columns share every baseline, so nothing can drift out of line with its neighbour again. --------------------------------------------------------------- */ /* tiles */ .m .p-portfolio .sie-new-canvas_0, .m .p-portfolio .sie-new-canvas_1, .m .p-portfolio .sie-new-canvas_3 { left:30px; width:93px; height:140px; } .m .p-portfolio .sie-new-canvas_2, .m .p-portfolio .sie-new-canvas_5, .m .p-portfolio .sie-new-canvas_4 { left:197px; width:93px; height:140px; } .m .p-portfolio .sie-new-canvas_0, .m .p-portfolio .sie-new-canvas_2 { top:42px; } .m .p-portfolio .sie-new-canvas_1, .m .p-portfolio .sie-new-canvas_5 { top:314px; } .m .p-portfolio .sie-new-canvas_3, .m .p-portfolio .sie-new-canvas_4 { top:586px; } /* venue captions - 44px holds three lines, which is the longest any of them runs at this width */ .m .p-portfolio .sie-new-canvas_6, .m .p-portfolio .sie-new-canvas_7, .m .p-portfolio .sie-new-canvas_9 { left:0px; width:152px; height:50px; } .m .p-portfolio .sie-new-canvas_10, .m .p-portfolio .sie-new-canvas_8, .m .p-portfolio .sie-new-canvas_11 { left:168px; width:152px; height:50px; } .m .p-portfolio .sie-new-canvas_6, .m .p-portfolio .sie-new-canvas_10 { top:192px; } .m .p-portfolio .sie-new-canvas_7, .m .p-portfolio .sie-new-canvas_8 { top:464px; } .m .p-portfolio .sie-new-canvas_9, .m .p-portfolio .sie-new-canvas_11 { top:736px; } .m .p-portfolio .sie-new-canvas_6-text, .m .p-portfolio .sie-new-canvas_7-text, .m .p-portfolio .sie-new-canvas_9-text, .m .p-portfolio .sie-new-canvas_10-text, .m .p-portfolio .sie-new-canvas_8-text, .m .p-portfolio .sie-new-canvas_11-text { font-size: 11px; letter-spacing: 0.2em; } /* The caption box is sized for the longest name, three lines. Top-aligned, that leaves a two-line caption floating with a gap under it while a three-line one butts straight into the credits - the same unevenness, just moved. Centre the text in the box instead and every card gets the same air above its credits whatever the name is. */ .m .p-portfolio .sie-new-canvas_6, .m .p-portfolio .sie-new-canvas_7, .m .p-portfolio .sie-new-canvas_9, .m .p-portfolio .sie-new-canvas_10, .m .p-portfolio .sie-new-canvas_8, .m .p-portfolio .sie-new-canvas_11 { display: flex; align-items: center; } .m .p-portfolio .sie-new-canvas_6 > .se-t, .m .p-portfolio .sie-new-canvas_7 > .se-t, .m .p-portfolio .sie-new-canvas_9 > .se-t, .m .p-portfolio .sie-new-canvas_10 > .se-t, .m .p-portfolio .sie-new-canvas_8 > .se-t, .m .p-portfolio .sie-new-canvas_11 > .se-t { width: 100%; } /* credits - column 1 then column 2, same left/width for every row */ .m .p-portfolio .sie-new-canvas_12, .m .p-portfolio .sie-new-canvas_16, .m .p-portfolio .sie-new-canvas_13, .m .p-portfolio .sie-new-canvas_21, .m .p-portfolio .sie-new-canvas_14, .m .p-portfolio .sie-new-canvas_22 { left:4px; width:144px; height:24px; } .m .p-portfolio .sie-new-canvas_17, .m .p-portfolio .sie-new-canvas_20, .m .p-portfolio .sie-new-canvas_15, .m .p-portfolio .sie-new-canvas_23, .m .p-portfolio .sie-new-canvas_18, .m .p-portfolio .sie-new-canvas_19 { left:172px; width:144px; height:24px; } /* row 1 */ .m .p-portfolio .sie-new-canvas_12, .m .p-portfolio .sie-new-canvas_17 { top:252px; } .m .p-portfolio .sie-new-canvas_16, .m .p-portfolio .sie-new-canvas_20 { top:278px; } /* row 2 */ .m .p-portfolio .sie-new-canvas_13, .m .p-portfolio .sie-new-canvas_15 { top:524px; } .m .p-portfolio .sie-new-canvas_21, .m .p-portfolio .sie-new-canvas_23 { top:550px; } /* row 3 */ .m .p-portfolio .sie-new-canvas_14, .m .p-portfolio .sie-new-canvas_18 { top:796px; } .m .p-portfolio .sie-new-canvas_22, .m .p-portfolio .sie-new-canvas_19 { top:822px; } .m .p-portfolio .sie-new-canvas_12-text, .m .p-portfolio .sie-new-canvas_16-text, .m .p-portfolio .sie-new-canvas_13-text, .m .p-portfolio .sie-new-canvas_21-text, .m .p-portfolio .sie-new-canvas_14-text, .m .p-portfolio .sie-new-canvas_22-text, .m .p-portfolio .sie-new-canvas_17-text, .m .p-portfolio .sie-new-canvas_20-text, .m .p-portfolio .sie-new-canvas_15-text, .m .p-portfolio .sie-new-canvas_23-text, .m .p-portfolio .sie-new-canvas_18-text, .m .p-portfolio .sie-new-canvas_19-text { font-size: 8px; letter-spacing: 0.14em; } /* --------------------------------------------------------------- About page: team bios, 2026-10-21 Two columns on desktop: Eli then Mahayla down the left, Noah on the right. Each bio lives in its old job-title element, resized to fit, with Mahayla's photo and caption pushed down to clear Eli's bio. Block height is set in content.json, not here: engine.js applies it inline from data-dh and would overwrite any CSS value. --------------------------------------------------------------- */ /* --- desktop --- */ .d .sie-we-love_8 { left:120px; top:790px; width:430px; height:310px; } .d .sie-we-love_9 { left:652px; top:1140px; width:430px; height:310px; } .d .sie-we-love_3 { top:1140px; } .d .sie-we-love_7 { top:1610px; } .d .sie-we-love_10 { left:120px; top:1680px; width:430px; height:310px; } .d .sie-we-love_8-text, .d .sie-we-love_9-text, .d .sie-we-love_10-text { font-size:13px; line-height:1.6; letter-spacing:0.02em; } /* --- mobile: one column, whole stack pushed down --- */ .m .sie-we-love_8 { left:14px; top:506px; width:292px; height:300px; } .m .sie-we-love_4 { top:840px; } .m .sie-we-love_6 { top:1196px; } .m .sie-we-love_9 { left:14px; top:1246px; width:292px; height:300px; } .m .sie-we-love_3 { top:1578px; } .m .sie-we-love_7 { left:14px; top:1926px; width:292px; } /* "Mahayla Valladares" is long enough to wrap to two lines at this width, so her bio needs more clearance beneath the name than the other two. */ .m .sie-we-love_10 { left:14px; top:2026px; width:292px; height:300px; } .m .sie-we-love_8-text, .m .sie-we-love_9-text, .m .sie-we-love_10-text { font-size:11px; line-height:1.6; letter-spacing:0.02em; text-align:center; } /* --------------------------------------------------------------- Navigation + monogram, 2026-10-22 --------------------------------------------------------------- */ /* The hidden menu carries a fifth item with no label at all, sitting directly on top of the right-hand half of ABOUT and linking to the contact page. Tap the word and you get About; tap an inch to the right of it and you silently land on Contact. It has never had any text on any page, so it goes. */ .sie-hidden-menu_0 { display: none !important; } /* The three real items were 107px, 107px and 172px wide on three different left edges, so the tap target moved from row to row. One column, one width, and tall enough to hit with a thumb. */ .m .sie-hidden-menu_1, .m .sie-hidden-menu_2, .m .sie-hidden-menu_4 { left: 90px; width: 150px; height: 34px; } .m .sie-hidden-menu_1-text, .m .sie-hidden-menu_2-text, .m .sie-hidden-menu_4-text { text-align: center; } /* The EP monogram sat at left:-9px on mobile and left:-105px on desktop. On desktop that is relative to the 1200px canvas, so on any laptop narrower than about 1410px part of the logo is off the screen - at 1280px, 65px of it is simply gone. Bring it inside the canvas on both, and size it up while we're here. */ .m .sie-main-header_3 { left: 14px; top: 3px; width: 61px; height: 40px; } .d .sie-main-header_3 { left: 24px; top: 0px; width: 128px; height: 85px; } /* keep the hamburger the same distance off its edge as the logo */ .m .sie-main-header_2 { left: 265px; } /* --------------------------------------------------------------- "Check your date" button, 2026-10-22 --------------------------------------------------------------- */ /* Four 1px decorative rules float around this button at coordinates that line up with nothing: one crosses the paragraph above it, two are stray vertical ticks, and on mobile they land at four different offsets around the text. */ .sie-cta_0, .sie-cta_1, .sie-cta_2, .sie-cta_3 { display: none !important; } /* The anchor was 142px wide and 21px tall while the label needed two lines - so the second line, DATE, rendered outside the clickable box and tapping it did nothing. One line, and a thumb-sized target. */ .m .sie-cta_4 { left: 35px; top: 350px; width: 250px; height: 34px; } /* ...but the label was only half the problem. cta_5, the paragraph above it, is a 149px-tall box holding two lines of text, and its empty bottom half lies flat across the button. Every press landed on the paragraph, which is why the button did nothing wherever you hit it. Trim the box to its text, and lift the button above its neighbours so no future box can bury it again. */ .m .sie-cta_5 { height: 76px; } .sie-cta_4 { z-index: 3; } /* The desktop nav was laid out so CONTACT ran from x1164 to x1315 on a 1200px canvas - 115px past its right edge. Above about 1430px of browser width the overspill still lands on screen and nobody notices; on a 13" laptop at 1280 the word is cut in half. Re-space the three items inside the canvas, ending at x1176 so the right margin mirrors the monogram's 24px on the left. */ .d .sie-main-header_4 { left: 647px; width: 112px; } /* about */ .d .sie-main-header_1 { left: 803px; width: 178px; } /* portfolio */ .d .sie-main-header_0 { left: 1025px; width: 151px; } /* contact */ /* --------------------------------------------------------------- Hero poster frame, 2026-10-22 The cover film is a Vimeo iframe, so the first thing a visitor waits on is a third-party player booting on someone else's CDN, and until it paints there is nothing behind it but white. This is the film's own opening frame - the parasols - pulled from Vimeo's thumbnail and served from our own domain alongside the HTML, so the hero looks finished immediately and the video starts moving on top of it. It tracks whatever thumbnail the video has in Vimeo. If that thumbnail is ever changed, re-pull it: curl the thumbnail_url from vimeo.com/api/oembed.json?url=https%3A//vimeo.com/1236276707/e2432adcf9 then resize to 960x540 q72 into assets/hero-poster.jpg --------------------------------------------------------------- */ .p-index .sie-new-canvas_0 .si-embed > div { background: #f4f2ef url(assets/hero-poster.jpg) center/cover no-repeat; } /* --------------------------------------------------------------- Ben & Demi mobile, 2026-10-27 Two problems, same cause. Showit authored the first two videos into boxes far taller than the films inside them - the main film sits in a 670px box holding a 173px video, the sneak peek in a 469px box holding 197px. That dead space is what pushed the next video a third of a screen down: measured gaps were 350 and 341, against 70, 30 and 75 on Sammy & Jimmy. And "Back to Portfolio" was authored for a two-video page, so the third film landed on top of it. Box heights now match the films (width x the embed's own ratio: 56.25% for the 16:9 ones, 72.46% for the sneak peek), gaps are Sammy & Jimmy's 70, and the link sits after everything. Scoped to this page - welcome-1_2 is a different element elsewhere. --------------------------------------------------------------- */ /* Mobile for every film page is generated by tools/filmlayout.py, at the bottom of this file. Only the desktop link move lives here: the third film was authored over the top of it. */ .d .p-ben-demi .sie-welcome-1_2 { top: 1732px; } /* === filmlayout: generated, do not hand-edit === */ /* caroline-and-gabe-draft */ .m .p-caroline-and-gabe-draft .sie-welcome-1_0{top:40px;height:171px;} .m .p-caroline-and-gabe-draft .sie-welcome-1_3{top:281px;height:240px;} .m .p-caroline-and-gabe-draft .sie-welcome-1_4{top:281px;height:240px;} .m .p-caroline-and-gabe-draft .sie-welcome-1_2{top:591px;height:261px;} .m .p-caroline-and-gabe-draft .sie-welcome-1_1{top:922px;height:171px;} .m .p-caroline-and-gabe-draft .sie-welcome-1_5{top:1281px;height:27.0px;} /* ben-demi */ .m .p-ben-demi .sie-welcome-1_0{top:40px;height:173px;} .m .p-ben-demi .sie-extra-0{top:283px;height:153px;} .m .p-ben-demi .sie-welcome-1_1{top:506px;height:197px;} .m .p-ben-demi .sie-welcome-1_2{top:891px;height:27.0px;} /* angelica-and-kelby */ .m .p-angelica-and-kelby .sie-welcome-1_1{top:40px;height:170px;} .m .p-angelica-and-kelby .sie-welcome-1_3{top:280px;height:153px;} .m .p-angelica-and-kelby .sie-welcome-1_2{top:503px;height:162px;} .m .p-angelica-and-kelby .sie-welcome-1_0{top:853px;height:27.0px;} /* samantha-and-jimmy */ .m .p-samantha-and-jimmy .sie-welcome-1_0{top:40px;height:187px;} .m .p-samantha-and-jimmy .sie-welcome-1_3{top:297px;height:233px;} .m .p-samantha-and-jimmy .sie-welcome-1_4{top:297px;height:239px;} .m .p-samantha-and-jimmy .sie-welcome-1_2{top:606px;height:276px;} .m .p-samantha-and-jimmy .sie-welcome-1_1{top:952px;height:170px;} .m .p-samantha-and-jimmy .sie-welcome-1_5{top:1310px;height:27.0px;} /* david-and-sarah */ .m .p-david-and-sarah .sie-welcome-1_0{top:40px;height:171px;} .m .p-david-and-sarah .sie-welcome-1_1{top:281px;height:265px;} .m .p-david-and-sarah .sie-welcome-1_2{top:281px;height:261px;} .m .p-david-and-sarah .sie-welcome-1_3{top:734px;height:27.0px;} /* madison-and-zac */ .m .p-madison-and-zac .sie-welcome-1_4{top:40px;height:164px;} .m .p-madison-and-zac .sie-welcome-1_3{top:274px;height:258px;} .m .p-madison-and-zac .sie-welcome-1_2{top:274px;height:251px;} .m .p-madison-and-zac .sie-welcome-1_0{top:602px;height:185px;} .m .p-madison-and-zac .sie-welcome-1_5{top:975px;height:27.0px;} /* === end filmlayout === */