:root{--field: #F7F1E5;--panel: #FFFDF8;--ink: #2E3B23;--furrow: #5C6650;--stubble: #EBDDC4;--pumpkin: #E0700F;--pumpkin-deep: #C25E0A;--open: #3F6B2E;--closed: #A8563C;--green-dark: #22371F;--green-deeper: #1B2C19;--gold: #D9A24B;--radius: 14px;--shadow: 0 2px 10px rgba(46,59,35,.07);--display: "Fraunces", Georgia, serif;--body: "Nunito Sans", system-ui, -apple-system, sans-serif;--w: 1180px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{margin:0;background:var(--field);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit}img{max-width:100%;display:block}.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:0;margin:0}h1{font-size:clamp(38px,5.6vw,58px)}h2{font-size:clamp(25px,3.2vw,34px);font-weight:700}h3{font-size:21px;font-weight:600}.eyebrow{font-family:var(--body);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--furrow);margin:0}.lede{font-size:19px;color:var(--furrow);font-weight:600;max-width:56ch;margin:14px 0 0}.muted{color:var(--furrow)} .masthead{background:var(--green-dark);border-bottom:none} .masthead-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;max-width:var(--w);margin:0 auto;flex-wrap:wrap} .brand-mark{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.05;text-decoration:none;color:#F5EFE2} .brand-mark .leaf{width:20px;height:20px;color:var(--gold);flex-shrink:0} .brand-mark small{display:block;font-family:var(--body);font-weight:800;font-size:.62rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase} .wordmark{font-family:var(--display);font-weight:700;font-size:21px;text-decoration:none;color:#F5EFE2} .wordmark span{color:var(--gold)} .nav{display:flex;gap:20px;font-size:15.5px;font-weight:700;flex-wrap:wrap;align-items:center} .nav a{text-decoration:none;color:#F5EFE2;opacity:.9} .nav a:hover{opacity:1;color:#F2B45C} .nav .carve-link{color:#F5EFE2;opacity:1;border:1.5px solid var(--gold);border-radius:999px;padding:6px 14px;font-size:14px} .nav .carve-link:hover{background:var(--gold);color:var(--green-deeper)} .foot{border-top:none;background:var(--green-deeper);margin-top:72px;padding:44px 0 28px;font-size:14px;color:#C9C2AE} .foot-in{display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between;align-items:center} .foot a{color:#C9C2AE;text-decoration:none} .foot a:hover{color:var(--gold)} .season{margin-top:14px} .season-track{position:relative;height:16px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--stubble) 0 1px,transparent 1px 100%) 0 0/ 10% 100%,#F1E8D4;overflow:hidden} .season-band{position:absolute;top:0;bottom:0;background:var(--open);border-radius:4px} .season-band[data-state=over]{background:var(--closed)} .season-today{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)} .season-track[data-unknown=yes]{background:#F1E8D4;border:1px dashed var(--stubble)} .season-scale{display:flex;justify-content:space-between;font-family:var(--body);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--furrow);margin-top:5px} .season-text{font-family:var(--body);font-weight:700;font-size:14px;margin-top:7px;color:var(--furrow)} .season-text b{color:var(--ink);font-weight:800} .pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--body);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid currentColor} .pill[data-s=open]{color:var(--open)} .pill[data-s=soon]{color:var(--pumpkin)} .pill[data-s=over]{color:var(--closed)} .pill[data-s=unknown]{color:var(--furrow)} .pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .grid{display:grid;gap:16px} @media (min-width:700px){.grid-2{grid-template-columns:1fr 1fr}} @media (min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}} .card{background:var(--panel);border:1px solid var(--stubble);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;text-decoration:none;display:block;transition:border-color .14s,transform .14s} a.card:hover{border-color:var(--pumpkin);transform:translateY(-3px)} .card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .card h3{margin:0} .card-meta{font-size:15px;color:var(--furrow);font-weight:600;margin:5px 0 0} .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding:0;list-style:none} .tags li{font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--field);border:1px solid var(--stubble);color:var(--furrow)} .chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none} .chips a{display:inline-block;text-decoration:none;font-size:15.5px;font-weight:700;padding:9px 16px;border:1px solid var(--stubble);border-radius:999px;background:var(--panel);color:var(--ink)} .chips a:hover{border-color:var(--pumpkin);color:var(--pumpkin)} .chips a[aria-current=page]{background:var(--green-dark);color:#fff;border-color:var(--green-dark)} .chips .n{font-family:var(--body);font-weight:800;font-size:13px;color:var(--furrow);margin-left:5px} .chips a[aria-current=page] .n{color:var(--stubble)} .hero{padding:64px 0 46px;border-bottom:1px solid var(--stubble)} .hero h1{margin-top:16px} .hero h1 em{font-style:normal;color:var(--pumpkin)} .hero-stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:34px} .stat b{font-family:var(--display);font-weight:700;font-size:33px;display:block;line-height:1} .stat span{font-family:var(--body);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--furrow)} .section{padding:52px 0 0} .section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px} .detail{display:grid;gap:34px;padding-top:40px} @media (min-width:880px){.detail{grid-template-columns:1fr 320px;align-items:start}} .panel{background:var(--panel);border:1px solid var(--stubble);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px} .kv{margin:0;font-size:16px} .kv dt{font-family:var(--body);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--furrow);margin-top:16px} .kv dt:first-child{margin-top:0} .kv dd{margin:3px 0 0} .btn{display:block;text-align:center;background:var(--pumpkin);color:#fff;font-weight:800;font-size:16.5px;padding:13px 20px;border-radius:999px;text-decoration:none;margin-top:18px;font-family:var(--body)} .btn:hover{background:var(--pumpkin-deep)} .crumb{font-family:var(--body);font-weight:700;font-size:13px;color:var(--furrow);padding-top:24px} .crumb a{text-decoration:none} .crumb a:hover{color:var(--pumpkin)} .hero-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--stubble);border-radius:999px;box-shadow:var(--shadow);padding:6px 6px 6px 20px;max-width:560px;margin-top:22px} .hero-search input{flex:1;border:none;outline:none;background:transparent;font-family:var(--body);font-size:17px;font-weight:600;color:var(--ink);padding:12px 0} .hero-search input::placeholder{color:var(--furrow);font-weight:600} .hero-search button{flex:none;border:none;background:var(--pumpkin);color:#fff;font-family:var(--body);font-weight:800;font-size:15px;padding:14px 26px;border-radius:999px;cursor:pointer;transition:background .14s} .hero-search button:hover{background:var(--pumpkin-deep)} #unified-search-results{max-width:560px} @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* ============================================================ HOMEPAGE DESIGN UPGRADE (Aug 2026) Photo hero, photo state cards, activity icon tiles, elevation. Appended so existing rules above are untouched. ============================================================ */ :root{ --shadow-1: 0 1px 3px rgba(46,59,35,.08); --shadow-2: 0 8px 24px rgba(46,59,35,.14); } /* ---- Photo hero band ---- */ .hero-photo{ position:relative; padding:64px 0 108px; border-bottom:none; background: linear-gradient(180deg, rgba(27,44,25,.72) 0%, rgba(27,44,25,.5) 45%, var(--field) 100%), url('/img/hero-pumpkins.jpg') center/cover; } .hero-photo .eyebrow{color:var(--gold)} .hero-photo h1{color:#fff;margin-top:8px} .hero-photo h1 em{font-style:normal;color:var(--gold)} .hero-photo .lede{color:#EDE6D3;font-weight:500} .hero-photo .hero-search{box-shadow:var(--shadow-2)} .hero-photo .geo-link{color:#fff} @media (max-width:700px){ .hero-photo{padding:44px 0 84px} } /* Pull the first section up so it overlaps the hero (adds depth) */ .section-overlap{margin-top:-64px;position:relative;z-index:2;padding-top:0} /* ---- Activity icon tiles ---- */ .act-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px} @media (max-width:820px){.act-tiles{grid-template-columns:repeat(3,1fr)}} @media (max-width:440px){.act-tiles{grid-template-columns:repeat(2,1fr)}} .act-tile{ background:var(--panel);border-radius:12px;box-shadow:var(--shadow-1); padding:18px 8px 14px;text-align:center;text-decoration:none;color:inherit; transition:box-shadow .15s, transform .15s;display:block; } .act-tile:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)} .act-tile .icon{width:53px;height:53px;object-fit:contain;margin:0 auto;display:block} .act-tile .label{font-size:13px;font-weight:700;color:var(--ink);margin-top:8px} /* ---- State cards with photo thumbnails, uniform 2-across ---- */ .state-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:12px} @media (max-width:640px){.state-grid{grid-template-columns:1fr}} .state-card{ background:var(--panel);border-radius:14px;overflow:hidden; box-shadow:var(--shadow-1);text-decoration:none;color:inherit; display:flex;flex-direction:column;transition:transform .15s, box-shadow .15s; } .state-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)} .state-card .thumb{ height:150px;background-size:cover;background-position:center; position:relative;background-color:var(--stubble); } .state-card .thumb::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 45%,rgba(27,44,25,.6) 100%); } .state-card .thumb .count{ position:absolute;bottom:10px;left:12px;color:#fff;font-size:12px;font-weight:800; background:rgba(27,44,25,.55);border-radius:999px;padding:3px 11px;z-index:1; } .state-card .sbody{padding:14px 16px} .state-card h3{font-family:var(--display);font-weight:600;font-size:19px;margin:0 0 3px} .state-card .smeta{font-size:13px;color:var(--furrow);margin:0} /* ---- Trust strip ---- */ .trust-strip{ display:flex;align-items:center;gap:10px;margin-top:24px; padding:14px 18px;background:var(--panel);border-radius:12px;box-shadow:var(--shadow-1); } .trust-strip .check{color:var(--open);font-size:18px;flex:none} .trust-strip span.msg{font-size:14.5px;font-weight:600;color:var(--ink)} /* ============================================================ STATE PAGE HERO (Aug 2026) Same gradient as homepage .hero-photo, but with a per-state background image swapped in via inline style instead of a hardcoded url(). ============================================================ */ .hero-photo-state{ position:relative; padding:64px 0 100px; border-bottom:none; background: linear-gradient(180deg, rgba(27,44,25,.72) 0%, rgba(27,44,25,.5) 45%, var(--field) 100%), var(--hero-img) center/cover; } .hero-photo-state .crumb{color:#EDE6D3} .hero-photo-state .crumb a{color:#EDE6D3} .hero-photo-state .eyebrow{color:var(--gold)} .hero-photo-state h1{color:#fff;margin-top:8px} .hero-photo-state .lede{color:#EDE6D3;font-weight:500} @media (max-width:700px){ .hero-photo-state{padding:44px 0 70px} } /* ============================================================ HOMEPAGE v2 - LOCATION-FIRST (Aug 2026) Activity tile row removed from the homepage; state grid moved up under the hero. State cards now show the farm count in the card body instead of on the photo, and truncate their region list so every card is the same height. Appended so everything above is untouched. The .act-tile and .state-card .thumb .count rules above are now unused by index.astro but left in place - .act-tile is still referenced by nothing, harmless, and safe to delete later. ============================================================ */ /* ---- Hero: "Use my location" promoted from link to button ---- */ .geo-btn{ display:flex;align-items:center;justify-content:center;gap:9px; max-width:560px;margin-top:12px; background:#F3E9D4;border:1px solid var(--stubble);border-radius:999px; padding:13px 20px; font-family:var(--body);font-weight:800;font-size:16.5px; color:var(--green-dark);text-decoration:none; box-shadow:var(--shadow-1); transition:background .14s,border-color .14s,color .14s; } .geo-btn:hover{background:#fff;border-color:var(--pumpkin);color:var(--pumpkin-deep)} .geo-btn-pin{font-size:18px;line-height:1;color:var(--pumpkin);flex:none} .geo-btn:hover .geo-btn-pin{color:var(--pumpkin-deep)} .hero-photo .geo-btn{box-shadow:var(--shadow-2)} /* ---- State cards v2 ---- */ /* Count moved off the photo and into the body next to the state name - it's the strongest trust signal on the card and was previously 12px white text over a busy image. */ .state-card .sbody{ padding:14px 16px; display:flex;flex-direction:column;gap:3px; min-height:104px; } .state-card .shead{ display:flex;align-items:baseline;justify-content:space-between;gap:10px; } .state-card .shead h3{margin:0} .state-card .scount{ font-family:var(--body);font-weight:800;font-size:14.5px; color:var(--pumpkin);white-space:nowrap;flex:none; } /* Clamped to two lines so a state with five long region names (PA: "Harrisburg & Cumberland Valley") can't push its card taller than its row neighbour. */ .state-card .smeta{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;margin:0; } .state-card .smore{ font-size:13px;font-weight:700;color:var(--furrow);margin:0; } .state-card:hover .smore{color:var(--pumpkin)} /* With the tile row gone the state grid is the first thing under the hero, so it needs a little less negative pull than the tiles did. */ .section-overlap{margin-top:-48px} @media (max-width:640px){ .section-overlap{margin-top:-40px} .state-card .sbody{min-height:0} } /* Date-evidence block on farm pages -- added 2026-09-20. Lives here rather than in a scoped