/* =============================================
   RESET & BASE
   ============================================= */
* { margin:0; padding:0; box-sizing:border-box; }
body { background:#f0ece3; color:#0d0d0d; font-family:'IBM Plex Mono',monospace; overflow-x:hidden; }

/* =============================================
   NAV
   ============================================= */
nav {
  display:flex; align-items:stretch;
  border-bottom:3px solid #0d0d0d;
  position:sticky; top:0; background:#f0ece3; z-index:100;
}
.nav-logo {
  font-family:'Bebas Neue',sans-serif; font-size:24px;
  color:#f0ece3; letter-spacing:3px;
  background:#0d0d0d; padding:10px 22px;
  border-right:3px solid #0d0d0d; position:relative; flex-shrink:0;
  text-decoration:none; display:flex; align-items:center;
}
.nav-logo::after {
  content:'✕'; position:absolute; top:-6px; right:-8px;
  font-family:'Special Elite',cursive; font-size:13px;
  color:#f0ece3; background:#c0392b;
  width:20px; height:20px; display:flex;
  align-items:center; justify-content:center;
  transform:rotate(12deg); z-index:2;
}
.nav-logo span { color:#c0392b; }
.nav-links { display:flex; list-style:none; }
.nav-links li { border-right:1.5px solid #ddd8cc; }
.nav-links a {
  display:block; color:#0d0d0d; text-decoration:none;
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  padding:0 14px; line-height:44px; transition:background 0.1s;
}
.nav-links a:hover { background:#e5e0d5; }
.nav-right {
  margin-left:auto; border-left:1.5px solid #ddd8cc;
  display:flex; align-items:center; padding:0 18px;
  font-size:10px; color:#999; letter-spacing:2px; gap:8px; flex-shrink:0;
}
.dot { width:7px; height:7px; background:#c0392b; border-radius:50%; }
.nav-hamburger {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; padding:0 18px; cursor:pointer; margin-left:auto;
  background:none; border:none; border-left:1.5px solid #ddd8cc;
}
.nav-hamburger span { display:block; width:22px; height:2px; background:#0d0d0d; transition:transform 0.15s, opacity 0.15s; }
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav-mobile-menu {
  display:none; position:fixed; top:47px; left:0; right:0;
  background:#f0ece3; border-bottom:3px solid #0d0d0d; z-index:99; flex-direction:column;
}
.nav-mobile-menu.open { display:flex; }
.nav-mobile-menu a { display:block; color:#0d0d0d; text-decoration:none; font-size:11px; letter-spacing:3px; text-transform:uppercase; padding:14px 24px; border-bottom:1px solid #ddd8cc; }

/* =============================================
   HERO ANIMATIONS
   ============================================= */
@keyframes bar-slam    { to { transform:translateX(0); } }
@keyframes crash-down  { to { opacity:1; transform:translateY(0); } }
@keyframes snap-right  { to { opacity:1; transform:translateX(0); } }
@keyframes snap-up     { to { opacity:1; transform:translateY(0); } }
@keyframes fade-in     { to { opacity:1; } }

/* =============================================
   DEVLOG HERO (INDEX)
   ============================================= */
.dispatch-hero { border-bottom:3px solid #0d0d0d; padding:48px 32px 40px; position:relative; overflow:hidden; }
.dispatch-hero::before { content:'DISPATCH'; position:absolute; bottom:-10px; right:-20px; font-family:'Bebas Neue',sans-serif; font-size:160px; color:#0d0d0d; opacity:0.04; letter-spacing:-4px; pointer-events:none; white-space:nowrap; }
.hero-eyebrow { font-family:'Special Elite',cursive; font-size:11px; letter-spacing:2px; color:#999; margin-bottom:10px; display:inline-block; opacity:0; animation:snap-right 0.15s cubic-bezier(0,0,0.2,1) 0.05s forwards; }
.dispatch-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(64px,12vw,108px); color:#0d0d0d; line-height:0.88; letter-spacing:2px; margin-bottom:4px; }
.dispatch-title .bar { display:inline-block; width:14px; height:0.88em; background:#c0392b; margin-right:8px; vertical-align:bottom; transform:translateX(-120px); animation:bar-slam 0.18s cubic-bezier(0,0,0.2,1) 0.1s forwards; }
.dispatch-title .scrawl { display:inline-block; opacity:0; transform:translateY(-60px); animation:crash-down 0.2s cubic-bezier(0,0,0.2,1) 0.28s forwards; }
.dispatch-title .initial { color:#c0392b; display:inline-block; opacity:0; transform:translateY(-60px); animation:crash-down 0.2s cubic-bezier(0,0,0.2,1) 0.42s forwards; }
.hero-role { font-family:'Bebas Neue',sans-serif; font-size:clamp(15px,3vw,22px); color:#bbb; letter-spacing:3px; margin-bottom:24px; opacity:0; transform:translateX(-20px); animation:snap-right 0.15s cubic-bezier(0,0,0.2,1) 0.58s forwards; }
.hero-desc { font-size:13px; color:#777; line-height:1.9; max-width:480px; border-left:3px solid #c0392b; padding-left:14px; opacity:0; transform:translateX(-16px); animation:snap-right 0.15s cubic-bezier(0,0,0.2,1) 0.72s forwards; }

/* =============================================
   POST HERO (PAGE)
   ============================================= */
.post-hero { border-bottom:3px solid #0d0d0d; padding:48px 32px 40px; position:relative; overflow:hidden; }
.post-hero::before { content:''; position:absolute; top:0; left:0; bottom:0; width:6px; background:#c0392b; }
.post-meta-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.post-date { font-family:'Special Elite',cursive; font-size:11px; color:#aaa; letter-spacing:2px; }
.post-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(36px,7vw,72px); color:#0d0d0d; line-height:0.9; letter-spacing:2px; margin-bottom:16px; max-width:820px; }
.post-meta-bar { display:flex; gap:20px; font-size:10px; color:#bbb; letter-spacing:2px; margin-bottom:16px; }
.post-meta-bar span::before { content:'// '; color:#c0392b; }
.post-description { font-size:13px; color:#777; line-height:1.9; max-width:600px; border-left:3px solid #c0392b; padding-left:14px; }

/* =============================================
   DIVIDERS
   ============================================= */
.divider-shard { background:#0d0d0d; position:relative; display:flex; align-items:stretch; overflow:visible; z-index:5; }
.divider-shard .d-block { height:28px; flex:1; background:#0d0d0d; }
.divider-shard .shard { position:relative; background:#f0ece3; border-left:3px solid #c0392b; border-right:3px solid #c0392b; padding:0 16px; display:flex; align-items:center; margin:-10px 0; z-index:10; overflow:hidden; }
.divider-shard .shard-left { clip-path:polygon(8px 0%,100% 0%,100% 100%,0% 100%); }
.divider-shard .shard-right { clip-path:polygon(0% 0%,calc(100% - 8px) 0%,100% 100%,0% 100%); }
.shard-text { font-family:'Special Elite',cursive; font-size:11px; color:#0d0d0d; letter-spacing:2px; white-space:nowrap; text-transform:uppercase; display:block; }
.shard-text .x { color:#c0392b; margin:0 8px; font-size:14px; }
.shard-left .shard-text { transform:translateX(-60px); opacity:0; transition:transform 0.18s cubic-bezier(0,0,0.2,1), opacity 0.18s ease; }
.shard-right .shard-text { transform:translateX(60px); opacity:0; transition:transform 0.18s cubic-bezier(0,0,0.2,1), opacity 0.18s ease; }
.shard-text.visible { transform:translateX(0) !important; opacity:1 !important; }

/* =============================================
   SECTION HEADERS
   ============================================= */
.section-header { display:flex; align-items:stretch; border-bottom:3px solid #0d0d0d; }
.sh-num { font-family:'Bebas Neue',sans-serif; font-size:28px; color:#f0ece3; background:#0d0d0d; padding:4px 16px; letter-spacing:2px; border-right:3px solid #0d0d0d; }
.sh-label { font-family:'Bebas Neue',sans-serif; font-size:28px; color:#0d0d0d; padding:4px 16px; letter-spacing:3px; }
.sh-punk { font-family:'Special Elite',cursive; font-size:10px; color:#c0392b; padding:4px 0; align-self:flex-end; margin-bottom:6px; margin-left:8px; transform:rotate(-1deg); opacity:0.8; }

/* =============================================
   POST LIST (INDEX)
   ============================================= */
.posts-list { border-bottom:3px solid #0d0d0d; }
.blog-item {
  display:grid; grid-template-columns:70px 1fr 100px; gap:16px;
  padding:14px 32px; border-bottom:1px solid #e8e3d8; align-items:center;
  position:relative; text-decoration:none; color:inherit;
}
.blog-item:last-child { border-bottom:none; }
.blog-item:hover { background:#e8e3d8; }
.blog-item:hover .blog-title { color:#c0392b; }
.blog-item:hover::before { content:'→'; position:absolute; left:16px; font-family:'Special Elite',cursive; color:#c0392b; font-size:14px; }
.blog-date { font-size:10px; color:#bbb; letter-spacing:1px; }
.blog-title { font-size:13px; color:#333; transition:color 0.15s; }
.blog-title.punk { font-family:'Special Elite',cursive; font-size:14px; }
.blog-cat { font-size:9px; letter-spacing:2px; text-transform:uppercase; text-align:right; color:#bbb; }
.blog-cat.dev { color:#0d0d0d; } .blog-cat.writing { color:#c0392b; } .blog-cat.ops { color:#557755; }
.blog-empty { padding:32px; font-size:11px; color:#bbb; letter-spacing:2px; font-family:'Special Elite',cursive; text-align:center; }

/* =============================================
   POST BODY (PAGE)
   ============================================= */
.post-body-wrap { display:grid; grid-template-columns:1fr 240px; border-bottom:3px solid #0d0d0d; }
.post-body { padding:40px 48px 56px 32px; border-right:3px solid #0d0d0d; min-width:0; }

/* typography */
.post-body p { font-size:14px; color:#444; line-height:1.95; margin-bottom:20px; }
.post-body p:last-child { margin-bottom:0; }
.post-body h2 { font-family:'Bebas Neue',sans-serif; font-size:32px; color:#0d0d0d; letter-spacing:2px; margin:40px 0 14px; padding-bottom:6px; border-bottom:1.5px solid #ddd8cc; line-height:1; }
.post-body h2:first-child { margin-top:0; }
.post-body h3 { font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; color:#0d0d0d; letter-spacing:2px; text-transform:uppercase; margin:28px 0 10px; }
.post-body h4 { font-size:12px; font-weight:700; color:#c0392b; letter-spacing:2px; text-transform:uppercase; margin:20px 0 8px; }
.post-body strong { color:#0d0d0d; font-weight:700; }
.post-body em { font-style:italic; color:#555; }
.post-body a { color:#c0392b; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.post-body a:hover { color:#0d0d0d; }

/* lists */
.post-body ul, .post-body ol { margin:0 0 20px 20px; }
.post-body li { font-size:14px; color:#444; line-height:1.8; margin-bottom:4px; }

/* blockquote */
.post-body blockquote { border-left:3px solid #c0392b; padding:12px 20px; margin:24px 0; background:#f5f1e8; }
.post-body blockquote p { color:#666; font-style:italic; margin-bottom:0; font-size:13px; }

/* inline code */
.post-body code { font-family:'IBM Plex Mono',monospace; font-size:12px; background:#e8e3d8; color:#0d0d0d; padding:2px 6px; border:1px solid #ddd8cc; }

/* code blocks */
.post-body pre { background:#0d0d0d; border-left:3px solid #c0392b; padding:20px 24px; margin:24px 0; overflow-x:auto; }
.post-body pre code { background:none; border:none; padding:0; font-size:12px; color:#ccc; line-height:1.7; }

/* hr */
.post-body hr { border:none; border-top:3px solid #ddd8cc; margin:36px 0; }

/* post sidebar */
.post-sidebar { background:#e8e3d8; }
.post-sidebar .side-block { border-bottom:1.5px solid #d0cab8; padding:16px 20px; }
.post-sidebar .side-block:last-of-type { border-bottom:none; }
.side-label { font-family:'Special Elite',cursive; font-size:10px; letter-spacing:2px; color:#aaa; margin-bottom:12px; }
.side-row { display:flex; justify-content:space-between; font-size:11px; padding:4px 0; border-bottom:1px solid #ddd8cc; color:#aaa; }
.side-row:last-child { border-bottom:none; }
.side-row span:last-child { color:#333; }
.post-back-wrap { padding:20px; }
.post-back { font-size:10px; color:#aaa; text-decoration:none; letter-spacing:2px; text-transform:uppercase; font-family:'Special Elite',cursive; display:block; transition:color 0.1s; }
.post-back:hover { color:#c0392b; }

/* =============================================
   FOOTER
   ============================================= */
footer { border-top:3px solid #0d0d0d; display:flex; align-items:stretch; flex-wrap:wrap; }
.footer-copy { font-size:10px; color:#f0ece3; letter-spacing:2px; background:#0d0d0d; padding:12px 22px; border-right:3px solid #0d0d0d; }
.footer-sys { font-size:10px; color:#bbb; letter-spacing:1px; padding:12px 22px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-left:auto; }
.footer-sys span { color:#555; }
.footer-chaos { padding:10px 18px; border-right:1.5px solid #ddd8cc; display:flex; align-items:center; gap:1px; font-size:12px; }
.chaos-letter { display:inline-block; font-size:11px; font-weight:400; cursor:default; }

/* =============================================
   RESPONSIVE 768px
   ============================================= */
@media (max-width:768px) {
  .nav-links, .nav-right { display:none; }
  .nav-hamburger { display:flex; }
  .dispatch-hero { padding:36px 24px 32px; }
  .post-hero { padding:36px 24px 32px; }
  .post-body-wrap { grid-template-columns:1fr; }
  .post-body { border-right:none; border-bottom:3px solid #0d0d0d; padding:28px 24px 36px; }
  .post-sidebar { border-top:none; }
  .blog-item { grid-template-columns:60px 1fr; gap:10px; padding:12px 20px; }
  .blog-cat { display:none; }
  .blog-item:hover::before { display:none; }
  .sh-punk { display:none; }
}

/* =============================================
   RESPONSIVE 480px
   ============================================= */
@media (max-width:480px) {
  .nav-logo { font-size:20px; padding:10px 16px; letter-spacing:2px; }
  .dispatch-hero { padding:28px 18px 26px; }
  .dispatch-title { font-size:clamp(52px,18vw,72px); }
  .post-title { font-size:clamp(32px,10vw,48px); }
  .post-body { padding:20px 18px 28px; }
  .post-body h2 { font-size:26px; }
  .post-body p, .post-body li { font-size:13px; }
  .blog-item { grid-template-columns:1fr; gap:4px; padding:12px 18px; }
  .blog-date { font-size:9px; }
  footer { flex-direction:column; }
  .footer-copy { border-right:none; border-bottom:1px solid #2a2a2a; }
  .footer-sys { padding:10px 18px; font-size:9px; margin-left:0; }
  .footer-chaos { border-right:none; border-bottom:1px solid #ddd8cc; }
}