/* browse.css -- the page-level CSS shared by the "browse" pages: the events calendar (index.html) and the directory (directory.html).
   (395-316, Batch JB.) Moved VERBATIM out of index.html's inline <style>, no value changed.

   WHAT IS IN HERE: the :root colour/shadow/radius tokens and the base element rules (*, html, body, h1-h3, a, button, img, :focus-visible), the dark
   hero band + ridge, the Events / Directory tab pair (.viewbar / .viewtab), and the left-rail layout every browse page uses (.wrap + .rail + the
   mobile Filters toggle, .searchbox, .fgroup / .chiprow / .chip incl. every pressed variant, .checkrow), the active-filter bar (.activebar,
   .resultcount, .afchip, .clearall) and the card grid (.grid / .grid.list).

   WHO USES IT: index.html and directory.html. classes.html can adopt it later (Batch GV, 395-315 item 16).

   THE RULE: this is page-level shared CSS for browse pages; tokens + base live here so every browse page renders the same. A page
   links it right AFTER /assets/ds.css (so these :root values -- --line, --shadow, --ink -- keep winning over ds.css's, exactly as index.html's
   inline :root did) and BEFORE its own inline <style> (so a page's own rules keep winning at equal specificity, as before the move).
   Page-only rules (index: featured strip, week view, cards, signup/support boxes, footer, embed mode; directory: its card extras) stay in the page. */

/* tokens + base */
:root{
  --pinyon:#2a3b2e;--pinyon-deep:#1d2a21;--sage:#3b5a43;--gold:#cf9c34;--gold-deep:#a87a1f;
  --paper:#fbf8f0;--paper-dim:#f1ebdd;--ink:#222820;--line:rgba(34,40,32,.14);--line-soft:rgba(34,40,32,.08);
  --shadow:0 1px 2px rgba(29,42,33,.06), 0 6px 20px rgba(29,42,33,.06);--radius:14px;--radius-sm:9px;
  --chalky-bg:#fcf7ec;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Public Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5;
  background-image:radial-gradient(circle at 20% 30%,rgba(42,59,46,.035) 0 1px,transparent 1.5px),radial-gradient(circle at 70% 60%,rgba(42,59,46,.03) 0 1px,transparent 1.5px);background-size:240px 240px,180px 180px;}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.1;margin:0}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

/* hero (the dark band + ridge) */
.hero{background:var(--pinyon-deep);color:var(--paper);position:relative;overflow:hidden}
.hero-inner{max-width:1180px;margin:0 auto;padding:24px 20px 28px;position:relative;z-index:2}
.hero h1{font-family:"Fraunces",serif;font-weight:600;font-size:clamp(23px,3.3vw,37px);line-height:1.06;letter-spacing:-.015em}
.hero .sub{font-size:clamp(16px,2.1vw,19px);color:#cdd5c6;margin:14px 0 0;max-width:46ch}
.hero-ridge{position:absolute;left:0;right:0;bottom:-1px;height:60px;z-index:1;opacity:.55}

/* view toggle: the Events / Directory tabs. The current tab is aria-current="page" (a <span>); the other is an <a>. aria-selected is kept for
   index.html's own script, which still sets it. */
.viewbar{max-width:1180px;margin:0 auto;padding:22px 20px 0;display:flex;align-items:flex-end;gap:14px}
.viewtab{border:0;background:transparent;color:var(--sage);font-family:"Fraunces",serif;font-weight:600;font-size:24px;padding:6px 2px 12px;position:relative;opacity:.55}
.viewtab[aria-selected="true"]{color:var(--pinyon);opacity:1}
.viewtab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);border-radius:3px}
a.viewtab{text-decoration:none;display:inline-block}
.viewtab .n{font-family:"Public Sans";font-size:12px;font-weight:600;color:var(--gold-deep);margin-left:6px;vertical-align:middle}
.viewtab[aria-current="page"]{color:var(--pinyon);opacity:1}
.viewtab[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);border-radius:3px}
@media(max-width:560px){
  .viewbar{flex-wrap:wrap;gap:8px 12px;padding-bottom:6px}
  .viewbar .viewtab{font-size:20px}
}

/* layout: the left rail + results column */
.wrap{max-width:1180px;margin:0 auto;padding:18px 20px 20px;display:grid;grid-template-columns:262px 1fr;gap:28px}
@media (max-width:880px){.wrap{grid-template-columns:1fr;gap:0}}
.rail{align-self:start;position:sticky;top:82px;max-height:calc(100vh - 92px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding-right:4px}
@media (max-width:880px){.rail{position:static}.rail-panel{display:none}.rail-panel.open{display:block}}
.filter-toggle{display:none;width:100%;margin:14px 0 0;background:var(--pinyon);color:var(--paper);border:0;border-radius:var(--radius-sm);padding:12px 16px;font-weight:600;font-size:15px;align-items:center;justify-content:space-between}
@media (max-width:880px){.filter-toggle{display:flex}}
.filter-toggle .count{background:var(--gold);color:var(--pinyon-deep);border-radius:999px;padding:1px 9px;font-size:12px}
.searchbox{position:relative;margin-bottom:14px}
.searchbox input{width:100%;padding:12px 14px 12px 38px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:15px;color:var(--ink)}
.searchbox svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.5}
.fgroup{border-top:1px solid var(--line-soft);padding:14px 0}
.fgroup:first-of-type{border-top:0;padding-top:0}
.fgroup h4{font-family:"Public Sans";font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);margin:0 0 10px}
.fgroup.prominent h4{color:var(--gold-deep);font-size:12px}
.chiprow{display:flex;flex-wrap:wrap;gap:7px}
.chiprow.scroll{max-height:158px;overflow:auto;padding-right:2px}
.chip{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500;transition:background .12s,border-color .12s,color .12s}
.chip:hover{border-color:var(--sage)}
.chip[aria-pressed="true"]{background:var(--pinyon);border-color:var(--pinyon);color:var(--paper)}
.chip.cat[aria-pressed="true"]{background:var(--sage);border-color:var(--sage)}
.chip.area[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--pinyon-deep)}
.chip.when[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--pinyon-deep)}
.checkrow{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--pinyon);cursor:pointer}
.checkrow input{width:18px;height:18px;accent-color:var(--pinyon)}

.activebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;min-height:30px}
.resultcount{font-size:14px;color:var(--sage);font-weight:600;margin-right:4px}
.afchip{display:inline-flex;align-items:center;gap:6px;background:var(--paper-dim);border:1px solid var(--line);border-radius:999px;padding:5px 7px 5px 11px;font-size:13px;font-weight:600}
.afchip button{border:0;background:rgba(34,40,32,.1);color:var(--ink);border-radius:999px;width:18px;height:18px;line-height:1;font-size:14px;display:grid;place-items:center;padding:0}
.afchip button:hover{background:var(--gold);color:#fff}
.afchip.locked{padding-right:11px}
.clearall{border:0;background:transparent;color:var(--gold-deep);font-weight:700;font-size:13px;text-decoration:underline;padding:4px}

/* card grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px}
.grid.list{display:block}