:root{
  --milk:#fbf5ec; --paper:#f4e6dc; --blush:#f0cfc4; --rose:#d9958a;
  --plum:#3a2a3d; --plum-soft:#6a5470; --honey:#e9a93c; --honey-deep:#c98520;
  --sage:#8fae8b; --sage-deep:#5f8060; --night:#5c6ea8; --night-deep:#3d4a7a;
  --line:rgba(58,42,61,.12); --shadow:0 18px 50px -20px rgba(58,42,61,.35);
  --r-lg:28px; --r-md:18px; --r-sm:12px;
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--plum);background:var(--milk);overflow-x:hidden;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.32;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .24 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.015em;font-variation-settings:"SOFT" 60,"WONK" 1}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.45rem}
p{max-width:64ch}
.lede{font-size:1.2rem;color:var(--plum-soft);max-width:56ch}
.wrap{width:min(1160px,calc(100% - 2.5rem));margin-inline:auto;position:relative;z-index:1}
.narrow{width:min(760px,calc(100% - 2.5rem));margin-inline:auto;position:relative;z-index:1}
section{padding:6rem 0;position:relative}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.top{position:sticky;top:0;z-index:50;padding:.9rem 0;transition:background .3s,box-shadow .3s}
.top.scrolled{background:rgba(251,245,236,.86);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.brand svg{width:34px;height:34px}
.nav{display:flex;gap:.2rem;align-items:center}
.nav a{padding:.5rem .85rem;border-radius:999px;font-weight:700;font-size:.95rem;color:var(--plum-soft);transition:background .25s,color .25s}
.nav a:hover,.nav a[aria-current]{background:var(--paper);color:var(--plum)}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;border-radius:50%;cursor:pointer;color:var(--plum)}
.menu-btn:hover{background:var(--paper)}
@media(max-width:900px){
  .nav{display:none;position:fixed;inset:64px 1rem auto 1rem;flex-direction:column;background:var(--milk);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem;box-shadow:var(--shadow);z-index:60}
  .nav.open{display:flex}
  .nav a{padding:.8rem 1rem;font-size:1.05rem}
  .menu-btn{display:grid;place-items:center}
  .top .cta{display:none}
}

/* buttons — continuous hover motion */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.45rem;border-radius:999px;font-weight:800;font-size:1rem;border:2px solid transparent;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background .25s;font-family:var(--sans);line-height:1}
.btn.primary{background:var(--plum);color:var(--milk);box-shadow:0 10px 24px -10px rgba(58,42,61,.6)}
.btn.honey{background:var(--honey);color:var(--plum);box-shadow:0 10px 24px -10px rgba(201,133,32,.7)}
.btn.ghost{background:transparent;border-color:var(--plum);color:var(--plum)}
.btn::after{content:"";position:absolute;top:-40%;bottom:-40%;width:35%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);opacity:0}
.btn:hover{transform:translateY(-3px);animation:bob 1.4s ease-in-out infinite}
.btn:hover::after{opacity:1;animation:sheen 1.3s linear infinite}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--honey);outline-offset:3px}
@keyframes bob{0%,100%{transform:translateY(-3px) rotate(0)}25%{transform:translateY(-5px) rotate(-1.2deg)}75%{transform:translateY(-4px) rotate(1.2deg)}}
@keyframes sheen{to{left:130%}}

