/* ============================================================
   MIDL Blog — shared styles
   Tokens mirror marketing.html's :root block for visual parity.
============================================================ */
:root{
  --ink:        #0c1422;
  --ink-2:      #121d31;
  --paper:      #f6f4ee;
  --surface:    #ffffff;
  --line:       #e4e0d5;
  --text:       #1c2434;
  --muted:      #5d6575;
  --text-inv:   #edf0f6;
  --muted-inv:  #97a2b4;
  --amber:      #f0a321;
  --amber-deep: #93610d;

  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", var(--font-body);

  --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --radius: 12px;
  --radius-sm: 8px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }
h1,h2,h3{ font-family: var(--font-display); margin: 0 0 var(--s4); line-height: 1.2; }
p{ margin: 0 0 var(--s4); }

.blog-container{
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--s5, 24px);
}

/* ---------- Header ---------- */
.blog-header{
  background: var(--ink);
  color: var(--text-inv);
}
.blog-header .blog-container{
  max-width: 1080px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}
.blog-header .brand{
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  color: var(--text-inv);
}
.blog-header nav{ display: flex; align-items: center; gap: var(--s5, 24px); }
.blog-header nav a:not(.btn){
  color: var(--muted-inv);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.blog-header nav a:not(.btn):hover{ color: var(--text-inv); }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5, 24px);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-accent{ background: var(--amber); color: var(--ink); }
.btn-accent:hover{ background: #e29616; }

/* ---------- Post list (blog.html) ---------- */
.blog-intro{ padding: var(--s8) 0 var(--s5); }
.blog-intro h1{ font-size: clamp(28px, 4vw, 38px); }
.blog-intro p{ color: var(--muted); }

.post-list{ list-style: none; margin: 0; padding: 0 0 var(--s8); }
.post-card{
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--line);
}
.post-card:first-child{ border-top: 1px solid var(--line); }
.post-card-title{ margin: 0 0 var(--s2); font-size: 22px; }
.post-card-title a{ text-decoration: none; }
.post-card-title a:hover{ color: var(--amber-deep); }
.post-card-meta{
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: var(--s3);
}
.post-card-excerpt{ color: var(--muted); margin: 0; }

.blog-empty{
  padding: var(--s6) 0 var(--s8);
  color: var(--muted);
}

/* ---------- Article (post pages) ---------- */
.article{ padding: var(--s8) 0; }
.article-title{ font-size: clamp(28px, 4.5vw, 40px); }
.article-meta{
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: var(--s6);
}
.article-body h2{ font-size: 22px; margin-top: var(--s7); }
.article-body p{ color: var(--text); }

.back-link{
  display: inline-block;
  margin-top: var(--s7);
  font-size: 15px;
  color: var(--amber-deep);
  text-decoration: none;
}
.back-link:hover{ text-decoration: underline; }

/* ---------- Footer ---------- */
.blog-footer{
  background: var(--ink);
  color: var(--muted-inv);
  padding: var(--s6) 0;
  font-size: 14px;
}
.blog-footer .blog-container{
  max-width: 1080px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
  justify-content: space-between;
}
.blog-footer a{ color: var(--muted-inv); }
.blog-footer a:hover{ color: var(--text-inv); }

@media (max-width: 640px){
  .blog-header nav{ gap: var(--s3); }
  .blog-header nav a:not(.btn){ display: none; }
}