/* Article prose typography — merged onto the RichContentFrame root. */

._prose_nv4fh_3 {
  min-width: 0;
  font-family: var(--vc-font-body);
  font-size: var(--vc-prose-size);
  line-height: var(--vc-prose-leading);
  color: var(--vc-fg);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

._prose_nv4fh_3 > :first-child {
  margin-top: 0;
}

._prose_nv4fh_3 :is(h2, h3, h4, h5, h6) {
  font-family: var(--vc-font-heading);
  font-weight: var(--vc-heading-weight);
  letter-spacing: var(--vc-heading-tracking);
  color: var(--vc-fg);
  text-wrap: balance;
}

._prose_nv4fh_3 h2 {
  margin: var(--vc-section-gap) 0 0.75rem;
  font-size: calc(1.5rem * var(--vc-heading-scale));
  line-height: 1.25;
}

._prose_nv4fh_3 h3 {
  margin: calc(var(--vc-section-gap) * 0.7) 0 0.5rem;
  font-size: calc(1.2rem * var(--vc-heading-scale));
  line-height: 1.35;
}

._prose_nv4fh_3 h4 {
  margin: 1.75rem 0 0.4rem;
  font-size: calc(1.05rem * var(--vc-heading-scale));
  line-height: 1.4;
}

._prose_nv4fh_3 h5,
._prose_nv4fh_3 h6 {
  margin: 1.5rem 0 0.35rem;
  font-size: 1rem;
  line-height: 1.4;
}

._prose_nv4fh_3 h6 {
  color: var(--vc-muted-fg);
}

._prose_nv4fh_3 p {
  margin: 0 0 var(--vc-prose-gap);
  text-wrap: pretty;
}

/* Components carry their own inner rhythm (these beat the layered component
   styles in vc-rich-content.css, which is why they live here). */
._prose_nv4fh_3 .vc-callout p {
  margin-bottom: 0.6em;
}

._prose_nv4fh_3 :is(.vc-callout, details, blockquote, li, figure) > :last-child {
  margin-bottom: 0;
}

._prose_nv4fh_3 ul,
._prose_nv4fh_3 ol {
  margin: 0 0 var(--vc-prose-gap);
  padding-left: 1.4rem;
}

._prose_nv4fh_3 ul {
  list-style-type: disc;
}

/* The inline [[toc]] list styles itself (vc-rich-content.css). */
._prose_nv4fh_3 nav[data-toc] ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

._prose_nv4fh_3 nav[data-toc] ul ul {
  padding-left: 0.9rem;
}

._prose_nv4fh_3 ol {
  list-style-type: decimal;
}

._prose_nv4fh_3 li {
  margin: 0 0 0.35em;
  padding-left: 0.2rem;
}

._prose_nv4fh_3 li::marker {
  color: var(--vc-muted-fg);
}

._prose_nv4fh_3 li > p {
  margin-bottom: 0.35em;
}

._prose_nv4fh_3 li > :is(ul, ol) {
  margin: 0.35em 0 0;
}

._prose_nv4fh_3 .contains-task-list {
  list-style: none;
  padding-left: 0;
}

._prose_nv4fh_3 .task-list-item {
  list-style: none;
  padding-left: 0;
}

._prose_nv4fh_3 .task-list-item input[type="checkbox"] {
  width: 0.95em;
  height: 0.95em;
  margin: 0 0.55em 0 0;
  vertical-align: -0.12em;
  accent-color: var(--vc-accent);
  cursor: default;
}

._prose_nv4fh_3 .task-list-item .contains-task-list {
  margin: 0.25rem 0 0.25rem 1.5rem;
}

._prose_nv4fh_3 :is(p, li, blockquote) {
  overflow-wrap: break-word;
}

._prose_nv4fh_3 a {
  color: var(--vc-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--vc-link) 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

._prose_nv4fh_3 a:hover {
  color: var(--vc-link-hover);
  text-decoration-color: currentColor;
}

._prose_nv4fh_3 a:focus-visible {
  outline: 2px solid var(--vc-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

._prose_nv4fh_3 :is(h2, h3, h4) a:not(.vc-heading-anchor) {
  color: inherit;
}

._prose_nv4fh_3 blockquote {
  margin: var(--vc-prose-gap) 0;
  padding: 0.1rem 0 0.1rem 1.15rem;
  color: var(--vc-quote-fg);
  border-left: 2px solid var(--vc-quote-border);
}

._prose_nv4fh_3 blockquote > :last-child {
  margin-bottom: 0;
}

/* Editorial identity: blockquotes become pull quotes in the heading voice. */
._prose_nv4fh_3[data-vc-theme="editorial"] blockquote {
  margin: calc(var(--vc-prose-gap) * 1.4) 0;
  padding: 0 0 0 1.25rem;
  color: var(--vc-fg);
  font-family: var(--vc-font-heading);
  font-size: 1.2em;
  font-style: italic;
  line-height: 1.5;
}

._prose_nv4fh_3 strong {
  font-weight: 650;
  color: var(--vc-fg);
}

._prose_nv4fh_3 em {
  font-style: italic;
}

._prose_nv4fh_3 del {
  text-decoration: line-through;
  color: var(--vc-muted-fg);
}

._prose_nv4fh_3 hr {
  border: none;
  height: 1px;
  margin: var(--vc-section-gap) auto;
  background: var(--vc-hairline);
}

._prose_nv4fh_3 img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: calc(var(--vc-prose-gap) * 1.2) 0;
  border-radius: var(--vc-radius);
}

._prose_nv4fh_3 p > img:only-child {
  margin: 0;
}

@container vc-page (max-width: 640px) {
  ._prose_nv4fh_3 {
    font-size: max(1rem, calc(var(--vc-prose-size) - 0.0625rem));
  }

  ._prose_nv4fh_3 h2 {
    font-size: calc(1.35rem * var(--vc-heading-scale));
  }
}

@media print {
  ._prose_nv4fh_3 {
    max-width: none;
  }
}
/* Presented post — public SSR + dashboard preview share this layout.
   One left edge: header, cover, and prose start where the masthead starts.
   The ToC rail joins on the right (52rem: the narrowest reading width + rail) once the article's own inline size can
   hold both (container query, so the preview pane behaves like the page). */

._article_1sw9e_6 {
  container-type: inline-size;
  --vc-toc-width: 13.5rem;
  --vc-toc-gap: 3.5rem;
}

._articleHeader_1sw9e_12 {
  max-width: var(--vc-prose-measure);
  margin-bottom: 2.25rem;
}

._articleTitle_1sw9e_17 {
  margin: 0 0 0.9rem;
  font-family: var(--vc-font-heading);
  font-size: calc(clamp(2rem, 1.35rem + 2.6vw, 2.75rem) * var(--vc-heading-scale));
  font-weight: max(var(--vc-heading-weight), 650);
  line-height: 1.12;
  letter-spacing: calc(var(--vc-heading-tracking) - 0.008em);
  color: var(--vc-fg);
  text-wrap: balance;
}

._articleDeck_1sw9e_28 {
  margin: 0 0 1.1rem;
  font-size: calc(var(--vc-prose-size) * 1.18);
  line-height: 1.5;
  color: var(--vc-muted-fg);
  text-wrap: pretty;
}

._metaLine_1sw9e_36 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0;
  margin: 0;
  color: var(--vc-muted-fg);
  font-size: 0.875rem;
  line-height: 1.5;
}

._metaLine_1sw9e_36 > span + span::before {
  content: "\00b7";
  margin: 0 0.55em;
  opacity: 0.6;
}

._tagRow_1sw9e_53 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

._tagLink_1sw9e_62 {
  display: inline-block;
  padding: 0.14rem 0.5rem;
  border: 1px solid var(--vc-border);
  border-radius: 5px;
  color: var(--vc-muted-fg);
  font-family: var(--vc-font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
}

._tagLink_1sw9e_62:hover {
  color: var(--vc-fg);
  border-color: color-mix(in oklch, var(--vc-fg) 30%, var(--vc-border));
}

/* ── Preset voices ─────────────────────────────────────────────────────── */

._article_1sw9e_6[data-vc-theme="editorial"] ._articleDeck_1sw9e_28 {
  font-family: var(--vc-font-heading);
  font-style: italic;
}

._article_1sw9e_6[data-vc-theme="technical"] ._metaLine_1sw9e_36 {
  font-family: var(--vc-font-mono);
  font-size: 0.8125rem;
}

._article_1sw9e_6[data-vc-theme="product"] ._articleDeck_1sw9e_28 {
  color: var(--vc-fg);
}

/* ── Byline ────────────────────────────────────────────────────────────── */

._byline_1sw9e_98 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

._avatar_1sw9e_105 {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--vc-tint);
  color: var(--vc-accent);
  font-family: var(--vc-font-heading);
  font-size: 0.95rem;
  font-weight: 650;
}

._bylineText_1sw9e_119 {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

._authorLine_1sw9e_125 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  color: var(--vc-fg);
  font-size: 0.9375rem;
  font-weight: 550;
  line-height: 1.4;
}

/* ── Article header treatments (template: data-vc-header) ─────────────── */

._article_1sw9e_6[data-vc-header="centered"] ._articleHeader_1sw9e_12 {
  margin-inline: auto;
  text-align: center;
}

._article_1sw9e_6[data-vc-header="centered"] ._byline_1sw9e_98,
._article_1sw9e_6[data-vc-header="centered"] ._tagRow_1sw9e_53,
._article_1sw9e_6[data-vc-header="centered"] ._metaLine_1sw9e_36 {
  justify-content: center;
}

._article_1sw9e_6[data-vc-header="centered"] ._bylineText_1sw9e_119 {
  justify-items: center;
}

._article_1sw9e_6[data-vc-header="centered"] ._byline_1sw9e_98 {
  flex-direction: column;
  gap: 0.5rem;
}

._article_1sw9e_6[data-vc-header="card"] ._articleHeader_1sw9e_12 {
  max-width: none;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--vc-surface-border);
  border-radius: calc(var(--vc-radius) + 6px);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--vc-tint), transparent 60%),
    var(--vc-surface);
  box-shadow: var(--vc-shadow);
}

