/* Root & Table — a seasonal cooking journal
   Palette: linen / forest green / russet / ochre. Type: Libre Caslon Text + Cabin. */

:root{
  --paper:#F1E8D6;
  --paper-deep:#EDE3CB;
  --paper-dark:#E6D9BE;
  --ink:#2B2417;
  --ink-soft:#4A4130;
  --muted:#7A6B4A;
  --faint:#9a8b64;
  --green:#3C5233;
  --green-deep:#2E4027;
  --green-ink:#EDE3CB;
  --russet:#9C4722;
  --ochre:#C98F2D;
  --line:#D6C8A8;
  --line-strong:#C9B98F;
  --dark:#241E12;
  --acc-recipes:#B4552E;
  --acc-wholefoods:#4E7A4E;
  --acc-seasonal:#C4882B;
  --acc-kitchen:#6E5A3B;
  --acc-wellness:#3E6A52;
  --serif:'Libre Caslon Text',Georgia,serif;
  --sans:'Cabin','Gill Sans',system-ui,sans-serif;
  --measure:70ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.7;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--russet);text-decoration:none}
a:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.2;margin:0;text-wrap:pretty}
p{margin:0 0 1.15em}
figure{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(18px,4vw,48px)}

/* ---------- header ---------- */
.topstrip{background:var(--green);color:var(--green-ink);text-align:center;padding:9px clamp(14px,3vw,24px);font-size:14.5px;letter-spacing:.16em;text-transform:uppercase}
.topstrip a{color:var(--green-ink)}
.masthead{text-align:center;padding:clamp(26px,4vw,40px) clamp(18px,4vw,48px) 24px;border-bottom:3px double var(--green)}
.masthead .wordmark{font-family:var(--serif);font-size:clamp(38px,5.4vw,56px);color:var(--green);line-height:1;display:inline-block}
.wordmark .amp{color:var(--russet);font-style:italic}
.masthead .tagline{margin:12px 0 0;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.site-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px clamp(18px,3vw,36px);margin-top:20px;font-size:14.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.site-nav a{color:var(--green)}
.site-nav a:hover{color:var(--russet);text-decoration:none}
.site-nav a[aria-current="true"]{color:var(--russet);border-bottom:2px solid var(--russet);padding-bottom:3px}
/* compact header for inner pages */
.siteheader{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 28px;padding:18px clamp(18px,4vw,48px);border-bottom:3px double var(--green)}
.siteheader .wordmark{font-family:var(--serif);font-size:clamp(24px,3vw,30px);color:var(--green)}
.siteheader .site-nav{margin-top:0;font-size:13px;justify-content:flex-start}

/* ---------- homepage bands ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,480px);gap:clamp(24px,4vw,44px);padding:clamp(28px,4vw,44px) 0 0;align-items:stretch}
.hero-copy{display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line);padding-right:clamp(20px,3vw,40px)}
.kicker{font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--russet);font-weight:700;margin:0 0 4px}
.hero h1{font-size:clamp(32px,4vw,48px);line-height:1.14;margin:12px 0 0}
.hero .dek{font-size:19px;line-height:1.7;color:var(--ink-soft);margin:16px 0 0;max-width:52ch}
.hero-cta{display:flex;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--russet);color:var(--paper);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding:14px 28px;border:none;cursor:pointer;font-family:var(--sans)}
.btn:hover{background:var(--green);color:var(--paper);text-decoration:none}
.btn-ghost{background:none;border:1px solid var(--green);color:var(--green)}
.btn-ghost:hover{background:var(--green);color:var(--paper)}
.hero-aside{font-size:15.5px;font-style:italic;font-family:var(--serif);color:var(--muted)}
.hero-photo img{width:100%;height:100%;min-height:320px;object-fit:cover}

.season-band{border-top:3px double var(--green);border-bottom:3px double var(--green);padding:26px 0;margin-top:clamp(30px,4vw,44px)}
.band-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap}
.band-head h2{font-size:clamp(22px,2.6vw,28px);color:var(--green)}
.band-link{font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.produce-row{display:grid;grid-template-columns:repeat(5,1fr);margin-top:20px}
.produce-row>*{border-right:1px solid var(--line);padding:4px 20px}
.produce-row>*:first-child{padding-left:0}
.produce-row>*:last-child{border-right:none;padding-right:0}
.produce-name{font-family:var(--serif);font-size:20px;color:var(--ink);display:block}
a.produce-item{color:inherit}
a.produce-item:hover{text-decoration:none}
a.produce-item:hover .produce-name{color:var(--russet)}
.produce-tip{font-size:14.5px;line-height:1.55;color:var(--muted);margin-top:4px}

.section-band{padding:clamp(30px,4.5vw,48px) 0 0}
.centered-kicker{text-align:center}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px);margin-top:24px}
.gcard{display:flex;flex-direction:column;gap:11px;color:inherit}
.gcard:hover{text-decoration:none;color:inherit}
.gcard .gcard-photo{aspect-ratio:3/2;overflow:hidden}
.gcard .gcard-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gcard:hover .gcard-photo img{transform:scale(1.03)}
.gcard .gcard-tag{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--russet)}
.gcard h3{font-size:21px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.gcard:hover h3{color:var(--russet)}
.gcard .gcard-dek{font-size:15px;line-height:1.6;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard .gcard-meta{font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:auto}

.shelves{margin-top:clamp(32px,4.5vw,48px);border-top:1px solid var(--line);padding-top:clamp(26px,3.5vw,38px)}
.shelf-row{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shelf{padding:22px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px;color:inherit}
.shelf:last-child{border-right:none}
.shelf:hover{background:var(--paper-deep);text-decoration:none;color:inherit}
.shelf .shelf-no{font-family:var(--serif);font-size:15px;color:var(--ochre)}
.shelf h3{font-size:19px}
.shelf:hover h3{color:var(--russet)}
.shelf p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}
.shelf .shelf-count{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:auto}

.news-row{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:stretch;margin:clamp(32px,4.5vw,48px) 0}
.newsletter{background:var(--green);color:var(--green-ink);padding:32px 36px;display:flex;flex-direction:column;justify-content:center}
.newsletter h2{font-size:clamp(20px,2.4vw,25px);line-height:1.35;color:var(--green-ink)}
.news-form{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.news-form input{background:var(--paper);border:none;color:var(--ink);padding:13px 20px;font-size:15px;font-family:var(--sans);flex:1;min-width:200px}
.news-form input::placeholder{color:var(--faint)}
.news-note{font-size:13px;opacity:.75;margin:12px 0 0}
.btn-ochre{background:var(--ochre);color:var(--dark)}
.btn-ochre:hover{background:var(--paper);color:var(--green)}

/* ---------- the larder (partner slots) ---------- */
.larder{margin:clamp(28px,4vw,40px) 0 0;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:8px 34px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}
.larder-side .kicker{color:var(--faint);letter-spacing:.2em;font-size:11.5px}
.larder-side h3{font-family:var(--serif);font-size:18px;line-height:1.4;color:var(--ink-soft)}
.larder-side p{font-size:13.5px;line-height:1.5;color:var(--muted);margin:6px 0 0}
a.sponsor{display:flex;align-items:center;gap:22px;background:var(--dark);padding:18px 24px;border:1px solid var(--line-strong);color:var(--line-strong);min-height:96px}
a.sponsor:hover{text-decoration:none;border-color:var(--ochre)}
a.sponsor img{width:200px;max-width:44%;height:auto;flex:none}
.sponsor-blurb{font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.55;color:#C9B98F;min-height:1em}
.sponsor-blurb:empty::before{content:"";display:inline-block}
.larder.larder-box{grid-template-columns:1fr;border:1px solid var(--line-strong);padding:26px 28px;margin:0;gap:12px;align-content:center}
.larder.larder-quiet{grid-template-columns:minmax(180px,240px) minmax(0,1fr)}
.larder.larder-quiet a.sponsor{min-height:80px;padding:14px 20px}

/* larder rows (3-up) */
.larder-row{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0 20px;margin:clamp(28px,4vw,40px) 0 0}
.larder-row .kicker{color:var(--faint);letter-spacing:.2em;font-size:11.5px;margin-bottom:12px}
.lr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lr-grid a.sponsor{min-height:76px;padding:14px 18px;gap:14px}
.lr-grid a.sponsor img{width:150px;max-width:52%}
.lr-grid .sponsor-blurb{font-size:13.5px}
@media (max-width:880px){.lr-grid{grid-template-columns:1fr}}

/* back of the larder */
.back-larder-band{margin:clamp(30px,4vw,44px) 0 0;border-top:3px double var(--green);padding-top:24px}
.back-larder-note{font-size:15px;color:var(--muted);max-width:64ch;margin:10px 0 0}
.back-larder{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:18px}
.back-larder a.sponsor{min-height:76px;padding:14px 18px;gap:14px}
.back-larder a.sponsor img{width:150px;max-width:52%}
.back-larder .sponsor-blurb{font-size:13.5px}

/* ---------- footer ---------- */
.sitefooter{background:var(--dark);color:var(--line-strong);margin-top:clamp(36px,5vw,56px)}
.sitefooter .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:28px 48px;padding-block:34px;flex-wrap:wrap}
.sitefooter .wordmark{font-family:var(--serif);font-size:24px;color:var(--paper-deep)}
.sitefooter .foot-about{font-size:14.5px;line-height:1.65;max-width:40ch;margin:10px 0 0;color:#b3a67f}
.foot-cols{display:flex;gap:clamp(28px,4vw,56px);flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.foot-col a{color:var(--line-strong)}
.foot-col a:hover{color:var(--ochre)}
.foot-col .foot-head{color:var(--faint);font-size:11.5px;letter-spacing:.2em;margin-bottom:4px}
.foot-base{border-top:1px solid #3a3222;padding:14px clamp(18px,4vw,48px);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* footer larder grid */
.news-row-solo{grid-template-columns:1fr}
.foot-larder{border-top:1px solid #3a3222;padding:30px 0 34px}
.foot-larder .wrap{display:block;padding-block:0}
.foot-larder-grid{width:100%}
.foot-larder .band-head h2{color:var(--paper-deep);font-size:22px}
.foot-larder-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.foot-larder-grid a.sponsor[data-partner="1"]{grid-column:span 2;flex-direction:row;align-items:center;text-align:left;gap:20px;justify-content:flex-start}
.foot-larder-grid a.sponsor[data-partner="1"] img{width:200px;max-width:44%;flex:none}
.foot-larder-grid a.sponsor[data-partner="1"] .sponsor-blurb{flex:1;font-size:14px}
.foot-larder-grid a.sponsor{flex-direction:column;align-items:center;text-align:center;justify-content:center;min-height:118px;padding:16px 18px;gap:10px;border-color:#3a3222}
.foot-larder-grid a.sponsor img{width:170px;max-width:85%}
.foot-larder-grid a.sponsor:hover{border-color:var(--ochre)}
.foot-larder-grid .sponsor-blurb{font-size:12.5px}
@media (max-width:1080px){.foot-larder-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.foot-larder-grid{grid-template-columns:1fr}}

/* ---------- category pages ---------- */
.cat-hero{padding:clamp(30px,4.5vw,50px) 0 0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);gap:24px clamp(28px,4vw,52px);align-items:end;border-bottom:1px solid var(--line);padding-bottom:30px}
.cat-hero h1{font-size:clamp(34px,4.4vw,50px)}
.cat-hero .dek{font-size:18.5px;line-height:1.7;color:var(--ink-soft);margin:14px 0 0;max-width:56ch}
.cat-rule{width:64px;height:6px;margin-top:18px}
.pantry-filter{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--muted)}
.pantry-filter .kicker{color:var(--faint);font-size:12px;letter-spacing:.18em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label,.chips .chip{border:1px solid var(--line-strong);padding:7px 15px;font-size:13.5px;letter-spacing:.06em;cursor:pointer;color:var(--ink-soft)}
.chips label:hover{border-color:var(--russet);color:var(--russet)}
.pantry-radio{position:absolute;opacity:0;pointer-events:none}
#shelf-all:checked~.cat-body label[for="shelf-all"],
#shelf-pulses:checked~.cat-body label[for="shelf-pulses"],
#shelf-grains:checked~.cat-body label[for="shelf-grains"],
#shelf-fats:checked~.cat-body label[for="shelf-fats"],
#shelf-veg:checked~.cat-body label[for="shelf-veg"]{border-color:var(--russet);color:var(--russet);font-weight:700}
#shelf-pulses:checked~.cat-body .cat-list>li:not([data-shelf="pulses"]),
#shelf-grains:checked~.cat-body .cat-list>li:not([data-shelf="grains"]),
#shelf-fats:checked~.cat-body .cat-list>li:not([data-shelf="fats"]),
#shelf-veg:checked~.cat-body .cat-list>li:not([data-shelf="veg"]){display:none}
ul.cat-list{list-style:none;margin:0;padding:clamp(24px,3.5vw,36px) 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,36px)}
.cat-list .gcard{flex-direction:row;gap:22px;align-items:stretch}
.cat-list .gcard .gcard-photo{aspect-ratio:auto;width:min(240px,38%);flex:none}
.cat-list .gcard-body{display:flex;flex-direction:column;gap:9px;flex:1;padding:6px 0}
.cat-list .gcard h3{min-height:0}

/* ---------- article pages ---------- */
.post-header{max-width:900px;margin:0 auto;text-align:center;padding:clamp(34px,5vw,52px) clamp(18px,4vw,48px) 0}
.post-header h1{font-size:clamp(32px,4.6vw,48px);line-height:1.15}
.post-header .dek{font-family:var(--serif);font-style:italic;font-size:19.5px;line-height:1.65;color:var(--ink-soft);margin:16px auto 0;max-width:56ch}
.post-meta{display:flex;justify-content:center;gap:10px 20px;margin-top:18px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;flex-wrap:wrap}
.post-meta .sep{color:var(--line-strong)}
.post-hero{max-width:1080px;margin:30px auto 0;padding-inline:clamp(18px,4vw,48px)}
.post-hero img{width:100%;max-height:540px;object-fit:cover}
.post-hero figcaption{font-size:14px;color:var(--muted);font-style:italic;font-family:var(--serif);padding-top:10px;border-bottom:1px solid var(--line);padding-bottom:12px}

/* off-centre reading column, breakouts to the right */
.post-body{max-width:var(--measure);margin:clamp(30px,4vw,44px) 0 0 clamp(18px,12vw,15vw);padding-inline:clamp(18px,4vw,48px) clamp(18px,3vw,32px);font-size:19px;line-height:1.75;counter-reset:sec}
.post-body>p{color:var(--ink)}
.post-body h2{font-size:clamp(24px,2.8vw,30px);margin:1.6em 0 .65em;counter-increment:sec}
.post-body h2::before{content:"No " counter(sec);display:block;font-size:16px;color:var(--ochre);margin-bottom:6px;letter-spacing:.04em}
.post-body h3{font-size:21px;margin:1.5em 0 .55em}
.post-body ul,.post-body ol{margin:0 0 1.2em;padding-left:24px}
.post-body li{margin-bottom:.45em}
.post-body li::marker{color:var(--russet);font-weight:700}
.dropcap::first-letter{font-family:var(--serif);font-size:3.6em;line-height:.78;float:left;padding:8px 12px 0 0;color:var(--russet)}
.lead{font-size:21.5px;line-height:1.7;color:var(--ink-soft)}

.pullquote{margin:2em 0 2em auto;border:none;padding:18px 0 18px 28px;border-left:4px solid var(--ochre);width:min(115%,78ch)}
.pullquote p{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.4vw,25px);line-height:1.5;color:var(--green);margin:0}
.blockquote{margin:2em 0;padding:22px 28px;border-left:4px solid var(--green);background:var(--paper-deep)}
.blockquote p{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.6;margin:0}
.blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.callout{margin:2em 0;border:1px solid var(--line-strong);border-top:3px double var(--green);padding:20px 26px;background:var(--paper-deep)}
.callout::before{content:"Worth keeping";display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--russet);font-weight:700;margin-bottom:8px;font-family:var(--sans)}
.callout p{margin:0;font-size:17.5px;line-height:1.65}
.note{font-size:16px;line-height:1.6;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:1.6em 0}
.note::before{content:"Note — ";font-weight:700;color:var(--russet);letter-spacing:.04em}
.mini-meta{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:0 0 1.4em}

/* by-the-numbers band (wide breakout) */
.statband{width:min(118%,88ch);margin:2.4em 0}
.statband-inner{background:var(--green);color:var(--green-ink);padding:30px clamp(18px,6vw,72px)}
.statband .kicker{color:var(--ochre);margin-bottom:14px}
.statrow{display:flex;flex-wrap:wrap;gap:22px clamp(28px,4vw,64px)}
.statblock{display:flex;flex-direction:column;gap:2px;min-width:120px}
.stat-num{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);line-height:1.1;color:var(--paper)}
.stat-label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#b8c4a8}

/* recipe card */
.recipe-card{margin:2.2em 0;border:1px solid var(--line-strong);background:var(--paper-deep);width:min(115%,84ch)}
.recipe-card-head{background:var(--green);color:var(--green-ink);padding:16px 26px;display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;flex-wrap:wrap}
.recipe-card-head .rc-title{font-family:var(--serif);font-size:21px}
.rc-meta{display:flex;gap:18px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;flex-wrap:wrap}
.rc-meta .rc-print{background:none;border:none;color:var(--ochre);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:0}
.rc-print:hover{color:var(--paper)}
.recipe-card-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.rc-ingredients{padding:22px 26px;border-right:1px solid var(--line-strong)}
.rc-method{padding:22px 26px}
.rc-h{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--russet);font-weight:700;margin:0 0 12px;font-family:var(--sans)}
.recipe-card ul{list-style:none;padding:0;margin:0;font-size:16px;line-height:1.6}
.recipe-card ul li{padding:7px 0;border-bottom:1px dashed var(--line-strong);margin:0}
.recipe-card ul li:last-child{border-bottom:none}
.recipe-card ol{padding-left:22px;margin:0;font-size:16.5px;line-height:1.7}
.recipe-card ol li{margin-bottom:.7em}
.rc-foot{border-top:1px solid var(--line-strong);padding:14px 26px;font-size:15px;line-height:1.6;color:var(--muted)}
.rc-foot strong{color:var(--russet)}

