/* =================
    ROOT VARIABLES
==================*/
:root {
    --yellow: #F4D04E;
    --gray-500: #6B6B6B;
    --gray-950: #111111;
    --white: #FFFFFF;

    /* Typography */
    --font-primary: 'Figtree', sans-serif;

    --text-preset-1-size: 1.5rem;
    --text-preset-1-line-height: 1.5;
    --text-preset-1-weight: 800;

    --text-preset-2-size: 1rem;
    --text-preset-2-line-height: 1.5;
    --text-preset-2-spacing: 0.2px;
    --text-preset-2-weight: 500;

    --text-preset-3-size: .875rem;
    --text-preset-3-line-height: 1.5;
    --text-preset-3-spacing: 0.2px;
    --text-preset-3-weight: 500;
    --text-preset-3-weight-bold: 800;

    /* Spacing */
    --space-300: 1.5rem;
    --space-150: .75rem;
    --space-100: .5rem;
    --space-50: .25rem;
}

/* =========================
    RESET
==========================*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* =========================
    BODY
==========================*/
body {
    font-family: var(--font-primary);
    background: var(--yellow);
    color: var(--white);
    padding: 0 1.5rem;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================
    CARD
==========================*/
.card {
    background: var(--white);
    display: flex;
    flex-direction: column;
    gap: var(--space-300);
    width: 100%;
    max-width: 384px;
    padding: var(--space-300);
    border-radius: 1.25rem;
    border: 0.0625rem solid var(--gray-950);
    box-shadow: var(--space-100) var(--space-100) 0 var(--gray-950);
}

/* Card image */
.card img {
    width: 100%;
    display: block;
    border-radius: 0.625rem;
}

/* =========================
    CONTENT
==========================*/
.card .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-150);
}

/* Category */
.card .content .category {
    background: var(--yellow);
    color: var(--gray-950);
    border-radius: var(--space-50);
    padding: var(--space-50) var(--space-150);
    font-size: var(--text-preset-3-size);
    line-height: var(--text-preset-3-line-height);
    letter-spacing: var(--text-preset-3-spacing);
    font-weight: var(--text-preset-3-weight-bold);
}

/* Publish date */
.card .content .publish {
    color: var(--gray-950);
    font-size: var(--text-preset-3-size);
    line-height: var(--text-preset-3-line-height);
    letter-spacing: var(--text-preset-3-spacing);
    font-weight: var(--text-preset-3-weight);
}

/* Title */
.card .content .title {
    font-size: var(--text-preset-1-size);
    line-height: var(--text-preset-1-line-height);
    font-weight: var(--text-preset-1-weight);
}

/* Title link */
.card .content .title a {
    color: var(--gray-950);
    text-decoration: none;
    transition: color .2s ease;
}

/* Hover */
.card .content .title a:hover {
    color: var(--yellow);
}

.card .content .title a:focus-visible {
    outline: 2px solid var(--gray-950);
    outline-offset: 4px;
}

/* Description */
.card .content .description {
    color: var(--gray-500);
    font-size: var(--text-preset-2-size);
    line-height: var(--text-preset-2-line-height);
    letter-spacing: var(--text-preset-2-spacing);
    font-weight: var(--text-preset-2-weight);
}

/* =========================
    AUTHOR
==========================*/
.card .author {
    display: flex;
    align-items: center;
    gap: var(--space-150);
}

/* Avatar */
.card .author img {
    display: block;
    width: 2rem;
}

/* Author name */
.card .author p {
    color: var(--gray-950);
    font-size: var(--text-preset-3-size);
    line-height: var(--text-preset-3-line-height);
    letter-spacing: var(--text-preset-3-spacing);
    font-weight: var(--text-preset-3-weight-bold);
}