/* Politics & Philosophy — polisphilo.com */

:root{
  --bg:#080b18; --bg2:#0b0e1a; --panel:#121734; --panel2:#0e1329; --ink:#e9ecf5; --muted:#a6adc8;
  --blue:#2f6bff; --blue2:#1e40af; --blue-lit:#6f9bff; --red:#dc2626; --red2:#a01818;
  --violet:#8b5cf6; --green:#22c55e;
  --line:#232a4d; --line2:#2e3766; --radius:14px; --max:1080px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{line-height:1.15; letter-spacing:-.02em; margin:0 0 .5em}
h1,h2{font-family:var(--serif); letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6.4vw,4rem)}
h2{font-size:clamp(1.65rem,3.6vw,2.35rem); margin-bottom:.55em}
h3{font-size:1.15rem}
p{margin:0 0 1em}
a{color:var(--blue-lit); text-decoration:none}
a:hover{text-decoration:underline}
strong{color:#fff}
img{max-width:100%; height:auto}
::selection{background:rgba(47,107,255,.4); color:#fff}
:focus-visible{outline:2px solid var(--blue-lit); outline-offset:3px; border-radius:6px}

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-block; background:var(--blue); color:#fff; font-weight:600;
  padding:.7em 1.3em; border-radius:999px; border:1px solid transparent; overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), background .18s, box-shadow .18s;
  box-shadow:0 6px 18px -8px rgba(47,107,255,.9);
}
.btn:hover{background:var(--blue2); text-decoration:none; transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(47,107,255,.95)}
.btn:active{transform:translateY(0)}
.btn::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  transform:translateX(-120%);
}
.btn:hover::after{animation:sweep .7s ease}
@keyframes sweep{to{transform:translateX(120%)}}
.btn-lg{padding:.9em 1.9em; font-size:1.05rem}
.btn-sm{padding:.45em 1.05em; font-size:.9rem}
.btn-ghost{background:transparent; border-color:var(--line2); color:var(--ink); box-shadow:none}
.btn-ghost:hover{background:rgba(47,107,255,.12); border-color:var(--blue); box-shadow:none}

.invite{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.95em; border-bottom:1px dashed rgba(111,155,255,.5)}
.invite:hover{text-decoration:none; border-bottom-style:solid}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:60; background:rgba(8,11,24,.72);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(35,42,77,.7);
}
.topbar-in{max-width:var(--max); margin:0 auto; padding:12px 22px; display:flex; align-items:center; gap:18px; justify-content:space-between}
.brand{display:inline-flex; align-items:center; gap:9px; font-weight:700; color:var(--ink); font-family:var(--serif); font-size:1.05rem; letter-spacing:.01em; white-space:nowrap}
.brand:hover{text-decoration:none}
.brand img{border-radius:50%; box-shadow:0 0 0 1px rgba(111,155,255,.35)}
.brand em{font-style:normal; color:var(--blue-lit)}
.site-links{display:flex; gap:16px; align-items:center; font-size:.94rem; overflow-x:auto; scrollbar-width:none}
.site-links::-webkit-scrollbar{display:none}
.site-links > *{flex:0 0 auto}
.site-links a{color:var(--muted); white-space:nowrap; position:relative}
.site-links a:not(.btn):after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1.5px; background:var(--blue-lit);
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.site-links a:not(.btn):hover{color:var(--ink); text-decoration:none}
.site-links a:not(.btn):hover:after,.site-links a[aria-current]:after{transform:scaleX(1)}
.site-links a[aria-current]{color:var(--ink)}
.progress{position:absolute; left:0; bottom:-1px; height:2px; width:0; background:linear-gradient(90deg,var(--blue),var(--violet)); transition:width .1s linear}

