.z-menu-open_0 { left: 12px; top: 4px; width: 30px; height: 48px; color: rgba(255,255,255,1); }
.z-menu-open_1 { left: 1068px; top: 754px; width: 28px; height: 21px; color: rgba(255,255,255,1); }
.z-menu-open_2 { left: 1136px; top: 754px; width: 28px; height: 21px; color: rgba(255,255,255,1); }
.z-menu-open_3 { left: 1103px; top: 754px; width: 28px; height: 21px; color: rgba(255,255,255,1); }
.z-menu-open_4 { left: 218px; top: 435px; width: 762px; height: 1px; background: currentColor; opacity:.5; transform: rotate(270deg); }
/* .z-menu-open_5 retired 2026-08-20 with the duplicate wordmark it positioned */
.z-menu-open_6 { left: 471px; top: 243px; width: 256px; height: 322px; }
.z-menu-open_7 { left: -15px; top: 54px; width: 1230px; height: 1px; background: currentColor; opacity:.5; }
.z-menu-open_8 { left: 803px; top: 318px; width: 320px; height: auto; }
.z-menu-open_9 { left: 795px; top: 425px; width: 327px; color: rgba(255,255,255,1); font-size: 17px; text-align: center; }
.z-menu-open_10 { left: 868px; top: 592px; width: 182px; height: 49px; }
.z-menu-open_11 { left: 6px; top: 211px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_12 { left: 6px; top: 266px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_13 { left: 6px; top: 321px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_14 { left: 6px; top: 376px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_15 { left: 6px; top: 431px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_16 { left: 6px; top: 486px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.menu-overlay a.t-title { text-decoration: none; }
.menu-overlay a.t-title:hover { opacity: .7; }
/* .z-menu-open_17 retired 2026-08-20: the Aperol INQUIRE / THE BLOG items are gone */
/* .z-menu-open_18 retired 2026-08-20: the Aperol INQUIRE / THE BLOG items are gone */
.z-menu-open_19 { left: 122px; top: 640px; width: 219px; color: rgba(255,255,255,1); text-transform: uppercase; line-height: 1.6; letter-spacing: 0.1em; font-size: 13px; font-family: 'Red Hat Display'; font-weight: 500; font-style: normal; }
.z-menu-open_20 { left: 100px; top: 606px; width: 263px; color: rgba(255,255,255,1); font-size: 13px; }
.z-menu-open_21 { left: 100px; top: 674px; width: 263px; color: rgba(255,255,255,1); font-size: 13px; }
.sec-on-image-aperol-menu { --h: 1px; background: transparent; overflow: visible; z-index: 2; }
/* homepage-style menu button: just a burger, top left (owner request
   2026-08-15; replaced the salon masthead on this page) */
.wmenu-btn { left: calc(36px - var(--gutter)); top: 30px; width: 42px; height: 32px;
  padding: 0; border: 0; background: none; cursor: pointer; z-index: 6;
  transition: opacity .3s; }
.wmenu-btn svg { fill: var(--cream); }
.wmenu-btn:hover { opacity: .55; }
/* ── Services hero: the Knockout Monogram (selected from the 2026-08-15 hero
   round; archived siblings in a_extra_sections/shuttergold/services-hero/).
   Event photography pans inside the giant SERVICES letterforms; hovering the
   word crossfades to a second scene. ── */
.sec-header-image { --h: max(100vh, 660px); background: #5a1a12; display: flex;
  /* hero shares the footer's dark-orange field (owner request 2026-08-15);
     per-colorway values live in the .sal-footer block below — keep in step */
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  /* window-height hero; top padding clears the fixed colorway-switcher pill;
     bottom padding clears the pinned service-area marquee */
  padding: 90px 24px 92px; }
/* Hero photo field (revision round 3, note 91), sharp. It was briefly blurred
   because the hero word used to be a knockout monogram playing photography
   inside the letterforms, which needed a quiet field behind it; the word is
   solid ivory now (owner, 2026-09-03), so the photo carries the section on its
   own. --kom-wash is set per colorway alongside the .sec-header-image values. */
.kom-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.kom-bg img { width: 100%; height: 100%; object-fit: cover; display: block;
  animation: komFade 1.6s .05s both; }
.kom-bg::after { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 78% at 50% 46%,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.34) 62%, rgba(0,0,0,.60) 100%),
    var(--kom-wash, rgba(90,26,18,.72)); }
/* every direct child of the hero rides above the photo */
.sec-header-image > *:not(.kom-bg) { position: relative; z-index: 1; }
/* homepage service-area marquee (css/home.css .twn-* rules copied 2026-08-16),
   pinned to the hero's bottom edge; keep in step with home.css */
.sec-header-image .twn-ticker { position: absolute; left: 0; right: 0; bottom: 0;
  overflow: hidden; white-space: nowrap; background: var(--dark);
  border-top: 1px solid rgba(224,162,78,.42);
  border-bottom: 1px solid rgba(224,162,78,.42); padding: 17px 0; }
.twn-track { display: inline-block; animation: twn-tick 52s linear infinite; }
.twn-track span { font-family: 'Red Hat Display', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--teal); }
@keyframes twn-tick { from { transform: translateX(0); }
                      to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .twn-track { animation: none; } }
/* wordmark centred above the hero word (owner 2026-08-20); ivory version
   because the hero sits on the dark orange field */
.kom-logo { display: block; width: 236px; height: auto; margin: -34px auto 28px;
  animation: komFade 1s .15s both; }
.kom-word { position: relative; margin: 0 0 10px; line-height: .9;
  animation: komFade 1.2s .3s both; }
/* Solid ivory (owner, 2026-09-03). This was the "Knockout Monogram" hero: the
   letterforms were transparent with event photography panning inside them, and
   hovering the word crossfaded to a second scene. That is all gone now, so the
   background-clip, the pan keyframes, the second .kom-b face and its hover are
   removed rather than left inert. Matches the ivory wordmark and paragraph. */
.kom-face { display: block; font-family: 'PonteLight', serif; font-weight: 400;
  font-size: 205px; letter-spacing: .01em; text-transform: uppercase;
  color: var(--cream); }
.kom-script { position: absolute; left: 4px; top: -44px; z-index: 2;
  font-family: var(--font-script); font-style: italic; font-size: 58px;
  color: var(--cream); transform: rotate(-4deg); }
.kom-para { max-width: 560px; font-size: 17px; line-height: 1.65; opacity: .92;
  color: var(--cream); margin-top: 26px; animation: komFade 1s .55s both; }
.kom-ctas { display: flex; gap: 18px; margin-top: 38px; animation: komFade 1s .85s both; }
.kom-cta { text-decoration: none; color: var(--cream); border: 1px solid rgba(252,251,249,.8);
  padding: 16px 32px; transition: all .4s; }
.kom-cta span { font-family: var(--font-label); font-weight: 500; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; }
.kom-cta:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.kom-ghost { border-color: rgba(252,251,249,.4); }
.kom-ghost:hover { background: transparent; border-color: var(--cream); color: var(--cream); }
@keyframes komFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
/* window height (owner request 2026-08-15), floored so the text block can
   never be crushed; content centers via the flex sct-wrap below */
/* overflow-x: clip added 2026-09-08. The taped print strips deliberately hang
   past the 1200px canvas: the original at left:-64px and, since round 3, its
   mirror at right:-64px. Rotated, each overhangs about 75px. Hanging off the
   LEFT is free, but the mirrored one hanging off the RIGHT widened the page
   to 1459px at a 1440 viewport and gave the whole site a 19px horizontal
   scroll. `clip` rather than `hidden` on purpose: hidden would make this a
   scroll container and break the parallax drift on the floating photos. */
.sec-known-for { --h: max(100vh, 840px); background: var(--white);
  overflow-x: clip; }
/* The Scatter (unfiltered round 2 pick 02, integrated 2026-08-16): centered
   essay, six snapshots drifting in the margins at their own depths (parallax
   in script.js, guarded), plus the homepage's printed booth strip carried over
   EXACTLY (z-floating-images_4 in css/home.css: 14218.jpg at native 1:3,
   132x396, rotate(-24deg), bare img painted over the photo beneath).
   Snapshot anchors use calc(50% +/- offset) so the composition re-centers
   with the window-height section. */
.sct-wrap { left: 0; top: 0; width: 1200px; height: 100%;
  display: flex; align-items: center; justify-content: center; }
.sct-essay { max-width: 600px; text-align: center; position: relative; z-index: 5; }
.sct-kicker { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink); opacity: .55; }
.sct-script { margin-top: 16px; font-family: var(--font-script); font-style: italic;
  font-size: 62px; line-height: 1; color: #5a1a12; }
.sct-head { margin-top: 26px; font-family: 'PonteLight', serif; font-size: 33px;
  line-height: 1.28; text-transform: uppercase; color: var(--ink); }
.sct-head em { font-family: var(--font-heading); font-style: italic;
  text-transform: none; font-size: 1.15em; letter-spacing: 0; color: #5a1a12; }
.sct-rule { width: 72px; height: 1px; background: var(--ink); opacity: .4;
  margin: 28px auto; }
/* both paragraphs share one treatment: same face, size, leading and colour
   (owner request 2026-08-20) — no lead-paragraph emphasis */
.sct-flow, .sct-para { font-family: var(--font-body); font-size: 16px;
  line-height: 1.7; color: var(--ink); opacity: 1; }
.sct-para { margin-top: 22px; }
.sct-cta { display: inline-flex; margin-top: 32px; padding: 15px 30px;
  border: 1px solid var(--ink); color: var(--ink); text-decoration: none;
  background: var(--white); transition: all .4s; }
.sct-cta span { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; }
.sct-cta:hover { background: var(--ink); color: var(--white); }
.sct-fl { position: absolute; background: #fff; padding: 7px; z-index: 1;
  box-shadow: 0 14px 34px rgba(37,31,24,.2); transition: box-shadow .4s;
  will-change: transform; }
/* cream tape strips holding each snapshot down (round 2 "taped & torn"
   detail, added on owner request 2026-08-16) */
.sct-fl::before, .sct-fl::after { content: ""; position: absolute; width: 74px;
  height: 24px; background: rgba(245,234,217,.85);
  border: 1px solid rgba(37,31,24,.08); box-shadow: 0 2px 6px rgba(37,31,24,.08); }
.sct-fl::before { left: -26px; top: -10px; transform: rotate(-38deg); }
.sct-fl::after { right: -26px; bottom: -10px; transform: rotate(-38deg); }
/* top-right photo: one tape piece centered on the top edge instead of the
   corner pair (owner request 2026-08-16) */
.sct-4::before { left: 50%; top: -12px; transform: translateX(-50%) rotate(-3deg); }
.sct-4::after { content: none; }
.sct-fl .ph { display: block; object-fit: cover; width: 100%; height: 100%; }
.sct-fl:hover { box-shadow: 0 22px 48px rgba(37,31,24,.3); }
.sct-1 { left: -18px; top: calc(50% - 402px); width: 214px; height: 266px; }
.sct-3 { left: 12px; top: calc(50% + 148px); width: 212px; height: 180px; }
.sct-4 { right: -12px; top: calc(50% - 384px); width: 200px; height: 250px; }
.sct-6 { right: -8px; top: calc(50% + 140px); width: 228px; height: 186px; }
/* homepage strip, verbatim geometry: 132x396 native 1:3, rotate(-24deg) */
.sct-strip-w { position: absolute; left: -64px; top: calc(50% - 250px);
  width: 132px; height: 396px; z-index: 2; will-change: transform; margin: 0; }
.sct-strip { width: 132px; height: 396px; transform: rotate(-24deg);
  display: block; object-fit: cover; }
/* the tape piece rides the strip's rotated top edge (edge midpoint of a
   132x396 img rotated -24deg about its center lands at (-14,17) in wrapper
   coords); ::after paints above the img */
.sct-strip-w::after { content: ""; position: absolute; left: -52px; top: 5px;
  width: 74px; height: 24px; background: rgba(245,234,217,.85);
  border: 1px solid rgba(37,31,24,.08); box-shadow: 0 2px 6px rgba(37,31,24,.08);
  transform: rotate(-24deg); }
/* the mirrored second strip (round 3, note 92). Same 132x396 geometry, the
   rotation and the tape piece flipped so it leans toward the essay. The tape
   edge midpoint mirrors to (+14,17), hence right:-52px. */
.sct-strip-w2 { left: auto; right: -64px; top: calc(50% - 236px); }
.sct-strip-r { transform: rotate(24deg); }
.sct-strip-w2::after { left: auto; right: -52px; transform: rotate(24deg); }
:root[data-colorway="oxblood-glow"] .sct-script, :root[data-colorway="oxblood-glow"] .sct-head em { color: #5a1a12; }
:root[data-colorway="coffee-espresso"] .sct-script, :root[data-colorway="coffee-espresso"] .sct-head em { color: #241009; }
:root[data-colorway="ew-chestnut"] .sct-script, :root[data-colorway="ew-chestnut"] .sct-head em { color: #3a0e04; }
:root[data-colorway="ew-espresso"] .sct-script, :root[data-colorway="ew-espresso"] .sct-head em { color: #2c0d06; }
:root[data-colorway="champagne-coffee"] .sct-script, :root[data-colorway="champagne-coffee"] .sct-head em { color: #34150f; }
:root[data-colorway="champagne-coffee-red"] .sct-script, :root[data-colorway="champagne-coffee-red"] .sct-head em { color: #34150f; }
/* The Spine (three-options round 2 variant 01, selected 2026-08-15): a center
   hairline draws down the section and the three promises zigzag left/right of
   it, hung from circled numbers on the line. Entrance is IO-gated by script.js
   (.tos-prep on load, .tos-on in view); without JS the section renders static. */
/* dark marine ground (owner request 2026-08-16); type flips to cream */
/* Round 3 (notes 99/101): the thread went from three promises to a seven-step
   timeline, so the fixed 980px canvas no longer fits. The section is auto
   height and the wrap returns to normal flow; `.cv > *` is absolute in this
   1200px canvas model (style.css), so the wrap has to opt back out explicitly. */
.sec-three-options { --h: auto; background: var(--dark); color: var(--cream); }
.tos-wrap { position: static; width: 1200px; margin: 0 auto;
  padding: 96px 0 104px; }
.tos-top { text-align: center; margin-bottom: 54px; }
.tos-label { letter-spacing: .2em; font-size: 13px; color: rgba(252,251,249,.7); }
.tos-script { font-family: var(--font-script); font-size: 56px; line-height: 1;
              margin-top: 4px; }
.tos-thread { position: relative; }
.tos-thread::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
                      width: 1px; background: rgba(252,251,249,.3); }
.tos-entry { position: relative; width: 460px; }
.tos-left { margin-left: 70px; text-align: right; }
.tos-right { margin-left: 670px; text-align: left; }
.tos-entry + .tos-entry { margin-top: 58px; }
.tos-chip { position: absolute; top: 4px; width: 34px; height: 34px; border-radius: 50%;
            border: 1px solid var(--teal); background: var(--dark); color: var(--teal);
            font-family: var(--font-label); font-weight: 600; font-size: 12px;
            letter-spacing: .05em; display: flex; align-items: center;
            justify-content: center; transition: background .45s, color .45s; z-index: 2; }
.tos-left .tos-chip { right: -87px; }
.tos-right .tos-chip { left: -87px; }
.tos-entry:hover .tos-chip { background: var(--teal); color: var(--white); }
.tos-title { font-family: var(--font-title); font-size: 42px; line-height: 1.05;
             margin-bottom: 12px; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.tos-left:hover .tos-title { transform: translateX(-8px); }
.tos-right:hover .tos-title { transform: translateX(8px); }
.tos-copy { font-size: 16px; line-height: 1.66; color: rgba(252,251,249,.8); }
.tos-cap { margin-top: 12px; font-family: 'PonteExtraLightItalic', serif; font-size: 17px;
           color: var(--teal); }
.tos-prep .tos-thread::before { transform: scaleY(0); transform-origin: top; }
.tos-on .tos-thread::before { animation: tos-draw 1.4s cubic-bezier(.2,.7,.2,1) .2s forwards; }
.tos-prep .tos-entry { opacity: 0; }
.tos-prep .tos-left { transform: translateX(-34px); }
.tos-prep .tos-right { transform: translateX(34px); }
.tos-on .tos-entry { animation: tos-in .9s cubic-bezier(.2,.7,.2,1) forwards; }
.tos-on .tos-entry:nth-child(1) { animation-delay: .5s; }
.tos-on .tos-entry:nth-child(2) { animation-delay: .75s; }
.tos-on .tos-entry:nth-child(3) { animation-delay: 1s; }
/* steps four to seven, added with the timeline (round 3). Same .25s cadence;
   without these the later entries keep .tos-prep's opacity:0 and never appear. */
.tos-on .tos-entry:nth-child(4) { animation-delay: 1.25s; }
.tos-on .tos-entry:nth-child(5) { animation-delay: 1.5s; }
.tos-on .tos-entry:nth-child(6) { animation-delay: 1.75s; }
.tos-on .tos-entry:nth-child(7) { animation-delay: 2s; }
/* A seven-step list wants tighter, more list-like type than the three big
   promises did; 42px over seven entries ran the section past three screens. */
.tos-thread-steps .tos-title { font-size: 30px; margin-bottom: 8px; }
.tos-thread-steps .tos-entry + .tos-entry { margin-top: 40px; }
@keyframes tos-draw { to { transform: scaleY(1); } }
@keyframes tos-in { to { opacity: 1; transform: none; } }
/* real-weddings video band: two looping booth clips side by side. The clips
   are portrait; cover-cropping in wide cells hides half the frame, so the
   band is tall and the crop window rides the upper portion of the video
   where the people are (owner: "can't see the people all the way") */
.sec-full-image { --h: 660px; background: var(--cream); overflow: hidden; }
/* video filmstrip (owner 2026-08-15, replacing the two-up split): six
   portrait tiles centered as one strip wider than the viewport, so the four
   middle videos read whole and the outer two are deliberately cut off at the
   screen edges. No caption. Strip is centered with translate, .sec overflow
   hidden does the cropping. Tile aspect widened per owner ("too skinny"). */
.vst-strip { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); display: flex; gap: 18px; }
/* four wider tiles (owner 2026-08-16, was six at 310x520: fewer, bigger
   videos on screen and ~18MB less video payload) */
.vst-tile { flex: none; width: 440px; height: 560px; object-fit: cover;
  object-position: 50% 35%; display: block; background: rgba(13,25,28,.08); }
/* ---- wedding packages: the twins (packages round variant 08, selected
   2026-08-15) ---- the two ALL-INCLUSIVE packages lead as a matched formal
   card pair (matted photo, centered ruled inclusion lists, solid booking
   CTAs); the three base packages step back to small outline cards below.
   Replaced the sfx split-folio chapters AND the aix all-inclusive strip
   together (owner brief: display base packages, highlight all-inclusive).
   Entrance is IO-gated by script.js (.twx-prep on load, .twx-on in view);
   renders static without JS. */
/* dark ground (owner request 2026-08-15; the process section matched it until
   2026-08-16, when the journal flipped to cream); white twin/mini cards sit
   on it unchanged */
.sec-packages { --h: auto; background: var(--dark); }
.twx-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; padding: 130px 0 140px; }
.twx-head { text-align: center; margin-bottom: 36px; }
.twx-kicker { font-family: var(--font-label); font-weight: 600; font-size: 12.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--teal); }
/* section lede added round 3 (note 94) */
.twx-lede { max-width: 760px; margin: 20px auto 0; font-family: var(--font-body);
  font-size: 15.5px; line-height: 1.7;
  color: color-mix(in srgb, var(--cream) 82%, transparent); }
.twx-script { font-family: var(--font-script); font-size: 54px; line-height: 1.1;
  margin-top: 4px; color: var(--cream); }
.twx-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
/* three all-inclusive tiers from round 3 (note 94). Tighter gutter and a
   slightly smaller list so a third column fits the same 1200px canvas. */
.twx-trio { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.twx-trio .twx-twin { padding-left: 26px; padding-right: 26px; }
.twx-trio .twx-twin h2 { font-size: 25px; }
.twx-trio .twx-inc li { font-size: 13.5px; padding: 8px 0; }
.twx-trio .twx-cta { font-size: 11.5px; padding-left: 14px; padding-right: 14px; }
.twx-twin { position: relative; background: var(--white);
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  padding: 34px 44px 40px; text-align: center; display: flex; flex-direction: column; }
.twx-twin::after { content: ''; position: absolute; inset: 7px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); pointer-events: none; }
.twx-mat { position: relative; padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); margin-bottom: 24px; }
.twx-ph { overflow: hidden; height: 200px; }
.twx-ph img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.8s cubic-bezier(.2,.7,.2,1); }
.twx-twin:hover .twx-ph img { transform: scale(1.05); }
.twx-ribbon { position: absolute; top: 22px; left: -9px; z-index: 2; background: var(--ink);
  color: var(--cream); font-family: var(--font-label); font-weight: 600; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; padding: 6px 14px; }
.twx-no { font-family: 'BilletScriptOpti', cursive; font-size: 22px; color: var(--teal); }
.twx-twin h2 { font-family: var(--font-serif); font-weight: 400; font-size: 31px;
  line-height: 1.1; margin: 4px 0 18px; }
.twx-inc { list-style: none; margin: 0 0 24px; padding: 0; }
.twx-inc li { padding: 9px 0; font-size: 14.5px; line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 82%, transparent); }
.twx-inc li + li { border-top: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); }
.twx-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 30px; background: var(--ink); color: var(--cream); text-decoration: none;
  font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; border: 1px solid var(--ink); transition: all .4s; }
.twx-cta:hover { background: transparent; color: var(--ink); }
.twx-base { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; margin-top: 44px; }
/* four options since 2026-09-08 (Editorial Portrait Lounge). Same card, one
   more column; the cameo and copy step down so four fit the 1200px canvas. */
.twx-base-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.twx-base-4 .byo-card { padding-left: 20px; padding-right: 20px; }
.twx-base-4 .byo-cameo { width: 124px; height: 124px; }
.twx-base-4 .byo-t { font-size: 19px; }
.twx-base-4 .byo-d { font-size: 12.5px; }
/* her "newest experience" flag on the new card */
.byo-card-new { position: relative; }
.byo-flag { position: absolute; top: -1px; left: -1px; background: var(--teal);
  color: var(--white); font-family: var(--font-label); font-weight: 600;
  font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
  padding: 6px 10px; }
.twx-lbl { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px;
  font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: color-mix(in srgb, var(--cream) 65%, transparent); }
.twx-lbl i { flex: 1; height: 1px; background: color-mix(in srgb, var(--cream) 25%, transparent); }
/* base row: cameo cards (build-your-own round pick 04, integrated 2026-08-16):
   hairline cards on the section's dark ground with a circular booth photo and
   cream type, so the client sees each booth; replaced the white
   invert-on-hover minis */
.byo-card { border: 1px solid color-mix(in srgb, var(--cream) 30%, transparent);
  padding: 34px 28px 30px; display: flex; flex-direction: column; align-items: center;
  text-align: center; color: var(--cream); transition: background .5s, border-color .5s; }
.byo-card:hover { background: color-mix(in srgb, var(--cream) 6%, transparent);
  border-color: color-mix(in srgb, var(--cream) 50%, transparent); }
.byo-cameo { width: 150px; height: 150px; border-radius: 50%; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cream) 45%, transparent); padding: 6px;
  margin-bottom: 20px; }
