@font-face { font-family: "Ballet"; src: url("../fonts/keepsake/ballet-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../fonts/keepsake/baskerville-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../fonts/keepsake/baskerville-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* KEEPSAKE: the envelope and the keepsake flat-lay (the most-loved digital wedding style of 2026).
   A coloured envelope with a patterned liner (toile, floral, lace, gingham or plain: the client's choice), a wax
   seal with the couple's monogram and a spray of white flowers. Tap: the flap opens and the card slides out.
   The cover is a flat-lay on linen: the card in its envelope, a polaroid, the seal, a kraft tag to the details and
   a record that plays their song. Sections are scalloped paper cards. Original art; flowers from Bloom.
   Type: Ballet (names, script kickers) · Libre Baskerville (everything else). */
:root {
  --bg: #efede6; --paper: #fbf8f1; --ink: #2f3a2c; --muted: #646c5c; --line: rgba(47, 58, 44, .16);
  --accent: #5a6a4d; --accent-ink: #ffffff; --card: #ffffff;
  --env: #a3b18a; --env-2: #8e9d75; --liner: #f6f1e4; --liner-ink: #8e9d75; --seal: #c9b37e; --seal-ink: #5f4f24; --kraft: #c9a77c;
  --leaf: #7d8b6f; --leaf-2: #a9b4a0;
  --display: "Ballet", "Pinyon Script", cursive; --text: "Libre Baskerville", Georgia, serif;
  --radius: 4px; --maxw: 560px;
}
body { font-size: .95rem; color: var(--ink); background: var(--bg);
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .018) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .018) 0 1px, transparent 1px 4px); }
.bl-corner { display: block; overflow: visible; filter: drop-shadow(0 3px 4px rgba(60, 50, 30, .16)); }

/* ---------- liners ---------- */
.ks-liner { background-color: var(--liner); }
.ks-liner.l-gingham { background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--liner-ink) 28%, transparent) 0 8px, transparent 8px 16px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--liner-ink) 28%, transparent) 0 8px, transparent 8px 16px); }
.ks-liner.l-lace { background-image: radial-gradient(circle, transparent 5px, var(--liner-ink) 5.5px 6.6px, transparent 7.2px), radial-gradient(circle, var(--liner-ink) 1.5px, transparent 2px);
  background-size: 18px 18px, 18px 18px; background-position: 0 0, 9px 9px; }
.ks-liner.l-toile, .ks-liner.l-floral { position: relative; }
.ks-liner.l-toile::before, .ks-liner.l-floral::before { content: ""; position: absolute; inset: 0; background: var(--liner-ink); opacity: .85; }
.ks-liner.l-toile::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M14 40c0-8 4-14 10-16M24 24c-4-6-2-12 4-12 0 6-2 10-4 12zM24 24c6-2 10 0 10 6-6 0-8-2-10-6zM14 40c-6-2-8-8-6-12 4 2 6 6 6 12zM14 40c2 6 0 10-4 12'/%3E%3Ccircle cx='46' cy='18' r='4'/%3E%3Cpath d='M46 14v-4M46 22v4M42 18h-4M50 18h4M50 48c6 0 8 6 4 8-4 2-8-2-4-8zM38 54c3-3 7-3 9 0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 64px 64px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M14 40c0-8 4-14 10-16M24 24c-4-6-2-12 4-12 0 6-2 10-4 12zM24 24c6-2 10 0 10 6-6 0-8-2-10-6zM14 40c-6-2-8-8-6-12 4 2 6 6 6 12zM14 40c2 6 0 10-4 12'/%3E%3Ccircle cx='46' cy='18' r='4'/%3E%3Cpath d='M46 14v-4M46 22v4M42 18h-4M50 18h4M50 48c6 0 8 6 4 8-4 2-8-2-4-8zM38 54c3-3 7-3 9 0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 64px 64px; }
.ks-liner.l-floral::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg%3E%3Ccircle cx='9' cy='5.5' r='2.6'/%3E%3Ccircle cx='12.5' cy='9' r='2.6'/%3E%3Ccircle cx='9' cy='12.5' r='2.6'/%3E%3Ccircle cx='5.5' cy='9' r='2.6'/%3E%3Ccircle cx='27' cy='23.5' r='2.6'/%3E%3Ccircle cx='30.5' cy='27' r='2.6'/%3E%3Ccircle cx='27' cy='30.5' r='2.6'/%3E%3Ccircle cx='23.5' cy='27' r='2.6'/%3E%3Cpath d='M24 8c3-3 7-2 8 0-3 2-6 2-8 0zM6 28c2-3 6-4 8-1-3 2-6 2-8 1z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 36px 36px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg%3E%3Ccircle cx='9' cy='5.5' r='2.6'/%3E%3Ccircle cx='12.5' cy='9' r='2.6'/%3E%3Ccircle cx='9' cy='12.5' r='2.6'/%3E%3Ccircle cx='5.5' cy='9' r='2.6'/%3E%3Ccircle cx='27' cy='23.5' r='2.6'/%3E%3Ccircle cx='30.5' cy='27' r='2.6'/%3E%3Ccircle cx='27' cy='30.5' r='2.6'/%3E%3Ccircle cx='23.5' cy='27' r='2.6'/%3E%3Cpath d='M24 8c3-3 7-2 8 0-3 2-6 2-8 0zM6 28c2-3 6-4 8-1-3 2-6 2-8 1z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 36px 36px; }

