:root{
  --bg:#0c0d0f;
  --panel:#111214;
  --panel-2:#15171a;
  --text:#f5f6f7;
  --text-dim:#9aa3b2;
  --accent:#c7d2fe;
  --accent-2:#e0e7ff;
  --border:#2a2a2a;
  --line:#1e1e1e;

  --chip-bg: rgba(255,255,255,.06);
  --chip-border: rgba(255,255,255,.10);

  /* fixed bottom bar height */
  --catbar-h: 72px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);

  /* NPR-like body serif */
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  line-height:1.65;
}

/* links */
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width:1100px;
  margin:0 auto;
  padding:1.25rem 1.5rem;
}

/* ===== Header ===== */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

/* Logo stays Lilex */
.brand{
  font-family:'Lilex', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight:800;
  font-size:1.5rem;
  color:var(--accent);
  letter-spacing:-.01em;
}
.brand:hover{ color:var(--accent-2); }

/* ===== Card ===== */
.card{
  margin-top:1rem;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius:16px;
  padding:.9rem;
}

/* meta */
.meta{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:baseline;
  padding:.25rem .25rem .75rem .25rem;
  border-bottom:1px solid var(--line);
}

#status{
  font-family: system-ui, -apple-system, "Inter", Segoe UI, Roboto, Arial, sans-serif;
  font-weight:600;
}

/* ===== List ===== */
.list{
  padding-top:.75rem;
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.75rem;
  align-items:start;
  padding:.25rem .25rem .7rem .25rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.item:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.t{
  font-weight:600;
  font-size:1.12rem;
}

.m{
  margin-top:.35rem;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
  font-family: system-ui, -apple-system, "Inter", Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text-dim);
  font-size:.92rem;
}

.e{
  margin-top:.45rem;
  color:var(--text-dim);
  font-size:1.02rem;
  line-height:1.65;
}

.thumb{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:8px;
  background:#111;
}

.thumb.ph{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  font-family: system-ui, -apple-system, "Inter", Segoe UI, Roboto, Arial, sans-serif;
}

.out{
  font-size:.85em;
  opacity:.6;
  margin-left:.15em;
}
a.t:hover .out{ opacity:.9; }

.pill{
  font-family: system-ui, -apple-system, "Inter", Segoe UI, Roboto, Arial, sans-serif;
  font-size:.85rem;
  padding:.15rem .5rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.78);
}

/* ===== Footer (tucked, never hidden) ===== */
.fineprint{
  margin:1rem auto 0;
  padding:0 1.5rem calc(var(--catbar-h) + .5rem);
  max-width:1100px;
  text-align:center;
  color:var(--text-dim);
  font-size:.9rem;
  font-family: system-ui, -apple-system, "Inter", Segoe UI, Roboto, Arial, sans-serif;
}

.fineprint a{
  color:var(--text-dim);
}
.fineprint a:hover{
  color:var(--accent-2);
}

/* ===== Bottom category bar ===== */
.catbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:var(--catbar-h);
  background:rgba(12,13,15,.85);
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(255,255,255,.08);
  padding:.6rem 0;
  z-index:100;
}

.catbar__inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 1.5rem;
  display:flex;
  gap:.6rem;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

.chip{
  font-family: system-ui, -apple-system, "Inter", Segoe UI, Roboto, Arial, sans-serif;
  border:1px solid var(--chip-border);
  background:var(--chip-bg);
  color:var(--text);
  padding:.45rem .75rem;
  border-radius:999px;
  font-size:.95rem;
  cursor:pointer;
  white-space:nowrap;
}
.chip.active{
  border-color:rgba(199,210,254,.55);
  background:rgba(199,210,254,.12);
}

.error{
  padding:.9rem;
  border:1px solid var(--border);
  border-radius:12px;
  color:#ffb3b3;
}

@media (max-width:640px){
  .container{ padding:1rem; }
  .thumb{ width:100%; height:auto; max-height:200px; }
  .item{ grid-template-columns:1fr; }
  .catbar__inner{ padding:0 1rem; }
  .fineprint{ padding-left:1rem; padding-right:1rem; }
}

#sentinel{ height:1px; }

/* freshness / stale guard */
#freshness{
  margin-top: 8px;
  font-size: 0.9rem;
  opacity: 0.8;
}
#freshness.warn { opacity: 1; }
#freshness.stale { opacity: 1; }