/* Story Made For Them — editorial redesign after Studio Maydit's Mi-VAD case study (studiomaydit.com/work/mi-vad):
   soft/warm/human, oversized serif display type, full-bleed imagery, cream + olive, textured grounds, slow considered motion. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
:root{--ink:#2a2622;--muted:#6f6a63;--cream:#F6F0EA;--sand:#ece2d4;--paper:#fcfaf8;--olive:#5F7A4A;--olive-d:#4c6339;--stone:#DEDBD4;--cocoa:#3C2627;--night:#1f2a44;--terra:#c9765a;--gold:#e8b04a;--line:rgba(60,38,39,.12);
--serif:"Instrument Serif",Georgia,serif;--sans:Inter,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink);-webkit-font-smoothing:antialiased;
background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
.sans,button,input,select,textarea,nav{font-family:var(--sans)}
h1,h2,h3,.display,.price,.logo{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;color:var(--cocoa)}
h1{font-size:clamp(56px,7.4vw,96px);line-height:.95;margin:0 0 28px}
h2{font-size:clamp(42px,5.2vw,72px);line-height:1;margin:0 0 24px}
h3{font-size:clamp(26px,2.4vw,34px);line-height:1.1;margin:0 0 10px}
em,.it{font-style:italic;color:var(--olive)}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.eyebrow{display:inline-flex;gap:10px;align-items:center;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);margin-bottom:22px}
.eyebrow:before{content:"";width:28px;height:1px;background:currentColor}
.lead{font-size:clamp(18px,1.5vw,21px);color:var(--muted);max-width:34em}
/* nav */
nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(20px,4vw,56px);background:rgba(246,240,234,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.wrap>nav{padding-left:0;padding-right:0;background:none;backdrop-filter:none;position:static}
.logo{font-size:30px;text-decoration:none;display:inline-flex;align-items:center;line-height:0}.logo img{height:44px;width:auto;display:block}@media(max-width:640px){.logo img{height:36px}}.logo span{font-style:italic;color:var(--olive)}
.navlinks{display:flex;gap:28px;align-items:center;font-size:14px}.navlinks a:not(.btn){color:var(--ink);text-decoration:none;opacity:.75}.navlinks a:not(.btn):hover{opacity:1}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--olive);color:#fff;border:0;border-radius:999px;padding:17px 30px;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s,background .3s}
.btn:after{content:"→";transition:transform .35s var(--ease)}.btn:hover{background:var(--olive-d);transform:translateY(-3px);box-shadow:0 16px 32px -12px rgba(76,99,57,.55)}.btn:hover:after{transform:translateX(4px)}
.btn.alt{background:transparent;color:var(--cocoa);border:1px solid rgba(60,38,39,.35)}.btn.alt:hover{background:var(--cocoa);color:#fff}
.btn.light{background:var(--paper);color:var(--cocoa)}.btn.sm{padding:11px 20px;font-size:14px}.btn.noarrow:after{display:none}
.tmp{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:rgba(232,176,74,.22);color:#7a5200;padding:4px 10px;border-radius:999px;vertical-align:middle}
/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;color:#fbf6ec;background:var(--night)}
.hero .bg{position:absolute;inset:-6% 0 0 0;background:url(/img/hero.webp) center 60%/cover no-repeat;will-change:transform}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,42,68,.55) 0,rgba(31,42,68,0) 35%,rgba(31,30,30,.15) 60%,rgba(28,22,20,.78) 100%)}
.hero .inner{position:relative;z-index:2;width:100%;padding:0 clamp(20px,4vw,56px) clamp(48px,7vw,96px);display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:end;max-width:1440px;margin:0 auto}
.hero h1{color:#fbf6ec}.hero h1 em{color:#f6d27a}.hero .lead{color:rgba(251,246,236,.82)}.hero .eyebrow{color:#f6d27a}
.hero .meta{font-size:14px;color:rgba(251,246,236,.75);margin-top:18px}
.hero .side{border-left:1px solid rgba(251,246,236,.25);padding-left:28px;font-size:15px;color:rgba(251,246,236,.82)}
.hero .tmp{background:rgba(246,210,122,.2);color:#f6d27a}
.scrollcue{position:absolute;z-index:3;left:50%;bottom:18px;width:1px;height:46px;background:linear-gradient(#f6d27a,transparent);animation:cue 2.2s var(--ease) infinite}@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* sections */
section{padding:clamp(80px,11vw,160px) 0;position:relative}
.band-sand{background:var(--sand)}.band-night{background:var(--night);color:#e9e2f0}.band-night h2,.band-night h3{color:#fbf6ec}.band-night .lead{color:rgba(233,226,240,.75)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.split.rev>.media{order:2}
.media{border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(60,38,39,.45);transform:translateZ(0)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}.media:hover img{transform:scale(1.04)}
.steps{counter-reset:s;display:grid;gap:0;margin-top:36px}.steps li{list-style:none;counter-increment:s;padding:22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:64px 1fr}
.steps li:before{content:"0" counter(s);font-family:var(--serif);font-size:34px;color:var(--olive);line-height:1}.steps b{display:block;font-size:19px;color:var(--cocoa);font-weight:600;margin-bottom:4px}.steps p{margin:0;color:var(--muted)}
.big-quote{font-family:var(--serif);font-size:clamp(34px,4.4vw,64px);line-height:1.05;letter-spacing:-.02em;color:var(--cocoa);max-width:20ch}
/* strip */
.strip{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px clamp(20px,4vw,56px) 34px;scrollbar-width:thin}
.strip figure{flex:0 0 min(78vw,720px);margin:0;scroll-snap-align:center;transition:transform .5s var(--ease)}.strip figure:hover{transform:translateY(-8px) rotate(-.4deg)}
.strip img{border-radius:20px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}.strip figcaption{font-size:14px;margin-top:14px;color:rgba(233,226,240,.7)}
.strip figcaption b{font-family:var(--serif);font-weight:400;font-size:24px;color:#fbf6ec;display:block}
/* occasion cards */
.occ{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.occ a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:360px;padding:28px;border-radius:24px;text-decoration:none;color:var(--cocoa);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s}
.occ a:hover{transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(60,38,39,.5)}
.occ a .ic{position:absolute;top:24px;left:28px;font-size:44px;transition:transform .6s var(--ease)}.occ a:hover .ic{transform:scale(1.15) rotate(-6deg)}
.occ a h3{margin:0 0 6px}.occ a p{margin:0;font-size:15px;color:rgba(60,38,39,.75)}
.occ a:nth-child(1){background:linear-gradient(160deg,#f3e2cf,#e7c9ad)}.occ a:nth-child(2){background:linear-gradient(160deg,#e6ecd9,#c6d4b0)}.occ a:nth-child(3){background:linear-gradient(160deg,#efe0e0,#dcbcb6)}.occ a:nth-child(4){background:linear-gradient(160deg,#dfe3ee,#b9c2da)}
/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:36px;transition:transform .45s var(--ease),box-shadow .45s}
.plans .card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(60,38,39,.45)}
.card.feat{background:var(--olive);color:#f3efe5;border-color:transparent}.card.feat h3,.card.feat .price{color:#fff}.card.feat .btn{background:#fbf6ec;color:var(--cocoa)}.card.feat .tmp{background:rgba(255,255,255,.18);color:#fff}
.price{font-size:76px;line-height:1;margin:16px 0 6px}
/* testimonial */
.testi{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0;display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:center}
.testi .q{font-family:var(--serif);font-size:clamp(30px,3.4vw,48px);line-height:1.1;color:var(--cocoa)}
.example{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:1px dashed var(--terra);color:var(--terra);padding:5px 10px;border-radius:6px}
/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}
.faq details{border-top:1px solid var(--line);padding:26px 0}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;font-family:var(--serif);font-size:clamp(24px,2.2vw,32px);color:var(--cocoa);display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";font-family:var(--sans);font-weight:300;transition:transform .4s var(--ease)}.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{color:var(--muted);max-width:40em;margin:14px 0 0;animation:fu .5s var(--ease)}@keyframes fu{from{opacity:0;transform:translateY(-6px)}}
/* closing */
.closing{position:relative;overflow:hidden;border-radius:36px;margin:0 clamp(12px,2vw,28px);min-height:620px;display:flex;align-items:flex-end;color:#fbf6ec}
.closing img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.closing:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(42,30,26,.7))}
.closing .inner{position:relative;z-index:2;padding:clamp(28px,5vw,72px)}.closing h2{color:#fbf6ec}
footer{padding:56px 0 40px;color:var(--muted);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px}
/* app pages (create / checkout / thanks / author) */
.page{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 70px)}
.page .art{position:sticky;top:70px;height:calc(100vh - 70px);overflow:hidden}
.page .art img{width:100%;height:100%;object-fit:cover}.page .art .cap{position:absolute;left:32px;bottom:32px;right:32px;color:#fbf6ec;font-family:var(--serif);font-size:32px;line-height:1.1;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.page .body{padding:clamp(40px,6vw,96px) clamp(20px,5vw,80px)}
.page h1{font-size:clamp(48px,5.4vw,76px)}
form .row{margin-bottom:22px}label{display:block;font-weight:500;font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px;color:var(--cocoa)}
input,select,textarea{width:100%;padding:16px 18px;border:1px solid rgba(60,38,39,.18);border-radius:16px;font-size:17px;background:rgba(255,255,255,.75);transition:border-color .25s,box-shadow .25s,background .25s;font-family:var(--sans);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--olive);background:#fff;box-shadow:0 0 0 5px rgba(95,122,74,.14)}
.sum{width:100%;border-collapse:collapse;font-size:16px}.sum td{padding:16px 0;border-bottom:1px solid var(--line)}.sum tr:last-child td{border-bottom:0;font-size:20px}
.trust{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:22px}
.modal{position:fixed;inset:0;z-index:50;background:rgba(31,26,24,.5);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}
.modal.on{display:flex;animation:fi .35s}.modal .card{max-width:480px;background:var(--paper);animation:pop .5s var(--ease)}@keyframes fi{from{opacity:0}}@keyframes pop{from{transform:translateY(20px) scale(.97);opacity:0}}
.narrow{max-width:640px;margin:0 auto}
/* motion */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
.hero .inner>*{animation:rise 1.4s var(--ease) both}.hero .inner>*:nth-child(2){animation-delay:.25s}@keyframes rise{from{opacity:0;transform:translateY(40px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
@media(max-width:900px){.hero .inner,.split,.faq,.testi,.page{grid-template-columns:1fr}.split.rev>.media{order:0}.occ{grid-template-columns:1fr 1fr}.plans{grid-template-columns:1fr}
.occ a{min-height:240px}.hero{min-height:92vh}.hero .side{border-left:0;padding-left:0;border-top:1px solid rgba(251,246,236,.25);padding-top:18px}
.page .art{position:relative;top:0;height:300px}.navlinks a:not(.btn){display:none}.closing{min-height:480px}}
@media(max-width:520px){.occ{grid-template-columns:1fr}}
.static .hero{min-height:900px}.static .page .art{height:900px}@media(max-width:900px){.static .hero{min-height:780px}.static .page .art{height:300px}}
/* --- painterly art tuning --- */
.hero .bg{inset:-6% 0 0 0;left:0;background-position:72% 40%;background-size:cover}
.hero:after{background:linear-gradient(90deg,rgba(14,20,40,.92) 0,rgba(14,20,40,.7) 28%,rgba(14,20,40,.2) 50%,rgba(14,20,40,0) 62%),linear-gradient(180deg,rgba(14,20,40,0) 60%,rgba(14,18,30,.75) 100%)}
.hero .inner{grid-template-columns:minmax(0,640px) 1fr}.hero .side{max-width:340px;justify-self:end}
.media{background:#2a2622}.media img{aspect-ratio:16/9}
/* spreads as real books */
.strip{gap:44px;padding-top:30px;padding-bottom:60px;perspective:1600px}
.strip figure{flex:0 0 min(84vw,820px)}
.strip .bk{position:relative;border-radius:6px 6px 8px 8px;padding:10px;background:linear-gradient(#4c6339,#3d5230);box-shadow:0 40px 70px -30px rgba(0,0,0,.75),0 6px 0 #33452a;transform:rotateX(8deg);transition:transform .7s var(--ease)}
.strip figure:hover .bk{transform:rotateX(0) translateY(-6px)}.strip figure:hover{transform:none}
.strip .bk img{border-radius:3px;box-shadow:none;aspect-ratio:16/9;object-fit:cover}
.strip .bk:after{content:"";position:absolute;top:10px;bottom:10px;left:50%;width:70px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(40,25,10,.28) 45%,rgba(255,250,235,.18) 52%,transparent);pointer-events:none}
.strip .bk:before{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:6px;background:repeating-linear-gradient(90deg,#f3eadb 0 2px,#e2d4bb 2px 3px);border-radius:0 0 3px 3px}
@media(max-width:900px){
.hero{display:block;min-height:0;background:#0e1428}.hero .bg{position:relative;inset:auto;height:min(92vw,440px);background-position:66% 30%;transform:none!important}
.hero:after{display:none}.hero .bg:after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,#0e1428)}
.hero .inner{grid-template-columns:1fr;padding-top:8px}.hero .side{justify-self:start}.scrollcue{display:none}
.static .hero{min-height:0}}

/* legal / policy pages */
.legal{max-width:720px;margin:0 auto;padding:clamp(48px,8vw,96px) clamp(20px,4vw,56px) clamp(64px,10vw,120px)}
.legal h1{font-size:clamp(42px,5vw,64px);margin-bottom:12px}
.legal .note{background:rgba(232,176,74,.16);border:1px dashed rgba(122,82,0,.35);color:#7a5200;padding:14px 18px;border-radius:14px;font-size:14px;margin:24px 0 36px}
.legal h2{font-size:clamp(26px,2.6vw,34px);margin:36px 0 12px}
.legal p,.legal li{color:var(--muted);max-width:40em}
.legal ul{padding-left:1.2em;margin:0 0 16px}
.legal .ph{border-left:3px solid var(--line);padding:8px 0 8px 16px;margin:12px 0;color:var(--muted);font-size:15px;font-style:italic}
footer .links{display:flex;flex-wrap:wrap;gap:14px 20px}
footer .links a{color:var(--muted);text-decoration:none}
footer .links a:hover{color:var(--cocoa);text-decoration:underline}
.badge{display:inline-block;background:rgba(232,176,74,.18);color:#7a5200;padding:10px 16px;border-radius:14px;font-family:var(--sans);font-size:14px;margin:8px 0 6px;max-width:100%}
.deliv{color:var(--muted);font-family:var(--sans);font-size:14px;margin:6px 0 24px}
.guar{margin-top:48px;padding:18px 22px;border:1px solid var(--line);border-radius:16px;font-family:var(--sans);font-size:15px;max-width:44em}
.founder{max-width:720px}.founder p{color:var(--muted)}.founder .sig{font-style:italic;color:inherit}
img{max-width:100%}