/* Previously Local News Hub (2026-10-03)
   Front door for 50-state local reporting. Newsroom design language:
   --bg var(--bg), --ink var(--ink), --red var(--red), Georgia serif. */
:root{
  --ink-alpha: 244,239,230;
  --card: var(--desert-card);
}.local-lede{
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  /* Visual watchdog 2026-10-04: was rgba(var(--ink-alpha),.64) with --ink-alpha
     hardcoded to ivory 244,239,230 — invisible on the cream light theme.
     Theme-aware ink keeps it legible in both modes. */
  color: var(--ink);
  opacity: .82;
  font-size: 17px;
  margin: 18px auto 0;
  max-width: 620px;
  line-height: 1.6;
}/* ============ CONTROLS ============ */
.local-controls{
  margin: 34px 0 8px;
  padding: 26px 28px;
  background: var(--card);
  border: 1px solid rgba(var(--ink-alpha),.14);
  border-radius: 12px;
}.local-controls__row{
  display: flex;
  gap: 18px;
  align-items: flex-end;
  flex-wrap: wrap;
}.local-field{ display: flex; flex-direction: column; gap: 8px; }.local-field--state{ flex: 1 1 260px; }.local-field--cat{ flex: 0 1 200px; }.local-field label{
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(var(--ink-alpha),.42);
  font-weight: 700;
}.local-selectwrap{ position: relative; }.local-selectwrap select{
  width: 100%;
  appearance: none;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  padding: 14px 44px 14px 16px;
  border: 1px solid rgba(var(--ink-alpha),.22);
  border-radius: 10px;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23ec4634' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  color: var(--ink);
  cursor: pointer;
}.local-field--state .local-selectwrap select{
  font-size: 20px;
  padding: 16px 48px 16px 18px;
  border-width: 2px;
}.local-selectwrap select:focus{
  outline: none;
  border-color: var(--red);
}.local-near{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 15px 22px;
  border-radius: 10px;
  border: 1px solid var(--red);
  background: transparent;
  color: var(--red);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, color .18s;
}.local-near svg{ width: 18px; height: 18px; fill: currentColor; }.local-near:hover{ background: var(--red); color: var(--desert-card); }.local-near:disabled{ opacity: .5; cursor: wait; }.local-status{
  margin-top: 14px;
  font-size: 14px;
  color: rgba(var(--ink-alpha),.64);
  min-height: 20px;
}.local-status strong{ color: var(--ink); }/* ============ STORY GRID ============ */
.local-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0 0 80px;
}.local-card{
  background: var(--card);
  border: 1px solid rgba(var(--ink-alpha),.1);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .18s, transform .18s;
}.local-card:hover{ border-color: rgba(var(--brand-red-rgb), .55); transform: translateY(-3px); }.local-card__img{ aspect-ratio: 16/9; overflow: hidden; background: var(--bg) }.local-card__img img{ width: 100%; height: 100%; object-fit: cover; }.local-card__body{ padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }.local-card__meta{
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}.local-card__state{ color: var(--red); }.local-card__cat{ color: rgba(var(--ink-alpha),.42); }.local-card__cat::before{ content: "·"; margin-right: 10px; color: rgba(var(--ink-alpha),.22); }.local-card h3{
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--desert-ink); /* cards are noir while the page is light: --pv-ivory would
     resolve dark here, so pin a literal light ivory (watchdog 2026-10-03 run 2) */
}.local-card h3 a:hover{ color: var(--red); }.local-card__dek{
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(var(--ink-alpha),.64);
  flex: 1;
}.local-card__byline{
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(var(--ink-alpha),.42);
  margin-top: 6px;
}/* ============ EMPTY STATE ============ */
.local-empty{
  text-align: center;
  padding: 80px 20px;
  border: 1px dashed rgba(var(--ink-alpha),.22);
  border-radius: 12px;
  margin: 0 0 80px;
}.local-empty h3{
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 30px;
  margin-bottom: 12px;
}.local-empty p{
  color: rgba(var(--ink-alpha),.64);
  font-size: 16px;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}/* ============ RESPONSIVE ============ */
@media (max-width: 1020px){
  .local-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}@media (max-width: 680px){.local-controls{ padding: 20px 18px; margin: 24px 0 8px; }.local-controls__row{ flex-direction: column; align-items: stretch; }.local-field--state, .local-field--cat{ flex: 1 1 auto; }.local-near{ justify-content: center; }.local-grid{ grid-template-columns: 1fr; gap: 18px; }.local-card__body{ padding: 18px 18px 20px; }/* Standing rule: no edge-to-edge text */
  .local-lede{ padding: 0 4px; }
}