:root {
--yellow: #f4d04e;
--black: #111111;
--grey-950: #1f1f1f;
--grey-500: #6b6b6b;
--white: #ffffff;
--radius-outer: 20px;
--radius-inner: 12px;
--shadow: 0 8px 0 0 #000;
}


* { box-sizing: border-box; }


html, body { height: 100%; }


body {
margin: 0;
font-family: "Figtree", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
background: var(--yellow);
color: var(--black);
}


.wrapper {
min-height: 100dvh;
display: grid;
place-items: center;
padding: 24px;
}


.card {
background: var(--white);
border: 1px solid var(--black);
border-radius: var(--radius-outer);
box-shadow: var(--shadow);
max-width: 384px;
width: 100%;
overflow: hidden;
transition: transform .15s ease-out;
}


.card:focus-within { transform: translateY(-2px); }


.card__cover {
display: block;
width: calc(100% - 32px);
height: auto;
margin: 16px;
border-radius: var(--radius-inner);
}


.card__content { padding: 0 24px 24px; }


.pill {
display: inline-block;
padding: 8px 12px;
background: var(--yellow);
border: 1px solid var(--black);
border-radius: 8px;
font-weight: 800;
font-size: 14px;
}


.meta {
margin: 12px 0 0;
font-size: 14px;
}