/* A single post — the baked <slug>/ page and the client-rendered fallback both
   use these rules, which is why this sheet is loaded by index.html too. */

.back {
  font-size: 12.5px;
  color: var(--dim);
  margin-bottom: 24px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.back:hover { color: var(--accent); }

.crumb {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  font-weight: 600;
}

h1.title {
  font: 800 clamp(30px, 6vw, 50px)/1.05 var(--sans);
  letter-spacing: -.022em;
  margin: 10px 0 14px;
}

.pmeta {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--faint);
  text-transform: uppercase;
  margin-bottom: 26px;
}

.pmeta .by { color: var(--accent); }

/* ---- hero ---- */

.feat {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  margin: 0 0 30px;
  display: block;
}

/* A post with no hero bakes an <img> with an empty src; never show that. */
.feat[src=""], .feat:not([src]) { display: none; }

video.feat { max-height: 560px; object-fit: cover; background: #000; }

.feat-wrap { position: relative; margin: 0 0 30px; }
.feat-wrap .feat { margin: 0; }

.feat-mute {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(0, 0, 0, .55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feat-mute svg { width: 18px; height: 18px; display: block; }
.feat-mute:hover { background: rgba(0, 0, 0, .78); }

/* ---- the article ----------------------------------------------------------
   The body is capped narrower than the page. The list wants the full 960px for
   its feature card, but running prose that wide is genuinely harder to read —
   the eye loses the start of the next line — so the column stays near 75
   characters while the hero and the rest of the page stay wide. */

.article {
  font: 400 18px/1.75 var(--sans);
  color: var(--fg);
  max-width: 75ch;
}

/* The plain-text body baked into the page, before the rich one arrives. */
.article.fallback { white-space: pre-wrap; }

.article h2 {
  font: 700 clamp(24px, 3.4vw, 30px)/1.25 var(--sans);
  letter-spacing: -.01em;
  margin: 44px 0 12px;
}

.article h3 { font: 700 22px/1.3 var(--sans); margin: 34px 0 10px; }
.article p { margin: 0 0 20px; }
.article a { text-decoration: underline; text-underline-offset: 2px; }
.article ul, .article ol { padding-left: 24px; margin: 0 0 20px; }
.article li { margin: 7px 0; }

.article img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 26px 0;
  border: 1px solid var(--line);
  display: block;
}

.article blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--accent);
  color: var(--dim);
  font-style: italic;
}

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

.article code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}

.article pre {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 17px;
  overflow-x: auto;
  margin: 20px 0;
}

.article pre code { background: none; border: 0; padding: 0; }
.article hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

.pfoot {
  margin-top: 46px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--faint);
  font-size: 12px;
}

.pfoot a { color: var(--faint); }
.pfoot a:hover { color: var(--fg); }

@media (max-width: 560px) {
  .article { font-size: 17px; }
}