.page-home .site-footer {
    margin-top: 2rem;
}

.page-home .layout-main-column {
    padding-bottom: 2rem;
}

.home-page {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.home-section {
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

.home-page h2 {
    width: fit-content;
    margin: 0 0 0.75rem;
    background: var(--heading-gradient);
    color: transparent;
    font-family: "Fira Code", ui-monospace, monospace;
    font-size: clamp(1.05rem, 0.96rem + 0.5vw, 1.35rem);
    line-height: 1.2;
    -webkit-background-clip: text;
    background-clip: text;
}

.visit-section {
    max-width: 42rem;
}

.visit-section p {
    color: var(--ctp-subtext1);
}

.feature-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin: 1rem 0 2rem;
}

.feature-card {
    --accent: var(--ctp-overlay1);
    --feature-label: "";
    position: relative;
    min-height: 5.1rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    column-gap: 0.65rem;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--ctp-text);
    padding: 0.75rem;
    transition: border-color 160ms ease, filter 160ms ease;
}

.feature-card:hover,
.feature-card:focus-within {
    border-color: var(--accent);
}

.feature-card::before {
    content: var(--feature-label);
    grid-row: 1 / 3;
    display: inline-grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--accent) 42%, transparent);
    color: var(--ctp-text);
    font-family: "Fira Code", ui-monospace, monospace;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;

    -webkit-mask: var(--feature-icon) center / contain no-repeat;
    mask: var(--feature-icon) center / contain no-repeat;
}

.feature-card::after {
    content: ">";
    grid-column: 3;
    grid-row: 2;
    align-self: end;
    color: var(--ctp-text);
    font-family: "Fira Code", ui-monospace, monospace;
    font-size: 1rem;
    line-height: 1;
}

.feature-card h3 {
    grid-column: 2 / 3;
    margin: 0;
    color: var(--ctp-text);
    font-size: 0.98rem;
    line-height: 1.2;
}

.feature-card h3 a {
    color: var(--ctp-text);
    text-decoration: none;
}

.feature-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.feature-card p {
    grid-column: 2 / 3;
    margin: 0.25rem 0 0;
    color: var(--ctp-subtext1);
    font-size: 0.72rem;
    line-height: 1.2;
}

.feature-card--committee {
    --accent: var(--ctp-pink);
    --feature-icon: url("/images/homepage/icons/users.svg");
}

.feature-card--discord {
    --accent: var(--ctp-lavender);
    --feature-icon: url("/images/homepage/icons/messages-square.svg");
}

.feature-card--services {
    --accent: var(--ctp-teal);
    --feature-icon: url("/images/homepage/icons/server-cog.svg");
}

.feature-card--history {
    --accent: var(--ctp-peach);
    --feature-icon: url("/images/homepage/icons/landmark.svg");
}

.feature-card--wiki {
    --accent: var(--ctp-overlay1);
    --feature-icon: url("/images/homepage/icons/book-open-text.svg");
}

.link-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 1rem 0 2rem;
}

.link-card {
    min-height: 10rem;
    border: 1px solid color-mix(in srgb, var(--ctp-surface1) 72%, transparent);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--ctp-surface0) 54%, transparent);
    padding: 0.85rem;
    transition: border-color 160ms ease;
}

.link-card:hover,
.link-card:focus-within {
    border-color: color-mix(in srgb, var(--ctp-lavender) 62%, transparent);
}

.link-card h3 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.55rem;
    color: var(--ctp-lavender);
    font-size: 0.95rem;
    line-height: 1.2;
}

.link-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.link-card li {
    margin: 0;
}

.link-card a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 1.5rem;
    color: var(--ctp-subtext1);
    font-size: 0.78rem;
    text-decoration: none;
    transition: color 140ms ease, padding-left 140ms ease;
}

.link-card a:visited {
    color: var(--ctp-subtext1);
}

.link-card a:hover,
.link-card a:focus-visible {
    color: var(--ctp-sapphire);
    padding-left: 0.2rem;
}

.link-card a::after {
    content: ">";
    flex: 0 0 auto;
    color: var(--ctp-text);
    font-family: "Fira Code", ui-monospace, monospace;
    font-size: 1rem;
    line-height: 1;
}

@media only screen and (max-width: 980px) {
    .feature-card-grid,
    .link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 560px) {
    .feature-card-grid,
    .link-grid {
        grid-template-columns: 1fr;
    }
}