/* Dimensional package shell and photographic hero treatment. */
@media (min-width:801px){
  .box{--box-depth:57px;position:relative;width:min(1060px,calc(100% - 150px));margin:105px auto 75px;overflow:visible;box-shadow:22px 34px 50px #4e331d70}
  .box:before{content:"";position:absolute;z-index:4;left:-7px;top:calc(-1 * var(--box-depth));width:calc(100% + var(--box-depth) + 7px);height:var(--box-depth);background:linear-gradient(180deg,transparent 0 52%,#bdb5a9 53% 56%,transparent 57%),linear-gradient(155deg,#fff 0 48%,#eee9df 100%);clip-path:polygon(var(--box-depth) 0,100% 0,calc(100% - var(--box-depth)) 100%,0 100%);filter:drop-shadow(0 -5px 0 #fff);box-shadow:inset 0 -3px 0 #bbb3a6}
  .box:after{content:none}
  .box>*,.box-top{position:relative;z-index:5}
  .box-flaps{display:block;position:absolute;z-index:6;left:50%;top:-35px;width:128px;height:18px;pointer-events:none;transform:translateX(-35%);border:2px solid #bdb5a9;border-top:0;border-radius:0 0 46% 46%;background:linear-gradient(180deg,#f6f2e9,#fff)}
  .box-flaps .flap,.box-flaps .flap-seam{display:none}
  .flap{position:absolute;display:block;background:linear-gradient(165deg,#fff,#eee9df);border:1px solid #cfc7ba;box-shadow:inset 0 -3px 0 #d9d2c8}
  .flap-back{left:13%;right:7%;top:0;height:32px;clip-path:polygon(5% 0,97% 0,100% 100%,0 100%)}
  .flap-left{left:0;top:22px;width:51%;height:36px;clip-path:polygon(8% 0,100% 12%,92% 100%,0 76%);transform:rotate(-1.5deg);transform-origin:right bottom}
  .flap-right{right:0;top:19px;width:53%;height:39px;clip-path:polygon(0 10%,93% 0,100% 78%,8% 100%);transform:rotate(1deg);transform-origin:left bottom}
  .flap-seam{position:absolute;z-index:2;left:50%;top:23px;width:1px;height:31px;background:#aaa296;transform:rotate(7deg)}
  .box-side{position:absolute;z-index:3;left:100%;top:0;width:180px;height:100%;padding:76px 18px 40px;background:linear-gradient(90deg,#f4e7bd,#fff9df 72%,#dac795);color:#17130f;border-left:8px solid #fff;box-shadow:inset 10px 0 0 #8b7d61,25px 32px 40px #4e331d45;overflow:hidden;transform:scaleX(.32) skewY(-17.5deg);transform-origin:left top;font-family:Arial,sans-serif;text-align:left}
  .box-side h3{margin:7px 0 3px;font-size:23px;line-height:.9;letter-spacing:-1px}.box-side h4{margin:9px 0 2px;font-size:12px;text-transform:uppercase}.box-side p{margin:4px 0;font-size:10px;line-height:1.25}.box-side b{display:flex;justify-content:space-between;padding:4px 0;border-top:1px solid;font-size:10px}.side-brand{font:900 22px "Archivo Black",sans-serif;color:#d6251f}.side-rule{height:2px;margin:5px 0;background:#17130f}.side-rule.heavy{height:7px}.side-small{font-size:8px!important}
}
.burst{width:145px;font-size:1.8rem}.burst small{font-size:.62rem}.burst-left{left:2%}.burst-right{right:2%}
.cereal-bowl{z-index:1;width:min(760px,92%);height:300px;margin:18px auto -4px;background:url("justinios-cereal-bowl.png") center/contain no-repeat;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 22px 12px #74120f88)}
.cereal-bowl .milk,.cereal-bowl .loop{display:none}
@media (max-width:800px){.burst{width:104px;font-size:1.25rem}.cereal-bowl{width:560px;height:280px;background:url("justinios-cereal-bowl.png") center/contain no-repeat;border:0;box-shadow:none}}

/* Watch fit and prize-card patterns */
.watch-card{overflow:visible;background-color:#fff;background-image:repeating-conic-gradient(from 4deg at 50% 43%,#fff9e8 0 10deg,#f3cf67 10deg 20deg)}
.watch{z-index:1;filter:none;mix-blend-mode:normal;background-image:url("casio-watch-transparent-v2.png")}.watch-screen{left:60px;top:68px;width:96px;height:45px;padding:3px 4px}.watch-date{height:14px;justify-content:space-between;gap:0;padding:0;font-size:.68rem;line-height:1}.watch-time{padding:0;font-size:1.78rem;line-height:.96;letter-spacing:-.16em}.watch-time span{font-size:.62rem;margin-left:3px}

/* Full mouse-and-touch cube simulator */
.cube-card{background-color:#fff;background-image:radial-gradient(#b9d9ec 1.5px,transparent 1.5px);background-size:13px 13px}
.animcube-wrap{width:min(100%,360px);height:315px;margin:0 auto;padding:8px;background:#fff;border-radius:50%;box-shadow:inset 0 0 0 3px var(--ink),0 8px 0 #b9d9ec}
#animcube{width:100%;height:100%}.cube-card canvas{cursor:grab}.cube-card canvas:active{cursor:grabbing}.cube-hint{max-width:360px;margin:12px auto 0;line-height:1.4}.cube-credit{margin:5px 0 0;color:#756b5d;font-size:.62rem}
