/* A card is a plate torn from a squared notebook: ruled ground, hairline
   frame, tag-coloured edge, and a plate number in the corner. */

.card-c69c3f4 {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 20px 14px 22px;
    color: var(--fg-muted);
    text-decoration: none;
    /* opaque: the page's dotted ground must not show through the plate */
    background-color: color-mix(in srgb, var(--bg-alt) 55%, var(--bg));
    /* graph paper, one 22px unit — the same sanguine as the page rules */
    background-image:
        linear-gradient(
            to right,
            color-mix(in srgb, var(--rule) 10%, transparent) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--rule) 10%, transparent) 1px,
            transparent 1px
        );
    background-size: 22px 22px;
    border: 1px solid color-mix(in srgb, var(--rule) 30%, transparent);
    /* square corners: nothing else on the page is rounded */
    border-radius: 0;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

/* the tag-coloured edge, sitting on top of the frame */
.card-c69c3f4::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: 2px;
    background: var(--edge, var(--tag-other));
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.card-c69c3f4:hover,
.card-c69c3f4:focus-visible {
    color: var(--fg);
    background-color: color-mix(in srgb, var(--bg-alt) 85%, var(--bg));
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    transform: translateY(-2px);
}

.card-c69c3f4:hover::before,
.card-c69c3f4:focus-visible::before {
    opacity: 1;
}

.card-c69c3f4:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

/* ---- the line above the title ---- */

.meta-c69c3f4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-ui);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.dots-c69c3f4 {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
}

.dot-c69c3f4 {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--tag-other);
}

.topics-c69c3f4 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.date-c69c3f4 {
    flex: 0 0 auto;
    margin-left: auto;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
}

/* ---- body ---- */

.title-c69c3f4 {
    margin: 2px 0 0;
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: left;
    /* the global h2 is underlined; a card title is not */
    text-decoration: none;
    color: var(--fg);
}

.summary-c69c3f4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin: 0;
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--fg-muted);
}

/* ---- the line below ---- */

.foot-c69c3f4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* pushed down so every card in a row ends on the same rule */
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--rule) 22%, transparent);
    font-family: var(--f-ui);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.plate-c69c3f4 {
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

.more-c69c3f4 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
}

.arrow-c69c3f4 {
    display: inline-block;
    transition: transform 0.2s ease;
}

.card-c69c3f4:hover .arrow-c69c3f4,
.card-c69c3f4:focus-visible .arrow-c69c3f4 {
    transform: translateX(4px);
}

/* ---- the newest post ---- */

.featured-c69c3f4 {
    grid-column: 1 / -1;
    padding: 26px 26px 16px 28px;
    gap: 12px;
    background-color: color-mix(in srgb, var(--bg-alt) 72%, var(--bg));
    border-color: color-mix(in srgb, var(--rule) 45%, transparent);
}

.featured-c69c3f4 .title-c69c3f4 {
    font-size: 2.1rem;
}

.featured-c69c3f4 .summary-c69c3f4 {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-width: 62ch;
    font-size: 1.15rem;
}

.featured-c69c3f4::before {
    opacity: 0.85;
}

@media (max-width: 600px) {
    .card-c69c3f4 {
        padding: 16px 16px 12px 18px;
    }

    .featured-c69c3f4 {
        padding: 18px 18px 12px 20px;
    }

    .featured-c69c3f4 .title-c69c3f4 {
        font-size: 1.7rem;
    }

    .featured-c69c3f4 .summary-c69c3f4 {
        font-size: 1.05rem;
    }

    /* the topic names repeat what the dots already say — drop them first */
    .topics-c69c3f4 {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card-c69c3f4,
    .arrow-c69c3f4 {
        transition: none;
    }

    .card-c69c3f4:hover,
    .card-c69c3f4:focus-visible {
        transform: none;
    }

    .card-c69c3f4:hover .arrow-c69c3f4,
    .card-c69c3f4:focus-visible .arrow-c69c3f4 {
        transform: none;
    }
}


/* Same plate as the index and the article pages: one column, hairline masthead,
   generous bottom margin. */

.page-3ba2a58 {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 56px 28px 20px;
    /* An opaque sheet laid on the dotted ground: the texture is for the
       margins, not for reading through. */
    background-color: var(--bg);
    border-inline: 1px solid color-mix(in srgb, var(--rule) 16%, transparent);
}

/* ---- masthead ---- */

.head-3ba2a58 {
    flex: 0 0 auto;
    padding-bottom: 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
}

.kicker-3ba2a58 {
    margin: 0;
    font-family: var(--f-ui);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.title-3ba2a58 {
    margin: 6px 0 0;
    font-size: 3.2rem;
    text-align: left;
    text-decoration: none;
    color: var(--fg);
}

.caption-3ba2a58 {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--fg-muted);
}

/* ---- section rule: heading, a ruled gap, the way out ---- */

.section-3ba2a58 {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 34px 0 18px;
}

/* ---- the part that actually scrolls ---- */

.scroll-3ba2a58 {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 32px;
    overflow-y: auto;
    overflow-x: hidden;
}

.heading-3ba2a58 {
    margin: 0;
    font-family: var(--f-ui);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fg-muted);
}

