/* Eryk & Ola — paper-cut design (V24)
   Everything is "cut from paper": cream sheets torn open over wine paper, photos and cards with
   scissor-cut edges, layered on scraps. The envelope intro (V21) is at the bottom, unchanged.
   Torn edges: images/tear-*.svg · textures: images/paper-wine.jpg, images/lace.jpg
   Cut silhouettes are the <clipPath>s (cutArch, cutWave, cutBlob, cutSlab…) at the top of index.html */
:root{
  --paper:#f4ecdf;
  --paper-warm:#fbf6ec;
  --ink:#3d1a24;
  --muted:#7d5f62;
  --wine:#6a1c2f;
  --wine-deep:#4a1020;
  --rose:#a4475b;
  --rose-soft:#e9aab6;
  --on-wine:#f6ecdf;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"DM Sans",system-ui,sans-serif;
  --shadow:drop-shadow(0 14px 16px rgba(74,16,32,.24)) drop-shadow(0 2px 3px rgba(74,16,32,.22));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:var(--paper) url(images/tex-linen.svg) 0 0/300px;background-blend-mode:multiply;
}
/* mild woven "tablecloth" texture, reused on the other bright paper surfaces */
.paper-tex{background-blend-mode:multiply;background-image:url(images/tex-linen.svg);background-size:220px}
main{overflow-x:clip}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
.clip-defs{position:absolute;width:0;height:0;overflow:hidden}

.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}

.eyebrow{font-size:17px;letter-spacing:.3em;text-transform:uppercase;color:var(--rose)}
.section-marker{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(42px,5.6vw,80px);line-height:.98;letter-spacing:-.01em;color:var(--wine)}
h2 em{font-style:italic;font-weight:500;color:var(--rose)}

