@font-face {
    font-display: swap;
    src: url(/asset/resource/font/inter.ttf);
    font-family: "Inter";
}
@font-face {
    src: url(/n/libre-baskerville.ttf);
    font-display: swap;
    font-family: "Libre Baskerville";
}

body {
    color: #1f1f1f;
    background: #fdf9ec;
    font-family: "Libre Baskerville", serif;
}

header {
    margin: 0 auto;
    max-width: 50em;
    padding: 5em 1.5em 1.5em 1.5em;
    font-family: "Inter", sans-serif;
}
header .badge {
    color: #1f1f1f;
    font-weight: 600;
    font-size: 0.85em;
    padding: 1em 1.75em;
    background: #eeee55;
    margin-bottom: 1.5em;
    display: inline-block;
    border-radius: 9999px;
    text-decoration: none;
    border: 1px solid #dddd00;
    box-shadow: 0 4px 8px #eeee5555;
}
header .badge svg {
    width: 1.25em;
    height: 1.25em;
    fill: currentColor;
    margin-right: 0.5em;
    vertical-align: middle;
}
header h1 {
    font-size: 2.5em;
    line-height: 1.25em;
}
header p {
    color: #6c757d;
    font-size: 1.25em;
    line-height: 1.5em;
    margin-bottom: 2em;
}
header .meta {
    gap: 1em;
    display: flex;
    font-size: 0.85em;
    margin-top: 0.5em;
    line-height: 1.5em;
    align-items: center;
    justify-content: space-between;
}
header .meta .meta-info {
    gap: 1em;
    display: flex;
    align-items: center;
}
header .meta .meta-user a {
    gap: 0.5em;
    display: flex;
    color: #1f1f1f;
    align-items: center;
    text-underline-offset: 0.15em;
}
header .meta .meta-user img {
    width: 2.75em;
    height: 2.75em;
    border-radius: 9999px;
}
header .meta .meta-read {
    color: #6c757d;
}
header .meta .action {
    width: 2.75em;
    height: 2.75em;
    cursor: pointer;
    position: relative;
    background: #f4f0e2;
    border-radius: 9999px;
    transition: background 0.25s ease-in-out;
}
header .meta .action:hover {
    background: #eee9d6;
}
header .meta .action svg {
    padding: 0.75em;
    fill: currentColor;
    vertical-align: middle;
    margin: -0.025em 0 0 -0.025em;
}
header .meta .action span {
    left: 50%;
    color: #6c757d;
    position: absolute;
    transform: translate(-50%, -125%);
}

main {
    padding: 1.5em;
    margin: 0 auto;
    max-width: 50em;
}
main figure {
    margin: 0 auto;
    margin-bottom: 1.5em;
}
main figure img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    border-radius: 0.5em;
    margin-bottom: 1.5em;
    object-position: center;
}
main figure figcaption {
    color: #6c757d;
    margin: 0 auto;
    max-width: 30em;
    font-size: 0.85em;
    margin-top: 0.5em;
    text-align: center;
    font-style: italic;
    line-height: 1.5em;
}
main .content {
    font-size: 1.15em;
    line-height: 1.75em;
}
main .content a {
    color: #1f1f1f;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
main .content p:first-child {
    margin-top: 2.5em;
}
main .content p:not(:last-child) {
    margin-bottom: 1.5em;
}
main .content h2 {
    font-size: 1.5em;
    margin-top: 2.5em;
    line-height: 1.5em;
    margin-bottom: 1.25em;
}
main .content ul {
    padding-left: 1em;
    margin-bottom: 1.5em;
}
main .content ul li {
    margin-bottom: 0.5em;
}
main .content ul li::marker {
    color: #3f3f3f;
}
main .category {
    gap: 0.5em;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2.5em;
    font-family: "Inter", sans-serif;
}
main .content:has(.card) {
    gap: 1.5em;
    display: grid;
    margin-top: 1.5em;
    grid-template-columns: repeat(2, 1fr);
}
main a.card {
    text-decoration-color: transparent;
    transition: text-decoration-color 0.25s ease-in-out;
}
main a.card:hover {
    text-decoration-color: #1f1f1f;
}
main .card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    margin-bottom: 1em;
    border-radius: 0.35em;
    transition: filter 0.25s ease-in-out;
}
main .card:hover img {
    filter: brightness(1.075);
}
main .card h2 {
    font-size: 1em;
    overflow: hidden;
    margin-top: 0.25em;
    line-height: 1.75em;
    display: -webkit-box;
    margin-bottom: 0.75em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

footer {
    color: #6c757d;
    margin: 0 auto;
    max-width: 50em;
    text-align: center;
    padding: 1.5em 1.5em 5em 1.5em;
    font-family: "Inter", sans-serif;
}
footer .action {
    display: flex;
    margin-bottom: 1.5em;
    justify-content: center;
}
footer .action button {
    gap: 0.5em;
    border: none;
    display: flex;
    color: #1f1f1f;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85em;
    padding: 1em 1.5em;
    background: #eeee55;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid #dddd00;
    box-shadow: 0 4px 8px #eeee5555;
    transition: background 0.25s ease-in-out;
}
footer .action button:hover {
    background: #dddd00;
}
footer .action button svg {
    width: 1.25em;
    height: 1.25em;
}
footer p {
    font-size: 0.85em;
    line-height: 1.5em;
    margin-top: 1.5em;
}

@media (max-width: 600px) {
    header {
        padding: 3em 1.5em 1.5em 1.5em;
    }
    header .badge {
        font-size: 0.75em;
    }
    header h1 {
        font-size: 2em;
    }
    header p {
        font-size: 1.15em;
    }
    header .meta {
        align-items: start;
        flex-direction: column;
    }
    header .meta .action {
        margin-top: 0.5em;
    }
    header .meta .action span {
        top: 50%;
        right: 0;
        transform: translate(125%, -50%);
    }
    main {
        padding: 1.5em;
    }
    main .content {
        font-size: 1.075em;
    }
    main .content h2 {
        font-size: 1.35em;
    }
    main .content:has(.card) {
        grid-template-columns: 1fr;
    }
    main .content:has(.card) h2 {
        font-size: 1em;
    }
    footer {
        padding: 1.5em 1.5em 3em 1.5em;
    }
    footer .action button {
        font-size: 0.75em;
    }
}