/* ============ ARTICLES (listing + single article) ============ */
.article-body{padding-top:calc(var(--bar-h) + 3px);}
.article-main{max-width:960px;margin:0 auto;padding:4rem 5vw 6rem;}

/* --- Listing --- */
.articles-listing-sub{max-width:680px;margin:-1.5rem auto 3rem;text-align:center;}

.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.6rem;}
.article-card{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--bg-raised);transition:transform .25s ease,border-color .25s ease;}
.article-card:hover{transform:translateY(-6px);border-color:var(--gold);}
.article-card-link{display:flex;flex-direction:column;height:100%;}
.article-card-thumb{aspect-ratio:3/4;background:var(--bg-raised);overflow:hidden;}
.article-card-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.article-card h3{font-size:1.05rem;text-transform:none;letter-spacing:0;padding:1rem 1.1rem 0;margin:0;}
.article-card p{font-size:.85rem;padding:.5rem 1.1rem 0;margin:0;flex:1;}
.article-card-cta{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);padding:1rem 1.1rem;display:block;}

/* --- Single article --- */
.article-breadcrumb{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;}
.article-breadcrumb > a{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);}
.article-breadcrumb > a:hover{color:var(--gold);}

.article-title{font-size:clamp(2rem,5vw,3.2rem);text-transform:none;letter-spacing:0;margin-bottom:1rem;}
.article-meta{font-family:var(--mono);font-size:.75rem;color:var(--fg-dim);letter-spacing:.04em;margin-bottom:2rem;}
.article-cover{float:right;width:36%;max-width:340px;height:auto;border-radius:6px;border:1px solid var(--line);margin:0 0 1.5rem 2.5rem;box-shadow:0 12px 40px rgba(0,0,0,0.3);}
@media (max-width:640px){.article-cover{float:none;display:block;width:70%;max-width:300px;margin:0 auto 2rem;}}

.article-body-content{font-size:1.02rem;line-height:1.8;color:var(--fg-dim);overflow-wrap:break-word;}
/* Long URLs and inline commands have no spaces to wrap at. */
.article-body-content a,.article-body-content :not(pre) > code{overflow-wrap:anywhere;}
.article-body-content h2{font-size:1.6rem;text-transform:none;letter-spacing:0;color:var(--fg);margin:2.5rem 0 1rem;line-height:1.25;}
.article-body-content h3{font-size:1.25rem;text-transform:none;letter-spacing:0;color:var(--fg);margin:2rem 0 .8rem;}
.article-body-content p{margin:0 0 1.2rem;}
.article-body-content ul,.article-body-content ol{margin:0 0 1.2rem;padding-left:1.4rem;}
.article-body-content li{margin-bottom:.4rem;}
.article-body-content a{color:var(--teal);text-decoration:underline;text-underline-offset:2px;}
.article-body-content a:hover{color:var(--gold);}
.article-body-content img{max-width:100%;height:auto;border-radius:4px;display:block;margin:1.5rem auto;}
.article-body-content figure{margin:2rem 0;}
.article-body-content figcaption{font-size:.8rem;color:var(--fg-dim);text-align:center;margin-top:.6rem;font-family:var(--mono);}
.article-body-content blockquote{border-left:3px solid var(--gold);margin:1.5rem 0;padding:.2rem 0 .2rem 1.2rem;color:var(--fg);font-style:italic;}
/* Wide tables and diagrams scroll sideways inside their own box on phones,
   so the page itself never gets wider than the screen. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5rem 0;}
.table-scroll table{margin:0;}
.article-body-content figure:has(> svg){overflow-x:auto;-webkit-overflow-scrolling:touch;}
.article-body-content table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9rem;}
.article-body-content th,.article-body-content td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left;}
.article-body-content th{background:var(--bg-raised);color:var(--fg);font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;}
.article-body-content code{font-family:var(--mono);background:var(--bg-raised);padding:.15rem .4rem;border-radius:3px;font-size:.88em;}
.article-body-content pre{background:var(--bg-raised);border:1px solid var(--line);border-radius:4px;padding:1rem;overflow-x:auto;margin:0 0 1.2rem;}
.article-body-content pre code{background:none;padding:0;}

.article-ebook{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);}

@media (max-width: 640px){
  .article-main{padding:3rem 6vw 4rem;}
  .article-breadcrumb{flex-direction:column;align-items:flex-start;}
  .article-breadcrumb > a{display:inline-flex;align-items:center;min-height:44px;font-size:.8rem;}
  .article-meta{font-size:.8rem;}
  .article-body-content h2{font-size:1.45rem;}
  .article-body-content table{font-size:.85rem;}
  .article-body-content th,.article-body-content td{padding:.55rem .65rem;min-width:7.5rem;}
  .article-body-content th{font-size:.72rem;}
  /* Diagrams are drawn 900 wide; keep their labels readable and let them scroll. */
  .article-body-content figure > svg{min-width:760px;}
  .article-body-content figcaption{font-size:.8rem;}
  .articles-grid{grid-template-columns:1fr;}
  .article-card-cta{font-size:.78rem;}
}