/* WhatsCook.ing slicing game (scene 8), the head stylesheet: what shows before the game runs (the
   section, the band, the field, the logo, the still life, the bars). The game's own nodes are
   styled by play.css, which the engine loads before it builds them. */
.jr-close.wcg{display:grid;grid-template-rows:auto minmax(0,1fr);align-items:stretch;justify-content:stretch;height:100vh;height:100svh;min-height:600px;padding:0;text-align:center}
.jr-close.wcg::before{background:none}
/* The exit into the questions (30 Sep: the page cut hard from the dark game to cream): two long,
   uneven swells, a berry one and the cream one in front of it, so the dark field steps down through
   the brand's berry into the page, like the organic edges between the story's colour fields. The
   berry crests stay 36 px or lower, 12 px or more under the pill; the engine keeps the card above
   the last 44 px (FOOT). */
.jr-close.wcg .jr-cfoot{z-index:6;height:44px}
/* The scalloped ocean edge from scene 7 sits above the band (z-index 2), in the story's own ocean
   #4A6274 as on the live page: under the band's deep-berry wash it read as a muddy mauve strip. It is
   44 px tall and the band's content starts at the top bar plus 6 to 26 px, so it never touches text. */
.jr-close.wcg .jr-cedge{z-index:3}
/* The band's light: a glow on the headline only, and a deeper berry (#8E2F55 at .5) under the
   eyebrow row and the badge-and-price row (--wcg-dk above the band's bottom), so the eyebrow and
   the price line clear 4.5:1 on the pixels actually painted, grain included. The band and the game
   are one screen (owner, 29 Sep: "just one screen rather than two waves"): no wave between them;
   the band's light is painted by its ::before, and the field below starts in the same deep berry
   and darkens into the game's ink, so the colour runs on without a seam. */
.jr-close.wcg .wcg-band{--wcg-t0:calc(var(--jr-topbar) + 42px);--wcg-t1:calc(var(--jr-topbar) + 106px);--wcg-dk:112px;--wcg-gy:calc(var(--jr-topbar) + 92px);will-change:transform;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:calc(var(--jr-topbar) + clamp(14px,2.6vh,26px)) max(20px,4vw) calc(clamp(16px,2.4vh,24px) + 26px)}
.jr-close.wcg .wcg-band::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(142,47,85,.5) var(--wcg-t0),rgba(142,47,85,0) var(--wcg-t1),rgba(142,47,85,0) calc(100% - var(--wcg-dk) - 64px),rgba(142,47,85,.5) calc(100% - var(--wcg-dk))),
    radial-gradient(44% 30% at 50% var(--wcg-gy),rgba(214,100,142,.32),rgba(214,100,142,0))}
