/* =========================================================================
   VELLUM SUITE — wedding · quiet luxury
   Signature idea: the page is an unboxed stationery suite. Every section is
   its own deckle-edged cotton card resting on the one beneath it, labelled
   with a vellum tab. Opens as a vellum-wrapped card tied with ribbon.
   Type: Bodoni Moda (display) · Manrope (details)
   ========================================================================= */
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/vellum/bodoni-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/vellum/bodoni-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/vellum/manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/vellum/manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --seal-ink: #f1e4d6;
  --bg: #e9e3d8; --paper: #fbf8f2; --paper-2: #ded6c8; --ink: #2e2a25; --muted: #776f62; --line: rgba(46, 42, 37, .14);
  --accent: #6f7e67; --accent-ink: #fbf8f2; --wine: #7b2d33; --rose: #c4a196;
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; --text: "Manrope", system-ui, sans-serif;
  --radius: 2px; --maxw: 560px;
  --deckle: polygon(0.00% 0.29%, 2.17% 0.14%, 4.35% 0.59%, 6.52% 0.07%, 8.70% 0.48%, 10.87% 0.33%, 13.04% 0.05%, 15.22% 0.46%, 17.39% 0.03%, 19.57% 0.39%, 21.74% 0.06%, 23.91% 0.08%, 26.09% 0.38%, 28.26% 0.74%, 30.43% 0.11%, 32.61% 0.20%, 34.78% 0.56%, 36.96% 0.85%, 39.13% 0.52%, 41.30% 0.36%, 43.48% 0.88%, 45.65% 0.04%, 47.83% 0.77%, 50.00% 0.26%, 52.17% 0.13%, 54.35% 0.11%, 56.52% 0.28%, 58.70% 0.73%, 60.87% 0.16%, 63.04% 0.52%, 65.22% 0.58%, 67.39% 0.34%, 69.57% 0.49%, 71.74% 0.06%, 73.91% 0.05%, 76.09% 0.19%, 78.26% 0.61%, 80.43% 0.38%, 82.61% 0.28%, 84.78% 0.53%, 86.96% 0.41%, 89.13% 0.27%, 91.30% 0.71%, 93.48% 0.63%, 95.65% 0.22%, 97.83% 0.52%, 100.00% 0.47%, 100.00% 99.21%, 97.83% 99.34%, 95.65% 99.74%, 93.48% 99.12%, 91.30% 99.89%, 89.13% 99.62%, 86.96% 99.32%, 84.78% 99.86%, 82.61% 99.56%, 80.43% 99.96%, 78.26% 99.40%, 76.09% 99.31%, 73.91% 99.48%, 71.74% 99.21%, 69.57% 99.72%, 67.39% 99.37%, 65.22% 99.47%, 63.04% 99.48%, 60.87% 99.59%, 58.70% 99.24%, 56.52% 99.15%, 54.35% 99.57%, 52.17% 99.40%, 50.00% 99.95%, 47.83% 99.37%, 45.65% 99.42%, 43.48% 99.11%, 41.30% 99.26%, 39.13% 99.74%, 36.96% 99.65%, 34.78% 99.40%, 32.61% 99.98%, 30.43% 99.58%, 28.26% 99.85%, 26.09% 99.89%, 23.91% 99.95%, 21.74% 99.31%, 19.57% 99.88%, 17.39% 99.78%, 15.22% 99.65%, 13.04% 99.22%, 10.87% 99.93%, 8.70% 99.60%, 6.52% 99.51%, 4.35% 99.20%, 2.17% 99.26%, 0.00% 99.22%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body { background: var(--grain), radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--bg) 55%, #fff), var(--bg) 70%) fixed; background-color: var(--bg); font-size: 1rem; letter-spacing: .005em; }

/* ---------- Crest ---------- */
.crest { display: block; color: var(--accent); }
.crest text { font-family: var(--display); font-style: italic; font-size: 64px; fill: var(--ink); }
.crest .crest-b { fill: var(--wine); }

/* ---------- Intro: vellum wrap + ribbon + seal ---------- */
.vl-intro { --intro-ms: 1900; background: var(--grain), radial-gradient(90% 70% at 50% 40%, color-mix(in srgb, var(--bg) 60%, #fff), var(--paper-2)); background-color: var(--bg); transition: opacity .7s ease 1.25s, visibility 0s linear 1.95s; }
.vl-stage { display: grid; justify-items: center; gap: 26px; padding: 24px; }
.vl-pack { position: relative; width: min(290px, 74vw); aspect-ratio: 5 / 7; }
.vl-card { position: absolute; inset: 0; background: var(--grain), var(--paper); clip-path: var(--deckle); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 24px; text-align: center; box-shadow: 0 30px 50px -30px rgba(0,0,0,.45); }
.vl-crest { width: 46%; margin-bottom: 6px; }
.vl-names { font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.vl-date { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.vl-vellum { position: absolute; inset: -6px -8px; background: linear-gradient(170deg, rgba(255,255,255,.62), rgba(246,242,235,.5)); -webkit-backdrop-filter: blur(5px) saturate(110%); backdrop-filter: blur(5px) saturate(110%);
  border: 1px solid rgba(255,255,255,.75); box-shadow: 0 12px 30px -16px rgba(0,0,0,.3), inset 0 0 40px rgba(255,255,255,.35);
  display: flex; justify-content: center; padding-top: 18%; transition: transform 1s cubic-bezier(.6,0,.2,1) .4s, opacity .8s ease .55s; }
.vl-vellum span { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: rgba(46,42,37,.55); }
.vl-ribbon { position: absolute; top: 64%; height: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--rose) 70%, #fff), var(--rose) 45%, color-mix(in srgb, var(--rose) 80%, #000)); box-shadow: 0 2px 4px rgba(0,0,0,.12); transition: transform .7s cubic-bezier(.6,0,.4,1), opacity .5s ease .2s; }
.vl-ribbon::after { content: ""; position: absolute; inset: 4px 0; border-top: 1px dashed rgba(255,255,255,.35); border-bottom: 1px dashed rgba(255,255,255,.35); }
.vl-ribbon-l { left: -8px; right: 50%; }
.vl-ribbon-r { right: -8px; left: 50%; }
.vl-seal { position: absolute; z-index: 3; left: 50%; top: calc(64% + 11px); width: 82px; height: 80px; margin: -40px 0 0 -41px; border: 0; padding: 0; cursor: pointer;
  border-radius: 52% 48% 50% 50% / 47% 53% 47% 53%; color: var(--seal-ink); font-family: var(--display); font-style: italic; font-size: 1.35rem;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--wine) 72%, #fff), var(--wine) 52%, color-mix(in srgb, var(--wine) 68%, #000)); box-shadow: inset 0 0 0 6px rgba(0,0,0,.08), inset 0 0 0 7px rgba(255,255,255,.08), 0 8px 16px -4px rgba(60,10,15,.55);
  animation: seal-breathe 3s ease-in-out infinite; transition: transform .6s cubic-bezier(.5,0,.6,1), opacity .5s; }
.vl-seal span { display: inline-flex; align-items: baseline; gap: 1px; }
.vl-seal i { font-size: .8em; opacity: .75; }
.is-opening .vl-ribbon-l { transform: translateX(-120%); opacity: 0; }
.is-opening .vl-ribbon-r { transform: translateX(120%); opacity: 0; }
.is-opening .vl-seal { transform: translateY(46px) rotate(-18deg) scale(.8); opacity: 0; animation: none; }
.is-opening .vl-vellum { transform: translateY(-115%) rotate(-5deg); opacity: 0; }

/* ---------- The suite: every section is a deckled card ---------- */
.inv { padding: 18px 0 8px; }
.t-vellum .s { position: relative; isolation: isolate; margin: 0 12px 30px; padding: 64px 22px 52px; }
.t-vellum .s::before, .t-vellum .s::after { content: ""; position: absolute; clip-path: var(--deckle); }
.t-vellum .s::before { inset: 0; z-index: -1; background: var(--grain), var(--paper); }
.t-vellum .s::after { inset: 7px -5px -7px 5px; z-index: -2; background: var(--paper-2); transform: rotate(.7deg); }
.t-vellum .s:nth-of-type(even)::after { transform: rotate(-.8deg); inset: 8px 4px -8px -6px; }
.t-vellum .s-closing::before, .t-vellum .s-closing::after { display: none; }

/* vellum tab label on each card */
.t-vellum .sh { margin-bottom: 30px; }
.t-vellum .sh-k { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 2; margin: 0; padding: 7px 18px 6px; white-space: nowrap;
  font-size: .66rem; letter-spacing: .24em; color: var(--ink); background: rgba(252,250,246,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.85); box-shadow: 0 2px 6px -2px rgba(0,0,0,.18); }
.t-vellum .sh-t { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.12; }
.t-vellum .sh-t::after { content: ""; display: block; width: 36px; height: 1px; margin: 18px auto 0; background: var(--accent); }

/* ---------- Hero: the invitation card ---------- */
.t-vellum .s-hero { min-height: auto; padding: 0; margin: 0 12px 34px; display: block; }
.vl-hero-card { padding: 34px 24px 56px; text-align: center; min-height: calc(100svh - 36px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vl-band { width: 132px; margin-bottom: 10px; }
.vl-hero-crest { width: 100%; }
.t-vellum .hero-guest { font-family: var(--display); font-size: 1.1rem; color: var(--muted); margin-bottom: 8px; }
.t-vellum .hero-k { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.t-vellum .hero-t { font-size: clamp(3rem, 15vw, 5.4rem); line-height: .95; display: flex; flex-direction: column; align-items: center; }
.t-vellum .hero-t .amp { font-style: italic; color: var(--wine); font-size: .62em; line-height: 1.1; margin: 4px 0; }
.t-vellum .hero-line { max-width: 22em; margin: 22px auto 18px; font-family: var(--display); font-style: italic; font-size: 1.1rem; line-height: 1.45; color: var(--ink); }
.t-vellum .hero-date { display: grid; gap: 2px; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 6px; }
.t-vellum .hero-place { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.t-vellum .hero-cta { background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 0; font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; padding: 12px 26px; margin-top: 26px; }
.t-vellum .hero-cta:hover { background: var(--ink); color: var(--paper); }

/* ---------- Details ---------- */
.t-vellum .cd-u b { font-weight: 400; }
.t-vellum .cd-u + .cd-u { border-left: 1px solid var(--line); }
.t-vellum .btn-line { border-radius: 0; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.t-vellum .story-body p { font-family: var(--display); font-size: 1.12rem; line-height: 1.65; text-align: center; }
.t-vellum .miles { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid var(--line); }
.t-vellum .miles li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.t-vellum .mi-y { font-family: var(--display); font-style: italic; color: var(--wine); }
.t-vellum .tl-i { grid-template-columns: 78px 1fr; }
.t-vellum .tl-time { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding-top: 6px; }
.t-vellum .tl-title { font-family: var(--display); font-weight: 400; font-size: 1.3rem; }
.t-vellum .vn-c { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 22px 0 6px; }
.t-vellum .vn-c:first-child { border-top: 0; padding-top: 0; }
.t-vellum .vn-n { font-size: 1.7rem; }
.t-vellum .pp-h { font-size: .7rem; font-family: var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.t-vellum .pp-l li { font-family: var(--display); font-size: 1.15rem; }
.t-vellum .pp-l.is-pairs li + li { border-top: 1px solid var(--line); }
.t-vellum .dr-text { font-family: var(--display); font-style: italic; font-size: 1.12rem; }
.t-vellum .sw-dot { width: 42px; height: 42px; border-radius: 52% 48% 50% 50% / 47% 53% 47% 53%; box-shadow: inset 0 0 0 5px rgba(0,0,0,.05), 0 3px 6px -2px rgba(0,0,0,.25); }
.t-vellum .gf-p { text-align: center; font-family: var(--display); font-size: 1.1rem; font-style: italic; }
.t-vellum .faq summary { font-weight: 400; font-family: var(--display); font-size: 1.15rem; }

/* ---------- Reply card ---------- */
.t-vellum .rs, .t-vellum .rs-done { background: transparent; border: 0; padding: 0; border-radius: 0; }
.t-vellum .rs-by { font-family: var(--display); font-style: italic; }
.t-vellum .f-l { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; }
.t-vellum .f-in { background: transparent; border: 0; border-bottom: 1px solid rgba(46,42,37,.4); border-radius: 0; padding: 10px 2px; font-family: var(--display); font-size: 1.25rem; }
.t-vellum .f-in:focus { box-shadow: none; border-bottom-color: var(--wine); }
.t-vellum select.f-in { font-family: var(--text); font-size: 1rem; }
.t-vellum .ch span { background: transparent; border: 0; border-radius: 0; min-height: 46px; padding: 8px 2px; font-family: var(--display); font-size: 1.2rem; }
.t-vellum .ch span::before { border-radius: 0; width: 20px; height: 20px; border-color: var(--ink); }
.t-vellum .ch input:checked + span { background: transparent; }
.t-vellum .ch input:checked + span::before { border-color: var(--wine); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 10px var(--wine); }
.t-vellum .rs-btn { border-radius: 0; background: var(--wine); color: var(--seal-ink); font-size: .76rem; letter-spacing: .26em; text-transform: uppercase; margin-top: 8px; }
.t-vellum .rs-done-t { font-size: 1.9rem; }

/* ---------- Closing ---------- */
.t-vellum .cl-line { font-style: italic; font-size: 1.5rem; }
.t-vellum .cl-sign { font-family: var(--display); font-size: 1.4rem; color: var(--ink); }
.t-vellum .cl-tag { color: var(--wine); font-size: .82rem; }

@media (min-width: 720px) {
  .t-vellum .s, .t-vellum .s-hero { width: min(640px, calc(100% - 40px)); margin-left: auto; margin-right: auto; padding-left: 56px; padding-right: 56px; }
  .t-vellum .s-hero { padding: 0; }
  .t-vellum .vn { grid-template-columns: 1fr 1fr; gap: 28px; }
  .t-vellum .vn-c, .t-vellum .vn-c:first-child { border-top: 0; padding-top: 0; }
  .t-vellum .pp { grid-template-columns: 1fr 1fr; }
}
.t-vellum .hero-t.is-long { font-size: clamp(2.4rem, 11vw, 4.4rem); }
.vl-sub { font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin: 12px 0 0; }

/* ---------- cover card under vellum & the card deck ---------- */
.vl-photo { padding-top: 0 !important; }
.vl-pcard { position: relative; max-width: 460px; margin: 0 auto; padding: 14px; background: var(--paper); clip-path: var(--deckle); box-shadow: 0 18px 30px -24px rgba(0,0,0,.5); }
.t-vellum .s.vl-photo::before, .t-vellum .s.vl-photo::after { display: none; }
.vl-pframe { border-radius: 2px; background: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
.vl-veil { position: absolute; inset: 14px; border: 0; padding: 0; cursor: pointer; background: rgba(252, 250, 246, .62); -webkit-backdrop-filter: blur(7px) saturate(.8); backdrop-filter: blur(7px) saturate(.8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); transform-origin: 50% 0; transition: transform .9s cubic-bezier(.3,.7,.2,1), opacity .9s; display: grid; place-content: center; gap: 10px; justify-items: center; color: var(--ink); }
.vl-veil-seal { width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--wine) 70%, #fff), var(--wine) 55%, color-mix(in srgb, var(--wine) 70%, #000)); box-shadow: 0 6px 12px -6px rgba(0,0,0,.6); }
.vl-veil-t { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; }
.vl-veil.is-peeled { transform: perspective(900px) rotateX(-82deg) translateY(-6%); opacity: 0; pointer-events: none; }
.vl-deck { position: relative; height: min(118vw, 520px); max-width: 380px; margin: 0 auto; }
.vl-deck .stk { position: absolute; inset: 0 8% 8% 8%; margin: 0; padding: 12px 12px 0; background: var(--paper); box-shadow: 0 14px 24px -18px rgba(0,0,0,.55), 0 0 0 1px var(--line);
  transform: translate(calc(var(--i, 0) * 6px), calc(var(--i, 0) * 7px)) rotate(calc((var(--i, 0) - 1) * 2deg)); z-index: calc(20 - var(--i, 0)); display: flex; flex-direction: column; }
.vl-cimg { flex: 1; background: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
.vl-dk figcaption { font-family: var(--display, serif); font-style: italic; text-align: center; padding: 10px 4px 12px; font-size: 1.05rem; }
.vl-gal .swipe-hint { color: var(--muted); }
.t-vellum .gl-btn { background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }   /* matches the design's outlined buttons; pale accents + white text were hard to read */