._article_1sw9e_6[data-vc-header="card"] ._articleTitle_1sw9e_17 {
  font-size: calc(clamp(2.25rem, 1.4rem + 3.2vw, 3.4rem) * var(--vc-heading-scale));
  max-width: 22ch;
}

/* ── Layouts (per post: data-vc-layout) ───────────────────────────────── */

/* Essay: centered, no side rail, a lead paragraph, a roomier title. */
._article_1sw9e_6[data-vc-layout="essay"] ._articleHeader_1sw9e_12 {
  margin-inline: auto;
  text-align: center;
}

._article_1sw9e_6[data-vc-layout="essay"] ._byline_1sw9e_98,
._article_1sw9e_6[data-vc-layout="essay"] ._tagRow_1sw9e_53,
._article_1sw9e_6[data-vc-layout="essay"] ._metaLine_1sw9e_36 {
  justify-content: center;
}

._article_1sw9e_6[data-vc-layout="essay"] ._articleTitle_1sw9e_17 {
  font-size: calc(clamp(2.25rem, 1.4rem + 3.2vw, 3.25rem) * var(--vc-heading-scale));
}

._article_1sw9e_6[data-vc-layout="essay"] ._articleBody_1sw9e_193 > [data-rich-content],
._article_1sw9e_6[data-vc-layout="essay"] ._heroImage_1sw9e_194,
._article_1sw9e_6[data-vc-layout="essay"] ._adjacent_1sw9e_195,
._article_1sw9e_6[data-vc-layout="essay"] ._actions_1sw9e_196 {
  margin-inline: auto;
}

