/* Layout · Swipe (round 33): built for the thumb. Lists become rows of cards you swipe sideways (story moments,
   programme, venues, entourage groups, attire, gifts, photos, hotels, events), each card snaps into place and the next
   one peeks in from the edge; dots under each row (layouts.js) show where you are. Questions fold away. The page is
   about half as long. Headings are left-aligned with the swipe hint. Loaded after the design's CSS. */
html.l-swipe .inv > .s:not(.s-hero):not(.s-photo):not(.s-closing) { padding: 50px var(--gutter) 44px; text-align: left; }
html.l-swipe .inv .sh { display: flex; flex-direction: column; align-items: flex-start; text-align: left; margin-bottom: 22px; }
html.l-swipe .inv .sh > :not(.sh-k):not(.sh-t) { display: none; }
html.l-swipe .inv .sh::before, html.l-swipe .inv .sh::after, html.l-swipe .inv .sh-t::before, html.l-swipe .inv .sh-t::after { content: none; display: none; }
html.l-swipe .inv .sh-k, html.l-swipe .inv .sh-t { text-align: left; }
html.l-swipe .inv .sh-t { font-size: clamp(1.9rem, 8vw, 2.6rem); }
html.l-swipe .inv .s.has-row .sh { position: relative; padding-right: 64px; }
html.l-swipe .inv .s.has-row .sh::after { content: "Swipe →"; display: block; position: absolute; right: 0; bottom: 6px; width: auto; height: auto; margin: 0; border: 0; background: none; transform: none; opacity: .7;
  font-family: var(--text); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* the rows */
html.l-swipe .inv :is(.vn, .gal, .pp, .bio, .tml, .dr-roles, .gl-items) {
  display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
  width: auto; max-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  grid-template-columns: none; border: 0; background: none; text-align: left;
}
html.l-swipe .inv :is(.vn, .gal, .pp, .bio, .tml, .dr-roles, .gl-items)::-webkit-scrollbar { display: none; }
html.l-swipe .inv :is(.vn, .gal, .pp, .bio, .tml, .dr-roles, .gl-items)::before { display: none; }
html.l-swipe .inv :is(.vn > *, .gal > *, .pp > *, .bio > *, .tml > *, .dr-roles > *, .gl-items > *) { flex: 0 0 min(82%, 340px); min-width: 0; scroll-snap-align: start; margin: 0; }
@media (min-width: 760px) { html.l-swipe .inv :is(.vn > *, .pp > *, .tml > *, .gl-items > *) { flex-basis: 300px; } }
html.l-swipe .inv :is(.vn, .gal, .pp, .bio, .tml, .dr-roles, .gl-items)::after { content: ""; flex: 0 0 1px; }   /* room after the last card */

/* every card the same: paper, soft shadow, rounded */
html.l-swipe { --sw-card: color-mix(in srgb, var(--bg) 92%, var(--ink)); }
html.l-swipe .inv :is(.vn-c, .pp-g, .tml-i, .dr-roles > div, .gl-it) { padding: 20px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--sw-card); color: var(--ink); box-shadow: 0 14px 30px -24px rgba(0, 0, 0, .55); text-align: left; transform: none; }
html.l-swipe .inv :is(.vn-c, .pp-g, .tml-i)::before, html.l-swipe .inv .vn-c::after, html.l-swipe .inv .vn-c > svg, html.l-swipe .inv:not([class*="dz-s-"]) .tl-i .dz-dot { display: none; }

