.card{align-content:start;gap:12px;padding-top:18px;display:grid;position:relative}.card-bar{background:var(--line);width:100%;height:3px;position:absolute;top:0;left:0;overflow:hidden}.card-bar:after{content:"";transform-origin:0;transition:transform .6s var(--ease-out);background:linear-gradient(to right, var(--blue) 0 33.3%, var(--yellow) 33.3% 66.6%, var(--red) 66.6% 100%);position:absolute;inset:0;transform:scaleX(0)}.card:hover .card-bar:after,.card:focus-visible .card-bar:after{transform:scaleX(1)}.card-frame{aspect-ratio:16/9;background:var(--screen);display:block;position:relative;overflow:hidden}.card--tall .card-frame{aspect-ratio:4/5}.card-frame:after{content:"";z-index:1;pointer-events:none;opacity:0;transition:opacity .45s var(--ease-out);background-image:repeating-linear-gradient(#00000059 0 1px,#0000 1px 3px);position:absolute;inset:0}.card:hover .card-frame:after,.card:focus-visible .card-frame:after{opacity:.14}.card-img{object-fit:cover;filter:saturate(.92);width:100%;height:100%;transition:transform 1s var(--ease-out), filter 1s var(--ease-out);transform:scale(1.02)}.card:hover .card-img,.card:focus-visible .card-img{filter:saturate(1.08);transform:scale(1.07)}.card-view{z-index:2;background:color-mix(in srgb, var(--abyss) 82%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--white);opacity:0;transition:opacity .45s var(--ease-out), translate .45s var(--ease-out);padding:7px 12px;position:absolute;bottom:12px;right:14px;translate:0 6px}.card:hover .card-view,.card:focus-visible .card-view{opacity:1;translate:0}.card-meta{gap:16px;margin-top:8px;display:flex}.card-title{transition:color .35s var(--ease-out);font-size:clamp(26px,2.6vw,40px)}.card:hover .card-title{color:var(--yellow)}.on-paper .card:hover .card-title{color:var(--riso-red)}.card-blurb{max-width:46ch;color:var(--mist);font-size:15px}.on-paper .card-blurb{color:#1a1712b8}.on-paper .card-frame{background:var(--paper-2)}.on-paper .card-view{background:color-mix(in srgb, var(--paper) 85%, transparent);color:var(--ink)}
