@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk.woff2) format("woff2");font-weight:300 700;font-display:block}
@font-face{font-family:"Space Mono";src:url(fonts/space-mono-400.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Space Mono";src:url(fonts/space-mono-700.woff2) format("woff2");font-weight:700;font-display:block}
html{position:relative;--t:32px;--e:12px;background:linear-gradient(to bottom right,transparent 50%,#68545d 50%) no-repeat calc(var(--g) - var(--e)) var(--t)/var(--e) var(--e),linear-gradient(to bottom right,#68545d 50%,#b06a75 50%) no-repeat calc(var(--g) - var(--e)) calc(var(--t) + var(--s))/var(--e) var(--e),linear-gradient(#68545d,#68545d) no-repeat calc(var(--g) - var(--e)) calc(var(--t) + var(--e))/var(--e) calc(var(--s) - var(--e)),linear-gradient(#b06a75,#b06a75) no-repeat calc(var(--g) - var(--e)) calc(var(--t) + var(--s) + var(--e))/var(--e) 100%,url(tiles.png) 0 0/768px 768px #f1ebdf;color:var(--ink);--bg:#f0e6d0;--card:#fbf5e8;--edge:#d6c39b;--ink:#2b2420;--muted:#7a6650;--accent:#c4455b;--z:0px;font:17px/1.65 "Space Grotesk",sans-serif;--s:80px;--n:130px;--g:max(0px,50vw - (var(--n) + 680px) / 2);--w:calc(var(--g) + var(--n))}
html::before{content:"";position:absolute;z-index:-1;top:var(--t);bottom:0;left:calc(var(--g) - var(--e) - 24px);width:24px;background:repeating-linear-gradient(135deg,rgba(120,96,64,.22) 0 1.5px,rgba(120,96,64,.07) 0 6px);clip-path:polygon(0 calc(var(--e) + 24px),var(--e) 24px,100% 24px,100% 100%,0 100%)}
.tiles{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.tiles canvas{position:absolute;top:0;left:0;display:none}
body{margin:calc(var(--t) + var(--s)) var(--g) 0 var(--w);min-height:calc(100vh - var(--t) - var(--s));box-sizing:border-box;padding:40px;background:var(--bg);isolation:isolate}
header,nav{position:absolute;top:var(--t);left:var(--g)}
header{right:var(--g);mix-blend-mode:multiply;padding-left:calc(var(--n) + 40px);font-size:30px;font-weight:bold;line-height:var(--s);height:var(--s);background:#a3d0d6}
nav{bottom:0;padding-top:calc(var(--s) + 12px);width:var(--n);background:#e8939f}
nav div{position:sticky;top:12px}
main{max-width:600px}
nav,header,#contact a,.more{user-select:none;-webkit-user-select:none}
nav,header,h2,small,#contact a,.more{font-family:"Space Mono",monospace}
a{color:inherit;text-underline-offset:3px;text-decoration-color:var(--accent)}
a i::before{content:"xx";content:"xx"/"(opens in new tab)";color:transparent;letter-spacing:-.08em;font-family:"Space Mono",monospace;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232b2420' stroke-width='1.6'%3E%3Cpath d='M7 3H3v10h10V9M9 2h5v5M14 2 7 9'/%3E%3C/svg%3E") no-repeat 70% 55%/.7em}
h2{margin:64px 0 16px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
h3{margin:0}
small{color:var(--muted)}
nav a,header span,h1 span,article,#contact a,.more{position:relative;top:calc(-1 * var(--z));left:var(--z);transition:top .2s,left .2s,background-color .2s}
:is(nav a,header span,h1 span,article,#contact a,.more)::before{content:"";position:absolute;z-index:-1;inset:0 0 calc(-1 * var(--z)) calc(-1 * var(--z));background:var(--d);transition:inset .2s,clip-path .2s;clip-path:polygon(var(--z) 0,0 var(--z),0 100%,calc(100% - var(--z)) 100%,100% calc(100% - var(--z)),var(--z) calc(100% - var(--z)))}
:is(nav a,header span,h1 span,#contact a,.more)::after{content:"";position:absolute;inset:0 0 calc(-1 * var(--z)) calc(-1 * var(--z))}
nav a{--d:#b06a75;display:block;transition:top .2s,left .2s;padding:6px 16px;text-decoration:none}
nav a:hover,nav a:focus-visible,nav a[aria-current]{--z:6px;background:#f2a9b2}
header span{--z:6px;--d:#5f9aa3;display:inline-block;vertical-align:middle;line-height:1.4;padding:0 14px;background:#c8e6ea}
header span:hover{--z:12px}
header span+span{--z:12px}
header span+span:hover{--z:18px}
h1 span{--d:var(--edge);display:inline-block;margin:0 -6px;padding:0 6px}
h1 span:hover{--z:6px;background:var(--card)}
article{--z:6px;--d:var(--edge);margin-bottom:28px;padding:20px 24px;background:var(--card)}
article p{margin:8px 0}
.posts{margin:0;padding:0;list-style:none}
.posts li{margin-bottom:20px}
.posts small{display:block}
summary{display:block;list-style:none}
summary::-webkit-details-marker{display:none}
details[open] summary{display:none}
.more{cursor:pointer;text-decoration:underline var(--accent);text-underline-offset:3px}
.archived{margin:16px 0 0;padding:10px 14px;background:var(--card)}
.post .back{font:14px "Space Mono",monospace}
.post h1{margin:24px 0 4px;line-height:1.25}
.post h2{margin:48px 0 12px;font:bold 24px/1.3 "Space Grotesk",sans-serif;letter-spacing:0;text-transform:none;color:inherit}
.post h3{margin:32px 0 8px;font-size:19px}
.post hr{margin:40px 0;border:0;border-top:2px solid var(--edge)}
.post img{display:block;max-width:100%;margin:24px 0}
code{font:.9em "Space Mono",monospace}
#contact a,.more{--d:var(--edge);display:inline-block;margin:0 12px 12px 0;padding:6px 14px;background-color:var(--card)}
#contact a:hover,#contact a:focus-visible,.more:hover,summary:focus-visible .more{--z:6px}
h1 span:active,article:active,#contact a:active,.more:active{--z:4px}
header span:active{--z:9px}
header span+span:active{--z:15px}
:is(header span,h1 span,article,#contact a,.more):active,:is(header span,h1 span,article,#contact a,.more):active::before{transition-duration:.12s;transition-timing-function:ease-out}
@media (max-width:720px){
html{--t:0px;--s:64px;--n:0px;--g:0px;background:#a3d0d6}
body{padding:0 20px 32px}
header{padding-left:20px;font-size:22px;mix-blend-mode:normal;isolation:isolate}
nav{position:relative;z-index:1;bottom:auto;width:auto;margin:0 -20px 32px;padding:0 8px}
nav div{position:static;display:flex;flex-wrap:wrap}
nav a{padding:10px 12px}
h1{font-size:26px}
article{padding:16px 18px}
}