/* dairyandglutenfree.com, the verdict palette is the whole identity.
   Nothing else on the site is this saturated, so a verdict reads at arm's
   length on a phone in a shop, which is the primary reading situation. */

:root{
  --safe:#0b6b45; --safe-bg:#e8f4ee; --safe-br:#bfe0d0;
  --no:#a3221c;   --no-bg:#fbeceb;   --no-br:#efc9c6;
  --dep:#8a5a00;  --dep-bg:#fcf2e0;  --dep-br:#ebd7ae;
  --unv:#4c5766;  --unv-bg:#eef1f4;  --unv-br:#d3dae2;

  --ink:#191713; --ink-2:#4a463f; --ink-3:#7a746a;
  --paper:#fbf9f6; --card:#fff; --rule:#e6e1d8; --accent:#0b6b45;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.012em;line-height:1.16;margin:0}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px 14px;border-radius:8px;z-index:99}

header.site{background:var(--card);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50}
header.site .wrap{display:flex;align-items:center;gap:22px;height:60px}
.logo{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.02em;
  display:flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap}
.logo svg.mk{flex:none;display:block}
.logo em{font-style:normal;color:var(--accent)}
nav.main{display:flex;gap:20px;font-size:14.5px;color:var(--ink-2);margin-left:auto}
nav.main a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--ink);border-color:var(--rule)}

/* verdict */
.verdict{border-radius:14px;padding:22px 24px;border:1px solid;margin:22px 0 0}
.verdict .lab{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:750;letter-spacing:-.02em}
.verdict .glyph{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:17px;font-weight:700;flex:none}
.verdict p{margin:9px 0 0;font-size:17.5px;line-height:1.5;color:var(--ink)}
.v-no{background:var(--no-bg);border-color:var(--no-br)}.v-no .lab{color:var(--no)}.v-no .glyph{background:var(--no)}
.v-safe{background:var(--safe-bg);border-color:var(--safe-br)}.v-safe .lab{color:var(--safe)}.v-safe .glyph{background:var(--safe)}
.v-dep{background:var(--dep-bg);border-color:var(--dep-br)}.v-dep .lab{color:var(--dep)}.v-dep .glyph{background:var(--dep)}
.v-unv{background:var(--unv-bg);border-color:var(--unv-br)}.v-unv .lab{color:var(--unv)}.v-unv .glyph{background:var(--unv)}
.v-hub{background:var(--card);border-color:var(--rule)}

.eviq{display:flex;flex-wrap:wrap;margin:14px 0 0;border:1px solid var(--rule);
  border-radius:10px;overflow:hidden;background:var(--card)}
