/* Base tokens */
:root{
  --bg: #0e1116;
  --panel: #141922;
  --panel-2: #1a2130;
  --text: #e9edf1;
  --muted: #a8b1bf;
  --accent: #61e294;
  --accent-2: #8ef6c0;
  --accent-3: #7cc6fe;
  --ring: rgba(97,226,148,.5);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --gap: 18px;
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f6f7fb;
    --panel: #ffffff;
    --panel-2: #f0f4ff;
    --text: #0f1320;
    --muted: #5b6270;
    --accent: #0ea5e9;
    --accent-2: #22c55e;
    --accent-3: #f59e0b;
    --ring: rgba(14,165,233,.35);
    --shadow: 0 8px 24px rgba(15,19,32,.08);
  }
}

*{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(124,198,254,.12), transparent 60%),
              radial-gradient(1000px 600px at 110% 10%, rgba(142,246,192,.12), transparent 60%),
              var(--bg);
  color:var(--text);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap{ max-width:1200px; margin:0 auto; padding:0 18px }

/* Accessibility */
.skip-link{
  position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ left:18px; top:18px; width:auto; height:auto; padding:8px 10px; background:var(--panel); border-radius:8px; outline:2px solid var(--accent) }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(90deg, var(--panel), var(--panel-2));
  box-shadow: var(--shadow);
}
.header-inner{
  display:grid; grid-template-columns: 1fr auto auto; gap:var(--gap);
  align-items:center; padding:14px 0;
}
.brand{ display:flex; align-items:center; gap:12px }
.logo{
  width:40px; height:40px; display:grid; place-items:center; font-size:22px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  border-radius: 12px;
}
.titles{ display:flex; flex-direction:column }
.site-title{ font-weight:800; text-decoration:none; color:var(--text); font-size:20px }
.site-subtitle{ margin:2px 0 0; font-size:13px; color:var(--muted) }
.site-subtitle a{ color:inherit; text-decoration: underline dotted }

/* Nav */
.main-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:10px; flex-wrap:wrap }
.main-nav a{
  display:block; padding:8px 12px; border-radius:999px; text-decoration:none; color:var(--text);
  background:transparent; opacity:.9; border:1px solid transparent;
}
.main-nav a:hover{ border-color:rgba(255,255,255,.15) }
.main-nav .is-active{ background: rgba(255,255,255,.06); border-color:rgba(255,255,255,.12) }

.header-actions{
  display:flex; gap:10px; align-items:center; justify-self:end;
}
.search{
  display:flex; align-items:center; gap:6px; background:var(--panel-2); border-radius:999px; padding:6px 8px; border:1px solid rgba(255,255,255,.08)
}
.search input{
  background:transparent; border:none; outline:none; color:var(--text); width:200px;
}
.search input::placeholder{ color:var(--muted) }

/* Buttons */
.btn{
  appearance:none; border:none; cursor:pointer; padding:8px 12px; border-radius:999px;
  background: var(--accent); color:#041106; font-weight:700; box-shadow: 0 2px 0 rgba(0,0,0,.08);
}
.btn:hover{ filter: brightness(1.05) }
.btn.outline{
  background: transparent; color:var(--text); border:1px solid rgba(255,255,255,.18);
}
.btn.full{ width:100%; text-align:center }

/* Layout */
.layout{
  display:grid; gap:var(--gap); padding:18px 0 28px;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  align-items:start;
}
.col.left,.col.right{ position:sticky; top:86px; height: fit-content }
.col.center{ min-width:0 }

@media (max-width: 1020px){
  .layout{ grid-template-columns: 1fr; }
  .col.left,.col.right{ position:static }
}

/* Cards & components */
.card{
  background: var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding:14px; box-shadow: var(--shadow);
}
.card h2, .card h3{ margin:0 0 10px }
.muted{ color:var(--muted) }

.linklist{ display:grid; gap:8px }
.linkitem{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  padding:10px; border-radius:12px; background:var(--panel-2);
  border:1px solid rgba(255,255,255,.06);
}
.linkitem a{ color:var(--text); text-decoration:none; font-weight:600 }
.linkitem .meta{ color:var(--muted); font-size:12px }

.tags{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  border:1px solid rgba(255,255,255,.15); background:transparent; color:var(--text);
  border-radius:999px; padding:6px 10px; cursor:pointer; font-weight:600;
}
.chip.is-active, .chip:hover{ border-color:var(--accent); outline: 2px solid var(--ring); outline-offset: 2px }

.bullets{ margin:0; padding-left:16px }
.bullets li{ margin:6px 0 }
.bullets a[aria-disabled="true"]{ pointer-events:none; opacity:.6 }

.buttons{ display:grid; gap:10px }

/* Feed */
#feed{ display:grid; gap:var(--gap); margin-top:var(--gap) }
.post{
  display:grid; gap:10px; background: var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding:14px; box-shadow: var(--shadow);
}
.post .row{ display:flex; gap:10px; align-items:center; justify-content:space-between }
.post .title{ font-weight:800; margin:0 }
.post .summary{ margin:4px 0 0; color:var(--muted) }
.post .tags{ margin-top:8px }
.badge{
  display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3)); color:#061217;
}
.badge.news{ background: linear-gradient(135deg, var(--accent), var(--accent-3)) }
.badge.events{ background: linear-gradient(135deg, #f59e0b, #fde047); color:#111 }
.badge.calls{ background: linear-gradient(135deg, #c084fc, #93c5fd) }
.badge.guides{ background: linear-gradient(135deg, #22c55e, #86efac) }

.post footer{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  border-top:1px dashed rgba(255,255,255,.12); padding-top:10px; margin-top:6px;
}
.post time{ color:var(--muted); font-size:12px }

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.08); margin-top:18px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.12));
}
.footer-inner{
  padding:20px 0; display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.site-footer nav{ display:flex; gap:14px; flex-wrap:wrap }
.site-footer a{ color:var(--text) }

/* Focus states */
a, button, input{ outline-color: var(--accent) }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--ring); outline-offset: 2px;
}

/* Utilities */
.hidden{ display:none !important }