/* versus + datatable */
table.versus,table.datatable{width:min(115%,84ch);border-collapse:collapse;margin:2em 0;font-size:16px;line-height:1.55}
table.versus caption,table.datatable caption{caption-side:top;text-align:left;font-family:var(--serif);font-size:19px;color:var(--green);padding-bottom:12px}
.versus th,.versus td,.datatable th,.datatable td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.versus thead th,.datatable thead th{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--russet);border-bottom:2px solid var(--green);font-family:var(--sans)}
.versus tbody th,.datatable tbody th{font-family:var(--serif);font-weight:400;font-size:17px;color:var(--ink)}
.versus thead th:nth-child(2){color:var(--green)}
.versus thead th:nth-child(3){color:var(--ochre)}
.versus td:nth-child(2){background:rgba(60,82,51,.06)}
.datatable tbody tr:nth-child(even){background:rgba(60,82,51,.04)}

/* timeline */
ol.timeline{list-style:none;margin:2em 0;padding:0 0 0 20px;border-left:2px solid var(--line-strong);max-width:66ch}
.timeline li{position:relative;padding:0 0 20px 22px;margin:0}
.timeline li:last-child{padding-bottom:4px}
.timeline li::before{content:"";position:absolute;left:-27px;top:8px;width:12px;height:12px;background:var(--paper);border:3px solid var(--russet);border-radius:50%}
.t-when{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--russet);font-weight:700}
.t-what{display:block;font-size:17px;line-height:1.6;color:var(--ink-soft);margin-top:2px}

