:root{--ink:#3A2E25;--cream:#F4EDE1;--ginger:#B57E35;--leaf:#6B7F4E;--acc:var(--ginger);--paper:#FBF7F0}
.t-daily{--acc:#8a6a80}
*{box-sizing:border-box;margin:0}
body{background:var(--cream);color:var(--ink);font:400 18px/1.55 "Bricolage Grotesque",Georgia,sans-serif;overflow-x:hidden}
i{font-family:"DM Sans",sans-serif;font-weight:400}
img{max-width:100%;display:block}
a{color:inherit}
.sr{position:absolute;left:-9999px}
.mono,.kicker,.small,.fine,.ticker{font-family:"DM Sans",sans-serif;letter-spacing:.04em}
.kicker{text-transform:uppercase;font-size:13px;color:var(--acc)}
.ticker{background:var(--ink);color:var(--cream);font-size:12px;white-space:nowrap;overflow:hidden;padding:7px 0}
.track{display:inline-flex;animation:tick 40s linear infinite}.track span{padding-right:1.5em}
@keyframes tick{to{transform:translateX(-50%)}}
.nav{display:flex;justify-content:space-between;align-items:center;padding:18px 5vw;position:sticky;top:0;z-index:9;background:color-mix(in srgb,var(--cream) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1.5px solid var(--ink)}
.logo{font-weight:800;font-size:28px;text-decoration:none;letter-spacing:-.03em}.logo i{color:var(--acc);font-size:1.1em}
.nav nav{display:flex;gap:26px;align-items:center}.nav nav a{text-decoration:none;font-weight:600;font-size:15px}
.nav nav a:not(.pill):hover{color:var(--acc)}
.pill,.btn{background:var(--ink);color:var(--cream)!important;padding:10px 20px;border-radius:99px;text-decoration:none;font-weight:600;display:inline-block;transition:transform .25s,background .25s}
.pill:hover,.btn:hover{background:var(--acc);transform:rotate(-3deg) scale(1.05)}
.lnk{font-weight:600;text-decoration:none;border-bottom:2px solid var(--acc);padding-bottom:2px}
.cta{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:28px}
h1,h2,h3{font-weight:800;letter-spacing:-.04em;line-height:.92}
h1 i,h2 i{color:var(--acc);letter-spacing:-.02em}
/* hero */
.hero{background:var(--ink);color:var(--cream);padding:6vw 5vw 5vw;position:relative;overflow:hidden}
.hero h1{font-size:clamp(64px,13vw,210px);margin:18px 0 40px;position:relative;z-index:2}
.hero h1 span{display:block;animation:up .9s cubic-bezier(.2,.8,.2,1) both}
.hero .l2{animation-delay:.12s;padding-left:8vw;font-size:1.08em}.hero .l3{animation-delay:.24s;text-align:right}
@keyframes up{from{opacity:0;transform:translateY(60px)}}
.leaf{position:absolute;right:-60px;top:40px;width:520px;fill:var(--leaf);opacity:.55;transform:rotate(25deg);animation:sway 8s ease-in-out infinite alternate}
.leaf path+path{stroke:var(--ink);stroke-width:2}
@keyframes sway{to{transform:rotate(15deg) translateY(10px)}}
.herogrid{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:end;position:relative;z-index:2}
.lede{font-size:21px;max-width:34em}
.hero .lnk{color:var(--cream)}.hero .btn{background:var(--ginger);color:var(--ink)!important}
.duo{grid-row:1/3;grid-column:2;filter:drop-shadow(0 30px 40px #0008);transform:rotate(-4deg)}
.two{display:grid;grid-template-columns:1fr 1fr;border-bottom:1.5px solid var(--ink)}
.two div{padding:5vw;border-right:1.5px solid var(--ink)}.two div:last-child{border:0}
.num{font:400 90px/1 "DM Sans";color:var(--ginger);display:block}
.two h3{font-size:42px;margin:10px 0 16px}
.blends{padding:7vw 5vw;display:grid;grid-template-columns:1fr 1fr;gap:3vw}
.blends h2{grid-column:1/3;font-size:clamp(60px,10vw,160px)}
.card{display:grid;grid-template-columns:45% 1fr;gap:20px;align-items:center;padding:30px;border-radius:28px;text-decoration:none;color:var(--cream);transition:transform .4s}
.card.ease{background:var(--ginger);color:var(--ink)}.card.daily{background:#7a2f66;margin-top:80px}
.card:hover{transform:translateY(-10px) rotate(-1deg)}.card img{transition:transform .5s}.card:hover img{transform:rotate(-6deg) scale(1.06)}
.card h3{font-size:36px;margin:8px 0}.go{display:inline-block;margin-top:12px;font-weight:800;border-bottom:2px solid}
.story{background:var(--leaf);color:var(--cream);padding:8vw 5vw;display:grid;grid-template-columns:1fr 1fr;gap:5vw}
.story h2{font-size:clamp(48px,7vw,110px)}.story h2 i{color:var(--paper)}.story p{font-size:21px}
.story .lnk{border-color:var(--cream);justify-self:start}
.disc{font-size:13px;opacity:.8;margin-top:24px;grid-column:1/-1}
.wait{padding:8vw 5vw;text-align:center;background:var(--paper)}
.wait h2{font-size:clamp(48px,8vw,120px);margin-bottom:20px}
.signup{display:flex;max-width:560px;margin:28px auto 12px;border:2px solid var(--ink);border-radius:99px;overflow:hidden}
.signup input{flex:1;border:0;padding:16px 22px;font:inherit;background:transparent;min-width:0}
.signup button{border:0;background:var(--ink);color:var(--cream);font:600 16px "Bricolage Grotesque";padding:0 24px;cursor:pointer}
.signup button:hover{background:var(--acc)}
.small{font-size:13px;opacity:.75}
footer{background:var(--ink);color:var(--cream);padding:5vw 5vw 3vw;overflow:hidden}
.bigword{font-weight:800;font-size:22vw;line-height:.8;letter-spacing:-.06em;color:var(--ginger)}.bigword i{color:var(--paper)}
.tag{font-weight:600;margin:20px 0}.fine{font-size:12px;opacity:.75;margin-top:10px;max-width:80em}
/* product */
.phero{display:grid;grid-template-columns:1.1fr .9fr;min-height:80vh;border-bottom:1.5px solid var(--ink)}
.ptext{padding:5vw;position:relative;overflow:hidden}
.giant{position:absolute;font-weight:800;font-size:28vw;line-height:.8;letter-spacing:-.07em;color:var(--acc);opacity:.12;bottom:-3vw;left:-1vw;pointer-events:none}
.phero h1{font-size:clamp(52px,7vw,116px);margin:24px 0;position:relative}
.ptext .lede{position:relative}
.pimg{background:var(--acc);position:relative;display:grid;place-items:center;padding:5vw}
.pimg img{max-height:520px;filter:drop-shadow(0 30px 30px #0006);transform:rotate(3deg)}
.pimg .stick{position:absolute;width:24%;right:6%;bottom:8%;transform:rotate(-18deg);animation:sway2 5s ease-in-out infinite alternate}
@keyframes sway2{to{transform:rotate(-10deg) translateY(-14px)}}
.pbody{padding:6vw 5vw;display:grid;grid-template-columns:1.3fr 1fr;gap:5vw;align-items:start}
.long{font-size:clamp(22px,2.2vw,30px);line-height:1.35}
.facts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.facts li{border:1.5px solid var(--ink);border-radius:99px;padding:8px 16px;font:500 14px "DM Sans";transition:.2s}
.facts li:hover{background:var(--acc);color:var(--cream);border-color:var(--acc)}
.pbody .small{grid-column:2;margin-top:-3vw}
.prices{background:var(--ink);color:var(--cream);padding:6vw 5vw}
.pr{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #f5ead64d;padding:18px 0;gap:20px}
.pr b{font:400 clamp(40px,6vw,88px)/1 "DM Sans"}.t-ease .pr b{color:var(--ginger)}.t-daily .pr b{color:#e9a6d4}
.prices .btn{background:var(--cream);color:var(--ink)!important;margin-top:24px}.prices .small{margin-top:16px}
.how,.faq{padding:6vw 5vw;display:grid;grid-template-columns:1fr 2fr;gap:5vw}
.how h2,.faq h2{font-size:clamp(48px,6vw,96px)}
.how ol{list-style:none;padding:0}.how li{display:flex;gap:24px;padding:18px 0;border-top:1.5px solid var(--ink);font-size:21px}
.how li span{font:400 40px/1 "DM Sans";color:var(--acc);min-width:50px}
.faq{background:var(--paper);row-gap:0}.faq details{grid-column:2}.faq details{border-top:1.5px solid var(--ink);padding:18px 0}.faq h2{grid-row:1/9}
summary{font-weight:600;font-size:21px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
summary::after{content:"+";color:var(--acc);font-size:28px;transition:transform .3s}details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:10px;max-width:40em}
/* about */
.ahero{background:var(--ginger);padding:8vw 5vw 6vw}.ahero .kicker{color:var(--ink)}
.ahero h1{font-size:clamp(64px,14vw,230px)}.ahero h1 i{color:var(--cream)}
.essay{max-width:820px;margin:0 auto;padding:6vw 5vw;font-size:22px}
.essay p{margin-bottom:24px}.drop::first-letter{font:400 120px/.8 "DM Sans";float:left;color:var(--ginger);margin:8px 12px 0 0}
blockquote{font:400 clamp(36px,5vw,64px)/1.05 "DM Sans";margin:48px -6vw;padding:30px 0;border-block:1.5px solid var(--ink)}
blockquote i{color:var(--ginger)}
.essay img{border-radius:200px 200px 20px 20px;margin:40px 0;width:100%;aspect-ratio:4/3;object-fit:cover}
.big{font-weight:800;font-size:34px;line-height:1.1;letter-spacing:-.02em}
.rv{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s}.rv.in{opacity:1;transform:none}
@media print{.rv{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
@media (max-width:820px){
 body{font-size:17px}.nav{padding:14px 5vw}.nav nav{gap:14px}.nav nav a{font-size:13px}.logo{font-size:22px}.pill{padding:8px 12px}
 .herogrid,.two,.blends,.story,.phero,.pbody,.how,.faq{grid-template-columns:1fr}
 .duo{grid-row:auto;grid-column:auto}.hero .l2{padding-left:0}.leaf{width:260px;right:-80px}
 .two div{border-right:0;border-bottom:1.5px solid var(--ink)}.blends h2{grid-column:auto}.card{grid-template-columns:1fr}.card.daily{margin-top:0}.card img{max-width:220px;margin:auto}
 .pbody .small{grid-column:auto;margin-top:0}.faq h2{grid-row:auto}.pr{flex-direction:column;gap:4px}
 blockquote{margin:36px 0}.essay{font-size:19px}.signup{flex-direction:column;border-radius:20px}.signup button{padding:14px}
}
@media (max-width:420px){.nav nav a[href="about.html"]{display:none}}
@media (max-width:820px){.faq details{grid-column:auto}.faq h2{margin-bottom:20px}}
.giant{position:static;opacity:.18;font-size:clamp(90px,16vw,240px);margin-top:3vw;line-height:.85}
.pr{display:grid;grid-template-columns:1fr auto auto;align-items:center}
.pr span{font-size:17px;color:var(--cream);opacity:1;font-weight:600}
.rowcta{font:500 15px "DM Sans";color:var(--cream);text-decoration:none;border:1.5px solid #f5ead699;border-radius:99px;padding:8px 16px;white-space:nowrap;transition:.2s}
.rowcta:hover{background:var(--cream);color:var(--ink)}
.disc{font-size:15px;opacity:1;line-height:1.5}
.prices .disc,.story .disc{color:var(--cream)}
.fine{font-size:14px;opacity:.92}
.prices .small{opacity:.9;font-size:15px}
.bigword{white-space:nowrap;font-size:min(22vw,330px)}
@media (max-width:820px){.pr{grid-template-columns:1fr;gap:8px}.pr span{font-size:16px}.rowcta{justify-self:start;font-size:14px}.bigword{font-size:20vw}}
/* soft palette overrides */
.ticker{background:#EFE3D0;color:#3A2E25}
.hero{background:#f1e7d6;color:var(--ink)}.hero .lnk{color:var(--ink)}.hero .btn{background:var(--ink);color:var(--cream)!important}
.card{color:var(--ink);border:1.5px solid #e4d6bf}.card.ease{background:#fbf3ea;color:var(--ink);border-top:8px solid var(--ginger)}.card.daily{background:#f7f1f4;color:var(--ink);border-top:8px solid #8a6a80}
.story{background:#e9eee2;color:var(--ink)}
.pimg{background:color-mix(in srgb,var(--acc) 22%,var(--cream))}
.ahero{background:#f6e6d6}
.t-ease .pr b{color:#e8b48c}.t-daily .pr b{color:#d9bfd0}
.facts li:hover{color:var(--ink)}
h1 i,h2 i,.logo i{color:#B57E35}.t-daily h1 i,.t-daily h2 i{color:#7d5a72}
.story h2 i{color:#B57E35}.story .lnk{border-color:var(--ink)}.story .disc{color:var(--ink)}
.ahero h1 i{color:#B57E35}
.bigword{color:var(--ginger)}
.kicker{color:#8A5A1F}.t-daily .kicker{color:#7d5a72}
.num,.how li span,.drop,details summary::after{color:#B57E35}
.t-daily .num,.t-daily .how li span,.t-daily details summary::after{color:#7d5a72}
.drop::first-letter{color:#B57E35}
.ghero{padding:7vw 5vw 3vw;max-width:980px}.ghero h1{font-size:clamp(44px,7vw,96px);margin:10px 0 20px}
.guide{max-width:720px;padding:0 5vw 6vw;margin-left:5vw}.guide h2{font-size:34px;margin:44px 0 14px}.guide p{margin-bottom:14px}.guide a{color:#8A5A1F}
.gcta{margin:44px 0;padding:28px;border:1.5px solid #e4d6bf;border-radius:24px;background:#fbf3ea}.related ul{list-style:none;padding:0}.related li{padding:10px 0;border-bottom:1px solid #e4d6bf}
.ghub{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;padding:0 5vw 7vw}.gcard{display:block;padding:28px;border:1.5px solid #e4d6bf;border-top:8px solid var(--ginger);border-radius:24px;text-decoration:none;color:var(--ink);background:#fbf3ea}.gcard h3{font-size:28px;margin:10px 0}
@media(max-width:800px){.guide{margin-left:0}}
/* readability: one body font */
body{font-family:"DM Sans",Arial,sans-serif;font-size:18px;line-height:1.65}
h1,h2,h3,.brand{font-family:"Bricolage Grotesque",sans-serif}
i,em{font-family:inherit!important;font-style:normal!important}
.mono,.kicker,.small,.fine,.ticker{font-family:"DM Sans",Arial,sans-serif;letter-spacing:.01em}
.small,.fine{font-size:14px}
.pill:hover,.btn:hover,.signup button:hover{color:var(--ink)}
.ghero,.ghub{max-width:1100px;margin-left:auto;margin-right:auto}.guide{display:block;width:100%;max-width:760px;margin:0 auto!important;box-sizing:border-box}
.ghero{max-width:760px;box-sizing:border-box}.ghero h1{font-size:clamp(40px,5vw,72px)}
.ghero.gwide{max-width:1100px;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.ghero.gwide img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px}
.gend{max-width:1100px;margin:0 auto;padding:0 5vw 3vw;box-sizing:border-box}
.gend .gcta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 40px}
.gend .related ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.gend .related li{border:1.5px solid #e4d6bf;border-radius:18px;padding:20px;background:#fbf3ea}
.gend .related a{color:var(--ink);text-decoration:none;font-weight:600}
@media(max-width:800px){.ghero.gwide{grid-template-columns:1fr;gap:28px}.gend .gcta{display:block}}
body.gpage{background-image:url(img/deco-l.svg),url(img/deco-r.svg);background-repeat:no-repeat;background-position:left -40px top 180px,right -40px top 520px;background-size:clamp(120px,14vw,320px) auto;background-attachment:fixed}
body.gpage>*{position:relative}
body:has(.guide) :is(.ghero,.guide,.gend){}
@media(max-width:1100px){body.gpage{background-image:none}}
@media(min-width:1700px){body.gpage{zoom:1.2}}
@media(min-width:2200px){body.gpage{zoom:1.45}}
.guide{max-width:780px;font-size:18px;line-height:1.7}
.ghub{max-width:1300px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.gcard{overflow:hidden;padding:0 0 26px}.gcard img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;margin-bottom:18px}.gcard>:not(img){margin-left:26px;margin-right:26px}
.ghero.gwide{max-width:1300px;grid-template-columns:1fr 1fr}
@media(min-width:2000px){body.gpage{zoom:1.6}}@media(min-width:2800px){body.gpage{zoom:2}}
body.gpage{background-position:left -30px center,right -30px center!important;background-size:auto 85vh!important}
body.gpage{background-image:none!important}
.floaties{position:fixed;inset:0;pointer-events:none;z-index:0}
.fl{position:absolute;width:clamp(110px,9vw,200px);transform:translate(-50%,-50%);animation:drift 9s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(-50%,-50%) rotate(-6deg)}50%{transform:translate(-50%,calc(-50% - 18px)) rotate(6deg)}}
@media(prefers-reduced-motion:reduce){.fl{animation:none}}
.floaties{position:absolute!important;inset:0 0 auto 0!important;height:100%;overflow:hidden}
body.gpage{position:relative}
.fl{width:clamp(70px,5.5vw,120px)!important}
.signup.wl{display:block;border:0;border-radius:0;max-width:560px;overflow:visible}
.wl .wrow{display:flex;border:2px solid var(--ink);border-radius:99px;overflow:hidden}
.wl .wrow input{flex:1;border:0;padding:16px 22px;font:inherit;background:transparent;min-width:0}
.wl .wrow input+input{border-left:2px solid var(--ink)}
.wl .flv{border:0;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.wl .flv legend{width:100%;margin-bottom:10px;font-weight:600}
.wl .flv label{border:1.5px solid var(--ink);border-radius:99px;padding:8px 16px;cursor:pointer}
.wl .flv input{accent-color:var(--ink);margin-right:6px}
.wl button{display:block;margin:20px auto 0;border-radius:99px;padding:15px 30px}
.wl .err{color:#a33;margin-top:10px}
.ok{font-size:20px;font-weight:600;margin:28px 0}
@media(max-width:700px){.wl .wrow{flex-direction:column;border-radius:20px}.wl .wrow input+input{border-left:0;border-top:2px solid var(--ink)}}