@font-face{font-family:InterVariable;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/InterVariable.woff2) format("woff2")}@font-face{font-family:InterVariable;font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/InterVariable-Italic.woff2) format("woff2")}@layer reset,utilities;:root{color-scheme:light;--color-black: #242424;--color-brown: #332F24;--color-light-brown: #DFE0DA;--color-lighter-brown: #C9CCC2;--foreground: var(--color-black);--background: var(--color-black);--background-box: var(--color-light-brown);--background-box-hover: var(--color-lighter-brown);--base-unit: max(.5px,1/1800 * 100vw);--border-radius: calc(var(--base-unit)*32);--padding: calc(var(--base-unit)*40);--gap: 2px;--font-primary: InterVariable, sans-serif;--font-size-l: max(calc(var(--base-unit)*64));--font-size-m: max(26px, calc(var(--base-unit)*38));--font-size-s: max(12px, calc(var(--base-unit)*16));--ease-in-quad: cubic-bezier(.55, .085, .68, .53);--ease-in-cubic: cubic-bezier(.55, .055, .675, .19);--ease-in-quart: cubic-bezier(.895, .03, .685, .22);--ease-in-quint: cubic-bezier(.755, .05, .855, .06);--ease-in-expo: cubic-bezier(.95, .05, .795, .035);--ease-in-circ: cubic-bezier(.6, .04, .98, .335);--ease-out-quad: cubic-bezier(.25, .46, .45, .94);--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);--ease-out-quart: cubic-bezier(.165, .84, .44, 1);--ease-out-quint: cubic-bezier(.23, 1, .32, 1);--ease-out-expo: cubic-bezier(.19, 1, .22, 1);--ease-out-circ: cubic-bezier(.075, .82, .165, 1);--ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);--ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);--ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);--ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);--ease-out-back: cubic-bezier(.34, 1.85, .64, 1)}@layer reset{*,*:after,*:before{-webkit-tap-highlight-color:rgb(0 0 0 / 0);box-sizing:border-box;user-select:none;-webkit-user-select:none}*{margin:0}a,img{-webkit-touch-callout:none;-webkit-user-drag:none}:focus:not(:focus-visible){outline:none}html:focus-within{scroll-behavior:smooth}img,picture,video,canvas,svg{display:block;max-inline-size:100%}}@layer utilities{.box{border-radius:var(--border-radius);background-color:var(--background-box);padding:var(--padding);transition-property:background;transition-duration:.5s;transition-timing-function:var(--ease-in-out-circ)}.box:hover{background-color:var(--background-box-hover)}.layout\:vstack{display:flex;gap:var(--vstack-gap, 1em)}a{color:inherit}.type\:link{--arrow-size: 1.35em;position:relative;color:inherit;text-decoration:none;padding-inline-end:var(--arrow-size)}.type\:link:after{position:absolute;content:"";inset-inline-end:.05em;inset-block-start:.05em;inline-size:var(--arrow-size);block-size:var(--arrow-size);background-color:currentColor;aspect-ratio:1;contain:strict;-webkit-mask-image:url(/images/arrow.svg);-webkit-mask-size:contain;-webkit-mask-position:left center;transition:.3s transform var(--ease-in-out-circ)}.type\:link:hover:after{transform:rotate(360deg)}h1,.type\:h1{font-size:var(--font-size-l);font-weight:inherit;line-height:100%;letter-spacing:-.03em}h2,.type\:h2{font-size:var(--font-size-l);letter-spacing:-.03em;font-weight:inherit}h3,.type\:h3{font-size:var(--font-size-m);letter-spacing:-.02em;font-weight:inherit}.type\:p{font-size:var(--font-size-m);letter-spacing:-.02em}.type\:small{font-size:var(--font-size-s);letter-spacing:-.02em}}body,html{block-size:100%}html{font-family:var(--font-primary);font-size:var(--font-size-m);font-feature-settings:"liga" 1,"calt" 1;font-weight:410;font-synthesis:none;line-height:1.2;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;text-rendering:optimizeSpeed}body{color:var(--foreground);background-color:var(--background)}main{display:grid;grid-template-areas:"a" "b" "c" "d";grid-template-rows:[main-start] 1fr 1fr [main-end footer-start] auto [footer-end];grid-template-columns:[main-start] 1fr [main-end];gap:var(--gap);padding:var(--gap);block-size:100%}@media (width >= 900px){main{grid-template-areas:"a b" "c c" "d d";grid-template-rows:[main-start] 1fr [main-end footer-start] auto [footer-end];grid-template-columns:[main-start] 1fr 1fr [main-end]}}main>article{display:grid;grid-template-rows:subgrid;grid-template-columns:subgrid;grid-area:main-start/main-start/main-end/main-end;block-size:100svh}main>article>section{min-block-size:300px}main>article>section.vitrine--precursor{grid-area:a}main>article>section.vitrine--cursor{grid-area:b}main>aside{grid-area:c;display:none}main>footer{grid-area:d}footer{--vstack-gap: .4em;padding:var(--padding);display:flex;flex-direction:column;gap:.2em;color:var(--color-light-brown)}footer>.credits{font-size:var(--font-size-s);display:flex;flex-direction:column;gap:.2em;justify-content:space-between;color:color-mix(in oklab,var(--color-light-brown),transparent 75%)}footer>.credits a{text-decoration:underline;transition:color .2s var(--ease-in-out-circ)}footer>.credits a:hover{color:var(--color-light-brown)}@media (width >= 900px){footer>.credits{flex-direction:row}}aside{padding:var(--padding)}aside .bookmarklet{text-decoration:underline;cursor:grab}.vitrine{position:relative;text-align:center;display:grid;grid-template-rows:auto minmax(0,1fr);clip-path:inset(0% 0% 0% 0% round var(--border-radius));contain:style;min-block-size:400px}.vitrine .cursor{place-self:center;block-size:100%}.vitrine .cursor img{block-size:100%;inline-size:100%;object-fit:contain;aspect-ratio:1}.vitrine .label{grid-row:1/2}@media (hover: hover){main>article{cursor:none}main>aside{display:block}.bookmarklet{-webkit-user-drag:auto}.vitrine{cursor:none;position:relative}.vitrine .label{transition-property:transform;transition-duration:.8s;will-change:transform;transition-timing-function:var(--ease-out-expo);transform:translateY(calc(var(--padding) * -3))}.vitrine:hover .label{transform:translateY(0)}.vitrine .cursor{--size: clamp(120px, calc(var(--base-unit)*450), 550px);--anchor-x: 35%;--anchor-y: 23%;--x: calc(var(--mouse-x) * 1px);--y: calc(var(--mouse-y) * 1px);position:fixed;inset-block-end:auto;inset-inline-end:auto;inset-block-start:0;inset-inline-start:0;pointer-events:none;contain:strict;content-visibility:auto;will-change:transform;inline-size:var(--size);block-size:var(--size);transform:translate(calc(var(--x) - var(--anchor-x)),calc(var(--y) - var(--anchor-y)))}}
