/* =========================================================
   DarkvoyagerLabs Wiki — standalone stylesheet
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --void:       #05070a;
  --surface:    #0d1117;
  --surface-2:  #131a23;
  --surface-3:  #1b2430;
  --line:       rgba(255,255,255,.08);
  --line-soft:  rgba(255,255,255,.05);
  --text:       #e9eef3;
  --text-dim:   #8b98a7;
  --text-faint: #5a6675;

  --cyan:   #4deeea;
  --lime:   #a8ff60;
  --red:    #ff3860;
  --blue:   #4d7cff;
  --yellow: #ffd23f;

  --grad-scan: linear-gradient(90deg, var(--cyan), var(--lime), var(--yellow), var(--red), var(--blue), var(--cyan));
  --grad-scan-wide: linear-gradient(90deg,
      var(--cyan)   0%,
      var(--lime)  20%,
      var(--yellow) 40%,
      var(--red)   60%,
      var(--blue)  80%,
      var(--cyan) 100%);

  --f-display: 'Orbitron', 'Rajdhani', sans-serif;
  --f-body:    'Rajdhani', 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  --radius: 10px;
  --radius-lg: 16px;
  --ease-scan: cubic-bezier(.65,0,.35,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--f-body);
  color: var(--text);
  background: var(--void);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

body::before{
  content: '';
  position: fixed;
  inset: -40px;
  background: radial-gradient(ellipse at top, rgba(77,238,234,.06), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
ul{ padding-left: 1.2rem; }

:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* =========================================================
   HEADER
   ========================================================= */
.wiki-header{
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px clamp(18px, 4vw, 48px);
  background: rgba(9,12,17,.78);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.wiki-brand{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .02em;
  color: var(--text);
  white-space: nowrap;
}
.wiki-brand .brand-arrow{
  color: var(--cyan);
  font-size: 1.1rem;
  transition: transform .25s var(--ease-scan);
}
.wiki-brand:hover .brand-arrow{ transform: translateX(-4px); }
.wiki-brand .accent{ color: var(--cyan); }
.wiki-nav{
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.wiki-nav a{
  font-family: var(--f-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color .2s ease;
}
.wiki-nav a:hover{ color: var(--cyan); }

/* =========================================================
   INDEX PAGE
   ========================================================= */
.wiki-index{
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 8vw, 80px) 20px 100px;
}
.wiki-index h1{
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 900;
  margin: 0 0 .3rem;
  letter-spacing: .02em;
}
.wiki-tagline{
  font-family: var(--f-mono);
  font-size: .85rem;
  color: var(--text-dim);
  margin: 0 0 2.6rem;
  letter-spacing: .04em;
}

.post-list{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.post-card{
  display: block;
  padding: 1.4rem 1.5rem;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .25s var(--ease-scan), border-color .25s ease, background .25s ease;
}
.post-card:hover{
  transform: translateY(-3px);
  border-color: rgba(77,238,234,.45);
  background: rgba(77,238,234,.04);
}
.post-card h2{
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .4rem;
  color: var(--text);
}
.post-author{
  font-family: var(--f-mono);
  font-size: .78rem;
  color: var(--cyan);
  margin: .2rem 0;
  letter-spacing: .03em;
}
.post-desc{
  color: var(--text-dim);
  font-size: .92rem;
  margin: .4rem 0;
  line-height: 1.55;
}
.post-date{
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--text-faint);
  margin: .3rem 0 0;
  letter-spacing: .03em;
}

/* =========================================================
   POST PAGE
   ========================================================= */
.wiki-post{
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(30px, 6vw, 60px) 20px 40px;
}
.back-link{
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .8rem;
  color: var(--cyan);
  letter-spacing: .03em;
  margin-bottom: 1.6rem;
  border-bottom: 1px dashed var(--cyan);
  padding-bottom: 1px;
  transition: opacity .2s ease;
}
.back-link:hover{ opacity: .7; }

.wiki-post h1{
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 900;
  margin: 0 0 .5rem;
  letter-spacing: .02em;
  line-height: 1.15;
}
.wiki-post .post-author{
  font-size: .82rem;
  margin: .3rem 0 .15rem;
}
.wiki-post .post-date{
  font-size: .74rem;
  margin: 0 0 1.6rem;
}

.post-body{
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.85;
  margin-top: 1.4rem;
}
.post-body p{ margin: 0 0 1.1rem; }
.post-body h2{
  font-family: var(--f-display);
  color: var(--text);
  font-size: 1.25rem;
  margin: 2.2rem 0 .8rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--line-soft);
}
.post-body h3{
  font-family: var(--f-display);
  color: var(--text);
  font-size: 1.05rem;
  margin: 1.7rem 0 .6rem;
}
.post-body ul, .post-body ol{
  margin: 0 0 1.1rem;
  padding-left: 1.4rem;
  color: var(--text-dim);
}
.post-body li{ margin-bottom: .35rem; }
.post-body a{
  color: var(--cyan);
  border-bottom: 1px dashed var(--cyan);
}
.post-body a:hover{ opacity: .8; }
.post-body strong{ color: var(--text); font-weight: 700; }
.post-body em{ color: var(--text); }
.post-body img{
  border-radius: 8px;
  border: 1px solid var(--line);
  margin: 1rem 0;
}
.post-body code{
  font-family: var(--f-mono);
  font-size: .86em;
  background: rgba(255,255,255,.06);
  padding: .15em .4em;
  border-radius: 4px;
  color: var(--lime);
}
.post-body pre{
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text);
}
.post-body pre code{
  background: none;
  padding: 0;
  color: inherit;
}
.post-body blockquote{
  border-left: 3px solid var(--cyan);
  margin: 1.2rem 0;
  padding: .2rem 1rem;
  color: var(--text-dim);
  background: rgba(77,238,234,.04);
  border-radius: 0 6px 6px 0;
}
.post-body hr{
  border: none;
  border-top: 1px solid var(--line-soft);
  margin: 2rem 0;
}
.post-body table{
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .92rem;
}
.post-body th, .post-body td{
  border: 1px solid var(--line);
  padding: .55rem .8rem;
  text-align: left;
}
.post-body th{ background: rgba(255,255,255,.04); color: var(--text); }

