@font-face{font-family:Instrument;src:url('brand/fonts/InstrumentSans-Roman.woff2') format('woff2');font-weight:100 900;font-display:swap}@font-face{font-family:Fraunces;src:url('brand/fonts/Fraunces-Italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}@font-face{font-family:Fraunces;src:url('brand/fonts/Fraunces-Roman.woff2') format('woff2');font-weight:100 900;font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;color:#191916;background:#ffad48;font-family:Instrument,Arial,sans-serif}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}button{color:inherit;font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:6px}.skip{position:absolute;top:-100px;background:#fff;padding:16px;z-index:10}.skip:focus{top:0}.site-head{padding:22px 3%;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid currentColor}.brand{font-family:Fraunces,Georgia,serif;font-size:36px;letter-spacing:-2px;text-decoration:none}.brand span{font:12px Instrument;vertical-align:top;letter-spacing:0}.site-head nav{display:flex;gap:25px;font-size:14px}.site-head nav a{text-decoration:none}#motion{background:none;border:1px solid currentColor;padding:9px;font:11px monospace;cursor:pointer}.chapter{padding:72px 5% 100px;overflow:hidden;position:relative}.eyebrow,.steps article>span,.chapter-divider,.small,.text-link,.footer-bottom{font-family:monospace;font-size:12px;line-height:1.5;letter-spacing:.03em}.eyebrow{text-transform:uppercase;display:block;margin-bottom:48px}h1,h2,h3,p{margin:0}h1,h2{font-weight:800;letter-spacing:-.065em;line-height:.92}h2{font-size:clamp(62px,9.2vw,150px)}em{font-family:Fraunces,Georgia,serif;font-weight:500}p{font-size:18px;line-height:1.55;margin:0 0 24px}h3{font-size:27px;line-height:1.15;letter-spacing:-.04em;margin-bottom:18px}.hero{padding-top:36px;padding-bottom:32px;min-height:calc(100svh - 90px)}.hero-top,.hero-bottom{display:flex;justify-content:space-between;gap:40px;align-items:start}.hero-top .eyebrow{margin:0}.hero-top p,.hero-bottom p{font-family:Fraunces;font-size:22px;line-height:1.2;max-width:310px}.hero h1{font-size:clamp(95px,18.4vw,300px);margin:38px 0 0;line-height:.86;position:relative;z-index:1}.hero-line{display:block;letter-spacing:-.07em}.hero-line.second{text-align:right}.hero-line em{font-weight:750}.hero-scribble{width:84%;height:auto;margin:-12px 6% -30px}.hero-bottom{align-items:end}.hero-bottom p{font-size:18px}.intro{background:#f2efdf}.intro h2{font-size:clamp(55px,7.7vw,126px)}.crossed{position:relative}.crossed:after{content:'';position:absolute;height:4px;background:currentColor;left:-2%;right:-2%;top:55%;transform:rotate(-4deg)}.offset-copy{max-width:610px;width:49%;margin:60px 0 0 auto}.lead{font-family:Fraunces;font-size:clamp(26px,2.6vw,40px);line-height:1.18;letter-spacing:-.03em}.text-link{display:inline-block;margin:12px 0;text-transform:uppercase}.loops{background:#bfbded}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center}.hand{font-family:Fraunces,Georgia,serif;font-style:italic;transform:rotate(-7deg);font-size:30px;margin:35px 0}.ink-art{width:100%;height:auto;overflow:visible;stroke-width:3.5}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:90px;border-top:1px solid;padding-top:28px}.steps article>span{display:block;margin-bottom:25px}.steps p{font-size:17px}.chapter-divider{display:flex;justify-content:space-between;padding:24px 5%;background:#dddfa4;border-bottom:1px solid}.nutrition{background:#dddfa4}.exercise{background:#f29372}.sleep{background:#aebde8}.stress{background:#f5c4d3}.pillar .eyebrow{margin-bottom:30px}.pillar-copy{max-width:420px;margin-top:55px}.pillar-copy p{font-size:19px}.slant{display:inline-block;font-style:italic;font-weight:500;letter-spacing:-.075em}.exercise h2{font-size:clamp(58px,7.6vw,125px)}.support{background:#eddfab}.daily{display:grid;grid-template-columns:1fr 100px 1fr;gap:40px;margin-top:90px;border-top:1px solid;padding-top:40px}.daily .eyebrow{margin-bottom:20px}.daily h3{font-family:Fraunces;font-size:55px;font-weight:500}.daily-arrow{font-family:Georgia;font-size:100px}.daily p{font-style:italic}.start{background:#ffad48}.start h2{font-size:clamp(100px,18vw,280px)}.note{position:absolute;font-size:clamp(22px,3vw,48px);font-weight:400;letter-spacing:-.03em;left:64%;top:37%;transform:rotate(-10deg)}.button{display:inline-block;border:1px solid;border-radius:100px;padding:20px 30px;font-size:20px;text-decoration:none;margin:12px 0 18px}.button:hover{background:#191916;color:#ffad48}.honest{background:#e8e7da}.honest h2{font-size:clamp(50px,6.7vw,105px)}details{border-top:1px solid;border-bottom:1px solid;padding:20px 0;margin:25px 0}summary{cursor:pointer;font-size:20px}details p{margin-top:20px}footer{background:#c2d3c4;padding:50px 5% 24px}.footer-top{display:flex;justify-content:space-between;margin-bottom:50px}.footer-top .brand{font-size:80px}.footer-top p{font-family:Fraunces;font-size:24px}footer nav{display:grid;grid-template-columns:repeat(5,1fr);gap:25px;margin-bottom:60px;font-size:14px}.footer-bottom{border-top:1px solid;padding-top:20px;display:flex;justify-content:space-between}.draw{stroke-dasharray:1900;stroke-dashoffset:0}.animate .in-view .draw{animation:draw 3s ease both}.animate .in-view .walker{transform-origin:300px 330px;animation:walk 3s ease-in-out infinite}.animate .in-view .breathe{transform-origin:center;animation:breathe 6s ease-in-out infinite}.animate .in-view .drift{animation:drift 4s ease-in-out infinite}.animate .in-view .hero-line.second{animation:arrive 1s ease both}@keyframes draw{from{stroke-dashoffset:1900}to{stroke-dashoffset:0}}@keyframes walk{50%{transform:rotate(4deg) translateY(-8px)}}@keyframes breathe{50%{transform:scale(.9)}}@keyframes drift{50%{transform:translateY(-12px)}}@keyframes arrive{from{transform:translateX(40px)}to{transform:translateX(0)}}@media(max-width:760px){.site-head{flex-wrap:wrap;padding:18px 5%;gap:14px}.brand{font-size:30px}.site-head nav{order:3;width:100%;justify-content:space-between;gap:10px;font-size:11px}.site-head #motion{margin-left:auto}.chapter{padding:50px 6% 65px}.hero{min-height:auto}.hero-top p{font-size:17px;max-width:170px}.hero-top .eyebrow{font-size:10px}.hero h1{font-size:20.3vw;margin:50px 0 15px}.hero-scribble{margin-bottom:0}.hero-bottom{gap:15px}.hero-bottom p{font-size:14px;max-width:160px}.hero-bottom .text-link{font-size:10px;max-width:120px}.two-col{grid-template-columns:1fr}.ink-art{width:85%;margin:25px auto 0;max-height:330px}.offset-copy{width:100%;margin-top:40px}.steps{grid-template-columns:1fr;gap:28px;margin-top:30px}.steps article{border-bottom:1px solid;padding-bottom:15px}.steps article>span{margin-bottom:12px}.eyebrow{margin-bottom:35px}.pillar h2{font-size:18vw}.pillar-copy{margin-top:32px}.daily{grid-template-columns:1fr;gap:20px;margin-top:55px}.daily-arrow{display:none}.daily h3{font-size:42px}.start h2{font-size:28vw}.note{left:59%;top:26%;font-size:24px}.chapter-divider{font-size:10px}.footer-top .brand{font-size:52px}.footer-top p{font-size:16px}footer nav{grid-template-columns:repeat(2,1fr)}.footer-bottom{font-size:10px}p{font-size:17px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Five distinct voices: grotesk, expressive serif, condensed display, hand and mono. */
@font-face{font-family:Caveat;src:url('brand/fonts/Caveat.ttf') format('truetype');font-weight:400 700;font-display:swap}@font-face{font-family:BarlowCondensed;src:url('brand/fonts/BarlowCondensed-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}.hand{font-family:Caveat,cursive;font-style:normal;font-weight:600;font-size:44px}.note{font-size:clamp(30px,4vw,62px)}.loops h2>em{font-family:Caveat,cursive;font-weight:700;font-size:1.22em;letter-spacing:-.04em}.nutrition h2,.exercise h2{font-family:BarlowCondensed,Impact,sans-serif;text-transform:uppercase;letter-spacing:-.025em;font-size:clamp(72px,11vw,175px)}.nutrition h2 em{text-transform:none;font-size:.85em}.exercise .slant{font-family:BarlowCondensed,Impact,sans-serif;font-weight:800;font-style:normal;transform:rotate(-5deg);letter-spacing:-.025em;font-size:.87em}.sleep h2{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.06em}.stress h2 em{font-family:Caveat,cursive;font-weight:600;font-size:1.15em}.start h2{font-family:BarlowCondensed,Impact,sans-serif;text-transform:uppercase;letter-spacing:-.025em}.start h2 em{font-family:Caveat,cursive;text-transform:none;letter-spacing:-.055em}@media(max-width:760px){.nutrition h2,.exercise h2{font-size:23vw}.hand{font-size:36px}.note{font-size:30px}}

/* ── Type and motion pass, 2026-11-12. Everything below is additive: with Motion off, or with no script, the page is the static page above. ── */
:root{--ease:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--head-bg:#ffad48}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal;font-optical-sizing:auto;scroll-padding-top:96px}
::selection{background:#191916;color:#ffad48}
h1,h2,h3,.lead{text-wrap:balance}p{text-wrap:pretty}
.eyebrow,.steps article>span,.small,.text-link,.footer-bottom{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.07em}
.skip{z-index:60}
body:after{content:'';position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.5;background: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 .1 0 0 0 0 .1 0 0 0 0 .09 0 0 0 .32 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Header: sticks, takes the colour of the chapter under it, steps aside on the way down. */
.site-head{position:sticky;top:0;z-index:30;background:var(--head-bg);transition:background-color .7s var(--ease),transform .55s var(--ease-out)}
.site-head.is-hidden{transform:translateY(-102%)}
.site-head:focus-within{transform:none}
.site-head:after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:3px;background:currentColor;transform-origin:0 50%;transform:scaleX(var(--progress,0))}
.site-head nav a,footer nav a{text-decoration:none;padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease-out)}
.site-head nav a:hover,footer nav a:hover,.site-head nav a:focus-visible,footer nav a:focus-visible{background-size:100% 1px}
footer nav a{justify-self:start}
.brand{display:inline-block;transition:letter-spacing .6s var(--ease-out)}
.site-head .brand:hover{letter-spacing:-.5px}
#motion{font-family:ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;border-radius:100px;padding:9px 14px;transition:background-color .3s,color .3s}
#motion:hover{background:#191916;color:var(--head-bg)}
.text-link{transition:text-underline-offset .35s var(--ease-out),letter-spacing .5s var(--ease-out)}
.text-link:hover{text-underline-offset:9px;letter-spacing:.11em}
.button{background:linear-gradient(#191916,#191916) 50% 100%/100% 0 no-repeat;transition:background-size .55s var(--ease-out),color .35s,letter-spacing .55s var(--ease-out)}
.button:hover{background:linear-gradient(#191916,#191916) 50% 100%/100% 100% no-repeat;color:#ffad48;letter-spacing:.01em}
summary{transition:letter-spacing .5s var(--ease-out)}summary:hover{letter-spacing:.01em}

/* Headlines rise word by word out of their own baseline. */
.w{display:inline-block;clip-path:inset(-.14em -.25em -.17em -.25em)}
.wi{display:inline-block;transform-origin:0 100%}
.animate .split:not(.is-in) .wi{transform:translateY(120%) rotate(5deg)}
.animate .split.is-in .wi{animation:rise 1.15s var(--ease-out) both;animation-delay:calc(var(--i)*75ms + var(--wait,0ms))}
@keyframes rise{from{transform:translateY(120%) rotate(5deg)}to{transform:none}}
.split em{transition:font-weight 1.6s var(--ease-out) .35s}
.animate .split:not(.is-in) em{font-weight:200}
.crossed:after{transform-origin:0 50%;transition:transform .8s var(--ease) 1.05s}
.animate .split:not(.is-in) .crossed:after{transform:rotate(-4deg) scaleX(0)}
.split.is-in .crossed .wi{transition:opacity .8s 1.5s}.animate .split.is-in .crossed .wi{opacity:.55}

/* The hand writes itself on. */
.animate .hand{clip-path:inset(-30% 105% -30% -5%);transition:clip-path 1.2s var(--ease) .75s}
.animate .hand.is-in,.animate .is-in .hand{clip-path:inset(-30% -8% -30% -5%)}

/* Mono labels are typed. */
.animate .typed:not(.is-in) .c{opacity:0}
.animate .typed.is-in .c{animation:type .01s linear both;animation-delay:calc(var(--i)*20ms + var(--wait,0ms))}
@keyframes type{from{opacity:0}to{opacity:1}}

/* Lead lines ink in as they are read. */
.sw{opacity:var(--o,1);transition:opacity .3s linear}

/* Supporting copy settles in behind the headline. */
.rise{transition:opacity 1s var(--ease),transform 1.2s var(--ease-out);transition-delay:calc(var(--d,0)*95ms + var(--wait,0ms))}
.animate .rise:not(.is-in){opacity:0;transform:translateY(30px)}
.steps,.daily{border-top:0;position:relative}
.steps:before,.daily:before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:currentColor;transform-origin:0 50%;transition:transform 1.5s var(--ease)}
.animate .steps:not(.is-in):before,.animate .daily:not(.is-in):before{transform:scaleX(0)}
.steps article h3,.pillar-copy h3{transition:letter-spacing .6s var(--ease-out)}
.steps article:hover h3{letter-spacing:-.02em}

/* Hero: the two lines lean toward each other as the page leaves. */
.animate .in-view .hero-line.second{animation:none}
.hero-line{transform:translate3d(calc(var(--p,0)*9vw),0,0);will-change:transform}
.hero-line.second{transform:translate3d(calc(var(--p,0)*-9vw),0,0)}
.hero-line em{padding-left:.045em}.brand .w,.brand .wi{font:inherit;letter-spacing:inherit;vertical-align:baseline}.hero h1{--wait:120ms}.hero-top{--wait:700ms}.hero-bottom{--wait:1100ms}
.animate .in-view .hero-scribble .draw{animation-delay:.85s;animation-duration:2.4s}
.ink-art{transform:translate3d(0,calc(var(--py,0)*1px),0)}

/* The divider becomes a running band. */
.chapter-divider.has-marquee{display:block;padding:0;overflow:hidden;border-top:1px solid}
.chapter-divider.has-marquee>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.marquee{display:flex;width:max-content;padding:.1em 0 .14em;will-change:transform;font-family:BarlowCondensed,Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(64px,10.5vw,165px);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.marquee span{display:flex;align-items:baseline}
.marquee i{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.045em;padding:0 .3em 0 .28em}
.marquee b{font-family:Caveat,cursive;font-weight:700;text-transform:none;padding-right:.3em;transform:translateY(.06em)}

/* Footer: the name, at full width. */
.footer-top{display:block;margin-bottom:44px}
.footer-top .brand{display:block;font-size:clamp(64px,20.5vw,360px);line-height:.84;letter-spacing:-.065em;margin:0 0 34px -.035em;white-space:nowrap}
.footer-top .brand .w{clip-path:inset(-.1em -.1em -.2em -.1em)}
.footer-top .brand.split.is-in .wi{animation-delay:calc(var(--i)*55ms)}
footer{overflow:hidden}
@media(max-width:760px){html{scroll-padding-top:120px}.footer-top .brand{font-size:20.5vw}.marquee{font-size:19vw}.hero-line{transform:translate3d(calc(var(--p,0)*5vw),0,0)}.hero-line.second{transform:translate3d(calc(var(--p,0)*-5vw),0,0)}}
@media(prefers-reduced-motion:reduce){.site-head{transition:none}}

/* ── Reference pass, 2026-11-12: drawn letters, cut paper, sketchbook notes, line wobble. ── */
.ink-art,.hero-scribble{filter:url(#wob)}
.scrib{display:inline-block;width:.6em;height:.6em;vertical-align:-.035em;overflow:visible;stroke-width:10.5;margin:0 .02em 0 .04em;filter:url(#wob)}
.scrib-oo{width:1.2em;stroke-width:9.5}.scrib-o{width:.66em;height:.66em;vertical-align:-.06em}
.scrib path{stroke-dasharray:1;stroke-dashoffset:0}
.animate .split:not(.is-in) .scrib path{stroke-dashoffset:1}
.animate .split.is-in .scrib path{animation:scrib 2.4s var(--ease) .75s both}
@keyframes scrib{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.cutword{white-space:nowrap;filter:url(#wob)}
.cut{display:inline-block;background:#191916;color:#ffad48;padding:.03em .07em 0;margin-right:.03em;line-height:.88;letter-spacing:0}
.cut0{clip-path:polygon(4% 0,100% 5%,95% 100%,0 96%);transform:rotate(-2deg)}
.cut1{clip-path:polygon(0 6%,94% 0,100% 94%,7% 100%);transform:translateY(.05em) rotate(1.5deg);padding-top:.1em}
.cut2{clip-path:polygon(9% 3%,100% 0,90% 100%,0 97%);transform:translateY(-.04em) rotate(-1deg)}
.cut3{clip-path:polygon(0 0,96% 5%,100% 100%,4% 93%);transform:translateY(.03em) rotate(2.5deg);padding-bottom:.05em}
.cut4{clip-path:polygon(3% 7%,97% 0,100% 91%,0 100%);transform:rotate(-1.5deg)}
.ink-fig{min-width:0}.ink-fig .ink-art{display:block}
.cap{display:block;font-size:clamp(24px,2.5vw,36px);margin:4px 8% 0 0;text-align:right;transform:rotate(-4deg)}
.stamp{position:absolute;top:60px;right:5%;margin:0;font-size:clamp(22px,2.2vw,32px);line-height:1.02;transform:rotate(3deg)}
@media(max-width:760px){.stamp{top:38px;right:6%;font-size:21px}.cap{font-size:26px;margin-right:10%}.start .cutword{font-size:.86em}}

/* ── The existing Essential wordmark (brand/wordmark.svg), in ink, in the header and at full width in the footer. The link text stays for assistive tech. ── */
.site-head .brand,.footer-top .brand{display:block;aspect-ratio:1803.39/806.22;background:#191916;-webkit-mask:url("brand/wordmark.svg") center/contain no-repeat;mask:url("brand/wordmark.svg") center/contain no-repeat;overflow:hidden;white-space:nowrap;text-indent:110%;font-size:16px;letter-spacing:0;line-height:1;margin:0}
.site-head .brand{width:152px;flex:none;transition:opacity .3s}.site-head .brand:hover{letter-spacing:0;opacity:.72}
.footer-top .brand{width:100%;max-width:1180px;margin:0 0 40px}
@media(max-width:760px){.site-head .brand{width:118px}.footer-top .brand{font-size:16px}}

/* ── Text sections, 2026-11-12. One system, after Bringhurst (Elements of Typographic Style) and Tschichold:
   · sizes come from one modular scale (perfect fourth, 1.333) off a fluid body size, so every level is a harmonic step, not an arbitrary number;
   · reading text holds a 45–75 character measure (max-width in em), which also satisfies WCAG 1.4.8;
   · leading runs opposite to size: about 1.5 for body, about 1.05 for display;
   · hierarchy is made by contrast, never by near-misses: each subhead is set in a face that opposes its headline (serif italic under grotesk or condensed, grotesk under serif);
   · text figures in running copy, hung punctuation on quotations, a dropped initial to open the one long passage. ── */
:root{--s0:clamp(17px,1.3vw,20px);--s1:calc(var(--s0)*1.333);--s2:calc(var(--s0)*1.777);--s3:calc(var(--s0)*2.369);--s4:calc(var(--s0)*3.157);--s6:calc(var(--s0)*5.61)}
.offset-copy{width:56%;max-width:780px}
.offset-copy p,.pillar-copy p,.steps p{font-size:var(--s0);line-height:1.52;max-width:34em;font-variant-numeric:oldstyle-nums}
.offset-copy .lead{font-size:var(--s3);line-height:1.06;letter-spacing:-.035em;max-width:16em;margin-bottom:.7em}
.offset-copy>p:not(.lead):not(.small),.pillar-copy p{font-size:var(--s1);line-height:1.42;max-width:26em}
.offset-copy .small,.support>.small{font-size:12px;line-height:1.6;max-width:44em}
.steps{counter-reset:step;gap:clamp(28px,4vw,64px)}.steps article{counter-increment:step}
.steps article:before{content:counter(step,decimal-leading-zero);display:block;font:800 var(--s6)/.8 BarlowCondensed,Impact,sans-serif;letter-spacing:-.03em;margin:0 0 .2em -.03em}
.steps article:nth-child(2):before{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.07em}
.steps article:nth-child(3):before{font-family:Caveat,cursive;font-weight:700;font-size:calc(var(--s6)*1.15)}
.steps h3{font-size:var(--s2);line-height:1.05;letter-spacing:-.045em}.steps p{max-width:26em}
.pillar-copy{max-width:36em}.pillar-copy h3{font-size:var(--s3);line-height:1.02;letter-spacing:-.05em;margin-bottom:.45em;max-width:12em}
.nutrition .pillar-copy h3,.stress .pillar-copy h3{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.045em}
.daily h3{font-size:var(--s4);line-height:1}
.daily p{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:var(--s2);line-height:1.14;letter-spacing:-.03em;max-width:15em;text-indent:-.42em;padding-left:.42em}
.honest .offset-copy>p:first-of-type:first-letter{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:3.6em;line-height:.78;float:left;padding:.07em .09em 0 0}
summary{font-size:var(--s1)}details p{font-size:var(--s0)!important;line-height:1.52!important}.button{font-size:var(--s1)}
@media(max-width:760px){.offset-copy{width:100%}.offset-copy>p:not(.lead):not(.small),.pillar-copy p{font-size:var(--s0);line-height:1.52}.offset-copy .lead,.pillar-copy h3{font-size:calc(var(--s3)*.9)}}

/* ── Matt, 2026-11-12: no floating navigation and no rule under it. The header is part of the page and scrolls away with it. ── */
html{scroll-padding-top:20px}
.site-head,.site-head.is-hidden{position:static;background:none;border-bottom:0;transform:none;transition:none}
.site-head:after{display:none}
.hero-top{justify-content:flex-end}

/* ── Matt, 2026-11-12: the top right is for Log in and Sign up. The motion switch moves to the footer. ── */
.auth{display:flex;align-items:center;gap:8px;font-size:14px;flex:none}
.auth a{text-decoration:none;border:1px solid transparent;border-radius:100px;padding:10px 18px;transition:background-color .3s,color .3s,border-color .3s}
.auth-in:hover{border-color:currentColor}
.auth-up{background:#191916;color:#ffad48;border-color:#191916}.auth-up:hover{background:none;color:#191916}
footer #motion{padding:6px 12px;font-size:11px}footer #motion:hover{background:#191916;color:#c2d3c4}
.footer-bottom{align-items:center;gap:16px}
@media(max-width:760px){.auth{margin-left:auto;font-size:12px;gap:2px}.auth a{padding:8px 13px}}
footer #motion{white-space:nowrap;flex:none}

/* ── Matt, 2026-11-12: the hero aside sits in the open space left of "Live well.", level with its baseline; under the headline on phones. ── */
.hero-stage{position:relative}
.hero-stage .hero-top{position:absolute;left:0;bottom:calc(clamp(95px,18.4vw,300px)*.13);display:block;margin:0}
.hero-stage .hero-top p{font-size:clamp(17px,1.75vw,28px);line-height:1.2;max-width:none;white-space:nowrap;margin:0}
@media(max-width:760px){.hero-stage .hero-top{position:static;margin:16px 0 0}.hero-stage .hero-top p{font-size:19px;max-width:none}.hero h1{margin-bottom:0}}
.hero-stage .hero-top p{font-family:Instrument,Arial,sans-serif;font-size:clamp(14px,1.22vw,20px);line-height:1.42;letter-spacing:-.005em;white-space:normal;width:21.5vw;max-width:21.5vw;text-wrap:pretty}
.hero-stage .hero-top{bottom:calc(clamp(95px,18.4vw,300px)*.15)}
@media(max-width:760px){.hero-stage .hero-top p{font-size:16px;width:auto;max-width:21em}}

/* ── Matt, 2026-11-12: the top navigation was too small. ── */
.site-head nav{font-size:clamp(16px,1.35vw,20px);gap:clamp(22px,3vw,44px)}
.auth{font-size:clamp(15px,1.2vw,18px)}
@media(max-width:760px){.site-head nav{font-size:15px;gap:10px}.auth{font-size:14px}}
/* 15% larger than before, per Matt: 14px to 16.1px; phones 11px to 12.65px. */
.site-head nav{font-size:16.1px;gap:28px}.auth{font-size:16.1px}
@media(max-width:760px){.site-head nav{font-size:12.65px;gap:10px}.auth{font-size:13.8px}}
@media(max-width:960px){.hero-stage .hero-top{position:static;margin:16px 0 0}.hero-stage .hero-top p{font-size:16px;width:auto;max-width:21em}.hero h1{margin-bottom:0}}
@media(max-width:960px){.hero-stage .hero-top{margin:16px 0 28px}}