/* ==========================================================================
   The blog: the hub at /blog/ and the article pages. Loaded after site.css,
   whose tokens it uses. Pages are generated by brand/src/blog.py.
   ========================================================================== */

:root {
  /* Two in-between purples from the approved hub design: the rules between
     rows, and the outline of an unselected topic chip. */
  --blog-rule: #4a4580;
  --blog-outline: #8a84bf;
  --blog-measure: 45rem; /* 720px reading column */
}

.blog-hub [hidden],
.blog-article [hidden] { display: none !important; }

/* ==========================================================================
   Hub
   ========================================================================== */

.blog-intro { padding: clamp(2.5rem, 7vw, 3.5rem) 0 2.5rem; max-width: 47.5rem; }
.blog-kicker { margin: 0 0 0.75rem; font-size: 1rem; font-weight: var(--weight-bold); color: var(--amber); }
.blog-intro h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 1.05;
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-heading);
}
.blog-lede { margin: 1.25rem 0 0; font-size: var(--text-lg); line-height: 1.5; color: var(--mist); }

/* Topic chips. Hidden until blog.js runs, so there are no dead buttons
   without JavaScript. */
.blog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--blog-rule);
}
.blog-chips button {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--blog-outline);
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: 1rem;
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.blog-chips button:hover { border-color: var(--cream); }
.blog-chips button[aria-pressed="true"] {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
  font-weight: var(--weight-extrabold);
}
.blog-chips button:focus-visible { border-radius: var(--radius-pill); }

/* The newest article, under All */
.blog-feature {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: stretch;
  padding: 3rem 0;
  border-bottom: 1px solid var(--blog-rule);
}
.blog-feature-text {
  flex: 999 1 26rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.blog-feature-text > * { margin: 0; }
.blog-feature h2 { font-size: clamp(1.875rem, 4vw, 2.625rem); line-height: 1.12; font-weight: var(--weight-extrabold); }
.blog-feature .blog-desc { font-size: 1.1875rem; }
.blog-read { margin-top: 0.5rem !important; font-weight: var(--weight-bold); }
.blog-read a { color: var(--amber); text-decoration: none; }
.blog-read a:hover { color: var(--cream); }
.blog-feature-pull {
  flex: 1 1 21rem;
  min-width: 0;
  margin: 0;
  background: var(--night);
  border-radius: var(--radius-media);
  padding: clamp(1.75rem, 4vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}
.blog-feature-pull blockquote { margin: 0; font-size: 1.75rem; line-height: 1.25; font-weight: var(--weight-extrabold); }
.blog-feature-pull figcaption { font-size: 0.875rem; font-weight: var(--weight-semibold); color: var(--mist); }

.blog-hub h2 a,
.blog-more h3 a { color: var(--cream); text-decoration: none; }
.blog-hub h2 a:hover,
.blog-more h3 a:hover { color: var(--amber); }

.blog-desc { color: var(--mist); line-height: 1.55; }
.blog-meta { font-size: 0.9375rem; font-weight: var(--weight-semibold); color: var(--mist); }
.blog-row .blog-meta { font-size: 0.875rem; }

/* "2 posts in Patterns" */
.blog-results { margin: 0; padding-top: 1.75rem; font-size: 1rem; color: var(--mist); }
.blog-results:empty { padding: 0; }

/* The list: rows split by rules, no cards */
.blog-list { list-style: none; margin: 0 0 4rem; padding: 0; }
.blog-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--blog-rule);
}
.blog-row-side {
  flex: 0 0 12.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.375rem;
  font-size: 0.9375rem;
  color: var(--mist);
}
.blog-kind { font-weight: var(--weight-bold); color: var(--mist); }
.blog-kind-update { font-weight: var(--weight-extrabold); color: var(--cream); }
.blog-row-main { flex: 999 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.blog-row-main > * { margin: 0; }
.blog-row h2 { font-size: 1.625rem; line-height: 1.2; font-weight: var(--weight-extrabold); }
.blog-row .blog-desc { font-size: 1.0625rem; }

/* Waitlist block */
.blog-waitlist {
  background: var(--night);
  border-radius: var(--radius-media);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
  margin-bottom: 4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}
.blog-waitlist-text { flex: 999 1 23.75rem; min-width: 0; }
.blog-waitlist h2 { margin: 0; font-size: 2rem; line-height: 1.15; font-weight: var(--weight-extrabold); }
.blog-waitlist-text p { margin: 0.875rem 0 0; font-size: var(--text-base); line-height: 1.5; color: var(--mist); }
.blog-form { flex: 1 1 21.25rem; min-width: 0; }
.blog-form .lbl { font-size: 0.9375rem; }
.blog-form .field input[type="email"] {
  min-height: 3rem;
  background: var(--ink);
  color: var(--cream);
  border-color: var(--blog-outline);
}
.blog-form .field input[type="email"]::placeholder { color: var(--mist); opacity: 0.75; }
.blog-form .field button { background: var(--cream); color: var(--ink); }
.blog-form .field button:hover { background: var(--mist); color: var(--ink); }
.blog-sample { margin: 0.75rem 0 0; font-size: 0.9375rem; font-weight: var(--weight-bold); }
.blog-sample a { color: var(--amber); text-decoration: none; }
.blog-sample a:hover { color: var(--cream); }

/* ==========================================================================
   Article pages
   ========================================================================== */

.blog-article { max-width: calc(var(--blog-measure) + 2 * var(--gutter)); }

.blog-crumbs { padding-top: clamp(2rem, 6vw, 3rem); font-size: 0.9375rem; font-weight: var(--weight-semibold); color: var(--mist); }
.blog-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.blog-crumbs li + li::before { content: "\203A"; margin-right: 0.5rem; color: var(--mist); }
.blog-crumbs a { color: var(--mist); }
.blog-crumbs a:hover { color: var(--amber); }

.blog-article h1 {
  margin: 1rem 0 1rem;
  font-size: var(--text-3xl);
  line-height: 1.08;
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-heading);
}
.blog-byline { margin: 0 0 2.5rem; font-size: 0.9375rem; font-weight: var(--weight-semibold); color: var(--mist); }
.blog-byline a { color: var(--cream); }