.eviq div{padding:10px 16px;flex:1 1 170px;border-right:1px solid var(--rule)}
.eviq div:last-child{border-right:0}
.eviq dt{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.eviq dd{margin:3px 0 0;font-size:14.5px;font-weight:600}
.tier{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:5px;
  background:var(--ink);color:#fff;font-size:11px;font-weight:800;margin-right:7px;vertical-align:-3px}

/* article */
article{max-width:660px;padding:24px 0 64px}
article.wide{max-width:900px}
article h1{font-size:37px;margin:0 0 6px}
.kick{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;margin:0 0 4px}
.kick a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
article h2{font-size:23px;margin:38px 0 10px;padding-top:20px;border-top:1px solid var(--rule)}
article h3{font-size:18px;margin:26px 0 6px}
article p{margin:0 0 15px;color:var(--ink-2)}
article strong{color:var(--ink);font-weight:650}
article ul,article ol{margin:0 0 16px;padding-left:22px;color:var(--ink-2)}
article li{margin:0 0 7px}
article a{color:var(--accent)}
blockquote{margin:0 0 16px;padding:2px 0 2px 16px;border-left:3px solid var(--rule);color:var(--ink-3)}
code{font-size:.9em;background:#f1efe9;padding:1px 5px;border-radius:4px}

.callout{border-left:3px solid var(--accent);background:#f3f7f4;padding:13px 17px;
  border-radius:0 10px 10px 0;margin:18px 0;font-size:15.5px;color:var(--ink-2)}
.callout a{text-transform:capitalize}

.swap{border:1px solid var(--rule);border-radius:12px;background:var(--card);padding:2px 18px;margin:0 0 18px}
.swap ul{margin:0;padding:0;list-style:none}
.swap li{padding:13px 0;border-bottom:1px solid var(--rule);margin:0}
.swap li:last-child{border:0}
.swap .nm{font-weight:650;color:var(--ink);text-decoration:none}
.swap a.nm{color:var(--accent)}
.swap .why{font-size:14.7px;color:var(--ink-3);margin-top:3px;line-height:1.5}
.pill{font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;margin-left:8px;
  vertical-align:1px;white-space:nowrap;text-decoration:none;display:inline-block}
.p-safe{background:var(--safe-bg);color:var(--safe);border:1px solid var(--safe-br)}
.p-no{background:var(--no-bg);color:var(--no);border:1px solid var(--no-br)}
.p-dep{background:var(--dep-bg);color:var(--dep);border:1px solid var(--dep-br)}
.p-unv{background:var(--unv-bg);color:var(--unv);border:1px solid var(--unv-br)}

/* tables */
.tw{overflow-x:auto;margin:0 0 18px}
table{width:100%;border-collapse:collapse;font-size:15px;background:var(--card);
  border:1px solid var(--rule);border-radius:12px;overflow:hidden}
th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  padding:11px 14px;border-bottom:1px solid var(--rule);font-weight:600;white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--paper)}
table.v td a{color:var(--ink);text-decoration:none;font-weight:600}
table.v td a:hover{color:var(--accent)}
td.dt{color:var(--ink-3);white-space:nowrap;font-size:14px}
.vtag{font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;display:inline-block}
.t-safe{background:var(--safe-bg);color:var(--safe)} .t-no{background:var(--no-bg);color:var(--no)}
.t-dep{background:var(--dep-bg);color:var(--dep)} .t-unv{background:var(--unv-bg);color:var(--unv)}

/* home */
.hero{padding:54px 0 34px;text-align:center;border-bottom:1px solid var(--rule);background:var(--card)}
.hero h1{font-size:48px;letter-spacing:-.028em;margin-bottom:12px}
.lede{max-width:620px;margin:0 auto;color:var(--ink-2);font-size:18px}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.chip{font-size:13px;font-weight:650;padding:5px 13px;border-radius:99px}
.c-safe{background:var(--safe-bg);color:var(--safe)} .c-no{background:var(--no-bg);color:var(--no)}
.c-dep{background:var(--dep-bg);color:var(--dep)} .c-unv{background:var(--unv-bg);color:var(--unv)}
.sect{padding:36px 0 6px}
.sect h2{font-size:26px;margin-bottom:4px}
.sect .sub{color:var(--ink-3);font-size:15px;margin:0 0 18px}
.hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hcard{border:1px solid var(--rule);border-radius:12px;background:var(--card);padding:16px;
  text-decoration:none;display:block}
.hcard:hover{border-color:var(--safe-br);background:#fdfefd}
.hcard b{display:block;font-family:var(--serif);font-size:16.5px;font-weight:600;margin-bottom:5px;line-height:1.25}
.hcard span{font-size:13.5px;color:var(--ink-3);line-height:1.45;display:block}
.aisles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.aisles li{border:1px solid var(--rule);border-radius:10px;background:var(--card);
  padding:11px 14px;display:flex;justify-content:space-between;align-items:center}
.aisles a{text-decoration:none;font-weight:600;font-size:15px}
.aisles span{color:var(--ink-3);font-size:13px}

footer.site{border-top:1px solid var(--rule);margin-top:48px;padding:28px 0 56px;
  font-size:14.5px;color:var(--ink-2);background:var(--card)}
footer.site p{margin:0 0 8px;max-width:760px}
footer .fine{font-size:13.5px;color:var(--ink-3)}
footer .fine a{color:var(--ink-3)}

@media(max-width:900px){.hgrid,.aisles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  nav.main{display:none}
  .hero h1{font-size:34px}
  article h1{font-size:28px}
  .verdict .lab{font-size:19px}
  body{font-size:16.5px}
}
@media(max-width:520px){.hgrid,.aisles{grid-template-columns:1fr}}

/* The "do not swap to these" block. Kept visually heavier than the
   recommendation list above it because the products named here are the ones
   shelved right beside the safe ones, Omission and Daura next to Green's and
   Ghostfish. Two QA passes caught this class of error hiding in plain prose. */
.avoid{border:1px solid var(--no-br);background:var(--no-bg);border-radius:12px;
  padding:15px 18px;margin:0 0 18px}
.avoid .hd{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--no);
  font-weight:750;margin-bottom:6px}
.avoid p{margin:0;color:#5c1a16;font-size:15.5px}
.avoid strong{color:var(--no)}

/* Primary source, named and linked directly under the verdict. Every article
   already named its source in prose but linked it only in the footer table, this closes the gap between "we say where this came from" and "go and see". */
.psrc{margin:10px 0 0;font-size:14.5px;color:var(--ink-3)}
.psrc span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:650;
  color:var(--ink-3);margin-right:7px}
.psrc a{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px solid var(--safe-br)}
.psrc a:hover{border-color:var(--accent)}
.psrc a.more{color:var(--ink-3);font-weight:500;border-bottom-style:dotted;margin-left:8px;font-size:13.5px}
.eviq dd a{text-decoration:none;color:inherit;border-bottom:1px dotted var(--rule)}
.psrc .dom{font-size:12.5px;color:var(--ink-3);letter-spacing:0;text-transform:none;
  font-weight:500;margin-left:7px;background:#f1efe9;padding:2px 7px;border-radius:5px}

/* Explanatory figures. Deliberately not decorative: each one carries an idea
   the surrounding paragraph has to work harder to express. */
figure.dia{margin:26px 0;padding:0;border:1px solid var(--rule);border-radius:14px;
  overflow:hidden;background:var(--card)}
figure.dia img{display:block;width:100%;height:auto}
figure.dia figcaption{padding:11px 16px;border-top:1px solid var(--rule);
  font-size:14px;color:var(--ink-3);background:var(--paper)}
figure.dia figcaption a{color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--safe-br);margin-left:4px}

/* Product photo. Sits below the verdict and the evidence strip on purpose: the
   reader holding the packet needs the answer first, and a hero image above it
   would push the verdict off a phone screen. */
figure.hero{margin:22px 0 0;padding:0;border:1px solid var(--rule);border-radius:14px;
  overflow:hidden;background:var(--card)}
figure.hero img{display:block;width:100%;height:auto;max-height:400px;object-fit:contain;
  background:#fff}
/* White studio backgrounds are trimmed at download, and what remains sits on
   white rather than the warm paper, so the cut-out edge is invisible. */
figure.hero img{padding:10px}