/* ---------- wax seal ---------- */
.ks-seal { display: grid; place-items: center; width: 74px; aspect-ratio: 1; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--seal) 75%, #fff), var(--seal) 55%, color-mix(in srgb, var(--seal) 80%, #000));
  box-shadow: 0 3px 6px rgba(0, 0, 0, .25), inset 0 -2px 4px rgba(0, 0, 0, .2); }
.ks-seal-in { display: grid; place-items: center; width: 74%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--seal-ink) 45%, transparent);
  font: 400 1.35rem/1 var(--display); color: var(--seal-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); white-space: nowrap; }
.ks-seal-in i { font-style: normal; font-size: .7em; margin: 0 .05em; }

/* ---------- intro: the envelope ---------- */
.ks-intro { --intro-ms: 2500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 24px; overflow: hidden; background: inherit; background-color: var(--bg);
  transition: opacity .7s ease 1.85s, visibility 0s linear 2.5s; }
.ks-for { margin: 0; font: italic 1.05rem var(--text); color: var(--muted); }
.ks-for b { font-style: normal; font-weight: 400; color: var(--ink); }
.ks-env { position: relative; width: min(330px, 84vw); aspect-ratio: 1.42; margin-top: 30px; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px;
  transition: transform 1s cubic-bezier(.3, .6, .2, 1) 1.25s; }
.ks-back { position: absolute; inset: 0; z-index: 1; border-radius: 5px; background: var(--env); overflow: hidden; box-shadow: 0 22px 34px -22px rgba(40, 30, 20, .55); }
.ks-back .ks-liner { position: absolute; left: 5%; right: 5%; top: 4%; height: 58%; }
.ks-card { position: absolute; z-index: 2; left: 8%; right: 8%; top: 8%; bottom: 7%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px;
  background: var(--paper); border-radius: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); transition: transform .95s cubic-bezier(.3, .7, .2, 1) .6s; }
.ks-c-k { font: italic .62rem var(--text); color: var(--muted); }
.ks-c-n { font: 400 1.7rem/1.1 var(--display); color: var(--ink); text-align: center; }
.ks-c-d { font: .56rem var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ks-front { position: absolute; z-index: 3; inset: 0; border-radius: 5px; pointer-events: none;
  background: linear-gradient(175deg, var(--env), var(--env-2)); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .06); }
