:root {
    --ink: #222;
    --muted: #777788;
    --line: #e6e6e6;
    --bg: #f8f8f8;
    --serif: "IBM Plex Serif", "Times New Roman", serif;
    --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
}

.skip {
    position: absolute;
    left: -999px;
    top: 0;
}

.skip:focus {
    left: 12px;
    top: 12px;
    background: white;
    color: var(--ink);
    padding: 0.4rem 0.7rem;
}

.page {
    width: min(800px, calc(100% - 40px));
    margin: 40px auto 72px;
}

.page:has(.prose) {
    width: min(980px, calc(100% - 48px));
}

a {
    color: var(--ink);
    text-underline-offset: 0.15em;
}

a:hover {
    color: #000;
}

a:focus-visible {
    outline: 2px solid #222;
    outline-offset: 3px;
}

.site-nav {
    display: flex;
    gap: 1.15rem;
    margin: 0 0 1.6rem;
}

.site-nav a {
    color: var(--ink);
    text-decoration: none;
}

.site-nav a[aria-current="page"] {
    font-weight: 700;
}

h1 {
    margin: 0 0 0.85rem;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.32;
}

.intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 2rem;
    align-items: start;
}

.intro p {
    margin: 0 0 1em;
}

.intro p:not(.contact),
.desc,
.section > p,
.project,
.prose p,
.prose li {
    hyphens: auto;
    text-align: justify;
    text-align-last: left;
}

.portrait {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 1.75rem;
}

.contact {
    margin-top: 0.4rem;
}

.section {
    margin-top: 2.4rem;
}

.ctitle {
    margin: 0 0 0.7rem;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.32;
}

.entry {
    display: grid;
    grid-template-columns: 6.2rem 3.4rem minmax(0, 1fr);
    column-gap: 0.65rem;
}

.timespan {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    padding-top: 0.1rem;
    font-size: 14px;
    line-height: 1.35;
    color: #999;
    text-align: right;
}

.ico {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ico::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0.45rem;
    bottom: 0;
    width: 2px;
    background: #cfcfcf;
    transform: translateX(-50%);
}

.entry:last-child .ico::before {
    bottom: auto;
    height: 0.45rem;
}

.entry-dot {
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
    margin-top: 0.28rem;
    border: 2px solid white;
    border-radius: 50%;
    background: #cfcfcf;
}

.ico img {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    margin-top: 0.65rem;
    object-fit: contain;
    border-radius: 5px;
    background: white;
}

.desc {
    margin: 0;
    padding-bottom: 1.4rem;
}

.entry:last-child .desc {
    padding-bottom: 0;
}

.plain-list {
    margin: 0.2rem 0 0;
    padding-left: 1.2rem;
}

.plain-list li {
    margin: 0.3rem 0;
}

.project {
    margin: 0 0 0.9rem;
}

.prose {
    max-width: none;
}

.lede {
    margin: 0;
    color: #555;
}

.post-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.post-list li {
    margin: 0 0 1.15rem;
}

.post-list li h2 {
    margin: 0.1rem 0 0.25rem;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.post-list li h2 a {
    color: var(--ink);
}

.post-list li p {
    margin: 0;
    color: #555;
}

.post-list .post-date {
    margin: 0 0 0.15rem;
    font-size: 14px;
    color: #999;
}

.prose h2 {
    margin: 1.6rem 0 0.5rem;
    font-size: 20px;
    font-weight: 700;
}

.prose h3 {
    margin: 1.3rem 0 0.4rem;
    font-size: 18px;
    font-weight: 700;
}

.prose p,
.prose ul,
.prose ol,
.prose pre,
.prose blockquote,
.prose table {
    margin: 0 0 1em;
}

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

.prose blockquote {
    margin-left: 0;
    padding-left: 1rem;
    border-left: 3px solid #ccc;
    color: #444;
}

.prose hr {
    border: 0;
    height: 1px;
    margin: 1.6rem 0;
    background: var(--line);
}

.prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
}

.prose img.plan {
    width: min(400px, 100%);
    margin: 1.2rem auto;
}

.prose img.plan.wide {
    width: min(640px, 100%);
}

.prose img + em {
    display: block;
    max-width: 640px;
    margin: 0 auto;          /* center the caption under wide images */
    text-align: center;
    font-size: 0.78em;
}

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

.prose pre {
    padding: 0.85rem 1rem;
    overflow-x: auto;
    background: #f3f3f3;
    border: 1px solid var(--line);
    line-height: 1.45;
}

.prose pre code {
    font-size: 0.84rem;
}

.prose .codehilite {
    margin: 1rem 0;
}

.prose .codehilite pre {
    margin: 0;
}

