/* ============================================================
   Blog post — typography & layout
   ============================================================ */

.bp-hero {
  padding: 96px 0 56px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.bp-hero .crumbs {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-3);
}
.bp-hero .crumbs a { color: var(--fg-3); transition: color 160ms; }
.bp-hero .crumbs a:hover { color: var(--ochre); }
.bp-hero .crumbs .sep { color: var(--fg-3); opacity: 0.5; }

.bp-hero .cat {
  display: inline-block; margin-top: 24px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--ochre);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ochre);
}

.bp-hero h1 {
  font-size: clamp(40px, 6.4vw, 84px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 24px 0 0;
  max-width: 22ch;
}
.bp-hero h1 .ochre { color: var(--ochre); }

.bp-hero .lead {
  margin-top: 28px;
  font-size: 19px; line-height: 1.55;
  color: var(--fg-1);
  max-width: 64ch;
}

.bp-hero .meta-row {
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.08em;
}
.bp-hero .meta-row .author {
  display: flex; gap: 12px; align-items: center;
  color: var(--fg-1); text-transform: none; letter-spacing: 0;
  font-family: var(--font-display); font-size: 14px;
}
.bp-hero .meta-row .av {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ochre) 30%, var(--bg-2)), var(--bg-3));
  color: var(--ochre); display: grid; place-items: center;
  font-weight: 700; font-size: 13px; font-family: var(--font-mono);
}
.bp-hero .meta-row .author small {
  display: block; color: var(--fg-3); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; margin-top: 2px;
}
.bp-hero .meta-row time { color: var(--fg-2); }

/* main article body */
.bp-wrap {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  gap: 64px;
  padding: 64px 0;
}
@media (max-width: 1100px) {
  .bp-wrap { grid-template-columns: 1fr; gap: 32px; }
  .bp-wrap aside { display: none; }
}

.bp-toc {
  position: sticky; top: 96px; align-self: start;
  font-family: var(--font-mono); font-size: 12px;
  border-left: 1px solid var(--line); padding-left: 16px;
}
.bp-toc h4 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--fg-3); text-transform: uppercase; margin: 0 0 12px;
}
.bp-toc a {
  display: block; color: var(--fg-2); padding: 6px 0;
  transition: color 160ms;
}
.bp-toc a:hover { color: var(--ochre); }
.bp-toc .num { color: var(--fg-3); margin-right: 8px; }

.bp-aside {
  position: sticky; top: 96px; align-self: start;
}
.bp-aside .card {
  border: 1px solid var(--line); border-radius: 4px;
  padding: 18px; background: var(--bg-1);
  margin-bottom: 14px;
}
.bp-aside .card h5 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--fg-3); text-transform: uppercase; margin: 0 0 10px;
}
.bp-aside .card p {
  margin: 0; font-size: 13px; color: var(--fg-1); line-height: 1.55;
}
.bp-aside .card a.ml { color: var(--ochre); font-size: 13px; display: inline-block; margin-top: 10px; }

.bp-body { max-width: 720px; }
.bp-body > * + * { margin-top: 22px; }
.bp-body p { font-size: 17px; line-height: 1.7; color: var(--fg-1); margin: 0; }
.bp-body p:first-child { margin-top: 0; }
.bp-body p strong, .bp-body li strong { color: var(--fg-0); font-weight: 600; }

.bp-body h2 {
  font-size: 30px; letter-spacing: -0.02em; line-height: 1.15;
  margin: 56px 0 18px; padding-top: 32px;
  border-top: 1px solid var(--line);
  font-weight: 700;
}
.bp-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.bp-body h2 .id {
  font-family: var(--font-mono); font-size: 12px; color: var(--ochre);
  margin-right: 12px; letter-spacing: 0.1em;
}

.bp-body h3 {
  font-size: 20px; letter-spacing: -0.01em;
  margin: 36px 0 14px; font-weight: 600;
}

.bp-body ul, .bp-body ol {
  padding-left: 22px; margin: 0;
}
.bp-body li {
  font-size: 17px; line-height: 1.7; color: var(--fg-1);
  margin-bottom: 8px;
}
.bp-body li::marker { color: var(--ochre); }

.bp-body blockquote {
  margin: 0; padding: 22px 28px;
  border-left: 3px solid var(--ochre);
  background: var(--bg-1);
  border-radius: 0 4px 4px 0;
  font-size: 17px; line-height: 1.6;
  color: var(--fg-0);
}
.bp-body blockquote cite {
  display: block; margin-top: 10px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.06em;
  font-style: normal; text-transform: uppercase;
}

.bp-body .callout {
  display: grid; grid-template-columns: 36px 1fr; gap: 14px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-1);
}
.bp-body .callout.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--bg-1)); }
.bp-body .callout.ok   { border-color: var(--pos);  background: color-mix(in srgb, var(--pos) 7%,  var(--bg-1)); }
.bp-body .callout .ic {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ochre); color: var(--bg-0);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
}
.bp-body .callout.warn .ic { background: var(--warn); }
.bp-body .callout.ok .ic   { background: var(--pos); }
.bp-body .callout p { font-size: 15px; }

.bp-body .stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden;
  margin: 32px 0;
}
@media (max-width: 600px) { .bp-body .stat-row { grid-template-columns: 1fr; } }
.bp-body .stat-row .stat {
  background: var(--bg-1); padding: 22px;
}
.bp-body .stat .lbl {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-3);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.bp-body .stat .val {
  font-size: 32px; font-weight: 700; letter-spacing: -0.025em;
  margin-top: 6px; line-height: 1;
}
.bp-body .stat .val .ochre { color: var(--ochre); }
.bp-body .stat .delta {
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-2); letter-spacing: 0.05em;
}

.bp-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.bp-body th, .bp-body td {
  padding: 12px 14px; text-align: left;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  color: var(--fg-1);
}
.bp-body th:last-child, .bp-body td:last-child { border-right: none; }
.bp-body tr:last-child td { border-bottom: none; }
.bp-body th {
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
}
.bp-body code {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--ochre);
}

/* tags + share */
.bp-foot {
  margin-top: 72px; padding-top: 32px;
  border-top: 1px solid var(--line);
}
.bp-foot .tags {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.bp-foot .tag {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-2);
}

/* related */
.bp-related {
  border-top: 1px solid var(--line);
  padding: 64px 0 96px;
}
.bp-related h3 {
  font-size: 24px; letter-spacing: -0.015em; margin: 0 0 24px;
}
.bp-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 900px) { .bp-related-grid { grid-template-columns: 1fr; } }
.bp-rel-card {
  background: var(--bg-1); padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
  transition: background 200ms;
  word-break: break-word; overflow-wrap: anywhere;
}
.bp-rel-card:hover { background: var(--bg-2); }
.bp-rel-card .cat {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--ochre);
  text-transform: uppercase;
}
.bp-rel-card h4 {
  font-size: 17px; line-height: 1.3; letter-spacing: -0.01em;
  margin: 6px 0 0; font-weight: 600;
}
.bp-rel-card .dt {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-3); letter-spacing: 0.08em; margin-top: 8px;
}