:root{--grid-column-count:4;--grid-gap:5px;--grid-gap-count:calc(var(--grid-column-count) - 1);--total-gap-width:calc(var(--grid-gap-count) * var(--grid-gap));--grid-item--min-width--constraint:300px;--grid-item--max-width--constraint:480px;--grid-item--min-width:min(100%,var(--grid-item--min-width--constraint));--grid-item--max-width:calc((100% - var(--total-gap-width)) / var(--grid-column-count));--grid-item--bg:oklch(var(--primary--darker));--grid-item--color:oklch(var(--grid-secondary));--grid-secondary:var(--oatmeal)}*,:after,:before{box-sizing:border-box}a:any-link{color:inherit}a.button,a.tag{text-decoration:none;transition-property:background,color}.tags--overflow-container{padding-inline:calc(var(--content-padding) + 4px);position:relative;&:after{background:linear-gradient(90deg,var(--grid-item--bg) var(--content-padding),transparent calc(var(--content-padding) + 10px),transparent calc(100% - calc(var(--content-padding) + 10px)),var(--grid-item--bg) calc(100% - var(--content-padding)));pointer-events:none;content:"";inset:0;position:absolute;z-index:6}}.tags--container{container:tags-container/inline-size;display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0;position:relative;.tags--overflow-container &{transform:translateX(0);will-change:transform}}.tag,a.tag{border:.05rem solid color-mix(in oklab,currentColor,transparent 80%);border-radius:100px;display:flex;align-items:center;font-size:13px;font-weight:500;user-select:none;padding-inline:14px;padding-bottom:1px;transition-property:background,border,transform;transition-duration:.15s,.15s,6s;height:35px;text-overlow:ellipsis;overflow:hidden;white-space:nowrap;&:not(.post-type):hover{border-color:transparent;background:color-mix(in oklab,currentColor,transparent 80%)}@media screen and (min-width:600px){flex-wrap:nowrap;overflow:hidden}}.grid--container{padding:25px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(max(var(--grid-item--min-width),var(--grid-item--max-width)),1fr));grid-auto-rows:minmax(365px,auto);grid-auto-flow:dense;gap:var(--grid-gap);max-width:100%}.grid--cell,.grid--item{position:relative}.grid--item{--preview--h:280px;--content-gap:12px;--content-padding:10px;--options--h:35px;--hover--h:calc(var(--content-gap) + var(--options--h));--hover-offset:calc((var(--hover--h) / 2) * -1);--shadow-blur:36px;--shadow-transparency:60%;border-radius:18px;color:var(--grid-item--color);container:grid-item/inline-size;display:grid;grid-template-rows:var(--preview--h) 1fr;align-content:start;filter:drop-shadow(0 0 var(--shadow-blur) color-mix(in oklab,oklch(var(--primary--darkest)),transparent var(--shadow-transparency)));transition-property:transform,filter;transition-duration:.3s;will-change:height,transform;height:100%;width:100%;&:before{background:var(--grid-item--bg);clip-path:inset(0 0 round 18px);will-change:background;content:"";inset:0;position:absolute;z-index:-1}.preview-image,.preview-image--container{height:100%;width:100%}.preview--container{background:oklch(var(--grid-secondary));display:flex;align-items:flex-end;justify-content:flex-end;height:var(--preview--h);width:100%}.preview-image{--bg-scale:1.15,1.15;--bg-position:50% 50%;background-size:cover;transform:scale(var(--bg-scale)) translateZ(1px);background-position:var(--bg-position);background-repeat:no-repeat;filter:grayscale(100%);mix-blend-mode:multiply;opacity:.75;will-change:background,transform;transition-property:background,filter,mix-blend-mode,opacity,transform;transition-duration:4.5s,.15s,.15s,.3s,3s}.meta--container{display:flex;flex-wrap:wrap;font-family:var(--mono);font-size:11px;font-weight:500;height:30px;position:absolute;z-index:6;.issue,.page{align-items:center;display:flex;height:100%;padding-inline:12px;text-decoration:none;&:hover{text-decoration:underline}}.issue{background:oklch(var(--primary--darkest));border-radius:4px 0 0 0;color:oklch(var(--grid-secondary))}.page{background:var(--grid-item--bg)}}.content--container{clip-path:inset(0 0 round 0 0 18px 18px);display:grid;align-self:stretch;gap:var(--content-gap);padding-block:var(--content-padding) calc(var(--content-padding) + 2px);height:100%;.hover--options,.tags--container,.title--container{width:100%}.title--container{align-self:stretch;height:auto;padding-inline:calc(var(--content-padding) + 8px);a.title--text{font-size:22px;font-weight:500;line-height:1.2;margin:0;padding-bottom:1px;text-decoration-color:color-mix(in oklab,currentColor,transparent 86%);text-decoration-skip-ink:none;text-decoration-thickness:3px;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;&:hover{text-decoration-color:color-mix(in oklab,currentColor,transparent 72%)}}}@media screen and (min-width:320px){.title--container{a.title--text{-webkit-line-clamp:2}}}@media screen and (min-width:600px){.title--container{min-height:unset;a.title--text{-webkit-line-clamp:1}}}.tags--overflow-container{display:flex;align-items:flex-end}}.hover--options{display:none;flex-wrap:wrap;gap:6px;margin-top:-4px;padding-inline:calc(var(--content-padding) + 4px);.button{border-radius:100px;display:flex;height:var(--options--h);align-items:center;font-weight:600;transition-duration:.15s}.follow{border:4px solid color-mix(in oklab,currentColor,transparent 80%);border-radius:100px;font-size:18px;display:flex;align-items:center;justify-content:center;line-height:0;width:var(--options--h);transition-property:background,border;&:hover{border-color:transparent;background:color-mix(in oklab,currentColor,transparent 80%)}}.latest,.series{display:flex;justify-content:center;gap:12px;flex:1;padding-inline:8px 14px;.icon-title{display:flex;align-items:center;width:100%;justify-content:center;height:100%;gap:8px}[data-icon=books],[data-icon=image]{opacity:75%}.new-tab{display:none;opacity:45%;rotate:-36deg;will-change:display}}.series{background:color-mix(in oklab,currentColor,transparent 90%);&:hover{background:color-mix(in oklab,currentColor,transparent 80%);color:oklch(var(--primary--darkest))}}.latest{background:oklch(var(--primary--darker));color:oklch(var(--grid-secondary));&:hover{background:oklch(var(--primary--darkest))}}}&:not(.featured){.preview--container{clip-path:inset(0 0 round 18px 18px 0 0)}}&.featured{.post-type{left:-12px;top:12px;position:absolute}.preview--container{clip-path:inset(0 0 round 18px 18px 0 0);justify-content:unset}.tags--container{margin-bottom:12px;position:absolute;z-index:6}.content--container{padding-bottom:calc(var(--content-padding) + 4px)}.description--container,.intro--container{line-height:2.2ex;margin:0;padding-inline:calc(var(--content-padding) + 8px)}@media screen and (min-width:652px){grid-template-columns:1fr 1fr;.preview--container{clip-path:inset(0 0 round 0 18px 18px 0);height:100%;order:2}}}&:focus,&:hover{--grid-item--bg:oklch(var(--grid-secondary));--grid-item--color:oklch(var(--primary--darker));height:auto;transform:translateY(var(--hover-offset));position:absolute;z-index:5;&:before{--shadow-blur:90px;--shadow-transparency:0%}.hover--options{display:flex}.preview--container{background:oklch(var(--primary--darkest))}.preview-image{--bg-scale:1,1;--bg-position:50% 100%;filter:revert;mix-blend-mode:revert;opacity:revert}}}@media @container grid-item (min-width:300px),screen and (min-width:600px){.tags--container{flex-wrap:nowrap}}@container grid-item (min-width: 360px){.grid--item{.hover--options{.latest,.series{justify-content:space-between;padding-inline:18px 12px;.new-tab{display:block}}}}}:root{@media screen and (min-width:800px){--grid-item--min-width--constraint:360px}}@media screen and (min-width:600px){.grid--item{&:hover{.tags--container{&:hover{animation-play-state:paused}}}}}.loader{position:relative;top:0;bottom:0;left:0;right:0;margin:auto;width:175px;height:100px}.loader span{display:block;background:#ccc;width:7px;height:10%;border-radius:14px;margin-right:5px;float:left;margin-top:25%}.loader span:last-child{margin-right:0}.loader span:first-child{animation:load 2.5s linear 1.4s infinite}.loader span:nth-child(2){animation:load 2.5s linear 1.2s infinite}.loader span:nth-child(3){animation:load 2.5s linear 1s infinite}.loader span:nth-child(4){animation:load 2.5s linear .8s infinite}.loader span:nth-child(5){animation:load 2.5s linear .6s infinite}.loader span:nth-child(6){animation:load 2.5s linear .4s infinite}.loader span:nth-child(7){animation:load 2.5s linear .2s infinite}.loader span:nth-child(8){animation:load 2.5s linear 0s infinite}.loader span:nth-child(9){animation:load 2.5s linear .2s infinite}.loader span:nth-child(10){animation:load 2.5s linear .4s infinite}.loader span:nth-child(11){animation:load 2.5s linear .6s infinite}.loader span:nth-child(12){animation:load 2.5s linear .8s infinite}.loader span:nth-child(13){animation:load 2.5s linear 1s infinite}.loader span:nth-child(14){animation:load 2.5s linear 1.2s infinite}.loader span:nth-child(15){animation:load 2.5s linear 1.4s infinite}@keyframes load{0%{background:#ccc;margin-top:25%;height:10%}50%{background:#444;height:100%;margin-top:0}to{background:#ccc;height:10%;margin-top:25%}}