/* ============================================================
   FRONTMATTER MARKS — monogram + epistemic figure
   See MARKS.md for the full specification.

   The header is a three-column grid sitting above the
   cursive-L `content-divider`. Either or both mark columns
   may be absent; the grid collapses cleanly because empty
   columns size to zero (the conditional template guards
   suppress the slot div entirely when its SVG is empty).
   ============================================================ */

/* Three-column grid:
     [ monogram ]   [ title block — 1fr ]   [ epistemic figure ]
   The 1fr column absorbs all extra width. Mark slots are
   sized to their content via grid auto-placement. When the
   template guard suppresses one or both slot divs, the column
   simply does not exist for layout purposes. */
.essay-frontmatter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: clamp(0.75rem, 2vw, 1.75rem);
    row-gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

/* Reading variant (poetry / fiction) and blog variant share the
   same grid; declared explicitly so future tweaks can diverge. */
.essay-frontmatter--reading,
.essay-frontmatter--blog {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

/* Title block stays in the centre; never shrinks below 0. */
.frontmatter-title {
    min-width: 0;
}

/* Centre the title and metadata under the H1 — matches the
   visual rhythm of the reference mockup, where the byline,
   abstract, and compact strip sit in a stacked column. */
.frontmatter-title > .page-title {
    margin-bottom: 0.25rem;
}

/* Subtitle: a short secondary line, lighter than the H1, never
   competing with it. Kept restrained so existing essays without
   a subtitle render unchanged. */
.essay-subtitle {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--text-muted);
    margin: 0 0 0.75rem 0;
    line-height: 1.35;
}

/* Mark slot: a column wrapper that hosts the monogram or the
   epistemic figure. The slot itself is a plain block; the SVG
   inside controls its dimensions. line-height: 0 suppresses the
   baseline descender gap that would otherwise add a few pixels
   below the figure. */
.frontmatter-mark-slot {
    line-height: 0;
}

/* The mark itself: a <figure> wrapping the inlined SVG. Two
   inherited styles need to be overridden:
     – `figure { margin: 2rem 0; max-width: 100% }` in images.css
       (otherwise vertical margin pushes the mark off-grid).
     – `#markdownBody figure { background, padding, border,
       border-radius, box-shadow }` in typography.css (the
       card-style chrome that wraps inline body figures with
       a subtle paper-edge effect — not what we want for a
       frontispiece glyph that should sit seamlessly on the
       page background).
   The `#markdownBody` prefix on the second rule has higher
   specificity than a plain `.frontmatter-mark`, so we match
   that prefix here too. */
.frontmatter-mark,
#markdownBody .frontmatter-mark {
    margin: 0;
    padding: 0;
    width: 170px;
    height: 170px;
    max-width: none;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--text);
}

/* SVG fills its parent figure exactly. !important defeats the
   global `img, video, svg { max-width: 100%; height: auto }` in
   base.css for our specific case (which would otherwise leave the
   figure as a tall, narrow strip when the column is grid-auto'd). */
.frontmatter-mark svg {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
}

/* Epistemic figure inside an anchor: the anchor inherits color
   from the slot (so currentColor in the SVG resolves to --text)
   and stays inline-block so it doesn't pick up underline / link
   chrome from the surrounding prose styles. */
.frontmatter-mark-slot--right > a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    line-height: 0;
}

/* ============================================================
   COMPACT-STRIP CHIP ADDITIONS
   ============================================================ */

/* Inline trend arrow (↑ ↓ →) appended to the confidence percentage.
   No leading separator — sits flush against the value it modifies. */
.ep-trend {
    display: inline-block;
    margin-left: 0.15em;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    color: var(--text-muted);
    vertical-align: 0.05em;
}
.ep-row .ep-trend::before { content: none; }

/* Peer-status chip — same typography as .ep-status, distinct
   data-term so future revisions can style it differently. */
.ep-peer-status {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.ep-peer-status::before {
    content: "·\00a0";
    color: var(--border);
}

/* Retracted: strikethrough across the chip text — the spec's
   §4.1 visual marker for a retracted piece. */
.ep-peer-status--retracted {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Proved-confidence variant: same row typography, italic to
   differentiate from a numeric XX% confidence chip. */
.ep-row--proved {
    font-style: italic;
}

/* ============================================================
   MOBILE / NARROW SCREENS
   Stack the marks above and below the title at the same
   breakpoint where the TOC sidebar collapses (900px), and
   shrink the SVGs at the mobile breakpoint (680px) per
   MARKS.md §3.3 (170px desktop → 130px mobile).
   ============================================================ */

@media (max-width: 900px) {
    .essay-frontmatter {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }
    .frontmatter-mark-slot--left  { order: 0; }
    .frontmatter-title            { order: 1; }
    .frontmatter-mark-slot--right { order: 2; }
    .frontmatter-title { text-align: center; }
}

@media (max-width: 680px) {
    .frontmatter-mark {
        width: 130px;
        height: 130px;
    }
}

/* ============================================================
   FOCUS MODE
   The Display panel's focus mode (toggled via the
   data-focus-mode attribute on <html>, see settings.js)
   suppresses marks alongside the TOC and other chrome.
   ============================================================ */
[data-focus-mode] .frontmatter-mark,
[data-focus-mode] .frontmatter-mark-slot {
    display: none;
}
[data-focus-mode] .essay-frontmatter {
    grid-template-columns: minmax(0, 1fr);
}