.prose .codehilite .hll { background-color: #ffffcc }
.prose .codehilite .c { color: #888 }
.prose .codehilite .err { color: #F00; background-color: #FAA }
.prose .codehilite .k { color: #080; font-weight: bold }
.prose .codehilite .o { color: #333 }
.prose .codehilite .ch { color: #888 }
.prose .codehilite .cm { color: #888 }
.prose .codehilite .cp { color: #579 }
.prose .codehilite .cpf { color: #888 }
.prose .codehilite .c1 { color: #888 }
.prose .codehilite .cs { color: #C00; font-weight: bold }
.prose .codehilite .gd { color: #A00000 }
.prose .codehilite .ge { font-style: italic }
.prose .codehilite .ges { font-weight: bold; font-style: italic }
.prose .codehilite .gr { color: #F00 }
.prose .codehilite .gh { color: #000080; font-weight: bold }
.prose .codehilite .gi { color: #00A000 }
.prose .codehilite .go { color: #888 }
.prose .codehilite .gp { color: #C65D09; font-weight: bold }
.prose .codehilite .gs { font-weight: bold }
.prose .codehilite .gu { color: #800080; font-weight: bold }
.prose .codehilite .gt { color: #04D }
.prose .codehilite .kc { color: #080; font-weight: bold }
.prose .codehilite .kd { color: #080; font-weight: bold }
.prose .codehilite .kn { color: #080; font-weight: bold }
.prose .codehilite .kp { color: #038; font-weight: bold }
.prose .codehilite .kr { color: #080; font-weight: bold }
.prose .codehilite .kt { color: #339; font-weight: bold }
.prose .codehilite .m { color: #60E; font-weight: bold }
.prose .codehilite .s,
.prose .codehilite .sa,
.prose .codehilite .sb,
.prose .codehilite .dl,
.prose .codehilite .s2,
.prose .codehilite .sh,
.prose .codehilite .s1 { color: #BA2121; background-color: #FFF0F0 }
.prose .codehilite .na { color: #00C }
.prose .codehilite .nb { color: #007020 }
.prose .codehilite .nc { color: #B06; font-weight: bold }
.prose .codehilite .no { color: #036; font-weight: bold }
.prose .codehilite .nd { color: #555; font-weight: bold }
.prose .codehilite .ni { color: #800; font-weight: bold }
.prose .codehilite .ne { color: #F00; font-weight: bold }
.prose .codehilite .nf { color: #06B; font-weight: bold }
.prose .codehilite .nl { color: #970; font-weight: bold }
.prose .codehilite .nn { color: #0E84B5; font-weight: bold }
.prose .codehilite .nt { color: #070 }
.prose .codehilite .nv { color: #963 }
.prose .codehilite .ow { color: #000; font-weight: bold }
.prose .codehilite .w { color: #BBB }
.prose .codehilite .mb { color: #60E; font-weight: bold }
.prose .codehilite .mf { color: #60E; font-weight: bold }
.prose .codehilite .mh { color: #058; font-weight: bold }
.prose .codehilite .mi { color: #00D; font-weight: bold }
.prose .codehilite .mo { color: #40E; font-weight: bold }
.prose .codehilite .sc { color: #04D }
.prose .codehilite .sd { color: #D42; font-style: italic }
.prose .codehilite .se { color: #666; font-weight: bold; background-color: #FFF0F0 }
.prose .codehilite .si { background-color: #EEE }
.prose .codehilite .sx { color: #D20; background-color: #FFF0F0 }
.prose .codehilite .sr { color: #000; background-color: #FFF0FF }
.prose .codehilite .ss { color: #A60 }
.prose .codehilite .bp { color: #007020 }
.prose .codehilite .fm { color: #06B; font-weight: bold }
.prose .codehilite .vc { color: #369 }
.prose .codehilite .vg { color: #D70; font-weight: bold }
.prose .codehilite .vi { color: #33B }
.prose .codehilite .vm { color: #963 }
.prose .codehilite .il { color: #00D; font-weight: bold }

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.prose th,
.prose td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.prose .cornell {
    width: calc(100vw - 64px);
    margin: 1.4rem 0 1.6rem;
    margin-left: calc(50% - 50vw + 32px);
    margin-right: calc(50% - 50vw + 32px);
    border-top: 2px solid var(--ink);
}

.prose .cornell-source {
    margin: 0;
    padding: 0.65rem 0;
    font-size: 14px;
    color: var(--muted);
}

.prose .cornell-pair {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: 0.85rem;
}

.prose .cue {
    padding: 0.85rem 1rem 0.85rem 0;
    border-right: 2px solid var(--ink);
    color: #555;
}

.prose .note {
    padding: 0.85rem 1.5rem 0.85rem 0;
}

.prose .cornell-summary {
    padding: 0.9rem 1.5rem 0.1rem 0;
    border-top: 2px solid var(--ink);
}

.prose .cornell p,
.prose .cornell li {
    hyphens: manual;
    text-align: left;
    text-align-last: auto;
}

.prose .note p,
.prose .note li,
.prose .cornell-summary p {
    hyphens: auto;
    text-align: justify;
    text-align-last: left;
}

.prose .cue p,
.prose .note p,
.prose .cornell-summary p {
    margin: 0 0 0.55em;
}

.prose .cue p:last-child,
.prose .note p:last-child,
.prose .cornell-summary p:last-child {
    margin-bottom: 0;
}

.prose .note ul,
.prose .note ol {
    margin: 0.35rem 0 0.15rem;
}

.back {
    margin: 2rem 0 0;
}

@media (max-width: 700px) {
    .intro {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }

    .portrait {
        width: 200px;
        order: -1;
        margin-top: 0;
    }

    .entry {
        grid-template-columns: 2.6rem minmax(0, 1fr);
        column-gap: 0.7rem;
    }

    .timespan {
        grid-column: 2;
        grid-row: 1;
        flex-direction: row;
        align-items: baseline;
        gap: 0.35rem;
        text-align: left;
    }

    .timespan span + span::before {
        content: "–";
    }

    .ico {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .desc {
        grid-column: 2;
        grid-row: 2;
    }

    .ico img {
        width: 40px;
        height: 40px;
    }

    .intro p:not(.contact),
    .desc,
    .section > p,
    .project,
    .prose p,
    .prose li {
        hyphens: manual;
        text-align: left;
    }

    .prose .cornell {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .prose .cornell-pair {
        grid-template-columns: 1fr;
    }

    .prose .note p,
    .prose .note li,
    .prose .cornell-summary p {
        hyphens: manual;
        text-align: left;
    }

    .prose .cue {
        padding: 0.75rem 0 0;
        border-right: 0;
        font-size: 15px;
    }

    .prose .note {
        padding: 0.3rem 0 0.8rem;
    }
}