/* --- FUTURE DARK: neon + glass + grid --- */
:root{
  --bg:#05070b;
  --layer:#080c12;
  --glass:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.08);
  --text:#eaf2fb;
  --muted:#9fb0c6;
  --accent:#29d4ff;
  --accent2:#7ef3cf;
  --radius:16px;
  --shadow:0 18px 50px rgba(10,20,40,.55);
  --speed:.22s;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background: var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Animated background: subtle grid + orbs */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden}
.gridlines{
  position:absolute;inset:0;
  background:
    linear-gradient(transparent 31px, rgba(255,255,255,.05) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.05) 32px);
  background-size:32px 32px, 32px 32px;
  mask-image: radial-gradient(70% 70% at 50% 40%, rgba(0,0,0,.9), transparent);
}
.orb{
  position:absolute;border-radius:50%;
  filter: blur(40px);opacity:.35;mix-blend-mode:screen;
  animation: drift 22s ease-in-out infinite alternate;
}
.orb-a{
  width:520px;height:520px;left:-140px;top:-120px;
  background: radial-gradient(circle at 30% 30%, #0ff, transparent 60%);
}
.orb-b{
  width:580px;height:580px;right:-160px;bottom:-140px;
  background: radial-gradient(circle at 70% 70%, #7ef3cf, transparent 60%);
  animation-duration: 28s;
}
@keyframes drift{
  from{ transform: translate3d(0,0,0) }
  to  { transform: translate3d(20px,-30px,0) }
}

/* Header */
.hdr{
  max-width:1200px;margin:0 auto;padding:18px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo{
  width:46px;height:46px;border-radius:14px;
  background:conic-gradient(from 180deg, var(--accent), var(--accent2), var(--accent));
  display:flex;align-items:center;justify-content:center;
  color:#001117;font-weight:900;box-shadow:var(--shadow);letter-spacing:.3px
}
.wordmark strong{display:block;font-weight:800;letter-spacing:.2px}
.wordmark span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;letter-spacing:.6px}

.nav{display:flex;align-items:center;gap:10px}
.search{
  display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:rgba(255,255,255,.04);backdrop-filter: blur(6px)
}
.search input{background:transparent;border:0;outline:none;color:var(--text);width:240px}
.dropdown select{
  background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--line);
  padding:10px 12px;border-radius:12px;min-width:200px;backdrop-filter: blur(6px)
}

/* Container */
.shell{max-width:1200px;margin:0 auto;padding:8px 20px 40px}

/* Hero */
.hero{display:grid;grid-template-columns:1.4fr .8fr;gap:16px;margin:4px 0 18px}
.hero-copy{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);
  backdrop-filter: blur(8px)
}
.hero-copy h1{margin:0 0 8px;font-size:30px}
.hero-copy p{margin:6px 0 14px;color:var(--muted)}
.meta{color:var(--muted);font-size:13px;margin-top:8px}

.hero-chip{
  align-self:stretch;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  box-shadow:var(--shadow);font-weight:700;letter-spacing:.3px;color:var(--text);
  backdrop-filter: blur(8px)
}
.spark{color:var(--accent);margin-right:8px}

/* Chips (category buttons) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:9px 14px;border-radius:999px;font-weight:700;cursor:pointer;transition:all var(--speed) ease;
  letter-spacing:.2px;
}
.chip:hover{border-color:rgba(255,255,255,.18);color:var(--text)}
.chip.active{
  background:linear-gradient(90deg,var(--accent),var(--accent2));color:#001117;border-color:transparent;
  box-shadow:0 10px 26px rgba(41,212,255,.25);
}

/* Grid of link-cards */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px
}
.card{
  position:relative;display:block;text-decoration:none;color:inherit;
  padding:18px;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  transition: transform var(--speed) ease, box-shadow var(--speed) ease, border-color var(--speed) ease;
  will-change: transform;
  backdrop-filter: blur(6px)
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(41,212,255,.35);
  box-shadow:0 22px 60px rgba(0,180,255,.25);
}
.kicker{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.card h3{margin:6px 0 6px;font-size:18px}
.blurb{color:var(--muted);margin:0;font-size:14px;line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.pill{
  background:rgba(255,255,255,.07);color:var(--muted);
  padding:6px 10px;border-radius:999px;font-size:12.5px
}

/* Empty state */
.empty{
  grid-column:1/-1;padding:26px;border-radius:var(--radius);border:1px solid var(--line);
  color:var(--muted);text-align:center;background:rgba(255,255,255,.03);backdrop-filter: blur(6px)
}

/* Footer */
.ftr{max-width:1200px;margin:0 auto;padding:24px 20px;color:var(--muted);text-align:center}

/* Responsive */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .search input{width:160px}
  .grid{grid-template-columns:1fr}
}

/* ===== ARTICLE LAYOUT ===== */
.crumbs{
  max-width:1200px;margin:0 auto;padding:8px 20px 0;
  display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px
}
.crumbs a{color:var(--text);text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.2)}
.crumbs a:hover{color:var(--accent);border-bottom-color:var(--accent)}

