:root{--width: 900px;--font: "Inter", ui-sans-serif, system-ui, sans-serif;--font-serif: "charter", Georgia, serif;--background: #fff;--text: #444;--text-muted: #888;--heading: #333;--accent: rgb(130, 170, 226);--glass-bg: rgba(255, 255, 255, .75);--glass-shadow: 0 4px 30px rgba(130, 170, 226, .2), 0 0 60px rgba(130, 170, 226, .15), inset 0 0 0 1px rgba(255, 255, 255, .5)}body{font-family:var(--font);font-size:1.1em;line-height:1.6;max-width:var(--width);margin:auto;padding:20px;color:var(--text);background:var(--background);overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{font-family:var(--font);color:var(--heading)}h1{font-family:var(--font-serif);font-weight:600;font-size:42px;line-height:1.15;margin:-.2em 0 .5em}a{color:var(--heading);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;-webkit-tap-highlight-color:transparent}a:hover,a:active{color:var(--accent);text-decoration:none}header.no-transition,header.no-transition *,header.no-transition *:before,header.no-transition *:after{transition:none!important}header{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:flex-start;margin:-20px -20px 30px;padding:calc(16px + env(safe-area-inset-top,0px)) 20px 16px;pointer-events:none}header>*{pointer-events:auto}header a{text-decoration:none}.logo-container{display:flex;align-items:center;gap:.5em;padding:10px 16px;border-radius:50px;background:transparent;transition:background .3s ease,box-shadow .3s ease,padding .3s ease}.logo-icon{height:1.5em;width:auto;transition:height .3s ease}header h1.logo{margin:0;font-size:1.5em;white-space:nowrap}header h1.logo .fade{display:inline-block;max-width:10ch;opacity:1;overflow:hidden;vertical-align:bottom;transition:max-width .4s ease,opacity .3s ease}header nav{display:flex;align-items:center;padding:8px;border-radius:50px;background:transparent;transition:background .3s ease,box-shadow .3s ease,padding .3s ease}header nav a{margin-left:4px;padding:6px 12px;border-radius:30px;transition:background .2s ease}header nav a:hover{background:#82aae226}.nav-links{display:flex;white-space:nowrap;overflow:hidden;max-width:500px;opacity:1;transition:max-width .4s ease,opacity .3s ease}.hamburger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:28px;height:28px;padding:4px;background:none;border:none;cursor:pointer;opacity:0;max-width:0;overflow:hidden;pointer-events:none;transition:opacity .3s ease,max-width .3s ease}.hamburger span{display:block;width:100%;height:2px;background:var(--heading);border-radius:1px}header.scrolled{justify-content:flex-end}header.scrolled>a{margin-right:-48px;z-index:2}header.scrolled .logo-container{padding:14px 0;background:transparent}header.scrolled .logo-icon{height:1.3em}header.scrolled h1.logo .fade{max-width:0;opacity:0}header.scrolled nav{padding:8px 8px 8px 56px;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--glass-shadow)}header.scrolled .nav-links{max-width:0;opacity:0;pointer-events:none}header.scrolled .hamburger{position:relative;z-index:10;opacity:1;max-width:40px;pointer-events:auto}header.menu-open{justify-content:space-between}header.menu-open>a{margin-right:0}header.menu-open .logo-container{padding:10px 16px;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--glass-shadow)}header.menu-open .logo-icon{height:1.5em}header.menu-open h1.logo .fade{max-width:10ch;opacity:1}header.menu-open nav{padding:8px;box-shadow:var(--glass-shadow)}header.menu-open .nav-links{max-width:500px;opacity:1;pointer-events:auto}header.menu-open .hamburger{opacity:0;max-width:0;pointer-events:none}.post-list{padding:0;list-style:none}.post-item{display:flex;align-items:baseline;gap:1rem;margin-bottom:.5rem}.post-date{color:var(--text-muted);font-size:.9em;min-width:100px}@media(max-width:600px){body{padding:16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom))}header{padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));margin:-16px calc(-1*max(16px,env(safe-area-inset-right))) 24px calc(-1*max(16px,env(safe-area-inset-left)))}.logo-container{padding:8px 12px}header h1.logo{font-size:1.2em}header nav{padding:6px}header nav a{margin-left:4px;padding:4px 8px;font-size:.9em}}