/* =========================================================
   ATTACHMENTS
   ========================================================= */
.post-attachments{
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}
.post-attachments h2{
  font-family: var(--f-display);
  font-size: 1rem;
  margin: 0 0 .9rem;
  color: var(--text);
  letter-spacing: .02em;
}
.post-attachments ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.post-attachments li{ margin: 0; }
.post-attachments a{
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .82rem;
  color: var(--lime);
  padding: .45rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .2s ease, background .2s ease;
}
.post-attachments a:hover{
  border-color: var(--lime);
  background: rgba(168,255,96,.06);
}

/* =========================================================
   COMMENTS (Giscus wrapper)
   ========================================================= */
.wiki-comments{
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}
.wiki-comments h2{
  font-family: var(--f-display);
  font-size: 1rem;
  margin: 0 0 1rem;
  color: var(--text);
  letter-spacing: .02em;
}
.wiki-comments .giscus{
  margin-top: .5rem;
}
/* Force giscus container width to match post width */
#giscus-container{ min-height: 200px; }

/* =========================================================
   404 PAGE
   ========================================================= */
.error-shell{
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(70px, 14vw, 130px) 20px clamp(70px, 12vw, 140px);
  text-align: center;
}
.error-eyebrow{
  font-family: var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--red);
  margin-bottom: .6rem;
}
.error-code{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(4.5rem, 18vw, 9rem);
  line-height: 1;
  margin: 0 0 .6rem;
  background: var(--grad-scan-wide);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: scan-drift 6s linear infinite;
}
@keyframes scan-drift{
  0%   { background-position:   0% 0; }
  100% { background-position: -300% 0; }
}
.error-shell h2{
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  margin: 0 0 .6rem;
}
.error-shell p{
  color: var(--text-dim);
  font-family: var(--f-mono);
  font-size: .88rem;
  max-width: 44ch;
  margin: 0 auto 2.2rem;
  line-height: 1.7;
}
.error-actions{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.error-btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-mono);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.error-btn.primary{
  color: var(--void);
  background: var(--cyan);
}
.error-btn.primary:hover{
  transform: scale(1.05);
  box-shadow: 0 0 22px rgba(77,238,234,.4);
}
.error-btn.secondary{
  color: var(--text-dim);
  border: 1px solid var(--line);
  background: transparent;
}
.error-btn.secondary:hover{
  border-color: var(--cyan);
  color: var(--cyan);
  transform: scale(1.05);
}

/* =========================================================
   FOOTER
   ========================================================= */
.wiki-footer{
  border-top: 1px solid var(--line-soft);
  padding: 26px clamp(18px, 4vw, 48px);
  text-align: center;
  font-family: var(--f-mono);
  font-size: .76rem;
  color: var(--text-faint);
  letter-spacing: .03em;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 640px){
  .wiki-header{
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
  }
  .wiki-nav{ gap: 1rem; }
  .wiki-nav a{ font-size: .74rem; }
  .post-card{ padding: 1.1rem 1.2rem; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  }