/* =========================================================
   AARON KINGSLIEN — PORTFOLIO PAGE
   Uses the shared site header, buttons, contact card, and footer.
   ========================================================= */


/* -------------------------
   PAGE INTRODUCTION
------------------------- */

.portfolio-main {
    padding-top: 5.5rem;
}

.portfolio-jump {
    overflow: hidden;
    padding-top: 4.5rem;
    padding-bottom: 3rem;
}

.portfolio-jump::before {
    position: absolute;
    top: -22rem;
    right: -15rem;
    width: 44rem;
    height: 44rem;
    border: 1px solid rgba(23, 54, 95, 0.06);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.portfolio-jump__heading {
    position: relative;
    z-index: 2;
    margin-bottom: 2.25rem;
}

.portfolio-jump__title {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 5vw, 5rem);
    font-weight: 600;
    letter-spacing: -0.062em;
    line-height: 0.98;
}

.portfolio-jump__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-medium);
}

.portfolio-jump__card {
    display: flex;
    min-height: 13.5rem;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.4rem;
    padding: 1.4rem;
    border-right: 1px solid var(--color-border);
    transition:
        color var(--transition-standard),
        background-color var(--transition-standard);
}

.portfolio-jump__card:last-child {
    border-right: 0;
}

.portfolio-jump__card:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.portfolio-jump__number {
    color: var(--color-text-light);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.portfolio-jump__category {
    display: block;
    margin-bottom: 0.65rem;
    color: var(--color-primary-light);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: uppercase;
}

.portfolio-jump__card h2 {
    font-family: var(--font-heading);
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.portfolio-jump__arrow {
    align-self: flex-end;
    color: var(--color-primary);
    font-size: 1rem;
}

.portfolio-jump__card:hover .portfolio-jump__number,
.portfolio-jump__card:hover .portfolio-jump__category,
.portfolio-jump__card:hover .portfolio-jump__arrow {
    color: rgba(255, 255, 255, 0.72);
}


/* -------------------------
   PROJECT DOCUMENT
------------------------- */

.portfolio-document {
    width: 100%;
    padding-bottom: 0.5rem;
}

.project-page {
    display: flex;
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        11in
    );
    min-height: 8.5in;
    flex-direction: column;
    margin: 0 auto 2.2rem;
    padding: 0.3in 0.46in 0.34in;
    scroll-margin-top: 6.5rem;
    overflow: hidden;
    border: 1px solid rgba(187, 197, 209, 0.65);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-medium);
}

.portfolio-label {
    margin-bottom: 0.025in;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    line-height: 1;
    text-align: center;
}

.project-header {
    margin-bottom: 0.1in;
    text-align: center;
}

.project-number {
    display: block;
    margin-bottom: 0.035in;
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
}

.project-title {
    max-width: none;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 4.05rem;
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 0.96;
    white-space: nowrap;
}

.project-page--long-title .project-title {
    font-size: 3.45rem;
}

.project-lead {
    max-width: 9.6in;
    margin: 0.075in auto 0;
    color: var(--color-text-soft);
    font-size: 0.84rem;
    line-height: 1.48;
}

.project-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.12in;
    margin-top: 0.035in;
}

.gallery-item {
    min-width: 0;
}

.gallery-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 0.09in;
    background: var(--color-surface-soft);
}

.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.gallery-item figcaption {
    margin-top: 0.04in;
    color: var(--color-text-soft);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.project-content {
    display: grid;
    flex: 1;
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(0, 0.82fr);
    gap: 0.35in;
    align-items: center;
    min-height: 0;
    margin-top: 0.13in;
    margin-bottom: 0.085in;
}

.project-narrative {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    padding-left: 0.15in;
    border-left: 2px solid var(--color-accent);
}

.project-narrative p {
    color: var(--color-text-soft);
    font-size: clamp(0.68rem, 0.74vw, 0.78rem);
    line-height: 1.52;
}

.project-narrative p + p {
    margin-top: 0.07in;
}

.project-page--dense-copy .project-narrative p {
    font-size: clamp(0.64rem, 0.69vw, 0.73rem);
    line-height: 1.46;
}

.project-highlights {
    align-self: center;
    width: 100%;
    border-top: 1px solid var(--color-border);
}

.highlight-item {
    display: grid;
    grid-template-columns: 0.3in minmax(0, 1fr);
    gap: 0.08in;
    padding: 0.075in 0;
    border-bottom: 1px solid var(--color-border);
}

.highlight-number {
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.35;
}

.highlight-item h2 {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 0.79rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.highlight-item p {
    margin-top: 0.018in;
    color: var(--color-text-soft);
    font-size: 0.62rem;
    line-height: 1.4;
}

.project-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 0.09in;
}

.metric {
    display: flex;
    min-height: 0.68in;
    flex-direction: column;
    justify-content: center;
    padding: 0.085in 0.14in;
    border-right: 1px solid var(--color-border);
}

.metric:last-child {
    border-right: 0;
}

.metric strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1;
}

