body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Home / listing ---- */
.hero { padding: 3.5rem 0 2rem; }
.post-card { transition: transform .12s ease, box-shadow .12s ease; }
.post-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08); }
.tag-badge { text-decoration: none; }

/* Latest-posts carousel: indicators flow below the slide instead of overlapping it */
#latestCarousel .carousel-indicators {
  position: static;
  margin: 1.25rem 0 0;
}
#latestCarousel .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
}

/* ---- Footer social links ---- */
.social-link {
  color: var(--bs-secondary-color);
  display: inline-flex;
  transition: color .12s ease, transform .12s ease;
}
.social-link:hover,
.social-link:focus-visible { color: var(--bs-primary); transform: translateY(-1px); }
.social-link svg { width: 20px; height: 20px; display: block; }

/* ---- 404 / error page ---- */
.errorpage { padding: 2.5rem 0 1rem; }
.errorpage__code {
  margin: 0 0 .25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  font-size: clamp(5rem, 22vw, 11rem);
  background: linear-gradient(135deg, var(--bs-primary), #6f42c1 55%, #d63384);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.errorpage__lead { max-width: 46ch; }
.errorpage__search { max-width: 440px; }
.errorpage__links { max-width: 34rem; }
@media (prefers-reduced-motion: no-preference) {
  .errorpage__code { animation: errorpop .45s ease both; }
}
@keyframes errorpop {
  from { opacity: 0; transform: translateY(.4rem) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---- Article typography ---- */
/* Full container width so post / about / contact match the home & blog pages. */
.article { max-width: 100%; }
.article-body { font-size: 1.075rem; line-height: 1.75; overflow-wrap: anywhere; }
.article-body h1 { margin-top: 2.5rem; font-size: 1.85rem; font-weight: 700; }
.article-body h2 { margin-top: 2.25rem; font-size: 1.5rem; font-weight: 600; }
.article-body h3 { margin-top: 1.75rem; font-size: 1.22rem; font-weight: 600; }
.article-body h4 { margin-top: 1.5rem; font-size: 1.05rem; font-weight: 600; }
.article-body p, .article-body ul, .article-body ol, .article-body blockquote { margin-bottom: 1.15rem; }
.article-body a { color: var(--bs-primary); }

/* Nested list markers mirror the editor: 1. / a. / i. and disc / circle / square */
.article-body ol { list-style-type: decimal; }
.article-body ol ol { list-style-type: lower-alpha; }
.article-body ol ol ol { list-style-type: lower-roman; }
.article-body ol ol ol ol { list-style-type: decimal; }
.article-body ul { list-style-type: disc; }
.article-body ul ul { list-style-type: circle; }
.article-body ul ul ul { list-style-type: square; }
.article-body li > ul, .article-body li > ol { margin-bottom: 0; margin-top: .35rem; }
.article-body .ql-align-center { text-align: center; }
.article-body .ql-align-right { text-align: right; }
.article-body .ql-align-justify { text-align: justify; }
.article-body .ql-indent-1 { padding-left: 3em; }
.article-body .ql-indent-2 { padding-left: 6em; }
.article-body .ql-indent-3 { padding-left: 9em; }

.article-body pre {
  background: #0d1117;
  color: #e6edf3;
  padding: 1rem 1.15rem;
  border-radius: 10px;
  overflow-x: auto;
  font-size: .9rem;
  line-height: 1.6;
}
.article-body pre code { background: transparent; padding: 0; color: inherit; }
.article-body .ql-code-block-container {
  background: #0d1117;
  color: #e6edf3;
  padding: 1rem 1.15rem;
  border-radius: 10px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
  line-height: 1.6;
  margin-bottom: 1.15rem;
  white-space: pre;
}
.article-body :not(pre) > code {
  background: rgba(135, 131, 120, .17);
  color: #b5314f;
  padding: .15em .4em;
  border-radius: 6px;
  font-size: .9em;
}
.article-body img { max-width: 100%; border-radius: 10px; margin: 1.25rem 0; }
.article-body blockquote {
  border-left: 4px solid var(--bs-primary);
  padding: .25rem 0 .25rem 1rem;
  color: var(--bs-secondary-color);
}
.article-body hr { margin: 2rem 0; }

/* ---- About page ---- */
.about-photo {
  flex: 0 0 auto;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  position: relative;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-photo--empty::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--bs-secondary-color);
}

.journey-figure { margin: 1.25rem 0 0; overflow-x: auto; }
.journey-figure svg {
  display: block;
  width: 100%;
  min-width: 560px;
  max-width: 760px;
  height: auto;
  margin-inline: auto;
}
.journey-path {
  fill: none;
  stroke: var(--bs-primary);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 0.1 11;
  opacity: .55;
}
.journey-tip { fill: var(--bs-primary); }
.journey-connector { stroke: var(--bs-border-color); stroke-width: 1.5; }
.journey-node { fill: var(--bs-body-bg); stroke: var(--bs-primary); stroke-width: 2.5; }
.journey-node.is-current { fill: var(--bs-primary); }
.journey-flag {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.journey-year {
  fill: var(--bs-emphasis-color);
  font-weight: 700;
  font-size: 15px;
}
.journey-co { fill: var(--bs-secondary-color); font-size: 13.5px; }
.journey-note-sm { fill: var(--bs-secondary-color); font-size: 11px; font-style: italic; }

/* ---- Comments ---- */
.comment-list .comment:last-child { border-bottom: 0; }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }

/* ---- Admin ---- */
.admin-shell { max-width: 900px; }
textarea.md-editor { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; line-height: 1.6; }
.md-preview { border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 1rem; min-height: 200px; background: var(--bs-body-bg); }

/* Quill rich-text editor */
#editor .ql-editor { min-height: 340px; font-size: 1rem; line-height: 1.7; }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--bs-border-color); }
.ql-toolbar.ql-snow { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.ql-container.ql-snow { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }