/* =============================================================================
   post.css — the reading experience (UI-004 / UI-001 / KD-5).
   A ~68ch column on a localized dark surface over the pinned contextual
   background; serif headings, sans body, themed Markdown.
   ========================================================================== */

.post {
  position: relative;
  z-index: var(--z-content);
  padding: 0 var(--space-m) var(--space-2xl);
}

.prose {
  width: min(var(--measure), 100%);
  margin: clamp(7rem, 22vh, 13rem) auto 0;
  /* Localized prose scrim — readability where the text sits; brilliant margins
     preserved (KD-5). */
  background: var(--surface-prose);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  padding: clamp(var(--space-l), 5vw, var(--space-2xl));
  box-shadow: 0 40px 120px -40px rgb(var(--c-shadow) / 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* --- Header -------------------------------------------------------------- */
.post__header {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--hairline);
}
.post__eyebrow {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.post__eyebrow a {
  color: var(--text-faint);
  text-decoration: none;
}
.post__eyebrow-logo {
  display: inline-block;
  height: clamp(1.9rem, 1.6rem + 1vw, 2.4rem);
  width: auto;
  filter: drop-shadow(0 0 5px rgb(var(--c-gold) / 0.3));
  transition: filter var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.post__eyebrow a:hover .post__eyebrow-logo,
.post__eyebrow a:focus-visible .post__eyebrow-logo {
  filter: drop-shadow(0 0 9px rgb(var(--c-gold) / 0.55));
  transform: translateY(-1px);
}
.post__title {
  margin-top: var(--space-s);
  font-size: var(--step-5);
  letter-spacing: -0.02em;
}
.post__date {
  display: inline-block;
  margin-top: var(--space-s);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-neon);
}

/* --- Body: themed Markdown ----------------------------------------------- */
.prose__body {
  font-size: var(--step-1);
  line-height: var(--leading-prose);
  color: var(--text);
}
.prose__body > * + * {
  margin-top: var(--space-m);
}
.prose__body h2 {
  margin-top: var(--space-xl);
  font-size: var(--step-3);
}
.prose__body h3 {
  margin-top: var(--space-l);
  font-size: var(--step-2);
}
.prose__body p {
  color: var(--text);
}
.prose__body a {
  color: var(--accent-gold);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
}
.prose__body a:hover {
  text-shadow: var(--glow-gold);
}
.prose__body strong {
  color: var(--text);
  font-weight: 700;
}
.prose__body em {
  font-style: italic;
}

.prose__body img {
  width: 100%;
  border-radius: var(--radius-m);
  box-shadow: 0 24px 60px -30px rgb(var(--c-shadow) / 0.9), var(--glow-gold);
}

.prose__body blockquote {
  margin-inline: 0;
  padding: var(--space-s) var(--space-m);
  border-left: 3px solid var(--accent-gold);
  background: rgb(var(--c-gold) / 0.06);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-2);
  color: var(--text);
}

.prose__body ul,
.prose__body ol {
  padding-left: 1.4em;
}
.prose__body :is(ul, ol) li + li {
  margin-top: var(--space-2xs);
}
.prose__body ul {
  list-style: none;
}
.prose__body ul li {
  position: relative;
}
.prose__body ul li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.72em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: var(--glow-gold);
}

.prose__body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: rgb(var(--c-navy) / 0.85);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-s);
  border: 1px solid var(--hairline);
}
.prose__body pre {
  background: rgb(var(--c-ink) / 0.92);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  overflow-x: auto;
  line-height: 1.55;
}
.prose__body pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.84em;
}

.prose__body hr {
  border: 0;
  height: 1px;
  margin: var(--space-xl) 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--hairline-strong),
    transparent
  );
}

/* --- Footer -------------------------------------------------------------- */
.post__footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--hairline);
}
.post__home {
  color: var(--accent-gold);
  text-decoration: none;
  font-size: var(--step-0);
}