.metric span {
    margin-top: 0.035in;
    color: var(--color-text-soft);
    font-size: 0.59rem;
    font-weight: 700;
    line-height: 1.25;
}

.project-tools {
    flex-shrink: 0;
    margin-top: 0.075in;
    text-align: center;
}

.project-tools p {
    color: var(--color-text-soft);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
}

.project-tools strong {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 700;
}

.project-tools span {
    white-space: nowrap;
}


/* -------------------------
   ENDING SECTIONS
------------------------- */

.portfolio-next {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}


/* -------------------------
   RESPONSIVE
------------------------- */

@media screen and (max-width: 1100px) {
    .portfolio-jump__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio-jump__card:nth-child(2) {
        border-right: 0;
    }

    .portfolio-jump__card:nth-child(-n + 2) {
        border-bottom: 1px solid var(--color-border);
    }

    .project-title {
        font-size: clamp(2.8rem, 5.4vw, 4rem);
    }

    .project-page--long-title .project-title {
        font-size: clamp(2.55rem, 4.8vw, 3.45rem);
    }
}

@media screen and (max-width: 900px) {
    .project-page {
        min-height: auto;
        padding: 2rem;
    }

    .project-title,
    .project-page--long-title .project-title {
        font-size: clamp(2.35rem, 8vw, 3.8rem);
        white-space: normal;
    }

    .project-gallery {
        gap: 0.75rem;
    }

    .project-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-block: 1.5rem;
    }

    .project-narrative {
        min-height: auto;
    }
}

@media screen and (max-width: 720px) {
    .portfolio-main {
        padding-top: 4.9rem;
    }

    .portfolio-jump {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }

    .portfolio-jump__grid {
        grid-template-columns: 1fr;
    }

    .portfolio-jump__card,
    .portfolio-jump__card:nth-child(2) {
        min-height: 10rem;
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .portfolio-jump__card:last-child {
        border-bottom: 0;
    }

    .project-page {
        width: min(
            calc(100% - (var(--container-padding) * 2)),
            11in
        );
        padding: 1.35rem;
        border-radius: var(--radius-small);
    }

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

    .gallery-item figcaption {
        font-size: 0.68rem;
    }

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

    .metric {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .metric:last-child {
        border-bottom: 0;
    }

    .project-tools p {
        font-size: 0.7rem;
        line-height: 1.55;
    }
}

@media screen and (max-width: 480px) {
    .portfolio-jump__title {
        font-size: 2.65rem;
    }

    .project-page {
        padding: 1rem;
    }

    .project-title,
    .project-page--long-title .project-title {
        font-size: clamp(2rem, 10vw, 2.85rem);
    }

    .project-lead {
        font-size: 0.78rem;
    }

    .project-narrative {
        padding-left: 0.85rem;
    }

    .project-narrative p,
    .project-page--dense-copy .project-narrative p {
        font-size: 0.72rem;
    }

    .project-tools span {
        white-space: normal;
    }
}


/* -------------------------
   PRINT
------------------------- */

@page {
    size: Letter landscape;
    margin: 0;
}

@media print {
    .site-header,
    .portfolio-jump,
    .contact-section,
    .minimal-footer {
        display: none !important;
    }

    html,
    body {
        width: 11in;
        margin: 0;
        background: #ffffff;
    }

    .portfolio-main {
        padding-top: 0;
    }

    .project-page {
        width: 11in;
        height: 8.5in;
        min-height: 8.5in;
        margin: 0;
        padding: 0.3in 0.46in 0.34in;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        break-after: page;
        page-break-after: always;
    }

    .project-page:last-child {
        break-after: auto;
        page-break-after: auto;
    }
}