/* ── Devlog — index list + article pages ─────────────────────────────
   Loaded after styles.css; reuses the landing design tokens (--bg, --cyan,
   --border, --border-glow) and the same glass-panel treatment as
   .feature-card. No JS beyond the shared app.js. */

/* ── Index ── */
.devlog-main {
    position: relative;
    z-index: 5;
    max-width: 860px;
    margin: 0 auto;
    padding: 140px clamp(20px, 4vw, 48px) 80px;
}
.devlog-heading {
    font-family: 'Titillium Web', sans-serif;
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 14px;
}
.devlog-intro {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    max-width: 580px;
    margin: 0 0 48px;
}
.devlog-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.devlog-card {
    display: block;
    padding: 26px 28px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
    transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.devlog-card:hover {
    border-color: var(--border-glow);
    background: rgba(0, 243, 255, 0.03);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 243, 255, 0.04);
}
.devlog-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan);
}
.devlog-card-title {
    font-family: 'Titillium Web', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin: 10px 0 8px;
}
.devlog-card-excerpt {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.58);
    margin: 0 0 14px;
}
.devlog-read {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.3s;
}
.devlog-card:hover .devlog-read { color: var(--cyan); }

/* ── Article pages ── */
.devlog-article {
    position: relative;
    z-index: 5;
    max-width: 740px;
    margin: 0 auto;
    padding: 140px clamp(20px, 4vw, 48px) 80px;
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.75;
}
.devlog-title {
    font-family: 'Titillium Web', sans-serif;
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.12;
    margin: 0 0 14px;
}
.devlog-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 44px;
}
.devlog-body p {
    font-size: 15px;
    margin: 0 0 18px;
}
.devlog-body h2 {
    font-family: 'Titillium Web', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    margin: 36px 0 14px;
}
.devlog-body ul,
.devlog-body ol {
    margin: 0 0 18px;
    padding-left: 22px;
}
.devlog-body li {
    font-size: 15px;
    margin-bottom: 8px;
}
.devlog-body a {
    color: var(--cyan);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.devlog-body a:hover { color: #33f6ff; }
.devlog-body strong { color: rgba(255, 255, 255, 0.92); }
.devlog-back {
    display: inline-block;
    margin-top: 44px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cyan);
    text-decoration: none;
}
.devlog-back:hover { color: #33f6ff; }

/* CTA panel at the end of a post (reuses the shared .email-form styles) */
.devlog-cta {
    margin-top: 44px;
    padding: 30px 28px;
    border-radius: 14px;
    border: 1px solid var(--border-glow);
    background: rgba(0, 243, 255, 0.03);
}
.devlog-cta-title {
    font-family: 'Titillium Web', sans-serif;
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 8px;
}
.devlog-cta-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 20px;
}

@media (max-width: 640px) {
    .devlog-main,
    .devlog-article { padding-top: 110px; }
    .devlog-card { padding: 20px; }
}