@layer components{.post-card{--post-card-glass:var(--brand);--post-card-juice:color-mix(in srgb, var(--brand) 58%, var(--fg-onbrand));padding-block:var(--sp-8);border-bottom:1px solid var(--border);align-content:start;display:grid;position:relative}.post-card:after{inline-size:100%;block-size:var(--article-card-rule-size);background:var(--post-card-glass);pointer-events:none;clip-path:inset(100% 0 0);content:"";position:absolute;inset-block-end:0;inset-inline-start:0}.post-card:is(:hover,:focus-within):after{clip-path:inset(0)}.post-card:active{--post-card-glass:var(--brand-hover)}.post-card__fizz{block-size:var(--sp-1);pointer-events:none;position:absolute;inset-block-end:var(--sp-1);inset-inline:0}.post-card__fizz i{inline-size:var(--sp-2);block-size:var(--sp-2);background:var(--accent);opacity:0;position:absolute;inset-block-end:0;inset-inline-start:28%}.post-card__fizz i:nth-child(2){background:var(--fg-onbrand);inset-inline-start:54%}.post-card__fizz i:nth-child(3){inset-inline-start:79%}.post-card__body{align-content:start;gap:var(--sp-2);min-inline-size:0;display:grid}.post-card__media{border-radius:var(--radius-sm);background:var(--bg-surface);position:relative;overflow:hidden}.post-card__media:before,.post-card__media:after{z-index:1;inline-size:var(--sp-2);block-size:var(--sp-2);background:var(--brand);pointer-events:none;opacity:0;content:"";position:absolute;inset-block-end:var(--sp-2)}.post-card__media:before{inset-inline-start:var(--sp-6)}.post-card__media:after{inline-size:var(--sp-1);block-size:var(--sp-1);background:var(--accent);inset-inline-end:var(--sp-8)}.post-card__image{aspect-ratio:3/2;object-fit:cover;block-size:auto;inline-size:100%;display:block}.post-card--with-image{gap:var(--sp-6)}@media (width>=40rem){.post-card--with-image:not(.post-card--grid){grid-template-columns:minmax(0,2fr) minmax(0,3fr)}}.post-card__meta{align-items:center;gap:var(--sp-2);display:flex}.post-card__title{font-size:var(--text-xl);font-weight:var(--weight-semi);letter-spacing:var(--tracking-tight);margin-block:0}.post-card__title a{color:var(--fg);text-decoration:none}.post-card__title a:after{content:"";position:absolute;inset:0}.post-card:is(:hover,:focus-within) .post-card__title a{color:var(--brand)}.post-card:active .post-card__title a{color:var(--brand-hover)}.post-card__title a:focus-visible{outline:none}.post-card__title a:focus-visible:after{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}.post-card__excerpt{color:var(--fg-muted);font-size:var(--text-base);line-height:var(--leading-snug);-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.post-card__extra{position:relative}@media (prefers-reduced-motion:no-preference){.post-card:after{block-size:calc(var(--article-card-rule-size) + var(--sp-1));background:linear-gradient(to right, color-mix(in srgb, var(--post-card-juice) 90%, transparent), color-mix(in srgb, var(--post-card-juice) 80%, var(--fg-onbrand)) 45%, color-mix(in srgb, var(--post-card-juice) 90%, transparent)) left top / 100% var(--sp-1) no-repeat, linear-gradient(var(--post-card-glass), var(--post-card-glass)) left bottom / 100% var(--article-card-rule-size) no-repeat}.post-card:is(:hover,:focus-within):after{animation:post-card-rule-pour calc((var(--dur-loop) - var(--dur-fast)) * .7) linear both}.post-card:is(:hover,:focus-within) .post-card__fizz i{animation:post-card-rule-fizz var(--dur-slow) var(--ease-in) var(--dur) both}.post-card:is(:hover,:focus-within) .post-card__fizz i:nth-child(2){animation-delay:calc(var(--dur) + var(--dur-fast))}.post-card:is(:hover,:focus-within) .post-card__fizz i:nth-child(3){animation-name:post-card-rule-fizz-short}.post-card__image{transition:filter var(--dur) var(--ease)}.post-card:is(:hover,:focus-within) .post-card__image{filter:saturate(1.08)contrast(1.03)}.post-card:is(:hover,:focus-within) .post-card__media:before{animation:post-card-fizz-left var(--dur-slow) var(--ease-in) both}.post-card:is(:hover,:focus-within) .post-card__media:after{animation:post-card-fizz-right var(--dur-slow) var(--ease-in) var(--dur-fast) both}}@keyframes post-card-fizz-left{0%{opacity:0;transform:translate(0)}20%,70%{opacity:1}to{opacity:0;transform:translate(var(--sp-1), calc(var(--sp-8) * -1))}}@keyframes post-card-fizz-right{0%{opacity:0;transform:translate(0)}20%,70%{opacity:1}to{opacity:0;transform:translate(calc(var(--sp-1) * -1), calc(var(--sp-6) * -1))}}@keyframes post-card-rule-fizz{0%{opacity:0;transform:translateY(0)}20%,60%{opacity:.85}to{opacity:0;transform:translateY(calc(var(--sp-3) * -1))}}@keyframes post-card-rule-pour{0%{clip-path:inset(100% 0 0);animation-timing-function:var(--ease)}30%{clip-path:inset(0)}65%{clip-path:inset(0);animation-timing-function:var(--ease-in)}to{clip-path:inset(var(--sp-1) 0 0)}}@keyframes post-card-rule-fizz-short{0%{opacity:0;transform:translateY(0)}20%,60%{opacity:.85}to{opacity:0;transform:translateY(calc(var(--sp-2) * -1))}}.post-card--grid{padding:var(--sp-6);border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface)}}