/* One opaque boundary per pair of sections: the previous colour fills the
   upper side of the curve, while the next section fills everything below. */
#bowls{
  --bowl-acai:#805277;
  --bowl-ocean:#39788C;
  --bowl-pitaya:#A95679;
  --bowl-matcha:#657647;
  --bowl-pancake:#966843;
  --bowl-classic:#4E7360;
  --bowl-coconut:#876D4E;
  --bw-wave-height:clamp(72px,7.2vw,132px);
}
#bowls .bw-chapters{padding:0;background:var(--bowl-acai)}
#bowls .bw-ch{
  --ink:#FFF8F0;--muted:#FFF8F0;--green:#FFFFFF;
  color:var(--ink);background:var(--bowl-bg);
  padding-top:calc(var(--bw-wave-height) + clamp(28px,3vw,54px));
  padding-bottom:clamp(100px,7vw,132px);
}
#bowls .bw-ch#acai{--bowl-bg:var(--bowl-acai);--bowl-prev:var(--band-sand);--bowl-light:#FAD8F0}
#bowls .bw-ch#ocean{--bowl-bg:var(--bowl-ocean);--bowl-prev:var(--bowl-matcha);--bowl-light:#DBFAFF}
#bowls .bw-ch#pitaya{--bowl-bg:var(--bowl-pitaya);--bowl-prev:var(--bowl-acai);--bowl-light:#FFE4F0}
#bowls .bw-ch#matcha{--bowl-bg:var(--bowl-matcha);--bowl-prev:var(--bowl-pitaya);--bowl-light:#EEFFC7}
#bowls .bw-ch#pancake{--bowl-bg:var(--bowl-pancake);--bowl-prev:var(--bowl-coconut);--bowl-light:#FFE7BC}
#bowls .bw-ch#classic{--bowl-bg:var(--bowl-classic);--bowl-prev:var(--bowl-pancake);--bowl-light:#D7F9CE}
#bowls .bw-ch#coconut{--bowl-bg:var(--bowl-coconut);--bowl-prev:var(--bowl-ocean);--bowl-light:#FFF0CE}
#bowls .bw-ch::before,#bowls .bw-ch::after{display:none}
.bw-join{position:absolute;z-index:0;top:-1px;left:0;display:block;width:100%;
  height:calc(var(--bw-wave-height) + 2px);pointer-events:none;overflow:hidden;
  fill:var(--bowl-prev)}
#bowls .bw-grid{z-index:2}
#bowls .bw-ingredients{z-index:1}
#bowls .bw-decor-toggle{z-index:3;background:rgba(255,255,255,.92)}
#bowls .bw-ch .bw-title{color:#FFFFFF}
#bowls .bw-ch .bw-title em,#bowls .bw-ch .bw-sub{color:var(--bowl-light)}
#bowls .bw-ch .bw-no{color:transparent;-webkit-text-stroke:1.5px var(--bowl-light);opacity:.55}
#bowls .bw-ch .bw-tag{color:#FFFFFF;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.3)}
#bowls .bw-ch .bw-ingr li::before{background:var(--bowl-light);opacity:1}
#bowls .bw-ch .bw-price{background:#FFF8F0;border-color:#FFF8F0;box-shadow:0 6px 20px rgba(0,0,0,.1)}
#bowls .bw-ch .bw-price b{color:#283A21}
#bowls .bw-ch .bw-price span{color:#46513E}
#bowls .bw-ch .btn{color:var(--bowl-bg);background:#FFF8F0;border-color:#FFF8F0;box-shadow:0 8px 24px rgba(0,0,0,.14)}
#bowls .bw-ch .btn:hover{background:#FFFFFF;border-color:#FFFFFF}
#bowls .bw-ch .bw-cap,#bowls .bw-ch .bw-cap b,#bowls .bw-ch .bw-ch-pause{color:#FFF8F0}
#bowls .bw-ch a:focus-visible,#bowls .bw-ch button:focus-visible{outline:3px solid #FFFFFF;outline-offset:4px}
#bowls .bw-ch .bw-screen{outline-color:rgba(255,255,255,.55);box-shadow:0 28px 60px rgba(0,0,0,.3)}
#bowls .bw-outro{--bowl-prev:var(--bowl-classic);padding-top:calc(var(--bw-wave-height) + 48px)}
#bowls .bw-outro>.container{position:relative;z-index:1}
/* Keep the generated ingredients in their own colour field, below the seam. */
#bowls .bw-ingredient:nth-child(4){top:calc(var(--bw-wave-height) - 24px)}
@media(max-width:1800px){
  #bowls .bw-ingredient:nth-child(1){top:calc(var(--bw-wave-height) - 35px)}
}
@media(max-width:980px){
  #bowls .bw-ch{padding-top:calc(var(--bw-wave-height) + 32px);padding-bottom:110px}
  #bowls .bw-ingredient:nth-child(1){top:calc(var(--bw-wave-height) - 26px)}
  #bowls .bw-ingredient:nth-child(4){top:calc(var(--bw-wave-height) - 35px)}
}