/* hero */
.hero{padding:4rem 0 5rem;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center}
.hero h1{margin:.7rem 0 1.2rem}
.hero .actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.kicker{display:inline-flex;align-items:center;gap:.5rem;background:var(--paper);border-radius:999px;padding:.35rem .9rem .35rem .5rem;font-weight:800;font-size:.9rem;color:var(--plum-soft)}
.kicker i{width:22px;height:22px;border-radius:50%;background:var(--honey);display:grid;place-items:center;font-style:normal;font-size:.75rem}
.hero-art{position:relative}
.hero-art svg{width:100%;height:auto;overflow:visible}
.bubble{position:absolute;top:2%;left:-2%;background:#fff;border-radius:22px 22px 22px 6px;padding:.7rem 1rem;font-family:var(--serif);font-size:1.15rem;box-shadow:var(--shadow);min-width:210px}
.bubble small{display:block;font-family:var(--sans);font-size:.72rem;font-weight:800;color:var(--plum-soft);letter-spacing:.02em}
.bubble .word{display:inline-block;color:var(--honey-deep);min-width:9ch}
.doodles span{position:absolute;font-size:1.5rem;animation:float 6s ease-in-out infinite;opacity:.85}
.doodles span:nth-child(2){animation-delay:-2s}.doodles span:nth-child(3){animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(5deg)}}
@keyframes bookOut{0%,15%{transform:translateY(0)}45%,70%{transform:translateY(-118px)}85%,100%{transform:translateY(0)}}
@keyframes blink{0%,80%,100%{opacity:1}90%{opacity:.35}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.25);opacity:.45}}
@keyframes slowspin{to{transform:rotate(360deg)}}
@keyframes cloudDrift{0%{transform:translateX(0)}50%{transform:translateX(18px)}100%{transform:translateX(0)}}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.book-out{animation:bookOut 8s ease-in-out infinite;transform-box:fill-box}
.led{animation:blink 2.6s ease-in-out infinite}
.ring{transform-origin:center;transform-box:fill-box;animation:pulse 2.8s ease-in-out infinite}
.cloud{animation:cloudDrift 9s ease-in-out infinite;transform-box:fill-box}
.star{transform-origin:center;transform-box:fill-box;animation:twinkle 3s ease-in-out infinite}
.star:nth-of-type(2n){animation-delay:-1s}.star:nth-of-type(3n){animation-delay:-2s}

