/* Kindtale public site. Design system: ivory / berry / gold, Fraunces + Manrope. No looping motion. */
:root{
  --bg:#FBF7F2; --paper:#FFFFFF; --ivory:#F8F1E7;
  --ink:#24171F; --ink-2:#6B5B63; --ink-3:#8F8188; --line:#EADFD3;
  --berry:#7A1324; --berry-d:#5C0E1B; --blush:#F4E1DE;
  --gold:#B88A44; --gold-l:#F1E3C6;
  --serif:'Fraunces',Georgia,serif; --sans:'Manrope',system-ui,sans-serif; --hand:'Caveat',cursive;
  --bodoni:'Bodoni Moda',Didot,serif; --anton:'Anton',Impact,sans-serif; --grot:'Bricolage Grotesque',system-ui,sans-serif;
  --shadow:0 18px 40px rgba(36,23,31,.10); --shadow-s:0 8px 20px rgba(36,23,31,.08);
  --page:0 22px 44px rgba(36,23,31,.18),0 2px 6px rgba(36,23,31,.10);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.08}
h2{font-size:clamp(32px,4.4vw,52px)}
em.it{font-style:italic;color:var(--berry)}
.kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.lead{color:var(--ink-2);font-size:18px;max-width:600px}
section{padding:104px 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.head .l{display:flex;flex-direction:column;gap:14px;max-width:700px}
:focus-visible{outline:2px solid var(--berry);outline-offset:3px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:15px;padding:15px 26px;border-radius:999px;background:var(--berry);color:#fff;transition:background .2s,transform .2s;white-space:nowrap}
.btn:hover{background:var(--berry-d)}
.btn:active{transform:scale(.98)}
.btn.line{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.btn.sm{padding:10px 18px;font-size:14px}
.arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}

/* Reveal once on scroll (only when JS is on) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* Nav */
nav{position:sticky;top:0;z-index:40;background:rgba(251,247,242,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.logo{display:flex;align-items:center}
.logo img{display:block;height:60px;width:auto}
footer .logo img{height:76px}
@media (max-width:600px){.nav-in{height:66px}.logo img{height:50px}}
.nav-links{display:flex;gap:28px;font-size:15px;font-weight:500;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
@media (max-width:900px){.nav-links{display:none}}

/* Hero: short, so the gifts sit right under it */
.hero{padding:56px 0 8px;text-align:center}
.hero .kicker{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 14px;letter-spacing:.1em}
.hero .kicker i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-l)}
.hero h1{font-size:clamp(42px,6.4vw,84px);margin:22px auto 18px;max-width:1120px}
.hero .lead{margin:0 auto 28px;max-width:640px}
.ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
@media (max-width:600px){
  .hero{padding:26px 0 0}
  .hero .kicker{font-size:10.5px;padding:6px 12px}
  .hero h1{font-size:40px;margin:16px auto 12px}
  .hero .lead{font-size:15px;margin-bottom:20px}
  .ctas{flex-wrap:nowrap;gap:10px}
  .ctas .btn{padding:12px 18px;font-size:14px}
  .ctas .full{display:none}
}

/* Gift shelf */
#gifts{padding:56px 0 96px}
.shelf-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.shelf-head h2{font-size:clamp(28px,3.4vw,40px)}
.shelf-head p{color:var(--ink-2);font-size:15px;margin-top:8px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);transition:all .2s}
.pill:hover{border-color:var(--ink-3);color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pill small{font-size:12px;opacity:.6;margin-left:4px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr);gap:32px 20px}}
@media (max-width:560px){.grid{gap:26px 12px}}
.gift.hide{display:none}
@media (max-width:960px){
  .gift:last-child:not(.hide){grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 20px;align-items:center}
  .gift:last-child .meta{flex-direction:column;align-items:flex-start;gap:10px;margin-top:0}
}
@media (max-width:600px){
  #gifts{padding-top:34px}
  .shelf-head{margin-bottom:22px}
  .pills{flex-wrap:nowrap;overflow-x:auto;margin:0 -24px;padding:2px 24px;scrollbar-width:none}
  .pills::-webkit-scrollbar{display:none}
  .pill{flex:0 0 auto}
}

.tile{position:relative;aspect-ratio:4/5;perspective:1400px;container-type:inline-size}
.flipper{position:absolute;inset:0;display:block;width:100%;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + var(--f,0deg)));transition:transform .75s var(--ease);text-align:left;border-radius:22px}
.gift.tilting .flipper{transition:transform .18s ease-out}
.gift.flipped .flipper{--f:180deg}
.face{position:absolute;inset:0;display:block;border-radius:22px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.front{background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.65),transparent 60%),linear-gradient(165deg,var(--t1),var(--t2))}
.front::after{content:'';position:absolute;inset:0;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(36,23,31,.06);pointer-events:none}
.badge{position:absolute;left:4.5cqw;top:4.5cqw;z-index:5;font-size:max(10px,3.2cqw);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:1.6cqw 3cqw;border-radius:999px;background:rgba(255,255,255,.78);color:var(--ink-2);backdrop-filter:blur(4px)}
.badge.first{background:var(--ink);color:var(--gold-l)}
.turn{position:absolute;right:4.5cqw;bottom:4.5cqw;z-index:5;width:max(28px,9cqw);height:max(28px,9cqw);border-radius:50%;background:rgba(255,255,255,.8);display:grid;place-items:center;color:var(--ink-2);transition:transform .3s var(--ease),background .2s}
.turn svg{width:48%;height:48%}
.flipper:hover .turn{background:#fff;transform:rotate(-30deg)}
.back{transform:rotateY(180deg);background:var(--ink);color:#F3EAEE;padding:8cqw 7.5cqw;display:flex;flex-direction:column;gap:3.6cqw}
.back::before{content:'';position:absolute;inset:3cqw;border:1px solid rgba(241,227,198,.18);border-radius:14px;pointer-events:none}
.b-k{font-size:max(10px,3.3cqw);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.b-t{font-family:var(--serif);font-size:max(19px,8.4cqw);line-height:1.05;color:#fff}
.b-d{font-size:max(12.5px,4.6cqw);line-height:1.45;color:#E3D6DC}
.b-f{display:grid;gap:2.2cqw;margin-top:auto}
.b-f span{display:flex;gap:2.6cqw;align-items:baseline;font-size:max(11.5px,4cqw);line-height:1.35;color:#F3EAEE}
.b-f span::before{content:'';flex:0 0 auto;width:1.6cqw;height:1.6cqw;min-width:5px;min-height:5px;border-radius:50%;background:var(--gold);transform:translateY(-.15em)}
.b-turn{font-size:max(10.5px,3.4cqw);color:#B9A9B1;letter-spacing:.04em}
@media (max-width:560px){
  .back{padding:7cqw 6.5cqw;gap:2.6cqw}
  .b-k{font-size:max(9.5px,3.3cqw)}
  .b-t{font-size:max(16px,8.4cqw)}
  .b-d{font-size:max(12px,4.6cqw);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
  .b-f,.b-turn{display:none}
}

.meta{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-top:16px}
.meta h3{font-size:21px;line-height:1.15}
.meta p{color:var(--ink-2);font-size:14px;margin-top:4px;line-height:1.45}
.fmt-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.want{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:9px 14px;border-radius:999px;border:1.5px solid var(--ink);transition:all .2s;white-space:nowrap}
.want svg{width:14px;height:14px}
.want .ok{display:none}
.want:hover{background:var(--ink);color:#fff}
.want[aria-pressed="true"]{background:var(--berry);border-color:var(--berry);color:#fff}
.want[aria-pressed="true"] .add{display:none}
.want[aria-pressed="true"] .ok{display:inline}
@media (max-width:560px){
  .meta{flex-direction:column;gap:8px;margin-top:10px}
  .meta h3{font-size:16px}
  .meta p{font-size:12.5px}
  .want{padding:7px 11px;font-size:12px}
}

.reelnote{margin-top:56px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;background:var(--ivory);border-radius:28px;padding:28px 32px}
.reelnote .dot{width:54px;height:54px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.reelnote .dot::before{content:'';border-left:14px solid var(--gold-l);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.reelnote h3{font-size:22px;margin-bottom:4px}
.reelnote p{color:var(--ink-2);font-size:15px;max-width:640px}
.reelnote .tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
@media (max-width:700px){.reelnote{grid-template-columns:auto 1fr;padding:22px}.reelnote .tag{grid-column:2}}

/* ---------- The gift objects (all made-up names; no photos) ---------- */
.obj{position:absolute;left:50%;top:50%;display:block;box-shadow:var(--page);transition:transform .6s var(--ease)}
.flipper:hover .obj.lift{transform:translate(-50%,-52%) rotate(var(--r,0deg))}
.obj span,.obj b,.obj i,.obj em{display:block;font-style:normal}

/* 1. Magazine */
.g-mag{--t1:#F6E7E8;--t2:#EBCFD5}
.o-mag{width:56cqw;aspect-ratio:1/1.414;background:#FBF8F3;color:#1E1A17;padding:3.6cqw 4cqw;display:flex!important;flex-direction:column;transform:translate(-50%,-50%) rotate(var(--r,0deg))}
.o-mag.lift{--r:1.5deg}
.o-mag.under{--r:-7deg;background:#1F3A68;color:#fff;transform:translate(-64%,-48%) rotate(-7deg);box-shadow:0 14px 30px rgba(36,23,31,.16)}
.m-top{display:flex!important;justify-content:space-between;font-family:var(--serif);font-size:1.7cqw;letter-spacing:.16em;text-transform:uppercase;border-bottom:.25cqw solid currentColor;padding-bottom:1.2cqw;opacity:.85}
.m-mast{font-family:var(--bodoni);font-weight:600;font-size:15.5cqw;line-height:.84;letter-spacing:-.03em;text-transform:uppercase;margin:2.2cqw 0 1.6cqw}
.m-win{flex:1;border-radius:50% 50% 0 0/34% 34% 0 0;background:radial-gradient(90% 70% at 50% 18%,#C9567F,#8A1C46 62%,#5E0F2E);display:grid!important;place-items:center;margin:0 2.6cqw}
.m-big{font-family:var(--bodoni);font-style:italic!important;font-size:24cqw;line-height:1;color:#FBEFF3;letter-spacing:-.03em}
.m-lines{display:grid!important;grid-template-columns:1fr 1fr;gap:2.4cqw;margin-top:2.4cqw;padding-right:8.4cqw;font-family:var(--serif);font-size:1.55cqw;line-height:1.25}
.m-lines b{font-family:var(--bodoni);font-size:2.6cqw;color:#8A1C46;line-height:1.05;margin-bottom:.4cqw}
.m-bar{position:absolute;right:4cqw;bottom:3.4cqw;width:7cqw;height:2.6cqw;background:repeating-linear-gradient(90deg,#1E1A17 0 .3cqw,transparent .3cqw .55cqw,#1E1A17 .55cqw .7cqw,transparent .7cqw 1.05cqw)}
.o-mag.under .m-mast{color:#F2E7D0}

/* 2. Annual Report */
.g-ar{--t1:#E9EDF3;--t2:#D3DCE8}
.o-ar{width:56cqw;aspect-ratio:1/1.414;background:#F6F2EA;color:#1B2A47;padding:4cqw 4.4cqw;display:flex!important;flex-direction:column;transform:translate(-50%,-50%) rotate(var(--r,0deg))}
.o-ar.lift{--r:-1.2deg}
.a-top{display:flex!important;justify-content:space-between;font-size:1.7cqw;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.a-mark{width:8.4cqw;height:8.4cqw;border-radius:50%;border:.3cqw solid #1B2A47;display:grid!important;place-items:center;font-family:var(--serif);font-size:2.6cqw;font-weight:600;margin-top:4.2cqw;letter-spacing:-.02em}
.a-title{font-family:var(--serif);font-weight:500;font-size:8.6cqw;line-height:.95;letter-spacing:-.03em;margin-top:2.6cqw}
.a-sub{font-family:var(--serif);font-style:italic!important;font-size:2.3cqw;color:#55617A;margin-top:1.4cqw}
.a-chart{margin-top:auto;background:#1B2A47;color:#E8ECF3;padding:2.6cqw 2.8cqw 2cqw;border-radius:.8cqw}
.a-cap{font-size:1.6cqw;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.a-bars{display:flex!important;align-items:flex-end;gap:2.4cqw;height:15cqw;margin-top:1.8cqw;border-bottom:.2cqw solid rgba(232,236,243,.35)}
.a-bars span{flex:1;height:var(--h);background:linear-gradient(180deg,#E4C27F,#B88A44);border-radius:.5cqw .5cqw 0 0;position:relative}
.a-bars em{position:absolute;left:0;right:0;top:-2.6cqw;text-align:center;font-size:1.7cqw;font-weight:700;color:#F1E3C6}
.a-q{display:flex!important;gap:2.4cqw;margin-top:.9cqw}
.a-q span{flex:1;text-align:center;font-size:1.5cqw;opacity:.7}
.a-kp{display:grid!important;grid-template-columns:repeat(3,1fr);gap:1.8cqw;margin-top:2.6cqw;font-size:1.5cqw;line-height:1.25;color:#55617A}
.a-kp span{border-top:.2cqw solid #1B2A47;padding-top:1.2cqw}
.a-kp b{font-family:var(--serif);font-size:4.4cqw;color:#1B2A47;font-weight:500;line-height:1}

/* 3. Encyclopedia page */
.g-enc{--t1:#E7EBDF;--t2:#D1DAC4}
.o-enc{width:58cqw;aspect-ratio:1/1.414;background:#F5F0E4;color:#2B2620;padding:4cqw 4.4cqw;transform:translate(-50%,-50%) rotate(var(--r,0deg));background-image:radial-gradient(rgba(90,70,40,.05) 1px,transparent 1px);background-size:1.2cqw 1.2cqw}
.o-enc.lift{--r:1deg}
.e-head{font-size:1.5cqw;letter-spacing:.22em;text-transform:uppercase;text-align:center;border-top:.2cqw solid #2B2620;border-bottom:.2cqw solid #2B2620;padding:.9cqw 0;font-weight:700}
.e-name{font-family:var(--serif);font-weight:600;font-size:9.4cqw;line-height:1;letter-spacing:-.02em;margin-top:3.4cqw}
.e-pr{font-family:var(--serif);font-size:2.3cqw;color:#6E6152;margin-top:.8cqw}
.e-pr i{display:inline!important;font-style:italic!important}
.e-body{display:grid!important;grid-template-columns:17cqw 1fr;gap:1.4cqw 2.6cqw;margin-top:2.8cqw;font-family:var(--serif);font-size:1.75cqw;line-height:1.35}
.e-cameo{grid-row:span 3;aspect-ratio:3/4;border-radius:50%;border:.35cqw double #8C7A5B;background:repeating-linear-gradient(135deg,#E9E0CC 0 .35cqw,#F5F0E4 .35cqw .8cqw);display:grid!important;place-items:center}
.e-cameo span{font-family:var(--bodoni);font-style:italic!important;font-size:8cqw;color:#7A6748;line-height:1}
.e-def{font-size:2.05cqw;line-height:1.35}
.e-def b,.e-f b{display:inline!important;font-weight:700}
.e-f b{font-size:1.4cqw;letter-spacing:.14em;text-transform:uppercase;margin-right:.6cqw;font-family:var(--sans)}
.e-wide{grid-column:1/-1;border-top:.15cqw solid rgba(43,38,32,.25);padding-top:1.4cqw}

/* 4. Open When */
.g-ow{--t1:#F5ECE0;--t2:#E8D7C0}
.o-env{width:70cqw;aspect-ratio:1.5/1;background:#F7EFE3;transform:translate(-50%,-50%) rotate(var(--r,0deg));overflow:hidden}
.o-env.e2{--r:7deg;background:#E6D3BB;transform:translate(-44%,-70%) rotate(7deg);box-shadow:0 12px 26px rgba(36,23,31,.14)}
.o-env.e1{--r:-2deg;transform:translate(-52%,-38%) rotate(-2deg)}
.o-env.e1.lift{--r:-3deg}
.flipper:hover .o-env.e1{transform:translate(-52%,-40%) rotate(-3deg)}
.env-flap{position:absolute;inset:0 0 auto 0;height:58%;background:linear-gradient(180deg,#EADCC8,#E2D1BA);clip-path:polygon(0 0,100% 0,50% 100%)}
.env-seal{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);width:13cqw;height:13cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#B8456F,#8A1C46 60%,#5E0F2E);box-shadow:0 1cqw 2cqw rgba(0,0,0,.22),inset 0 0 0 1cqw rgba(255,255,255,.12);display:grid!important;place-items:center;font-family:var(--bodoni);font-style:italic!important;font-size:6.4cqw;color:#F7E3EA}
.env-txt{position:absolute;left:0;right:0;bottom:8%;text-align:center;font-family:var(--hand);font-size:6cqw;line-height:1;color:#4A3426}
.env-for{position:absolute;left:5%;top:6%;font-family:var(--serif);font-style:italic!important;font-size:2.6cqw;color:#7A6352}
.o-env.e2 .env-txt{top:9%;bottom:auto;font-size:4.6cqw;color:#6A5240}

/* Phone frame (Memory Jar, Year in Review) */
.o-phone{width:42cqw;aspect-ratio:9/19;background:#151214;border-radius:6.4cqw;padding:1.3cqw;transform:translate(-50%,-50%) rotate(var(--r,0deg))}
.o-phone.lift{--r:-2deg}
.o-phone::before{content:'';position:absolute;left:50%;top:2.6cqw;transform:translateX(-50%);width:11cqw;height:2.6cqw;border-radius:999px;background:#151214;z-index:3}
.ph-screen{position:relative;width:100%;height:100%;border-radius:5.2cqw;overflow:hidden}

/* 5. Memory Jar */
.g-jar{--t1:#F7F0DC;--t2:#EADDB8}
.jar{background:linear-gradient(180deg,#FBF7EE,#F3EBDA);padding:8.4cqw 3.4cqw 4cqw;display:flex!important;flex-direction:column}
.j-h{font-family:var(--serif);font-size:4.6cqw;font-weight:500;line-height:1;color:#2A211A}
.j-s{font-size:1.9cqw;color:#7C6E60;margin-top:.8cqw}
.j-notes{position:relative;flex:1;margin-top:2cqw}
.jn{position:absolute!important;left:50%;width:30cqw;padding:2.4cqw 2.2cqw;font-family:var(--hand);font-size:3.4cqw;line-height:1.05;color:#3A2E25;box-shadow:0 1cqw 2.4cqw rgba(60,40,20,.16)}
.jn1{top:6%;background:#FFF1C4;transform:translateX(-52%) rotate(-5deg)}
.jn2{top:36%;background:#E4EDF6;transform:translateX(-46%) rotate(4deg)}
.jn3{top:64%;background:#F6DDE2;transform:translateX(-52%) rotate(-2deg)}
.jn small{display:block;font-family:var(--sans);font-size:1.5cqw;color:#8A7A6B;margin-top:1cqw;letter-spacing:.04em}
.j-btn{align-self:center;font-size:1.9cqw;font-weight:700;letter-spacing:.06em;color:#fff;background:#2A211A;border-radius:999px;padding:1.4cqw 3.6cqw}

/* 6. Countdown Calendar */
.g-cal{--t1:#F4E1E2;--t2:#E5C4C9}
.o-cal{width:74cqw;aspect-ratio:1.18/1;background:radial-gradient(120% 90% at 30% 0%,#9B2A50,#6A1235 70%);color:#F1E3C6;padding:5cqw 5cqw 4.4cqw;border-radius:1.6cqw;transform:translate(-50%,-50%) rotate(var(--r,0deg))}
.o-cal.lift{--r:-1deg}
.c-h{font-family:var(--serif);font-style:italic!important;font-size:7.2cqw;line-height:1;letter-spacing:-.02em}
.c-s{font-size:2cqw;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-top:1.4cqw}
.c-grid{display:grid!important;grid-template-columns:repeat(4,1fr);gap:1.8cqw;margin-top:3.4cqw;perspective:60cqw}
.d{position:relative;aspect-ratio:1/1.05;border-radius:1cqw}
.d-door{position:absolute!important;inset:0;border-radius:1cqw;background:linear-gradient(160deg,#F8EDE4,#EBD7C8);color:#6A1235;padding:1.4cqw;display:flex!important;flex-direction:column;justify-content:space-between;font-size:1.45cqw;font-weight:700;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 .6cqw 1.2cqw rgba(0,0,0,.22);transform-origin:left center;backface-visibility:hidden}
.d-door b{font-family:var(--bodoni);font-size:6cqw;line-height:.9;letter-spacing:-.02em;font-weight:600;text-transform:none}
.d.open .d-door{transform:rotateY(-76deg)}
.d-in{position:absolute!important;inset:0;border-radius:1cqw;background:#3E0A20;box-shadow:inset 0 .6cqw 1.4cqw rgba(0,0,0,.45);padding:1.4cqw 1.2cqw 1.4cqw 2.6cqw;font-family:var(--hand);font-size:2.4cqw;line-height:1;color:#F7E3D6;display:flex!important;align-items:flex-end}

/* 7. Quick photo gifts: a movie-style poster, typographic */
.g-post{--t1:#E2ECEA;--t2:#C6D9D4}
.o-post{width:54cqw;aspect-ratio:2/3;background:#0F2B2D;color:#F4E9D8;padding:3.4cqw;transform:translate(-50%,-50%) rotate(var(--r,0deg));overflow:hidden;outline:1.2cqw solid #121012;outline-offset:0}
.o-post.lift{--r:1.4deg}
.p-art{position:absolute!important;inset:0}
.p-sun{position:absolute!important;width:40cqw;height:40cqw;border-radius:50%;right:-9cqw;top:9cqw;background:radial-gradient(circle at 40% 40%,#F2B24A,#D9762A 70%)}
.p-band{position:absolute!important;left:-10cqw;right:-10cqw;top:34cqw;height:10cqw;background:#B23A3A;transform:rotate(-12deg);mix-blend-mode:multiply;opacity:.9}
.p-tag{position:relative;font-size:1.6cqw;letter-spacing:.15em;text-transform:uppercase;text-align:center;opacity:.85}
.p-title{position:relative;font-family:var(--anton);font-size:17cqw;line-height:.86;text-transform:uppercase;letter-spacing:.01em;margin-top:22cqw;color:#FFF6E6}
.p-sub{position:relative;font-family:var(--anton);font-size:3.6cqw;letter-spacing:.18em;text-transform:uppercase;color:#F2B24A;margin-top:.6cqw}
.p-quote{position:relative;font-family:var(--serif);font-style:italic!important;font-size:2.2cqw;line-height:1.25;margin-top:2.6cqw;max-width:36cqw}
.p-quote i{font-family:var(--sans);font-size:1.5cqw;letter-spacing:.14em;text-transform:uppercase;margin-top:.6cqw;opacity:.75}
.p-stars{position:relative;font-size:2cqw;letter-spacing:.4em;color:#F2B24A}
.p-bill{position:absolute!important;left:3.4cqw;right:3.4cqw;bottom:6.8cqw;font-family:var(--anton);font-size:1.45cqw;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;text-align:center;opacity:.7}
.p-date{position:absolute!important;left:0;right:0;bottom:3cqw;text-align:center;font-family:var(--anton);font-size:2.4cqw;letter-spacing:.24em;text-transform:uppercase;color:#F2B24A}

/* 8. Year in Review */
.g-yir{--t1:#ECE6F1;--t2:#D7CCE5}
.yir{background:radial-gradient(120% 70% at 80% 10%,#4A2A7A,#1B1230 62%,#120C20);color:#fff;padding:8.6cqw 3.6cqw 3.6cqw;display:flex!important;flex-direction:column}
.y-prog{display:flex!important;gap:.8cqw;position:absolute!important;left:3.2cqw;right:3.2cqw;top:6.2cqw}
.y-prog i{flex:1;height:.55cqw;border-radius:9px;background:rgba(255,255,255,.28)}
.y-prog i.on{background:#fff}
.y-k{font-size:1.8cqw;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#CDBDF0;margin-top:1.6cqw}
.y-big{font-family:var(--grot);font-weight:800;font-size:19cqw;line-height:.9;letter-spacing:-.05em;margin-top:7cqw;color:#F7C463}
.y-u{font-family:var(--grot);font-weight:700;font-size:4.4cqw;line-height:1;margin-top:1cqw}
.y-n{font-size:2.2cqw;color:#D9CFEA;margin-top:2cqw;line-height:1.3}
.y-ph{margin-top:auto;background:rgba(255,255,255,.09);border-radius:2.6cqw;padding:2.4cqw;font-size:1.6cqw;letter-spacing:.1em;text-transform:uppercase;color:#CDBDF0}
.y-ph b{font-family:var(--grot);font-size:3cqw;letter-spacing:-.01em;text-transform:none;color:#fff;margin-top:.6cqw;line-height:1.1}

/* 9. Story Reel */
.g-reel{--t1:#F5E6DA;--t2:#E7CBB6}
.o-reel{width:46cqw;aspect-ratio:9/16;border-radius:3cqw;overflow:hidden;color:#FFF5EA;transform:translate(-50%,-50%) rotate(var(--r,0deg));background:linear-gradient(170deg,#7A5134,#3A2416 62%,#1F130B)}
.o-reel.lift{--r:1.6deg}
.o-reel::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 50% at 82% 12%,rgba(255,170,90,.55),transparent 70%),radial-gradient(60% 40% at 10% 90%,rgba(255,120,60,.25),transparent 70%)}
.o-reel::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:.9cqw .9cqw;box-shadow:inset 0 0 12cqw rgba(0,0,0,.55)}
.r-yr{position:absolute!important;left:4cqw;top:4.6cqw;z-index:2;font-size:1.8cqw;font-weight:700;letter-spacing:.2em;opacity:.85}
.r-t{position:absolute!important;left:4cqw;right:4cqw;top:30%;z-index:2;font-family:var(--serif);font-size:7.6cqw;line-height:.98;letter-spacing:-.02em}
.r-t i{font-style:italic!important;font-size:4.2cqw;opacity:.9;margin-bottom:.8cqw}
.r-play{position:absolute!important;left:50%;top:66%;z-index:2;width:11cqw;height:11cqw;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,245,234,.16);backdrop-filter:blur(3px);box-shadow:inset 0 0 0 .3cqw rgba(255,245,234,.5)}
.r-play::before{content:'';position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-left:3.4cqw solid #FFF5EA;border-top:2.1cqw solid transparent;border-bottom:2.1cqw solid transparent}
.r-bar{position:absolute!important;left:4cqw;right:4cqw;bottom:7cqw;z-index:2;height:.5cqw;border-radius:9px;background:rgba(255,245,234,.3)}
.r-bar span{width:20%;height:100%;border-radius:9px;background:#FFF5EA}
.r-time{position:absolute!important;left:4cqw;right:4cqw;bottom:3.2cqw;z-index:2;display:flex!important;justify-content:space-between;font-size:1.7cqw;font-weight:600;opacity:.85}

/* ---------- Your say: the live demo ---------- */
#yoursay{padding-top:24px}
.demo{background:var(--ivory);border-radius:36px;padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:960px){.demo{grid-template-columns:1fr;padding:36px 22px;gap:36px;border-radius:28px}}
.demo h2{margin:12px 0 14px}
.demo p.sub{color:var(--ink-2);font-size:16px;max-width:470px}
.ctl{margin-top:22px}
.ctl > span{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.seg{display:flex;gap:7px;flex-wrap:wrap}
.seg button{font-size:14px;font-weight:600;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);transition:all .2s}
.seg button:hover{border-color:var(--ink-3);color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.dots{display:flex;gap:10px}
.dots button{width:38px;height:38px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--ivory),0 0 0 4px transparent;transition:box-shadow .2s}
.dots button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ivory),0 0 0 5px var(--ink)}
.surprise{margin-top:24px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.surprise small{font-size:13px;color:var(--ink-3)}
.why-out{margin-top:22px;background:var(--paper);border-radius:16px;padding:16px 18px;font-family:var(--serif);font-size:17px;line-height:1.45;min-height:84px}
.why-out small{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.fp{margin-top:14px;font-size:13px;color:var(--ink-2)}
.stage{display:grid;place-items:center}

.cv{--acc:#8A1C46;--df:var(--bodoni);--tf:var(--serif);--pp:#FBF8F3;--ik:#1E1A17;width:min(100%,380px);aspect-ratio:1/1.414;background:var(--pp);color:var(--ik);box-shadow:var(--page);position:relative;overflow:hidden;padding:7% 7.5%;display:flex;flex-direction:column;container-type:inline-size;transition:background .45s,color .45s}
.cv *{transition:color .45s,background .45s,border-color .45s,opacity .45s}
.cv-top{display:flex;justify-content:space-between;font-family:var(--tf);font-size:3.2cqw;letter-spacing:.14em;text-transform:uppercase;opacity:.8;border-bottom:1px solid currentColor;padding-bottom:2.2cqw}
.mast{font-family:var(--df);line-height:.86;margin:4cqw 0 3cqw;color:var(--mc,var(--ik));letter-spacing:var(--mls,0);text-transform:var(--mtt,uppercase);font-weight:var(--mw,500);font-size:var(--ms,22cqw);font-style:var(--mi,normal);white-space:nowrap}
.win{flex:1;border-radius:var(--wr,50% 50% 0 0/36% 36% 0 0);background:var(--wb,linear-gradient(160deg,color-mix(in srgb,var(--acc) 30%,#fff),var(--acc)));position:relative;display:grid;place-items:center;overflow:hidden;margin:0 var(--wm,6%)}
.big{font-family:var(--df);font-size:var(--bs,38cqw);line-height:1;color:var(--bc,#fff);font-weight:var(--bw,500);font-style:var(--bi,italic);letter-spacing:-.02em}
.lines{display:grid;gap:2.6cqw;margin-top:4.5cqw;font-family:var(--tf);font-size:3.5cqw;line-height:1.3}
.lines b{display:block;font-family:var(--df);font-size:5.4cqw;font-weight:var(--lw,500);color:var(--lc,var(--acc));text-transform:var(--ltt,none);line-height:1.05;font-style:var(--li,normal)}
.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin-top:4.5cqw;font-family:var(--tf);font-size:3cqw;line-height:1.25}
.kp div{border-top:1px solid currentColor;padding-top:2cqw}
.kp b{display:block;font-family:var(--df);font-size:7.4cqw;font-weight:var(--lw,500);color:var(--lc,var(--acc));line-height:1.05}
.cv-ar .mast{--ms:11cqw}
.cv-ar .win{--wr:0;--wm:0}
.cv-ar .big{--bs:30cqw}
.cv-ar .bl{position:absolute;left:5cqw;bottom:4cqw;font-family:var(--tf);font-size:3.4cqw;color:var(--bc,#fff);opacity:.9}
.cv-ow .mast{--ms:10.5cqw;white-space:normal;line-height:1}
.cv-ow .win{--wr:0;--wm:0;background:var(--ob,color-mix(in srgb,var(--acc) 14%,var(--pp)))}
.cv-ow .win::before{content:'';position:absolute;left:0;right:0;top:0;height:56%;background:color-mix(in srgb,var(--acc) 22%,var(--pp));clip-path:polygon(0 0,100% 0,50% 100%)}
.cv-ow .seal{width:24cqw;aspect-ratio:1;border-radius:50%;background:var(--acc);display:grid;place-items:center;position:relative;z-index:1;margin-top:-14%;box-shadow:inset 0 0 0 1.6cqw rgba(255,255,255,.16),0 2cqw 4cqw rgba(0,0,0,.18)}
.cv-ow .seal span{font-family:var(--df);font-size:12cqw;color:#fff;font-style:italic}
.cv-ow .lines b{font-size:4.6cqw}
.cv[data-mood="classic"]{--df:var(--bodoni);--tf:var(--serif);--pp:#FBF8F3;--ik:#1E1A17;--mw:500;--mls:-.035em}
.cv[data-mood="bold"]{--df:var(--anton);--tf:var(--sans);--pp:var(--acc);--ik:#fff;--mw:400;--mc:#fff;--ms:25cqw;--lc:#fff;--ltt:uppercase;--lw:400;--wb:rgba(255,255,255,.14);--wr:0;--wm:0;--bi:normal;--bw:400;--bs:52cqw}
.cv[data-mood="bold"].cv-ar .big{--bs:40cqw}
.cv[data-mood="bold"].cv-ow .seal{background:#fff}
.cv[data-mood="bold"].cv-ow .seal span{color:var(--acc)}
.cv[data-mood="bold"].cv-ow .win{--ob:rgba(255,255,255,.12)}
.cv[data-mood="bold"].cv-ow .win::before{background:rgba(255,255,255,.16)}
.cv[data-mood="warm"]{--df:var(--serif);--tf:var(--serif);--pp:#F2E7D5;--ik:#3B2A1E;--mtt:none;--mi:italic;--mw:400;--ms:19cqw;--mc:var(--acc);--li:italic;--lw:400;--wb:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--acc) 26%,#F7EEDF),color-mix(in srgb,var(--acc) 58%,#5a3a22));--wr:999px 999px 0 0}
.cv[data-mood="warm"]::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:radial-gradient(rgba(80,50,20,.18) 1px,transparent 1px);background-size:4px 4px}
.cv[data-mood="bright"]{--df:var(--grot);--tf:var(--sans);--pp:#FFFFFF;--ik:#16121A;--mtt:none;--mw:800;--mls:-.04em;--ms:21cqw;--lw:700;--wb:var(--acc);--wr:50%;--wm:10%;--bi:normal;--bw:800;--bs:40cqw}
.cv[data-mood="bright"] .win{aspect-ratio:1;flex:0 0 auto;width:72%;align-self:center;margin:0}
.cv[data-mood="bright"].cv-ar .win,.cv[data-mood="bright"].cv-ow .win{border-radius:28px;width:100%;aspect-ratio:auto;flex:1}
.cv[data-mood="minimal"]{--df:var(--sans);--tf:var(--sans);--pp:#F8F7F4;--ik:#2A2A2A;--mtt:lowercase;--mw:300;--mls:.04em;--ms:15cqw;--lw:600;--lc:var(--ik);--wb:color-mix(in srgb,var(--acc) 10%,#F8F7F4);--wr:0;--wm:18%;--bc:var(--acc);--bi:normal;--bw:300;--bs:30cqw}
.cv[data-mood="minimal"] .cv-top{border-bottom:0}
.cv[data-mood="minimal"] .lines b{font-size:4cqw}

/* ---------- How it works ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:28px 24px 26px;position:relative}
.step .n{font-family:var(--serif);font-style:italic;font-size:40px;line-height:1;color:var(--gold)}
.step h3{font-size:22px;margin:18px 0 8px}
.step p{color:var(--ink-2);font-size:15px}
.step .ic{position:absolute;right:22px;top:26px;width:30px;height:30px;color:var(--berry);opacity:.85}

/* ---------- Promises ---------- */
#promises{background:var(--ink);color:#F3EAEE}
#promises .kicker{color:var(--gold)}
#promises h2{color:#fff}
#promises .lead{color:#CDBFC6}
.prom{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(241,227,198,.14);border-radius:24px;overflow:hidden}
@media (max-width:860px){.prom{grid-template-columns:1fr}}
.prom div{background:var(--ink);padding:30px 28px}
.prom h3{font-size:22px;color:#fff;margin-bottom:8px}
.prom p{font-size:15px;color:#CDBFC6}
.prom h3::before{content:'';display:block;width:26px;height:2px;background:var(--gold);margin-bottom:18px}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:20px 4px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;align-items:center;font-family:var(--serif);font-size:21px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:0 0 auto;width:12px;height:12px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details p{color:var(--ink-2);font-size:16px;margin-top:12px;max-width:700px}

/* ---------- Join ---------- */
#join{padding-top:40px}
.joinbox{background:linear-gradient(150deg,#FFFFFF,var(--ivory));border:1px solid var(--line);border-radius:36px;padding:64px;display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start;box-shadow:var(--shadow)}
@media (max-width:960px){.joinbox{grid-template-columns:1fr;padding:36px 22px;gap:28px;border-radius:28px}}
.joinbox h2{margin:12px 0 16px}
.joinbox .lead{font-size:17px}
.perks{margin-top:24px;display:grid;gap:10px;font-size:15px;color:var(--ink-2)}
.perks span{display:flex;gap:10px;align-items:baseline}
.perks span::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--gold);transform:translateY(-2px)}
.form{display:grid;gap:18px}
.field label,.field .lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.field input[type=email],.field select{width:100%;font-size:16px;padding:15px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.field input:focus,.field select:focus{border-color:var(--berry)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{font-size:13.5px;font-weight:600;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);transition:all .2s}
.chips button[aria-pressed="true"]{background:var(--berry);border-color:var(--berry);color:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .btn{width:100%;padding:17px 26px;font-size:16px}
.form .btn[disabled]{opacity:.6;cursor:wait}
.err{min-height:20px;font-size:14px;color:#B0283F;font-weight:600}
.small{font-size:13px;color:var(--ink-3);line-height:1.5}
.small a{text-decoration:underline;text-underline-offset:3px}
.done{display:none;text-align:center;padding:30px 10px}
.done-mark{display:block;width:96px;height:auto;margin:0 auto 18px}
.done h3{font-size:32px;margin-bottom:10px}
.done p{color:var(--ink-2)}
.done .follow{margin-top:14px;font-size:14px}
.ig{margin-top:22px;font-size:15px;color:var(--ink-2)}
.ig a,.done .follow a{color:var(--berry);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.joined .form{display:none}
.joined .done{display:block}

/* Picked-gifts bar (appears after "I want this") */
.picked{position:fixed;left:50%;bottom:18px;z-index:50;transform:translate(-50%,140%);display:flex;align-items:center;gap:16px;background:var(--ink);color:#fff;border-radius:999px;padding:8px 8px 8px 22px;box-shadow:0 14px 34px rgba(36,23,31,.28);font-size:14px;font-weight:600;transition:transform .45s var(--ease);max-width:calc(100% - 24px)}
.picked.show{transform:translate(-50%,0)}
.picked .btn{padding:10px 18px;font-size:14px;background:var(--gold-l);color:var(--ink)}
.picked .btn:hover{background:#fff}

/* Footer */
footer{padding:56px 0 40px;border-top:1px solid var(--line);margin-top:24px}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.foot p{color:var(--ink-2);font-size:14px;margin-top:10px}
.foot nav{position:static;background:none;border:0;backdrop-filter:none;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;font-weight:600;color:var(--ink-2)}
.foot nav a:hover{color:var(--ink)}
.fine{margin-top:28px;font-size:12.5px;color:var(--ink-3)}

/* Simple pages (privacy, 404) */
.doc{max-width:760px;margin:0 auto;padding:72px 24px 96px}
.doc h1{font-size:clamp(38px,5vw,56px);margin:14px 0 18px}
.doc h2{font-size:24px;margin:36px 0 10px}
.doc p,.doc li{color:var(--ink-2);font-size:16.5px;margin-top:10px}
.doc ul{padding-left:20px}
.doc a{color:var(--berry);text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
}