/* jonuland illustration palette and shared illustration styles.
   illo-* tokens are for illustrations only. Never use them for UI, text or charts.
   Bases are the same in both themes; deep tones lift in dark so shading stays visible on ink. */
.jl-root{
--illo-avocado:#b5cc5e;--illo-avocado-deep:#55622a;
--illo-herb:#3f9a4e;--illo-herb-deep:#1f5c34;
--illo-sand:#ead6b0;--illo-sand-deep:#c4955a;
--illo-crust:#a8622f;--illo-crust-deep:#6e3a1a;
--illo-flesh:#ffe0b0;
--illo-line:#030510;
--illo-stone:#d1d4dd;--illo-stone-deep:#a6aab8;
--illo-iron:#313542;--illo-iron-wall:#4b4f5e;--illo-iron-rim:#4b4f5e;
--illo-plate:#ffffff;--illo-white:#fbf7ee;
--illo-onion:#b21f66;--illo-skin:#b21f66;
--illo-sauce:#f25757;--illo-sauce-deep:#d2373d;
--illo-yolk:#ffbd69;
--illo-shadow:rgba(17,29,94,.10);
--illo-steam:#a6aab8
}
.jl-root[data-theme="dark"]{--illo-avocado-deep:#6b7a35;--illo-herb-deep:#2f7a47;--illo-crust-deep:#8c4d24;--illo-iron-rim:#818695;--illo-shadow:rgba(0,0,0,.45);--illo-steam:#d1d4dd}
@media (prefers-color-scheme:dark){.jl-root[data-theme="auto"]{--illo-avocado-deep:#6b7a35;--illo-herb-deep:#2f7a47;--illo-crust-deep:#8c4d24;--illo-iron-rim:#818695;--illo-shadow:rgba(0,0,0,.45);--illo-steam:#d1d4dd}}

.illo{display:block;width:100%;height:auto;overflow:visible}
.illo .ol{stroke:var(--illo-line);stroke-width:3;stroke-linejoin:round}
.illo .m{transform-box:fill-box;transform-origin:center}
.illo .draw{fill:none;stroke-dasharray:1;stroke-dashoffset:0;stroke-linecap:round;stroke-linejoin:round}

.illo .sh{fill:var(--illo-shadow)}
.illo .avo{fill:var(--illo-avocado)}.illo .avo-d{fill:var(--illo-avocado-deep)}
.illo .herb{fill:var(--illo-herb)}.illo .herb-d{fill:var(--illo-herb-deep)}
.illo .sand{fill:var(--illo-sand)}.illo .sand-d{fill:var(--illo-sand-deep)}
.illo .crust{fill:var(--illo-crust)}.illo .crust-d{fill:var(--illo-crust-deep)}
.illo .flesh{fill:var(--illo-flesh)}
.illo .stone{fill:var(--illo-stone)}.illo .stone-d{fill:var(--illo-stone-deep)}
.illo .iron{fill:var(--illo-iron)}.illo .iron-w{fill:var(--illo-iron-wall)}
.illo .plate{fill:var(--illo-plate)}.illo .white{fill:var(--illo-white)}
.illo .onion{fill:var(--illo-onion)}.illo .skin{fill:var(--illo-skin)}
.illo .sauce{fill:var(--illo-sauce)}.illo .sauce-d{fill:var(--illo-sauce-deep)}
.illo .yolk{fill:var(--illo-yolk)}
.illo .shine{fill:#ffffff;opacity:.45}
.illo .rim{fill:none;stroke:var(--illo-iron-rim);stroke-width:3}

/* Lines drawn on top of food */
.illo .swirl{stroke:var(--illo-avocado-deep);stroke-width:7;opacity:.45}
.illo .groove{stroke:var(--illo-sand-deep);stroke-width:12;opacity:.32}
.illo .drizzle{stroke:var(--illo-sand-deep);stroke-width:13}
.illo .drizzle-hi{stroke:#ffffff;stroke-width:3;opacity:.4}
.illo .vein{fill:none;stroke:var(--illo-herb-deep);stroke-width:1.6;stroke-linecap:round}
.illo .crease{fill:none;stroke:var(--illo-sand-deep);stroke-width:2;stroke-linecap:round}
.illo .seg{fill:none;stroke:var(--illo-white);stroke-width:2.5;stroke-linecap:round;opacity:.8}
.illo .char{fill:none;stroke:var(--illo-crust);stroke-width:5;opacity:.75}
.illo .steam{fill:none;stroke:var(--illo-steam);stroke-width:4;stroke-linecap:round;opacity:0}

/* One hover detail at most: steam rises off the shakshuka */
@media (hover:hover){.illo-hover:hover .steam{opacity:.75}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.illo .steam{transform-box:fill-box;transition:opacity 300ms cubic-bezier(.2,0,0,1),translate 600ms cubic-bezier(.2,0,0,1)}
.illo-hover:hover .steam{translate:0 -10px}
}

/* Bare illustration, placed inside a site page */
.jl-root.illo-bare{min-height:0;display:block;width:100%;background:transparent}

/* Recipe index card: the dish sits in the color band as a close-up, cropped by the band's bottom edge */
.rec-band.has-illo{position:relative;height:208px;overflow:hidden}
.rec-band.has-illo .rec-code{position:relative;z-index:1}
.rec-illo{position:absolute;right:16px;bottom:-64px;width:252px;pointer-events:none}
@media (max-width:640px){.rec-band.has-illo{height:168px;font-size:36px}.rec-illo{width:168px;right:0;bottom:-44px}}

/* Recipe detail hero: copy left, illustration right; stacks on narrow screens */
.recipe-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:48px;align-items:center}
.recipe-hero-copy{display:flex;flex-direction:column;gap:16px;min-width:0}
.recipe-hero-illo{width:100%;max-width:360px;justify-self:end}
@media (max-width:900px){.recipe-hero{grid-template-columns:minmax(0,1fr);gap:24px}.recipe-hero-illo{max-width:360px;justify-self:start}}

/* Artboard frame for reviewing an illustration on the canvas */
.illo-board{width:640px;height:640px;box-sizing:border-box;padding:40px 40px 32px;display:flex;flex-direction:column;align-items:center;gap:16px;background:var(--bg)}
.illo-board .illo{width:480px;flex:none}
.illo-meta{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.illo-meta p{margin:0;font:500 14px/1.4 var(--font-sans);color:var(--ink-muted)}
.illo-meta b{font-weight:600;color:var(--ink);letter-spacing:.06em;margin-right:8px}
.illo-replay{font:500 13px/1 var(--font-sans);color:var(--ink);background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:10px 14px;min-height:44px;cursor:pointer}
@media (hover:hover){.illo-replay:hover{background:var(--surface-sunk)}}
.illo-replay:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}