.blog-body { font-size: var(--text-base); line-height: var(--leading-body); }
.blog-body > :first-child { margin-top: 0; }
.blog-body p, .blog-body ul, .blog-body ol { margin: 0 0 1.25rem; }
.blog-body h2 { font-size: 1.625rem; line-height: var(--leading-snug); font-weight: var(--weight-extrabold); margin: 2.75rem 0 0.75rem; }
.blog-body h3 { font-size: 1.25rem; line-height: var(--leading-snug); font-weight: var(--weight-extrabold); margin: 2rem 0 0.5rem; }
.blog-body ul, .blog-body ol { padding-left: 1.25rem; }
.blog-body li { margin-bottom: 0.5rem; }
.blog-body li::marker { color: var(--mist); }
.blog-body strong { font-weight: var(--weight-extrabold); }
.blog-body hr { border: 0; border-top: 1px solid var(--blog-rule); margin: 2.5rem 0 1.5rem; }
.blog-body hr + p { font-size: var(--text-sm); color: var(--mist); }
.blog-body hr + p a { color: var(--mist); }

/* Pull-out: a passage on night with a mist caption */
.blog-pullout {
  margin: 2rem 0;
  background: var(--night);
  border-radius: var(--radius-media);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.blog-pullout blockquote { margin: 0; }
.blog-pullout blockquote p { margin: 0 0 1rem; font-size: 1.1875rem; line-height: 1.5; }
.blog-pullout blockquote p.quote { font-weight: var(--weight-bold); color: var(--cream); padding-left: 1rem; border-left: 3px solid var(--blog-rule); }
.blog-pullout figcaption { margin-top: 1.25rem; font-size: 0.875rem; font-weight: var(--weight-semibold); color: var(--mist); }
.blog-pullout figcaption a { color: var(--mist); }
.blog-pullout figcaption a:hover { color: var(--amber); }

/* Mid-article call to action: a quiet line between rules */
.blog-body .blog-cta-inline {
  margin: 2rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--blog-rule);
  border-bottom: 1px solid var(--blog-rule);
  color: var(--mist);
}
.blog-cta-inline a { color: var(--cream); font-weight: var(--weight-bold); white-space: nowrap; }
.blog-cta-inline a:hover { color: var(--amber); }

/* Closing call to action: a night block with a cream pill button */
.blog-cta-end {
  margin: 3rem 0;
  background: var(--night);
  border-radius: var(--radius-media);
  padding: clamp(1.75rem, 5vw, 2.5rem);
}
.blog-body .blog-cta-end h2 { margin: 0 0 0.75rem; font-size: 1.75rem; }
.blog-cta-end p { color: var(--mist); }
.blog-body .blog-cta-end p:last-child { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.blog-cta-end .button { background: var(--cream); color: var(--ink); }
.blog-cta-end .button:hover { background: var(--mist); color: var(--ink); }
.blog-cta-end a:not(.button) { color: var(--amber); font-weight: var(--weight-bold); text-decoration: none; }
.blog-cta-end a:not(.button):hover { color: var(--cream); }

/* More from the blog. Outside the <article> (it isn't part of the post) but
   in the same centred column: keep .wrap's auto side margins, and draw the
   rule on the inner box so it spans the text column, like the hr above the
   support line. The support line's bottom margin collapses into the 2rem
   above, so the heading sits about 64px below it. */
.blog-more { margin: 2rem auto 4rem; }
.blog-more-inner { padding-top: 2rem; border-top: 1px solid var(--blog-rule); }
.blog-more h2 { margin: 0 0 0.5rem; font-size: 1.375rem; font-weight: var(--weight-extrabold); }
.blog-more ul { list-style: none; margin: 0; padding: 0; }
.blog-more li { padding: 1.25rem 0; border-bottom: 1px solid var(--blog-rule); }
.blog-more li > * { margin: 0; }
.blog-more .blog-kind { font-size: 0.875rem; }
.blog-more h3 { margin: 0.25rem 0; font-size: 1.25rem; line-height: 1.25; font-weight: var(--weight-extrabold); }
.blog-more .blog-desc { font-size: 1rem; }