/* webkit/base.css — shared base for every v9 site. Each project sets tokens in app.css (:root{--bg;--surface;--ink;--mute;--line;--a;--b;--font-display;--font-body;--font-mono}). */
*,*::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 nav: header .nav-mobile shows below 768px, scrolls horizontally; .nav-desktop 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:linear-gradient(135deg,var(--a,#ff8a34),var(--b,#36c5e8));opacity:.35;min-height:160px}
/* sample chip */
.sample-chip{display:inline-block;font:600 10px/1 var(--font-mono,monospace);letter-spacing:.08em;border:1px solid var(--mute,#888);color:var(--mute,#888);padding:3px 6px;border-radius:2px;margin-left:6px;vertical-align:middle}
/* 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}}