/* =================================================
   AIVELLE COLLECTION — AZURE
================================================= */


/* =================================================
   Azure colour system
================================================= */

.azure-page {
    --azure-white: #f7f8f7;
    --azure-stone: #d9e0e4;
    --azure-pale: #b9d9e8;
    --azure-glass: #8dc9d8;
    --azure-sky: #72b7d2;
    --azure-aegean: #167fa3;
    --azure-deep: #0d5f7c;
    --azure-navy: #123447;
    --azure-midnight: #081b27;

    --azure-gradient:
        linear-gradient(
            90deg,
            var(--azure-pale),
            var(--azure-sky) 32%,
            var(--azure-aegean) 68%,
            var(--azure-deep)
        );

    --azure-gradient-deep:
        linear-gradient(
            115deg,
            var(--azure-glass),
            var(--azure-aegean) 38%,
            var(--azure-deep) 70%,
            var(--azure-navy)
        );

    --accent: var(--azure-aegean);
}


/* =================================================
   Text selection
================================================= */

.azure-page ::selection {
    color: #ffffff;
    background: var(--azure-aegean);
}


/* =================================================
   Editorial hero structure
================================================= */

.azure-page .editorial-hero {
    position: relative;
    display: grid;
    align-items: end;

    min-height: 100svh;
    padding-top: var(--header-height, 88px);

    overflow: hidden;
}

.azure-page .editorial-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.azure-page .editorial-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;
}

.azure-page .editorial-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, var(--content-max));
    margin: auto;

    padding:
        0
        var(--page-gutter)
        clamp(58px, 8vw, 118px);
}

.azure-page .hero-copy {
    width: min(100%, 1120px);

    opacity: var(--hero-copy-opacity, 1);

    transform:
        translate3d(
            0,
            var(--hero-copy-y, 0),
            0
        );
}


/* =================================================
   Hero typography
================================================= */

.azure-page .editorial-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(76px, 11vw, 176px);
    font-weight: 400;
    letter-spacing: -0.065em;
    line-height: 0.82;
}

.azure-page .hero-deck {
    max-width: 720px;
    margin: 36px 0 0;

    color: var(--azure-white);

    font-size: clamp(19px, 1.8vw, 28px);
    line-height: 1.45;
}

.azure-page .hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 18px 34px;
    margin-top: 38px;
}


/* =================================================
   Shared image containers
================================================= */

.azure-placeholder--hero,
.azure-placeholder--closing {
    position: absolute;
    inset: 0;
}

.azure-placeholder--hero img,
.azure-placeholder--closing img,
.azure-noon-media img,
.editorial-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =================================================
   Hero shading and accent
================================================= */

.azure-hero-shade {
    background:

        /* Left → right hero readability */
        linear-gradient(
            90deg,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.69) 20%,
            rgba(0,0,0,.34) 43%,
            rgba(0,0,0,.08) 68%,
            transparent 100%
        ),

        /* Bottom fade */
        linear-gradient(
            to top,
            rgba(5,18,28,.78),
            rgba(5,18,28,.12) 48%,
            transparent 72%
        ),

        /* NEW: subtle top-right nav fade */
        radial-gradient(
            circle at top right,
            rgba(0,0,0,.50) 0%,
            rgba(0,0,0,.24) 24%,
            rgba(0,0,0,.10) 42%,
            transparent 62%
        );
}

.azure-hero h1::after {
    content: "";

    display: block;

    width: clamp(90px, 12vw, 190px);
    height: 3px;
    margin-top: 30px;

    background: var(--azure-gradient);
}


/* =================================================
   Reading progress indicator
================================================= */

.azure-page .reading-progress {
    position: fixed;
    top: 50%;
    left: 18px;
    z-index: 600;

    display: grid;
    justify-items: center;

    gap: 10px;

    transform: translateY(-50%);
}

.azure-page .progress-track {
    position: relative;

    width: 2px;
    height: 170px;

    background: rgba(255, 255, 255, 0.16);

    overflow: hidden;
}

.azure-page .progress-fill {
    position: absolute;
    top: 0;
    left: 0;

    width: 2px;
    height: 0;

    background:
        linear-gradient(
            to bottom,
            var(--azure-pale),
            var(--azure-sky),
            var(--azure-aegean),
            var(--azure-navy)
        );
}


