/* loi Evin health message: legible, not decorative. */
.alcohol-warn{margin:22px 0 0;padding:8px 10px;border:1px solid var(--border);
  border-radius:8px;background:var(--chip,#eee);color:var(--ink-2,#444);
  font-size:12px;line-height:1.45}
/* Copius — ingredient pages. Generated pages share this one file rather than
   inlining it 3,714 times. Same tokens as the atlas. */
:root{--bg:#F7F6F1;--card:#FFFEFC;--border:#E5E7DA;--ink:#1E211A;--ink-2:#565A4C;
  --ink-3:#6A6E5F;--plate:#F0F1E7;--line:#585853;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
/* Dark twice: once for the system setting, once for the choice made in the atlas,
   which wins either way. */
:root[data-theme="dark"]{--bg:#14160F;--card:#1C1E16;--border:#2C2F24;
  --ink:#ECEBE2;--ink-2:#B4B7A6;--ink-3:#8E9280;--plate:#242619;--line:#b8b5ae}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14160F;--card:#1C1E16;
  --border:#2C2F24;--ink:#ECEBE2;--ink-2:#B4B7A6;--ink-3:#8E9280;--plate:#242619;--line:#b8b5ae}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased}
header,main,footer{max-width:660px;margin-inline:auto;padding-inline:20px}
header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-top:20px;padding-bottom:18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.home{font:400 24px/1 var(--serif);text-decoration:none;color:var(--ink)}
nav{font-size:14px;color:var(--ink-3)}
a{color:var(--ink-2);text-underline-offset:3px;text-decoration-color:var(--border)}
a:hover{color:var(--ink);text-decoration-color:var(--ink-3)}
main{padding-top:26px;padding-bottom:10px}
figure{margin:0 0 14px;width:104px;height:104px;position:relative}
/* js/page.js lays a copy of the svg over the <img>. The <img> itself never
   leaves the page — inline svg is not something Google Images can index, and
   1 835 drawings are the one click channel an answer engine cannot stand in
   front of. Two jobs for the copy: it draws itself on arrival, and it is the
   only one of the two that can be themed, because a file loaded through <img>
   sees the browser's colour scheme and never the choice made in the atlas.
   Where the two agree the copy goes at the end of the draw and these colours
   are the ones baked into the file anyway, so the hand-off is invisible; where
   they disagree the copy stays, and it is the one that is right. */
figure svg.ink{position:absolute;left:0;top:0;background:var(--bg)}
figure svg.ink .s{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round}
figure svg.ink .f1,figure svg.ink .f3,figure svg.ink .sf{fill:var(--plate);
  stroke:var(--line);stroke-width:3;stroke-linejoin:round}
figure svg.ink .f2{fill:var(--border);stroke:var(--line);stroke-width:3;
  stroke-linejoin:round}
figure svg.ink .dot{fill:var(--line)}
figure svg.ink .bg{fill:var(--plate)}
/* Order and :not() matter. 1 814 of 1 835 drawings carry a combined class like
   "f2 sf" — both an outline and a fill — and a plain fill rule written after the
   stroke rule replaces its animation shorthand on every one of them. The
   stroke-dasharray survives with nothing left to draw it: invisible, forever.
   Fills that are only fills come first; anything that strokes is set afterwards
   and carries both animations explicitly. */
figure svg.ink.draw .f1:not(.sf),figure svg.ink.draw .f2:not(.sf),
figure svg.ink.draw .f3:not(.sf),figure svg.ink.draw .dot{animation:art-fill .58s ease .46s both}
figure svg.ink.draw .s{stroke-dasharray:1;stroke-dashoffset:1;
  animation:art-draw 1.05s cubic-bezier(.65,0,.35,1) forwards}
figure svg.ink.draw .sf{stroke-dasharray:1;stroke-dashoffset:1;
  animation:art-draw 1.05s cubic-bezier(.65,0,.35,1) forwards,
            art-fill .58s ease .46s both}
@keyframes art-draw{to{stroke-dashoffset:0}}
@keyframes art-fill{from{opacity:0}to{opacity:1}}
h1{font:400 34px/1.15 var(--serif);margin:0 0 2px}
.mk{font-size:19px;color:var(--ink-3)}
.alt{margin:0 0 22px;font:italic 400 19px/1.3 var(--serif);color:var(--ink-3)}
h2{font:400 20px/1.3 var(--serif);margin:26px 0 8px}
p{margin:0 0 14px;color:var(--ink-2)}
table{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:0 0 6px}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--border);font-weight:400}
tr:last-child th,tr:last-child td{border-bottom:0}
th{width:38%;color:var(--ink-3);font-size:13px;letter-spacing:.5px;text-transform:uppercase;
  vertical-align:top;padding-top:12px}
td{color:var(--ink)}
.pairs{display:flex;flex-wrap:wrap;gap:7px}
.pairs a{background:var(--card);border:1px solid var(--border);border-radius:999px;
  padding:4px 12px;font-size:14px;text-decoration:none;color:var(--ink-2)}
.pairs a:hover{border-color:var(--ink-3);color:var(--ink)}
/* the little drawing inside a chip: same line art as the entry page, at 22px,
   where stroke-width has to grow or the strokes vanish */
.ci{width:22px;height:22px;flex:none;margin:-2px 6px -2px -4px;vertical-align:-5px}
.ci .f1,.ci .f2,.ci .sf{fill:var(--plate);stroke:var(--ink-3);stroke-width:5;
  stroke-linejoin:round}
.ci .f2{fill:var(--border)}
.ci .s{fill:none;stroke:var(--ink-3);stroke-width:5;stroke-linecap:round}
.ci .dot{fill:var(--ink-3)}
.pairs a{display:inline-flex;align-items:center}
.pairs a:hover .ci .f1,.pairs a:hover .ci .f2,.pairs a:hover .ci .sf,
.pairs a:hover .ci .s{stroke:var(--ink)}
.pairs a:hover .ci .dot{fill:var(--ink)}
h2 small{color:var(--ink-3);font-size:14px}
.ig-link{display:inline-flex;align-items:center;vertical-align:-6px;margin-left:9px;
  padding:4px;border-radius:8px;line-height:0;text-decoration:none}
.ig{width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:1.8}
.ig-dot{fill:var(--ink-3);stroke:none}
.ig-link:hover .ig{stroke:var(--ink)}
.ig-link:hover .ig-dot{fill:var(--ink)}
footer{padding:24px 20px 48px;margin-top:26px;border-top:1px solid var(--border);
  font-size:13.5px;color:var(--ink-3);line-height:1.9}
h3{font:400 16px/1.3 var(--sans);margin:20px 0 7px;color:var(--ink-3);
  letter-spacing:.4px;text-transform:uppercase}
h3 small{text-transform:none;letter-spacing:0}
.lede{margin:0 0 22px;font:400 18px/1.5 var(--serif);color:var(--ink-2)}
.note{margin:-2px 0 9px;font-size:13.5px;color:var(--ink-3)}
.fix{margin:30px 0 0;padding:14px 16px;background:var(--card);
  border:1px solid var(--border);border-radius:12px;font-size:14.5px;color:var(--ink-3)}
.fix a{color:var(--ink-2)}
@media (max-width:420px){h1{font-size:29px}th{width:44%;font-size:12px}}