/* ---------- hero ---------- */
.hero{position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--line)}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(rgba(8,11,24,.82),rgba(8,11,24,.95)), url('/hero-bg.jpg') center 32%/cover no-repeat, var(--panel2);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(47,107,255,.18), transparent 70%),
    linear-gradient(transparent 60%, var(--bg));
}
.aurora{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.aurora i{
  position:absolute; display:block; width:46vw; height:46vw; max-width:640px; max-height:640px;
  border-radius:50%; filter:blur(90px); opacity:.5; will-change:transform;
}
.aurora i:nth-child(1){background:rgba(47,107,255,.5); top:-16%; left:-8%; animation:drift1 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){background:rgba(220,38,38,.28); bottom:-24%; right:-10%; animation:drift2 26s ease-in-out infinite alternate}
.aurora i:nth-child(3){background:rgba(139,92,246,.28); top:24%; right:18%; width:26vw; height:26vw; animation:drift3 19s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(14vw,8vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-12vw,-9vh,0) scale(1.2)}}
@keyframes drift3{to{transform:translate3d(-8vw,10vh,0) scale(.85)}}

.hero-inner{position:relative; max-width:var(--max); margin:0 auto; padding:76px 22px 68px; text-align:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); background:rgba(18,23,52,.7); border:1px solid var(--line2);
  padding:.5em 1em; border-radius:999px; margin-bottom:22px;
}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
h1 .grad{
  background:linear-gradient(100deg,#6f9bff,#a78bfa 55%,#6f9bff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{font-size:clamp(1.05rem,2.1vw,1.3rem); color:var(--muted); max-width:58ch; margin:0 auto 1.5em}
.lede strong{color:#fff}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.microcopy{margin-top:18px; color:var(--muted); font-size:.9rem}

/* rotating topic */
.rot{display:inline-grid; vertical-align:bottom; text-align:left}
.rot span{grid-area:1/1; color:#fff; font-weight:600; opacity:0; transform:translateY(.45em); transition:opacity .4s, transform .4s}
/* until the script takes over (no JS, or reduced motion) the first word stands in as static text */
.rot:not(.live) span:first-child,.rot span.on{opacity:1; transform:none}
.rot span.out{opacity:0; transform:translateY(-.45em)}

/* stats */
.stats{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:30px auto 0; max-width:760px}
.stat{
  flex:1 1 150px; background:rgba(18,23,52,.55); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; backdrop-filter:blur(6px); transition:border-color .2s, transform .2s;
}
.stat:hover{border-color:var(--line2); transform:translateY(-2px)}
.stat b{display:block; font-family:var(--serif); font-size:1.6rem; line-height:1.1; color:#fff}
.stat span{font-size:.82rem; color:var(--muted); letter-spacing:.02em}

/* ---------- keyword ticker ---------- */
.ticker{border-bottom:1px solid var(--line); background:var(--panel2); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex; width:max-content; animation:marquee 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track ul{display:flex; gap:28px; list-style:none; margin:0; padding:12px 14px}
.ticker-track li{color:var(--muted); font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.ticker-track li::before{content:"◆"; color:var(--blue); margin-right:10px; font-size:.6em; vertical-align:middle}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- bands ---------- */
.band{position:relative; max-width:var(--max); margin:0 auto; padding:72px 22px}
.band.alt{background:var(--panel2); max-width:none; border-block:1px solid var(--line)}
.band.alt > *{max-width:var(--max); margin-left:auto; margin-right:auto}
.band p{color:var(--muted); max-width:68ch}
.band p strong{color:#fff}
.band-head{max-width:64ch}
.kicker{display:block; font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-lit); margin-bottom:.9em}
.lead-sm{font-size:1.05rem}

/* ---------- cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:8px}
@media (min-width:860px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{
  position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; overflow:hidden; transition:transform .25s cubic-bezier(.2,.8,.3,1), border-color .25s;
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(47,107,255,.16), transparent 62%);
}
.card:hover{transform:translateY(-4px); border-color:var(--line2)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:.3em}
.card h3 a{color:#fff}
.card p{margin:0; font-size:.95rem; color:var(--muted)}
.card .ic{font-size:1.3rem; display:block; margin-bottom:.4em; filter:saturate(1.1)}

/* ---------- checks ---------- */
.checks{list-style:none; padding:0; margin:0 0 1.6em; max-width:80ch}
.checks li{position:relative; padding:12px 0 12px 36px; color:var(--muted); border-bottom:1px solid var(--line)}
.checks li:before{
  content:"✓"; position:absolute; left:0; top:10px; color:var(--green); font-weight:700;
  width:22px; height:22px; line-height:22px; text-align:center; font-size:.8rem;
  border-radius:50%; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3);
}
.checks strong{color:#fff}

/* ---------- room commands ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:44px; align-items:center}
.split.tight{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px}

/* pull quote */
.quote{
  position:relative; margin:0; padding:30px 28px 24px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18,23,52,.75),rgba(11,14,26,.75));
  border:1px solid var(--line); border-left:3px solid var(--blue);
}
.quote::before{
  content:"\201C"; position:absolute; top:-6px; left:14px; font-family:var(--serif);
  font-size:5rem; line-height:1; color:rgba(111,155,255,.22);
}
.quote blockquote{margin:0 0 .7em; font-family:var(--serif); font-size:1.24rem; line-height:1.45; color:#fff}
.quote figcaption{font-size:.88rem; color:var(--muted)}
.quote cite{font-style:italic}
.feature{display:flex; gap:14px; align-items:flex-start; margin-bottom:18px}
.feature img{width:44px; height:44px; border-radius:50%; flex:none}
.feature h3{font-size:1rem; margin:0 0 .15em; color:var(--blue-lit)}
.feature p{margin:0; font-size:.93rem; color:var(--muted)}

.panel{
  background:linear-gradient(180deg,rgba(18,23,52,.6),rgba(8,11,24,.6));
  border:1px solid var(--line2); border-radius:22px; padding:22px;
  box-shadow:0 30px 70px -40px rgba(47,107,255,.6);
}
.chipgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.chip{
  display:flex; align-items:center; gap:10px; padding:14px 14px; border-radius:12px; font-weight:600;
  color:#fff; font-size:.98rem; background:linear-gradient(180deg,#2c56d8,#1e3fae); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 22px -14px rgba(0,0,0,.9); transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, filter .2s;
}
.chip.hot{background:linear-gradient(180deg,#cf2b2b,#951616)}
.chip:hover{transform:translateY(-3px) scale(1.02); filter:brightness(1.12); box-shadow:0 16px 30px -16px rgba(0,0,0,1)}
.chip .g{font-size:1.15rem; line-height:1}
.chip .s{opacity:.55; font-weight:400}

/* ---------- forum threads ---------- */
.threads{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px}
.thread{
  display:flex; gap:16px; align-items:center; background:rgba(18,23,52,.5); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; transition:transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s, background .22s;
}
.thread:hover{transform:translateX(5px); border-color:rgba(139,92,246,.55); background:rgba(24,20,56,.6)}
.thread img{width:56px; height:56px; border-radius:50%; flex:none}
.thread .tag{
  display:inline-block; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:#c4b5fd;
  background:rgba(139,92,246,.14); border:1px solid rgba(139,92,246,.34); padding:.25em .7em; border-radius:999px; margin-bottom:.45em;
}
.thread h3{font-family:var(--serif); font-size:1.12rem; margin:0 0 .2em; color:#fff; font-weight:600}
.thread p{margin:0; font-size:.9rem; color:var(--muted)}
.forum-cta{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  margin-top:16px; padding:18px 20px; border-radius:var(--radius);
  background:linear-gradient(100deg,rgba(139,92,246,.16),rgba(47,107,255,.12)); border:1px solid rgba(139,92,246,.3);
}
.forum-cta p{margin:0; color:var(--ink); font-weight:600}
.forum-cta small{display:block; font-weight:400; color:var(--muted)}

/* ---------- widget ---------- */
.widget-wrap{display:flex; justify-content:center; min-height:500px; margin:1.5rem 0}
.widget-wrap iframe{max-width:100%; border:0; border-radius:16px; box-shadow:0 30px 70px -40px rgba(47,107,255,.8)}

/* ---------- server directory ---------- */
.servers{list-style:none; counter-reset:s; padding:0; margin:10px 0 0}
.server{
  counter-increment:s; display:flex; gap:16px; align-items:center; justify-content:space-between;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:12px;
}
.server::before{content:counter(s); font-weight:700; color:var(--muted); min-width:1.4em; font-family:var(--serif)}
.server > div{flex:1 1 auto}
.server.featured{border-color:var(--blue); box-shadow:0 0 0 1px rgba(47,107,255,.35), 0 24px 60px -40px rgba(47,107,255,.9)}
.server h3{margin:0 0 .2em}
.server p{margin:0; font-size:.92rem; color:var(--muted)}
.tag{background:var(--blue); color:#fff; font-size:.7rem; padding:.2em .6em; border-radius:999px; vertical-align:middle; margin-left:6px}

/* ---------- faq ---------- */
details{border:1px solid var(--line); border-radius:12px; padding:0 18px; margin-bottom:10px; background:var(--panel); transition:border-color .2s, background .2s}
details:hover{border-color:var(--line2)}
details[open]{background:rgba(18,23,52,.85); border-color:rgba(47,107,255,.45)}
summary{cursor:pointer; font-weight:600; padding:15px 0; list-style:none; display:flex; gap:12px; align-items:baseline}
summary::-webkit-details-marker{display:none}
summary:before{content:"+"; color:var(--blue-lit); font-weight:700; transition:transform .2s; display:inline-block}
details[open] summary:before{content:"+"; transform:rotate(45deg)}
details p{color:var(--muted); margin:0 0 15px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); background:var(--panel2); text-align:center; padding:40px 22px; color:var(--muted); font-size:.92rem}
.foot p{margin:.45em 0}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--ink)}
.foot .invite{color:var(--blue-lit)}

/* ---------- article pages ---------- */
.page-hero .hero-inner{padding:44px 22px 50px}
.page-hero h1{font-size:clamp(1.9rem,4.4vw,2.7rem)}
.article{max-width:760px; margin:0 auto; padding:48px 22px 20px}
.article p{color:var(--muted)}
.article p strong{color:#fff}
.article h2{margin-top:1.8em; font-size:clamp(1.4rem,3vw,1.9rem)}
.article h3{margin-top:1.3em}
.article ul,.article ol{color:var(--muted); padding-left:1.3em; margin:0 0 1.2em}
.article li{margin-bottom:.55em}
.article blockquote{border-left:3px solid var(--blue); margin:1.4em 0; padding:.4em 0 .4em 20px; font-style:italic; color:var(--ink)}
.article blockquote p{color:var(--ink); margin:0}

/* ---------- scroll reveal (only when JS is on) ---------- */
.js [data-reveal]{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); transition-delay:var(--d,0ms)}
.js [data-reveal].in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .split{grid-template-columns:1fr; gap:32px}
}
@media (max-width:640px){
  .hero-inner{padding:56px 20px 54px}
  .band{padding:56px 20px}
  .chipgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .chip{font-size:.92rem; padding:12px 12px}
  .thread{gap:13px; padding:14px}
  .thread img{width:46px; height:46px}
  .stat b{font-size:1.4rem}
  .server{flex-wrap:wrap}
  .topbar-in{padding:10px 16px; gap:12px}
  .brand span{display:none}
  /* keep the Join CTA pinned while the rest of the nav scrolls sideways */
  .site-links{padding-right:2px}
  .site-links .btn{position:sticky; right:0; margin-left:4px; box-shadow:-14px 0 14px 6px rgba(8,11,24,.92)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .js [data-reveal]{opacity:1; transform:none}
  .ticker-track{animation:none}
}

/* ---------- verified server guide ---------- */
.srv-list{counter-reset:s}
.srv-list .server{align-items:flex-start}
.srv-list .server > div{flex:1 1 0; min-width:0}
.srv-list .server::before{margin-top:2px}
.srv-meta{margin:0 0 .6em !important; font-size:.88rem !important; color:var(--muted) !important}
.srv-meta b{color:#fff; font-variant-numeric:tabular-nums}
.tag.warn{background:var(--red)}
.article code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em;
  background:rgba(18,23,52,.9); border:1px solid var(--line); border-radius:5px; padding:.1em .4em; color:var(--ink);
  overflow-wrap:anywhere;
}
.foot .disclaimer{margin-top:1.4em; font-size:.82rem; opacity:.65; max-width:64ch; margin-inline:auto}