/* Personal index typography and spacing. The colour field is shared separately. */
.home-page {
    --paper-0: #f7f6f2;
    --ink-0: #343633;
    --ink-2: #60635f;
    --line-strong: #d3d4cd;
    --accent-cyan: #556b91;
    isolation: isolate;
}

.home-page::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 1200px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104'%3E%3Cpath d='M104 0H0V104' fill='none' stroke='%23646c72' stroke-width='.6' stroke-dasharray='.6 7'/%3E%3C/svg%3E") center top;
    opacity: .2;
    mask-image: linear-gradient(#0009, #0006 55%, transparent);
}

.home-index, .home-page .site-header, .home-page .site-footer {
    width: min(100% - 112px, 1040px);
    margin-inline: auto;
}

.home-page p, .home-page h1, .home-page h2, .home-page h3, .home-page figure { margin: 0; }
.home-page main p { color: var(--ink-2); }
.home-page main a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.home-page main a:hover { color: #465d83; text-decoration: underline; }
.home-page main a:focus-visible { outline: 2px solid #556b91; outline-offset: 5px; }

.opening {
    position: relative;
    padding: 70px 0 108px 74px;
}

.introduction { position: relative; z-index: 1; width: min(100%, 420px); }
.home-page h1 { font-size: 56px; line-height: 1.03; letter-spacing: -.025em; margin-bottom: 26px; }
.introduction > p { font: 14px/1.8 var(--font-sans); max-width: 410px; margin-top: 17px; }
.introduction .intro-links { display: flex; gap: 26px; margin-top: 25px; font-size: 12px; }
.intro-links a { text-decoration: underline; text-decoration-color: #adb4bb; }

.margin-study {
    position: absolute;
    top: 25px;
    right: -34px;
    width: 440px;
    height: 465px;
    overflow: clip;
}


.graph-sketch {
    position: absolute;
    top: 73px;
    left: 26px;
    width: 285px;
    color: #596068;
}
.graph-sketch svg { display: block; width: 100%; height: auto; }
.graph-sketch > span { display: block; margin: -2px 0 0 101px; font: 10px/1.6 var(--font-mono); color: #696f76; white-space: nowrap; }
.graph-sketch > span span { margin-left: 8px; }
.graph-sketch:hover { color: #364d79; }

.index-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: 110px;
    row-gap: 85px;
    align-items: start;
}

.index-layout > * { min-width: 0; }
.index-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; border-top: 1px solid var(--line-strong); padding-top: 12px; }
.home-page .index-heading h2 { font: 12px/1.6 var(--font-sans); letter-spacing: .01em; color: #444841; }
.index-heading > a { font: 10px/1.6 var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.entry-meta { font: 10px/1.6 var(--font-mono); }
.home-page .entry-meta { color: #637085; }
.entry-link { display: inline-block; font: 11px/1.7 var(--font-sans); text-decoration: underline; text-decoration-color: #b7bec7; }
.entry-link span { margin-left: 4px; }

.paper-entry { max-width: 460px; padding-left: 28px; }
.paper-entry + .paper-entry { margin-top: 35px; }
.paper-entry h3 { font-size: 31px; line-height: 1.1; letter-spacing: -.01em; margin-block: 9px 13px; }
.paper-entry + .paper-entry h3 { font-size: 27px; }
.paper-entry > p:not(.entry-meta) { font: 13px/1.8 var(--font-sans); max-width: 405px; }
.paper-entry .entry-link { margin-top: 13px; }

.notes-index { margin-top: 96px; }
.notes-index .index-heading { border-top-style: dotted; }
.essay-list { list-style: none; padding: 0; margin: 0 0 24px; }
.essay-list li + li { margin-top: 25px; }
.essay-list a { display: inline-block; font: 24px/1.1 var(--font-serif); color: var(--ink-0); max-width: 265px; }
.essay-list span { display: block; font: 10px/1.6 var(--font-sans); margin-top: 7px; color: #696c67; }

.work-index { margin-left: 74px; }
.work-entry + .work-entry { margin-top: 26px; }
.work-entry h3 { font: 23px/1.18 var(--font-serif); margin-bottom: 8px; }
.work-entry > p:not(.entry-meta) { font: 12px/1.8 var(--font-sans); }
.work-entry .entry-meta { margin-bottom: 8px; }

.off-hours { padding: 43px 22px 0 0; }
.off-hours .index-heading { border: 0; padding: 0; margin-bottom: 18px; }
.off-hours > p { font: 13px/1.9 var(--font-sans); }
.off-hours > p + p { margin-top: 15px; font-size: 12px; }
.off-hours a { text-decoration: underline; text-decoration-color: #b7bec7; }
.thread-sketch { width: 165px; height: auto; margin: 28px 0 0 40px; color: #777da3; opacity: .65; }

.bookshelf { margin: 85px 0 70px 74px; }
.bookshelf > .index-heading { margin-bottom: 28px; }
.reading-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; }
.home-page .shelf-label { font: 11px/1.6 var(--font-sans); color: var(--ink-2); margin-bottom: 16px; }
.bookshelf .book-grid { border: 0; gap: 18px; }
.bookshelf .book-card { grid-template-columns: 37px minmax(0, 1fr); gap: 13px; padding: 0; border: 0; }
.bookshelf .book-cover { width: 37px; border-radius: 0; box-shadow: none; opacity: .86; }
.bookshelf .book-cover img { filter: saturate(.65); }
.bookshelf .book-title { font: 17px/1.25 var(--font-serif); }
.bookshelf .book-author { font: 11px/1.6 var(--font-sans); margin: 5px 0 0; }
.bookshelf .book-summary, .bookshelf .book-meta { display: none; }
.reading-updated { margin-top: 24px !important; font: 9px/1.7 var(--font-mono); }

@media (min-width: 1500px) {
    .opening { padding-top: 91px; padding-bottom: 123px; }
    .margin-study { top: 45px; }
}

@media (max-width: 1100px) {
    .home-index, .home-page .site-header, .home-page .site-footer { width: calc(100% - 80px); }
    .opening { padding-left: 30px; }
    .introduction { width: min(53%, 420px); }
    .margin-study { width: 365px; right: -25px; top: 39px; }
    .graph-sketch { width: 250px; left: 16px; }
    .index-layout { column-gap: 70px; row-gap: 70px; }
    .paper-entry { padding-left: 12px; }
    .work-index, .bookshelf { margin-left: 30px; }
    .reading-columns { gap: 45px; }
}

@media (max-width: 800px) {
    .home-index, .home-page .site-header, .home-page .site-footer { width: calc(100% - 48px); }
    .opening { padding: 52px 0 75px 14px; }
    .home-page h1 { font-size: 49px; }
    .introduction { width: 57%; }
    .introduction > p { font-size: 13px; }
    .margin-study { width: 220px; height: 350px; right: -8px; top: 54px; }
    .graph-sketch { width: 200px; left: -2px; top: 74px; }
    .graph-sketch > span { margin-left: 50px; font-size: 9px; }
    .index-layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 42px; row-gap: 60px; }
    .index-heading { gap: 12px; }
    .index-heading > a { font-size: 9px; }
    .paper-entry { padding-left: 0; }
    .paper-entry h3 { font-size: 28px; }
    .paper-entry + .paper-entry h3 { font-size: 25px; }
    .notes-index { margin-top: 80px; }
    .essay-list a { font-size: 23px; }
    .work-index { margin-left: 15px; }
    .off-hours { padding-right: 0; }
    .bookshelf { margin: 66px 0 50px 15px; }
    .reading-columns { gap: 34px; }
}

@media (max-width: 600px) {
    .home-index, .home-page .site-header, .home-page .site-footer { width: calc(100% - 40px); }
    .opening { padding: 42px 0 43px; }
    .introduction { width: 100%; max-width: 430px; }
    .home-page h1 { font-size: clamp(43px, 11.5vw, 57px); margin-bottom: 23px; }
    .introduction > p { font-size: 14px; max-width: 410px; }
    .introduction .intro-links { font-size: 12px; margin-top: 23px; }
    .margin-study { position: relative; top: auto; right: auto; width: 225px; height: 203px; margin: 21px -2px -8px auto; }
    .graph-sketch { top: 0; left: 1px; width: 195px; }
    .graph-sketch > span { margin: -2px 0 0 67px; }
    .index-layout { grid-template-columns: 1fr; row-gap: 46px; }
    .index-heading { margin-bottom: 24px; }
    .home-page .index-heading h2 { font-size: 13px; }
    .index-heading > a { font-size: 10px; }
    .paper-entry { max-width: 460px; }
    .paper-entry h3 { font-size: 32px; }
    .paper-entry + .paper-entry h3 { font-size: 28px; }
    .paper-entry > p:not(.entry-meta) { font-size: 14px; line-height: 1.8; }
    .entry-meta { font-size: 10px; }
    .entry-link { font-size: 12px; }
    .notes-index { margin: 0 0 0 28px; }
    .essay-list a { font-size: 27px; max-width: 340px; }
    .essay-list span { font-size: 11px; }
    .work-index { margin-left: 0; }
    .work-entry h3 { font-size: 26px; }
    .work-entry > p:not(.entry-meta) { font-size: 13px; }
    .off-hours { padding: 0 0 0 28px; max-width: 430px; }
    .off-hours > p { font-size: 14px; }
    .thread-sketch { width: 125px; margin: 18px 0 0 auto; display: block; }
    .bookshelf { margin: 49px 0 43px; }
    .reading-columns { grid-template-columns: 1fr; gap: 29px; }
    .home-page .shelf-label { font-size: 12px; }
    .bookshelf .book-card { grid-template-columns: 41px minmax(0, 1fr); gap: 14px; }
    .bookshelf .book-cover { width: 41px; }
    .bookshelf .book-title { font-size: 21px; }
    .bookshelf .book-author { font-size: 12px; }
    .reading-updated { font-size: 9px; }
}

@media (max-width: 360px) {
    .home-index, .home-page .site-header, .home-page .site-footer { width: calc(100% - 32px); }
    .notes-index { margin-left: 18px; }
    .off-hours { padding-left: 18px; }
}

@media print {
    .home-index { width: 100%; }
    .home-page::after, .margin-study, .thread-sketch { display: none; }
    .opening { padding: 20px 0 35px; }
    .introduction { width: 100%; }
    .index-layout { column-gap: 35px; row-gap: 35px; }
    .notes-index, .work-index, .bookshelf { margin-left: 0; }
    .paper-entry, .work-entry, .book-card { break-inside: avoid; }
}