.ks-flap { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 58%; transform-origin: 50% 0; transform-style: preserve-3d; }
.ks-flap-out, .ks-flap-in { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; border-radius: 5px 5px 0 0; }
.ks-flap-out { background: linear-gradient(180deg, color-mix(in srgb, var(--env) 92%, #fff), var(--env)); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .15)); }
.ks-flap-in { transform: rotateX(180deg); }
.ks-intro .ks-seal { position: absolute; z-index: 5; left: 50%; top: 58%; transform: translate(-50%, -50%) rotate(-6deg); transition: transform .45s ease, opacity .35s ease; }
.ks-spray { position: absolute; z-index: 6; top: -30%; left: -12%; width: 48%; transform: rotate(-8deg); pointer-events: none; transition: opacity .5s ease 1.2s; }
.ks-intro .intro-hint { font: italic .9rem var(--text); color: var(--muted); }
.is-opening .ks-intro .ks-seal { transform: translate(-50%, -80%) scale(1.25) rotate(-20deg); opacity: 0; }
.is-opening .ks-flap { animation: ks-flap .7s cubic-bezier(.5, 0, .3, 1) .2s forwards; }
.is-opening .ks-card { transform: translateY(-62%); }
.is-opening .ks-env { transform: translateY(18%) scale(1.12); }
.is-opening .ks-for, .is-opening .ks-intro .intro-hint { opacity: 0; transition: opacity .3s; }
@keyframes ks-flap { 0% { transform: rotateX(0); z-index: 4; } 60% { z-index: 4; } 61% { z-index: 1; } 100% { transform: rotateX(178deg); z-index: 1; } }

/* ---------- cover: the flat-lay ---------- */
.t-keepsake .ks-hero { display: block; place-items: normal; min-height: 0; padding: 26px 14px 56px; text-align: center; }
.ks-lay { position: relative; max-width: 440px; margin: 0 auto; padding: calc(min(440px, 100vw - 40px) * .46 + 24px) 0 110px; }
.ks-spray2 { position: absolute; z-index: 5; top: 70px; left: -22px; width: 40%; transform: rotate(-14deg); pointer-events: none; }
.ks-pola { position: absolute; z-index: 4; top: 0; right: 3%; width: 40%; margin: 0; padding: 8px 8px 0; background: #fff; transform: rotate(5deg); box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .45); }
.ks-pola-img { aspect-ratio: 4 / 4.6; background: var(--bg); }
.ks-pola figcaption { padding: 6px 0 8px; font: 400 1.25rem/1 var(--display); color: #3a3a3a; }
.ks-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ks-hero .hero-media-tag { bottom: 8px; font-size: .58rem; background: rgba(20, 16, 12, .62); color: #fff; white-space: normal; width: 86%; max-width: none; line-height: 1.3; text-align: center; }
.ks-env2 { position: absolute; z-index: 1; left: 0; right: 0; bottom: 70px; height: 210px; border-radius: 5px; background: var(--env); box-shadow: 0 22px 30px -20px rgba(40, 30, 20, .55); }
.ks-env2 .ks-liner { position: absolute; left: 4%; right: 4%; top: -46%; height: 70%; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.ks-env2::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 66%; background: linear-gradient(0deg, var(--env), color-mix(in srgb, var(--env) 92%, #fff)); clip-path: polygon(0 100%, 50% 0, 100% 100%); z-index: -1; transform: translateY(1px); }
.ks-pocket { position: absolute; z-index: 3; left: 0; right: 0; bottom: 70px; height: 210px; border-radius: 5px; background: linear-gradient(175deg, var(--env), var(--env-2)); clip-path: polygon(0 0, 50% 44%, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
.ks-card2 { position: relative; z-index: 2; width: 82%; margin: 0 auto; padding: 40px 18px 150px; background: var(--paper); border-radius: 2px; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .25); }
.ks-card2::before { content: ""; position: absolute; inset: 8px 8px auto; height: calc(100% - 16px); border: 1px solid var(--line); pointer-events: none; }
.ks-hero .hero-guest { margin: 0 0 4px; font: italic 1rem var(--text); color: var(--muted); }
.ks-hero .hero-guest b { font-style: normal; font-weight: 400; color: var(--ink); }
.ks-hero .hero-k { margin: 0; font: italic .9rem/1.45 var(--text); color: var(--muted); letter-spacing: 0; text-transform: none; }
.ks-hero .hero-t { margin: 10px 0 6px; font: 400 clamp(2.5rem, 12.5vw, 3.4rem)/1.08 var(--display); color: var(--ink); letter-spacing: 0; }
.ks-hero .hero-t span { display: block; }
.ks-hero .hero-t i { display: block; font: italic 400 1.1rem/1.4 var(--text); color: var(--accent); }
.ks-hero .hero-line { margin: 8px auto 0; max-width: 20em; font: .86rem/1.6 var(--text); }
.ks-when { display: flex; flex-direction: column; gap: 2px; margin: 16px 0 0; font: .74rem/1.5 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.ks-when span + span { color: var(--muted); }
.ks-seal2 { position: absolute; z-index: 5; left: 50%; bottom: 150px; transform: translateX(-50%) rotate(-8deg); width: 66px; }
.ks-tag { position: absolute; z-index: 6; right: 0; bottom: 18px; display: grid; place-items: center; width: 118px; height: 64px; padding: 0 8px 0 24px; color: #3b2a14; text-decoration: none; transform: rotate(-9deg);
  background: var(--kraft); clip-path: polygon(18% 0, 100% 0, 100% 100%, 18% 100%, 0 50%); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .18)); font: italic .74rem/1.3 var(--text); }
.ks-tag::before { content: ""; position: absolute; left: 14px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .25); }
.ks-record { position: absolute; z-index: 6; left: -4px; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); }
.ks-vinyl { width: 92px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .6);
  background: radial-gradient(circle, var(--bg) 0 3px, var(--accent) 3.5px 17px, #1b1b1b 17.5px 19px, #2a2a2a 19.5px 21px, #1b1b1b 21.5px 30px, #2c2c2c 30.5px 31.5px, #1b1b1b 32px 40px, #2c2c2c 40.5px 41.5px, #1b1b1b 42px 46px); }
.ks-record.is-on .ks-vinyl { animation: ks-spin 2.4s linear infinite; }
.ks-rec-l { padding: 3px 9px; border-radius: 999px; background: var(--paper); font: italic .68rem var(--text); box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }
@keyframes ks-spin { to { transform: rotate(360deg); } }
.ks-hero.no-media .ks-lay { padding-top: 80px; }
.ks-hero.no-media .ks-spray2 { top: 0; }
.ks-hero .hero-cta { margin-top: 26px; padding: 13px 34px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: .78rem var(--text); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- sections: scalloped paper cards on linen ---------- */
.t-keepsake .s:not(.s-hero):not(.s-closing) { max-width: 600px; margin: 18px auto; padding: 56px 22px; background: var(--paper);
  -webkit-mask: radial-gradient(circle at 10px 0, transparent 7px, #000 7.5px) 0 0 / 20px 51% repeat-x, radial-gradient(circle at 10px 100%, transparent 7px, #000 7.5px) 0 100% / 20px 51% repeat-x;
          mask: radial-gradient(circle at 10px 0, transparent 7px, #000 7.5px) 0 0 / 20px 51% repeat-x, radial-gradient(circle at 10px 100%, transparent 7px, #000 7.5px) 0 100% / 20px 51% repeat-x; }
@media (max-width: 640px) { .t-keepsake .s:not(.s-hero):not(.s-closing) { margin-inline: 12px; } }
.t-keepsake .sh-k { font: 400 1.9rem/1 var(--display); letter-spacing: 0; text-transform: none; color: var(--accent); }
.t-keepsake .sh-t { font: 400 clamp(1.15rem, 5vw, 1.4rem)/1.3 var(--text); letter-spacing: .2em; text-transform: uppercase; }
.t-keepsake .sh::after { content: ""; display: block; width: 40px; height: 1px; margin: 16px auto 0; background: var(--accent); }
.t-keepsake .cd-u b { font: 400 2.2rem var(--text); }
.t-keepsake .cd-u span { letter-spacing: .14em; }
.t-keepsake .tl-time { font-style: italic; color: var(--accent); }
.t-keepsake .tl-title { font-weight: 400; }
.t-keepsake .vn-c, .t-keepsake .gl-it, .t-keepsake .gl-c, .t-keepsake .dr-roles > div { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.t-keepsake .vn-n, .t-keepsake .bio-n, .t-keepsake .tml-t { font: 400 1.1rem/1.3 var(--text); }
.t-keepsake .btn-line { border-radius: 999px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.t-keepsake .rs-btn { border-radius: 999px; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; }
.t-keepsake .faq summary { font-weight: 400; }

/* gallery: polaroids */
.ks-polas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; max-width: 520px; margin: 0 auto; }
.ks-p { margin: 0; padding: 7px 7px 0; background: #fff; box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .45); }
.ks-p.t0 { transform: rotate(-2.5deg); } .ks-p.t1 { transform: rotate(2deg); } .ks-p.t2 { transform: rotate(1.4deg); } .ks-p.t3 { transform: rotate(-1.8deg); }
.ks-p-img { aspect-ratio: 1; background: var(--bg); }
.ks-p figcaption { padding: 6px 0 9px; font: 400 1.2rem/1 var(--display); text-align: center; color: #3a3a3a; }

/* closing */
.ks-close { text-align: center; }
.ks-seal3 { width: 84px; margin: 0 auto 18px; }
.t-keepsake .cl-line { font: italic clamp(1.15rem, 5vw, 1.4rem)/1.6 var(--text); max-width: 22em; margin-inline: auto; }
.t-keepsake .cl-sign { margin-top: 10px; font: 400 2.2rem/1.1 var(--display); color: var(--accent); }

@media (prefers-reduced-motion: reduce) { .ks-env, .ks-card, .ks-intro .ks-seal { transition: none; } .is-opening .ks-flap { animation: none; } .ks-record.is-on .ks-vinyl { animation: none; } }