/* The blog: an index of cards and an article template. A port of dub.co/blog's layout
   onto the site's tokens: #fafafa page, 1080px bordered rails, Satoshi display, Inter body. */

body.blog { background: var(--n-50); }

/* ── Index header: title, subtitle and category pills over the faint grid ── */
.blog-head .rail { padding: 84px 48px 88px; }
.blog-head .grid-bg { -webkit-mask-image: linear-gradient(transparent, #000 40%, transparent); mask-image: linear-gradient(transparent, #000 40%, transparent); }
.blog-head h1 { position: relative; font-size: 48px; line-height: 55px; }
.blog-head .lede { position: relative; margin-top: 24px; color: var(--n-500); }
.cats { position: relative; display: flex; flex-wrap: wrap; gap: 16px 8px; margin-top: 40px; }
.cats a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 8px;
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--n-950); transition: background-color .15s, color .15s;
}
.cats a:hover { background: rgb(23 23 23 / .05); }
.cats a[aria-current="true"] { background: var(--n-900); color: #fff; }

/* ── Card grid: shared hairlines between cards, as dub draws them ── */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: -1px; }
.post-card { display: flex; flex-direction: column; border-right: 1px solid var(--grid-border); border-bottom: 1px solid var(--grid-border); transition: background-color .2s; }
.post-card:nth-child(3n) { border-right: 0; }
.post-card:hover { background: #fff; }
.post-card[hidden] { display: none; }
.post-cover { overflow: hidden; aspect-ratio: 1200 / 630; border-bottom: 1px solid var(--grid-border); background: #fff; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); }
.post-card:hover .post-cover img { transform: scale(1.02); }
.post-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.post-card h2 { font: 700 18px/28px var(--font-display); color: var(--n-900); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.post-card p { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--n-500); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.byline { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-size: 14px; line-height: 20px; color: var(--n-500); }
.avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #16181c; }
.avatar svg { width: 14px; height: 14px; }
.post-grid-empty { grid-column: 1 / -1; padding: 64px 24px; text-align: center; color: var(--n-500); font-size: 14px; }

/* ── Article header ── */
.post-head .rail { padding: 64px 48px 56px; }
.post-head .grid-bg { -webkit-mask-image: linear-gradient(transparent, #000 50%, transparent); mask-image: linear-gradient(transparent, #000 50%, transparent); }
.post-meta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.post-cat { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border: 1px solid var(--n-200); border-radius: 8px; background: #fff; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--n-600); transition: box-shadow .15s; }
.post-cat:hover { box-shadow: 0 0 0 3px var(--n-100); }
.post-date { font-size: 14px; line-height: 20px; color: var(--n-500); }
.post-date time { text-decoration: underline dotted var(--n-400); text-underline-offset: 4px; }
.post-head h1 { position: relative; max-width: 640px; margin-top: 20px; font-size: 36px; line-height: 45px; }
.post-head .lede { position: relative; max-width: 640px; margin-top: 20px; font-size: 18px; line-height: 28px; color: var(--n-500); }

/* ── Article body: 2/3 article, 1/3 sidebar, split by a hairline ── */
.post-layout { display: grid; grid-template-columns: 2fr 1fr; }
.post-main { min-width: 0; background: #fff; }
.post-main > .post-cover { border-bottom: 1px solid var(--grid-border); }
.post-aside { border-left: 1px solid var(--grid-border); padding: 40px; }
.post-aside-sticky { position: sticky; top: 88px; display: grid; gap: 32px; }
.aside-label { font-size: 14px; line-height: 20px; color: var(--n-500); }
.author { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.author .avatar { width: 36px; height: 36px; }
.author b { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--n-700); }
.author div span { display: block; font-size: 14px; line-height: 20px; color: var(--n-500); }
.toc { margin-top: 12px; border-left: 2px solid var(--n-200); display: grid; gap: 4px; }
.toc a { position: relative; display: block; margin-left: -2px; padding: 4px 0 4px 16px; border-left: 2px solid transparent; font-size: 14px; line-height: 20px; color: var(--n-500); transition: color .15s, border-color .15s; }
.toc a:hover { color: var(--n-800); }
.toc a[aria-current="true"] { color: var(--n-900); border-left-color: var(--n-900); }
.promo { display: block; overflow: hidden; border: 1px solid var(--n-200); border-radius: 12px; background: #fff; transition: box-shadow .15s; }
.promo:hover { box-shadow: 0 0 0 4px var(--n-100); }
.promo img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-bottom: 1px solid var(--n-200); }
.promo div { padding: 16px; }
.promo b { display: block; font: 700 16px/24px var(--font-display); color: var(--n-900); }
.promo p { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--n-500); }
.promo .btn { margin-top: 16px; width: 100%; }

/* ── Prose ── */
.prose { padding: 40px 48px 64px; color: var(--n-700); font-size: 16px; line-height: 28px; }
.prose > * + * { margin-top: 20px; }
.prose h2 { font: 700 24px/32px var(--font-display); color: var(--n-900); scroll-margin-top: 88px; }
.prose > h2 { margin-top: 48px; }
.prose > h2 + * { margin-top: 16px; }
.prose h3 { font: 700 18px/28px var(--font-display); color: var(--n-900); }
.prose > h3 { margin-top: 32px; }
.prose a { color: var(--n-600); font-weight: 500; text-decoration: underline; text-decoration-color: var(--n-900); text-underline-offset: 4px; }
.prose a:hover { color: var(--n-900); }
.prose strong { color: var(--n-900); font-weight: 600; }
.prose ul, .prose ol { padding-left: 24px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--n-300); }
.prose ol li::marker { color: var(--n-500); font-weight: 500; }
.prose blockquote { margin: 28px 0 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--n-200); color: var(--n-600); font-style: italic; }
.prose code { font: 500 14px/20px var(--font-mono); padding: 2px 6px; border-radius: 6px; background: var(--n-100); color: var(--n-900); }
.prose pre { overflow-x: auto; padding: 16px 20px; border: 1px solid var(--n-200); border-radius: 8px; background: var(--n-50); }
.prose pre code { padding: 0; background: none; font-size: 13px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.prose figure { margin: 32px 0 0; }
.prose figure img { width: 100%; height: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
.prose figcaption { margin-top: 12px; text-align: center; font-size: 14px; line-height: 20px; color: var(--n-500); }
.prose hr { margin: 40px 0 0; border: 0; border-top: 1px solid var(--n-200); }

@media (max-width: 1023px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .post-card:nth-child(3n) { border-right: 1px solid var(--grid-border); }
  .post-card:nth-child(2n) { border-right: 0; }
  .post-layout { grid-template-columns: 1fr; }
  .post-aside { border-left: 0; border-top: 1px solid var(--grid-border); }
  .post-aside-sticky { position: static; }
  .post-aside .toc-block { display: none; }
}
@media (max-width: 639px) {
  .blog-head .rail { padding: 56px 20px 56px; }
  .blog-head h1 { font-size: 36px; line-height: 40px; }
  .post-grid { grid-template-columns: 1fr; }
  .post-card { border-right: 0 !important; }
  .post-head .rail { padding: 40px 20px 40px; }
  .post-head h1 { font-size: 30px; line-height: 36px; }
  .prose { padding: 32px 20px 48px; }
  .post-aside { padding: 32px 20px; }
}

/* The CTA's notch is cut from the page colour, which is #fafafa here rather than white. */
body.blog .notch { color: var(--n-50); }