.rule-3ba2a58 {
    flex: 1;
    height: 1px;
    background-color: color-mix(in srgb, var(--rule) 30%, transparent);
}

.link-3ba2a58 {
    flex: 0 0 auto;
    font-family: var(--f-ui);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fg-muted);
    transition: color 0.2s ease;
}

.link-3ba2a58:hover,
.link-3ba2a58:focus-visible {
    color: var(--accent);
}

/* ---- cards ---- */

.grid-3ba2a58 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 16px;
    align-items: stretch;
    margin: 10px;
}

.empty-3ba2a58 {
    padding: 28px 0;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--fg-muted);
}

.foot-3ba2a58 {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--rule) 30%, transparent);
    font-family: var(--f-ui);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.foot-3ba2a58 a {
    color: var(--fg-muted);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
    transition: color 0.2s ease;
}

.foot-3ba2a58 a:hover,
.foot-3ba2a58 a:focus-visible {
    color: var(--accent);
}

@media (max-width: 600px) {
    .page-3ba2a58 {
        padding: 32px 18px 16px;
        /* the sheet spans the screen — no edge to draw */
        border-inline: 0;
    }

    .title-3ba2a58 {
        font-size: 2.4rem;
    }

    .grid-3ba2a58 {
        grid-template-columns: 1fr;
    }
}


.page-12772ff {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 56px 28px 20px;
    /* An opaque sheet laid on the dotted ground: the texture is for the
       margins, not for reading through. */
    background-color: var(--bg);
    border-inline: 1px solid color-mix(in srgb, var(--rule) 16%, transparent);
}

/* ---- head ---- */

.head-12772ff {
    flex: 0 0 auto;
    padding-bottom: 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
}

.kicker-12772ff {
    margin: 0;
    font-family: var(--f-ui);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.title-12772ff {
    margin: 6px 0 0;
    font-size: 3.2rem;
    text-align: left;
    text-decoration: none;
    color: var(--fg);
}

.caption-12772ff {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--fg-muted);
}

/* ---- topic legend, doubling as a filter ---- */

.legend-12772ff {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.chip-12772ff {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    font-family: var(--f-ui);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
    background-color: transparent;
    border: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
    border-radius: 2px;
    cursor: pointer;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.chip-12772ff:hover {
    color: var(--fg);
    border-color: var(--accent);
}

.chip-12772ff.on-12772ff {
    color: var(--fg);
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 12%, transparent);
}

.count-12772ff {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
}

/* ---- the plot ---- */

/* The stage holds the guide and the scroller on top of each other: the guide
   belongs to the viewport, the rows to the scrolling content. */
.stage-12772ff {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 28px;
}

.plot-12772ff {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* --row-h, --row-step and --spread are written here from the component, so
       the pan arithmetic and the layout are driven by the same numbers. */
}

/* The pannable canvas. Its translateX is exactly --row-step per --row-h of
   scroll, so a row's horizontal position is a fixed function of its height on
   screen: every row rides the same stationary diagonal. */
.track-12772ff {
    position: relative;
    will-change: transform;
}

/* sanguine construction line: the diagonal the rows travel along. Drawn in the
   viewport's own pixels, so it never moves. */
.axis-12772ff {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0.45;
    pointer-events: none;
}

.rows-12772ff {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.row-12772ff {
    /* --i is the row's place in the list; the stair is --row-step per row. The
       row gives up --spread of its width so its right edge stays in column. */
    height: var(--row-h);
    margin-left: calc(var(--i) * var(--row-step));
    width: calc(100% - var(--spread, 0px));
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 22%, transparent);
}

.row-12772ff a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 0 2px;
    color: var(--fg-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.row-12772ff a:hover,
.row-12772ff a:focus-visible {
    color: var(--fg);
}

.dots-12772ff {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
}

.dot-12772ff {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--tag-other);
}

.t-12772ff {
    overflow: hidden;
    font-size: 0.95rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--fg);
}

