@property --rise{syntax:"<number>";inherits:true;initial-value:0}@property --settle{syntax:"<number>";inherits:true;initial-value:0}@property --hairline{syntax:"<number>";inherits:true;initial-value:0}@keyframes to-rise{to{--rise:1}}@keyframes to-settle{to{--settle:1}}@keyframes to-hairline{to{--hairline:1}}body>header{--bar-max-w:72rem;--bar-h-1:5rem;--pad-x:1.75rem;--col-gap:.75rem;--row-gap:1.75rem;--logo-h-0:16rem;--title-fs-0:4.5rem;--title-ratio-0:1.25;--desc-fs-0:1.125rem;--desc-ratio-0:1.65;--desc-lines:3;--btn-h-0:4rem;--btn-max-w:12rem;--bar-w:min(var(--bar-max-w), 100%);--edge:calc((100% - var(--bar-w)) / 2);--edge-l:calc(var(--edge) + var(--pad-x));--edge-r:calc(100% - var(--edge-l));--title-h-0:calc(var(--title-fs-0) * var(--title-ratio-0));--desc-h-0:calc(var(--desc-lines) * var(--desc-fs-0) * var(--desc-ratio-0));--col-h:calc(var(--logo-h-0) + var(--title-h-0) + var(--desc-h-0) + var(--btn-h-0) + 3 * var(--row-gap));--logo-y-0:calc(50svh - var(--col-h) / 2);--title-y-0:calc(var(--logo-y-0) + var(--logo-h-0) + var(--row-gap));--desc-y-0:calc(var(--title-y-0) + var(--title-h-0) + var(--row-gap));--btn-y-0:calc(var(--desc-y-0) + var(--desc-h-0) + var(--row-gap));--btn-h-1:calc(var(--bar-h-1) / 1.75);--btn-y-1:calc((var(--bar-h-1) - var(--btn-h-1)) / 2);--btn-settle-len:calc(var(--btn-h-0) - var(--btn-h-1));--settled:calc(var(--btn-y-0) - var(--btn-y-1) + var(--btn-settle-len));@media (width<=35.25rem){--desc-lines:4}@media (width<8rem){--pad-x:1.25rem;--row-gap:1.25rem;--title-fs-0:2.875rem;--desc-fs-0:1rem;--btn-h-0:3.5rem}row-gap:var(--row-gap);z-index:100;background:var(--bg);padding:var(--pad-x);max-width:var(--bar-max-w);flex-direction:column;justify-content:center;align-items:center;height:100svh;margin-inline:auto;display:flex;position:relative;@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){animation:linear both to-hairline;animation-timeline:var(--timeline,scroll());animation-range:var(--settled) calc(var(--settled) + var(--bar-h-1));&:before{box-shadow:0 0 calc(.5rem * var(--hairline)) black;border-bottom:1px solid color-mix(in oklch, var(--bg), var(--fg) calc(var(--hairline) * 25%));background:var(--bg);height:var(--bar-h-1);content:"";position:fixed;inset:0 0 auto}&>#logo,&>:is(h1,p,a){--rise-end:calc(var(--top-0) - var(--top-1));top:calc(var(--top-0) + (var(--top-1) - var(--top-0)) * var(--rise));left:calc(50% + (var(--left-1) - 50%) * var(--settle));translate:calc(-50% * (1 - var(--settle))) 0;animation:linear both to-rise,linear both to-settle;animation-timeline:var(--timeline,scroll()), var(--timeline,scroll());animation-range:0 var(--rise-end), var(--rise-end) calc(var(--rise-end) + var(--settle-len));position:fixed}&>p{animation:linear both to-rise;animation-timeline:var(--timeline,scroll());animation-range:0 var(--rise-end)}}}&>#logo{--size:calc(var(--logo-h-0) + (var(--btn-h-1) - var(--logo-h-0)) * var(--settle));--top-0:var(--logo-y-0);--top-1:var(--btn-y-1);--left-1:var(--edge-l);--settle-len:calc(var(--logo-h-0) - var(--btn-h-1));width:var(--size);height:var(--size);display:block;overflow:visible;& .o{stroke-width:calc(10px + (15px - 10px) * var(--settle))}& .a{stroke-width:calc(2px + (10px - 2px) * var(--settle))}& .p{stroke-width:calc(7px + (15px - 7px) * var(--settle))}}&>h1{--fs-1:1.75rem;--ratio-1:1.35;--ls-0:-.02em;--wt-0:400;--wt-1:700;--lh-1:calc(var(--fs-1) * var(--ratio-1));--top-0:var(--title-y-0);--top-1:calc((var(--bar-h-1) - var(--lh-1)) / 2);--left-1:calc(var(--edge-l) + var(--btn-h-1) + var(--col-gap));--settle-len:calc(var(--title-h-0) - var(--lh-1));background:linear-gradient(to right, var(--data-c6), var(--data-c1));color:color-mix(in oklab, transparent, var(--fg) calc(var(--settle) * 100%));font-weight:calc(var(--wt-0) + (var(--wt-1) - var(--wt-0)) * var(--settle));font-size:calc(var(--title-fs-0) + (var(--fs-1) - var(--title-fs-0)) * var(--settle));line-height:calc(var(--title-h-0) + (var(--lh-1) - var(--title-h-0)) * var(--settle));font-family:var(--serif);letter-spacing:calc(var(--ls-0) * (1 - var(--settle)));background-clip:text;margin:0}&>p{--top-0:var(--desc-y-0);--top-1:-50svh;--left-1:50%;width:min(48ch, calc(var(--bar-w) - 2 * var(--pad-x)));height:var(--desc-h-0);font-size:var(--desc-fs-0);line-height:var(--desc-ratio-0);font-family:var(--sans);text-align:center;text-wrap:balance;align-items:center;margin:0;display:flex}&>a{--icon-0:1.5rem;--icon-1:calc(var(--btn-h-1) / 2);--pad-0:1.5rem;--pad-1:calc((var(--btn-h-1) - var(--icon-1)) / 2);--gap-0:.5rem;--top-0:var(--btn-y-0);--top-1:var(--btn-y-1);--left-1:calc(var(--edge-r) - var(--btn-h-1) - var(--col-gap) - var(--btn-h-1));--settle-len:var(--btn-settle-len);column-gap:calc(var(--gap-0) * (1 - var(--settle)));cursor:pointer;border-radius:var(--btn-h-1);background-color:color-mix(in oklch, var(--data-c3), var(--fg) 25%);padding-inline:calc(var(--pad-0) + (var(--pad-1) - var(--pad-0)) * var(--settle));max-width:calc(var(--btn-max-w) + (var(--btn-h-1) - var(--btn-max-w)) * var(--settle));height:calc(var(--btn-h-0) + (var(--btn-h-1) - var(--btn-h-0)) * var(--settle));color:var(--bg);font-size:1rem;font-weight:550;font-family:var(--sans);letter-spacing:.013em;white-space:nowrap;border:0;justify-content:flex-start;align-items:center;text-decoration:none;display:flex;overflow:hidden;&:hover{background-color:color-mix(in oklch, var(--data-c3), var(--fg) 50%)}&:active{background-color:var(--data-c3)}&>svg{--icon:calc(var(--icon-0) + (var(--icon-1) - var(--icon-0)) * var(--settle));width:var(--icon);height:var(--icon);flex:none}&>span{opacity:calc(1 - var(--settle));flex:none}}&>button{--bg-subtle:var(--bg-subtle-solid);--bg-hover:var(--bg-hover-solid);--bg-active:var(--bg-active-solid);top:var(--btn-y-1);right:var(--edge-l);width:var(--btn-h-1);height:var(--btn-h-1);position:fixed}}:is(.header>div,.footer)>a{color:var(--link);font-family:var(--sans);text-decoration:none;&:hover{border-bottom:1px dotted}&:active{border-bottom:1px solid}}.header{flex-wrap:wrap;align-items:center;gap:2rem;margin-bottom:2rem;display:flex;&>h2{font-size:2rem;font-weight:700;font-family:var(--sans);margin:0}&>div{gap:1rem;margin-left:auto;display:flex}}.posts{margin:0 0 1rem;padding:0;list-style:none;&>.tag-cloud-post{float:right;border:1px solid color-mix(in oklch, var(--fg), var(--bg));border-radius:.5rem;width:50%;max-width:32rem;margin:0 0 1rem 1rem;@media (width<40rem){width:100%;max-width:none;margin:-.5rem 0 1.5rem}&>h3{color:color-mix(in oklch, var(--fg), var(--bg) 25%);font-size:1.25rem;font-weight:500;line-height:1.1;font-family:var(--sans);margin:0 0 .5rem}}&>.post{margin-bottom:1rem}}.footer{font-size:.9rem;font-family:var(--sans)}body{max-width:72rem;margin-inline:auto;&>main{padding-inline:1rem}}