/* PRODUCE (20 Oct 2026) - on top of ../page.css. Public House's calm: one sentence, then each supplier as a photograph and a few
   words, square corners, hairline-quiet. */
:root{--accent:var(--green);--accent-ink:#fff}
.mission{padding:110px var(--pad) 40px;text-align:center}
.mission p{margin:0 auto;max-width:32ch;font-family:var(--head);font-weight:400;font-size:clamp(24px,2.6vw,40px);line-height:1.2;letter-spacing:-0.01em;color:var(--ink)}
/* each supplier is a story (Georgia's video review via Nuo, 4 Nov 2026 ('All of it'), after publichousegroup.com/produce): a large
   photograph and its words beside it, sides alternating, the films between the first story and the rest */
.suppliers,.more{padding:40px var(--pad)}
.story{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center;margin:0 0 clamp(64px,8vw,120px)}
.story:last-child{margin-bottom:40px}
.story.flip figure{order:2}
.story figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#e6ddd7}
.story figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.story:hover figure img{transform:scale(1.03)}}
.story .what{font-family:var(--head);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6b6560}
.story h2{margin:8px 0 0;font-family:var(--head);font-weight:400;font-size:clamp(24px,2.4vw,36px);letter-spacing:-0.01em;line-height:1.1}
.story p{margin:16px 0 0;font-size:17px;line-height:1.6;color:#2b2926}
.pledge{padding:40px var(--pad) 110px;text-align:center}
.pledge p{margin:0 auto;font-family:var(--head);font-weight:400;font-size:clamp(20px,2vw,28px);line-height:1.3;letter-spacing:-0.01em;color:var(--ink)}
/* the seasonality calendar (Prue, 5 Nov 2026): four months a row, plain type, this month outlined */
.seasons{padding:40px var(--pad) 40px}
.seasons h2{margin:0;text-align:center;font-family:var(--head);font-weight:400;font-size:clamp(24px,2.4vw,36px);letter-spacing:-0.01em;text-transform:uppercase}
.seasons .sdraft{margin:10px auto 0;max-width:none;text-align:center;font-size:13px;color:#6b6560}
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:36px;background:#d9cfc8;border:1px solid #d9cfc8}
.smonth{background:var(--sand);padding:22px 22px 24px;min-width:0}
.smonth.now{outline:2px solid var(--ink);outline-offset:-2px;position:relative;z-index:1}
.smonth h3{margin:0 0 14px;font-family:var(--head);font-weight:400;font-size:15px;letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.smonth .snow{font-size:11px;letter-spacing:.12em;color:#6b6560}
.smonth dl{margin:0}
.smonth dt{font-family:var(--head);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6b6560;margin-top:12px}
.smonth dt:first-child{margin-top:0}
.smonth dd{margin:4px 0 0;font-size:15px;line-height:1.5;color:#2b2926}
.pledge .uk{margin-top:14px;font-size:clamp(16px,1.4vw,20px);color:#2b2926}
@media (max-width:1100px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sgrid{grid-template-columns:1fr}.smonth{padding:18px 16px}}
@media (max-width:860px){.mission{padding-top:64px}.story{grid-template-columns:1fr;gap:20px;margin-bottom:56px}.story.flip figure{order:0}.story p{font-size:15px}.pledge{padding-bottom:72px}}

/* ONE LINE, SMALLER (Nuo, 6 Nov 2026, 12:19): the sentence on one line on a desktop, sized so its 94 characters of mono fit the column;
   a narrower screen lets it wrap at the same small size */
.mission p{max-width:none;font-size:clamp(15px,1.42vw,26px);line-height:1.4}
@media (min-width:1101px){.mission p{white-space:nowrap}}

/* a phone shows only this London month (Nuo, 6 Nov 2026, 18:16: "Only show current month on mobile"); no month known = all twelve */
@media (max-width:760px){.sgrid.hasnow .smonth:not(.now){display:none}.sgrid.hasnow{grid-template-columns:1fr}.sgrid.hasnow .smonth.now{outline:0}}
/* TWO LINES (Nuo, 6 Nov 2026, 22:56): each half (produce.js twoLines) is a nowrap line; the type is sized by the column so the longer
   half (48 characters of mono at 0.59em) fits: 100cqi / 29.5, capped at 34px, floored at 11px (phone floor). Under 360px the halves
   may wrap, balanced, so no word is ever left alone on a line. */
.mission{container-type:inline-size}
.mission p{font-size:clamp(11px,calc(100cqi / 29.5),34px);line-height:1.35;white-space:normal;text-wrap:balance}
.mission p .ml{display:block;white-space:nowrap}
@media (max-width:359px){.mission p .ml{white-space:normal;text-wrap:balance}}