.topics-12772ff {
    flex: 0 0 auto;
    font-family: var(--f-ui);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.d-12772ff {
    flex: 0 0 auto;
    margin-left: auto;
    font-family: var(--f-ui);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

.empty-12772ff {
    padding: 28px 0;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--fg-muted);
}

@media (max-width: 600px) {
    .page-12772ff {
        padding: 32px 18px 16px;
        /* the sheet spans the screen — no edge to draw */
        border-inline: 0;
    }

    .title-12772ff {
        font-size: 2.4rem;
    }

    /* the stair itself is shallower on a narrow screen — see ROW_STEP_NARROW */

    .topics-12772ff {
        display: none;
    }

    .axis-12772ff {
        opacity: 0.25;
    }
}


/* The bar is a single row at every width: wordmark on the left, everything
   else pushed to the right. It never scrolls — see the app shell in
   styles.css — so it stays as short as it can. */

.topbar-db2f0c2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 14px 28px;
    background-color: var(--bg);
    color: var(--fg);
    border-bottom: 1px solid var(--rule);
    box-sizing: border-box;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.logo-db2f0c2 {
    flex: 0 0 auto;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.logo-db2f0c2:hover {
    color: var(--accent);
}

/* links and the theme switch travel together on the right */
.trailing-db2f0c2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.navigation-db2f0c2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    color: inherit;

    a {
        color: inherit;
        text-decoration: none;
        transition: color 0.2s ease;
    }
    a:hover {
        color: var(--accent);
    }
    .active-db2f0c2 {
        color: var(--accent);
    }
}

@media (max-width: 600px) {
    .topbar-db2f0c2 {
        padding: 10px 16px;
        gap: 12px;
    }

    .trailing-db2f0c2 {
        gap: 14px;
    }

    .navigation-db2f0c2 {
        gap: 14px;
    }
}


.article-c35c8cf {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 28px 20px;
    /* An opaque sheet laid on the dotted ground: prose is the one thing that
       must never compete with the texture. */
    background-color: var(--bg);
    border-inline: 1px solid color-mix(in srgb, var(--rule) 16%, transparent);
}

.head-c35c8cf {
    flex: 0 0 auto;
    padding-bottom: 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
}

.kicker-c35c8cf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-family: var(--f-ui);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.tag-c35c8cf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dot-c35c8cf {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--tag-other);
}

.date-c35c8cf {
    margin-left: auto;
    letter-spacing: 0.12em;
}

.title-c35c8cf {
    margin: 10px 0 0;
    font-size: 3rem;
    text-align: left;
    text-decoration: none;
    color: var(--fg);
}

.summary-c35c8cf {
    margin: 8px 0 0;
    font-family: var(--f-display);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--fg-muted);
}

/* ---- markdown body ---- */

.body-c35c8cf {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 28px;
    padding-bottom: 40px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 0.95rem;
    line-height: 1.8;
}

.body-c35c8cf h1,
.body-c35c8cf h2,
.body-c35c8cf h3 {
    margin: 34px 0 10px;
    font-size: 1.5rem;
    text-align: left;
    text-decoration: none;
}

.body-c35c8cf h1 {
    font-size: 2rem;
}

.body-c35c8cf h3 {
    font-size: 1.2rem;
}

.body-c35c8cf p {
    margin: 0 0 16px;
}

.body-c35c8cf a {
    color: var(--link);
}

.body-c35c8cf em {
    font-style: italic;
}

.body-c35c8cf ul,
.body-c35c8cf ol {
    padding-left: 1.2rem;
}

.body-c35c8cf li {
    margin-bottom: 8px;
}

.body-c35c8cf blockquote {
    margin: 20px 0;
    padding-left: 16px;
    border-left: 2px solid var(--accent);
    font-style: italic;
    color: var(--fg-muted);
}

.body-c35c8cf pre {
    padding: 14px 16px;
    overflow-x: auto;
    background-color: color-mix(in srgb, var(--bg-alt) 80%, var(--fg) 6%);
    border-left: 2px solid var(--accent);
    font-size: 0.82rem;
    line-height: 1.6;
}

.body-c35c8cf code {
    font-family: var(--f-body);
    font-size: 0.85em;
}

.body-c35c8cf :not(pre) > code {
    padding: 1px 4px;
    background-color: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 2px;
}

/* display math gets the inverted "paper" card from the wireframes */
.body-c35c8cf .katex-display {
    margin: 22px 0;
    padding: 16px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: color-mix(in srgb, var(--bg-alt) 70%, var(--fg) 5%);
    border: 1px solid color-mix(in srgb, var(--rule) 35%, transparent);
}

.missing-c35c8cf {
    padding: 40px 0;
}

.missing-c35c8cf h1 {
    text-align: left;
    font-size: 2.4rem;
}

@media (max-width: 600px) {
    .article-c35c8cf {
        padding: 32px 18px 16px;
        /* the sheet spans the screen — no edge to draw */
        border-inline: 0;
    }

    .title-c35c8cf {
        font-size: 2.2rem;
    }

    .date-c35c8cf {
        margin-left: 0;
    }
}


.switch-941957f {
    align-self: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.track-941957f {
    position: relative;
    display: flex;
    align-items: center;
    width: 48px;
    height: 26px;
    padding: 0 6px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background-color: var(--bg-alt);
    transition: background-color 0.2s ease;
}

.icon-sun-941957f,
.icon-moon-941957f {
    z-index: 0;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--fg-muted);
}

.icon-sun-941957f {
    margin-right: auto;
}

.icon-moon-941957f {
    margin-left: auto;
}

.thumb-941957f {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--accent);
    box-shadow: 0 1px 2px var(--shadow);
    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.switch-941957f[aria-checked="true"] .thumb-941957f {
    transform: translateX(22px);
    background-color: var(--accent-alt);
}

.switch-941957f:hover .thumb-941957f {
    filter: brightness(1.1);
}

@media (max-width: 600px) {
    .switch-941957f {
        align-self: auto;
    }
}