/* ===========================
   Fragments — blog-specific styles.
   Design tokens, link styles, and nav live in /shared/css/shared.css.
   =========================== */

/* ===========================
   Reset & base
   =========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body base (font, color, background, leading, smoothing) lives in shared.css.
   Only the blog's delta stays here: pad for the fixed nav. */
body {
    padding: var(--nav-height) 20px 0;
}

/* ===========================
   Container
   =========================== */
.container {
    max-width: 680px;
    margin: 0 auto;
}

/* ===========================
   Typography

   Chrome headings (hero, post titles, listing titles, nav, 404) use the
   shared `.display` utilities from shared.css. Prose headings come from
   rendered Markdown and can't take classes, so they carry the display recipe
   here, scoped to .post-content.
   =========================== */
.post-content h1,
.post-content h2,
.post-content h3 {
    font-family: var(--font-serif);
    font-style: normal;
    font-variation-settings: "opsz" 144;
    font-weight: 600;
    color: var(--color-ink);
}

.post-content h1 {
    font-size: var(--text-3xl);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.post-content h2 {
    font-size: var(--text-xl);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    margin-top: 2.75rem;
}

.post-content h3 {
    font-size: var(--text-lg);
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin-bottom: 0.5rem;
    margin-top: 2.25rem;
}

p {
    margin-bottom: 1.25rem;
}

/* ===========================
   Hero (site identity)
   The `.hero-name` block (name + tagline) lives in shared.css, so the
   Fragments landing matches the portfolio home hero. Here we set only the
   outer spacing and the tagline offset. The body already adds --nav-height
   of top padding, so 2.5rem here lands the title 6rem from the top — the
   same offset as home's 6rem hero padding-top.
   =========================== */
header.hero {
    padding: 2.5rem 0 1.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

/* Start just right of the "g" descender so the tagline clears it, the way
   home's tagline clears the "y" in "Bryan". The "g" in "Fragments" ends at
   ~46% of the title width. */
.hero-name .tagline {
    left: 46%;
}

/* ===========================
   Main
   =========================== */
main {
    min-height: calc(100vh - 300px);
    padding-bottom: 4rem;
}

/* ===========================
   Posts list (homepage)
   =========================== */
.posts-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.post-preview {
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--color-rule);
}

.post-preview:first-child {
    padding-top: 0.5rem;
}

.post-preview:last-child {
    border-bottom: none;
}

.post-preview h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.post-preview h2 a {
    color: var(--color-ink);
    text-decoration: none;
}

.post-preview h2 a:hover {
    color: var(--color-accent);
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-bottom: 0.85rem;
}

.post-meta .post-reading-time::before {
    content: "·";
    margin-right: 0.6em;
    color: var(--color-muted-light);
}

/* .post-date / .post-reading-time get their type from `.label`; these classes
   remain only as hooks for the dot separator above and meta layout. */

.post-excerpt {
    color: var(--color-ink-soft);
    margin-bottom: 1rem;
    font-size: var(--text-base);
}

.read-more {
    display: inline-block;
}

/* ===========================
   Tags
   =========================== */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
}

/* .tag elements are styled by the shared `.pill` utility; `.tag` remains as a
   semantic hook and for the layout rules below. */

/* Tags sit below the read-more link on listing previews */
.post-preview .tag-list {
    margin-top: 1rem;
}

/* Tags centered under the meta row in the post header */
.post-header .tag-list {
    justify-content: center;
    margin-top: 1rem;
}

.no-posts {
    text-align: center;
    padding: 3rem 0;
    color: var(--color-muted);
}

/* ===========================
   Individual post
   =========================== */
.post-full {
    max-width: 680px;
}

.post-header {
    margin-bottom: 2.5rem;
    text-align: center;
}

.post-header h1 {
    margin-bottom: 0.75rem;
}

.post-header .post-meta {
    margin-bottom: 0;
    justify-content: center;
}

.post-content {
    margin-bottom: 3rem;
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-ink-soft);
}

