/* strr site v3. Tokens first. Flat colour, square corners, no shadows, no blur. */
@font-face{font-family:"Hanken";src:url("../assets/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken";src:url("../assets/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --ink:#0d0c0a;        /* the pouch */
  --paper:#ffffff;      /* the flash */
  --bone:#f2e9d6;       /* label cream, used as type on black */
  --olive:#5d6b38;      /* label leaves */
  --olive-lt:#aab583;
  --rule:#0d0c0a;
  --mute:#6b6862;
  --serif:"Instrument Serif","Cormorant Garamond",Georgia,serif;
  --sans:"Hanken",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(20px,4vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 17px/1.5 var(--sans);overflow-x:hidden}
body.is-intro{overflow:hidden;height:100svh}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h2{font:400 clamp(44px,7.4vw,124px)/.92 var(--serif);letter-spacing:-.02em}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}

/* ---------- intro ---------- */
.intro{position:fixed;inset:0;z-index:50;background:#000}
.intro canvas{position:absolute;inset:0;width:100%;height:100%}
.intro__clock{position:absolute;left:var(--pad);bottom:var(--pad);color:var(--bone);display:flex;flex-direction:column;gap:6px;font:400 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;transition:opacity .2s linear}
.intro__clock span:first-child{font:400 clamp(40px,6vw,76px)/1 var(--serif);letter-spacing:0}
.intro__skip{position:absolute;right:var(--pad);bottom:var(--pad);color:var(--bone);font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:12px 0;opacity:.6}
.intro.is-white .intro__clock,.intro.is-white .intro__skip{opacity:0}
.intro.is-done{display:none}

/* ---------- nav ---------- */
.nav{position:absolute;top:var(--bar-h,0px);left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad)}
.nav__mark{display:block;text-decoration:none;line-height:0}
.nav__mark img{height:46px;width:auto}
.nav__links{display:flex;gap:clamp(16px,2.6vw,40px);align-items:center;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.nav__links a{text-decoration:none}
.nav{color:var(--bone)}
.nav__cta{background:var(--bone);color:var(--ink);padding:13px 18px}
.nav__menu{display:none;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);padding:13px 14px;box-shadow:inset 0 0 0 1px rgba(242,233,214,.6)}
.nav__panel{position:absolute;left:var(--pad);right:var(--pad);top:100%;background:var(--ink);border:1px solid rgba(242,233,214,.25);padding:6px 20px;z-index:6}
.nav__panel[hidden]{display:none}
.nav__panel ul{list-style:none}
.nav__panel li+li{border-top:1px solid rgba(242,233,214,.18)}
.nav__panel a{display:block;padding:16px 0;font:400 30px/1 var(--serif);text-decoration:none;color:var(--bone)}

/* ---------- sky: rendered by js/sky.js into the canvas. The CSS gradient is only the no-WebGL fallback. ---------- */
.sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#04070f}
.sky.no-gl{background:linear-gradient(#050a1c,#0f2148 55%,#3a5273 78%,#050608 79%)}
.sky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the white of the intro flash decays into the night sky */
.sky__flash{position:absolute;inset:0;background:#fff;opacity:0}
body:not(.is-intro) .sky__flash{animation:flash 1.2s cubic-bezier(.2,.7,.2,1) both}
body:not(.is-intro) .hero__title{animation:titleIn 1.8s linear .5s both}
@keyframes flash{from{opacity:1}to{opacity:0}}
@keyframes titleIn{from{opacity:0}to{opacity:1}}

/* ---------- early bird bar: fixed, an endless line of type ---------- */
html{scroll-padding-top:var(--bar-h,0px)}
.bar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:stretch;height:40px;background:var(--ink);color:var(--bone);border-bottom:1px solid rgba(242,233,214,.14);font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.bar[hidden]{display:none}
.bar__window{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center}
.bar__track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.bar:hover .bar__track{animation-play-state:paused}
.bar__run{display:flex;flex:none}
.bar__item{display:flex;align-items:center;gap:22px;padding-right:22px;white-space:nowrap}
.bar__item b{font-weight:600;color:#c9a24a}
.bar__item i{font-style:normal;color:#c9a24a;font-size:12px;letter-spacing:0}
.bar__clock{font-variant-numeric:tabular-nums}
.bar__go{flex:none;display:flex;align-items:center;padding:0 18px;background:var(--bone);color:var(--ink);text-decoration:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- hero: tall wrapper, sticky stage, scroll moves only the pouch ---------- */
.hero{position:relative;height:230svh}
.hero__stick{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden}
.hero__title{position:absolute;z-index:1;color:var(--bone);left:0;right:0;top:40%;transform:translateY(-50%);text-align:center;white-space:nowrap;font:400 21vw/.8 var(--serif);letter-spacing:-.035em}
.pouch-fly{position:absolute;inset:0 0 16svh 0;display:flex;justify-content:center;align-items:center;z-index:2;pointer-events:none;will-change:transform}
.pouch{display:block;height:68svh;aspect-ratio:573/1000;will-change:transform;transform-origin:50% 100%;transform:translateY(-140svh)}
.pouch img{width:100%;height:100%;object-fit:contain}

.hero__foot{position:absolute;z-index:3;color:var(--bone);left:var(--pad);right:var(--pad);bottom:0;height:16svh;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:24px;align-items:center}
.hero__lead{font:400 clamp(18px,1.8vw,28px)/1.18 var(--serif)}
.hero__meta{display:flex;flex-direction:column;gap:7px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.hero__meta span::before{content:"";display:inline-block;width:18px;height:2px;background:var(--olive-lt);margin-right:10px;vertical-align:middle}
.hero__clock{justify-self:end;text-align:right;font-size:15px;color:var(--bone);opacity:.85}
.hero__clock b{color:var(--bone);font:400 1.5em/1 var(--serif)}
.late{opacity:0;transform:translateY(14px)}
.is-settled .late{opacity:1;transform:none;transition:opacity .6s linear,transform .7s cubic-bezier(.16,1,.3,1)}
.is-settled .hero__meta{transition-delay:.08s}.is-settled .hero__clock{transition-delay:.16s}.is-settled /* once scroll takes over, the JS owns the footer's opacity */
.hero.is-scrolling .late{transition:none}

/* ---------- inside ---------- */
.inside{--sand:#ecd5b2;background:var(--sand);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--pad);padding:clamp(70px,9vw,140px) var(--pad);align-items:center}
.inside__fig{position:relative;margin:0}
/* the photo's edges dissolve into the section colour, so it sits in the page and not on it */
.inside__fig img{width:100%;height:auto;max-height:88svh;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent);mask-composite:intersect}
.inside__num{position:absolute;left:7%;top:5%;font:400 clamp(150px,19vw,330px)/.7 var(--serif);letter-spacing:-.06em;color:var(--olive);pointer-events:none}
.ruled{list-style:none;border-top:2px solid var(--rule);margin-top:26px}
.ruled li{display:grid;grid-template-columns:54px 1fr auto;align-items:baseline;gap:14px;padding:22px 0;border-bottom:1px solid var(--rule)}
.ruled span{font:600 11px/1 var(--sans);letter-spacing:.18em;color:var(--olive)}
.ruled b{font:400 clamp(28px,3.6vw,58px)/1 var(--serif)}
.ruled em{font-style:normal;color:var(--mute);font-size:15px;text-align:right}
.inside__note{margin-top:30px;max-width:34ch;font:400 clamp(20px,1.8vw,26px)/1.25 var(--serif)}

/* ---------- keep ---------- */
.keep{padding:clamp(80px,11vw,170px) var(--pad)}
.ruled--wide b{font-size:clamp(26px,3.2vw,50px)}

.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:20px 28px;font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.btn--light{background:var(--bone);color:var(--ink)}
.btn--line{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--bone)}

/* ---------- catalogue ---------- */
.cat{overflow:hidden;background:var(--ink);color:var(--bone);padding:clamp(70px,9vw,140px) var(--pad) clamp(80px,10vw,160px)}
.cat__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--pad);align-items:center;margin-top:clamp(28px,4vw,56px)}
.cat__stage{position:relative;height:min(78svh,780px);display:flex;justify-content:center}
.cat__front,.cat__back{position:absolute;bottom:0;height:100%;width:auto;object-fit:contain}
.cat__front{left:50%;transform:translateX(-62%);z-index:2;height:100%}
.cat__back{left:50%;transform:translateX(2%) scale(.86);transform-origin:50% 100%;opacity:.9}
.cat__info h2{font-size:clamp(56px,8vw,132px)}
.cat__logo{display:block;height:.95em;width:auto;margin:0 0 .1em -.02em}
.cat__sub{margin:22px 0 22px;max-width:38ch;font:400 clamp(19px,1.7vw,26px)/1.25 var(--serif);opacity:.9}
.cat__facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:30px}
.cat__facts li::before{content:"";display:inline-block;width:18px;height:2px;background:var(--olive-lt);margin-right:10px;vertical-align:middle}
.cat__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
.cat__price b{font:400 clamp(64px,8vw,128px)/.9 var(--serif);letter-spacing:-.02em}
.cat__price s{font:400 clamp(26px,3vw,48px)/1 var(--serif);opacity:.6}
.cat__price span{font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.cat__early{font:600 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#c9a24a;margin-bottom:28px}
.cat__early b{font-variant-numeric:tabular-nums}
.cat__buttons{display:flex;flex-wrap:wrap;gap:14px}
.cat__fine{margin-top:18px;font-size:13px;opacity:.7}
.cat__qa{margin-top:22px;border-top:1px solid rgba(242,233,214,.25);max-width:52ch}
.cat__qa details{border-bottom:1px solid rgba(242,233,214,.25)}
.cat__qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.cat__qa summary::-webkit-details-marker{display:none}
.cat__qa summary::after{content:"+";font:400 22px/1 var(--serif);color:#c9a24a;transition:transform .25s ease}
.cat__qa details[open] summary::after{transform:rotate(45deg)}
.cat__qa p{padding:0 0 14px;font:400 18px/1.3 var(--serif);opacity:.88}

/* ---------- savings: cafe vs home ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.save{background:var(--ink);color:var(--bone);padding:clamp(80px,10vw,160px) var(--pad);border-top:1px solid rgba(242,233,214,.12)}
.save__head h2{margin-top:22px}
.save__lede{margin-top:22px;max-width:40ch;font:400 clamp(20px,1.8vw,26px)/1.25 var(--serif);opacity:.85}
.save__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,5vw,80px);margin-top:clamp(44px,6vw,90px);align-items:start}

/* inputs */
.save__in{border-top:1px solid var(--bone);min-width:0}
.field{border:0;margin:0;padding:26px 0 24px;border-bottom:1px solid rgba(242,233,214,.22);min-width:0}
.field legend{padding:0;float:left;width:100%;margin-bottom:16px}
.field legend+*{clear:both}
.field__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.field__note{margin-top:12px;font-size:14px;color:rgba(242,233,214,.62)}
.save__cups{font:400 22px/1 var(--serif);white-space:nowrap}
.save__cups b{font:400 clamp(60px,6.4vw,104px)/.8 var(--serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-right:.1em}

.range{position:relative;height:52px;margin-top:18px;--thumb:26px}
.range input{-webkit-appearance:none;appearance:none;position:relative;z-index:2;display:block;width:100%;height:52px;margin:0;background:transparent;cursor:grab;touch-action:pan-y}
.range input:active{cursor:grabbing}
.range input::-webkit-slider-runnable-track{height:2px;background:rgba(242,233,214,.28)}
.range input::-moz-range-track{height:2px;background:rgba(242,233,214,.28)}
.range input::-webkit-slider-thumb{-webkit-appearance:none;width:var(--thumb);height:var(--thumb);margin-top:calc(var(--thumb) / -2 + 1px);background:var(--bone);border:0;border-radius:0;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.range input::-moz-range-thumb{width:var(--thumb);height:var(--thumb);background:var(--bone);border:0;border-radius:0}
.range input:active::-webkit-slider-thumb{transform:scale(1.18) rotate(45deg)}
.range input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--olive-lt);outline-offset:4px}
.range input:focus-visible::-moz-range-thumb{outline:2px solid var(--olive-lt);outline-offset:4px}
.range input:focus-visible{outline:none}
.range__fill{position:absolute;left:0;top:25px;height:2px;background:var(--bone);width:calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p,0));pointer-events:none;z-index:1}
.range__ticks{position:absolute;left:calc(var(--thumb) / 2);right:calc(var(--thumb) / 2);top:33px;display:flex;justify-content:space-between;pointer-events:none}
.range__ticks i{width:1px;height:5px;background:rgba(242,233,214,.32)}
.range__ticks i:nth-child(7n){height:10px;background:rgba(242,233,214,.6)}
.range__scale{position:relative;height:14px;margin:0 calc(var(--thumb,26px) / 2);font:600 10px/1 var(--sans);letter-spacing:.14em;color:rgba(242,233,214,.55)}
.range__scale span{position:absolute;transform:translateX(-50%)}
.range__scale span:nth-child(1){left:0}.range__scale span:nth-child(2){left:22.222%}.range__scale span:nth-child(3){left:48.148%}.range__scale span:nth-child(4){left:74.074%}.range__scale span:nth-child(5){left:100%}

.pick{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--bone)}
.pick button{padding:16px 18px;text-align:left;min-height:64px;transition:background .25s linear,color .25s linear}
.pick button+button{border-left:1px solid var(--bone)}
.pick b{display:block;font:400 clamp(22px,2vw,28px)/1 var(--serif)}
.pick small{display:block;margin-top:8px;font:600 10px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.pick [aria-pressed="true"]{background:var(--bone);color:var(--ink)}

.money{display:flex;align-items:baseline;gap:10px;margin-top:14px;border-bottom:2px solid rgba(242,233,214,.4);transition:border-color .2s linear}
.money:focus-within{border-color:var(--bone)}
.money span{font:400 clamp(40px,4vw,60px)/1 var(--serif);opacity:.7}
.money input{flex:1;min-width:0;background:none;border:0;border-radius:0;color:var(--bone);font:400 clamp(44px,4.6vw,72px)/1.15 var(--serif);letter-spacing:-.02em;padding:4px 0 8px;font-variant-numeric:tabular-nums}
.money input:focus{outline:none}
.money input::placeholder{color:rgba(242,233,214,.22);font-style:italic;font-size:.62em;letter-spacing:0}
.money--small span{font-size:32px}.money--small input{font-size:clamp(34px,3.2vw,48px)}
.field--milk:not([hidden]){animation:drop .45s cubic-bezier(.16,1,.3,1)}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* results */
.save__out{container-type:inline-size;border:1px solid rgba(242,233,214,.22);padding:clamp(22px,3.2vw,48px)}
.save__empty .eyebrow,.save__full .eyebrow{color:#c9a24a}
.save__ask{margin-top:20px;font:400 clamp(34px,6.6cqi,64px)/1.02 var(--serif);letter-spacing:-.01em;max-width:16ch}
.save__ask::after{content:"";display:inline-block;width:.06em;height:.8em;margin-left:.08em;background:var(--bone);vertical-align:-.06em;animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.save__year{margin-top:14px;font:400 clamp(58px,16.5cqi,210px)/.84 var(--serif);letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.save__year em{display:block;margin-top:.18em;font:italic 400 .3em/1 var(--serif);letter-spacing:0;color:rgba(242,233,214,.75)}
.save__sub{margin-top:18px;font:400 clamp(22px,3.6cqi,32px)/1.2 var(--serif)}
.save__sub span{font-variant-numeric:tabular-nums}
.save__sub i{font-style:normal;opacity:.4;margin:0 .3em}
.save__zero{margin-top:14px;max-width:44ch;color:rgba(242,233,214,.7)}
.save__full.is-in{animation:landIn .7s cubic-bezier(.16,1,.3,1)}
@keyframes landIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.year{display:grid;grid-template-columns:repeat(52,minmax(0,1fr));gap:3px;height:clamp(64px,13cqi,104px);margin-top:clamp(28px,4cqi,44px);align-items:stretch}
.year i{position:relative;border:1px solid rgba(242,233,214,.16);border-bottom:0}
.year i::after{content:"";position:absolute;left:-1px;right:-1px;bottom:0;height:calc(var(--r,0) * 100%);background:var(--bone);transition:height .7s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 9ms)}
.year{border-bottom:1px solid rgba(242,233,214,.5)}
.year__key{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font:600 10px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,233,214,.5)}
.year__key span:nth-child(2){text-align:center;max-width:44ch;letter-spacing:.08em;text-transform:none;font:400 13px/1.35 var(--sans)}

.save__rows{margin-top:clamp(26px,4cqi,40px);border-top:1px solid var(--bone)}
.save__row{display:grid;grid-template-columns:1fr auto;gap:4px 20px;padding:18px 0;border-bottom:1px solid rgba(242,233,214,.22)}
.save__row dt{font:600 11px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;align-self:center}
.save__row dd{margin:0;display:contents}
.save__row dd b{font:400 clamp(26px,4.4cqi,40px)/1 var(--serif);font-variant-numeric:tabular-nums;text-align:right}
.save__work{grid-column:1/-1;font-size:14px;color:rgba(242,233,214,.6);font-variant-numeric:tabular-nums}
.save__go{margin-top:30px}
.save__end .save__foot{margin-top:18px}
.save__foot{margin-top:20px;font-size:13px;line-height:1.5;color:rgba(242,233,214,.6);max-width:68ch}
.save :focus-visible{outline-color:var(--bone)}

/* colour, taken from the pack: night blue from the hero sky, terracotta from her sweater, olive leaves, gold frame */
.save{--sv-bg:#1a0f08;--sv-card:#a8441f;--sv-gold:#c9a24a;--sv-leaf:#aab583;background:var(--sv-bg);border-top:0;position:relative;isolation:isolate;overflow:hidden}
/* milk going into coffee, behind everything; darkened on the left where the inputs sit */
.save::before,.save::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.save::before{background:url("../assets/coffee-swirl.webp") center/cover no-repeat;transform-origin:70% 30%;animation:swirl 40s ease-in-out infinite alternate}
.save::after{background:linear-gradient(90deg,rgba(13,9,6,.86) 0%,rgba(13,9,6,.72) 42%,rgba(13,9,6,.38) 100%)}
@keyframes swirl{from{transform:scale(1.04) rotate(0)}to{transform:scale(1.14) rotate(1.6deg)}}
.save__head .eyebrow,.save__in .eyebrow{color:var(--sv-gold)}
.save__head h2{color:var(--bone)}
.range input::-webkit-slider-thumb{background:var(--sv-gold)}
.range input::-moz-range-thumb{background:var(--sv-gold)}
.range__fill{background:var(--sv-gold)}
.range__ticks i:nth-child(7n){background:var(--sv-gold)}
.pick{border-color:rgba(242,233,214,.5)}
.pick button+button{border-left-color:rgba(242,233,214,.5)}
.pick [aria-pressed="true"]{background:var(--sv-leaf);color:var(--ink)}
.money:focus-within{border-color:var(--sv-gold)}
.save__out{background:var(--sv-card);border-color:var(--sv-card)}
.save__out .eyebrow{color:var(--bone)!important;opacity:.8}
.save__out .field__note,.save__foot,.save__work,.year__key{color:rgba(242,233,214,.82)}
.save__year em{color:var(--bone);opacity:.85}
.year i{border-color:rgba(242,233,214,.32)}
.year{border-bottom-color:var(--bone)}
.year i::after{background:var(--bone)}
.save__rows{border-top-color:rgba(242,233,214,.7)}
.save__row{border-bottom-color:rgba(242,233,214,.3)}
.save__go{background:var(--ink);color:var(--bone)}
.save__ask::after{background:var(--bone)}
.save :focus-visible{outline-color:var(--sv-gold)}
.save__out :focus-visible{outline-color:var(--bone)}

/* desktop: every section after the hero is one screen, so paging lands cleanly on each */
@media (min-width:821px){
  .cat,.inside,.keep{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--bar-h,0px) + 4svh);padding-bottom:4svh}
  .inside{display:grid}
  .cat__grid{margin-top:2svh}
  .cat__stage{height:min(70svh,760px)}
  .cat__info h2{font-size:min(7vw,10svh)}
  .cat__sub{margin:1.6svh 0;font-size:min(1.7vw,2.6svh)}
  .cat__facts{margin-bottom:2.4svh}
  .cat__qa{margin-top:1.8svh}
  .cat__qa summary{padding:1.1svh 0}
  .cat__fine{margin-top:1.2svh}
  .cat__price b{font-size:min(7vw,10svh)}
  .cat__early{margin-bottom:2.2svh}
  .inside__fig img{max-height:80svh;width:auto;max-width:100%;margin:0 auto}
}

/* desktop: the whole section is one screen. Heading and inputs on the left, the year on the right.
   Sizes key off the viewport height so it still fits on short laptop screens. */
@media (min-width:821px){
  .save{min-height:100svh;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-rows:auto 1fr;
    column-gap:clamp(28px,4vw,72px);align-content:center;padding:calc(var(--bar-h,0px) + 3.2svh) var(--pad) 3.2svh}
  .save__grid{display:contents}
  .save__head{grid-column:1;grid-row:1}
  .save__in{grid-column:1;grid-row:2;align-self:start;margin-top:2.4svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
  .save__in>.field{grid-column:1/-1}
  /* with milk on, the cafe price and the milk cost share one row */
  .save__in:has(.field--milk:not([hidden]))>.field--cafe{grid-column:1}
  .save__in>.field--milk{grid-column:2}
  .save__in:has(.field--milk:not([hidden])) .field--cafe .money span{font-size:min(2.4vw,3.6svh)}
  .save__in:has(.field--milk:not([hidden])) .field--cafe .money input{font-size:min(2.8vw,4.4svh)}
  .save__out{grid-column:2;grid-row:1/3;align-self:center;padding:clamp(18px,3svh,36px) clamp(20px,2.4vw,40px)}
  .save__head h2{margin-top:1.4svh;font-size:min(5vw,7.4svh)}
  .save__lede{margin-top:1.2svh;font-size:min(1.6vw,2.4svh)}
  .field{padding:1.6svh 0 1.5svh}
  .field legend{margin-bottom:1.2svh}
  .field__note{margin-top:.6svh;font-size:13px}
  .save__cups b{font-size:min(5vw,7.6svh)}
  .range{margin-top:.6svh;height:44px}
  .range input{height:44px}
  .range__fill{top:21px}
  .range__ticks{top:29px}
  .pick button{padding:1.3svh 16px;min-height:0}
  .pick b{font-size:min(1.9vw,2.9svh)}
  .pick small{margin-top:.6svh}
  .money{margin-top:.8svh}
  .money span{font-size:min(3.2vw,5svh)}
  .money input{font-size:min(3.8vw,6svh);padding:0 0 .4svh}
  .money--small span{font-size:min(2.4vw,3.6svh)}
  .money--small input{font-size:min(2.8vw,4.4svh)}
  .save__ask{margin-top:1.4svh;font-size:min(6cqi,6svh)}
  .save__year{margin-top:1svh;font-size:min(15cqi,14.5svh)}
  .save__sub{margin-top:1.2svh;font-size:min(3.4cqi,3.2svh)}
  .year{height:min(10cqi,7.5svh);margin-top:2.4svh}
  .year__key{margin-top:.8svh}
  .save__rows{margin-top:2.2svh}
  .save__row{padding:1.2svh 0}
  .save__row dd b{font-size:min(4cqi,3.6svh)}
  .save__work{font-size:13px}
  .save__end{display:flex;align-items:center;gap:22px;margin-top:2.4svh}
  .save__go{margin:0;flex:none;padding:16px 22px}
  .save__foot{margin:0;font-size:12px;line-height:1.45}
}


.foot{background:var(--ink);color:var(--bone);display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;padding:30px var(--pad);font-size:13px}
.foot__mark{line-height:0}
.foot__mark img{height:44px;width:auto}

/* scroll reveal: one quiet rise, no hover motion anywhere */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s linear,transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.cat :focus-visible{outline-color:var(--bone)}

/* ---------- phone ---------- */
@media (max-width:820px){
  .nav__links a:not(.nav__cta){display:none}
  .nav__links{gap:10px}
  .nav__menu{display:block}
  .nav__mark img{height:40px}
  .nav__cta,.nav__menu{padding:12px 13px}
  /* phones: ODD HOUR sits on its own line under the nav, the pouch stands below it, nothing overlaps */
  .hero{--t-top:max(16svh, calc(var(--bar-h,0px) + 100px));--t-size:calc((100vw - 40px) / 3.75)}
  .hero__title{top:var(--t-top);transform:none;font-size:var(--t-size);line-height:.8}
  .pouch-fly{top:calc(var(--t-top) + var(--t-size) * .8 + 16px);bottom:calc(22svh + 8px);align-items:stretch}
  .pouch{height:100%;max-height:52svh}
  .hero__foot{height:22svh;grid-template-columns:1fr;gap:10px;align-content:center}
  .hero__clock{justify-self:start;text-align:left}
  .hero__lead{font-size:clamp(16px,4.6vw,20px)}
  .hero__foot{gap:8px;align-content:end;padding-bottom:14px}
  .hero__stick{min-height:0}
  .hero__meta{flex-direction:row;flex-wrap:wrap;gap:8px 16px}
  .hero__meta span::before{width:10px;margin-right:6px}
    .inside{grid-template-columns:1fr}
  .inside__num{font-size:46vw}
  .cat__grid{grid-template-columns:1fr}
  .cat__stage{height:46svh}
  .cat__front{transform:translateX(-50%)}
  .cat__back{display:none}
  .save__grid{grid-template-columns:minmax(0,1fr)}
  .save::after{background:rgba(13,9,6,.74)}
  .range{--thumb:34px;height:60px}
  .range input{height:60px}
  .range__fill{top:29px}
  .range__ticks{top:39px}
  .year{gap:1px}
  .year__key span:nth-child(2){display:none}
  .ruled li{grid-template-columns:34px 1fr}
  .ruled em{grid-column:2;text-align:left}
}

@media (max-width:820px) and (max-height:700px){
  .hero__clock{display:none}
}
@media (prefers-reduced-motion:reduce){
  .save::before,.bar__track,.sky__flash,.hero__title,.save__full,.field--milk,.save__ask::after{animation:none!important}
  .year i::after,.range input::-webkit-slider-thumb{transition:none!important}
  .rv,.late,.pouch{transition:none!important}
  .rv{opacity:1;transform:none}
}