:root{
  --bg:#FBFBFC;
  --ink:#14161A;
  --muted:#5B6572;
  --line:#E6E8EC;
  --card:#FFFFFF;

  --pig:#D9586E;      /* svin-accent */
  --pig-weak:#F0A3AF;

  --fact:#2F6F9F;     /* faglig blå */
  --pro:#2F8A63;      /* tilhænger */
  --con:#A34A2A;      /* modstander */
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
}

.wrap{ max-width: 1040px; margin:0 auto; padding:0 16px; }

.site-header{
  position:sticky; top:0; background:rgba(251,251,252,.9);
  border-bottom:1px solid var(--line); backdrop-filter: blur(10px);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; }

.brand{ display:flex; gap:12px; text-decoration:none; color:inherit; align-items:center; }
.brand-logo{ display:block; border-radius:10px; }

.brand-sub{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }

.nav a{ color:var(--muted); text-decoration:none; margin-left:14px; }
.nav a:hover{ color:var(--ink); }

.content{ padding: 22px 16px 56px; }
.site-footer{ border-top:1px solid var(--line); padding:18px 0; color:var(--muted); }

.hero{ padding: 26px 0 8px; }
.hero h1{ font-size: 40px; margin: 0 0 10px; letter-spacing: -0.02em; }
.hero p{ margin:0 0 14px; color:var(--muted); max-width: 75ch; }
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px;
  background:var(--ink); color:#fff; text-decoration:none;
}
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }

.grid{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) );
  gap:14px;
  margin-top: 12px;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.card-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.card-title{ margin:10px 0 8px; font-size:18px; letter-spacing:-0.01em; }
.card-title a{ color:inherit; text-decoration:none; }
.card-title a:hover{ text-decoration:underline; }

.muted{ color:var(--muted); font-size: 13px; }

.badge{
  font-size:12px; padding:4px 8px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
}
.pos-faktuel{ border-color: color-mix(in srgb, var(--fact) 35%, var(--line)); }
.pos-tilhænger{ border-color: color-mix(in srgb, var(--pro) 35%, var(--line)); }
.pos-modstander{ border-color: color-mix(in srgb, var(--con) 35%, var(--line)); }

.tagrow{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  font-size:12px; padding:3px 8px;
  border-radius:999px; background:#F4F6F9; color:var(--muted);
  border:1px solid var(--line);
}

.source{ margin-top: 10px; }
.source a{ color:var(--fact); text-decoration:none; }
.source a:hover{ text-decoration:underline; }

.filters{ display:grid; gap:10px; margin: 12px 0 16px; }
.filter{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.chip{
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background:#fff; text-decoration:none; color:var(--muted);
}
.chip.active{ color:var(--ink); border-color: color-mix(in srgb, var(--pig) 30%, var(--line)); }

.article h1{ margin: 10px 0 8px; letter-spacing:-0.02em; }
.article-meta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom: 6px; }

.prose{ max-width: 78ch; }
.prose h2{ margin-top: 22px; }
.prose a{ color:var(--fact); }

.sourcebox{
  margin-top: 22px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #FFFFFF;
}
.sourcebox a{ color:var(--fact); text-decoration:none; }
.sourcebox a:hover{ text-decoration:underline; }