/* ==========================================================================
   NINO SEPO — About Page
   File: assets/css/about.css
   ========================================================================== */


/* ==========================================================================
   1. PAGE FOUNDATION
   ========================================================================== */

.ninosepo-about {
    --about-black: #0b0b0b;
    --about-text: #151515;
    --about-muted: #69737d;
    --about-line: #dddddd;
    --about-soft: #f5f5f3;
    --about-width: 1710px;
    --about-gutter: 48px;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    padding: 0 !important;
    gap: 0 !important;

    color: var(--about-text);
    background: #fff;
}

.ninosepo-about,
.ninosepo-about * {
    box-sizing: border-box;
}

.ninosepo-about .elementor-widget {
    margin: 0;
}

.ninosepo-about .elementor-heading-title {
    margin: 0;

    color: inherit;
    font-family: inherit;
}

.ninosepo-about
.elementor-widget-text-editor
p:first-child {
    margin-top: 0;
}

.ninosepo-about
.elementor-widget-text-editor
p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   2. INTRODUCTION
   ========================================================================== */

.ninosepo-about__intro {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(330px, 0.65fr);

    grid-template-areas:
        "eyebrow eyebrow"
        "title lead";

    column-gap: clamp(55px, 7vw, 135px);
    row-gap: 14px;

    width: min(
        calc(100% - var(--about-gutter)),
        var(--about-width)
    );

    margin: 52px auto 76px;

    padding:
        27px
        0
        48px !important;

    border-top: 1px solid var(--about-line);
    border-bottom: 1px solid var(--about-line);
}

.ninosepo-about__eyebrow {
    grid-area: eyebrow;
}

