/* Readable article styles inside the new shell. Does not change article words. */
.article-wrap { width: min(820px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 24px; }
.article-wrap h1 { font-size: clamp(36px, 5vw, 64px); max-width: 18ch; }
.post { color: var(--ivory); }
.post .crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.post .crumbs a { color: var(--amber); text-decoration: none; }
.post .byline, .post .upd { color: var(--muted); font-size: 15px; }
.post h2 { font-size: clamp(28px, 3vw, 40px); margin: 1.4em 0 .4em; }
.post h3 { font-size: 22px; margin: 1.2em 0 .3em; }
.post p, .post li { color: #d7d7d7; }
.post a { color: var(--amber); }
.post img { border-radius: 16px; height: auto; }
.post .card, .post .sum, .post .toc { background: var(--s1); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; margin: 18px 0; }
.post .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.post code { font-family: var(--mono); font-size: .92em; }
.post .codebox { position: relative; margin: 20px 0; }
.post .codebox pre { margin: 0; padding: 44px 16px 16px; overflow-x: auto; background: #0b0b0b; border: 1px solid var(--line); border-radius: 16px; }
.post .codebox .lbl { position: absolute; top: 12px; left: 16px; }
.post .codebox .copy { position: absolute; top: 8px; right: 8px; background: var(--amber); color: var(--onyx); border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.post table { border-collapse: collapse; width: 100%; }
.post th, .post td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.post .tw { overflow-x: auto; }
.post .author { display: flex; gap: 16px; align-items: center; margin-top: 36px; }
.post .author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
@media (max-width: 720px) {
  .article-wrap { width: min(820px, calc(100% - 32px)); }
}

/* Studio 2026-11-10 (draft): "Keep reading" uses the Notes log entry from site.css. */
.post .related { margin-top: 48px; }
.post .related h2 { margin-bottom: 0; }
.post .log-rel { margin-top: 20px; }
.post .note { grid-template-columns: 150px minmax(0, 1fr) auto; grid-template-areas: "meta title go"; }
.post .note-t { margin: 0; font-size: 20px; line-height: 1.3; }
.post .note-t a { color: var(--ivory); }
.post .note p { color: var(--muted); }
.post .note .arr { color: var(--amber); }
@media (max-width: 900px) {
  .post .note { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title" "go"; }
}