/* ============================================================
   Mewayz Blog — Shared post layout
   Matches the Founder Open Letter aesthetic.
   ============================================================ */

:root {
  --ink: #0A0A0A;
  --paper: #FAFAFA;
  --warm: #F0EDE4;
  --cream: #E8E2D3;
  --accent: #4F46E5;
  --accent-warm: #FF5C1F;
  --mute: #6B6B6B;
  --line: rgba(10, 10, 10, 0.12);
}

html, body {
  background: var(--paper);
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.narrow { max-width: 720px; margin: 0 auto; padding: 0 28px; }
.wide   { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

/* === Nav === */
.bp-nav { border-bottom: 1px solid var(--line); background: var(--paper); }
.bp-nav-inner {
  max-width: 1080px; margin: 0 auto; padding: 18px 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.bp-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.bp-nav-hex {
  width: 24px; height: 24px;
  background-image: url("assets/mewayz-symbol.png");
  background-size: contain; background-repeat: no-repeat;
}
.bp-nav-name { font-family: var(--font-display); font-style: italic; font-size: 18px; letter-spacing: -0.02em; text-transform: uppercase; }
.bp-nav-back {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute); text-decoration: none;
}

/* === Article header === */
.bp-head {
  padding: 80px 0 56px;
  border-bottom: 1px solid var(--line);
}
.bp-breadcrumb {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute);
  margin-bottom: 24px;
}
.bp-breadcrumb .author { color: var(--ink); }
.bp-title {
  font-family: var(--font-display); font-style: italic;
  font-size: 88px; line-height: 0.98; letter-spacing: -0.025em;
  margin: 0 0 32px;
}
.bp-title .accent { color: var(--accent); }
.bp-meta {
  display: flex; align-items: center; gap: 14px;
  margin-top: 28px;
}
.bp-meta .av {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-warm));
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  font-family: var(--font-sans); font-weight: 700; font-size: 16px;
}
.bp-meta .name { font-family: var(--font-sans); font-size: 16px; font-weight: 600; }
.bp-meta .role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--mute); }
.bp-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--mute); }
.bp-meta .date { font-family: var(--font-mono); font-size: 12px; color: var(--mute); letter-spacing: 0.08em; }

/* === Body === */
.bp-article { padding: 56px 0 96px; }
.bp-article p, .bp-article ul, .bp-article ol {
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 21px;
  line-height: 1.65;
  margin: 0 0 24px;
  color: var(--ink);
}
.bp-article h2 {
  font-family: var(--font-sans);
  font-size: 32px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15;
  margin: 56px 0 18px;
}
.bp-article h2 em {
  font-family: var(--font-display); font-style: italic;
  color: var(--accent); font-weight: 400; font-size: 36px;
  display: inline-block; vertical-align: -3px;
}
.bp-article h3 {
  font-family: var(--font-sans);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.015em;
  margin: 36px 0 12px;
}
.bp-article a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.bp-article strong { font-weight: 700; }
.bp-article em { font-style: italic; }
.bp-article blockquote {
  margin: 32px 0;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display); font-style: italic;
  font-size: 28px; line-height: 1.35;
  letter-spacing: -0.015em;
}
.bp-article ul, .bp-article ol { padding-left: 1.4em; }
.bp-article ul li, .bp-article ol li { margin: 8px 0; }
.bp-article code {
  background: var(--paper-warm);
  padding: 2px 6px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 16px;
}

/* === Big stat === */
.bp-stat {
  margin: 56px 0;
  padding: 48px;
  background: var(--paper-warm);
  border-radius: 18px;
  text-align: center;
}
.bp-stat .num {
  font-family: var(--font-display); font-style: italic;
  font-size: 144px; line-height: 1; letter-spacing: -0.03em;
  color: var(--accent);
  margin-bottom: 10px;
}
.bp-stat .lbl {
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute);
}

/* === Aside === */
.bp-aside {
  margin: 40px 0;
  padding: 24px 32px;
  background: var(--paper-cream);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink); opacity: 0.85;
}
.bp-aside-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute);
  margin-bottom: 10px;
  opacity: 1;
}

/* === Signoff === */
.bp-signoff {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.bp-signoff .sig {
  font-family: var(--font-display); font-style: italic;
  font-size: 36px; line-height: 1; letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.bp-signoff .who {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.12em; color: var(--mute);
}

/* === Share strip === */
.bp-share-strip {
  margin: 64px 0 0;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bp-share-strip .lbl {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute);
}
.bp-share-strip .links { display: flex; gap: 8px; }
.bp-share-strip .links a {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink); text-decoration: none;
}

/* === CTA === */
.bp-cta { background: var(--ink); color: var(--paper); padding: 80px 0; }
.bp-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.bp-cta h3 {
  font-family: var(--font-display); font-style: italic;
  font-size: 56px; line-height: 1; letter-spacing: -0.025em;
  margin: 0;
}
.bp-cta h3 .accent { color: var(--accent); }
.bp-cta .btn {
  display: inline-flex; align-items: center;
  background: var(--accent); color: var(--paper);
  padding: 16px 26px; border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  letter-spacing: -0.01em;
}
.bp-cta .micro {
  margin-top: 16px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(250,250,250,0.55);
}

/* === Footer === */
.bp-foot { padding: 48px 0; background: var(--paper-warm); }
.bp-foot .meta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute);
}

/* === Related posts === */
.bp-related {
  padding: 64px 0;
  background: var(--paper-cream);
  border-top: 1px solid var(--line);
}
.bp-related h3 {
  font-family: var(--font-sans);
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
}
.bp-related h3 em {
  font-family: var(--font-display); font-style: italic;
  color: var(--accent); font-weight: 400; font-size: 32px;
}
.bp-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bp-related-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 200ms;
  display: flex; flex-direction: column; gap: 14px;
}
.bp-related-card:hover { transform: translateY(-3px); }
.bp-related-card .tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute);
}
.bp-related-card h4 {
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 700;
  line-height: 1.3; letter-spacing: -0.015em;
  margin: 0;
}
.bp-related-card .read {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute);
}

/* === Responsive === */
@media (max-width: 820px) {
  .bp-title { font-size: 52px; }
  .bp-stat .num { font-size: 96px; }
  .bp-related-grid { grid-template-columns: 1fr; }
  .bp-cta { padding: 56px 0; }
  .bp-article p, .bp-article ul, .bp-article ol { font-size: 19px; }
  .bp-article blockquote { font-size: 24px; }
}
@media (max-width: 480px) {
  .bp-nav-inner { padding: 14px 18px; }
  .narrow, .wide { padding: 0 18px; }
  .bp-title { font-size: 38px; }
  .bp-stat .num { font-size: 72px; }
  .bp-meta { flex-wrap: wrap; gap: 8px; }
}

/* >>> responsive-fixes >>> */
.bp-body img, .bp-body video, .bp-body iframe, img, video, iframe { max-width: 100%; height: auto; }
.bp-body pre { overflow-x: auto; }
@media (max-width: 640px) {
  .narrow { padding: 0 18px; }
  .wide { padding: 0 18px; }
}
/* <<< responsive-fixes <<< */