.ninosepo-about__eyebrow
.elementor-heading-title {
    color: var(--about-muted);

    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.ninosepo-about__title {
    grid-area: title;
    align-self: end;
}

.ninosepo-about__title
.elementor-heading-title {
    max-width: 1000px;

    color: var(--about-text);

    font-size: clamp(68px, 8.4vw, 160px);
    font-weight: 300;
    line-height: 0.87;
    letter-spacing: -0.06em;
}

.ninosepo-about__lead {
    grid-area: lead;
    align-self: end;
}

.ninosepo-about__lead
.elementor-widget-container {
    max-width: 500px;
    margin-left: auto;
}

.ninosepo-about__lead p {
    margin: 0;

    color: #2d2d2d;

    font-size: clamp(14px, 1.05vw, 17px);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.005em;
}


/* ==========================================================================
   3. PORTRAIT AND DESIGNER STORY
   ========================================================================== */

.ninosepo-about__portrait-section {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(390px, 0.98fr);

    align-items: start;

    column-gap: clamp(55px, 7vw, 125px);

    width: min(
        calc(100% - var(--about-gutter)),
        var(--about-width)
    );

    margin: 0 auto;

    padding:
        0
        0
        100px !important;
}

.ninosepo-about__portrait {
    display: flex !important;
    flex-direction: column;

    min-width: 0;
    gap: 0 !important;
}

.ninosepo-about__image {
    width: 100%;
    overflow: hidden;
}

.ninosepo-about__image
.elementor-widget-container {
    width: 100%;
    overflow: hidden;

    background: var(--about-black);
}

.ninosepo-about__image img {
    display: block;

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

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

    border: 0;
    border-radius: 0;

    filter: grayscale(100%);
}

.ninosepo-about__caption {
    padding-top: 12px;
}

.ninosepo-about__caption p {
    margin: 0;

    color: var(--about-muted);

    font-size: 9px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.ninosepo-about__story {
    display: flex !important;
    flex-direction: column;
    align-self: start;

    min-width: 0;

    padding:
        clamp(20px, 3.6vw, 60px)
        0
        0 !important;

    gap: 0 !important;
}

.ninosepo-about__section-label {
    margin-bottom: 18px !important;
}

.ninosepo-about__section-label
.elementor-heading-title {
    color: var(--about-muted);

    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.17em;

    text-transform: uppercase;
}

.ninosepo-about__section-title {
    margin-bottom: 34px !important;

    padding-bottom: 27px;

    border-bottom: 1px solid var(--about-line);
}

.ninosepo-about__section-title
.elementor-heading-title {
    max-width: 640px;

    color: var(--about-text);

    font-size: clamp(43px, 4vw, 74px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.043em;
}

.ninosepo-about__body
.elementor-widget-container {
    max-width: 650px;
}

.ninosepo-about__body p {
    margin: 0 0 21px;

    color: #262626;

    font-size: clamp(14px, 1vw, 16px);
    font-weight: 400;
    line-height: 1.82;
    letter-spacing: 0.003em;
}


/* ==========================================================================
   4. EDITORIAL STATEMENT
   ========================================================================== */

.ninosepo-about__statement {
    position: relative;

    display: flex !important;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    min-height: clamp(410px, 45vw, 650px);

    margin: 0;

    padding:
        clamp(75px, 8vw, 130px)
        max(
            calc((100vw - var(--about-width)) / 2),
            24px
        ) !important;

    gap: 0 !important;

    color: #fff;
    background: var(--about-black);

    overflow: hidden;
}

.ninosepo-about__statement::before {
    content: "";

    position: absolute;
    top: 0;
    right: 8%;
    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255, 255, 255, 0.14) 20%,
            rgba(255, 255, 255, 0.14) 80%,
            transparent
        );

    pointer-events: none;
}

.ninosepo-about__statement-label {
    position: relative;
    z-index: 1;

    margin-bottom: clamp(28px, 4vw, 52px) !important;
}

.ninosepo-about__statement-label
.elementor-heading-title {
    color: #a5adb4;

    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.ninosepo-about__quote {
    position: relative;
    z-index: 1;

    max-width: 1370px;
}

.ninosepo-about__quote
.elementor-heading-title {
    color: #fff;

    font-size: clamp(45px, 5.8vw, 108px);
    font-weight: 300;
    line-height: 1.03;
    letter-spacing: -0.048em;
}


/* ==========================================================================
   5. DETAILS GRID
   ========================================================================== */

.ninosepo-about__details {
    display: grid !important;

    /*
     * Recognition contains more copy, so it receives
     * a larger proportion of the available width.
     */
    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(0, 0.96fr)
        minmax(0, 1.29fr);

    width: min(
        calc(100% - var(--about-gutter)),
        var(--about-width)
    );

    margin: 0 auto;

    padding:
        95px
        0
        110px !important;

    gap: 0 !important;
}

.ninosepo-about__detail {
    display: flex !important;
    flex-direction: column;

    min-width: 0;

    padding:
        25px
        clamp(28px, 3.2vw, 55px)
        0 !important;

    border-top: 1px solid var(--about-text);
    border-right: 1px solid var(--about-line);

    gap: 0 !important;
}

.ninosepo-about__detail:first-child {
    padding-left: 0 !important;
}

.ninosepo-about__detail:last-child {
    padding-right: 0 !important;
    border-right: 0;
}

.ninosepo-about__detail-title {
    margin-bottom: 28px !important;
}

.ninosepo-about__detail-title
.elementor-heading-title {
    color: var(--about-muted);

    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.17em;

    text-transform: uppercase;
}

.ninosepo-about__detail-text
.elementor-widget-container {
    max-width: 620px;
}

.ninosepo-about__detail-text p {
    margin: 0 0 19px;

    color: #292929;

    font-size: clamp(13px, 0.9vw, 15px);
    font-weight: 400;
    line-height: 1.78;
}


/* ==========================================================================
   6. CLOSING STATEMENT
   ========================================================================== */

.ninosepo-about__closing {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, 0.85fr);

    align-items: end;

    column-gap: clamp(45px, 7vw, 120px);

    width: min(
        calc(100% - var(--about-gutter)),
        var(--about-width)
    );

    margin: 0 auto;

    padding:
        58px
        0
        95px !important;

    border-top: 1px solid var(--about-line);

    gap: 0 !important;
}

.ninosepo-about__closing-title
.elementor-heading-title {
    max-width: 980px;

    color: var(--about-text);

    font-size: clamp(49px, 5vw, 94px);
    font-weight: 300;
    line-height: 0.99;
    letter-spacing: -0.048em;
}

.ninosepo-about__closing-text {
    align-self: end;

    padding-bottom: 7px;
}

.ninosepo-about__closing-text
.elementor-widget-container {
    max-width: 480px;
    margin-left: auto;
}

.ninosepo-about__closing-text p {
    margin: 0;

    color: #333;

    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.72;
}


/* ==========================================================================
   7. LARGE TABLET
   ========================================================================== */

@media (max-width: 1200px) {

    .ninosepo-about {
        --about-gutter: 40px;
    }

    .ninosepo-about__portrait-section {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, 0.92fr);

        column-gap: 55px;
    }

    .ninosepo-about__details {
        padding-top: 80px !important;
        padding-bottom: 90px !important;
    }

    .ninosepo-about__detail {
        padding-right: 30px !important;
        padding-left: 30px !important;
    }

    .ninosepo-about__detail:first-child {
        padding-left: 0 !important;
    }

    .ninosepo-about__detail:last-child {
        padding-right: 0 !important;
    }
}


/* ==========================================================================
   8. TABLET
   ========================================================================== */

