:root {
    --portrait-paper: #e8e6df;
    --portrait-ink: #11110f;
}


/* PAGE HEADER */

.portfolio-page {
    background: #080808;
}

.portfolio-header {
    position: absolute;
}

.portfolio-header-center {
    position: absolute;
    left: 50%;

    transform: translateX(-50%);

    color: rgba(255,255,255,.72);

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.portfolio-close {
    position: relative;
    z-index: 1010;

    display: inline-flex;
    align-items: center;
    gap: 13px;

    color: rgba(255,255,255,.85);

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.portfolio-close span:last-child {
    font-size: 18px;
    line-height: 1;

    transition: transform 180ms ease;
}

.portfolio-close:hover span:last-child {
    transform: rotate(90deg);
}


/* HERO */

.portrait-hero {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: flex-end;

    overflow: hidden;
}

.portrait-hero-media {
    position: absolute;
    inset: 0;
}

.portrait-hero-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 34%;

    animation:
        portrait-hero-settle
        1700ms
        cubic-bezier(.2,.75,.2,1)
        both;
}

@keyframes portrait-hero-settle {
    from {
        transform: scale(1.07);
        filter: brightness(.76);
    }

    to {
        transform: scale(1.01);
        filter: brightness(1);
    }
}

.portrait-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.76) 0%,
            rgba(0,0,0,.24) 45%,
            rgba(0,0,0,.14) 100%
        );
}

.portrait-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;

    padding:
        140px
        var(--pad)
        clamp(32px, 5vh, 62px);
}

.portfolio-index {
    display: flex;
    gap: 26px;

    margin-bottom: clamp(25px, 4vw, 48px);

    color: rgba(255,255,255,.68);

    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .15em;
}

.portrait-hero h1 {
    max-width: 1300px;

    margin: 0;

    font-size: clamp(64px, 11vw, 175px);
    line-height: .82;
    font-weight: 500;
    letter-spacing: -.078em;
}

.portrait-hero h1 span {
    display: block;

    color: rgba(255,255,255,.72);

    font-weight: 300;
    font-style: italic;
}

.portrait-hero-footer {
    display: flex;
    justify-content: space-between;

    gap: 30px;

    margin-top: clamp(36px, 6vw, 70px);
    padding-top: 17px;

    border-top: 1px solid rgba(255,255,255,.3);

    color: rgba(255,255,255,.76);

    font-size: 10px;
}

.portrait-hero-footer p {
    margin: 0;
}

.portrait-hero-footer a {
    display: inline-flex;
    gap: 16px;
}


/* STATEMENT */

.portfolio-statement {
    padding:
        clamp(85px, 10vw, 150px)
        var(--pad);

    background: var(--portrait-paper);
    color: var(--portrait-ink);
}

.portfolio-statement .section-label {
    color: #696761;
}

.portfolio-statement-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);

    align-items: end;

    gap: clamp(45px, 7vw, 125px);

    margin-top: clamp(35px, 5vw, 70px);
}

.portfolio-statement-main {
    max-width: 1050px;

    margin: 0;

    font-size: clamp(50px, 7.4vw, 118px);
    line-height: .9;
    letter-spacing: -.066em;
}

.portfolio-statement-main em {
    font-weight: 300;
}

.portfolio-statement-side {
    max-width: 350px;

    margin: 0;

    color: #595750;

    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.55;
}


/* EDITORIAL WORK */

.editorial-work {
    padding-top: clamp(80px, 10vw, 145px);

    background: #080808;
}

figure {
    margin: 0;
}

.full-bleed-image {
    position: relative;

    width: calc(100% - (var(--pad) * 2));
    margin: 0 var(--pad);

    overflow: hidden;
}

.full-bleed-image img {
    width: 100%;
    height: min(82vw, 1100px);

    object-fit: cover;
    object-position: 50% 44%;
}

