/* Food intelligence: brand page, articles index and single articles.
   The 2026 redesign's type and colours (mockup/index.html), scoped to
   body.fof-fi so the rest of the current site is unchanged. When the full
   redesign ships, these tokens move into the site-wide stylesheet. */

body.fof-fi{
  --fi-green:#123F31;--fi-green-ink:#0B211A;
  --fi-copper:#A85F2C;--fi-copper-d:#8E4E22;
  --fi-ink:#1B1D1A;--fi-ink-2:#464943;--fi-mute:#6A6C65;
  --fi-plaster:#F2EDE4;--fi-paper:#FBF9F5;
  --fi-line:rgba(27,29,26,.16);--fi-line-2:rgba(27,29,26,.1);
  --fi-display:"Archivo",Arial,sans-serif;
  --fi-body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --fi-r:3px;--fi-ease:cubic-bezier(.22,.7,.18,1);
  --fi-gutter:clamp(16px,4vw,40px);
  background:var(--fi-paper)!important;color:var(--fi-ink);
  font:400 16px/1.65 var(--fi-body);-webkit-font-smoothing:antialiased;
}
.fof-fi .fi *{box-sizing:border-box}
.fof-fi .fi img{max-width:100%;height:auto;display:block}
.fof-fi .fi a{color:inherit}
.fof-fi .fi :focus-visible{outline:2px solid var(--fi-copper);outline-offset:3px}
.fof-fi .fi h1,.fof-fi .fi h2,.fof-fi .fi h3,.fof-fi .fi h4{font-family:var(--fi-display);font-weight:600;line-height:1.07;letter-spacing:-.018em;margin:0;color:var(--fi-ink);text-wrap:balance;text-transform:none}
.fof-fi .fi h1{font-size:clamp(40px,5.4vw,80px);letter-spacing:-.024em;line-height:1.03}
.fof-fi .fi h2{font-size:clamp(30px,3.7vw,52px);letter-spacing:-.02em}
.fof-fi .fi h3{font-size:clamp(19px,1.5vw,22px);line-height:1.2;letter-spacing:-.012em}
.fof-fi .fi p{margin:0}
.fof-fi .fi .cu{color:var(--fi-green)}

.fi-wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--fi-gutter)}
.fi-sec{padding-block:clamp(72px,9vw,140px)}
.fi-sec-tight{padding-block:clamp(52px,6vw,88px)}
.fi-plaster{background:var(--fi-plaster)}
.fi-head{display:grid;gap:22px;max-width:760px}
.fi-eyebrow{font:500 11.5px/1.3 var(--fi-display);letter-spacing:.14em;text-transform:uppercase;color:var(--fi-mute)}
.fi-eyebrow b{font-weight:500}
.fi-lede{font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.62;color:var(--fi-ink-2);max-width:60ch}
.fi-meta{font:500 11.5px/1.4 var(--fi-display);letter-spacing:.12em;text-transform:uppercase;color:var(--fi-mute)}

.fof-fi .fi .fi-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;border-radius:2px;border:0;background:var(--fi-copper);color:#fff;text-decoration:none;font:500 12.5px/1 var(--fi-display);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .35s var(--fi-ease)}
.fof-fi .fi .fi-btn:hover{background:var(--fi-copper-d);color:#fff}
.fof-fi .fi .fi-link{font:500 12.5px/1 var(--fi-display);letter-spacing:.1em;text-transform:uppercase;color:var(--fi-ink);text-decoration:none;display:inline-flex;gap:10px;align-items:center;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:7px;transition:background-size .5s var(--fi-ease)}
.fof-fi .fi .fi-link::after{content:"→";font-family:var(--fi-body);letter-spacing:0}
.fof-fi .fi .fi-link:hover{background-size:30% 1px}

/* page hero (light, as in the mockup's brand-guide pass) */
.fi-hero{background:var(--fi-plaster)}
.fi-hero .fi-wrap{display:grid;gap:26px;padding-block:clamp(64px,8vw,120px)}
.fof-fi .fi .fi-hero h1{max-width:16ch}
.fi-crumbs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font:500 11.5px/1.3 var(--fi-display);letter-spacing:.12em;text-transform:uppercase;color:var(--fi-mute)}
.fof-fi .fi .fi-crumbs a{color:var(--fi-ink-2);text-decoration:none}
.fof-fi .fi .fi-crumbs a:hover{color:var(--fi-green);text-decoration:underline}