.jr-close.wcg .jr-eye{color:#FBF3EC;margin:0 0 12px}
.jr-close.wcg h2{font:400 clamp(56px,min(6.2vw,10.4vh),96px)/.95 var(--jr-serif);color:var(--jr-cream);letter-spacing:-.02em;margin:0 0 clamp(26px,3.6vh,34px);white-space:nowrap}
.jr-close.wcg h2 em{color:var(--jr-cream);position:relative;white-space:nowrap}
.jr-close.wcg h2 em svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.28em;overflow:visible}
.jr-close.wcg .wcg-cta{display:flex;align-items:center;justify-content:center;gap:18px}
.jr-close.wcg .wcg-cta img{height:clamp(48px,6.2vh,56px);width:auto}
.jr-close.wcg .wcg-cta a:focus-visible{outline-color:#FBF3EC}
/* The hand-off to the top bar's badge (desktop) or the bottom bar (phones): while the band's badge
   is under the top bar or off screen, the engine sets .wcg-bdg-away and the badge fades over the
   same .3 s as the bar comes in, so one App Store button shows at a time. A focused badge shows. */
.jr-close.wcg .wcg-band .jr-badge{transition:opacity .3s var(--jr-ease)}
.jr-close.wcg.wcg-bdg-away .wcg-band .jr-badge:not(:focus-visible){opacity:0;pointer-events:none}
.jr-close.wcg .jr-price{color:#FFF;font:500 14px/1.45 var(--jr-sans);text-align:left;margin:0;text-wrap:balance}
.jr-close.wcg .jr-price b{display:block;font-weight:600}
/* The field starts in the band's bottom colour (the deep berry at .5 over the section's berry) and
   darkens into the game's ink by --wcg-ink, so the band and the game read as one screen. */
.wcg-field{--wcg-c:251,243,236;--wcg-logo:rgba(251,243,236,.9);--wcg-ink:62%;position:relative;z-index:1;min-height:0;background:linear-gradient(180deg,rgba(31,26,28,0),rgba(31,26,28,.34) 16%,rgba(31,26,28,.8) 40%,#1F1A1C var(--wcg-ink)) rgba(142,47,85,.5);overflow:hidden;isolation:isolate;container-type:size;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:default}
.wcg-field::before,.wcg-field::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none}
.wcg-field::before{background:radial-gradient(60% 70% at 50% 100%,rgba(196,75,120,.24),rgba(196,75,120,0) 70%)}
.wcg-field::after{background-image:var(--jr-grain);background-size:220px;opacity:.18;mix-blend-mode:overlay;-webkit-mask-image:linear-gradient(180deg,transparent,#000 var(--wcg-ink));mask-image:linear-gradient(180deg,transparent,#000 var(--wcg-ink))}
.wcg-field>*{position:absolute}
.wcg-field [hidden]{display:none!important}
.wcg-field.wcg-nogame>:not(.wcg-logo):not(.wcg-still){display:none!important}
.wcg-field .wcg-logo{left:0;right:0;bottom:104px;z-index:1;display:flex;justify-content:center;align-items:flex-end;line-height:1;font-size:clamp(44px,min(12vw,16vh),160px);color:var(--wcg-logo);pointer-events:none}
/* One lockup, one line: the two words and the ring sit in one .wm, so they move and read as one
   wordmark. The ring keeps 8 px or more of air from "WhatsCook" and "ing" at every size. */
.wcg-field .wcg-logo .wm{display:inline-flex;align-items:flex-end;white-space:nowrap;font:800 1em/1 'Nunito',var(--jr-sans);letter-spacing:-.02em}
.wcg-field .wcg-logo svg{display:block;overflow:visible;width:.842em;height:.842em;margin:0 max(.053em,6px) .105em;flex:0 0 auto}
.wcg-field .wcg-still{inset:0;z-index:2;pointer-events:none}
.wcg-field .wcg-si{position:absolute;display:block;max-width:none;width:auto;height:auto;left:calc(50% + var(--f) * min(100%,1000px));top:var(--y);transform:translate(-50%,-50%) rotate(var(--r))}
.wcg-field .wcg-si1{--f:-.3;--y:30%;--r:-14deg;width:99px;width:calc(1.104 * clamp(64px,min(19cqh,22cqw),118px))}
.wcg-field .wcg-si2{--f:.3;--y:26%;--r:8deg;height:79px;height:calc(.88 * clamp(64px,min(19cqh,22cqw),118px))}
.wcg-field .wcg-si3{--f:.4;--y:58%;--r:18deg;height:101px;height:calc(1.12 * clamp(64px,min(19cqh,22cqw),118px))}
.wcg-field .wcg-si4{--f:-.38;--y:62%;--r:-8deg;height:78px;height:calc(.864 * clamp(64px,min(19cqh,22cqw),118px))}
/* The lower pair hangs from the logo, not from the field's height: the image's centre sits 0.6
   of its own height plus 1.15 logo heights above the logo's bottom offset, so its lowest pixel
   stays above the letters on any field (no JavaScript needed; the logo sizes are repeated). */
.wcg-field .wcg-si3{top:calc(100% - 104px - 1.15 * clamp(44px,min(12vw,16vh),160px) - .672 * clamp(64px,min(19cqh,22cqw),118px) - 6px)}
.wcg-field .wcg-si4{top:calc(100% - 104px - 1.15 * clamp(44px,min(12vw,16vh),160px) - .5184 * clamp(64px,min(19cqh,22cqw),118px) - 6px)}
/* A short field (a small phone, a phone held sideways) has no room for four foods around the
   Play button and above the logo: the lower pair goes and the upper pair moves out a little. */
@container (max-height:300px){
.wcg-field .wcg-si3,.wcg-field .wcg-si4{display:none}
.wcg-field .wcg-si1{--f:-.34}
.wcg-field .wcg-si2{--f:.34}
}
html.jr-motion .wcg-field .wcg-still,.wcg-field.wcg-live .wcg-still{display:none}
html .wcg-field.wcg-live.wcg-s-still .wcg-still,html .wcg-field.wcg-nogame .wcg-still{display:block}
@media (min-width:900px){
.wcg-field .wcg-si3{--f:.44}
.wcg-field .wcg-si4{--f:-.44}
.jr-topcta{transition:opacity .3s var(--jr-ease),visibility 0s}
.jr-topcta.wcg-hide{opacity:0;visibility:hidden;transition:opacity .3s var(--jr-ease),visibility 0s linear .3s}
}
@media (max-width:899px){
.jr-close.wcg{min-height:540px}
.jr-close.wcg .wcg-band{padding:calc(var(--jr-topbar) + 12px) 16px 32px}
.jr-close.wcg .jr-eye{margin-bottom:8px}
.jr-close.wcg h2{font-size:clamp(38px,11.4vw,54px);white-space:normal;margin-bottom:18px;text-wrap:balance}
.jr-close.wcg .wcg-cta{flex-direction:column;gap:6px}
.jr-close.wcg .wcg-cta img{height:46px}
.jr-close.wcg .jr-price{text-align:center;font-size:13px;line-height:1.4}
.wcg-field .wcg-logo{bottom:92px;font-size:min(calc((100vw - 44px) / 7.684),12vh)}
.wcg-field .wcg-si3{top:calc(100% - 92px - 1.15 * min(calc((100vw - 44px) / 7.684),12vh) - .672 * clamp(64px,min(19cqh,22cqw),118px) - 6px)}
.wcg-field .wcg-si4{top:calc(100% - 92px - 1.15 * min(calc((100vw - 44px) / 7.684),12vh) - .5184 * clamp(64px,min(19cqh,22cqw),118px) - 6px)}
.jr-close.wcg .wcg-band{--wcg-dk:78px;--wcg-gy:calc(var(--jr-topbar) + 78px)}
.jr-bar{transition:translate .3s var(--jr-ease)}
.jr-bar.wcg-hide{translate:0 calc(100% + 12px);visibility:hidden;transition:translate .3s var(--jr-ease),visibility 0s linear .3s}
}
/* The top bar steps aside while the end screen is docked (ninja.js sets .wcg-away), the same way
   the phone bar does, so the band and the game fill the window and no word ever sits under the
   bar. Phones and desktops; tablets (600 to 899 px) keep their bar. */
@media (max-width:599px),(min-width:900px){
/* (an even ease in and out over .24s: the story's own ease puts half of the 46 to 66 px slide into the first 40 ms, so
   in a 25 or 30 fps screen recording the bar read as there in one frame and gone in the next) */
.jr-top{transition:translate .24s cubic-bezier(.45,0,.55,1),visibility 0s}
.jr-top.wcg-away{translate:0 calc(-100% - 2px);visibility:hidden;transition:translate .24s cubic-bezier(.45,0,.55,1),visibility 0s linear .24s}
/* and scene 7's scalloped edge slides up out of the band with it (the section clips it), so the window's top rows are the
   band's own berry, never scene 7's slate between the scallops */
.jr-close.wcg .jr-cedge{transition:translate .3s var(--jr-ease)}
.jr-close.wcg.wcg-docked .jr-cedge{translate:0 -46px}
}
/* Phones: 8 px more above the eyebrow, so a stop 56 px past the docked screen (the bar away) still
   leaves 8 px of air above it, and 40 px either side of docked leaves 18 px or more. */
@media (max-width:599px) and (min-height:501px){.jr-close.wcg .wcg-band{padding-top:calc(var(--jr-topbar) + 20px)}}
@media (max-width:899px) and (max-height:700px){.jr-close.wcg .jr-eye{display:none}.jr-close.wcg .wcg-band{--wcg-t0:var(--jr-topbar);--wcg-t1:var(--jr-topbar);--wcg-gy:calc(var(--jr-topbar) + 54px)}}
/* A phone held sideways: one screen again, the band as one row, a smaller logo. */
@media (max-width:899px) and (max-height:500px){
.jr-close.wcg{min-height:0}
.jr-close.wcg .wcg-band{padding:calc(var(--jr-topbar) + 6px) 16px 27px}
.jr-close.wcg h2{font-size:34px;white-space:nowrap;margin-bottom:10px}
.jr-close.wcg .wcg-cta{flex-direction:row;gap:14px}
.jr-close.wcg .wcg-cta img{height:40px}
.jr-close.wcg .jr-price{text-align:left;font-size:12.5px}
.wcg-field .wcg-logo{font-size:14vh}
.wcg-field .wcg-si3{top:calc(100% - 92px - 1.15 * 14vh - .672 * clamp(64px,min(19cqh,22cqw),118px) - 6px)}
.wcg-field .wcg-si4{top:calc(100% - 92px - 1.15 * 14vh - .5184 * clamp(64px,min(19cqh,22cqw),118px) - 6px)}
.jr-close.wcg .wcg-band{--wcg-dk:72px;--wcg-gy:calc(var(--jr-topbar) + 22px)}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){.jr-bar,.jr-bar.wcg-hide{transition:none}}
@media (prefers-reduced-motion:reduce){.jr-top,.jr-top.wcg-away,.jr-close.wcg .jr-cedge{transition:none}}
@media (min-width:900px) and (prefers-reduced-motion:reduce){.jr-topcta,.jr-topcta.wcg-hide{transition:none}}
@media (prefers-reduced-motion:reduce){.jr-close.wcg .wcg-band .jr-badge{transition:none}}