/* ===========================================================================
   Slopeside blog styles
   - Brand palette: cream background, ink text, forest links/CTAs
   - Headings: Satoshi (self-hosted, reused from the existing /fonts folder)
   - Body: Inter (loaded via Google Fonts in the layout <head>)
   - The shared header/footer keep their own Webflow styling; these rules are
     scoped to the blog content area so they don't affect the chrome.
   =========================================================================== */

:root {
  --cream:  #FEFBF3;
  --ink:    #231F20;
  --forest: #377449;
  --muted:  #5c5752;
  --faint:  #7a756f;
  --hair:   #e7e0d2;
}

/* Reuse the existing self-hosted Satoshi font files (referenced, never modified) */
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/68e0e725ecc054b681e82221_Satoshi-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/68e0e7336393cda208fb4ccb_Satoshi-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/68e0e7472a3959987f2bfbe7_Satoshi-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- base ---------------------------------------------------------------- */
body.blog-body {
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.blog-main {
  max-width: 720px;
  margin: 0 auto;
  /* generous top padding clears the absolute/overlay Webflow navbar */
  padding: 152px 24px 96px;
}

.blog-main h1,
.blog-main h2,
.blog-main h3 {
  font-family: "Satoshi", Georgia, serif;
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.post-meta {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.5em;
}

/* ---- blog index --------------------------------------------------------- */
.blog-index-header { margin-bottom: 48px; }
.blog-index-header h1 { font-size: 2.6rem; margin: 0 0 0.25em; }
.blog-index-sub { color: var(--muted); font-size: 1.1rem; margin: 0; }

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list-item { padding: 30px 0; border-bottom: 1px solid var(--hair); }
.post-list-item:first-child { padding-top: 0; }
.post-list-item:last-child { border-bottom: 0; }
.post-list-title { font-size: 1.55rem; margin: 0.1em 0 0.35em; }
.post-list-title a { color: var(--ink); text-decoration: none; }
.post-list-title a:hover { color: var(--forest); }
.post-excerpt { margin: 0 0 0.7em; color: var(--muted); }
.post-readmore { color: var(--forest); font-weight: 600; text-decoration: none; font-size: 0.95rem; }
.post-readmore:hover { text-decoration: underline; }

/* ---- single post -------------------------------------------------------- */
.post-header { margin-bottom: 36px; }
.post-title { font-size: 2.4rem; margin: 0.1em 0 0.3em; }
.post-lede { font-size: 1.2rem; color: var(--muted); margin: 0; }

.post-content { font-size: 1.125rem; }
.post-content h1 { font-size: 2rem;   margin: 1.4em 0 0.5em; }
.post-content h2 { font-size: 1.55rem; margin: 1.9em 0 0.55em; }
.post-content h3 { font-size: 1.25rem; margin: 1.6em 0 0.45em; }
.post-content p  { margin: 0 0 1.4em; }
.post-content a  { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.post-content ul,
.post-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.post-content li { margin: 0.3em 0; }
.post-content blockquote {
  margin: 1.7em 0;
  padding: 0.4em 0 0.4em 1.2em;
  border-left: 3px solid var(--forest);
  color: var(--muted);
  font-style: italic;
}
.post-content img { max-width: 100%; height: auto; border-radius: 8px; }
.post-content code {
  background: #efeadd;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}
.post-content pre {
  background: var(--ink);
  color: var(--cream);
  padding: 16px 18px;
  border-radius: 8px;
  overflow: auto;
  font-size: 0.95rem;
}
.post-content pre code { background: none; color: inherit; padding: 0; }

.post-back {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
}
.post-back a { color: var(--forest); text-decoration: none; font-weight: 600; }
.post-back a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .blog-main { padding: 120px 20px 72px; }
  .blog-index-header h1 { font-size: 2.1rem; }
  .post-title { font-size: 1.9rem; }
}