/* Pumpkind design tokens (names match the design system, which ds/bundle.css reads) */
:root {
  --bg-hero: #37a5d8; --bg-mist: #cfe7f2; --bone: #fffceb; --surface-dark: #1d1a17; --ink: #1d1a17; --ink-muted: #5c564e;
  --ink-muted-dark: #a9a195; --gold: #f5a623; --frost: #c9e7e3; --husk: #dcd6c3; --coral: #ff8a5c; --blush: #ffc2a8;
  --sprout: #b9d98c; --tan: #d9a866; --pumpkin: #ff7a2e; --pumpkin-shade: #d9531a; --crust-deep: #d98a12;
  --filling: #9a4518; --cream: #fff6e3; --stem: #4e6b2e; --tin: #b8a58e; --focus: #1d1a17;
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 160px;
  --radius-xs: 2px; --radius-sm: 6px; --radius-letter: 8px; --hairline: 0.5px;
  --gutter: var(--space-4); --section: var(--space-9);
}
@media (min-width: 861px) { :root { --gutter: var(--space-6); --section: var(--space-10); } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
h1, .h1 { margin: 0; font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; text-transform: uppercase; }
h2 { margin: 0; font-weight: 400; font-size: clamp(32px, 4vw, 40px); line-height: 1.1; text-transform: uppercase; }
h3 { margin: 0; font-weight: 400; font-size: clamp(22px, 3vw, 28px); line-height: 1.2; text-transform: uppercase; }
h4 { margin: 0; font-weight: 400; font-size: 22px; line-height: 1.3; text-transform: uppercase; }
p { margin: 0; font-size: 16px; line-height: 22px; }
.lead { font-weight: 300; font-size: 18px; line-height: 26px; }
.h3-light { font-weight: 300; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25; max-width: 560px; }
.small { font-size: 14px; line-height: 20px; }
.mono { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; }
.muted { color: var(--ink-muted); }
.muted-dark { color: var(--ink-muted-dark); }
.gold { color: var(--gold); }

#hero { color: var(--ink); }
#hero h1.pk-h4, #hero p.pk-h4 { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; }
/* Hero CTA at twice the design system's button size. Ink on pumpkin is 6.7:1; bone on pumpkin would fail at 2.6:1. */
#hero .pk-hero-cta { font-size: 24px; line-height: 32px; padding: 20px 28px; gap: 12px; background: var(--ink); color: var(--bone); }
#hero .pk-hero-cta:hover { background: var(--pumpkin); color: var(--ink); }
/* Frozen nav: the header and menu stay pinned to the viewport; the bar fills in once the wordmark docks. */
#hero .pk-header { position: fixed; padding-bottom: var(--space-4); transition: background-color .2s; }
#hero .pk-header.is-stuck { background: var(--bg-hero); border-bottom: var(--hairline) solid var(--ink); }
#hero .pk-menu { position: fixed; }
.pk-header-logo { display: flex; align-items: center; gap: var(--space-3); }
.pk-header-mark { width: 150px; opacity: 0; }
.pk-header-mark.is-docked { opacity: 1; }
#hero .pk-hero-mark > div { will-change: transform; }
.pk-banner.is-hidden { visibility: hidden; }
@media (max-width: 860px) { .pk-header-mark { width: 116px; } }
main section[id] { scroll-margin-top: 72px; }
.pk-menu-foot a { color: var(--bone); text-decoration: none; }
.pk-menu-foot a:hover { color: var(--gold); }

section { padding: var(--section) var(--gutter); }
.mist { background: var(--bg-mist); }
.statement { max-width: 900px; margin: 0 auto; font-size: clamp(26px, 3.1vw, 44px); line-height: 1.15; letter-spacing: -0.01em; text-align: center; }
.wrap { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.row-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.section-head { margin-bottom: var(--space-7); }

.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); align-items: start; }
.path { display: flex; flex-direction: column; gap: var(--space-3); }
.path-panel { aspect-ratio: 1 / 1; }
.path-panel img { width: 86%; height: auto; }
.card-title { font-size: 24px; line-height: 29px; }
@media (min-width: 861px) { .path.stagger { margin-top: var(--space-9); } }

