.body-66144e2 {
    margin-top: 28px;
    padding-bottom: 40px;
    overflow-x: clip;
    font-size: 0.95rem;
    line-height: 1.8;
}


/* 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;
    }
}


/* ---- everything under the masthead ---- */

.body-72d69df {
    padding-bottom: 40px;
    overflow-x: clip;
}

/* ---- section rule: heading, a ruled gap, a count ---- */

.section-72d69df {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 34px 0 18px;
}

.heading-72d69df {
    margin: 0;
    font-family: var(--f-ui);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    /* the global h2 is underlined; a section label is not */
    text-decoration: none;
    color: var(--fg-muted);
}

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

.tally-72d69df {
    flex: 0 0 auto;
    font-family: var(--f-ui);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* ---- pursuits: one plate each, edged in its own tint ---- */

.pursuits-72d69df {
    display: grid;
    gap: 16px;
}

.pursuit-72d69df {
    /* the plate's own ground, so rings around beads can cut it cleanly */
    --surface: color-mix(in srgb, var(--bg-alt) 55%, var(--bg));

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px 14px 24px;
    background-color: var(--surface);
    border: 1px solid color-mix(in srgb, var(--rule) 30%, transparent);
}

.pursuit-72d69df::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: 2px;
    background: var(--tint);
    opacity: 0.85;
}

.meta-72d69df {
    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);
}

.reading-72d69df {
    margin-left: auto;
    letter-spacing: 0.12em;
    color: var(--fg);
}

.name-72d69df {
    margin: 0;
    font-family: var(--f-display);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--fg);
}

.foot-72d69df {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    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;
    color: var(--fg-muted);
}

.pct-72d69df {
    font-weight: 700;
    color: var(--fg);
}

.reward-72d69df {
    font-family: var(--f-display);
    font-size: 0.95rem;
    font-style: italic;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--fg);
}

/* a title that leads to a post reads as the title until it is pointed at or
   focused: then it is underlined in the plate's tint, and a keyboard focus
   also gets a ring */
.post-link-72d69df {
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.post-link-72d69df:hover,
.post-link-72d69df:focus-visible {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: var(--tint);
}

.post-link-72d69df:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
    border-radius: 1px;
}

/* ---- beads: a day each, ten to a rod ---- */

.beads-72d69df {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 4px 0;
}

/* the beads plus, for a beaded pursuit with one, its icon set level with the
   first rod rather than trailing the last */
.beads-figure-72d69df {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.beads-figure-72d69df .beads-72d69df {
    flex: 1 1 auto;
}

.beads-figure-72d69df .icon-72d69df {
    flex: 0 0 auto;
    /* centred on the first row's 9px bead, which sits 4px down in .beads */
    margin-top: 2px;
    height: 13px;
    width: auto;
}

.rod-72d69df {
    position: relative;
    display: inline-flex;
    gap: 3px;
    padding: 0 3px;
}

/* the wire the beads are strung on */
.rod-72d69df::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: color-mix(in srgb, var(--tint) 45%, transparent);
}

.bead-72d69df {
    position: relative;
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    /* a day still ahead: the lightest step of the plate's own hue */
    background-color: color-mix(in srgb, var(--tint) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--tint) 45%, transparent);
}

.bead-72d69df.done-72d69df {
    background-color: var(--tint);
    border-color: var(--tint);
}

.bead-72d69df.today-72d69df {
    box-shadow:
        0 0 0 2px var(--surface),
        0 0 0 3px var(--fg);
}

/* ---- meter: a ruled bar ticked every tenth ---- */