.article{max-width:900px;margin:10px auto 40px;padding:0 20px;}
.article-hero{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);
  backdrop-filter: blur(8px)
}
.article-hero h1{margin:0 0 8px;font-size:32px}
.lede{color:var(--muted);margin:6px 0 12px}
.badges{display:flex;flex-wrap:wrap;gap:8px}

.callouts{margin:14px 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.callout{
  border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:var(--shadow);backdrop-filter: blur(6px)
}
.callout h3{margin:0 0 6px}
.callout.ok{border-color:rgba(126,243,207,.28)}
.callout.note{border-color:rgba(41,212,255,.28)}

.prose{margin-top:10px;display:flex;flex-direction:column;gap:14px}
.mythbox{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:var(--shadow);backdrop-filter: blur(6px);
  overflow:hidden;position:relative;
}
.myth{
  background:rgba(255,255,255,.06);
  padding:12px 16px;font-weight:800;letter-spacing:.2px;color:#001117;
  background-image: linear-gradient(90deg,var(--accent),var(--accent2));
}
.reality{padding:14px 16px;color:var(--text)}
.reality strong{color:var(--accent)}
.sources{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.badge{
  display:inline-block;padding:7px 10px;border-radius:999px;
  background:rgba(255,255,255,.08);color:var(--text);text-decoration:none;
  font-size:12.5px;border:1px solid var(--line)
}
.badge:hover{border-color:var(--accent);color:var(--accent)}

.sources-list{
  margin-top:18px;border-top:1px dashed var(--line);padding-top:14px
}
.sources-list h3{margin:0 0 8px}
.sources-list ul{margin:0;padding-left:16px}
.sources-list a{color:var(--text);text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.25)}
.sources-list a:hover{color:var(--accent);border-bottom-color:var(--accent)}

.article-actions{margin-top:18px}

/* Buttons */
.btn-ghost{
  display:inline-block;text-decoration:none;
  background:transparent;border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:8px 12px;cursor:pointer;transition:all .2s ease
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

@media (max-width:900px){.callouts{grid-template-columns:1fr}}

/* --- Micro-interactions & glass polish --- */
.mythbox, .callout, .badge, .btn-ghost {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
  will-change: transform, box-shadow;
}
.mythbox:hover{transform:translateY(-2px);box-shadow:0 14px 42px rgba(10,20,40,.55);}
.callout:hover{transform:translateY(-1px);box-shadow:0 12px 36px rgba(10,20,40,.50);}
.badge{
  backdrop-filter:blur(6px);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.badge:hover,.btn-ghost:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,180,255,.22);}

/* --- Reading progress --- */
.read-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,#7dd3fc,#a78bfa,#f472b6);
  box-shadow:0 0 12px rgba(167,139,250,.7);
  z-index:9999;
}

/* --- Copy-link button on each claim --- */
.copy-link{
  position:absolute;top:.6rem;right:.6rem;
  padding:.35rem .55rem;font-size:.85rem;border-radius:.6rem;
  background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.15);
  color:var(--text);opacity:.7;cursor:pointer;user-select:none;
  transition:opacity .2s ease, transform .2s ease, border-color .2s ease;
}
.copy-link:hover{opacity:1;transform:translateY(-1px);border-color:var(--accent);}

/* --- Local filter --- */
.search-local{margin:1rem 0 1.25rem;}
.search-local input{
  width:100%;padding:.9rem 1rem;border-radius:.8rem;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--text);outline:none;transition:border-color .2s ease,background .2s ease;
}
.search-local input:focus{border-color:rgba(126,243,207,.5);background:rgba(255,255,255,.06);}
.mythbox[hidden]{display:none;}

/* --- Back to top --- */
.backtop{
  position:fixed;bottom:20px;right:20px;z-index:50;display:none;
  padding:.6rem .8rem;border-radius:.8rem;
  border:1px solid var(--line);background:rgba(15,15,22,.65);
  color:var(--text);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.backtop.show{display:inline-flex;}

/* --- A11y: focus & reduced motion --- */
:focus-visible{outline:2px solid #93c5fd;outline-offset:3px;border-radius:.5rem;}
.nav select:focus-visible,.btn-ghost:focus-visible,.badge:focus-visible{outline-offset:4px;}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .orb,.gridlines{display:none;}
}

.irtl-svg{ display:block; filter: drop-shadow(0 10px 30px rgba(41,212,255,.35)); }