/* The Nest (the blog), on top of docs.css: one reading column, the same paper, ink and sea, the same 2px ink rules. */
@font-face { font-family: "Disket Mono"; src: url("/blog/assets/fonts/disket-mono-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
.nest .top { gap: 14px; }
.nest .nest-name { color: var(--mid); margin-right: auto; }
.nest .nest-name:hover { color: var(--sea-ink); }
.nest .top-links .start { border: 2px solid var(--line); padding: 4px 10px; text-decoration: none; }
.nest .top-links .start:hover { background: var(--ink); color: var(--paper); }

.nest main { display: grid; grid-template-columns: minmax(0, 70ch) 220px; justify-content: center; gap: 56px; padding: 48px 40px 88px; }
.nest article { max-width: 70ch; }
.nest article p, .nest article li { font-size: 16px; line-height: 1.75; }
.nest .eyebrow a { color: inherit; text-decoration: none; }
.nest h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.1; text-wrap: balance; }
.nest .byline { color: var(--mid); font-size: 14px; margin: 10px 0 28px; }
.nest .byline span { color: var(--ink); }
.nest .hero { margin: 0 0 32px; border: 2px solid var(--line); background: var(--sea); }
.nest .hero img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.nest article > .hero + p, .nest .byline + p { font-size: 17px; }
.nest .toc { position: sticky; top: 88px; align-self: start; }

.nest .cta { margin: 56px 0 0; padding: 24px; border: 2px solid var(--line); }
.nest .cta .cta-title { font-family: var(--head); font-size: 20px; line-height: 1.2; text-transform: uppercase; margin: 0 0 10px; }
.nest .cta .code { margin: 16px 0; }
.nest .author { margin: 24px 0 0; padding: 16px 0 0; border-top: 2px solid var(--line); }
.nest .author p { margin: 0 0 6px; font-size: 14px; }
.nest .related { margin: 40px 0 0; }
.nest .related ul, .nest .posts { list-style: none; margin: 0; padding: 0; }
.nest .related li { padding: 12px 0; border-bottom: 1px solid var(--soft); }
.nest .related small { display: block; color: var(--mid); font-size: 13px; margin-top: 2px; }

.nest-index main { grid-template-columns: minmax(0, 70ch); }
.nest .lead { font-size: 17px; margin-bottom: 32px; }
.nest .posts li { padding: 22px 0; border-top: 2px solid var(--line); }
.nest .posts a { display: block; text-decoration: none; }
.nest .posts .thumb { display: block; margin-bottom: 12px; border: 2px solid var(--line); background: var(--sea); }
.nest .posts .thumb img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.nest .post-title { display: block; font-family: var(--head); font-size: 22px; line-height: 1.2; text-transform: uppercase; }
.nest .post-desc { display: block; margin-top: 6px; color: var(--ink); }
.nest .posts a:hover .post-title { color: var(--sea-ink); }
.nest .posts .byline { margin: 8px 0 0; }

.nest-foot { border-top: 2px solid var(--line); padding: 20px 40px; font-size: 14px; color: var(--mid); }

@media (max-width: 1100px) { .nest main { grid-template-columns: minmax(0, 70ch); } .nest .toc { display: none; } }
@media (max-width: 640px) {
  .nest main { padding: 28px 16px 64px; }
  .nest .top { padding: 10px 16px; gap: 10px; }
  .nest .brand span { display: none; }
  .nest .top-links { gap: 10px; }
  .nest .top-links a:not(.start) { display: none; }
  .nest-foot { padding: 20px 16px; }
}