/* Post content. Loaded by the public site AND by the editor's writing surface,
   so what you see while writing is what gets published.
   The parent of .post-body must set `container-type: inline-size` (wide images
   use it to break out of the text column). */

.post-body {
  max-width: 44rem;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 1.3rem;
  line-height: 1.62;
  color: var(--text);
  overflow-wrap: break-word;
}

.post-body > * { margin: 0 0 1.2em; }
.post-body > *:last-child { margin-bottom: 0; }

.post-body h2, .post-body h3, .post-body h4 {
  font-family: var(--font-heading); font-weight: 400; letter-spacing: 0.04em; line-height: 1.18; text-wrap: balance;
  margin: 1.9em 0 0.5em;
}
.post-body h2 { font-size: 1.65em; }
.post-body h3 { font-size: 1.25em; color: #b9bfc8; }
.post-body h4 { font-family: var(--font-label); font-weight: 700; font-size: 0.85em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.post-body > :is(h2, h3, h4):first-child { margin-top: 0; }

.post-body a { color: var(--link); text-underline-offset: 0.2em; transition: color 0.2s, text-shadow 0.2s; }
.post-body a:hover { color: var(--spark); text-shadow: 0 0 10px color-mix(in srgb, var(--spark) 50%, transparent); }
.post-body strong { font-weight: 700; color: #fff; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body li { margin-bottom: 0.35em; }
.post-body li > p { margin: 0; }
.post-body li::marker { color: var(--red-hot); }

.post-body blockquote {
  margin-left: 0; margin-right: 0; padding: 0.25em 0 0.25em 1.1em;
  border-left: 3px solid var(--red); font-style: italic; color: #b9bfc8;
}
.post-body blockquote p { margin: 0 0 0.75em; }
.post-body blockquote p:last-child { margin-bottom: 0; }

/* The forged-bar look for <hr> is shared with the site chrome; the editor has no site.css, so repeat it here. */
.post-body hr {
  position: relative; height: 6px; border: 0; border-radius: 1px; margin: 2.2em 0; overflow: visible;
  background: linear-gradient(90deg, transparent, #3d424b 12%, #6a717d 50%, #3d424b 88%, transparent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.post-body hr::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, var(--spark), var(--spark-deep));
  border: 1px solid #0c1512;
  box-shadow: 0 0 10px color-mix(in srgb, var(--spark) 55%, transparent);
}

.post-body code { font-family: var(--font-mono); font-size: 0.72em; background: var(--pit); border: 1px solid var(--line); border-radius: 2px; padding: 0.1em 0.35em; color: var(--spark); }
.post-body pre { background: var(--pit); border: 1px solid var(--line); border-left: 3px solid var(--link-deep); border-radius: 3px; padding: 1em 1.2em; overflow-x: auto; line-height: 1.5; }
.post-body pre code { background: none; border: 0; padding: 0; color: var(--text); }

/* Images: every image is one of a few fixed shapes (see shared/presets.ts). */
.post-body .post-img { margin-top: 2em; margin-bottom: 2em; }
.post-body .post-img img {
  display: block; width: 100%; height: auto; background: var(--pit);
  border: 1px solid var(--line); border-top-color: var(--line-hi); border-radius: 3px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
.post-body .post-img figcaption { margin-top: 0.7em; text-align: center; font: 500 0.95rem/1.4 var(--font-label); letter-spacing: 0.08em; color: var(--muted); }

.post-body .post-img--wide,
.post-body .post-img--banner,
.post-body .post-img--classic,
.post-body .post-img--free {
  width: min(60rem, 100cqw); max-width: none; position: relative; left: 50%; transform: translateX(-50%);
}
.post-body .post-img--classic { width: min(48rem, 100cqw); }
.post-body .post-img--square { width: min(32rem, 100%); margin-left: auto; margin-right: auto; }
.post-body .post-img--portrait { width: min(27rem, 100%); margin-left: auto; margin-right: auto; }

/* Text styling applied from the editor toolbar (ids are in shared/presets.ts). */
.post-body .f-display { font-family: var(--font-display); letter-spacing: 0.01em; }
.post-body .f-heading { font-family: var(--font-heading); letter-spacing: 0.04em; }
.post-body .f-sans { font-family: var(--font-label); font-weight: 500; letter-spacing: 0.08em; }
.post-body .f-mono { font-family: var(--font-mono); font-size: 0.75em; }

.post-body .sz-sm { font-size: 0.8em; }
.post-body .sz-lg { font-size: 1.3em; line-height: 1.35; }
.post-body .sz-xl { font-size: 1.9em; line-height: 1.2; }

.post-body .c-steel { color: #86a9cf; }
.post-body .c-verdigris { color: #4fd1a5; }
.post-body .c-red { color: #d8474c; }
.post-body .c-ember { color: #e8843f; }
.post-body .c-silver { color: #c9d0da; }
.post-body .c-bone { color: #e0d2ad; }
.post-body .c-muted { color: #8a919c; }

.post-body .fx-glow { text-shadow: 0 0 0.55em currentColor; }
.post-body .fx-sheen {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, #7f8794 0%, #f4f6fa 25%, #7f8794 50%, #f4f6fa 75%, #7f8794 100%);
  background-size: 200% 100%; animation: fx-sheen 6s linear infinite;
}
.post-body .fx-fire {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(to top, #b3261f 0%, #e8843f 50%, #f6d27a 100%);
}
.post-body .fx-quench {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(to top, #47648a 0%, #86a9cf 45%, #4fd1a5 100%);
}
.post-body .fx-engraved { font-family: var(--font-heading); font-size: 0.9em; letter-spacing: 0.2em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12), 0 -1px 0 rgba(0, 0, 0, 0.9); color: #8d949f; }
.post-body .fx-whisper { font-style: italic; letter-spacing: 0.05em; opacity: 0.6; }
.post-body .fx-shiver { display: inline-block; animation: fx-shiver 0.28s steps(2) infinite; }
.post-body .fx-mark { background: color-mix(in srgb, var(--spark) 22%, transparent); border-radius: 2px; padding: 0 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Hover notes: dotted underline on the text, and a bubble (drawn by /js/tips.js) with the note. */
.post-body [data-tip] {
  text-decoration: underline dotted; text-decoration-color: var(--link); text-decoration-thickness: 2px;
  text-underline-offset: 0.24em; cursor: help;
}
.post-body [data-tip]:hover, .post-body [data-tip]:focus-visible { text-decoration-color: var(--spark); }
.tip-bubble {
  position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none;
  width: max-content; max-width: min(21rem, calc(100vw - 16px));
  padding: 0.55rem 0.8rem 0.6rem;
  font: 400 1.05rem/1.4 var(--font-body); color: var(--text); text-align: left;
  background: #080707; border: 1px solid var(--line-hi); border-bottom: 2px solid var(--spark-deep); border-radius: 3px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
  /* Pops up with a small bounce. */
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(0.9); transform-origin: 50% 100%;
  transition: opacity 0.12s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s 0.12s;
}
.tip-bubble.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

@keyframes fx-sheen { to { background-position: -200% 0; } }
@keyframes fx-shiver {
  0% { transform: translate(0.02em, -0.02em) rotate(-0.6deg); }
  100% { transform: translate(-0.02em, 0.02em) rotate(0.6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .post-body .fx-sheen, .post-body .fx-shiver { animation: none; }
}