.artwork{position:relative;container-type:inline-size;overflow:hidden;width:100%;height:100%}.artwork__shape{content:"";position:absolute}:root{--color-light-disc-shadow:rgba(0, 0, 0, .1);--color-disc-shadow:var(--color-light-disc-shadow)}@media (prefers-color-scheme:dark){:root{--color-dark-disc-shadow:rgba(0, 0, 0, .2);--color-disc-shadow:var(--color-dark-disc-shadow)}}.artwork--projects .disc{top:25%;left:50%;width:25cqw;height:25cqw;border-radius:50%;border:1px solid var(--color-text);background:var(--color-background);z-index:50}.artwork--projects .disc-shadow{background:var(--color-disc-shadow);width:20cqw;height:20cqw;border-radius:50%;left:10%;top:100%;z-index:25;transform:perspective(12.5rem) rotateX(65deg)}.artwork--projects .background-01{width:150%;height:150%;background-position:center bottom;background-size:7cqw 3cqh;background-image:linear-gradient(to right,var(--color-text) 2px,transparent 2px),linear-gradient(to bottom,var(--color-text) 1px,transparent 2px);mask-image:linear-gradient(to top,rgba(0,0,0,1),rgba(0,0,0,0));transform:translateX(-50%) perspective(15cqh) rotateX(40deg) scale(2,1);transform-origin:bottom center;bottom:0;left:50%}.card__link:focus~.card__content .disc,.card__link:hover~.card__content .disc{transform:translateY(-10%)}.card__link:focus~.card__content .disc-shadow,.card__link:hover~.card__content .disc-shadow{transform:perspective(200px) rotateX(65deg) scale(.7)}@media (prefers-reduced-motion:no-preference){.artwork--projects .disc,.artwork--projects .disc-shadow{transition:transform .4s cubic-bezier(.34, 1.56, .64, 1);will-change:transform}}:root{--color-light-octahedron-background:var(--color-text);--color-dark-octahedron-background:var(--color-background);--color-octahedron-background:var(--color-light-octahedron-background);--octahedron-side-width:15cqw;--triangle-height-ratio:1.732;--octahedron-side-height:calc(var(--octahedron-side-width) * var(--triangle-height-ratio))}@media (prefers-color-scheme:dark){:root{--color-octahedron-background:var(--color-dark-octahedron-background)}}.artwork--lab .octahedron{width:calc(var(--octahedron-side-width) * 2);height:calc(var(--octahedron-side-width) * 2);left:50%;top:50%;transform:translate(-50%,-50%) rotateX(0) rotateY(65deg) rotateZ(0);transform-style:preserve-3d}.octahedron__side{position:absolute;left:0;bottom:50%;border-bottom:var(--octahedron-side-height) solid #000;border-left:var(--octahedron-side-width) solid transparent;border-right:var(--octahedron-side-width) solid transparent;transform-origin:50% 100%}.octahedron__side:first-child{transform:rotateY(90deg) translateZ(var(--octahedron-side-width)) rotateX(35.27deg);border-bottom-color:hsl(from var(--color-octahedron-background) h s calc(l + 50))}.octahedron__side:nth-child(2){transform:rotateY(180deg) translateZ(var(--octahedron-side-width)) rotateX(35.27deg);border-bottom-color:hsl(from var(--color-octahedron-background) h s calc(l + 30))}.octahedron__side:nth-child(3){transform:rotateY(270deg) translateZ(var(--octahedron-side-width)) rotateX(35.27deg);border-bottom-color:hsl(from var(--color-octahedron-background) h s calc(l + 30))}.octahedron__side:nth-child(4){transform:rotateY(360deg) translateZ(var(--octahedron-side-width)) rotateX(35.27deg);border-bottom-color:hsl(from var(--color-octahedron-background) h s calc(l + 50))}.octahedron__side:nth-child(5){transform:rotateY(450deg) translateZ(var(--octahedron-side-width)) rotateX(144.73deg);border-bottom-color:hsl(from var(--color-octahedron-background) h s calc(l + 20))}.octahedron__side:nth-child(6){transform:rotateY(540deg) translateZ(var(--octahedron-side-width)) rotateX(144.73deg);border-bottom-color:hsl(from var(--color-octahedron-background) h s calc(l + 10))}.octahedron__side:nth-child(7){transform:rotateY(630deg) translateZ(var(--octahedron-side-width)) rotateX(144.73deg);border-bottom-color:hsl(from var(--color-octahedron-background) h s calc(l + 10))}.octahedron__side:nth-child(8){transform:rotateY(720deg) translateZ(var(--octahedron-side-width)) rotateX(144.73deg);border-bottom-color:hsl(from var(--color-octahedron-background) h s calc(l + 20))}.card__link:focus~.card__content .artwork--lab .octahedron,.card__link:hover~.card__content .artwork--lab .octahedron{transform:translate(-50%,-50%) rotateX(0) rotateY(80deg) rotateZ(0)}@media (prefers-reduced-motion:no-preference){.artwork--lab .octahedron{transition:transform .5s cubic-bezier(.66, 0, .34, 1)}}:root{--node-01-y:15%;--node-01-x:25%;--node-02-y:20%;--node-02-x:60%;--node-03-y:45%;--node-03-x:48%;--node-04-y:50%;--node-04-x:75%;--node-05-y:75%;--node-05-x:45%;--node-radius:.5rem;--node-diameter:calc(2 * var(--node-radius))}.artwork--notes .node-group{display:block}.artwork--notes .artwork__shape.node{display:block;position:absolute;background:var(--color-text);border:1px solid var(--color-text);border-radius:50%;width:var(--node-diameter);height:var(--node-diameter)}.artwork--notes .line,.artwork--notes .node{transform-origin:center}.artwork--notes .node--01{top:var(--node-01-y);left:var(--node-01-x)}.artwork--notes .node--02{top:var(--node-02-y);left:var(--node-02-x)}.artwork--notes .node--03{top:var(--node-03-y);left:var(--node-03-x)}.artwork--notes .node--04{top:var(--node-04-y);left:var(--node-04-x)}.artwork--notes .node--05{top:var(--node-05-y);left:var(--node-05-x)}.artwork--notes .line{background:linear-gradient(to top right,transparent calc(50% - 1px),var(--color-text),transparent calc(50% + 1px))}.artwork--notes .line--up{background:linear-gradient(to bottom right,transparent calc(50% - 1px),var(--color-text),transparent calc(50% + 1px))}.artwork--notes .line--01{top:calc(var(--node-01-y) + var(--node-radius));left:calc(var(--node-01-x) + var(--node-radius));right:calc(100% - var(--node-02-x) - var(--node-radius));height:calc(var(--node-02-y) - var(--node-01-y))}.artwork--notes .line--02{top:calc(var(--node-01-y) + var(--node-radius));left:calc(var(--node-01-x) + var(--node-radius));right:calc(100% - var(--node-05-x) - var(--node-radius));height:calc(var(--node-05-y) - var(--node-01-y))}.artwork--notes .line--03{top:calc(var(--node-02-y) + var(--node-radius));left:calc(var(--node-02-x) + var(--node-radius));right:calc(100% - var(--node-04-x) - var(--node-radius));height:calc(var(--node-04-y) - var(--node-02-y))}.artwork--notes .line--04{top:calc(var(--node-03-y) + var(--node-radius));left:calc(var(--node-03-x) + var(--node-radius));right:calc(100% - var(--node-04-x) - var(--node-radius));height:calc(var(--node-04-y) - var(--node-03-y))}.artwork--notes .line--05{top:calc(var(--node-04-y) + var(--node-radius));left:calc(var(--node-05-x) + var(--node-radius));right:calc(100% - var(--node-04-x) - var(--node-radius));height:calc(var(--node-05-y) - var(--node-04-y));background:linear-gradient(to bottom right,transparent calc(50% - 1px),var(--color-text),transparent calc(50% + 1px))}.artwork--notes .line--05{top:calc(var(--node-04-y) + var(--node-radius));left:calc(var(--node-05-x) + var(--node-radius));right:calc(100% - var(--node-04-x) - var(--node-radius));height:calc(var(--node-05-y) - var(--node-04-y))}.artwork--notes .line--06{top:calc(var(--node-03-y) + var(--node-radius));left:calc(var(--node-05-x) + var(--node-radius));right:calc(100% - var(--node-03-x) - var(--node-radius));height:calc(var(--node-05-y) - var(--node-03-y))}.artwork--notes .line--07{top:calc(var(--node-01-y) + var(--node-radius));left:calc(var(--node-01-x) + var(--node-radius));right:calc(100% - var(--node-03-x) - var(--node-radius));height:calc(var(--node-03-y) - var(--node-01-y))}.card__link:focus~.card__content .artwork--notes,.card__link:hover~.card__content .artwork--notes{--node-01-y:10%;--node-01-x:20%;--node-02-y:18%;--node-02-x:65%;--node-03-y:49%;--node-03-x:49%;--node-04-y:55%;--node-04-x:85%;--node-05-y:78%;--node-05-x:40%}@media (prefers-reduced-motion:no-preference){.line,.node{transition:inset .3s cubic-bezier(.34, 1.56, .64, 1),height .3s cubic-bezier(.34, 1.56, .64, 1);will-change:inset,height}}.card-list{list-style-type:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(auto,20rem));gap:1rem;margin-top:2rem}@media screen and (min-width:480px){.card-list{grid-template-columns:1fr 1fr}}@media screen and (min-width:780px){.card-list{grid-template-columns:1fr 1fr 1fr}}@media screen and (min-width:1280px){.card-list{grid-template-columns:repeat(auto-fill,minmax(auto,20rem))}}.card{position:relative;border:1px solid var(--color-text);display:grid;grid-template-rows:auto 1fr;aspect-ratio:4/3;color:var(--color-background);transition:background-color .2s ease}.card:has(:hover,:focus) .card__content::after{background-color:rgb(from var(--color-img-overlay) r g b / .3)}.card:has(:focus-visible){outline:8px double var(--color-primary);outline-offset:4px}.card__content::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:50;transition:background-color .2s ease}.card__link{background:var(--color-text);width:100%;display:block;text-decoration:unset;padding:0 1rem;font-size:1.1rem}.card__link:focus,.card__link:hover{color:inherit;outline:0}.card__link::after{content:"";position:absolute;inset-block:0;inset-inline:0;cursor:pointer;z-index:100}:root{--color-light-gudulf-hue:180deg;--color-gudulf-hue:var(--color-light-gudulf-hue)}@media (prefers-color-scheme:dark){:root{--color-dark-gudulf-hue:0deg;--color-gudulf-hue:var(--color-dark-gudulf-hue)}}.gudulf{position:fixed;appearance:none;border:none;display:block;background:0 0;width:100px;height:100px;cursor:pointer;transform:translateY(-5px)}.gudulf__body,.gudulf__head{background-image:url("/assets/img/gudulf/gudulf-01.png");position:absolute;background-repeat:no-repeat;scale:2.5;image-rendering:pixelated;will-change:transform}.gudulf__head-container{position:absolute;transform:translateY(calc(100% + 75px));z-index:2;bottom:62px;right:32px;width:19px;height:15px}.gudulf__head{width:100%;height:100%;filter:hue-rotate(var(--color-gudulf-hue));background-position:-29px -5px}.gudulf__body{width:14px;height:21px;bottom:22px;right:32px;transform:translateY(calc(100% + 10px));z-index:1;filter:hue-rotate(var(--color-gudulf-hue));background-position:-5px -5px}.gudulf:focus .gudulf__body,.gudulf:focus .gudulf__head-container,.gudulf:hover .gudulf__body,.gudulf:hover .gudulf__head-container{transform:translateY(0)}.gudulf--home{bottom:0;right:0}.checkbox__input{position:absolute;opacity:0;width:1em;height:1em}.gudulf__text-box{scale:1;opacity:0;transform:scaleX(.25);transform-origin:right;--triangle-angle:75deg;--triangle-height:.75rem;--triangle-position:50%;--textbox-border-radius:4px;--textbox-border-width:1px;--textbox-color-border:var(--color-text);--textbox-color-background:var(--color-background);position:absolute;top:-1.5rem;right:300%;width:7.5rem;padding:.5rem .75rem .4rem;border-radius:var(--textbox-border-radius)/var(--textbox-border-radius) min(var(--textbox-border-radius),var(--triangle-position) - var(--triangle-height) * tan(var(--triangle-angle) / 2)) min(var(--textbox-border-radius),100% - var(--triangle-position) - var(--triangle-height) * tan(var(--triangle-angle) / 2)) var(--textbox-border-radius);clip-path:polygon(100% 0,0 0,0 100%,100% 100%,100% min(100%,var(--triangle-position) + var(--triangle-height) * tan(var(--triangle-angle)/ 2)),calc(100% + var(--triangle-height)) var(--triangle-position),100% max(0%,var(--triangle-position) - var(--triangle-height) * tan(var(--triangle-angle)/ 2)));background:var(--textbox-color-border);border-image:conic-gradient(var(--textbox-color-border) 0 0) fill 0/max(0%,var(--triangle-position) - var(--triangle-height) * tan(var(--triangle-angle) / 2)) 0 max(0%,100% - var(--triangle-position) - var(--triangle-height) * tan(var(--triangle-angle) / 2)) var(--textbox-border-radius)/0 var(--triangle-height) 0 0}.gudulf__text-box:after{content:"";position:absolute;z-index:-1;inset:0;padding:var(--textbox-border-width);border-radius:inherit;clip-path:polygon(100% 0,0 0,0 100%,100% 100%,calc(100% - var(--textbox-border-width)) min(100% - var(--textbox-border-width),var(--triangle-position) + var(--triangle-height) * tan(var(--triangle-angle)/ 2) - var(--textbox-border-width) * tan(45deg - var(--triangle-angle)/ 4)),calc(100% + var(--triangle-height) - var(--textbox-border-width)/ sin(var(--triangle-angle)/ 2)) var(--triangle-position),calc(100% - var(--textbox-border-width)) max(var(--textbox-border-width),var(--triangle-position) - var(--triangle-height) * tan(var(--triangle-angle)/ 2) + var(--textbox-border-width) * tan(45deg - var(--triangle-angle)/ 4)));background:var(--textbox-color-background) content-box;border-image:conic-gradient(var(--textbox-color-background) 0 0) fill 0/max(var(--textbox-border-width),var(--triangle-position) - var(--triangle-height) * tan(var(--triangle-angle) / 2)) 0 max(var(--textbox-border-width),100% - var(--triangle-position) - var(--triangle-height) * tan(var(--triangle-angle) / 2)) var(--textbox-border-radius)/0 var(--triangle-height) 0 0}.gudulf__text-box-content{opacity:0;cursor:default}.gudulf:focus .checkbox__input:checked~.gudulf__head-container .gudulf__text-box,.gudulf:hover .checkbox__input:checked~.gudulf__head-container .gudulf__text-box{opacity:1;transform:scaleX(1)}.checkbox__input:checked~.gudulf__head-container .gudulf__text-box-content{opacity:1}.checkbox__input:checked~.gudulf__head-container .gudulf__head{background-position:-29px -30px}.gudulf__snooze-bubble{display:none}.gudulf__snooze-bubble::before{content:"•";position:absolute;right:2rem;top:calc(100% - 2rem);width:10px;height:10px}.gudulf:hover .gudulf__snooze-bubble{opacity:0}@keyframes snoozeBubble{0%{opacity:0;transform:translateY(25px) translateX(5px)}20%{opacity:1;transform:translateY(0) translateX(-5px)}40%{transform:translateY(-25px) translateX(3px)}60%{transform:translateY(-50px) translateX(-7px)}80%{transform:translateY(-75px) translateX(4px)}99%{opacity:0;transform:translateY(-100px) translateX(-2px) scale(0)}100%{opacity:0;transform:translateY(35px) translateX(0)}}@keyframes gudulfFloating{0%{transform:translateY(2px)}65%{transform:translateY(-2px)}100%{transform:translateY(2px)}}@media (prefers-reduced-motion:no-preference){.gudulf{transform:none}.gudulf:focus,.gudulf:hover{animation:gudulfFloating 2s infinite ease-in-out}.gudulf__snooze-bubble{display:block}.gudulf__snooze-bubble::before{animation:snoozeBubble 4s infinite linear}.gudulf__head-container{transition:transform .75s cubic-bezier(.34, 1.56, .64, 1)}.gudulf__body{transition:transform .8s cubic-bezier(.34, 1.6, .64, 1)}.gudulf__text-box{transition:opacity .3s cubic-bezier(.34, 1.56, .64, 1),}.gudulf__text-box-content{transition:opacity .75s cubic-bezier(.34, 1.56, .64, 1) .1s}}