:root{
  --bg:#0d0e15;
  --bg-alt:#171922;
  --bg-alt-2:#1d1f2a;
  --text:#f1eee4;
  --muted:#8b8f9c;
  --amber:#e8a23d;
  --amber-soft:#f0b968;
  --amber-dim:#b67b26;
  --rust:#7a3030;
  --line:rgba(237,233,221,0.10);
  --line-soft:rgba(237,233,221,0.06);
  --radius:16px;
  --shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 14px 32px -18px rgba(0,0,0,0.65);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Spectral', serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--amber); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
.wrap{max-width:1080px; margin:0 auto; padding:0 32px; width:100%;}
@media (max-width:360px){
  .wrap{padding:0 24px;}
}

/* ---------- Header ---------- */
header.top{
  border-bottom:1px solid var(--line); padding:16px 0;
  position:sticky; top:0; z-index:30;
  background:rgba(13,14,21,0.82); backdrop-filter:blur(14px);
}
.brand-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:11px; color:var(--text);}
.brand:hover{text-decoration:none;}
.brand .brand-icon{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg, var(--amber-soft), var(--amber), var(--amber-dim));
  display:flex; align-items:center; justify-content:center; color:#12141c;
}
.brand .brand-text{font-family:'Special Elite', cursive; letter-spacing:1.5px; font-size:14px; color:var(--amber); text-transform:uppercase; line-height:1.3;}
.brand small{display:block; color:var(--muted); font-size:10.5px; letter-spacing:1px; margin-top:2px; font-family:'IBM Plex Mono', monospace; text-transform:none;}
nav.mainnav{display:flex; gap:4px; flex-wrap:wrap; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.3px;}
nav.mainnav a{color:var(--muted); padding:9px 14px; border-radius:20px; transition:background .15s, color .15s;}
nav.mainnav a:hover{color:var(--text); background:var(--line-soft); text-decoration:none;}
nav.mainnav a.active{color:var(--amber); background:rgba(232,162,61,0.1);}

/* ---------- Hero ---------- */
.hero{padding:60px 0 46px; border-bottom:1px solid var(--line); position:relative;}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:1.5px; color:var(--amber);
  text-transform:uppercase; margin:0 0 18px; padding:6px 12px; border:1px solid rgba(232,162,61,0.3);
  border-radius:20px; background:rgba(232,162,61,0.06);
}
.hero h1{font-size:clamp(30px,5vw,48px); font-weight:600; margin:0 0 16px; max-width:18ch; letter-spacing:-0.01em;}
.hero p.lede{max-width:60ch; color:var(--muted); font-size:17px; margin:0;}

/* ---------- Search bar ---------- */
.search-bar{border-bottom:1px solid var(--line); padding:18px 0;}
.search-form{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:14px;
  padding:12px 16px; max-width:520px; color:var(--muted);
}
.search-form:focus-within{border-color:rgba(232,162,61,0.4);}
.search-form svg{flex-shrink:0;}
.search-form input{
  flex:1; background:none; border:none; outline:none; color:var(--text);
  font-family:'Spectral', serif; font-size:15px;
}
.search-form input::placeholder{color:var(--muted);}
.search-clear{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--muted); flex-shrink:0;}
.search-clear:hover{color:var(--amber); text-decoration:none;}

