:root{
  /* Fox Valley Review brand mapping (from local-news.html) */
  --brand-primary: #f78f1e;        /* orange/gold (buttons, highlights) */
  --brand-primary-hover: #e67700;  /* hover */
  --brand-text: #333;              /* main body / headings */
  --brand-bg: #fff;                /* page background */
  --brand-bg-light: #f2f2f2;       /* light section bg / nav bar analog */

  --card-bg: #ffffff;
  --card-border: #e6e8eb;

  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font: 16px/1.6 'Source Sans Pro', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  color: var(--brand-text);
  background: var(--brand-bg);
}

.wrap{max-width:1200px;margin:0 auto;padding:24px}
.hero{padding:24px 0 8px;display:grid;gap:8px}
.hero h1{margin:0;font-size:clamp(28px,4vw,44px);letter-spacing:.2px}
.lede{color:#555;margin:0}

.filters{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}
.filters input[type="search"], .filters select{
  border:1px solid var(--card-border);
  border-radius:10px;
  padding:10px 12px;
  min-width:220px;
  background:#fff;
  color:var(--brand-text);
}
.filters .pill{
  border-radius:999px;border:1px solid var(--card-border);
  padding:8px 12px;background:#fff;
}

/* Cards grid */
.card-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:18px}
.card{
  grid-column:span 12;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  overflow:clip;
  box-shadow:var(--shadow);
  display:grid;grid-template-rows:auto 1fr;
}
@media (min-width:680px){.card{grid-column:span 6}}
@media (min-width:1024px){.card{grid-column:span 4}}

.card a{color:inherit;text-decoration:none}
.card-img{aspect-ratio:16/9;width:100%;object-fit:cover;display:block;background:var(--brand-bg-light)}
.card-body{padding:14px 16px;display:grid;gap:8px}
.card h3{margin:0;font-size:1.05rem}
.meta{color:#666;font-size:.9rem;margin:0}
.summary{
  margin:0;color:#2b2b2b;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

.badge{
  display:inline-block;font-size:.8rem;font-weight:600;
  color:#fff;background:var(--brand-primary);
  padding:2px 8px;border-radius:999px;
}

.ratings{display:flex;align-items:center;gap:8px;font-weight:600}
.ratings .score{color:var(--brand-primary)}
.ratings .chip{
  background: rgba(247,143,30,.12);
  color: var(--brand-primary);
  padding:2px 8px;border-radius:999px;font-size:.8rem;font-weight:700;
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:12px;
  border:1px solid var(--brand-primary);
  color:#fff;background:var(--brand-primary);
  transition:background-color .2s ease, color .2s ease;
}
.btn:hover{background:var(--brand-primary-hover);border-color:var(--brand-primary-hover)}
.btn.secondary{background:transparent;color:var(--brand-primary)}

/* Pager */
.pager{display:flex;justify-content:center;margin:18px 0 40px}

/* Focus */
:focus-visible{outline:3px solid var(--brand-primary);outline-offset:2px}