/* The Vegan Way — one stylesheet for every page. Fonts are local (fonts/). */
@font-face{font-family:Fraunces;font-weight:700;font-display:swap;src:url(fonts/fraunces-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-weight:900;font-display:swap;src:url(fonts/fraunces-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2")}

:root{
  --green:#1f3d2b; --green-2:#2b5239; --cream:#f4ede0; --paper:#fbf7ef;
  --tomato:#e8553d; --turmeric:#f2b33d; --leaf:#8cc06b; --ink:#14261b; --soft:#5b6b60; --line:#e4dccd;
  --dark:#14261b; --card:#fff; --chip:#f4ede0; --link:#2b5239; --done:#f3f8ee;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif}
.mark{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:1.15rem;letter-spacing:-.01em;color:var(--cream);text-decoration:none}
.mark span{color:var(--leaf)}
nav a{color:var(--cream);opacity:.75;text-decoration:none;font-size:.95rem;margin-left:1.1rem}
nav a:hover{opacity:1}

/* ---------- front page: one screen, never scrolls */
body.front{background:var(--green);color:var(--cream);height:100svh;overflow:hidden}
.page{height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(16px,3vw,40px);
  background:radial-gradient(circle at 85% 15%,var(--green-2) 0,transparent 45%),var(--green)}
.top{display:flex;justify-content:space-between;align-items:center}
.hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:clamp(16px,4vw,64px)}
.hero h1{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:clamp(3rem,10vw,9rem);line-height:.88;letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--turmeric)}
.wink{margin-top:1.2rem;font-size:clamp(1rem,1.6vw,1.25rem);opacity:.85}
.post{position:relative;display:flex;flex-direction:column;gap:clamp(12px,2.2vh,22px);padding-left:28px}
.post::before{content:"";position:absolute;left:8px;top:-4vh;bottom:-12vh;width:12px;background:var(--chip);opacity:.9;border-radius:3px}
.board{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:var(--dark);
  padding:clamp(14px,2.4vh,22px) 56px clamp(14px,2.4vh,22px) 22px;
  clip-path:polygon(0 0,calc(100% - 34px) 0,100% 50%,calc(100% - 34px) 100%,0 100%);transition:transform .2s ease}
.board strong{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:clamp(1.5rem,3.2vw,2.6rem);letter-spacing:-.02em}
.board small{font-size:clamp(.8rem,1.1vw,.95rem);font-weight:600;opacity:.8;text-align:right}
.b1{background:var(--turmeric);transform:rotate(-2deg)}
.b2{background:var(--tomato);color:var(--cream);transform:rotate(1.5deg)}
.b3{background:var(--leaf);transform:rotate(-1deg)}
.b1:hover,.b1:focus-visible{transform:rotate(-2deg) translateX(10px)}
.b2:hover,.b2:focus-visible{transform:rotate(1.5deg) translateX(10px)}
.b3:hover,.b3:focus-visible{transform:rotate(-1deg) translateX(10px)}
.page footer{font-size:.85rem;opacity:.6}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;align-content:center;gap:28px}
  .hero h1{font-size:clamp(3rem,15vw,5rem)}
  .top nav{display:none}
  .board small{display:none}
  .post::before{top:0}
}

