/* ── Article page ────────────────────────────────────────── */
.article-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.article-page h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #f0f0f0;
  margin: 0 0 2rem;
}

.article-page h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #e8e8e8;
  margin: 2.5rem 0 0.75rem;
  letter-spacing: -0.01em;
}

.article-page h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #d8d8d8;
  margin: 2rem 0 0.5rem;
}

.article-page h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #c8c8c8;
  margin: 1.5rem 0 0.4rem;
}

.article-page p {
  color: #c0c0c0;
  margin: 0 0 1.25rem;
  line-height: 1.75;
}

.article-page a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(#ff6a00, #ff6a00);
  background-repeat: no-repeat;
  background-size: calc(100% + 4px) 3px;
  background-position: 2px 98%;
  transition: background-color 0.15s ease;
}

.article-page a:hover {
  color: inherit;
  background-color: rgba(255, 106, 0, 0.15);
}

.article-page ul, .article-page ol {
  color: #c0c0c0;
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
}

.article-page ul { list-style-type: disc; }
.article-page ol { list-style-type: decimal; }

.article-page li { margin-bottom: 0.35rem; line-height: 1.7; }

.article-page blockquote {
  border-left: 3px solid #333;
  margin: 1.5rem 0;
  padding: 0.5rem 1.25rem;
  color: #888;
  font-style: italic;
}

.article-page hr {
  border-top: 1px solid #222;
  margin: 2.5rem 0;
}

.article-page strong { color: #e8e8e8; }
.article-page em { color: #b8b8b8; }

/* inline code */
.article-page code {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.85em;
  background: #1a1a1a;
  color: #e0b87a;
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

/* ── Code blocks (Rouge syntax highlighted) ─────────────── */
.code-block {
  background: #1a1a1a;
  border: 1px solid #252525;
  border-radius: 6px;
  overflow-x: auto;
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  line-height: 1.55;
}

.code-block code {
  font-family: "SF Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;
  font-size: 0.82rem;
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

/* ── Article images ──────────────────────────────────────── */
.article-image {
  max-width: 100%;
  border-radius: 6px;
  margin: 1.5rem 0;
  border: 1px solid #222;
}

/* ── Image captions ──────────────────────────────────────── */
.img-caption {
  font-size: 0.75rem;
  color: #555;
  margin-top: -0.75rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

/* ── Hover-swap image pair ───────────────────────────────── */
.img-hover-pair {
  position: relative;
  display: block;
  margin: 1.5rem 0;
}

.img-hover-pair img {
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid #222;
  display: block;
}

.img-hover-pair img.hover-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.img-hover-pair:hover img.hover-img { opacity: 1; }
.img-hover-pair:hover img.base-img  { opacity: 0; }

/* ── Video embeds ────────────────────────────────────────── */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 2rem 0;
  border-radius: 6px;
  overflow: hidden;
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}