/* ---------- Filters ---------- */
.filters{border-bottom:1px solid var(--line); padding:16px 0; display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.filters .label{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:1.5px; text-transform:uppercase; margin-right:6px;}
.chip{font-family:'IBM Plex Mono', monospace; font-size:12px; background:var(--bg-alt); border:1px solid var(--line); color:var(--muted); padding:8px 15px; border-radius:20px; cursor:pointer; transition:border-color .15s, color .15s, background .15s;}
.chip:hover{border-color:rgba(232,162,61,0.4); color:var(--text);}
.chip.active{border-color:var(--amber); color:var(--amber); background:rgba(232,162,61,0.1);}

.layout{display:grid; grid-template-columns:1fr 300px; gap:36px; padding-top:44px; padding-bottom:70px; align-items:start;}
@media (max-width:860px){.layout{grid-template-columns:1fr;}}

/* ---------- Cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:22px;}
.card{
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius);
  display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.card:hover{transform:translateY(-3px); border-color:rgba(232,162,61,0.25); box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 20px 40px -16px rgba(0,0,0,0.75);}
.card .thumb{aspect-ratio:16/10; overflow:hidden; background:#0d0e14;}
.card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .3s;}
.card:hover .thumb img{transform:scale(1.04);}
.card-body{padding:18px 20px 20px;}
.card .meta{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.5px; margin-bottom:10px; display:flex; justify-content:space-between; gap:8px;}
.card h2, .card h3{font-size:19px; font-weight:600; margin:0 0 8px; line-height:1.35;}
.card h2 a, .card h3 a{color:var(--text);}
.card h2 a:hover, .card h3 a:hover{color:var(--amber); text-decoration:none;}
.card p{color:var(--muted); font-size:14.5px; margin:0;}
.pill{
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.5px; color:var(--amber);
  text-transform:uppercase; background:rgba(232,162,61,0.1); padding:3px 9px; border-radius:20px;
}

@media (max-width:640px){
  .grid{grid-template-columns:1fr 1fr; gap:12px;}
  .card-body{padding:11px 12px 13px;}
  .card .meta{flex-direction:column; align-items:flex-start; gap:4px; margin-bottom:8px;}
  .card h2, .card h3{font-size:14px; line-height:1.3;}
  .card p{display:none;}
  .pill{font-size:9px; padding:2px 7px;}
}

.pagination{display:flex; gap:8px; justify-content:center; margin-top:40px; font-family:'IBM Plex Mono', monospace; font-size:13px;}
.pagination a, .pagination span{border:1px solid var(--line); border-radius:10px; padding:9px 14px; color:var(--muted);}
.pagination a:hover{border-color:var(--amber); color:var(--amber); text-decoration:none;}
.pagination .current{border-color:var(--amber); color:var(--amber); background:rgba(232,162,61,0.08);}

/* ---------- Sidebar ---------- */
aside .box{background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-bottom:20px; box-shadow:var(--shadow);}
aside .box h3{font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--amber); margin:0 0 14px;}
aside ul{list-style:none; padding:0; margin:0;}
aside li{border-bottom:1px dashed var(--line); padding:10px 0;}
aside li:last-child{border-bottom:none;}
aside li a{color:var(--text); font-size:14.5px;}
aside li a:hover{color:var(--amber); text-decoration:none;}

.stamp{font-family:'Special Elite', cursive; font-size:11px; letter-spacing:1px; padding:5px 9px; border:2px solid var(--amber-dim); color:var(--amber); transform:rotate(-3deg); white-space:nowrap; text-transform:uppercase; display:inline-block; border-radius:4px;}

