.card{background-color:hsl(from var(--background) h s l / 80%);background-color:var(--background);border-radius:.5rem;box-shadow:0 10px 20px -10px var(--dark-alpha);color:var(--accent);display:flex;flex-direction:column;flex:1 1 calc(100% - 2rem);gap:1rem;position:relative;text-decoration:none;transform-origin:center;transition:.2s all ease-in-out;&.photo{display:none;.content{display:none}picture{border-radius:.5rem}img{aspect-ratio:4/3}}h2{font-size:1.1rem;margin:0 0 .5rem;line-height:1.3;font-weight:700}p{font-size:.88rem;opacity:.65;margin:0;color:var(--primary);line-height:1.5;display:-webkit-box;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}a{height:calc(100% - 6rem);display:block;padding:2em;position:relative;transition:.2s transform ease,.3s drop-shadow ease}picture{border-radius:.5rem .5rem 0 0;overflow:hidden;img{aspect-ratio:16 / 9;object-fit:cover;object-position:center;width:100%;display:block}}.content{display:flex;flex-direction:column;gap:.4rem;margin:0 1rem 1rem}.meta{display:flex;color:var(--primary);align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 .5rem}.meta strong{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}.timestamp{font-size:.78rem}&[data-hiding=true]{opacity:0;transform:scale(.8)}&:hover{box-shadow:0 10px 30px -10px #000c;z-index:10;&:before{background-position:50%}.glow:before{opacity:1}picture.popup{transform:perspective(800px) rotateX(-25deg) translateY(-40px) translateZ(50px) scale(1.15);filter:drop-shadow(0 35px 35px rgba(0,0,0,.4))}picture img.popup{transform-origin:bottom;transform:perspective(800px) rotateX(-15deg) translateY(-10px);filter:drop-shadow(0 35px 35px rgba(0,0,0,.4))}picture:before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;opacity:1;transition:opacity .6s ease}picture img{transform:translateZ(25px) rotateY(-5deg);transition:transform .6s cubic-bezier(.175,.885,.32,1.275)}}}picture{display:flex;align-items:center;justify-content:center;img[src$=svg]{display:block;fill:currentColor;object-fit:contain;margin:1rem;height:auto;max-width:90%;min-height:90%;max-height:150px;width:auto}}.glow{display:none;position:absolute;inset:-2rem;pointer-events:none;z-index:1;border-radius:.5rem;mask-image:conic-gradient(from calc(var(--angle, 0deg) + 45deg) at center,transparent 0%,black 5%,black 15%,transparent 20%,transparent 100%);opacity:var(--edge, 0);mix-blend-mode:lighter;transition:opacity .2s ease}.glow:before{display:none;opacity:0;content:"";position:absolute;inset:2rem;border-radius:inherit;box-shadow:inset 0 0 0 1px hsl(from var(--accent) h s l / 100%),inset 0 0 3px hsl(from var(--accent) h s l / 50%),inset 0 0 6px hsl(from var(--accent) h s l / 40%),inset 0 0 15px hsl(from var(--accent) h s l / 30%),inset 0 0 25px 2px hsl(from var(--accent) h s l / 20%),inset 0 0 50px 2px hsl(from var(--accent) h s l / 10%),0 0 3px hsl(from var(--accent) h s l / 50%),0 0 6px hsl(from var(--accent) h s l / 40%),0 0 15px hsl(from var(--accent) h s l / 30%),0 0 25px 2px hsl(from var(--accent) h s l / 20%),0 0 50px 2px hsl(from var(--accent) h s l / 10%)}@media screen and (min-width:640px){.card{gap:1rem;flex-basis:calc(33% - 1rem);max-width:calc(33% - 1rem);&:before{background:linear-gradient(-135deg,var(--light-alpha) 0%,transparent 50%),radial-gradient(circle at var(--x, 50%) var(--y, 50%),hsl(from var(--accent) h s l / 15%) 0%,transparent 50%);content:"";border-radius:.5rem;position:absolute;width:100%;height:100%;left:0;top:0;background-size:200%;box-shadow:inset 0 10px 20px #00000080;transition:.2s all ease-in-out}.content{flex:1}&:not(.filtered){&:first-child,&:not(.photo):nth-of-type(10n+5),&:not(.photo):nth-of-type(11n+11){flex-direction:row;align-items:center;gap:2.5rem;flex-basis:100%;max-width:100%;h2{font-size:1.5rem}p{-webkit-line-clamp:4;opacity:.7}picture{order:2;flex:1 1 50%;width:auto;height:100%}picture img{aspect-ratio:16/9;height:100%!important}.content{order:1;flex:1 1 50%;gap:.75rem;padding-top:.5rem;padding:2rem}h2{font-size:2.2rem;line-height:1.15;font-weight:800}p{font-size:1rem}.timestamp{font-size:.85rem;margin-top:.5rem}}&:not(.photo){&:nth-of-type(10n+5),&:nth-of-type(11n+11){flex-basis:calc(66% - .5rem);max-width:calc(66% - .5rem)}}}}.glow,.glow:before{display:block}}.blog-filter{margin-top:3rem;width:100vw;max-width:calc(100vw - 2rem)}.filter-bar{display:flex;align-items:center;flex-direction:column;justify-content:space-between;gap:1rem;padding:1rem 0 1.5rem;max-width:1120px;margin:0 auto}.filter-cats{display:flex;gap:0;flex-wrap:wrap}.filter-cat{background:transparent;border:none;padding:.3rem .9rem .3rem 0;font-size:.9rem;font-weight:500;text-transform:capitalize;color:var(--primary);opacity:.45;cursor:pointer;transition:opacity .15s ease,color .15s ease;position:relative}.filter-cat:after{content:"";position:absolute;bottom:-2px;left:0;right:.9rem;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}.filter-cat:hover{opacity:.8}.filter-cat.active{opacity:1;color:var(--accent)}.filter-cat.active:after{transform:scaleX(1)}.year-select{appearance:none;background:transparent;border:0;border-radius:.5rem;box-shadow:0 0 .2rem .1rem var(--muted);color:var(--primary);font-size:.85rem;padding:.3rem 2rem .3rem .75rem;cursor:pointer;opacity:.7;transition:opacity .15s ease,border-color .15s ease;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center}.year-select:hover,.year-select:focus{opacity:1;box-shadow:0 0 3px .1rem var(--accent);outline:none}.year-select option{background:var(--surface);color:var(--primary)}.blog-list{display:flex;flex-direction:column;gap:1.5rem;margin:1rem;max-width:1120px;margin:0 auto}.blog-filter.photo .photo{display:flex}@media screen and (min-width:640px){.filter-bar{flex-direction:row}.blog-list{flex-direction:row;flex-wrap:wrap}.blog-list.all .card:not(.photo){&:nth-of-type(10n+5),&:nth-of-type(11n+11){flex-basis:calc(66% - .5rem);max-width:calc(66% - .5rem)}}}