/* Drop cap on the first paragraph of the post body only.
   Goal: exactly 3 lines tall.

   Body in .post-content is 1.05rem with line-height 1.75
   (≈ 1.8375rem per line) → 3 lines = 5.5125rem.
   Fraunces cap-height ratio is ~0.72 of font-size, so
   font-size ≈ 7.6rem produces a cap that visually spans
   3 body lines. line-height 0.72 keeps the float box at the
   same height so wrapping text occupies exactly 3 lines. */
.post-content > p:first-of-type::first-letter {
    font-family: var(--font-serif);
    font-style: normal;
    font-variation-settings: "opsz" 144;
    font-weight: 600;
    color: var(--color-accent);

    -webkit-initial-letter: 3;
    initial-letter: 3;

    float: left;
    font-size: 7.6rem;
    line-height: 0.72;
    margin: 0.05rem 0.55rem 0 0;
}

@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    .post-content > p:first-of-type::first-letter {
        float: none;
        font-size: inherit;
        line-height: inherit;
        margin: 0 0.5rem 0 0;
    }
}

.post-content ul,
.post-content ol {
    margin-bottom: 1.25rem;
    margin-left: 1.5rem;
}

.post-content li {
    margin-bottom: 0.5rem;
}

.post-content blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: 1.25rem;
    margin: 1.75rem 0;
    color: var(--color-muted);
    font-family: var(--font-serif);
    font-style: normal;
    font-size: var(--text-md);
    line-height: 1.5;
}

.post-content code {
    background-color: var(--color-surface-soft);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.92em;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.post-content pre {
    background-color: var(--color-surface-soft);
    padding: 1rem 1.25rem;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-rule);
}

.post-content pre code {
    background-color: transparent;
    padding: 0;
}

/* Syntax highlighting — Pygments tokens emitted by the codehilite extension
   (see app.py). A warm light theme tuned to the cream/crimson palette so code
   blocks read like part of the site, not a transplant. Earth tones with a
   crimson-family red for keywords; one cool note (purple) for numbers and
   constants. Scoped to .codehilite so the classes never leak. */
.post-content .codehilite .c,
.post-content .codehilite .ch,
.post-content .codehilite .cm,
.post-content .codehilite .cp,
.post-content .codehilite .cpf,
.post-content .codehilite .c1,
.post-content .codehilite .cs {            /* comments */
    color: #a1907c;
    font-style: italic;
}

.post-content .codehilite .k,
.post-content .codehilite .kc,
.post-content .codehilite .kd,
.post-content .codehilite .kn,
.post-content .codehilite .kp,
.post-content .codehilite .kr,
.post-content .codehilite .kt,
.post-content .codehilite .o,
.post-content .codehilite .ow,
.post-content .codehilite .nt,
.post-content .codehilite .err {           /* keywords, operators, tags */
    color: #9d0006;
}

.post-content .codehilite .s,
.post-content .codehilite .sa,
.post-content .codehilite .sb,
.post-content .codehilite .sc,
.post-content .codehilite .dl,
.post-content .codehilite .sd,
.post-content .codehilite .s2,
.post-content .codehilite .se,
.post-content .codehilite .sh,
.post-content .codehilite .si,
.post-content .codehilite .sx,
.post-content .codehilite .sr,
.post-content .codehilite .s1,
.post-content .codehilite .ss {            /* strings */
    color: #79740e;
}

.post-content .codehilite .m,
.post-content .codehilite .mb,
.post-content .codehilite .mf,
.post-content .codehilite .mh,
.post-content .codehilite .mi,
.post-content .codehilite .mo,
.post-content .codehilite .il,
.post-content .codehilite .no,
.post-content .codehilite .nv,
.post-content .codehilite .vc,
.post-content .codehilite .vg,
.post-content .codehilite .vi {            /* numbers, constants, variables */
    color: #8f3f71;
}

.post-content .codehilite .nf,
.post-content .codehilite .fm,
.post-content .codehilite .na {            /* function names, attributes */
    color: #b57614;
}

