/* ============================================================
   ESSAY LAYER
   Long-form reading styles for /writings.
   Loaded after style.css and inherits every colour token from
   it, so dark/light switching is automatic.

   Deliberately plain: one measured text column, quiet headings,
   no decoration. The writing carries the page.

   Component index
     01  Ledger .......... the /writings index list
     02  Essay ........... column, title, byline
     03  Prose ........... paragraphs, headings, lists, code
     04  Responsive
   ============================================================ */

:root {
    --measure: 66ch;
    --read-ink: color-mix(in srgb, var(--ink) 78%, var(--ink-strong));
}


/* ---------- 01  Ledger --------------------------------- */
/* The writings index. Deliberately NOT the .spotlight card
   used for projects: a register of entries, not a showcase. */

.ledger {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hair-lit);
}

.ledger__head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(96px, 132px) 26px;
    align-items: center;
    gap: 18px;
    padding: 0 0 9px;
}

.ledger__head span:nth-child(3) {
    text-align: right;
}

.ledger__row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(96px, 132px) 26px;
    align-items: start;
    gap: 18px;
    padding: 20px 0 21px;
    border-bottom: 1px solid var(--hair);
    text-decoration: none;
    color: inherit;
    transition: background 240ms var(--ease), border-color 240ms var(--ease);
}

.ledger__item:last-child .ledger__row {
    border-bottom: 1px solid var(--hair-lit);
}

.ledger__row:hover {
    background: linear-gradient(90deg, var(--ground-2), transparent 82%);
    border-bottom-color: var(--hair-lit);
}

.ledger__no {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    color: var(--ink-faint);
    padding-top: 0.36em;
    transition: color 240ms var(--ease);
}

.ledger__row:hover .ledger__no {
    color: var(--accent);
}

.ledger__title {
    display: block;
    font-size: clamp(1.14rem, 2vw, 1.42rem);
    font-variation-settings: "wdth" 104;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--ink-strong);
    text-wrap: balance;
    transition: color 240ms var(--ease);
}

.ledger__row:hover .ledger__title {
    color: var(--accent);
}

.ledger__dek {
    display: block;
    margin-top: 7px;
    max-width: 62ch;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-dim);
    text-wrap: pretty;
}

.ledger__meta {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.9rem;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    text-align: right;
}

.ledger__meta span + span {
    font-size: 0.82rem;
    color: var(--ink-faint);
}

.ledger__go {
    justify-self: end;
    align-self: center;
    width: 22px;
    height: 1px;
    background: var(--hair-lit);
    position: relative;
    transition: background 240ms var(--ease), width 240ms var(--ease);
}

.ledger__go::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: rotate(45deg);
    color: var(--hair-lit);
    transition: color 240ms var(--ease);
}

.ledger__row:hover .ledger__go {
    background: var(--accent);
    width: 30px;
}

.ledger__row:hover .ledger__go::after {
    color: var(--accent);
}


/* ---------- 02  Essay ---------------------------------- */
/* Indented by the site gutter so the column lines up with
   the body text on every other page. */

.essay {
    padding: clamp(30px, 4vw, 52px) 0 clamp(48px, 6vw, 80px) calc(var(--gutter) + var(--gap));
}

.essay-head,
.essay-prose {
    max-width: var(--measure);
}

.essay-back {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-dim);
}

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

.essay-title {
    margin: 22px 0 0;
    font-size: clamp(1.9rem, 4.2vw, 2.8rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink-strong);
    text-wrap: balance;
}

.essay-byline {
    margin: 14px 0 0;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--hair);
    font-size: 0.95rem;
    color: var(--ink-dim);
}


/* ---------- 03  Prose ---------------------------------- */

.essay-prose {
    margin: 32px 0 0;
    font-size: 1.05rem;
    line-height: 1.74;
    color: var(--read-ink);
}

.essay-prose p {
    max-width: none;
    margin: 0 0 1.15em;
    text-wrap: pretty;
}

.essay-prose > :last-child {
    margin-bottom: 0;
}

.essay-prose h2 {
    margin: 2.2em 0 0.6em;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--ink-strong);
    scroll-margin-top: 88px;
}

.essay-prose a {
    color: var(--accent);
    text-underline-offset: 3px;
}

.essay-prose ul,
.essay-prose ol {
    margin: 0 0 1.15em;
    padding-left: 1.4em;
}

.essay-prose li + li {
    margin-top: 0.4em;
}

.essay-prose blockquote {
    margin: 1.6em 0;
    padding-left: 18px;
    border-left: 1px solid var(--hair-lit);
    color: var(--ink-dim);
}

.essay-prose img {
    display: block;
    max-width: 100%;
    height: auto;
}

.essay-prose code {
    font-family: var(--font-mono);
    font-size: 0.88em;
}

.essay-prose pre {
    margin: 1.6em 0;
    padding: 16px 18px;
    overflow-x: auto;
    background: var(--ground-2);
    font-size: 0.85rem;
    line-height: 1.65;
}


/* ---------- 04  Responsive ----------------------------- */

@media (max-width: 1080px) {
    .essay {
        padding-left: 0;
    }
}

@media (max-width: 820px) {
    .essay-prose {
        font-size: 1rem;
        line-height: 1.7;
    }

    .ledger__head {
        display: none;
    }

    .ledger__row {
        grid-template-columns: 30px minmax(0, 1fr);
        row-gap: 12px;
    }

    .ledger__meta {
        grid-column: 2;
        flex-direction: row;
        align-items: baseline;
        gap: 14px;
        text-align: left;
    }

    .ledger__go {
        display: none;
    }
}