/* Essay-specific styles, layered on TauZeroCSS-Base00.css.
 *
 * The site masthead and per-author wash come from the base sheet.
 * This sheet styles the prose body only, targeting a Modern Library
 * 1930s-40s aesthetic: all EB Garamond, no sans-serif vocabulary in
 * the reading surface, justified body with hyphens, small-caps
 * section headings, traditional drop-cap on the opening paragraph.
 */

/* The article container — subtle cream gesture at book paper, not
 * a heavy ivory. Sits below the existing site masthead. */
.essay-body {
  max-width: 38rem;            /* ~65 characters at 17px Garamond */
  margin: 2.5rem auto;
  padding: 2.5rem 2rem;
  background-color: #fbf8f1;   /* subtle cream — barely off white */
  border: 1px solid #ece5d3;
  font-family: var(--font-prose);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: #1a1a1a;
}

.essay-title {
  font-family: var(--font-prose);
  font-variant-caps: small-caps;
  font-weight: normal;
  letter-spacing: 0.04em;
  font-size: 1.9rem;
  line-height: 1.2;
  text-align: center;
  margin: 0 0 0.6em 0;
}

.essay-subtitle {
  font-family: var(--font-prose);
  font-style: italic;
  font-weight: normal;
  font-size: 1.1rem;
  text-align: center;
  color: #2a2a2a;
  margin: 0 0 2em 0;
}

.essay-byline {
  font-family: var(--font-prose);
  font-size: 0.95rem;
  text-align: center;
  color: #2a2a2a;
  margin: 0 0 2.4em 0;
  line-height: 1.5;
}

.essay-byline .essay-place {
  font-style: italic;
}

.essay-abstract {
  font-style: italic;
  border-top: 1px solid #d4cdb6;
  border-bottom: 1px solid #d4cdb6;
  padding: 1em 1.4em;
  margin: 0 0 2.4em 0;
  color: #2a2a2a;
  text-align: justify;
  hyphens: auto;
}

.essay-prose {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Body paragraphs: uniform first-line indent, no vertical separation.
 * Modern Library / period-essay convention — the visual rhythm of the
 * page is set by the indent alone, not by paragraph spacing. */
.essay-prose p {
  margin: 0;
  text-indent: 1.4em;
}

/* The opening paragraph carries the drop-cap and must start flush so
 * the lettrine aligns to the body left margin. */
.essay-prose > p:first-of-type {
  text-indent: 0;
}

/* H2 (chapter-level): centered small caps, period-correct ML head. */
.essay-prose h2 {
  font-family: var(--font-prose);
  font-variant-caps: small-caps;
  font-weight: normal;
  letter-spacing: 0.05em;
  font-size: 1.05rem;
  text-align: center;
  margin: 2.4em 0 1em 0;
  line-height: 1.3;
}

/* Run-in section heads. The Lua filter rewrites `### Heading` plus
 * the next paragraph into a single paragraph that opens with a small-
 * caps lead, wrapped in `<div class="section-runin">`. The Div carries
 * vertical break above the run-in unit; the paragraph inside reads
 * flush left so the small-caps phrase owns the line start. */
.essay-prose .section-runin {
  margin-top: 1.4em;
}

.essay-prose .section-runin > p {
  text-indent: 0;
}

/* Pandoc emits SmallCaps as <span class="smallcaps">. */
.essay-prose .smallcaps {
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
  font-weight: 400;
}

.essay-prose blockquote {
  border-left: 2px solid #d4cdb6;
  margin: 1.4em 0;
  padding: 0.2em 0 0.2em 1.4em;
  color: #2a2a2a;
  font-style: italic;
}

.essay-prose blockquote p {
  text-indent: 0;
}

.essay-prose ul,
.essay-prose ol {
  margin: 0.8em 0 0.8em 1.4em;
  padding: 0;
  text-align: left;            /* lists don't justify well */
}

.essay-prose ul li,
.essay-prose ol li {
  margin: 0.3em 0;
}

.essay-prose code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.05em 0.3em;
  border-radius: 2px;
}

/* Pandoc's Underline AST element renders as <span class="underline">
 * in HTML5. Typora's underline-button output (`<u>text</u>`) is parsed
 * to the same AST node. Both surface routes converge here. */
