/* ==================================================================
   Trevor Gomo, Home and Weddings as they looked on Squarespace (2026-10-30)
   Trevor: "copy the originals word for word, bar for bar, as far as looks
   go. Just for now." Section by section the old trevorgomo.com home
   (/creativephotographer) and /weddings, measured at 1500px wide: the same
   order, copy, photographs, colours and proportions. Squarespace's Typekit
   faces (pragmatica-extended, aktiv-grotesk) are stood in for by Archivo at
   its widest and Inter Light. The header (tg.css) stays the new one.
   Loaded after tg.css on v6-3/trevor-gomo/ and v6-3/trevor-gomo-weddings/.
   1.0.0  first build.
   1.1.0  second pass against the originals, side by side at 1500px: every
          size, gap and position as Squarespace measured it (--px is one
          Squarespace pixel at 1500px wide and shrinks below that), the hero's
          20% black overlay, film grain and focal point, headings at Archivo
          112% so their widths match, and the gallery lightbox (tg.js 1.2.0).
   1.1.1  the hero grain moves, like Third Eye Media's (a stepped jitter).
   1.1.2  the hero grain is Squarespace's own Film Grain shader on the clean photo
          (film-grain.js), replacing the 1.1.1 noise layer.
   1.2.0  the wedding galleries (tg.js 8): a whole gallery from the Site Editor
          over the page, every photo at its own shape, in place of Pixieset.
   ================================================================== */
.sq { --px: min(1px, calc(100vw / 1500)); --sq-black: #000; --sq-off: #f5f5f3; --sq-paper: #fafafa; --sq-ink: #000; --sq-dark: #1c1c1d; --sq-grey: #28282a;
  --sq-head: "Archivo", "Helvetica Neue", Arial, sans-serif; --sq-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--sq-body); font-weight: 300; letter-spacing: -0.015em; color: var(--sq-ink); background: var(--sq-paper); }
:where(.sq) :is(h1, h2, h3) { font-family: var(--sq-head); font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: -0.07em; line-height: 1.248; margin: 0; }
:where(.sq) p { margin: 0 0 1em; }
:where(.sq) a { color: inherit; }
.sq-sec { position: relative; }
.sq-black { background: var(--sq-black); color: var(--sq-off); }
.sq-off { background: var(--sq-off); }
.sq-paper { background: var(--sq-paper); }
.sq-white { background: #fff; }
.sq-in { max-width: 1500px; margin: 0 auto; padding: 0 4vw; }
@media (min-width: 1500px) { .sq-in { padding: 0 60px; } }

/* buttons, as Squarespace drew them */
.sq-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 40px; font: 500 clamp(14px, calc(17.8 * var(--px)), 17.8px)/1 var(--sq-body); letter-spacing: .02em; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: opacity .2s; }
.sq-btn:hover { opacity: .8; }
.sq-btn--black { background: #000; color: #fff; }
.sq-btn--white { background: #fff; color: #000; }
.sq-btn--ghost { border-color: currentColor; background: transparent; }
.sq-btn--big { min-height: 70px; min-width: min(337px, 100%); }

/* section dividers: the curves between sections */
.sq-curve { display: block; position: absolute; left: 0; width: 100%; height: 6vw; pointer-events: none; z-index: 3; }
.sq-curve--bottom { bottom: -1px; }
.sq-round-bottom { border-radius: 0 0 clamp(24px, 4vw, 60px) clamp(24px, 4vw, 60px); position: relative; z-index: 1; }

/* the photo grids: Squarespace "grid" galleries, cropped 3:4 */
.sq-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: var(--gap, 18px); padding: var(--pad, 19px); }
.sq-grid figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.sq-grid img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .sq-grid { --cols: 1 !important; } .sq-grid--keep2 { --cols: 2 !important; } }
@media (min-width: 641px) and (max-width: 900px) { .sq-grid--three { --cols: 2 !important; } }

