:root { --ink:#27322b; --muted:#6f776f; --cream:#fffaf0; --paper:#f8f2e5; --line:#e5ddce; --green:#476f55; --green-pale:#e4eee3; --orange:#df704b; --orange-dark:#c75d3c; --yellow:#f7c65f; --shadow:0 18px 46px rgba(62,48,29,.09); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; } button,input,select { font:inherit; } button { cursor:pointer; }
.site-header { min-height:76px; padding:0 7.5vw; display:flex; align-items:center; justify-content:space-between; gap:25px; border-bottom:1px solid rgba(229,221,206,.75); background:rgba(255,250,240,.82); }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:800; letter-spacing:-.8px; text-decoration:none; }.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#fffdf8; background:var(--green); font-family:Fraunces,serif; font-size:18px; }.primary-nav { display:flex; align-items:center; gap:24px; }.primary-nav a { padding:8px 0; color:var(--muted); font-size:12px; font-weight:700; text-decoration:none; transition:color .15s ease; }.primary-nav a:hover,.primary-nav a.active { color:var(--green); }.nav-toggle { display:none; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
main,footer { width:min(1120px,85vw); margin:0 auto; }.hero { min-height:418px; padding:80px 5% 60px 0; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:45px; }.eyebrow { margin:0 0 13px; color:var(--green); font-family:"DM Mono",monospace; font-size:10px; font-weight:500; letter-spacing:1.25px; }.hero h1,.calculator h2,.policy-hero h1 { margin:0; font-family:Fraunces,Georgia,serif; font-weight:700; letter-spacing:-2.8px; line-height:1.02; }.hero h1 { font-size:clamp(43px,5.5vw,69px); }.hero h1 em { color:var(--orange); font-style:normal; }.hero p:last-of-type { max-width:480px; margin:20px 0; color:var(--muted); font-size:15px; line-height:1.75; }.hero-link { display:inline-flex; align-items:center; gap:9px; margin-top:5px; color:var(--green); font-size:12px; font-weight:800; text-decoration:none; }.hero-link span { display:grid; place-items:center; width:23px; height:23px; border:1px solid #aac1af; border-radius:50%; font-size:14px; }.hero-art { position:relative; width:min(310px,100%); height:230px; justify-self:end; border-radius:150px 150px 20px 20px; background:#dfebe0; overflow:hidden; }.plate { position:absolute; display:block; border-radius:50%; background:#fffaf0; box-shadow:inset 0 0 0 13px #f1d5a8; }.plate-one { width:187px; height:187px; bottom:-54px; left:26px; }.plate-two { width:118px; height:118px; right:-34px; top:26px; box-shadow:inset 0 0 0 10px #f7c65f; }.leaf { position:absolute; color:var(--green); font-size:30px; }.leaf-one { top:34px; left:41px; transform:rotate(-25deg); }.leaf-two { right:43px; bottom:48px; color:var(--orange); transform:rotate(25deg); }.art-label { position:absolute; z-index:2; right:28px; bottom:25px; padding:10px 13px; border-radius:8px; color:var(--ink); background:#fffaf0; box-shadow:0 7px 18px rgba(62,48,29,.12); }.art-label strong,.art-label span { display:block; }.art-label strong { font-family:Fraunces,Georgia,serif; font-size:16px; }.art-label span { margin-top:2px; color:var(--muted); font-size:9px; }
.calculator { margin-bottom:58px; }.calculator-heading { margin-bottom:18px; display:flex; align-items:end; justify-content:space-between; gap:25px; }.calculator-heading .eyebrow { margin-bottom:8px; }.calculator h2 { font-size:34px; }.calculator-heading > p { max-width:330px; margin:0 0 4px; color:var(--muted); font-size:12px; line-height:1.65; }.calculator-grid { display:grid; grid-template-columns:1.16fr .84fr; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fffdf8; box-shadow:var(--shadow); }.recipe-form { padding:25px; }.recipe-name-label { display:block; color:#59655d; font-size:11px; font-weight:800; }.recipe-name-label input { width:100%; margin-top:7px; padding:8px 0 12px; border:0; border-bottom:1px solid var(--line); outline:0; color:var(--ink); background:transparent; font-family:Fraunces,serif; font-size:22px; font-weight:600; }.serving-fields { max-width:414px; margin:25px 0 23px; display:grid; grid-template-columns:1fr 26px 1fr; align-items:end; gap:10px; }.serving-fields label { color:#647068; font-size:10px; font-weight:800; }.serving-fields input { width:100%; height:40px; margin-top:6px; padding:6px 9px; border:1px solid var(--line); border-radius:7px; outline-color:var(--green); color:var(--ink); background:#fffefa; font-size:13px; }.arrow { padding-bottom:11px; color:var(--orange); font-size:19px; text-align:center; }.ingredients-heading { margin-bottom:8px; padding:0 32px 0 4px; display:grid; grid-template-columns:1fr 160px; color:#829087; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.7px; }.ingredient-row { margin-bottom:8px; display:grid; grid-template-columns:70px 90px minmax(0,1fr) 26px; gap:7px; }.ingredient-row input,.ingredient-row select { min-width:0; height:37px; padding:7px 8px; border:1px solid #e3e7df; border-radius:6px; outline-color:var(--green); color:#47564d; background:#fffefa; font-size:11px; }.ingredient-row select { padding-right:3px; }.ingredient-row .ingredient-name { font-weight:600; }.remove-ingredient { width:26px; height:26px; align-self:center; border:0; border-radius:5px; color:#ad8b82; background:transparent; font-size:18px; }.remove-ingredient:hover { color:#bd4228; background:#fff0eb; }.add-ingredient { margin:6px 0 21px; padding:4px 2px; border:0; color:var(--green); background:transparent; font-size:11px; font-weight:800; }.add-ingredient span { margin-right:4px; font-size:17px; vertical-align:-1px; }.form-actions { padding-top:16px; display:flex; justify-content:space-between; border-top:1px solid #edf0e9; }.reset-button,.scale-button,.copy-button { min-height:36px; padding:7px 12px; border-radius:7px; font-size:11px; font-weight:800; }.reset-button,.copy-button { border:1px solid var(--line); color:#68756c; background:#fffefa; }.reset-button:hover,.copy-button:hover { border-color:#b7c6ba; background:#f7f9f3; }.scale-button { border:1px solid var(--orange); color:#fff; background:var(--orange); }.scale-button:hover { border-color:var(--orange-dark); background:var(--orange-dark); }.scale-button span { margin-left:7px; font-size:16px; vertical-align:-1px; }
.result-panel { min-width:0; padding:25px; display:flex; flex-direction:column; color:#fefcf7; background:var(--green); }.result-top { display:flex; align-items:start; justify-content:space-between; gap:12px; }.result-panel .eyebrow { color:#c4deca; }.copy-button { min-height:29px; padding:5px 8px; color:#e7f2e8; border-color:rgba(230,242,232,.35); background:transparent; font-size:9px; }.copy-button:hover { color:var(--green); border-color:#fffefa; background:#fffefa; }.result-panel h3 { margin:23px 0 8px; font-family:Fraunces,Georgia,serif; font-size:27px; font-weight:600; line-height:1.1; }.result-serving { color:#cee0d1; font-size:11px; }.result-serving i { width:3px; height:3px; margin:0 7px; display:inline-block; border-radius:50%; vertical-align:middle; background:#bdd3c2; }.result-serving strong { color:#fffefa; }.scaled-list { margin:27px 0 18px; padding:0; list-style:none; }.scaled-list li { padding:11px 0; display:grid; grid-template-columns:110px 1fr; gap:9px; border-bottom:1px solid rgba(255,255,255,.16); font-size:12px; }.scaled-list li span { color:#cde0d0; font-family:"DM Mono",monospace; font-size:10px; }.scaled-list li strong { min-width:0; font-weight:700; }.scaled-list .empty-result { display:block; color:#d6e4d8; font-size:11px; }.result-footer { margin-top:auto; padding-top:15px; display:flex; align-items:center; justify-content:space-between; gap:15px; color:#cde0d0; font-size:9px; }.result-footer button { border:0; color:#fffefa; background:transparent; font-size:10px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }.how-it-works { margin:0 0 80px; padding:24px 7%; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; border-radius:12px; background:#efe5d3; }.how-it-works div { position:relative; padding-left:32px; }.step-number { position:absolute; top:1px; left:0; color:var(--orange); font-family:Fraunces,serif; font-size:18px; }.how-it-works strong { display:block; color:var(--ink); font-size:12px; }.how-it-works p { margin:5px 0 0; color:var(--muted); font-size:10px; line-height:1.55; }
footer { padding:25px 0 31px; display:flex; align-items:flex-start; justify-content:space-between; gap:25px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }.footer-brand { display:flex; flex-direction:column; gap:4px; }.footer-brand strong { color:var(--ink); font-size:12px; }.footer-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 17px; }.footer-nav a { color:var(--muted); font-size:11px; text-decoration:none; }.footer-nav a:hover { color:var(--green); }.toast { position:fixed; z-index:20; right:22px; bottom:22px; padding:11px 15px; transform:translateY(20px); opacity:0; border-radius:8px; color:#fff; background:var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.18); font-size:12px; transition:.18s ease; pointer-events:none; }.toast.show { transform:translateY(0); opacity:1; }
/* Policy pages */.policy-page main { width:min(820px,85vw); }.policy-hero { padding:76px 0 35px; border-bottom:1px solid var(--line); }.policy-hero h1 { font-size:clamp(39px,5vw,59px); }.policy-hero p:last-child { max-width:610px; margin:18px 0 0; color:var(--muted); font-size:15px; line-height:1.7; }.policy-content { padding:39px 0 83px; }.policy-content h2 { margin:38px 0 12px; font-family:Fraunces,Georgia,serif; font-size:24px; }.policy-content h2:first-child { margin-top:0; }.policy-content p { margin:0 0 14px; color:#536158; font-size:14px; line-height:1.8; }.policy-content a { color:var(--green); font-weight:700; text-underline-offset:3px; }.policy-callout { margin:25px 0; padding:18px 19px; border-left:3px solid var(--orange); border-radius:0 9px 9px 0; background:#fff0e9; color:#705548; font-size:13px; line-height:1.65; }.contact-card { max-width:620px; padding:26px; border:1px solid var(--line); border-radius:14px; background:#fffdf8; box-shadow:var(--shadow); }.contact-card h2 { margin-top:0; }.contact-email { display:inline-flex; align-items:center; gap:9px; margin-top:7px; padding:10px 12px; border-radius:8px; color:var(--green); background:var(--green-pale); font-family:"DM Mono",monospace; font-size:12px; font-weight:500; text-decoration:none; }
@media print { .site-header,.hero,.recipe-form,.how-it-works,footer,.copy-button,.result-footer button { display:none !important; } body { background:#fff; }.calculator { margin:0; }.calculator-heading { display:none; }.calculator-grid { display:block; border:0; box-shadow:none; }.result-panel { min-height:auto; color:#111; background:#fff; }.result-panel .eyebrow,.result-serving,.scaled-list li span,.result-footer { color:#444; }.scaled-list li { border-color:#ddd; } }
@media (max-width:800px) { .hero { grid-template-columns:1fr .7fr; }.calculator-grid { grid-template-columns:1fr; }.result-panel { min-height:390px; }.hero-art { width:230px; height:185px; }.plate-one { width:150px; height:150px; }.plate-two { width:90px; height:90px; }.how-it-works { padding:23px 5%; gap:19px; } }
@media (max-width:640px) { .site-header { position:relative; min-height:65px; padding:0 6vw; }.nav-toggle { width:38px; height:34px; padding:7px; display:flex; flex-direction:column; justify-content:center; gap:4px; border:1px solid var(--line); border-radius:7px; background:#fffdf8; }.nav-toggle span:not(.sr-only) { height:1.5px; border-radius:2px; background:var(--ink); }.primary-nav { position:absolute; z-index:10; top:calc(100% - 1px); right:0; left:0; padding:9px 6vw 13px; display:none; flex-direction:column; align-items:stretch; gap:0; border-bottom:1px solid var(--line); background:var(--cream); box-shadow:0 12px 20px rgba(62,48,29,.06); }.primary-nav.open { display:flex; }.primary-nav a { padding:11px 0; } main,footer { width:min(100% - 32px,560px); }.hero { min-height:0; padding:53px 0 35px; grid-template-columns:1fr; }.hero h1 { font-size:48px; }.hero-art { display:none; }.calculator-heading { display:block; }.calculator-heading > p { margin-top:13px; }.calculator h2 { font-size:30px; }.recipe-form,.result-panel { padding:17px; }.ingredients-heading { grid-template-columns:1fr 145px; }.ingredient-row { grid-template-columns:61px 77px minmax(0,1fr) 24px; gap:5px; }.ingredient-row input,.ingredient-row select { padding:6px 5px; font-size:10px; }.form-actions { gap:12px; }.result-panel { min-height:350px; }.how-it-works { margin-bottom:57px; grid-template-columns:1fr; gap:19px; }.how-it-works div { padding-left:34px; } footer { flex-direction:column; gap:17px; }.footer-nav { justify-content:flex-start; }.policy-page main { width:min(100% - 32px,560px); }.policy-hero { padding:51px 0 27px; }.policy-content { padding:32px 0 62px; } }