/* ——— Article (single blog post) ——— */
:root{ --article-w:720px; }

body.article-page{ background:var(--iw-cloud); }

.article{
  background:var(--iw-cloud);
  padding:calc(var(--iw-nav-h) + clamp(36px,6vh,72px)) clamp(18px,5vw,72px) clamp(64px,10vh,120px);
}
.article-wrap{ max-width:var(--article-w); margin:0 auto; }

/* head */
.article-date{
  display:block; margin-bottom:14px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:var(--iw-eyebrow-track);
  text-transform:uppercase; color:var(--iw-accent);
}
.article h1{
  font-weight:800; font-size:clamp(28px,4.4vw,48px); line-height:1.06;
  letter-spacing:-0.03em; color:var(--iw-ink); text-wrap:balance;
}

/* media — old aspect (726×500), full column width as in the original design */
.article-media{
  width:100%; margin:clamp(26px,4vh,44px) 0;
  border:1px solid var(--iw-border); background:var(--iw-media); overflow:hidden;
}
.article-media img{
  width:100%; height:auto; aspect-ratio:726 / 500; object-fit:cover; display:block;
}

/* body */
.article-body{ color:var(--iw-body); }
.article-body p{
  font-size:clamp(16px,1.7vw,18px); line-height:1.72; margin-bottom:1.15em;
}
.article-body p:last-child{ margin-bottom:0; }
.article-body a{
  color:var(--iw-accent); border-bottom:1px solid rgba(5,178,216,0.4); padding-bottom:1px;
  transition:border-color .3s ease;
}
.article-body a:hover{ border-bottom-color:var(--iw-accent); }

/* prev / next navigation between articles */
.article-nav{
  max-width:var(--article-w); margin:clamp(44px,6vh,72px) auto 0;
  padding-top:clamp(26px,4vh,38px); border-top:1px solid var(--iw-border);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.article-nav [data-btn="ghost"] .arrow{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
}
.article-nav .an-disabled{ opacity:0.4; pointer-events:none; cursor:default; }