/* charts */
figure.chart{margin:2em 0;width:min(115%,84ch)}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-size:14px;color:var(--muted);font-style:italic;font-family:var(--serif);margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.chart .bar-track{fill:rgba(60,82,51,.12)}
.chart .bar-fill{fill:var(--green)}
.chart .bar-fill.alt{fill:var(--russet)}
.chart .bar-fill.alt2{fill:var(--ochre)}
.chart text{font-family:var(--sans);fill:var(--ink-soft)}
.chart .c-label{font-size:14px}
.chart .c-val{font-size:13px;font-weight:700;fill:var(--green)}
.chart .c-axis{font-size:11px;fill:var(--faint)}
.chart polyline{fill:none;stroke:var(--russet);stroke-width:2.5}
.chart circle.pt{fill:var(--russet)}
.chart .gridline{stroke:var(--line);stroke-width:1}

/* figures / gallery / map */
figure.article-figure{margin:2.2em 0;width:min(115%,84ch)}
.article-figure img{width:100%;object-fit:cover}
.article-figure figcaption,.gallery figcaption,.map-figure figcaption{font-size:14px;color:var(--muted);font-style:italic;font-family:var(--serif);margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:2.2em 0;width:min(115%,84ch)}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
figure.map-figure{margin:2.2em 0;width:min(115%,84ch)}
.map-slot{background:var(--paper-deep);border:1px solid var(--line-strong);min-height:280px;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.map-slot:empty::before{content:"Locator map"}

/* profile / org / entity ---------- */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:2em 0;width:min(115%,84ch)}
.profile-card{border:1px solid var(--line-strong);background:var(--paper-deep);padding:24px 26px;font-size:15.5px;line-height:1.6;margin:2em 0}
.profile-grid .profile-card{margin:0}
.profile-card .p-photo{width:88px;height:88px;object-fit:cover;border-radius:50%;margin-bottom:14px}
.profile-card.no-photo .p-initial{width:88px;height:88px;border-radius:50%;background:var(--green);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:34px;margin-bottom:14px}
.profile-card h3{font-size:20px}
.profile-card .p-role{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--russet);font-weight:700;margin:4px 0 10px}
.profile-card p{margin:0 0 .6em}
.profile-card .p-links{margin:10px 0 0;font-size:14px}
.profile-card .p-attr{font-size:12.5px;color:var(--faint);margin:8px 0 0}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:2em 0;width:min(115%,84ch)}
a.org-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line-strong);padding:16px 20px;background:var(--paper-deep);color:inherit}
a.org-card:hover{border-color:var(--russet);text-decoration:none}
.org-card .org-logo{width:44px;height:44px;object-fit:contain;margin-bottom:6px}
.org-card.no-logo .org-mark{width:44px;height:44px;background:var(--green);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:19px;margin-bottom:6px}
.org-card .org-name{font-family:var(--serif);font-size:17px;color:var(--ink)}
.org-card .org-host{font-size:12.5px;letter-spacing:.08em;color:var(--faint);text-transform:lowercase}
a.entity-ref{border-bottom:1px dashed var(--russet);color:var(--russet)}
a.entity-ref:hover{text-decoration:none;border-bottom-style:solid}

