/* ============================================
   Article Typography (for detail pages)
   ============================================ */

.article-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.article-header {
  margin-bottom: var(--space-3xl);
  text-align: center;
}

.article-header__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent-coral);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.article-header__title {
  font-size: clamp(2.5rem, 4vw, 4rem);
  margin-bottom: var(--space-lg);
  line-height: 1.2;
}

.article-header__tags {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
}

/* ── Content Typography ── */
.article-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-light);
}

.article-content p {
  margin-bottom: var(--space-xl);
}

.article-content h2 {
  font-size: var(--fs-h2);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-lg);
  color: var(--text-light);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: var(--space-sm);
}

.article-content h3 {
  font-size: var(--fs-h3);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.article-content a {
  color: var(--accent-coral);
  border-bottom: 1px dashed var(--accent-coral);
  padding-bottom: 2px;
}

.article-content a:hover {
  color: var(--accent-coral-light);
  border-bottom-style: solid;
}

/* Lists */
.article-content ul,
.article-content ol {
  margin-bottom: var(--space-xl);
  padding-left: var(--space-xl);
}

.article-content li {
  margin-bottom: var(--space-sm);
  position: relative;
}

.article-content ul li {
  list-style: none;
}

.article-content ul li::before {
  content: '•';
  color: var(--accent-coral);
  position: absolute;
  left: -1.2em;
  font-weight: bold;
}

/* Blockquote */
.article-content blockquote {
  margin: var(--space-2xl) 0;
  padding: var(--space-lg) var(--space-xl);
  background: var(--bg-secondary);
  border-left: 4px solid var(--accent-coral);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-style: italic;
  color: var(--text-light-muted);
}

.article-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Images */
.article-content figure {
  margin: var(--space-3xl) calc(-1 * var(--space-xl));
}

.article-content img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.article-content figcaption {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-light-muted);
  margin-top: var(--space-sm);
  font-style: italic;
}

/* Code */
.article-content pre {
  margin: var(--space-2xl) 0;
  background: #0f0f1a;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.article-content code {
  color: var(--accent-gold-light);
}

/* Experience specific header */
.experience-header {
  position: relative;
  padding-left: var(--space-2xl);
}

.experience-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-gold), transparent);
}

.experience-header__dot {
  position: absolute;
  left: -7px;
  top: 20px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-gold);
  border: 3px solid var(--bg-primary);
  box-shadow: 0 0 0 3px rgba(242, 204, 143, 0.3);
}

.experience-header__year {
  font-family: var(--font-mono);
  color: var(--accent-gold);
  font-size: var(--fs-h4);
  margin-bottom: var(--space-xs);
}

/* Article footer */
.article-footer {
  margin-top: var(--space-4xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 767px) {
  .article-content figure {
    margin: var(--space-2xl) 0;
  }
}

/* ── Definition List as Timeline (进展日志) ──
   Markdown syntax:
     ## 进展日志
     2026.05.17
     : **标题**
       - 内容列表
   Hugo Goldmark outputs: <dl><dt>date</dt><dd>content</dd></dl>
   ──────────────────────────────────────────── */

.article-content dl {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: var(--space-xl) 0;
  position: relative;
}

/* Date label (left column in desktop) */
.article-content dt {
  font-family: var(--font-mono);
  color: var(--accent-sage);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  padding-top: 4px;
  margin-top: var(--space-xl);
  position: relative;
  padding-left: 20px;
}

/* Vertical timeline dot on the date */
.article-content dt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-sage);
  box-shadow: 0 0 0 3px rgba(163, 177, 138, 0.2);
}

/* Vertical timeline line connecting entries */
.article-content dt::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 22px;
  bottom: -100%;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
}

/* Hide line on last dt (via CSS — last-of-type) */
.article-content dt:last-of-type::after {
  display: none;
}

/* First entry has no top margin */
.article-content dt:first-of-type {
  margin-top: 0;
}

/* Content card (right column) */
.article-content dd {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  border-left: 3px solid var(--accent-sage);
  color: var(--text-dark);
  margin-left: 20px;
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

/* Override article-content's default light text for dark card */
.article-content dd p {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-dark);
}

.article-content dd p:last-child {
  margin-bottom: 0;
}

.article-content dd ul {
  margin-left: 1.2rem;
  margin-bottom: 0.5rem;
  padding-left: 0;
  font-size: 0.95rem;
}

.article-content dd li {
  margin-bottom: 0.25rem;
  list-style: disc;
  color: var(--text-dark);
}

/* Override the custom bullet pseudo-element from article-content */
.article-content dd li::before {
  display: none;
  content: none;
}

/* ── Project Goal (from front matter) ── */
.project-goal {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-xl);
  color: var(--text-light);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.project-goal__label {
  font-size: var(--fs-xs);
  color: var(--text-light-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-mono);
  margin-bottom: var(--space-sm);
  display: block;
}

@media (max-width: 767px) {
  .article-content dt { padding-left: 16px; }
  .article-content dd { margin-left: 16px; }
}