/* Love theme (stillmeanttobe.com). Loaded after vivid.css: same full-width structure, its own world.
   Candlelit evening: plum night, velvet wine, rose, candle gold, champagne, pearl. The gold matches the funnel so
   moving into /start.html feels like the same room. Signature: two orbits that drift together as you scroll. */
html.love{
  --v-night:#1A0F24;--v-night2:#26142F;--v-violet:#6B2445;--v-orchid:#D87A93;--v-apricot:#E8B863;--v-sun:#F2D59A;
  --v-lilac:#FBF4F0;--v-lilac2:#F5E4E0;--v-paper:#FFFDFB;--v-ink:#2A1A20;--v-mute:#7A5C66;--v-line:rgba(42,26,32,.12);
  --v-dawn:linear-gradient(180deg,#1A0F24 0%,#3A1531 40%,#6B2445 70%,#B4566F 100%);
  --l-rose:#D87A93;--l-blush:#F4C7CF;--l-wine:#6B2445;--l-gold:#E8B863;
  --v-display:var(--site-display),'Cormorant Garamond',Georgia,serif;--l-logo:var(--site-logo),'Italiana',serif;
  background:var(--v-lilac)
}
html.love body{background:var(--v-lilac);color:var(--v-ink);font-size:17.5px}
html.love h1,html.love h2,html.love h3{font-weight:400;letter-spacing:-.005em}
html.love h1 em,html.love h2 em{font-style:italic;color:var(--l-rose)}
html.love .lhero h1 em,html.love .lnight h2 em,html.love .lband h2 em,html.love .lmargo h2 em{color:var(--l-blush)}
html.love h2{font-size:clamp(36px,5vw,68px);line-height:1.02}
html.love a{color:var(--l-wine)}
html.love .lk{font:italic 400 20px/1.2 var(--v-display);color:var(--l-gold);margin:0 0 12px;letter-spacing:.01em}
html.love .center{text-align:center}

/* buttons */
html.love .vbtn,html.love .btn{background:linear-gradient(100deg,#E8B863,#F2D59A);color:#2A1C05;box-shadow:0 10px 30px rgba(232,184,99,.28);font-weight:600}
html.love .lghost{display:inline-flex;align-items:center;min-height:52px;padding:14px 26px;border-radius:999px;color:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);font-weight:500}
html.love .lghost:hover{box-shadow:inset 0 0 0 1.5px var(--l-gold);color:var(--v-sun)}
html.love .lpearl .lghost,html.love .band.white .lghost{color:var(--v-ink);box-shadow:inset 0 0 0 1px var(--v-line)}

/* header: luxurious wordmark */
html.love header.vh{background:var(--v-night)}
html.love header.vh.over{background:linear-gradient(180deg,rgba(26,15,36,.7),transparent)}
html.love header.vh.solid{background:rgba(26,15,36,.94)}
html.love .brand .wordmark{font:400 22px/1 var(--l-logo);letter-spacing:.22em;text-transform:uppercase;color:#fff}
html.love .brand .emblem{box-shadow:0 0 0 1px rgba(232,184,99,.6)}
html.love .vh-cta{background:var(--l-gold);color:#2A1C05}
html.love header.vh nav a:hover{border-bottom-color:var(--l-gold)}

/* hero */
html.love .lhero{position:relative;min-height:min(100svh,980px);display:flex;align-items:center;color:#fff;overflow:hidden;background:#140B1C}
html.love .lhero-v,html.love .lhero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html.love .lhero-still{display:none}
html.love .lhero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,11,28,.86) 0%,rgba(20,11,28,.55) 45%,rgba(20,11,28,.1) 80%),linear-gradient(0deg,rgba(20,11,28,.75),transparent 35%);z-index:1}
html.love .lhero-stars{position:absolute;inset:-10% 0;background:url(/img/love/v/stars.webp) center/cover;mix-blend-mode:screen;opacity:.32;z-index:1;pointer-events:none}
html.love .lhero .wrap{position:relative;z-index:3;width:100%;padding-top:130px;padding-bottom:110px}
html.love .lhero h1{font-size:clamp(64px,10.5vw,168px);line-height:.92;font-weight:300;margin:0 0 30px;color:#fff;max-width:9ch}
html.love .lhero h1 em{display:block}
html.love .lhero .lead{color:rgba(255,255,255,.88);max-width:540px;margin:0 0 34px}
html.love .lcta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
html.love .lnote{font-size:14px;color:rgba(255,255,255,.65);margin:16px 0 0}
html.love .lhero .anim{opacity:0;transform:translateY(16px);animation:vrise 1.2s cubic-bezier(.2,.7,.2,1) forwards}
html.love .lhero .anim:nth-child(2){animation-delay:.2s}html.love .lhero .anim:nth-child(3){animation-delay:.45s}html.love .lhero .anim:nth-child(4){animation-delay:.7s}html.love .lhero .anim:nth-child(5){animation-delay:.9s}
html.love .orbits{position:absolute;z-index:2;right:-4vw;top:50%;width:min(56vw,760px);height:auto;transform:translateY(-50%);overflow:visible;pointer-events:none;--meet:0}
html.love .orbits circle{fill:none;stroke:var(--l-gold);stroke-width:1;opacity:.55}
html.love .orbits .o1{transform:translateX(calc(-60px + 60px * var(--meet)));animation:breathe 9s ease-in-out infinite}
html.love .orbits .o2{stroke:var(--l-blush);transform:translateX(calc(60px - 60px * var(--meet)));animation:breathe 9s ease-in-out infinite reverse}
html.love .orbits .p1,html.love .orbits .p2{fill:var(--v-sun);stroke:none;opacity:.95;offset-rotate:0deg}
html.love .orbits .p1{offset-path:circle(170px at 250px 300px);animation:orbit 26s linear infinite}
html.love .orbits .p2{fill:var(--l-blush);offset-path:circle(170px at 350px 300px);animation:orbit 26s linear infinite reverse}
@keyframes orbit{to{offset-distance:100%}}
@keyframes breathe{50%{opacity:.85}}
html.love .lscroll{position:absolute;z-index:3;left:50%;bottom:28px;width:26px;height:42px;border-radius:14px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);transform:translateX(-50%)}
html.love .lscroll span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:scrolly 2s ease-in-out infinite}
@keyframes scrolly{60%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* marquee */
html.love .lmarquee{background:var(--l-wine);color:var(--l-blush);overflow:hidden;padding:18px 0;white-space:nowrap}
html.love .lmq{display:inline-flex;animation:mq 46s linear infinite}
html.love .lmq span{font:italic 400 clamp(22px,2.4vw,32px)/1 var(--v-display);padding-right:20px}
html.love .lmq i{font-style:normal;color:var(--l-gold);margin:0 18px;font-size:.6em;vertical-align:middle}
@keyframes mq{to{transform:translateX(-50%)}}

/* bands */
html.love .band.lpearl{background:var(--v-lilac)}
html.love .band.lnight{background:radial-gradient(90% 70% at 85% 10%,rgba(107,36,69,.55),transparent 60%),var(--v-night);color:#fff}
html.love .lnight .lead{color:rgba(255,255,255,.78)}

/* moments */
html.love .mhead{display:grid;grid-template-columns:1fr 1fr;gap:24px 60px;align-items:end}
html.love .mhead h2{margin:0}
html.love .mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:64px 0 72px}
html.love .mgrid figure{margin:0;position:relative;border-radius:200px 200px 22px 22px;overflow:hidden;aspect-ratio:900/1118;background:var(--v-night);box-shadow:0 30px 60px rgba(42,26,32,.18)}
html.love .mgrid figure:nth-child(even){margin-top:56px}
html.love .mgrid img{width:100%;height:100%;object-fit:cover}
html.love .mgrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:70px 20px 22px;background:linear-gradient(transparent,rgba(26,15,36,.9));color:#fff;font:italic 400 clamp(19px,1.6vw,23px)/1.3 var(--v-display)}
html.love .mturn{font:300 clamp(30px,3.6vw,52px)/1.15 var(--v-display);max-width:22ch;margin:0 auto;text-align:center}
html.love .mturn em{color:var(--l-rose)}

/* how she reads */
html.love .howgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px 70px;align-items:center}
html.love .rings{max-width:440px;justify-self:center}
html.love .rings img{width:100%;border-radius:50%;box-shadow:0 0 120px rgba(216,122,147,.35);animation:float 8s ease-in-out infinite}
@keyframes float{50%{translate:0 -14px}}
html.love .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:64px 0 48px}
html.love .col{padding:34px 30px 30px;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(232,184,99,.22)}
html.love .col svg{width:56px;height:56px;fill:none;stroke:var(--l-gold);stroke-width:1.2;margin:0 0 18px}
html.love .col svg .fill{fill:rgba(216,122,147,.35);stroke:var(--l-blush)}
html.love .col h3{color:#fff;font-size:30px;margin:0 0 10px}
html.love .col p{color:rgba(255,255,255,.75);margin:0}
html.love .steps{list-style:none;counter-reset:s;margin:0 0 48px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
html.love .steps li{counter-increment:s;position:relative;padding:0 0 0 64px;color:rgba(255,255,255,.75)}
html.love .steps li::before{content:counter(s);position:absolute;left:0;top:-8px;font:italic 300 52px/1 var(--v-display);color:var(--l-gold)}
html.love .steps b{display:block;color:#fff;font-weight:600;margin-bottom:4px}

/* questions carousel */
html.love .qhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
html.love .qhead h2{margin:0;max-width:16ch}
html.love .qnav{display:flex;gap:10px}
html.love .qnav button{width:52px;height:52px;border-radius:50%;border:1px solid var(--v-line);background:#fff;font-size:26px;line-height:1;color:var(--v-ink);cursor:pointer}
html.love .qnav button:hover{border-color:var(--l-rose);color:var(--l-rose)}
html.love .qcar{list-style:none;margin:48px 0 0;padding:0 var(--v-gut) 18px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,360px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--v-gut);scrollbar-width:none}
html.love .qcar::-webkit-scrollbar{display:none}
@media(min-width:1240px){html.love .qcar{padding-left:calc((100vw - var(--v-wrap))/2 + var(--v-gut));scroll-padding-left:calc((100vw - var(--v-wrap))/2 + var(--v-gut))}}
html.love .qc{scroll-snap-align:start;min-height:340px;border-radius:28px;padding:34px 30px;display:flex;flex-direction:column;color:#fff;position:relative;overflow:hidden}
html.love .qc.q0{background:linear-gradient(160deg,#6B2445,#3A1531)}
html.love .qc.q1{background:linear-gradient(160deg,#B4566F,#6B2445)}
html.love .qc.q2{background:linear-gradient(160deg,#2E1A3F,#1A0F24)}
html.love .qc::after{content:"";position:absolute;right:-70px;bottom:-70px;width:200px;height:200px;border-radius:50%;border:1px solid rgba(232,184,99,.35);box-shadow:40px 30px 0 -1px transparent,40px 30px 0 0 rgba(244,199,207,.25)}
html.love .qq{font:400 clamp(30px,2.6vw,38px)/1.1 var(--v-display);margin:0 0 16px}
html.love .qa{color:rgba(255,255,255,.8);margin:0 0 auto}
html.love .qc a{color:var(--v-sun);margin-top:26px;font-weight:600;text-decoration:none}
html.love .qc a:hover{text-decoration:underline}

/* Margo */
html.love .lmargo{background:var(--v-dawn);color:#fff;overflow:hidden}
html.love .mggrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,96px);align-items:center}
html.love .mgphoto{margin:0;border-radius:260px 260px 28px 28px;overflow:hidden;box-shadow:0 40px 90px rgba(10,5,15,.5);outline:1px solid rgba(232,184,99,.4);outline-offset:14px}
html.love .mgphoto img{width:100%;height:auto}
html.love .mgname{font:400 clamp(44px,5vw,72px)/1 var(--l-logo);letter-spacing:.06em;color:#fff;margin:0 0 22px}
html.love .lmargo .facts{display:flex;flex-wrap:wrap;gap:10px 30px;list-style:none;padding:0;margin:0 0 26px;color:rgba(255,255,255,.75)}
html.love .lmargo .facts strong{display:block;font:400 34px/1.1 var(--v-display);color:#fff}
html.love .lmargo blockquote{border-left:1px solid var(--l-gold);color:#fff;font:italic 300 clamp(21px,1.9vw,26px)/1.45 var(--v-display);margin:0 0 20px;padding-left:22px}
html.love .lmargo .lead{color:rgba(255,255,255,.85)}
html.love .lmargo .sign{font:italic 400 40px/1 var(--v-display);color:var(--v-sun);margin:8px 0 26px}

/* free reading band */
html.love .lband{position:relative;overflow:hidden;color:#fff;text-align:center;padding:clamp(110px,14vw,190px) 0}
html.love .lband-bg{position:absolute;inset:-18% 0;background-size:cover;background-position:center}
html.love .lband::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 50% 50%,rgba(26,15,36,.55),rgba(26,15,36,.92));z-index:1}
html.love .lband .wrap{position:relative;z-index:2;max-width:820px}
html.love .lband h2{color:#fff;font-weight:300}
html.love .lband .lead{color:rgba(255,255,255,.85);margin:0 auto 32px}

/* cards, chips */
html.love .post{border-radius:24px}
html.love .post .sec{color:var(--l-rose)}
html.love .post h3{font-size:27px}
html.love .chips a:hover{box-shadow:inset 0 0 0 1.5px var(--l-rose)}

/* reveal */
html.love .rv{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
html.love .rv.in{opacity:1;transform:none}
html.love .mgrid figure.rv:nth-child(2){transition-delay:.1s}html.love .mgrid figure.rv:nth-child(3){transition-delay:.2s}html.love .mgrid figure.rv:nth-child(4){transition-delay:.3s}

/* inner pages */
html.love .phero .bg{opacity:.6}
html.love .phero::after{background:linear-gradient(90deg,rgba(26,15,36,.9),rgba(26,15,36,.45) 60%,rgba(26,15,36,.2)),linear-gradient(0deg,rgba(26,15,36,.8),transparent 40%)}
html.love .phero h1{font-weight:300;font-size:clamp(52px,7vw,104px)}
html.love .ahero h1{font-weight:400}
html.love .toc::before{content:"In this letter"}
html.love .fcta.lfcta{background:var(--v-night) url(/img/love/v/letters.webp) center/cover}
html.love .fcta.lfcta::before{background:linear-gradient(90deg,rgba(26,15,36,.94),rgba(26,15,36,.6))}
html.love .fcta.lfcta .vbtn{margin-top:8px}
html.love .vera{background:var(--v-dawn)}
html.love .vera-photo{border-radius:260px 260px 28px 28px}
html.love .box{background-image:radial-gradient(120% 140% at 100% 100%,rgba(216,122,147,.35),transparent 55%),radial-gradient(90% 120% at 0% 0%,rgba(107,36,69,.9),transparent 60%)}

/* footer */
html.love .vf-sky{background:linear-gradient(180deg,var(--v-night) 0%,#3A1531 45%,#6B2445 75%,#B4566F 100%)}
html.love .vf-line{font-weight:300;max-width:16ch}
html.love .vf-sky .vbtn{background:linear-gradient(100deg,#E8B863,#F2D59A);color:#2A1C05}
html.love .vf-h{color:var(--v-sun)}

@media(max-width:960px){
  html.love .mhead,html.love .howgrid,html.love .mggrid{grid-template-columns:1fr}
  html.love .mgrid{grid-template-columns:1fr 1fr}
  html.love .cols3,html.love .steps{grid-template-columns:1fr}
  html.love .orbits{width:90vw;right:-30vw;opacity:.6}
  html.love .mgphoto{max-width:420px}
}
@media(max-width:640px){
  html.love .lhero{align-items:flex-end}
  html.love .lhero::after{background:linear-gradient(180deg,rgba(20,11,28,.4),rgba(20,11,28,.55) 40%,rgba(20,11,28,.92))}
  html.love .lhero h1{font-size:clamp(58px,17vw,84px)}
  html.love .lhero .wrap{padding-bottom:80px}
  html.love .lcta .vbtn,html.love .lcta .lghost{width:100%;justify-content:center}
  html.love .mgrid{gap:12px;margin:40px 0 48px}
  html.love .mgrid figure:nth-child(even){margin-top:28px}
  html.love .mgrid figcaption{font-size:16px;padding:50px 12px 14px}
  html.love .brand .wordmark{font-size:15px;letter-spacing:.14em}
  html.love .qhead{align-items:flex-start;flex-direction:column}
  html.love .qnav{display:none}
  html.love .qcar{grid-auto-columns:82%}
}
@media(prefers-reduced-motion:reduce){
  html.love .lhero-v{display:none}html.love .lhero-still{display:block}
  html.love .lhero .anim,html.love .rv{opacity:1;transform:none}
  html.love .lmq{animation:none}
}
@media(max-width:520px){html.love .vh-cta{display:none}html.love .brand .wordmark{font-size:14px;letter-spacing:.12em;white-space:nowrap;max-width:none}}
html.vivid .vmenu-cta{margin-top:6px;background:var(--v-sun);color:var(--v-night)!important;text-align:center;font-weight:600}