.article-list{grid-auto-flow:dense;grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));grid-auto-rows:minmax(calc(clamp(4.6rem,5.85vw,5.75rem)),auto);justify-content:space-around;justify-items:stretch;gap:0;width:min(100% - clamp(1rem,5vw,4rem),1180px);max-width:1180px;margin:calc(clamp(.5rem,2vw,1.5rem)) auto;font-weight:300;display:grid}.article-list-loader{grid-column:1/-1;justify-content:center;align-items:center;min-block-size:.75rem;inline-size:100%;padding-block:.25rem;display:flex}.article-list-loader.htmx-request{pointer-events:none}.article-list-loader__button{border:1px solid hsl(var(--neon-cyan)/.38);color:hsl(var(--foreground));cursor:pointer;font:inherit;background:0 0;padding:.7rem 1.15rem;font-size:.9rem;font-weight:650;transition:background-color .18s,border-color .18s,transform .18s}.article-list-loader__button:focus-visible,.article-list-loader__button:hover{background:hsl(var(--neon-cyan)/.08);border-color:hsl(var(--neon-cyan)/.72);outline:2px solid #0000}.article-list-loader__button:active{transform:translateY(1px)}.article-card{--article-card-accent:#00f5ee;--article-card-accent-soft:#bff8f4db;--article-card-bg:#080e12db;--article-card-border:#daf6f31f;--article-card-muted:#dde8e9b8;--article-card-pad:calc(clamp(.75rem, 1.35vw, 1rem));background:linear-gradient(180deg,#ffffff0e,transparent 34%) padding-box,var(--article-card-bg);border:1px solid var(--article-card-border);color:var(--clr-muted-100);isolation:isolate;min-height:100%;padding:var(--article-card-pad);content-visibility:auto;contain-intrinsic-size:auto 24rem;border-radius:0;grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-areas:"title""summary""media""meta";gap:calc(clamp(.45rem,1.1vw,.75rem));width:100%;line-height:1.45;text-decoration:none;transition:border-color .22s,box-shadow .22s,color .22s,transform .22s cubic-bezier(.16,1,.3,1);display:grid;position:relative;overflow:hidden;transform:translateZ(0);box-shadow:0 16px 42px #00080c2e;container-type:inline-size;&:before{background:linear-gradient(90deg,color-mix(in srgb,var(--article-card-accent) 72%,transparent),#ffffff2e,transparent);content:"";opacity:.42;transform-origin:0;z-index:1;height:1px;transition:opacity .22s,transform .22s;position:absolute;inset:0 1rem auto;transform:scaleX(.34)}&.draft{filter:grayscale();border-style:dashed}&.draft:hover{filter:grayscale(.25)}&:focus-visible,&:hover{border-color:color-mix(in srgb,var(--article-card-accent) 32%,transparent);color:var(--clr-muted-100);outline:none;transform:translateY(-3px);box-shadow:0 24px 58px #00080c52;&:before{opacity:.9;transform:scaleX(1)}& .article-card__media img{transform:scale(1.075)}}&:active{transform:translateY(-1px)scale(.995)}&>p{color:var(--article-card-muted);text-wrap:pretty;grid-area:summary;max-width:58ch;padding:0;font-size:calc(clamp(.92rem,1.8cqi,1.02rem));font-weight:300;line-height:1.58}& .post-title,&>p{align-self:start;margin:0}& .post-title{letter-spacing:0;text-wrap:balance;grid-area:title;font-family:Raleway,sans-serif;font-size:calc(clamp(1.25rem,3.2cqi,1.72rem));font-weight:740;line-height:1.06}& .article-card__media{aspect-ratio:16/9;background:var(--article-card-bg);contain:paint;isolation:isolate;max-block-size:18rem;border:0;border-radius:0;grid-area:media;place-self:end stretch;width:100%;margin-top:.15rem;line-height:0;display:block;position:relative;overflow:hidden;&:after{content:"";opacity:.74;pointer-events:none;background:linear-gradient(#0000 46%,#05080b94),radial-gradient(circle at 18% 12%,#fff3,#0000 30%);transition:opacity .22s;position:absolute;inset:0}}& .article-card__media img{backface-visibility:hidden;filter:saturate(.98)contrast(1.03);object-fit:cover;object-position:center;opacity:.88;transform-origin:50%;width:calc(100% + 2px);min-width:calc(100% + 2px);max-width:none;height:calc(100% + 2px);min-height:calc(100% + 2px);margin:-1px;transition:transform .52s cubic-bezier(.16,1,.3,1);animation:.7s cubic-bezier(.16,1,.3,1) backwards article-image-in;display:block;transform:scale(1.035)}& .article-card__meta{color:#dde8e98f;font-variant-numeric:tabular-nums;flex-wrap:wrap;grid-area:meta;align-self:flex-end;gap:.35rem .7rem;font-size:.75rem;display:flex}& .article-card__meta>*+:before{color:#dde8e952;content:"·";margin-inline-end:.7rem}& .article-card__category{background:color-mix(in srgb,var(--article-card-accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--article-card-accent) 26%,transparent);color:var(--article-card-accent-soft);border-radius:999px;padding:.14rem .45rem;font-weight:650}& .article-card__category-label{color:#dde8e98f;font-weight:400}}.article-card.category-quiz{--article-card-accent:#beff4a;--article-card-accent-soft:#d6ff72eb;--article-card-border:#c6ff5c2e}.article-card.category-quiz .post-title{color:color-mix(in srgb,var(--article-card-accent) 78%,var(--clr-muted-100))}.article-card.category-quiz>p{color:#e7f1dbbd}@media (width<=1039px){.article-list{grid-auto-rows:auto}.article-card{--article-card-pad:calc(clamp(.58rem, 3.2vw, .72rem));grid-template-rows:auto;gap:.42rem;min-height:0}.article-card .post-title{-webkit-line-clamp:2;font-size:calc(clamp(1.04rem,5vw,1.24rem));line-height:1.02}.article-card .post-title,.article-card>p{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.article-card>p{-webkit-line-clamp:1;font-size:.82rem;line-height:1.32}.article-card .article-card__media{aspect-ratio:16/4;inline-size:calc(100% + 2 * var(--article-card-pad));margin-block:0;margin-inline:calc(-1 * var(--article-card-pad));max-block-size:5.5rem}.article-card .article-card__media img{object-fit:cover;width:100%;min-width:100%;height:100%;min-height:100%;margin:0}.article-card .article-card__meta{font-size:.68rem;line-height:1.2}}@media (width>=1040px){.article-card{--article-compact-media-inline:34%;--article-corner-media-block:32%;--article-corner-media-inline:50%;grid-area:span 2/span 1;grid-template-rows:auto auto auto minmax(0,1fr) auto;grid-template-areas:"label""title""summary"".""meta";padding-inline-end:max(var(--article-card-pad),var(--article-compact-media-inline))}.article-card .info-grid,.article-card .post-title,.article-card .small-label,.article-card>p{z-index:1;position:relative}.article-card .post-title{-webkit-line-clamp:2;font-size:calc(clamp(1.08rem,2.8cqi,1.42rem));line-height:1.04}.article-card .post-title,.article-card>p{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.article-card>p{-webkit-line-clamp:1;font-size:calc(clamp(.84rem,1.5cqi,.95rem));line-height:1.38}.article-card .info-grid{font-size:calc(clamp(.68rem,1.05cqi,.76rem));line-height:1.25}.article-card .article-card__media{aspect-ratio:auto;block-size:auto;inline-size:calc(1px + var(--article-compact-media-inline));border-end-end-radius:0;margin:0;position:absolute;inset:-1px -1px -1px auto}.article-card .article-card__media:after{background:linear-gradient(90deg,var(--article-card-bg) 0,#080e12d1 14%,transparent 44%),linear-gradient(180deg,transparent 48%,#05080b80);opacity:1}.article-card .article-card__media img{-webkit-mask-image:linear-gradient(90deg,#0000,#00000024 12%,#000 36%);mask-image:linear-gradient(90deg,#0000,#00000024 12%,#000 36%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.article-card:nth-child(6n+2):not(.article-card--popular):not(:nth-child(9n+5)){grid-row:span 3;padding-block-end:max(var(--article-card-pad),var(--article-corner-media-block));padding-inline-end:var(--article-card-pad)}.article-card:nth-child(6n+2):not(.article-card--popular):not(:nth-child(9n+5)) .article-card__media{aspect-ratio:16/10;block-size:calc(1px + var(--article-corner-media-block));inline-size:calc(1px + var(--article-corner-media-inline));border-end-end-radius:0;border-end-start-radius:0;inset:auto -1px -1px auto}.article-card:nth-child(6n+2):not(.article-card--popular):not(:nth-child(9n+5)) .article-card__media:after{background:linear-gradient(180deg,var(--article-card-bg) 0,#080e12db 18%,transparent 54%),linear-gradient(90deg,var(--article-card-bg) 0,#080e1285 18%,transparent 42%),linear-gradient(180deg,transparent 48%,#05080b7a);opacity:1}.article-card:nth-child(6n+2):not(.article-card--popular):not(:nth-child(9n+5)) .article-card__media img{-webkit-mask-composite:source-in;-webkit-mask-image:linear-gradient(#0000,#0000002e 18%,#000 48%),linear-gradient(90deg,#0000,#0000001f 16%,#000 42%);mask-image:linear-gradient(#0000,#0000002e 18%,#000 48%),linear-gradient(90deg,#0000,#0000001f 16%,#000 42%);mask-composite:intersect}.article-card--popular,.article-card:nth-child(9n+5){padding:var(--article-card-pad);grid-template:"label media""title media""summary media"minmax(0,1fr)"meta media"/minmax(0,1.12fr) minmax(12rem,.88fr);grid-area:span 3/span 2}.article-card--feature{--article-card-pad:calc(clamp(.9rem, 1.6vw, 1.15rem));grid-row:span 4;grid-template-columns:minmax(0,1.2fr) minmax(13rem,.8fr)}.article-card--feature .post-title{font-size:calc(clamp(1.55rem,3.7cqi,2.15rem));line-height:1.02}.article-card--popular .post-title,.article-card--popular>p,.article-card:nth-child(9n+5) .post-title,.article-card:nth-child(9n+5)>p{display:block;overflow:visible}.article-card--popular .article-card__media,.article-card:nth-child(9n+5) .article-card__media{aspect-ratio:auto;inline-size:calc(100% + 1px + var(--article-card-pad));margin-block:calc(-1px + -1 * var(--article-card-pad));border-start-end-radius:0;border-end-end-radius:0;grid-area:media;align-self:stretch;max-block-size:none;margin-inline-start:0;margin-inline-end:calc(-1px + -1 * var(--article-card-pad));position:relative;inset:auto}.article-card--popular .article-card__media img,.article-card:nth-child(9n+5) .article-card__media img{-webkit-mask-image:linear-gradient(90deg,#0000,#00000029 10%,#000 32%);mask-image:linear-gradient(90deg,#0000,#00000029 10%,#000 32%)}}@media (prefers-reduced-motion:no-preference){.article-card{animation:.56s cubic-bezier(.16,1,.3,1) backwards article-card-rise}.article-card:nth-child(2n){animation-delay:40ms}.article-card:nth-child(3n){animation-delay:80ms}}@keyframes article-card-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes article-image-in{0%{opacity:0;transform:scale(1.055)}to{opacity:.88;transform:scale(1.035)}}