figcaption {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    margin-top: 11px;

    color: #85857f;

    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.editorial-pair {
    display: grid;

    padding:
        clamp(110px, 14vw, 210px)
        var(--pad);
}

.editorial-pair--first {
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(220px, .65fr);

    gap: clamp(50px, 9vw, 160px);

    align-items: end;
}

.editorial-frame {
    overflow: hidden;
}

.editorial-frame img {
    width: 100%;

    object-fit: cover;
}

.editorial-frame--large {
    max-width: 900px;
}

.editorial-frame--large img {
    aspect-ratio: 4 / 5;
}

.editorial-note {
    max-width: 330px;

    padding-bottom: 40px;
}

.editorial-note span {
    color: #686862;

    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.editorial-note p {
    margin:
        22px
        0
        0;

    color: #aaa9a3;

    font-size: clamp(16px, 1.5vw, 22px);
    line-height: 1.45;
}

.editorial-pair--offset {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: clamp(28px, 4vw, 64px);

    align-items: start;
}

.editorial-frame--medium:first-child,
.editorial-frame--medium:last-child {
    width: 100%;
    max-width: none;
    justify-self: stretch;
}

.editorial-frame--medium img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.editorial-frame--lower {
    margin-top: 0;
}


/* HEADSHOTS */

.headshots-section {
    margin-top: clamp(40px, 6vw, 90px);

    padding:
        var(--space)
        var(--pad);

    background: #d9d6cd;
    color: #10100f;
}

.headshots-heading {
    display: grid;
    grid-template-columns: 1fr 3fr;

    gap: 40px;

    margin-bottom: clamp(60px, 8vw, 110px);
}

.headshots-heading .section-label {
    color: #6b6861;
}

.headshots-heading h2 {
    max-width: 1000px;

    margin: 0;

    font-size: clamp(48px, 7vw, 110px);
    line-height: .89;
    font-weight: 500;
    letter-spacing: -.067em;
}

.headshots-heading h2 span {
    display: block;

    color: #79766e;

    font-weight: 300;
    font-style: italic;
}

.headshots-heading div > p {
    max-width: 440px;

    margin:
        30px
        0
        0;

    color: #57554f;

    font-size: clamp(14px, 1.2vw, 18px);
}

.headshots-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: clamp(20px, 3vw, 48px);
}

.headshot-frame img {
    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;
    object-position: 50% 35%;
}

.headshot-frame figcaption {
    color: #6b6862;
}


/* CONTACT */

.portrait-contact {
    padding:
        var(--space)
        var(--pad);

    background: #080808;
}

.portrait-contact .section-label {
    color: #7e7e78;
}

.portrait-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);

    align-items: end;

    gap: clamp(45px, 8vw, 140px);

    margin-top: clamp(40px, 6vw, 75px);
}

.portrait-contact h2 {
    margin: 0;

    font-size: clamp(52px, 8.2vw, 132px);
    line-height: .85;
    font-weight: 500;
    letter-spacing: -.072em;
}

.portrait-contact h2 span {
    display: block;

    color: #75756f;

    font-weight: 300;
    font-style: italic;
}

.portrait-contact a {
    display: flex;
    justify-content: space-between;

    gap: 30px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(255,255,255,.55);

    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}


/* NEXT PORTFOLIO */

.next-portfolio {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    padding:
        clamp(75px, 9vw, 140px)
        var(--pad);

    background: #171717;

    transition: background 250ms ease;
}

.next-portfolio:hover {
    background: #202020;
}

.next-portfolio .section-label {
    color: #767670;
}

.next-portfolio h2 {
    margin:
        25px
        0
        0;

    font-size: clamp(50px, 8vw, 125px);
    line-height: .85;
    font-weight: 500;
    letter-spacing: -.07em;
}

.next-portfolio h2 span {
    display: block;

    color: #75756f;

    font-weight: 300;
    font-style: italic;
}

.next-arrow {
    font-size: clamp(45px, 6vw, 90px);

    transition: transform 220ms ease;
}

.next-portfolio:hover .next-arrow {
    transform: translate(8px, -8px);
}


/* REVEAL */

.reveal-image {
    opacity: 0;
    transform: translateY(36px);

    transition:
        opacity 800ms cubic-bezier(.2,.7,.2,1),
        transform 800ms cubic-bezier(.2,.7,.2,1);
}

.reveal-image.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-image img {
    transition:
        transform
        1100ms
        cubic-bezier(.2,.7,.2,1);
}

.reveal-image.is-visible img {
    transform: scale(1.001);
}


/* PROGRESS */

.portfolio-progress {
    position: fixed;
    z-index: 2500;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 2px;

    pointer-events: none;

    background: rgba(255,255,255,.08);
}

.portfolio-progress-bar {
    display: block;

    width: 0%;
    height: 100%;

    background: rgba(255,255,255,.72);
}


/* MOBILE */