/* =================================================
   Image aspect ratios
================================================= */

.azure-ratio--portrait {
    aspect-ratio: 3 / 4;
}

.azure-ratio--tall {
    aspect-ratio: 2 / 3;
}

.azure-ratio--square {
    aspect-ratio: 1;
}

.azure-ratio--landscape {
    aspect-ratio: 4 / 3;
}

.azure-ratio--wide {
    aspect-ratio: 16 / 9;
}


/* =================================================
   Opening statement
================================================= */

.azure-opening {
    padding-block: clamp(110px, 15vw, 220px);

    background:
        radial-gradient(
            circle at 16% 20%,
            rgba(22, 127, 163, 0.17),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #02080c,
            #06131c
        );
}

.azure-opening-lead {
    max-width: 1200px;
    margin: 0;

    color: #ffffff;

    font-size: clamp(34px, 4.8vw, 76px);
    letter-spacing: -0.045em;
    line-height: 1.04;
}

.azure-opening-lead em {
    color: transparent;

    font-style: normal;

    background: var(--azure-gradient);
    background-clip: text;

    -webkit-background-clip: text;
}


/* =================================================
   Shared section styles
================================================= */

.azure-arrival,
.azure-look-section,
.azure-sunset-section,
.azure-detail-section,
.azure-credits {
    padding-block: clamp(100px, 13vw, 200px);

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

.azure-section--light,
.azure-look-section--paper {
    color: #11151a;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f3f7f8 56%,
            #e8f0f3
        );
}

.azure-section--light .editorial-title,
.azure-look-section--paper .editorial-title {
    color: #11151a;
}

.azure-section--light .body-copy,
.azure-look-section--paper .body-copy {
    color: #4b555c;
}

.azure-section--light .image-caption,
.azure-look-section--paper .image-caption {
    color: #65717a;
}


/* =================================================
   Section markers and gradient rules
================================================= */

.azure-section-marker {
    display: flex;
    align-items: end;

    gap: 30px;
    margin-bottom: clamp(50px, 7vw, 105px);

    color: var(--azure-aegean);

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

.azure-section-rule {
    flex: 1;

    height: 2px;
    margin-bottom: 7px;

    background: var(--azure-gradient);
}

.azure-gradient-rule {
    width: clamp(90px, 12vw, 180px);
    height: 3px;
    margin-block: 28px;

    background: var(--azure-gradient);
}


/* =================================================
   Arrival section
================================================= */

.azure-arrival-grid {
    display: grid;

    grid-template-columns: 0.92fr 1.08fr;

    gap: clamp(30px, 6vw, 110px);
    align-items: start;
}

.azure-arrival-main {
    grid-row: span 2;
}

.azure-arrival-copy {
    align-self: center;

    padding-top: clamp(20px, 5vw, 90px);
}

.azure-arrival-small {
    width: min(82%, 620px);

    justify-self: start;
}


/* =================================================
   Look 01 — Morning
================================================= */

.azure-look-section--morning {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(114, 183, 210, 0.13),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #06131c,
            #0a202d
        );
}

.azure-look-header {
    display: grid;

    grid-template-columns: 150px 1fr;

    gap: 36px;
    margin-bottom: clamp(70px, 8vw, 120px);
}

.azure-look-one-grid {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr 0.68fr;

    gap: var(--grid-gap);
    align-items: center;
}

.azure-look-one-detail {
    align-self: end;

    margin-bottom: 12%;
}

.azure-look-section .wardrobe-item span:last-child {
    color: transparent;

    background: var(--azure-gradient-deep);
    background-clip: text;

    -webkit-background-clip: text;
}


/* =================================================
   Noon transition
================================================= */

.azure-noon-transition {
    position: relative;

    min-height: 88svh;

    overflow: hidden;
}

.azure-noon-media {
    position: absolute;
    inset: 0;
}

.azure-noon-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(3, 18, 28, 0.82),
            transparent 62%
        ),
        linear-gradient(
            90deg,
            rgba(10, 44, 60, 0.34),
            transparent 70%
        );
}

