.articles-section { padding-block: clamp(4rem,8vw,8rem); border-top: 1px solid var(--line); }
.articles-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:3rem; }
.article-eyebrow { font-size:.72rem; line-height:1.5; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); margin-bottom:1.15rem; }
.articles-heading h1 { font-size:clamp(4rem,8vw,8rem); }
.articles-heading > p,.articles-heading > div > p:not(.article-eyebrow) { color:var(--muted); }
.article-text-link { display:inline-flex; align-items:center; gap:1.5rem; font-size:.9rem; margin-top:1rem; border-bottom:1px solid var(--line); padding-bottom:.65rem; }
.article-arrow { flex:none; width:2rem; height:1.3rem; transition:transform .2s ease; }
.article-text-link:hover .article-arrow,.article-card a:hover .article-arrow,.article-card a:focus-visible .article-arrow { transform:translateX(4px); }
.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.article-card { min-width:0; }
.article-card > a { display:grid; aspect-ratio:1; position:relative; border-radius:0; background:#241b16; }
.article-card img { width:100%; height:66.667%; position:absolute; inset:0; object-fit:contain; }
.article-card-overlay { align-self:end; position:relative; z-index:1; min-height:33.333%; padding:clamp(1.15rem,1.7vw,1.75rem); display:flex; align-items:center; gap:1rem; justify-content:space-between; background:rgb(43 30 23 / 90%); }
.article-card h3 { font-size:clamp(1.35rem,1.65vw,1.75rem); line-height:1.15; letter-spacing:-.035em; text-wrap:balance; }
.article-card p { margin-top:.65rem; font-size:.85rem; line-height:1.5; color:#ddd6ce; }
.article-card .article-arrow { width:1.8rem; }
.article-archive { padding-top:clamp(4rem,8vw,8rem); padding-bottom:7rem; min-height:65vh; }
.article-pagination { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:3rem; }
.article-empty { padding-block:3rem; color:var(--muted); }
.article-page .site-header { position:relative; }
.article-page nav [aria-current="page"] { color:var(--accent); }
.article-intro { max-width:85rem; margin:auto; padding-top:3rem; padding-bottom:3rem; }
.article-back { display:inline-block; font-size:.85rem; color:var(--muted); margin-bottom:3.5rem; }
.article-intro h1 { font-size:clamp(2.5rem,4.5vw,5.4rem); line-height:1.08; max-width:24ch; text-wrap:balance; }
.article-deck { font-size:clamp(1.05rem,1.8vw,1.4rem); line-height:1.55; color:#c4c1b8; max-width:58ch; margin-top:1.7rem; }
.article-byline { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.5rem; color:var(--muted); font-size:.8rem; margin-top:2rem; }
.article-byline a { color:var(--paper); border-bottom:1px solid var(--line); }
.article-cover { margin:0 auto; max-width:76rem; padding-inline:var(--gutter); }
.article-cover img { width:100%; height:auto; max-height:36rem; object-fit:contain; }
.article-reading { max-width:58rem; margin:0 auto; padding-top:3.5rem; padding-bottom:3rem; }
.article-body { font-size:1.08rem; line-height:1.85; overflow-wrap:anywhere; }
.article-body > * + * { margin-top:1.5rem; }
.article-body h2 { font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.15; letter-spacing:-.035em; margin-top:3rem; }
.article-body h3 { font-size:1.5rem; line-height:1.3; letter-spacing:-.02em; margin-top:2rem; }
.article-body h4,.article-body h5,.article-body h6 { font-size:1.1rem; line-height:1.4; }
.article-body p,.article-body li { color:#d0cdc5; }
.article-body strong { color:var(--paper); font-weight:650; }
.article-body a { text-decoration:underline; text-decoration-color:#8d877b; text-underline-offset:.22em; }
.article-body a:hover { color:var(--accent); }
.article-body .heading-anchor { font-size:.65em; color:var(--muted); text-decoration:none; margin-left:.5em; opacity:0; }
.article-body :is(h2,h3,h4,h5,h6):hover .heading-anchor,.article-body .heading-anchor:focus { opacity:1; }
.article-body :is(pre,table) { max-width:100%; overflow:auto; }
.article-body pre { padding:1.5rem; font-size:.85rem; line-height:1.7; background:#191a1c; border:1px solid var(--line); tab-size:2; }
.article-body code { font-size:.88em; background:#232321; padding:.1em .25em; }
.article-body pre code { padding:0; background:none; }
.article-body table { display:block; border-collapse:collapse; font-size:.9rem; }
.article-body th,.article-body td { border:1px solid var(--line); padding:.65rem 1rem; }
.article-body th { background:#24231f; text-align:left; }
.article-body blockquote,.markdown-alert { margin-inline:0; padding:1rem 1.5rem; border-left:2px solid var(--accent); background:#1e1b17; }
.article-body details { padding:1rem; border:1px solid var(--line); }
.article-body summary { cursor:pointer; font-weight:600; }
.article-body details > * + * { margin-top:1rem; }
.article-body img { width:100%; height:auto; }
.article-body figure { margin-inline:0; }
.article-body figcaption { color:var(--muted); font-size:.85rem; line-height:1.65; margin-top:.8rem; }
.article-body figure.explainer { padding:clamp(1.2rem,3vw,2.5rem) 0; margin-block:2.5rem; }
.article-body .explainer img { max-height:24rem; object-fit:contain; }
.article-body .explainer-labels { display:flex; justify-content:space-around; gap:1rem; font-size:.8rem; color:var(--paper); margin-bottom:.75rem; }
.article-body input[type="checkbox"] { accent-color:var(--accent); }
.article-body .katex-display { overflow:auto; padding-block:.5rem; }
.article-toc { padding:1.2rem 0; margin-bottom:2rem; border-block:1px solid var(--line); }
.article-toc summary { cursor:pointer; }
.article-toc li { margin-top:.5rem; }
.article-end { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:2rem; padding-block:3rem; max-width:76rem; margin:auto; border-top:1px solid var(--line); }
.article-end > span { color:var(--muted); }
.copy-code { display:block; margin-top:1.5rem; margin-left:auto; padding:.4rem .7rem; font-size:.75rem; border:1px solid var(--line); }
.copy-code + pre { margin-top:.4rem; }
.draft-banner { padding:1rem var(--gutter); color:var(--ink); background:var(--accent); }
.diagram-status { font-size:.8rem; }
.article-diagram svg { max-width:100%; height:auto; }
.footer .footer-articles { display:inline-block; margin-top:.7rem; margin-right:1.5rem; }
@media (max-width:1279px) { .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px) { .article-grid { grid-template-columns:minmax(0,1fr); } .articles-heading { align-items:start; flex-direction:column; gap:1.5rem; } .article-card h3 { font-size:1.3rem; } .article-card p { font-size:.8rem; line-height:1.4; margin-top:.5rem; } .article-card-overlay { padding:1rem; } }
/* Four navigation actions need two rows at small sizes. Keep every page reachable. */
@media (max-width:700px) {
  body .site-header { flex-wrap:wrap; gap:1rem; }
  body .site-header nav { width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem; }
  body .site-header .nav-link { display:block; font-size:.75rem; }
  body .site-header .nav-contact { padding:.6rem .8rem; font-size:.75rem; }
  .article-intro { padding-top:2rem; }
  .article-back { margin-bottom:2.5rem; }
  .article-reading { padding-top:2.5rem; }
  .article-body { font-size:1rem; }
  .article-cover img { max-height:none; }
}