/* programme: one card per moment, the time large */
html.l-swipe .inv:not([class*="dz-s-"]) .tl > .tl-i { flex-basis: min(58%, 230px); display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
html.l-swipe .inv:not([class*="dz-s-"]) .tl-time { padding: 0; font-family: var(--display); font-size: 1.9rem; line-height: 1; letter-spacing: 0; color: var(--accent); text-align: left; }
html.l-swipe .inv:not([class*="dz-s-"]) .tl-title { font-size: 1.05rem; }

/* venues & hotels & events */
html.l-swipe .inv .vn-l, html.l-swipe .inv .vn-n { text-align: left; }
html.l-swipe .inv .vn-c { display: flex; flex-direction: column; align-items: flex-start; }
html.l-swipe .inv .vn-c .btn-line, html.l-swipe .inv .vn-c .tr-acts { margin-top: auto; }
html.l-swipe .inv .tr-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* story moments */
html.l-swipe .inv .tml { padding-left: var(--gutter); }
html.l-swipe .inv .tml-dot { display: none; }
html.l-swipe .inv .tml-i { padding-bottom: 20px; }
html.l-swipe .inv .tml-img { margin: -20px -18px 14px; border-radius: 18px 18px 0 0; overflow: hidden; }

/* people: group cards, portraits */
html.l-swipe .inv .pp-h { text-align: left; }
html.l-swipe .inv .pp-l { text-align: left; }
html.l-swipe .inv .bio > .bio-c { flex-basis: 150px; justify-items: start; text-align: left; }
html.l-swipe .inv .bio-ph { width: 150px; aspect-ratio: 4 / 5; border-radius: 16px; }
html.l-swipe .inv .bio-ph .ph-slot { border-radius: 16px; }
html.l-swipe .inv .pp-intro { text-align: left; }

/* attire */
html.l-swipe .inv .dr-roles.is-looks > div { flex-basis: min(62%, 240px); align-items: center; }
html.l-swipe .inv .dr-text, html.l-swipe .inv .dr-note { text-align: left; }

/* gifts */
html.l-swipe .inv .gl-items > .gl-it { flex-basis: min(80%, 300px); grid-template-columns: 1fr; }

/* photos: tall frames */
html.l-swipe .inv .gal > .gal-i { flex-basis: min(72%, 300px); }
html.l-swipe .inv .gal-i img, html.l-swipe .inv .gal-f, html.l-swipe .inv .gal-ph { aspect-ratio: 3 / 4; border-radius: 18px; }

/* countdown: one pill */
html.l-swipe .inv .cd { display: flex; gap: 0; padding: 14px 6px; border-radius: 22px; background: var(--sw-card); border: 1px solid var(--line); box-shadow: 0 14px 30px -24px rgba(0, 0, 0, .55); }
html.l-swipe .inv .cd-u { flex: 1; padding: 0; border: 0; background: none; box-shadow: none; }
html.l-swipe .inv .cd-u b { font-size: clamp(1.8rem, 9vw, 2.4rem); }
html.l-swipe .inv .cal { justify-content: flex-start; }

/* questions fold, already; the reply form stays a card */
html.l-swipe .inv .faq details { padding: 0 2px; }
html.l-swipe .inv .rs { border-radius: 22px; }
html.l-swipe .inv .rs-by { text-align: left; }

/* dots (layouts.js) */
.lay-dots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.lay-dots i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .25; transition: width .25s, opacity .25s; }
.lay-dots i.is-on { width: 18px; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .lay-dots i { transition: none; } }

html.l-swipe .inv:not([class*="dz-s-"]) .tl-i > .tl-time { order: 0; grid-column: auto; }
html.l-swipe .inv:not([class*="dz-s-"]) .tl-i > .tl-body { order: 1; grid-column: auto; }

/* the programme row (only when the design has no programme style of its own) */
html.l-swipe .inv:not([class*="dz-s-"]) .tl { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); max-width: none;
  margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 16px; scrollbar-width: none; border: 0; background: none; }
html.l-swipe .inv:not([class*="dz-s-"]) .tl::-webkit-scrollbar { display: none; }
html.l-swipe .inv:not([class*="dz-s-"]) .tl::before { display: none; }
html.l-swipe .inv:not([class*="dz-s-"]) .tl::after { content: ""; flex: 0 0 1px; }
html.l-swipe .inv:not([class*="dz-s-"]) .tl > .tl-i { scroll-snap-align: start; margin: 0; padding: 20px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 14px 30px -24px rgba(0, 0, 0, .55); }
html.l-swipe .inv:not([class*="dz-s-"]) .tl-i::before, html.l-swipe .inv:not([class*="dz-s-"]) .tl-i::after { display: none; }

html.l-swipe .inv .vn-c .dz-pin, html.l-swipe .inv .vn-c .dz-tab { display: none; }

html.l-swipe .inv .cd-u b { color: var(--ink); -webkit-text-fill-color: currentColor; background: none; text-shadow: none; }
html.l-swipe .inv .cd-u span { color: var(--muted); }
html.l-swipe .inv .cd { color: var(--ink); }

html.l-swipe .inv:not([class*="dz-s-"]) .tl > .tl-i { background: var(--sw-card); color: var(--ink); }
html.l-swipe .inv :is(.vn-n, .vn-l, .pp-h, .pp-l, .tml-t, .bio-n, .tl-title, .gl-n) { -webkit-text-fill-color: currentColor; }
html.l-swipe .inv :is(.vn-c, .pp-g, .tml-i) :is(.vn-n, .pp-h, .pp-l, .tml-t), html.l-swipe .inv:not([class*="dz-s-"]) .tl-title { color: var(--ink); }