/* MAELS signature: mango orange, banana gold, warm cream and dark ink.
   Fruit colours remain inside the recipe collection; the brand canvas stays orange. */
:root{--maels-orange:#eea12d;--maels-gold:#f4c65b;--maels-cream:#fff8e9;--maels-burnt:#c97520}
.site-header{position:absolute;z-index:30;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:1600px;min-height:100px;padding:23px 42px;color:var(--ink)}
.site-header .brand-dot{color:var(--maels-cream)}
.site-header .desktop-nav{gap:35px}
.site-header .desktop-nav a:after{background:var(--ink)}
.site-header .header-cta{background:var(--maels-cream);color:var(--ink);border-color:#fff3}
.site-header .header-cta:hover{background:#fff;box-shadow:0 6px 25px #632f151a}
.site-header .saved-shortcut{border-radius:50px;background:#fff2;padding-inline:12px;min-height:40px}
.site-header a:focus-visible,.site-header button:focus-visible{outline-color:var(--ink)}

.hero{width:100%;max-width:none;height:100vh;height:100svh;min-height:660px;max-height:1180px;margin:0;border-radius:0;background:linear-gradient(180deg,#f1aa3d 0%,#d18124 17%,#c97520 24%,#c97520 43%,#dd8925 67%,#efa137 100%);isolation:isolate}
.hero-glows{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-glow{position:absolute;inset:0;opacity:0;transition:opacity 1100ms cubic-bezier(.2,.65,.2,1);pointer-events:none}
.glow-mango{background:radial-gradient(ellipse at 38% 86%,#ffd16a8c 0%,#ffc55340 25%,#eea12d00 63%)}
.glow-berry{background:radial-gradient(ellipse at 12% 82%,#e57d678c 0%,#e5825c45 25%,#eea12d00 65%)}
.glow-green{background:radial-gradient(ellipse at 55% 89%,#d6b24c99 0%,#b7a34248 24%,#eea12d00 62%)}
.glow-cacao{background:radial-gradient(ellipse at 78% 82%,#ad673f99 0%,#c17a4445 26%,#eea12d00 66%)}
.glow-bowl{background:radial-gradient(ellipse at 92% 80%,#d18c9385 0%,#d18a6c42 24%,#eea12d00 64%)}
.hero[data-active-flavour="mango"] .glow-mango,.hero[data-active-flavour="berry"] .glow-berry,.hero[data-active-flavour="green"] .glow-green,.hero[data-active-flavour="cacao"] .glow-cacao,.hero[data-active-flavour="bowl"] .glow-bowl{opacity:1}
.hero .flavours{height:100%;border-radius:0;background:transparent}
.hero .flavour{background:transparent;border-radius:0;flex:1 1 0;transition:flex 850ms cubic-bezier(.22,.8,.2,1);color:var(--ink)}
.hero .flavour:before{display:none}
.hero .flavour.is-active{flex:1.85 1 0}
.hero .flavour:focus-visible{outline:2px solid #fff9;outline-offset:-10px;z-index:7}
.hero .flavour-number{top:auto;bottom:104px;left:50%;transform:translateX(-50%);color:var(--ink);opacity:.7;font-size:10px;letter-spacing:.1em}
.hero .flavour-name{bottom:155px;left:28px;color:var(--ink);font-size:9px;letter-spacing:.14em;opacity:.8}
.hero .flavour.is-active .flavour-name{opacity:1}
.hero .hero-product{top:calc(50% - 130px);width:clamp(245px,min(25vw,47svh),380px);height:auto;max-width:none;left:50%;transform:translateX(-50%) rotate(-5deg) scale(.86);filter:drop-shadow(0 30px 23px #7b39172b);transition:transform 850ms cubic-bezier(.22,.8,.2,1),filter 850ms;pointer-events:none}
.hero .flavour:nth-child(2n) .hero-product{transform:translateX(-50%) rotate(5deg) scale(.86)}
.hero .flavour.is-active .hero-product{transform:translateX(-50%) translateY(-12px) rotate(-3deg) scale(1.1);filter:drop-shadow(0 38px 26px #71351640)}
.hero .flavour.cacao .hero-product{top:calc(50% - 120px)}
.hero .flavour.bowl .hero-product{top:calc(50% - 163px);transform:translateX(-50%) rotate(4deg) scale(1)}
.hero .flavour.bowl.is-active .hero-product{transform:translateX(-50%) translateY(-15px) rotate(-4deg) scale(1.14)}
.hero .hero-heading{top:clamp(122px,15.5svh,182px);font-size:clamp(78px,min(10.2vw,17svh),160px);line-height:.88;letter-spacing:-.08em;color:var(--maels-cream);text-shadow:0 2px 2px #8f420808;z-index:2}
.hero .hero-heading>span+span{font-size:.85em;letter-spacing:-.075em;margin-top:12px}
.hero .hero-topline{inset:111px 45px auto;font-size:8px;letter-spacing:.13em;color:var(--ink);opacity:.88}
.hero .hero-footer{left:43px;right:43px;bottom:35px;color:var(--ink)}
.hero .hero-hint{font-size:10px}
.hero .hint-dot{background:var(--ink);box-shadow:0 0 0 5px #202b2212}
.hero .hero-cta{background:var(--maels-cream);padding:10px 11px 10px 27px;gap:33px;box-shadow:0 6px 28px #783a1c14;font-size:12px}
.hero .hero-cta:hover{background:#fff;transform:translateY(-4px);box-shadow:0 12px 25px #7b39171f}
.hero .hero-counter{font-size:12px}
.hero .hero-counter>span+span{opacity:.6}
.hero .hero-sticker{right:6%;bottom:150px;background:var(--maels-cream);color:var(--ink);width:94px;height:94px;font-size:23px;box-shadow:0 12px 28px #783a1c15;transform:rotate(12deg)}
.hero .hero-sticker>span{font-size:7px;letter-spacing:.04em}
.ticker{margin-top:0;border-top-color:#d49b4d45;border-bottom-color:#d49b4d45;background:#f6ecd7;height:47px}
.ticker-star{color:#bf6d1d}
.gear-section{padding-bottom:70px}
.site-footer{border-top:1px solid #dedbcf;width:calc(100% - 80px);padding:28px 0;margin-top:0}
.site-footer .brand-dot{color:#cc7520}

@media(min-width:1600px){
  .hero .hero-product{width:clamp(300px,min(25vw,45svh),435px)}
  .hero .hero-heading{font-size:clamp(132px,min(10vw,17svh),180px)}
  .hero .hero-topline{left:calc((100vw - 1520px)/2);right:calc((100vw - 1520px)/2)}
}
@media(max-width:1100px){
  .site-header{padding-inline:30px;min-height:94px}
  .hero .hero-topline{inset:104px 30px auto;font-size:7px}
  .hero .hero-heading{top:145px;font-size:clamp(78px,min(10.5vw,16svh),120px)}
  .hero .hero-product{width:clamp(245px,min(29vw,46svh),345px);top:calc(50% - 100px)}
  .hero .flavour.cacao .hero-product{top:calc(50% - 85px)}
  .hero .flavour.bowl .hero-product{top:calc(50% - 125px)}
  .hero .hero-footer{left:30px;right:30px;bottom:28px}
  .hero .hero-sticker{right:35px;bottom:132px;width:80px;height:80px;font-size:20px}
  .hero .flavour-name{left:18px;bottom:143px;font-size:8px}
}
@media(max-width:800px){
  .site-header{min-height:88px;padding:18px 25px}
  .site-header .brand>span{font-size:37px}
  .mobile-nav:not([hidden]){position:absolute;z-index:35;top:84px;left:18px;right:18px;margin:0;background:var(--maels-cream);box-shadow:0 20px 40px #7b39172b}
  .hero{height:100vh;height:100svh;min-height:660px;max-height:1100px}
  .hero .hero-topline{inset:112px 26px auto;font-size:7px}
  .hero .hero-heading{top:160px;font-size:clamp(64px,11.8vw,94px)}
  .hero .hero-heading>span+span{font-size:.77em;margin-top:10px}
  .hero .flavour.is-active{flex:2.6 1 0}
  .hero .flavour-name{display:none}
  .hero .hero-product{width:330px;top:calc(50% - 100px);transform:translateX(-50%) rotate(-5deg) scale(.69)}
  .hero .flavour:nth-child(2n) .hero-product{transform:translateX(-50%) rotate(5deg) scale(.69)}
  .hero .flavour.is-active .hero-product{transform:translateX(-50%) translateY(-10px) rotate(-3deg) scale(.98)}
  .hero .flavour.cacao .hero-product{top:calc(50% - 85px)}
  .hero .flavour.bowl .hero-product{top:calc(50% - 115px);transform:translateX(-50%) rotate(3deg) scale(.85)}
  .hero .flavour.bowl.is-active .hero-product{transform:translateX(-50%) translateY(-16px) rotate(-3deg) scale(1.1)}
  .hero .flavour-number{bottom:106px;font-size:9px}
  .hero .hero-footer{left:25px;right:25px;bottom:28px}
  .hero .hero-cta{font-size:11px;padding:9px 10px 9px 20px;gap:24px}
  .hero .hero-counter{font-size:10px}
  .hero .hero-sticker{right:23px;bottom:151px;width:73px;height:73px;font-size:18px}
  .site-footer{width:calc(100% - 56px);padding:27px 0}
  .gear-section{padding-bottom:55px}
}
@media(max-width:520px){
  .site-header{min-height:82px;padding:17px 20px;gap:12px}
  .site-header .brand>span{font-size:34px}
  .site-header .brand img{width:43px;height:43px}
  .site-header .saved-shortcut{padding-inline:10px;min-width:44px;min-height:38px;gap:6px}
  .mobile-nav:not([hidden]){top:81px;left:14px;right:14px;font-size:14px;padding:20px}
  .hero{width:100%;min-height:640px;max-height:1000px}
  .hero .hero-topline{inset:111px 23px auto;font-size:6.5px;letter-spacing:.12em}
  .hero .hero-heading{top:151px;font-size:clamp(47px,12.4vw,64px);line-height:.9}
  .hero .hero-heading>span+span{font-size:.78em;line-height:1.03;margin-top:8px}
  .hero .flavour.is-active{flex:4 1 0}
  .hero .hero-product{top:clamp(216px,calc(47svh - 90px),310px);width:330px;transform:translateX(-50%) rotate(-5deg) scale(.56)}
  .hero .flavour:nth-child(2n) .hero-product{transform:translateX(-50%) rotate(5deg) scale(.56)}
  .hero .flavour.is-active .hero-product{transform:translateX(-50%) translateY(-5px) rotate(-3deg) scale(.95)}
  .hero .flavour.cacao .hero-product{top:clamp(231px,calc(47svh - 75px),325px)}
  .hero .flavour.bowl .hero-product{top:clamp(211px,calc(47svh - 95px),305px);transform:translateX(-50%) rotate(3deg) scale(.64)}
  .hero .flavour.bowl.is-active .hero-product{transform:translateX(-50%) translateY(-8px) rotate(-3deg) scale(1.08)}
  .hero .flavour-number{bottom:106px;font-size:8px}
  .hero .hero-footer{left:22px;right:22px;bottom:29px;gap:15px}
  .hero .hero-cta{font-size:10px;padding:9px 9px 9px 19px;gap:20px}
  .hero .hero-counter{font-size:9px;gap:5px}
  .hero .hero-sticker{right:20px;bottom:150px;width:65px;height:65px;font-size:16px}
  .hero .hero-sticker>span{font-size:6px}
  .ticker{height:41px}
  .site-footer{width:calc(100% - 44px);padding:25px 0}
}
@media(min-width:801px) and (max-height:740px){
  .hero{min-height:620px}
  .hero .hero-topline{top:101px;font-size:7px}
  .hero .hero-heading{top:126px;font-size:clamp(77px,min(9.7vw,16svh),118px)}
  .hero .hero-product{top:calc(50% - 100px);width:clamp(240px,44svh,320px)}
  .hero .flavour.cacao .hero-product{top:calc(50% - 83px)}
  .hero .flavour.bowl .hero-product{top:calc(50% - 125px)}
  .hero .hero-sticker{width:70px;height:70px;font-size:18px;bottom:119px}
  .hero .hero-footer{bottom:25px}
  .hero .flavour-number{bottom:90px}
}
@media(max-width:800px) and (orientation:landscape) and (max-height:520px){
  .hero{height:640px;min-height:640px}
  .hero .hero-product{top:255px}
  .hero .flavour.cacao .hero-product{top:270px}
  .hero .flavour.bowl .hero-product{top:240px}
}
@media(prefers-reduced-motion:reduce){.hero-glow,.hero .flavour,.hero .hero-product{transition:none!important}}

/* Native archive recipes use their original photography. */
.recipe-card.has-photo .recipe-image{width:100%;height:100%;max-width:none;inset:0;object-fit:cover;transform:none;filter:none}
.recipe-card.has-photo .recipe-art:hover .recipe-image{transform:scale(1.035)}
.recipe-card.has-photo .recipe-label{z-index:2;background:#fff8e9;color:#202b22;padding:7px 11px;border-radius:50px}
.recipe-card.has-photo .recipe-open-arrow{z-index:2}
.detail-visual.has-photo{min-height:380px}
.detail-visual.has-photo>span{display:none}
.detail-visual.has-photo>img{inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:none;filter:none}
.detail-visual.has-photo .detail-photo-note{z-index:2;background:#fff8e9cc;color:#202b22;border-radius:20px;padding:5px 10px}
.portion-controls[hidden]{display:none}
.example-note a{text-decoration:underline;text-underline-offset:3px}
@media(min-width:801px) and (max-width:1100px){.site-header .desktop-nav{gap:20px;font-size:11px}.site-header .header-cta{display:none}}
@media(min-width:1101px){.site-header .desktop-nav{gap:27px}}

/* Every MAELS recipe is a layered fruit cutout, with its own colour and word. */
.recipe-art{overflow:visible}
.recipe-art:after{pointer-events:none;transition:transform .65s cubic-bezier(.22,.8,.2,1),opacity .5s}
.recipe-art:hover:after,.recipe-art:focus-visible:after{transform:translateY(-50%) scale(1.06);opacity:.78}
.recipe-art:focus-visible .recipe-image{transform:translate(-50%,-56%) rotate(4deg) scale(1.07)}
.recipe-card .recipe-body{position:relative;z-index:2}
.recipe-image{will-change:transform}
.taste-profile{font-size:10px;font-weight:600;letter-spacing:.035em;color:var(--muted);margin-top:15px}.taste-profile span{padding-inline:5px;opacity:.4}
.flavour-logic{background:#efece2;border-radius:16px;padding:19px 21px;margin:24px 0}.flavour-logic h3{font-size:18px;margin:0 0 9px}.flavour-logic p{font-size:11px;line-height:1.8;color:var(--muted)}
.first-taste{border-left:3px solid #d29a43;padding:3px 0 3px 16px;margin:22px 0;font-size:11px;line-height:1.8}.first-taste strong{display:block;margin-bottom:4px}.first-taste p{color:var(--muted)}
@media(prefers-reduced-motion:reduce){.recipe-image{will-change:auto}.recipe-art:after{transition:none}}
.portion-note{font-size:10px;line-height:1.7;color:var(--muted);padding:12px 0}.portion-note[hidden]{display:none}

/* One homepage: recipes, a daily fact and the person behind MAELS. */
.recipe-pagination{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:24px;margin-top:42px}.recipe-pagination:empty{display:none}.recipe-page-status{font-size:11px;color:var(--muted)}.recipe-page-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.recipe-page-link{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50px;padding:10px 13px;font-size:11px;font-weight:600;transition:background .2s,transform .2s}.recipe-page-link:hover{background:#f2e5cb;transform:translateY(-2px)}.recipe-page-link[aria-current=page]{background:var(--ink);border-color:var(--ink);color:var(--maels-cream)}.recipe-page-direction{padding-inline:17px}.recipe-page-link.is-disabled{opacity:.35;pointer-events:none}.recipe-page-gap{font-size:12px;padding:0 4px}
.home-facts{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center;padding-top:65px;padding-bottom:85px;border-top:1px solid var(--line)}.home-facts-intro{position:relative;align-self:stretch;padding:36px 0 60px;isolation:isolate}.home-facts h2,.home-about h2{font-size:clamp(46px,5.5vw,78px);letter-spacing:-.07em;line-height:.96;font-weight:900}.home-facts h2>span,.home-about h2>span{color:var(--maels-burnt)}.home-facts-intro>p:last-of-type{font-size:14px;color:var(--muted);line-height:1.8;margin-top:25px}.home-facts-mark{position:absolute;bottom:-15px;left:0;font-size:170px;font-weight:900;letter-spacing:-.08em;line-height:1;color:#ba7f29;opacity:.09;z-index:-1;pointer-events:none}.home-fact-card{background:#f4e1af;border:1px solid #d9b76c66;border-radius:24px;padding:29px 33px;color:var(--ink);box-shadow:0 13px 34px #6d471008;min-width:0}.home-fact-top{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:9px;font-weight:600;letter-spacing:.09em;padding-bottom:20px;border-bottom:1px solid #8a6a3530}.home-fact-top time{font-size:10px;font-weight:400;letter-spacing:0;white-space:nowrap}.home-fact-content{padding:27px 0}.home-fact-topic{font-size:9px;line-height:1.6;text-transform:uppercase;letter-spacing:.08em;color:#665331}.home-fact-content h3{font-size:clamp(28px,3vw,41px);line-height:1.04;letter-spacing:-.055em;font-weight:900;margin-top:11px;overflow-wrap:anywhere}.home-fact-content p{font-size:14px;line-height:1.85;margin-top:18px;max-width:560px}.home-fact-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border-top:1px solid #8a6a3530;padding-top:21px}.home-fact-bottom .button{font-size:11px;gap:21px;flex-shrink:0}.home-fact-sources{min-width:0;padding-top:12px}.home-fact-sources summary{font-size:10px;font-weight:600;cursor:pointer}.home-fact-sources ul{padding-left:15px;margin:13px 0 0;max-width:280px;font-size:10px;line-height:1.8;overflow-wrap:anywhere}.home-fact-sources li+li{margin-top:8px}.home-fact-sources a{text-decoration:underline;text-underline-offset:3px}.home-fact-today{background:none;border:0;font-size:10px;text-decoration:underline;text-underline-offset:3px;margin-top:18px;padding:0;color:#665331}.home-fact-error,.home-fact-unavailable{font-size:12px;line-height:1.7;margin-top:18px}.home-fact-unavailable .text-link{font-size:12px;display:block;margin-top:12px}
.home-about{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;padding-top:80px;padding-bottom:90px;border-top:1px solid var(--line);isolation:isolate}.home-about .eyebrow{margin-bottom:22px}.maker-roles{display:flex;gap:7px;flex-wrap:wrap;margin-top:25px}.maker-roles span{padding:7px 10px;border:1px solid #bda98770;border-radius:40px;font-size:8px;font-weight:600;letter-spacing:.06em}.home-about-copy>p{font-size:16px;line-height:1.85;max-width:500px}.home-about-copy>p+p{font-size:14px;margin-top:16px;color:var(--muted)}.maker-contact{font-size:11px;gap:24px;margin-top:28px;white-space:normal;text-align:left;max-width:100%}.maker-contact>span{font-size:18px}.maker-email{display:block;font-size:10px;color:var(--muted);margin-top:13px}.home-about-banana{position:absolute;width:135px;height:135px;object-fit:contain;right:42px;bottom:30px;opacity:.065;transform:rotate(12deg);z-index:-1;pointer-events:none}
@media(max-width:1100px){.home-facts{gap:40px}.home-about{gap:45px}.home-fact-card{padding:25px}.home-fact-content p{font-size:13px}.home-about-copy>p{font-size:14px}}
@media(max-width:800px){.home-facts{gap:35px;grid-template-columns:1fr;padding-top:45px;padding-bottom:55px}.home-facts-intro{padding:0}.home-facts-intro h2 br{display:none}.home-facts-intro>p:last-of-type{margin-top:17px;font-size:13px}.home-facts-mark{display:none}.home-facts h2,.home-about h2{font-size:clamp(44px,8vw,65px)}.home-fact-card{padding:26px 28px}.home-fact-content h3{font-size:36px}.home-fact-content p{font-size:14px}.home-about{grid-template-columns:1fr;gap:28px;padding-top:55px;padding-bottom:60px}.home-about-copy>p{font-size:14px;max-width:580px}.home-about-banana{right:40px;bottom:45px}.recipe-pagination{align-items:flex-start;gap:15px;flex-direction:column}}
@media(max-width:520px){.home-facts{padding-top:38px;padding-bottom:45px;gap:26px}.home-facts h2,.home-about h2{font-size:44px}.home-facts-intro .eyebrow,.home-about .eyebrow{font-size:8px}.home-fact-card{padding:23px 21px;border-radius:20px}.home-fact-content{padding:23px 0}.home-fact-content h3{font-size:31px}.home-fact-content p{font-size:13px;line-height:1.8}.home-fact-top{font-size:8px;gap:8px}.home-fact-top time{font-size:9px}.home-fact-bottom{gap:15px;flex-wrap:wrap}.home-fact-sources{flex:1 1 80px}.home-fact-bottom .button{font-size:10px;gap:15px}.home-about{padding-top:43px;padding-bottom:48px;gap:24px}.home-about-copy>p{font-size:13px}.maker-roles{gap:5px;margin-top:20px}.maker-roles span{font-size:7px;padding:7px 9px}.maker-contact{font-size:10px;gap:15px;padding:12px 17px}.home-about-banana{width:105px;height:105px;right:22px;bottom:23px}.recipe-pagination{margin-top:29px;padding-top:20px;gap:13px}.recipe-page-controls{gap:5px}.recipe-page-link{font-size:10px;min-width:35px;min-height:37px;padding:9px 11px}.recipe-page-direction{padding-inline:13px}.recipe-page-status{font-size:10px}}
@media(prefers-reduced-motion:reduce){.recipe-page-link{transition:none}}