/* ============================================================
   post.css — the journal: index and articles.

   Loaded after yuzutrace.css, which owns the shell and the tokens. The articles
   are not generated by build-i18n (it emits flat files only), so they are
   maintained as HTML in public/blog/. Every class here was checked as free in
   yuzutrace.css before being written.
   ============================================================ */

/* ---------- Article ---------- */

.post__meta {
    margin: -1.5rem 0 0;
    font-family: var(--mono); font-size: .64rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--bone-3);
}

.postbody { padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 3.75rem); }
.postbody .col { max-width: var(--column); }

/* Body prose is set in the near-black ink, not the grey.
   --bone-2 gives 7.53:1 and --bone gives 17.49:1 against this ground. Both
   clear the standard, but grey over nine hundred words reads as a draft; the
   grey belongs to captions and secondary lines, not to the article itself. */
.postbody p {
    margin: 0 0 1.4rem;
    font-size: 1.06rem; line-height: 1.75; color: var(--bone);
    max-width: 66ch;
}
.postbody p i { font-style: italic; color: var(--bone); }

/* An opening paragraph slightly larger than the rest, the way a printed
   article steps down from its standfirst into its body. */
.postbody p:first-child { font-size: 1.14rem; line-height: 1.7; }

.postbody h2 {
    margin: 3rem 0 1.15rem;
    padding-top: 1.6rem; border-top: 1px solid var(--hair);
    font-family: var(--display); font-weight: 400;
    font-size: clamp(1.45rem, 2.9vw, 1.9rem); line-height: 1.2; color: var(--bone);
}
.postbody h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Index ---------- */

.postlist { display: grid; gap: 0; margin-top: 1.5rem; }

/* Numbered like everything else on this site: the findings in a report, the
   steps in the method, the questions in a form. A list of articles with no
   spine was the one place that looked like a different website. */
.postcard {
    position: relative;
    display: grid; gap: .5rem;
    padding: 2rem 0 2.1rem;
    border-top: 1px solid var(--hair);
    text-decoration: none; color: inherit;
}
.postcard:last-child { border-bottom: 1px solid var(--hair); }

@media (min-width: 760px) {
    .postcard {
        grid-template-columns: 3.25rem 1fr;
        column-gap: 0;
        align-items: start;
    }
    .postcard > .pin { grid-row: 1 / span 4; align-self: start; margin-top: .3rem; }
}
.postcard > .pin { transition: background .12s ease, color .12s ease; }
.postcard:hover > .pin { background: var(--pen); border-color: var(--pen); color: #fff; }

.postcard__meta {
    font-family: var(--mono); font-size: .62rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--bone-3);
}
.postcard__title {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(1.6rem, 3.3vw, 2.15rem); line-height: 1.13; color: var(--bone);
    transition: color .12s ease;
}
.postcard:hover .postcard__title { color: var(--pen); }

.postcard__lede {
    font-size: 1rem; line-height: 1.66; color: var(--bone-2); max-width: 62ch;
}
.postcard__more {
    margin-top: .5rem;
    font-family: var(--mono); font-size: .66rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--chalk-ink);
}
.postcard:hover .postcard__more { color: var(--pen); }