/* Colours are set from CONFIG.theme in script.js — these are fallbacks. */
:root {
  --ink: #3f4534;
  --ink-soft: #5f6d60;
  --paper: #f4efe4;
  --paper-grey: #e9e2d3;
  --white: #faf7f0;
  --dark: #5a1e26;
  --accent: #c2a15a;
  --btn: #6b2530;
  --iron: #1e1e1e;
  --iron-hi: #a3a3a3;

  --script: "Pinyon Script", cursive;
  --display: "Playfair Display", Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Poppins", system-ui, sans-serif;

  /* Subtle paper grain */
  --grain: url("images/paper.png");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: #e3dccc;
  font-size: 15px;
  line-height: 1.8;
  overflow-x: hidden;
}
body.locked { overflow: hidden; height: 100vh; height: 100dvh; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

#app {
  max-width: 480px;
  margin: 0 auto;
  background: var(--paper);
  min-height: 100vh;
  box-shadow: 0 0 50px rgba(0,0,0,.12);
  overflow: hidden;
  position: relative;
}

section { position: relative; text-align: center; padding: 72px 26px; }
.paper       { background: var(--grain), var(--paper); }
.paper-grey  { background: var(--grain), var(--paper-grey); }
.paper-white { background: var(--white); }

/* Monogram: two overlapping script initials */
.mono { font-family: var(--script); letter-spacing: -.28em; padding-right: .28em; line-height: 1; white-space: nowrap; }
.mono.big { font-size: 64px; }
.mono.light { color: #eee; }
/* Logo instead of typed initials: sized from the font-size so existing rules still work.
   The mask sits on ::before so filters (embossing) on the element can still add shadows. */
.mono.has-logo { display: block; position: relative; width: 1.75em; height: 1.2em; margin-inline: auto; padding: 0; letter-spacing: 0; }
.mono.has-logo::before {
  content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}

/* ============ INTRO ============ */
#intro {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; background: #000; touch-action: none;
  overflow: hidden; -webkit-tap-highlight-color: transparent;
}
/* ============ WAX SEAL (press and hold) ============
   A photographed sage wax seal with the logo pressed in. Holding fills a thin ring, then the
   seal cracks into two halves; a quick tap cracks it straight away. */
.wax-seal {
  --p: 0; position: relative; width: 92px; height: 92px; border: 0; padding: 0; margin: 0 auto;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: none;
  display: block; user-select: none; -webkit-user-select: none;
}
.wax-seal .half, .wax-seal .face {
  position: absolute; inset: 0; background: url("images/seal.webp") center / contain no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
}
.wax-seal .half { display: none; }
.wax-seal .half.l { clip-path: polygon(0 0, 46% 0, 54% 22%, 44% 40%, 56% 58%, 46% 78%, 52% 100%, 0 100%); }
.wax-seal .half.r { clip-path: polygon(46% 0, 100% 0, 100% 100%, 52% 100%, 46% 78%, 56% 58%, 44% 40%, 54% 22%); }
.wax-seal .mono { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); font-size: 30px; color: rgba(255,250,235,.9);
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,.35)) drop-shadow(0 1px 0 rgba(255,255,255,.25)); pointer-events: none; z-index: 2; }
.wax-seal::after { /* hold progress ring */
  content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--accent) calc(var(--p) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1px)); mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1px));
  opacity: .95;
}
.wax-seal.holding { scale: .96; } /* the `scale` property, so it never overrides the centring transform */
.wax-seal.cracked { pointer-events: none; }
.wax-seal.cracked .face, .wax-seal.cracked .mono, .wax-seal.cracked::after { display: none; }
.wax-seal.cracked .half { display: block; }
.seal-hint { font-family: var(--serif); font-weight: 500; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin: 10px 0 18px; padding-left: .3em; transition: opacity .4s; }
.frame .mono.big { font-size: 34px; color: var(--ink); margin-bottom: 14px; }

/* ============ JOURNEY COVER ============
   Velvet curtains the guest swipes open onto the couple's clip. Light and title sit on layers
   above it and move by different amounts with the finger or phone tilt, which gives depth. */
.journey { position: absolute; inset: 0; overflow: hidden; }
/* ============ PROJECTOR OPENING ============
   A 9:16 stage (the painted screening room) as tall as the phone; the film plays inside the
   screen rectangle, black and white with grain and flicker; then the camera pushes into it. */
