/* Layout and typography adapted from aarnphm's Quartz styles. */
@font-face{font-family:"Neue Montreal";src:url(fonts/PPNeueMontreal-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url(fonts/PPNeueMontreal-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url(fonts/PPNeueMontreal-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url(fonts/PPNeueMontreal-LightItalic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url(fonts/PPNeueMontreal-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Austin News Deck";src:url(fonts/AustinNewsDeck-Light-Web.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Fira Code";src:url(fonts/FiraCode-Variable.ttf) format("truetype");font-weight:300 700;font-display:swap}

:root {
  --paper:#100f0f;--line:#282726;--muted:#575653;--subtle:#878580;
  --ink:#cecdc3;--accent:#f89a8a;--highlight:#879a39;
  --body:"Neue Montreal",Arial,sans-serif;--heading:"Austin News Deck",Georgia,serif;
  --title:var(--heading);
  /* Aaron's nine-column grid: all reading content shares column five. */
  --column:calc((100vw - 108px) / 9);
  --page-left:calc(54px + 2 * var(--column));--title-outset:clamp(6px,1vw,16px);
  --reading-width:calc(3 * var(--column));--wide-width:calc(5 * var(--column));--stream-width:calc(4 * var(--column));
  color-scheme:dark;font-family:var(--body);font-size:16px;line-height:1.4;
  background:var(--paper);color:var(--ink);font-synthesis:style;font-kerning:normal;
}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;overflow-x:clip}
::selection{background:#4385be;color:var(--ink)}
a{color:var(--subtle);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
a:hover{background:var(--ink);color:var(--paper)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
input,button{font:inherit}button{cursor:pointer}
p{line-height:1.6;margin:1rem 0;text-align:justify}
h1,h2,h3,h4,h5,h6{font-family:var(--heading);font-weight:300;line-height:1.4;margin-bottom:0;color:var(--ink);overflow-wrap:anywhere}
h1{font-size:25.5px;margin-top:2.25rem}h2{font-size:23.8337px;margin-top:1.9rem}h3{font-size:22.2763px;margin-top:1.62rem}
h4{font-size:20.8207px;margin-top:1.5rem}h5{font-size:19.4601px;margin-top:1.5rem}h6{font-size:18.1885px;margin-top:1.5rem}
.site{width:var(--wide-width);margin-left:var(--page-left)}
.site-header{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.breadcrumb-container{height:40px;width:var(--reading-width);margin-left:var(--page-left);display:flex;align-items:center;gap:.25rem;font-family:var(--heading);font-style:italic;font-weight:300;color:var(--subtle);white-space:nowrap;overflow:hidden}
.breadcrumb-container a{flex-shrink:0;text-decoration:none}
.breadcrumb-container a:hover{background:transparent;color:var(--subtle);text-decoration:underline}
.current-crumb{overflow:hidden;text-overflow:ellipsis}
main{padding:15px 0 0}.home main{padding-top:56px;width:var(--reading-width)}
.home-card{position:relative}.home-card>p:first-child{margin-top:0;font-style:italic;color:var(--subtle)}.home-card>p:last-child{margin-bottom:0}
.elsewhere{border-top:1px solid var(--line);margin:1rem 0;padding-top:.9em}
.elsewhere h2{font:italic 400 1rem/1.4 var(--body);color:var(--subtle);margin:0}
.elsewhere nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-top:8px}
.article-title-block,.page-heading{width:calc(var(--reading-width) + var(--title-outset));margin:0 0 0 calc(-1 * var(--title-outset))}
.article-title{font-family:var(--title);font-size:2.6rem;font-weight:300;line-height:1.15;letter-spacing:-.035em;margin:0;text-align:left}
.description{font-weight:300;font-style:italic;color:var(--ink);line-height:1.6;margin:1rem 0}
.meta{display:grid;gap:.3rem;width:var(--reading-width);max-width:100%;margin:1.5rem 0 2rem;padding:.9rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.8rem;line-height:1.5;color:var(--subtle)}
.meta>div{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.75rem;align-items:baseline}
.meta dt{font:10px/1.5 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.meta dd{margin:0;font-weight:300}.meta dd .tag{font:inherit;letter-spacing:0;text-transform:none;text-decoration:underline;margin-right:.5rem;color:var(--subtle)}
.meta dd .tag::before{content:"#"}
.article{width:var(--reading-width);position:relative;display:flow-root}
.prose{overflow-wrap:anywhere;color:var(--ink)}
.prose img{display:block;max-width:100%;height:auto;margin:1.5rem 0}
.prose pre{border:1px solid var(--line);padding:1rem;overflow:auto;font-size:.8rem}
.prose code{font-family:ui-monospace,monospace;font-size:.85em}
.prose :not(pre)>code{padding:.1em .3em;background:var(--line)}
.prose table{display:block;max-width:100%;overflow:auto;border-collapse:collapse}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:.4rem .75rem;text-align:left}
.prose mark{background:#4385be;color:var(--ink)}
.prose hr{border:0;text-align:center;margin:2rem 0;height:1px}.prose hr::after{content:"⁂";color:var(--ink)}
.prose blockquote{position:relative;border:0;padding:0;margin:1.5rem 0 1.5rem 2.5rem}
.prose blockquote::before{content:"“";position:absolute;left:-2.5rem;top:0;transform:translateY(-.08em);font-family:var(--heading);font-size:3.5rem;line-height:1;color:var(--accent);opacity:.7}
.task{list-style:none}.task input{margin-right:.5rem;accent-color:var(--accent)}
.site-footer{width:var(--reading-width);height:1px;border-top:1px solid var(--line);margin:2rem 0}

/* Search and post rows share the reference's column and compact date gutter. */
.writing-layout{display:grid;grid-template-columns:minmax(0,calc(var(--reading-width) - 24px)) minmax(0,1fr);gap:48px;align-items:start}
.tag-intro{position:relative;display:flow-root;width:calc(var(--reading-width) - 24px);margin-bottom:2rem}
.tag-intro .article-title{margin-left:calc(-1 * var(--title-outset))}
.writing .tag,.writing .index-tag{font-family:"Fira Code",ui-monospace,monospace}
.notes-list{min-width:0}.search-box{margin:0 0 2.5rem}
.search-box input{width:100%;height:37px;padding:8px 12px;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font-size:.9rem;font-weight:300}
.search-box input::placeholder{color:var(--muted)}
.post-list{list-style:none;margin:0;padding:0}
.post-row{--rule-color:var(--ink);position:relative;display:flex;align-items:start;gap:9px;padding:14px 4px;min-width:0;color:var(--ink);border-top:1px solid var(--rule-color);transition:background-color .2s,border-color .2s}
.post-row:first-child{border-top-color:transparent}.post-row:last-child{border-bottom:1px solid transparent}
.post-link{display:grid;grid-template-columns:96px minmax(0,1fr);gap:9px;min-width:0;flex:1;color:inherit;text-decoration:none;line-height:1.35}
.post-link>span{text-align:justify;overflow-wrap:anywhere}.post-link:hover{background:transparent;color:inherit}
.post-link time{padding-top:1px;color:var(--muted);font:10px/1.5 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tag{color:var(--subtle);font:10px/1.5 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:0;background:transparent}
.row-tags{display:flex;gap:.5rem;max-width:36%;flex-wrap:wrap;justify-content:flex-end}
.tag-index p{margin-top:0}.note-count{font-size:.9rem}.text-tags{display:flex;flex-wrap:wrap;gap:.6rem .75rem;margin-top:2rem}
.index-tag{color:var(--subtle);font:10px/1.6 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.post-row.is-dimmed{--rule-color:var(--line);color:var(--muted)}
.post-row.is-dimmed .tag,.post-row.is-dimmed time{color:var(--muted)}.index-tag.is-dimmed{color:var(--muted)}
.post-row.is-matched,.post-row:hover,.post-row:focus-within{background:var(--line);border-top-color:var(--ink)}
.post-row.is-matched::after,.post-row:hover::after,.post-row:focus-within::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--ink);z-index:1;pointer-events:none}
.pagination{display:flex;justify-content:space-between;margin:2rem 0;width:var(--reading-width);color:var(--subtle);font-size:.85rem;font-weight:300;font-style:italic}

/* Text sidenotes: the label remains part of the sentence. */
.sidenote-pair{display:contents}
.sidenote-label{border-bottom:2px dashed var(--accent);position:relative;color:var(--accent);text-decoration:none;font:inherit;cursor:pointer;transition:border-color .2s,background-color .2s}
.sidenote-label[data-inline]::after{content:"";display:inline-block;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:.35em}
.sidenote-label[aria-expanded=true][data-inline]::after{transform:translateY(1px) rotate(225deg)}
.sidenote-label:hover,.sidenote-label:focus-visible,.sidenote-pair:has(.sidenote-content:hover) .sidenote-label{background:color-mix(in srgb,var(--accent) 10%,var(--paper));color:var(--accent);border-bottom-style:solid}
.sidenote-content{display:block;position:static;width:100%;margin:.5rem 0 1rem;padding:1rem;border:1px solid var(--muted);background:var(--paper);color:var(--ink);font-size:.9rem;line-height:1.5;text-align:justify;z-index:10}
.sidenote-content.is-side{position:absolute;width:17rem;margin:0}
.sidenote-content:hover,.sidenote-content:focus-within,.sidenote-pair:has(.sidenote-label:hover) .sidenote-content{border-color:var(--accent);border-style:dashed;background:color-mix(in srgb,var(--accent) 10%,var(--paper))}
.sidenote-content a{color:var(--accent)}
.sidenote-content .note-p,.sidenote-content .note-div,.sidenote-content .note-li{display:block;margin:.5rem 0}
.sidenote-content>:first-child{margin-top:0}.sidenote-content>:last-child{margin-bottom:0}

/* /stream: 190px date column, 2rem gutter, lighter body and italic metadata. */
.stream-page main{padding-top:0}
.stream-title-actions{display:flex;gap:.75rem;font-size:.85rem;font-style:italic;margin:.35rem 0 0;line-height:1.4}
.stream-title-actions a{color:var(--muted);text-decoration:none}.stream-title-actions a:hover{background:transparent;text-decoration:underline;color:var(--subtle)}
.stream{min-width:0;padding:1rem 0}.stream .search-box{margin-bottom:.5rem}
.mb-layout{width:var(--stream-width)}
.mb-layout.has-aside{width:auto;display:grid;grid-template-columns:minmax(0,var(--stream-width)) 15rem;gap:3rem;align-items:start}
.mb-aside{position:sticky;top:64px;margin-top:1rem;max-height:calc(100vh - 80px);overflow:auto}
.mb-aside p:first-child{margin-top:0}
.mb-aside-label{margin:1.5rem 0 .6rem;font:400 10px/1.5 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.months{display:flex;flex-direction:column}
.index-month{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;border-top:1px solid var(--line);color:var(--subtle);font-size:.85rem;font-weight:300;text-decoration:none}
.index-month span{font:10px/1.8 ui-monospace,monospace;color:var(--muted)}
.index-month:hover{background:var(--line);color:var(--ink)}
.mb-feed{position:relative}
.mb-month{position:sticky;top:41px;z-index:5;margin:1.5rem 0 0;padding:.7rem 0 .6rem;background:var(--paper);border-bottom:1px solid var(--line);font:italic 300 1.15rem/1.3 var(--heading);color:var(--subtle)}
.mb-feed>.mb-month:first-child{margin-top:.5rem}
.mb-entry{display:grid;grid-template-columns:7.75rem minmax(0,1fr);transition:opacity .2s}
.mb-entry.is-dimmed{opacity:.3}
.mb-when{display:block;padding:1.4rem 1.25rem 0 0;text-align:right;color:var(--muted);text-decoration:none}
.mb-when:hover{background:transparent;color:var(--muted)}
.mb-when time{display:block}
.mb-day{display:block;font:300 2.3rem/1 var(--heading);color:var(--ink)}
.mb-meta{display:block;margin-top:.35rem;font:10px/1.5 ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mb-day+.mb-meta+.mb-meta{margin-top:0}
.mb-card{position:relative;min-width:0;padding:1.4rem 0 1.6rem 1.5rem;border-left:1px solid var(--line)}
.mb-card::before{content:"";position:absolute;left:-4px;top:1.9rem;width:7px;height:7px;border:1px solid var(--subtle);border-radius:50%;background:var(--paper);transition:background-color .2s,border-color .2s}
.mb-entry:hover .mb-card::before,.mb-entry:focus-within .mb-card::before{background:var(--accent);border-color:var(--accent)}
.mb-title{margin:0;font-size:1.6rem;line-height:1.2}
.mb-title a{color:inherit;text-decoration:none}.mb-title a:hover{background:transparent;color:inherit;text-decoration:underline;text-underline-offset:4px}
.mb-description{margin:.4rem 0 0;font-style:italic;font-weight:300;color:var(--subtle)}
.mb-untitled .mb-body{margin-top:0}.mb-untitled .mb-card::before{top:2.05rem}
.mb-untitled .mb-description+.mb-body{margin-top:.5rem}
.mb-body{margin-top:.75rem;color:var(--ink);line-height:1.65}
.mb-body p{margin:0 0 .85rem;text-align:left;line-height:1.65}.mb-body>:last-child{margin-bottom:0}
.mb-body blockquote{margin:1rem 0;padding-left:1rem;border-left:2px solid var(--accent);color:var(--subtle)}.mb-body blockquote::before{content:none}
.mb-tags{display:flex;flex-wrap:wrap;gap:.25rem .85rem;margin-top:1rem}
.mb-tags .tag{font:10px/1.5 ui-monospace,monospace;letter-spacing:.06em;text-transform:none;color:var(--subtle);text-decoration:none}
.mb-tags .tag::before{content:"#"}.mb-tags .tag:hover{background:transparent;color:var(--ink);text-decoration:underline}
/* /coffee: one large month at a time; each cup previews on hover or focus. */
.coffee-page main{padding-top:0}.coffee-post main{padding-top:28px}
.coffee-years{flex-wrap:wrap;margin-bottom:0}.coffee-years a[aria-current]{color:var(--ink);text-decoration:underline}
.coffee-month-head,.coffee-calendar{width:var(--wide-width)}
.coffee-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:1rem;margin-top:1.75rem;font-size:.85rem;font-style:italic;font-weight:300;color:var(--subtle)}
.coffee-pager a{white-space:nowrap}.coffee-pager a:last-child{justify-self:end}
.coffee-month-name{margin:0;font-size:1.6rem;font-style:italic;text-align:center}
.coffee-count{margin:.25rem 0 1rem;font-size:.85rem;font-style:italic;font-weight:300;color:var(--subtle);text-align:center}
.coffee-grid{width:100%;border-collapse:collapse;table-layout:fixed}
.coffee-grid th{padding:0 0 .4rem;font:400 10px/1.5 ui-monospace,monospace;letter-spacing:.08em;color:var(--muted);text-align:left;padding-left:6px}
.coffee-grid abbr{text-decoration:none}
.coffee-grid td{position:relative;height:6.5rem;padding:0;border-top:1px solid var(--line);vertical-align:top}
.coffee-grid .day{position:absolute;top:6px;left:6px;font:10px/1.2 ui-monospace,monospace;color:var(--muted)}
.coffee-grid td[aria-current=date] .day{color:var(--paper);background:var(--ink);padding:0 3px;left:3px}
.coffee-grid .has-coffee .day{color:var(--subtle)}
.coffee-entries{position:absolute;inset:20px 4px 2px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;overflow:visible}
.coffee-entry{position:relative;display:block}
.coffee-mark{display:flex;align-items:center;gap:4px;color:var(--ink);text-decoration:none;font:10px/1 ui-monospace,monospace;white-space:nowrap}
.coffee-mark:hover{background:transparent;color:var(--ink)}
.coffee-mark svg{display:block;width:28px;height:28px;flex:none;fill:color-mix(in srgb,var(--accent) 65%,var(--paper));stroke:color-mix(in srgb,var(--accent) 65%,var(--paper));stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.coffee-mark svg .cup-body{fill:color-mix(in srgb,var(--accent) 30%,var(--paper))}
.coffee-mark:hover svg,.coffee-entry:focus-within .coffee-mark svg{stroke:var(--accent)}
.coffee-time{color:var(--subtle)}
.coffee-mark:hover .coffee-time,.coffee-entry:focus-within .coffee-time{color:var(--ink)}
.coffee-preview{display:none;position:absolute;z-index:20;top:calc(100% - 2px);left:-4px;width:240px;padding-top:6px}
.coffee-grid td:nth-child(n+5) .coffee-preview{left:auto;right:-4px}
.coffee-entry:hover .coffee-preview,.coffee-entry:focus-within .coffee-preview{display:block}
.coffee-preview-link{display:block;border:1px solid var(--subtle);background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:0 8px 24px #0005;text-align:left}
.coffee-preview-link:hover{background:var(--paper);color:var(--ink)}
.coffee-preview-image{display:block;width:100%;height:140px;object-fit:cover}
.coffee-preview-copy{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem 1rem}
.coffee-preview-date{font:10px/1.5 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.coffee-preview-title{font:300 1.35rem/1.15 var(--heading)}
.coffee-preview-meta{font-size:.85rem;font-weight:300;line-height:1.4;color:var(--subtle)}
.coffee-back{margin-top:2.5rem;font-style:italic;font-size:.85rem}
.coffee-page .site-footer,.coffee-post .site-footer{display:none}
.project-intro{width:var(--stream-width);display:flex;align-items:flex-start;gap:1.5rem;margin:1.5rem 0 .5rem;padding:1.25rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.project-intro-text{flex:1;min-width:0}.project-intro-text>:first-child{margin-top:0}.project-intro-text>:last-child{margin-bottom:0}
.project-intro-text p{text-align:left}
.project-intro-narrow{display:none;flex-direction:column;gap:1rem}
.mb-aside .project-photo-side{width:100%;max-width:100%;margin:0 0 1rem}
.mb-about{font-size:.95rem}.mb-about>:first-child{margin-top:0}.mb-about>:last-child{margin-bottom:0}
.mb-about p{text-align:left;margin:.7rem 0}.mb-about ul,.mb-about ol{margin:.7rem 0;padding-left:1.2rem}.mb-about li{margin:.3rem 0;line-height:1.5}
.project-photo{flex:none;display:block;width:9rem;max-width:35%;height:auto;border:1px solid var(--line)}
.projects-page .post-list{margin-top:.5rem}
.post-link.project-only{grid-template-columns:minmax(0,1fr);font-size:1.15rem}
.row-desc{display:block;margin-top:.3rem;color:var(--muted);font-weight:300;font-size:.85rem;line-height:1.4}
/* /books: covers in a grid, each with a progress bar and dates. */
.books-page main{padding-top:0}.books-page .site-footer,.book-post .site-footer{display:none}
.book-grid{list-style:none;margin:2rem 0 0;padding:0;width:var(--wide-width);display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:2.5rem 2rem}
.book{min-width:0}
.book-cover{display:block;aspect-ratio:2/3;overflow:hidden;border:1px solid var(--line);background:var(--line);transition:border-color .2s}
a.book-cover:hover{background:var(--line);border-color:var(--subtle)}
.book-cover img{display:block;width:100%;height:100%;object-fit:cover}
.book-blank{display:flex;height:100%;align-items:center;justify-content:center;padding:1rem;text-align:center;font:300 1.2rem/1.2 var(--heading);color:var(--subtle)}
.book-progress{display:flex;align-items:center;gap:.6rem;margin-top:.8rem}
.book-bar{flex:1;height:3px;background:var(--line)}.book-bar span{display:block;height:100%;background:var(--accent)}
.book-percent{font:10px/1 ui-monospace,monospace;letter-spacing:.06em;color:var(--subtle)}
.book-dates{display:flex;flex-direction:column;gap:.1rem;margin:.55rem 0 0;font:10px/1.6 ui-monospace,monospace;letter-spacing:.06em;color:var(--muted);text-align:left}
.book-empty{font-weight:300;color:var(--subtle)}
.book-head{width:var(--reading-width)}
/* Book page: progress over time, drawn in the same ink as the progress bars. */
.book-chart{margin:0 0 2rem;padding-left:2.25rem}
.book-plot{position:relative;height:11rem}
.book-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.book-grid-lines line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.book-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.book-area{fill:color-mix(in srgb,var(--accent) 8%,transparent)}
.book-tick{position:absolute;left:-2.25rem;transform:translateY(-50%);font:10px/1 ui-monospace,monospace;color:var(--muted)}
.book-dot{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;outline-offset:-4px}
.book-dot::before{content:"";position:absolute;inset:8px;border:1px solid var(--accent);border-radius:50%;background:var(--paper);transition:background-color .2s}
.book-dot:hover::before,.book-dot:focus-visible::before{background:var(--accent)}
.book-tip{display:none;position:absolute;bottom:calc(100% - 2px);left:6px;z-index:5;padding:.35rem .55rem;border:1px solid var(--subtle);background:var(--paper);box-shadow:0 8px 24px #0005;font:10px/1.5 ui-monospace,monospace;letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.book-dot.is-left .book-tip{left:auto;right:6px}
.book-dot:hover .book-tip,.book-dot:focus-visible .book-tip{display:block}
.book-tip time{color:var(--muted);margin-right:.35rem}.book-up{color:var(--accent);margin-left:.35rem}
.book-axis{display:flex;justify-content:space-between;margin-top:.5rem;font:10px/1.5 ui-monospace,monospace;letter-spacing:.06em;color:var(--muted)}
.book-axis span:only-child{margin:0 auto}
.stream-page .site-footer,.home .site-footer{display:none}
.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{position:fixed;top:1rem;left:1rem;background:var(--paper);padding:.5rem;z-index:40}
@media(max-width:1400px){
  :root{--page-left:36px;--reading-width:calc(100vw - 72px);--wide-width:var(--reading-width);--stream-width:var(--reading-width)}
  .writing-layout{display:block}.tag-index,.row-tags{display:none}.notes-list{width:100%}
  .mb-layout.has-aside{display:block;width:var(--stream-width)}
  .project-intro-narrow{display:flex}
  .tag-intro{width:100%}
}
@media(max-width:800px){
  :root{--page-left:18px;--reading-width:calc(100vw - 36px)}
  .project-intro-narrow{gap:1rem}.project-photo{max-width:60%}
  .post-link{grid-template-columns:1fr}.post-link time{display:none}.post-row{padding:14px 4px}
  .coffee-grid td{height:4.25rem}.coffee-time{display:none}.coffee-entries{inset:20px 0 2px;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:0}
  .coffee-mark svg{width:20px;height:20px}.coffee-grid th{padding-left:2px}.coffee-grid .day{left:3px}
  .book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1rem}
  .mb-entry{grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--line)}
  .mb-when{padding:1.2rem 0 0;text-align:left}.mb-when time{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .7rem}
  .mb-day{font-size:1.5rem}.mb-meta,.mb-day+.mb-meta+.mb-meta{margin-top:0}
  .mb-card{padding:.5rem 0 1.4rem;border-left:0}.mb-card::before{display:none}.mb-title{font-size:1.4rem}.sidenote-content{font-size:.85rem}
  .prose blockquote{margin-left:1.75rem}.prose blockquote::before{left:-1.75rem;font-size:2.75rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.mb-aside .note-count{margin-top:1.3rem}