.essay-prose .underline,
.essay-prose u {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Drop-cap: Modern Library 3-line, body face (Garamond), no sans.
 *
 * Implemented as a wrapper span (.essay-dropcap) emitted by the
 * dropcap.lua Pandoc filter on HTML output. We avoid ::first-letter
 * because Firefox sizes ::first-letter floats by the font's natural
 * line metrics (EB Garamond's typoAscender + typoDescender ≈ 1.31em,
 * usWinAscent + usWinDescent ≈ 1.44em), ignoring tight CSS line-height,
 * which inflates the float box past the intended 3 body lines. With an
 * explicit `height` on a wrapper span the float bounds are deterministic
 * cross-browser.
 *
 * Geometry: body is 17px × 1.6 line-height (27.2px per line). Three
 * body lines = 81.6px = 4.8rem. EB Garamond cap-height ratio is 0.65,
 * so font-size ≈ 66 / 0.65 ≈ 5.9em yields a cap whose top sits at
 * line-1 cap-top and whose baseline lands on line-3 baseline.
 */
.essay-prose .essay-dropcap {
  float: left;
  font-family: var(--font-prose);
  font-weight: normal;
  color: #1a1a1a;
  font-size: 5.9em;
  /* line-height tunes where the glyph baseline sits within the float.
   * EB Garamond's natural ascent is 1.007em, so with line-height: 1
   * the baseline lands ~101px down inside the float — past line-3
   * baseline (74px). Setting line-height ≈ 0.77 lifts the baseline
   * to (0.77 + 1.007 − 0.298) / 2 × font-size ≈ 74px from float top,
   * which is line-3 baseline; the cap top then lands at ≈ line-1 cap-top. */
  line-height: 0.77;
  height: 4.8rem;            /* float bounds = 3 body lines exactly */
  margin: 0 0.06em 0 0;
  padding: 0;
  overflow: visible;         /* let glyph extend beyond box without clipping */
}

/* When the first paragraph is a short lede (e.g. one line), the
 * drop-cap's float would otherwise let the next paragraph flow up
 * alongside it. Clear the float so the body proper starts cleanly
 * below the drop-cap's footprint. No-op when the first paragraph
 * is full-length. */
.essay-prose > p:first-of-type + p {
  clear: left;
}

/* Figures: Pandoc emits <figure><img/><figcaption/></figure> for
 * paragraphs containing only an image with non-empty alt text.
 * Center the figure, constrain to body width, set caption smaller
 * with a Modern Library cadence. */
.essay-prose figure {
  margin: 2em auto;
  text-align: center;
}
.essay-prose figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 0.6em;
}
.essay-prose figure figcaption {
  font-size: 0.92rem;
  line-height: 1.4;
  text-align: left;
  hyphens: auto;
  padding: 0 0.5em;
}

/* Pandoc HTML footnote rendering — end of document. */
.essay-prose .footnotes {
  margin-top: 3em;
  padding-top: 1.2em;
  border-top: 1px solid #d4cdb6;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: left;            /* footnotes don't justify; URLs would break ugly */
}

.essay-prose .footnotes ol {
  padding-left: 1.6em;
  margin: 0;
}

.essay-prose .footnotes li {
  margin: 0.6em 0;
}

.essay-prose .footnotes li p {
  margin: 0 0 0.4em 0;
  text-indent: 0;
}

.essay-prose sup {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
}

.essay-prose sup a,
.essay-prose .footnotes a {
  text-decoration: none;
  color: var(--link-color);
}

.essay-prose sup a:hover,
.essay-prose .footnotes a:hover {
  text-decoration: underline;
}

/* Colophon — origin note when an essay was originally published elsewhere
 * (FB or otherwise). Sits inside the article box, just below the prose,
 * above the closing footer. Italic Garamond, modest size, classical leader. */
.essay-colophon {
  margin: 2.4em 0 0 0;
  padding: 1em 0 0 0;
  border-top: 1px solid #d4cdb6;
  font-style: italic;
  font-size: 0.9rem;
  color: #4a4a4a;
  text-align: center;
}

.essay-colophon p {
  margin: 0;
}

/* Footer — discreet, Garamond, classical — under the cream paper. */
.essay-footer {
  max-width: 38rem;
  margin: 1.5rem auto 3rem auto;
  padding: 0 2rem;
  font-family: var(--font-prose);
  font-style: italic;
  font-size: 0.95rem;
  text-align: center;
  color: #4a4a4a;
}

.essay-footer a {
  color: var(--link-color);
}

/* Essays index landing — same cream paper conceit. */
.essays-index {
  max-width: 38rem;
  margin: 2.5rem auto;
  padding: 2.5rem 2rem;
  background-color: #fbf8f1;
  border: 1px solid #ece5d3;
  font-family: var(--font-prose);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: #1a1a1a;
}

.essays-index h1 {
  font-variant-caps: small-caps;
  font-weight: normal;
  letter-spacing: 0.04em;
  font-size: 1.7rem;
  text-align: center;
  margin: 0 0 1em 0;
}

.essays-index .essays-intro {
  text-align: justify;
  hyphens: auto;
  margin: 0 0 2em 0;
  font-size: 0.95rem;
  color: #2a2a2a;
}

.essays-index .essay-entry {
  margin: 0 0 1.8em 0;
  padding-bottom: 1.4em;
  border-bottom: 1px solid #ece5d3;
}

.essays-index .essay-entry.start-here {
  background-color: #f4ecd5;
  padding: 1.2em 1.4em 0.4em 1.4em;
  border-radius: 2px;
  border-bottom: none;
  margin-bottom: 2.2em;
}

.essays-index .essay-entry.start-here .start-here-label {
  margin: 0 0 0.4em 0;
  font-variant-caps: small-caps;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  color: #4a4a4a;
}

.essays-index .essay-entry:last-child {
  border-bottom: none;
}

.essays-index .essay-entry h2 {
  font-style: italic;
  font-weight: normal;
  font-size: 1.2rem;
  margin: 0 0 0.3em 0;
}

.essays-index .essay-entry .meta {
  font-size: 0.9rem;
  color: #4a4a4a;
  margin: 0 0 0.5em 0;
  font-style: italic;
}

.essays-index .essay-entry .precis {
  margin: 0.5em 0 0.7em 0;
  text-align: justify;
  hyphens: auto;
}

.essays-index .essay-entry .links {
  font-size: 0.95rem;
}

.essays-index .essay-entry .links a {
  color: var(--link-color);
}

.essays-index .essay-entry .links .sep {
  color: #4a4a4a;
  margin: 0 0.4em;
}

@media (max-width: 640px) {
  .essay-body,
  .essays-index {
    margin: 1rem auto;
    padding: 1.5rem 1.2rem;
  }
  .essay-title {
    font-size: 1.4rem;
  }
}