/* Site-specific additions layered on top of the Bear theme (styles.css).
   Linked after it, so equal-specificity rules here win. */

.document-wrapper ul.writing-list {
    list-style: none;
    padding-inline-start: 0;
}
.document-wrapper .writing-list li {
    display: flex;
    align-items: center;
}

/* Shared site header (header.html): name left, nav links right. */
.document-wrapper .site-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-block-start: 1em;
    margin-block-end: 2em;
}
.document-wrapper .site-header .site-name {
    font-family: "AvenirNext-Medium";
    /* A link, but styled as the site name; red only on hover. */
    color: var(--document-text-color);
}
.document-wrapper .site-header .site-name:hover {
    color: var(--document-link-color);
}
.document-wrapper .site-nav a {
    margin-inline-start: 1.25em;
}

.document-wrapper h2 {
    /* Bear's default is 1.6em, too close to h3's 1.27em */
    font-size: 1.75em;
}

/* Breathing room after the last content when the page scrolls.
   The wrapper is border-box with min-height: 100%, so on short
   pages this padding sits inside the viewport-height box and
   doesn't add scroll. */
/* The end-of-page mark below is pinned to the wrapper's bottom
   edge; the wrapper must be at least viewport-height (Bear's
   min-height: 100% resolves to nothing since body has no set
   height) and reserve room for the mark on scrolling pages. */
body {
    /* Default 8px body margin would make the 100dvh wrapper
       overflow the viewport on short pages. */
    margin: 0;
}
.document-wrapper {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    padding-block-end: 7em;
    /* Keep children's top margins (site-header's 1em) from
       collapsing out of the wrapper and adding to the 100dvh. */
    display: flow-root;
}

/* End-of-page mark (main.html): rotated floral heart bullet,
   acting as a footer — bottom of the screen on short pages,
   after the content on scrolling ones, with a sliver of
   whitespace below. Needs display:block to escape Bear's
   `all: unset` reset. */
.document-wrapper .page-end {
    display: block;
    position: absolute;
    inset-inline: 0;
    bottom: 0.5em; /* own-font-size em, ≈1.25em at page scale */
    text-align: center;
    font-size: 2.5em;
    line-height: 1;
    color: var(--document-list-marker-color);
    user-select: none;
}

/* Simple vertical rhythm: 1em above headings, 0.25em below (relative
   to each heading's own font size, so bigger headings get bigger
   gaps), 1em between paragraphs. Margins, not padding, so adjacent
   gaps collapse instead of stacking. */
.document-wrapper h1,
.document-wrapper h2,
.document-wrapper h3,
.document-wrapper h4,
.document-wrapper h5,
.document-wrapper h6 {
    padding-block-start: 0;
    padding-block-end: 0;
    margin-block-start: 1em;
    margin-block-end: 0.25em;
}
.document-wrapper p {
    margin-block-end: 0.75em;
}

/* In link lists every line is a link, so the full-strength
   accent red is just noise; use a desaturated red and save
   the full red for hover. Prose links stay full red. */
.document-wrapper .writing-list a,
.document-wrapper .bookshelf a {
    color: #b4595c;
    text-decoration: underline;
    text-decoration-color: #e3c6c7;
}
.document-wrapper .writing-list a:hover,
.document-wrapper .bookshelf a:hover {
    color: var(--document-link-color);
    text-decoration-color: var(--document-link-color);
}

/* Cached tweet pages (tweet.html): muted date under the title,
   bookmark-count + view-on-X row at the bottom. */
.document-wrapper .tweet-date {
    color: var(--document-text-secondary-color);
}
.document-wrapper .tweet-meta {
    display: flex;
    align-items: center;
}
.document-wrapper .external-link-icon {
    width: 1.05em;
    height: 1.05em;
    margin-left: 0.3em;
    vertical-align: -0.15em;
}

/* span.bookmark-count must out-rank Bear's `.document-wrapper
   span { all: unset }` reset, hence the long selector. */
.document-wrapper .writing-list span.bookmark-count,
.document-wrapper .tweet-meta span.bookmark-count {
    flex: 0 0 4em;
    display: inline-flex;
    align-items: center;
    margin-right: 0.4em;
    /* Match X's engagement-count style */
    color: #536471;
    font-family: "TwitterChirp", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.document-wrapper .bookmark-icon {
    width: 16px;
    height: 16px;
    margin-right: 3px;
    flex-shrink: 0;
}