/* Open Pantry: hopeful, dignified, warm. Cream and forest with a harvest-gold action;
   Bitter slab headings; the dollars-to-meals slider and the goal bar are the signature. */
:root {
  --bg: #FFF8EC; --surface: #FFFDF8; --surface-2: #F6EBD6; --line: #E5D6BA;
  --ink: #1D2B24; --ink-soft: #4C5A52; --heading: #1D2B24;
  --primary: #F2A541; --primary-ink: #1D2B24; --primary-hover: #F6B862;
  --accent: #A33B20; --accent-ink: #FFFFFF;
  --dark: #24453A; --on-dark: #FFF8EC; --on-dark-soft: #CFDDD5;
  --kicker: #A33B20; --kicker-on-dark: #F2C27F; --link: #2F5A4B; --field-border: #8B7D62; --star: #A33B20;
  --ph-a: #F2E5CB; --ph-b: #EADBBD; --ph-edge: #8B7D62;
  --display: "Bitter", Georgia, serif; --body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --display-weight: 700; --display-lh: 1.1;
  --radius: 10px; --radius-lg: 16px; --btn-radius: 10px; --chip-radius: 999px; --field-radius: 8px;
  --check: #24453A; --ico-bg: #F6EBD6; --ico-ink: #A33B20;
}
.btn { border-color: var(--ink); }
.section--dark .btn:not(.btn--ghost) { border-color: var(--primary); }
.eyebrow { font-weight: 700; color: var(--accent); }
.section--dark .eyebrow { color: #F2C27F; }

.hero { padding-block: clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.2rem); font-weight: 800; }
.hero-side .photo { border-radius: var(--radius-lg) var(--radius-lg) 120px var(--radius-lg); }