.proj { position: absolute; inset: 0; overflow: hidden; background: #0b0908; touch-action: none; }
.proj-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; }
.proj-stage { position: absolute; left: 50%; top: 50%; height: 100%; aspect-ratio: 1080 / 1920; min-width: 100%; transform-origin: 50% 50%; will-change: transform; }
.proj-room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.45) contrast(.95) saturate(1.05); }
.proj-screen { position: absolute; overflow: hidden; background: transparent; }
/* Projected on drapes: the film multiplies onto the fabric so the folds show through it */
.proj.drapes .proj-video { mix-blend-mode: multiply; }
.proj.drapes .proj-screen::after { box-shadow: none; }
.proj.drapes .proj-off { display: none; }
.proj.drapes .proj-title { mix-blend-mode: multiply; }
.proj.drapes .proj-title .jt-pre, .proj.drapes .proj-title .jt-date { color: #6b4f22; text-shadow: none; }
.proj.drapes .proj-title .jt-names { color: #2e2416; text-shadow: none; }
.proj.drapes .proj-title .jt-names .amp { color: #8a6a2c; }
.proj.drapes .proj-hint { color: #f3e7c8; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.proj-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.proj.bw .proj-video { filter: grayscale(1) contrast(1.12) brightness(1.05) sepia(.08); }
.proj-grain { position: absolute; inset: -20%; background: var(--grain) repeat; opacity: 0; mix-blend-mode: overlay; animation: grain .35s steps(3) infinite; pointer-events: none; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-6%, 4%); } 66% { transform: translate(5%, -5%); } 100% { transform: translate(-3%, 6%); } }
.proj-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 40px 10px rgba(0,0,0,.35); }
.proj-off { position: absolute; inset: 0; background: rgba(40,34,27,.72); }
.proj-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 6%; }
.proj-title .jt-pre { color: #cdb883; }
.proj-title .jt-names { color: #f6efdf; text-shadow: 0 0 14px rgba(0,0,0,.6); font-size: clamp(30px, 9vw, 44px); white-space: normal; }
.proj-title .jt-names .amp { color: #d9bb72; }
.proj-title .jt-date { color: #e9dcb8; }
.proj-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; }
.proj-count span { width: 46%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(240,236,225,.8); display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: clamp(40px, 12vw, 64px); color: #efe9dc; background: conic-gradient(rgba(240,236,225,.18) var(--sweep, 0turn), transparent 0); }
.proj-beam { position: absolute; left: 22%; right: 22%; top: 45%; height: 18%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(to top, rgba(255,240,205,.55), rgba(255,240,205,.08) 80%, transparent);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); filter: blur(6px); }
.proj-hint { color: #e9dcb8; }
/* Readable names over the lit drapes: a soft dark halo behind the text, brighter small lines */
.proj.is-film .proj-title::before { content: ""; position: absolute; left: -6%; right: -6%; top: 50%; height: 62%; transform: translateY(-50%); z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(10,8,6,.72), rgba(10,8,6,.45) 55%, transparent 78%); }
.proj.is-film .proj-title { isolation: isolate; }
.proj.is-film .proj-title .jt-pre, .proj.is-film .proj-title .jt-date { color: #f6e9c6; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.proj.is-film .proj-title .jt-names { color: #fffaf0; text-shadow: 0 2px 10px rgba(0,0,0,.8); font-size: clamp(40px, 12.5vw, 58px); line-height: 1.02; margin: 0; }
.proj.is-film .proj-title .jt-pre { font-size: 14px; letter-spacing: .26em; padding-left: .26em; margin-bottom: -2px; }
.proj.is-film .proj-title .jt-date { font-size: 16px; margin-top: 0; letter-spacing: .18em; padding-left: .18em; }
.proj.is-film .proj-hint { font-size: 12px; font-weight: 600; }
.proj.is-film .proj-screen::after { display: none; }
.proj.is-film .proj-title p { text-shadow: 0 0 18px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.8); }
.proj-skip { left: 16px; }

/* Curtain layers: a 9:16 stage the height of the screen (sides crop on phones), like the artwork */
.curtain-stage { position: absolute; left: 50%; top: 50%; height: 100%; aspect-ratio: 1520 / 2688; min-width: 100%; pointer-events: none; will-change: transform, opacity; }
.curtain { position: absolute; top: 0; width: 55%; height: var(--floor, 86%); background-image: var(--panel); background-repeat: no-repeat;
  background-size: var(--bs, 100%) 100%; will-change: clip-path; filter: drop-shadow(0 0 18px rgba(0,0,0,.4)); }
.curtain.cl { left: 0; background-position: left top; transform-origin: 0 0; }
.curtain.cr { right: 0; background-position: right top; transform-origin: 100% 0; }
/* Sheer burgundy lace hangs just behind the velvet; the video shows through its holes */
.lace { position: absolute; top: 0; width: 52%; height: var(--floor, 86%); background: var(--lace) center top / cover no-repeat; opacity: .92; will-change: clip-path;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.25)); }
.lace.ll { left: 0; transform-origin: 0 0; }
.lace.lr { right: 0; transform-origin: 50% 0; transform: scaleX(-1); } /* mirror in place (centre origin) */
.curtain::after { /* shading that deepens as the fabric bunches */ content: ""; position: absolute; inset: 0; background: rgba(12,14,6, var(--shade, 0)); }
.curtain-fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; will-change: transform; }
.journey-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: transform; }
.journey-light {
  position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: soft-light; opacity: .5;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 38%), rgba(255, 244, 214, .85) 0, rgba(255, 244, 214, .25) 22%, transparent 45%);
}
.journey-title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 20px calc(92px + env(safe-area-inset-bottom));
  text-align: center; pointer-events: none;
  background: linear-gradient(to top, rgba(251,246,234,.9) 0%, rgba(251,246,234,.7) 45%, transparent 100%); /* ivory glow for the ivory curtains */
  padding-top: 90px;
}
.jt-pre { font-family: var(--serif); font-weight: 500; font-size: 12px; letter-spacing: .42em; text-transform: uppercase; color: #8a6a2c; padding-left: .42em; }
.jt-names {
  font-family: var(--script); font-size: clamp(44px, 13.5vw, 60px); line-height: 1.12; color: #3a3222;
  text-shadow: 0 0 18px rgba(255,251,240,.9); white-space: nowrap; margin: 2px 0 2px;
}
.jt-names .amp { font-size: .72em; color: #a8843e; margin: 0 .16em 0 .02em; }
.jt-date { font-family: var(--serif); font-weight: 600; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: #5b4a2c; padding-left: .3em; }
.journey-skip { position: absolute; left: 16px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 5; pointer-events: auto;
  font-family: var(--serif); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #f6efdf;
  background: rgba(20,22,14,.35); border: 1px solid rgba(246,239,223,.5); border-radius: 999px; padding: 8px 16px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.swipe-hint {
  position: absolute; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
  font-size: 10.5px; letter-spacing: .38em; text-transform: uppercase; color: #6b5530; padding-left: .38em;
}
.swipe-hint .chev {
  width: 12px; height: 12px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); animation: chev 1.8s ease-in-out infinite;
}
@keyframes chev { 0%, 100% { transform: translateY(6px) rotate(45deg); opacity: .35; } 50% { transform: translateY(-4px) rotate(45deg); opacity: 1; } }


/* ============ MUSIC BUTTON ============ */
.music-btn {
  position: fixed; z-index: 70;
  bottom: calc(18px + env(safe-area-inset-bottom));
  right: max(18px, calc(50vw - 240px + 18px));
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: rgba(44,58,47,.85);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.music-btn svg { width: 20px; height: 20px; fill: #fff; }
.music-btn .icon-off { display: none; }
.music-btn.muted .icon-on { display: none; }
.music-btn.muted .icon-off { display: block; }

/* ============ HERO ============ */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px 60px; }
/* Arched photo (echoes the arched doors on the cover) with a thin gold line around it */
.oval {
  position: relative; width: min(76%, 300px); aspect-ratio: 3 / 4; margin: 0 auto 34px;
  border-radius: 999px 999px 6px 6px / 560px 560px 6px 6px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(30,36,28,.18);
}
.oval img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
.oval-slide { position: absolute; inset: 0; opacity: 0; }
/* Ogee (Khmer-style pointed) arch: clipped by #ogeeClip, with a thin gold line inset from the edge */
/* The arch is a plate that tilts toward the finger / with the phone, with a light sheen sliding over it */
.tilt-stage { perspective: 900px; width: 100%; display: flex; justify-content: center; margin-bottom: 34px; }
.oval.ogee { margin-bottom: 0; border-radius: 0; clip-path: url(#ogeeClip); box-shadow: none; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s ease-out; }
.oval.ogee::after { display: none; }
.tilt-stage::before { /* soft shadow under the plate that shifts with the tilt */
  content: ""; position: absolute; width: min(76%, 300px); aspect-ratio: 3 / 4; clip-path: url(#ogeeClip);
  background: rgba(30,36,28,.35); filter: blur(22px); transform: translate(calc(var(--ry, 0deg) * -1.2px), calc(12px + var(--rx, 0deg) * 1.2px)) scale(.96); pointer-events: none; }
.tilt-stage { position: relative; }
/* French window: white-painted glazing bars over the photo and a soft glass reflection */
.mullions { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mullions path { fill: none; stroke: #f4efe4; stroke-width: 7; vector-effect: non-scaling-stroke; stroke-linecap: square; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.mullions .glass { stroke: #f4efe4; stroke-width: 16; }
.ogee-sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 30%), rgba(255,250,235,.85) 0, rgba(255,250,235,.25) 25%, transparent 55%); opacity: .9; }
.oval > img { will-change: transform, opacity; }
.oval::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(179,151,90,.7); border-radius: inherit; pointer-events: none; }
.eyebrow { font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .38em; text-transform: uppercase; }
.hero-names {
  font-family: var(--script); font-weight: 400;
  font-size: clamp(54px, 16vw, 76px); line-height: 1.05;
  color: var(--ink); margin: 22px 0 26px;
}
.hero-names .second { display: inline-block; margin-left: -.6em; }
.hero-names .amp { font-size: .9em; }
.hero-names .ch { display: inline-block; font-style: normal; }
.hero-date { font-size: 15px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; }
.hero-city { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.3; }

/* ============ FADED PHOTO BACKGROUNDS ============ */
.faded-bg { overflow: hidden; }
/* Sections with one of the couple's photos as a soft, see-through background */
.faded-bg > .bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(.9); opacity: .28; z-index: 0;
}
.faded-bg::after { content: ""; position: absolute; inset: 0; background: var(--grain); z-index: 0; pointer-events: none; }
.letter-section, .families { background: var(--paper); }
.faded-bg > *:not(.bg) { position: relative; z-index: 1; }

/* ============ LETTER ============ */
/* The letter: a translucent, embossed frame with notched corners over the couple's photo
   (the user preferred this to a solid note card). */
.letter-section { padding: 56px 18px 0; min-height: 128vh; min-height: 128svh; }
.letter-section .bg { opacity: .5; object-position: 50% 100%; } /* the bench sits below the note */
.frame {
  position: relative; width: min(86%, 320px); margin: 0 auto;
  padding: 40px 22px 34px;
  background: rgba(250,247,240,.78);
  --n: 18px;
  clip-path: polygon(var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), inset 0 0 0 3px rgba(0,0,0,.06),
              inset 0 0 0 14px rgba(255,255,255,.25), inset 0 0 0 15px rgba(255,255,255,.9), inset 0 0 0 16px rgba(0,0,0,.05);
}
.letter-body p { font-family: var(--serif); font-size: 15px; font-weight: 500; letter-spacing: .01em; line-height: 1.5; margin-bottom: 11px; color: #3a463a; }
.frame .signature { font-family: var(--script); font-size: 27px; margin-top: 6px; display: inline-block;
  /* handwriting reveal: a soft wipe from left to right, driven by --pen */
  -webkit-mask: linear-gradient(90deg, #000 calc(var(--pen, 100%) - 6%), transparent var(--pen, 100%)); mask: linear-gradient(90deg, #000 calc(var(--pen, 100%) - 6%), transparent var(--pen, 100%)); }

/* ============ FAMILIES ============
   A printed invitation over a soft black-and-white photo: parents in two columns, the couple's
   names side by side, date, venue with an ink drawing of it, RSVP. */
.families { padding: 84px 20px 56px; font-family: var(--serif); color: #1f2620; }
/* The photo fills only the top of this tall section (so it isn't stretched and no faces crop),
   fading into the paper before the venue drawing. */
.families .bg {
  opacity: .32 !important; height: min(110vh, 900px); object-position: 50% 0%;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent);
}
.families::before { /* keep the text crisp: a light ivory veil, stronger behind the middle */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(247,245,240,.55), rgba(247,245,240,.15) 75%);
}
.parents { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.parents h4 { font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.parents p { font-size: 12.5px; text-transform: uppercase; line-height: 1.45; margin-top: 8px; letter-spacing: .01em; }
.families-text { font-size: 16.5px; line-height: 1.5; margin: 30px auto 34px; max-width: 290px; }
.couple { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; }
.couple h5 { font-family: var(--serif); font-weight: 700; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.script-name { font-family: var(--script); font-size: clamp(40px, 11.5vw, 54px); line-height: 1.1; color: #111812; margin-top: 2px; }
.surname { font-family: var(--serif); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin-top: 2px; }
.day-line { font-style: italic; font-weight: 700; font-size: 19px; line-height: 1.45; margin: 34px 0 30px; }
.day-line .wd { text-transform: uppercase; }
#families .w, #families sup { display: inline-block; will-change: transform, opacity, filter; }
.couple h5 .w { text-decoration: underline; text-underline-offset: 3px; } /* inline-blocks don't inherit the underline */
.day-line sup, .details-rsvp sup { font-size: .6em; vertical-align: .55em; line-height: 0; }
.venue-script { font-family: var(--script); font-size: clamp(26px, 7.6vw, 34px); line-height: 1.2; color: #111812; }
.venue-address { font-size: 14px; line-height: 1.55; margin-top: 10px; }
/* The engraving draws itself (a mask wipes up over it) and opens the map when tapped */
.venue-drawing-btn { display: block; margin: 22px auto 18px; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.venue-drawing-btn { position: relative; }
.venue-drawing { display: block; width: min(78%, 320px); height: auto; margin: 0 auto; mix-blend-mode: multiply; }
.venue-slices { position: absolute; left: 0; right: 0; top: 0; display: block; pointer-events: none; }
.venue-slice { position: absolute; left: 50%; top: 0; width: min(78%, 320px); height: auto; mix-blend-mode: multiply; will-change: transform, opacity, filter; }
.venue-tap { display: block; margin-top: 8px; font-family: var(--serif); font-weight: 500; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); padding-left: .3em; }
.map-modal { position: fixed; inset: 0; z-index: 90; background: rgba(30, 36, 28, .55); display: flex; align-items: center; justify-content: center; padding: 18px; backdrop-filter: blur(4px); }
.map-sheet { position: relative; width: min(100%, 440px); max-height: 92vh; overflow: auto; background: var(--grain), #f4efe4; padding: 40px 16px 18px; box-shadow: 0 30px 60px rgba(0,0,0,.35); text-align: center; }
.map-close { position: absolute; right: 10px; top: 6px; border: 0; background: none; font-size: 30px; line-height: 1; color: var(--ink); cursor: pointer; }
.map-wrap { position: relative; }
.map-wrap img { display: block; width: 100%; height: auto; }
.pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.pin i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(184,151,90,.3), 0 2px 4px rgba(0,0,0,.3); animation: pinpulse 2.2s ease-out infinite; }
.pin b { font-family: var(--serif); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: rgba(244,239,228,.85); padding: 1px 6px; margin-bottom: 4px; white-space: nowrap; }
@keyframes pinpulse { 0% { box-shadow: 0 0 0 0 rgba(184,151,90,.55), 0 2px 4px rgba(0,0,0,.3); } 100% { box-shadow: 0 0 0 14px rgba(184,151,90,0), 0 2px 4px rgba(0,0,0,.3); } }
.map-sheet .btn-dark { margin-top: 14px; display: inline-block; text-decoration: none; }
.details-rsvp { font-style: italic; font-weight: 700; font-size: 15px; line-height: 1.55; }
.text-link { display: inline-block; margin: 18px 0 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-underline-offset: 4px; }

/* ============ LOVE STORY / VINYL ============ */
.story { padding-top: 48px; }
/* Record: photographed vinyl, tonearm and sleeve wear (Higgsfield). Sizes use the record's width
   (cqw) so the tonearm's stylus lands on the grooves at any screen width. */
.record { position: relative; width: 100%; height: 250px; margin-bottom: 40px; container-type: inline-size; }
.sleeve {
  position: absolute; left: 0; top: 20px; width: 62%; aspect-ratio: 1; z-index: 2; perspective: 900px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sleeve-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4,.05,.25,1);
  box-shadow: 1px 1px 0 rgba(255,255,255,.4) inset, 6px 12px 20px rgba(0,0,0,.28), 1px 2px 4px rgba(0,0,0,.18); }
.sleeve.flipped .sleeve-inner { transform: rotateY(180deg); }
.sleeve-front, .sleeve-back { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #ccc; }
.sleeve-front img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.95); }
.sleeve-tap { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font-family: var(--serif); font-weight: 600; font-size: 2.6cqw; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,250,240,.9); text-shadow: 0 1px 2px rgba(0,0,0,.5); padding-left: .3em; }
/* the back cover: worn cardboard with the chapters printed in the tracklist frame */
.sleeve-back { transform: rotateY(180deg); background: url("images/record/sleeve-back.jpg") center / cover; }
.tracks { position: absolute; left: 22%; right: 22%; top: 48%; height: 31%; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; justify-content: space-evenly; text-align: left; }
.tracks li { font-family: var(--serif); font-weight: 600; font-size: 3.2cqw; letter-spacing: .04em; color: #35443a; line-height: 1.15; display: flex; gap: 5%; cursor: pointer; }
.tracks li b { font-weight: 700; color: var(--accent); flex: 0 0 auto; }
.tracks li.on { text-decoration: underline; text-underline-offset: 2px; }
.record-dust { position: absolute; inset: -10px 0 0; width: 100%; height: calc(100% + 10px); pointer-events: none; z-index: 4; mix-blend-mode: screen; }
.now-playing { font-family: var(--serif); font-size: 16px; line-height: 1.5; max-width: 320px; margin: -14px auto 30px; }
.now-playing b { display: block; font-weight: 700; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
/* printed-on-cardboard look: ring wear, scuffed corners and fibres multiplied over the photo */
.sleeve-wear { position: absolute; inset: 0; background: url("images/record/sleeve.jpg") center / cover; mix-blend-mode: multiply; opacity: .95; pointer-events: none; }
.sleeve-wear::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 40%, rgba(0,0,0,.06)); }
.vinyl {
  --a: 0; position: absolute; left: 30%; top: 6px; width: 62%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(calc(var(--a) * 1deg)); touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent;
}
.vinyl.dragging { cursor: grabbing; }
.vinyl-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vinyl::after { /* light on the grooves: stays still while the record turns */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 30deg, transparent 0 8%, rgba(255,255,255,.10) 13%, transparent 19% 58%, rgba(255,255,255,.08) 63%, transparent 69%);
  -webkit-mask: radial-gradient(circle, transparent 0 17%, #000 17.5%); mask: radial-gradient(circle, transparent 0 17%, #000 17.5%);
}
.vinyl .label::before { content: ""; position: absolute; inset: 3%; border-radius: 50%; background: var(--lbl, transparent); mix-blend-mode: multiply; transition: background .3s; }
.vinyl .label { position: relative; width: 33%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
/* Label printing: names curved over the top, "Our Story" under the spindle hole */
.label-text { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.label-text text { font-family: var(--serif); font-weight: 600; font-size: 9px; letter-spacing: .9px; text-transform: uppercase; fill: #56654f; }
.label-text .lbl-bot { font-family: var(--script); font-weight: 400; font-size: 15px; letter-spacing: .3px; text-transform: none; fill: #7a6a45; }
.vinyl::after { transform: rotate(calc(var(--a) * -1deg)); } /* keep the light still */
/* Pivot sits at 74.7% 23.8% of the tonearm image; "on" puts the stylus on the grooves. */
.tonearm {
  --arm: -32; position: absolute; left: 71.9%; top: -3.9cqw; width: 30%; height: auto; z-index: 5; cursor: grab; touch-action: none;
  transform-origin: 74.7% 23.8%; transform: rotate(calc(var(--arm) * 1deg)); transition: transform 1.2s cubic-bezier(.45,.05,.3,1);
  filter: drop-shadow(2px 6px 5px rgba(0,0,0,.28)); -webkit-tap-highlight-color: transparent;
}
.tonearm.on { --arm: -10; }
.tonearm.dragging { transition: none; cursor: grabbing; }

.mixed-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(18px, 5.4vw, 24px); letter-spacing: .14em; text-transform: uppercase;
  line-height: 1; margin-bottom: 34px; white-space: nowrap;
}
.mixed-title em {
  font-family: var(--script); font-style: normal; text-transform: none; letter-spacing: 0;
  font-size: 2.5em; position: relative; top: -.08em; margin: 0 .08em;
}
/* The love story reads like a letter: romantic serif, a gold script initial, and a small
   gold flourish between paragraphs. */
.story-body { max-width: 330px; margin: 0 auto; }
.story-body p {
  font-family: var(--serif); font-size: 19px; line-height: 1.6; letter-spacing: .005em;
  color: #3f4b3d; margin-bottom: 0;
}
.story-body p + p::before { /* ornament: a thin gold line with a small diamond */
  content: "\2766"; display: block; margin: 20px auto 16px; font-size: 15px; line-height: 1;
  color: var(--accent); text-align: center;
  background: linear-gradient(var(--accent), var(--accent)) left center / 38% 1px no-repeat,
              linear-gradient(var(--accent), var(--accent)) right center / 38% 1px no-repeat;
  width: 150px; opacity: .85;
}
.story-body p:last-child { font-style: italic; }

/* ============ COUNTDOWN ============
   On the paper, not a dark block: script title, serif numerals separated by thin gold rules. */
.countdown-section { background: var(--grain), var(--paper-grey); color: var(--ink); padding: 56px 16px 60px; }
#calBtn { margin-top: 30px; }
.countdown-eyebrow { font-family: var(--serif); font-weight: 500; font-size: 12px; letter-spacing: .36em; text-transform: uppercase; color: var(--accent); padding-left: .36em; }
.countdown-title { font-family: var(--script); font-weight: 400; font-size: clamp(38px, 11vw, 48px); line-height: 1.1; margin: 4px 0 26px; }
.countdown { display: flex; justify-content: center; align-items: stretch; }
.countdown div { flex: 1 1 0; max-width: 92px; padding: 6px 2px 8px; }
.countdown div + div { border-left: 1px solid rgba(179,151,90,.55); }
.countdown span { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 11.5vw, 50px); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.countdown small { display: block; margin-top: 8px; font-family: var(--serif); font-weight: 500; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #6b7a66; padding-left: .22em; }
.countdown-done { font-family: var(--script); font-size: 40px; }

/* Divider: two gold hairlines with the couple's logo between them */
.divider { display: flex; align-items: center; gap: 16px; width: min(78%, 300px); margin: 0 auto 44px; color: var(--accent); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
.divider::after { background: linear-gradient(90deg, var(--accent), transparent); }
.divider .mono { font-size: 22px; color: var(--accent); }

.photo-break { line-height: 0; }
.photo-break img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ============ SCHEDULE ============ */
/* Painted scenes above each block light up as they scroll in; each event has an ink icon. */
.schedule-block + .schedule-block { margin-top: 56px; }
.scene { display: block; width: min(92%, 360px); height: auto; margin: 0 auto 6px; mix-blend-mode: multiply;
  filter: saturate(.2) brightness(1.06); transition: filter 1.6s ease;
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 98%); mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 98%); }
.scene.lit { filter: saturate(1) brightness(1); }
.schedule ul { max-width: 330px; margin: 0 auto; }
.schedule li { display: flex; align-items: center; gap: 12px; text-align: left; line-height: 1.5; padding: 7px 0; }
.schedule li .ico { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; mix-blend-mode: multiply; opacity: .85; }
.schedule li .ico-gap { width: 30px; flex: 0 0 30px; }
.schedule li.break { justify-content: center; }
.schedule h2 { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.2; margin-bottom: 12px; }
.schedule li { list-style: none; font-size: 15px; line-height: 2.1; font-weight: 400; }
.schedule .break { opacity: .7; }
.schedule .note { font-style: italic; margin-top: 14px; line-height: 1.8; }
.schedule .rule { width: 60px; height: 1px; background: var(--ink); margin: 14px auto 0; }
.palette { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 14px 0 22px; }
.palette span { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06); }
.palette.avoid { margin-top: 12px; gap: 8px; }
.palette.avoid span { width: 22px; height: 22px; position: relative; opacity: .85; }
.palette.avoid span::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1.5px; background: #8a3b3b; transform: rotate(45deg); }
.palette.avoid em { font-family: var(--serif); font-size: 13px; color: #8a3b3b; margin-left: 4px; }
.schedule .sub { text-decoration: underline; text-underline-offset: 4px; margin-top: 10px; }
.schedule .loc { margin-top: 10px; }

/* ============ TRAVEL ============ */
.caps-title { font-family: var(--display); font-weight: 400; font-size: 32px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 24px; }
.btn-dark {
  display: inline-block; font-family: var(--display); font-style: italic; font-size: 18px;
  color: #fff; background: var(--btn); border: 0; border-radius: 14px;
  padding: 14px 40px; cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.2); transition: transform .15s, background .2s;
}
.btn-dark:active { transform: scale(.97); }
.btn-dark:hover { background: #55181f; }
.btn-dark.full { width: 100%; }
.btn-dark[disabled] { opacity: .6; pointer-events: none; }
.btn-dark.caps { font-style: normal; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.6; }
.travel-details { margin-top: 26px; text-align: left; font-size: 14px; letter-spacing: .04em; }
.travel-details h4 { font-family: var(--display); font-weight: 400; font-size: 18px; margin: 0 0 4px; }
.stay { padding: 16px 0; border-top: 1px solid rgba(194,161,90,.35); }
.stay:first-child { border-top: 0; }
.stay p { font-family: var(--serif); font-size: 16px; line-height: 1.5; letter-spacing: 0; }
.stay-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.stay-links a { font-family: var(--serif); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--btn); text-decoration: none;
  border: 1px solid rgba(107,37,48,.35); border-radius: 999px; padding: 6px 12px; }

/* ============ GALLERY: photos hung in the painted orangery ============ */
.gallery-section.has-art { background: var(--orangery) center top / cover no-repeat; overflow: hidden; }
.gallery-section.has-art::before { content: ""; position: absolute; inset: 0; background: rgba(244,239,228,.42); pointer-events: none; }
.gallery-section > * { position: relative; }
/* Prints on the wall: matted photographs glide slowly along the velvet; drag to browse, tap to view. */
.filmroll { position: relative; overflow: hidden; margin: 6px -18px 0; padding: 26px 0 30px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.filmroll.dragging { cursor: grabbing; }
.film-track { display: flex; gap: 22px; width: max-content; padding: 0 20px; will-change: transform; align-items: center; }
.film-track figure { flex: 0 0 auto; width: min(62vw, 270px); aspect-ratio: 4 / 5; margin: 0; padding: 10px 10px 30px; background: #faf7f0; cursor: pointer;
  box-shadow: 0 14px 28px rgba(30,26,20,.28), 0 2px 4px rgba(0,0,0,.18); rotate: var(--tilt, 0deg); }
.film-track figure:nth-child(odd) { --tilt: -1.4deg; } .film-track figure:nth-child(even) { --tilt: 1.2deg; }
.film-track img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; pointer-events: none; }
.gallery-section .mixed-title { margin-bottom: 18px; }
.gallery-hint { font-family: var(--serif); font-weight: 600; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: #f6efdf; text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 10px rgba(0,0,0,.35); margin-top: 14px; padding-left: .28em; }
.gallery-section.has-art .mixed-title { color: #f6efdf; text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.35); }
.gallery-section.has-art .mixed-title em { color: #f6efdf; }
.lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(20, 24, 19, .96); display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: pan-y; }
.lb-stage { width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; -webkit-touch-callout: default; user-select: none; -webkit-user-select: none; }
.lb-close { position: absolute; right: 14px; top: calc(10px + env(safe-area-inset-top)); border: 0; background: none; color: #f4efe4; font-size: 34px; line-height: 1; cursor: pointer; z-index: 2; }
.lb-count { color: rgba(244,239,228,.7); font-family: var(--serif); font-size: 13px; letter-spacing: .3em; padding: 14px 0 calc(16px + env(safe-area-inset-bottom)); }

/* ============ WISHING WELL ============ */
.well { position: relative; width: min(58%, 230px); margin: 0 auto 6px; }
.well > img:first-child { display: block; width: 100%; height: auto; }
.well .coin { position: absolute; left: 50%; top: -20%; width: 13%; height: auto; transform: translate(-50%, 0); opacity: 0; pointer-events: none; }
.ripple { position: absolute; left: 50%; top: 60%; width: 34%; aspect-ratio: 2.6; border: 1.5px solid rgba(255,255,255,.75); border-radius: 50%; transform: translate(-50%, -50%) scale(.2); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.ripple.r2 { border-color: rgba(255,255,255,.45); }
.well.wished .ripple { animation: ripple 1.6s ease-out forwards; }
.well.wished .ripple.r2 { animation-delay: .35s; }
@keyframes ripple { 0% { transform: translate(-50%, -50%) scale(.2); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; } }
#wishBtn { margin-top: 18px; }
.wishing-text { font-family: var(--serif); font-size: 16.5px; line-height: 1.55; max-width: 320px; margin: 0 auto; }
.bank { margin-top: 38px; }
.bank h3 { font-family: var(--serif); font-weight: 600; font-size: 17px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; margin-bottom: 14px; }
.bank dl { background: #faf7f0; text-align: left; padding: 16px 16px 8px; font-size: 13px; line-height: 1.5; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.bank dt { font-weight: 500; }
.bank dd { margin-bottom: 10px; word-break: break-word; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.copy-btn { font: 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; border: 1px solid #d6cdba; background: none; padding: 2px 8px; border-radius: 6px; cursor: pointer; flex-shrink: 0; }
.bank .btn-dark { margin-top: 22px; }

/* ============ RSVP ENVELOPE ============
   Two photographs of the same envelope (Higgsfield): closed, and open with the flap up. The box has
   the open image's aspect; the closed image is bottom-aligned so the bodies coincide, and the box is
   pulled up (negative margin) while closed so the empty flap area doesn't show. The card rises out of
   the mouth inside a clipped wrapper. Measured numbers: mouth at 32.15%, closed body 53.12% tall. */
.rsvp-section { padding-top: 60px; padding-bottom: 70px; overflow: hidden; }
.envelope { position: relative; width: 100%; aspect-ratio: 0.7965; margin: -40% 0 26px; }
.env-img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; pointer-events: none; }
.env-open-img { opacity: 0; }
.env-seal { position: absolute; left: 50%; top: 81%; transform: translate(-50%, -50%); z-index: 4; }
.env-hint { margin: -22px 0 26px; }
/* RSVP heading: one serif family throughout, gold eyebrow, the logo between gold hairlines, deadline */
.rsvp-head { margin-bottom: 18px; }
.rsvp-eyebrow { font-family: var(--serif); font-weight: 500; font-size: 12px; letter-spacing: .38em; text-transform: uppercase; color: var(--accent); padding-left: .38em; }
.rsvp-title { font-family: var(--display); font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: .32em; padding-left: .32em; margin: 8px 0 12px; }
.rsvp-rule { display: flex; align-items: center; gap: 14px; width: min(64%, 240px); margin: 0 auto 12px; color: var(--accent); }
.rsvp-rule::before, .rsvp-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
.rsvp-rule::after { background: linear-gradient(90deg, var(--accent), transparent); }
.rsvp-rule .mono { font-size: 18px; color: var(--accent); }
.rsvp-deadline { font-family: var(--display); font-style: italic; font-size: 16px; line-height: 1.5; }

.rsvp-form { text-align: left; display: flex; flex-direction: column; gap: 18px; margin-top: 30px; }
.rsvp-form label, .rsvp-form legend { font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; display: block; }
.rsvp-form input[type=text], .rsvp-form select, .rsvp-form textarea {
  display: block; width: 100%; margin-top: 6px;
  font: 400 16px var(--sans); letter-spacing: .02em; text-transform: none; color: var(--ink);
  padding: 12px 14px; border-radius: 10px; border: 1px solid #d6cdba; background: #faf7f0;
  -webkit-appearance: none; appearance: none;
}
.rsvp-form select { background: #faf7f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23777' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; }
.rsvp-form input:focus, .rsvp-form select:focus, .rsvp-form textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.rsvp-form .invalid { border-color: #a33 !important; }
.attend { border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.attend legend { margin-bottom: 8px; }
.pill input { position: absolute; opacity: 0; }
.pill span {
  display: block; text-align: center; padding: 12px 6px; border-radius: 10px;
  border: 1px solid #d6cdba; background: #faf7f0; text-transform: none; letter-spacing: .02em; font-size: 14px; cursor: pointer; transition: all .2s;
}
.pill input:checked + span { background: var(--btn); color: #fff; border-color: var(--btn); }
.pill input:focus-visible + span { outline: 2px solid var(--ink); }
.form-error { color: #a33; text-align: center; }

.thank-you { padding-top: 26px; }
.thank-you h3 { font-family: var(--script); font-weight: 400; font-size: 52px; line-height: 1.2; }
.check svg { width: 76px; height: 76px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto; }
.check circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.check path { stroke-dasharray: 40; stroke-dashoffset: 40; }

/* ============ FOOTER ============ */
.footer {
  padding: 56px 24px calc(90px + env(safe-area-inset-bottom));
  text-align: center; background: var(--dark); color: #e9e2d3;
}
.footer p { font-family: var(--serif); font-style: italic; font-size: 17px; margin-top: 10px; }


/* Projector title = a vintage cinema title card: fine gold double frame with notched corners,
   names in spaced display caps, a script ampersand, the date between hairlines */
.proj.is-film .proj-title::before { display: none; }
.pt-card { position: relative; width: min(78%, 300px); padding: 30px 18px 26px; text-align: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(20,12,10,.78), rgba(20,12,10,.62));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(214,184,116,.75); outline: 1px solid rgba(214,184,116,.35); outline-offset: 5px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.pt-card::before, .pt-card::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid #d6b874; transform: rotate(45deg); background: #1b120f; }
.pt-card::before { top: -8px; left: calc(50% - 7px); }
.pt-card::after { bottom: -8px; left: calc(50% - 7px); }
.pt-mono { display: block; margin: 0 auto 14px; font-size: 22px; color: #d6b874; }
.pt-name { margin: 0; font-family: "Playfair Display", serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(24px, 7.6vw, 32px); letter-spacing: .32em; padding-left: .32em; color: #fbf4e4; line-height: 1.1; }
.pt-amp { margin: 2px 0 0; font-family: "Pinyon Script", cursive; font-size: clamp(50px, 15vw, 64px); line-height: .8; margin: 4px 0 2px; color: #d6b874; }
.pt-date { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-family: "Cormorant Garamond", serif;
  font-style: italic; font-size: 16px; letter-spacing: .08em; color: #eadcb6; }
.pt-date::before, .pt-date::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #d6b874); }
.pt-date::after { background: linear-gradient(90deg, #d6b874, transparent); }
.proj.is-film .proj-title .pt-card p { text-shadow: 0 1px 6px rgba(0,0,0,.6); }
/* film mode: the poster must match the film exactly (no brightening); depth parallax via --px/--py */
.proj.is-film .proj-room { filter: none; }
.proj.is-film .proj-room, .proj.is-film .proj-film { transform: translate3d(calc(var(--px,0) * -14px), calc(var(--py,0) * -10px), 0) scale(calc(1.07 * var(--push,1))); will-change: transform; }
.proj.is-film .pt-card { transform: translate3d(calc(var(--px,0) * 12px), calc(var(--py,0) * 9px), 0) rotateY(calc(var(--px,0) * 5deg)) rotateX(calc(var(--py,0) * -4deg)); }
.proj.is-film .proj-title { perspective: 700px; }
.pt-pre { margin: 0 0 12px; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: 17px; letter-spacing: .06em; color: #e3c98b; text-transform: none; }
.pt-card { padding-top: 24px; }
/* Title without the card: plain white text straight on the drapes, soft shadow for legibility */
.pt-card { background: none; border: 0; outline: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.pt-card::before, .pt-card::after { display: none; }
.pt-pre, .pt-name, .pt-amp, .pt-date { color: #fff !important; }
.pt-date::before, .pt-date::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.8)); }
.pt-date::after { background: linear-gradient(90deg, rgba(255,255,255,.8), transparent); }
.proj.is-film .proj-title .pt-card p { text-shadow: 0 0 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6); }
/* Tap hint: a small play button with a ripple, like a film you can start */
.proj.is-film .proj-hint { color: #fff; font-size: 11px; letter-spacing: .3em; padding-left: .3em; gap: 12px; text-shadow: 0 1px 6px rgba(0,0,0,.8); bottom: auto; top: 58%; }
.tap-dot { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); background: rgba(0,0,0,.25);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: tapBreath 2.4s ease-in-out infinite; }
.tap-dot::before { content: ""; position: absolute; left: 53%; top: 50%; transform: translate(-50%, -50%);
  border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.tap-dot::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid #fff; animation: tapRipple 2.4s ease-out infinite; }
@keyframes tapRipple { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes tapBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* Responsive cover: sizes follow the smaller of width/height so short Androids and tall iPhones both fit */
.pt-card { width: min(86%, 340px); padding: 0; }
.pt-pre { font-size: clamp(14px, min(4.4vw, 2.3vh), 19px); margin-bottom: min(1.6vh, 12px); }
.pt-name { font-size: clamp(22px, min(7.8vw, 4.1vh), 36px); }
.pt-amp { font-size: clamp(38px, min(13vw, 6.6vh), 62px); }
.pt-date { font-size: clamp(13px, min(4.1vw, 2.1vh), 18px); margin-top: min(2vh, 16px); }
.tap-dot { width: clamp(40px, min(12.5vw, 6.4vh), 56px); height: clamp(40px, min(12.5vw, 6.4vh), 56px); }
.proj.is-film .proj-hint { font-size: clamp(9.5px, min(2.8vw, 1.45vh), 12px); gap: min(1.5vh, 12px); top: 57%; }
/* short screens (16:9 phones, browser bars showing): lift the button off the projector */
@media (max-aspect-ratio: 10/17) { .proj.is-film .proj-hint { top: 59%; } }
@media (min-aspect-ratio: 10/17) { .proj.is-film .proj-hint { top: 50%; } .proj-title { justify-content: flex-start; padding-top: 12vh; } }
/* Letter photo: shorter than the section and anchored to the bottom, so the mountains show between the note and the bench */
.letter-section > .bg { top: auto; bottom: 0; height: 66%; filter: grayscale(1) contrast(1.35) brightness(.92); object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%); mask-image: linear-gradient(to bottom, transparent, #000 18%); }
/* Editorial scrapbook gallery: ink titles on cream paper, prints taped down like a journal */
.gallery-section.has-art::before { display: none; }
.gallery-section.has-art .mixed-title, .gallery-section.has-art .mixed-title em { color: var(--ink); text-shadow: none; }
.gallery-section.has-art .gallery-hint { color: var(--ink); text-shadow: none; opacity: .75; }
.film-track figure { position: relative; box-shadow: 0 10px 20px rgba(60,50,30,.18), 0 1px 3px rgba(0,0,0,.12); }
.film-track figure::before { content: ""; position: absolute; top: -12px; left: 50%; width: 78px; height: 24px; transform: translateX(-50%) rotate(calc(var(--tilt, 0deg) * -3));
  background: rgba(226,212,182,.72); box-shadow: 0 1px 2px rgba(0,0,0,.08); z-index: 2;
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0); }
.film-track figure:nth-child(3n)::before { left: 22%; width: 64px; }
.film-track figure:nth-child(3n+1)::before { left: 76%; }
.gallery-section.has-art { min-height: min(177.8vw, 854px); padding-top: min(34vw, 165px); padding-bottom: min(30vw, 140px); background-size: cover; background-position: center; }
.gallery-section.has-art .filmroll { padding-bottom: 14px; } .gallery-section.has-art .gallery-hint { margin-top: 0; }
.letter-section { padding-top: 120px; }
/* Families: more air, softer photo, gold dividers and small line icons */
.families .bg { opacity: .2 !important; }
.families::before { background: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(247,245,240,.7), rgba(247,245,240,.3) 80%); }
.families-text { margin: 40px auto 46px; }
.families-text::before, .day-line::after { content: ""; display: block; width: 120px; height: 9px; margin: 0 auto 30px;
  background: linear-gradient(var(--accent), var(--accent)) left 50% / 50px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) right 50% / 50px 1px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5 5 10 0 5z' fill='%23c2a15a'/%3E%3C/svg%3E") center / 8px 8px no-repeat; }
.day-line::after { margin: 34px auto 0; }
.couple { margin-bottom: 46px; }
.couple::before, .day-line::before, .venue-script::before { content: ""; display: block; grid-column: 1 / -1; width: 30px; height: 30px; margin: 0 auto 14px;
  background: var(--accent); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.couple::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Ccircle cx='12' cy='19' r='7'/%3E%3Ccircle cx='20' cy='19' r='7'/%3E%3Cpath d='M9 8l3-3 3 3-3 3z'/%3E%3C/svg%3E"); margin-bottom: 18px; }
.day-line::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Crect x='5' y='8' width='22' height='19' rx='2'/%3E%3Cpath d='M5 13h22M11 5v6M21 5v6'/%3E%3Cpath d='M16 23.5s-4-2.4-4-5a2 2 0 014-.6 2 2 0 014 .6c0 2.6-4 5-4 5z'/%3E%3C/svg%3E"); }
.venue-script { margin-top: 40px; }
.venue-script::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M16 29s-9-8.6-9-15a9 9 0 0118 0c0 6.4-9 15-9 15z'/%3E%3Ccircle cx='16' cy='14' r='3.3'/%3E%3C/svg%3E"); margin-bottom: 10px; }
.venue-address { margin-top: 14px; }
.parents h4 { color: var(--accent); letter-spacing: .14em; }
/* Wedding gift: gift icon, tabs (local / international), one card at a time */
.gift-ico { display: block; width: 44px; height: 44px; margin: 0 auto 10px; background: center / contain no-repeat var(--gift-ico, none); }
.gift-tabs { display: inline-flex; margin: 26px auto 0; padding: 4px; border: 1px solid rgba(194,161,90,.55); border-radius: 999px; background: #faf7f0; gap: 2px; }
.gift-tabs button { font-family: var(--serif); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  background: none; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background .3s, color .3s; }
.gift-tabs button[aria-selected="true"] { background: var(--btn); color: #faf7f0; }
.wishing .bank { margin-top: 22px; }
/* Engraved ink icons (Higgsfield, same style as the venue engraving) replace the line icons */
.couple::before, .day-line::before, .venue-script::before { -webkit-mask: none; mask: none; background: center / contain no-repeat var(--img); mix-blend-mode: multiply; }
.couple::before { --img: url("images/icons/rings.webp"); width: 74px; height: 50px; }
.day-line::before { --img: url("images/icons/calendar.webp"); width: 44px; height: 50px; }
.venue-script::before { --img: url("images/icons/pin.webp"); width: 46px; height: 54px; }
.gift-ico { --gift-ico: url("images/icons/gifts.webp"); width: 84px; height: 60px; mix-blend-mode: multiply; }
.now-playing span { display: block; }
.np-img { display: block; width: 100%; max-width: 320px; height: auto; margin: 4px auto 10px; mix-blend-mode: multiply;
  -webkit-mask: radial-gradient(ellipse 72% 70% at 50% 50%, #000 55%, transparent); mask: radial-gradient(ellipse 72% 70% at 50% 50%, #000 55%, transparent); }
.np-map { display: inline-block; margin-top: 14px; }
.tracks { padding: 0 3%; } .tracks li { font-size: 2.55cqw; letter-spacing: .02em; gap: 4%; white-space: nowrap; }
.couple::before, .day-line::before { display: none; }
.venue-script::before { display: none; }
.gift-ico { --gift-ico: url("images/icons/gift.webp"); width: 56px; height: 58px; }
/* Envelope sits on the paper: warmer tone, soft contact shadow */
.env-img { filter: sepia(.12) saturate(1.05) drop-shadow(0 14px 18px rgba(70,55,30,.18)) drop-shadow(0 2px 3px rgba(70,55,30,.12)); }
.gallery-section.has-art { padding-top: min(26vw, 120px); padding-bottom: min(22vw, 100px); }
/* Sleeve back: a clean printed tracklist (the drawn box/circle were removed from the photo) */
.record-dust { display: none; }
.tracks-title { position: absolute; left: 0; right: 0; top: 13%; margin: 0; text-align: center; font-family: var(--script); font-size: 9cqw; line-height: 1; color: #35443a; }
.tracks-sub { position: absolute; left: 0; right: 0; top: 26%; margin: 0; text-align: center; font-family: var(--serif); font-weight: 600; font-size: 2.1cqw; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); padding-left: .3em; }
.tracks { left: 17%; right: 17%; top: 34%; height: auto; bottom: 14%; padding: 0; justify-content: center; gap: 1.4cqw; }
.tracks li { font-size: 3cqw; line-height: 1.25; gap: 3cqw; padding: .5cqw 0; border-bottom: 1px solid rgba(53,68,58,.14); white-space: nowrap; }
.tracks li b { width: 5cqw; }
.tracks li.side { cursor: default; border: 0; justify-content: center; font-size: 2cqw; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); padding: 1.2cqw 0 .2cqw; }
.tracks li.on { text-decoration: none; color: var(--btn); }
.tracks li.on span { font-style: italic; }
.tracks-title { top: 9%; font-size: 8cqw; }
.tracks-sub { top: 21.5%; }
.tracks { top: 29%; bottom: 8%; justify-content: flex-start; gap: .4cqw; }
.tracks li { padding: .35cqw 0; }
.tracks li.side { padding: .9cqw 0 0; }
.now-playing { margin-top: 18px; } .now-playing b { margin-bottom: 12px; }
/* Hero arch a little smaller: more paper around it, more elevated */
.oval { width: min(64%, 256px); }
.tilt-stage { margin-top: 10px; margin-bottom: 40px; }

/* RSVP form: editorial, lighter, same fonts as the invitation */
.rsvp-form { gap: 26px; margin-top: 34px; }
.rsvp-form label, .rsvp-form legend { font-family: var(--serif); font-weight: 600; font-size: 11.5px; letter-spacing: .26em; color: var(--accent); }
.rsvp-form input[type=text], .rsvp-form textarea { font: 400 17px var(--serif); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(63,69,52,.35);
  border-radius: 0; padding: 10px 2px 8px; margin-top: 4px; transition: border-color .25s; }
.rsvp-form textarea { resize: none; min-height: 72px; }
.rsvp-form input::placeholder, .rsvp-form textarea::placeholder { color: rgba(63,69,52,.45); font-style: italic; }
.rsvp-form input:focus, .rsvp-form textarea:focus { outline: none; border-bottom-color: var(--btn); }
.attend { margin: 0; padding: 0; gap: 10px; }
.attend legend { margin-bottom: 10px; }
.guest-pills { display: contents; }
.pill span { font: 500 15px var(--serif); letter-spacing: .04em; padding: 11px 6px; border-radius: 999px; background: transparent; border-color: rgba(63,69,52,.3); color: var(--ink); }
.pill input:checked + span { background: var(--btn); border-color: var(--btn); color: #faf7f0; }
#rsvpSubmit { margin-top: 6px; border-radius: 999px; font-size: 17px; letter-spacing: .02em; padding: 14px 20px; box-shadow: 0 8px 18px rgba(107,37,48,.22); }
/* Hero names stacked, with the ampersand centred between them */
.hero-names > span { display: block; }
.hero-names .second { margin-left: 0; }
.hero-names .amp { font-size: .55em; line-height: .9; margin: -.02em 0 .04em; color: var(--accent); }
.tilt-stage::before { width: min(64%, 256px); }
/* Schedule readability: icon | time | event, serif text, tight wrapping */
.schedule ul { max-width: 340px; padding: 0; }
.schedule li { display: grid; grid-template-columns: 34px 74px 1fr; column-gap: 12px; align-items: center; line-height: 1.35; padding: 11px 0; border-bottom: 1px solid rgba(63,69,52,.1); }
.schedule li:last-child { border-bottom: 0; }
.schedule li .ico, .schedule li .ico-gap { width: 34px; height: 34px; }
.schedule li time { font-family: var(--serif); font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--accent); white-space: nowrap; }
.schedule li span { font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--ink); }
.schedule li span.wide { grid-column: 2 / -1; }
.schedule li.break { display: block; text-align: center; opacity: 1; padding: 10px 0; font-family: var(--serif); font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: rgba(63,69,52,.6); }
.schedule li.break i { font-style: normal; color: var(--accent); margin-right: .4em; }
.schedule .note { font-family: var(--serif); font-size: 16px; line-height: 1.5; }
.film-track figure::before { display: none; }
.gallery-section.has-art { min-height: 0; padding-bottom: min(20vw, 90px); }
.schedule li { grid-template-columns: 34px 64px 1fr; }
.schedule-block > p { font-family: var(--serif); font-size: 17px; line-height: 1.5; }
.schedule .sub { font-family: var(--serif); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--accent); margin-top: 22px; margin-bottom: 6px; }
.proj.is-film .proj-hint { gap: min(2.6vh, 20px); }
.footer { background: #2f4634; } /* deep olive green, like the wax seal */
/* Tactile form: buttons press in, the chosen pill pops */
.pill span, #rsvpSubmit { transition: transform .18s cubic-bezier(.3,1.6,.5,1), background .25s, color .25s, border-color .25s; -webkit-tap-highlight-color: transparent; }
.pill:active span, #rsvpSubmit:active { transform: scale(.94); }
.pill input:checked + span { animation: pillPop .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes pillPop { 0% { transform: scale(.92); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.rsvp-form input[type=text]:focus, .rsvp-form textarea:focus { transform: none; }
/* Footer: back of a luxury card — linen-textured deep green, soft vignette, gold double frame, foil logo */
.footer { position: relative; overflow: hidden; background-color: #2c4231;
  background-image:
    radial-gradient(ellipse 90% 80% at 50% 40%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.35)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
    var(--grain);
  background-blend-mode: normal, normal, normal, normal, soft-light;
  padding: 64px 24px calc(96px + env(safe-area-inset-bottom)); }
.footer::before, .footer::after { content: ""; position: absolute; pointer-events: none; border: 1px solid rgba(201,168,98,.55); }
.footer::before { inset: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
.footer::after { inset: 24px 24px calc(24px + env(safe-area-inset-bottom)); border-color: rgba(201,168,98,.25); }
.footer .mono { color: #d4b36c; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)) drop-shadow(0 0 10px rgba(212,179,108,.25)); }
.footer p { color: #efe7d4; }
.footer-date { font-style: normal !important; font-weight: 600; font-size: 11px !important; letter-spacing: .38em; text-transform: uppercase; color: #c9a862 !important; margin-top: 18px !important; padding-left: .38em;
  display: flex; align-items: center; justify-content: center; gap: 12px; }
.footer-date::before, .footer-date::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
/* Footer: same paper grain as the rest of the invitation, on the green */
.footer { background: var(--grain), #2c4231; background-blend-mode: soft-light, normal; }
.to-top { margin-top: 28px; font-family: var(--serif); font-weight: 600; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #efe7d4;
  background: transparent; border: 1px solid rgba(201,168,98,.6); border-radius: 999px; padding: 10px 20px 10px calc(20px + .3em); cursor: pointer;
  transition: background .25s, transform .18s; -webkit-tap-highlight-color: transparent; }
.to-top:hover { background: rgba(201,168,98,.15); }
.to-top:active { transform: scale(.95); }
.to-top span { display: inline-block; margin-left: 6px; letter-spacing: 0; }
.hero-names .amp { color: var(--ink); }
/* Footer: no frame, no gold — ivory on the green */
.footer::before, .footer::after { display: none; }
.footer .mono { color: #efe7d4; filter: none; }
.footer-date { color: rgba(239,231,212,.75) !important; }
.to-top { border-color: rgba(239,231,212,.45); }
.to-top:hover { background: rgba(239,231,212,.1); }
/* No grey tap flash / rectangular outline on the RSVP pills and buttons */
.pill, .pill span, .rsvp-form button, .to-top, .gift-tabs button { -webkit-tap-highlight-color: transparent; }
.pill input:focus-visible + span { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--btn); }
.pill input:focus:not(:focus-visible) + span, .rsvp-form button:focus:not(:focus-visible) { outline: none; box-shadow: none; }
#rsvpSubmit:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--btn); }
.pill span { transition: transform .18s cubic-bezier(.3,1.6,.5,1), background-color .25s, color .25s, border-color .25s; }
/* Handwritten hero names (SVG drawn from the font outlines) */
.hero-names .pen { display: block; margin: 0 auto; overflow: visible; max-width: 100%; height: auto; }
.hero-names .pen path { fill: var(--ink); stroke: var(--ink); stroke-width: 1.1; stroke-linecap: butt; stroke-linejoin: round; }
.hero-names .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }