/* A warm, illustrated kitchen story between ingredients and drinks. */
.homemade-section{background:#edcda7;color:var(--ink);overflow:hidden;position:relative;scroll-margin-top:20px}
.homemade-inner{padding-block:77px 47px}
.homemade-heading{position:relative}
.homemade-heading>.eyebrow{font-size:.72rem;letter-spacing:.15em}
.homemade-title-top{position:absolute;right:4%;top:0;display:flex;align-items:center;gap:20px;transform:rotate(5deg)}
.homemade-title-top>span{font-size:48px;color:#a84220;animation:homemade-turn 24s linear infinite}
.homemade-title-top>p{font-family:'Caveat',cursive;font-size:clamp(24px,2.6vw,41px);line-height:1.1}
.homemade-heading h2{margin:25px 0 29px;font-size:clamp(44px,7.2vw,119px);line-height:.98;letter-spacing:-.055em}
.homemade-heading h2>span{display:block;width:max-content;max-width:100%;position:relative;transform:rotate(-2deg);transform-origin:0 50%;margin-top:.1em;color:#a84220}
.homemade-heading h2>span:after{content:'';position:absolute;bottom:-.13em;left:0;width:99%;height:.15em;border-bottom:3px solid currentColor;border-radius:50%;transform-origin:left}
.homemade-intro{font-size:1.04rem;line-height:1.75;max-width:660px;margin:39px 0 0;color:#484234}
.homemade-stories{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:51px;padding-top:39px;border-top:1px solid #191b1733}
.homemade-story{display:grid;grid-template-columns:42% 1fr;gap:24px;align-items:center;min-width:0}
.homemade-story+.homemade-story{position:relative}
.homemade-story+.homemade-story:before{content:'';position:absolute;left:-25px;top:10px;bottom:10px;width:1px;background:#191b1726}
.homemade-illustration{position:relative;align-self:center;min-width:0;transform:rotate(-5deg)}
.homemade-illustration svg{display:block;width:100%;overflow:visible}
.homemade-bun-body{transform-origin:140px 210px;animation:homemade-bun-bob 5s ease-in-out infinite}
.homemade-steam{transform-origin:140px 65px;animation:homemade-steam 3s ease-in-out infinite}
.homemade-handnote{display:block;font-family:'Caveat',cursive;font-size:clamp(25px,2.3vw,36px);text-align:center;white-space:nowrap;margin-top:13px;color:#a84220}
.homemade-sauce .homemade-illustration{transform:rotate(5deg)}
.homemade-whisk{transform-origin:142px 137px;animation:homemade-stir 2.6s ease-in-out infinite}
.homemade-drops{transform-origin:110px 132px;animation:homemade-splash 2.6s ease-in-out infinite}
.homemade-sauce-swirl{stroke-dasharray:210;animation:homemade-swirl 2.6s ease-in-out infinite}
.homemade-step{font-size:.61rem;font-weight:800;letter-spacing:.09em;line-height:1.65;margin-bottom:13px;color:#6b4933}
.homemade-story-copy h3{font-size:clamp(30px,2.9vw,45px);line-height:1.05;letter-spacing:-.045em;margin-bottom:17px}
.homemade-story-copy>p:last-child{font-size:.94rem;line-height:1.75;color:#484234;max-width:330px}
.homemade-signoff{display:flex;align-items:baseline;gap:13px;justify-content:center;flex-wrap:wrap;border-top:1px solid #191b1733;padding-top:25px;margin-top:45px;font-weight:800;font-size:1rem}
.homemade-signoff>span{font-family:'Caveat',cursive;font-size:1.8rem;font-weight:600;transform:rotate(-2deg);color:#a84220}
.homemade-heading.is-visible h2>span{animation:homemade-title-in 1s cubic-bezier(.16,1,.3,1) .12s both}
.homemade-heading.is-visible h2>span:after{animation:homemade-line-in .85s var(--ease) .45s both}
.homemade-story.is-visible .homemade-handnote{animation:homemade-note-in .8s var(--ease) .4s both}
.homemade-paused *,.homemade-paused *:before,.homemade-paused *:after{animation-play-state:paused!important}
@keyframes homemade-title-in{from{opacity:0;transform:translate3d(-45px,20px,0) rotate(-6deg)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes homemade-line-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes homemade-note-in{from{opacity:0;transform:translateY(15px) rotate(8deg)}to{opacity:1;transform:none}}
@keyframes homemade-turn{to{transform:rotate(360deg)}}
@keyframes homemade-bun-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes homemade-steam{0%,100%{opacity:.25;transform:translateY(4px)}50%{opacity:.8;transform:translateY(-6px)}}
@keyframes homemade-stir{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(11deg)}}
@keyframes homemade-splash{0%,25%,100%{opacity:0;transform:translate(7px,12px) scale(.65)}48%,70%{opacity:1;transform:translate(-4px,-5px) scale(1)}}
@keyframes homemade-swirl{0%,100%{stroke-dashoffset:0}50%{stroke-dashoffset:75}}
@media(min-width:1600px){.homemade-stories{gap:75px}.homemade-story{gap:32px}.homemade-story+.homemade-story:before{left:-38px}}
@media(max-width:1050px){.homemade-stories{gap:36px}.homemade-story{grid-template-columns:1fr;gap:23px;align-content:start}.homemade-illustration{width:220px;justify-self:center}.homemade-story-copy{padding-inline:12px}.homemade-story+.homemade-story:before{left:-18px}.homemade-story-copy h3{font-size:36px}.homemade-handnote{font-size:30px}}
@media(max-width:600px){.homemade-inner{padding-block:46px 33px}.homemade-heading>.eyebrow{font-size:.6rem;letter-spacing:.1em}.homemade-title-top{position:relative;justify-content:flex-end;gap:12px;right:auto;margin:25px 5px 24px}.homemade-title-top>span{font-size:29px}.homemade-title-top>p{font-size:27px}.homemade-heading h2{font-size:clamp(29px,8.3vw,50px);margin:0}.homemade-heading h2>span{margin-top:8px}.homemade-intro{font-size:.95rem;line-height:1.75;margin-top:29px}.homemade-stories{grid-template-columns:1fr;margin-top:29px;padding-top:24px;gap:32px}.homemade-story{grid-template-columns:1fr;gap:22px}.homemade-illustration{width:205px}.homemade-story-copy{padding-inline:0}.homemade-step{font-size:.61rem;margin-bottom:10px}.homemade-story-copy h3{font-size:35px}.homemade-story-copy h3 br{display:none}.homemade-story-copy h3 br:after{content:' '}.homemade-story-copy>p:last-child{max-width:none;font-size:.93rem}.homemade-story+.homemade-story{border-top:1px solid #191b1733;padding-top:28px}.homemade-story+.homemade-story:before{display:none}.homemade-signoff{display:block;text-align:center;margin-top:30px;padding-top:24px;font-size:.94rem}.homemade-signoff>span{display:block;font-size:1.55rem;margin-top:9px}}
