/* Zey’s Floral — "The Unwrapping". Layered wrap paper, satin ribbon, a champagne card, and her real bouquets underneath. */
:root {
  --blush: #e9b7b4; --blush-2: #f3d2cf; --blush-3: #d79a98;
  --wine: #6e1e2e; --wine-2: #8d2f42; --wine-3: #4c1220;
  --champ: #d8c3a0; --champ-2: #ebdcc0; --champ-3: #bfa67c;
  --leaf: #8aa394; --paper: #fbf8f5; --paper-2: #f4eee7; --ink: #262224; --mute: #6b6264;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Pinyon Script", "Brush Script MT", cursive;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .09' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --ease: cubic-bezier(.45, .05, .2, 1);
  --hdr: 64px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.still { scroll-behavior: auto; }
body { margin: 0; font: 400 1rem/1.55 var(--sans); color: var(--ink); background: var(--paper); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--wine); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -.005em; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3rem); }
h2 em, h1 em { font-style: italic; font-weight: 500; }
h3 { font-size: 1.3rem; }
p { margin: 0; }
button { font: inherit; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--wine); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--wine-2); outline-offset: 2px; }

/* owner view */
.todo { display: inline-block; font: 600 .66rem/1.35 var(--sans); letter-spacing: .02em; text-transform: uppercase; color: #8a4b00; background: #fff1cf; border: 1px dashed #d08a10; border-radius: 6px; padding: .2em .5em; margin: .15em 0; vertical-align: middle; }
html.ready .todo, html.ready .edit-only { display: none !important; }
.edit-bar { position: relative; z-index: 60; background: #fff1cf; color: #5a3a00; font-size: .85rem; padding: 8px 14px; border-bottom: 1px solid #d08a10; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 1.3em; border-radius: 999px; border: 1.5px solid transparent; text-decoration: none; font-weight: 600; font-size: .95rem; letter-spacing: .01em; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.btn:active { transform: translateY(1px); }
.btn--wine { background: linear-gradient(180deg, var(--wine-2), var(--wine) 55%, var(--wine-3)); color: #fff; box-shadow: 0 8px 20px rgba(110, 30, 46, .25), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn--wine:hover { box-shadow: 0 12px 26px rgba(110, 30, 46, .32), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn--blush { background: linear-gradient(180deg, var(--blush-2), var(--blush)); color: var(--wine-3); }
.btn--line { background: transparent; border-color: currentColor; color: inherit; }
.btn--big { font-size: 1.05rem; min-height: 54px; padding: 0 1.6em; }
.btn__bow { width: 16px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 30% 35%, #fff6f0, var(--blush) 45%, var(--blush-3) 80%); box-shadow: 9px 0 0 -1px var(--blush); position: relative; left: -4px; }

/* wordmark: Pinyon "Zey’s" with a bow dotting the apostrophe, FLORAL in tracked caps */
.wm { display: inline-flex; align-items: baseline; gap: .35em; color: var(--wine); text-decoration: none; line-height: 1; }
.wm__script { font-family: var(--script); font-size: 2rem; position: relative; }
.wm__apos { position: relative; display: inline-block; }
.wm__bow { position: absolute; width: .62em; height: auto; left: -.2em; top: -.35em; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.wm__caps { font-family: var(--sans); font-weight: 400; font-size: .68rem; letter-spacing: .34em; text-transform: uppercase; color: var(--ink); position: relative; top: -.25em; }
.wm--card { flex-direction: column; align-items: center; gap: .1em; }
.wm--card .wm__script { font-size: 4.6rem; color: var(--wine); }
.wm--card .wm__caps { font-size: 1.05rem; letter-spacing: .5em; margin-left: .5em; top: 0; }
.wm--ftr { flex-direction: column; align-items: center; gap: .1em; }
.wm--ftr .wm__script { font-size: 3.2rem; color: var(--blush-2); }
.wm--ftr .wm__caps { font-size: .78rem; letter-spacing: .5em; margin-left: .5em; color: var(--champ); }

/* header */
.hdr { position: sticky; top: 0; z-index: 50; height: var(--hdr); display: flex; align-items: center; gap: 18px; padding: 0 clamp(14px, 3vw, 36px); background: rgba(251, 248, 245, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(110, 30, 46, .1); }
.hdr__logo { display: inline-flex; }
.hdr__nav { display: none; gap: 20px; margin-left: auto; }
.hdr__nav a { text-decoration: none; color: var(--ink); font-size: .92rem; font-weight: 600; }
.hdr__nav a:hover { color: var(--wine); }
.hdr__cta { display: none; min-height: 42px; }
@media (min-width: 760px) { .hdr__nav { display: flex; } .hdr__cta { display: inline-flex; } }

/* ---------- HERO: the unwrapping ---------- */
.hero { background: var(--wine-3); padding: 0; }
.wrap { position: relative; height: calc(100svh - var(--hdr)); min-height: 600px; max-height: 1000px; overflow: hidden; isolation: isolate; }
.wrap__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.wrap__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38, 34, 36, .12), transparent 30%, transparent 55%, rgba(38, 34, 36, .45) 100%); pointer-events: none; }
.sheets { position: absolute; inset: 0; perspective: 1400px; pointer-events: none; }
.sheet { position: absolute; background-image: var(--grain), linear-gradient(135deg, var(--sa) 0%, var(--sb) 48%, var(--sc) 100%); background-blend-mode: multiply, normal; box-shadow: 0 28px 60px rgba(40, 20, 25, .32), 0 6px 14px rgba(40, 20, 25, .18), inset 0 0 0 1px rgba(255, 255, 255, .35); will-change: transform; }
.sheet::before { content: ""; position: absolute; inset: 0; background: var(--fibre); mix-blend-mode: soft-light; opacity: .9; }
.sheet::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--fold), rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 7%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .14) 100%); }
.sheet--1 { --sa: #f6d2cf; --sb: var(--blush); --sc: #d9a09e; --fold: 180deg; left: -20%; top: -28%; width: 130%; height: 90%; transform: rotate(-9deg); transform-origin: 50% 0; z-index: 4; opacity: .97; }
.sheet--2 { --sa: #f1e4cc; --sb: var(--champ); --sc: #b9a078; --fold: 0deg; left: -15%; top: 36%; width: 130%; height: 90%; transform: rotate(7deg); transform-origin: 50% 100%; z-index: 5; }
.sheet--3 { --sa: #ffffff; --sb: #f7f2ec; --sc: #e2d9d0; --fold: 90deg; left: -30%; top: -6%; width: 92%; height: 125%; transform: rotate(-14deg); transform-origin: 0 50%; z-index: 3; opacity: .94; }
.sheet--4 { --sa: #fbe3e0; --sb: #efc7c4; --sc: #d4a3a0; --fold: 270deg; left: 38%; top: -12%; width: 92%; height: 125%; transform: rotate(12deg); transform-origin: 100% 50%; z-index: 2; opacity: .96; }
.sheet--5 { --sa: #93384a; --sb: var(--wine); --sc: #3f0f1b; --fold: 0deg; left: -10%; top: 64%; width: 120%; height: 60%; transform: rotate(-4deg); transform-origin: 50% 100%; z-index: 1; }

/* opened: the sheets lie folded back around the edges and stay as a frame */
.wrap.open .sheet--1, html.still .sheet--1 { transform: translate(-6%, -74%) rotate(-19deg); }
.wrap.open .sheet--2, html.still .sheet--2 { transform: translate(5%, 76%) rotate(15deg); }
.wrap.open .sheet--3, html.still .sheet--3 { transform: translate(-64%, -4%) rotate(-24deg); }
.wrap.open .sheet--4, html.still .sheet--4 { transform: translate(60%, 2%) rotate(23deg); }
.wrap.open .sheet--5, html.still .sheet--5 { transform: translate(3%, 70%) rotate(-7deg); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.still) .wrap.open .sheet--3 { animation: foldL 1.05s var(--ease) .5s both; }
  html:not(.still) .wrap.open .sheet--4 { animation: foldR 1.05s var(--ease) .68s both; }
  html:not(.still) .wrap.open .sheet--1 { animation: foldT 1.05s var(--ease) .86s both; }
  html:not(.still) .wrap.open .sheet--5 { animation: foldB2 1s var(--ease) 1s both; }
  html:not(.still) .wrap.open .sheet--2 { animation: foldB 1.05s var(--ease) 1.06s both; }
}
@keyframes foldL { 0% { transform: rotate(-14deg); } 50% { transform: translate(-30%, -4%) rotate(-18deg) rotateY(-52deg); } 100% { transform: translate(-64%, -4%) rotate(-24deg) rotateY(0); } }
@keyframes foldR { 0% { transform: rotate(12deg); } 50% { transform: translate(28%, 2%) rotate(16deg) rotateY(52deg); } 100% { transform: translate(60%, 2%) rotate(23deg) rotateY(0); } }
@keyframes foldT { 0% { transform: rotate(-9deg); } 50% { transform: translate(-3%, -36%) rotate(-13deg) rotateX(50deg); } 100% { transform: translate(-6%, -74%) rotate(-19deg) rotateX(0); } }
@keyframes foldB { 0% { transform: rotate(7deg); } 50% { transform: translate(3%, 38%) rotate(10deg) rotateX(-48deg); } 100% { transform: translate(5%, 76%) rotate(15deg) rotateX(0); } }
@keyframes foldB2 { 0% { transform: rotate(-4deg); } 100% { transform: translate(3%, 70%) rotate(-7deg); } }

/* satin ribbon tied across the bottom third */
.ribbon { position: absolute; left: 0; right: 0; top: 60%; height: 0; z-index: 7; pointer-events: none; }
.ribbon__band { position: absolute; left: -6%; right: -6%; top: -34px; height: 68px; transform: rotate(-3deg); background: linear-gradient(180deg, #a84a5e 0%, #7d2538 18%, #5a1626 42%, #8f3146 60%, #d07a8c 74%, #7a2538 88%, #4c1220 100%); box-shadow: 0 10px 24px rgba(40, 10, 18, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ribbon__band::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 22px, rgba(255, 255, 255, .06) 22px 23px); }
.ribbon__tail { position: absolute; left: 50%; top: 8px; width: 46px; height: 180px; background: linear-gradient(90deg, #4c1220, #7d2538 30%, #b4546a 50%, #7d2538 70%, #4c1220); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); box-shadow: 0 12px 20px rgba(40, 10, 18, .35); transform-origin: 50% 0; }
.ribbon__tail--l { transform: translateX(-68px) rotate(14deg); }
.ribbon__tail--r { transform: translateX(22px) rotate(-10deg); }
.ribbon__bow { position: absolute; left: 50%; top: -6px; width: 0; height: 0; }
.bow__loop { position: absolute; top: -34px; width: 92px; height: 62px; border-radius: 55% 45% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 38% 36%, #d98da0 0%, #8f3146 36%, #5a1626 68%, #3f0f1b 100%); box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .25), inset 0 6px 10px rgba(255, 255, 255, .18), 0 10px 20px rgba(40, 10, 18, .35); }
.bow__loop--l { left: -98px; transform: rotate(-16deg); transform-origin: 100% 60%; }
.bow__loop--r { left: 6px; transform: rotate(16deg) scaleX(-1); transform-origin: 0 60%; }
.bow__knot { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 40%; background: linear-gradient(160deg, #a84a5e, #5a1626 60%, #3f0f1b); box-shadow: 0 4px 10px rgba(40, 10, 18, .4), inset 0 2px 3px rgba(255, 255, 255, .2); }
/* untied */
.wrap.open .bow__loop--l { transform: rotate(-60deg) scale(.1); opacity: 0; }
.wrap.open .bow__loop--r { transform: rotate(60deg) scaleX(-1) scale(.1); opacity: 0; }
.wrap.open .bow__knot { transform: scale(.2); opacity: 0; }
.wrap.open .ribbon__tail--l { transform: translate(-150px, 52vh) rotate(38deg); opacity: 0; }
.wrap.open .ribbon__tail--r { transform: translate(120px, 50vh) rotate(-34deg); opacity: 0; }
.wrap.open .ribbon__band { transform: translateX(112%) rotate(-6deg); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.still) .bow__loop, html:not(.still) .bow__knot { transition: transform .5s var(--ease), opacity .4s .1s; }
  html:not(.still) .ribbon__tail { transition: transform .9s var(--ease) .12s, opacity .5s .5s; }
  html:not(.still) .ribbon__band { transition: transform 1s var(--ease) .3s, opacity .45s .8s; }
}
html.still .ribbon { display: none; }

.wrap__skip { position: absolute; z-index: 9; left: 50%; bottom: 22px; transform: translateX(-50%); min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(38, 34, 36, .4); color: #fff; font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(6px); cursor: pointer; transition: opacity .3s; }
.wrap.open .wrap__skip, html.still .wrap__skip, html:not(.js) .wrap__skip { opacity: 0; pointer-events: none; }

/* the champagne card: tucked in the ribbon, then face-up with the thought line */
.card { position: absolute; z-index: 8; left: 50%; bottom: 78px; width: min(92vw, 560px); transform: translate(-50%, calc(-.4 * (100svh - var(--hdr)) + 78px + 50%)) scale(.38); transform-style: preserve-3d; transform-origin: 50% 50%; }
.card__face { backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px; background-image: var(--grain), linear-gradient(160deg, #f3e8d2 0%, var(--champ-2) 40%, #d9c6a3 100%); background-blend-mode: multiply, normal; box-shadow: 0 26px 60px rgba(30, 15, 20, .45), 0 2px 0 rgba(255, 255, 255, .5) inset, 0 0 0 1px rgba(110, 30, 46, .12); }
.card__front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 230px; padding: 28px; position: absolute; inset: 0; }
.card__front::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(110, 30, 46, .28); border-radius: 3px; pointer-events: none; }
.card__mini { font-size: 1.3rem; letter-spacing: .36em; text-transform: uppercase; color: var(--wine-3); margin-left: .36em; }
.card__back { position: relative; transform: rotateY(180deg); padding: 24px 22px 18px; overflow: hidden; }
.card__back::before { content: ""; position: absolute; left: -46px; top: 18px; width: 150px; height: 20px; transform: rotate(-45deg); background: linear-gradient(180deg, #a84a5e, #6e1e2e 50%, #4c1220); box-shadow: 0 2px 6px rgba(40, 10, 18, .4); }
.card__eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wine-3); }
.card__stars { color: var(--wine); letter-spacing: .05em; }
.card h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); font-style: italic; font-weight: 500; color: var(--wine-3); margin: 8px 0 8px; }
.card h1 em { font-style: italic; font-weight: 600; color: var(--wine); }
.card__sub { font-size: .95rem; color: #4a3f42; margin-bottom: 14px; }
.thought label { display: block; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--wine-3); margin-bottom: 8px; }
.thought__row { display: grid; gap: 10px; }
.thought input { width: 100%; min-height: 50px; border: 0; border-bottom: 1.5px solid var(--wine); background: rgba(255, 255, 255, .45); padding: 10px 12px; font: 400 1rem var(--sans); color: var(--ink); border-radius: 6px 6px 0 0; }
.thought input::placeholder { color: #8b7f82; }
.thought input:focus { outline: none; background: rgba(255, 255, 255, .7); box-shadow: 0 2px 0 var(--wine); }
.card__alt { margin-top: 12px; font-size: .88rem; color: #4a3f42; display: flex; flex-wrap: wrap; gap: .35em; align-items: center; }
.opn { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; font-size: .82rem; }
.opn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 3px rgba(138, 163, 148, .25); }
.opn.is-closed::before { background: #b8a9ac; box-shadow: 0 0 0 3px rgba(184, 169, 172, .25); }
.opn--sm { margin-left: .5em; }
/* card open state */
.wrap.open .card, html.still .card { transform: translate(-50%, 0) rotateY(180deg) scale(1); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.still) .card { transition: transform 1.15s var(--ease) 1.2s; }
}
html.still .card__front, html:not(.js) .card__front { display: none; }
html:not(.js) .card { transform: translate(-50%, 0); }
html:not(.js) .card__back { transform: none; }
html:not(.js) .sheet { display: none; }
html:not(.js) .ribbon { display: none; }
@media (min-width: 900px) {
  .wrap { min-height: 640px; }
  .wrap__photo { object-position: 50% 36%; }
  .card { left: 6vw; bottom: 6vh; width: 560px; transform: translate(calc(44vw - 50%), calc(-.4 * (100svh - var(--hdr)) + 6vh + 50%)) scale(.38); }
  .wrap.open .card, html.still .card { transform: translate(0, 0) rotateY(180deg) scale(1); }
  html:not(.js) .card { transform: none; }
  .card__back { padding: 30px 30px 22px; }
  .thought__row { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---------- common section bits ---------- */
section { padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px); }
.eyebrow { font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--wine); margin-bottom: 8px; }
.lead { color: #4a3f42; max-width: 60ch; margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--blush-3); background: #fff; color: var(--wine-3); font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.chip:hover { border-color: var(--wine); }
.chip[aria-pressed="true"] { background: linear-gradient(180deg, var(--wine-2), var(--wine)); border-color: var(--wine); color: #fff; box-shadow: 0 6px 16px rgba(110, 30, 46, .25); }
.chips--sm .chip { min-height: 40px; font-size: .85rem; }

/* ---------- mood mixer ---------- */
.feel { background: var(--paper); }
.feel__head { margin: 0 0 18px; }
.feel__body { max-width: 1100px; margin: 0 auto; display: grid; gap: 30px; }
.feel__left { display: grid; gap: 4px; align-content: center; }
.mix { margin: 14px 0 0; --p: var(--blush); --p2: var(--paper); --r1: #a84a5e; --r2: #5a1626; --r3: #d07a8c; }
.mix__stage { position: relative; margin: 0 3%; }
.mix[data-feel="Thank you"] { --p: #cfe3da; --p2: #fbf8f5; --r1: #f0a6b6; --r2: #c9607a; --r3: #ffd3dc; }
.mix[data-feel="Celebrate"] { --p: #f1d59f; --p2: #fbf8f5; --r1: #d94a4a; --r2: #8f1f1f; --r3: #f08a8a; }
.mix[data-feel="Sorry"] { --p: #fbf8f5; --p2: #e6e0d8; --r1: #e4d2b2; --r2: #b89a6a; --r3: #f6ecd8; }
.mix[data-feel="Thinking of you"] { --p: #d8cbe6; --p2: #fbf8f5; --r1: #9a7fba; --r2: #5e467d; --r3: #c9b6de; }
.mix[data-feel="Big day"] { --p: #f1e1dc; --p2: #e9b7b4; --r1: #9fb6a8; --r2: #5f7a6b; --r3: #c8d8cd; }
.mix__paper { position: absolute; inset: -4% -3% 6% -3%; background-image: var(--grain), linear-gradient(150deg, color-mix(in srgb, var(--p) 70%, #fff) 0%, var(--p) 55%, color-mix(in srgb, var(--p) 78%, #000) 100%); background-blend-mode: multiply, normal; transform: rotate(-3.5deg); border-radius: 4px; box-shadow: 0 18px 40px rgba(40, 20, 25, .22), inset 0 0 0 1px rgba(255, 255, 255, .4); transition: background .5s; }
.mix__paper2 { position: absolute; inset: -3% 2% 9% 4%; background-image: var(--grain), linear-gradient(200deg, color-mix(in srgb, var(--p2) 80%, #fff) 0%, var(--p2) 60%, color-mix(in srgb, var(--p2) 82%, #000) 100%); background-blend-mode: multiply, normal; transform: rotate(4deg); border-radius: 4px; box-shadow: 0 12px 30px rgba(40, 20, 25, .18), inset 0 0 0 1px rgba(255, 255, 255, .5); opacity: .95; transition: background .5s; }
.mix__win { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; box-shadow: 0 20px 44px rgba(40, 20, 25, .3); background: #2a1a1e; }
.mix__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: 0; transition: opacity .55s var(--ease); }
.mix__ph.on { opacity: 1; }
.mix__ribbon { position: absolute; left: -3%; right: -3%; bottom: 17%; height: 40px; transform: rotate(-2.5deg); background: linear-gradient(180deg, var(--r1) 0%, var(--r2) 40%, var(--r3) 66%, var(--r2) 86%, var(--r2) 100%); box-shadow: 0 8px 18px rgba(40, 10, 18, .35), inset 0 1px 0 rgba(255, 255, 255, .3); transition: background .5s; }
.mix__bow { position: absolute; left: 50%; top: 50%; width: 110px; height: 44px; transform: translate(-50%, -50%); }
.mix__bow::before, .mix__bow::after { content: ""; position: absolute; top: 0; width: 50px; height: 40px; border-radius: 55% 45% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 38% 36%, var(--r3) 0%, var(--r1) 36%, var(--r2) 72%, color-mix(in srgb, var(--r2) 70%, #000) 100%); box-shadow: inset 0 -5px 9px rgba(0, 0, 0, .25), 0 6px 12px rgba(40, 10, 18, .35); transition: background .5s; }
.mix__bow::before { left: 2px; transform: rotate(-14deg); }
.mix__bow::after { right: 2px; transform: rotate(14deg) scaleX(-1); }
.mix__cap { position: relative; margin-top: 18px; display: grid; gap: 4px; }
.mix__cap strong { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--wine-3); }
.mix__cap span { color: #4a3f42; }
.mix__go { font-weight: 600; margin-top: 6px; }
@media (min-width: 900px) {
  .feel__body { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 56px; }
  .feel__left .chips { gap: 10px; max-width: 460px; }
  .feel__left .chip { font-size: 1rem; min-height: 48px; padding: 0 22px; }
  .feel__head { margin-bottom: 26px; }
  .mix { max-width: 460px; justify-self: end; width: 100%; margin-top: 0; }
}

/* ---------- order form ---------- */
.order { background-image: var(--grain), linear-gradient(180deg, #f3eadb, #efe3cf 60%, #ecdfc8); background-blend-mode: multiply, normal; }
.order__head, .form, .done { max-width: 880px; margin: 0 auto; }
.order__head { margin-bottom: 22px; }
.form { display: grid; gap: 16px; }
.f { display: grid; gap: 6px; }
.f label, .f__label { font-weight: 600; font-size: .92rem; color: var(--wine-3); }
.f small { font-weight: 400; color: var(--mute); }
.f input[type="text"], .f input[type="tel"], .f input[type="date"], .f select, .f textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid rgba(110, 30, 46, .22); border-radius: 8px; background: rgba(255, 255, 255, .72); font: 400 1rem var(--sans); color: var(--ink); }
.f textarea { resize: vertical; min-height: 72px; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110, 30, 46, .15); background: #fff; }
.f [aria-invalid="true"] { border-color: #b3261e; }
.f__e { color: #8a1c15; font-size: .85rem; font-weight: 600; }
.f__hint { font-size: .86rem; color: #4a3f42; }
.form__err { background: #fff1cf; border: 1px solid #d08a10; color: #5a3a00; padding: 10px 12px; border-radius: 8px; font-weight: 600; }
.seg { display: flex; gap: 8px; }
.seg label { flex: 1; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg span { display: grid; place-items: center; min-height: 46px; border: 1.5px solid var(--blush-3); border-radius: 999px; background: #fff; font-weight: 600; color: var(--wine-3); cursor: pointer; }
.seg input:checked + span { background: linear-gradient(180deg, var(--wine-2), var(--wine)); color: #fff; border-color: var(--wine); }
.seg input:focus-visible + span { outline: 3px solid var(--wine-2); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.form__foot { margin-top: 8px; gap: 10px; justify-items: start; }
.form__pay { font-size: .88rem; color: #4a3f42; }
.done { background: rgba(255, 255, 255, .7); border: 1px solid rgba(110, 30, 46, .2); border-radius: 12px; padding: 24px; display: grid; gap: 10px; justify-items: start; }
.done__h { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--wine-3); }
/* date ribbon */
.days { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.day { flex: 0 0 auto; scroll-snap-align: start; min-width: 74px; min-height: 76px; padding: 8px 10px; border: 0; border-radius: 6px; cursor: pointer; display: grid; gap: 2px; justify-items: center; align-content: center; color: var(--wine-3); background: linear-gradient(180deg, #f8e0dd 0%, var(--blush) 45%, #dca6a3 70%, #f0c9c6 100%); box-shadow: 0 6px 14px rgba(110, 30, 46, .18), inset 0 1px 0 rgba(255, 255, 255, .5); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%); padding-bottom: 14px; position: relative; }
.day b { font-family: var(--serif); font-size: 1.5rem; line-height: 1; font-weight: 600; }
.day small { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.day i { font-style: normal; font-size: .62rem; font-weight: 600; color: var(--wine); letter-spacing: .02em; }
.day[aria-pressed="true"] { background: linear-gradient(180deg, #a84a5e 0%, var(--wine) 45%, #4c1220 70%, #8d2f42 100%); color: #fff; }
.day[aria-pressed="true"] i { color: #f3d2cf; }
.day--today { background: linear-gradient(180deg, #e8e2e2, #cfc6c6 50%, #bdb3b3); color: #6b6264; cursor: not-allowed; box-shadow: none; }
.day--today small:first-child::after { content: " · today"; }
.day--soon { outline: 2px solid var(--wine); outline-offset: -2px; }
.days__note { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--wine-3); }
.days__later { display: grid; gap: 6px; max-width: 280px; margin-top: 6px; }
.days__later label { font-size: .85rem; }
@media (min-width: 760px) {
  .form { grid-template-columns: 1fr 1fr; }
  .f--wide, .form__foot { grid-column: 1 / -1; }
}

/* ---------- gallery ---------- */
.gal { background: var(--paper); }
.gal__head { max-width: 1200px; margin: 0 auto 22px; }
.gal__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tile { margin: 0; position: relative; }
.tile__b { display: block; width: 100%; padding: 6px; border: 0; background-image: var(--grain), linear-gradient(150deg, #f6dcd9, var(--blush) 60%, #dba7a4); background-blend-mode: multiply, normal; border-radius: 3px; box-shadow: 0 10px 24px rgba(40, 20, 25, .18), inset 0 0 0 1px rgba(255, 255, 255, .5); cursor: pointer; position: relative; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; }
.tile:nth-child(3n) .tile__b { background-image: var(--grain), linear-gradient(150deg, #f1e4cc, var(--champ) 60%, #bfa67c); }
.tile:nth-child(4n) .tile__b { background-image: var(--grain), linear-gradient(150deg, #ffffff, #f4eee7 60%, #ddd3c8); }
.tile__b::after { content: ""; position: absolute; right: 0; top: 0; width: 34px; height: 34px; background: linear-gradient(225deg, var(--paper) 0 50%, rgba(80, 40, 48, .35) 50%, rgba(255, 255, 255, .6) 52%, rgba(240, 220, 215, .9) 100%); box-shadow: -2px 2px 4px rgba(0, 0, 0, .12); }
.tile__b:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(40, 20, 25, .24), inset 0 0 0 1px rgba(255, 255, 255, .5); }
.tile img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.tile figcaption { font-size: .82rem; color: #4a3f42; margin-top: 8px; }
.no { font-family: var(--serif); font-weight: 600; color: var(--wine); margin-right: .4em; }
.gal__more { max-width: 1200px; margin: 18px auto 0; font-weight: 600; }
@media (min-width: 760px) { .gal__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } .tile:nth-child(8n+2) .tile__b, .tile:nth-child(8n+7) .tile__b { margin-top: 22px; } }
.lb { border: 0; padding: 0; background: rgba(20, 10, 14, .96); width: 100vw; height: 100dvh; max-width: none; max-height: none; color: #fff; }
.lb::backdrop { background: rgba(20, 10, 14, .9); }
.lb img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); max-width: 94vw; max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 60px rgba(0, 0, 0, .6); }
.lb__x, .lb__nav { position: absolute; z-index: 2; min-width: 48px; min-height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.8rem; cursor: pointer; display: grid; place-items: center; }
.lb__x { right: 14px; top: 14px; }
.lb__nav { top: 50%; transform: translateY(-50%); }
.lb__prev { left: 10px; } .lb__next { right: 10px; }
.lb__bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: linear-gradient(transparent, rgba(20, 10, 14, .9)); }
.lb__bar p { font-family: var(--serif); font-size: 1.15rem; }

/* ---------- ribbon reviews ---------- */
.rev { background: var(--wine-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); color: #f6e9e6; overflow: hidden; }
.rev .eyebrow { color: var(--blush); }
.rev .lead { color: #e7cfcb; }
.rev__head { max-width: 1100px; margin: 0 auto 26px; }
.rev__stars { color: var(--champ); letter-spacing: .04em; margin-right: .2em; }
.ribbons { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; gap: 18px; }
.rb { position: relative; margin: 0; transform: rotate(-1.2deg); clip-path: inset(0 0 0 0); }
.rb--alt { transform: rotate(1.1deg); }
.rb blockquote { margin: 0; padding: 20px clamp(22px, 5vw, 48px) 12px; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.3; color: #fff; background: linear-gradient(180deg, #a84a5e 0%, #7d2538 16%, #5e1828 44%, #8f3146 62%, #c06a7e 74%, #7a2538 88%, #4c1220 100%); box-shadow: 0 14px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%); text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.rb--alt blockquote { background: linear-gradient(180deg, #f6e8d0 0%, #e2cfa9 16%, #c9af80 44%, #e8d6b2 62%, #fbf1dd 74%, #d8c3a0 88%, #b59a6e 100%); color: var(--wine-3); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.rb cite { display: block; font-style: normal; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--blush-2); padding: 8px 28px 0; }
.rb--alt cite { color: var(--champ); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.still) .rb { clip-path: inset(0 100% 0 0); }
  html:not(.still) .rb.in { animation: unspool 1.3s var(--ease) both; }
  html:not(.still) .rb--alt.in { animation-name: unspoolR; }
  html:not(.still) .rb.paused { animation-play-state: paused; }
  html:not(.still) .rb--alt { clip-path: inset(0 0 0 100%); }
}
@keyframes unspool { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes unspoolR { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.rev__more { max-width: 1100px; margin: 26px auto 0; color: #f6e9e6; }
@media (min-width: 900px) {
  .ribbons { gap: 22px; }
  .rb { width: 86%; }
  .rb--alt { margin-left: auto; }
}

/* ---------- about ---------- */
.about { background-image: var(--grain), linear-gradient(160deg, #f7dedb, var(--blush) 70%, #e2aaa7); background-blend-mode: multiply, normal; }
.about__inner { max-width: 1100px; margin: 0 auto; display: grid; gap: 24px; }
.about__ph { margin: 0; position: relative; padding: 8px; background: var(--paper); box-shadow: 0 16px 36px rgba(40, 20, 25, .22); transform: rotate(-2deg); max-width: 360px; }
.about__ph img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; width: 100%; }
.about__txt { display: grid; gap: 14px; align-content: center; }
.about__txt p { font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); line-height: 1.4; color: var(--wine-3); max-width: 58ch; }
.about__q { font-style: italic; }
.about__q span { display: block; font-family: var(--sans); font-size: .8rem; font-style: normal; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; color: var(--wine); }
@media (min-width: 900px) { .about__inner { grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: center; } html:not(.ready) .about__inner { grid-template-columns: 1fr 1.6fr; } }
html.ready .about__inner { grid-template-columns: 1fr; }

/* ---------- how it works ---------- */
.how { background: var(--paper); text-align: center; }
.steps { list-style: none; margin: 26px auto 0; padding: 0; max-width: 1100px; display: grid; gap: 16px; text-align: left; }
.steps li { position: relative; padding: 22px 20px 20px 66px; border-radius: 12px; background: #fff; border: 1px solid rgba(110, 30, 46, .12); box-shadow: 0 10px 24px rgba(40, 20, 25, .08); }
.steps__n { position: absolute; left: 18px; top: 18px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: #fff; background: linear-gradient(160deg, var(--wine-2), var(--wine-3)); box-shadow: 0 6px 12px rgba(110, 30, 46, .3); }
.steps h3 { font-size: 1.25rem; margin-bottom: 4px; }
.steps p { color: #4a3f42; font-size: .95rem; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* ---------- weddings ---------- */
.wed { background: var(--paper-2); display: grid; gap: 22px; max-width: 1180px; margin: 0 auto; }
.wed__ph { margin: 0; position: relative; padding: 8px; background: #fff; box-shadow: 0 16px 36px rgba(40, 20, 25, .18); transform: rotate(1.5deg); }
.wed__ph img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.wed__txt { display: grid; gap: 14px; align-content: center; justify-items: start; }
.wed__txt p { color: #4a3f42; max-width: 52ch; }
@media (min-width: 900px) { .wed { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } }

/* ---------- visit ---------- */
.visit { background: var(--wine-3); color: #f6e9e6; }
.visit .eyebrow { color: var(--blush); }
.visit a { color: #fff; }
.visit__grid { max-width: 1100px; margin: 0 auto; display: grid; gap: 28px; }
.facts { margin: 18px 0 0; display: grid; gap: 10px; }
.facts div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.facts dt { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--champ); font-weight: 600; padding-top: 3px; }
.facts dd { margin: 0; }
.visit__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.visit__ph { margin: 0; padding: 8px; background: var(--paper); box-shadow: 0 20px 44px rgba(0, 0, 0, .35); transform: rotate(-1.5deg); align-self: center; }
.visit__ph img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; width: 100%; }
.visit__ph figcaption { color: var(--wine-3); font-family: var(--serif); font-style: italic; font-size: 1.05rem; padding: 8px 4px 2px; }
@media (min-width: 900px) { .visit__grid { grid-template-columns: 1.3fr 1fr; gap: 56px; } }

/* ---------- FAQ ---------- */
.faq { background: var(--paper); }
.faq__list { max-width: 820px; margin: 22px auto 0; display: grid; gap: 8px; }
.faq details { background: #fff; border: 1px solid rgba(110, 30, 46, .14); border-radius: 10px; padding: 0 18px; }
.faq summary { cursor: pointer; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--wine); font-size: 1.4rem; flex: 0 0 auto; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 16px; color: #4a3f42; }

/* ---------- footer: the closing scene ---------- */
.ftr { position: relative; overflow: hidden; background: var(--wine-3); color: #f6e9e6; text-align: center; padding: 72px 20px calc(40px + 86px); }
.ftr__scene { position: absolute; inset: 0; pointer-events: none; }
.ftr__sheet { position: absolute; width: 60%; height: 140%; top: -20%; background-image: var(--grain), linear-gradient(150deg, #f6d2cf, var(--blush) 50%, #c48a88); background-blend-mode: multiply, normal; opacity: .9; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.ftr__sheet--a { left: -42%; transform: rotate(14deg); }
.ftr__sheet--b { right: -42%; transform: rotate(-14deg); background-image: var(--grain), linear-gradient(150deg, #f1e4cc, var(--champ) 50%, #a88c62); }
.ftr__ribbon { position: absolute; left: -5%; right: -5%; bottom: 58px; height: 34px; transform: rotate(-2deg); background: linear-gradient(180deg, #a84a5e 0%, #7d2538 18%, #5a1626 42%, #8f3146 60%, #d07a8c 74%, #7a2538 88%, #4c1220 100%); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.ftr__inner { position: relative; display: grid; gap: 10px; justify-items: center; }
.ftr__tag { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--champ-2); }
.ftr__links a, .ftr__small a { color: #fff; }
.ftr__small { font-size: .86rem; color: #e7cfcb; }
@media (min-width: 760px) { .ftr { padding-bottom: 60px; } }

/* ---------- sticky dock (phones) ---------- */
.dock { display: none; }
@media (max-width: 759px) {
  .dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 55; display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(38, 34, 36, .92); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); backdrop-filter: blur(8px); }
  .dock a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; }
  .dock__go { background: linear-gradient(180deg, var(--blush-2), var(--blush)); color: var(--wine-3) !important; }
  .dock__bow { width: 14px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 30% 35%, #f6d2cf, var(--blush) 45%, var(--blush-3) 80%); box-shadow: 8px 0 0 -1px var(--blush); position: relative; left: -4px; }
  .dock.hide { transform: translateY(120%); transition: transform .3s; }
  .wrap { min-height: 560px; }
}

/* reveals */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.in, html.still .rv, html:not(.js) .rv { opacity: 1; transform: none; }