/* Loaded only for the posts index, post archives and individual posts. */
html:has(.writings-index), html:has(.writing-reading) { background:#fff; }
body.keith-writing { --paper:#fff; background:#fff; }
body.keith-writing main.wrap { grid-column:1 / -1; padding:clamp(32px, 5vw, 72px) 0 0; }
.writings-index, .writing-reading { max-width:1080px; margin:0 auto; }
.writing-year { display:grid; grid-template-columns:112px minmax(0, 1fr); column-gap:clamp(32px, 5vw, 80px); }
main.wrap .writing-year-label { margin:12px 0 0; color:#666; font:400 15px/1.5 Arial, Helvetica, sans-serif; letter-spacing:.02em; }
.writing-year-posts { min-width:0; }
article.writing-preview, article.writing-article { border:0; padding:0; }
article.writing-preview { margin:0 0 clamp(88px, 10vw, 144px); }
main.wrap .writing-title { font-family:Arial, Helvetica, sans-serif; font-weight:700; letter-spacing:-.045em; line-height:1.06; text-wrap:balance; overflow-wrap:anywhere; }
main.wrap .writing-title.writing-title-short { font-size:clamp(44px, 6.6vw, 88px); }
main.wrap .writing-title.writing-title-medium { font-size:clamp(36px, 5.2vw, 68px); }
main.wrap .writing-title.writing-title-long { font-size:clamp(32px, 4.3vw, 56px); }
main.wrap .writing-preview .writing-title { margin:0 0 20px; max-width:17ch; }
.writing-title a { color:#161615; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.13em; text-decoration-color:#aaa; }
.writing-title a:hover { color:#555; text-decoration-color:currentColor; }
.writings-index a:focus-visible, .writing-reading a:focus-visible { outline:2px solid currentColor; outline-offset:6px; }
.writing-date { display:block; color:#646464; font:400 14px/1.6 Arial, Helvetica, sans-serif; }
main.wrap p.writing-opening { max-width:37rem; margin:22px 0 0; font-family:var(--serif); font-size:21px; line-height:1.55; color:#41413f; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; max-height:4.65em; overflow:hidden; }
.writing-reading { max-width:900px; }
.writing-header { margin:0 0 clamp(48px, 6vw, 80px); }
main.wrap .writing-header .writing-title { margin:0 0 24px; max-width:18ch; }
.writing-body { max-width:660px; margin:0 auto; font-family:var(--serif); font-size:21px; line-height:1.75; overflow-wrap:anywhere; }
main.wrap .writing-body p, main.wrap .writing-body ul, main.wrap .writing-body ol { font-size:inherit; line-height:inherit; margin-bottom:1.4em; }
main.wrap .writing-body h2, main.wrap .writing-body h3 { margin:2em 0 .7em; font-family:Arial, Helvetica, sans-serif; font-size:1.5em; font-weight:700; line-height:1.2; }
.writing-body figure { margin:2.5em 0; }
.writing-body blockquote { margin:2em 0; padding-left:1.5em; font-style:italic; }
.writing-body iframe, .writing-body video { max-width:100%; }
.writing-body pre { max-width:100%; overflow:auto; }
.writing-body .wp-block-table { overflow:auto; }
.writing-body figcaption { font-size:15px; line-height:1.5; }
.writing-return, .writing-reading #comments { max-width:660px; margin:64px auto 0; }
.writing-return { font-size:15px; }
.writings-index .posts-navigation { margin-left:calc(112px + clamp(32px, 5vw, 80px)); }
@media (max-width:760px) {
 .writing-year { grid-template-columns:64px minmax(0, 1fr); gap:24px; }
 main.wrap .writing-year-label { margin-top:7px; font-size:14px; }
 .writings-index .posts-navigation { margin-left:88px; }
 .writing-body { font-size:20px; line-height:1.7; }
}
@media (max-width:540px) {
 .writing-year { display:block; }
 main.wrap .writing-year-label { margin:0 0 28px; }
 main.wrap .writing-preview .writing-title { margin-bottom:16px; }
 main.wrap p.writing-opening { font-size:19px; -webkit-line-clamp:4; line-clamp:4; max-height:6.2em; margin-top:20px; }
 .writings-index .posts-navigation { margin-left:0; }
 .writing-header { margin-bottom:44px; }
 .writing-body { font-size:19px; }
}
/* A wrapped title is one continuous pointer and keyboard target. */
.writing-title a { display:block; }
.writing-reading #comments { font-size:16px; }
.writing-reading #comments .comment-form-cookies-consent { display:flex; align-items:baseline; gap:10px; }
.writing-reading #comments input[type="checkbox"] { width:auto; flex:none; }
.writing-reading #comments .comment-form-cookies-consent label { margin:0; }