/* wavy dividers */
.wave{height:70px;width:100%;display:block}
.tint{background:var(--paper)}
.tint-night{background:var(--night-deep);color:var(--milk)}
.tint-night .lede,.tint-night h2{color:var(--milk)}
.tint-sage{background:#e7efe3}

/* sections */
.two{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.two.flip>*:first-child{order:2}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.card{background:#fff;border-radius:var(--r-lg);padding:1.8rem;border:1px solid var(--line);position:relative;overflow:hidden}
.card h3{margin-bottom:.5rem}
.card .ico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin-bottom:1rem;background:var(--paper)}
.card .ico svg{width:30px;height:30px}
.eyebrow-num{font-family:var(--serif);font-size:3rem;line-height:1;color:var(--blush);position:absolute;right:1.2rem;top:.6rem}
.section-head{margin-bottom:2.8rem;max-width:62ch}
.section-head h2{margin-bottom:.8rem}
.center{text-align:center}.center p{margin-inline:auto}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.step{background:#fff;border-radius:var(--r-lg);padding:1.6rem;border:1px solid var(--line)}
.step::before{counter-increment:s;content:counter(s);font-family:var(--serif);font-size:1.4rem;width:44px;height:44px;border-radius:50%;background:var(--honey);color:var(--plum);display:grid;place-items:center;margin-bottom:1rem}
.step h3{font-size:1.2rem;margin-bottom:.4rem}
.step p{font-size:.98rem;color:var(--plum-soft)}

/* inputs mosaic */
.inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.inputs .card{background:var(--milk)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.chip{background:#fff;border:1.5px dashed var(--rose);border-radius:999px;padding:.35rem .8rem;font-weight:800;font-size:.9rem;font-family:var(--serif)}

/* research stat tiles */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-lg);padding:1.8rem}
.stat b{font-family:var(--serif);font-size:1.8rem;font-weight:500;display:block;margin-bottom:.5rem;color:var(--honey)}
.stat p{color:rgba(251,245,236,.85);font-size:.98rem}

/* story packs */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.pack{border-radius:var(--r-lg);padding:1.8rem;min-height:300px;position:relative;overflow:hidden;color:var(--plum);transition:transform .3s}
.pack:hover{transform:translateY(-6px) rotate(-.6deg)}
.pack h3{font-size:1.7rem;margin-bottom:.3rem}
.pack p{font-size:.98rem;max-width:30ch}
.pack .age{position:absolute;top:1.2rem;right:1.2rem;background:rgba(255,255,255,.75);border-radius:999px;padding:.3rem .7rem;font-weight:800;font-size:.8rem}
.pack svg{position:absolute;right:-10px;bottom:-10px;width:150px;height:150px;opacity:.9}
.pack.wood{background:linear-gradient(160deg,#dfe9d3,#b9cfa8)}
.pack.ocean{background:linear-gradient(160deg,#d8e6f2,#a9c8e2)}
.pack.night{background:linear-gradient(160deg,#4a5789,#2d3459);color:var(--milk)}
.pack.night .age{background:rgba(255,255,255,.2);color:#fff}
.pack.garden{background:linear-gradient(160deg,#f6dfd9,#eab8ad)}
.pack.city{background:linear-gradient(160deg,#f5e6c8,#e7c98d)}
.pack.snow{background:linear-gradient(160deg,#eef1f6,#cfd8e6)}

/* ticker */
.ticker{overflow:hidden;white-space:nowrap;padding:1.2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.ticker div{display:inline-block;animation:ticker 40s linear infinite}
.ticker span{font-family:var(--serif);font-size:1.3rem;padding:0 1.5rem;color:var(--plum-soft)}
.ticker span::after{content:"✦";color:var(--honey);margin-left:1.5rem}
@keyframes ticker{to{transform:translateX(-50%)}}

/* age slider */
.age-demo{background:#fff;border-radius:var(--r-lg);padding:2rem;border:1px solid var(--line)}
.age-demo input{width:100%;accent-color:var(--honey);margin:1rem 0}
.age-demo .out{background:var(--paper);border-radius:var(--r-md);padding:1.2rem 1.4rem;font-family:var(--serif);font-size:1.15rem;min-height:130px;transition:background .3s}
.age-demo .label{display:flex;justify-content:space-between;font-weight:800;color:var(--plum-soft);font-size:.9rem}

/* compare */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.compare .card ul{list-style:none;margin-top:1rem}
.compare li{padding:.55rem 0 .55rem 1.8rem;position:relative;border-top:1px solid var(--line)}
.compare li::before{content:"";position:absolute;left:0;top:.95rem;width:12px;height:12px;border-radius:50%;background:var(--sage-deep)}
.compare .no li::before{background:var(--rose)}

/* faq */
details{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.3rem;margin-bottom:.8rem}
summary{cursor:pointer;font-weight:800;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
summary::after{content:"+";font-family:var(--serif);font-size:1.6rem;color:var(--honey-deep);transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:.8rem;color:var(--plum-soft)}

/* cta band */
.band{background:var(--plum);color:var(--milk);border-radius:var(--r-lg);padding:3.5rem;position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.band h2{color:var(--milk);margin-bottom:.8rem}
.band p{color:rgba(251,245,236,.8)}
.band::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(233,169,60,.45),transparent 60%);right:-180px;top:-200px;animation:pulse 6s ease-in-out infinite}
.band .actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}

/* footer */
footer{padding:4rem 0 2.5rem;border-top:1px solid var(--line);margin-top:2rem}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.foot h4{font-family:var(--sans);font-weight:800;font-size:.95rem;margin-bottom:.8rem}
.foot .brand{display:inline-flex;margin-bottom:.2rem}
.foot a{display:block;color:var(--plum-soft);padding:.25rem 0;font-size:.95rem}
.foot a:hover{color:var(--plum)}
.foot .brand{color:var(--plum);padding:0}
.foot p{color:var(--plum-soft);font-size:.95rem;max-width:34ch;margin-top:.8rem}
.legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--plum-soft)}

/* inner pages */
.page-head{padding:4.5rem 0 3rem}
.page-head h1{margin:.6rem 0 1rem}
.prose{padding:1rem 0 5rem}
.prose h2{font-size:1.7rem;margin:2.4rem 0 .8rem}
.prose h3{font-size:1.25rem;margin:1.6rem 0 .5rem}
.prose p,.prose li{color:var(--plum-soft);max-width:70ch}
.prose p{margin-bottom:1rem}
.prose ul,.prose ol{margin:0 0 1rem 1.3rem}
.prose li{margin-bottom:.4rem}
.prose .updated{font-size:.9rem;font-weight:800}
.prose a{color:var(--night);text-decoration:underline}
.prose strong{color:var(--plum)}

/* forms */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem}
.form label{display:block;font-weight:800;font-size:.92rem;margin:1rem 0 .4rem}
.form input,.form textarea,.form select{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;background:var(--milk)}
.form textarea{min-height:140px;resize:vertical}
.form .btn{margin-top:1.4rem}
.note{font-size:.9rem;color:var(--plum-soft);margin-top:1rem}

/* device spec */
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.spec .card{text-align:center}
.spec b{font-family:var(--serif);font-size:1.5rem;font-weight:500;display:block}
.spec span{color:var(--plum-soft);font-size:.95rem}

/* founder */
.founder{display:grid;grid-template-columns:.9fr 1.3fr;gap:3rem;align-items:center}
.portrait{aspect-ratio:4/5;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--blush),var(--paper));display:grid;place-items:center;position:relative;overflow:hidden}
.portrait svg{width:70%}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* misc */
.pill-row{display:flex;flex-wrap:wrap;gap:.6rem}
.pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;font-weight:800;font-size:.9rem}
.marker{background:linear-gradient(transparent 55%,rgba(233,169,60,.5) 55%)}
.cover-demo{color:var(--plum);aspect-ratio:3/4;border-radius:14px 22px 22px 14px;background:linear-gradient(170deg,#f7e2c2,#e9c28c);padding:1.6rem;position:relative;box-shadow:var(--shadow);border-left:10px solid #c98520;width:min(300px,100%);margin-inline:auto}
.cover-demo .title{font-family:var(--serif);font-size:1.7rem;line-height:1.1}
.cover-demo .by{position:absolute;bottom:1.4rem;left:1.6rem;font-weight:800;font-size:.9rem}
.cover-demo .by em{font-family:var(--serif);font-style:normal;font-size:1.1rem;display:block}
.cover-demo svg{position:absolute;right:1rem;bottom:5.2rem;width:100px}

@media(max-width:1000px){
  .hero .wrap,.two,.founder,.band{grid-template-columns:1fr}
  .two.flip>*:first-child{order:0}
  .grid3,.stats,.packs,.inputs{grid-template-columns:1fr 1fr}
  .steps,.spec{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr 1fr}
  .hero-art{max-width:560px;margin-inline:auto}
}
@media(max-width:640px){
  section{padding:4rem 0}
  .grid3,.stats,.packs,.inputs,.steps,.spec,.grid2,.compare,.foot{grid-template-columns:1fr}
  .band{padding:2.2rem}
  .bubble{position:relative;top:0;left:0;margin-bottom:1rem;display:inline-block}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* books gallery */
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.book{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}
.book:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--shadow)}
.book-cover{background:var(--paper);padding:1.4rem 1.4rem 0;display:flex;justify-content:center}
.book-cover img{width:78%;height:auto;border-radius:4px 10px 10px 4px;box-shadow:-6px 10px 24px -8px rgba(58,42,61,.45);border-left:5px solid rgba(58,42,61,.18);transform:rotate(-1.5deg);transition:transform .35s}
.book:hover .book-cover img{transform:rotate(0) translateY(-4px)}
.book-body{padding:1.4rem 1.6rem 1.7rem}
.book-body h3{font-size:1.35rem;margin-bottom:.3rem}
.book-meta{font-weight:800;font-size:.85rem;color:var(--plum-soft);margin-bottom:.7rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.book-meta span{background:var(--paper);border-radius:999px;padding:.15rem .6rem}
.book-body p:last-child{font-size:.97rem;color:var(--plum-soft)}
@media(max-width:1000px){.books{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.books{grid-template-columns:1fr}}

/* worlds grid */
.worlds{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem}
.world{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;border-bottom:7px solid var(--bar);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.world:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.world img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;transition:transform .5s}
.world:hover img{transform:scale(1.04)}
.world-body{padding:1rem 1.1rem 1.2rem;position:relative;flex:1}
.world-body h3{font-size:1.5rem;margin-bottom:.25rem}
.world-meta{font-size:.92rem;color:var(--plum-soft);font-weight:700}
.world-desc{font-size:.92rem;color:var(--plum-soft);margin-top:.6rem;font-weight:400}
.world-age{display:inline-block;margin-top:.8rem;background:var(--paper);border-radius:999px;padding:.2rem .65rem;font-weight:800;font-size:.78rem}
.worlds.detail{grid-template-columns:repeat(3,1fr);gap:1.4rem}
.worlds.detail .world img{aspect-ratio:2/1}
@media(max-width:1100px){.worlds{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.worlds,.worlds.detail{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.worlds,.worlds.detail{grid-template-columns:1fr}}

.world{color:inherit}
a.card{display:block;transition:transform .3s,box-shadow .3s}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

/* --- homepage enrichment --- */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--honey);width:0;z-index:100;transition:width .1s linear}
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blobs span{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;animation:blob 14s ease-in-out infinite}
.blobs span:nth-child(1){width:420px;height:420px;background:var(--blush);left:-120px;top:-80px}
.blobs span:nth-child(2){width:360px;height:360px;background:#f6dfb0;right:-80px;top:120px;animation-delay:-5s}
.blobs span:nth-child(3){width:300px;height:300px;background:#dfe9d3;left:38%;bottom:-160px;animation-delay:-9s}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-25px) scale(1.08)}66%{transform:translate(-20px,20px) scale(.95)}}
.card,.world,.book{--mx:50%;--my:50%}
.card::before,.world::before,.book::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(220px circle at var(--mx) var(--my),rgba(233,169,60,.16),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:0}
.card:hover::before,.world:hover::before,.book:hover::before{opacity:1}
.world,.book{position:relative}
.card>*,.world>*,.book>*{position:relative;z-index:1}
.timeline{position:relative;padding-top:1.4rem}
.tl-line{width:100%;height:6px;display:block}
.tl-draw{stroke-dasharray:1000;stroke-dashoffset:1000}
.timeline.in .tl-draw{animation:draw 2.4s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.tl-items{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;margin-top:1.4rem}
.tl{position:relative;padding-top:1.2rem}
.tl::before{content:"";position:absolute;top:-1.4rem;left:0;width:16px;height:16px;border-radius:50%;background:var(--honey);border:3px solid var(--milk);transform:translateY(-8px);box-shadow:0 0 0 2px var(--honey)}
.tl time{font-weight:800;font-size:.85rem;color:var(--honey-deep)}
.tl h3{font-size:1.25rem;margin:.2rem 0 .3rem}
.tl p{font-size:.95rem;color:var(--plum-soft)}
.checks{list-style:none;margin-top:1.2rem}
.checks li{padding:.5rem 0 .5rem 2rem;position:relative;color:var(--plum-soft)}
.checks li::before{content:"✓";position:absolute;left:0;top:.45rem;width:22px;height:22px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:800}
.convo{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;display:flex;flex-direction:column;gap:.7rem}
.msg{max-width:78%;padding:.7rem 1rem;border-radius:18px;font-family:var(--serif);font-size:1.05rem;opacity:0;transform:translateY(8px);animation:msgIn .5s ease forwards}
.msg.kid{background:var(--paper);border-bottom-left-radius:6px;align-self:flex-start}
.msg.grown{background:var(--plum);color:var(--milk);border-bottom-right-radius:6px;align-self:flex-end}
.msg:nth-child(1){animation-delay:.2s}.msg:nth-child(2){animation-delay:.9s}.msg:nth-child(3){animation-delay:1.6s}.msg:nth-child(4){animation-delay:2.3s}.msg:nth-child(5){animation-delay:3s}.msg:nth-child(6){animation-delay:3.7s}
@keyframes msgIn{to{opacity:1;transform:none}}
.turns{margin-top:.5rem;font-weight:800;color:var(--plum-soft);font-size:.9rem;text-align:center}
.turns b{font-family:var(--serif);font-size:1.6rem;color:var(--honey-deep);font-weight:500;margin-right:.3rem}
.anat{width:100%;height:auto}
.page-turn{transform-origin:260px 190px;animation:turn 6s ease-in-out infinite}
@keyframes turn{0%,55%{transform:scaleX(1);opacity:1}75%{transform:scaleX(-.05);opacity:.9}76%,100%{opacity:0}}
.numbers-sec{padding:4rem 0}
.nums{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem}
.num b{font-family:var(--serif);font-size:3.2rem;font-weight:500;display:block;color:var(--honey);line-height:1}
.num>span{display:block;margin-top:.5rem;color:rgba(251,245,236,.8);font-size:.92rem}
.explode{width:100%;height:auto}
.ex{animation:hover 4s ease-in-out infinite;transform-box:fill-box}
.ex2{animation-delay:-1s}.ex3{animation-delay:-2s}.ex4{animation-delay:-3s;animation-duration:3s}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem;position:relative}
.quote::before{content:"\201C";font-family:var(--serif);font-size:4rem;line-height:1;color:var(--blush);position:absolute;top:.6rem;right:1.2rem}
.quote p{font-family:var(--serif);font-size:1.1rem;line-height:1.5}
.quote footer{margin-top:1rem;font-weight:800;font-size:.85rem;color:var(--plum-soft)}
.promises{list-style:none}
.promises li{padding:1rem 0 1rem 2.4rem;border-top:1px solid var(--line);position:relative;color:var(--plum-soft)}
.promises li b{color:var(--plum);display:block;font-family:var(--serif);font-weight:500;font-size:1.2rem;margin-bottom:.2rem}
.promises li::before{content:"✦";position:absolute;left:0;top:1.05rem;color:var(--honey)}
@media(max-width:1000px){.tl-items,.nums{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.tl-items,.nums{grid-template-columns:1fr}.tl::before{display:none}.tl-line{display:none}.blobs span{width:220px!important;height:220px!important}}

/* ===== site-wide polish ===== */
body{opacity:0;transition:opacity .5s ease}
body.loaded{opacity:1}
main h1 .w{display:inline-block;opacity:0;transform:translateY(.4em) rotate(2deg);animation:wIn .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*70ms)}
@keyframes wIn{to{opacity:1;transform:none}}
.rv{transition-delay:var(--d,0ms)}
.sq{display:block;width:120px;height:12px;color:var(--honey);margin-top:.5rem;stroke-dasharray:200;stroke-dashoffset:200;overflow:visible}
.in .sq,.page-head .sq{animation:sqDraw 1.2s ease-out .2s forwards}
@keyframes sqDraw{to{stroke-dashoffset:0}}
.tint-night .sq,.band .sq{color:var(--honey)}
.btn{transform:translate(var(--tx,0),var(--ty,0))}
.btn:hover{animation:none;transform:translate(var(--tx,0),calc(var(--ty,0) - 3px))}
.book,.card{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .35s ease,box-shadow .35s ease}
.book:hover,.card:hover{box-shadow:var(--shadow)}
.world img,.book-cover img,.portrait{clip-path:inset(0 0 0 0 round 0);}
.rv:not(.in) .world img,.rv:not(.in) .book-cover img{clip-path:inset(0 100% 0 0)}
.rv.in .world img,.rv.in .book-cover img{clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.2,.8,.2,1) .1s,transform .5s}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.35rem;height:2px;background:var(--honey);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.prose a{background:linear-gradient(var(--honey),var(--honey)) no-repeat 0 100%/0 2px;text-decoration:none;transition:background-size .3s;padding-bottom:1px}
.prose a:hover{background-size:100% 2px}
.brand svg{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.brand:hover svg{transform:rotate(-8deg) scale(1.08)}
.kicker i{animation:spinStar 6s linear infinite}
@keyframes spinStar{to{transform:rotate(360deg)}}
.doodle-layer{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.dd{position:absolute;width:34px;height:34px;color:var(--rose);opacity:.38;animation:ddFloat 12s ease-in-out infinite}
.dd1{left:4%;top:18%;color:var(--honey);width:26px}
.dd2{right:6%;top:26%;width:56px;animation-delay:-3s}
.dd3{left:8%;top:64%;color:var(--night);width:22px;animation-delay:-6s}
.dd4{right:9%;top:70%;width:46px;color:var(--sage-deep);animation-delay:-9s}
.dd5{left:3%;bottom:8%;color:var(--sage-deep);width:28px;animation-delay:-4s}
.dd6{right:4%;top:48%;color:var(--honey-deep);width:30px;animation-delay:-7s}
@keyframes ddFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-18px) rotate(8deg)}}
.totop{position:fixed;right:1.4rem;bottom:1.4rem;width:48px;height:48px;border-radius:50%;border:0;background:var(--plum);color:var(--milk);display:grid;place-items:center;cursor:pointer;z-index:60;opacity:0;transform:translateY(16px) scale(.9);transition:opacity .3s,transform .3s;box-shadow:var(--shadow)}
.totop svg{width:20px;height:20px}
.totop.show{opacity:1;transform:none}
.totop:hover{background:var(--honey);color:var(--plum)}
.cursor-dot{position:fixed;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--honey);opacity:0;pointer-events:none;z-index:200;mix-blend-mode:multiply;transition:width .25s,height .25s,opacity .3s,margin .25s}
.cursor-dot.on{opacity:.75}
.cursor-dot.big{width:40px;height:40px;margin:-12px 0 0 -12px;opacity:.35}
@media(pointer:coarse){.cursor-dot,.doodle-layer{display:none}}
footer{position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:auto 0 0 0;height:180px;background:radial-gradient(60% 100% at 50% 100%,rgba(240,207,196,.5),transparent 70%);pointer-events:none}
.legal span:first-child::before{content:"✦ ";color:var(--honey)}
details{transition:background .3s,box-shadow .3s}
details[open]{background:var(--milk);box-shadow:inset 3px 0 0 var(--honey)}
summary::after{transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.chip{transition:transform .25s,background .25s}
.chip:hover{transform:rotate(-2deg) scale(1.05);background:var(--paper)}
.pill{transition:transform .25s}
.pill:hover{transform:translateY(-2px)}
::selection{background:var(--honey);color:var(--plum)}
@media(prefers-reduced-motion:reduce){body{opacity:1}main h1 .w{opacity:1;transform:none;animation:none}.sq{stroke-dashoffset:0}.rv:not(.in) .world img,.rv:not(.in) .book-cover img{clip-path:none}}

/* blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.posts.two-col{grid-template-columns:1fr 1fr}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;color:inherit;position:relative;transition:transform .3s,box-shadow .3s}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post.big{grid-column:1/-1;flex-direction:row}
.post.big .post-img{flex:1.2}
.post.big .post-body{flex:1;display:flex;flex-direction:column;justify-content:center}
.post.big h3{font-size:2rem}
.post-img{background:var(--paper);overflow:hidden}
.post-img svg{width:100%;height:auto;display:block;transition:transform .6s}
.post:hover .post-img svg{transform:scale(1.04)}
.post-body{padding:1.4rem 1.6rem 1.7rem}
.post-body h3{font-size:1.4rem;margin:.4rem 0 .5rem}
.post-body p:last-child{color:var(--plum-soft);font-size:.97rem}
.post-meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.82rem;font-weight:800;color:var(--plum-soft)}
.post-meta time{color:var(--honey-deep)}
.post-hero{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.post-hero svg{width:100%;height:auto;display:block}
.prose .btn{text-decoration:none;background:var(--honey)}
@media(max-width:1000px){.posts{grid-template-columns:1fr 1fr}.post.big{flex-direction:column}}
@media(max-width:640px){.posts,.posts.two-col{grid-template-columns:1fr}}

/* film */
.film-sec{padding:5rem 0 3rem;position:relative}
.film{margin:0;position:relative}
.film-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--plum);box-shadow:0 30px 70px -25px rgba(58,42,61,.55),0 0 0 8px #fff,0 0 0 9px var(--line);aspect-ratio:16/9}
.film-frame video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.film-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,42,61,.05),rgba(58,42,61,.35));pointer-events:none;transition:opacity .5s}
.film-frame.playing::after{opacity:0}
.film-corner{position:absolute;width:34px;height:34px;border:3px solid var(--honey);z-index:2;pointer-events:none;transition:transform .4s}
.film-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.film-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.film-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-radius:0 0 0 10px}
.film-corner.br{bottom:14px;right:14px;border-left:0;border-top:0;border-radius:0 0 10px 0}
.film-frame:hover .film-corner.tl{transform:translate(-4px,-4px)}.film-frame:hover .film-corner.tr{transform:translate(4px,-4px)}.film-frame:hover .film-corner.bl{transform:translate(-4px,4px)}.film-frame:hover .film-corner.br{transform:translate(4px,4px)}
.film-play{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:0;background:var(--honey);color:var(--plum);display:grid;place-items:center;cursor:pointer;z-index:3;box-shadow:0 20px 40px -12px rgba(0,0,0,.5);transition:transform .3s,opacity .3s}
.film-play svg{width:40px;height:40px;margin-left:5px}
.film-play:hover{transform:scale(1.08)}
.film-ring{position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--honey);opacity:.7;animation:filmPulse 2.2s ease-out infinite}
@keyframes filmPulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.film-frame.playing .film-play{opacity:0;pointer-events:none;transform:scale(.6)}
.film-badge{position:absolute;right:1.4rem;top:1.4rem;background:rgba(251,245,236,.85);color:var(--plum);font-weight:800;font-size:.8rem;padding:.3rem .7rem;border-radius:999px;z-index:2;backdrop-filter:blur(6px)}
.film-frame.playing .film-badge{opacity:0}
.film figcaption{text-align:center;color:var(--plum-soft);font-size:.95rem;margin-top:1.4rem;font-style:italic}
.film-doodles span{position:absolute;z-index:3}
@media(max-width:1300px){.film-doodles{display:none}}
@media(max-width:640px){.film-play{width:68px;height:68px;margin:-34px 0 0 -34px}.film-play svg{width:28px;height:28px}.film-corner{width:22px;height:22px}}