/* ---------- torn wine band (the reference: cream paper ripped open over wine) ---------- */
.band{
  position:relative;isolation:isolate;color:var(--on-wine);
  background:#6b1c2e url(images/paper-wine.jpg) center/cover;
  padding:clamp(170px,15vw,215px) 24px;
  box-shadow:inset 0 0 180px rgba(40,4,14,.4);
}
.band::before,.band::after{
  content:"";position:absolute;left:0;right:0;height:220px;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-position:var(--tp,50%) top;background-size:max(100%,1800px) 100%;
}
.band::before{top:-1px;background-image:var(--tt)}
.band::after{bottom:-1px;background-image:var(--tb)}
.band>*{position:relative;z-index:1}
.t1{--tt:url(images/tear-top-1.svg);--tb:url(images/tear-bottom-1.svg)}
.t2{--tt:url(images/tear-top-2.svg);--tb:url(images/tear-bottom-2.svg);--tp:35%}
.t3{--tt:url(images/tear-top-3.svg);--tb:url(images/tear-bottom-3.svg);--tp:70%}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(40px,7vh,80px)}
.hero-eyebrow{text-align:center;margin-bottom:clamp(28px,5vh,52px)}
.band-hero{text-align:center}
.band-hero h1{
  font-family:var(--serif);font-weight:500;font-size:clamp(76px,15vw,210px);line-height:.86;letter-spacing:-.025em;color:var(--on-wine);
  text-shadow:0 3px 24px rgba(30,4,12,.35);
}
.band-hero h1 span{font-style:italic;font-weight:400;color:var(--rose-soft);font-size:.62em;letter-spacing:0;padding:0 .04em}
.hero-lower{display:grid;justify-items:center;gap:18px;padding:clamp(48px,7vh,72px) 20px clamp(40px,6vh,64px);text-align:center}
.calendar-wrap{filter:var(--shadow);rotate:-1deg}
.calendar-card{width:min(330px,84vw);padding:30px 32px 26px;background:var(--paper-warm) url(images/tex-linen.svg) 0 0/220px;background-blend-mode:multiply;clip-path:url(#cutWave)}
.calendar-head{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.26em;color:var(--wine);margin-bottom:18px}
.calendar-week,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.calendar-week{font-size:10px;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.calendar-days{row-gap:9px;font-size:13px;color:var(--ink)}
.calendar-days strong{
  font-weight:500;color:var(--on-wine);width:30px;height:30px;line-height:30px;margin:-5px auto;
  background:url(images/paper-wine.jpg) center/cover;clip-path:url(#cutBlob);
}
.hero-event-time{font-size:13px;letter-spacing:.06em;color:var(--muted)}
.hero-event-time strong{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5vw,56px);color:var(--wine);letter-spacing:.02em;margin-left:8px;vertical-align:-.12em}
.place{font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--rose)}
.scroll{margin-top:10px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.scroll:hover{color:var(--wine)}

/* ---------- story ---------- */
.story{padding:clamp(20px,4vw,60px) 0 clamp(70px,9vw,120px)}
.chapter{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,7vw,110px);align-items:center;
  max-width:1140px;margin:0 auto;padding:clamp(60px,8vw,120px) 28px;
}
.chapter-copy{max-width:470px}
.chapter-number{
  display:inline-grid;place-items:center;width:58px;height:58px;margin-bottom:26px;
  font-family:var(--serif);font-size:22px;color:var(--on-wine);letter-spacing:.04em;
  background:url(images/paper-wine.jpg) center/cover;clip-path:url(#cutBlob);
}
.chapter-copy h2{margin-bottom:30px}
.chapter-date{display:grid;gap:4px;margin-bottom:22px}
.chapter-date strong{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,38px);color:var(--wine);letter-spacing:.04em}
.chapter-date span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chapter-copy>p{font-size:17px;line-height:1.75;color:var(--ink)}

/* photos cut from paper */
.cut{position:relative;isolation:isolate;margin:0;width:min(100%,470px);justify-self:center;rotate:var(--rot,0deg);filter:var(--shadow)}
.cut-arch{aspect-ratio:4/5}
.cut-wave{aspect-ratio:4/3.1;width:min(100%,560px)}
.cut-blob{aspect-ratio:1/1.06}
.cut-photo{position:absolute;inset:0;padding:9px;background:#fffaf1}
.cut-arch .cut-photo,.cut-arch .cut-photo img{clip-path:url(#cutArch)}
.cut-blob .cut-photo,.cut-blob .cut-photo img{clip-path:url(#cutBlob)}
.cut-photo img{width:100%;height:100%;object-fit:cover}
.cut-photo iframe{width:100%;height:100%;border:0;display:block}
.cut-wave .cut-photo,.cut-wave .cut-photo img,.cut-wave .cut-photo iframe{clip-path:url(#cutWave)}
.chapter-three .cut-photo img,.cut-main .cut-photo img{object-position:82% 50%}
/* the wine scrap behind each photo (drifts slowly while scrolling) */
.cut-back{
  position:absolute;z-index:-1;inset:-5% -9% -8% 12%;display:block;translate:0 var(--py,0px);
  background:url(images/paper-wine.jpg) center/cover;clip-path:url(#cutBlob2);rotate:5deg;
}
.chapter-two .cut-back{inset:-8% 10% -5% -10%;clip-path:url(#cutSlab2);rotate:-4deg}
.chapter-three .cut-back{inset:-4% -10% -9% 14%;clip-path:url(#cutArch2);rotate:-3deg}
.cut-back-cream{background:var(--paper-warm);clip-path:url(#cutBlob2);inset:-3% 20% -5% -7%;opacity:.96}
.tape{
  position:absolute;left:7%;bottom:-16px;z-index:2;padding:9px 20px 9px 22px;rotate:-2.5deg;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-wine);white-space:nowrap;
  background:url(images/paper-wine.jpg) center/cover;
  clip-path:polygon(0 0,100% 0,98.5% 25%,100% 50%,98% 76%,100% 100%,0 100%,1.6% 76%,0 50%,1.8% 25%);
}

/* ---------- wine strip between story and invitation ---------- */
.band-note{text-align:center}
.band-note .note{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,68px);line-height:1.08;color:var(--on-wine)}
.band-note .note em{color:var(--rose-soft);font-weight:400}

/* ---------- invitation ---------- */
.invitation{position:relative;padding:clamp(60px,8vw,110px) 24px clamp(90px,10vw,150px)}
.invitation-heading{text-align:center;display:grid;gap:18px;justify-items:center}
.invitation-heading .section-marker{margin-bottom:10px}
.timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);max-width:900px;margin:clamp(50px,6vw,80px) auto 0}
.tile{filter:var(--shadow);rotate:var(--r,0deg)}
.tile-paper{
  display:grid;justify-items:center;gap:8px;text-align:center;padding:34px 18px 32px;
  background:var(--paper-warm) url(images/tex-linen.svg) 0 0/220px;background-blend-mode:multiply;clip-path:var(--cut);
}
.tile .icon{
  width:78px;height:78px;display:grid;place-items:center;margin-bottom:10px;
  background:url(images/paper-wine.jpg) center/cover;clip-path:url(#cutBlob);
}
.tile .icon svg{width:54px;height:54px;fill:none;stroke:var(--on-wine);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile .number{font-size:11px;letter-spacing:.28em;color:var(--rose)}
.tile h3{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3vw,40px);color:var(--wine);line-height:1}
.tile p{font-size:14px;line-height:1.5;color:var(--muted)}

/* ---------- venue (wine paper) ---------- */
.venue-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,7vw,100px);align-items:center;max-width:1140px;margin:0 auto}
.venue-photos{position:relative;min-height:clamp(420px,52vw,620px)}
.cut-main{width:min(78%,400px);margin-left:2%}
.cut-small{position:absolute;right:0;bottom:-3%;width:min(50%,250px)}
.venue-copy{display:grid;gap:22px;justify-items:start}
.streetview{width:min(100%,300px);margin-top:6px}
.streetview .cut-photo{padding:7px}
.streetview-embed iframe{pointer-events:none}
.streetview:hover .streetview-embed iframe,.streetview:focus-within .streetview-embed iframe{pointer-events:auto}
.band-venue .eyebrow{color:var(--rose-soft)}
.band-venue h2{color:var(--on-wine)}
.band-venue h2 em{color:var(--rose-soft)}
.venue-copy p:not(.eyebrow){font-size:17px;line-height:1.75;color:rgba(246,236,223,.9)}
.text-link{
  display:inline-block;margin-top:8px;padding:15px 30px;text-decoration:none;
  font-size:11px;letter-spacing:.24em;color:var(--wine);background:var(--paper-warm);
  clip-path:polygon(0 0,100% 0,99% 30%,100% 55%,98.6% 100%,0 100%,1% 70%,0 45%,1.2% 20%);
  transition:transform .3s ease,background .3s ease;
}
.text-link:hover{transform:translateY(-2px);background:#fff}

/* ---------- RSVP: framed by lace ---------- */
.rsvp{padding:clamp(80px,10vw,150px) 20px clamp(120px,13vw,190px)}
.lace-wrap{max-width:720px;margin:0 auto;filter:var(--shadow);rotate:-.6deg}
.lace-card{
  position:relative;isolation:isolate;
  border:clamp(46px,8vw,82px) solid transparent;
  /* lace stays a frame only (no "fill") — the loud diamond weave used to fill the whole
     card and sat right behind the text, which is what was washing the copy out */
  border-image:url(images/lace.jpg) 130 / clamp(46px,8vw,82px) stretch;
  clip-path:url(#cutSlab);
}
/* the card's interior paper, with a faint hint of the lace weave so it still reads as fabric.
   Sized to the padding box only (inset:0) so it never overlaps the lace border-image —
   a negative z-index still paints above an element's own border, so overlapping it here
   would have hidden the lace frame entirely. */
.lace-card::before{
  content:"";position:absolute;z-index:-1;inset:0;
  background:var(--paper-warm) url(images/tex-linen.svg) 0 0/220px;background-blend-mode:multiply;
}
.lace-card::after{
  content:"";position:absolute;z-index:-1;inset:0;
  background:url(images/lace.jpg) center/340px;opacity:.08;mix-blend-mode:multiply;
}
.rsvp-inner{position:relative;display:grid;justify-items:center;gap:20px;text-align:center;padding:clamp(28px,5vw,60px) clamp(4px,3vw,30px)}
.rsvp-inner p:not(.section-marker){font-size:16px;line-height:1.7;color:var(--muted);max-width:420px}
.button{
  margin-top:10px;padding:17px 36px;border:0;cursor:pointer;font:inherit;font-size:11px;letter-spacing:.26em;color:var(--on-wine);
  background:url(images/paper-wine.jpg) center/cover;
  clip-path:polygon(0 0,100% 0,99% 30%,100% 55%,98.6% 100%,0 100%,1% 70%,0 45%,1.2% 20%);
  transition:transform .3s ease,filter .3s ease;
}
.button:hover{transform:translateY(-2px);filter:brightness(1.12)}
.form-placeholder{font-size:14px;color:var(--rose)}

/* ---------- footer ---------- */
.band-foot{display:flex;justify-content:space-between;align-items:flex-end;padding:clamp(150px,14vw,200px) clamp(24px,5vw,60px) 34px;font-size:12.5px;letter-spacing:.28em;color:rgba(246,236,223,.75)}
.band-foot::after{display:none}

/* ---------- extra paper cut-outs (olives, vinyl, statues) ---------- */
.cutout{position:absolute;z-index:3;pointer-events:none;height:auto;filter:var(--shadow);rotate:var(--rot,0deg);translate:0 var(--py,0px)}
.band>.cutout{position:absolute}
.cutout-olives{right:clamp(0px,1.2vw,40px);top:clamp(70px,14vh,160px);height:clamp(190px,44vh,440px);width:auto}
.cutout-olives-venue{right:clamp(10px,4vw,70px);top:auto;bottom:clamp(120px,14vw,200px);height:clamp(230px,26vw,380px)}
.cutout-vinyl{left:0;top:clamp(20px,3vw,50px);height:clamp(300px,34vw,520px);width:auto}
/* statues peek from behind the torn edge: they sit under the cream sheet (::after paints later) */
.band>.peek{position:absolute;z-index:0;right:clamp(0px,7vw,120px);bottom:0;width:clamp(210px,27vw,400px);height:auto;filter:var(--shadow);pointer-events:none;clip-path:inset(-60px -60px 0 -60px)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .chapter{grid-template-columns:1fr;gap:46px;padding:60px 28px 70px}
  .chapter-copy{max-width:none}
  .chapter .cut{width:min(88%,440px)}
  .chapter-two .cut{order:1}
  .chapter-two .chapter-copy{order:2}
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}
  .timeline .tile:last-child{grid-column:1/-1;max-width:280px;justify-self:center;width:100%}
  .venue-inner{grid-template-columns:1fr;gap:70px}
  .venue-photos{min-height:clamp(400px,110vw,560px);max-width:470px;margin:0 auto;width:100%}
  .cut-main{width:72%}
  .cut-small{width:46%}
  .venue-copy{justify-items:center;text-align:center}
}
@media(max-width:700px){
  .cutout-olives{right:-6px;top:64px;height:170px}
  .cutout-vinyl,.cutout-olives-venue{display:none}
  .band>.peek{right:-4px;width:46vw}
}
@media(max-width:520px){
  .band{padding-inline:18px}
  .tile-paper{padding:28px 10px 26px}
  .tile .icon{width:64px;height:64px}
  .tile .icon svg{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .cut-back{translate:none}
}

/* V21 — realistic velvet envelope
   - the card sits in a clipped "window": it can only leave through the top opening
   - the flap is a true 3D hinge with a velvet outside, patterned lining and wax seal
   - the whole rig re-centres itself as the card rises so everything stays on screen
   Timeline: envelope drifts in 0.5–2.9s · flap opens 3.0–6.0s · card rises 4.9–9.3s · button 9.5s */
body.intro-active{overflow:hidden}
.envelope-intro{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 44%,rgba(106,38,49,.16),transparent 30%),
    radial-gradient(circle at 20% 80%,rgba(76,28,35,.10),transparent 25%),
    #080707;
  color:#d7cbc1;opacity:1;visibility:visible;
  transition:opacity 1.35s ease,visibility 1.35s ease;
  overflow:hidden;
}
.envelope-intro.is-dismissed{opacity:0;visibility:hidden;pointer-events:none}
.envelope-intro:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
}
.intro-kicker{
  position:absolute;top:8vh;left:50%;transform:translateX(-50%);
  font-size:11.5px;letter-spacing:.28em;color:#9b7775;white-space:nowrap;
  opacity:0;animation:introFade 1.2s ease .45s forwards;
}
.intro-atmosphere{position:absolute;inset:0;pointer-events:none}
.envelope-stage{position:relative;display:grid;place-items:center}

/* ---- envelope body (design grid 520 × 350) ---- */
.velvet-envelope{
  --k:1; /* card scale, kept in sync with the envelope width by script.js */
  position:relative;
  width:min(520px,92vw,54vh);width:min(520px,92vw,54svh);
  aspect-ratio:520/350;
  perspective:1200px;perspective-origin:50% 50%;
  translate:0 18%;   /* starts a little low so the raised flap never touches the heading */
  opacity:0;
  animation:
    envelopeArrive 2.4s cubic-bezier(.16,.76,.24,1) .5s forwards,
    envelopeSettle 4.4s cubic-bezier(.4,0,.2,1) 4.9s forwards;
}
/* soft contact shadow on the "table" */
.velvet-envelope:before{
  content:"";position:absolute;z-index:0;left:-3%;right:-3%;bottom:-7%;height:15%;
  background:radial-gradient(ellipse at 50% 35%,rgba(0,0,0,.75),transparent 68%);
  filter:blur(9px);pointer-events:none;
}
.envelope-back{
  position:absolute;inset:0;z-index:1;
  background:
    repeating-linear-gradient(45deg,rgba(230,170,160,.05) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(-45deg,rgba(230,170,160,.05) 0 1px,transparent 1px 12px),
    linear-gradient(180deg,#2d0a14,#1b060c);
  box-shadow:inset 0 0 45px rgba(0,0,0,.65);
}

/* ---- the card: clipped at the envelope's bottom & sides, free only through the top ---- */
.card-window{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  clip-path:inset(-300% -8% 2% -8%); /* stops 2% short of the bottom edge so no paper can peek out at the seam */
}
.card-rail{
  position:absolute;inset:0;
  transform:translateY(70%);           /* starts fully tucked behind the front folds */
  animation:cardRise 4.4s cubic-bezier(.4,0,.2,1) 4.9s forwards;
}
.envelope-card{
  position:absolute;left:50%;top:0;width:390px;height:570px;
  transform-origin:50% 0;transform:translateX(-50%) scale(var(--k));
  background:linear-gradient(180deg,#ede7dc,#e6dfd3);color:#302927;
  padding:31px 32px 24px;text-align:center;overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.4),inset 0 0 0 1px rgba(92,67,59,.08);
}
.envelope-card:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* ---- front folds + flap ---- */
.envelope-front{position:absolute;inset:0;z-index:3;width:100%;height:100%;display:block;overflow:hidden;pointer-events:none}
.flap-shadow{animation:flapShadow 1s ease 3s forwards}

.envelope-flap{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  transform-origin:50% 0;transform-style:preserve-3d;
  animation:
    flapOpen 3s cubic-bezier(.45,.05,.35,1) 3s forwards,
    flapLayer 3s linear 3s forwards;
}
.flap-face{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-inner{transform:rotateY(180deg)}

/* ---- card typography (designed at 390px wide; the whole card scales with --k). The lower ~130px of paper is blank on purpose: it stays tucked in the pocket. ---- */
.mini-card-eyebrow{font-size:12.5px;letter-spacing:.24em;margin-bottom:15px;position:relative}
.envelope-card h2{font:400 56px "Cormorant Garamond",serif;letter-spacing:-.04em;line-height:.88;margin:0;position:relative}
.envelope-card h2 span{color:#71313d;font-style:normal}
.mini-rose-rule{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 14px;position:relative}
.mini-rose-rule i{height:1px;width:58px;background:linear-gradient(90deg,transparent,#7a4a4e)}
.mini-rose-rule i:last-child{background:linear-gradient(90deg,#7a4a4e,transparent)}
.mini-rose-rule svg{width:52px;height:30px;fill:none;stroke:#79474d;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.mini-calendar{position:relative;border:1px solid #9a7771;padding:13px 14px 10px;margin:0 auto 14px;max-width:310px}
.mini-calendar:before,.mini-calendar:after{content:"";position:absolute;width:9px;height:9px;border-color:#8b6765}
.mini-calendar:before{left:-1px;top:-1px;border-left:1px solid;border-top:1px solid}
.mini-calendar:after{right:-1px;bottom:-1px;border-right:1px solid;border-bottom:1px solid}
.mini-calendar-head{display:flex;justify-content:space-between;font:12px "Cormorant Garamond",serif;letter-spacing:.14em;border-bottom:1px solid #c4b4aa;padding-bottom:7px;margin-bottom:8px}
.mini-calendar-head span:last-child{color:#75414a}
.mini-week,.mini-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.mini-week{font-size:8px;color:#756b65;margin-bottom:6px}
.mini-days{row-gap:4px;font:11px "Cormorant Garamond",serif;color:#4e4642}
.mini-days span,.mini-days strong{width:20px;height:20px;display:grid;place-items:center;margin:auto}
.mini-days strong{border:1px solid #75414a;border-radius:50%;font-weight:400;color:#4d3538}
.mini-time{font:18px "Cormorant Garamond",serif;position:relative;margin-top:2px}
.mini-time strong{font-size:32px;color:#71313d;font-weight:500}
.mini-place{font-size:10px;letter-spacing:.17em;margin-top:4px;color:#5d5551;position:relative}

/* ---- button + decoration ---- */
.intro-open{
  position:absolute;bottom:7vh;left:50%;transform:translateX(-50%);border:0;background:none;color:#a38480;
  display:flex;flex-direction:column;align-items:center;gap:9px;font:9px "DM Sans",sans-serif;letter-spacing:.28em;cursor:pointer;
  opacity:0;animation:introFade 1.1s ease 9.5s forwards;
}
.intro-open b{font-size:18px;font-weight:300;line-height:1;animation:softBounce 2.4s ease-in-out infinite 10.5s}
.petal{position:absolute;color:#743742;opacity:.35;font-family:"Cormorant Garamond",serif}
.petal-1{left:13%;top:25%;font-size:22px;transform:rotate(24deg)}
.petal-2{right:11%;top:30%;font-size:35px;transform:rotate(-20deg)}
.petal-3{right:17%;bottom:19%;font-size:15px}

/* ---- motion ---- */
@keyframes envelopeArrive{
  0%{opacity:0;transform:translateY(34px) scale(.94) rotate(-1.2deg)}
  100%{opacity:1;transform:none}
}
/* the envelope glides down while the card rises, so the finished composition is vertically centred */
@keyframes envelopeSettle{from{translate:0 18%}to{translate:0 44.6%}}
/* 0→180° hinge on the top edge; the lining face takes over after 90° (backface-visibility) */
@keyframes flapOpen{
  0%{transform:rotateX(0deg)}
  100%{transform:rotateX(180deg)}
}
/* flap sits in front of the folds while lifting, then drops behind the card once it is past edge-on (≈41.6% of the timing curve) */
@keyframes flapLayer{
  0%,41.6%{z-index:5}
  41.7%,100%{z-index:1}
}
@keyframes flapShadow{to{opacity:0}}
@keyframes cardRise{to{transform:translateY(-89%)}}
@keyframes introFade{to{opacity:1}}
@keyframes softBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

body.intro-active main{opacity:0;transform:scale(.985);transition:opacity 1.1s ease,transform 1.35s ease}
body.intro-ready main{opacity:1;transform:none}

@media(max-width:700px){
  .intro-kicker{top:6vh;font-size:8px;letter-spacing:.24em}
  .intro-open{bottom:4vh}
}
@media(prefers-reduced-motion:reduce){
  .envelope-intro *{animation:none!important;transition:none!important}
  .velvet-envelope{opacity:1;translate:0 44.6%}
  .envelope-flap{transform:rotateX(180deg);z-index:1}
  .card-rail{transform:translateY(-89%)}
  .flap-shadow{opacity:0}
  .intro-kicker,.intro-open{opacity:1}
}


/* V29 — typography + Street View fixes */
.chapter-number,.tile .number{display:none !important}
.streetview{position:relative;z-index:4}
.streetview-embed{position:relative;z-index:5;overflow:hidden}
.streetview-embed iframe{pointer-events:auto !important;position:relative;z-index:6;width:100%;height:100%;display:block;min-height:260px}
.streetview-link{display:inline-block;margin-top:10px;padding:12px 22px;text-decoration:none;font-size:11px;letter-spacing:.22em;color:var(--wine);background:var(--paper-warm);clip-path:polygon(0 0,100% 0,99% 30%,100% 55%,98.6% 100%,0 100%,1% 70%,0 45%,1.2% 20%);transition:transform .3s ease}
.streetview-link:hover{transform:translateY(-2px)}
@media(max-width:700px){.eyebrow{font-size:14.5px}.mini-card-eyebrow{font-size:11px}.streetview-embed iframe{min-height:230px}}


/* V30 — reliable Street View card
   Google Maps panorama embeds can render as a blank white frame in local/offline previews
   and in some privacy-restricted browsers. The card therefore opens the exact panorama
   directly in Google Maps instead of relying on an iframe. */
.streetview-card{
  width:min(100%,420px);
  margin-top:6px;
  display:block;
  position:relative;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.streetview-card .streetview-visual{
  position:relative;
  overflow:hidden;
  padding:7px;
  background:var(--paper-warm);
}
.streetview-card .streetview-visual img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  filter:saturate(.82) contrast(.96) brightness(.82);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease;
}
.streetview-overlay{
  position:absolute;inset:7px;
  display:grid;place-items:center;align-content:center;gap:7px;
  text-align:center;
  color:#f6ecdf;
  background:linear-gradient(180deg,rgba(55,10,22,.16),rgba(55,10,22,.72));
  text-shadow:0 2px 12px rgba(0,0,0,.45);
  transition:background .45s ease;
}
.streetview-kicker{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#e9aab6}
.streetview-overlay strong{font-family:var(--serif);font-size:clamp(32px,4vw,48px);font-weight:500;line-height:1}
.streetview-hint{font-size:11px;letter-spacing:.08em;opacity:.88}
.streetview-card:hover .streetview-visual img,.streetview-card:focus-visible .streetview-visual img{transform:scale(1.035);filter:saturate(.9) contrast(1) brightness(.88)}
.streetview-card:hover .streetview-overlay,.streetview-card:focus-visible .streetview-overlay{background:linear-gradient(180deg,rgba(55,10,22,.08),rgba(55,10,22,.66))}
.streetview-card:focus-visible{outline:2px solid var(--rose-soft);outline-offset:5px}
.streetview-card .tape{pointer-events:none}
/* hide the obsolete iframe-link styles from V29 */
.streetview-link{display:none!important}

/* V33 — recenter the small garden sign photo so both signs read fully in the cut frame */
.cut-small .cut-photo img{
  object-position:72% 47%;
}

/* V34 — softer material edges and shadows
   Keep the paper-cut silhouette, but let the object dissolve gently into the linen background
   instead of ending with a visually hard horizontal edge. */
:root{
  --shadow-soft:drop-shadow(0 20px 28px rgba(74,16,32,.16)) drop-shadow(0 5px 10px rgba(74,16,32,.10));
}

/* The timeline papers should sit on the page rather than look cut out with a hard shadow. */
.tile{filter:var(--shadow-soft)}
.tile-paper{box-shadow:0 18px 34px rgba(74,16,32,.07), inset 0 0 18px rgba(74,16,32,.025)}

/* A much softer shadow for the lace card. */
.lace-wrap{filter:var(--shadow-soft)}

/* Feather only the very bottom of the lace sheet. The content remains crisp above it,
   while the textile and its shadow gently disappear into the background. */
.lace-card{
  -webkit-mask-image:linear-gradient(to bottom,
    #000 0%,
    #000 88%,
    rgba(0,0,0,.92) 92%,
    rgba(0,0,0,.58) 96%,
    transparent 100%);
  mask-image:linear-gradient(to bottom,
    #000 0%,
    #000 88%,
    rgba(0,0,0,.92) 92%,
    rgba(0,0,0,.58) 96%,
    transparent 100%);
}

/* Give the bottom of the RSVP section a barely perceptible atmospheric fade too. */
.rsvp{position:relative}
.rsvp::after{
  content:"";
  position:absolute;
  left:10%;right:10%;bottom:18px;height:90px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(244,236,223,0),rgba(244,236,223,.34));
  filter:blur(18px);
}

@media(max-width:700px){
  .lace-card{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 90%,rgba(0,0,0,.72) 97%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 90%,rgba(0,0,0,.72) 97%,transparent 100%);
  }
}

/* V35 — stable RSVP shadow: avoid filter-based compositing flicker on hover.
   The previous drop-shadow filter on .lace-wrap could disappear/repaint when the
   button underneath was hovered. Use a regular box-shadow instead. */
.lace-wrap{
  filter:none;
  -webkit-filter:none;
  box-shadow:0 22px 42px rgba(74,16,32,.13), 0 5px 12px rgba(74,16,32,.07);
}

/* Keep the soft atmospheric fade, but make it independent of the interactive card. */
.rsvp::after{
  z-index:5;
  pointer-events:none;
}

/* No hover/focus state should alter the RSVP card or its shadow. */
.lace-wrap:hover,
.lace-wrap:focus-within{
  filter:none;
  -webkit-filter:none;
}

/* V36 — organisational section and stable first-paint shadows */
.invitation-heading h2{margin:0}
.invitation-confirm{display:flex;justify-content:center;margin:clamp(34px,5vw,58px) auto 0}
.invitation-confirm .button{margin-top:0}
.tile-link{display:inline-block;max-width:250px;color:var(--wine);font-size:13px;line-height:1.45;text-decoration:underline;text-decoration-color:rgba(106,28,47,.35);text-underline-offset:4px;transition:color .25s ease,text-decoration-color .25s ease}
.tile-link:hover{color:var(--rose);text-decoration-color:var(--rose)}
.button{display:inline-block;text-decoration:none;text-align:center}

/* Avoid filter-based first-paint clipping on revealable paper objects. Promote the
   compositor layer before the reveal begins so their silhouettes and shadows are
   rasterised consistently from the first frame. */
.calendar-wrap,.cut,.tile,.cutout,.band>.peek{
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  will-change:transform,filter,opacity;
}
.calendar-wrap,.cut,.tile,.cutout,.band>.peek{isolation:isolate}

/* The irregular objects keep their paper-cut shadows, but the browser gets a stable
   layer immediately instead of waiting for the first reveal frame. */
.calendar-wrap{filter:var(--shadow);}
.cut{filter:var(--shadow);}
.tile{filter:var(--shadow-soft);}
.cutout,.band>.peek{filter:var(--shadow);}

/* RSVP CTA should not inherit button hover filtering that can trigger a repaint of
   neighbouring paper shadows. */
.invitation-confirm .button{transition:transform .3s ease}
.invitation-confirm .button:hover{filter:none;transform:translateY(-2px)}

/* Dresscode palette modal */
.palette-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease}
.palette-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.palette-backdrop{position:absolute;inset:0;background:rgba(24,7,10,.68);backdrop-filter:blur(4px)}
.palette-card{position:relative;width:min(620px,calc(100vw - 36px));padding:clamp(34px,5vw,56px);background:var(--paper-warm) url(images/tex-linen.svg) 0 0/220px;background-blend-mode:multiply;box-shadow:0 28px 70px rgba(31,8,14,.28);clip-path:url(#cutSlab);text-align:center;transform:translateY(16px) scale(.98);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.palette-modal.is-open .palette-card{transform:none}
.palette-card h2{margin:12px 0 18px}
.palette-copy{max-width:430px;margin:0 auto 28px;font-size:15px;line-height:1.65;color:var(--muted)}
.palette-inspiration{display:inline-block;margin:-8px auto 28px;padding:14px 24px;color:#f7ead8;font-size:10.5px;letter-spacing:.2em;text-decoration:none;background:var(--burgundy,#5b101b);clip-path:polygon(0 0,100% 0,98.8% 28%,100% 56%,98.7% 100%,0 100%,1.2% 70%,0 44%,1.3% 18%);box-shadow:0 8px 18px rgba(31,8,14,.16);transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.palette-inspiration:hover{transform:translateY(-2px);background:#741c2b;box-shadow:0 11px 22px rgba(31,8,14,.22)}
.palette-close{position:absolute;top:14px;right:18px;border:0;background:none;color:var(--wine);font:32px/1 Georgia,serif;cursor:pointer}
.palette-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.palette-swatches span{display:grid;gap:7px;justify-items:center;font-size:10px;letter-spacing:.08em;color:var(--muted)}
.palette-swatches span::before{content:"";display:block;width:58px;height:58px;border-radius:50%;background:var(--sw);box-shadow:0 5px 12px rgba(74,16,32,.14);border:1px solid rgba(61,26,36,.12)}
.palette-swatches b{font-size:9px;font-weight:500;letter-spacing:.06em}
.palette-swatches small{font-size:10px}
@media(max-width:600px){.palette-swatches{grid-template-columns:repeat(3,1fr);row-gap:18px}.palette-card{padding:38px 24px}.tile-link{font-size:12px}}

/* V38 — slightly larger RSVP buttons */
.button{
  padding:20px 44px;
  font-size:12.5px;
  letter-spacing:.25em;
}
.invitation-confirm .button{
  padding:20px 46px;
}


/* V41: direct RSVP email fallback */
.rsvp-direct {
  margin: 1.35rem auto 0;
  font-size: .78rem;
  line-height: 1.65;
  letter-spacing: .08em;
  color: rgba(72, 43, 42, .72);
  text-align: center;
}
.rsvp-direct a {
  color: var(--wine, #741c2b);
  text-decoration: none;
  border-bottom: 1px solid rgba(116,28,43,.35);
  padding-bottom: .08em;
}
.rsvp-direct a:hover {
  color: #5b101b;
  border-bottom-color: currentColor;
}

/* V42 — manual RSVP fallback */
.rsvp-template {
  display: inline-block;
  margin: .75rem auto .3rem;
  padding: .7rem 1rem;
  color: rgba(72,43,42,.88);
  background: rgba(255,250,239,.46);
  border: 1px solid rgba(116,28,43,.12);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: .95rem;
  letter-spacing: .025em;
}
#rsvp-direct {
  scroll-margin-top: 7rem;
}
@media(max-width:600px){
  .rsvp-template { font-size: .88rem; padding: .65rem .8rem; }
}


/* V43 — manual fallback link under the main RSVP button */
.invitation-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.rsvp-fallback-link {
  color: rgba(72,43,42,.68);
  font-size: .68rem;
  line-height: 1.5;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(116,28,43,.25);
  padding-bottom: .12rem;
  transition: color .2s ease, border-color .2s ease;
}
.rsvp-fallback-link:hover {
  color: var(--wine, #741c2b);
  border-bottom-color: currentColor;
}