/* brand page */
.fi-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,104px);align-items:center}
.fi-media{border-radius:var(--fi-r);overflow:hidden}
.fi-media img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
.fi-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(20px,3.4vw,48px);margin-top:clamp(40px,5vw,72px)}
.fi-step{display:grid;gap:14px;padding-top:30px;border-top:1px solid var(--fi-ink);align-content:start}
.fi-step .n{font:600 44px/1 var(--fi-display);color:var(--fi-green);letter-spacing:-.03em}
.fi-step p{color:var(--fi-ink-2)}
.fi-tg{background:#141412;color:#E6E4DF}
.fi-tg .fi-wrap{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,56px);align-items:center;padding-block:48px}
.fi-tg-badge{font:500 12px/1 var(--fi-display);letter-spacing:.14em;color:#fff;border:1px solid rgba(255,255,255,.3);padding:10px 12px;border-radius:2px;white-space:nowrap}
.fof-fi .fi .fi-tg h3{color:#fff;margin-bottom:8px}
.fi-tg p{color:#B5B3AD;max-width:62ch}
.fof-fi .fi .fi-tg .fi-link{color:#fff}
.fi-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.4vw,48px)}
.fi-two>div{display:grid;gap:14px;align-content:start}
.fi-two p{color:var(--fi-ink-2)}

/* article cards */
.fi-bar{display:flex;justify-content:space-between;align-items:end;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(36px,4vw,56px)}
.fi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(28px,3vw,44px) clamp(20px,2.6vw,36px)}
.fof-fi .fi .fi-card{display:grid;gap:18px;align-content:start;text-decoration:none;color:inherit}
.fi-card-img{border-radius:var(--fi-r);overflow:hidden;background:var(--fi-plaster)}
.fi-card-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .9s var(--fi-ease)}
.fi-card:hover .fi-card-img img{transform:scale(1.035)}
.fi-card-txt{display:grid;gap:10px;align-content:start}
.fof-fi .fi .fi-card h2,.fof-fi .fi .fi-card h3{transition:color .3s}
.fof-fi .fi .fi-card:hover h2,.fof-fi .fi .fi-card:hover h3{color:var(--fi-green)}
.fi-card-txt p{color:var(--fi-ink-2);font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fof-fi .fi .fi-card .fi-link{justify-self:start;margin-top:6px}
.fof-fi .fi .fi-feature{grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:clamp(48px,6vw,88px)}
.fi-feature .fi-card-img img{aspect-ratio:16/10.5}
.fof-fi .fi .fi-feature h2{font-size:clamp(26px,2.6vw,38px);line-height:1.12}
.fi-feature .fi-card-txt p{font-size:16.5px;-webkit-line-clamp:4}
.fi-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.fof-fi .fi .fi-chips a{border:1px solid var(--fi-line);border-radius:2px;padding:10px 14px;font:500 11.5px/1 var(--fi-display);letter-spacing:.1em;text-transform:uppercase;color:var(--fi-ink-2);text-decoration:none}
.fof-fi .fi .fi-chips a[aria-current="true"]{background:var(--fi-ink);border-color:var(--fi-ink);color:var(--fi-paper)}
.fi-more{display:flex;justify-content:center;margin-top:clamp(40px,5vw,64px)}
.fof-fi .fi .fi-more .fi-btn{background:none;color:var(--fi-ink);border:1px solid var(--fi-ink)}
.fof-fi .fi .fi-more .fi-btn:hover{background:var(--fi-ink);color:var(--fi-paper)}
.fi-empty{color:var(--fi-ink-2)}

/* single article */
.fi-top .fi-wrap{display:grid;gap:22px;padding-block:clamp(40px,5vw,72px) clamp(28px,3vw,44px);max-width:calc(1040px + 2 * var(--fi-gutter))}
.fof-fi .fi .fi-top h1{font-size:clamp(34px,4.2vw,60px);line-height:1.06;max-width:22ch}
.fi-hero-img{margin:0 auto;max-width:1040px;border-radius:var(--fi-r);overflow:hidden}
.fi-hero-img img{width:100%;aspect-ratio:16/8.4;object-fit:cover}
.fi-layout{display:grid;grid-template-columns:220px minmax(0,68ch);gap:clamp(32px,5vw,80px);justify-content:center;padding-block:clamp(44px,5vw,72px) clamp(56px,6vw,96px)}
.fi-toc{position:sticky;top:110px;align-self:start;display:grid;gap:14px}
.fi-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--fi-line-2)}
.fof-fi .fi .fi-toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:1px solid transparent;font-size:13.5px;line-height:1.4;color:var(--fi-ink-2);text-decoration:none}
.fof-fi .fi .fi-toc a:hover{color:var(--fi-ink)}
.fof-fi .fi .fi-toc a[aria-current="true"]{color:var(--fi-ink);border-left-color:var(--fi-ink);font-weight:500}
.fi-body{font-size:17.5px;line-height:1.75;color:var(--fi-ink);min-width:0}
.fi-body>*{margin:0}
.fi-body>*+*{margin-top:1.1em}
.fof-fi .fi .fi-body h2{font-size:clamp(25px,2.3vw,32px);line-height:1.15;margin-top:2em;scroll-margin-top:110px}
.fof-fi .fi .fi-body h2+h2{margin-top:.6em}
.fof-fi .fi .fi-body h3{font-size:20px;margin-top:1.7em}
.fof-fi .fi .fi-body h4{font-size:17px;margin-top:1.4em}
.fi-body ul,.fi-body ol{padding-left:1.2em}
.fi-body li+li{margin-top:.4em}
.fi-body li::marker{color:var(--fi-copper)}
.fof-fi .fi .fi-body a{color:var(--fi-green);text-underline-offset:3px}
.fi-body blockquote{margin:1.8em 0;padding:0;border:0;font:500 clamp(19px,1.7vw,23px)/1.4 var(--fi-display);letter-spacing:-.01em;color:var(--fi-green);font-style:normal}
.fi-body blockquote p{margin:0}
.fi-body blockquote::before{content:none}
.fi-callout{display:block;padding:18px 20px;border-radius:var(--fi-r);background:var(--fi-plaster);font-size:15px;line-height:1.6;color:var(--fi-ink-2)}
.fi-callout b{display:block;margin-bottom:6px;font:500 11.5px/1.3 var(--fi-display);letter-spacing:.12em;text-transform:uppercase;color:var(--fi-ink)}
.fi-disc{font-size:13.5px}
.fi-warn b{color:var(--fi-copper-d)}
.fi-stage{background:var(--fi-green-ink);color:#C9D6CF}
.fi-stage b,.fof-fi .fi .fi-stage a{color:#fff}
.fi-take{background:none;padding:22px 0 0;border-top:1px solid var(--fi-line);font-size:16px;color:var(--fi-ink)}
.fi-refs{font-size:13px;line-height:1.7;color:var(--fi-mute)}
.fi-pillar{margin-top:40px;padding-top:22px;border-top:1px solid var(--fi-line);font-size:15px;color:var(--fi-ink-2)}
.fof-fi .fi .fi-pillar a{color:var(--fi-green);text-underline-offset:3px}
.fi-range{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center;max-width:1040px;margin-inline:auto}
.fi-range-img{border-radius:var(--fi-r);overflow:hidden}
.fi-range-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fi-range-txt{display:grid;gap:16px;justify-items:start}
.fof-fi .fi .fi-range-txt h2{font-size:clamp(24px,2.4vw,34px);line-height:1.12;max-width:20ch}
.fi-range-txt p{color:var(--fi-ink-2);max-width:46ch}
.fi-range-cta{display:flex;gap:16px 28px;align-items:center;flex-wrap:wrap;margin-top:8px}

/* email sign-up */
.fi-news{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;scroll-margin-top:110px}
.fi-form{display:grid;gap:14px;max-width:520px}
.fi-field{display:grid;gap:8px;font:500 11.5px/1 var(--fi-display);letter-spacing:.12em;text-transform:uppercase;color:var(--fi-ink-2)}
.fof-fi .fi .fi-field input{font:400 16px/1.4 var(--fi-body);letter-spacing:0;text-transform:none;color:var(--fi-ink);background:var(--fi-paper);border:1px solid var(--fi-line);border-radius:var(--fi-r);padding:14px 16px;min-height:52px;width:100%;box-shadow:none}
.fi-consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:16px 18px;border-radius:var(--fi-r);background:var(--fi-paper);font-size:14px;line-height:1.55;color:var(--fi-ink-2);cursor:pointer}
.fi-consent input{width:18px;height:18px;accent-color:var(--fi-green);margin:2px 0 0}
.fi-fine{font-size:13px;line-height:1.55;color:var(--fi-mute)}
.fof-fi .fi .fi-fine a{color:var(--fi-ink-2)}
.fi-err{font-size:14px;color:#B53D1E}
.fof-fi .fi .fi-form .fi-btn{justify-self:start}
.fi-done{display:grid;gap:8px;padding:22px;border-radius:var(--fi-r);background:var(--fi-paper);max-width:520px}
.fi-done b{font:600 20px/1.2 var(--fi-display)}
.fi-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

@media (max-width:1000px){
  .fi-layout{grid-template-columns:minmax(0,1fr);max-width:72ch;margin-inline:auto}
  .fi-toc{display:none}
  .fof-fi .fi .fi-feature,.fi-range,.fi-news,.fi-split,.fi-two{grid-template-columns:minmax(0,1fr)}
  .fi-tg .fi-wrap{grid-template-columns:1fr}
}
@media (max-width:640px){
  .fi-body{font-size:16.5px}
  .fi-hero-img{border-radius:0}
  .fi-hero-img img{aspect-ratio:4/3}
  .fi-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .fi-card-img img{transition:none}
}