@media (max-width: 1024px) {

    .ninosepo-about__intro {
        grid-template-columns: 1fr;

        grid-template-areas:
            "eyebrow"
            "title"
            "lead";

        row-gap: 19px;

        margin-top: 38px;
        margin-bottom: 58px;

        padding-bottom: 38px !important;
    }

    .ninosepo-about__title
    .elementor-heading-title {
        font-size: clamp(68px, 14vw, 120px);
        line-height: 0.91;
    }

    .ninosepo-about__lead
    .elementor-widget-container {
        max-width: 600px;

        margin:
            10px
            0
            0;
    }

    .ninosepo-about__portrait-section {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, 0.95fr);

        column-gap: 40px;

        padding-bottom: 70px !important;
    }

    .ninosepo-about__story {
        padding-top: 18px !important;
    }

    .ninosepo-about__section-title {
        margin-bottom: 27px !important;
        padding-bottom: 22px;
    }

    .ninosepo-about__statement {
        min-height: 500px;
    }

    .ninosepo-about__details {
        grid-template-columns: 1fr;

        padding-top: 70px !important;
        padding-bottom: 78px !important;
    }

    .ninosepo-about__detail,
    .ninosepo-about__detail:first-child,
    .ninosepo-about__detail:last-child {
        padding:
            25px
            0
            43px !important;

        border-top: 1px solid var(--about-text);
        border-right: 0;
    }

    .ninosepo-about__detail:last-child {
        padding-bottom: 0 !important;
    }

    .ninosepo-about__detail-text
    .elementor-widget-container {
        max-width: 750px;
    }

    .ninosepo-about__closing {
        grid-template-columns: 1fr;

        row-gap: 27px;

        padding-bottom: 85px !important;
    }

    .ninosepo-about__closing-text
    .elementor-widget-container {
        margin-left: 0;
    }
}


/* ==========================================================================
   9. MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    .ninosepo-about {
        --about-gutter: 32px;
    }

    .ninosepo-about__intro {
        margin-top: 25px;
        margin-bottom: 43px;

        padding-top: 20px !important;
        padding-bottom: 28px !important;
    }

    .ninosepo-about__eyebrow
    .elementor-heading-title {
        font-size: 9px;
    }

    .ninosepo-about__title
    .elementor-heading-title {
        font-size: clamp(54px, 19vw, 82px);
        line-height: 0.91;
    }

    .ninosepo-about__lead p {
        font-size: 13px;
        line-height: 1.7;
    }

    .ninosepo-about__portrait-section {
        grid-template-columns: 1fr;

        row-gap: 45px;

        padding-bottom: 58px !important;
    }

    .ninosepo-about__image img {
        aspect-ratio: 4 / 5;
        object-position: 50% 36%;
    }

    .ninosepo-about__caption {
        padding-top: 10px;
    }

    .ninosepo-about__caption p {
        font-size: 8px;
    }

    .ninosepo-about__story {
        padding: 0 !important;
    }

    .ninosepo-about__section-label {
        margin-bottom: 16px !important;
    }

    .ninosepo-about__section-title {
        margin-bottom: 25px !important;
        padding-bottom: 21px;
    }

    .ninosepo-about__section-title
    .elementor-heading-title {
        font-size: clamp(40px, 12.5vw, 58px);
    }

    .ninosepo-about__body p {
        margin-bottom: 18px;

        font-size: 13px;
        line-height: 1.76;
    }

    .ninosepo-about__statement {
        min-height: 400px;

        padding:
            65px
            16px !important;
    }

    .ninosepo-about__statement::before {
        display: none;
    }

    .ninosepo-about__statement-label {
        margin-bottom: 29px !important;
    }

    .ninosepo-about__statement-label
    .elementor-heading-title {
        font-size: 9px;
        line-height: 1.6;
    }

    .ninosepo-about__quote
    .elementor-heading-title {
        font-size: clamp(40px, 12vw, 60px);
        line-height: 1.04;
    }

    .ninosepo-about__details {
        padding-top: 58px !important;
        padding-bottom: 62px !important;
    }

    .ninosepo-about__detail,
    .ninosepo-about__detail:first-child,
    .ninosepo-about__detail:last-child {
        padding:
            21px
            0
            38px !important;
    }

    .ninosepo-about__detail:last-child {
        padding-bottom: 0 !important;
    }

    .ninosepo-about__detail-title {
        margin-bottom: 22px !important;
    }

    .ninosepo-about__detail-text p {
        margin-bottom: 17px;

        font-size: 13px;
        line-height: 1.74;
    }

    .ninosepo-about__closing {
        row-gap: 22px;

        padding-top: 42px !important;
        padding-bottom: 62px !important;
    }

    .ninosepo-about__closing-title
    .elementor-heading-title {
        font-size: clamp(41px, 12vw, 60px);
        line-height: 1;
    }

    .ninosepo-about__closing-text {
        padding-bottom: 0;
    }

    .ninosepo-about__closing-text p {
        font-size: 13px;
        line-height: 1.7;
    }
}


/* ==========================================================================
   10. SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    .ninosepo-about {
        --about-gutter: 26px;
    }

    .ninosepo-about__title
    .elementor-heading-title {
        font-size: clamp(50px, 18vw, 72px);
    }

    .ninosepo-about__statement {
        padding-right: 13px !important;
        padding-left: 13px !important;
    }

    .ninosepo-about__quote
    .elementor-heading-title {
        font-size: clamp(38px, 11.5vw, 52px);
    }

    .ninosepo-about__closing-title
    .elementor-heading-title {
        font-size: clamp(38px, 11.5vw, 53px);
    }
}


/* ==========================================================================
   11. REDUCED MOTION
   ========================================================================== */

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

    .ninosepo-about *,
    .ninosepo-about *::before,
    .ninosepo-about *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}