/* The Grapevine. Uses the sales-page tokens and components in app.css. */
.grapevine .sales-top { flex-wrap: wrap; row-gap: 10px; }
.grapevine .sales-top nav.site-nav { display: flex; flex-wrap: wrap; }
.grapevine .sales-top nav a[aria-current="page"] { color: var(--ink); }

.grapevine-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px var(--gutter) 72px;
  display: grid;
  gap: 16px;
}
.grapevine-main.index { max-width: 820px; }
.grapevine-main h1 { font: 500 48px/1.08 var(--font-display); letter-spacing: -0.8px; }
.grapevine-main article { display: grid; gap: 16px; }
.lede { font-size: 18px; color: var(--muted); max-width: 52ch; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.byline { color: var(--muted); font-size: 14px; }
.byline time { font-variant-numeric: tabular-nums; }

.post-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.post-list article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 24px;
  display: grid;
  gap: 8px;
  box-shadow: var(--shadow);
}
.post-list h2 { font: 500 26px/1.2 var(--font-display); letter-spacing: -0.3px; }
.post-list h2 a { color: var(--ink); text-decoration: none; }
.post-list h2 a:hover { color: var(--accent); }
.post-list p { color: var(--muted); }

.post-cover { width: 100%; height: auto; border-radius: 20px; display: block; }

.prose { display: grid; gap: 16px; font-size: 17px; color: var(--ink); min-width: 0; }
.prose h2 { font: 500 28px/1.2 var(--font-display); letter-spacing: -0.4px; }
.prose h3 { font: 600 18px/1.3 var(--font-body); }
.prose p, .prose li { color: inherit; }
.prose a { font-weight: 600; }
.prose ul, .prose ol { margin: 0; padding-left: 1.25em; display: grid; gap: 8px; }
.prose blockquote {
  margin: 0;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}
.prose code { font-size: 0.9em; background: var(--surface-soft); padding: 2px 6px; border-radius: 6px; }
.prose pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.prose pre code { background: none; padding: 0; }
.prose img { max-width: 100%; height: auto; border-radius: 16px; }
.prose hr { border: 0; border-top: 1px solid var(--line); width: 100%; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--line); text-align: left; padding: 8px 10px; vertical-align: top; }

.post-cta {
  margin-top: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  display: grid;
  gap: 12px;
  box-shadow: var(--shadow);
}
.post-cta h2 { font: 500 28px/1.15 var(--font-display); letter-spacing: -0.4px; }
.post-cta > p { color: var(--muted); }

@media (max-width: 860px) {
  .grapevine-main { padding-block: 36px 56px; }
  .grapevine-main h1 { font-size: 36px; }
  .post-list h2, .prose h2, .post-cta h2 { font-size: 24px; }
  .prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}