/* Who Made My Meds?: "Provenance". Pharmacy-label paper, ink, and prescription-bottle amber. Condensed Archivo headlines,
   Public Sans text, IBM Plex Mono for NDC codes (as printed on bottles). Light only, like a printed label. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-var.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/publicsans-var.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-weight:400;font-display:swap;src:url(fonts/plexmono-400.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-weight:600;font-display:swap;src:url(fonts/plexmono-600.woff2) format("woff2")}
:root{
  --paper:#f6f3ec; --card:#fffdf8; --ink:#1b2a2f; --muted:#5d6a6e; --line:#ddd5c6; --amber:#b4561a; --amber-dk:#8a3f10; --amber-soft:#f4e3d0;
  --ok:#1f6e43; --ok-bg:#e0f0e6; --warn:#7d5300; --warn-bg:#f8ebc8; --bad:#a32a20; --bad-bg:#f8dfdb; --none:#5d6a6e; --none-bg:#ebe7de;
  --head:"Archivo",Arial Narrow,Arial,sans-serif; --sans:"Public Sans",Arial,sans-serif; --mono:"Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans)}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
a{color:var(--amber-dk);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
code,.codes{font-family:var(--mono);font-size:.92em;letter-spacing:-.01em}
h1,h2,h3{font-family:var(--head);font-stretch:82%;line-height:1.08;margin:1.6em 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:850;margin-top:.4em}
h2{font-size:clamp(1.45rem,2.6vw,1.9rem);font-weight:800}
h3{font-size:1.2rem;font-weight:750;font-stretch:90%}
p{margin:.6em 0}
.muted{color:var(--muted)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:9}

/* header: a band like the top of a pharmacy label */
.top{background:var(--ink);color:var(--paper);border-bottom:6px solid var(--amber)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;flex-wrap:wrap}
.logo{font-family:var(--head);font-weight:850;font-stretch:80%;font-size:1.45rem;color:var(--paper);text-decoration:none;letter-spacing:-.01em}
.logo span{color:#f0a868}
.top nav{display:flex;gap:18px;flex-wrap:wrap}
.top nav a{color:var(--paper);text-decoration:none;font-weight:600;font-size:.95rem}
.top nav a:hover{color:#f0a868}

main{padding-bottom:56px}
.crumbs{font-size:.88rem;color:var(--muted);margin:18px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.page{max-width:960px}
.prose{max-width:760px}
.prose h2 .chip{vertical-align:middle;margin-right:6px}
.lede{font-size:1.15rem;line-height:1.55}
.kicker{font-family:var(--mono);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--amber-dk);margin:28px 0 0}
.head{border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:8px}

/* home hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;padding:40px 0 10px}
.hero h1{font-size:clamp(2.3rem,5.4vw,4.1rem);margin:.2em 0 .3em;font-stretch:76%}
.hero .kicker{margin-top:0}
.hero-img{aspect-ratio:4/5;border-radius:14px;background:#e9dfcf url(img/hero.jpg) center/cover;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--amber)}
@media (max-width:820px){.hero{grid-template-columns:1fr;padding-top:24px}.hero-img{aspect-ratio:16/10;order:-1;box-shadow:6px 6px 0 var(--amber)}}

/* search, styled like the NDC box on a label */
.search{margin:22px 0}
.search label{display:block;font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.search .row{display:flex;gap:0;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--card)}
.search input{flex:1;min-width:0;border:0;padding:13px 15px;font:500 1.05rem var(--sans);background:transparent;color:var(--ink)}
.search input:focus{outline:none}
.search .row:focus-within{box-shadow:0 0 0 3px var(--amber-soft)}
.search button{border:0;background:var(--amber);color:#fff;font:700 1rem var(--sans);padding:0 22px;cursor:pointer}
.search button:hover{background:var(--amber-dk)}
.search.big{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:0 1px 0 var(--line)}
.search.big input{font-size:1.15rem;padding:16px}
@media (max-width:560px){.search .row{flex-direction:column}.search button{padding:13px}}

.band{margin-top:40px}
.band h2{margin-top:0}
.sub{color:var(--muted);margin-top:-.3em}
.cards{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.cards a{display:block;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--amber);border-radius:8px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.cards a:hover{border-color:var(--ink);border-left-color:var(--amber)}
.cards b{font-family:var(--head);font-stretch:85%;font-size:1.15rem;display:block}
.cards span{font-size:.85rem;color:var(--muted)}
.more{margin-top:12px;font-weight:600}
.how{margin-top:48px;background:var(--ink);color:var(--paper);border-radius:16px;padding:26px 28px}
.how h2{margin-top:0}
.how a{color:#f0a868}
.how code{color:#f0a868}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.steps h3{margin:.2em 0 .3em;color:#f0a868}
.steps p{margin:0;color:#d8d4ca;font-size:.97rem}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.countries{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.countries a{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:2px solid var(--line);text-decoration:none;color:var(--ink)}
.countries a:hover{border-color:var(--amber)}
.countries span{color:var(--muted);font-size:.88rem}
.facts{color:var(--muted);font-size:.95rem;margin-top:36px}

/* drug page */
.tip{background:var(--amber-soft);border-radius:10px;padding:12px 16px}
.makers{display:grid;gap:12px}
.maker{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.maker h3{margin:0}
.maker .brand{font-family:var(--sans);font-weight:500;font-size:.9rem;color:var(--muted)}
.maker-head p{margin:.25em 0 .5em;font-size:.93rem}
.plants{list-style:none;padding:0;margin:0;border-top:1px dashed var(--line)}
.plants li{padding:8px 0;border-bottom:1px dashed var(--line)}
.plants li:last-child{border-bottom:0}
.where{color:var(--muted)}
.role{font-size:.9rem}
.plants .where::before{content:"· "}
.pl-meta{font-size:.9rem;margin-top:2px}
.pl-meta .role{color:var(--ink)}
.noplant{color:var(--muted);font-size:.95rem;margin:.4em 0 0}
.plant-card{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--ink);border-radius:10px;padding:12px 16px;margin:10px 0}
.plant-card h3{margin:0 0 .2em}
.plant-card p{margin:.2em 0}

/* result chips */
.chip{display:inline-block;font:600 .78rem/1.2 var(--sans);padding:3px 9px;border-radius:999px;white-space:nowrap;vertical-align:1px}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.none{background:var(--none-bg);color:var(--none)}
.verdict{border-radius:14px;padding:16px 20px;margin:18px 0;background:var(--none-bg)}
.verdict.ok{background:var(--ok-bg)}.verdict.warn{background:var(--warn-bg)}.verdict.bad{background:var(--bad-bg)}
.verdict .big{font-size:1.15rem;font-weight:600;margin-top:0}
.verdict .chip{font-size:.95rem;background:#fff}

.list{padding-left:1.1em}
.list li{margin:.3em 0}
.list.cols{columns:2 300px;column-gap:32px}
.list.cols li{break-inside:avoid}
.recalls{list-style:none;padding:0}
.recalls li{border-left:4px solid var(--bad);background:var(--card);padding:10px 14px;margin:8px 0;border-radius:0 8px 8px 0}
.cites{padding-left:1.1em}
.cites li{margin:.6em 0}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;margin:10px 0}
.tbl th{text-align:left;font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:2px solid var(--ink);padding:8px 10px 6px 0}
.tbl td{border-bottom:1px solid var(--line);padding:8px 10px 8px 0;vertical-align:top}
@media (max-width:640px){.tbl thead{display:none}.tbl tr{display:block;padding:8px 0;border-bottom:1px solid var(--line)}.tbl td{display:block;border:0;padding:2px 0}}
dl.facts{display:grid;grid-template-columns:200px 1fr;gap:6px 18px;color:var(--ink);font-size:1rem}
dl.facts dt{font-weight:600}
dl.facts dd{margin:0}
@media (max-width:600px){dl.facts{grid-template-columns:1fr}dl.facts dd{margin-bottom:8px}}
.aside{margin-top:30px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted)}
.letters{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin:18px 0}
.letters a{display:block;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 4px;text-decoration:none;color:var(--ink)}
.letters a[aria-current]{background:var(--ink);color:var(--paper)}
.letters b{font-family:var(--head);font-size:1.3rem;display:block}
.letters span{font-size:.75rem;color:var(--muted)}
.letters.small{grid-template-columns:repeat(auto-fill,minmax(38px,1fr))}
.letters.small b{font-size:1rem}
.pager{display:flex;gap:18px;align-items:center;margin:24px 0}

footer{background:var(--ink);color:#c9c4b8;padding:28px 0 36px;font-size:.92rem;border-top:6px solid var(--amber)}
footer nav{display:flex;flex-wrap:wrap;gap:14px 20px;margin-bottom:12px}
footer a{color:var(--paper)}
footer p{margin:.4em 0;max-width:820px}