/* Landing v4 (owner 2026-10-05): the Create app's liquid glass floating over
   fields of hand-painted doodles drawn in the style of the owner's Pinterest
   pin (loose naive watercolor, no outlines, candy pink, rose, sage, butter
   yellow, a touch of sky blue, lots of air on warm cream paper).

   ONE structure for every width (index.html #view-home.v4). Every section is
   a layered scene: the cream paper plate (.v4-bg) breathing behind, doodles
   scattered at three depths (.v4-fg, data-depth 0 far .. 1 near), each its
   own cut-out that sways and parallaxes on its own, and the content on panes
   and pills of Create's glass: the --create-glass-* tokens on :root in
   create-glass.css (38% paper fill, blur(22px) saturate(1.7), white hairline,
   inset sheen). This file reads those tokens; it never redefines them.

   A doodle's place is set in the markup: --x/--y/--w/--r on wide screens,
   --px/--py/--pw on a phone (data-desk-only hides it there). Motion:
   landing-2026/v4.js, one clock. Reduced motion (or no script) is this still
   composition. Loaded last by app/studio-shell.tsx, so it wins over the
   retired landing rules in styles.css without editing them. */

body[data-view="home"],
body[data-view="home"] #view-home.v4 { background-color: #f6eedf; }
#view-home.v4 {
  --v4-ink: #2e2622;
  --v4-muted: #6b5a52;
  --v4-rose: #b8476d;
  --v4-rose-deep: #9c3a5c;
  --v4-gold: #94701f;
  --v4-paper: #f6eedf;
  --v4-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --v4-serif: "Cormorant Garamond", Georgia, serif;
  --v4-sans: "DM Sans", system-ui, sans-serif;
  /* Liquid glass, layered on Create's glass (owner 2026-10-05: "the liquid
     glass blur effect to an even greater extent"). These sit beside the
     --create-glass-* tokens and never replace them: a little more blur and
     light on top of Create's own, a veil so text stays legible over colour,
     a pointer-tracked specular (--mx/--my, set by v4.js), a lens edge with a
     faint dispersion, an inner glow and a deeper shadow. */
  /* One blur function only: WebKit drew no blur at all when two were chained
     (Create's blur followed by a boost), measured 2026-10-05. So the boost is
     its own complete value, a step past Create's blur(22px) saturate(1.7). */
  /* Over full painted scenes the glass frosts more, so every line reads
     (owner 2026-10-06 backdrops). */
  --lg-blur: blur(30px) saturate(1.5) brightness(1.1);
  --create-glass-fill: color-mix(in srgb, var(--paper, #f6efe6) 58%, transparent);
  --create-glass-blur: blur(26px) saturate(1.5) brightness(1.08);
  --lg-veil: linear-gradient(180deg, rgb(255 251 245 / 0.22), rgb(255 251 245 / 0.12));
  --lg-spec: radial-gradient(260px circle at var(--mx, 24%) var(--my, -12%), rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.12) 38%, rgb(255 255 255 / 0) 62%);
  --lg-rim: radial-gradient(220px circle at var(--mx, 24%) var(--my, -12%), rgb(255 255 255 / 1), rgb(255 255 255 / 0.4) 45%, rgb(255 255 255 / 0.16) 75%);
  --lg-lens:
    inset 0 1px 0 rgb(255 255 255 / 0.85),
    inset 0 22px 32px -22px rgb(255 255 255 / 0.65),
    inset 0 -26px 36px -28px rgb(140 70 90 / 0.22),
    inset 1.5px 0 0 rgb(255 196 214 / 0.35),
    inset -1.5px 0 0 rgb(176 214 255 / 0.32);
  --lg-depth: 0 1px 2px rgb(84 48 34 / 0.08), 0 18px 40px -18px rgb(84 48 34 / 0.32), 0 46px 90px -50px rgb(120 60 80 / 0.35);
  --lg-rose: color-mix(in srgb, #a83d63 93%, transparent);
  position: relative;
  padding: 0;
  /* Clip sideways only: decorations may hang over a section's top or bottom,
     never cut in a straight line (owner 2026-10-06). */
  overflow-x: clip;
  overflow-y: visible;
  color: var(--v4-ink);
  font-family: var(--v4-sans);
}
.v4 *,
.v4 *::before,
.v4 *::after { box-sizing: border-box; }

/* ---------- scenes ---------- */
.v4-sec { position: relative; z-index: 1; isolation: isolate; padding: clamp(60px, 6.5vw, 100px) 0; }

/* ---------- one painted field (v4.js tiles the plates) ---------- */
/* Each plate covers its group of sections and bleeds past both ends; the
   bleed is feathered, so neighbouring plates crossfade and no section edge
   is ever a straight cut. Until v4.js has placed them, the cream shows. */
/* clip, not hidden: hidden would make the field a scroll container and
   stop the sticky backdrops from holding still. */
.v4-field { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.v4-field:not(.is-placed) .v4-plate { display: none; }
.v4-plate { display: none; }
.v4-tile {
  position: absolute;
  left: -40px;
  right: -40px;
  background-color: var(--tint, #fbf5ea);
  background-image: var(--tile);
  background-repeat: repeat;
  background-size: var(--tile-size, 512px) var(--tile-size, 512px);
  /* Plain cream paper, tinted per group; the tint carries the colour, the
     wedding scene carries the picture. */
  background-blend-mode: multiply;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade, 300px), #000 calc(100% - var(--fade, 300px)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade, 300px), #000 calc(100% - var(--fade, 300px)), transparent 100%);
}
/* The first paper rises softly out of the page colour (on phone the nav is a
   solid bar above it, and a hard start read as a cut, owner 2026-10-06). */
.v4-tile.is-first { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-top, 0px), #000 calc(100% - var(--fade, 300px)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-top, 0px), #000 calc(100% - var(--fade, 300px)), transparent 100%); }


/* Each chapter's painted scene fills the screen behind it and holds still
   while the chapter scrolls over it (sticky inside the chapter's paper layer,
   whose feathered ends crossfade one scene into the next). */
.v4-backdrop { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.v4-backdrop picture, .v4-backdrop img { display: block; width: 100%; height: 100%; }
.v4-backdrop img { object-fit: cover; object-position: 50% 60%; transform-origin: 50% 60%; will-change: transform; }

/* Floral sprays frame each section like a stationery card (native size). */
.v4-fg.v4-flora { pointer-events: none; }
.v4-fg.v4-flora .v4-fg-art { filter: none; }
.v4-fg.v4-flora.is-mirror .v4-fg-art { scale: -1 1; }

/* ---------- wedding motifs on every boundary (v4.js moves them) ---------- */
/* Each motif has its own band between the two sections and moves only
   inside it, so it never crosses text, labels or buttons. */
.v4-link { position: relative; z-index: 1; height: 200px; overflow-x: clip; overflow-y: visible; pointer-events: none; }
.v4-link-art { position: absolute; left: var(--x); top: var(--y); display: block; height: var(--h); }
.v4-link-art img { display: block; width: auto; height: 100%; rotate: var(--r, 0deg); filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2.5px rgb(255 255 255 / 0.8)) drop-shadow(0 4px 6px rgb(84 48 34 / 0.12)); }
.v4-link-art.is-flip img { scale: 1 -1; }
/* Scattered motifs (confetti, petals, photos) fade out in an oval, so a
   patch never reads as a box (owner 2026-10-06). */
.v4-link[data-motif="fall"] .v4-link-art img,
.v4-link[data-motif="drift"] .v4-link-art img {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 72%);
}
.v4-link[data-motif="swing"] .v4-link-art { transform-origin: 50% 0; }
.v4-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.v4-scene--front { z-index: 3; }
.v4-scene--front .v4-fg { pointer-events: none; }
.v4-bg {
  position: absolute;
  inset: -4%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.v4-hero .v4-bg { -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
.v4-bg picture,
.v4-bg-art { display: block; width: 100%; height: 100%; }
.v4-bg-art { object-fit: cover; transform-origin: 50% 50%; }
.v4-fg {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  display: block;
  pointer-events: auto;
}
/* ---------- hero arrival (pure CSS, from the first paint) ----------
   Owner 2026-10-06: the text "doesn't appear gracefully and flickers" when a
   script hid text it found already drawn. Everything here starts with the
   first paint, so nothing is shown and then hidden again. The glass card
   itself never fades (a fading backdrop-filter pops in WebKit); its lines
   rise out of a soft blur one after another, then the doodles spring in. */
@property --wipe { syntax: "<percentage>"; inherits: false; initial-value: 130%; }
/* The studio's view entrance (styles.css "studio-copy-in" on every h1,
   section, figure ... while the view is "is-view-in") out-ranked these and
   then let go a second later, restarting the headline from invisible. The
   landing owns its entrances, so that one never applies here. */
body #view-home.v4 :is(h1, h2, section, article, figure, .kicker, .know-copy, .lookbook, .env-row, .home-stage, .is-block-in) { animation: none; }
body #view-home.v4 .v4-hero-panel > * { animation: v4-line-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
body #view-home.v4 .v4-hero-panel > :nth-child(1) { animation-delay: 0.1s; }
body #view-home.v4 .v4-hero-panel > :nth-child(2) { animation-delay: 0.22s; }
body #view-home.v4 .v4-hero-panel > :nth-child(3) { animation-delay: 0.38s; }
body #view-home.v4 .v4-hero-panel > :nth-child(4) { animation-delay: 0.5s; }
body #view-home.v4 .v4-hero-panel > :nth-child(5) { animation-delay: 0.6s; }
body #view-home.v4 .v4-hero-panel > :nth-child(n + 6) { animation-delay: 0.68s; }
@keyframes v4-line-in { from { opacity: 0; translate: 0 16px; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
/* Doodles spring in around the card, one after another. */
body #view-home.v4 .v4-hero .v4-fg { animation: v4-pop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(0.5s + var(--i, 0) * 0.07s); }
@keyframes v4-pop { from { opacity: 0; scale: 0.2; rotate: -24deg; translate: 0 30px; } 40% { opacity: 1; } }
/* "Oui" writes itself in with a soft-edged wipe. */
body #view-home.v4 .v4-hero .v4-fg-art[src*="/oui."] {
  -webkit-mask-image: linear-gradient(90deg, #000 var(--wipe), transparent calc(var(--wipe) + 22%));
  mask-image: linear-gradient(90deg, #000 var(--wipe), transparent calc(var(--wipe) + 22%));
  animation: v4-write 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.9s both;
}
@keyframes v4-write { from { --wipe: -25%; } to { --wipe: 130%; } }
@media (prefers-reduced-motion: reduce) {
  body #view-home.v4 .v4-hero-panel > *, body #view-home.v4 .v4-hero .v4-fg, body #view-home.v4 .v4-hero .v4-fg-art[src*="/oui."] { animation: none; }
}

/* Drifting rose petals: soft painted shapes, no hard edge. */
.v4-petal {
  position: absolute; left: 0; top: 0; z-index: 1; width: 22px; height: 16px;
  border-radius: 80% 10% 80% 20%;
  background: radial-gradient(120% 120% at 30% 30%, #fbd3dc 0%, #f2a3b5 55%, #e27d97 100%);
  box-shadow: inset -1px -1px 2px rgb(160 50 80 / 0.25);
  opacity: 0; pointer-events: none; will-change: transform;
}
.v4-fg-art { display: block; width: 100%; height: auto; rotate: var(--r, 0deg); user-select: none; -webkit-user-drag: none; }
/* A soft paper halo keeps each doodle clear of the colourful plates. */
/* Doodles stand off the painted scenes: a crisp white sticker edge and a
   soft shadow (owner 2026-10-06: they "blend too far into" the backdrop). */
.v4-fg:not(.v4-flora) .v4-fg-art { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2.5px rgb(255 255 255 / 0.8)) drop-shadow(0 4px 6px rgb(84 48 34 / 0.14)); }
/* Over full painted scenes, big floral sprays fought the scenes' own flowers
   and covered their people (owner 2026-10-06: "the placement of elements are
   just sometimes god awful"). Sprays frame the hero only. */
.v4-sec:not(.v4-hero) .v4-flora { display: none; }
/* Doodles move every frame; their own layers keep the shadow rasterised once
   instead of repainting it per frame. */
.v4-fg, .v4-fg-art, .v4-link-art { will-change: transform; }

/* ---------- glass ---------- */
.v4-glass {
  position: relative;
  border: 1px solid var(--create-glass-edge);
  background-color: var(--create-glass-fill);
  background-image: var(--lg-spec), var(--lg-veil), var(--create-glass-sheen);
  box-shadow: var(--create-glass-inset), var(--lg-lens), var(--lg-depth);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
}
/* The rim: a bright edge where the light (the pointer) is. */
.v4-glass::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--lg-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.v4-glass > * { position: relative; z-index: 1; }
/* Cards on a pane tint it instead of blurring again (create-glass.css). */
.v4-card {
  border: 1px solid var(--create-glass-edge);
  background: var(--create-glass-card);
  box-shadow: var(--create-glass-inset);
}
.v4-wrap { position: relative; z-index: 2; width: min(100% - 40px, 1120px); margin-inline: auto; }
.v4-pane { padding: clamp(28px, 3.4vw, 48px); border-radius: 34px; }
.v4-head { max-width: 40rem; margin: 0 auto clamp(26px, 3vw, 40px); text-align: center; }
.v4-head--left { margin-inline: 0; text-align: left; }

/* ---------- type ---------- */
.v4 .v4-eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 7px 14px;
  border: 1px solid var(--create-glass-edge);
  border-radius: 999px;
  background: var(--create-glass-card);
  box-shadow: var(--create-glass-inset);
  color: var(--v4-gold);
  font: 600 11px/1.3 var(--v4-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.v4 h1,
.v4 h2,
.v4 h3 {
  margin: 0;
  color: var(--v4-ink);
  font-family: var(--v4-serif);
  font-weight: 500;
  letter-spacing: -0.012em;
  text-transform: none;
  text-shadow: none;
}
.v4 h1 { font-size: clamp(3rem, 5.6vw, 4.9rem); line-height: 0.98; }
.v4 h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.02; }
.v4 h3 { font-size: 1.55rem; line-height: 1.1; }
.v4 h1 em,
.v4 h2 em { color: var(--v4-rose); font-style: italic; }
.v4 .v4-lede { max-width: 32em; margin: 16px auto 0; color: var(--v4-muted); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65; }
.v4-head--left .v4-lede { margin-left: 0; }
.v4 .v4-small { margin: 16px 0 0; color: var(--v4-muted); font-size: 13px; }

/* ---------- buttons and pills ---------- */
.v4-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.v4-head--left .v4-actions { justify-content: flex-start; }
.v4 .v4-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--lg-spec), var(--lg-rose);
  color: #fffaf6;
  font: 500 15px/1 var(--v4-sans);
  text-decoration: none;
  text-shadow: 0 1px 1px rgb(120 30 60 / 0.35);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -10px 18px -10px rgb(90 20 50 / 0.35), 0 16px 30px -14px rgb(156 58 92 / 0.75);
  -webkit-backdrop-filter: var(--create-glass-blur);
  backdrop-filter: var(--create-glass-blur);
  cursor: pointer;
  transition: transform 0.15s var(--v4-ease), background-color 0.15s ease;
}
.v4 .v4-btn:hover { background: var(--lg-spec), var(--v4-rose-deep); transform: translateY(-2px); }
.v4 .v4-btn--glass {
  border: 1px solid var(--create-glass-edge);
  background: var(--lg-spec), var(--create-glass-fill);
  color: var(--v4-ink);
  text-shadow: none;
  box-shadow: var(--create-glass-inset), var(--lg-lens), var(--create-glass-drop);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
}
.v4 .v4-btn--glass:hover { background: color-mix(in srgb, #ffffff 48%, transparent); }
.v4 .v4-btn:focus-visible,
.v4 a:focus-visible,
.v4 button:focus-visible { outline: 2px solid var(--v4-rose); outline-offset: 4px; }
.v4 .v4-link { color: var(--v4-rose); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; }

/* ---------- hero ---------- */
.v4-hero { display: grid; place-items: center; min-height: max(100vh, 700px); min-height: max(100svh, 700px); padding: 0; overflow-x: clip; overflow-y: visible; }
.v4-hero .v4-wrap { padding: clamp(110px, 13vh, 150px) 0 clamp(64px, 9vh, 110px); }
.v4-hero-panel { width: min(100%, 560px); margin-inline: auto; padding: clamp(30px, 3.6vw, 50px); border-radius: 36px; text-align: center; }

/* ---------- openings (studio.js builds the slides) ---------- */
.v4-openings .v4-pane { width: min(100%, 560px); margin-inline: auto; padding: 16px 16px 10px; text-align: center; }
.v4 .ml-showcase { min-width: 0; margin: 0; }
.v4 .ml-intro-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.v4 .ml-intro-rail::-webkit-scrollbar { display: none; }
.v4 .ml-intro-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.v4 .ml-hero-art,
.v4 .ml-intro-slide .ml-hero-art { position: relative; display: block; width: 100%; max-width: none; margin: 0 0 10px; padding: 0; overflow: hidden; border: 0; border-radius: 24px; background: #f3e4dc; box-shadow: none; color: var(--v4-ink); text-decoration: none; }
.v4 .ml-media-window,
.v4 .ml-intro-stage { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 0; background: #f3e4dc; }
.v4 .ml-media-window .ml-video,
.v4 .ml-hero-art .ml-media-window .ml-video,
.v4 .ml-hero-art img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 58%; mix-blend-mode: normal; }
.v4 .ml-intro-stage > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.v4 .ml-intro-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.v4 .ml-intro-play { position: absolute; inset: 0; display: flex; align-items: end; justify-content: center; padding: 18px; border: 0; background: transparent; color: #fff9f4; cursor: pointer; }
.v4 .ml-intro-play span { padding: 11px 18px; border-radius: 999px; background: rgb(156 58 92 / 0.92); font: 500 12px var(--v4-sans); }
.v4 .ml-intro-play[hidden] { display: none; }
.v4 .ml-open,
.v4 .ml-intro-caption { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 18px; border-top: 1px solid var(--create-glass-edge); background: var(--create-glass-card); font-size: 13px; text-align: left; }
.v4 .ml-motion-toggle,
.v4 .ml-intro-replay { display: block; min-height: 40px; margin: 0 auto 4px; padding: 8px 14px; border: 0; background: none; color: var(--v4-muted); font: 12px var(--v4-sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.v4 .ml-intro-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 4px 0; }
.v4 .ml-intro-nav > button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--create-glass-edge); border-radius: 50%; background: var(--create-glass-card); box-shadow: var(--create-glass-inset); color: var(--v4-rose); cursor: pointer; }
.v4 .ml-intro-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.v4 .ml-intro-count { display: block; color: var(--v4-gold); font: 600 10px var(--v4-sans); letter-spacing: 0.16em; }
.v4 .ml-intro-name { display: block; margin-top: 2px; font: italic 500 24px var(--v4-serif); }
.v4 .ml-intro-dots { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.v4 .ml-intro-dots button { position: relative; width: 26px; height: 30px; border: 0; background: none; cursor: pointer; }
.v4 .ml-intro-dots button::after { content: ""; position: absolute; left: 10px; top: 12px; width: 6px; height: 6px; border: 1px solid var(--v4-rose); border-radius: 50%; }
.v4 .ml-intro-dots button[aria-current="true"]::after { background: var(--v4-rose); transform: scale(1.35); }
.v4 .ml-intro-hint { margin: 2px 0 8px; color: var(--v4-muted); font-size: 11px; letter-spacing: 0.04em; }

/* WebKit ignores object-fit on a video poster: each film shows its still on
   top until it plays (v4.js marks .is-film-playing). The envelope and garden
   films play only on the portrait layout, the drive film only on a wide one
   (studio.js). */
.v4 .v4-film-still { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s ease; }
.v4 .is-film-playing > .v4-film-still { opacity: 0; pointer-events: none; }
@media (min-width: 1025px) {
  .v4 .ml-showcase .ml-motion-toggle,
  .v4 .v4-film--garden .ml-motion-toggle { display: none; }
}

/* ---------- the six letters (v4.js scrubs envelope -> letter) ---------- */
.v4 > .v4-letters { padding: 0; }
.lx-scene { --lx-w: clamp(118px, calc((100vw - 220px) / 6 - 18px), 168px); --lx-gap: clamp(14px, 1.6vw, 26px); position: relative; z-index: 2; }
/* Not clipped: a clip cut the glass tray's shadow into a straight line. */
.lx-pin { position: relative; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 26px; padding: clamp(80px, 9vw, 120px) 0 clamp(56px, 7vw, 96px); overflow: visible; }
.lx-copy { position: relative; z-index: 3; display: grid; width: min(100% - 40px, 640px); padding: clamp(22px, 2.6vw, 34px); border-radius: 30px; text-align: center; }
.lx-copy > * { grid-area: 1 / 1; }
.lx-copy-b { visibility: hidden; }
.lx-deck { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 22px var(--lx-gap); width: min(100% - 32px, calc(var(--lx-w) * 6 + var(--lx-gap) * 5)); margin: 0; padding: 0; list-style: none; }
.lx-slot { position: relative; display: grid; justify-items: center; gap: 12px; width: var(--lx-w); }
.v4 .lx-card { position: relative; display: block; width: var(--lx-w); aspect-ratio: 3 / 4; perspective: 1100px; color: inherit; -webkit-tap-highlight-color: transparent; }
.lx-flip { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); }
.lx-face { position: absolute; inset: 0; display: grid; place-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.lx-face img { display: block; width: 100%; height: 100%; }
/* WebKit does not reliably honour backface-visibility here, so the face out
   of view is hidden outright; the timeline swaps faces edge-on. */
.lx-face--env { transform: rotateY(0deg) translateZ(0.5px); visibility: hidden; }
.lx-face--env img { position: absolute; left: -12%; top: 50%; width: 124%; height: auto; transform: translateY(-50%); }
.lx-face--letter { overflow: hidden; border-radius: 12px; transform: rotateY(180deg) translateZ(0.5px); padding: 6px; }
.lx-face--letter img { border-radius: 8px; object-fit: cover; }
.v4 .lx-name { display: grid; gap: 2px; padding: 8px 14px; border-radius: 16px; text-align: center; }
.v4 .lx-name strong { font: italic 500 1.25rem/1 var(--v4-serif); }
.v4 .lx-name small { color: var(--v4-muted); font-size: 11px; }
/* The deck shows invitation cards by name (owner 2026-10-06: promote the
   newest); one line each, so no label runs into the button below. */
.v4 .lx-name { max-width: 100%; }
.v4 .lx-name strong { overflow: hidden; font-size: 1.05rem; white-space: nowrap; text-overflow: ellipsis; }
.v4 .lx-name small { display: none; }
@media (max-width: 719px) {
  .v4 .lx-name { padding: 6px 8px; }
  .v4 .lx-name strong { font-size: 0.86rem; line-height: 1.1; white-space: normal; text-overflow: clip; }
}
.lx-hint { position: relative; z-index: 3; }
@media (hover: hover) {
  .lx-card .lx-flip { transition: translate 0.35s var(--v4-ease); }
  .lx-card:hover .lx-flip { translate: 0 -8px; }
}
.v4 #cardWall { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.v4 #cardWall img { display: none !important; }
.lx-motion .lx-scene { height: 330vh; }
.lx-motion .lx-pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 620px; padding: max(88px, 12vh) 0 6vh; }
.lx-motion .lx-copy-b { visibility: visible; }
.lx-motion .lx-deck { display: block; width: 100%; height: var(--lx-deck-h, calc(var(--lx-w) * 4 / 3 + 70px)); z-index: 4; }
/* The deck (and what bursts from it) passes in front of the copy glass: seen
   through the frost, the burst read as ghosts (owner 2026-10-06). */
.lx-motion .lx-slot { position: absolute; left: calc(50% - var(--lx-w) / 2); top: var(--lx-slot-top, 0); }
/* What bursts out of each envelope as it opens (v4.js letters()). */
.lx-burst { display: none; }
.lx-motion .lx-burst { position: absolute; z-index: 20; left: 50%; top: calc(var(--lx-slot-top, 0px) + var(--lx-w) * 2 / 3); display: block; width: 0; height: 0; pointer-events: none; }
/* No filter: a drop-shadow on a piece that scales and spins is re-drawn every
   frame (owner 2026-10-06: the stage felt laggy). */
.lx-burst img { position: absolute; left: 0; top: 0; display: block; height: auto; max-width: none; will-change: transform, opacity; }
.lx-motion .lx-flip { transform: none; }
.lx-motion .lx-face--env { visibility: visible; }
.lx-motion .lx-face--letter { visibility: hidden; }
.lx-motion .lx-name { opacity: 0; }

/* ---------- every invitation (landing-templates.js fills it) ---------- */
.v4 > .v4-strip.tpl-strip { --tpl-ink: var(--v4-ink); --tpl-muted: var(--v4-muted); --tpl-mat: rgb(255 253 249 / 0.85); --tpl-line: var(--create-glass-edge); margin-top: 0; background: transparent; }
.v4-strip .tpl-viewport { position: relative; z-index: 2; }
.v4-strip .tpl-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.v4-strip .tpl-pause { min-height: 40px; padding: 8px 18px; border: 1px solid var(--create-glass-edge); border-radius: 999px; background: var(--create-glass-card); box-shadow: var(--create-glass-inset); color: var(--v4-ink); }
.v4-strip .tpl-all { color: var(--v4-rose); }

/* ---------- two-column panes ---------- */
.v4-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
.v4-howto .wtut { width: min(100%, 300px); box-shadow: 0 0 0 10px rgb(255 255 255 / 0.35), 0 0 0 11px var(--create-glass-edge), 0 40px 60px -36px rgb(84 48 34 / 0.55); }

/* the day and the dress (studio.js: #happyWheel, the countdown) */
.v4-day .date-pair { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 18px; }
.v4-day .date-field { grid-template-rows: auto minmax(340px, auto); color: var(--v4-gold); font-size: 11px; letter-spacing: 0.2em; }
.v4-day .date-field > span { color: var(--v4-gold); }
.v4-day .date-wheel { --ink: var(--v4-ink); --wheel-pad: calc((340px - var(--wheel-item)) / 2); height: 340px; border: 1px solid var(--create-glass-edge); background: var(--create-glass-card); box-shadow: var(--create-glass-inset); backdrop-filter: none; -webkit-backdrop-filter: none; }
.v4-day .date-wheel::before { background: linear-gradient(180deg, rgb(250 244 234 / 0.9), rgb(250 244 234 / 0)); }
.v4-day .date-wheel::after { background: linear-gradient(0deg, rgb(250 244 234 / 0.9), rgb(250 244 234 / 0)); }
.v4-day .wheel-item { color: rgb(46 38 34 / 0.28); }
.v4-day .wheel-item.is-on { color: var(--v4-rose); }
.v4-day .wheel-mark { border-color: rgb(184 71 109 / 0.32); }
.v4-day .date-card { --ink: var(--v4-ink); --muted: var(--v4-muted); min-height: 340px; border: 1px solid var(--create-glass-edge); background: var(--create-glass-card); box-shadow: var(--create-glass-inset); color: var(--v4-ink); text-transform: none; letter-spacing: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.v4-day .date-who { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.v4-day .date-spoken { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.v4-day .date-line { color: var(--v4-muted); }
.v4-day .count-face { gap: 10px; }
.v4-day .count-face div { min-height: 80px; padding: 12px 4px; border: 1px solid var(--create-glass-edge); background: rgb(255 255 255 / 0.35); }
.v4-day .count-face strong { color: var(--v4-rose); font-size: clamp(1.8rem, 3vw, 2.5rem); }
.v4-day .count-face span { font-size: 10px; letter-spacing: 0.14em; }
.v4-day .date-open { color: var(--v4-rose); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }

/* the diary (studio.js: the photo inputs, #homeStoryNote) */
.v4-diary .story-line-home { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 3vw, 36px); max-width: 820px; margin: 0 auto 30px; }
.v4-diary label.story-shot { background: rgb(255 253 249 / 0.9); box-shadow: 0 0 0 1px var(--create-glass-edge), 0 24px 40px -30px rgb(84 48 34 / 0.55); }
.v4-diary .story-empty,
.v4-diary .story-empty-copy { color: var(--v4-muted); }
.v4-diary .story-plus { border-color: rgb(184 71 109 / 0.45); }
.v4-diary .story-plus::before,
.v4-diary .story-plus::after { background: var(--v4-rose); }
.v4-diary .story-line figcaption { color: var(--v4-rose); font-family: var(--v4-serif); font-style: italic; }
.v4-diary-note { display: grid; gap: 10px; max-width: 560px; margin: 0 auto; text-align: center; }
.v4-diary .story-note-label { color: var(--v4-gold); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.v4-diary .story-note { width: 100%; padding: 18px 22px; border: 1px solid var(--create-glass-edge); border-radius: 20px; background: var(--create-glass-card); box-shadow: var(--create-glass-inset); color: var(--v4-ink); font: italic 500 1.3rem/1.45 var(--v4-serif); text-align: center; resize: none; }

/* films */
.v4-film { position: relative; width: min(100%, 900px); margin: 0 auto; padding: 12px 12px 0; border-radius: 32px; }
.v4-film .ml-media-window { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 22px; background: #f3e4dc; }
.v4-film .ml-video,
.v4-film .band-video { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.v4 .ml-moment-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 10px 16px; font: italic 500 1.25rem var(--v4-serif); }
.v4 .ml-moment-caption .ml-motion-toggle { margin: 0; flex-shrink: 0; }

/* three steps */
.v4-steps-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 26px); margin: 0; padding: 0; list-style: none; }
.v4-steps-list li { padding: 30px 26px 28px; border-radius: 28px; }
.v4-step-num { display: block; margin-bottom: 14px; color: var(--v4-rose); font: italic 500 2.4rem/1 var(--v4-serif); }
.v4-steps-list p { margin: 10px 0 0; color: var(--v4-muted); font-size: 15px; line-height: 1.6; }

/* questions */
/* The questions intro keeps its glass: over a full painted scene a bare
   heading lost its words to the picture. */
body[data-view="home"] .v4 .know-copy { max-width: none; padding: clamp(24px, 3.4vw, 48px); text-align: left; }
.v4 .know-list { margin: 0; }
.v4 .know-item { border-top-color: var(--create-glass-edge); }
.v4 .know-item:last-child { border-bottom-color: var(--create-glass-edge); }
.v4 .know-num { color: var(--v4-rose); }
.v4 .know-q { color: var(--v4-ink); font-family: var(--v4-serif); font-size: 1.35rem; }
.v4 .know-plus { color: var(--v4-rose); border-color: var(--create-glass-edge); background: var(--create-glass-card); }
.v4 .know-body p { color: var(--v4-muted); }

/* couples' notes */
.v4-notes .notes-reel { position: relative; z-index: 2; margin: 0; }
.v4 .note { padding: 22px 22px 20px; border: 1px solid var(--create-glass-edge); border-radius: 22px; background: var(--create-glass-fill); background-image: var(--create-glass-sheen); box-shadow: var(--create-glass-inset), var(--create-glass-drop); -webkit-backdrop-filter: var(--create-glass-blur); backdrop-filter: var(--create-glass-blur); }
.v4 .note-stars { color: #d9a13a; }
.v4 .note > p:nth-of-type(2) { font: italic 500 1.2rem/1.4 var(--v4-serif); }
.v4 .notes-marquee { padding-block: 10px; }

/* finale and footer */
.v4-finale .v4-pane { width: min(100%, 620px); margin-inline: auto; text-align: center; }
.v4-footer-links { display: flex; justify-content: center; gap: 22px; margin-top: 22px; font-size: 13px; }
.v4-footer-links a { color: var(--v4-muted); text-underline-offset: 4px; }
.v4 .fw-house-band { position: relative; z-index: 2; background: transparent; }
/* The old phone landing carried the house link in its own finale and hid this
   footer (wedding-brand.css); one page for every width shows it everywhere. */
body[data-view="home"] #view-home.v4 > .fw-house-band { display: grid; }

.v4-only-phone { display: none !important; }

/* ---------- tablet and phone: the same scenes, stacked ---------- */
@media (max-width: 1024px) {
  .v4-only-desk { display: none !important; }
  .v4-only-phone { display: inline-flex !important; }
  .v4-fg { left: var(--px, var(--x)); top: var(--py, var(--y)); width: var(--pw, var(--w)); }
  .v4-fg[data-desk-only] { display: none; }
  .v4-link { height: 150px; }
  .v4-link-art { left: var(--px, var(--x)); height: var(--ph, var(--h)); }
  /* On phone each scene centres its people, so the seam motifs keep to the
     screen edges and the falling confetti stays off (owner 2026-10-06:
     placement). The travelling motifs (fly, roll) still cross. */
  .v4-link:not([data-motif="fly"]):not([data-motif="roll"]) .v4-link-art.is-a { left: 3% !important; }
  .v4-link:not([data-motif="fly"]):not([data-motif="roll"]) .v4-link-art.is-b,
  .v4-link:not([data-motif="fly"]):not([data-motif="roll"]) .v4-link-art.is-c { left: auto !important; right: 3%; }
  .v4-link[data-motif="fall"] { display: none; }
  .v4-link-art:not([style*="--px"]) { display: none; }
  .v4-hero { min-height: 0; align-items: end; }
  .v4-hero .v4-wrap { padding: 300px 0 36px; }
}
@media (max-width: 900px) {
  .v4-split,
  .v4-steps-list { grid-template-columns: minmax(0, 1fr); }
  .v4-head--left { margin-inline: auto; text-align: center; }
  .v4-head--left .v4-lede { margin-left: auto; }
  .v4-head--left .v4-actions { justify-content: center; }
  .lx-scene { --lx-w: min(108px, calc((100vw - 64px) / 3 - 12px)); --lx-gap: 14px; }
  .lx-deck { width: calc(var(--lx-w) * 3 + var(--lx-gap) * 2 + 4px); }
  .v4-day .date-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .v4-sec { padding: 72px 0; }
  .v4 h1 { font-size: clamp(2.7rem, 12vw, 3.4rem); }
  .v4 h2 { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .v4-pane,
  .v4-hero-panel { padding: 26px 20px; border-radius: 28px; }
  .v4 > .v4-strip.tpl-strip { --tpl-w: 146px; --tpl-gap: 14px; --tpl-pad: 20px; }
  .v4-day .date-field { grid-template-rows: auto minmax(280px, auto); }
  .v4-day .date-wheel { height: 280px; --wheel-pad: calc((280px - var(--wheel-item)) / 2); }
  .v4-day .date-card { min-height: 0; }
  .v4-diary .story-line-home { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .v4 .v4-fg { animation: none; }
  .v4 .v4-btn,
  .lx-card .lx-flip { transition: none; }
}

/* ---------- liquid glass everywhere (2026-10-05, second pass) ---------- */
/* Every question is its own glass row. */
.v4 .v4-know .know-list { display: grid; gap: 10px; }
.v4 .v4-know .know-item { position: relative; padding: 4px 18px; border: 1px solid var(--create-glass-edge); border-radius: 22px; background: var(--lg-spec), var(--create-glass-fill); box-shadow: var(--create-glass-inset), var(--lg-lens), var(--create-glass-drop); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); }
.v4 .v4-know .know-item:last-child { border-bottom-color: var(--create-glass-edge); }
/* The strip runs on a glass tray. */
.v4 .v4-strip .tpl-viewport { width: min(100% - 24px, 1240px); margin-inline: auto; padding-block: 18px; border: 1px solid var(--create-glass-edge); border-radius: 34px; background: var(--lg-spec), var(--create-glass-fill); box-shadow: var(--create-glass-inset), var(--lg-lens), var(--lg-depth); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); height: calc(var(--tpl-h) + 36px); }
/* The date wheel and the date card are panes of their own. */
.v4-day-panes { display: block; }
.v4-day .date-wheel,
.v4-day .date-card { background: var(--lg-spec), var(--create-glass-fill); box-shadow: var(--create-glass-inset), var(--lg-lens), var(--lg-depth); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); }
.v4-day .date-wheel::before { background: linear-gradient(180deg, rgb(250 244 234 / 0.75), rgb(250 244 234 / 0)); }
.v4-day .date-wheel::after { background: linear-gradient(0deg, rgb(250 244 234 / 0.75), rgb(250 244 234 / 0)); }
/* Steps, notes and films already sit on .v4-glass; the photos in the diary
   are frosted mats. */
.v4-diary label.story-shot { background: rgb(255 253 249 / 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.v4 .note { background-image: var(--lg-spec), var(--create-glass-sheen); box-shadow: var(--create-glass-inset), var(--lg-lens), var(--lg-depth); }

/* ---------- the landing's own scrollbar (v4.js scrollRail) ---------- */
html.v4-own-scroll { scrollbar-width: none; }
html.v4-own-scroll::-webkit-scrollbar, html.v4-own-scroll body::-webkit-scrollbar { display: none; width: 0; height: 0; }
.v4-rail {
  position: fixed; z-index: 60; top: 96px; right: 10px; bottom: 24px; width: 14px;
  touch-action: none; cursor: pointer; transition: opacity 0.35s ease;
}
.v4-rail[hidden] { display: none; }
.v4-rail-track {
  position: absolute; inset: 0 4px; border-radius: 999px;
  background: rgb(255 253 249 / 0.42); border: 1px solid rgb(255 255 255 / 0.7);
  box-shadow: inset 0 1px 2px rgb(84 48 34 / 0.08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.v4-rail-thumb {
  position: absolute; top: 0; left: 3px; right: 3px; border-radius: 999px;
  background: linear-gradient(180deg, #e9a9b8, #b85a78);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.75), 0 4px 12px rgb(150 50 80 / 0.28);
  will-change: transform; transition: left 0.2s ease, right 0.2s ease;
}
.v4-rail:hover .v4-rail-thumb, .v4-rail.is-dragging .v4-rail-thumb { left: 1px; right: 1px; }
.v4-rail-dot {
  position: absolute; left: 50%; width: 10px; height: 10px; margin: 0 0 0 -5px; padding: 0;
  border: 2px solid #fff; border-radius: 50%; background: rgb(184 90 120 / 0.35);
  box-shadow: 0 1px 4px rgb(84 48 34 / 0.2); cursor: pointer; transition: transform 0.2s ease, background 0.2s ease;
}
.v4-rail-dot.is-current { background: #b85a78; transform: scale(1.25); }
.v4-rail-dot::after {
  content: attr(data-name); position: absolute; right: 18px; top: 50%; translate: 0 -50%;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: rgb(255 253 249 / 0.92); color: var(--v4-ink, #2b2320); font: 500 12px/1 var(--v4-sans, system-ui);
  box-shadow: 0 4px 14px rgb(84 48 34 / 0.16); opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.v4-rail-dot:hover::after { opacity: 1; }
/* On touch it shows while scrolling and rests out of sight. */
@media (hover: none), (max-width: 719px) {
  .v4-rail { top: 84px; right: 4px; width: 12px; opacity: 0; }
  .v4-rail.is-awake, .v4-rail.is-dragging { opacity: 1; }
  .v4-rail-dot::after { display: none; }
}