.recipe-top { padding: var(--space-6) var(--gutter) var(--section); color: var(--ink); display: flex; flex-direction: column; gap: var(--space-5); }
.recipe-top a { color: var(--ink); }
.recipe-title { font-weight: 900; font-size: clamp(48px, 9vw, 120px); line-height: 0.9; margin-top: var(--space-8); }
.recipe-fit { display: flex; flex-direction: column; gap: 8px; }
.recipe { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-6); border-bottom: var(--hairline) solid var(--ink); }
.recipe ol { display: flex; flex-direction: column; gap: 8px; }

.dark { background: var(--surface-dark); color: var(--bone); }
.dark a { color: var(--gold); }
.dark a:hover { color: var(--bone); }
.how-title { max-width: 760px; margin-bottom: var(--space-7); }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3) var(--space-5); padding: var(--space-6) 0; border-top: var(--hairline) solid var(--ink-muted-dark); }
.steps li:last-child { border-bottom: var(--hairline) solid var(--ink-muted-dark); }
.safety { margin-top: var(--space-7); }

.panel { background: var(--bg-mist); border-radius: var(--radius-sm); padding: clamp(20px, 4vw, 48px); display: flex; flex-direction: column; gap: 24px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.divider { padding-top: 24px; border-top: var(--hairline) solid var(--ink); }

.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 20px; border: var(--hairline) solid var(--ink); border-radius: var(--radius-xs); background: transparent; color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.btn.primary { background: var(--ink); color: var(--bone); }
.btn.solid { background: var(--husk); }
.btn.go { background: var(--pumpkin); }
.btn.link { border: 0; padding-left: 0; padding-right: 0; text-decoration: underline; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--bone); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 180px; padding: 24px;
  border: var(--hairline) dashed var(--ink); border-radius: var(--radius-sm); background: var(--bone); text-align: center; cursor: pointer; }
.drop:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop.is-full { cursor: default; border-style: solid; }
.thumbs { display: flex; gap: 16px; padding-top: 10px; }
.thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.thumb { position: relative; }
.thumb-x { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ink); color: var(--bone); font-size: 18px; line-height: 28px; cursor: pointer; }
.thumb-x:hover { background: var(--pumpkin); color: var(--ink); }
.thumb-x:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

fieldset { margin: 0; padding: 16px 0 0; border: 0; border-top: var(--hairline) solid var(--ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
legend { float: left; padding: 0; font-size: 18px; line-height: 26px; }
label.field { display: flex; flex-direction: column; gap: 8px; }
input[type="text"], input[type="number"], select { min-height: 44px; padding: 0 12px; border: var(--hairline) solid var(--ink); border-radius: var(--radius-xs); background: var(--bone); color: var(--ink); font: inherit; font-size: 16px; }

.answer { border-radius: var(--radius-sm); padding: clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.answer .poster { font-weight: 900; font-size: clamp(40px, 6vw, 56px); line-height: 0.93; text-transform: uppercase; }
.answer-art { width: min(100%, 420px); height: auto; align-self: center; }
.result-block { background: var(--bone); border-radius: var(--radius-sm); padding: clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.result-block.feedback { background: transparent; border: var(--hairline) dashed var(--ink); }
.zip-finder { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.zip-finder input { width: 140px; }
.zip-finder .btn { white-space: nowrap; justify-content: center; }
/* Too narrow for side by side: stack the field and button at the same full width. */
@media (max-width: 560px) { .zip-finder > * { flex: 1 1 100%; } .zip-finder input { width: 100%; } }
.answer.eat { background: var(--coral); } .answer.feed { background: var(--sprout); } .answer.compost { background: var(--tan); }
ul, ol { margin: 0; padding-left: 20px; font-size: 16px; line-height: 22px; }
.card { background: var(--bone); border-radius: var(--radius-sm); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.error { background: var(--bone); border-radius: var(--radius-sm); padding: 16px; }

footer { padding: var(--section) var(--gutter) 32px; display: flex; flex-direction: column; gap: var(--space-7); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-7); }
.pitch { max-width: 560px; font-weight: 300; font-size: 20px; line-height: 26px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
footer .footer-links a { color: var(--bone); text-decoration: none; font-weight: 300; font-size: 20px; line-height: 26px; }
footer .footer-links a:hover { color: var(--gold); }
.footer-mark { color: var(--bone); }