@charset "UTF-8";

/*
    Theme Name: NDJ2
    Author: Ryosuke Yoshida
    Version: 1.0.0
*/

/* ==================================================
 * 
 *      @font-face
 * 
 * ================================================== */
@font-face {
    font-display: swap;
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/Inter/inter-v19-latin-regular.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    src: url("fonts/Inter/inter-v19-latin-500.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    src: url("fonts/Inter/inter-v19-latin-600.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/NotoSansJP/noto-sans-jp-v54-japanese_latin-regular.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 500;
    src: url("fonts/NotoSansJP/noto-sans-jp-v54-japanese_latin-500.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 600;
    src: url("fonts/NotoSansJP/noto-sans-jp-v54-japanese_latin-600.woff2") format("woff2");
}

@layer reset, variable, base, theme, component;

/* ==================================================
 * 
 *      @layer reset
 * 
 * ================================================== */
@layer reset {
    :where(p) {
        margin-block-start: unset;
        margin-block-end: unset;
    }
    :where(blockquote) {
        margin-block-start: unset;
        margin-block-end: unset;
        margin-inline-start: unset;
        margin-inline-end: unset;
    }
    :where(figure) {
        margin-block-start: unset;
        margin-block-end: unset;
        margin-inline-start: unset;
        margin-inline-end: unset;
    }
    :where(h1, h2, h3, h4, h5, h6) {
        margin-block-start: unset;
        margin-block-end: unset;
        font-size: unset;
    }
    :where(ul, ol) {
        margin-block-start: unset;
        margin-block-end: unset;
        padding-inline-start: unset;
    }
    :where(dl) {
        margin-block-start: unset;
        margin-block-end: unset;
    }
    :where(dd) {
        margin-inline-start: unset;
    }
    :where(cite, em) {
        font-style: unset;
    }
    :where(pre) {
        margin-block: unset;
    }
    :where(small) {
        font-size: unset;
    }
    :where([switch]) {
        margin: unset;
        font: unset;
        border: unset;
        appearance: unset;
        cursor: pointer;
    }
}

/* ==================================================
 * 
 *      @layer variable
 * 
 * ================================================== */
@layer variable {
    :root {
        /* font-size */
        --font-size-base: 1.25rem;
        --font-size-2xs: round(0.625em, 1px);
        --font-size-xs: round(0.75em, 1px);
        --font-size-sm: round(0.875em, 1px);
        --font-size-md: round(1em, 1px);
        --font-size-lg: round(1.2em, 1px);
        --font-size-xl: round(1.4em, 1px);
        --font-size-2xl: round(1.6em, 1px);

        /* font-family */
        --font-family-base:
            "Inter",
            "Noto Sans JP",
            system-ui,
            sans-serif,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            "Noto Color Emoji";

        /* leading */
        --leading-base: 1.75;
        --leading: calc(1lh - 1em);
        --half-leading: calc((1lh - 1em) / 2);

        /* space-block */
        --space-block-2xs: round(0.25lh, 1px);
        --space-block-xs: round(0.5lh, 1px);
        --space-block-sm: round(0.75lh, 1px);
        --space-block-md: round(1lh, 1px);
        --space-block-lg: round(1.5lh, 1px);
        --space-block-xl: round(2lh, 1px);
        --space-block-2xl: round(3lh, 1px);

        /* space-inline */
        --space-inline-2xs: round(0.25em, 1px);
        --space-inline-xs: round(0.5em, 1px);
        --space-inline-sm: round(0.75em, 1px);
        --space-inline-md: round(1em, 1px);
        --space-inline-lg: round(1.5em, 1px);
        --space-inline-xl: round(2em, 1px);
        --space-inline-2xl: round(3em, 1px);

        /* space-adjust */
        --space-block-adjust: calc(var(--space-block-md) + var(--half-leading));
        --space-block-adjust-2: calc(var(--space-block-md) + var(--leading));

        /* color */
        --color-key: #4ba3f2;
        --color-accent: #0077e6;
        --color-accent-dark: #004ea2;
        --color-dark: #242628;
        --color-gray: #7c8187;
        --color-pale-gray: #c7ccd1;
        --color-light: #f9fbfc;

        /* transition */
        --transition-base: 0.4s ease-in-out;
        --transition-anchor: 0.2s ease-in-out;

        /* others */
        --character-count: 36;
    }
}

/* ==================================================
 * 
 *      @layer base
 * 
 * ================================================== */
@layer base {
    :where(html) {
        min-block-size: 100dvb;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scrollbar-gutter: stable;
    }
    html {
        color: var(--color-dark);
        font-size: var(--font-size-base);
        font-family: var(--font-family-base);
        line-height: var(--leading-base);
        background-color: var(--color-light);
    }
    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }
    :where(body) {
        overflow-wrap: anywhere;
        word-break: normal;
        line-break: strict;
        text-wrap: pretty;
        text-spacing-trim: trim-start;
        text-autospace: normal;
    }
    body {
        --body-padding-inline: 5lvw;
        --body-max-inline-size: calc(var(--character-count) * 1ic);
        --body-margin-inline-start: clamp(
            0lvw,
            (100% - (var(--body-max-inline-size) + var(--body-padding-inline) * 2)) / 2,
            10lvw
        );
        margin-block-start: 10svh;
        margin-block-end: 30svh;
        margin-inline-start: var(--body-margin-inline-start);
        margin-inline-end: auto;
        padding-inline: var(--body-padding-inline);
        max-inline-size: var(--body-max-inline-size);
    }
    a {
        text-underline-offset: var(--half-leading);
        text-decoration-color: rgb(from var(--color-accent) r g b / 0.4);
        text-decoration-thickness: round(0.1em, 1px);
        transition:
            color var(--transition-anchor),
            text-decoration-color var(--transition-anchor);
        &:any-link {
            color: var(--color-accent);
        }
        @media (any-hover: hover) {
            &:hover {
                color: var(--color-accent-dark);
                text-decoration-color: rgb(from var(--color-accent) r g b / 0.6);
            }
        }
    }
    h1 {
        font-size: var(--font-size-2xl);
    }
    h2 {
        font-size: var(--font-size-xl);
    }
    h3 {
        font-size: var(--font-size-lg);
    }
    h4 {
        font-size: var(--font-size-md);
    }
    h5 {
        font-size: var(--font-size-sm);
    }
    h6 {
        font-size: var(--font-size-xs);
    }
    img {
        max-inline-size: 100%;
        block-size: auto;
        vertical-align: bottom;
    }
}

/* ==================================================
 * 
 *      @layer theme
 * 
 * ================================================== */
@layer theme {
    .site_title {
        font-size: round(1.4em, 1px);
        font-weight: 500;
        & a {
            text-decoration: none;
            &:any-link {
                color: var(--color-dark);
            }
            @media (any-hover: hover) {
                &:hover {
                    color: var(--color-accent);
                }
            }
        }
    }
    .main {
        > * + * {
            margin-block-start: 10svh;
        }
        > :not(* + *) {
            margin-block-start: 10svh;
        }
    }
    .post_list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        .list_title {
            font-size: var(--font-size-md);
        }
        .list_date {
            order: -1;
            color: var(--color-gray);
            font-size: round(0.875em, 1px);
        }
        .list_description {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            margin-block-start: var(--space-block-2xs);
            color: var(--color-gray);
            font-size: round(0.875em, 1px);
            overflow: hidden;
        }
    }
    .post_content {
        > * + * {
            margin-block-start: var(--space-block-md);
        }
    }
    .footer {
        display: grid;
        grid-auto-flow: column;
        justify-content: space-between;
        align-items: center;
        margin-block-start: 10svh;
        font-size: var(--font-size-xs);
    }
}