/* related / further */
.post-end{max-width:calc(var(--measure) + 14ch);margin:clamp(36px,5vw,52px) 0 0 clamp(18px,12vw,15vw);padding-inline:clamp(18px,4vw,48px) clamp(18px,3vw,32px)}
.post-end .end-head{border-top:3px double var(--green);padding-top:20px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.post-end .end-head h2{font-size:22px;color:var(--green)}
ul.related-links{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.related-links a{display:flex;flex-direction:column;gap:9px;color:inherit}
.related-links a:hover{text-decoration:none}
.related-links a:hover .rl-title{color:var(--russet)}
.related-links img{width:100%;aspect-ratio:16/10;object-fit:cover}
.related-links .rl-tag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--russet)}
.related-links .rl-title{font-family:var(--serif);font-size:17.5px;line-height:1.35}
nav.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:2em 0;width:min(115%,84ch)}
.further-grid a{border:1px solid var(--line-strong);padding:16px 20px;font-family:var(--serif);font-size:17px;line-height:1.4;color:var(--ink);background:var(--paper-deep)}
.further-grid a:hover{border-color:var(--russet);color:var(--russet);text-decoration:none}

/* ---------- utility pages ---------- */
.page-plain{max-width:74ch;margin:0 auto;padding:clamp(34px,5vw,56px) clamp(18px,4vw,48px);font-size:19px;line-height:1.75}
.page-plain h1{font-size:clamp(32px,4.4vw,46px);margin-bottom:.5em}
.contact-ways{list-style:none;margin:2em 0;padding:0;display:grid;gap:14px}
.contact-ways li{display:flex;gap:16px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:14px}
.contact-ways svg{width:22px;height:22px;flex:none;align-self:center;color:var(--russet)}
.contact-ways .cw-label{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted);min-width:110px}