.byo-cameo .byo-ph { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.byo-ph img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.byo-card:hover .byo-ph img { transform: scale(1.08); }
/* The lounge cameo carries her real photo since 2026-09-12, the only full-length
   shot of the four: faces at 13%-28% of a 1067x1600 frame, which a centred
   circular crop cuts through. The other three cameos are booth shots framed
   close and stay centred. */
.byo-card-new .byo-ph img { object-position: 50% 32%; }
.byo-t { font-family: var(--font-serif); font-size: 22px; margin-bottom: 8px; }
.byo-d { font-size: 13.5px; line-height: 1.55;
  color: color-mix(in srgb, var(--cream) 75%, transparent); margin-bottom: 18px; }
.byo-card a { margin-top: auto; font-family: var(--font-label); font-weight: 600;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream);
  text-decoration: none; border-bottom: 1px solid var(--teal); padding-bottom: 3px; }
.byo-card a:hover { color: var(--teal); }
.twx-prep .twx-twin, .twx-prep .twx-base { opacity: 0; transform: translateY(28px); }
.twx-on .twx-twin, .twx-on .twx-base { animation: twx-up .9s cubic-bezier(.2,.7,.2,1) forwards; }
.twx-on .twx-twin:nth-child(2) { animation-delay: .15s; }
.twx-on .twx-twin:nth-child(3) { animation-delay: .3s; }
.twx-on .twx-base { animation-delay: .3s; }
@keyframes twx-up { to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .twx-wrap { width: auto; padding: 60px 24px 68px; }
  .twx-duo { grid-template-columns: 1fr; gap: 26px; }
  .twx-twin { padding: 26px 24px 30px; }
  .twx-script { font-size: 42px; }
  .twx-base { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
}
/* ADDITIONAL OFFERINGS: promenade rail (selected variant 04, 2026-08-15).
   Flow layout, no .cv canvas; gutters align to the 1200px canvas + 97px inset. */
/* fixed damask wallpaper under a dark wash, same treatment as the homepage's
   three-options section (moved here from the love-story section, owner
   request 2026-08-15); section text flips to cream, cards stay white */
.sec-other-a-la-carte { --h: auto; min-height: 900px;
  background:
    linear-gradient(color-mix(in srgb, var(--dark) 60%, transparent),
                    color-mix(in srgb, var(--dark) 60%, transparent)),
    url('../assets/wallpaper-bg.webp');
  background-size: auto, 520px auto; background-repeat: no-repeat, repeat;
  background-attachment: fixed; color: var(--cream);
  --oalc-gut: 90px; /* fixed: section hugs the left screen edge (owner request 2026-08-15) */ }
.oalc-wrap { padding: 112px 0 104px; display: flex; flex-direction: column; }
.oalc-head { padding: 0 var(--oalc-gut); display: flex; align-items: flex-end;
  justify-content: space-between; }
  /* uncapped: the CTA rides the right screen edge at the section gutter
     (owner request 2026-08-15; previously capped to card 2's right edge) */
.oalc-kicker { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(252,251,249,.65);
  margin-bottom: 10px; }
.oalc-script { font-family: var(--font-script); font-size: 52px; line-height: 1; }
.oalc-btn { height: 54px; padding: 0 34px; border-color: rgba(252,251,249,.8);
  color: var(--cream); }
.oalc-btn:hover { background: var(--cream); color: var(--ink);
  border-color: var(--cream); }
.oalc-rail { margin-top: 46px; display: flex; gap: 28px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 6px var(--oalc-gut) 26px;
  scroll-padding-left: var(--oalc-gut); scrollbar-width: none; }
.oalc-rail::-webkit-scrollbar { display: none; }
.oalc-card { flex: 0 0 520px; scroll-snap-align: start; background: var(--white);
  border: 1px solid rgba(37,31,24,.14); color: var(--ink); }
.oalc-win { height: 380px; overflow: hidden; }
.oalc-win .ph { width: 100%; height: 100%; transition: transform 5s ease; }
.oalc-card:hover .oalc-win .ph { transform: scale(1.05); }
.oalc-plate { padding: 28px 30px 30px; }
.oalc-row { display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; margin-bottom: 12px; }
.oalc-t { font-family: var(--font-title); font-size: 32px; line-height: 1.1; }
.oalc-price { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(37,31,24,.6);
  white-space: nowrap; }
.oalc-d { font-family: var(--font-body); font-size: 15px; line-height: 1.65;
  color: rgba(37,31,24,.85); }
.oalc-ctrl { padding: 30px var(--oalc-gut) 0; display: flex; align-items: center; gap: 26px; }
.oalc-arrow { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(252,251,249,.8);
  background: none; cursor: pointer; color: var(--cream); font-size: 18px; line-height: 1;
  transition: all .3s; font-family: var(--font-body); }
.oalc-arrow:hover { background: var(--cream); color: var(--ink); }
.oalc-track { flex: 0 1 300px; height: 2px; background: rgba(252,251,249,.25); position: relative; }
.oalc-track i { position: absolute; left: 0; top: 0; height: 100%; width: 25%;
  background: var(--cream); transition: width .25s ease; }
.oalc-count { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; color: rgba(252,251,249,.7); }
/* Core values: arrow-stepped spread (chosen variant 12 "the spread",
   2026-08-15). One .cvs-wrap canvas child (absolute via the .cv blanket);
   everything inside flows. Photo pane crossfades per value; prev/next use
   the site's long-tail arrow; JS in script.js (.cvs- block). */
.sec-core-values { --h: 830px; background: rgba(255,255,255,1); }
.cvs-wrap { left: 0; top: 0; width: 1200px; height: 100%;
  display: grid; grid-template-columns: 440px 1fr; column-gap: 110px;
  align-items: center; padding: 88px 0 84px; }
.cvs-pane { position: relative; height: 560px; }
.cvs-shot { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.cvs-shot.on { opacity: 1; }
.cvs-shot .ph { width: 100%; height: 100%; filter: saturate(.9); }
.cvs-pane::after { content: ""; position: absolute; left: 14px; top: 14px;
  right: -14px; bottom: -14px; border: 1px solid rgba(37,31,24,.3);
  pointer-events: none; }
.cvs-kicker { font-family: var(--font-label); font-weight: 600; font-size: 13px;
  letter-spacing: .24em; text-transform: uppercase; color: rgba(37,31,24,.6);
  display: flex; align-items: center; gap: 16px; }
.cvs-kicker::after { content: ""; width: 64px; height: 1px; background: var(--ink);
  opacity: .4; }
.cvs-head { margin-top: 14px; font-family: var(--font-serif); font-weight: 400;
  font-size: 54px; line-height: 1; letter-spacing: .02em; }
.cvs-stage { position: relative; height: 300px; margin-top: 26px; }
.cvs-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(14px);
  pointer-events: none; transition: opacity .55s ease, transform .55s ease; }
.cvs-slide.on { opacity: 1; transform: none; pointer-events: auto;
  transition-delay: .1s; }
.cvs-no { font-family: var(--font-script); font-size: 40px; line-height: 1;
  color: var(--teal); }
.cvs-ti { margin-top: 10px; font-family: var(--font-title); font-weight: 400;
  font-size: 46px; line-height: 1.12; }
.cvs-ti em { font-family: var(--font-script); font-style: normal; font-size: 53px;
  letter-spacing: 0; color: var(--teal); }
.cvs-body { margin-top: 20px; max-width: 520px; font-size: 17px; line-height: 1.7;
  color: rgba(37,31,24,.82); }
.cvs-nav { display: flex; align-items: center; gap: 28px; margin-top: 14px; }
.cvs-arr { background: none; border: 0; cursor: pointer; padding: 14px 8px;
  color: var(--ink); opacity: .6; transition: opacity .35s, transform .35s; }
.cvs-arr svg { width: 58px; height: 11px; display: block; fill: currentColor; }
.cvs-arr:hover { opacity: 1; }
.cvs-prev svg { transform: scaleX(-1); }
.cvs-next:hover { transform: translateX(6px); }
.cvs-prev:hover { transform: translateX(-6px); }
.cvs-count { font-family: var(--font-serif); font-size: 16px; letter-spacing: .22em;
  color: rgba(37,31,24,.6); }
@media (max-width: 900px) {
  .cvs-wrap { display: flex; flex-direction: column; gap: 30px;
    padding: 56px 20px 60px; }
  .cvs-pane { position: relative; width: 100%; height: 360px; }
  .cvs-shot { position: absolute; }
  .cvs-shot .ph { height: 100%; }
  .cvs-head { font-size: 38px; }
  .cvs-stage { height: 380px; }
  .cvs-ti { font-size: 34px; }
  .cvs-ti em { font-size: 40px; }
}
.sec-gallery-cta { --h: 620px; background: var(--cream); }
/* gallery-cta sideboard (round-3 pick 03): the weddings page's closer forks to
   the corporate and social pages as two hairline list rows. Entrance plays on
   first view (.sbd-prep on load, .sbd-on in view); static without JS. Accent
   rides var(--brown) so every colorway remaps it. */
.sbd-left { left: 8px; top: 0; bottom: 0; width: 520px; display: flex;
            flex-direction: column; justify-content: center; }
.sbd-script { font-family: var(--font-script); font-size: 38px; color: var(--brown); }
.sbd-title { margin-top: 16px; font-family: var(--font-title); font-weight: 400;
             font-size: 52px; line-height: 1.14; }
.sbd-title em { font-family: var(--font-script); font-style: italic; text-transform: none;
                letter-spacing: 0; font-size: 1.02em; line-height: 0; }
.sbd-micro { margin-top: 26px; font-size: 13px; color: var(--ink); opacity: .6; }
.sbd-list { left: 620px; right: 8px; top: 50%; transform: translateY(-50%); }
.sbd-row { display: flex; align-items: center; gap: 26px; padding: 32px 6px;
           text-decoration: none; color: var(--ink); }
.sbd-row + .sbd-row { border-top: 1px solid rgba(37,31,24,.25); }
.sbd-th { width: 104px; height: 104px; overflow: hidden; flex: none; }
.sbd-th img { width: 100%; height: 100%; object-fit: cover; display: block;
              transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.sbd-row.a .sbd-th img { object-position: 50% 32%; }
.sbd-row.b .sbd-th img { object-position: 50% 26%; }
.sbd-row:hover .sbd-th img { transform: scale(1.07); }
.sbd-body { flex: 1; }
.sbd-nm { display: block; font-family: var(--font-title); font-size: 28px;
          letter-spacing: .04em; }
.sbd-d { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5;
         color: var(--ink); opacity: .7; }
.sbd-arw { font-family: var(--font-label); font-weight: 500; font-size: 12px;
           letter-spacing: .18em; text-transform: uppercase; color: var(--brown);
           white-space: nowrap; }
.sbd-arw i { font-style: normal; display: inline-block; transition: transform .4s; }
.sbd-row:hover .sbd-arw i { transform: translateX(6px); }
.sbd-prep .sbd-left, .sbd-prep .sbd-row { opacity: 0; }
.sbd-on .sbd-left { animation: sbd-rise 1s .1s both; }
.sbd-on .sbd-row:nth-child(1) { animation: sbd-rise 1s .3s both; }
.sbd-on .sbd-row:nth-child(2) { animation: sbd-rise 1s .45s both; }
@keyframes sbd-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sec-stick-top-menu-white { --h: 53px; background: var(--white); position: fixed;
  top: 0; left: 0; right: 0; z-index: 40; transform: translateY(-100%);
  transition: transform .4s; border-bottom: 1px solid rgba(37,31,24,.28); }
.stm-in { height: 53px; display: flex; align-items: center; justify-content: center; gap: 44px; }
.stm-in a { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.stm-in a:hover { opacity: .6; }
.stm-in a[aria-current] { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.stm-burger { position: absolute; left: 24px; top: 10px; width: 42px; height: 32px;
  background: none; border: 0; cursor: pointer; }
.stm-burger svg { fill: rgba(89,87,84,1); }
.stm-burger:hover { opacity: .55; }
.z-stick-top-menu-white_0 { left: calc(600px - 50vw); top: 54px; width: 100vw; height: 1px; background: currentColor; opacity:.5; }
.z-stick-top-menu-white_1 { left: 23px; top: 5px; width: 80px; height: 44px; color: rgba(89,87,84,1); }
.z-stick-top-menu-white_2 { left: 1014px; top: 17px; width: 186px; font-size: 12px; }
.z-stick-top-menu-white_3 { left: 244px; top: 17px; width: 47px; color: rgba(37,31,24,1); font-size: 12px; }
.z-stick-top-menu-white_4 { left: 347px; top: 17px; width: 55px; color: rgba(37,31,24,1); font-size: 12px; }
.z-stick-top-menu-white_5 { left: 458px; top: 17px; width: 88px; color: rgba(37,31,24,1); font-size: 12px; }
.z-stick-top-menu-white_6 { left: 602px; top: 17px; width: 77px; color: rgba(37,31,24,1); font-size: 12px; }
.z-stick-top-menu-white_7 { left: 735px; top: 17px; width: 77px; color: rgba(37,31,24,1); font-size: 12px; }
.z-stick-top-menu-white_8 { left: 868px; top: 17px; width: 89px; color: rgba(37,31,24,1); font-size: 12px; }
/* ── Reviews: mirrors the homepage's kind-words slider (css/home.css .rvw
   rules, copied 2026-08-15 when the transcription reviews-slider was replaced
   by the homepage section; keep the two in step if home.css changes). ── */
.sec-reviews { --h: 100vh; position: relative; overflow: hidden; color: var(--cream);
  background-image: url("../assets/portfolio/dscf0036.jpg");
  background-size: cover; background-position: center;
  background-attachment: fixed; }
.sec-reviews::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.66)); }
.rvw { position: relative; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 0 140px; }
.rvw-eyebrow { font-family: var(--font-label); font-weight: 500; font-size: 12px;
  letter-spacing: .24em; text-transform: uppercase; color: rgba(252,251,249,.75); }
.rvw-script { font-family: var(--font-script); font-size: 48px; line-height: 1;
  color: #fff; margin-top: 12px; }
.rvw-rule { width: 420px; height: 1px; background: rgba(252,251,249,.45); }
.rvw-r-top { margin: 32px 0 26px; }
.rvw-r-bot { margin: 26px 0 24px; }
.rvw-stage { min-height: 190px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; width: 100%; }
.rvw-slide { display: none; }
.rvw-slide.on { display: block; }
.rvw-q { font-family: var(--font-title); font-size: 40px; line-height: 1.18;
  text-transform: uppercase; max-width: 860px; }
.rvw-q em { font-style: normal; }
.rvw-att { font-family: var(--font-heading); font-style: italic; font-size: 19px;
  color: rgba(252,251,249,.85); margin-top: 24px; }
.rvw-nav { display: flex; align-items: center; gap: 32px; }
.rvw-aro { background: none; border: 0; cursor: pointer; padding: 12px 8px;
  opacity: .85; transition: opacity .3s, transform .3s; }
.rvw-aro:hover { opacity: 1; }
.rvw-prev:hover { transform: translateX(-5px); }
.rvw-next:hover { transform: translateX(5px); }
.rvw-aro svg { width: 54px; height: 10px; fill: var(--cream); display: block;
  filter: drop-shadow(0 1px 5px rgba(13,25,28,.5)); }
.rvw-prev svg { transform: scaleX(-1); }
.rvw-count { font-family: var(--font-heading); font-style: italic; font-size: 16px;
  color: rgba(252,251,249,.7); min-width: 58px; }
.rvw-more { display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 30px; border: 1px solid rgba(252,251,249,.55);
  color: var(--cream); text-decoration: none; padding: 15px 42px;
  font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  transition: background .4s ease, color .4s ease, border-color .4s ease; }
.rvw-more:hover { background: var(--cream); color: var(--dark); border-color: var(--cream); }
/* ── Footer: mirrors the homepage's "salone" footer (css/home.css .sal-*
   rules, copied 2026-08-15 when the transcription footer was replaced by the
   homepage section; keep the two in step if home.css changes). ── */
/* Footer: "the salone" (footer variants round pick, 2026-07-18) */
.sal-footer { background: var(--teal); color: var(--white); position: relative;
              overflow: hidden; }
.sal-grid { display: grid; grid-template-columns: 1fr 340px;
            width: min(1200px, calc(100% - 80px)); margin: 0 auto;
            padding: 78px 0 0; gap: 0 80px; }
.sal-invite { padding-right: 40px; }
.sal-logo { display: block; width: 240px; height: auto; margin-bottom: 26px; }
.sal-script { font-family: var(--font-script); font-size: 72px; line-height: 0.85;
              margin-bottom: 6px; }
.sal-h { font-family: var(--font-serif); font-weight: 400; font-size: 74px;
         line-height: 1.02; text-transform: uppercase; letter-spacing: .01em; }
.sal-h em { font-family: 'MrsSaintDelafield', cursive; font-style: normal;
            text-transform: none; font-size: 96px; letter-spacing: 0; line-height: .9; }
.sal-p { font-family: var(--font-body); font-size: 17px; line-height: 1.65;
         max-width: 440px; margin: 26px 0 38px; opacity: .9; }
.sal-nl { display: flex; align-items: flex-end; max-width: 520px; }
.sal-nl input { flex: 1; background: transparent; border: 0;
                border-bottom: 1px solid rgba(255,255,255,.6); outline: none;
                color: var(--white); font-family: var(--font-label);
                font-weight: 500; font-size: 13px; letter-spacing: .14em;
                text-transform: uppercase; height: 44px; }
.sal-nl input::placeholder { color: rgba(255,255,255,.65); }
.sal-nl button { background: transparent; border: 1px solid var(--white);
                 color: var(--white); font-family: var(--font-label);
                 font-weight: 600; font-size: 12px; letter-spacing: .18em;
                 text-transform: uppercase; padding: 14px 26px; margin-left: 18px;
                 cursor: pointer; transition: all .4s; }
.sal-nl button:hover { background: var(--white); color: var(--ink); }
.sal-nl .sal-tel { flex: 1; border-bottom: 1px solid rgba(255,255,255,.6);
                   color: var(--white); font-family: var(--font-label);
                   font-weight: 500; font-size: 13px; letter-spacing: .14em;
                   text-transform: uppercase; height: 44px;
                   display: flex; align-items: center; }
.sal-nl .sal-go { background: transparent; border: 1px solid var(--white);
                  color: var(--white); font-family: var(--font-label);
                  font-weight: 600; font-size: 12px; letter-spacing: .18em;
                  text-transform: uppercase; padding: 14px 26px; margin-left: 18px;
                  text-decoration: none; white-space: nowrap; transition: all .4s; }
.sal-nl .sal-go:hover { background: var(--white); color: var(--ink); }
.sal-rail { border-left: 1px solid rgba(255,255,255,.35); padding-left: 52px;
            display: flex; flex-direction: column; }
.sal-rail a { display: flex; align-items: center; justify-content: space-between;
              font-family: var(--font-label); font-weight: 600; font-size: 13px;
              letter-spacing: .2em; text-transform: uppercase; padding: 15px 0;
              border-bottom: 1px solid rgba(255,255,255,.3);
              text-decoration: none; }
.sal-rail a:first-child { padding-top: 4px; }
.sal-arw { opacity: 0; transform: translateX(-10px); transition: all .35s ease;
           font-family: var(--font-body); }
.sal-rail a:hover .sal-arw { opacity: 1; transform: none; }
.sal-rail-foot { margin-top: auto; padding: 22px 0 8px; font-size: 11px;
                 letter-spacing: .18em; text-transform: uppercase;
                 font-family: var(--font-label); font-weight: 600; opacity: .75;
                 line-height: 2; }
.sal-ticker { margin-top: 64px; border-top: 1px solid rgba(255,255,255,.35);
              overflow: hidden; white-space: nowrap; padding: 20px 0 24px; }
.sal-ticker-track { display: inline-block;
                    animation: sal-tick 38s linear infinite; }
.sal-ticker span { font-family: var(--font-serif); font-size: 44px;
                   letter-spacing: .06em; text-transform: uppercase;
                   opacity: .55; padding-right: .6em; }
@keyframes sal-tick { from { transform: translateX(0); }
                      to { transform: translateX(-50%); } }
.sal-legal { display: flex; justify-content: space-between; align-items: center;
             width: min(1200px, calc(100% - 80px)); margin: 0 auto;
             padding: 16px 0 22px; font-family: var(--font-label);
             font-weight: 600; font-size: 11px; letter-spacing: .2em;
             text-transform: uppercase; opacity: .75; }
.sal-legal a { text-decoration: none; }

/* ── Wedding page additions (2026-08-15): package booking buttons, the
   all-inclusive strip, guestbooks, keychains, pull quote. The journal block
   below mirrors css/home.css (keep in step if home.css changes). ── */
/* the DARK orange: same field as the homepage's brand-bio section (#5a1a12
   under Oxblood Glow). Those per-colorway values live only in the GENERATED
   colorways.css, so they are BAKED here per colorway (same precedent as the
   palette cursors in style.css) — if gen_shutter_colorways.py changes a
   brand-bio background, update the matching hex below by hand. */
.sec-guestbooks { --h: auto; background: #5a1a12; color: var(--white);
  padding: 0; }
:root[data-colorway="oxblood-glow"] .sec-guestbooks { background: #5a1a12; }
:root[data-colorway="coffee-espresso"] .sec-guestbooks { background: #241009; }
:root[data-colorway="ew-chestnut"] .sec-guestbooks { background: #3a0e04; }
:root[data-colorway="ew-espresso"] .sec-guestbooks { background: #2c0d06; }
:root[data-colorway="champagne-coffee"] .sec-guestbooks { background: #34150f; }
:root[data-colorway="champagne-coffee-red"] .sec-guestbooks { background: #34150f; }
/* spotlight stage (guestbook round variant 01, selected 2026-08-15, simplified
   per owner: arrows only — no auto-advance, no neighbor clicks, instant copy
   swap; the photo positions animating IS the swipe) */
.spx { height: 100vh; min-height: 820px; max-height: 1080px; overflow: hidden;
  display: flex; flex-direction: column;
  /* owner 2026-08-16: airier field — real space above/below, content scaled
     down so the whole section still fits one window height */
  padding: 96px 0 84px; }
.spx-head { text-align: center; padding: 0 24px 8px; }
.spx-kicker { font-family: var(--font-label); font-weight: 500; font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase; opacity: .8; }
.spx-script { font-family: var(--font-script); font-style: italic; font-size: 44px;
  line-height: 1.15; margin-top: 4px; }
.spx-stage { position: relative; flex: 1; min-height: 0; }
.spx-slide { position: absolute; top: 50%; left: 50%; width: 300px; height: 100%;
  max-height: 360px; transform: translate(-50%, -50%) scale(.98);
  transition: transform .8s cubic-bezier(.5,.05,.2,1), opacity .8s, filter .8s; }
.spx-slide img { width: 100%; height: 100%; object-fit: cover; display: block;
  background: var(--cream); }
.spx-slide.is-prev { transform: translate(-172%, -50%) scale(.78); opacity: .38;
  filter: saturate(.4) brightness(.75); }
.spx-slide.is-next { transform: translate(72%, -50%) scale(.78); opacity: .38;
  filter: saturate(.4) brightness(.75); }
.spx-slide.is-on { z-index: 2; opacity: 1; }
.spx-copy { text-align: center; max-width: 600px; margin: 0 auto;
  padding: 18px 24px 0; }
.spx-no { font-family: 'BilletScriptOpti', cursive; font-size: 19px; opacity: .85; }
.spx-ti { font-family: 'PonteExtraLight', serif; font-weight: 400; font-size: 31px;
  line-height: 1.1; margin-top: 4px; }
.spx-d { font-size: 14px; line-height: 1.6; margin-top: 10px; opacity: .88; }
.spx-note { margin-top: 9px; font-family: var(--font-label); font-weight: 500;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .65;
  min-height: 15px; }
.spx-cta { display: inline-block; margin-top: 12px; color: inherit;
  text-decoration: none; font-family: var(--font-label); font-weight: 500;
  font-size: 11.5px; letter-spacing: .17em; text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 1px solid rgba(252,251,249,.65);
  transition: border-color .3s; }
.spx-cta:hover { border-color: var(--white); }
.spx-foot { display: flex; align-items: center; justify-content: center; gap: 24px;
  padding: 16px 0 0; }
.spx-aro { background: none; border: 0; cursor: pointer; color: var(--white);
  opacity: .7; transition: opacity .3s; width: 46px; }
.spx-aro:hover { opacity: 1; }
.spx-aro svg { width: 100%; fill: currentColor; }
.spx-count { font-family: 'BilletScriptOpti', cursive; font-size: 17px; opacity: .85; }
@media (max-width: 900px) {
  .spx { min-height: 640px; }
  .spx-slide { width: 64vw; }
  .spx-slide.is-prev { transform: translate(-160%, -50%) scale(.8); }
  .spx-slide.is-next { transform: translate(60%, -50%) scale(.8); }
  .spx-script { font-size: 38px; }
  .spx-ti { font-size: 27px; }
}

/* matches the pull-quote band below it (owner request 2026-08-15) */
.sec-keychains { --h: auto; background: var(--cream); padding: 110px 0; }
.kcx-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; display: grid;
  grid-template-columns: 480px 1fr; gap: 90px; align-items: center; }
.kcx-photo { margin: 0; height: 560px; overflow: hidden; }
.kcx-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kcx-kicker { font-family: var(--font-label); font-weight: 500; font-size: 12px;
  letter-spacing: .24em; text-transform: uppercase; opacity: .6; }
.kcx-script { font-family: var(--font-script); font-style: italic; font-size: 56px;
  line-height: 1.05; margin-top: 14px; }
.kcx-para { margin-top: 24px; max-width: 520px; font-size: 17px; line-height: 1.7;
  opacity: .87; }
.kcx-btn { display: inline-flex; margin-top: 36px; padding: 16px 30px;
  width: max-content; }
/* trading cards (round 3, note 98): same section, photo on the right. The
   photo keeps its source order for screen readers and is moved with grid
   placement, so the copy is read first in the mirrored layout too. The
   trading-cards band drops the top padding so it reads as one spread with
   the keychains band above it rather than a second slab of cream. */
.kcx-flip { grid-template-columns: 1fr 480px; }
.kcx-flip .kcx-photo { grid-column: 2; grid-row: 1; }
.kcx-flip .kcx-side { grid-column: 1; grid-row: 1; }
.sec-trading-cards { padding-top: 0; }

.sec-pullquote { --h: auto; background: var(--cream); padding: 40px 24px 100px; }
.pq-wrap { max-width: 820px; margin: 0 auto; text-align: center; }
.pq-q { font-family: var(--font-title); font-size: 38px; line-height: 1.25;
  text-transform: uppercase; }
.pq-q em { font-family: var(--font-heading); font-style: italic;
  text-transform: none; letter-spacing: 0; }
.pq-att { margin-top: 22px; font-family: var(--font-heading); font-style: italic;
  font-size: 26px; opacity: .8; }

/* light ground, same cream as .sec-keychains (owner request 2026-08-16);
   type flips to ink */
.sec-the-journal { --h: max(760px, 100vh); background: var(--cream); color: var(--ink); }
.jnl-copy { left: 0; top: 50%; transform: translateY(-50%); width: 400px; }
.jnl-copy > * { position: static; }
.jnl-script { font-family: var(--font-script); font-size: 42px; line-height: 0.85; color: var(--teal); }
.jnl-title { font-family: var(--font-title); font-weight: 400; font-size: 80px; line-height: .96;
             letter-spacing: -0.01em; padding: 8px 0 20px; }
.jnl-title em { font-family: var(--font-heading); font-style: italic; font-size: .8em; }
.jnl-lede { font-family: var(--font-body); font-size: 15.5px; line-height: 1.7;
            color: rgba(37,31,24,.75); padding-bottom: 30px; }
.jnl-now { border-top: 1px solid rgba(37,31,24,.25); padding-top: 20px; min-height: 108px; }
.jnl-cat { font-family: var(--font-label); font-weight: 500; font-size: 11px;
           letter-spacing: .24em; text-transform: uppercase; color: var(--teal); }
.jnl-post { font-family: var(--font-title); font-weight: 400; font-size: 25px; line-height: 1.22;
            padding-top: 8px; }
.jnl-br { display: none; }  /* mobile-only line break, revealed in the 900px block */
.jnl-nav { display: flex; align-items: center; gap: 18px; padding: 20px 0 30px; }
.jnl-dots { display: flex; gap: 10px; }
.jnl-dots span { width: 8px; height: 8px; border-radius: 50%;
                 border: 1px solid rgba(37,31,24,.45); transition: background .4s; }
.jnl-dots span.on { background: var(--teal); border-color: var(--teal); }
.jnl-arrow { display: inline-flex; align-items: center; justify-content: center;
             height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
             color: rgba(37,31,24,.7); transition: color .4s; }
.jnl-arrow svg { width: 30px; height: 6px; fill: currentColor; transition: transform .4s; }
.jnl-prev svg { transform: rotate(180deg); }
.jnl-arrow:hover { color: var(--ink); }
.jnl-next:hover svg { transform: translateX(5px); }
.jnl-prev:hover svg { transform: rotate(180deg) translateX(5px); }
.jnl-btn { display: inline-flex; width: auto; padding: 0 32px; height: 52px;
           border-color: var(--ink); color: var(--ink); }
.jnl-btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.jnl-deck { left: 520px; top: 50%; width: 680px; height: 700px;
            transform: translateY(-50%); cursor: pointer; }
.jnl-card { position: absolute; left: 90px; top: 50px; width: 470px; height: 600px;
            overflow: hidden; background: var(--white); padding: 12px;
            box-shadow: 0 24px 50px rgba(13,25,28,.22);
            transition: transform .8s cubic-bezier(.22,.9,.3,1), opacity .8s; }
.jnl-card::after { content: ''; position: absolute; inset: 5px;
                   border: 1px solid rgba(185,138,60,.4); pointer-events: none; }
.jnl-card img, .jnl-card video { width: 100%; height: calc(100% - 44px); object-fit: cover; }
.jnl-tag { position: absolute; left: 0; bottom: 0; right: 0; height: 52px;
           display: flex; align-items: center; justify-content: center; gap: 12px;
           font-family: var(--font-label); font-weight: 500; font-size: 10.5px;
           letter-spacing: .3em; text-transform: uppercase; color: var(--teal); }
.jnl-tag::before, .jnl-tag::after { content: ''; width: 26px; height: 1px;
                                    background: rgba(185,138,60,.5); }
.jnl-card.noanim { transition: none; }
.jnl-card.p0 { transform: rotate(-2deg); z-index: 4; }
.jnl-card.p1 { transform: rotate(3.5deg) translate(46px, -18px); z-index: 3; }
.jnl-card.p2 { transform: rotate(-5deg) translate(-38px, 14px); z-index: 2; }
.jnl-card.p3 { transform: rotate(1.5deg) translate(14px, 28px); z-index: 1; }
.jnl-card.out { transform: rotate(9deg) translate(420px, -40px); opacity: 0; z-index: 5; }
.jnl-hint { position: absolute; right: 6px; bottom: 6px; font-family: var(--font-heading);
            font-style: italic; font-size: 15px; color: rgba(37,31,24,.55); }
/* weddings-page footer matches the guestbooks field (owner request
   2026-08-15): the homepage brand-bio darks, baked per colorway like the
   .sec-guestbooks block above — keep the two lists in step */
.sal-footer { background: #5a1a12; }
:root[data-colorway="oxblood-glow"] .sal-footer,
:root[data-colorway="oxblood-glow"] .sec-header-image { background: #5a1a12; }
:root[data-colorway="coffee-espresso"] .sal-footer,
:root[data-colorway="coffee-espresso"] .sec-header-image { background: #241009; }
:root[data-colorway="ew-chestnut"] .sal-footer,
:root[data-colorway="ew-chestnut"] .sec-header-image { background: #3a0e04; }
:root[data-colorway="ew-espresso"] .sal-footer,
:root[data-colorway="ew-espresso"] .sec-header-image { background: #2c0d06; }
:root[data-colorway="champagne-coffee"] .sal-footer,
:root[data-colorway="champagne-coffee"] .sec-header-image { background: #34150f; }
:root[data-colorway="champagne-coffee-red"] .sal-footer,
:root[data-colorway="champagne-coffee-red"] .sec-header-image { background: #34150f; }
/* --kom-wash: the same six values as translucent washes over the hero photo
   added in round 3 (note 91). Keep in step with the list directly above. */
:root[data-colorway="oxblood-glow"]        { --kom-wash: rgba(90,26,18,.70); }
:root[data-colorway="coffee-espresso"]     { --kom-wash: rgba(36,16,9,.72); }
:root[data-colorway="ew-chestnut"]         { --kom-wash: rgba(58,14,4,.70); }
:root[data-colorway="ew-espresso"]         { --kom-wash: rgba(44,13,6,.72); }
:root[data-colorway="champagne-coffee"]    { --kom-wash: rgba(52,21,15,.70); }
:root[data-colorway="champagne-coffee-red"]{ --kom-wash: rgba(52,21,15,.70); }
/* inquiry CTAs added on owner request 2026-08-16: printed keepsakes,
   personalization, and the closing cross-sell */
.cvs-btn { display: inline-flex; width: max-content; margin-top: 26px;
  padding: 14px 26px; border: 1px solid var(--ink); color: var(--ink);
  text-decoration: none; transition: all .4s; }
.cvs-btn span, .tos-btn span, .sbd-btn span { font-family: var(--font-label);
  font-weight: 600; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; }
.cvs-btn:hover { background: var(--ink); color: var(--white); }
.tos-btn { display: flex; width: max-content; margin: 44px auto 0;
  padding: 15px 30px; border: 1px solid rgba(252,251,249,.8);
  color: var(--cream); text-decoration: none; transition: all .4s; }
.tos-btn:hover { background: var(--cream); color: var(--ink);
  border-color: var(--cream); }
.sbd-btn { display: inline-flex; width: max-content; margin-top: 22px;
  padding: 14px 28px; border: 1px solid var(--ink); color: var(--ink);
  text-decoration: none; transition: all .4s; }
.sbd-btn:hover { background: var(--ink); color: var(--cream); }
/* ── Custom templates: the Duo Stage (templates round 2 pick 03, integrated
   2026-08-16 under the guestbooks section; archived rounds in
   a_extra_sections/shuttergold/templates-round-1|2/). A 4x6 stage driven by
   the thumbnail tray (8 options) beside a self-cycling 2x6 strip stage;
   guarded swap/cycle module in script.js. ── */
.sec-templates { --h: auto; background: var(--cream); padding: 96px 0 84px; }
.tpx-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; }
.tpx-top { text-align: center; }
.tpx-kicker { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink); opacity: .55; }
.tpx-script { margin-top: 14px; font-family: var(--font-script); font-style: italic;
  font-size: 52px; line-height: 1; color: #5a1a12; }
.tpx-para { max-width: 700px; margin: 18px auto 0; font-size: 15px; line-height: 1.7;
  color: var(--ink); opacity: .85; }
.tpx-duo { margin-top: 36px; display: flex; justify-content: center;
  align-items: flex-start; gap: 44px; }
.tpx-lbl { margin-top: 12px; text-align: center; font-family: var(--font-label);
  font-weight: 600; font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); opacity: .5; }
.tpx-stage { position: relative; background: #fff; padding: 10px;
  box-shadow: 0 24px 54px rgba(37,31,24,.22); }
.tpx-stage img { position: absolute; inset: 10px; width: calc(100% - 20px);
  height: calc(100% - 20px); object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.tpx-stage img.on { opacity: 1; }
.tpx-card { width: 330px; height: 472px; }
.tpx-strip { width: 166px; height: 472px; }
.tpx-tray { margin-top: 24px; display: flex; justify-content: center; gap: 14px;
  flex-wrap: wrap; }
.tpx-th { width: 54px; height: 80px; padding: 3px; background: #fff;
  border: 1px solid rgba(37,31,24,.2); cursor: pointer;
  transition: transform .3s, border-color .3s; }
.tpx-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpx-th:hover { transform: translateY(-4px); }
.tpx-th.on { border-color: #5a1a12; transform: translateY(-4px); }
.tpx-ctarow { text-align: center; margin-top: 34px; }
.tpx-cta { display: inline-flex; padding: 15px 30px; border: 1px solid var(--ink);
  color: var(--ink); text-decoration: none; transition: all .4s; }
.tpx-cta span { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; }
.tpx-cta:hover { background: var(--ink); color: var(--white); }
:root[data-colorway="oxblood-glow"] .tpx-script { color: #5a1a12; }
:root[data-colorway="coffee-espresso"] .tpx-script { color: #241009; }
:root[data-colorway="ew-chestnut"] .tpx-script { color: #3a0e04; }
:root[data-colorway="ew-espresso"] .tpx-script { color: #2c0d06; }
:root[data-colorway="champagne-coffee"] .tpx-script { color: #34150f; }
:root[data-colorway="champagne-coffee-red"] .tpx-script { color: #34150f; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE LAYER — weddings page (2026-08-20). Additive only: every rule
   lives inside this max-width:900px block, so desktop is untouched (proven
   by segment pixel-diff at 1440 and 1200). Shared plumbing (canvas unlock,
   the `.sec .cv > *` blanket, type scale, overflow-x clip) already lives in
   style.css; this block re-layouts the sections that blanket alone can't
   solve. Overrides of the blanket are written `.sec-<x> .<class>` so they
   carry (0,2,0) and outrank the single-class geometry rules above.
   `!important` appears ONLY to neutralize visual-editor inline styles.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ---- burger: the blanket flattens .cv children, so restore it ---- */
  .sec-on-image-aperol-menu .wmenu-btn { position: absolute; left: 16px;
    top: 16px; width: 44px; height: 36px; padding: 4px 0; }

  /* ---- hero ---- */
  .sec-header-image { min-height: 100svh; padding: 104px 20px 86px; }
  .sec-header-image .kom-logo { width: 168px; margin: -22px auto 18px; }
  .sec-header-image .kom-face { font-size: clamp(52px, 16.5vw, 92px); }
  .sec-header-image .kom-script { font-size: 26px; top: -20px; left: 2px; }
  .sec-header-image .kom-para { font-size: 15px; margin-top: 20px; }
  .sec-header-image .kom-ctas { flex-direction: column; align-items: stretch;
    width: 100%; max-width: 320px; gap: 12px; margin-top: 30px; }
  .sec-header-image .kom-cta { display: flex; justify-content: center;
    padding: 15px 18px; }
  .sec-header-image .twn-ticker { padding: 12px 0; }
  .sec-header-image .twn-track span { font-size: 10px; letter-spacing: .22em; }

  /* ---- the scatter: desktop spreads several snapshots at angles around the
          essay. Tiling four of them in a 2x2 grid on a phone reads as a grid,
          not a scatter, so mobile shows ONE snapshot instead: full column
          width, a single piece of tape centred on its top edge, and a slight
          tilt so it still reads as a photo dropped on the page. The other
          three and the printed strip are desktop-only. ---- */
  .sec-known-for .sct-wrap { position: static; width: auto; height: auto;
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: flex-start; padding: 78px 20px 88px; }
  .sec-known-for .sct-essay { order: -1; flex: 0 0 100%; max-width: none;
    margin-bottom: 44px; }
  .sec-known-for .sct-fl { display: none; }
  /* one taped snapshot sitting left of centre, with the desktop printed
     booth strip tucked in beside it (owner request 2026-08-20) */
  .sec-known-for .sct-1 { display: block; position: relative; left: auto;
    top: auto; right: auto; bottom: auto; flex: 0 0 auto; width: 56%;
    max-width: 215px; height: auto; margin: 0 0 0 -14px; padding: 9px;
    transform: rotate(-2deg); box-shadow: 0 18px 38px rgba(37,31,24,.20); }
  .sec-known-for .sct-1 .ph { width: 100%; height: auto; aspect-ratio: 4 / 5;
    object-fit: cover; }
  .sec-known-for .sct-1::before { left: 50%; top: -11px; width: 62px;
    height: 20px; transform: translateX(-50%) rotate(-3deg); }
  .sec-known-for .sct-1::after { content: none; }
  .sec-known-for .sct-strip-w { display: block; position: relative;
    left: auto; top: auto; right: auto; bottom: auto; flex: 0 0 auto;
    width: 27%; max-width: 104px; height: auto; margin: 34px 0 0 -26px;
    padding: 0; transform: rotate(4deg); z-index: 2; }
  .sec-known-for .sct-strip { width: 100%; height: auto; aspect-ratio: 1 / 3;
    transform: none; box-shadow: 0 14px 30px rgba(37,31,24,.22); }
  .sec-known-for .sct-strip-w::after { left: 50%; top: -8px; width: 46px;
    height: 16px; transform: translateX(-50%) rotate(-4deg); }
  /* the round-3 second strip is a desktop flourish only; the phone layout
     keeps its established one-snapshot-plus-one-strip pairing. Must sit
     AFTER the .sct-strip-w rules above: same specificity, later wins. */
  .sec-known-for .sct-strip-w2 { display: none; }
  .sec-known-for .sct-script { font-size: clamp(34px, 10vw, 44px); }
  .sec-known-for .sct-head { font-size: 22px; margin-top: 18px; }
  .sec-known-for .sct-rule { margin: 20px auto; }
  .sec-known-for .sct-flow, .sec-known-for .sct-para { font-size: 15px; }
  .sec-known-for .sct-cta { display: flex; justify-content: center;
    width: 100%; max-width: 320px; margin: 26px auto 0; }

  /* ---- video filmstrip: matches the social-events page's mobile treatment
          (owner request 2026-08-20). The strip returns to flow as a
          horizontal snap filmstrip you swipe through: 62vw tiles with the
          next one peeking, scrollbar hidden. ---- */
  .sec-full-image { --h: auto; height: auto; padding: 44px 0; }
  .sec-full-image .vst-strip { position: static; transform: none; width: auto;
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 24px; scrollbar-width: none; }
  .sec-full-image .vst-strip::-webkit-scrollbar { display: none; }
  .sec-full-image .vst-tile { flex: 0 0 62vw; width: auto; height: 380px;
    aspect-ratio: auto; object-fit: cover; scroll-snap-align: center; }

  /* ---- packages: twins stack (already), base row and cameos follow ---- */
  /* cards inset from the screen edges and given roomier inner padding, so
     they read slimmer — matching the social-events page's mobile packages
     (owner request 2026-08-20). Desktop geometry untouched. */
  .sec-packages .twx-wrap { padding: 78px 24px 84px; }
  /* photos sit higher in the two white cards (owner 2026-08-20): the 40px of
     card padding + mat inset above them is trimmed back */
  .sec-packages .twx-twin { padding: 16px 32px 32px; }
  .sec-packages .twx-mat { padding: 6px; }
  /* Raise the crop window so the photo's subject sits higher in the letterbox
     (owner 2026-08-20). Detail analysis put the centre of interest at 45% down
     the frame; 30% lifts the view above centre. The tuning belongs to the
     Wildflower photo, which round 3 moved from the Legendary card to the Icon
     card (note 94), so this follows it to nth-of-type(1). */
  .sec-packages .twx-twin:nth-of-type(1) .twx-ph img { object-position: 50% 30%; }
  .sec-packages .twx-ph { height: 170px; }
  .sec-packages .twx-twin h2 { font-size: 25px; }
  .sec-packages .twx-inc li { font-size: 14px; }
  .sec-packages .twx-cta { justify-content: center; text-align: center; }
  .sec-packages .twx-base { grid-template-columns: 1fr; gap: 16px;
    margin-top: 34px; }
  .sec-packages .byo-card { padding: 26px 22px 24px; }
  .sec-packages .byo-cameo { width: 124px; height: 124px; }

  /* ---- add-on rail: gutter shrinks, cards become swipeable viewport
          cards, the head stacks and its CTA goes full width ---- */
  /* iOS ignores background-attachment: fixed, so the damask rides a
     position:fixed pseudo-layer clipped to the section (the project's
     established pattern, same as .sec-reviews below) — owner request
     2026-08-20: the wallpaper must stay fixed on phones too. */
  .sec-other-a-la-carte { min-height: 0; --oalc-gut: 20px;
    background: none; clip-path: inset(0); }
  .sec-other-a-la-carte::before { content: ''; position: fixed; inset: 0;
    z-index: 0; pointer-events: none;
    background:
      linear-gradient(color-mix(in srgb, var(--dark) 60%, transparent),
                      color-mix(in srgb, var(--dark) 60%, transparent)),
      url('../assets/wallpaper-bg.webp');
    background-size: auto, 520px auto; background-repeat: no-repeat, repeat; }
  .sec-other-a-la-carte .oalc-wrap { position: relative; z-index: 1; }
  .sec-other-a-la-carte .oalc-wrap { padding: 74px 0 66px; }
  .sec-other-a-la-carte .oalc-head { flex-direction: column;
    align-items: flex-start; gap: 20px; max-width: none; }
  .sec-other-a-la-carte .oalc-script { font-size: 36px; }
  .sec-other-a-la-carte .oalc-btn { width: 100%; max-width: 320px;
    height: 50px; padding: 0 18px; }
  .sec-other-a-la-carte .oalc-card { flex: 0 0 78vw; }
  .sec-other-a-la-carte .oalc-win { height: 250px; }
  .sec-other-a-la-carte .oalc-plate { padding: 20px 22px 24px; }
  .sec-other-a-la-carte .oalc-row { flex-direction: column;
    align-items: flex-start; gap: 4px; }
  .sec-other-a-la-carte .oalc-t { font-size: 23px; }
  .sec-other-a-la-carte .oalc-d { font-size: 14px; }
  .sec-other-a-la-carte .oalc-ctrl { padding: 24px 20px 0; gap: 16px; }
  .sec-other-a-la-carte .oalc-arrow { width: 46px; height: 46px;
    font-size: 16px; }
  .sec-other-a-la-carte .oalc-track { flex: 1 1 auto; }

  /* ---- guestbooks ---- */
  .sec-guestbooks { padding: 76px 0 80px; }
  /* height was unlocked to kill ~336px of dead space, but .spx-stage is a
     flex:1 child — with nothing to stretch into it collapsed to 0 and the
     guestbook images vanished. Give the stage a real height so the current
     guestbook is shown (neighbours peek at either side), and keep overflow
     hidden so those translated neighbours stay clipped to the section. */
  .sec-guestbooks .spx { height: auto; min-height: 0; max-height: none;
    overflow: hidden; }
  .sec-guestbooks .spx-stage { flex: none; height: 250px; margin-bottom: 6px; }

  /* ---- custom templates: both stages stay side by side, scaled to fit;
          the 8-thumb tray wraps ---- */
  .sec-templates { padding: 76px 0 72px; }
  .sec-templates .tpx-wrap { width: calc(100% - 40px); }
  .sec-templates .tpx-script { font-size: 34px; }
  .sec-templates .tpx-para { font-size: 14.5px; }
  .sec-templates .tpx-duo { gap: 12px; margin-top: 28px; }
  .sec-templates .tpx-duo > div:first-child { flex: 0 0 58%; }
  .sec-templates .tpx-duo > div:last-child { flex: 0 0 34%; }
  .sec-templates .tpx-card, .sec-templates .tpx-strip { width: 100%;
    max-width: none; height: auto; }
  .sec-templates .tpx-card { aspect-ratio: 330 / 472; }
  .sec-templates .tpx-strip { aspect-ratio: 166 / 472; }
  .sec-templates .tpx-stage { padding: 7px; }
  .sec-templates .tpx-stage img { inset: 7px; width: calc(100% - 14px);
    height: calc(100% - 14px); }
  .sec-templates .tpx-tray { gap: 9px; margin-top: 20px; }
  .sec-templates .tpx-th { width: 46px; height: 68px; flex: none; }
  /* keep the tray to a single line on phones (owner request 2026-08-20):
     six thumbs fit at >=361px, five below that, so the ones that would wrap
     onto a second row are dropped. Desktop still shows all eight. */
  .sec-templates .tpx-th:nth-child(n+7) { display: none; }
  @media (max-width: 360px) {
    .sec-templates .tpx-th:nth-child(n+6) { display: none; }
  }
  .sec-templates .tpx-cta { display: flex; justify-content: center;
    width: 100%; max-width: 340px; margin: 0 auto; padding: 15px 16px;
    white-space: nowrap; }
  .sec-templates .tpx-cta span { font-size: 10.5px; letter-spacing: .1em;
    white-space: nowrap; }

  /* every remaining CTA kept to a single line with its arrow (owner
     2026-08-20); these three only broke at the 320px end */
  .sec-known-for .sct-cta, .sec-keychains .kcx-btn, .sec-reviews .rvw-more,
  .sal-legal a, .sal-legal span { white-space: nowrap; }
  .sec-known-for .sct-cta span, .sec-keychains .kcx-btn span {
    font-size: 10.5px; letter-spacing: .1em; white-space: nowrap; }
  .sec-known-for .sct-cta, .sec-keychains .kcx-btn { padding-left: 16px;
    padding-right: 16px; }
  .sec-reviews .rvw-more { font-size: 11px; letter-spacing: .12em;
    padding-left: 22px; padding-right: 22px; }

  /* ---- keychains ---- */
  .sec-keychains { padding: 74px 0 78px; }
  .sec-keychains .kcx-wrap { grid-template-columns: 1fr; gap: 26px; }
  /* The trading-cards card mirrors itself on desktop by placing its two
     children explicitly (.kcx-flip .kcx-photo { grid-column: 2 }). Those
     placements are more specific than the single-column rule above, so on a
     phone they survived and forced an implicit second column: the copy took
     219px and the photo was crushed into a 65px sliver beside it. Reset the
     placement here so both children stack in the one column like the
     keychains card directly above them, photo first. */
  .sec-keychains .kcx-flip .kcx-photo,
  .sec-keychains .kcx-flip .kcx-side { grid-column: 1; grid-row: auto; }
  .sec-keychains .kcx-photo { height: 320px; }
  .sec-keychains .kcx-script { font-size: 34px; }
  .sec-keychains .kcx-para { font-size: 15px; max-width: none; }
  .sec-keychains .kcx-btn { width: 100%; max-width: 320px;
    justify-content: center; }

  /* ---- pull quote ---- */
  .sec-pullquote { padding: 34px 20px 76px; }
  .sec-pullquote .pq-q { font-size: clamp(21px, 6.2vw, 26px); }
  .sec-pullquote .pq-att { font-size: 21px; margin-top: 16px; }

  /* ---- printed keepsakes (owner request 2026-08-20): the slide stage was
          held at 380px while the tallest slide needs 239px, so ~140px of dead
          air pushed the arrows/count/button down. Tighten the stage to pull
          them up, and drop the copy above them a little. Stage keeps a fixed
          height because the slides are absolutely stacked; the narrow-phone
          step allows for the extra wrapping. ---- */
  .sec-core-values .cvs-wrap { padding-top: 90px; }
  .sec-core-values .cvs-stage { height: 260px; }
  .sec-core-values .cvs-nav { margin-top: 8px; }
  @media (max-width: 360px) {
    .sec-core-values .cvs-stage { height: 288px; }
  }

  /* ---- personalization (the spine): the centre hairline and the
          left/right zigzag collapse to one stacked column ---- */
  .sec-three-options .tos-wrap { position: static; width: auto;
    padding: 74px 20px 78px; }
  .sec-three-options .tos-top { margin-bottom: 34px; }
  .sec-three-options .tos-script { font-size: 34px; }
  /* The hairline used to be hidden here: when this section was three big
     promises, the mobile stack read fine without it. Round 3 made it a
     seven-step timeline, and the line is what makes the steps read as one
     sequence, so it stays on a phone too (owner, 2026-09-08). The stacked
     chips sit at left:0 and are 34px wide, so their centres are at 17px.
     Matches how the social events page runs this same component. */
  .sec-three-options .tos-thread::before { left: 17px; }
  /* the entrance slides entries in from left/right, which is the desktop
     zigzag's motion; on a left-aligned stack it just made the chips swing
     off the line, so only the fade remains */
  .sec-three-options.tos-prep .tos-left,
  .sec-three-options.tos-prep .tos-right { transform: translateX(0); }
  .sec-three-options .tos-entry { position: static; width: auto; left: auto;
    padding-left: 52px; }
  .sec-three-options .tos-left, .sec-three-options .tos-right {
    margin-left: 0; text-align: left; }
  .sec-three-options .tos-entry + .tos-entry { margin-top: 30px; }
  .sec-three-options .tos-chip { position: absolute; left: 0; right: auto;
    top: 2px; }
  .sec-three-options .tos-title { font-size: 27px; }
  .sec-three-options .tos-copy { font-size: 15px; }
  .sec-three-options .tos-cap { font-size: 15px; }
  /* keep each label + arrow on ONE line (owner 2026-08-20): the arrow was
     wrapping and doubling the button height, so the type tightens instead */
  .sec-three-options .tos-btn { width: 100%; max-width: 340px;
    margin: 34px auto 0; justify-content: center; padding: 15px 16px;
    white-space: nowrap; }
  .sec-three-options .tos-btn span { font-size: 10.5px; letter-spacing: .1em;
    white-space: nowrap; }
  .sec-packages .twx-cta { white-space: nowrap; font-size: 11px;
    letter-spacing: .1em; padding-left: 16px; padding-right: 16px; }

  /* ---- reviews: iOS-proof fixed photo (same clip-path + fixed-layer
          emulation the homepage uses), quotes cross-fade in one grid cell */
  .sec-reviews { height: auto; min-height: 100svh; background: none;
    clip-path: inset(0); }
  .sec-reviews::after { content: ''; position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    background: url("../assets/portfolio/dscf0036.jpg")
      center / cover no-repeat; }
  .sec-reviews::before { z-index: 1; }
  .sec-reviews .rvw { height: auto; min-height: 100svh; padding: 88px 22px;
    position: relative; z-index: 2; }
  .sec-reviews .rvw-script { font-size: 38px !important; }
  .sec-reviews .rvw-rule { width: min(420px, 72vw); }
  .sec-reviews .rvw-stage { min-height: 150px; display: grid;
    place-items: center; }
  .sec-reviews .rvw-slide { display: block; grid-area: 1 / 1; opacity: 0;
    pointer-events: none; z-index: 2; transition: opacity .55s ease; }
  .sec-reviews .rvw-slide.on { opacity: 1; pointer-events: auto; z-index: 1; }
  .sec-reviews .rvw-q { font-size: clamp(22px, 6.4vw, 30px); }
  .sec-reviews .rvw-att { font-size: 23px !important; transform: none !important; }
  .sec-reviews .rvw-nav { gap: 20px; }
  .sec-reviews .rvw-more { padding: 14px 26px; margin-top: 24px; }

  /* ---- the process deck (mirrors the homepage's mobile treatment) ---- */
  .sec-the-journal .cv { display: flex; flex-direction: column;
    padding: 74px 20px 78px; }
  .sec-the-journal .jnl-copy { position: static; transform: none;
    width: auto; }
  .sec-the-journal .jnl-title { font-size: clamp(46px, 14vw, 62px); }
  .sec-the-journal .jnl-br { display: inline; }
  .sec-the-journal .jnl-lede { font-size: 15px; }
  .sec-the-journal .jnl-post { font-size: 21px; }
  .sec-the-journal .jnl-btn { width: 100%; max-width: 320px; }
  .sec-the-journal .jnl-deck { position: relative; left: auto; top: auto;
    transform: none; width: 100%;
    height: calc(min(260px, 100vw - 132px) * 1.47 + 90px); margin-top: 14px; }
  .sec-the-journal .jnl-card { left: calc(50% - min(130px, 50vw - 66px));
    top: 24px; width: min(260px, calc(100vw - 132px)); height: auto;
    aspect-ratio: 260 / 380; box-shadow: none; }
  .sec-the-journal .jnl-card.p1 { transform: rotate(3.5deg) translate(24px, -12px); }
  .sec-the-journal .jnl-card.p2 { transform: rotate(-5deg) translate(-20px, 10px); }
  .sec-the-journal .jnl-card.p3 { transform: rotate(1.5deg) translate(8px, 16px); }
  .sec-the-journal .jnl-card.out { transform: rotate(9deg) translate(150px, -30px); }
  .sec-the-journal .jnl-hint { position: static; align-self: flex-end;
    margin: -22px 14px 0 0; transform: none !important;
    font-size: 26px !important; }

  /* ---- closing cross-sell ---- */
  .sec-gallery-cta .sbd-left { position: static; width: auto;
    padding: 74px 20px 0; }
  .sec-gallery-cta .sbd-script { font-size: 28px; }
  .sec-gallery-cta .sbd-title { font-size: clamp(30px, 8.6vw, 38px); }
  .sec-gallery-cta .sbd-btn { width: 100%; max-width: 320px;
    justify-content: center; }
  .sec-gallery-cta .sbd-list { position: static; left: auto; right: auto;
    top: auto; transform: none; padding: 8px 20px 78px; }
  .sec-gallery-cta .sbd-row { gap: 16px; padding: 22px 0; }
  .sec-gallery-cta .sbd-th { width: 74px; height: 74px; flex: none; }
  .sec-gallery-cta .sbd-nm { font-size: 20px; }
  .sec-gallery-cta .sbd-d { font-size: 13px; }
  .sec-gallery-cta .sbd-arw { font-size: 11px; white-space: nowrap; }

  /* ---- footer (mirrors the homepage's mobile footer) ---- */
  .sal-grid { grid-template-columns: 1fr; width: calc(100% - 44px);
    padding-top: 60px; gap: 0; }
  .sal-invite { padding-right: 0; }
  .sal-logo { width: 200px; }
  .sal-h { font-size: clamp(40px, 12vw, 54px); }
  .sal-h em { font-size: 1.25em; }
  .sal-nl { flex-direction: column; align-items: stretch; max-width: none; }
  .sal-nl .sal-go { margin: 18px 0 0; justify-content: center; display: flex; }
  .sal-rail { border-left: 0; padding-left: 0; margin-top: 44px; }
  .sal-rail a:first-child { border-top: 1px solid rgba(255,255,255,.3);
    padding-top: 15px; }
  .sal-arw { opacity: 1; transform: none; }
  .sal-ticker { margin-top: 44px; }
  .sal-ticker span { font-size: 26px; }
  .sal-legal { width: calc(100% - 44px); }

  /* ---- the sticky bar's six desktop links are laid out by coordinates and
          measure well past 390px, so the nav itself drops on phones. The BAR
          stays, because it carries the hamburger that is the mobile way into
          those same links. Hiding the whole bar (what this rule did until
          2026-09-08) left the page with no menu at all the moment the hero
          burger scrolled away: the overlay was unreachable for the entire
          length of the page. Corporate and social events already do it this
          way. The height is set explicitly because the burger is absolute and
          `.sec` is height:auto here, which would collapse the bar to 0. ---- */
  .sec-stick-top-menu-white { height: 53px; }
  .sec-stick-top-menu-white .stm-in { display: none; }
  .sec-stick-top-menu-white .stm-burger { left: 18px; }

  /* ---- tap targets: text links that are only ~20px tall get a 44px
          touch box without moving their underline ---- */
  .sec-packages .byo-card a, .sec-guestbooks .spx-cta,
  .sec-templates .tpx-th { display: inline-flex; align-items: flex-end;
    min-height: 44px; }
  .sec-templates .tpx-th { align-items: stretch; min-height: 0; }
  .sal-legal a, .sec-three-options .tos-cap a { display: inline-flex;
    align-items: center; min-height: 44px; }
  .sec-templates .tpx-lbl { font-size: 11px; }

  /* ---- menu overlay: the 1200px canvas becomes a readable phone column.
          Source order here is: close, socials, rules, photo, wordmark,
          blurb, button, the six nav links, then email/city — so the links
          are pulled to the top with `order` and everything decorative is
          dropped. The links are .t-title on this page (the earlier rule
          targeted .t-subheading and therefore styled nothing). ---- */
  /* The overlay itself must scroll on a phone. style.css sets
     `overflow: hidden`, which on a short screen (Safari's chrome eats ~180px
     of an iPhone's height) stranded the wordmark, blurb, email and city
     below the fold with no way to reach them. */
  .menu-overlay { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .menu-overlay .cv { width: auto; height: auto; min-height: 100%;
    display: flex; flex-direction: column; padding: 84px 26px 96px; }
  .menu-overlay .z-menu-open_0 { position: absolute; left: 14px; top: 10px;
    width: 34px; height: 48px; }
  .menu-overlay .z-menu-open_4, .menu-overlay .z-menu-open_6,
  .menu-overlay .z-menu-open_7 { display: none; }
  .menu-overlay .cv > .t-title { order: 1; width: auto; text-align: left;
    font-size: 27px; line-height: 1.1; margin: 10px 0; }
  .menu-overlay .z-menu-open_10 { order: 20; margin-top: 30px; width: 100%;
    max-width: 340px; height: 50px; }
  .menu-overlay .z-menu-open_8 { order: 21; margin: 34px 0 0; width: 190px;
    height: auto; }
  .menu-overlay .z-menu-open_9 { order: 22; width: auto; text-align: left;
    font-size: 14px; margin-top: 12px; }
  .menu-overlay .cv > .t-subheading { order: 24; width: auto;
    text-align: left; font-size: 13px; margin-top: 6px; }
  .menu-overlay .z-menu-open_1, .menu-overlay .z-menu-open_2,
  .menu-overlay .z-menu-open_3 { position: absolute; bottom: 28px;
    width: 26px; height: 20px; }
  .menu-overlay .z-menu-open_1 { left: 28px; }
  .menu-overlay .z-menu-open_3 { left: 66px; }
  .menu-overlay .z-menu-open_2 { left: 104px; }
}

/* ============ backdrops: THE LOOKBOOK, ported to the weddings page 2026-09-14
   (owner: the home and weddings backdrop sections carry the same three
   options as the social events page). Rules are css/social-events.css's
   verbatim, desktop block then its mobile block; keep in step with it. */
/* Window height (owner 2026-08-20), the same way the homepage does it. It is
   min-height, never a fixed height: the section still carries overflow:hidden,
   so a hard 100vh would clip the cards on a short window. The section is the
   flex container and .bdg-wrap is the single stretching child, which is what
   gives the wrap a DEFINITE height — that is the bit that matters, because
   .bdg-grid's `flex: 1 1 auto` can only grow against a definite parent, and a
   plain `height: 100%` would resolve to auto here (the parent's height is
   auto, min-height does not make it definite). Extra height therefore lands
   inside the cards, between the copy and the CTA, exactly as on the
   homepage. */
.sec-backdrops { --h: auto; min-height: 100vh; display: flex;
  background: var(--white); color: var(--ink); overflow: hidden; }
.bdg-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  justify-content: center; padding: 76px clamp(40px, 5vw, 90px) 60px; }
.bdg-crest { text-align: center; flex: 0 0 auto; margin-bottom: 18px; }
.bdg-eyebrow { font-family: var(--font-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .3em; font-size: 12px;
  color: var(--teal); display: inline-flex; align-items: center; gap: 16px; }
.bdg-eyebrow::before, .bdg-eyebrow::after { content: ""; width: 38px; height: 1px;
  background: color-mix(in srgb, var(--ink) 30%, transparent); }
.bdg-crest .bdg-script { font-family: 'PonteExtraLight', serif; color: var(--ink);
  font-size: 44px; line-height: 1; margin-top: 10px; font-weight: 400;
  letter-spacing: -.01em; text-transform: uppercase; }
/* Three columns since revision round 3 (note 121) took the lookbook from four
   cards to three. Left at repeat(4, 1fr) the three cards filled columns one to
   three and sat hard against the left edge with an empty fourth column. These
   are home.css's own three-card values for this same ported component (gap and
   max-width included), which is what the "keep in step with home.css" note
   above asks for; `margin: 0 auto` then centres the row. flex: 0 0 auto stays,
   deliberately: the grid must keep its natural height so spare window height
   lands as padding, not inside the card frames. */
.bdg-grid { flex: 0 0 auto; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px);
  align-items: stretch; max-width: 1140px; width: 100%; margin: 0 auto; }
.bdg-card { display: flex; flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: transparent; padding: 14px;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease,
              border-color .5s ease;
  will-change: transform; }
.bdg-card:hover { transform: translateY(-6px);
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.30);
  border-color: color-mix(in srgb, var(--teal) 60%, transparent); }
/* The cards keep the homepage's natural 4/5 frame and are NOT stretched to
   fill the window (owner request 2026-08-20: "I just wanted you to add more
   space above and below the section to make it window height, not stretch
   the cards"). An earlier pass made the frame elastic (flex: 1 1 auto) so
   every spare pixel landed on the photograph, which is what made the cards
   read too long. Now the grid takes its natural height and .bdg-wrap's
   justify-content: center turns the leftover viewport height into equal
   breathing room above and below. Same rule mobile uses. */
.bdg-frame { position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 4/5; flex: 0 0 auto; }
.bdg-frame img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.001);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.bdg-card:hover .bdg-frame img { transform: scale(1.06); }
.bdg-body { padding: 14px 4px 4px; display: flex; flex-direction: column; flex: 0 0 auto; }
.bdg-no-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.bdg-no { font-family: var(--font-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: .28em; font-size: 11px; color: var(--teal); }
.bdg-script-word { font-family: var(--font-script); color: var(--teal);
  font-size: 30px; line-height: .9; margin-left: auto;
  /* headroom so tall script ascenders are never clipped; the negative margin
     keeps the layout unchanged (same fix as the homepage) */
  padding-top: .55em; margin-top: -.55em; }
.bdg-title { font-family: var(--font-title); font-weight: 400; font-size: 22px;
  line-height: 1.1; letter-spacing: .01em; color: var(--ink); margin: 2px 0 8px; }
.bdg-hairline { height: 1px; width: 100%;
  background: color-mix(in srgb, var(--ink) 20%, transparent); margin: 0 0 10px; }
.bdg-copy { font-family: var(--font-body); font-weight: 400; font-size: 12.5px;
  line-height: 1.5; color: color-mix(in srgb, var(--ink) 76%, transparent);
  margin-bottom: 12px; }
.bdg-cta { margin-top: auto; align-self: flex-start; font-family: var(--font-label);
  font-weight: 600; text-transform: uppercase; letter-spacing: .24em; font-size: 11px;
  color: var(--ink); text-decoration: none; padding-bottom: 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 50%, transparent);
  transition: color .3s ease, border-color .3s ease; }
.bdg-cta:hover { color: var(--teal); border-color: var(--teal); }
.bdg-nav { display: none; }
/* Keep the four cards on the same baseline: a card with two lines of copy
   instead of three would otherwise end short. Subgrid puts every card on the
   PARENT's two rows, so all four frames share one height and all four bodies
   share another. Rows are auto/auto, NOT 1fr/auto — 1fr would hand the
   leftover column height back to the photo row and re-stretch the cards,
   which is the thing being fixed above. */
@supports (grid-template-rows: subgrid) {
  .bdg-grid { grid-template-rows: auto auto; }
  .bdg-card { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
}
.bdg-more { flex: 0 0 auto; text-align: center; margin-top: 26px; }
.bdg-more-note { max-width: 620px; margin: 0 auto 16px; font-size: 13px;
  line-height: 1.6; color: color-mix(in srgb, var(--ink) 62%, transparent); }
.bdg-more-btn { display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; border: 1px solid var(--brown); color: var(--ink);
  text-decoration: none; padding: 15px 46px; font-family: var(--font-label);
  font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  transition: background .4s ease, color .4s ease, border-color .4s ease; }
.bdg-more-btn:hover { background: var(--brown); color: var(--cream);
  border-color: var(--brown); }


@media (max-width: 900px) {
  /* --- backdrops lookbook: one card at a time, arrows + swipe (mirrors the
     homepage's mobile treatment in css/home.css) */
  .sec-backdrops { padding: 60px 0 64px; min-height: 0; }
  .bdg-wrap { padding: 0 20px; }
  .bdg-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 0; max-width: 300px; scrollbar-width: none; }
  .bdg-grid::-webkit-scrollbar { display: none; }
  /* display:flex is load-bearing: the desktop @supports rule turns the card
     into a subgrid, and inside this flex rail a subgrid card collapses to the
     rail's 222px, so the title, copy and button sat hidden under the photo
     (that is how the social events page renders on a phone, 2026-09-14).
     A flex column, as css/home.css does it, stacks the body below the frame. */
  .bdg-card { display: flex; flex-direction: column; flex: 0 0 100%; scroll-snap-align: start; }
  .bdg-frame { aspect-ratio: 4/5; flex: 0 0 auto; }   /* see the desktop note */
  .bdg-title { font-size: 20px; }
  .bdg-copy { font-size: 12px; margin-bottom: 10px; }
  .bdg-nav { display: flex; align-items: center; justify-content: center;
    gap: 28px; margin-top: 14px; }
  .bdg-aro { background: none; border: 0; cursor: pointer; padding: 10px 6px;
    opacity: .85; transition: opacity .3s; }
  .bdg-aro svg { width: 46px; height: 9px; fill: var(--ink); display: block; }
  .bdg-prev svg { transform: scaleX(-1); }
  .bdg-count { font-family: var(--font-heading); font-style: italic;
    font-size: 15px; color: color-mix(in srgb, var(--ink) 65%, transparent);
    min-width: 52px; text-align: center; }
  .bdg-eyebrow { transform: none !important; }        /* editor inline nudges */
  .bdg-crest .bdg-script { transform: none !important; font-size: 30px; }
  .bdg-crest { margin-bottom: 12px; }
}