@media (max-width: 780px) {

    .portfolio-header-center {
        display: none;
    }

    .portfolio-close span:first-child {
        display: none;
    }

    .portrait-hero-media img {
        object-position: 50% 36%;
    }

    .portrait-hero h1 {
        font-size: clamp(63px, 19vw, 108px);
    }

    .portrait-hero-footer {
        display: block;
    }

    .portrait-hero-footer p {
        margin-bottom: 14px;
    }

    .portfolio-statement-grid {
        display: block;
    }

    .portfolio-statement-main {
        font-size: clamp(45px, 12.5vw, 72px);
    }

    .portfolio-statement-side {
        margin-top: 42px;
    }

    .full-bleed-image {
        width: calc(100% - (var(--pad) * 2));
    }

    .full-bleed-image img {
        height: 125vw;
    }

    .editorial-pair--first,
    .editorial-pair--offset {
        display: block;
    }

    .editorial-note {
        margin-top: 50px;
        padding-bottom: 0;
    }

    .editorial-frame--medium:last-child {
        margin-top: 65px;
    }

    .headshots-heading {
        display: block;
    }

    .headshots-heading h2 {
        margin-top: 28px;

        font-size: clamp(46px, 13vw, 76px);
    }

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

    .headshots-grid .headshot-frame + .headshot-frame {
        margin-top: 35px;
    }

    .portrait-contact-grid {
        display: block;
    }

    .portrait-contact h2 {
        font-size: clamp(52px, 15vw, 88px);
    }

    .portrait-contact a {
        margin-top: 55px;
    }

    .next-portfolio {
        align-items: flex-end;
    }

    .next-portfolio h2 {
        font-size: clamp(48px, 14vw, 80px);
    }
}


@media (prefers-reduced-motion: reduce) {

    .reveal-image {
        opacity: 1;
        transform: none;
    }

    .portrait-hero-media img {
        animation: none;
    }
}


/* Alignment refinement */
.editorial-pair--first {
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(240px, .55fr);
}

.editorial-frame--large {
    width: 100%;
    max-width: none;
}

.editorial-note {
    align-self: center;
    padding-bottom: 0;
}

@media (max-width: 780px) {
    .editorial-pair--offset {
        display: grid;
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .editorial-frame--medium:last-child {
        margin-top: 0;
    }
}


/* Managed portfolio images beyond the opening editorial sequence */
.portfolio-extra-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: clamp(28px, 4vw, 64px);

    padding:
        0
        var(--pad)
        clamp(110px, 14vw, 210px);
}

.portfolio-extra-image img {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 5;

    object-fit: cover;
}

@media (max-width: 780px) {
    .portfolio-extra-grid {
        grid-template-columns: 1fr;

        gap: 48px;
    }
}


/* Responsive managed photo/video media */
.portfolio-video {
    display: block;

    width: 100%;
    height: 100%;

    background: #080808;

    object-fit: cover;
}

.full-bleed-image > .portfolio-video {
    height: min(82vw, 1100px);
}

.editorial-frame > .portfolio-video,
.headshot-frame > .portfolio-video,
.portfolio-extra-image > .portfolio-video {
    aspect-ratio: 4 / 5;
}

.portfolio-extra-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: clamp(28px, 4vw, 64px);

    padding:
        0
        var(--pad)
        clamp(110px, 14vw, 210px);
}

.portfolio-extra-image img,
.portfolio-extra-image video {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 5;

    object-fit: cover;
}

@media (max-width: 780px) {

    .full-bleed-image > .portfolio-video {
        height: 125vw;
    }

    .portfolio-extra-grid {
        grid-template-columns: 1fr;

        gap: 48px;
    }
}


/* =========================================================
   PORTRAIT SCALE REBALANCE
========================================================= */

.editorial-work {
    padding-top: clamp(70px, 8vw, 120px);
}

.full-bleed-image {
    width:
        min(
            calc(100% - (var(--pad) * 2)),
            1380px
        );

    margin:
        0
        auto;
}

.full-bleed-image img,
.full-bleed-image > .portfolio-video {
    height: clamp(460px, 52vw, 790px);
}

.editorial-pair {
    width:
        min(
            calc(100% - (var(--pad) * 2)),
            1380px
        );

    margin:
        0
        auto;

    padding:
        clamp(85px, 10vw, 145px)
        0;
}

.editorial-pair--first {
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(240px, .55fr);

    gap: clamp(45px, 7vw, 105px);
}

.editorial-frame--large {
    max-width: 690px;
}