.course-72d69df {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.meter-72d69df {
    --marker: 11px;

    position: relative;
    flex: 1 1 auto;
    height: 14px;
    /* tick every tenth, and one more closing the far end */
    background-image: repeating-linear-gradient(
        to right,
        color-mix(in srgb, var(--rule) 35%, transparent) 0 1px,
        transparent 1px 10%
    );
    border-right: 1px solid color-mix(in srgb, var(--rule) 35%, transparent);
}

.bar-72d69df,
.fill-72d69df {
    position: absolute;
    top: 50%;
    left: 0;
    height: 4px;
    transform: translateY(-50%);
}

.bar-72d69df {
    right: 0;
    background-color: color-mix(in srgb, var(--tint) 18%, transparent);
}

.fill-72d69df {
    width: var(--fill);
    background-color: var(--tint);
}

.marker-72d69df {
    position: absolute;
    top: 50%;
    /* kept whole inside the bar at either end */
    left: clamp(
        calc(var(--marker) / 2),
        var(--fill),
        calc(100% - var(--marker) / 2)
    );
    width: var(--marker);
    height: var(--marker);
    border-radius: 50%;
    background-color: var(--tint);
    box-shadow: 0 0 0 2px var(--surface, var(--bg));
    transform: translate(-50%, -50%);
}

/* sized by the svg's own width and height */
.icon-72d69df {
    flex: 0 0 auto;
    color: var(--fg-muted);
}

/* ---- open water: setting = "ocean" ----
   Both wave drawings are masks, not pictures, so the water is painted in the
   plate's own tint and follows the theme. */

.ocean-72d69df {
    /* lets the swells sit above the plate's ground but under its content */
    isolation: isolate;
}

/* swells rolling across the lower part of the plate, fading as they rise */
.ocean-72d69df::after {
    content: "";
    position: absolute;
    /* low and faint, so the course above stays the strongest wave on the plate */
    inset: 50% 0 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(
        to top,
        color-mix(in srgb, var(--tint) 18%, transparent),
        transparent
    );
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='28'%3E%3Cpath d='M0 7Q16 3 32 7T64 7M-16 21Q0 17 16 21T48 21T80 21' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E")
        0 0 / 64px 28px repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='28'%3E%3Cpath d='M0 7Q16 3 32 7T64 7M-16 21Q0 17 16 21T48 21T80 21' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E")
        0 0 / 64px 28px repeat;
}

.swell-72d69df {
    --swimmer: 11px;

    position: relative;
    flex: 1 1 auto;
    height: 20px;
    /* a buoy every tenth, hanging under the course, and one at the far end */
    background-image: repeating-linear-gradient(
        to right,
        color-mix(in srgb, var(--tint) 45%, transparent) 0 1px,
        transparent 1px 10%
    );
    background-position: left bottom;
    background-size: 100% 4px;
    background-repeat: no-repeat;
}

.swell-72d69df::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 4px;
    background-color: color-mix(in srgb, var(--tint) 45%, transparent);
}

/* the course: swum water in full tint, open water ahead let down */
.wave-72d69df {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background-image: linear-gradient(
        to right,
        var(--tint) var(--fill),
        color-mix(in srgb, var(--tint) 42%, transparent) var(--fill)
    );
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6Q6 0 12 6T24 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")
        0 0 / 24px 12px repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6Q6 0 12 6T24 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")
        0 0 / 24px 12px repeat-x;
}

.swimmer-72d69df {
    position: absolute;
    top: 6px;
    /* kept whole inside the course at either end */
    left: clamp(
        calc(var(--swimmer) / 2),
        var(--fill),
        calc(100% - var(--swimmer) / 2)
    );
    width: var(--swimmer);
    height: var(--swimmer);
    border-radius: 50%;
    background-color: var(--tint);
    box-shadow: 0 0 0 2px var(--surface, var(--bg));
    transform: translate(-50%, -50%);
    animation: swimmer-bob 3.2s ease-in-out infinite;
}