._article_1sw9e_6[data-vc-layout="essay"] ._articleBody_1sw9e_193 [data-rich-content] > p:first-child {
  font-size: 1.16em;
  line-height: 1.6;
  color: var(--vc-fg);
}

/* Feature: a full-width cover (or an accent band) leads the page. */
._featureMedia_1sw9e_207 {
  margin: 0 0 2.25rem;
}

._featureBand_1sw9e_211 {
  height: clamp(6rem, 18vw, 11rem);
  margin: 0 0 2.25rem;
  border-radius: calc(var(--vc-radius) + 6px);
  background:
    radial-gradient(90% 120% at 15% 0%, color-mix(in oklch, var(--vc-accent) 38%, transparent), transparent 70%),
    radial-gradient(80% 120% at 100% 100%, color-mix(in oklch, var(--vc-accent) 22%, transparent), transparent 70%),
    var(--vc-tint);
}

._article_1sw9e_6[data-vc-layout="feature"] ._articleTitle_1sw9e_17 {
  font-size: calc(clamp(2.4rem, 1.4rem + 3.6vw, 3.6rem) * var(--vc-heading-scale));
}

/* Wide: a roomier column for code, tables, and diagrams. The body's
   RichContentFrame re-declares --vc-prose-measure from --vc-user-measure, so
   the override must travel through that variable to reach the prose. */
._article_1sw9e_6[data-vc-layout="wide"] {
  --vc-prose-measure: 52rem;
}

._article_1sw9e_6[data-vc-layout="wide"] ._articleBody_1sw9e_193 {
  --vc-user-measure: 52rem;
}