.azure-noon-copy {
    position: absolute;
    left: var(--page-gutter);
    bottom: clamp(36px, 6vw, 90px);
    z-index: 3;

    max-width: 920px;
}


/* =================================================
   Look 02 — Town walk
================================================= */

.azure-centred-heading {
    max-width: 1100px;
    margin:
        0
        auto
        clamp(70px, 9vw, 140px);

    text-align: center;
}

.azure-centred-heading .look-number {
    display: block;

    margin-bottom: 18px;

    color: var(--azure-aegean);
}

.azure-centred-heading .editorial-title {
    font-size: clamp(64px, 7vw, 128px);
    line-height: 0.9;
}

.azure-look-two-grid {
    display: grid;

    grid-template-columns: 1.18fr 0.68fr;

    gap: clamp(32px, 5vw, 90px);
    align-items: start;
}

.azure-look-two-wide {
    grid-column: 1 / -1;
}

.azure-look-two-copy {
    align-self: center;

    max-width: 560px;
}

.azure-look-two-portrait {
    width: min(100%, 580px);

    justify-self: end;
}


/* =================================================
   Quote section
================================================= */

.azure-quote-section {
    display: grid;
    align-items: center;

    min-height: 82svh;
    padding-block: clamp(100px, 14vw, 210px);

    color: #ffffff;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(114, 183, 210, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 78% 70%,
            rgba(13, 95, 124, 0.2),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #031018,
            #0a2737
        );
}

.azure-display-quote {
    max-width: 1250px;
    margin: 0;

    font-size: clamp(48px, 7.6vw, 128px);
    letter-spacing: -0.06em;
    line-height: 0.9;
}

.azure-quote-credit {
    margin-top: 36px;

    color: var(--azure-sky);

    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* =================================================
   Look 03 — Sunset
================================================= */

.azure-sunset-section {
    color: #ffffff;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(22, 127, 163, 0.16),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #07141d,
            #0b1d29
        );
}

.azure-sunset-grid {
    display: grid;

    grid-template-columns: 0.92fr 1.08fr;

    gap: clamp(32px, 6vw, 110px);
    align-items: center;
}

.azure-sunset-main {
    grid-row: span 2;
}

.azure-sunset-wide {
    width: min(100%, 780px);

    justify-self: end;
}


/* =================================================
   Blue hour details
================================================= */

.azure-detail-grid {
    display: grid;

    grid-template-columns: 0.72fr 1.28fr;

    gap: clamp(30px, 6vw, 110px);
    align-items: start;
}

.azure-detail-offset {
    margin-top: 12%;
}


/* =================================================
   Closing section
================================================= */

.azure-closing {
    position: relative;

    display: grid;
    align-items: end;

    min-height: 94svh;

    overflow: hidden;
}

.azure-closing-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(3, 13, 20, 0.96),
            rgba(3, 13, 20, 0.1) 68%
        ),
        linear-gradient(
            90deg,
            rgba(5, 22, 32, 0.78),
            transparent 68%
        );
}

.azure-closing-content {
    position: relative;
    z-index: 2;

    padding-bottom: clamp(60px, 9vw, 120px);
}

.azure-closing-action {
    margin-top: 38px;
}


/* =================================================
   Credits
================================================= */

.azure-credits {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(114, 183, 210, 0.1),
            transparent 25%
        ),
        #02080c;
}

.azure-credit-label {
    margin-top: 28px;
}


/* =================================================
   Azure global component overrides
================================================= */

.azure-page .eyebrow,
.azure-page .look-number {
    color: var(--azure-sky);
}

.azure-page .text-link::after,
.azure-page .nav-link:hover,
.azure-page .nav-link:focus-visible,
.azure-page .members-link:hover,
.azure-page .newsletter-form button {
    color: var(--azure-sky);
}

.azure-page .nav-link::after,
.azure-page .accent-line {
    background: var(--azure-gradient);
}

.azure-page .members-popup,
.azure-page .members-popup::before {
    border-color: var(--azure-aegean);
}

.azure-page .mobile-members-link i {
    color: var(--azure-sky);
}

.azure-page .newsletter-form {
    border-bottom-color:
        rgba(22, 127, 163, 0.58);
}


/* =================================================
   Responsive — tablets and smaller screens
================================================= */

