/* La Fresca's illustrated world: original SVG, CSS motion, no animation runtime. */
:root {
  --red: #c7472f;
  --dark: #293c32;
  --cream: #fff8e9;
  --muted: #6f7364;
  --line: #ded8bd;
  --green: #356b53;
  --yellow: #f4d17a;
  --ink: #293c32;
}
body { background-color: var(--cream); }
h1, h2, h3, .brand { text-wrap: balance; }
.btn { border: 1.5px solid var(--ink); border-radius: 13px; box-shadow: 0 3px 0 var(--ink); transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.btn:hover { filter: none; transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { transform: none; }
.btn.outline { border-color: var(--ink); background: #fffdf5; }
.btn.green { background: var(--green); }
.topbar { border-bottom: 1.5px solid var(--line); }
.brand { letter-spacing: -1.8px; }
.brand small { font-size: 8px; letter-spacing: 2.5px; }
.pill { border: 1px solid #365f4320; }
.story-kicker { display: block; font: 700 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1.4px; color: var(--green); margin-bottom: 16px; }
.story-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0 20px; position: relative; padding: 42px 24px 20px; align-items: center; }
.story-copy { max-width: 540px; padding-bottom: 20px; }
.story-copy h1 { font-size: clamp(42px,5.4vw,74px); letter-spacing: -2.6px; margin: 0 0 20px; line-height: 1.02; }
.story-copy h1 em { color: var(--red); font-weight: normal; }
.story-copy p { font-size: 16px; line-height: 1.7; max-width: 370px; color: var(--muted); margin-bottom: 25px; }
.story-cta { min-width: 160px; font-size: 16px; }
.story-character { position: relative; max-width: 460px; width: 100%; justify-self: center; }
.chef-hello { background: transparent; border: 0; padding: 0; width: 100%; display: block; border-radius: 48%; cursor: pointer; }
.chef-hello:focus-visible { outline: 3px dashed var(--green); outline-offset: -12px; }
.chef-speech { position: absolute; z-index: 1; top: 4%; right: -2%; background: #fffdf5; border: 2px solid var(--ink); border-radius: 18px 18px 18px 4px; padding: 12px 16px; max-width: 180px; font: italic 700 20px/1.25 Georgia, serif; transform: rotate(6deg); box-shadow: 3px 3px 0 #293c32; pointer-events: none; }
.chef-signature { display: block; text-align: center; font: 700 10px/1.5 ui-monospace, monospace; letter-spacing: 2px; margin-top: -20px; position: relative; }
.chef-signature span { color: var(--red); margin-left: 6px; }
.story-foot { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; padding-top: 18px; gap: 12px; }
.code-sticker { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid #b8c6a8; background: #eef1dc; color: #375940; border-radius: 7px; font: 600 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.motion-toggle { min-height: 44px; padding: 8px 10px; background: transparent; border: 1px dashed #b3b49a; color: #58614e; border-radius: 8px; font-size: 12px; cursor: pointer; }
.motion-toggle:before { content: 'Ⅱ'; font: 700 12px ui-monospace, monospace; margin-right: 6px; }
.motion-toggle[aria-pressed="true"]:before { content: '▷'; }
.motion-row { display: flex; justify-content: center; margin: 20px 0; }
.story-ribbon { display: flex; align-items: center; justify-content: center; gap: 32px; padding: 15px 12px; background: #f4d17a; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); color: var(--ink); font: 700 10px/1.2 ui-monospace,monospace; letter-spacing: 2px; }
.story-ribbon b { color: var(--red); font-size: 18px; }
.menu-section { padding-top: 40px; }
.food-card { border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 #e2d8bb; }
.food-photo { background-color: #f5ddad; background-image: radial-gradient(#d9b980 1px, transparent 1px); background-size: 12px 12px; }
.food-photo.cream { background-color: #e6ead2; }
.food-photo.pink { background-color: #f5d6bf; }
.food-photo.gold { background-color: #f7e3aa; }
.food-photo .pasta-art { transition: transform .3s ease; }
.food-card:hover .pasta-art { transform: rotate(-4deg) translateY(-3px); }
.veg { border: 1px solid #52724e; border-radius: 5px; background: #fff8e9; }
.card-body h3 { color: var(--ink); }
.card-body .price { font-size: 19px; }
.card-body .btn { background: #eef1dc; }
.qty { border: 1.5px solid var(--ink); border-radius: 11px; background: #fff6dc; color: var(--ink); }
.qty button { font-weight: bold; }
.basket { border: 1.5px solid var(--ink); border-radius: 18px; }
.basket-chef { width: 170px !important; margin: -20px auto -4px; }
.basket-empty { padding: 18px 0; font-size: 14px; }
.mobile-cart { background: var(--green); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.panel, .order-card { border: 1.5px solid #c4c9ac; border-radius: 16px; }
.order-card.pending { border: 2px solid var(--red); box-shadow: 0 4px 0 #efd3b7; }
.order-card.ready { border: 2px solid var(--green); box-shadow: 0 4px 0 #cedbbd; }
.order-top { background: #f8efd9; }
.order-note { background: #ffedbc; border: 1px dashed #b5964c; }
.order-foot .pill { text-wrap: nowrap; }
.alert-panel { background: #edf0db; border: 1px solid #bcc5a5; }
.dialog-head h2 { color: var(--ink); }
dialog { border: 1.5px solid var(--ink); box-shadow: 0 -8px 40px #293c3220; }
.dialog-chef-strip { display: flex; align-items: center; gap: 12px; padding: 0 12px; background: #f5e7bd; border: 1px solid #e1d0a1; border-radius: 12px; margin-bottom: 18px; }
.dialog-chef { flex: 0 0 96px; height: 90px; width: 96px !important; margin-top: -5px; }
.dialog-chef-strip > span { font: italic 18px/1.35 Georgia, serif; }
.dialog-chef .chef-doodle, .dialog-chef .chef-sparkles { display: none; }
.history-chef { width: 240px !important; margin: -20px auto -15px; }
.history-caption { text-align: center; margin: 0 0 25px; }
.history-caption p { font: italic 19px/1.5 Georgia,serif; margin: 14px 0 0; }
.history-card { border: 1.5px solid var(--ink); border-radius: 14px; background: #fffdf6; box-shadow: 0 3px 0 #e2d8bb; gap: 12px; }
.history-card:active { transform: translateY(2px); }
.track-wrap { max-width: 740px; }
.track-title { margin-top: -24px; }
.order-story { text-align: center; margin: 0 auto 20px; }
.order-story .chef-scene { width: 280px; margin: auto; }
.order-story .code-sticker { margin-top: -8px; position: relative; }
.order-story p { font: italic 19px/1.4 Georgia,serif; color: var(--green); margin: 10px 0 0; }
.track-title .eyebrow { font-size: 9px; letter-spacing: 1.5px; margin-bottom: 14px; }
.track-title h1 { margin-bottom: 16px; }
.order-story[data-order-story="ready"] { background: #eaf0db; border: 1.5px solid #94ae80; border-radius: 24px; padding-bottom: 20px; }
.order-story[data-order-story="completed"] { background: #fff0d1; border-radius: 24px; padding-bottom: 20px; }
.step b { border: 1px solid #b8c3a6; }
.step.done b { border: 1px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.chef-admin-heading { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 190px; align-items: center; gap: 12px; padding: 14px 18px; margin: 24px 0 0; border: 1.5px solid #bec7a7; background: #edf0db; border-radius: 20px; }
.chef-admin-heading h1 { font-size: 35px; }
.chef-admin-heading p { max-width: 440px; line-height: 1.5; }
.chef-admin-heading .story-kicker { margin-bottom: 10px; }
.chef-admin-heading .pill { margin-top: 14px; background: #fff9e9; }
.admin-chef { width: 190px !important; margin: -12px 0; }
.admin-motion { display: flex; justify-content: flex-end; margin: 7px 0 14px; }
.admin-motion .motion-toggle { border: 0; padding-right: 0; }
.kitchen-empty { padding: 32px 18px; background: #fffdf4; }
.kitchen-empty h3 { font-size: 27px; }
.kitchen-empty .code-sticker { margin-bottom: 12px; }
.side-nav button.active, .mobile-admin-nav button.active { background: var(--green); }
.mobile-admin-nav { border-top: 1.5px solid var(--ink); }
.login { max-width: 470px; margin-top: 5vh; border: 1.5px solid var(--ink); box-shadow: 0 6px 0 #e2d8bb; }
.login .brand { margin-bottom: 5px; }
.login-chef { width: 240px !important; margin: -5px auto -12px; }
.login > .eyebrow, .login > h2, .login > .muted { text-align: center; }
.login > .eyebrow { margin-top: 20px; margin-bottom: 10px; }
.login h2 { margin-bottom: 12px; }
.chef-loading-screen { min-height: 85svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.chef-loading-screen .chef-scene { width: min(300px,80vw); }
.chef-loading-screen h1 { font-size: 31px; line-height: 1.15; letter-spacing: -.8px; margin: 22px 0 12px; }
.chef-loading-screen p { color: var(--muted); font-size: 15px; }
.loading-noodles { display: flex; gap: 9px; height: 24px; align-items: center; }
.loading-noodles i { display: block; background: #e2ab47; border: 1.5px solid #8a582e; width: 20px; height: 9px; border-radius: 4px 1px 4px 1px; transform: rotate(-35deg); animation: noodle-hop 1.2s ease-in-out infinite; }
.loading-noodles i:nth-child(2) { animation-delay: .15s; }
.loading-noodles i:nth-child(3) { animation-delay: .3s; }
.button-noodles { display: inline-block; font-size: 26px; line-height: 1; animation: button-stir .8s ease-in-out infinite alternate; }
.error-story { text-align: center; }
.error-chef { width: 260px !important; max-width: 90%; margin: auto; }
.error-story h2 { margin-top: 22px; }
#toast { background: var(--green); border: 1.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); line-height: 1.4; }

/* Character posing and motion. SVG transforms use the full 400x400 viewBox. */
.chef-scene { width: 100%; aspect-ratio: 1; position: relative; pointer-events: none; }
.chef-art { display: block; width: 100%; height: 100%; overflow: visible; }
.chef-art g, .chef-art path { transform-box: view-box; }
.chef-head { transform-origin: 197px 210px; animation: chef-nod 5s ease-in-out infinite; }
.chef-eyes { transform-origin: 197px 151px; animation: chef-blink 5.8s infinite; }
.chef-wave-arm { display: none; transform-origin: 249px 231px; }
.chef-stir-arm { transform-origin: 246px 225px; }
.chef-spoon { transform-origin: 245px 270px; }
.chef-pan { transform-origin: 204px 275px; }
.chef-flying-pasta { transform-origin: 278px 267px; }
.chef-steam path { opacity: .85; animation: chef-steam 2.7s ease-in-out infinite; }
.chef-steam .steam-two { animation-delay: -.9s; }
.chef-steam .steam-three { animation-delay: -1.8s; }
.chef-serving, .chef-laptop, .chef-heart, .chef-sparkles { display: none; }
.chef-doodle { animation: chef-float 5s ease-in-out infinite; }
.doodle-two { animation-delay: -2s; }
.doodle-three { animation-delay: -3.2s; }
.chef-flame { transform-origin: 274px 313px; animation: chef-flame 1s ease-in-out infinite alternate; }
.chef-welcome .chef-wave-arm, .chef-ready .chef-wave-arm, .chef-completed .chef-wave-arm { display: block; animation: chef-wave 5s ease-in-out infinite; }
.chef-welcome .chef-stir-arm, .chef-ready .chef-stir-arm, .chef-completed .chef-stir-arm { display: none; }
.chef-welcome .chef-flying-pasta { display: none; }
.chef-cooking .chef-stir-arm, .chef-loading .chef-stir-arm { animation: chef-stir 2.4s ease-in-out infinite; }
.chef-cooking .chef-spoon, .chef-loading .chef-spoon { animation: spoon-stir 2.4s ease-in-out infinite; }
.chef-cooking .chef-pan { animation: pan-toss 3.2s ease-in-out infinite; }
.chef-cooking .chef-flying-pasta { animation: pasta-toss 3.2s ease-in-out infinite; }
.chef-ready .chef-kitchen, .chef-completed .chef-kitchen { display: none; }
.chef-ready .chef-serving, .chef-completed .chef-serving { display: block; }
.chef-ready .chef-sparkles, .chef-completed .chef-sparkles { display: block; transform-origin: 200px 160px; animation: chef-sparkle 2.6s ease-in-out infinite; }
.chef-completed .chef-heart { display: block; transform-origin: 305px 111px; animation: chef-heart 2s ease-in-out infinite; }
.chef-waiting .chef-laptop, .chef-loading .chef-laptop, .chef-coding .chef-laptop { display: block; }
.chef-waiting .chef-head, .chef-coding .chef-head { animation: chef-think 6s ease-in-out infinite; }
.chef-waiting .chef-flying-pasta, .chef-coding .chef-flying-pasta, .chef-empty .chef-flying-pasta, .chef-sorry .chef-flying-pasta { display: none; }
.chef-waiting .chef-flame, .chef-coding .chef-flame, .chef-empty .chef-flame, .chef-sorry .chef-flame { display: none; }
.chef-waiting .chef-steam, .chef-coding .chef-steam, .chef-empty .chef-steam, .chef-sorry .chef-steam { display: none; }
.chef-code-lines { animation: code-type 2s steps(3,end) infinite; }
.chef-empty .chef-head { animation: chef-think 7s ease-in-out infinite; }
.chef-sorry .chef-head { transform: rotate(-6deg); animation: none; }
.chef-sorry .chef-doodle { animation: none; }
.chef-sorry .chef-art > circle { fill: #e4e4d4; }
.chef-offscreen *, .page-hidden .chef-scene *, [data-motion="paused"] .chef-scene *, [data-motion="paused"] .loading-noodles i, [data-motion="paused"] .button-noodles { animation-play-state: paused !important; }
@keyframes chef-nod { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-2px); } }
@keyframes chef-blink { 0%,43%,47%,100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } }
@keyframes chef-wave { 0%,10%,30%,100% { transform: rotate(0); } 15%,25% { transform: rotate(13deg); } 20% { transform: rotate(-8deg); } }
@keyframes chef-stir { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(9deg) translateY(3px); } }
@keyframes spoon-stir { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(12deg); } }
@keyframes pan-toss { 0%,52%,100% { transform: rotate(0); } 64% { transform: rotate(-7deg) translateY(-3px); } 77% { transform: rotate(3deg); } }
@keyframes pasta-toss { 0%,51%,100% { transform: translateY(24px); opacity: 0; } 58% { opacity: 1; } 68% { transform: translateY(-20px) rotate(-12deg); opacity: 1; } 83% { transform: translateY(24px) rotate(10deg); opacity: 0; } }
@keyframes chef-steam { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: .85; } 100% { transform: translateY(-16px); opacity: 0; } }
@keyframes chef-flame { from { transform: scaleY(.85) scaleX(1.05); } to { transform: scaleY(1.05) scaleX(.95); } }
@keyframes chef-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes chef-sparkle { 0%,100% { transform: scale(.94); opacity: .6; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes chef-heart { 0%,100% { transform: scale(1); } 25% { transform: scale(1.12); } 45% { transform: scale(1); } 60% { transform: scale(1.08); } }
@keyframes chef-think { 0%,35%,100% { transform: rotate(0); } 60%,80% { transform: rotate(-6deg) translateY(2px); } }
@keyframes code-type { 0% { opacity: .25; } 100% { opacity: 1; } }
@keyframes noodle-hop { 0%,70%,100% { transform: translateY(0) rotate(-35deg); } 35% { transform: translateY(-7px) rotate(-10deg); } }
@keyframes button-stir { from { transform: rotate(-15deg); } to { transform: rotate(15deg); } }
@media (max-width: 760px) {
  .story-hero { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding: 22px 0 14px; gap: 8px 0; }
  .story-copy { padding-bottom: 0; position: relative; z-index: 1; }
  .story-kicker { font-size: 8px; letter-spacing: .75px; margin-bottom: 12px; }
  .story-copy h1 { font-size: clamp(28px,7.8vw,42px); line-height: 1.04; letter-spacing: -1.3px; margin-bottom: 13px; }
  .story-copy p { font-size: 12px; line-height: 1.5; margin-bottom: 16px; max-width: 200px; }
  .story-copy .btn { min-width: 125px; font-size: 14px; padding: 12px 16px; }
  .story-character { align-self: center; margin-top: 20px; }
  .story-character .chef-scene { width: 118%; margin-left: -6%; }
  .chef-speech { top: -8%; right: 0; max-width: 126px; padding: 8px 10px; font-size: 14px; border-width: 1.5px; border-radius: 12px 12px 12px 3px; }
  .chef-signature { font-size: 7px; letter-spacing: .7px; margin-top: -6px; }
  .story-foot { padding-top: 12px; }
  .story-foot .code-sticker { font-size: 10px; padding: 7px 9px; }
  .motion-toggle { font-size: 11px; padding: 8px; }
  .story-ribbon { gap: 12px; font-size: 8px; letter-spacing: .8px; padding: 10px 8px; }
  .story-ribbon b { font-size: 14px; }
  .menu-section { padding-top: 26px; }
  .section-head { margin-bottom: 20px; }
  .section-head h2 { font-size: 29px; }
  .section-head p { font-size: 13px; }
  .section-head > .pill { white-space: nowrap; padding: 7px 9px; font-size: 10px; }
  .food-card { grid-template-columns: 100px minmax(0,1fr); margin-bottom: 4px; }
  .food-photo { min-height: 172px; }
  .food-photo .pasta-art { width: 152px; min-width: 152px; }
  .card-body { padding: 15px 12px; }
  .card-body h3 { font-size: 21px; }
  .card-body p { font-size: 12px; }
  .card-body .btn { min-width: 87px; }
  .card-body .price { font-size: 18px; }
  .qty button { width: 44px; }
  .qty span { min-width: 22px; width: 22px; }
  .footer .brand { font-size: 24px; }
  .footer { font-size: 11px; }
  .dialog-chef-strip { margin-bottom: 15px; }
  .dialog-chef { flex-basis: 84px; width: 84px !important; height: 78px; }
  .dialog-chef-strip > span { font-size: 16px; }
  .dialog-head h2 { font-size: 27px; }
  .history-chef { width: 230px !important; }
  .order-story .chef-scene { width: 240px; max-width: 85%; }
  .order-story p { font-size: 18px; }
  .track-title { margin-top: -10px; }
  .track-title h1 { font-size: 32px; line-height: 1.1; }
  .track-title > p { font-size: 14px; }
  .track-title > .eyebrow { display: none; }
  .chef-admin-heading { grid-template-columns: minmax(0,1fr) 138px; padding: 13px 12px; gap: 0; margin-top: 14px; }
  .chef-admin-heading h1 { font-size: 27px; line-height: 1.05; margin-bottom: 10px; }
  .chef-admin-heading p { font-size: 12px; }
  .chef-admin-heading .story-kicker { font-size: 7px; letter-spacing: .4px; margin-bottom: 10px; }
  .chef-admin-heading .pill { font-size: 10px; margin-top: 10px; padding: 6px 8px; }
  .admin-chef { width: 150px !important; margin: -10px -6px; }
  .admin-motion { margin: 0 0 8px; }
  .admin-motion .motion-toggle { min-height: 40px; }
  .login { margin: 20px 16px; padding: 22px; }
  .login-chef { width: 220px !important; }
  .login .brand { margin-bottom: 0; }
  .login h2 { font-size: 29px; }
  .error-chef { width: 230px !important; }
  .chef-loading-screen h1 { font-size: 27px; }
}
@media (max-width: 350px) {
  .story-copy h1 { font-size: 28px; }
  .story-copy p { font-size: 11px; }
  .story-character .chef-scene { width: 122%; margin-left: -10%; }
  .chef-speech { right: -2px; font-size: 12px; max-width: 110px; }
  .chef-signature { font-size: 6px; }
  .story-foot { gap: 6px; }
  .story-foot .code-sticker { font-size: 9px; }
  .story-ribbon { font-size: 7px; gap: 8px; }
  .food-card { grid-template-columns: 80px minmax(0,1fr); }
  .card-body h3 { font-size: 19px; }
  .chef-admin-heading { grid-template-columns: minmax(0,1fr) 116px; }
  .admin-chef { width: 130px !important; }
  .chef-admin-heading h1 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .chef-scene *, .loading-noodles i, .button-noodles { animation: none !important; }
  .btn, .food-photo .pasta-art { transition: none; }
  .btn:hover, .food-card:hover .pasta-art { transform: none; }
}
@media print {
  .chef-scene, .story-hero, .story-ribbon, .motion-toggle, .admin-motion, .dialog-chef-strip, .order-story { display: none !important; }
}
@media (max-width: 760px) {
  .admin-shell[data-view="orders"] .chef-admin-heading { margin-bottom: 14px; }
  .admin-shell[data-view="orders"] .chef-admin-heading h1 { font-size: 25px; }
  .admin-shell[data-view="orders"] .order-items { min-height: 36px; }
  .admin-shell[data-view="orders"] .toolbar { margin-bottom: 12px; }
}