/* ---------- inner pages */
body.inner{background:var(--paper);color:var(--ink);font-size:1.1rem;line-height:1.55}
.bar{background:var(--green);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.bar nav{display:flex;flex-wrap:wrap;gap:4px 1rem}
.bar nav a{margin:0}
.bar nav a:last-child{margin-right:0}
main.read{max-width:680px;margin:0 auto;padding:28px 16px 80px}
main.wide{max-width:1040px;margin:0 auto;padding:28px 16px 80px}
main h1{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:clamp(2.2rem,7vw,3.4rem);line-height:1;letter-spacing:-.03em;margin:12px 0 10px}
.intro{color:var(--soft)}
.tag{display:inline-block;background:var(--turmeric);color:var(--dark);font-weight:600;font-size:.85rem;padding:4px 10px;border-radius:99px}
.dish{display:block;width:100%;border-radius:14px;margin-top:20px}
.facts{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 8px}
.facts div{background:var(--chip);border-radius:10px;padding:10px 14px}
.facts b{display:block;font-size:1.3rem}
.facts small{color:var(--soft)}
main h2{font-family:Fraunces,Georgia,serif;font-size:1.6rem;margin:34px 0 12px;padding-bottom:6px;border-bottom:3px solid var(--leaf)}
ul.plain{list-style:none}
ul.plain li{padding:8px 0;border-bottom:1px solid var(--line)}
ul.plain li{display:flex;gap:10px}
ul.plain li b{flex:none;min-width:5.5em}
ol.steps{list-style:none}
ol.steps li{counter-increment:s;display:flex;flex-wrap:wrap;gap:0 14px;padding:14px 14px 14px 62px;position:relative;margin-bottom:10px;
  background:var(--card);border:2px solid var(--line);border-radius:12px;cursor:pointer;user-select:none}
ol.steps li::before{content:counter(s);position:absolute;left:14px;top:12px;width:2em;height:2em;border-radius:50%;
  background:var(--green);color:var(--cream);display:grid;place-items:center;font-weight:600}
ol.steps li.done{opacity:.45;text-decoration:line-through}
ol.steps li.done::before{content:"✓";background:var(--leaf);color:var(--dark)}
.check{display:block;width:100%;margin-top:4px;font-size:.95rem;color:var(--soft)}
.hint{font-size:.9rem;color:var(--soft);margin-bottom:10px}
.note{background:var(--chip);border-left:5px solid var(--tomato);padding:12px 14px;border-radius:6px;margin-top:10px}
.back{margin-top:36px}
.back a{color:var(--link);font-weight:600}

/* ---------- recipe list + search */
#q{width:100%;font:inherit;font-size:1.15rem;padding:14px 16px;margin:22px 0 12px;border:2px solid var(--link);border-radius:12px;background:var(--card);color:var(--ink)}
#q:focus{outline:3px solid var(--turmeric);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chip{font:inherit;font-size:.9rem;font-weight:600;padding:6px 12px;border-radius:99px;border:2px solid var(--line);background:var(--chip);color:var(--ink);cursor:pointer}
.chip.on{background:var(--green);border-color:var(--link);color:var(--cream)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.rcard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .15s}
.rcard:hover,.rcard:focus-visible{transform:translateY(-3px);border-color:var(--leaf)}
.rcard[hidden]{display:none}
.rcard img,.rcard .noimg{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.rcard .noimg{background:linear-gradient(135deg,var(--turmeric),var(--tomato))}
.rt{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:1.3rem;line-height:1.15;padding:12px 14px 2px}
.rm{font-size:.9rem;color:var(--soft);padding:0 14px 14px}
#none{margin-top:12px;color:var(--soft)}

/* ---------- front page pick link */
.pick{display:inline-block;margin-top:1.6rem;color:var(--cream);text-decoration:none;font-size:clamp(1rem,1.5vw,1.2rem);
  border-bottom:2px solid var(--turmeric);padding-bottom:2px}
.pick b{color:var(--turmeric)}
.pick:hover b{text-decoration:underline}

/* ---------- shared bits */
a{color:var(--link)}
.small{font-size:.85rem}
.tag.g{background:var(--leaf);color:var(--dark);text-decoration:none;text-transform:capitalize;margin-left:4px}
.labels{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:20px 0}
.labels div{background:var(--chip);border-radius:10px;padding:8px 12px}
.labels small{display:block;color:var(--soft);font-size:.8rem}
.labels b{font-size:1.05rem}
.first{background:var(--green);color:var(--cream);border-radius:12px;padding:14px 16px;margin:14px 0;font-size:1.15rem;font-weight:600}
.first span{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--turmeric);margin-bottom:2px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.big,.ghost,.cm button,.energy button{font:inherit;cursor:pointer;border-radius:12px}
.big{display:inline-block;background:var(--tomato);color:#fff;border:0;padding:14px 22px;font-size:1.15rem;font-weight:600;text-decoration:none}
.ghost{background:transparent;border:2px solid var(--link);color:var(--link);padding:12px 18px;font-weight:600}
.linkish{background:none;border:0;color:var(--link);text-decoration:underline;font:inherit;cursor:pointer}
.allergen{font-size:.95rem;background:var(--card);border:2px dashed var(--line);border-radius:10px;padding:10px 14px;margin-top:14px}
.st{display:block}
.stepimg{display:block;width:100%;max-width:420px;border-radius:10px;margin-top:10px}
.foot{max-width:680px;margin:0 auto;padding:24px 16px 48px;color:var(--soft);font-size:.95rem;border-top:1px solid var(--line)}
.foot p+p{margin-top:6px}

/* ---------- filters */
.fgroup{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.fgroup.col{flex-direction:column;align-items:flex-start;margin-top:14px}
.flabel{font-weight:600;min-width:4.5em}
.flabel small{font-weight:400;color:var(--soft)}
.chipwrap{display:flex;flex-wrap:wrap;gap:8px}
.chip{text-transform:none}
.more{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:12px 16px;margin:6px 0 10px}
.more summary{cursor:pointer;font-weight:600;color:var(--link)}
.count{color:var(--soft);margin:6px 0 12px}
.have{font-size:.85rem;font-weight:600;color:var(--link);padding:0 14px 14px}
.smp{color:var(--dark);font-style:normal;font-family:Inter,sans-serif;font-size:.7rem;background:var(--turmeric);border-radius:99px;padding:2px 7px;vertical-align:middle}

/* ---------- what do I cook */
.energy{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.energy button{background:var(--card);border:3px solid var(--line);padding:18px 10px;text-align:center;color:var(--ink)}
.energy button b{display:block;font-family:Fraunces,Georgia,serif;font-size:1.6rem}
.energy button small{color:var(--soft);font-size:.85rem}
.energy button[data-e=low]{border-color:var(--leaf)}
.energy button[data-e=some]{border-color:var(--turmeric)}
.energy button[data-e=good]{border-color:var(--tomato)}
.energy button.on{background:var(--chip);box-shadow:0 0 0 3px var(--green)}
.pickcard{background:var(--card);border:2px solid var(--link);border-radius:16px;padding:18px}
.pickcard small{color:var(--soft)}
.big2{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:clamp(1.6rem,6vw,2.4rem);line-height:1.05;margin:4px 0}
.pickcard .rm{padding:0}
.crash{list-style:none}
.crash li{padding:10px 0;border-bottom:1px solid var(--line)}
.crash b{display:block}
.crash span{color:var(--soft);font-size:.95rem}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
@media (max-width:520px){.energy{grid-template-columns:1fr}.energy button{display:flex;align-items:baseline;gap:12px;text-align:left}}

/* ---------- cook mode */
.cm{position:fixed;inset:0;z-index:50;background:var(--green);color:var(--cream);display:flex;flex-direction:column}
.cm[hidden]{display:none}
.cm-top{display:flex;align-items:center;gap:10px;padding:14px 16px}
.cm-n{flex:1;font-weight:600;opacity:.8}
.cm-say,.cm-x{background:rgba(255,255,255,.12);border:0;color:var(--cream);padding:10px 14px;font-size:1rem}
.cm-say[aria-pressed=true]{background:var(--turmeric);color:var(--dark)}
.cm-body{flex:1;overflow:auto;padding:12px 20px;max-width:820px;width:100%;margin:0 auto}
.cm-t{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:clamp(1.8rem,5.5vw,3rem);line-height:1.15}
.cm-c{margin-top:16px;font-size:clamp(1.1rem,2.5vw,1.4rem);color:var(--leaf)}
.cm-img{display:block;max-width:100%;max-height:38vh;border-radius:12px;margin-top:16px}
.cm-img[hidden]{display:none}
.cm-timer{margin-top:20px}
.cm-go{background:var(--turmeric);color:var(--dark);border:0;padding:14px 20px;font-size:1.2rem;font-weight:600}
.cm-clock{font-family:Fraunces,Georgia,serif;font-weight:900;font-size:clamp(3rem,12vw,6rem);color:var(--turmeric)}
.cm-nav{display:grid;grid-template-columns:1fr 2fr;gap:10px;padding:14px 16px 20px}
.cm-back,.cm-next{border:0;padding:20px;font-size:1.3rem;font-weight:600}
.cm-back{background:rgba(255,255,255,.12);color:var(--cream)}
.cm-back:disabled{opacity:.3}
.cm-next{background:#f4ede0;color:var(--ink)}

/* ---------- guide pages */
.guide h2:first-of-type{margin-top:28px}
.guide p,.guide ul,.guide ol,.guide table{margin-bottom:14px}
.guide ul,.guide ol{padding-left:1.3em}
.guide li{margin-bottom:6px}
.guide table{width:100%;border-collapse:collapse;background:var(--card);border-radius:10px;overflow:hidden}
.guide th,.guide td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.guide th{background:var(--chip)}
.doors{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:22px 0}
.doors a{display:block;background:var(--card);border:2px solid var(--line);border-left:6px solid var(--leaf);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.doors a:nth-child(3n+2){border-left-color:var(--turmeric)}
.doors a:nth-child(3n){border-left-color:var(--tomato)}
.doors a:hover{transform:translateY(-2px)}
.doors b{display:block;font-family:Fraunces,Georgia,serif;font-size:1.25rem}
.doors span{color:var(--soft);font-size:.95rem}
.box{background:var(--chip);border-left:5px solid var(--leaf);padding:12px 16px;border-radius:6px;margin:16px 0}
.next{margin-top:30px;font-weight:600}

/* ---------- servings, week, badges */
.wk{display:inline-block;min-width:1.4em;margin-left:5px;padding:0 5px;border-radius:99px;background:var(--turmeric);color:var(--dark);font-size:.75rem;font-weight:600;text-align:center}
.wk[hidden]{display:none}
.serves{display:flex;align-items:center;gap:6px;margin:-4px 0 10px}
.serves span{font-weight:600;margin-right:4px}
.serves button{font:inherit;font-weight:600;min-width:2.6em;padding:6px 10px;border-radius:8px;border:2px solid var(--line);background:var(--chip);color:var(--ink);cursor:pointer}
.serves button.on{background:var(--green);border-color:var(--link);color:var(--cream)}
.scaled{font-size:.9rem;color:var(--soft);margin-bottom:6px}
.ghost.on{background:var(--green);color:var(--cream)}
.wrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.wrow a{flex:1 1 200px;text-decoration:none;color:var(--ink)}
.wrow a b{display:block;font-family:Fraunces,Georgia,serif;font-size:1.2rem}
.wrow a small{color:var(--soft)}
.wrow select{font:inherit;padding:4px 6px;border-radius:6px;border:2px solid var(--line)}
.shoplist{list-style:none}
.shoplist li{padding:10px 0;border-bottom:1px solid var(--line)}
.shoplist label{display:flex;gap:10px;align-items:baseline;cursor:pointer}
.shoplist input{width:1.3em;height:1.3em;flex:none;accent-color:var(--link)}
.shoplist input:checked~*,.shoplist label:has(input:checked){color:var(--soft);text-decoration:line-through}
.shoplist small{color:var(--soft)}

/* ---------- 7 days, seasons */
.days{list-style:none;padding:0!important}
.days li{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.days li.did{border-color:var(--leaf);background:var(--done)}
.days label{display:flex;gap:10px;align-items:center;font-size:1.15rem;cursor:pointer;margin-bottom:6px}
.days input{width:1.4em;height:1.4em;accent-color:var(--link)}
.days p{margin:4px 0 0!important}
.season details{background:var(--card);border:2px solid var(--line);border-radius:10px;margin-bottom:8px}
.season summary{cursor:pointer;padding:12px 16px;font-weight:600}
.season p{padding:0 16px 14px;margin:0!important}
.season .now{border-color:var(--turmeric);border-width:3px}
.season .now summary::after{content:" — this month";color:var(--tomato)}

/* ---------- print: clean recipe card / shopping list */
.printonly{display:none}
@media print{
  html.dark{--paper:#fff;--card:#fff;--chip:#fff;--ink:#000;--soft:#444;--line:#bbb;--link:#000}
  .aa,.comfort,.glbox{display:none!important}
  .gl{border:0}
  .bar,.foot,.noprint,.hint,.back,.cm,.dish{display:none!important}
  .printonly{display:block;margin-top:16px;color:#555;font-size:.85rem}
  body.inner{background:var(--card);font-size:11pt}
  main.read,main.wide{padding:0;max-width:none}
  main h1{font-size:22pt}
  .labels{grid-template-columns:repeat(4,1fr)}
  .labels div,.first,.facts div{background:var(--card);border:1px solid #bbb;color:#000}
  .first span{color:#000}
  ol.steps li{border:1px solid #ccc;break-inside:avoid;padding:6px 6px 6px 48px;margin-bottom:6px}
  ol.steps li::before{background:#000}
  .stepimg{max-width:180px}
  a{color:#000;text-decoration:none}
}
.shoplist b{white-space:nowrap}

/* ---------- comfort settings */
html.dark{--paper:#111a14;--card:#1a271f;--chip:#24352b;--ink:#ece6da;--soft:#a8b4ab;--line:#2f4237;--link:#a6d488;--done:#1f3324;color-scheme:dark}
html.dark .chip.on,html.dark .serves button.on{background:var(--leaf);border-color:var(--leaf);color:var(--dark)}
html.dark .ghost.on{background:var(--leaf);color:var(--dark)}
html.dark .first{background:#24352b}
html.size-big{font-size:115%}
html.size-bigger{font-size:132%}
html.spaced body{letter-spacing:.03em;word-spacing:.14em;line-height:1.85}
html.spaced p,html.spaced li{max-width:60ch}
html.calm *,html.calm *::before,html.calm *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
html.calm .board,html.calm .b1,html.calm .b2,html.calm .b3{transform:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.aa{margin-left:auto;font:inherit;font-weight:700;font-family:Fraunces,Georgia,serif;font-size:1.05rem;background:rgba(255,255,255,.12);color:#f4ede0;border:0;border-radius:8px;padding:6px 12px;cursor:pointer}
.bar{gap:6px 12px}
.comfort{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);color:var(--ink);border-top:3px solid var(--leaf);box-shadow:0 -8px 30px rgba(0,0,0,.25);padding:16px 16px 22px}
.comfort[hidden]{display:none}
.comfort .in{max-width:680px;margin:0 auto}
.comfort h2{font-family:Fraunces,Georgia,serif;font-size:1.3rem;margin:0 0 8px;border:0;padding:0}
.comfort .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}
.comfort .row>span{font-weight:600;min-width:6.5em}
.comfort button{font:inherit;font-weight:600;padding:8px 14px;border-radius:8px;border:2px solid var(--line);background:var(--chip);color:var(--ink);cursor:pointer}
.comfort button.on{background:var(--green);border-color:var(--green);color:#f4ede0}
.comfort .done{float:right;background:var(--tomato);color:#fff;border:0}

/* ---------- glossary */
.gl{font:inherit;color:inherit;background:none;border:0;padding:0;border-bottom:2px dotted var(--leaf);cursor:help}
.glbox{position:fixed;left:16px;right:16px;bottom:16px;z-index:45;max-width:520px;margin:0 auto;background:var(--green);color:#f4ede0;border-radius:14px;padding:14px 46px 14px 16px;box-shadow:0 8px 30px rgba(0,0,0,.3)}
.glbox[hidden]{display:none}
.glbox b{display:block;font-family:Fraunces,Georgia,serif;font-size:1.2rem;color:var(--turmeric)}
.glbox button{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.15);color:#f4ede0;border:0;border-radius:8px;width:32px;height:32px;font-size:1rem;cursor:pointer}

/* ---------- label checker */
#ingr{width:100%;min-height:9em;font:inherit;padding:12px 14px;border:2px solid var(--link);border-radius:12px;background:var(--card);color:var(--ink)}
.verdict{border-radius:14px;padding:16px;margin:16px 0;font-weight:600}
.verdict.no{background:#fbe1dc;color:#7a1d0e}
.verdict.maybe{background:#fdf0cf;color:#5c4100}
.verdict.yes{background:#e3f1d8;color:#24461a}
.verdict b{display:block;font-family:Fraunces,Georgia,serif;font-size:1.5rem}
.marked{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:14px;line-height:1.9}
mark.bad{background:#f8c3b8;color:#5a1408;border-radius:4px;padding:1px 3px}
mark.check{background:#fbe2a0;color:#4a3500;border-radius:4px;padding:1px 3px}
mark.mc{background:none;color:var(--soft);text-decoration:line-through}
.found li{margin-bottom:8px}

/* ---------- swaps / fixes */
.swaps b,.fixes b{min-width:9em!important}
/* round-2 fixes */
.comfort button.on::before{content:"✓ "}
html.dark .comfort button.on{background:var(--leaf);border-color:var(--leaf);color:var(--dark)}
@media (max-width:760px){
  .bar .mark{order:1}
  .bar .aa{order:2}
  .bar nav{order:3;flex-basis:100%}
  .comfort .row>span{flex-basis:100%}
}
@media (max-width:520px){
  .swaps li,.fixes li{flex-direction:column;gap:2px}
}
.big{background:#c4402a}