/* ---------------------------------------
   Home
--------------------------------------- */

.page-home {
    padding-top: var(--header-height);
}

.home-page {
    width: 100%;
    padding: 0 var(--page-x);
}


/* ---------------------------------------
   Intro
--------------------------------------- */

.home-intro {
    width: 100%;
    margin-bottom: 24px;
}

/*
 * Schema first:
 * Latin / punctuation = Schema LL
 * Korean fallback = Pyeojin Gothic
 */

.home-intro__ko {
    font-family: var(--font-schema), var(--font-ko), sans-serif;
    font-size: clamp(32px, 2.895vw, 44px);
    line-height: 1.24;
    word-break: keep-all;
}

.home-intro__en {
    margin-top: 20px;

    font-family:
        var(--font-schema),
        sans-serif;

    font-size: clamp(
        33px,
        2.961vw,
        45px
    );

    line-height: 1.13;
}


.home-intro em {
    font-style: italic;
}


/* ---------------------------------------
   Hero
--------------------------------------- */

.home-hero-grid {
    width: 100%;
}


.home-hero {
    grid-column: 6 / -1;

    height: clamp(
        420px,
        42.632vw,
        648px
    );

    overflow: hidden;

    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    box-shadow: -2px 2px 9px rgb(0 0 0 / 29%), 0px -14px 9px rgba(0, 0, 0, 0.09);
}


.home-hero__media {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ---------------------------------------
   Feed
--------------------------------------- */

.home-feed {
    width: 100%;

    margin-top: 40px;

    row-gap: 16px;

    align-items: start;
}


.home-card {
    grid-column: span 3;

    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(0, 1fr);

    column-gap: var(--grid-gap);

    align-items: start;

    min-width: 0;
}


/* text = 2 columns */

.home-card__text {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
    min-width: 0;
}

.home-card__year {
    width: 36px;
    min-width: 36px;
    white-space: nowrap;

    font-family: var(--font-hal), serif;
    font-size: 12px;
    line-height: 1.16;
}

.home-card__category {
    min-width: 0;
}


.home-card__titles {
    grid-column: 2;
    grid-row: 2;

    margin-top: 4px;

    min-width: 0;
}


.home-card__title-ko {
    font-family: var(--font-schema), var(--font-ko), sans-serif;
    font-size: 14.5px;
    line-height: 1.22;
    font-weight: 500;
    word-break: keep-all;
}


.home-card__title-en {
    margin-top: 4px;

    font-family: var(--font-hal), serif;
    font-size: 16px;
    line-height: 1.20;
}


.home-card__title-en em {
    font-style: italic;
}


/* image = 1 column */

.home-card__image {
    min-width: 0;
}


.home-card__image img {
    width: 100%;
    height: auto;
}


/* ---------------------------------------
   Random logo
--------------------------------------- */

.home-page {
    position: relative;
}

.home-random-logo {
    position: absolute;
    z-index: 50;

    width: 40px;
    height: auto;

    visibility: hidden;
}

.home-random-logo.is-positioned {
    visibility: visible;
}


.home-random-logo img {
    width: 100%;
    height: auto;
}