/* stylance leaves keyframe names unscoped, so this one is named in full */
@keyframes swimmer-bob {
    0%,
    100% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, calc(-50% - 2px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .swimmer-72d69df {
        animation: none;
    }
}

/* ---- music: setting = "music" ----
   As with the ocean, the staff is a mask rather than a picture, so it is
   written in the plate's own tint and follows the theme. */

.music-72d69df {
    /* lets the staff sit above the plate's ground but under its content */
    isolation: isolate;
}

/* a staff ruled across the lower part of the plate, fading as it rises. The
   two bars written on it are the opening of the theme of Gaspar Sanz's
   Canarios, in D and in 6/8, which is why the eighths are beamed in threes:

     | F# E F# G F# G | F#. E D C# |

   Everything is drawn at the staff's own scale, five pixels to the line, so
   the tile repeats as continuous music. */
.music-72d69df::after {
    content: "";
    position: absolute;
    /* low and faint, so the course above stays the clearest line on the plate */
    inset: 50% 0 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(
        to top,
        color-mix(in srgb, var(--tint) 18%, transparent),
        transparent
    );
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='34'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 4H160M0 9H160M0 14H160M0 19H160M0 24H160'/%3E%3Cpath d='M79.5 3.5V24.5M159.5 3.5V24.5'/%3E%3Cpath d='M12 21.5V12M23 24V12M34 21.5V12M47 19V9.5M58 21.5V9.5M69 19V9.5M94 21.5V12.5M114 24V14.5M125 26.5V14.5M136 29V14.5'/%3E%3Cpath d='M130.5 29H137.5'/%3E%3Cellipse cx='92' cy='21.5' rx='2.4' ry='1.8' transform='rotate(-20 92 21.5)'/%3E%3C/g%3E%3Cg fill='black'%3E%3Crect x='11.5' y='12' width='23' height='1.6'/%3E%3Crect x='46.5' y='9.5' width='23' height='1.6'/%3E%3Crect x='113.5' y='14.5' width='23' height='1.6'/%3E%3Ccircle cx='97' cy='21.5' r='0.8'/%3E%3Cellipse cx='10' cy='21.5' rx='2.3' ry='1.7' transform='rotate(-20 10 21.5)'/%3E%3Cellipse cx='21' cy='24' rx='2.3' ry='1.7' transform='rotate(-20 21 24)'/%3E%3Cellipse cx='32' cy='21.5' rx='2.3' ry='1.7' transform='rotate(-20 32 21.5)'/%3E%3Cellipse cx='45' cy='19' rx='2.3' ry='1.7' transform='rotate(-20 45 19)'/%3E%3Cellipse cx='56' cy='21.5' rx='2.3' ry='1.7' transform='rotate(-20 56 21.5)'/%3E%3Cellipse cx='67' cy='19' rx='2.3' ry='1.7' transform='rotate(-20 67 19)'/%3E%3Cellipse cx='112' cy='24' rx='2.3' ry='1.7' transform='rotate(-20 112 24)'/%3E%3Cellipse cx='123' cy='26.5' rx='2.3' ry='1.7' transform='rotate(-20 123 26.5)'/%3E%3Cellipse cx='134' cy='29' rx='2.3' ry='1.7' transform='rotate(-20 134 29)'/%3E%3C/g%3E%3C/svg%3E")
        left bottom / 160px 34px repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='34'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 4H160M0 9H160M0 14H160M0 19H160M0 24H160'/%3E%3Cpath d='M79.5 3.5V24.5M159.5 3.5V24.5'/%3E%3Cpath d='M12 21.5V12M23 24V12M34 21.5V12M47 19V9.5M58 21.5V9.5M69 19V9.5M94 21.5V12.5M114 24V14.5M125 26.5V14.5M136 29V14.5'/%3E%3Cpath d='M130.5 29H137.5'/%3E%3Cellipse cx='92' cy='21.5' rx='2.4' ry='1.8' transform='rotate(-20 92 21.5)'/%3E%3C/g%3E%3Cg fill='black'%3E%3Crect x='11.5' y='12' width='23' height='1.6'/%3E%3Crect x='46.5' y='9.5' width='23' height='1.6'/%3E%3Crect x='113.5' y='14.5' width='23' height='1.6'/%3E%3Ccircle cx='97' cy='21.5' r='0.8'/%3E%3Cellipse cx='10' cy='21.5' rx='2.3' ry='1.7' transform='rotate(-20 10 21.5)'/%3E%3Cellipse cx='21' cy='24' rx='2.3' ry='1.7' transform='rotate(-20 21 24)'/%3E%3Cellipse cx='32' cy='21.5' rx='2.3' ry='1.7' transform='rotate(-20 32 21.5)'/%3E%3Cellipse cx='45' cy='19' rx='2.3' ry='1.7' transform='rotate(-20 45 19)'/%3E%3Cellipse cx='56' cy='21.5' rx='2.3' ry='1.7' transform='rotate(-20 56 21.5)'/%3E%3Cellipse cx='67' cy='19' rx='2.3' ry='1.7' transform='rotate(-20 67 19)'/%3E%3Cellipse cx='112' cy='24' rx='2.3' ry='1.7' transform='rotate(-20 112 24)'/%3E%3Cellipse cx='123' cy='26.5' rx='2.3' ry='1.7' transform='rotate(-20 123 26.5)'/%3E%3Cellipse cx='134' cy='29' rx='2.3' ry='1.7' transform='rotate(-20 134 29)'/%3E%3C/g%3E%3C/svg%3E")
        left bottom / 160px 34px repeat;
}

/* the course: a string over frets, stopped where the piece has got to */
.fretted-72d69df {
    --finger: 11px;

    position: relative;
    flex: 1 1 auto;
    height: 20px;
}

/* a fret every tenth, and the nut closing the far end */
.frets-72d69df {
    position: absolute;
    inset: 3px 0;
    background-image: repeating-linear-gradient(
        to right,
        color-mix(in srgb, var(--tint) 40%, transparent) 0 1px,
        transparent 1px 10%
    );
    border-right: 1px solid color-mix(in srgb, var(--tint) 40%, transparent);
}

.string-72d69df,
.stopped-72d69df {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* the string still open, past the finger */
.string-72d69df {
    right: 0;
    height: 2px;
    background-color: color-mix(in srgb, var(--tint) 30%, transparent);
}

/* and the length of it that sounds, in full tint */
.stopped-72d69df {
    width: var(--fill);
    height: 3px;
    background-color: var(--tint);
}

.finger-72d69df {
    position: absolute;
    top: 50%;
    /* kept whole on the string at either end */
    left: clamp(
        calc(var(--finger) / 2),
        var(--fill),
        calc(100% - var(--finger) / 2)
    );
    width: var(--finger);
    height: var(--finger);
    border-radius: 50%;
    background-color: var(--tint);
    box-shadow: 0 0 0 2px var(--surface, var(--bg));
    transform: translate(-50%, -50%);
    animation: finger-vibrato 2.4s ease-in-out infinite;
}

/* stylance leaves keyframe names unscoped, so this one is named in full */
@keyframes finger-vibrato {
    0%,
    100% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(calc(-50% + 1.5px), -50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .finger-72d69df {
        animation: none;
    }
}

/* ---- books in hand ---- */

.shelf-72d69df,
.finished-72d69df {
    margin: 0;
    padding: 0;
    list-style: none;
}

.book-72d69df {
    --surface: var(--bg);

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 2px 16px;
    padding: 14px 2px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 22%, transparent);
}

.book-title-72d69df {
    /* an h3, like a pursuit's name: without the heading's default margins */
    margin: 0;
    font-family: var(--f-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--fg);
}

.author-72d69df {
    font-family: var(--f-display);
    font-size: 1rem;
    font-style: italic;
    color: var(--fg-muted);
}

.pages-72d69df,
.plate-72d69df {
    font-family: var(--f-ui);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--fg-muted);
}

.book-72d69df .pct-72d69df {
    justify-self: end;
    font-family: var(--f-ui);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.book-meter-72d69df {
    grid-column: 1 / -1;
    margin-top: 10px;
}

/* ---- the finished shelf ---- */

.finished-72d69df li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding: 12px 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 22%, transparent);
}