.post-content .codehilite .nc,
.post-content .codehilite .nn,
.post-content .codehilite .ne {            /* class / namespace / exception */
    color: #b57614;
    font-weight: 600;
}

.post-content .codehilite .nb,
.post-content .codehilite .bp,
.post-content .codehilite .nd {            /* builtins, decorators */
    color: #af3a03;
}

.post-content .codehilite .gd { color: #9d0006; }   /* diff deleted */
.post-content .codehilite .gi { color: #79740e; }   /* diff inserted */
.post-content .codehilite .ge { font-style: italic; }
.post-content .codehilite .gs { font-weight: 600; }
.post-content .codehilite .gh,
.post-content .codehilite .gu { color: #b57614; font-weight: 600; }

/* Images. Plain markdown ![alt](src) renders as an <img> inside a <p>;
   for a caption, wrap it in a raw <figure> (see docs/conventions.md). */
.post-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2rem auto;
    border-radius: 6px;
    border: 1px solid var(--color-rule);
}

.post-content figure {
    margin: 2rem 0;
}

.post-content figure img {
    margin: 0 auto;
}

.post-content figcaption {
    margin-top: 0.75rem;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-muted);
    font-style: italic;
}

.post-footer {
    padding-top: 2rem;
    border-top: 1px solid var(--color-rule);
}

/* Previous / Next post navigation */
.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 0;
}

.post-nav-item {
    min-height: 1px;
}

.post-nav-prev {
    text-align: left;
}

.post-nav-next {
    text-align: right;
}

.post-nav-item a {
    display: block;
    color: var(--color-ink);
    text-decoration: none;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--color-rule);
    border-radius: 6px;
    background-color: transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.post-nav-item a:hover {
    border-color: var(--color-accent);
    background-color: var(--color-surface-soft);
    color: var(--color-ink);
}

/* Type from `.label .label--accent`; this keeps only layout. */
.post-nav-label {
    display: block;
    margin-bottom: 0.25rem;
}

/* Type from `.display .display--sm`; this keeps block layout and a smaller
   size than the --sm tier (these are footnote-scale titles). */
.post-nav-title {
    display: block;
    font-size: var(--text-base);
}

.back-link {
    display: inline-block;
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-decoration: none;
}

.back-link:hover {
    color: var(--color-accent);
}

.back-link-top {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 2rem 0 1rem;
}

/* ===========================
   Tag page
   =========================== */
.tag-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

/* A big display tag chip. Composes the shared `.pill` (sans, uppercase, border,
   transition) and overrides only the display-scale chrome that makes it a
   header rather than a small chip. */
.tag-pill {
    font-size: var(--text-2xl);
    letter-spacing: normal;       /* override .pill's 0.07em tracking */
    line-height: 1;
    color: var(--color-accent);
    padding: 0.35em 0.8em 0.29em; /* larger, em-based */
    border-radius: 24px;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    background-color: rgba(252, 248, 238, 0.3);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Type from `.label`; this keeps only the zeroed margin. */
.tag-count {
    margin-bottom: 0;
}

/* ===========================
   Footer
   =========================== */
footer {
    border-top: 1px solid var(--color-rule);
    padding: 2.5rem 0;
    margin-top: 4rem;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

footer a {
    color: var(--color-muted);
    text-decoration: none;
}

footer a:hover {
    color: var(--color-accent);
}

/* ===========================
   404
   =========================== */
.error-page {
    text-align: center;
    padding: 4rem 0;
}

.error-page h1 {
    font-size: var(--text-6xl);
    color: var(--color-muted-light);
    margin-bottom: 0.5rem;
    letter-spacing: -0.04em;
}

.error-page h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.error-page p {
    color: var(--color-muted);
    margin-bottom: 2rem;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 768px) {
    header.hero {
        padding: 2rem 0 2rem;
        margin-bottom: 2rem;
    }

    /* Chrome headings shrink via the shared `.display--*` mobile scale; only the
       bespoke tag-pill chip needs its own mobile size. */
    .tag-pill {
        font-size: 1.85rem;
    }

    .post-nav {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .post-nav-next {
        text-align: left;
    }
}