/* Covers */
._heroImage_1sw9e_194,
._featureCover_1sw9e_238 {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--vc-muted);
  border-radius: calc(var(--vc-radius) + 2px);
}

._heroImage_1sw9e_194 {
  max-width: var(--vc-prose-measure);
  aspect-ratio: 1.91 / 1;
  margin: 0 0 2.5rem;
}

._featureCover_1sw9e_238 {
  aspect-ratio: 2 / 1;
  margin: 0 0 2.25rem;
}

/* ── Body + ToC ────────────────────────────────────────────────────────── */

._articleBody_1sw9e_193 {
  display: block;
}

._articleBody_1sw9e_193 > [data-rich-content] {
  max-width: var(--vc-prose-measure);
}

._tocRail_1sw9e_268 {
  display: none;
}

._tocRailLabel_1sw9e_272 {
  margin: 0 0 0.75rem;
  color: var(--vc-fg);
  font-size: 0.8125rem;
  font-weight: 600;
}

._tocList_1sw9e_279 {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

._tocItemH2_1sw9e_287 > a,
._tocItemH3_1sw9e_288 > a {
  display: block;
  padding: 0.22rem 0 0.22rem 0.85rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--vc-muted-fg);
  font-size: 0.8125rem;
  line-height: 1.45;
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
}

._tocItemH3_1sw9e_288 > a {
  padding-left: 1.6rem;
}

._tocItemH2_1sw9e_287 > a:hover,
._tocItemH3_1sw9e_288 > a:hover {
  color: var(--vc-fg);
}

._tocItemH2_1sw9e_287 > a[aria-current],
._tocItemH3_1sw9e_288 > a[aria-current] {
  color: var(--vc-fg);
  border-left-color: var(--vc-accent);
}

._tagLink_1sw9e_62:focus-visible,
._tocItemH2_1sw9e_287 > a:focus-visible,
._tocItemH3_1sw9e_288 > a:focus-visible,
._adjacentLink_1sw9e_318:focus-visible,
._tocPillSummary_1sw9e_319:focus-visible {
  outline: 2px solid var(--vc-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Narrow surfaces: a floating pill at the bottom of the viewport that opens
   the outline upward. Sticky (not fixed) so it stays inside the preview pane
   and settles at the end of the article. */
._tocPill_1sw9e_319 {
  position: sticky;
  bottom: 1rem;
  z-index: 5;
  width: fit-content;
  max-width: calc(100% - 2rem);
  margin: 2rem auto 0;
}

._tocPillSummary_1sw9e_319 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--vc-border);
  border-radius: 999px;
  background: color-mix(in oklch, var(--vc-card) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px -8px oklch(0% 0 0 / 0.25);
  color: var(--vc-fg);
  font-size: 0.8125rem;
  font-weight: 550;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

._tocPillSummary_1sw9e_319::-webkit-details-marker {
  display: none;
}

._tocPillIcon_1sw9e_360 {
  width: 0.9rem;
  height: 0.9rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h12M3 18h15'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h12M3 18h15'/%3E%3C/svg%3E") center / contain no-repeat;
}

._tocPillPanel_1sw9e_368 {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  translate: -50% 0;
  width: min(20rem, 88vw);
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  padding: 0.75rem 0.75rem 0.75rem 0.4rem;
  border: 1px solid var(--vc-border);
  border-radius: calc(var(--vc-radius) + 4px);
  background: var(--vc-card);
  box-shadow: 0 16px 40px -12px oklch(0% 0 0 / 0.3);
}

/* ── Newer / older ─────────────────────────────────────────────────────── */

._adjacent_1sw9e_195 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  max-width: var(--vc-prose-measure);
  margin-top: var(--vc-section-gap);
  padding-top: 1.75rem;
  border-top: 1px solid var(--vc-hairline);
}

._adjacentLink_1sw9e_318 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--vc-surface-border);
  border-radius: calc(var(--vc-radius) + 2px);
  background: var(--vc-surface);
  box-shadow: var(--vc-shadow);
  color: var(--vc-fg);
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

._adjacentLink_1sw9e_318:hover {
  background: var(--vc-surface-hover);
  border-color: color-mix(in oklch, var(--vc-accent) 35%, var(--vc-surface-border));
}

/* ── Reader actions ────────────────────────────────────────────────────── */

._actions_1sw9e_196 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: var(--vc-prose-measure);
  margin-top: calc(var(--vc-section-gap) * 0.8);
}