@media (max-width: 1100px) {

    .azure-reading-progress {
        display: none;
    }

}


/* =================================================
   Responsive — tablet
================================================= */

@media (max-width: 992px) {

    .azure-arrival-grid,
    .azure-look-one-grid,
    .azure-look-two-grid,
    .azure-sunset-grid,
    .azure-detail-grid {
        grid-template-columns: 1fr;
    }

    .azure-arrival-main,
    .azure-sunset-main {
        grid-row: auto;
    }

    .azure-arrival-small,
    .azure-sunset-wide,
    .azure-look-two-portrait {
        width: 100%;

        justify-self: stretch;
    }

    .azure-look-one-detail,
    .azure-detail-offset {
        margin: 0;
    }

}


/* =================================================
   Responsive — mobile
================================================= */

@media (max-width: 600px) {

    /* Hero */

    .azure-page .editorial-hero {
        min-height: 100svh;
    }

    .azure-page .azure-placeholder--hero img {
        object-position: 58% center;
    }

    .azure-page .editorial-hero-content {
        padding:
            0
            var(--page-gutter)
            clamp(48px, 8vh, 76px);
    }

    .azure-page .hero-copy {
        transform:
            translateY(-70px);
    }

    .azure-page .editorial-hero h1 {
        font-size:
            clamp(68px, 19vw, 104px);
    }

    .azure-page .hero-meta {
        display: grid;
    }
    
    .hero-meta .meta {
        color: cornflowerblue;
    }


    /* Opening */

    .azure-opening-lead {
        font-size:
            clamp(36px, 11vw, 58px);
    }


    /* Section markers */

    .azure-section-marker {
        justify-content: center;
        flex-wrap: wrap;

        gap: 10px 18px;

        text-align: center;
    }

    .azure-section-marker .meta {
        width: 100%;

        text-align: center;
    }

    .azure-section-rule {
        display: none;
    }


    /* Look headings */

    .azure-look-header {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .azure-centred-heading .editorial-title {
        font-size:
            clamp(52px, 14vw, 76px);
    }
    
     .azure-arrival-small {
        width: 100%;
        margin: 0;
        padding: 0;

        justify-self: stretch;
    }

    .azure-arrival-small .editorial-media {
        width: 100%;
        margin: 0;
    }
    
    
    .azure-look-two-portrait {
        width: 100%;
        margin: 0;
        padding: 0;

        justify-self: stretch;
    }

    .azure-look-two-portrait .editorial-media {
        width: 100%;
        margin: 0;
    }
    
    .azure-sunset-wide {
        width: 100%;
        margin: 0;
        padding: 0;

        justify-self: stretch;
    }

    .azure-sunset-wide .editorial-media {
        width: 100%;
        margin: 0;
    }
    
    .azure-look-two-wide {
        width: 100%;
        margin: 0;
        padding: 0;

        justify-self: stretch;
    }

    .azure-look-two-wide .editorial-media {
        width: 100%;
        margin: 0;
    }


    /* Full-screen editorial moments */

    .azure-noon-transition {
        min-height: 72svh;
    }


    /* Closing image */

    .azure-placeholder--closing img {
        object-position: 64% center;
    }

}


/* =================================================
   AIVELLE AZURE — iPad portrait refinement
   Applies only to portrait tablets. Desktop, tablet
   landscape and mobile <=600px remain unchanged.
================================================= */

@media
    (min-width: 601px)
    and (max-width: 1024px)
    and (orientation: portrait) {

    /* -------------------------------------------------
       Opening Note
       Give the opening statement the full editorial width.
    -------------------------------------------------- */

    .azure-opening {
        padding-block: clamp(92px, 10.5vw, 132px);
    }

    .azure-opening .aivelle-grid {
        display: block;
    }

    .azure-opening .aivelle-grid > .span-10 {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .azure-opening-lead {
        width: 100%;
        max-width: 950px;
        font-size: clamp(42px, 5.45vw, 58px);
        line-height: 1.05;
        text-wrap: balance;
    }


    /* -------------------------------------------------
       First Threshold / Morning Arrival
       Stack the editorial copy and images cleanly and
       centre the imagery inside the light section.
    -------------------------------------------------- */

    .azure-arrival {
        padding-block: clamp(92px, 10vw, 126px);
    }

    .azure-arrival-grid {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: clamp(42px, 5.5vw, 66px);
    }

    .azure-arrival-copy {
        order: 1;
        width: min(100%, 920px);
        max-width: 920px;
        padding-top: 0;
        text-align: left;
    }

    .azure-arrival-main {
        order: 2;
        grid-row: auto;
        width: min(100%, 860px);
        max-width: 860px;
        margin-inline: auto;
    }

    .azure-arrival-small {
        order: 3;
        width: min(calc(100% - 28px), 900px);
        max-width: 900px;
        margin-inline: auto;
        justify-self: center;
    }

    .azure-arrival-small .editorial-media {
        width: 100%;
        margin-inline: auto;
    }

    .azure-arrival-copy .editorial-title {
        max-width: 900px;
        font-size: clamp(40px, 5.1vw, 54px);
        line-height: 1.02;
    }

    .azure-arrival-copy .body-copy {
        max-width: 900px;
    }


    /* -------------------------------------------------
       Look 01 heading
       Centre Look 01 above its title.
    -------------------------------------------------- */

    .azure-look-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin-bottom: clamp(54px, 7vw, 78px);
        text-align: center;
    }

    .azure-look-header .look-number {
        display: block;
        margin: 0;
        text-align: center;
    }

    .azure-look-header .look-title {
        max-width: 780px;
        margin: 0 auto;
        font-size: clamp(48px, 6.2vw, 66px);
        line-height: .96;
        text-align: center;
    }


    /* -------------------------------------------------
       Morning Softness
       Centre the copy and wardrobe block above the image.
    -------------------------------------------------- */

    .azure-look-one-grid {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: clamp(44px, 6vw, 72px);
    }

    .azure-look-copy {
        width: min(100%, 900px);
        max-width: 900px;
        margin-inline: auto;
        text-align: center;
    }

    .azure-look-copy .eyebrow,
    .azure-look-copy .editorial-title,
    .azure-look-copy .body-copy {
        text-align: center;
    }

    .azure-look-copy .editorial-title {
        max-width: 820px;
        margin-inline: auto;
        font-size: clamp(40px, 5vw, 54px);
        line-height: 1.02;
    }

    .azure-look-copy .body-copy {
        max-width: 820px;
        margin-inline: auto;
        font-size: clamp(16px, 1.9vw, 19px);
        line-height: 1.7;
    }

    .azure-look-copy .azure-gradient-rule {
        margin-inline: auto;
    }

    .azure-look-copy .wardrobe-list {
        width: min(100%, 620px);
        max-width: 620px;
        margin: 34px auto 0;
        text-align: left;
    }

    .azure-look-one-main {
        width: min(100%, 820px);
        max-width: 820px;
        margin-inline: auto;
    }

    .azure-look-one-detail {
        width: min(100%, 520px);
        max-width: 520px;
        margin: 0 auto;
    }


    /* -------------------------------------------------
       City Precision / Look 02
       Centre the wide image, copy, wardrobe and portrait
       so nothing drifts beyond the right viewport edge.
    -------------------------------------------------- */

    .azure-look-section--paper {
        overflow-x: clip;
    }

    .azure-look-two-grid {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: clamp(44px, 6vw, 70px);
    }

    .azure-look-two-wide {
        grid-column: auto;
        width: min(100%, 900px);
        max-width: 900px;
        margin-inline: auto;
    }

    .azure-look-two-copy {
        width: min(100%, 860px);
        max-width: 860px;
        margin-inline: auto;
        text-align: center;
    }

    .azure-look-two-copy .eyebrow,
    .azure-look-two-copy .editorial-title,
    .azure-look-two-copy .body-copy {
        text-align: center;
    }

    .azure-look-two-copy .editorial-title {
        max-width: 820px;
        margin-inline: auto;
        font-size: clamp(40px, 5vw, 54px);
        line-height: 1.02;
    }

    .azure-look-two-copy .body-copy {
        max-width: 780px;
        margin-inline: auto;
        line-height: 1.7;
    }

    .azure-look-two-copy .azure-gradient-rule {
        margin-inline: auto;
    }

    .azure-look-two-copy .wardrobe-list {
        width: min(100%, 620px);
        max-width: 620px;
        margin: 34px auto 0;
        text-align: left;
    }

    .azure-look-two-portrait {
        width: min(100%, 760px);
        max-width: 760px;
        margin-inline: auto;
        justify-self: center;
    }


    /* -------------------------------------------------
       Escape quote
       Use the full tablet composition.
    -------------------------------------------------- */

    .azure-quote-section {
        min-height: auto;
        padding-block: clamp(94px, 10.5vw, 134px);
    }

    .azure-quote-section .aivelle-grid {
        display: block;
    }

    .azure-quote-section .aivelle-grid > .span-10 {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .azure-display-quote {
        width: 100%;
        max-width: 950px;
        font-size: clamp(56px, 7.1vw, 76px);
        line-height: .92;
        text-wrap: balance;
    }

    .azure-quote-credit {
        margin-top: 28px;
    }


    /* -------------------------------------------------
       Look 03 / Sunset
       Centre copy, wardrobe and imagery and prevent the
       wide image from being pushed off the right edge.
    -------------------------------------------------- */

    .azure-sunset-section {
        overflow-x: clip;
        padding-block: clamp(94px, 10.5vw, 132px);
    }

    .azure-sunset-grid {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: clamp(44px, 6vw, 72px);
    }

    .azure-sunset-copy {
        order: 1;
        width: min(100%, 880px);
        max-width: 880px;
        margin-inline: auto;
        text-align: center;
    }

    .azure-sunset-copy .eyebrow,
    .azure-sunset-copy .editorial-title,
    .azure-sunset-copy .body-copy {
        text-align: center;
    }

    .azure-sunset-copy .editorial-title {
        max-width: 840px;
        margin-inline: auto;
        font-size: clamp(42px, 5.2vw, 56px);
        line-height: 1.02;
    }

    .azure-sunset-copy .body-copy {
        max-width: 800px;
        margin-inline: auto;
        line-height: 1.7;
    }

    .azure-sunset-copy .azure-gradient-rule {
        margin-inline: auto;
    }

    .azure-sunset-copy .wardrobe-list {
        width: min(100%, 620px);
        max-width: 620px;
        margin: 34px auto 0;
        text-align: left;
    }

    .azure-sunset-main {
        order: 2;
        grid-row: auto;
        width: min(100%, 800px);
        max-width: 800px;
        margin-inline: auto;
    }

    .azure-sunset-wide {
        order: 3;
        width: min(100%, 900px);
        max-width: 900px;
        margin-inline: auto;
        justify-self: center;
    }


    /* -------------------------------------------------
       Credits
       Title upper left, credit details beneath it,
       explanatory copy aligned neatly on the right.
    -------------------------------------------------- */

    .azure-credits {
        padding-block: clamp(92px, 10vw, 128px);
    }

    .azure-credits .aivelle-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: start;
        row-gap: clamp(38px, 5vw, 56px);
    }

    .azure-credits .aivelle-grid > .span-5 {
        grid-column: 1 / span 6;
    }

    .azure-credits .aivelle-grid > .span-3 {
        grid-column: 1 / span 6;
        grid-row: 2;
        padding-right: clamp(18px, 3vw, 36px);
    }

    .azure-credits .aivelle-grid > .span-4 {
        grid-column: 7 / -1;
        grid-row: 2;
        padding-left: clamp(18px, 3vw, 36px);
        border-left: 1px solid rgba(22, 127, 163, .34);
    }

    .azure-credits .editorial-title {
        font-size: clamp(42px, 5.6vw, 56px);
        line-height: 1;
    }

    .azure-credits .small-copy {
        max-width: 440px;
    }


    /* -------------------------------------------------
       Shorter portrait tablet viewports
    -------------------------------------------------- */

    @media (max-height: 1080px) {

        .azure-opening,
        .azure-quote-section,
        .azure-credits {
            padding-block: clamp(82px, 8.8vw, 108px);
        }

        .azure-display-quote {
            font-size: clamp(52px, 6.7vw, 70px);
        }

        .azure-look-header {
            margin-bottom: 50px;
        }

        .azure-look-one-grid,
        .azure-look-two-grid,
        .azure-sunset-grid {
            gap: 42px;
        }

    }

}