.food-site { color: #1e2a3a; font: 17px/1.65 Nunito, system-ui, sans-serif; }
.food-site *, .food-site *::before, .food-site *::after { box-sizing: border-box; }
.food-site [hidden] { display: none !important; }
.food-site h1, .food-site h2, .food-site h3 { font-family: Fredoka, sans-serif; font-weight: 500; line-height: 1.15; margin: 0; }
.food-site p { margin: 0 0 18px; }
.food-site ul, .food-site ol { margin-top: 0; }
.food-site a { text-underline-offset: 4px; }
.food-site .wrap { width: min(1200px, 100%); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.food-header { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 20px; }
.food-brand { display: inline-flex; align-items: center; gap: 12px; color: #1e2a3a; font: 600 22px/1.2 Fredoka, sans-serif; text-decoration: none; }
.food-header .nav, .food-footer .nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 30px; font-size: 16px; font-weight: 800; }
.food-header .nav a { padding-block: 10px; }
.food-header .nav [aria-current] { color: #c8402b; }
.eyebrow { display: block; margin-bottom: 16px !important; font-size: 13px; line-height: 1.4; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: #a83223; }
.bank-intro { padding-top: 36px; padding-bottom: 32px; }
.bank-intro h1, .about-guide h1 { font-size: clamp(42px, 5.4vw, 64px); line-height: 1.06; letter-spacing: -1.2px; }
.bank-deck { max-width: 750px; margin-top: 20px !important; margin-bottom: 0 !important; color: #49545d; font-size: 20px; line-height: 1.6; }
.bank-content { padding-bottom: 80px; }
.food-controls { display: grid; grid-template-columns: minmax(240px, 1.8fr) minmax(150px, 1fr) minmax(160px, 1fr) auto; align-items: end; gap: 16px; padding-block: 24px 30px; border-block: 1px solid #d5ddd8; }
.food-controls label { display: block; font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.search-input { position: relative; }
.search-input svg { position: absolute; left: 16px; top: 16px; color: #657267; pointer-events: none; }
.food-controls input, .food-controls select { font: 600 16px/1.4 Nunito, sans-serif; color: #1e2a3a; background: #fff; border: 1px solid #a8b6ad; border-radius: 10px; min-height: 56px; width: 100%; padding: 12px; }
.food-controls input { padding-left: 48px; }
.food-controls input::placeholder { color: #657067; opacity: 1; font-weight: 500; }
.clear-button { background: transparent; border: 0; color: #a83223; text-decoration: underline; text-underline-offset: 4px; font: 800 14px Nunito, sans-serif; padding: 16px 0; min-height: 56px; cursor: pointer; }
.result-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-block: 32px 22px; }
.result-heading h2 { font-size: 25px; }
.result-heading p { font-size: 15px; color: #55606e; margin: 0; }
.food-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; padding: 0; list-style: none; }
.food-card { display: block; height: 100%; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid #e1e6e1; text-decoration: none; color: #1e2a3a; }
.food-card-photo { aspect-ratio: 1; background: #faf8f2; overflow: hidden; }
.food-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.food-card-copy { position: relative; padding: 17px 36px 20px 18px; }
.food-card h3 { font-size: 22px; overflow-wrap: anywhere; }
.food-card-copy > span:not(.card-arrow) { display: block; color: #58635e; font-size: 13px; margin-top: 5px; }
.card-arrow { position: absolute; top: 15px; right: 15px; color: #a83223; font-size: 22px; }
.food-card:hover { border-color: #8b9e91; color: #a83223; }
.food-card:focus-visible { outline-offset: 4px; }
.filter-note, .notice { padding: 16px 20px; background: #fff4d6; border-radius: 10px; font-size: 15px; }
.empty-state { text-align: center; padding: 64px 20px; background: #fff; border-radius: 16px; }
.empty-state h3 { font-size: 30px; margin-bottom: 12px; }
.button { display: inline-flex; gap: 16px; justify-content: center; align-items: center; padding: 14px 23px; min-height: 50px; border: 0; border-radius: 10px; background: #1e2a3a; color: #fff; text-decoration: none; font: 800 16px/1.4 Nunito, sans-serif; cursor: pointer; }
.button:hover { color: #fff; background: #324556; }
.bank-guidance { margin-top: 64px; padding: 38px 40px; border-radius: 20px; background: #e5eee7; }
.bank-guidance h2 { font-size: 32px; margin-bottom: 18px; }
.bank-guidance p { max-width: 860px; }
.text-link { font-weight: 800; }
.food-footer { border-top: 1px solid #d5ddd8; margin-top: 30px; }
.footer-inner { padding-block: 38px; display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.food-footer p { color: #55606e; font-size: 15px; margin: 8px 0 0; }
.breadcrumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 20px; color: #55606e; font-size: 14px; }
.breadcrumbs a { color: #55606e; }
.food-hero { display: grid; grid-template-columns: 1fr 0.95fr; align-items: center; gap: 60px; padding-block: 40px 64px; }
.food-hero h1 { font-size: clamp(42px, 5.7vw, 68px); line-height: 1.02; letter-spacing: -1px; margin-bottom: 25px; overflow-wrap: anywhere; }
.food-hero h1 span { display: block; font-size: 0.66em; line-height: 1.25; margin-top: 9px; color: #58665c; }
.food-hero-copy > p:not(.also-known) { font-size: 19px; color: #46534c; }
.category-link { text-decoration: none; }
.also-known { color: #55606e; font-size: 14px; }
.food-facts { border-top: 1px solid #d5ddd8; padding-top: 20px; margin: 24px 0 0; display: grid; gap: 14px; }
.food-facts dt { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.7px; color: #55606e; }
.food-facts dd { margin: 2px 0 0; font-weight: 700; font-size: 16px; }
.hero-photo { margin: 0; min-width: 0; }
.hero-photo img { display: block; width: 100%; height: auto; border-radius: 24px; background: #faf8f2; }
.hero-photo figcaption { color: #637067; margin-top: 10px; font-size: 12px; text-align: center; }
.food-article-layout { display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 64px; border-top: 1px solid #d5ddd8; padding-top: 52px; }
.article-nav { position: sticky; top: 28px; align-self: start; display: flex; flex-direction: column; gap: 8px; }
.article-nav > span { font-size: 12px; letter-spacing: 1px; font-weight: 900; text-transform: uppercase; color: #55606e; margin-bottom: 10px; }
.article-nav a { color: #425047; text-decoration: none; font-weight: 700; font-size: 15px; padding-block: 5px; }
.article-nav a:hover { color: #a83223; text-decoration: underline; }
.food-article { min-width: 0; }
.food-article > section { margin-bottom: 48px; }
.food-article h2 { font-size: clamp(28px, 3vw, 36px); margin-bottom: 20px; }
.food-article p { max-width: 76ch; }
.food-article .quiet { color: #5a665f; font-size: 15px; }
.prep-list { margin-top: 24px; border-top: 1px solid #d5ddd8; }
.prep-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-block: 26px; border-bottom: 1px solid #d5ddd8; }
.step-number { display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 36px; height: 36px; background: #e0ece3; color: #2d6b45; font: 500 20px Fredoka, sans-serif; }
.prep-step h3 { font-size: 24px; margin-bottom: 4px; }
.prep-step .stage-skill { color: #5b6860; font-size: 14px; margin-bottom: 12px; }
.prep-step p:last-child { margin-bottom: 0; }
.safety-section { background: #fff4d6; border-radius: 18px; padding: 30px; }
.safety-section ul { padding-left: 20px; }
.safety-section li { padding-left: 5px; margin-bottom: 12px; }
.safety-section p:last-child { margin-bottom: 0; font-size: 15px; }
.food-faq details { border-top: 1px solid #d5ddd8; padding-block: 18px; }
.food-faq details:last-child { border-bottom: 1px solid #d5ddd8; }
.food-faq summary { font-weight: 800; padding-right: 10px; cursor: pointer; }
.food-faq details p { margin: 14px 0 0; }
.food-sources ol { padding-left: 23px; }
.food-sources li { padding-left: 5px; margin-bottom: 20px; font-size: 15px; }
.food-sources li a { font-weight: 800; overflow-wrap: anywhere; }
.food-sources li span { display: block; color: #59645e; font-size: 13px; margin-top: 2px; }
.food-sources li p { margin-top: 5px; color: #59645e; font-size: 14px; }
.related-foods { padding-block: 42px 28px; border-top: 1px solid #d5ddd8; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-heading h2 { font-size: 38px; }
.section-heading .eyebrow { margin-bottom: 10px !important; }
.related-foods > p { color: #55606e; font-size: 15px; }
.related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-note { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 36px 40px; background: #e5eee7; border-radius: 20px; margin-block: 28px 65px; }
.app-note h2 { font-size: 28px; margin-bottom: 10px; }
.app-note p { font-size: 16px; max-width: 560px; margin: 0; }
.app-note .button { flex-shrink: 0; }
.about-guide { padding-bottom: 80px; }
.about-guide > .eyebrow { margin-top: 48px; }
.about-copy { max-width: 760px; margin-top: 36px; }
.about-copy .lead { font-size: 21px; }
.about-copy h2 { font-size: 30px; margin: 36px 0 16px; }
@media (max-width: 1050px) {
  .food-controls { grid-template-columns: 1.5fr 1fr 1fr; }
  .clear-button { grid-column: 1 / -1; justify-self: start; min-height: 0; padding: 0; }
  .food-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .food-hero { gap: 32px; }
  .food-article-layout { gap: 32px; grid-template-columns: 180px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .food-header { gap: 16px; }
  .food-header .nav { width: 100%; justify-content: space-between; font-size: 15px; gap: 12px; }
  .food-header .nav a { padding-block: 3px; }
  .bank-intro { padding-top: 30px; padding-bottom: 30px; }
  .bank-deck { font-size: 18px; }
  .food-controls { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .search-field { grid-column: 1 / -1; }
  .food-controls select { font-size: 15px; }
  .result-heading p { display: none; }
  .food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .food-card-copy { padding: 14px 29px 16px 12px; }
  .food-card h3 { font-size: 20px; }
  .food-card-copy > span:not(.card-arrow) { font-size: 12px; }
  .card-arrow { right: 10px; top: 10px; font-size: 19px; }
  .bank-guidance { padding: 28px 24px; margin-top: 40px; }
  .bank-guidance h2 { font-size: 28px; }
  .food-hero { grid-template-columns: 1fr; padding-block: 32px 40px; gap: 28px; }
  .hero-photo { max-width: 460px; width: 100%; }
  .food-hero h1 { font-size: 50px; }
  .food-article-layout { grid-template-columns: 1fr; padding-top: 28px; gap: 32px; }
  .article-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 18px; border-bottom: 1px solid #d5ddd8; padding-bottom: 24px; }
  .article-nav > span { width: 100%; margin-bottom: 2px; }
  .article-nav a { font-size: 14px; }
  .safety-section { padding: 24px; }
  .section-heading { align-items: start; flex-direction: column; }
  .section-heading h2 { font-size: 32px; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .related-grid .food-card-copy { padding: 12px 10px; }
  .related-grid .food-card h3 { font-size: 18px; }
  .related-grid .card-arrow, .related-grid .food-card-copy > span:not(.card-arrow) { display: none; }
  .app-note { padding: 28px 24px; flex-direction: column; align-items: start; }
  .footer-inner { padding-block: 30px; }
  .food-footer .nav { gap: 14px 20px; font-size: 14px; }
}
@media (prefers-reduced-motion: no-preference) { .food-card { transition: border-color 150ms ease; } }
@media print {
  .food-header, .food-footer, .article-nav, .related-foods, .app-note, .skip { display: none; }
  .food-site { background: #fff; font-size: 11pt; }
  .food-article-layout { display: block; }
  .food-hero { grid-template-columns: 1.5fr 1fr; padding-block: 20px; }
  .food-hero h1 { font-size: 32pt; }
  .food-article h2 { font-size: 20pt; }
  .food-article section, .prep-step { break-inside: avoid; }
}