.editorial-pair--offset {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: clamp(34px, 4vw, 58px);
}

.editorial-frame--medium:first-child,
.editorial-frame--medium:last-child {
    width: min(100%, 590px);
}

.editorial-frame--medium:first-child {
    justify-self: end;
}

.editorial-frame--medium:last-child {
    justify-self: start;
}

.portfolio-extra-grid {
    width:
        min(
            calc(100% - (var(--pad) * 2)),
            1280px
        );

    margin:
        0
        auto;

    padding:
        0
        0
        clamp(90px, 10vw, 145px);
}

.headshots-section {
    width:
        min(
            calc(100% - (var(--pad) * 2)),
            1320px
        );

    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 780px) {

    .editorial-work {
        padding-top: 58px;
    }

    .full-bleed-image {
        width: calc(100% - 36px);
    }

    .full-bleed-image img,
    .full-bleed-image > .portfolio-video {
        height: min(92vw, 560px);
    }

    .editorial-pair {
        width: calc(100% - 36px);

        padding:
            72px
            0;
    }

    .editorial-frame--large,
    .editorial-frame--medium:first-child,
    .editorial-frame--medium:last-child {
        width: min(88vw, 520px);
        max-width: 100%;

        margin-right: auto;
        margin-left: auto;

        justify-self: center;
    }

    .editorial-frame--large img,
    .editorial-frame--medium img {
        max-height: 68vh;

        object-fit: cover;
    }

    .editorial-pair--offset {
        gap: 42px;
    }

    .portfolio-extra-grid {
        width: calc(100% - 36px);

        padding-bottom: 90px;
    }

    .portfolio-extra-image {
        width: min(88vw, 520px);

        margin:
            0
            auto;
    }

    .portfolio-extra-image img,
    .portfolio-extra-image video {
        max-height: 68vh;

        object-fit: cover;
    }

    .headshots-section {
        width: calc(100% - 36px);
    }

    .headshot-frame {
        width: min(88vw, 520px);

        margin:
            0
            auto;
    }

    .headshot-frame img,
    .headshot-frame video {
        max-height: 68vh;

        object-fit: cover;
    }
}


/* =========================================================
   PORTRAIT WORK — COMPACT SCALE V4
   Preserve the editorial rhythm without making each photo
   occupy nearly an entire desktop/mobile viewport.
========================================================= */

.editorial-work {
    padding-top: clamp(58px, 7vw, 95px);
}

.full-bleed-image {
    width: min(
        calc(100% - (var(--pad) * 2)),
        1080px
    );
}

.full-bleed-image img,
.full-bleed-image > .portfolio-video {
    height: clamp(380px, 40vw, 620px);
}

.editorial-pair {
    width: min(
        calc(100% - (var(--pad) * 2)),
        1080px
    );

    padding:
        clamp(64px, 7vw, 105px)
        0;
}

.editorial-pair--first {
    grid-template-columns:
        minmax(0, 520px)
        minmax(220px, 320px);

    justify-content: center;

    gap: clamp(38px, 5vw, 75px);
}

.editorial-frame--large {
    width: 100%;
    max-width: 520px;
}

.editorial-pair--offset {
    grid-template-columns:
        repeat(2, minmax(0, 420px));

    justify-content: center;

    gap: clamp(28px, 3vw, 46px);
}

.editorial-frame--medium:first-child,
.editorial-frame--medium:last-child {
    width: 100%;
    max-width: 420px;

    justify-self: center;
}

.portfolio-extra-grid {
    width: min(
        calc(100% - (var(--pad) * 2)),
        900px
    );

    grid-template-columns:
        repeat(2, minmax(0, 420px));

    justify-content: center;

    gap: clamp(28px, 3vw, 46px);
}

.headshots-section {
    width: min(
        calc(100% - (var(--pad) * 2)),
        940px
    );
}

.headshots-grid {
    grid-template-columns:
        repeat(2, minmax(0, 420px));

    justify-content: center;

    gap: clamp(28px, 3vw, 46px);
}

.headshot-frame {
    width: 100%;
    max-width: 420px;
}

@media (max-width: 780px) {

    .editorial-work {
        padding-top: 48px;
    }

    .full-bleed-image {
        width: calc(100% - 40px);
    }

    .full-bleed-image img,
    .full-bleed-image > .portfolio-video {
        height: min(76vw, 420px);
    }

    .editorial-pair {
        width: calc(100% - 40px);

        padding:
            58px
            0;
    }

    .editorial-pair--first,
    .editorial-pair--offset {
        display: grid;

        grid-template-columns: 1fr;

        gap: 34px;

        justify-items: center;
    }

    .editorial-frame--large,
    .editorial-frame--medium:first-child,
    .editorial-frame--medium:last-child {
        width: min(78vw, 360px);
        max-width: 100%;
    }

    .editorial-frame--large img,
    .editorial-frame--medium img,
    .editorial-frame--large video,
    .editorial-frame--medium video {
        max-height: 56vh;
    }

    .editorial-frame--medium:last-child {
        margin-top: 0;
    }

    .editorial-note {
        width: min(78vw, 360px);

        margin-top: 4px;
    }

    .portfolio-extra-grid {
        width: calc(100% - 40px);

        grid-template-columns: 1fr;

        gap: 34px;

        padding-bottom: 72px;
    }

    .portfolio-extra-image {
        width: min(78vw, 360px);
    }

    .portfolio-extra-image img,
    .portfolio-extra-image video {
        max-height: 56vh;
    }

    .headshots-section {
        width: calc(100% - 40px);
    }

    .headshots-grid {
        grid-template-columns: 1fr;

        gap: 34px;

        justify-items: center;
    }

    .headshots-grid .headshot-frame + .headshot-frame {
        margin-top: 0;
    }

    .headshot-frame {
        width: min(78vw, 360px);
    }

    .headshot-frame img,
    .headshot-frame video {
        max-height: 56vh;
    }
}


/* =========================================================
   SMART MEDIA FLOW V1 - intrinsic aspect ratio first
========================================================= */

.smart-portfolio-section {
    padding: clamp(80px, 9vw, 135px) var(--pad);
    background: #080808;
    color: #f2f1ec;
}

.smart-portfolio-section--paper {
    background: #d9d6cd;
    color: #11110f;
}

.smart-section-heading {
    display: grid;
    grid-template-columns: minmax(120px, .28fr) minmax(0, 1fr);
    gap: clamp(36px, 7vw, 100px);
    width: min(100%, 1180px);
    margin: 0 auto clamp(55px, 7vw, 90px);
    align-items: end;
}

.smart-section-heading h2 {
    max-width: 900px;
    margin: 0;
    font-size: clamp(44px, 6vw, 88px);
    line-height: .9;
    font-weight: 400;
    letter-spacing: -.055em;
}

.smart-section-heading h2 em {
    color: #77746c;
    font-weight: 300;
}

.smart-section-heading div > p {
    max-width: 520px;
    margin: 24px 0 0;
    color: #8d8c86;
    font-size: 13px;
    line-height: 1.55;
}

.smart-portfolio-section--paper .smart-section-heading div > p,
.smart-portfolio-section--paper .section-label {
    color: #66635d;
}

.smart-media-flow {
    display: grid;
    gap: clamp(42px, 5vw, 72px);
    width: min(100%, 1180px);
    margin: 0 auto;
}

.smart-media-row {
    display: grid;
    justify-content: center;
    gap: clamp(22px, 3vw, 38px);
}

.smart-media-row--wide {
    grid-template-columns: minmax(0, 1120px);
}

.smart-media-row--pair {
    grid-template-columns: repeat(2, minmax(0, 500px));
}

.smart-media-row--single,
.smart-media-row--video {
    grid-template-columns: minmax(0, 500px);
}

.smart-media-card {
    min-width: 0;
}

.smart-media-frame {
    display: grid;
    place-items: center;
    width: 100%;
    overflow: hidden;
    background: #111;
}

.smart-portfolio-section--paper .smart-media-frame {
    background: #cfccc3;
}

.natural-portfolio-image {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: 78vh;
    object-fit: contain !important;
    object-position: center !important;
}

.smart-media-row--wide .natural-portfolio-image {
    width: 100%;
    max-height: 76vh;
}

.natural-portfolio-video {
    display: block;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    max-height: 74vh;
    margin: 0 auto;
    object-fit: contain !important;
    background: #000;
}

.natural-portfolio-video:fullscreen,
.natural-portfolio-video:-webkit-full-screen,
.portfolio-video:fullscreen,
.portfolio-video:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
}

.smart-media-card figcaption {
    display: block;
    margin-top: 9px;
    color: #757570;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.smart-portfolio-section--paper .smart-media-card figcaption {
    color: #66635e;
}

@media (max-width: 780px) {
    .smart-portfolio-section {
        padding: 68px 20px 82px;
    }

    .smart-section-heading {
        display: block;
        margin-bottom: 42px;
    }

    .smart-section-heading .section-label {
        margin-bottom: 24px;
    }

    .smart-section-heading h2 {
        font-size: clamp(42px, 12vw, 66px);
    }

    .smart-media-flow {
        gap: 34px;
    }

    .smart-media-row--wide,
    .smart-media-row--pair,
    .smart-media-row--single,
    .smart-media-row--video {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .smart-media-row--pair {
        gap: 28px;
    }

    .smart-media-row--pair .smart-media-card,
    .smart-media-row--single .smart-media-card,
    .smart-media-row--video .smart-media-card {
        width: min(82vw, 380px);
    }

    .smart-media-row--wide .smart-media-card {
        width: 100%;
    }

    .natural-portfolio-image,
    .natural-portfolio-video,
    .smart-media-row--wide .natural-portfolio-image {
        max-height: 62vh;
    }
}


/* =========================================================
   SMART MEDIA FLOW V2
   Final presentation tuning:
   larger photographs, smaller outer margins, clean portrait video.
========================================================= */

.smart-portfolio-section {
    padding-right: clamp(22px, 3.2vw, 62px);
    padding-left: clamp(22px, 3.2vw, 62px);
}

.smart-section-heading,
.smart-media-flow {
    width: min(100%, 1380px);
}

.smart-media-row {
    gap: clamp(22px, 2.4vw, 34px);
}

.smart-media-row--wide {
    grid-template-columns: minmax(0, 1320px);
}

.smart-media-row--pair {
    grid-template-columns:
        repeat(2, minmax(0, 590px));
}

.smart-media-row--single {
    grid-template-columns:
        minmax(0, 590px);
}

/*
 * Video gets its intrinsic visual width inline.
 * No artificial black side panel around portrait video.
 */
.smart-media-row--video {
    grid-template-columns: auto;
}

.smart-media-row--video .smart-media-card {
    width: fit-content;
    max-width: 100%;

    justify-self: center;
}

.smart-media-row--video .smart-media-frame {
    width: fit-content;
    max-width: 100%;

    overflow: visible;

    background: transparent !important;
}

.natural-portfolio-image {
    max-height: 82vh;
}

.smart-media-row--wide .natural-portfolio-image {
    max-height: 80vh;
}

.natural-portfolio-video {
    width: auto !important;
    max-width: min(100%, 640px);
    max-height: 80vh;

    background: transparent;
}

/*
 * Black surround belongs ONLY to browser fullscreen.
 */
.natural-portfolio-video:fullscreen,
.natural-portfolio-video:-webkit-full-screen,
.portfolio-video:fullscreen,
.portfolio-video:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;

    max-width: 100vw !important;
    max-height: 100vh !important;

    margin: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;

    background: #000 !important;
}


@media (max-width: 780px) {

    .smart-portfolio-section {
        padding-right: 12px;
        padding-left: 12px;
    }

    .smart-section-heading {
        width: calc(100% - 16px);
    }

    .smart-media-flow {
        width: 100%;
    }

    .smart-media-row--pair .smart-media-card,
    .smart-media-row--single .smart-media-card {
        width: min(94vw, 500px);
    }

    .smart-media-row--video .smart-media-card {
        width: fit-content;
        max-width: 94vw;
    }

    .smart-media-row--wide .smart-media-card {
        width: min(96vw, 760px);
    }

    .natural-portfolio-image,
    .smart-media-row--wide .natural-portfolio-image {
        max-height: 72vh;
    }

    .natural-portfolio-video {
        max-width: 94vw;
        max-height: 72vh;
    }
}


/* =========================================================
   SMART MEDIA FLOW V3 — RESPONSIVE GRID FIX
   Two-up only when it actually fits. No fake image frames.
========================================================= */

.smart-media-frame,
.smart-portfolio-section--paper .smart-media-frame {
    display: block;

    width: 100%;

    overflow: visible;

    background: transparent !important;
}

.smart-media-row--pair {
    grid-template-columns:
        repeat(2, minmax(0, 620px));

    width: 100%;

    justify-content: center;
}

.smart-media-row--single {
    grid-template-columns:
        minmax(0, 620px);
}