/* ---------- Article ---------- */
article.single{padding-top:48px; padding-bottom:20px; overflow-wrap:break-word;}
article.single .article-meta{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted); letter-spacing:0.5px; margin-bottom:16px; display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
article.single h1{font-size:clamp(28px,4.5vw,42px); font-weight:600; margin:0 0 22px; line-height:1.3; overflow-wrap:break-word; letter-spacing:-0.01em;}
article.single .featured{margin-bottom:26px; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.article-body{font-size:18px; max-width:70ch; overflow-wrap:break-word; word-break:break-word;}
.article-body p{margin:0 0 20px;}
.article-body h2{font-size:24px; margin:36px 0 16px; font-weight:600;}
.article-body h3{font-size:20px; margin:28px 0 14px; font-weight:600;}

.tts-bar{
  display:flex; align-items:center; gap:12px; background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 18px; margin:0 0 32px; max-width:70ch; box-shadow:var(--shadow);
}
.tts-bar button{
  font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:500; cursor:pointer;
  border:none; border-radius:10px; padding:10px 16px;
  background:linear-gradient(135deg, var(--amber-soft), var(--amber)); color:#12141c;
  box-shadow:0 6px 16px -6px rgba(232,162,61,0.5); transition:transform .12s;
}
.tts-bar button:hover{transform:translateY(-1px);}
.tts-bar button#tts-stop{background:var(--bg-alt-2); color:var(--text); border:1px solid var(--line); box-shadow:none;}
.tts-bar span{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.5px;}

.share-bar{display:flex; align-items:center; gap:9px; margin:0 0 32px; max-width:70ch; flex-wrap:wrap;}
.share-label{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted); letter-spacing:0.5px; text-transform:uppercase; margin-right:4px;}
.share-btn{
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-alt); border:1px solid var(--line); color:var(--muted); cursor:pointer;
  transition:transform .15s, color .15s, border-color .15s;
}
.share-btn:hover{transform:translateY(-2px); text-decoration:none;}
.share-btn.wa:hover{color:#25D366; border-color:#25D366;}
.share-btn.fb:hover{color:#1877F2; border-color:#1877F2;}
.share-btn.x:hover{color:var(--text); border-color:var(--text);}
.share-btn.tg:hover{color:#29A9EA; border-color:#29A9EA;}
.share-btn.copy:hover{color:var(--amber); border-color:var(--amber);}
#copy-status{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--amber);}

.author-box{
  display:flex; gap:14px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-alt); padding:22px; margin:36px 0; max-width:70ch; box-shadow:var(--shadow);
}
.author-box .avatar{
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  background:linear-gradient(135deg, var(--amber-soft), var(--amber), var(--amber-dim));
  display:flex; align-items:center; justify-content:center; font-family:'Spectral',serif; font-weight:600; color:#12141c; font-size:18px;
}
.author-box h4{margin:0 0 4px; font-size:15px;}
.author-box p{margin:0 0 10px; color:var(--muted); font-size:14px;}
.author-box .social{display:flex; gap:8px; flex-wrap:wrap;}
.author-box .social a{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; border:1px solid var(--line); border-radius:20px;
  padding:5px 12px; color:var(--muted);
}
.author-box .social a:hover{color:var(--amber); border-color:rgba(232,162,61,0.4); text-decoration:none;}

.related{padding-top:34px; padding-bottom:60px; border-top:1px solid var(--line); margin-top:20px;}
.related h3{font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--amber); margin:0 0 20px;}

.ad-slot{border:1px dashed var(--line); border-radius:12px; color:var(--muted); font-family:'IBM Plex Mono', monospace; font-size:11px; text-align:center; padding:16px; margin:26px 0; max-width:70ch;}

/* ---------- Forms ---------- */
form.contact-form{display:flex; flex-direction:column; gap:16px; max-width:520px;}
form.contact-form label{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted); letter-spacing:0.5px; text-transform:uppercase;}
form.contact-form input, form.contact-form textarea{
  background:var(--bg-alt); border:1px solid var(--line); border-radius:12px; color:var(--text);
  padding:12px 15px; font-family:'Spectral', serif; font-size:15px; transition:border-color .15s;
}
form.contact-form input:focus, form.contact-form textarea:focus{outline:none; border-color:rgba(232,162,61,0.5);}
form.contact-form textarea{min-height:140px; resize:vertical;}
form.contact-form button{
  font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
  border:none; border-radius:12px; background:linear-gradient(135deg, var(--amber-soft), var(--amber)); color:#12141c;
  padding:13px 22px; cursor:pointer; width:fit-content; box-shadow:0 8px 20px -8px rgba(232,162,61,0.55);
  transition:transform .12s;
}
form.contact-form button:hover{transform:translateY(-1px);}
.form-msg{font-family:'IBM Plex Mono', monospace; font-size:13px; padding:11px 16px; border-radius:12px; border:1px solid var(--line);}
.form-msg.ok{border-color:rgba(232,162,61,0.35); color:var(--amber); background:rgba(232,162,61,0.08);}

.static-page{padding-top:52px; padding-bottom:70px; max-width:70ch;}
.static-page h1{font-size:34px; margin:0 0 24px;}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line); padding:36px 0 50px; color:var(--muted); font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.5px;}
footer.site .foot-links{margin-top:12px; display:flex; gap:16px; flex-wrap:wrap;}
footer.site .foot-links a:hover{text-decoration:none; color:var(--amber);}