/* Shared WebKit base. Project tokens are defined in app.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--bg,#0b0b0f);color:var(--ink,#f2f2f5);font-family:var(--font-body,system-ui,sans-serif);line-height:1.5;min-height:100vh;display:flex;flex-direction:column}
img,svg,video,canvas{max-width:100%;display:block}
main{flex:1;width:100%}
main.is-leaving{opacity:.6;transition:opacity .15s}
a{color:inherit}
:focus-visible{outline:2px solid var(--a,#ff8a34);outline-offset:2px}
table{border-collapse:collapse;width:100%}
td,th{font-variant-numeric:tabular-nums}
.wide{overflow-x:auto;max-width:100%}
/* Mobile navigation appears below 768px; desktop navigation is hidden. */
.nav-mobile{display:none;gap:16px;overflow-x:auto;padding:8px 16px;white-space:nowrap;scrollbar-width:none}
.nav-mobile::-webkit-scrollbar{display:none}
@media (max-width:767px){.nav-desktop{display:none!important}.nav-mobile{display:flex}}
/* art slot */
figure.art{margin:0;position:relative;overflow:hidden;background:var(--surface,#15151c)}
figure.art img{width:100%;height:100%;object-fit:cover}
figure.art.art-bg{position:absolute;inset:0;z-index:0;opacity:.35;pointer-events:none}
figure.art.art-bg ~ *{position:relative;z-index:1}
figure.art[data-art]:not(:has(img)){background:var(--surface,#15151c);opacity:.35;min-height:160px}
/* marquee (recipes.js) */
.marquee{display:flex;overflow:hidden;gap:48px;white-space:nowrap}
.marquee .mq{display:inline-flex;gap:48px;animation:mq var(--mq-dur,30s) linear infinite}
@keyframes mq{to{transform:translateX(calc(-100% - 48px))}}
@media (prefers-reduced-motion:reduce){.marquee .mq{animation:none}}