.finished-72d69df .book-title-72d69df {
    font-size: 1.15rem;
}

.finished-72d69df .pages-72d69df {
    margin-left: auto;
}

/* shown in place of the lists when src/hobbies.toml does not parse */
.error-72d69df {
    margin: 0;
    padding: 12px 14px;
    overflow-x: auto;
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--fg);
    background-color: var(--bg-alt);
    border-left: 2px solid var(--rule);
}

@media (max-width: 600px) {
    .pursuit-72d69df {
        padding: 16px 16px 12px 18px;
    }

    .name-72d69df {
        font-size: 1.45rem;
    }

    .beads-72d69df {
        gap: 10px 14px;
    }

    .book-title-72d69df {
        font-size: 1.15rem;
    }
}


/* ---- 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;
}

/* ---- everything between the rule and the footer ---- */

/* grows to push the footer to the foot of a short screen */
.body-3ba2a58 {
    flex: 1 0 auto;
    padding-bottom: 32px;
    overflow-x: clip;
}

.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;
}

.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) {
    .grid-3ba2a58 {
        grid-template-columns: 1fr;
    }
}


/* ---- 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;
}

@media (max-width: 600px) {
    /* the stair itself is shallower on a narrow screen — see ROW_STEP_NARROW */

    .topics-12772ff {
        display: none;
    }

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