.goal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 8px; max-width: 520px; }
.goal-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.goal-head strong { font-family: var(--display); font-size: 1.3rem; }
.goal-bar { height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.goal-bar span { display: block; height: 100%; background: var(--dark); border-radius: 7px; }

.numbers { background: var(--dark); color: var(--on-dark); }
.numbers ul { list-style: none; padding: 32px 0 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.numbers li { display: grid; gap: 4px; }
.numbers .n { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); color: #F2C27F; line-height: 1; }
.numbers li span:last-child { color: var(--on-dark-soft); }
.numbers .small { color: var(--on-dark-soft); padding-bottom: 20px; }

.give-wrap { display: grid; gap: 10px; }
.give { background: var(--surface); border: 2px solid var(--dark); border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 14px; min-width: 0; }
.give-toggle { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border-radius: 999px; padding: 4px; }
.give-toggle button { font: inherit; font-weight: 700; border: 0; background: transparent; border-radius: 999px; min-height: 40px; cursor: pointer; color: var(--ink); }
.give-toggle button[aria-pressed="true"] { background: var(--dark); color: var(--on-dark); }
.give-label { font-weight: 600; }
.give-label output { font-family: var(--display); font-weight: 800; font-size: 1.6rem; margin-left: 4px; }
.give input[type=range] { width: 100%; accent-color: var(--dark); height: 32px; }
.give-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.give-chips button { font: inherit; font-weight: 700; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--field-border); background: transparent; cursor: pointer; color: var(--ink); }
.give-chips button:hover { border-color: var(--dark); }
.give-meals { font-family: var(--display); font-size: 1.2rem; }
.give-meals strong { font-size: 3rem; color: var(--accent); font-weight: 800; line-height: 1; margin-right: 6px; }
.give-what { color: var(--ink-soft); }
.give .btn { justify-self: start; }
.give-note { color: var(--ink-soft); }
.give--big { padding: clamp(24px, 4vw, 36px); }

.head-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.prog { display: grid; gap: 10px; align-content: start; }
.prog p { color: var(--ink-soft); }
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.story { display: grid; gap: 10px; align-content: start; }
.story .photo { --ar: 4 / 5 !important; }
.story p { color: var(--ink-soft); font-style: italic; font-family: var(--display); font-weight: 500; }

.split-bar { display: flex; height: 44px; border-radius: 8px; overflow: hidden; }
.split-bar span:nth-child(1) { background: var(--dark); color: var(--on-dark); font-weight: 700; display: flex; align-items: center; padding-left: 14px; }
.split-bar span:nth-child(2) { background: var(--primary); } .split-bar span:nth-child(3) { background: var(--accent); }
.legend { list-style: none; padding: 0; display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 0.92rem; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.l1 { background: var(--dark); } .l2 { background: var(--primary); } .l3 { background: var(--accent); }
.ratings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.ratings .small { grid-column: 1 / -1; }
.seal-slot { min-height: 76px; display: grid; place-items: center; color: var(--dark, #23463A); background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; transition: color .25s ease, transform .25s ease; }
.seal-slot:hover { color: var(--accent); transform: translateY(-2px); }
.seal-slot svg { width: 100%; max-width: 210px; height: auto; display: block; }
.rating-slot, .logo-slot { border: 1.5px dashed var(--field-border); border-radius: var(--radius); min-height: 80px; display: grid; place-items: center; text-align: center; padding: 10px; font-size: 0.85rem; color: var(--ink-soft); }
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.need { background: var(--dark); color: var(--on-dark); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 12px; align-content: start; }
.need h3 { color: var(--on-dark); font-size: 1.6rem; }
.need p { color: var(--on-dark-soft); }
.need .btn { justify-self: start; color: var(--on-dark); border-color: var(--on-dark); }

.drop::first-letter { font-family: var(--display); float: left; font-size: 3.8rem; line-height: 0.85; padding: 6px 10px 0 0; color: var(--accent); font-weight: 800; }
.pr-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: start; scroll-margin-top: 100px; }
.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.impact-grid article { padding: 24px 20px 24px 0; border-bottom: 1px solid var(--line); }
.impact-grid .n { font-family: var(--display); font-weight: 800; font-size: 3rem; color: var(--dark); line-height: 1; }
.docs { list-style: none; padding: 0; display: grid; gap: 12px; }
.docs li { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.docs svg { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; }
.news { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: center; background: var(--surface-2); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); }
.news-form { display: flex; gap: 10px; flex-wrap: wrap; }
.news-form input { flex: 1 1 200px; }
.news .form-success { grid-column: 1 / -1; }
.events { list-style: none; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.events li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ev-d { font-family: var(--display); font-weight: 700; color: var(--accent); }
.agree { display: flex; gap: 10px; align-items: center; }
.agree input { width: 20px; height: 20px; accent-color: var(--dark); }
.pay-slot { border: 1.5px dashed var(--field-border); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--ink-soft); font-size: 0.9rem; }

@media (max-width: 1020px) { .numbers ul { grid-template-columns: repeat(2, 1fr); } .impact-grid { grid-template-columns: repeat(2, 1fr); } .logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .hero-grid, .prog-grid, .stories, .pr-row, .news { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .numbers ul, .impact-grid, .logos { grid-template-columns: 1fr 1fr; } .ratings { grid-template-columns: 1fr; } }

/* ---- Motion: generosity (Open Pantry Collective) ---- */
:root { --shine: rgba(255, 255, 255, .5); }
@keyframes op-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes op-stripes { to { background-position: 28px 0; } }
@keyframes op-float { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--hx)), -90px) scale(var(--hs)); } }
@keyframes op-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
html.mo .goal-bar span { transform-origin: left; animation: op-fill 1.8s .8s cubic-bezier(.6, 0, .2, 1) both;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 10px, transparent 10px 20px); background-size: 28px 100%; }
html.mo .goal-bar span { animation: op-fill 1.8s .8s cubic-bezier(.6, 0, .2, 1) both, op-stripes 1.2s linear infinite; }
html.mo .split-bar.rv.in span:nth-child(1) { transform-origin: left; animation: op-fill 1.4s .3s cubic-bezier(.6, 0, .2, 1) both; }
html.mo .hero-side .photo { animation: bf-rise 1s .2s cubic-bezier(.2, .7, .2, 1) both; }
.op-heart { position: absolute; z-index: 60; pointer-events: none; width: 16px; height: 16px; margin-top: -6px; opacity: 0;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23A33B20' d='M12 21s-7.5-4.6-9.5-9.3C1 8 3.4 4.5 7 4.5c2 0 3.5 1.1 5 3 1.5-1.9 3-3 5-3 3.6 0 6 3.5 4.5 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
  animation: op-float 1.4s var(--hd, 0ms) ease-out forwards; }
html.mo .give-meals strong { display: inline-block; }
html.mo .op-bump { animation: op-bump .4s ease; }
html.mo .give-chips button, html.mo .give-chips label { transition: transform .2s ease; }
html.mo .give-chips button:hover, html.mo .give-chips label:hover { transform: translateY(-2px); }