:root{
  --bg:#0E0D0C; --bg-panel:#1A1715; --bg-panel-2:#080707;
  --text:#F2EEE6; --text-dim:#A9A49B;
  --gold:#D8BC86; --accent:#C9A86E; --red:#C41E4A;
  --line: rgba(242,238,230,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ background:var(--bg); color:var(--text); font-family:'Work Sans', sans-serif; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2{font-family:'Anton', sans-serif; font-weight:400; letter-spacing:0.5px; text-transform:uppercase; line-height:1.1;}
h3{font-family:'Work Sans', sans-serif; font-weight:700; font-size:19px; line-height:1.35;}
a{color:var(--gold);}
img{max-width:100%;}
.wrap{max-width:780px; margin:0 auto; padding:0 24px;}
.wrap--wide{max-width:1040px;}

.slate-bar{ position:sticky; top:0; z-index:50; background:var(--bg-panel-2); border-bottom:2px solid var(--red);
  background-image: repeating-linear-gradient(-45deg, rgba(196,30,74,0.10) 0 14px, transparent 14px 28px); }
.slate-bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; padding-bottom:12px; max-width:1040px; }
.slate-brand{font-family:'Anton', sans-serif; font-size:20px; letter-spacing:1px; color:var(--text); text-decoration:none;}
.slate-brand span{color:var(--accent);}
.slate-nav{ display:flex; gap:18px; align-items:center; }
.slate-nav a{ color:var(--text); text-decoration:none; font-family:'Space Mono',monospace; font-size:13px; text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }
.slate-nav a:hover, .slate-nav a[aria-current]{ color:var(--gold); }
@media (max-width:420px){ .slate-nav a{ font-size:11px; letter-spacing:0.5px; } .slate-nav{ gap:12px; } .slate-brand{ font-size:17px; } }

.crumbs{ font-family:'Space Mono',monospace; font-size:12px; color:var(--text-dim); margin:40px 0 18px; }
.crumbs a{ color:var(--text-dim); }
.eyebrow{ font-family:'Space Mono', monospace; font-size:13px; color:var(--accent); letter-spacing:2px; text-transform:uppercase; margin-bottom:14px; }
h1{ font-size:clamp(34px, 6.4vw, 60px); margin-bottom:18px; }
.meta{ font-family:'Space Mono',monospace; font-size:12px; color:var(--text-dim); margin-bottom:26px; }
.lead{ font-size:18px; color:var(--text); margin-bottom:14px; }

.summary{ background:var(--bg-panel); border:2px solid var(--red); border-radius:10px; padding:22px 26px; margin:26px 0; }
.summary .label{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px; }
.summary ul{ list-style:none; }
.summary li{ position:relative; padding-left:22px; margin-bottom:8px; }
.summary li::before{ content:'+'; position:absolute; left:0; color:var(--accent); font-family:'Space Mono',monospace; font-weight:700; }

.toc{ border:1px solid var(--line); border-radius:10px; padding:18px 24px; margin:0 0 10px; }
.toc .label{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:8px; }
.toc ol{ margin-left:20px; }
.toc li{ color:var(--text-dim); margin-bottom:4px; }
.toc a{ color:var(--text); text-decoration:none; }
.toc a:hover{ color:var(--gold); }

article section{ padding-top:40px; }
article h2{ font-size:clamp(24px,4vw,34px); margin-bottom:14px; scroll-margin-top:80px; }
article h3{ margin:22px 0 8px; }
article p, article li{ color:var(--text-dim); }
article p{ margin-bottom:14px; }
article strong{ color:var(--text); }
article ul, article ol{ margin:8px 0 16px 22px; }
article li{ margin-bottom:7px; }
article figure{ margin:26px 0; }
article figure img{ display:block; width:auto; max-width:100%; height:auto; max-height:620px; margin:0 auto; border-radius:10px; border:2px solid var(--line); }
article figcaption{ font-family:'Space Mono',monospace; font-size:12px; color:var(--text-dim); text-align:center; margin-top:8px; }
.tip{ border-left:3px solid var(--red); background:var(--bg-panel); padding:14px 18px; border-radius:0 8px 8px 0; margin:18px 0; }
.tip p{ margin:0; color:var(--text); }

.table-wrap{ overflow-x:auto; margin:14px 0 20px; border:1px solid var(--line); border-radius:10px; }
table{ width:100%; border-collapse:collapse; font-size:15px; min-width:540px; }
th, td{ text-align:left; padding:12px 15px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ background:var(--bg-panel-2); border-bottom:2px solid var(--red); font-family:'Space Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--accent); }
td{ color:var(--text-dim); }
td:first-child{ color:var(--text); font-weight:600; }
tr:last-child td{ border-bottom:0; }

.faq details{ border:1px solid var(--line); border-left:3px solid var(--red); border-radius:10px; margin-bottom:10px; background:var(--bg-panel-2); }
.faq summary{ cursor:pointer; padding:15px 48px 15px 20px; font-weight:700; list-style:none; position:relative; color:var(--text); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; position:absolute; right:20px; top:13px; color:var(--accent); font-family:'Space Mono',monospace; font-size:18px; }
.faq details[open] summary::after{ content:'\2013'; }
.faq details p{ padding:0 20px 16px; margin:0; }

.cta{ background:var(--bg-panel); border:2px solid var(--red); border-radius:10px; padding:32px 28px; text-align:center; margin:44px 0 0; }
.cta h2{ margin-bottom:10px; }
.cta p{ color:var(--text-dim); max-width:520px; margin:0 auto 20px; }
.btn{ display:inline-block; font-family:'Space Mono', monospace; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:11px 20px; border-radius:3px; text-decoration:none; white-space:nowrap; margin:4px; }
.btn-primary{ background:var(--red); color:#fff; }
.btn-ghost{ border:1.5px solid var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--red); }

.author{ display:flex; gap:14px; align-items:center; margin-top:34px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; color:var(--text-dim); }
.author img{ width:52px; height:auto; }
.related{ margin-top:30px; }
.related a{ display:block; border:1px solid var(--line); border-radius:10px; padding:16px 20px; text-decoration:none; color:var(--text); }
.related a:hover{ border-color:var(--red); }
.related a + a{ margin-top:10px; }
.related .label{ font-family:'Space Mono',monospace; font-size:12px; color:var(--accent); letter-spacing:1px; text-transform:uppercase; display:block; margin-bottom:4px; }

.post-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:24px; margin:26px 0 20px; }
.post-card{ display:flex; flex-direction:column; border:2px solid var(--line); border-radius:10px; overflow:hidden; text-decoration:none; color:var(--text); background:var(--bg-panel-2); transition:border-color .2s; }
.post-card:hover{ border-color:var(--red); }
.post-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.post-card .body{ padding:18px 20px 22px; }
.post-card .label{ font-family:'Space Mono',monospace; font-size:12px; color:var(--accent); letter-spacing:1px; text-transform:uppercase; display:block; margin-bottom:6px; }
.post-card h2{ font-size:24px; margin-bottom:8px; }
.post-card p{ color:var(--text-dim); font-size:15px; }

footer{ padding:56px 0 40px; text-align:center; color:var(--text-dim); font-family:'Space Mono',monospace; font-size:12px; }
footer a{ color:var(--text-dim); }