/* Hallmark · macrostructure: Catalogue (ruled multi-column field list) · tone: utilitarian · anchor hue: forest green 133
 * theme: studied-DNA (source: wellspringvfrc.org brand tokens) · paper oklch(96.4% 0.011 82) · accent oklch(70% 0.09 68) gold on oklch(37% 0.09 133) green
 * display: Playfair Display 700 (roman) · body: Source Sans 3 · print idiom: Colophon Field Guide (flush-left, ruled entries, roomy rules)
 * pre-emit critique: P4 H5 E4 S5 R5 V4
 */
@import url("fonts/fonts.css");

:root{
  --color-paper:oklch(96.4% 0.011 82);          /* Wellspring cream #F7F3EC */
  --color-paper-2:oklch(93% 0.016 82);
  --color-card:oklch(99% 0.004 82);
  --color-ink:oklch(21% 0.01 75);                /* #1C1A17 */
  --color-ink-2:oklch(45% 0.015 75);
  --color-rule:oklch(86% 0.02 80);
  --color-green:oklch(37% 0.09 133);             /* Wellspring green #2D5016 */
  --color-green-dk:oklch(28% 0.07 133);
  --color-on-green:oklch(96.4% 0.011 82);
  --color-on-green-2:oklch(86% 0.03 110);
  --color-gold:oklch(70% 0.09 68);               /* Wellspring gold #C4935A */
  --color-gold-ink:oklch(50% 0.09 60);           /* gold dark enough for text on cream */
  --color-focus:oklch(55% 0.13 245);
  --font-display:"Playfair Display",Georgia,serif;
  --font-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px;--space-2xl:64px;
  --text-sm:15px;--text-base:17px;--text-lg:20px;--text-xl:24px;--text-2xl:32px;--text-display:clamp(38px,6vw,64px);
  --rule-thin:1px;--rule-mid:2px;--rule-thick:3px;--rule-band:6px;
  --page:1240px;--measure:44rem;
}
@media (prefers-color-scheme:dark){:root{
  --color-paper:oklch(19% 0.02 133);--color-paper-2:oklch(23% 0.025 133);--color-card:oklch(22% 0.02 133);
  --color-ink:oklch(94% 0.01 82);--color-ink-2:oklch(76% 0.02 82);--color-rule:oklch(33% 0.03 133);
  --color-green-dk:oklch(16% 0.03 133);--color-gold-ink:oklch(78% 0.09 70);--color-focus:oklch(75% 0.12 245);color-scheme:dark}}

*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font:400 var(--text-base)/1.55 var(--font-body)}
[hidden]{display:none!important}
.wrap{max-width:var(--page);margin:0 auto;padding-left:max(var(--space-lg),env(safe-area-inset-left,0px));padding-right:max(var(--space-lg),env(safe-area-inset-right,0px))}
@media (max-width:480px){.wrap{padding-left:max(var(--space-md),env(safe-area-inset-left,0px));padding-right:max(var(--space-md),env(safe-area-inset-right,0px))}}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}

/* org strip */
.org{background:var(--color-green-dk);color:var(--color-on-green)}
.org .wrap{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);justify-content:space-between;align-items:center;padding-block:var(--space-sm);font-size:var(--text-sm)}
.org .brand{display:flex;gap:var(--space-sm);align-items:center;font-weight:700;text-decoration:none;white-space:nowrap}
.org img{width:28px;height:28px}
.org .out{color:var(--color-gold);font-weight:700;white-space:nowrap}

/* masthead */
.mast{background:var(--color-green);color:var(--color-on-green);border-bottom:var(--rule-band) solid var(--color-gold)}
.mast .wrap{padding-block:var(--space-xl) var(--space-lg);display:grid;gap:var(--space-sm)}
.date{font-weight:700;font-size:var(--text-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--color-gold)}
h1{font:700 var(--text-display)/1.05 var(--font-display);margin:0;text-wrap:balance;overflow-wrap:anywhere;min-width:0}
.towns{font-size:var(--text-lg);margin:0;color:var(--color-on-green-2);max-width:var(--measure)}
.crumb{font-size:var(--text-sm);margin:0;color:var(--color-on-green-2)}
.crumb a{color:var(--color-on-green);font-weight:700}

main .wrap{padding-block:var(--space-lg) var(--space-2xl);display:grid;gap:var(--space-lg)}
.lead{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-lg) var(--space-xl);align-items:start}
@media (max-width:860px){.lead{grid-template-columns:minmax(0,1fr)}}
.intro{font-size:var(--text-lg);margin:0;max-width:var(--measure)}
.bring{border-left:var(--rule-band) solid var(--color-gold);background:var(--color-paper-2);padding:var(--space-md) var(--space-lg);font-weight:600;margin:0}

