/* Self-contained hell-like theme just for Devlog */
:root{
  --bg:#0b0b0f; --bg1:#101016; --bg2:#1a0f14;
  --accent:#d72638; --accent-2:#ff6b6b;
  --panel:#17141b; --panel-border:#3a2630;
  --ink:#e8e8f0; --ink-strong:#ffffff; --muted:#b0b0c0;
  --noise:.07;
}

html{ color-scheme:dark; }
body{
  margin:0;
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-color:var(--bg);
  background-image:
    radial-gradient(120% 100% at 50% 0%, var(--bg2) 0%, var(--bg1) 50%, var(--bg) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 8%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)),
    repeating-conic-gradient(color-mix(in srgb, var(--accent) 4%, transparent) 0 1deg, transparent 1deg 2deg);
  background-attachment: fixed, fixed, fixed;
  background-size: cover, cover, 256px 256px;
  background-repeat: no-repeat;
  isolation:isolate; /* bulletproof: content never blends under */
}

.dl-container{ max-width:72rem; margin:0 auto; padding:2rem 1rem; }
@media(min-width:640px){ .dl-container{ padding:3rem 1.25rem; } }

.dl-h1{ font-family:Cinzel, serif; font-weight:700; font-size:clamp(28px,4vw,40px); margin:0 0 .5rem; letter-spacing:.02em; }
.dl-lead{ max-width:48rem; opacity:.9; margin:0 0 2rem; }

.dl-grid{ display:grid; gap:1rem; }
@media(min-width:768px){ .dl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; } }

.dl-card{
  background:var(--panel);
  border:1px solid var(--panel-border);
  color:var(--ink-strong);
  border-radius:18px;
  padding:1.25rem;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.35);
}
.dl-card h2{ font-size:1.125rem; margin:0 0 .25rem; }
.dl-card time{ opacity:.8; font-size:.9rem; }
.dl-card p{ margin:.5rem 0 0; }

.dl-actions{ margin-top:1rem; }
.dl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.5rem .875rem; border-radius:14px; text-decoration:none; font-weight:600;
  border:1px solid var(--panel-border);
}
.dl-btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:#1a1212;
  border-color:var(--panel-border);
}
.dl-btn-secondary{
  background:transparent; color:var(--ink);
  border-color:var(--accent);
}
.dl-btn:hover{ filter:brightness(.98); transform:translateY(-1px); transition:.2s ease; }

.dl-nav{
  display:flex; align-items:center; gap:1rem;
  max-width:72rem; margin:0 auto; padding:1rem;
}
.dl-nav a{ color:var(--ink); text-decoration:none; opacity:.9; }
.dl-nav a:hover{ opacity:1; text-decoration:underline; }

.dl-footer{ max-width:72rem; margin:0 auto; padding:2rem 1rem; opacity:.7; font-size:.9rem; }

/* skip link (accessibility) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.sr-only:focus{ position:static; width:auto; height:auto; margin:0; clip:auto; padding:.5rem .75rem; border:1px solid var(--accent); border-radius:10px; background:#000; color:#fff; }