/* ==================================================
 * 
 *      @layer component
 * 
 * ================================================== */
@layer component {
	.blog_card {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "header";
        align-items: center;
        block-size: clamp(6rem, 5.4rem + 3vw, 6.75rem);
        border: 1px solid rgb(from var(--color-gray) r g b / 0.4);
        border-radius: 0.75rem;
        overflow: hidden;
        &:has(.blog_card_thumbnail:not(:empty)) {
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas: "header thumbnail";
        }
        .blog_card_header {
            grid-area: header;
            padding-block: var(--space-block-sm);
            padding-inline: var(--space-inline-md);
            overflow: hidden;
            .blog_card_title {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                font-size: var(--font-size-sm);
                overflow: hidden;
                & a {
                    -webkit-tap-highlight-color: transparent;
                    &::before {
                        position: absolute;
                        inset: 0;
                        content: "";
                    }
                    &:any-link {
                        color: var(--color-dark);
                        text-decoration: none;
                    }
                    @media (any-hover: hover) {
                        &:hover {
                            color: var(--color-accent);
                        }
                    }
                }
            }
            .blog_card_description {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                color: var(--color-gray);
                font-size: var(--font-size-xs);
                overflow: hidden;
            }
            .blog_card_url_content {
                display: grid;
                grid-auto-flow: column;
                grid-auto-columns: max-content;
                align-items: center;
                column-gap: var(--space-inline-xs);
                font-size: var(--font-size-2xs);
                overflow: hidden;
                .blog_card_favicon {
                    inline-size: round(0.8em, 1px);
                    block-size: round(0.8em, 1px);
                    img {
                        display: block;
                    }
                }
                .blog_card_url {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    color: color-mix(in srgb, var(--color-gray) 80%, transparent);
                    font-family: var(--font-family-base);
                }
            }
        }
        .blog_card_thumbnail {
            grid-area: thumbnail;
            & img {
                inline-size: clamp(6rem, 1.2rem + 24vw, 12rem);
                block-size: clamp(6rem, 5.4rem + 3vw, 6.75rem);
                object-fit: cover;
            }
        }
    }
    .visually_hidden {
        position: absolute;
        margin: -1px;
        padding: 0;
        inline-size: 1px;
        block-size: 1px;
        white-space: nowrap;
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        overflow: hidden;
    }
    [id] {
        scroll-margin-block-start: 10svh;
    }
    [switch] {
        --size-unit: 1lh;
        --bg-color: #d5b46a;
        --fg-color: #f9fbfc;
        --radius: calc(infinity * 1px);
        --transition: 0.2s ease;
        display: inline-flex;
        padding: 2px;
        inline-size: calc(var(--size-unit) * 2);
        block-size: var(--size-unit);
        background-color: var(--bg-color);
        border-radius: var(--radius);
        transition: background-color var(--transition);
        @media (forced-colors: active) {
            --fg-color: canvastext;
            border: 1px solid;
        }
        &:checked {
            --bg-color: #4a90e2;
        }
        &::before {
            flex: 0;
            content: "";
            transition: flex var(--transition);
        }
        &:checked::before {
            flex: 1;
        }
        &::after {
            flex-shrink: 0;
            display: grid;
            place-content: center;
            color: var(--bg-color);
            content: "\e518";
            font-family: "Material Icons Round";
            block-size: 100%;
            background-color: var(--fg-color);
            border-radius: var(--radius);
            aspect-ratio: 1 / 1;
        }
        &:checked::after {
            content: "\e51c";
        }
    }
}