.smart-media-row--wide {
    grid-template-columns:
        minmax(0, 1360px);
}

.smart-media-row--pair .smart-media-card,
.smart-media-row--single .smart-media-card,
.smart-media-row--wide .smart-media-card {
    width: 100%;
    max-width: 100%;
}

/*
 * Do not shrink the actual photograph inside a larger card.
 * The card itself controls the scale, so no coloured border remains.
 */
.natural-portfolio-image,
.smart-media-row--wide .natural-portfolio-image {
    display: block;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;

    object-fit: contain !important;
}

.smart-media-row--video .smart-media-frame {
    display: block;

    width: fit-content;
    max-width: 100%;

    margin: 0 auto;

    background: transparent !important;
}

.natural-portfolio-video {
    display: block;

    width: auto !important;
    max-width: 100%;
    height: auto !important;
    max-height: 80vh;

    margin: 0 auto;

    background: transparent !important;
    object-fit: contain !important;
}

/*
 * Tablet / narrow desktop:
 * stop forcing two portraits beside each other before they collide.
 */
@media (max-width: 1180px) {

    .smart-portfolio-section {
        padding-right: clamp(14px, 2.5vw, 28px);
        padding-left: clamp(14px, 2.5vw, 28px);
    }

    .smart-media-flow {
        width: min(100%, 820px);
    }

    .smart-media-row--pair,
    .smart-media-row--single,
    .smart-media-row--video {
        grid-template-columns: 1fr;

        justify-items: center;
    }

    .smart-media-row--pair {
        gap: clamp(28px, 4vw, 46px);
    }

    .smart-media-row--pair .smart-media-card,
    .smart-media-row--single .smart-media-card {
        width: min(100%, 760px);
    }

    .smart-media-row--wide .smart-media-card {
        width: 100%;
    }
}

@media (max-width: 780px) {

    .smart-portfolio-section {
        padding-right: 10px;
        padding-left: 10px;
    }

    .smart-section-heading {
        width: calc(100% - 12px);
    }

    .smart-media-flow {
        width: 100%;

        gap: 34px;
    }

    .smart-media-row--pair,
    .smart-media-row--single,
    .smart-media-row--wide,
    .smart-media-row--video {
        width: 100%;
    }

    .smart-media-row--pair .smart-media-card,
    .smart-media-row--single .smart-media-card,
    .smart-media-row--wide .smart-media-card {
        width: 100%;
        max-width: 100%;
    }

    .natural-portfolio-image,
    .smart-media-row--wide .natural-portfolio-image {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
    }

    .smart-media-row--video .smart-media-card,
    .smart-media-row--video .smart-media-frame {
        width: fit-content;
        max-width: 100%;
    }

    .natural-portfolio-video {
        max-width: calc(100vw - 20px);
        max-height: 72vh;
    }
}


/* =========================================================
   SMART MEDIA FLOW V4 — WIDE DESKTOP FILL
   Narrow desktop/mobile from V3 stays unchanged.
========================================================= */

@media (min-width: 1181px) {

    .smart-portfolio-section {
        padding-right: clamp(20px, 2.4vw, 46px);
        padding-left: clamp(20px, 2.4vw, 46px);
    }

    .smart-section-heading,
    .smart-media-flow {
        width: min(100%, 1500px);
    }

    .smart-media-row--pair {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width: min(100%, 1500px);

        gap: clamp(24px, 2vw, 34px);
    }

    .smart-media-row--pair .smart-media-card {
        width: 100%;
        max-width: none;
    }

    .smart-media-row--single {
        grid-template-columns:
            minmax(0, 720px);
    }

    .smart-media-row--wide {
        grid-template-columns:
            minmax(0, 1450px);
    }
}


/* =========================================================
   PER-DEVICE PORTFOLIO VISIBILITY
========================================================= */

@media (min-width: 781px) {
    .smart-media-card.media-device--hide-desktop {
        display: none !important;
    }

    .smart-media-row:not(:has(> .smart-media-card:not(.media-device--hide-desktop))) {
        display: none !important;
    }

    .smart-media-row--pair:has(> .media-device--hide-desktop) {
        grid-template-columns: minmax(0, 760px);
        justify-content: center;
    }
}

@media (max-width: 780px) {
    .smart-media-card.media-device--hide-mobile {
        display: none !important;
    }

    .smart-media-row:not(:has(> .smart-media-card:not(.media-device--hide-mobile))) {
        display: none !important;
    }
}