:root{color-scheme:light;--bg:#fffefa;--surface:#fff;--subtle:#f5f6f1;--deep:#102b24;--green:#134935;--green2:#21654a;--orange:#f47723;--amber:#f9e3b1;--text:#172820;--muted:#62746b;--border:#e5e9df;--shadow:0 15px 40px #15291e12;--radius:17px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-size:16px;line-height:1.58}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%}.container{width:min(1190px,calc(100% - 40px));margin-inline:auto}.skip,.sr{position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;overflow:hidden}.skip:focus{clip:auto;width:auto;height:auto;z-index:1000;background:var(--surface);padding:12px}.site-header{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 4px 14px #12261a0b}.nav{display:flex;align-items:center;gap:26px;min-height:79px}.logo{white-space:nowrap;display:inline-flex;align-items:center;gap:9px;font-size:1.24rem;font-weight:840;letter-spacing:-.06em;color:var(--deep)}.logo-icon{font-size:25px;color:#fff;background:var(--green);border-radius:12px;padding:1px 9px;line-height:39px;letter-spacing:0}.logo-highlight{color:var(--orange)}.nav-links{margin-left:auto;display:flex;align-items:center;gap:28px}.nav-links a{font-weight:650;font-size:.89rem}.nav-links a:hover,.text-link:hover{color:var(--orange)}.nav-actions{display:flex;gap:8px}.icon-btn{height:38px;width:38px;display:inline-grid;place-items:center;background:var(--subtle);border:1px solid var(--border);border-radius:50%;font-size:22px}.mobile-nav{display:none}.eyebrow{color:var(--orange);font-weight:820;font-size:.73rem;letter-spacing:.13em}.hero{position:relative;background:linear-gradient(90deg,#fcf9f3 0%,#fcf9f3ee 27%,#fcf9f399 43%,transparent 60%),url('../images/hero.webp') center/cover no-repeat;min-height:568px;display:flex;align-items:center}.hero-content{padding-top:52px;padding-bottom:60px}.hero h1,.page-heading h1{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.045em;font-weight:750;line-height:1.08}.hero h1{font-size:clamp(2.9rem,5.3vw,5.4rem);max-width:670px;margin:17px 0}.hero p{font-size:1.06rem;line-height:1.78;max-width:425px;margin:0 0 28px}.search-bar{max-width:505px;display:flex;align-items:center;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:80px;box-shadow:var(--shadow)}.search-bar input{flex:1;min-width:50px;border:0;outline:0;padding:13px 17px;color:var(--text);background:transparent;font-size:.96rem}.search-bar button{width:47px;height:47px;border:0;border-radius:50%;background:var(--orange);color:white;font-size:28px;line-height:1}.quicknav{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding-top:34px;padding-bottom:34px}.quicknav a{font-weight:720;text-align:center;font-size:.82rem;line-height:1.48}.quicknav span{width:64px;height:64px;margin:0 auto 11px;border-radius:50%;display:grid;place-items:center;background:#e7f3e5;color:#236a4f;font-size:30px}.quicknav a:nth-child(2) span,.quicknav a:nth-child(5) span{background:#fff0d2;color:#ea8a00}.quicknav a:nth-child(4) span{background:#e4edf7;color:#277d97}.quicknav a:hover span{transform:translateY(-4px);transition:transform .2s}.section{padding-block:46px 56px}.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:23px}.section-title h2,.benefits h2{margin:5px 0 0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.16;letter-spacing:-.035em}.section-title.compact{margin-top:28px}.section-title.compact h2{font-size:1.7rem}.text-link{font-size:.89rem;color:var(--orange);font-weight:750;white-space:nowrap}.recipe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px}.recipe-card{overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 20px #10291f08}.card-image{height:190px;display:grid;place-items:center;background:linear-gradient(135deg,#e7f1e3,#faf3e3);color:var(--muted);font-size:.87rem}.card-image img{width:100%;height:100%;object-fit:cover}.card-content{padding:17px 19px 22px}.card-kicker{color:var(--orange);font-size:.7rem;text-transform:uppercase;font-weight:850;letter-spacing:.12em}.card-content h3{font-family:Georgia,serif;font-size:1.28rem;line-height:1.24;margin:7px 0}.card-meta{color:var(--muted);font-size:.85rem}.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.category-tile{position:relative;min-height:158px;display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:transform .15s,border-color .15s}.category-tile:hover,.brand-card:hover,.tool-card:hover{transform:translateY(-4px);border-color:var(--green2)}.category-emoji{font-size:32px;margin-bottom:4px}.category-tile strong{font-size:.99rem;line-height:1.1}.category-tile>span:nth-last-child(2){font-size:.82rem;color:var(--muted)}.tile-arrow{position:absolute;right:17px;bottom:15px;color:var(--orange);font-size:20px}.benefits{padding:45px 0 54px;background:var(--subtle);text-align:center}.benefits h2{margin-bottom:25px}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.benefit-grid article>span{width:59px;height:59px;border-radius:50%;margin:auto;display:grid;place-items:center;background:#dceadc;color:#14603e;font-size:29px}.benefit-grid h3{font-size:1rem;margin-bottom:5px}.benefit-grid p{font-size:.86rem;margin:0 auto;max-width:215px;color:var(--muted)}.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.tool-card,.brand-card{border:1px solid var(--border);border-radius:var(--radius);padding:26px;background:var(--surface);transition:transform .15s,border-color .15s;display:block}.tool-card>span,.brand-card>span{font-size:36px;color:var(--green2)}.tool-card h3,.tool-card h2{font-family:Georgia,serif;font-size:1.33rem;margin:12px 0 5px;line-height:1.25}.tool-card p{color:var(--muted);font-size:.91rem;min-height:54px}.tool-card b,.brand-card small{color:var(--orange);font-size:.89rem}.footer-feature{background:linear-gradient(90deg,#081912e9 0%,#081912dd 38%,#08191212 75%),url('../images/footer.webp') center/cover no-repeat;color:#fff}.footer-feature-inner{padding-block:64px 79px}.footer-feature h2{font:700 clamp(1.8rem,3.6vw,3rem)/1.11 Georgia,serif;max-width:580px;margin:10px 0 13px;letter-spacing:-.035em}.footer-feature p{color:#d6e1d6;max-width:450px}.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;border-radius:50px;font-weight:750;padding:13px 22px;border:1px solid transparent;transition:filter .15s}.btn:hover{filter:brightness(.94)}.btn-cream{background:#f8efe0;color:#193d2a}.btn-green{background:var(--green);color:white}.btn-orange{background:var(--orange);color:white}.btn-outline{background:var(--surface);color:var(--text);border-color:var(--border)}.btn-small{padding:8px 12px;font-size:.82rem}.site-footer{background:var(--subtle);padding:48px 0 0}.footer-cols{display:grid;grid-template-columns:2.1fr repeat(3,1fr);gap:40px}.footer-cols>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.footer-cols p{color:var(--muted);max-width:320px;font-size:.85rem}.footer-cols h3{font-size:.9rem;margin:0 0 7px}.footer-cols a:not(.logo),.footer-link{font-size:.82rem;color:var(--muted)}.footer-cols a:hover{color:var(--orange)}.footer-link{border:0;padding:0;background:none;text-align:left}.footer-bottom{border-top:1px solid var(--border);margin-top:37px;display:flex;justify-content:space-between;gap:20px;padding-block:18px;color:var(--muted);font-size:.8rem}.page-heading{padding-top:64px;padding-bottom:28px}.page-heading h1{font-size:clamp(2.4rem,5vw,4.3rem);margin:10px 0 13px}.page-heading p{font-size:1.08rem;color:var(--muted);max-width:760px}.breadcrumbs{font-size:.82rem;color:var(--muted);margin-bottom:30px;display:flex;flex-wrap:wrap;gap:11px}.breadcrumbs a:hover{color:var(--orange)}.notice{background:var(--subtle);border:1px solid var(--border);border-left:4px solid var(--green2);border-radius:14px;padding:20px 24px;margin-block:18px}.notice p{margin:4px 0 0;color:var(--muted)}.muted{font-size:.88rem;color:var(--muted)}.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.brand-card h2{margin:10px 0}.filters,.inline-form{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin-bottom:20px}.filters label,.inline-form label{display:flex;flex-direction:column;gap:7px;font-weight:650;font-size:.86rem}.filters input,.filters select,.inline-form input,.interactive input,.recipe-box input{padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);max-width:100%}.filters input{min-width:190px}.inline-form input{min-width:min(420px,100%)}.filters .btn,.inline-form .btn{height:48px}.interactive{background:var(--surface);border:1px solid var(--border);padding:28px;border-radius:var(--radius)}.shopping-items{padding:0;list-style:none;max-width:750px}.shopping-items li{display:flex;align-items:center;gap:12px;padding:10px;border-bottom:1px solid var(--border)}.shopping-items .checked{text-decoration:line-through;color:var(--muted)}.shopping-items button{margin-left:auto;background:transparent;border:0;color:var(--orange);font-size:21px}.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;background:var(--surface)}th,td{border-bottom:1px solid var(--border);padding:15px;text-align:left;vertical-align:top}th{background:var(--subtle);font-size:.86rem}td{font-size:.9rem}.recipe-detail{padding-top:60px;padding-bottom:70px}.recipe-detail>h1{font:700 clamp(2.5rem,5vw,4rem)/1.13 Georgia,serif;max-width:800px;margin:9px 0}.lede{font-size:1.1rem;color:var(--muted);max-width:730px}.recipe-main-image{border-radius:var(--radius);width:100%;max-height:520px;object-fit:cover;margin-block:26px}.recipe-two{display:grid;grid-template-columns:1fr 1.55fr;gap:22px;margin-top:30px}.recipe-box{padding:30px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.recipe-box h2{font:700 1.8rem Georgia,serif}.recipe-box label{display:flex;gap:10px;align-items:center}.recipe-box input{width:95px}.step-list li{padding:10px 0 10px 6px}.ingredient-list{padding-left:20px}.ingredient-list li{padding:7px 0}.consent{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:50;width:min(840px,calc(100% - 28px));background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:0 10px 50px #0005;display:flex;align-items:center;gap:20px}.consent[hidden]{display:none}.consent p{margin:0;font-size:.89rem}.consent>div{display:flex;gap:8px;flex-shrink:0}*:focus-visible{outline:3px solid #f59641;outline-offset:3px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg:#0f1815;--surface:#17221d;--subtle:#1c2923;--deep:#e6f4e9;--green:#2b6148;--green2:#72c49b;--text:#eff7f0;--muted:#bbcbc1;--border:#33453b;--shadow:0 15px 40px #0005}.hero{background:linear-gradient(90deg,#111a15 0%,#111a15ed 27%,#111a15ad 43%,transparent 64%),url('../images/hero.webp') center/cover no-repeat}.logo-icon{background:#23563e}.quicknav span{background:#284d39}.footer-feature{background-image:linear-gradient(90deg,#06130bee 0%,#06130bdd 35%,#06130b22 80%),url('../images/footer.webp')}}
:root[data-theme=dark]{color-scheme:dark;--bg:#0f1815;--surface:#17221d;--subtle:#1c2923;--deep:#e6f4e9;--green:#2b6148;--green2:#72c49b;--text:#eff7f0;--muted:#bbcbc1;--border:#33453b;--shadow:0 15px 40px #0005}
:root[data-theme=dark] .hero{background:linear-gradient(90deg,#111a15 0%,#111a15ed 27%,#111a15ad 43%,transparent 64%),url('../images/hero.webp') center/cover no-repeat}
:root[data-theme=light]{color-scheme:light;--bg:#fffefa;--surface:#fff;--subtle:#f5f6f1;--deep:#102b24;--green:#134935;--green2:#21654a;--text:#172820;--muted:#62746b;--border:#e5e9df;--shadow:0 15px 40px #15291e12}
:root[data-theme=light] .hero{background:linear-gradient(90deg,#fcf9f3 0%,#fcf9f3ee 27%,#fcf9f399 43%,transparent 60%),url('../images/hero.webp') center/cover no-repeat}
@media(max-width:900px){.nav{gap:14px}.nav-links{gap:13px}.nav-links a{font-size:.79rem}.logo{font-size:1rem}.hero{min-height:480px}.hero h1{font-size:3.4rem}.recipe-grid,.brand-grid,.tool-grid{grid-template-columns:repeat(2,1fr)}.category-grid{grid-template-columns:repeat(3,1fr)}.footer-cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.container{width:min(100% - 30px,1190px)}.nav{min-height:68px}.mobile-nav{display:inline-grid}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch;padding:15px 22px;gap:4px}.nav-links.open{display:flex}.nav-links a{padding:10px 8px;font-size:1rem}.logo{font-size:1rem}.logo-icon{font-size:19px;line-height:29px;padding:3px 7px}.hero{min-height:590px;align-items:start;background:linear-gradient(180deg,#fbf8f3 0%,#fbf8f3f5 42%,#fbf8f323 90%),url('../images/hero.webp') 68% bottom/auto 64% no-repeat}.hero-content{padding-top:43px}.hero h1{font-size:2.85rem;margin:12px 0}.hero p{font-size:.96rem;line-height:1.52;max-width:350px}.quicknav{grid-template-columns:repeat(5,1fr);gap:6px}.quicknav span{width:44px;height:44px;font-size:23px}.quicknav a{font-size:.65rem}.section{padding-block:31px}.section-title{align-items:start}.section-title h2{font-size:1.75rem}.section-title .text-link{font-size:.77rem}.recipe-grid,.tool-grid,.brand-grid{grid-template-columns:1fr}.category-grid{grid-template-columns:repeat(2,1fr);gap:10px}.category-tile{min-height:158px;padding:16px}.category-tile strong{font-size:.91rem}.benefit-grid{grid-template-columns:repeat(2,1fr)}.footer-cols{gap:26px}.footer-feature-inner{padding-block:46px}.footer-feature{background-position:61% center}.footer-bottom{flex-direction:column;gap:6px}.page-heading{padding-top:42px}.page-heading h1{font-size:2.45rem}.recipe-two{grid-template-columns:1fr}.consent{display:block}.consent>div{margin-top:14px}.filters label,.filters input,.filters select,.inline-form input{width:100%}.filters{align-items:stretch;flex-direction:column}.interactive{padding:18px}}
@media(max-width:400px){.logo{font-size:.86rem}.quicknav a{font-size:.58rem}.quicknav span{width:40px;height:40px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:0s!important;transition:none!important}}@media print{.site-header,.footer-feature,.site-footer,.button-row,.footer-cols{display:none!important}.container{width:100%}.shopping-items li button{display:none}}
.admin-ui{min-height:60vh}.admin-ui h1{font:700 2.3rem Georgia,serif}.admin-ui h2{font:700 1.65rem Georgia,serif;margin-top:32px}.admin-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:20px}.admin-nav a:not(.logo){font-size:.9rem}.admin-nav>span{margin-left:auto}.admin-form{max-width:850px;display:grid;gap:14px;background:var(--surface);padding:24px;border:1px solid var(--border);border-radius:16px;margin-block:20px}.admin-form label{display:flex;flex-direction:column;font-weight:600;font-size:.88rem}.admin-form textarea,.admin-form input{width:100%;padding:11px 13px;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:10px}.admin-form button{justify-self:start}.admin-actions{display:flex;gap:12px;flex-wrap:wrap}.admin-ui code{padding:4px;background:var(--subtle);border-radius:5px}

/* ========================================================
   MOBILE UX, HORIZONTAL SCROLL & ACCESSIBILITY ENHANCEMENTS
   ======================================================== */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Touch targets min 44x44px (WCAG 2.5.5 / 2.5.8) */
.icon-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Table scroll wrapper with smooth iOS momentum scrolling */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-block: 18px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(0,0,0,0.03);
}

.table-wrap table {
  min-width: 680px;
  width: 100%;
}

.table-wrap th, .table-wrap td {
  padding: 14px 16px;
  white-space: nowrap;
}

.table-wrap td:nth-child(2) {
  white-space: normal;
  min-width: 180px;
}

/* Typography safety: no long-word overflow on small viewports */
h1, h2, h3, .hero h1, .page-heading h1 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Mobile viewport adjustments <= 650px */
@media (max-width: 650px) {
  /* Prevent iOS Safari automatic input zoom */
  input, select, textarea {
    font-size: 16px !important;
  }

  .nav-actions {
    gap: 8px;
  }

  /* Accessible, sliding hamburger drawer */
  .nav-links {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 2px solid var(--border);
    box-shadow: 0 16px 36px rgba(0,0,0,0.18);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px;
    gap: 6px;
    z-index: 999;
    animation: rafMenuSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 13px 16px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 12px;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .nav-links a:active, .nav-links a:hover {
    background: var(--subtle);
    color: var(--orange);
  }

  body.nav-open {
    overflow: hidden;
  }

  /* Recipe detail mobile image */
  .recipe-main-image {
    max-height: 280px;
    aspect-ratio: 16/10;
    margin-block: 18px;
  }

  .recipe-box {
    padding: 20px 18px;
  }

  .recipe-two {
    gap: 24px;
  }
}

@keyframes rafMenuSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Quicknav mobile swipeable chip container for screens <= 520px */
@media (max-width: 520px) {
  .quicknav {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 22px 6px 14px;
    scrollbar-width: none;
  }
  .quicknav::-webkit-scrollbar {
    display: none;
  }
  .quicknav a {
    flex: 0 0 76px;
    scroll-snap-align: start;
    font-size: 0.72rem;
    line-height: 1.35;
  }
  .quicknav span {
    width: 48px;
    height: 48px;
    font-size: 24px;
    margin-bottom: 6px;
  }
}