/* The Tavern (src/tavern.js, since 2026-10-21 the Camp Kitchen's place). The room: the user's painting laid out in
   its own pixels (1670 x 942, "design px") and scaled to cover the page (.tv.stage); Maple, the cloche in front of
   her and Hubert where scripts/tavern/build-room.py laid them (assets/camp/tavern/tavern.json). On a phone, or a
   window near square (.tv.stack), the painting is a backdrop and the two are cameos at the bottom. */
.tv{position:absolute;inset:0;overflow:hidden;background:#120a05;opacity:0;transition:opacity .6s ease}
.tv.on{opacity:1}
.tv button{font-family:inherit;line-height:1;-webkit-tap-highlight-color:transparent}
.tv-title{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tv-stage{position:absolute;left:0;top:0;width:1670px;height:942px;transform-origin:0 0}
.tv-stage > img,.tv-npc img{position:absolute;display:block;pointer-events:none;user-select:none;-webkit-user-select:none}
.tv-room{left:0;top:0;width:1670px;height:942px}

/* ---- Maple, the cloche in front of her, and Hubert (tavern.json). They come in the Library's Juno's way, each
   from their own side (140 px, 0.8 s, fading in over 0.45 s), Hubert a moment after Maple. ---- */
.tv-npc{position:absolute;inset:0;pointer-events:none;transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .45s ease-out,filter .2s ease}
.tv-npc.hubert{transition-delay:.14s,.14s,0s}
.tv.npc-away .tv-npc{opacity:0;transition:none}
.tv.npc-away .tv-npc.maple{transform:translateX(-140px)}
.tv.npc-away .tv-npc.hubert{transform:translateX(140px)}
.tv-npc.maple img{left:269px;top:148px;width:536px;height:518px}
.tv-cloche{left:443px;top:534px;width:287px;height:130px}
.tv-npc.hubert img{left:793.62px;top:80.35px;width:632.8px;height:615.79px}
@media (prefers-reduced-motion:reduce){.tv-npc{transition:none}}

/* the counter seen closer (src/hubert.js, the user with GPT, 2026-10-24): Hubert alone behind it; Maple, the cloche,
   the book and the two unseen buttons out of the way while the talk is up (src/tavern.js zooms the stage) */
.tv.counter .tv-npc.maple,.tv.counter .tv-cloche,.tv.counter .tv-thing,.tv.counter .tv-talk{opacity:0;pointer-events:none;transition:opacity .4s ease}
.tv.counter .tv-npc.hubert{filter:none!important}

/* the cookbook on the counter (book.webp: its own pixels, cut from the room): it lights up under the pointer, with its
   name, and opens Maple's cookbook (the user with GPT, 2026-10-22) */
.tv-thing.book{position:absolute;z-index:3;left:176px;top:608px;width:236px;height:92px;padding:0;border:0;background:none;cursor:pointer}
.tv-thing.book img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .2s ease,filter .2s ease;pointer-events:none}
.tv-thing.book:hover img,.tv-thing.book:focus-visible img{opacity:1;filter:brightness(1.18) drop-shadow(0 0 10px rgba(255,205,135,.35))}
.tv-thing.book:focus-visible{outline:2px solid #f0c27a;outline-offset:4px;border-radius:10px}
.tv-thing.book .npc-tag{--tag-x:50%;--tag-s:.9}
.tv.stack .tv-thing{display:none}

/* pointing at one of them has them talk (src/talkbox.js): an unseen button over each, which lights them a little */
.tv-talk{position:absolute;z-index:3;padding:0;border:0;background:none;cursor:pointer}
.tv-talk img{display:none;width:100%;height:auto;pointer-events:none}
.tv-talk:focus-visible{outline:2px solid #f0c27a;outline-offset:4px;border-radius:14px}
.tv-talk.maple{left:300px;top:150px;width:420px;height:505px}
.tv-talk.hubert{left:880px;top:80px;width:520px;height:600px}
.tv-stage:has(.tv-talk.maple:hover) .tv-npc.maple,.tv-stage:has(.tv-talk.maple:focus-visible) .tv-npc.maple,
.tv-stage:has(.tv-talk.hubert:hover) .tv-npc.hubert,.tv-stage:has(.tv-talk.hubert:focus-visible) .tv-npc.hubert{filter:brightness(1.2) drop-shadow(0 0 8px rgba(255,205,135,.3))}

/* ---- a phone, or a window near square: the room behind, the two as cameos at the bottom, coming in from their
   sides as they do; pointing at one has them talk ---- */
.tv.stack .tv-stage{position:absolute;inset:0;width:auto;height:auto;transform:none!important}
.tv.stack .tv-room{position:fixed;width:100%;height:100%;object-fit:cover;object-position:44% 60%}
.tv.stack .tv-stage::before{content:"";position:fixed;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,10,5,.15),rgba(18,10,5,0) 30%,rgba(18,10,5,.2) 62%,rgba(18,10,5,.6));pointer-events:none}
.tv.stack .tv-npc,.tv.stack .tv-cloche{display:none}
.tv.stack .tv-talk{top:auto;bottom:calc(var(--safe-b, 0px) + 18px);width:86px;height:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .45s ease-out}
.tv.stack .tv-talk img{display:block}
.tv.stack .tv-talk.maple{left:16px}
.tv.stack .tv-talk.hubert{left:auto;right:16px;transition-delay:.14s}
.tv.stack.npc-away .tv-talk{opacity:0;transition:none}
.tv.stack.npc-away .tv-talk.maple{transform:translateX(-60px)}
.tv.stack.npc-away .tv-talk.hubert{transform:translateX(60px)}
@media (prefers-reduced-motion:reduce){.tv.stack .tv-talk{transition:none}}


/* ---- over the room (src/tavern.js): the serving and Maple's cookbook. The room and the two of them stay behind,
   dimmed; the page bar hides (styles/camp.css). ---- */
.tv.dim .tv-stage > img,.tv.dim .tv-npc{filter:brightness(.55)}
.tv.dim .tv-stage{pointer-events:none}
.tv-over{position:absolute;inset:0;z-index:6;background:rgba(10,5,2,.28)}
.tv-over[hidden]{display:none}
.tv-ostage{position:absolute;inset:0;color:#f6e8d2;font-family:"Crimson Text","Gowun Batang",Georgia,serif}
.tv-ostage > section{animation:tvIn .3s cubic-bezier(.2,.8,.2,1)}
@keyframes tvIn{from{opacity:0}}
.tv-x{position:absolute;right:12px;top:12px;z-index:3;width:38px;height:38px;padding:0;border:0;background:none;cursor:pointer}
.tv-x i{position:absolute;left:50%;top:50%;width:20px;height:2px;border-radius:1px;background:#e8c89a;transform:translate(-50%,-50%) rotate(45deg)}
.tv-x i + i{transform:translate(-50%,-50%) rotate(-45deg)}
.tv-x:hover i{background:#fff2d8}
.tv-x:focus-visible{outline:2px solid #f0c27a;outline-offset:2px;border-radius:8px}
/* the serving (the user's video, 2026-10-22): the counter from above, filling the page as the room does; at 4 s the
   dish comes up on the user's card (their frame of 2026-10-23, sources/food-frame-v3.png as food-frame.webp, 1084 x
   1359, a fork and a spoon at its sides; what is on it as on their earlier mock-up, sources/dish-card-mockup.png, laid
   on the new frame's own rules: design/camp/tavern/README.md), in the card's own pixels and scaled to most of the
   page's height (src/tavern.js fit, --k). It comes up as the user's talk with GPT has it (2026-10-23): a warm glow
   behind, the card rising 92 -> 102 -> 100%, gold sparks out from its sides and top, a light along its edge, all in
   about 0.8 s, the sparks on the brightest of the video's chime; a dish had for the first time with more sparks and
   NEW; the steam drifting on behind it. Once it is up, the X is 150% bigger (the user). */
.tv-serve{position:absolute;inset:0}
.tv-serve-bg{position:absolute;inset:0;overflow:hidden;background:#140a04}
.tv-serve-bg img,.tv-serve-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tv-serve-bg video[hidden]{display:none}
.tv-x.serve{right:20px;top:20px;width:44px;height:44px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));transform-origin:100% 0;transition:transform .7s ease}
.tv-serve:has(.tv-card.in) .tv-x.serve{transform:scale(2.5)}
/* (the steam drifting on over the video's last frame, behind the card) */
.tv-steam{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.tv-serve:has(.tv-card.in) .tv-steam{opacity:1}
.tv-steam i{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--w);border-radius:50%;background:radial-gradient(closest-side,rgba(255,250,242,.3),rgba(255,250,242,0));filter:blur(14px);opacity:0;animation:tvSteam var(--t,11s) ease-in-out var(--d,0s) infinite}
@keyframes tvSteam{0%{opacity:0;transform:translate(0,40px) scale(.8)}30%{opacity:1}100%{opacity:0;transform:translate(var(--dx,24px),-180px) scale(1.3)}}
/* (the glow behind where the card comes) */
.tv-glow{position:absolute;left:50%;top:50%;width:calc(1300px * var(--k,.6));height:calc(1500px * var(--k,.6));border-radius:50%;background:radial-gradient(closest-side,rgba(255,244,214,.9),rgba(255,218,160,.5) 45%,rgba(255,206,140,0));opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.6)}
.tv-serve:has(.tv-card.in) .tv-glow{animation:tvGlow 1.1s ease-out both}
@keyframes tvGlow{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
.tv-card{position:absolute;left:50%;top:50%;width:1084px;height:1359px;color:#3f1d06;transform:translate(-50%,-50%) scale(var(--k,.6));opacity:0;pointer-events:none;filter:drop-shadow(0 18px 32px rgba(0,0,0,.5))}
.tv-card.in{opacity:1;pointer-events:auto;animation:tvCardUp .8s cubic-bezier(.2,.8,.25,1) both}
@keyframes tvCardUp{0%{opacity:0;transform:translate(-50%,-46%) scale(calc(var(--k,.6) * .92))}55%{opacity:1;transform:translate(-50%,-50.4%) scale(calc(var(--k,.6) * 1.02))}100%{opacity:1;transform:translate(-50%,-50%) scale(var(--k,.6))}}
.tv-card-img{position:absolute;left:0;top:0;width:1084px;height:1359px;display:block;pointer-events:none;user-select:none;-webkit-user-select:none}
/* (the light that runs once along the frame's edge, masked to it: food-frame-ring.webp) */
.tv-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;-webkit-mask:url(../assets/camp/tavern/food-frame-ring.webp) 0 0/100% 100% no-repeat;mask:url(../assets/camp/tavern/food-frame-ring.webp) 0 0/100% 100% no-repeat;background:linear-gradient(115deg,rgba(255,236,170,0) 36%,rgba(255,246,214,1) 50%,rgba(255,236,170,0) 64%) 100% 0/250% 100% no-repeat}
.tv-card.in .tv-sheen{animation:tvSheen .7s ease-in-out .45s both}
@keyframes tvSheen{0%{opacity:1;background-position:100% 0}100%{opacity:1;background-position:0 0}}
/* (the sparks, made at the reveal: src/tavern.js burst) */
.tv-spark{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:radial-gradient(circle,#fffdf0 0 22%,#ffe08a 40%,rgba(255,200,95,0) 72%);opacity:0;pointer-events:none;filter:drop-shadow(0 0 8px rgba(255,214,120,.95));animation:tvSpark var(--t,.75s) ease-out var(--d,.15s) both}
.tv-spark.star{border-radius:0;background:linear-gradient(#fffbe6,#ffcf63);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
@keyframes tvSpark{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}15%{opacity:1}60%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r,90deg))}}
/* (a dish had for the first time) */
.tv-new{position:absolute;left:792px;top:128px;padding:7px 18px 6px;border-radius:999px;background:linear-gradient(#cc4a30,#a3311d);color:#fff4d8;font:700 30px/1 "Hind",system-ui,sans-serif;letter-spacing:.08em;box-shadow:0 0 0 3px #e9c47c,0 6px 12px rgba(80,20,5,.35);opacity:0;transform:rotate(8deg) scale(0)}
.tv-card.in .tv-new{animation:tvNew .5s cubic-bezier(.3,1.6,.5,1) .5s both}
@keyframes tvNew{0%{opacity:0;transform:rotate(8deg) scale(0)}100%{opacity:1;transform:rotate(8deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.tv-card.in,.tv-card.in .tv-new{animation:none;opacity:1}.tv-card.in .tv-new{transform:rotate(8deg)}.tv-glow,.tv-spark,.tv-sheen,.tv-steam{display:none}}
/* (오늘의 요리 between the top sprigs, 140 px apart on this frame: smaller than the mock-up's 35 px to fit) */
.tv-eyebrow{position:absolute;left:0;top:141px;width:1084px;text-align:center;font-size:27px;line-height:32px;color:#5f3b18}
.tv-h{position:absolute;left:166px;top:256px;width:740px;margin:0;text-align:center;font-weight:700;font-size:65px;line-height:100px;white-space:nowrap;color:#3a1905;transform:scaleY(1.31);transform-origin:50% 70px}
/* (the dish between the title and the frame's rule: the user's cut-out on the parchment, its shadow under it) */
.tv-dish{position:absolute;left:216px;top:386px;width:640px;height:560px}
.tv-dish-pic{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(72,40,10,.3)) drop-shadow(0 3px 5px rgba(72,40,10,.2))}
/* (no drawing yet: an empty plate from above) */
.plate{display:block;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#ece3d4 0 58%,#e1d4c0 62%,#f8f3ea 67% 88%,#e3d7c5 93%,#cbbca4 97%,transparent 99%)}
.tv-desc{position:absolute;left:256px;top:1030px;width:560px;height:118px;margin:0;display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:36px;line-height:44px;color:#43200a}
.tv-desc span{display:block;text-wrap:balance}
.tv-recipe{position:absolute;left:366px;top:1156px;width:340px;height:90px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:22px;padding:0 0 0 7px;border:2px solid #3b3816;border-radius:21px;background:#646537;box-shadow:inset 0 0 0 3.5px #d5b373,inset 0 0 0 5px #8c7d4a;color:#fbf0ce;font-size:33.5px;line-height:1;cursor:pointer;transition:filter .15s}
.tv-recipe svg{width:49px;height:39px;flex:none;filter:drop-shadow(0 1px 0 rgba(40,34,10,.55))}
.tv-recipe span{transform:translateY(6px)}
.tv-recipe:hover{filter:brightness(1.1)}
.tv-recipe:focus-visible{outline:3px solid #f0c27a;outline-offset:4px}

/* ---- Maple's cookbook, the user's mock-up (design/camp/tavern/sources/cookbook-mockup.png) on their blank book
   (cookbook.webp), laid out in the mock-up's pixels (1670 x 942) and scaled to fit the page (src/tavern.js fit) ---- */
.tv-book{position:absolute;left:0;top:0;width:1670px;height:942px;transform-origin:0 0;color:#3b2412}
.bk-img{position:absolute;left:0;top:0;width:1669px;height:942px;display:block;pointer-events:none;user-select:none;-webkit-user-select:none}
.bk-leaf{display:inline-block;width:36px;height:36px;color:#8b6b3e;flex:none}
.bk-leaf svg{display:block;width:100%;height:100%}
.bk-leaf.r{transform:scaleX(-1)}
.bk-place{position:absolute;left:40px;top:18px;display:flex;align-items:center;gap:8px;color:#f1d4a2;font-size:36px;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.7)}
.bk-place .bk-leaf{width:30px;height:30px;color:#d9b07a}
.tv-x.bk-x{left:1510px;top:66px;right:auto;width:52px;height:52px;border:3px solid #c98a45;border-radius:9px;background:rgba(40,22,8,.85);box-shadow:0 4px 10px rgba(0,0,0,.4)}
.tv-x.bk-x i{width:22px;height:2.5px;background:#f3d9ad}
/* the left page */
.bk-title{position:absolute;left:300px;top:122px;width:505px;display:flex;align-items:center;justify-content:center;gap:10px}
.bk-title h2{margin:0;font-weight:700;font-size:54px;line-height:1;color:#3a1f0c;white-space:nowrap;letter-spacing:-.01em}
.bk-title .bk-leaf{width:44px;height:44px}
.bk-sub{position:absolute;left:300px;top:194px;width:505px;text-align:center;font-size:24px;line-height:1;color:#6b4a2a}
.bk-rule{position:absolute;height:1px;background:#c9ab86}
.bk-rule i{position:absolute;left:50%;top:50%;width:8px;height:8px;background:#b08a5a;transform:translate(-50%,-50%) rotate(45deg)}
.bk-rule.l{left:300px;top:231px;width:425px}
.bk-list{position:absolute;left:268px;top:268px;width:537px;margin:0;padding:0;list-style:none}
.bk-row{position:relative;height:120px}
.bk-row + .bk-row::before{content:"";position:absolute;left:32px;right:25px;top:-9px;height:1px;background:#d9c7a8}
.bk-row button{position:relative;display:block;width:100%;height:102px;padding:0;border:0;border-radius:12px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.bk-row button:hover{background:rgba(172,196,140,.22)}
.bk-row.on button{background:rgba(172,196,140,.55)}
.bk-row button:focus-visible{outline:2px solid #8aa86a;outline-offset:2px}
.bk-row .bk-leaf.s{position:absolute;left:12px;top:34px;width:30px;height:30px;color:#5a7a3a;opacity:0;transition:opacity .15s}
.bk-row.on .bk-leaf.s{opacity:1}
.bk-thumb{position:absolute;left:62px;top:7px;width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(60,35,10,.28))}
.bk-name{position:absolute;left:245px;top:22px;font-weight:700;font-size:27px;line-height:1.1;color:#3b2412;white-space:nowrap}
.bk-kw{position:absolute;left:245px;top:60px;font-size:21px;line-height:1;color:#7a5a3a;white-space:nowrap}
.bk-note{position:absolute;left:395px;top:783px;width:410px;display:flex;align-items:center;gap:8px;font:400 23px/1.2 "Nanum Pen Script","Patrick Hand",cursive;color:#5b3a1e;transform:rotate(-1.5deg)}
.bk-note .bk-leaf{width:26px;height:26px;color:#8b6b3e}
.bk-pn{position:absolute;display:flex;align-items:center;gap:12px;font-size:20px;line-height:1;color:#8a6a4a}
.bk-pn.l{left:210px;top:810px}
.bk-pn.r{left:1408px;top:822px}
.bk-arrow{width:22px;height:24px;padding:0;border:0;background:#a37a4e;cursor:pointer;clip-path:polygon(100% 0,0 50%,100% 100%)}
.bk-arrow.next{clip-path:polygon(0 0,100% 50%,0 100%)}
.bk-arrow:hover{background:#7a5428}
.bk-arrow:disabled{opacity:.3;cursor:default}
/* the right page (its box 842, 59 · 684 x 776) */
.bk-right{position:absolute;left:842px;top:59px;width:684px;height:776px}
.bk-rtitle{position:absolute;left:78px;top:66px;display:flex;align-items:center;gap:14px}
.bk-rtitle .bk-leaf{width:40px;height:40px}
.bk-rname{margin:0;font-weight:700;font-size:52px;line-height:1;color:#3a1f0c;white-space:nowrap;letter-spacing:-.01em}
.bk-mark{position:absolute;left:528px;top:64px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;color:#5a3418;font-family:inherit;font-size:18px;line-height:1;cursor:pointer}
.bk-mark svg{width:30px;height:46px;display:block;transition:transform .15s}
.bk-mark:hover svg{transform:translateY(-2px)}
.bk-mark:focus-visible{outline:2px solid #8aa86a;outline-offset:3px;border-radius:6px}
.bk-meta{position:absolute;left:0;top:131px;width:636px;text-align:center;font-size:22px;line-height:1;color:#6b4a2a}
.bk-rule.r{left:168px;top:171px;width:290px}
/* (the same cut-out on the page's parchment, the user's word: no scene behind it) */
.bk-pic{position:absolute;left:48px;top:186px;width:540px;height:264px;display:flex;align-items:center;justify-content:center}
.bk-pic-img{display:block;max-width:100%;max-height:100%;filter:drop-shadow(0 10px 12px rgba(72,40,10,.28))}
.bk-pic .plate{height:94%}
.bk-flow{position:absolute;left:50px;top:462px;width:590px;height:288px;overflow:hidden;padding-right:6px}
/* (the dish's next pages: the ingredients and steps go on from under its name; src/tavern.js cuts them into pages,
   measured in a hidden copy at the page's width) */
.bk-flow.cont{top:150px;height:600px}
.bk-flow.bk-measure{top:0;height:auto;overflow:visible;visibility:hidden;pointer-events:none}
.bk-head{display:flex;align-items:center;gap:10px;padding-bottom:6px;margin-bottom:10px;border-bottom:1px solid #c9ab86;font-weight:700;font-size:30px;line-height:1;color:#3a2410}
.bk-head .bk-leaf{width:30px;height:30px}
.bk-head + .bk-head,.bk-ingr + .bk-head{margin-top:18px}
/* (the ingredients two to a row, the rule between the columns drawn down the middle of the box) */
.bk-ingr{background:linear-gradient(#d9c7a8,#d9c7a8) 50% 0/1px 100% no-repeat}
.bk-irow{display:grid;grid-template-columns:1fr 1fr;column-gap:37px;padding-bottom:6px}
.bk-irow p{display:flex;justify-content:space-between;gap:12px;margin:0;font-size:21px;line-height:1.3;color:#3b2412}
.bk-irow span{flex:1;min-width:0}
.bk-irow b{flex:none;font-weight:400;color:#6b4a2a;white-space:nowrap}
.bk-steps{margin:0;padding:0;list-style:none}
.bk-steps li{display:flex;align-items:flex-start;gap:14px;margin:0 0 9px}
.bk-steps i{flex:none;width:28px;height:28px;border-radius:50%;background:#4e7a3a;color:#fff;font:400 17px/28px "Hind","Gowun Dodum",system-ui,sans-serif;font-style:normal;text-align:center;margin-top:1px}
.bk-steps span{font-size:21px;line-height:1.35;color:#3b2412}
.bk-empty{position:absolute;left:0;top:300px;width:636px;text-align:center;font-size:24px;color:#7a5a3a}
.bk-src{margin:14px 0 0;font-size:18px;font-style:italic;line-height:1.3;color:#7a5a3a}
.bk-src a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.bk-src a:hover{color:#4e7a3a}
/* the tabs, where the blank book has them (measured on it) */
.bk-tabs{position:absolute;inset:0;pointer-events:none}
.bk-tab{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:11px;background:none;color:#fff3df;font-family:inherit;font-weight:700;font-size:26px;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.6);cursor:pointer;pointer-events:auto;transition:filter .15s}
.bk-tab:hover{filter:brightness(1.12)}
.bk-tab[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px rgba(255,236,196,.8)}
.bk-tab:focus-visible{outline:2px solid #f0c27a;outline-offset:2px}
.bk-tab.all{left:1496px;top:123px;width:80px;height:80px}
.bk-tab.meal{left:1506px;top:222px;width:84px;height:88px}
.bk-tab.soup{left:1513px;top:313px;width:90px;height:95px}
.bk-tab.snack{left:1526px;top:415px;width:92px;height:90px}
.bk-tab.marks{left:1542px;top:508px;width:93px;height:89px}

/* ---- a phone (or a window near square): the same cookbook as pages one under the other, no painted book ---- */
.tv.stack .tv-book{position:absolute;inset:0;width:auto;height:auto;transform:none!important;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--safe-t, 0px) + 10px) 14px calc(var(--safe-b, 0px) + 24px);box-sizing:border-box;background:#eadfc6}
.tv.stack .bk-img{display:none}
.tv.stack .tv-book > *,.tv.stack .bk-left > *,.tv.stack .bk-right > *{position:relative;left:auto;top:auto;right:auto;width:auto;height:auto;transform:none}
.tv.stack .bk-place{margin:4px 0 10px;color:#5a3418;font-size:22px;text-shadow:none}
.tv.stack .bk-place .bk-leaf{color:#8b6b3e;width:22px;height:22px}
.tv.stack .tv-x.bk-x{position:absolute;left:auto;right:12px;top:calc(var(--safe-t, 0px) + 8px);width:40px;height:40px}
.tv.stack .bk-tabs{order:-1;position:relative;inset:auto;display:flex;gap:8px;overflow-x:auto;flex:none;padding:2px 0 8px;margin-bottom:10px;pointer-events:auto}
.tv.stack .bk-place{order:-2}
.tv.stack .tv-book > *{flex:none}
.tv.stack .bk-tab{position:static;flex:none;width:auto;height:36px;padding:0 14px;border-radius:999px;font-size:16px;text-shadow:none;color:#fff8ea}
.tv.stack .bk-tab.all{background:#6a3e22}.tv.stack .bk-tab.meal{background:#4e7a3a}.tv.stack .bk-tab.soup{background:#b8432e}.tv.stack .bk-tab.snack{background:#c8a24a}.tv.stack .bk-tab.marks{background:#3f5f8a}
.tv.stack .bk-tab[aria-pressed="true"]{box-shadow:inset 0 0 0 2px rgba(255,245,220,.9)}
.tv.stack .bk-title{justify-content:flex-start;gap:8px;margin:0 0 4px}
.tv.stack .bk-title h2{font-size:30px}
.tv.stack .bk-title .bk-leaf{width:26px;height:26px}
.tv.stack .bk-sub{text-align:left;font-size:17px;margin:0 0 10px}
.tv.stack .bk-rule.l,.tv.stack .bk-rule.r,.tv.stack .bk-pn,.tv.stack .bk-note{display:none}
.tv.stack .bk-list{margin:0 0 16px}
.tv.stack .bk-row{height:auto}
.tv.stack .bk-row + .bk-row::before{display:none}
.tv.stack .bk-row button{display:flex;align-items:center;gap:12px;height:auto;padding:8px;margin-bottom:6px;background:rgba(255,250,240,.55)}
.tv.stack .bk-row.on button{background:rgba(172,196,140,.6)}
.tv.stack .bk-row .bk-leaf.s{display:none}
.tv.stack .bk-thumb{position:static;width:56px;height:56px}
.tv.stack .bk-name,.tv.stack .bk-kw{position:static;white-space:normal;font-size:17px}
.tv.stack .bk-name{font-weight:700}
.tv.stack .bk-kw{display:block;font-size:14px;margin-top:3px}
.tv.stack .bk-row button > span{display:block}
.tv.stack .bk-right{padding:14px 12px 20px;border-radius:14px;background:rgba(255,250,240,.6)}
.tv.stack .bk-rtitle{gap:8px}
.tv.stack .bk-rtitle .bk-leaf{width:24px;height:24px}
.tv.stack .bk-rname{font-size:24px!important;white-space:normal}
.tv.stack .bk-right{position:relative}
.tv.stack .bk-mark{position:absolute;right:14px;top:14px;flex-direction:row;gap:6px;font-size:14px}
.tv.stack .bk-mark svg{width:18px;height:28px}
.tv.stack .bk-meta{text-align:left;font-size:15px;margin:8px 0 12px}
.tv.stack .bk-pic{width:100%;height:auto;aspect-ratio:16/9;margin-bottom:14px}
.tv.stack .bk-flow{height:auto;overflow:visible;padding:0}
.tv.stack .bk-head{font-size:20px}
.tv.stack .bk-head .bk-leaf{width:20px;height:20px}
.tv.stack .bk-ingr{background:none}
.tv.stack .bk-irow{grid-template-columns:1fr;row-gap:6px}
.tv.stack .bk-irow p,.tv.stack .bk-steps span{font-size:16px}
.tv.stack .bk-steps i{width:22px;height:22px;font-size:13px;line-height:22px}
.tv.stack .bk-empty{position:static;width:auto;font-size:18px;padding:20px 0}