/* Little Tailor Books (ltb-paths). Crayon Box palette, cream-paper atelier. */
:root{
--ink:#28263A; --ink-soft:#5A5770; --coral:#FF6B5E; --coral-deep:#E4544A;
--teal:#18BCA6; --sun:#FFC838; --cream:#FFFDF6; --paper:#FFF8EA;
--night:#221F33; --night-2:#2B2841; --gold:#F6C453;
--rad:18px; --shadow:0 10px 30px rgba(40,38,58,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:'Nunito',sans-serif;color:var(--ink);background:var(--cream);
font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* s15: height:auto is NOT optional here. Adding width/height attributes (to stop layout shift)
gives every image a SPECIFIED height, which beats CSS aspect-ratio — the covers rendered as
tall strips until this line existed. Rules that genuinely want a fixed height (.pol-img img,
.page-art img use height:100%) are more specific and still win. */
img{max-width:100%;display:block;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:'Fredoka',sans-serif;line-height:1.14;font-weight:600}
.center{text-align:center}
.muted{color:var(--ink-soft);font-weight:400}
a{color:var(--coral-deep)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
/* ---------------- header ---------------- */
/* s22 navigation. Desktop shows a row; phones show a burger + full-screen panel. */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
border:0;background:none;cursor:pointer;padding:0;flex:0 0 auto}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;
transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav-desk{display:flex;align-items:center;gap:22px;margin-left:auto;margin-right:18px}
.nav-desk a{font-weight:800;font-size:.9rem;color:var(--ink);text-decoration:none;
border-bottom:2px solid transparent;padding-bottom:2px;white-space:nowrap}
.nav-desk a:hover,.nav-desk a:focus-visible{border-bottom-color:var(--teal)}
.navscrim{position:fixed;inset:0;z-index:55;background:rgba(24,38,58,.35);
backdrop-filter:blur(2px);border:0;padding:0;cursor:pointer}
.navscrim[hidden]{display:none}
.navpanel{position:fixed;top:0;left:0;bottom:0;z-index:60;width:min(78vw,320px);
background:rgba(255,253,246,.94);backdrop-filter:blur(10px);
box-shadow:0 0 40px rgba(24,38,58,.22);
padding:78px 22px 28px;display:flex;flex-direction:column;overflow-y:auto}
.navpanel[hidden]{display:none}
.navpanel nav{display:flex;flex-direction:column}
.navpanel nav a{font-family:'Fredoka',sans-serif;font-size:1.35rem;font-weight:600;color:var(--ink);
text-decoration:none;padding:18px 2px;border-bottom:1px solid rgba(24,38,58,.12);min-height:44px}
.navcta{margin-top:26px;text-align:center;width:100%}
body.nav-open{overflow:hidden}
@media(max-width:899px){ .burger{display:flex} .nav-desk{display:none} }
.head{position:sticky;top:0;z-index:40;background:rgba(255,253,246,.92);backdrop-filter:blur(8px);
border-bottom:2px dashed rgba(24,188,166,.35)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;gap:10px}
.logo{display:flex;align-items:center;gap:8px;font-family:'Fredoka',sans-serif;font-size:1.15rem;
color:var(--ink);text-decoration:none}
.logo svg{width:26px;height:26px}
.logo b{color:var(--coral)}
.head-right{display:flex;align-items:center;gap:14px}
.head-back{font-weight:800;font-size:.85rem;text-decoration:none;white-space:nowrap}
.head-pill{font-size:.78rem;font-weight:800;background:var(--ink);color:var(--cream);
padding:6px 12px;border-radius:999px;letter-spacing:.02em;white-space:nowrap}
/* ---------------- hero ---------------- */
.hero{position:relative;padding:34px 0 54px;overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px 44px;align-items:start}
.hero-copy{grid-column:1}
.hero-book{grid-column:2;grid-row:1 / span 2;position:relative}
.ticket{grid-column:1}
.kicker{font-family:'Fredoka',sans-serif;font-weight:600;color:var(--teal);
text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;margin-bottom:12px}
.count-pill{display:inline-block;background:var(--sun);color:var(--ink);border-radius:999px;
padding:7px 14px;letter-spacing:.05em;box-shadow:var(--shadow);transform:rotate(-1.2deg)}
h1{font-size:clamp(1.9rem,4.6vw,3.1rem);margin-bottom:14px}
h1 em{font-style:normal;color:var(--coral);position:relative;white-space:nowrap}
h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:8px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M2 7 Q 30 1, 60 6 T 118 4' fill='none' stroke='%23FFC838' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
h1 .gold-name{font-style:normal;color:var(--coral)}
.lead{font-size:1.06rem;color:var(--ink-soft);max-width:56ch}
.hero-ticks{list-style:none;margin:18px 0 4px;display:grid;gap:8px}
.hero-ticks li{display:flex;gap:9px;align-items:baseline;font-weight:700;font-size:.95rem}
.hero-ticks svg{width:14px;height:14px;color:var(--sun);flex:none;transform:translateY(2px)}
.cross-link{margin-top:14px;font-size:.9rem;font-weight:700;color:var(--ink-soft)}
.doodle{position:absolute;pointer-events:none;opacity:.55}
.d1{top:8%;right:-40px;width:190px;height:110px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 110'%3E%3Cpath d='M10 90 Q 60 10, 110 60 T 185 30' fill='none' stroke='%2318BCA6' stroke-width='9' stroke-linecap='round' opacity='.28'/%3E%3C/svg%3E") no-repeat}
.d2{bottom:4%;left:-50px;width:220px;height:120px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 120'%3E%3Cpath d='M15 30 Q 70 110, 130 55 T 210 80' fill='none' stroke='%23FF6B5E' stroke-width='9' stroke-linecap='round' opacity='.2'/%3E%3C/svg%3E") no-repeat}
/* the living book */
.cover-card{position:relative;border-radius:12px 22px 22px 12px;overflow:hidden;background:var(--night);
box-shadow:0 24px 50px rgba(40,38,58,.28), inset 4px 0 0 rgba(255,255,255,.12);
transform:rotate(1.4deg);max-width:420px;margin:0 auto}
.cover-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.cover-title{position:absolute;top:0;left:0;right:0;padding:18px 20px 40px;
background:linear-gradient(180deg,rgba(34,31,51,.88),rgba(34,31,51,.55) 60%,transparent);
font-family:'Fredoka',sans-serif;font-weight:600;color:var(--cream);
font-size:clamp(1.15rem,2.4vw,1.55rem);line-height:1.2;text-align:center}
.cover-name{color:var(--sun);display:inline-block}
.cover-name-full{color:var(--cream)}
.cover-name.pop{animation:pop .28s ease}
@keyframes pop{40%{transform:scale(1.18) rotate(-2deg)}}
.cover-foot{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:26px 16px 12px;
background:linear-gradient(0deg,rgba(34,31,51,.85),transparent);color:var(--cream);
font-family:'Lora',serif;font-style:italic;font-size:.92rem}
.painted-into{position:absolute;right:130px;bottom:-52px;z-index:3;color:var(--coral);
display:flex;flex-direction:column;align-items:center;gap:2px;transform:rotate(6deg);pointer-events:none}
.painted-into svg{width:60px;height:26px;transform:scaleX(-1) rotate(8deg)}
.pi-label{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.76rem;background:var(--sun);
color:var(--ink);padding:3px 10px;border-radius:999px;transform:rotate(-3deg);box-shadow:var(--shadow);
white-space:nowrap}
.polaroid{position:absolute;right:-16px;bottom:-42px;width:148px;background:#fff;padding:8px 8px 9px;
border-radius:6px;box-shadow:0 14px 30px rgba(40,38,58,.25);transform:rotate(6deg);z-index:2}
.polaroid::before{content:"";position:absolute;width:58px;height:20px;top:-10px;left:50%;
margin-left:-29px;transform:rotate(-3deg);background:rgba(255,200,56,.75);border-radius:2px;
box-shadow:0 2px 5px rgba(40,38,58,.15)}
.pol-img{aspect-ratio:1/1;overflow:hidden;border-radius:3px;background:var(--paper)}
.pol-img img{width:100%;height:100%;object-fit:cover;object-position:center top}
.polaroid figcaption{font-size:.66rem;text-align:center;padding-top:6px;color:var(--ink-soft);
font-family:'Lora',serif;font-style:italic;line-height:1.3}
.polaroid.fresh{animation:drop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes drop{0%{transform:rotate(12deg) translateY(-30px) scale(1.08);opacity:0}
100%{transform:rotate(6deg) translateY(0) scale(1);opacity:1}}
.art-note{position:absolute;left:10px;top:10px;z-index:4;max-width:78%;
font-family:'Fredoka',sans-serif;font-weight:600;font-size:.78rem;line-height:1.35;
background:var(--cream);color:var(--ink);border:2px solid var(--coral);
padding:6px 12px;border-radius:12px 12px 12px 2px;box-shadow:var(--shadow);
transform:rotate(-2deg)}
#cover-note{top:auto;bottom:54px}
.pron-note{font-size:.8rem;color:var(--ink-soft);font-weight:700;margin-top:7px;line-height:1.45}
.f-hint{font-size:.82rem;color:var(--ink-soft);line-height:1.5;margin-top:8px}
/* flip-through button — chunky crayon style, all book pages (owner 2026-07-22) */
.flip-btn{display:inline-block;margin:22px 0 0 5%;font-family:'Fredoka',sans-serif;font-weight:600;
font-size:1.02rem;color:var(--ink);text-decoration:none;background:var(--sun);
border:2.5px solid var(--ink);border-radius:999px;padding:13px 26px;
outline:2px dashed rgba(24,188,166,.65);outline-offset:-7px;transform:rotate(-1.5deg);
box-shadow:4px 4px 0 var(--ink), 0 12px 26px rgba(255,200,56,.4);
transition:transform .15s,box-shadow .15s}
.flip-btn:hover{transform:rotate(-1.5deg) translate(2px,2px);box-shadow:2px 2px 0 var(--ink),0 8px 18px rgba(255,200,56,.35)}
.how-cta{margin-top:30px}
.how-cta .cta{width:auto;padding:15px 34px}
/* ---------------- the tailor's ticket ---------------- */
.ticket{background:#fff;border-radius:var(--rad);box-shadow:var(--shadow);
border:2px solid rgba(40,38,58,.07);position:relative;margin-top:26px}
.ticket::before{content:"";position:absolute;inset:8px;border:2px dashed rgba(24,188,166,.4);
border-radius:12px;pointer-events:none}
.ticket-inner{padding:26px 26px 22px;position:relative}
.stitches{display:flex;align-items:center;gap:10px;margin-bottom:18px;position:relative;flex-wrap:wrap}
.thread{position:absolute;left:4px;right:auto;top:9px;height:2px;width:96px;
border-top:2px dashed rgba(24,188,166,.5)}
.knot{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--teal);background:#fff;
position:relative;z-index:1;transition:background .25s,transform .25s}
.knot.tied{background:var(--teal);transform:scale(1.15);
box-shadow:0 0 0 4px rgba(24,188,166,.18)}
.stitch-note{font-size:.8rem;color:var(--ink-soft);font-style:normal;margin-left:6px;font-weight:700}
.f-label{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.98rem;margin:16px 0 7px;display:block}
.f-label.small{font-size:.88rem}
.f-input{width:100%;border:2px solid rgba(40,38,58,.15);border-radius:12px;padding:13px 15px;
font:inherit;font-weight:700;background:var(--cream);transition:border-color .2s,box-shadow .2s}
.f-input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(24,188,166,.15)}
#f-name{font-family:'Fredoka',sans-serif;font-size:1.15rem}
.seg{display:flex;gap:8px}
.seg-btn{flex:1;border:2px solid rgba(40,38,58,.15);background:var(--cream);border-radius:12px;
padding:10px 8px;font:inherit;font-weight:800;cursor:pointer;transition:all .18s;color:var(--ink)}
.seg-btn small{display:block;font-size:.72rem;font-weight:600;color:var(--ink-soft)}
.seg-btn.sel{border-color:var(--coral);background:#FFF1EF;box-shadow:0 0 0 3px rgba(255,107,94,.15)}
.drop{border:2.5px dashed rgba(24,188,166,.55);border-radius:14px;background:var(--paper);
text-align:center;cursor:pointer;transition:all .2s;overflow:hidden}
.drop:hover,.drop.drag{border-color:var(--coral);background:#FFF6F0;transform:scale(1.01)}
.drop-idle{padding:20px 14px}
.drop-idle strong{display:block;font-size:1rem}
.drop-idle small{color:var(--ink-soft);line-height:1.5;display:block;margin-top:4px}
.drop-star svg{width:26px;height:26px;color:var(--sun)}
.drop.has-photo{border-style:solid;border-color:var(--teal);padding:10px;display:flex;gap:12px;
align-items:center;text-align:left}
.drop.has-photo img{width:64px;height:64px;object-fit:cover;border-radius:10px;flex:none}
.drop.has-photo p{font-size:.85rem;font-weight:700}
.drop.has-photo small{color:var(--teal);font-weight:800}
.dedic{margin-top:14px;font-size:.9rem}
.dedic summary{cursor:pointer;font-weight:800;color:var(--ink-soft)}
.dedic textarea{width:100%;margin-top:8px;border:2px solid rgba(40,38,58,.15);border-radius:12px;
padding:11px 13px;font:inherit;min-height:74px;background:var(--cream)}
.cta{display:inline-block;width:100%;margin-top:18px;border:none;cursor:pointer;text-align:center;
background:var(--coral);color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;
font-size:1.22rem;padding:16px 22px;border-radius:999px;text-decoration:none;
box-shadow:0 8px 0 var(--coral-deep), 0 18px 30px rgba(255,107,94,.35);
transition:transform .15s,box-shadow .15s;position:relative}
.cta:hover{transform:translateY(2px);box-shadow:0 6px 0 var(--coral-deep),0 12px 22px rgba(255,107,94,.3)}
.cta:active{transform:translateY(6px);box-shadow:0 2px 0 var(--coral-deep)}
.cta .cta-sub{display:block;font-family:'Nunito',sans-serif;font-size:.78rem;font-weight:800;
opacity:.92;letter-spacing:.04em;margin-top:2px}
.cta[disabled]{opacity:.7;cursor:wait}
.home-cta{width:auto;padding:15px 34px}
.form-msg{min-height:1.2em;font-weight:800;font-size:.88rem;color:var(--coral-deep);margin-top:10px;text-align:center}
.form-msg.ok{color:var(--teal)}
.ticket-promise{font-size:.83rem;color:var(--ink-soft);margin-top:12px;text-align:center;line-height:1.55}
.ticket-inner.done{text-align:center;padding:44px 30px}
.done-star svg{width:44px;height:44px;color:var(--sun);animation:spin-in .6s ease}
@keyframes spin-in{from{transform:rotate(-160deg) scale(.3);opacity:0}}
.ticket-inner.done h2{margin:10px 0 8px;font-size:1.5rem}
.done-ref{font-size:.9rem;color:var(--ink-soft);margin-bottom:10px}
.done-ref b{color:var(--ink);letter-spacing:.06em}
#done-msg{font-size:.95rem;line-height:1.6}
#done-msg a{font-weight:800;word-break:break-all}
/* ---------------- trustbar ---------------- */
.trustbar{background:var(--ink);color:var(--cream);padding:12px 0}
.trustbar .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center}
.trustbar span{display:flex;gap:7px;align-items:center;font-size:.82rem;font-weight:800;opacity:.95}
.trustbar svg{width:12px;height:12px;color:var(--sun)}
/* ---------------- reader (night section) ---------------- */
.night{background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%);color:var(--cream)}
.reader-sec{padding:64px 0 70px}
.sec-head{max-width:64ch;margin:0 auto 30px;text-align:center}
.sec-head h2{font-size:clamp(1.5rem,3.4vw,2.3rem)}
.sec-head .lead{margin-top:10px;color:inherit;opacity:.85;font-size:1rem}
.gold-k{color:var(--gold)}
.their-name{color:var(--gold);font-family:'Fredoka',sans-serif}
.reader{max-width:960px;margin:0 auto}
.spread{display:grid;grid-template-columns:1.15fr .85fr;background:#171526;border-radius:14px;
overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4);border:1px solid rgba(246,196,83,.25)}
.page-art{position:relative;background:#000}
.page-art img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.page-text{background:var(--cream);color:var(--ink);display:flex;flex-direction:column;
justify-content:center;padding:34px 36px;position:relative}
.verse{font-family:'Lora',serif;font-size:clamp(.95rem,1.6vw,1.12rem);line-height:1.75;white-space:pre-line}
.verse .nm{color:var(--coral-deep);font-weight:600}
.folio{position:absolute;bottom:12px;right:18px;font-family:'Fredoka',sans-serif;font-size:.8rem;
color:var(--ink-soft)}
.rd-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
border:none;background:rgba(255,253,246,.92);color:var(--ink);font-size:1.6rem;line-height:1;
cursor:pointer;box-shadow:var(--shadow);transition:transform .15s;display:flex;align-items:center;justify-content:center}
.rd-nav:hover{transform:translateY(-50%) scale(1.1)}
.rd-prev{left:12px}.rd-next{right:12px}
.rd-dots{display:flex;gap:7px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.rd-dots button{width:10px;height:10px;border-radius:50%;border:none;cursor:pointer;
background:rgba(255,253,246,.3);transition:all .2s;padding:0}
.rd-dots button.on{background:var(--gold);transform:scale(1.35)}
.rd-hint{text-align:center;font-size:.8rem;opacity:.6;margin-top:10px}
.reader .end-cta{font-family:'Fredoka',sans-serif;font-size:1.25rem;line-height:1.45;text-align:center}
.ghost-cta{width:auto;margin-top:30px;background:transparent;color:var(--cream);
border:2.5px solid var(--gold);box-shadow:none;font-size:1.05rem;padding:13px 26px}
.ghost-cta:hover{background:rgba(246,196,83,.12);transform:none;box-shadow:none}
.ghost-cta .cta-sub{display:none}
/* ---------------- catalogue (home) ---------------- */
.home-hero .hero-grid{align-items:center}
.home-book{padding-bottom:56px} /* room for the hanging polaroid + arrow */
.peek{position:absolute;width:46%;border-radius:12px;box-shadow:0 16px 34px rgba(40,38,58,.28);opacity:.9}
.peek-1{left:-6%;top:-4%;transform:rotate(-9deg)}
.peek-2{right:-4%;top:4%;transform:rotate(10deg)}
.home-book .cover-card{position:relative;z-index:1}
.cat-sec{padding:64px 0 60px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:22px;margin-top:8px}
.story-card{position:relative;background:#fff;border-radius:16px;box-shadow:var(--shadow);
overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;
transition:transform .18s,box-shadow .18s}
.story-card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 18px 40px rgba(40,38,58,.18)}
.sc-art img{aspect-ratio:1/1;object-fit:cover;width:100%}
.sc-body{padding:15px 17px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.sc-title{font-size:1.08rem;line-height:1.25}
.sc-chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:.7rem;font-weight:800;background:var(--paper);border:1.5px solid rgba(24,188,166,.4);
color:var(--ink-soft);border-radius:999px;padding:2px 9px}
.sc-blurb{font-size:.86rem;color:var(--ink-soft);line-height:1.5}
.sc-cta{margin-top:auto;font-weight:800;color:var(--coral-deep);font-size:.9rem}
.flagship{outline:3px solid var(--sun)}
.flag-tag{position:absolute;top:10px;left:10px;z-index:2;background:var(--sun);color:var(--ink);
font-family:'Fredoka',sans-serif;font-weight:600;font-size:.75rem;padding:3px 11px;
border-radius:999px;box-shadow:var(--shadow);transform:rotate(-2deg)}
.flag-tag.xmas{background:var(--coral);color:#fff}
.purpose-sec{padding:60px 0 66px}
.p-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto}
.p-card{background:rgba(255,253,246,.06);border:1px solid rgba(246,196,83,.3);border-radius:14px;
overflow:hidden;padding-bottom:16px}
.p-card img{aspect-ratio:1/1;object-fit:cover;width:100%}
.p-card h3{font-size:1rem;padding:12px 16px 4px}
.p-card p{font-size:.85rem;opacity:.8;padding:0 16px;font-style:italic}
.bespoke-small{opacity:.7;font-size:.8rem;display:inline-block;margin-top:10px}
a.p-link{text-decoration:none;color:inherit;display:block;transition:transform .18s}
a.p-link:hover{transform:translateY(-4px)}
a.p-link .sc-cta{display:block;padding:8px 16px 0;font-size:.85rem}
.f-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.f-2col{grid-template-columns:1fr}}
textarea.f-input{resize:vertical;font-family:'Nunito',sans-serif}
/* ---------------- how / why / promise / faq / final ---------------- */
.how{padding:64px 0 30px}
.how .sec-head{margin-bottom:26px}
.steps{list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1020px;margin:0 auto}
.steps li{counter-increment:st;background:#fff;border-radius:var(--rad);padding:26px 22px 22px;
box-shadow:var(--shadow);position:relative;font-size:.93rem;color:var(--ink-soft);line-height:1.6}
.steps li::before{content:counter(st);position:absolute;top:-16px;left:20px;width:34px;height:34px;
border-radius:50%;background:var(--sun);color:var(--ink);font-family:'Fredoka',sans-serif;
font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.steps b{display:block;font-family:'Fredoka',sans-serif;font-weight:600;color:var(--ink);
font-size:1.06rem;margin-bottom:6px}
.step-time{display:inline-block;background:rgba(24,188,166,.14);color:#0E8A79;border-radius:999px;
font-size:.7rem;font-weight:800;padding:2px 9px;margin-left:6px;vertical-align:middle;font-family:'Nunito',sans-serif}
.story-why{padding:56px 0}
.why-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.why-grid h2{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:14px}
.why-grid p{margin-bottom:12px;color:var(--ink-soft)}
.why-grid p em{color:var(--ink)}
.why-meta{font-size:.85rem;border-top:2px dashed rgba(24,188,166,.4);padding-top:12px}
.value-card{background:#fff;border-radius:var(--rad);box-shadow:var(--shadow);padding:26px 24px;
border-top:6px solid var(--teal)}
.value-card h3{font-size:1.15rem;margin-bottom:14px}
.value-card ul{list-style:none;display:grid;gap:10px;font-size:.92rem}
.value-card li{display:flex;gap:9px;align-items:baseline}
.value-card svg{width:13px;height:13px;color:var(--sun);flex:none;transform:translateY(2px)}
.price-line{margin-top:18px;padding-top:14px;border-top:2px dashed rgba(40,38,58,.12);
display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:.95rem}
.price-line b{font-family:'Fredoka',sans-serif;font-size:1.15rem}
.price-line .dot{color:var(--ink-soft)}
.price-line small{color:var(--ink-soft)}
.promise{padding:20px 0 56px}
.promise-card{max-width:760px;margin:0 auto;background:var(--sun);border-radius:26px;
padding:38px 34px;text-align:center;position:relative;transform:rotate(-.6deg);
box-shadow:0 20px 44px rgba(255,200,56,.4)}
.promise-card h2{margin:8px 0 10px}
.promise-card p{max-width:54ch;margin:0 auto;font-weight:600}
.promise-star svg{width:34px;height:34px;color:var(--coral)}
.faq{padding:10px 0 60px}
.faq .wrap{max-width:760px}
.faq details{background:#fff;border-radius:14px;box-shadow:var(--shadow);margin-bottom:10px;
padding:16px 20px}
.faq summary{font-family:'Fredoka',sans-serif;font-weight:600;cursor:pointer;font-size:1rem}
.faq details p{padding-top:10px;color:var(--ink-soft);font-size:.93rem}
.final{background:var(--ink);color:var(--cream);padding:64px 0 72px;text-align:center}
.final h2{font-size:clamp(1.5rem,3.6vw,2.4rem);margin-bottom:24px}
.final .cta{width:auto;padding:16px 40px}
.final [data-name]{color:var(--sun)}
/* ---------------- sticky bar ---------------- */
.sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;background:var(--ink);
color:var(--cream);border-radius:16px;display:flex;align-items:center;gap:14px;
padding:10px 12px 10px 18px;box-shadow:0 14px 34px rgba(40,38,58,.4);
animation:rise .35s ease}
@keyframes rise{from{transform:translateY(80px);opacity:0}}
.sticky-txt{flex:1;min-width:0;line-height:1.25}
.sticky-txt b{font-family:'Fredoka',sans-serif;font-size:.95rem;display:block;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.sticky-txt small{font-size:.72rem;opacity:.8;font-weight:700}
.small-cta{width:auto;margin:0;font-size:.95rem;padding:11px 20px;box-shadow:0 4px 0 var(--coral-deep)}
.small-cta .cta-sub{display:none}
/* ---------------- footer ---------------- */
footer{background:var(--night);color:rgba(255,253,246,.75);padding:34px 0 44px;font-size:.82rem}
.foot-brand{display:flex;align-items:center;gap:8px;color:var(--cream);margin-bottom:10px;font-size:.95rem}
.foot-brand svg{width:20px;height:20px}
footer a{color:var(--gold)}
.foot-legal{line-height:1.7}
/* ---------------- responsive ---------------- */
@media(max-width:920px){
.hero-grid{grid-template-columns:1fr;gap:26px}
.hero-book{grid-column:1;grid-row:auto;max-width:430px;margin:0 auto 46px;padding-right:16px}
.art-note{max-width:58%;font-size:.72rem}
.cover-foot{text-align:left;padding-left:18px;padding-right:150px}
.ticket{grid-column:1}
.why-grid{grid-template-columns:1fr}
.steps{grid-template-columns:1fr;gap:26px;max-width:560px}
.p-cards{grid-template-columns:1fr;max-width:420px}
.spread{grid-template-columns:1fr}
.page-art img{aspect-ratio:auto;max-height:64vw}
.page-text{padding:24px 22px 30px}
.head-pill{font-size:.68rem}
.head-back{font-size:.78rem}
.home-book{max-width:400px;margin-bottom:10px}
}
@media(min-width:921px){
.sticky{left:auto;right:24px;max-width:360px}
.hero-book{position:sticky;top:96px;align-self:start}
}
.style-strip{margin:26px 0 0 3%;max-width:500px}
.ss-label{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;margin-bottom:8px}
.ss-btns{display:flex;flex-wrap:wrap;gap:8px}
.ss-btn{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;padding:15px 16px;min-height:56px;
border-radius:999px;border:2.5px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;
box-shadow:2.5px 2.5px 0 var(--ink);transition:.15s}
.ss-btn:hover{transform:translate(1px,1px);box-shadow:1.5px 1.5px 0 var(--ink)}
.ss-btn.on{background:var(--ssc);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3);
transform:translate(2.5px,2.5px);box-shadow:0 0 0 var(--ink)}
.ss-note{font-size:.72rem;color:var(--ink-soft);font-style:italic;margin-top:8px}
.ticket .ss-btns{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:2px}
.ticket .ss-btn{font-size:.9rem;padding:13px 12px;min-height:52px;box-shadow:2px 2px 0 var(--ink)}
.ticket .ss-note{font-size:.7rem;color:var(--ink-soft);font-style:italic;margin:6px 0 2px}
/* ---------- style picker: 3 across, two rows, thumb-sized (owner request) ---------- */
.ss-btns,.ticket .ss-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ss-btn,.ticket .ss-btn{font-size:.92rem;padding:0 8px;min-height:50px;display:flex;
align-items:center;justify-content:center;text-align:center;line-height:1.15;width:100%}
.style-strip{max-width:560px}
.ss-note,.ticket .ss-note{font-size:.86rem}
/* ---------- s18: THE ONE MESSAGE — "that is your child" ---------- */
/* s19: .was (the strikethrough) retired — the message is positive-only now */
/* s20: the green promise badge — the "Free preview first" header pill, renamed, grown and
moved into the hero on the owner's sketch. Deep teal #0B7A6B: white text passes AA (5.2:1);
the bright brand teal #18BCA6 would fail (2.1:1). */
.free-badge{display:inline-flex;align-items:center;gap:8px;background:#0B7A6B;color:#fff;
font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.02rem;padding:11px 20px;
border-radius:999px;box-shadow:0 6px 18px rgba(11,122,107,.35);margin:14px 0 2px}
.free-badge svg{width:15px;height:15px;color:var(--sun);flex:none}
.proof-sec{padding:52px 0 56px;background:var(--paper)}
.proof-sec .center{text-align:center}
.proof-sec h2{font-size:clamp(1.5rem,3.4vw,2.3rem);margin-bottom:26px}
.proof-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;
max-width:620px;margin:0 auto 30px}
.proof-shot{margin:0}
.proof-shot img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top;border-radius:16px;
box-shadow:0 14px 34px rgba(40,38,58,.2);border:4px solid #fff}
.proof-shot figcaption{text-align:center;font-family:'Lora',serif;font-style:italic;
font-size:.86rem;color:var(--ink-soft);margin-top:9px}
.proof-arrow{color:var(--cta);width:56px}
.proof-arrow svg{width:100%;height:auto}
.proof-foot{max-width:620px;margin:22px auto 0;text-align:center;font-size:.95rem;
color:var(--ink-soft);line-height:1.6}
.proof-foot b{color:var(--ink)}
.from-photo{display:inline-block;margin-top:8px;font-size:.72rem;font-weight:800;
letter-spacing:.04em;color:var(--teal-text);text-transform:uppercase}
.from-photo svg{width:10px;height:10px;vertical-align:-1px}
@media(max-width:720px){
/* s19: the section's POINT (headline + photo + painted page) must fit one phone screen.
Design floor: iPhone SE class, ~560 CSS px visible. Stacked 340px images needed ~900px —
side-by-side 44vw squares + captions + arrow ≈ 300px, whole section ≈ 470px. */
.proof-sec{padding:30px 0 32px}
.proof-sec h2{margin-bottom:16px}
.proof-grid{grid-template-columns:1fr 34px 1fr;gap:6px;max-width:100%;margin-bottom:14px}
.proof-arrow{transform:none;width:34px;margin:0 auto}
.proof-shot figcaption{font-size:.78rem;margin-top:6px}
.proof-foot{font-size:.92rem;margin-top:10px}
}
/* ---------- s17 (owner, 2026-07-27): on a phone the BOOK comes before the sales bullets ----------
The three ticks sat between the blurb and the cover, pushing the cover off the bottom of the
screen — you had to scroll before seeing the thing you are buying. `display:contents` lifts the
copy block's children into the hero grid so they can be ordered around the cover. Desktop, which
shows copy and cover side by side, is untouched. */
@media(max-width:920px){
.hero-copy{display:contents}
.hero-copy .kicker{order:1}
.hero-copy h1{order:2}
.hero-copy .lead{order:3}
/* s20 (owner sketch): promise badge -> BOOK -> then the ask. Show, then ask. */
.hero-copy .free-badge{order:4;align-self:center}
.hero-book{order:5}
.hero-copy .cta-row{order:6;margin-top:18px}
.hero-copy .hero-ticks{order:7;margin-top:20px}
/* 2026-08-02: the real-book slot is a child of .hero-copy, and .hero-copy is display:contents
here — so WITHOUT an explicit order it defaults to 0 and jumps above the headline. */
.hero-copy .hero-realbook{order:8}
.hero-copy .cross-link{order:9}
.ticket{order:10}
/* the yellow kicker + the header pill hide on phones — their messages live in the hero now */
.home-hero .kicker{display:none}
.head-pill{display:none}
}
/* ---------- s15: the style picker shows its own result ---------- */
.ss-preview{margin:12px 0 2px;text-align:center}
.ss-preview img{width:100%;max-width:300px;height:auto;margin:0 auto;border-radius:14px;
aspect-ratio:1/1;object-fit:cover;box-shadow:0 10px 26px rgba(40,38,58,.22);border:3px solid #fff}
.ss-cap{font-size:.88rem;color:var(--ink-soft);margin-top:8px;font-style:italic}
.ss-cap b{font-style:normal;color:var(--ink);font-family:'Fredoka',sans-serif;font-weight:600}
.ss-pop{animation:sspop .32s cubic-bezier(.2,1.3,.4,1)}
@keyframes sspop{0%{transform:scale(.94);opacity:.45}100%{transform:scale(1);opacity:1}}
/* ---------- s21: honest mode for the style preview ----------
Same sticker as the she/he demo swap has used since 2026-07-21 (.art-note), but sitting in
the flow under the preview instead of pinned over the cover. It appears only when the
(style x pronoun) cover has not been painted yet. */
.ss-honest{display:block;max-width:300px;margin:9px auto 0;font-family:'Fredoka',sans-serif;
font-weight:600;font-size:.74rem;line-height:1.35;font-style:normal;text-align:left;
background:var(--cream);color:var(--ink);border:2px solid var(--coral);
padding:6px 11px;border-radius:12px 12px 12px 2px;box-shadow:var(--shadow);
transform:rotate(-1.2deg)}
.ss-honest[hidden]{display:none}
/* ---------- s15: contrast (measured, WCAG AA) ----------
The brand accents are lovely on cream but several failed AA as TEXT. Fixed by adding
text-only variants — the decorative uses of --coral/--teal are untouched, so the site
still looks like itself. Logotype excluded on purpose (WCAG exempts brand names).
white on --coral 2.79:1 -> on --coral-cta 4.59:1 (primary button + its sub-line)
--teal on cream 2.35:1 -> --teal-text 5.14:1 (section kickers)
--coral-deep 3.64:1 -> --coral-text 4.97:1 (card links, back link) */
:root{--coral-cta:#D24236;--coral-text:#C93B31;--teal-text:#0B7A6B}
.cta{background:var(--coral-cta)}
.kicker{color:var(--teal-text)}
.sc-cta,.head-back,a.p-link .sc-cta{color:var(--coral-text)}
h1 em{color:var(--coral-deep)} /* large display text: 3.64:1, passes the 3.0 threshold */
.step-time{color:var(--teal-text)}
.gold-k{color:var(--gold)} /* on the dark section — already 9.86:1, keep */
/* ---------- s15: visible keyboard focus everywhere ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
summary:focus-visible,.drop:focus-visible{outline:3px solid var(--ink);outline-offset:3px;
border-radius:6px}
.night a:focus-visible,.night button:focus-visible,.final a:focus-visible{outline-color:var(--sun)}
/* ---------- s15: skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--cream);
padding:12px 18px;border-radius:0 0 10px 0;font-weight:800;text-decoration:none}
.skip:focus{left:0}
/* The back link carries two ALTERNATIVE wordings (unlike the promise pill, whose two spans
concatenate). The short one is hidden everywhere and swapped in on phones — without this
base rule the desktop header read "All storybooksStories". */
.hb-short{display:none}
/* ---------- phones ---------- */
@media(max-width:720px){
/* 2026-08-02: `clip`, not `hidden`. `hidden` still makes the root a horizontal SCROLL
CONTAINER (scrollbars merely invisible), and Android Chrome can pan it a few px — the
owner felt the page "move slightly from left to right" on his phone while every element
measured inside the viewport. `clip` is not scrollable at all, so the wiggle is impossible. */
html,body{overflow-x:clip;max-width:100%}
[id]{scroll-margin-top:74px}
/* header: shrink to fit instead of overflowing */
.head .wrap{padding:6px 16px;gap:8px}
.logo{font-size:1.02rem;min-height:44px;gap:7px}
.logo svg{width:23px;height:23px}
.head-right{gap:9px}
.head-back{min-height:44px;display:flex;align-items:center;font-size:.9rem}
.hb-long{display:none}
.hb-short{display:inline}
.head-pill{font-size:.72rem;padding:5px 10px}
.hp-long{display:none}
/* the four proven overflow causes */
.doodle{display:none}
.peek{width:38%}
.peek-1{left:1%}
.peek-2{right:1%}
.polaroid{right:0;width:126px}
.painted-into{right:104px;bottom:-46px}
.sticky{left:8px;right:8px;bottom:8px;padding:9px 10px 9px 15px;gap:10px;
padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
.sticky-txt b{font-size:.92rem}
.sticky-txt small{font-size:.76rem}
.small-cta{padding:13px 18px;min-height:46px}
/* readable minimums — nothing under 14px on a phone */
body{font-size:16px}
.kicker{font-size:.88rem}
/* the pill is 42 characters — on a phone it wraps, and a wrapped 999px pill looks broken.
Softer radius + tighter tracking so two lines read as a deliberate label. */
.count-pill{font-size:.8rem;letter-spacing:.02em;padding:7px 14px;border-radius:16px;line-height:1.4}
.lead{font-size:1.02rem}
/* BULLETS: the markup is `{star} text bold` inside display:flex, so the
star, the text and the bold each became separate flex items — on a narrow screen that
split every bullet into two ragged columns. A hanging star with normal inline text flow
fixes it and reads better anyway. */
.hero-ticks li,.value-card li{display:block;position:relative;padding-left:23px;font-size:1rem}
.hero-ticks li svg,.value-card li svg{position:absolute;left:0;top:.42em;transform:none}
.chip{font-size:.78rem;padding:3px 10px}
.sc-blurb{font-size:.93rem}
.sc-title{font-size:1.12rem}
.flag-tag{font-size:.8rem;padding:4px 12px}
.polaroid figcaption{font-size:.8rem;line-height:1.35}
.p-card p{font-size:.92rem}
.price-line small,.value-card small,.ticket small,.hero small{font-size:.86rem}
.ss-note{font-size:.86rem}
.cta-sub{font-size:.86rem}
.trustbar span{font-size:.87rem}
.trustbar svg{width:13px;height:13px}
.stitch-note{font-size:.85rem}
.cta .cta-sub{font-size:.82rem}
.ticket-promise{font-size:.89rem}
.steps li{font-size:.98rem}
.value-card ul{font-size:.97rem}
.faq details p{font-size:.96rem}
.rd-hint{font-size:.85rem}
.step-time{font-size:.76rem}
footer{font-size:.87rem}
.foot-legal{line-height:1.85}
/* tap targets: 44px minimum */
/* pad to 44px rather than display:flex — flex on a drops the disclosure triangle
AND collapses the whitespace between inline children ("free (optional)" became
"free(optional)"). Caught in the phone screenshot, not by the metrics. */
.faq summary{padding:10px 0;font-size:1.02rem}
.dedic summary{padding:11px 0}
/* standalone links that sit on their own line get a real target; links running inline
inside a sentence are exempt from the 44px rule (WCAG 2.5.8 inline exception) */
.cross-link a,.bespoke-small{display:inline-flex;align-items:center;min-height:44px}
.cta .cta-sub{font-size:.86rem}
footer a{display:inline-flex;align-items:center;min-height:44px}
.rd-dots{gap:12px;margin-top:16px}
.rd-dots button{width:13px;height:13px;position:relative}
/* the dot stays small, the FINGER target is 45px — an audit that measures the element
box will still report 13x13, which is why this comment exists */
.rd-dots button::after{content:"";position:absolute;inset:-16px}
.seg-btn{min-height:52px}
.f-input{padding:14px 15px}
/* rhythm: the home page was 26,700px of scrolling — tighten the air between sections */
.hero{padding:14px 0 30px}
.count-pill{margin-bottom:2px}
h1{margin-bottom:10px}
.hero .lead{margin-bottom:4px}
.cat-sec{padding:42px 0 38px}
.reader-sec{padding:44px 0 48px}
.how{padding:42px 0 22px}
.story-why{padding:38px 0}
.purpose-sec{padding:40px 0 44px}
.promise{padding:14px 0 40px}
.promise-card{padding:28px 20px;border-radius:20px}
.faq{padding:6px 0 40px}
.final{padding:46px 0 108px} /* room for the sticky bar */
.sec-head{margin-bottom:22px}
.ticket-inner{padding:20px 18px 18px}
.page-text{padding:22px 20px 26px}
/* one thumb, one column: full-width primary buttons */
.home-cta,.final .cta,.how-cta .cta,.ghost-cta{width:100%;max-width:420px}
.flip-btn{display:block;margin:18px auto 0;max-width:330px;text-align:center}
.hero-book{margin-bottom:38px}
}
/* ---------- small phones (iPhone SE / mini, 390px and under) ---------- */
@media(max-width:390px){
.ss-btn,.ticket .ss-btn{font-size:.82rem;padding:0 4px;min-height:48px}
.ss-btns,.ticket .ss-btns{gap:8px}
.logo{font-size:.96rem}
.logo svg{width:21px;height:21px}
/* On a story page the header carries a back link AND the promise pill; at 360px that is
4px too wide however it is trimmed. The pill is the lower-value item there (the hero
repeats the promise two lines down), so it goes — but ONLY where a back link exists,
so the home page keeps it. */
.head-back + .head-pill{display:none}
.head-pill{font-size:.72rem;padding:5px 10px}
.wrap{padding:0 15px}
h1{font-size:clamp(1.75rem,7.4vw,2.2rem)}
.cover-title{font-size:1.08rem;padding:14px 14px 34px}
.polaroid{width:112px}
.painted-into{right:92px}
.painted-into svg{width:50px}
.pi-label{font-size:.72rem}
}
/* ============================================================ OPTION D — occasion chips */
.occ-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto 6px;
max-width:840px}
.occ-chip{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;line-height:1.1;
padding:0 18px;min-height:52px;display:inline-flex;align-items:center;gap:8px;
border-radius:999px;border:2.5px solid var(--ink);background:#fff;color:var(--ink);
cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .14s,box-shadow .14s,
background .14s}
.occ-chip:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.occ-chip.on{background:var(--teal);color:#fff;transform:translate(3px,3px);
box-shadow:0 0 0 var(--ink)}
.occ-chip .occ-e{font-size:1.15rem;line-height:1}
.occ-chip.occ-else{background:var(--sun)}
.occ-chip.occ-else.on{background:var(--ink);color:var(--cream)}
.occ-count{text-align:center;font-size:.92rem;color:var(--ink-soft);margin:12px 0 2px;
font-style:italic;min-height:1.3em}
.story-card[hidden]{display:none}
.occ-empty{text-align:center;font-size:1.02rem;color:var(--ink-soft);margin-top:26px}
.occ-empty a{font-weight:800}
.oneoff-tag{display:block;margin-top:6px;font-size:.78rem;font-weight:800;color:var(--teal-text);
font-style:italic}
/* the bespoke door — since 2026-08-01 ALWAYS visible on the homepage, the equal second door */
.bespoke-door{margin:22px auto 4px;max-width:760px;animation:bdIn .3s ease}
@keyframes bdIn{from{opacity:0;transform:translateY(-8px)}}
.bd-inner{background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%);
color:var(--cream);border-radius:var(--rad);padding:32px 30px;text-align:center;
box-shadow:0 18px 42px rgba(40,38,58,.3);border:1px solid rgba(246,196,83,.3)}
.bd-inner h3{font-size:clamp(1.3rem,3vw,1.8rem);margin:4px 0 12px;color:var(--cream)}
.bd-inner p{font-size:1rem;line-height:1.65;opacity:.9;max-width:52ch;margin:0 auto 10px}
.bd-inner p b{color:var(--sun);opacity:1}
.bd-eg{font-size:.9rem!important;font-style:italic;opacity:.65!important;margin-bottom:18px!important}
.bd-inner .cta{width:auto;padding:15px 32px}
@media(max-width:720px){
.occ-chips{gap:8px;justify-content:flex-start}
.occ-chip{font-size:.95rem;padding:0 15px;min-height:50px}
.occ-count{font-size:.9rem}
.bd-inner{padding:24px 18px}
.bd-inner p{font-size:.96rem}
.bd-inner .cta{width:100%;max-width:420px}
}
.wip-panel{border:2.5px dashed rgba(40,38,58,.32);border-radius:16px;background:
repeating-linear-gradient(45deg,rgba(40,38,58,.035) 0 10px,transparent 10px 20px),var(--paper);
padding:22px 20px;text-align:center;color:var(--ink-soft)}
.wip-panel.tall{max-width:620px;margin:0 auto;padding:34px 26px}
.wip-tag{display:inline-block;font-family:'Fredoka',sans-serif;font-weight:700;font-size:.8rem;
letter-spacing:.05em;text-transform:uppercase;background:#EDE9F5;color:#4A4666;
border:2px solid rgba(40,38,58,.3);border-radius:999px;padding:6px 14px;margin-bottom:12px}
.wip-why{font-size:.92rem;line-height:1.62;max-width:52ch;margin:0 auto}
.wip-why a{color:var(--coral-deep);font-weight:700}
.night .wip-panel{border-color:rgba(255,253,246,.3);color:rgba(255,253,246,.82);
background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 10px,transparent 10px 20px),
rgba(255,255,255,.04)}
.night .wip-tag{background:rgba(255,253,246,.12);color:var(--gold);border-color:rgba(246,196,83,.5)}
.wip-sec{padding:52px 0 58px}
/* the catalogue tile */
.story-card.wip{background:#FBF8F1;box-shadow:0 4px 14px rgba(40,38,58,.07)}
.story-card.wip:hover{transform:translateY(-3px) rotate(0deg);box-shadow:0 10px 24px rgba(40,38,58,.12)}
.story-card.wip .sc-title,.story-card.wip .sc-blurb{color:var(--ink-soft)}
.story-card.wip .sc-cta{color:var(--ink-soft)}
.wip-flag{background:#EDE9F5;color:#4A4666}
.wip-art{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
border-bottom:2.5px dashed rgba(40,38,58,.22);background:
repeating-linear-gradient(45deg,rgba(40,38,58,.05) 0 12px,transparent 12px 24px),#F3EFE6}
.wip-art span{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1rem;line-height:1.35;
color:#6B6786;text-align:center;letter-spacing:.02em}
.wip-note{font-size:.74rem;font-style:italic;color:var(--ink-soft);opacity:.9}
/* the hero's she/he demo control (home page — the ticket carries its own on order pages) */
/* ⚠ TWO faults, both found by measuring rather than by looking. The control was first put at the
top of .hero-book, where (1) the two absolutely-positioned .peek covers sat ON TOP of it and
swallowed every click ("peek-1 intercepts pointer events"), and (2) its label was unreadable
over painted art. Pushing the peeks down only half-worked — peek-1 still overlapped by ~40px,
and clearing it entirely killed the peek-behind effect. So the control lives in the COPY
column now, where nothing is stacked, and the hero-book corner stays decoration.
.peek{pointer-events:none} stays regardless: aria-hidden decoration must never take a pointer. */
.peek{pointer-events:none}
.demo-seg{position:relative;z-index:3;margin:16px 0 0;max-width:320px}
/* the withdrawn-book panel, sized like the cover it replaces so the hero does not collapse */
.demo-wip{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
justify-content:center;text-align:center;min-height:340px;padding:30px 26px;
border:2.5px dashed rgba(40,38,58,.32);border-radius:16px;background:
repeating-linear-gradient(45deg,rgba(40,38,58,.035) 0 10px,transparent 10px 20px),var(--paper)}
.demo-wip .wip-why{color:var(--ink-soft)}
/* ⚠ THE TRAP: the phone breakpoint sets .flip-btn{display:block}, which OVERRIDES the UA's
[hidden]{display:none} — so hiding the button with el.hidden=true left it fully visible on a
phone while every scripted check said "hidden". A screenshot caught it; the attribute check
did not. Never trust `.hidden` as proof something is not on screen — measure the box. */
[hidden]{display:none !important}
.ds-label{display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.86rem;
color:var(--ink-soft);margin-bottom:6px}
.demo-seg .seg-btn{padding:9px 10px;font-size:.9rem;min-height:44px}
/* legal pages */
.legal-page{padding:44px 0 64px;background:var(--paper)}
.legal-page .wrap{max-width:760px}
.legal-page h1{font-size:clamp(1.6rem,4vw,2.3rem);margin-bottom:14px}
.legal-page h2{font-size:1.25rem;margin:26px 0 10px}
.legal-page p{margin-bottom:12px;line-height:1.68;color:var(--ink-soft)}
.legal-page a{color:var(--coral-deep);font-weight:700}
.legal-box{background:#fff;border-radius:var(--rad);box-shadow:var(--shadow);padding:20px 22px;
margin:20px 0 8px}
.legal-box p:last-child{margin-bottom:0}
/* 2026-07-31: the real legal pages (terms/privacy/returns) need lists and a dateline. */
.legal-page ul,.legal-page ol{margin:0 0 14px 22px;color:var(--ink-soft);line-height:1.68}
.legal-page li{margin-bottom:8px}
.legal-page li b,.legal-page li strong{color:var(--ink)}
.legal-updated{font-size:.85rem;color:var(--ink-soft);opacity:.8;margin-bottom:16px!important}
/* the pre-purchase disclosure under the order form — reg 28(1)(b) has to be told BEFORE the
order, so this line is load-bearing, not decoration. Small, but never hidden. */
.ticket-legal{font-size:.76rem;line-height:1.55;color:var(--ink-soft);opacity:.9;
margin-top:10px;text-align:center}
.ticket-legal a{color:var(--ink-soft);text-decoration:underline}
.legal-note{font-size:.85rem;opacity:.85;margin-top:22px;padding-top:14px;
border-top:1px solid rgba(40,38,58,.12)}
.dedic-hint{font-size:.82rem;color:var(--ink-soft);line-height:1.55;margin:8px 0 2px}
@media(max-width:920px){
/* .hero-copy is display:contents on phones (s17), so the toggle is ordered directly against
the badge (4) and the book (5) — it must land between them: choose, then look. */
.hero-copy .demo-seg{order:4;align-self:center;margin:14px auto 2px;max-width:330px}
}
@media(max-width:920px){
.home-hero .hero-book{order:5}
}
@media(min-width:721px){
:root{--anchor-gap:96px}
[id]{scroll-margin-top:var(--anchor-gap)}
#how-it-works{scroll-margin-top:calc(var(--anchor-gap) + 52px)}
#promise{scroll-margin-top:calc(var(--anchor-gap) + 105px)}
#faq{scroll-margin-top:calc(var(--anchor-gap) + 10px)}
#cards,#bespoke-door{scroll-margin-top:var(--anchor-gap)}
#stories{scroll-margin-top:0}
}
@media(min-width:921px){
.home-hero{min-height:min(calc(100vh - 99px),1000px);display:flex;align-items:center}
.home-hero > .wrap{width:100%}
}
/* the flagship card — one big two-column card; the whole card is the link */
.flagship-hero{position:relative;display:grid;grid-template-columns:minmax(240px,410px) 1fr;
max-width:880px;margin:10px auto 0;background:#fff;border-radius:16px;overflow:hidden;
box-shadow:var(--shadow);outline:3px solid var(--sun);text-decoration:none;color:var(--ink);
transition:transform .18s,box-shadow .18s}
.flagship-hero:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(40,38,58,.18)}
.fh-art img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1}
.fh-body{padding:26px 28px 24px;display:flex;flex-direction:column;gap:10px}
.fh-title{font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.22}
.fh-blurb{font-size:.95rem;color:var(--ink-soft);line-height:1.6}
.fh-sept{font-size:.88rem;font-weight:800;color:var(--teal-text);line-height:1.55}
.fh-sept svg{width:12px;height:12px;vertical-align:-1px}
.fh-cta{width:auto;align-self:flex-start;padding:15px 30px;margin-top:auto}
/* proof pills inside the bespoke band — real delivered one-offs, ≥44px tap targets */
.bd-proof{font-size:.85rem!important;opacity:.9!important;margin-top:18px!important}
.bd-eg-pill{display:inline-flex;align-items:center;min-height:44px;padding:4px 16px;
margin:6px 4px 0;border:1.5px solid rgba(246,196,83,.45);border-radius:999px;
color:var(--cream);text-decoration:none;font-weight:700;font-size:.85rem}
.bd-eg-pill:hover{background:rgba(246,196,83,.14)}
.bespoke-door a:focus-visible{outline-color:var(--sun)}
/* the workbench strip — muted, not clickable, no order path */
.workbench{max-width:880px;margin:42px auto 0}
.wb-head{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.15rem;text-align:center}
.wb-sub{font-size:.9rem;color:var(--ink-soft);text-align:center;font-style:italic;margin:4px 0 14px}
.wb-strip{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.wb-tile{background:#FBF8F1;border:1.5px dashed rgba(40,38,58,.25);border-radius:12px;
padding:10px 10px 12px;text-align:center;color:var(--ink-soft);display:flex;
flex-direction:column;align-items:center}
.wb-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;
filter:saturate(.5) opacity(.75)}
.wb-noart{justify-content:center;min-height:150px;background:
repeating-linear-gradient(45deg,rgba(40,38,58,.04) 0 10px,transparent 10px 20px),#FBF8F1}
.wb-title{display:block;font-weight:700;font-size:.8rem;line-height:1.3;margin-top:8px}
.wb-when{display:inline-block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.66rem;
letter-spacing:.05em;text-transform:uppercase;background:#EDE9F5;color:#4A4666;
border-radius:999px;padding:3px 10px;margin-top:7px}
/* ebook-only selling (owner decision 2026-08-01): the form states the ebook price and the
email-borne hardcover upgrade offer — nothing here is a purchase control any more */
.f-product{font-size:.88rem;line-height:1.6;color:var(--ink-soft);background:var(--paper);
border-radius:10px;padding:10px 13px;margin:2px 0 12px}
.f-product b{color:var(--ink)}
.vc-upgrade{font-size:.8rem;line-height:1.55;color:var(--ink-soft);margin-top:8px}
@media(max-width:720px){
.flagship-hero{grid-template-columns:1fr}
.fh-art img{aspect-ratio:16/10} /* shallower art on phones: title + CTA inside the screen floor */
.fh-body{padding:18px 18px 20px}
.fh-cta{width:100%;align-self:stretch}
.wb-strip{grid-template-columns:repeat(2,1fr);gap:10px}
}
/* /pricing/ */
.pricing-hero{padding:56px 0 20px;background:var(--paper)}
.pricing-hero h1{font-size:clamp(1.7rem,4.4vw,2.6rem);line-height:1.18;margin-bottom:12px}
.price-board{max-width:640px;margin:26px auto 8px;background:#fff;border-radius:var(--rad);
box-shadow:var(--shadow);overflow:hidden}
.pb-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:18px 22px}
.pb-row + .pb-row{border-top:1.5px dashed rgba(40,38,58,.18)}
.pb-what b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;display:block}
.pb-what small{display:block;font-size:.82rem;color:var(--ink-soft);line-height:1.5;margin-top:3px;
max-width:40ch}
.pb-price{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.45rem;color:var(--coral-deep);
text-align:right;flex:none}
.pb-price small{display:block;font-family:'Nunito',sans-serif;font-weight:800;font-size:.68rem;
color:var(--teal-text)}
.pricing-notes{max-width:640px;margin:26px auto 0;font-size:.88rem;line-height:1.65;
color:var(--ink-soft);text-align:center}
.pricing-notes a{color:var(--coral-deep);font-weight:700}
@media(max-width:720px){
.pb-row{padding:15px 16px}
.pb-price{font-size:1.3rem}
}
/* 2026-08-02 — the real book, in the FIRST screen. One photo, deliberately small: it has to
answer "is this an actual book?" without out-shouting the hero, whose job is "that's your
child". Swaps itself to the real photograph the moment photo1.jpg exists. */
.hero-realbook{display:flex;align-items:center;gap:14px;margin-top:20px;padding:12px 14px;
background:rgba(255,255,255,.72);border:2px solid var(--ink);border-radius:16px;
box-shadow:3px 3px 0 var(--ink);max-width:440px}
.hrb-shot{flex:0 0 92px;width:92px;height:92px;margin:0;border-radius:11px;overflow:hidden;
background:#fff;display:flex}
.hrb-shot img{width:100%;height:100%;object-fit:cover;display:block}
.hrb-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
width:100%;text-align:center;padding:7px;
background:linear-gradient(160deg,#FFF6E8 0%,var(--paper) 100%);
border:2px dashed rgba(246,196,83,.75);border-radius:11px;
font-family:'Fredoka',sans-serif;font-weight:600;font-size:.6rem;line-height:1.25;
color:var(--ink-soft)}
.hrb-soon .hrb-star svg{width:17px;height:17px;color:var(--sun)}
.hrb-cap{margin:0;font-size:.84rem;line-height:1.45;color:var(--ink)}
.hrb-cap b{font-family:'Fredoka',sans-serif}
@media(max-width:920px){.hero-realbook{max-width:none;margin-top:18px}}
@media(max-width:400px){
.hero-realbook{gap:11px;padding:10px 11px}
.hrb-shot{flex-basis:76px;width:76px;height:76px}
.hrb-cap{font-size:.79rem}
}
/* the real thing — printed-book section; slots swap to real photos/film when the files exist */
.real-book{padding:56px 0 62px}
.rb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:920px;margin:6px auto 14px}
.rb-tile{aspect-ratio:1/1;border-radius:14px;overflow:hidden;margin:0;box-shadow:var(--shadow);
background:#fff}
.rb-tile img{width:100%;height:100%;object-fit:cover;display:block}
.rb-video{display:block;aspect-ratio:16/9;width:100%;max-width:720px;margin:0 auto;
border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.rb-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
text-align:center;background:linear-gradient(160deg,#FFF6E8 0%,var(--paper) 100%);
border:2px dashed rgba(246,196,83,.75);box-shadow:none;color:var(--ink-soft);padding:12px}
.rb-soon .rb-star svg{width:22px;height:22px;color:var(--sun)}
.rb-soon .rb-cap{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.85rem;line-height:1.4}
.rb-video.rb-soon .rb-cap{font-size:.95rem;max-width:34ch}
@media(max-width:720px){
.rb-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.real-book{padding:44px 0 48px}
}
/* ---------- real-book lightbox */
.rb-zoom{display:block;width:100%;height:100%;cursor:zoom-in}
.hrb-shot .rb-zoom img{width:100%;height:100%;object-fit:cover;display:block}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(23,20,35,.93);display:flex;
align-items:center;justify-content:center;padding:18px;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:96vw;max-height:90vh;border-radius:10px;
box-shadow:0 24px 70px rgba(0,0,0,.55);background:#fff}
.lb-close{position:absolute;top:10px;right:14px;font-size:2.2rem;line-height:1;color:#fff;
background:none;border:none;cursor:pointer;padding:8px}
.lb-close:focus-visible{outline:3px solid var(--sun);border-radius:8px}