/* where are you */
.where{background:var(--color-card);border:var(--rule-thin) solid var(--color-rule);border-top:var(--rule-band) solid var(--color-green);padding:var(--space-lg);display:grid;gap:var(--space-sm)}
.where h2{border:0;padding:0;margin:0;font-size:var(--text-xl);color:var(--color-ink)}
.where p{margin:0;color:var(--color-ink-2)}
.where form{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);align-items:end}
.where label{font-weight:700;display:block;margin-bottom:var(--space-xs)}
.where .field{flex:1 1 18rem;min-width:0}
.where input{width:100%;font:400 var(--text-lg) var(--font-body);color:var(--color-ink);background:var(--color-paper);border:var(--rule-mid) solid var(--color-ink-2);border-radius:2px;padding:10px 12px}
.btn{font:700 var(--text-base)/1 var(--font-body);background:var(--color-green);color:var(--color-on-green);border:var(--rule-mid) solid var(--color-green);border-radius:2px;padding:13px 20px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--color-green-dk);border-color:var(--color-green-dk)}
.btn:active{transform:translateY(1px)}
.linkbtn{background:none;border:0;padding:0;font:600 var(--text-sm) var(--font-body);color:var(--color-ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#whereMsg{font-weight:600;color:var(--color-ink)}

/* filters: plain words, active one underlined in gold */
.filters{display:grid;gap:var(--space-sm);border-top:var(--rule-mid) solid var(--color-ink);border-bottom:var(--rule-thin) solid var(--color-rule);padding-block:var(--space-md)}
.frow{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg);align-items:baseline}
.flabel{font-weight:700;font-size:var(--text-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-2);min-width:3.5rem}
.fbtn{background:none;border:0;padding:var(--space-xs) 0;font:600 var(--text-base)/1.2 var(--font-body);color:var(--color-ink-2);cursor:pointer;border-bottom:var(--rule-thick) solid transparent;white-space:nowrap}
.fbtn:hover{color:var(--color-ink)}
.fbtn[aria-pressed="true"]{color:var(--color-ink);font-weight:700;border-bottom-color:var(--color-gold)}
.search{font:400 var(--text-base) var(--font-body);color:var(--color-ink);background:transparent;border:0;border-bottom:var(--rule-mid) solid var(--color-ink-2);padding:var(--space-xs) 0;min-width:0;flex:1 1 14rem;max-width:28rem}
.search::placeholder{color:var(--color-ink-2)}
.copy{background:none;border:0;padding:0;font:700 var(--text-base)/1.4 var(--font-body);color:var(--color-green);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.copy:hover{color:var(--color-ink)}
#copyMsg{font-size:var(--text-sm);color:var(--color-ink-2)}
#copyBox{width:100%;min-height:12rem;font:var(--text-sm) var(--font-body);color:var(--color-ink);background:var(--color-paper)}

/* sections: ruled heading, entries flow in columns */
h2{font:700 var(--text-2xl)/1.15 var(--font-display);color:var(--color-green);margin:var(--space-md) 0 0;padding-bottom:var(--space-xs);border-bottom:var(--rule-thick) solid var(--color-green)}
.count{font:600 var(--text-sm) var(--font-body);color:var(--color-ink-2);margin-left:var(--space-sm)}
.sub{margin:var(--space-sm) 0 0;color:var(--color-ink-2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));column-gap:var(--space-xl)}
.entry{padding-block:var(--space-md);border-bottom:var(--rule-thin) solid var(--color-rule);display:grid;gap:2px;align-content:start;min-width:0}
.entry h3{font:700 var(--text-xl)/1.2 var(--font-display);margin:0}
.offer{font-weight:700;margin:0}
.details{color:var(--color-ink-2);margin:0}
.region{font-size:var(--text-sm);font-weight:700;margin:0;color:var(--color-gold-ink)}
.entry.here .region{color:var(--color-green)}
.locs{list-style:none;margin:var(--space-sm) 0 0;padding:0;display:grid;gap:2px}
.ph{color:var(--color-ink-2);white-space:nowrap}
.near{font-size:var(--text-sm);font-weight:700;color:var(--color-green);margin-top:var(--space-xs);justify-self:start}
.empty{color:var(--color-ink-2);margin:var(--space-md) 0 0}
.nearby{border:var(--rule-mid) solid var(--color-green);background:var(--color-card);padding:0 var(--space-lg) var(--space-md)}

/* local lists */
.local .grid a{display:block;padding-block:var(--space-md);border-bottom:var(--rule-thin) solid var(--color-rule);text-decoration:none}
.local strong{font:700 var(--text-xl)/1.2 var(--font-display);display:block}
.local span{color:var(--color-ink-2)}
.local a:hover strong{color:var(--color-green)}

/* Wellspring statement + footer */
.about{border-top:var(--rule-band) solid var(--color-gold);padding-top:var(--space-lg);display:grid;gap:var(--space-sm);max-width:52rem}
.about h2{border:0;padding:0;margin:0}
.about p{margin:0}
.about a{font-weight:700;color:var(--color-green)}
.sources{font-size:var(--text-sm);color:var(--color-ink-2);max-width:52rem}
footer{background:var(--color-green-dk);color:var(--color-on-green-2);font-size:var(--text-sm)}
footer .wrap{padding-block:var(--space-lg) var(--space-xl);display:grid;gap:var(--space-xs)}
footer strong,footer a{color:var(--color-on-green)}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}
.stack{display:grid;gap:var(--space-md);min-width:0}