/* =========================================================
   ANTHONYCS — PROJECTS
   ========================================================= */


/* =========================================================
   RESET / BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background:
        radial-gradient(
            circle at 50% -20%,
            #151d25 0,
            #0c1116 38%,
            #090d11 100%
        );

    background-attachment: fixed;

    color: #f2f4f7;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.6;

    min-height: 100vh;
}

a {
    color: inherit;
}

.container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    border-bottom: 1px solid #202831;

    background: rgba(10, 14, 18, 0.88);

    backdrop-filter: blur(12px);

    position: sticky;

    top: 0;

    z-index: 100;
}

.nav-inner {
    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 32px;
}

.brand {
    color: #f6f8fa;

    font-size: 1rem;

    font-weight: 650;

    letter-spacing: -0.02em;

    text-decoration: none;
}

.nav-links {
    display: flex;

    align-items: center;

    gap: 30px;
}

.nav-links a {
    color: #838d98;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.73rem;

    letter-spacing: 0.07em;

    text-decoration: none;

    text-transform: uppercase;

    transition: color 0.15s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: #f4f6f8;
}


/* =========================================================
   INTRO
   ========================================================= */

.page-intro {
    padding: 84px 0 48px;
}

.eyebrow {
    margin: 0 0 13px;

    color: #7c8792;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.72rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.page-intro h1 {
    margin: 0;

    color: #f7f8fa;

    font-size: clamp(3.2rem, 7vw, 5.7rem);

    font-weight: 650;

    line-height: 0.98;

    letter-spacing: -0.065em;
}

.intro-text {
    max-width: 640px;

    margin: 25px 0 0;

    color: #9ca5af;

    font-size: 1rem;

    line-height: 1.75;
}

.project-count {
    margin-top: 54px;

    padding-top: 18px;

    border-top: 1px solid #222a32;

    display: flex;

    gap: 11px;

    align-items: baseline;

    color: #79838e;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.72rem;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.project-count strong {
    color: #eef1f4;

    font-size: 0.82rem;
}


/* =========================================================
   PROJECT GRID
   ========================================================= */

.projects-section {
    padding: 0 0 100px;
}

.project-grid {
    display: grid;

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

    gap: 16px;
}


/* =========================================================
   CARDS
   ========================================================= */

.project-card {
    min-height: 480px;

    padding: 25px 24px 0;

    border: 1px solid #29333d;

    border-radius: 11px;

    background: rgba(18, 24, 30, 0.84);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.13);

    display: flex;

    flex-direction: column;

    color: inherit;

    text-decoration: none;

    overflow: hidden;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.project-card:hover {
    border-color: #485562;

    background: rgba(21, 28, 35, 0.97);

    transform: translateY(-2px);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.24);
}


/* Featured CAPY card */

.project-card-featured {
    grid-column: 1 / -1;

    min-height: 430px;
}


/* =========================================================
   CARD TOP
   ========================================================= */

.card-top {
    min-height: 34px;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;
}

.project-number {
    color: #697580;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.65rem;

    line-height: 1;

    letter-spacing: 0.04em;
}

.project-status {
    padding: 7px 10px;

    border: 1px solid #28333d;

    border-radius: 4px;

    color: #82909d;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.57rem;

    line-height: 1;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.card-content {
    flex: 1;

    display: flex;

    flex-direction: column;
}

.project-card h2 {
    margin: 50px 0 14px;

    color: #f6f8fa;

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 610;

    line-height: 1;

    letter-spacing: -0.055em;
}

.project-description {
    max-width: 560px;

    margin: 0;

    color: #a2aab3;

    font-size: 0.95rem;

    line-height: 1.7;
}


/* Smaller cards */

.project-card:not(.project-card-featured) h2 {
    margin-top: 45px;

    font-size: 2.35rem;
}

.project-card:not(.project-card-featured)
.project-description {
    max-width: 500px;
}


/* =========================================================
   TAGS
   ========================================================= */

.project-tags {
    margin-top: auto;

    padding-top: 42px;
    padding-bottom: 30px;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.project-tags span {
    padding: 6px 9px;

    border: 1px solid #29343e;

    border-radius: 3px;

    color: #87929d;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.58rem;

    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   CARD FOOTER
   ========================================================= */

.card-footer {
    min-height: 58px;

    border-top: 1px solid #28313a;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color: #76818c;
}

.project-category {
    font-size: 0.73rem;
}

.project-link {
    color: #aab2ba;

    font-size: 0.72rem;

    white-space: nowrap;

    transition: color 0.15s ease;
}

.project-card:hover .project-link {
    color: #f4f6f8;
}


/* =========================================================
   FEATURED CARD TUNING
   ========================================================= */

.project-card-featured {
    padding-left: 24px;
    padding-right: 24px;
}

.project-card-featured h2 {
    margin-top: 56px;
}

.project-card-featured .project-description {
    max-width: 480px;
}

.project-card-featured .project-tags {
    padding-top: 57px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    border-top: 1px solid #202831;

    background: #090d11;
}

.footer-inner {
    min-height: 90px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    color: #66717c;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.68rem;
}

.footer-inner a {
    color: #8a949e;

    text-decoration: none;
}

.footer-inner a:hover {
    color: #f3f5f7;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 850px) {

    .project-grid {
        grid-template-columns: 1fr;
    }

    .project-card-featured {
        grid-column: auto;
    }

    .project-card,
    .project-card-featured {
        min-height: 430px;
    }

    .project-card h2,
    .project-card:not(.project-card-featured) h2 {
        font-size: 2.5rem;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .container {
        width: min(100% - 28px, 1180px);
    }

    .site-header {
        position: static;
    }

    .nav-inner {
        min-height: auto;

        padding: 18px 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;
    }

    .nav-links {
        width: 100%;

        gap: 20px;

        overflow-x: auto;

        white-space: nowrap;
    }

    .page-intro {
        padding-top: 58px;
        padding-bottom: 36px;
    }

    .page-intro h1 {
        font-size: 3.6rem;
    }

    .project-count {
        margin-top: 40px;
    }

    .projects-section {
        padding-bottom: 70px;
    }

    .project-card,
    .project-card-featured {
        min-height: 400px;

        padding: 20px 18px 0;
    }

    .project-card h2,
    .project-card:not(.project-card-featured) h2,
    .project-card-featured h2 {
        margin-top: 40px;

        font-size: 2.15rem;
    }

    .project-description {
        font-size: 0.9rem;
    }

    .project-tags {
        padding-top: 35px;
        padding-bottom: 24px;
    }

    .card-footer {
        min-height: 58px;
    }

    .project-category {
        font-size: 0.67rem;
    }

    .project-link {
        font-size: 0.67rem;
    }

    .footer-inner {
        min-height: 80px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

a:focus-visible {
    outline: 2px solid #9ba8b5;

    outline-offset: 4px;
}