:root{--berry:#B3265E;--deep:#8E1A4A;--gold:#F2B33D;--cream:#FFF7F0;--plum:#3A1230;--blush:#FFE3EA;--card:#fff;--muted:#6B5560;--line:#E8D6DC;--bg:var(--cream);--text:var(--plum);--link:#9C1F55}
@media (prefers-color-scheme:dark){:root{--bg:#1D1318;--text:#F6E7EC;--card:#2A1D24;--muted:#D5BFC8;--line:#4A383F;--blush:#3A2A33;--link:#FFB0C8}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3{font-family:"Noto Serif",Georgia,"Times New Roman",serif;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2rem,6vw,3.2rem);font-weight:700}h2{font-size:clamp(1.5rem,4vw,2.1rem)}h3{font-size:1.2rem}
a{color:var(--link)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;color:#000;padding:8px 12px;z-index:9}
header.site{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding-block:18px}
.brand{display:flex;align-items:center;gap:10px;font:700 1.25rem "Noto Serif",Georgia,serif;color:inherit;text-decoration:none}
.brand svg{width:34px;height:34px}
nav a{margin-left:18px;color:inherit;text-decoration:none;font-weight:500}nav a:hover{text-decoration:underline}
.hero{background:linear-gradient(160deg,var(--berry),var(--deep));color:#fff;border-radius:0 0 36px 36px;padding:0 0 56px}
.hero header.site{color:#fff}.hero .brand,.hero nav a{color:#fff}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding-top:24px}
.hero p.lead{font-size:1.2rem;max-width:34em;opacity:.95}
.btn{display:inline-block;padding:14px 26px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent}
.btn.primary{background:#fff;color:var(--deep)}.btn.ghost{border-color:rgba(255,255,255,.7);color:#fff;margin-left:10px}
.btn.disabled{background:rgba(255,255,255,.25);color:#fff;cursor:default}
.hero .cta{margin:26px 0 8px}.small{font-size:.9rem;opacity:.85}
.phone{border:8px solid #15090f;border-radius:34px;overflow:hidden;background:#000;box-shadow:0 18px 40px rgba(0,0,0,.28);max-width:270px;margin:0 auto}
.phone img{display:block;width:100%;height:auto}
section{padding:56px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px}
.card .emoji{font-size:2rem}.card p{color:var(--muted);margin:.3em 0 0}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.shots figcaption{text-align:center;color:var(--muted);font-size:.9rem;margin-top:10px}
.shots .phone{max-width:230px}
.private{background:var(--blush);border-radius:28px;padding:36px}
.private ul{margin:0;padding-left:1.2em}.private li{margin:.5em 0}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:12px 0}
summary{cursor:pointer;font-weight:600}details p{color:var(--muted);margin:.6em 0 0}
.legal{max-width:760px}.legal h1{margin-top:.4em}.legal h2{margin-top:1.6em}.legal table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1em 0;display:block;overflow-x:auto}
.legal th,.legal td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}.legal blockquote{margin:1em 0;padding:12px 16px;border-left:4px solid var(--gold);background:var(--card)}
.draft{background:#FFE9B8;color:#4a3300;border:1px solid #F2B33D;border-radius:12px;padding:12px 16px;margin:0 0 24px;font-weight:600}
footer.site{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:.92rem}
footer.site a{color:inherit;margin-right:16px}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.shots{grid-template-columns:repeat(2,1fr)}.btn.ghost{margin:10px 0 0}nav a{margin-left:12px}}
@media(max-width:480px){nav a{margin-left:0;margin-right:14px}h1{font-size:2rem}.shots{grid-template-columns:1fr}.shots .phone{max-width:260px}}

/* ---------- motion and polish ---------- */
.hero{position:relative;overflow:hidden}
.hero>.wrap,.hero>header{position:relative;z-index:1}
.blob{position:absolute;border-radius:50%;filter:blur(64px);opacity:.45;pointer-events:none}
.blob.b1{width:440px;height:440px;background:#F2B33D;top:-140px;right:-90px;animation:drift 14s ease-in-out infinite alternate}
.blob.b2{width:380px;height:380px;background:#FF7AA8;bottom:-160px;left:-110px;animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(40px,30px) scale(1.15)}}
h1 .w{display:inline-block;animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*90ms + 120ms)}
@keyframes rise{from{opacity:0;transform:translateY(.6em)}}
.hero p.lead,.hero .cta,.hero .small{animation:fade 1s ease both;animation-delay:.7s}
@keyframes fade{from{opacity:0}}
.hero-phone{position:relative;perspective:1000px}
.hero-phone .phone{animation:float 7s ease-in-out infinite;will-change:transform}
@keyframes float{50%{transform:translateY(-12px)}}
.chip{position:absolute;background:#fff;color:#3A1230;padding:8px 14px;border-radius:999px;font-weight:600;font-size:.85rem;box-shadow:0 10px 26px rgba(0,0,0,.22);animation:bob 5s ease-in-out infinite;white-space:nowrap}
.chip.c1{right:-4%;top:9%}.chip.c2{right:-18%;top:44%;animation-delay:-1.6s}.chip.c3{left:-8%;bottom:13%;animation-delay:-3.2s}
@keyframes bob{50%{transform:translateY(-10px)}}
.marquee{overflow:hidden;padding:20px 0;border-block:1px solid var(--line);margin-top:-1px}
.marquee .track{display:flex;gap:44px;width:max-content;animation:slide 32s linear infinite;font:600 1.15rem "Noto Serif",Georgia,serif}
.marquee .dup{display:contents}
.marquee:hover .track{animation-play-state:paused}
@media(max-width:1150px){.chip{display:none}}
@keyframes slide{to{transform:translateX(-50%)}}
.tones{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tone{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;transition:transform .25s,box-shadow .25s}
.tone:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(179,38,94,.16)}
.tone b{display:inline-block;background:var(--blush);color:var(--deep);border-radius:999px;padding:3px 12px;font-size:.85rem}
.tone p{font:italic 1.05rem/1.5 "Noto Serif",Georgia,serif;margin:.9em 0 0}
.privacy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
.privacy-grid .card h3{font-size:1.05rem}
.final{background:linear-gradient(160deg,var(--berry),var(--deep));color:#fff;border-radius:32px;text-align:center;padding:56px 24px;position:relative;overflow:hidden}
.final h2{color:#fff}.final .btn{margin-top:10px}
.sub{color:var(--muted);max-width:40em}
/* the pinned scroll story (only when JavaScript is on, on wide screens, with motion allowed) */
.story{display:none;background:linear-gradient(180deg,var(--bg),var(--blush))}
.story-on .story{display:block}
.story-on .static-steps{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.story-inner{height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;max-width:1040px;margin:0 auto;padding:0 20px}
.steps-col{display:grid}.step{grid-area:1/1;align-self:center}
.step .num{font:700 4.5rem/1 "Noto Serif",Georgia,serif;color:var(--berry);opacity:.28}
.step h3{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:.1em 0 .3em}
.step p{font-size:1.2rem;color:var(--muted);max-width:25em}
.progress{height:5px;background:var(--line);border-radius:5px;overflow:hidden;margin-top:32px;max-width:25em}
.progress i{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.stage{display:flex;justify-content:center;perspective:1200px}
.stage .phone{position:relative;height:min(74vh,660px);aspect-ratio:520/1097;max-width:none;margin:0}
.screen{position:absolute;inset:0}.screen img{width:100%;height:100%;object-fit:cover;display:block}
.cam{background:radial-gradient(120% 80% at 30% 20%,#5a4a40,#17110e 70%);color:#fff;font-size:clamp(9px,1.45vh,13px)}
.cam .bar{position:absolute;top:6%;left:7%;right:7%;display:flex;gap:6px}.cam .bar i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.3)}.cam .bar i:first-child{background:#fff}
.cam .t{position:absolute;top:10.5%;left:7%;font:600 1.5em "Noto Serif",Georgia,serif}
.cam .frame{position:absolute;left:12%;right:12%;top:24%;aspect-ratio:1;display:grid;place-items:center;font-size:7em}
.cam .frame span{position:absolute;width:12%;height:12%;border:3px solid #fff}
.cam .tl{top:0;left:0;border-right:0!important;border-bottom:0!important;border-top-left-radius:10px}.cam .tr{top:0;right:0;border-left:0!important;border-bottom:0!important;border-top-right-radius:10px}
.cam .bl{bottom:0;left:0;border-right:0!important;border-top:0!important;border-bottom-left-radius:10px}.cam .br{bottom:0;right:0;border-left:0!important;border-top:0!important;border-bottom-right-radius:10px}
.cam .hint{position:absolute;bottom:19%;width:100%;text-align:center;opacity:.9;font-size:1.15em}
.cam .shutter{position:absolute;bottom:5%;left:50%;width:6.5em;height:6.5em;margin-left:-3.25em;border:.3em solid #fff;border-radius:50%}
.cam .shutter::after{content:"";position:absolute;inset:.45em;background:#fff;border-radius:50%}
@media(max-width:820px){.tones{grid-template-columns:1fr 1fr}.privacy-grid{grid-template-columns:1fr}.chip{display:none}.blob{opacity:.3}}
@media(max-width:480px){.tones{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.marquee .track{width:auto;flex-wrap:wrap;justify-content:center;gap:12px 32px}.marquee .dup{display:none}}

/* ---------- optional "clay" look: soft, puffy, moulded shapes (turn on with "clay": true in site.json) ---------- */
.clay{--clay-hi:#fff;--clay-shadow:rgba(179,38,94,.17);--clay-card:linear-gradient(145deg,#fff,#fdeef1);--clay-inset:rgba(179,38,94,.08)}
@media (prefers-color-scheme:dark){.clay{--clay-hi:rgba(255,255,255,.07);--clay-shadow:rgba(0,0,0,.55);--clay-card:linear-gradient(145deg,#36262e,#261b21);--clay-inset:rgba(0,0,0,.35)}}
.clay .hero{border-radius:0 0 56px 56px}
.clay .card,.clay .tone,.clay details{border:0;border-radius:32px;background:var(--clay-card);
  box-shadow:14px 16px 30px var(--clay-shadow),-8px -8px 20px var(--clay-hi),inset 3px 3px 6px var(--clay-hi),inset -4px -5px 10px var(--clay-inset)}
.clay details{border-radius:26px;box-shadow:8px 10px 20px var(--clay-shadow),-5px -5px 14px var(--clay-hi),inset 2px 2px 5px var(--clay-hi),inset -3px -4px 8px var(--clay-inset)}
.clay .tone:hover{box-shadow:18px 22px 36px var(--clay-shadow),-8px -8px 20px var(--clay-hi),inset 3px 3px 6px var(--clay-hi),inset -4px -5px 10px var(--clay-inset)}
.clay .card .emoji{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:1.9rem;margin-bottom:14px;
  background:radial-gradient(circle at 30% 25%,#fff 0,var(--b1) 45%,var(--b2) 100%);
  box-shadow:6px 9px 16px rgba(0,0,0,.16),inset -4px -7px 11px rgba(0,0,0,.09),inset 4px 4px 9px rgba(255,255,255,.95)}
.clay .card:nth-child(3n+1) .emoji{--b1:#FFE3EA;--b2:#F59DB8}
.clay .card:nth-child(3n+2) .emoji{--b1:#FFEBBE;--b2:#F2B33D}
.clay .card:nth-child(3n) .emoji{--b1:#D9F3E6;--b2:#7CCBA3}
.clay .tone b{box-shadow:inset 2px 2px 4px var(--clay-hi),inset -2px -3px 6px rgba(179,38,94,.14),3px 4px 8px rgba(179,38,94,.12)}
.clay .btn{border:0;padding:16px 30px;transition:transform .15s,box-shadow .15s}
.clay .btn:hover{transform:translateY(-2px)}
.clay .btn.primary{background:linear-gradient(145deg,#fff,#f6e4e9);color:var(--deep);
  box-shadow:0 13px 22px rgba(40,0,20,.35),inset 0 5px 9px #fff,inset 0 -8px 13px rgba(179,38,94,.24)}
.clay .btn.primary:active{transform:translateY(3px);box-shadow:0 5px 10px rgba(40,0,20,.35),inset 0 3px 6px #fff,inset 0 -4px 8px rgba(179,38,94,.2)}
.clay .btn.ghost{background:linear-gradient(145deg,rgba(255,255,255,.3),rgba(255,255,255,.08));color:#fff;
  box-shadow:0 11px 20px rgba(40,0,20,.3),inset 0 4px 8px rgba(255,255,255,.45),inset 0 -7px 11px rgba(0,0,0,.2)}
.clay .btn.disabled{background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(255,255,255,.14));
  box-shadow:0 8px 16px rgba(40,0,20,.22),inset 0 3px 6px rgba(255,255,255,.45),inset 0 -6px 9px rgba(0,0,0,.16)}
.clay .chip{background:linear-gradient(145deg,#fff,#fbe9ee);box-shadow:8px 11px 20px rgba(0,0,0,.26),inset 2px 2px 5px #fff,inset -3px -4px 8px rgba(179,38,94,.14)}
.clay .private{border-radius:44px;box-shadow:inset 6px 6px 14px rgba(255,255,255,.7),inset -8px -10px 18px rgba(179,38,94,.1),14px 16px 30px var(--clay-shadow)}
.clay .final{border-radius:48px;box-shadow:0 26px 44px rgba(142,26,74,.38),inset 0 7px 14px rgba(255,255,255,.28),inset 0 -12px 22px rgba(0,0,0,.22)}
.clay .phone{border-radius:42px}
@media (prefers-contrast:more){.clay .card,.clay .tone,.clay details{border:2px solid var(--text)}}

/* invitations and guest list */
.feature{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-bottom:34px}
.feature.flip{grid-template-columns:.9fr 1.1fr}
.feature .phone{max-width:250px}
.ticks{list-style:none;padding:0;margin:14px 0 0}
.ticks li{position:relative;padding:6px 0 6px 30px}
.ticks li::before{content:"✓";position:absolute;left:0;top:6px;width:22px;height:22px;border-radius:50%;background:#FFE3EA;color:#B3265E;font-weight:700;font-size:.8rem;display:grid;place-items:center}
.designs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:10px}
.designs figure{margin:0;text-align:center}
.designs img{width:100%;height:auto;border-radius:18px;box-shadow:0 10px 24px rgba(58,18,48,.18);display:block}
.designs figcaption{color:var(--muted);font-size:.9rem;margin-top:8px}
.clay .designs img{border-radius:26px;box-shadow:10px 14px 26px rgba(58,18,48,.22),-5px -5px 14px rgba(255,255,255,.8),inset 0 0 0 3px rgba(255,255,255,.55)}
.clay .ticks li::before{background:linear-gradient(145deg,#fff,#f59db8);box-shadow:2px 3px 6px rgba(179,38,94,.25)}
@media(max-width:820px){.feature,.feature.flip{grid-template-columns:1fr}.feature.flip>:first-child{order:2}.designs{grid-template-columns:repeat(2,1fr)}.feature .phone{max-width:240px}}

.hero-ticks{margin:6px 0 18px;color:#fff}
.hero-ticks li{padding-left:0;font-weight:600}
.hero-ticks li::before{display:none}

/* revolving gifts in the hero phone */
.phone.cycle{position:relative}
.phone.cycle img{display:block;width:100%;height:auto}
.phone.cycle img+img{position:absolute;inset:0;height:100%}
.phone.cycle img{animation:cycle 12s infinite;opacity:0}
.phone.cycle img:nth-child(1){animation-delay:-.6s}
.phone.cycle img:nth-child(2){animation-delay:3.4s}
.phone.cycle img:nth-child(3){animation-delay:7.4s}
@keyframes cycle{0%{opacity:0}4%{opacity:1}33%{opacity:1}37%{opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.phone.cycle img{animation:none;opacity:1}.phone.cycle img+img{display:none}}