:root{
  --bg0:#07060a;      /* abyss */
  --bg1:#0f0a19;      /* night violet */
  --bg2:#140f24;      /* deep indigo */
  --ink:#e7e1ff;      /* moon ink */
  --muted:#c4bdf0;    /* pale lavender */
  --gold:#e9d28c;     /* tarnished gold */
  --rose:#ff5fa2;     /* ritual rose */
  --aqua:#77d5ff;     /* cold water */
  --sigil:#b393ff;    /* arcane glow */
  --line:#6ea1ff;     /* azure line */
}

html,body{
  margin:0; padding:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 70% -10%, #1a1433 0, transparent 60%),
    radial-gradient(900px 500px at 10% 0%, #221842 0, transparent 60%),
    repeating-radial-gradient(circle at 50% 120%, rgba(255,255,255,.06) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  font-family: "Trebuchet MS", "Verdana", system-ui, sans-serif;
  image-rendering: auto;
  text-rendering: optimizeLegibility;
}

a{ color: var(--aqua); text-decoration: none }
a:hover{ color: var(--gold); text-shadow: 0 0 6px var(--gold) }

.wrapper{
  max-width: 1080px;
  margin: 14px auto;
  border: 1px solid #483f7a;
  background: rgba(13,9,25,.75);
  box-shadow: 0 0 40px #23194a inset, 0 0 18px #342063;
  backdrop-filter: blur(2px);
}

.header{
  position: relative;
  text-align: center;
  padding: 16px 12px 10px;
  border-bottom: 1px solid #483f7a;
  background:
    radial-gradient(600px 180px at 50% 0%, rgba(255,255,255,.05), transparent 70%),
    conic-gradient(from 0deg at 50% 0%, transparent, #1d1537 120deg, transparent 240deg, #1d1537 360deg);
  overflow: hidden;
}

.header h1{
  margin: 6px 0 4px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow:
    0 0 10px var(--sigil),
    0 0 22px #000;
}

/* rotating sigil in header */
.sigil{
  position:absolute;
  top:-30px; left:50%; transform:translateX(-50%);
  width: 220px; height: 220px; opacity:.18;
  border-radius: 50%;
  border: 1px dashed var(--sigil);
  box-shadow: 0 0 24px var(--sigil);
  animation: spin 42s linear infinite;
}
.sigil::before, .sigil::after{
  content:"✶";
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:160px; color:var(--sigil);
  text-shadow: 0 0 18px var(--sigil);
}
.sigil::after{ transform: rotate(30deg) }
@keyframes spin{ to{ transform: translateX(-50%) rotate(360deg) } }

.marquee{
  display:block; margin: 8px auto 4px;
  max-width: 760px; white-space: nowrap; overflow: hidden;
  border: 1px solid #5a4ea3; padding: 4px 8px;
  color: var(--muted);
  text-shadow: 0 0 6px #2c2552;
}

/* navigation as "occult tabs" */
.nav{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  padding: 10px 8px; border-bottom: 1px solid #483f7a;
  background: linear-gradient(180deg, rgba(40,26,76,.35), rgba(19,12,33,.2));
}
.nav a{
  padding: 6px 10px; font-weight: 600; letter-spacing: .5px;
  border: 1px solid #5a4ea3; color: var(--ink);
  background: linear-gradient(180deg, #20153e, #151028);
  box-shadow: inset 0 0 12px #2a1a54;
}
.nav a:hover{ color:var(--gold); border-color: var(--gold); box-shadow: 0 0 10px #463400 inset }

.content{ padding: 14px 18px 20px }

hr.pixel{
  border:0; height:2px; margin: 14px 0;
  background:
    linear-gradient(90deg, transparent, var(--line), transparent),
    radial-gradient(closest-side, var(--rose), transparent);
  box-shadow: 0 0 8px var(--line);
}

.card{
  border: 1px solid #5a4ea3;
  background: linear-gradient(180deg, rgba(35,24,70,.6), rgba(17,12,31,.6));
  padding: 12px;
  box-shadow: 0 0 12px rgba(116,92,200,.25) inset;
}

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

.post{
  border: 1px solid #5a4ea3;
  background: linear-gradient(180deg, rgba(35,24,70,.6), rgba(17,12,31,.6));
  padding: 12px; margin: 12px 0;
  box-shadow: 0 0 12px rgba(116,92,200,.25) inset;
}
.post header{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.post time{ font-size:12px; color: var(--muted) }

.tags{ display:flex; flex-wrap:wrap; gap:6px }
.tag{
  font-size:12px; padding:2px 7px;
  border:1px solid #9077ff; color:#efeaff; background:#1a1233;
  text-transform: lowercase; letter-spacing:.3px;
}

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

.gallery{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px }
.gallery a img{ width:100%; border:1px solid #6f5fd6; box-shadow: 0 0 12px #2b1c5e }

.footer{
  border-top: 1px solid #483f7a;
  text-align:center; padding: 10px; font-size: 12px; color: var(--muted);
  background: linear-gradient(180deg, rgba(19,12,33,.2), rgba(40,26,76,.35));
}
.badge-strip{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:6px }
.badge{
  width:88px; height:31px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #6f5fd6; background:#1a1233; color:#efeaff; font-size:10px; text-transform:uppercase
}