/* Blog section styles. Hand-written; scripts/build-blog.py never touches
   this file.

   The redline personality lives in the title marks, post navigation,
   blockquotes, and hairlines between index entries. Everything else leans on
   styles.css (.container, .prose) so the blog reads as the same site.

   Bump BLOG_CSS_VERSION in scripts/build-blog.py when this changes, then
   rerun the builder to bust the cache. */

/* ---------- Post ---------- */

.blog-post {
  padding: 9rem 0 4rem;
}

.blog-post-shell {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 740px);
  justify-content: center;
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
}

.blog-post-content {
  min-width: 0;
}

.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.5rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(var(--pen-rgb), 0.4);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.blog-back span {
  color: var(--pen);
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.18s ease;
}

.blog-back:hover,
.blog-back:focus-visible {
  color: var(--accent-hover);
  border-color: var(--pen);
  background: rgba(var(--pen-rgb), 0.045);
}

.blog-back:hover span,
.blog-back:focus-visible span {
  transform: translateX(-2px);
}

/* ---------- Post navigation ---------- */

.blog-sidebar {
  position: sticky;
  top: 6.25rem;
  width: 13rem;
  transition: width 0.2s ease;
}

.blog-sidebar:not([open]) {
  width: 8.5rem;
}

.blog-sidebar-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0 0.65rem;
  border-bottom: 1px solid rgba(var(--pen-rgb), 0.3);
  color: var(--text);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.blog-sidebar-summary::-webkit-details-marker {
  display: none;
}

.blog-sidebar-summary:hover,
.blog-sidebar-summary:focus-visible {
  color: var(--accent);
}

.blog-sidebar-summary-action {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.35rem;
  color: var(--text-muted);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.blog-sidebar-action-closed {
  display: none;
}

.blog-sidebar-chevron {
  display: inline-block;
  width: 0.7rem;
  color: var(--pen);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1;
  text-align: center;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

.blog-sidebar:not([open]) .blog-sidebar-summary {
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(var(--pen-rgb), 0.4);
  border-radius: 4px;
}

.blog-sidebar:not([open]) .blog-sidebar-action-open {
  display: none;
}

.blog-sidebar:not([open]) .blog-sidebar-action-closed {
  display: inline;
}

.blog-sidebar:not([open]) .blog-sidebar-chevron {
  transform: rotate(180deg);
}

.blog-sidebar-nav {
  padding-top: 0.8rem;
}

.blog-sidebar-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-sidebar-item + .blog-sidebar-item {
  border-top: 1px solid var(--border);
}

.blog-sidebar-link {
  display: block;
  padding: 0.75rem 0;
  color: var(--text-muted);
  font-family: var(--serif);
  font-size: 0.88rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.18s ease, padding-left 0.18s ease;
}

.blog-sidebar-link:hover,
.blog-sidebar-link:focus-visible {
  padding-left: 0.35rem;
  color: var(--accent);
}

.blog-sidebar-link[aria-current="page"] {
  position: relative;
  padding-left: 0.65rem;
  color: var(--text);
  font-weight: 600;
}

.blog-sidebar-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  bottom: 0.9rem;
  left: 0;
  border-left: 2px dotted var(--pen);
}

.blog-title {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 1rem;
}

/* The pen mark: a short red rule under the title, the same weight as the
   editor's underline. */
.blog-title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 1rem;
  background: var(--pen);
}

.blog-date {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.blog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.blog-share {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  padding: 0.25rem 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  transition: color 0.18s ease;
}

.blog-share svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

.blog-share:hover,
.blog-share:focus-visible {
  color: var(--accent);
}

.blog-hero {
  margin: 0 0 2.5rem;
}

.blog-hero img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(var(--pen-rgb), 0.12);
}

/* ---------- Post body ---------- */

.blog-body {
  font-size: 1.05rem;
}

.blog-body h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--text);
  margin: 2.75rem 0 1rem;
}

.blog-body h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 2rem 0 0.75rem;
}

.blog-body ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.25rem;
}

.blog-body ul li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.blog-body ul li::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.72em;
  width: 0.4em;
  height: 2px;
  background: var(--pen-muted);
}

/* A pulled quote is someone else's words. The pen rule marks it as such. */
.blog-body blockquote {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 3px solid var(--pen);
}

.blog-body blockquote p {
  color: var(--text);
  font-style: italic;
  margin-bottom: 0;
}

.blog-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--bg-alt);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

.blog-body pre {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

.blog-body pre code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.blog-table-wrap {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.blog-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}

.blog-table-wrap th,
.blog-table-wrap td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

.blog-table-wrap th {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Discord call to action ---------- */

.blog-cta {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.blog-cta h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--text);
  margin: 0 0 0.75rem;
}

.blog-cta p {
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.blog-cta-link {
  display: inline-block;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 0.2s;
}

.blog-cta-link:hover {
  color: var(--accent-hover);
}

/* ---------- Index ---------- */

.blog-index-shell {
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: 0 1rem;
}

.blog-index {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 5rem;
}

/* A table of contents, not a feed: hairline rules, no cards. */
.blog-index-item {
  padding: 1.75rem 0;
  border-top: 1px solid rgba(var(--pen-rgb), 0.18);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(10.5rem, 20vw, 14rem);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.blog-index-item:last-child {
  border-bottom: 1px solid rgba(var(--pen-rgb), 0.18);
}

.blog-index-date {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.blog-index-title {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.blog-index-title a {
  position: relative;
  display: inline;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}

.blog-index-title a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.2em;
  left: 0;
  height: 3px;
  background-image: radial-gradient(circle, var(--pen) 1.2px, transparent 1.35px);
  background-position: left center;
  background-size: 7px 3px;
  background-repeat: repeat-x;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.blog-index-title a:hover {
  color: var(--accent);
}

.blog-index-title a:hover::after,
.blog-index-title a:focus-visible::after {
  transform: scaleX(1);
}

.blog-index-desc {
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

.blog-index-thumb {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(var(--pen-rgb), 0.12);
  background: var(--bg-alt);
}

.blog-index-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.blog-index-thumb:hover img,
.blog-index-thumb:focus-visible img {
  transform: scale(1.015);
}

@media (max-width: 960px) {
  .blog-post-shell {
    grid-template-columns: minmax(0, 740px);
    gap: 1.5rem;
  }

  .blog-sidebar,
  .blog-sidebar:not([open]) {
    position: static;
    width: 100%;
  }

  .blog-sidebar:not([open]) .blog-sidebar-summary {
    padding: 0 0 0.65rem;
    border: 0;
    border-bottom: 1px solid rgba(var(--pen-rgb), 0.3);
    border-radius: 0;
  }
}

@media (max-width: 640px) {
  .blog-post {
    padding-top: 7rem;
  }

  .blog-title {
    font-size: 1.9rem;
  }

  .blog-index-item {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-back,
  .blog-back span,
  .blog-sidebar,
  .blog-sidebar-chevron,
  .blog-sidebar-link,
  .blog-index-title a::after,
  .blog-index-thumb img,
  .blog-share {
    transition: none;
  }
}