/* ---------------- Home ---------------- */
/* hero: 1393 tall; headline text box at 175, "Commercial Photographer" at 525,
   the paragraph at 766, the button at 1134 (all from the section top) */
.sqh-hero { position: relative; overflow: hidden; min-height: calc(1393 * var(--px)); color: var(--sq-off); background: #3b231b; }
.sqh-hero__bg { position: absolute; inset: 0; }
.sqh-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 8.6% 56%; }
.sqh-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .2); pointer-events: none; }
/* the film grain is Squarespace's own WebGL filter on the photograph (film-grain.js), not a layer on top */
.sqh-hero__bg .film-grain { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sqh-hero__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(199 * var(--px)) 4vw calc(150 * var(--px)); }
.sqh-hero h2 { font-size: calc(159.7 * var(--px)); line-height: 1; letter-spacing: -0.1em; white-space: nowrap; color: var(--sq-off); }
.sqh-role { font: 300 max(30px, calc(66.4 * var(--px)))/1.325 var(--sq-body); margin: calc(162 * var(--px)) 0 0; max-width: 6.4em; }
.sqh-lede { font: 300 max(16px, calc(25 * var(--px)))/1.325 var(--sq-body); max-width: max(300px, calc(590 * var(--px))); margin: calc(64 * var(--px)) auto 0; }
.sqh-hero .sq-btn { margin-top: max(36px, calc(170 * var(--px))); color: var(--sq-off); min-width: min(337px, 80vw); min-height: max(54px, calc(70 * var(--px))); }
.sqh-hero .sq-curve { fill: var(--sq-off); }

/* services: 1144 tall, text column 916 wide at x 292; headings at 163, 369, 575, 781 */
.sqh-svc { padding: calc(160 * var(--px)) 4vw calc(190 * var(--px)); }
.sqh-svc__box { max-width: 920px; margin: 0 auto; }
.sqh-svc h3 { font-size: max(19px, calc(34 * var(--px))); line-height: 1.248; margin: calc(29 * var(--px)) 0 calc(35 * var(--px)); }
.sqh-svc h3:first-child { margin-top: 0; }
.sqh-svc p { font-size: max(16px, calc(25 * var(--px))); line-height: 1.325; margin: 0; }
.sqh-svc strong { font-weight: 600; }
.sqh-svc .sq-curve { fill: var(--sq-off); bottom: auto; top: 100%; }

.sqh-gap { height: calc(243 * var(--px)); }
/* first gallery: two columns, 722 x 963, 18 across and 19 down, 19 at the sides */
.sqh-g1 { --cols: 2; --gap: calc(19 * var(--px)) calc(18 * var(--px)); --pad: 0 calc(19 * var(--px)) calc(3 * var(--px)); }
.sqh-big { padding: calc(50 * var(--px)) 0 calc(49 * var(--px)); display: flex; justify-content: center; }
.sqh-big figure { margin: 0; width: calc(1287 * var(--px)); aspect-ratio: 1287 / 965; overflow: hidden; }
.sqh-big img { width: 100%; height: 100%; object-fit: cover; }
/* second gallery: three columns, 450 x 601, 15 apart, 60 all round */
.sqh-g2 { --cols: 3; --gap: calc(15 * var(--px)); --pad: calc(60 * var(--px)); }
.sqh-g2 figure { aspect-ratio: 450 / 601; }

/* request a quote: 1102 tall; the pitch column 685 wide at x 60, the form 627 wide at x 813, both from 50 */
.sqh-quote { padding: calc(46 * var(--px)) 0 calc(140 * var(--px)); }
.sqh-quote__grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 900px) { .sqh-quote__grid { grid-template-columns: 685fr 68fr 627fr; gap: 0; } .sqh-quote__form { grid-column: 3; padding-top: calc(4 * var(--px)); } }
.sqh-quote__pitch { text-align: center; }
.sqh-quote__pitch h3 { font-size: max(18px, calc(34 * var(--px))); line-height: 1.248; margin: 0 0 calc(32 * var(--px)); color: #fff; }
.sqh-quote__pitch p { font-size: max(16px, calc(25 * var(--px))); line-height: 1.325; margin: 0 0 calc(28 * var(--px)); }
.sqh-quote__pitch .sq-btn { margin-top: calc(60 * var(--px)); color: #fff; min-width: min(337px, 80vw); min-height: max(54px, calc(70 * var(--px))); }

/* the forms: Squarespace pill fields. Group labels 15.3, sub-labels 12, text inputs 55 tall
   (radius 32), selects 42 (radius 23), the message 100, the button 96 x 53 */
.sqf { display: grid; gap: calc(16 * var(--px)) 0; font-size: max(13px, calc(15.28 * var(--px))); font-weight: 300; }
.sqf__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(11 * var(--px)); }
.sqf label, .sqf legend, .sqf .sqf__lbl, .sqf .fld > label { display: block; font: 300 max(13px, calc(15.28 * var(--px)))/1.55 var(--sq-body); letter-spacing: 0; text-transform: none; margin: 0 0 2px; padding: 0; }
.sqf .sqf__row label { font-size: max(11px, calc(12 * var(--px))); line-height: 2.1; }
.sqf .req { opacity: .55; font-size: max(11px, calc(12 * var(--px))); margin-left: 5px; }
.sqf fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.sqf .fld { gap: 0; }
.sqf input[type="text"], .sqf input[type="email"], .sqf input[type="tel"], .sqf input[type="date"], .sqf select, .sqf textarea {
  width: 100%; font: 300 max(16px, calc(25 * var(--px)))/1.4 var(--sq-body); border: 0; border-radius: 32px; padding: 10px 20px; height: max(46px, calc(55 * var(--px))); appearance: none; -webkit-appearance: none; }
.sqf select { height: max(40px, calc(42 * var(--px))); border-radius: 23px; font-size: max(13px, calc(15.28 * var(--px))); padding-right: 42px; color: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23999' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.sqf textarea { height: max(90px, calc(100 * var(--px))); resize: vertical; }
.sqf.sqf--dark .fld :is(input[type=text], input[type=email], input[type=tel], input[type=date], select, textarea) { background-color: #1e1e1e; color: #f5f5f3; }
.sqf--dark select:invalid, .sqf--light select:invalid { color: rgba(128, 128, 128, .9); }
.sqf.sqf--light .fld :is(input[type=text], input[type=email], input[type=tel], input[type=date], select, textarea) { background-color: #fff; color: #000; }
.sqf input[type="date"] { width: auto; min-width: 180px; }
.sqf__help { font-size: max(12px, calc(15.28 * var(--px))); line-height: 1.33; opacity: .7; margin: 0 0 8px; }
.sqf__check { display: flex !important; align-items: center; gap: 8px; margin-top: 8px !important; }
.sqf__check input { appearance: none; -webkit-appearance: none; width: 13px; height: 13px; border: 1px solid currentColor; border-radius: 50%; margin: 0; opacity: .8; cursor: pointer; }
.sqf__check input:checked { background: currentColor; box-shadow: inset 0 0 0 2px var(--sq-black); }
.sqf--light .sqf__check input:checked { box-shadow: inset 0 0 0 2px #fafafa; }
.sqf__pills { display: flex; flex-wrap: wrap; gap: 14px 8px; margin-top: 10px; }
.sqf__pill { position: relative; margin: 0 !important; }
.sqf__pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sqf__pill span { display: inline-block; padding: 2px 9px; border: 1px solid currentColor; border-radius: 30px; font-size: max(12px, calc(15.28 * var(--px))); line-height: 1.3; opacity: .85; cursor: pointer; }
.sqf--dark .sqf__pill input:checked + span { background: #f5f5f3; color: #000; border-color: #f5f5f3; opacity: 1; }
.sqf--light .sqf__pill input:checked + span { background: #000; color: #fff; border-color: #000; opacity: 1; }
.sqf__pill input:focus-visible + span { outline: 2px solid #8B4A2B; outline-offset: 2px; }
.sqf .fld.bad input, .sqf .fld.bad select, .sqf .fld.bad textarea { box-shadow: 0 0 0 1.5px #c0392b inset; }
.sqf .err { color: #e06c5a; font-size: 12px; margin: 6px 0 0; }
.sqf--light .err { color: #b03a2e; }
.sqf__submit { justify-self: start; min-height: 53px; min-width: 96px; padding: 0 21px; font-size: 16px; font-weight: 500; letter-spacing: .02em; margin-top: calc(-1 * var(--px)); }
.sqf .fld--hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sqf__status { font-size: 13px; margin: 0; }
.sq-done { padding: 28px 0; }
.sq-done h3 { font-size: 26px; margin-bottom: 12px; }

/* site footer, laid out like the Squarespace one: 772 tall, CONTACT at 59, the two lines at 120 and 169 (25px),
   the big name, the last line at 739 */
.sq-foot { background: var(--sq-dark); color: var(--sq-off); border-radius: calc(60 * var(--px)) calc(60 * var(--px)) 0 0; padding: calc(57 * var(--px)) 0 0; overflow: hidden; margin-top: -1px; }
.sq-foot h3 { font-size: max(21px, calc(34 * var(--px))); color: var(--sq-off); margin: 0 0 calc(19 * var(--px)); }
.sq-foot p { font-size: max(16px, calc(25 * var(--px))); line-height: 1.325; margin: 0 0 calc(16 * var(--px)); }
.sq-foot a { text-decoration: none; }
.sq-foot a:hover { text-decoration: underline; }
.sq-foot .sq-foot__mark { font: 800 calc(170 * var(--px))/1 var(--sq-head); font-stretch: 112%; letter-spacing: -0.07em; text-transform: uppercase; white-space: nowrap; text-align: center; margin: calc(185 * var(--px)) 0 calc(186 * var(--px)); color: var(--sq-off); }
.sq-foot .sq-foot__base { text-align: center; font-size: max(16px, calc(25 * var(--px))); margin: 0; padding-bottom: max(12px, calc(0 * var(--px))); }

/* ---------------- Weddings ---------------- */
/* as measured at 1500: section heights 948, 274, 3805, 454, 1201, 2140, 1767, 243, 2098, 960, 512.
   Three sections have rounded bottom corners (Squarespace's divider: 6vw across, about 67 down);
   the section after one sits under it (.sq-under) so its colour shows in the corners. */
.sq-round { border-radius: 0 0 6vw 6vw / 0 0 calc(67 * var(--px)) calc(67 * var(--px)); position: relative; z-index: 2; overflow: hidden; }
.sq-under { margin-top: calc(-67 * var(--px)); border-top: calc(67 * var(--px)) solid transparent; }
.sqw-hero.sq-round { z-index: 3; }
.sqw-hero { position: relative; overflow: hidden; min-height: calc(948 * var(--px)); color: #fff; background: var(--sq-grey); }
.sqw-hero__bg { position: absolute; inset: 0; }
.sqw-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 63.4% 13.6%; }
.sqw-hero::before { content: ""; position: absolute; inset: 0; background: rgba(40, 40, 42, .48); z-index: 1; }
.sqw-hero__in { position: relative; z-index: 2; text-align: center; padding: calc(146 * var(--px)) 4vw calc(160 * var(--px)); width: 100%; }
.sqw-hero h2 { font-size: max(26px, calc(61 * var(--px))); line-height: 1.295; color: #fff; }
.sqw-hero p { font-size: max(16px, calc(25 * var(--px))); line-height: 1.325; max-width: calc(1130 * var(--px)); margin: calc(27 * var(--px)) auto 0; }
.sqw-hero p + p { margin-top: calc(17 * var(--px)); max-width: calc(1130 * var(--px)); }
.sqw-hero__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; margin-top: calc(189 * var(--px)); }
.sqw-hero__btns .sq-btn { min-width: min(221px, 80vw); min-height: max(54px, calc(70 * var(--px))); font-size: max(14px, calc(16 * var(--px))); }
.sqw-look { padding: calc(49 * var(--px)) 4vw calc(139 * var(--px)); text-align: center; background: var(--sq-off); }
.sqw-look h2, .sqw-h { font-size: max(19px, calc(34 * var(--px))); line-height: 1.265; max-width: calc(420 * var(--px)); margin: 0 auto; }
.sqw-g { --cols: 2; --gap: 3.75px; --pad: calc(60 * var(--px)); }
.sqw-g figure { aspect-ratio: 688 / 917; }
.sqw-galleries { padding: calc(50 * var(--px)) 4vw calc(54 * var(--px)); text-align: center; }
.sqw-galleries .sq-btn { min-width: min(337px, 80vw); min-height: max(54px, calc(70 * var(--px))); font-size: max(14px, calc(16 * var(--px))); margin-bottom: calc(132 * var(--px)); }
.sqw-galleries .sqw-h { max-width: none; }
.sqw-galleries p { max-width: calc(920 * var(--px)); min-width: min(100%, 300px); margin: calc(39 * var(--px)) auto 0; text-align: left; font-size: max(16px, calc(25 * var(--px))); line-height: 1.325; }
.sqw-car { position: relative; padding: calc(150 * var(--px)) 0 calc(240 * var(--px)); }
.sqw-car__track { list-style: none; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: max(260px, calc(407 * var(--px))); gap: calc(10 * var(--px)); overflow-x: auto; scrollbar-width: none; padding: 0 calc(60 * var(--px)); scroll-padding: 0 calc(60 * var(--px)); }
.sqw-car__track::-webkit-scrollbar { display: none; }
.sqw-car__item { scroll-snap-align: start; margin: 0; }
.sqw-car__item .ph { aspect-ratio: 407 / 661; overflow: hidden; }
.sqw-car__item img { width: 100%; height: 100%; object-fit: cover; }
.sqw-car__item h3 { font-size: max(16px, calc(19.6 * var(--px))); line-height: 1.27; margin: calc(38 * var(--px)) 0 calc(39 * var(--px)); }
.sqw-car__item .sq-btn { min-height: 48px; min-width: 115px; padding: 0 20px; font-size: max(12px, calc(12.4 * var(--px))); }
.sqw-car__btn { position: absolute; top: calc(150 * var(--px) + max(260px, calc(407 * var(--px))) * 661 / 407 / 2 - 20px); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.75); color: #fff; font-size: 18px; cursor: pointer; z-index: 2; }
.sqw-car__btn--prev { left: 24px; }
.sqw-car__btn--next { right: 24px; }
.sqw-how { padding: calc(99 * var(--px)) 4vw calc(209 * var(--px)); }
.sqw-how__box { max-width: calc(920 * var(--px)); min-width: min(100%, 300px); margin: 0 auto; }
.sqw-center { text-align: center; }
.sqw-how .sq-btn { min-width: min(279px, 80vw) !important; min-height: max(54px, calc(70 * var(--px))) !important; font-size: max(14px, calc(16 * var(--px))); }
.sqw-big { font-size: max(26px, calc(61 * var(--px))); line-height: 1.295; text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .1em; margin: calc(48 * var(--px)) 0 calc(49 * var(--px)); white-space: nowrap; }
@media (max-width: 760px) { .sqw-big { white-space: normal; } }
.sqw-how p, .sqw-terms .sqw-how__box p { font-size: max(16px, calc(25 * var(--px))); line-height: 1.325; margin: 0 0 calc(33 * var(--px)); }
.sqw-how p.sqw-gap { margin-bottom: calc(66 * var(--px)); }
.sqw-rule { display: block; width: calc(438 * var(--px)); max-width: 70%; border: 0; border-top: 1.5px solid currentColor; margin: calc(56 * var(--px)) 0 calc(41 * var(--px)); opacity: .9; }
.sqw-pk { padding: calc(151 * var(--px)) calc(60 * var(--px)) calc(150 * var(--px)); }
.sqw-pk__title { font-size: max(28px, calc(61 * var(--px))); line-height: 1.295; text-align: center; margin: 0 0 calc(69 * var(--px)); }
.sqw-pk__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14 * var(--px)) 0; text-align: center; font-size: max(13px, calc(16 * var(--px))); }
@media (max-width: 860px) { .sqw-pk__grid { grid-template-columns: 1fr; gap: 36px; } .sqw-pk__col .sqw-rule { margin: 10px auto 14px; } }
.sqw-pk__col h3 + p { white-space: nowrap; font-size: max(11px, calc(15 * var(--px))); letter-spacing: -0.035em; }
.sqw-pk__col h3 { font-size: max(18px, calc(26.8 * var(--px))); line-height: 1.3; margin: 0 0 calc(25 * var(--px)); }
.sqw-pk__col h4 { font: 300 max(13px, calc(16 * var(--px)))/1.33 var(--sq-body); text-decoration: underline; margin: 0 0 calc(16 * var(--px)); text-transform: uppercase; }
.sqw-pk__col p { margin: 0 0 calc(16 * var(--px)); line-height: 1.33; }
.sqw-pk__col .sqw-rule { width: calc(168 * var(--px)); margin: calc(8 * var(--px)) auto calc(26 * var(--px)); }
.sqw-pk__col .sqw-rule:last-child { width: calc(216 * var(--px)); margin-top: calc(20 * var(--px)); }
.sqw-pk__price { font-weight: 300; text-decoration: underline; margin-top: calc(16 * var(--px)) !important; }
.sqw-pk__col a { text-decoration: underline; }
.sqw-book { padding: calc(86 * var(--px)) 4vw calc(87 * var(--px)); display: flex; justify-content: center; gap: 11px; flex-wrap: wrap; }
.sqw-book .sq-btn { min-width: min(279px, 80vw); min-height: max(54px, calc(70 * var(--px))); font-size: max(14px, calc(16 * var(--px))); }
.sqw-work { padding: calc(136 * var(--px)) 0 calc(150 * var(--px)); }
.sqw-work__grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .sqw-work__grid { grid-template-columns: 627fr 126fr 627fr; gap: 0; } .sqw-work__side { grid-column: 3; } }
.sqw-work h2 { font-size: max(30px, calc(61 * var(--px))); line-height: 1.23; max-width: calc(420 * var(--px)); position: relative; }
.sqw-work h2 span { background: linear-gradient(transparent 55%, #000 55%, #000 59%, transparent 59%); }
.sqw-work__intro { width: max(100%, calc(680 * var(--px))); margin: calc(17 * var(--px)) 0 0; font-size: max(16px, calc(25 * var(--px))); line-height: 1.325; }
.sqw-work__intro p { margin: 0 0 calc(16 * var(--px)); }
.sqw-work__intro p:first-child { margin-bottom: calc(33 * var(--px)); }
.sqw-work__side { display: grid; gap: calc(52 * var(--px)); align-content: start; padding-top: calc(4 * var(--px)); }
.sqw-work__side figure { margin: 0; overflow: hidden; }
.sqw-work__side img { width: 100%; height: 100%; object-fit: cover; }
.sqw-work__side .a { aspect-ratio: 627 / 802; border-radius: 50% 50% 0 0 / calc(162 * var(--px)) calc(162 * var(--px)) 0 0; }
.sqw-work__side .b { aspect-ratio: 627 / 436; }
.sqw-terms { padding: calc(98 * var(--px)) 4vw calc(120 * var(--px)); }
.sqw-terms .sqw-h { max-width: none; text-align: center; margin: 0 0 calc(39 * var(--px)); }
.sqw-thanks { padding: calc(99 * var(--px)) 4vw calc(120 * var(--px)); text-align: center; }
.sqw-thanks h2 { font: 300 max(24px, calc(66.4 * var(--px)))/1.325 var(--sq-body); text-transform: uppercase; letter-spacing: 0; font-stretch: 100%; }
.sqw-thanks p { font-size: max(16px, calc(25 * var(--px))); line-height: 1.325; margin: 0 0 calc(16 * var(--px)); }
.sqw-thanks p:first-of-type { margin-top: calc(75 * var(--px)); }

/* the lightbox (tg.js 7): as Squarespace's, measured at 1500 x 735: 90% black, the photo
   contained 65 from the top and bottom and 103 from the sides, thin arrows 45 in, close top right */
.sq-grid figure img, .sqh-big figure img { cursor: pointer; }
.sq-lb { position: fixed; inset: 0; z-index: 1000; }
.sq-lb[hidden] { display: none; }
.sq-lb__bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .9); }
.sq-lb__img { position: absolute; top: 65px; left: 103px; width: calc(100% - 206px); height: calc(100% - 130px); object-fit: contain; }
.sq-lb__btn { position: absolute; background: none; border: 0; padding: 10px; color: #f5f5f3; cursor: pointer; line-height: 0; }
.sq-lb__close { top: 13px; right: 12px; }
.sq-lb__prev { left: 35px; top: 50%; transform: translateY(-50%); }
.sq-lb__next { right: 35px; top: 50%; transform: translateY(-50%); }
.sq-lb.is-single .sq-lb__prev, .sq-lb.is-single .sq-lb__next { display: none; }
@media (max-width: 760px) { .sq-lb__img { top: 56px; left: 12px; width: calc(100% - 24px); height: calc(100% - 112px); } .sq-lb__prev { left: 0; } .sq-lb__next { right: 0; } }

/* the wedding galleries (tg.js 8): the whole gallery on the page's paper, over the page and
   under the lightbox; photos keep their own shape in columns (3, 2 on a phone) */
.tg-gal { position: fixed; inset: 0; z-index: 900; overflow-y: auto; overscroll-behavior: contain; background: var(--sq-paper, #fafafa); color: var(--sq-ink, #000); }
.tg-gal[hidden] { display: none; }
.tg-gal__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px max(16px, calc(60 * var(--px, 1px))); background: var(--sq-paper, #fafafa); }
.tg-gal__title { margin: 0; font-family: var(--sq-head, "Archivo", sans-serif); font-stretch: 112%; font-weight: 600; font-size: clamp(18px, 2.2vw, 30px); line-height: 1.1; }
.tg-gal__close { flex: none; background: none; border: 0; padding: 10px; margin: -10px; color: inherit; cursor: pointer; line-height: 0; }
.tg-gal__note { margin: 0; padding: 0 max(16px, calc(60 * var(--px, 1px))); font-family: var(--sq-body, "Inter", sans-serif); }
.tg-gal__note:empty { display: none; }
.sq-grid.tg-gal__grid { display: block; columns: 3; column-gap: 6px; padding: 6px max(16px, calc(60 * var(--px, 1px))) 60px; }
.tg-gal__grid figure { aspect-ratio: auto; break-inside: avoid; margin: 0 0 6px; }
.tg-gal__grid img { height: auto; display: block; background: #eee; }
.tg-gal__more { height: 1px; }
@media (max-width: 640px) { .sq-grid.tg-gal__grid { columns: 2; column-gap: 4px; } .tg-gal__grid figure { margin-bottom: 4px; } }