/* ---------------------------------------------------------------------------
   blog.css - additive blog components only.

   Everything here builds on redesign.css tokens (--aubergine, --cream, --violet,
   --acid, --plum, --line, --font-*). Layout, prose, chrome and buttons all come
   from redesign.css; this file only adds the components the marketing site did
   not already have: the post grid, the post meta line, and the related list.

   Loaded after redesign.css, on blog pages only.
   --------------------------------------------------------------------------- */

/* ---------- post meta (date · reading time · tags) ---------- */
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin-top:18px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gray);
}
.post-meta__sep{opacity:.5}
.post-meta__read{color:var(--acid)}
.post-tag{
  border:1px solid var(--line-strong);border-radius:999px;
  padding:3px 10px;color:var(--cream-mute);
  text-decoration:none;transition:border-color .25s var(--ease),color .25s var(--ease);
}
.post-tag:hover{border-color:var(--violet);color:var(--cream)}

/* ---------- article ---------- */
.post-body{margin-top:6px}
.post-body h2{
  font-family:var(--font-display);font-style:normal;
  font-size:clamp(24px,2.8vw,38px);margin:38px 0 14px;color:var(--cream);
}
.post-body h3{
  font-family:var(--font-mark);font-weight:500;font-size:18px;
  color:var(--cream);margin:26px 0 8px;letter-spacing:-.01em;
}
.post-body p{margin:0 0 16px}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:20px;display:grid;gap:7px}
.post-body li{color:var(--cream-mute)}
.post-body blockquote{
  margin:22px 0;padding:2px 0 2px 18px;
  border-left:2px solid var(--violet);color:var(--cream-mute);font-style:italic;
}
.post-body code{
  font-family:var(--font-mono);font-size:.88em;
  background:rgba(236,228,214,.07);border-radius:4px;padding:2px 6px;
}
.post-body pre{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;overflow-x:auto;margin:0 0 20px;
}
.post-body pre code{background:none;padding:0}
.post-body a{color:var(--violet-light);text-underline-offset:3px}
.post-body hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* ---------- related ---------- */
.post-related{
  margin:44px 0 0;padding:20px 22px;
  border:1px solid var(--line);border-radius:14px;background:var(--card);
}
.post-related > .mono{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gray);margin:0 0 10px;
}
.post-related ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.post-related li{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.post-related a{color:var(--cream);text-decoration:none}
.post-related a:hover{color:var(--violet-light)}
.post-related__meta{font-size:10px;color:var(--gray);white-space:nowrap}

/* ---------- index ---------- */
.post-hero{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line-strong);border-radius:16px;
  padding:30px 32px;background:linear-gradient(150deg,var(--card-2),var(--card));
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.post-hero:hover{border-color:var(--violet);transform:translateY(-2px)}
.post-hero h2{
  font-family:var(--font-display);font-size:clamp(26px,3.4vw,42px);
  margin:12px 0 10px;color:var(--cream);
}
.post-hero p{color:var(--cream-mute);margin:0 0 14px;max-width:54ch}
.post-hero__meta{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}

.post-grid{
  display:grid;gap:16px;margin-top:16px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.post-card{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  background:var(--card);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.post-card:hover{border-color:var(--violet);transform:translateY(-2px)}
.post-card__tag{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--acid)}
.post-card h3{
  font-family:var(--font-mark);font-weight:500;font-size:19px;
  margin:10px 0 8px;color:var(--cream);letter-spacing:-.01em;
}
.post-card p{color:var(--cream-mute);font-size:14px;margin:0 0 14px}
.post-card__meta{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}

.post-empty{color:var(--cream-mute);max-width:52ch}

@media(max-width:640px){
  .post-hero{padding:24px 20px}
  .post-card{padding:20px}
  .post-grid{grid-template-columns:1fr}
}

/* ---------- read progress ----------
   The blog has its OWN bar (#readbar), driven by an inline script in the page,
   rather than overriding the shared .progress. That bar belongs to redesign.js
   and stays exactly as it is on every other page.

   3px and leading with acid: the shared bar is 2px running violet to acid, so
   its first slice is dark violet on a dark page and effectively invisible,
   which is precisely when a reader is deciding whether the feature works. */
.readbar{
  position:fixed;top:0;left:0;right:0;height:3px;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--acid),var(--violet-light) 55%,var(--violet));
  z-index:61;pointer-events:none;
}