/* a phone on its side — see `.pinned` in styles.css. The legend joins the
   title's row, scrolling sideways when it will not fit, so the plot keeps
   room for more than a row or two. */
@media (max-height: 520px) {
    .legend-12772ff {
        flex: 0 1 auto;
        flex-wrap: nowrap;
        min-width: 0;
        margin: 0 0 0 auto;
        overflow-x: auto;
    }

    .chip-12772ff {
        flex: 0 0 auto;
    }

    .stage-12772ff {
        margin-top: 12px;
    }
}


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

.topbar-db2f0c2 {
    position: sticky;
    top: 0;
    /* above plates that open their own stacking context (hovered cards, the
       ocean pursuit) as they scroll underneath */
    z-index: 10;
    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;
    }
}

/* four links, a wordmark and the switch only just fit a 390px phone; below
   that they give up some air rather than push the switch off screen */
@media (max-width: 380px) {
    .topbar-db2f0c2 {
        padding: 10px 12px;
        gap: 8px;
        font-size: 0.92rem;
    }

    .trailing-db2f0c2 {
        gap: 10px;
    }

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

/* a phone on its side: the bar sticks over every page, so it hands back what
   height it can */
@media (max-height: 520px) {
    .topbar-db2f0c2 {
        padding-block: 8px;
    }
}


.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 {
    margin-top: 28px;
    padding-bottom: 40px;
    overflow-x: clip;
    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;
    }
}

/* ---- while the body is on its way ------------------------------------- */

/* Same margin and rhythm as `.body`, so the prose lands where the lines were
   and the page does not jump. */
.skeleton-c35c8cf {
    margin-top: 28px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: calc(1.8 * 0.95rem - 0.72em);
}

.line-c35c8cf {
    height: 0.72em;
    border-radius: 2px;
    background-color: color-mix(in srgb, var(--rule) 30%, transparent);
    animation: breathe 1.4s ease-in-out infinite;
}

@keyframes breathe {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.9;
    }
}

/* A reader who asked for the whole post and got none of it deserves the
   reason and a way through. */
.failed-c35c8cf {
    margin-top: 28px;
    padding: 18px 20px;
    background-color: var(--bg-alt);
    border-left: 2px solid var(--accent);
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--fg-muted);
}

.failed-c35c8cf p {
    margin: 0;
}

.failed-c35c8cf p + p {
    margin-top: 8px;
}

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

@media (prefers-reduced-motion: reduce) {
    .line-c35c8cf {
        animation: none;
    }
}


.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;
    }
}