/* styleguide */
.sg-section{border-top:3px double var(--green);margin-top:48px;padding-top:24px}
.sg-section>h2{font-size:26px;color:var(--green);margin-bottom:6px}
.sg-note{font-size:14px;color:var(--muted);margin-bottom:22px}
.swatches{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0}
.swatch{width:130px;font-size:12.5px;color:var(--muted)}
.swatch .sw{height:64px;border:1px solid var(--line-strong);margin-bottom:6px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .produce-row{grid-template-columns:repeat(3,1fr)}
  .produce-row>*{border-bottom:1px solid var(--line);padding:10px 20px 14px}
  .produce-row>*:nth-child(3n){border-right:none}
  .produce-row>*:nth-child(n+4){border-bottom:none}
  .produce-row>*:first-child{padding-left:20px}
  .shelf-row{grid-template-columns:repeat(2,1fr)}
  .shelf{border-bottom:1px solid var(--line)}
  .shelf:nth-child(2n){border-right:none}
  .post-body,.post-end{margin-left:clamp(18px,6vw,8vw)}
}
@media (max-width:880px){
  .hero{grid-template-columns:1fr}
  .hero-copy{border-right:none;padding-right:0}
  .hero-photo img{min-height:260px;max-height:420px}
  .card-grid{grid-template-columns:1fr 1fr}
  .news-row{grid-template-columns:1fr}
  .cat-hero{grid-template-columns:1fr;align-items:start}
  ul.cat-list{grid-template-columns:1fr}
  .recipe-card,.pullquote,figure.chart,figure.article-figure,figure.map-figure,table.versus,table.datatable,.gallery,.profile-grid,.org-grid,nav.further-grid{width:100%}
  .recipe-card-body{grid-template-columns:1fr}
  .rc-ingredients{border-right:none;border-bottom:1px solid var(--line-strong)}
  .post-body,.post-end{margin-left:0;margin-right:0;padding-inline:clamp(18px,5vw,32px)}
  .statband{width:100%}
  .larder{grid-template-columns:1fr;gap:14px}
}
@media (max-width:600px){
  body{font-size:17px}
  .post-body{font-size:17.5px}
  .card-grid{grid-template-columns:1fr}
  .produce-row{grid-template-columns:1fr 1fr}
  .produce-row>*{border-right:none}
  .produce-row>*:nth-child(n+4){border-bottom:1px solid var(--line)}
  .produce-row>*:last-child{border-bottom:none}
  .shelf-row{grid-template-columns:1fr}
  .shelf{border-right:none}
  .cat-list .gcard{flex-direction:column}
  .cat-list .gcard .gcard-photo{width:100%;aspect-ratio:3/2}
  a.sponsor{flex-direction:column;align-items:flex-start;gap:12px}
  a.sponsor img{max-width:70%}
  .site-nav{gap:10px 18px;font-size:12.5px}
  .statrow{gap:18px 28px}
  .pullquote{padding-left:18px}
}
@media print{
  .topstrip,.siteheader,.site-nav,.sitefooter,.larder,.post-end,.newsletter{display:none}
  body{background:#fff;color:#000}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent}

/* larder fix: even logos (no blowout) + only slot #1 carries text */
.foot-larder-grid a.sponsor img{object-fit:contain}
.foot-larder-grid a.sponsor .sponsor-blurb:empty{display:none}

/* fix: center the article reading column (was left-indented while header is centered) */
.post-body,.post-end{margin-left:auto!important;margin-right:auto!important}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img{object-fit:contain!important}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.foot-larder-grid .sponsor.sponsor img{height:38px!important}

/* op-footer-compact: the footer printed 13 rows for 18 link(s) in
   2 list(s) — 2386px at 390, 34% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 2386 -> 2018px (15% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:min(2.5vw,36px)!important;row-gap:6px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:28px}
}

/* op-blurb-rows: money blurbs ran to 6 rows at 390, 1346px of tier across
   12 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .foot-larder-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:57px!important;min-height:0!important;overflow:hidden!important}
}

/* op-last-completes: .foot-larder-grid — Design's own full-width tile (tile 1) spans the phone row at every count; with 12 tiles the grid ended on a lone tile beside an empty cell, so the last tile completes the row. Parity-guarded (steps aside when the pairs close by themselves); only while two per row. */
@media (max-width:1080px){
  .foot-larder-grid:has(> *:nth-child(even):last-child) > *:last-child:nth-child(n+2){grid-column:1 / -1!important}
}
/* op-last-completes:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--serif); font-weight: 400; line-height: 1.2; margin: 0px; text-wrap: pretty;}
.gcard h2:where(.rt-h3){font-size: 21px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;}
.gcard:hover h2:where(.rt-h3){color: var(--russet);}
.cat-list .gcard h2:where(.rt-h3){min-height: 0px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.gcard > span.gcard-photo > img,
  article > figure.post-hero > img,
  div.post-body > figure.article-figure > img,
  li > a > img,
  section.hero > figure.hero-photo > img){height:auto}
/* op-img-dims:end */
.foot-larder-grid a.sponsor[data-partner="1"] .sponsor-blurb.sponsor-blurb{max-height:3lh!important}
@media (max-width:1099px){.recipe-card.recipe-card{width:100%!important}}
@media (min-width:1100px) and (max-width:1159px){.recipe-card.recipe-card{width:100%!important}}