._actionButton_1sw9e_424 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2rem;
  padding: 0 0.8rem;
  border: 1px solid var(--vc-surface-border);
  border-radius: calc(var(--vc-radius) + 2px);
  background: var(--vc-surface);
  color: var(--vc-muted-fg);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

._actionButton_1sw9e_424:hover {
  color: var(--vc-fg);
  background: var(--vc-surface-hover);
}

._actionButton_1sw9e_424:focus-visible {
  outline: 2px solid var(--vc-accent);
  outline-offset: 2px;
}

._actionButton_1sw9e_424[data-state="done"] {
  color: var(--vc-accent);
  border-color: color-mix(in oklch, var(--vc-accent) 40%, var(--vc-surface-border));
}

._adjacentOlder_1sw9e_457 {
  grid-column: 2;
  text-align: right;
}

._adjacentLabel_1sw9e_462 {
  color: var(--vc-muted-fg);
  font-size: 0.8125rem;
}

._adjacentTitle_1sw9e_467 {
  font-family: var(--vc-font-heading);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

@container (min-width: 52rem) {
  ._article_1sw9e_6[data-vc-has-toc] ._articleBody_1sw9e_193 {
    display: grid;
    grid-template-columns: minmax(0, var(--vc-prose-measure)) var(--vc-toc-width);
    gap: var(--vc-toc-gap);
    align-items: start;
  }

  ._article_1sw9e_6[data-vc-has-toc] ._tocRail_1sw9e_268 {
    display: block;
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding-top: 0.2rem;
    border-left: 1px solid var(--vc-hairline);
  }

  ._article_1sw9e_6[data-vc-has-toc] ._tocRailLabel_1sw9e_272 {
    padding-left: 0.85rem;
  }

  ._article_1sw9e_6[data-vc-has-toc] ._tocPill_1sw9e_319 {
    display: none;
  }
}

@container vc-page (max-width: 640px) {
  ._articleHeader_1sw9e_12 {
    margin-bottom: 1.75rem;
  }

  ._heroImage_1sw9e_194,
  ._featureCover_1sw9e_238 {
    border-radius: var(--vc-radius);
    margin-bottom: 1.75rem;
  }

  ._adjacent_1sw9e_195 {
    grid-template-columns: 1fr;
  }

  ._adjacentOlder_1sw9e_457 {
    grid-column: 1;
  }
}

@media print {
  ._tocRail_1sw9e_268,
  ._tocPill_1sw9e_319,
  ._actions_1sw9e_196,
  ._adjacent_1sw9e_195 {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._article_1sw9e_6 *,
  ._article_1sw9e_6 *::before,
  ._article_1sw9e_6 *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* public-chrome.module.css — the page shell every vibecms blog page renders
   inside (public SSR + dashboard preview). The shell width follows the
   content: one reading column, or column + ToC rail on article pages that
   carry one, so the masthead always shares the content's left edge. */

._page_1fzlg_6 {
  container: vc-page / inline-size;
  width: 100%;
  min-height: 100vh;
  background: var(--vc-bg);
  color: var(--vc-fg);
  font-family: var(--vc-font-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._shell_1fzlg_18 {
  --vc-gutter: clamp(1.25rem, 5vw, 2rem);
  display: flex;
  flex-direction: column;
  box-sizing: content-box;
  width: auto;
  max-width: var(--vc-prose-measure);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 var(--vc-gutter);
}

._shell_1fzlg_18[data-layout="wide"] {
  --vc-prose-measure: 52rem;
}

._shell_1fzlg_18[data-wide] {
  max-width: calc(var(--vc-prose-measure) + 3.5rem + 13.5rem);
}

._frame_1fzlg_38 {
  display: block;
}

/* Grid templates need room for cards on listing pages. */
._page_1fzlg_6[data-vc-index="grid"]:not([data-vc-article-page]) ._shell_1fzlg_18 {
  max-width: 68rem;
}

._content_1fzlg_47 {
  flex: 0 0 auto;
}

/* Embedded (dashboard preview): size to content instead of the viewport. */
._page_1fzlg_6[data-embedded],
._page_1fzlg_6[data-embedded] ._shell_1fzlg_18 {
  min-height: 0;
}

/* Grows on short pages so the footer sits at the bottom; never shrinks below
   the gap that separates content from the footer on long ones. */
._push_1fzlg_59 {
  flex: 1 0 clamp(3rem, 8vw, 5rem);
}

/* ── Masthead ─────────────────────────────────────────────────────────── */

._masthead_1fzlg_65 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
  padding: clamp(1.25rem, 4vw, 2.5rem) 0 0;
  margin-bottom: clamp(2.5rem, 7vw, 4rem);
}

._brandHeading_1fzlg_75 {
  margin: 0;
  font: inherit;
}

._brand_1fzlg_75 {
  color: var(--vc-fg);
  text-decoration: none;
  font-family: var(--vc-font-heading);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  transition: color 150ms ease;
}

._brand_1fzlg_75:hover {
  color: var(--vc-accent);
}

._mastNav_1fzlg_94 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

._navLink_1fzlg_104 {
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  color: var(--vc-muted-fg);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}

._iconLink_1fzlg_113 {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  color: var(--vc-muted-fg);
  transition: color 150ms ease, background-color 150ms ease;
}

._navLink_1fzlg_104:hover,
._iconLink_1fzlg_113:hover {
  color: var(--vc-fg);
  background: var(--vc-muted);
}

._search_1fzlg_133 {
  margin: 0;
}

._searchField_1fzlg_137 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  height: 2rem;
  padding: 0 0.6rem;
  border: 1px solid var(--vc-border);
  border-radius: 7px;
  color: var(--vc-muted-fg);
  background: var(--vc-bg);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

._searchField_1fzlg_137:focus-within {
  border-color: var(--vc-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--vc-accent) 22%, transparent);
}

._searchInput_1fzlg_155 {
  width: 8.5rem;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--vc-fg);
  font: inherit;
  font-size: 0.875rem;
}

._searchInput_1fzlg_155::placeholder {
  color: var(--vc-muted-fg);
}

._searchInput_1fzlg_155::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

._visuallyHidden_1fzlg_175 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

._intro_1fzlg_187 {
  max-width: 34rem;
  margin: calc(clamp(2.5rem, 7vw, 4rem) * -0.45) 0 clamp(2.25rem, 6vw, 3.25rem);
  color: var(--vc-muted-fg);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

._footer_1fzlg_198 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0 2.25rem;
  border-top: 1px solid var(--vc-hairline);
  color: var(--vc-muted-fg);
  font-size: 0.8125rem;
}

._footerLink_1fzlg_210 {
  color: inherit;
  text-decoration: none;
}

._footerLink_1fzlg_210:hover {
  color: var(--vc-fg);
}

._brand_1fzlg_75:focus-visible,
._sidebarBrand_1fzlg_220:focus-visible,
._sidebarLink_1fzlg_221:focus-visible,
._sidebarTag_1fzlg_222:focus-visible,
._navLink_1fzlg_104:focus-visible,
._iconLink_1fzlg_113:focus-visible,
._footerLink_1fzlg_210:focus-visible {
  outline: 2px solid var(--vc-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Template chrome: centered (Editorial) ─────────────────────────────── */

._page_1fzlg_6[data-vc-chrome="centered"] ._masthead_1fzlg_65 {
  flex-direction: column;
  gap: 0.9rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--vc-hairline);
  text-align: center;
}

._page_1fzlg_6[data-vc-chrome="centered"] ._brand_1fzlg_75 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: max(var(--vc-heading-weight), 600);
  letter-spacing: var(--vc-heading-tracking);
}

._page_1fzlg_6[data-vc-chrome="centered"] ._mastNav_1fzlg_94 {
  margin-left: 0;
  justify-content: center;
}

._page_1fzlg_6[data-vc-chrome="centered"] ._intro_1fzlg_187 {
  margin: calc(clamp(2.5rem, 7vw, 4rem) * -0.55) auto clamp(2.25rem, 6vw, 3.25rem);
  text-align: center;
  font-family: var(--vc-font-heading);
  font-style: italic;
}

._page_1fzlg_6[data-vc-chrome="centered"] ._footer_1fzlg_198 {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* ── Template chrome: sidebar (Notebook) ──────────────────────────────── */

._sidebar_1fzlg_220 {
  display: none;
}

._sidebarBrand_1fzlg_220 {
  color: var(--vc-fg);
  font-family: var(--vc-font-heading);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: var(--vc-heading-tracking);
  text-decoration: none;
}

._sidebarTagline_1fzlg_280 {
  margin: 0.4rem 0 0;
  color: var(--vc-muted-fg);
  font-size: 0.8125rem;
  line-height: 1.5;
}

._sidebarNav_1fzlg_287,
._sidebarList_1fzlg_288 {
  display: grid;
  gap: 0.1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

._sidebarGroup_1fzlg_296 {
  margin-top: 1.75rem;
}

._sidebarGroup_1fzlg_296 ._sidebarList_1fzlg_288 {
  margin-top: 0.5rem;
}

._sidebarLabel_1fzlg_304 {
  margin: 0;
  color: var(--vc-muted-fg);
  font-family: var(--vc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}

._sidebarLink_1fzlg_221 {
  display: block;
  padding: 0.3rem 0.55rem;
  margin-inline: -0.55rem;
  border-radius: calc(var(--vc-radius) + 2px);
  color: var(--vc-muted-fg);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}

._sidebarLink_1fzlg_221:hover {
  color: var(--vc-fg);
  background: var(--vc-surface-hover);
}

._sidebarTags_1fzlg_329 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
}

._sidebarTag_1fzlg_222 {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--vc-surface-border);
  border-radius: 999px;
  color: var(--vc-muted-fg);
  font-family: var(--vc-font-mono);
  font-size: 0.6875rem;
  text-decoration: none;
}

._sidebarTag_1fzlg_222:hover {
  color: var(--vc-fg);
  border-color: color-mix(in oklch, var(--vc-accent) 40%, var(--vc-surface-border));
}

._sidebarCount_1fzlg_356 {
  opacity: 0.6;
}

@container vc-page (min-width: 60rem) {
  /* The sidebar carries the site nav from here up. */
  ._page_1fzlg_6[data-vc-chrome="sidebar"] [data-sidebar-dup] {
    display: none;
  }

  ._page_1fzlg_6[data-vc-chrome="sidebar"] ._frame_1fzlg_38 {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    max-width: 82rem;
    margin: 0 auto;
  }

  ._page_1fzlg_6[data-vc-chrome="sidebar"] ._sidebar_1fzlg_220 {
    display: block;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    padding: 2.5rem 1.5rem 2.5rem 2rem;
    border-right: 1px solid var(--vc-hairline);
  }

  ._page_1fzlg_6[data-embedded][data-vc-chrome="sidebar"] ._sidebar_1fzlg_220 {
    position: static;
    align-self: stretch;
    height: auto;
  }

  ._page_1fzlg_6[data-vc-chrome="sidebar"] ._shell_1fzlg_18 {
    margin: 0;
    padding-left: clamp(2rem, 4vw, 3.5rem);
  }

  ._page_1fzlg_6[data-vc-chrome="sidebar"] ._masthead_1fzlg_65 ._brand_1fzlg_75,
  ._page_1fzlg_6[data-vc-chrome="sidebar"] ._masthead_1fzlg_65 ._brandHeading_1fzlg_75 {
    visibility: hidden;
  }

  ._page_1fzlg_6[data-vc-chrome="sidebar"] ._intro_1fzlg_187 {
    display: none;
  }
}

@container vc-page (max-width: 520px) {
  ._searchInput_1fzlg_155 {
    width: 5.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._page_1fzlg_6 *,
  ._page_1fzlg_6 *::before,
  ._page_1fzlg_6 *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

._brand_1fzlg_75, ._sidebarBrand_1fzlg_220 { display: inline-flex; align-items: center; gap: 0.5em; }
._logo_1fzlg_421 { display: block; height: 1.5em; width: auto; max-width: 4em; object-fit: contain; }
._socialLinks_1fzlg_422 { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
/* subscribe-form.module.css
   Article-end + footer subscription, restyled as a restrained, rule-separated
   continuation of the article body (no filled/tinted card). All visual roles
   come from --vc-* tokens declared on the enclosing public <main
   data-vc-theme> ancestor (presets.css / vc-rich-content.css), so the widget
   tracks the active preset, the per-site accent, and light/dark mode
   automatically.

   Shared between apps/public (the real, script-enhanced form) and the
   dashboard editor preview (inert, no site slug), so the previewed page shows
   the exact subscribe surface readers get.

   The @vc/ui Input/Button primitives carry app-side defaults (shadcn tokens,
   a dark primary-button gradient, shadow + ring hairlines) that do NOT track
   the public theme; the rules below neutralize that leakage so only --vc-*
   surface/accent roles reach the rendered control.
*/

._form_5o7sc_19 {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: 100%;
  font-family: var(--vc-font-body, ui-sans-serif, system-ui, sans-serif);
  color: var(--vc-fg, inherit);
}

/* Both placements are the same quiet card, aligned to the reading column's
   left edge; the only accent is the submit button. */
._formEnd_5o7sc_30,
._formFooter_5o7sc_31 {
  box-sizing: border-box;
  max-width: var(--vc-prose-measure, 40rem);
  margin-top: var(--vc-section-gap, 2.75rem);
  padding: clamp(1.25rem, 3.5vw, 1.75rem);
  background: var(--vc-card, oklch(100% 0 0));
  border: 1px solid var(--vc-border, oklch(91% 0.006 106));
  border-radius: calc(var(--vc-radius, 8px) + 4px);
}

._heading_5o7sc_41 {
  margin: 0;
  font-family: var(--vc-font-heading, var(--vc-font-body, ui-sans-serif, system-ui, sans-serif));
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vc-fg, inherit);
}


._subtext_5o7sc_51 {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--vc-muted-fg, oklch(54% 0.012 106));
}


/* Input + submit read as one coherent control row. */
._row_5o7sc_60 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

._emailInput_5o7sc_67 {
  flex: 1 1 14rem;
  min-width: 0;
}

/* Override @vc/ui Input app defaults so the field tracks the public theme:
   vc surface bg, vc border, no app shadow/ring hairline, accent focus. */
._input_5o7sc_74 {
  box-sizing: border-box;
  background-color: var(--vc-card, oklch(100% 0 0));
  color: var(--vc-fg, inherit);
  border: 1px solid var(--vc-border, oklch(91% 0.006 106));
  border-radius: var(--vc-radius, 8px);
  box-shadow: none;
  font-family: var(--vc-font-body, ui-sans-serif, system-ui, sans-serif);
  font-size: 1rem;
  padding: 0.65rem 0.875rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

._input_5o7sc_74::placeholder {
  color: var(--vc-muted-fg, oklch(54% 0.012 106));
}

._input_5o7sc_74:hover:not(:disabled) {
  border-color: color-mix(in oklch, var(--vc-accent, oklch(46% 0.09 190)) 45%, var(--vc-border, oklch(91% 0.006 106)));
}

._input_5o7sc_74:focus-visible {
  outline: none;
  border-color: var(--vc-accent, oklch(46% 0.09 190));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--vc-accent, oklch(46% 0.09 190)) 30%, transparent);
}

._input_5o7sc_74:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._input_5o7sc_74[aria-invalid="true"] {
  border-color: oklch(50% 0.18 25);
  box-shadow: 0 0 0 3px oklch(50% 0.18 25 / 0.16);
}

/* Submit = the one deliberate accent surface. background-image: none kills the
   @vc/ui primary-button dark gradient so only the flat vc accent shows. */
._submitBtn_5o7sc_113 {
  flex-shrink: 0;
  background-color: var(--vc-accent, oklch(46% 0.09 190));
  background-image: none;
  color: var(--vc-accent-fg, oklch(98.7% 0.004 106));
  border: 1px solid transparent;
  border-radius: var(--vc-radius, 8px);
  box-shadow: none;
  font-family: var(--vc-font-body, ui-sans-serif, system-ui, sans-serif);
  font-weight: 600;
  padding: 0.65rem 1.25rem;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

._submitBtn_5o7sc_113:hover:not(:disabled) {
  background-color: color-mix(in oklch, var(--vc-accent, oklch(46% 0.09 190)), #000 12%);
  background-image: none;
}

._submitBtn_5o7sc_113:focus-visible {
  outline: 2px solid var(--vc-accent, oklch(46% 0.09 190));
  outline-offset: 2px;
  box-shadow: none;
}

._submitBtn_5o7sc_113:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Visually-hidden honeypot; never shown to real users. */
._emailLabel_5o7sc_144,
._honeypot_5o7sc_145 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

._consentNote_5o7sc_157 {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--vc-muted-fg, oklch(54% 0.012 106));
}

/* Calm confirmation; accent stays reserved for interactive emphasis. */
._successMsg_5o7sc_164 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--vc-fg, inherit);
}

/* Semantic error color (the only permitted hardcoded palette value). */
._errorMsg_5o7sc_173 {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: oklch(50% 0.18 25);
}

/* Stack the control row only on very narrow viewports. */
@container vc-page (max-width: 420px) {
  ._row_5o7sc_60 {
    flex-direction: column;
    align-items: stretch;
  }

  /* Column orientation reinterprets the row .emailInput "flex: 1 1 14rem" as a
     VERTICAL main-size basis, inflating the input container to ~14rem tall and
     shoving the submit button far down the column. Reset to content height. */
  ._emailInput_5o7sc_67 {
    flex: 0 0 auto;
  }

  ._emailInput_5o7sc_67,
  ._submitBtn_5o7sc_113 {
    width: 100%;
  }
}