/* Fallback faces sized to the web fonts, so the text does not reflow when they arrive (layout shift). Measured in Chromium against the loaded fonts. */
@font-face{font-family:'jr-serif-fb'; src:local('Times New Roman'),local('TimesNewRomanPSMT'); size-adjust:83.5%; ascent-override:118.6%; descent-override:37.1%; line-gap-override:0%}
@font-face{font-family:'jr-serif-fb'; font-style:italic; src:local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT'); size-adjust:88.5%; ascent-override:111.9%; descent-override:35%; line-gap-override:0%}
@font-face{font-family:'jr-sans-fb'; src:local('Arial'),local('ArialMT'); size-adjust:94.5%; ascent-override:104.8%; descent-override:32.8%; line-gap-override:0%}
/* WhatsCook.ing scroll story. Every class here starts with jr-, every custom
   property with --jr-. Nothing styles inside .jr-screen: that subtree belongs
   to the screens module (.wcs). No transform, filter, perspective, will-change
   or contain sits on body or on any ancestor of a position:fixed element (G3):
   the top bar and the phone bar are fixed at body level. */
:root{
  --jr-berry:#C44B78; --jr-deep:#8E2F55; --jr-tint:#F6D9E3;
  --jr-cream:#FBF3EC; --jr-paper:#FFFFFF; --jr-ink:#1F1A1C;
  --jr-soft:rgba(31,26,28,.64); --jr-faint:rgba(31,26,28,.42); --jr-line:rgba(31,26,28,.09);
  --jr-olive:#5B6B4A; --jr-gold:#D4A853; --jr-ocean:#4A6274;
  --jr-sans:'DM Sans','jr-sans-fb',system-ui,-apple-system,sans-serif;
  --jr-serif:'Instrument Serif','jr-serif-fb',Georgia,serif;
  --jr-mono:'JetBrains Mono',ui-monospace,monospace;
  --jr-round:'Nunito','jr-sans-fb',system-ui,sans-serif;
  --jr-ease:cubic-bezier(.16,.84,.44,1);
  --jr-topbar:64px;
  --jr-barh:0px;
}
@media (max-width:899px){ :root{ --jr-topbar:54px; --jr-barh:calc(66px + env(safe-area-inset-bottom)); } }
html{background:var(--jr-cream); overflow-x:clip}
body{margin:0; background:var(--jr-cream); color:var(--jr-ink); font-family:var(--jr-sans);
     -webkit-font-smoothing:antialiased; overflow-x:clip}
main,.jr-foot{display:block}
.jr-top *,.jr-open *,.jr-journey,.jr-stage,.jr-caps,.jr-caps *,.jr-close *,.jr-faq *,.jr-foot *,.jr-bar *,
.jr-pan,.jr-panph,.jr-phonebox,.jr-phone,.jr-glass{box-sizing:border-box}
a{color:inherit}
em{font-family:var(--jr-serif); font-style:italic; font-weight:400; color:var(--jr-berry)}

/* smooth scrolling (Lenis, desktop pointers only) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* wordmark, mirrors public/landing.html .mark */
.mark{display:inline-flex; align-items:flex-end; line-height:1; text-decoration:none; color:var(--jr-ink)}
.mark .wm{font-family:'Nunito',var(--jr-sans); font-weight:800; letter-spacing:-.02em; font-size:19px; line-height:1}
.mark svg{display:block; overflow:visible; margin:0 1px 2px; flex:0 0 auto}

.jr-badge{display:inline-block; line-height:0; border-radius:9px}
.jr-badge img{display:block; height:40px; width:auto}
.jr-badge:focus-visible{outline:2px solid var(--jr-berry); outline-offset:4px}
.jr-badge-lg img{height:48px}
.jr-badge-xl img{height:56px}

/* top bar */
.jr-top{position:fixed; top:0; left:0; right:0; z-index:50; height:var(--jr-topbar);
        background:rgba(251,243,236,.9); border-bottom:1px solid rgba(31,26,28,.05);
        -webkit-backdrop-filter:saturate(1.3) blur(12px); backdrop-filter:saturate(1.3) blur(12px)}
.jr-topin{height:100%; max-width:1320px; margin:0 auto; padding:0 max(20px,4vw); display:flex; align-items:center; gap:20px}
.jr-topcta{margin-left:auto; display:flex; align-items:center; gap:14px}
.jr-trialnote{font-family:var(--jr-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--jr-soft)}
@media (max-width:899px){ .jr-topcta{display:none} }

/* phone bar, pinned to the bottom on phones */
.jr-bar{display:none}
@media (max-width:899px){
  .jr-bar{position:fixed; left:0; right:0; bottom:0; z-index:55; display:flex; align-items:center; justify-content:space-between;
          gap:12px; padding:10px 18px calc(10px + env(safe-area-inset-bottom)); background:var(--jr-cream);
          border-top:1px solid rgba(31,26,28,.07); box-shadow:0 -10px 30px rgba(31,26,28,.06)}
  .jr-bar span{font-size:15px; font-weight:600; color:var(--jr-ink)}
  .jr-bar .jr-badge img{height:42px}
  body{padding-bottom:var(--jr-barh)}
}

.jr-eyebrow,.jr-eye{font-family:var(--jr-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--jr-faint); margin:0 0 14px; font-weight:400}

/* ---------- cut-out kit: badges, stickers, paper labels ---------- */
.jr-rb{width:100%; height:100%; border-radius:50%; box-shadow:0 14px 30px rgba(31,26,28,.2), 0 3px 8px rgba(31,26,28,.1)}
.jr-rb svg{display:block; width:100%; height:100%; overflow:visible}
.jr-rbring{transform-box:view-box; transform-origin:50% 50%; animation:jr-spin 24s linear infinite}
.jr-rbt{font-family:var(--jr-mono); font-size:9.2px; font-weight:500; letter-spacing:.1em}
.jr-rbn{font-family:var(--jr-serif); font-weight:400; letter-spacing:-.02em}
.jr-rbu{font-family:var(--jr-mono); font-size:8.2px; font-weight:500; letter-spacing:.16em}
@keyframes jr-spin{to{transform:rotate(360deg)}}
.jr-stk{display:inline-block; white-space:nowrap; font-family:var(--jr-round); font-weight:800; font-size:14px; line-height:1;
  letter-spacing:.05em; text-transform:uppercase; padding:8px 14px 7px; border-radius:999px;
  box-shadow:0 0 0 3.5px #FFFFFF, 0 10px 22px rgba(31,26,28,.22)}
.jr-t-gold{background:var(--jr-gold); color:var(--jr-ink)}
.jr-t-berry{background:var(--jr-berry); color:var(--jr-cream)}
.jr-t-olive{background:var(--jr-olive); color:var(--jr-cream)}
.jr-t-cream{background:var(--jr-cream); color:var(--jr-deep)}
.jr-paper{position:relative; display:inline-block; white-space:nowrap; background:#FFFFFF; color:var(--jr-ink);
  font-family:var(--jr-sans); font-weight:600; font-size:15px; line-height:1; padding:12px 16px 11px; border-radius:3px;
  box-shadow:0 1px 0 rgba(31,26,28,.05), 0 12px 26px rgba(31,26,28,.24)}
.jr-tape{position:absolute; left:50%; top:-8px; width:46px; height:16px; margin-left:-23px; background:rgba(251,243,236,.8);
  transform:rotate(-4deg); box-shadow:0 1px 2px rgba(31,26,28,.1)}
.jr-psel{position:absolute; inset:0; border-radius:3px; background:var(--jr-berry); color:var(--jr-cream); display:flex; align-items:center; justify-content:center; opacity:0}
@media (max-width:899px){
  .jr-stk{font-size:calc(11px * var(--jr-lk,1)); padding:6px 10px 5px; box-shadow:0 0 0 2.5px #FFFFFF, 0 6px 14px rgba(31,26,28,.2)}
  .jr-paper{font-size:calc(12px * var(--jr-lk,1)); padding:9px 11px 8px}
  .jr-tape{width:34px; height:12px; margin-left:-17px; top:-6px}
}

/* ---------- opener: cream field, three dishes orbiting a berry blob ---------- */
.jr-open{position:relative; padding:calc(var(--jr-topbar) + 7vh) max(20px,4vw) 8vh; min-height:88vh; min-height:88svh; display:flex; align-items:center; overflow:hidden; overflow:clip}
.jr-openin{max-width:1320px; margin:0 auto; width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:5vw; align-items:center}
.jr-open h1{font-family:var(--jr-serif); font-weight:400; font-size:clamp(40px,5.2vw,74px); line-height:1.02; letter-spacing:-.01em; margin:0 0 22px}
.jr-lede{font-size:19px; line-height:1.5; color:var(--jr-soft); margin:0 0 30px; max-width:30em}
.jr-cta{display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:34px}
.jr-price{font-size:14px; line-height:1.5; color:var(--jr-soft); margin:0; max-width:34em}
.jr-cue{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--jr-faint);
        font-family:var(--jr-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase}
.jr-cuedot{animation:jr-cue 1.8s var(--jr-ease) infinite}
@keyframes jr-cue{0%{transform:translateY(0); opacity:1}70%{transform:translateY(7px); opacity:0}100%{transform:translateY(0); opacity:0}}
.jr-orbit{position:relative; margin:0; width:100%; max-width:660px; justify-self:center; aspect-ratio:1/.86; container-type:inline-size}
.jr-oblob{position:absolute; left:50%; top:50%; width:54%; aspect-ratio:1; margin:-27% 0 0 -27%}
.jr-oblob::before{content:''; position:absolute; inset:0; border-radius:46% 54% 41% 59% / 52% 44% 56% 48%;
  background:radial-gradient(circle at 38% 32%, #D25D88, var(--jr-berry) 48%, var(--jr-deep)); box-shadow:0 40px 80px rgba(142,47,85,.28);
  animation:jr-spin 60s linear infinite}
.jr-oword{position:absolute; left:50%; top:50%; transform:translate(-50%,-54%); margin:0; font-family:var(--jr-serif); font-style:italic; font-weight:400;
  color:var(--jr-cream); font-size:clamp(34px,4.6vw,70px); line-height:1; white-space:nowrap}
.jr-oell{position:absolute; inset:0; transform:scaleY(.6)}
.jr-oring{position:absolute; inset:0; animation:jr-spin 80s linear infinite}
.jr-oarm{position:absolute; left:50%; top:50%; width:0; height:0; transform:rotate(var(--a)) translateX(var(--R,38cqw)) rotate(calc(-1 * var(--a)))}
.jr-ocounter{animation:jr-spin 80s linear infinite reverse}
.jr-oflat{transform:scaleY(1.6667)}
.jr-odepth{animation:jr-depth 80s linear infinite; animation-delay:var(--dl,0s)}
.jr-odish{position:absolute; left:0; top:0; display:block; height:auto; transform:translate(-50%,-50%)}
.jr-odish img{display:block; width:100%; height:auto}
@keyframes jr-depth{0%{transform:scale(1)}25%{transform:scale(1.12)}50%{transform:scale(1)}75%{transform:scale(.86)}100%{transform:scale(1)}}
.jr-ob{position:absolute; width:21%; aspect-ratio:1; animation:jr-float 7s ease-in-out infinite}
.jr-ob1{left:1%; top:-7%}
.jr-ob2{right:-2%; bottom:-6%; width:19%; animation-delay:-3s}
@keyframes jr-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.jr-ospark{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
@media (max-width:899px){
  .jr-open{padding:calc(var(--jr-topbar) + 30px) 20px 40px; min-height:0}
  .jr-openin{grid-template-columns:1fr; gap:22px}
  .jr-open h1{font-size:clamp(36px,10.5vw,48px)}
  .jr-lede{font-size:17px; margin-bottom:22px}
  .jr-cta{margin-bottom:22px}
  .jr-orbit{aspect-ratio:1/.9; max-width:420px}
  .jr-orbit{margin-top:14px}
  /* a tighter orbit and smaller badges, so no plate ever crosses either badge on its lap */
  .jr-oarm{--R:34cqw}
  .jr-ob1{top:-3%}
  .jr-ob{width:21%}
  .jr-ob2{width:19%; bottom:-4%}
  /* the food comes first: the orbit sits straight under the headline, whole above the phone bar on the first
     screen, and the lede, the App Store badge and the price follow it (the phone bar keeps a badge on screen) */
  .jr-openin{gap:0}
  .jr-opentext{display:contents}
  .jr-orbit{order:1; margin:12px auto 0}
  .jr-lede{order:2; margin-top:28px}
  .jr-cta{order:3; margin-bottom:0}
  .jr-cue{display:none}
}
@media (max-width:599px){ .jr-orbit{max-width:280px} }

/* scene captions: the reading layout (no script, reduced motion) */
.jr-journey{padding:4vh max(20px,4vw) 6vh}
.jr-art,.jr-words,.jr-props,.jr-veil,.jr-chap,.jr-phonebox,.jr-fly,.jr-finger{display:none}
.jr-caps{max-width:1100px; margin:0 auto}
.jr-scene{padding:44px 0 50px; border-top:1px solid var(--jr-line)}
.jr-think{margin:0 0 16px}
.jr-think p{font-family:var(--jr-serif); font-style:italic; font-weight:400; font-size:clamp(30px,3.3vw,44px); line-height:1.12; margin:0; color:var(--jr-ink)}
.jr-say{font-size:clamp(18px,1.55vw,22px); line-height:1.45; font-weight:500; margin:0 0 12px; color:var(--jr-ink); max-width:26em}
.jr-beats{list-style:none; padding:0; margin:14px 0 12px; display:grid; gap:6px}
.jr-beats li{font-size:16px; line-height:1.45; color:var(--jr-soft); padding-left:18px; position:relative}
.jr-beats li::before{content:''; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--jr-berry)}
.jr-fine{font-size:12.5px; line-height:1.5; color:var(--jr-faint); margin:10px 0 0; max-width:30em}

/* reduced motion: one still composition per scene, built by story.js */
.jr-pan{margin:0 0 26px; border-radius:26px; overflow:hidden; aspect-ratio:16/8; position:relative; background:var(--jr-pf,#FBF3EC); container-type:inline-size}
.jr-pan::after{content:''; position:absolute; inset:0; background-size:220px; opacity:.22; mix-blend-mode:overlay; pointer-events:none; background-image:var(--jr-grain)}
.jr-pword{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; white-space:nowrap; font-family:var(--jr-serif); font-weight:400;
  font-size:min(11cqw, calc(142cqw / var(--n,10))); line-height:.86; letter-spacing:-.02em}
.jr-pword em{color:var(--jr-ac)}
.jr-pi{position:absolute; transform:translate(-50%,-50%) rotate(var(--r,0deg))}
.jr-pi img{display:block; width:100%; height:auto}
.jr-pi .jr-flip{transform:scaleX(-1)}
.jr-pi .jr-stk{position:absolute; left:50%; top:0; transform:translate(-50%,-60%) rotate(-6deg)}
.jr-pi.jr-pb{width:12%; aspect-ratio:1}
.jr-panrow{display:flex; gap:40px; align-items:center; flex-wrap:wrap}
.jr-panrow .jr-captext{flex:1 1 300px; min-width:0}
.jr-panphones{display:flex; gap:18px; flex-wrap:wrap; justify-content:center}
.jr-panph{width:250px}
@media (max-width:899px){ .jr-pan{aspect-ratio:4/3; border-radius:22px} .jr-pi.jr-pb{width:19%} .jr-pword{font-size:min(13cqw, calc(166cqw / var(--n,10)))} .jr-panph{width:min(250px,72vw)} .jr-panrow{gap:26px} }

/* the device frame (mirrors .phone .glass in public/landing.html) */
.jr-phone{position:relative}
.jr-glass{position:relative; background:linear-gradient(160deg,#2b2429,#171316 46%,#332b30);
          box-shadow:0 40px 90px rgba(31,26,28,.22), 0 8px 24px rgba(31,26,28,.1)}
.jr-screen{position:relative; overflow:hidden; background:var(--jr-cream); font-size:16px; line-height:normal; isolation:isolate}
.jr-island{position:absolute; left:50%; background:#0d0b0c; border-radius:999px; z-index:5; pointer-events:none}

/* ---------- the scroll story layout ---------- */
.jr-motion .jr-journey{padding:0; position:relative; height:calc(100vh * var(--jr-len,16.4)); height:calc(100svh * var(--jr-len,16.4))}
.jr-motion .jr-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; overflow:clip; display:grid;
  grid-template-columns:minmax(300px,440px) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr);
  column-gap:4vw; padding:calc(var(--jr-topbar) + 14px) 4vw 26px 6vw}
/* colour fields, from the back: fields, giant words, cut-outs, caption paper, doodles, phone, captions, finger */
.jr-motion .jr-art{display:block; position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--jr-ink); isolation:isolate}
.jr-glow{position:absolute; inset:0; opacity:0; background:radial-gradient(58% 60% at 66% 46%, rgba(196,75,120,.5), rgba(196,75,120,.16) 46%, rgba(196,75,120,0) 74%)}
.jr-fld{position:absolute; left:0; top:0; visibility:hidden; will-change:transform}
.jr-fld svg{position:absolute; display:block; overflow:visible}
.jr-fbody{position:absolute; left:0; right:0; bottom:0}
.jr-blob{border-radius:47% 53% 44% 56% / 54% 44% 56% 46%}
.jr-grain{position:absolute; inset:0; z-index:30; pointer-events:none; background-size:220px; opacity:.26; mix-blend-mode:overlay}
.jr-motion .jr-words{display:block; position:absolute; inset:0; z-index:1; pointer-events:none}
.jr-word{position:absolute; left:0; top:0; visibility:hidden; opacity:0; will-change:transform,opacity}
.jr-wordin{position:absolute; left:0; top:0; white-space:nowrap; font-family:var(--jr-serif); font-weight:400; line-height:.84; letter-spacing:-.025em; transform:translate(-50%,-50%)}
.jr-wordin em{color:var(--jr-ac)}
.jr-motion .jr-props{display:block; position:absolute; inset:0; z-index:2; pointer-events:none}
/* No will-change here: it freezes each cut-out's raster at the size it first appears, so food that grows (the chicken leaving the fridge) went soft. */
.jr-a{position:absolute; left:0; top:0; visibility:hidden; opacity:0}
.jr-bob{position:relative; width:100%; height:100%; animation:jr-bob var(--bd,7s) ease-in-out var(--bdl,0s) infinite}
.jr-a img{display:block; width:100%; height:100%; opacity:0; transition:opacity .4s ease}
.jr-a img.jr-ld{opacity:1}
.jr-a .jr-flip{transform:scaleX(-1)}
.jr-a > .jr-stk,.jr-a > .jr-lowlab,.jr-feel > .jr-lowlab{position:absolute; left:0; top:0}
/* touch screens: the layer the tap reactions move (feel.js); no will-change, so growing food stays sharp */
.jr-feel{position:absolute; inset:0}
/* touch: food, badges and labels take taps (the phone never does), and a flick that starts on them still scrolls */
.jr-touch .jr-phonebox{pointer-events:none}
.jr-touch .jr-a:not(.jr-band):not(.jr-steam){pointer-events:auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none}
.jr-touch .jr-a img{pointer-events:none}
.jr-idle .jr-bob,.jr-idle .jr-rbring,.jr-idle .jr-steam i{animation-play-state:paused}
/* a parked actor (off stage, hidden) pauses its bob and ring until it shows again */
.jr-a.jr-off .jr-bob,.jr-a.jr-off .jr-rbring,.jr-a.jr-off .jr-steam i{animation-play-state:paused}
@keyframes jr-bob{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(0,var(--by,-9px),0) rotate(var(--br,1.6deg))}}
.jr-shadow{position:absolute; left:8%; right:8%; bottom:-7%; height:16%; background:radial-gradient(closest-side, rgba(15,10,12,.45), rgba(15,10,12,0)); opacity:0}
.jr-band{border-top:1.5px solid rgba(251,243,236,.16); background:linear-gradient(180deg, rgba(251,243,236,.075), rgba(251,243,236,.015) 30%, rgba(251,243,236,0) 60%)}
.jr-disc{position:absolute; inset:0; border-radius:46% 54% 41% 59% / 52% 44% 56% 48%; background:radial-gradient(circle at 38% 32%, #D25D88, var(--jr-berry) 48%, var(--jr-deep)); box-shadow:0 40px 80px rgba(142,47,85,.22)}
.jr-dash{position:absolute; inset:-8px; border:2.5px dashed var(--jr-berry); border-radius:28px; opacity:0}
.jr-lowlab{white-space:nowrap; background:#FFFFFF; color:var(--jr-ink); border-radius:999px; padding:7px 12px 6px; font-size:12.5px; line-height:1;
  box-shadow:0 8px 18px rgba(31,26,28,.16); opacity:0}
.jr-lowlab b{font-weight:600} .jr-lowlab span{color:var(--jr-deep); margin-left:6px}
@media (max-width:899px){ .jr-lowlab{font-size:calc(12.5px * var(--jr-lk,1))} }
.jr-short .jr-lowlab span{display:none}
.jr-steam i{position:absolute; bottom:0; width:40%; height:100%; border-radius:50%; opacity:0;
  background:radial-gradient(closest-side, rgba(255,255,255,.6), rgba(255,255,255,0)); animation:jr-steam 3.6s ease-in-out infinite}
.jr-steam i:nth-child(1){left:6%} .jr-steam i:nth-child(2){left:32%; animation-delay:-1.2s} .jr-steam i:nth-child(3){left:56%; animation-delay:-2.4s}
@keyframes jr-steam{0%{transform:translateY(30%) scale(.6,.8); opacity:0}35%{opacity:.8}100%{transform:translateY(-70%) scale(1.1,1.3); opacity:0}}
/* the caption paper: solid cream behind the captions with a hand-cut wavy edge */
.jr-motion .jr-veil{display:block; position:absolute; left:0; top:0; bottom:0; width:var(--jr-scrim,34%); z-index:3; pointer-events:none; background:var(--jr-cream)}
.jr-vedge{position:absolute; left:100%; top:0; width:28px; height:100%; overflow:visible}
.jr-motion .jr-chap{display:flex; grid-column:1; grid-row:1; z-index:6; gap:8px; margin-bottom:10px; max-width:440px}
.jr-ch{flex:1; font-family:var(--jr-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--jr-faint);
       padding-top:9px; position:relative; white-space:nowrap; transition:color .4s}
.jr-ch::before{content:''; position:absolute; left:0; right:0; top:0; height:2px; border-radius:2px; background:rgba(31,26,28,.12); transition:background .4s}
.jr-ch.jr-on{color:var(--jr-deep)}
.jr-ch.jr-on::before{background:var(--jr-berry)}
.jr-motion .jr-caps{grid-column:1; grid-row:2; align-self:center; z-index:6; display:grid; max-width:none; margin:0}
.jr-motion .jr-scene{grid-area:1 / 1; padding:0; border:0; opacity:0; visibility:hidden}
.jr-motion .jr-scene .jr-say,.jr-motion .jr-beats li{transition:none}
.jr-motion .jr-beats{display:grid}
.jr-motion .jr-beats li{grid-area:1 / 1; opacity:0}
.jr-motion .jr-phonebox{display:flex; grid-column:2; grid-row:2; z-index:5; align-items:center; justify-content:center; min-height:0; min-width:0; position:relative}
.jr-motion .jr-phone{flex:0 0 auto}
.jr-motion .jr-fly{display:block; position:absolute; inset:0; z-index:4; pointer-events:none}
.jr-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.jr-lines path{fill:none; stroke-linecap:round; stroke-linejoin:round}
.jr-motion .jr-finger{display:block; position:absolute; left:0; top:0; z-index:7; width:40px; height:40px; margin:-20px 0 0 -20px;
  border-radius:50%; opacity:0; pointer-events:none; background:rgba(196,75,120,.2); border:2.5px solid var(--jr-berry);
  box-shadow:0 6px 18px rgba(142,47,85,.28)}
.jr-finger::after{content:''; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--jr-berry);
  opacity:var(--jr-pulse,0); transform:scale(calc(1 + var(--jr-pulse,0) * .9))}
.jr-finger::before{content:''; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--jr-berry)}

/* the front layer: on phones, food delivered across the phone's glass passes here, above the phone and under the paper */
.jr-motion .jr-pfront{display:block; position:absolute; inset:0; z-index:5; pointer-events:none}
.jr-pfront .jr-bob{animation:none}

@media (max-width:899px){
  .jr-motion .jr-stage{grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr);
    padding:calc(var(--jr-topbar) + 10px) 18px calc(var(--jr-barh) + 12px); column-gap:0}
  .jr-motion .jr-chap{margin-bottom:12px; max-width:none}
  .jr-motion .jr-caps{grid-column:1; grid-row:2; align-self:start; margin-bottom:12px}
  .jr-motion .jr-phonebox{grid-column:1; grid-row:3; justify-content:center}
  .jr-motion .jr-veil{right:0; bottom:auto; width:auto; height:var(--jr-scrim,30%)}
  .jr-vedge{left:0; top:100%; width:100%; height:18px}
  .jr-think{margin-bottom:10px}
  .jr-think p{font-size:26px; line-height:1.14}
  .jr-say{font-size:16.5px; margin-bottom:6px}
  .jr-beats{margin:8px 0 4px}
  .jr-beats li{font-size:14.5px}
  .jr-fine{font-size:11.5px; margin-top:4px}
  .jr-eye{margin-bottom:10px}
  .jr-scene{padding:34px 0 38px}
  .jr-motion .jr-scene{padding:0}
  .jr-grain{opacity:.2}
}
/* phones (a stage under 600px wide, set by story.js): the phone rests low and to one side, the paper sits above
   the phone and the front layer, so anything rising into it slides under its wavy edge */
.jr-motion .jr-pm .jr-phonebox{z-index:3; align-items:flex-end}
.jr-motion .jr-pm .jr-pfront{z-index:4}
.jr-motion .jr-pm .jr-veil{z-index:5}
.jr-motion .jr-pm .jr-fly{z-index:6}
.jr-motion .jr-pm .jr-chap,.jr-motion .jr-pm .jr-caps{z-index:7}
.jr-motion .jr-pm .jr-finger{z-index:8}
.jr-motion .jr-pm.jr-sst .jr-chap{display:none}
.jr-motion .jr-pm.jr-sst .jr-think p{font-size:22px}
.jr-pm .jr-rb{box-shadow:0 8px 16px rgba(31,26,28,.18)}
.jr-pm .jr-stk{font-size:12px; box-shadow:0 0 0 2.5px #FFFFFF, 0 6px 12px rgba(31,26,28,.2)}
.jr-pm .jr-paper{font-size:13px; box-shadow:0 6px 12px rgba(31,26,28,.22)}
.jr-pm .jr-stk.jr-wrap,.jr-pm .jr-paper.jr-wrap{white-space:normal; width:max-content; text-wrap:balance; line-height:1.15; text-align:center; border-radius:14px}
.jr-pm .jr-lowlab{text-align:center; border-radius:14px; padding:6px 11px 5px; font-size:12px}
.jr-pm .jr-lowlab b,.jr-pm .jr-lowlab span{display:block}
.jr-pm .jr-lowlab span{margin:3px 0 0}
.jr-pm.jr-lowone .jr-lowlab span{display:none}

/* ---------- close: berry field and the giant line. With the slicing game on the page (.jr-close.wcg),
   /game/ninja.css lays the scene out as one screen: the band above, the game field below. ---------- */
.jr-close{position:relative; overflow:hidden; overflow:clip; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center;
          padding:16vh max(20px,4vw) 18vh; background:var(--jr-berry); isolation:isolate}
.jr-close::before{content:''; position:absolute; inset:0; z-index:0; background:radial-gradient(70% 60% at 50% 45%, rgba(214,100,142,.5), rgba(142,47,85,0) 70%), linear-gradient(180deg, rgba(142,47,85,0) 50%, rgba(142,47,85,.45))}
.jr-close::after{content:''; position:absolute; inset:0; z-index:0; background-size:220px; opacity:.24; mix-blend-mode:overlay; pointer-events:none; background-image:var(--jr-grain)}
.jr-cedge{position:absolute; left:0; top:-1px; width:100%; height:44px; z-index:1; display:block}
.jr-cfoot{position:absolute; left:0; bottom:-1px; width:100%; height:40px; z-index:1; display:block}
.jr-cspark{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible}
.jr-close .jr-eye{color:rgba(251,243,236,.78); margin:0}
/* the gold underline hangs about .24em below the line, so the space under the heading grows with it: about 30px from the underline to the button at every size */
.jr-close h2{font-family:var(--jr-serif); font-weight:400; font-size:clamp(54px,8.4vw,150px); line-height:.92; letter-spacing:-.02em; margin:0 0 calc(.25em + 10px); color:var(--jr-cream)}
.jr-close h2 em{color:var(--jr-cream); position:relative; white-space:nowrap}
.jr-close h2 em svg{position:absolute; left:-2%; bottom:-.12em; width:104%; height:.28em; overflow:visible}
.jr-close .jr-price{color:rgba(251,243,236,.86); text-align:center}
/* With the game (.jr-close.wcg) the badge sits straight under the heading. The gold underline hangs about
   .23em below the heading's box, so the space under it grows with the type: 26 to 28px from the underline
   to the App Store badge at every size, phones held sideways included. This outranks the heading margin
   in /game/ninja.css on purpose (one more class), so keep the two in step if either changes. */
.jr-close.wcg .wcg-band h2{margin-bottom:calc(.24em + 28px)}
@media (max-width:899px){
  .jr-close{padding:22vh 20px 24vh; min-height:0}
  .jr-close h2{font-size:clamp(46px,13vw,62px)}
}

/* questions */
.jr-faq{max-width:780px; margin:0 auto; padding:12vh max(20px,4vw) 10vh}
.jr-faq h2{font-family:var(--jr-serif); font-weight:400; font-size:clamp(34px,4vw,50px); line-height:1.05; margin:0 0 20px}
.jr-rule{height:1px; background:rgba(31,26,28,.08); margin-bottom:6px}
.jr-faq details{border-bottom:1px solid var(--jr-line)}
.jr-faq summary{list-style:none; cursor:pointer; padding:22px 40px 22px 0; font-size:18px; font-weight:500; line-height:1.4; position:relative}
.jr-faq summary::-webkit-details-marker{display:none}
.jr-faq summary::after{content:''; position:absolute; right:6px; top:50%; width:10px; height:10px; margin-top:-7px;
  border-right:2px solid var(--jr-berry); border-bottom:2px solid var(--jr-berry); transform:rotate(45deg); transition:transform .3s var(--jr-ease)}
.jr-faq details[open] summary::after{transform:rotate(225deg); margin-top:-2px}
.jr-faq summary:focus-visible{outline:2px solid var(--jr-berry); outline-offset:4px; border-radius:6px}
.jr-faq details p{margin:0 0 24px; font-size:16px; line-height:1.65; color:var(--jr-soft)}
.jr-faq details a{color:var(--jr-deep)}

/* footer */
.jr-foot{border-top:1px solid var(--jr-line); padding:36px max(20px,4vw) 44px}
.jr-footin{max-width:1320px; margin:0 auto; display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center}
.jr-flinks{margin-left:auto; display:flex; flex-wrap:wrap; gap:10px 22px}
.jr-flinks a{font-size:14px; color:var(--jr-soft); text-decoration:none}
.jr-flinks a:hover{color:var(--jr-berry)}
.jr-honest{max-width:1320px; margin:22px auto 0; font-size:12.5px; line-height:1.5; color:var(--jr-faint)}
@media (max-width:899px){ .jr-flinks{margin-left:0} }

@media (prefers-reduced-motion:reduce){
  .jr-cuedot,.jr-oblob::before,.jr-oring,.jr-ocounter,.jr-odepth,.jr-ob,.jr-rbring,.jr-bob,.jr-steam i{animation:none}
}