/* =================================================
   AIVELLE COLLECTION — TWILIGHT
================================================= */


/* =================================================
   Twilight colour system
================================================= */

.twilight-page {
    --twilight-white: #f4f1f6;
    --twilight-stone: #d7d1dc;
    --twilight-mist: #b7a9c6;
    --twilight-lilac: #9b7bbd;
    --twilight-amethyst: #7650a7;
    --twilight-violet: #5b3287;
    --twilight-deep: #3e205f;
    --twilight-plum: #271437;
    --twilight-black: #100914;

    --twilight-gradient:
        linear-gradient(
            90deg,
            var(--twilight-mist),
            var(--twilight-lilac) 32%,
            var(--twilight-amethyst) 66%,
            var(--twilight-deep)
        );

    --twilight-gradient-deep:
        linear-gradient(
            115deg,
            var(--twilight-lilac),
            var(--twilight-violet) 42%,
            var(--twilight-deep) 72%,
            var(--twilight-plum)
        );

    --accent: var(--twilight-amethyst);
}


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

.twilight-page ::selection {
    color: #ffffff;
    background: var(--twilight-violet);
}


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

.twilight-page .editorial-hero {
    position: relative;

    display: grid;
    align-items: end;

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

    overflow: hidden;
}

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

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

    pointer-events: none;
}

.twilight-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);
}

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

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

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


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

.twilight-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;
}

.twilight-page .hero-deck {
    max-width: 760px;
    margin: 36px 0 0;

    color: var(--twilight-white);

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

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

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


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

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

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

    object-fit: cover;
}


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

.twilight-hero-shade {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.72) 22%,
            rgba(15, 8, 21, 0.42) 46%,
            rgba(20, 10, 29, 0.12) 70%,
            transparent 100%
        ),
        linear-gradient(
            to top,
            rgba(12, 6, 18, 0.88),
            rgba(12, 6, 18, 0.18) 48%,
            transparent 72%
        ),
        radial-gradient(
            circle at top right,
            rgba(12, 6, 18, 0.55) 0%,
            rgba(12, 6, 18, 0.28) 24%,
            rgba(12, 6, 18, 0.10) 44%,
            transparent 64%
        );
}

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

    display: block;

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

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


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

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

    display: grid;
    justify-items: center;

    gap: 10px;

    transform: translateY(-50%);
}

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

    width: 2px;
    height: 170px;

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

    overflow: hidden;
}

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

    width: 2px;
    height: 0;

    background:
        linear-gradient(
            to bottom,
            var(--twilight-mist),
            var(--twilight-lilac),
            var(--twilight-violet),
            var(--twilight-plum)
        );
}


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

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

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

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

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

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


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

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

    background:
        radial-gradient(
            circle at 16% 20%,
            rgba(118, 80, 167, 0.16),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #050307,
            #120917
        );
}

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

    color: #ffffff;

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

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

    font-style: normal;

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

    -webkit-background-clip: text;
}


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

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

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

.twilight-section--stone,
.twilight-look-section--paper {
    color: #121016;

    background:
        linear-gradient(
            135deg,
            #f8f6f9,
            #eeeaf1 56%,
            #ddd6e2
        );
}

.twilight-section--stone .editorial-title,
.twilight-look-section--paper .editorial-title {
    color: #121016;
}

.twilight-section--stone .body-copy,
.twilight-look-section--paper .body-copy {
    color: #514b55;
}

.twilight-section--stone .image-caption,
.twilight-look-section--paper .image-caption {
    color: #6c6470;
}


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

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

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

    color: var(--twilight-violet);

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

.twilight-section-rule {
    flex: 1;

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

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

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

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


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

.twilight-arrival-grid {
    display: grid;

    grid-template-columns: 0.86fr 1.14fr;

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

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

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

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

.twilight-arrival-small {
    width: min(78%, 600px);

    justify-self: end;
}


/* =================================================
   Look 01 — Quiet tailoring
================================================= */

.twilight-look-section--one {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(118, 80, 167, 0.12),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #08050b,
            #18101f
        );
}

.twilight-look-header {
    display: grid;

    grid-template-columns: 150px 1fr;

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

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

    grid-template-columns: 0.78fr 1.22fr 0.64fr;

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

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

    margin-bottom: 12%;
}

.twilight-look-section .wardrobe-item span:last-child,
.twilight-night-section .wardrobe-item span:last-child {
    color: transparent;

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

    -webkit-background-clip: text;
}


/* =================================================
   Bridge transition
================================================= */

.twilight-bridge-transition {
    position: relative;

    min-height: 88svh;

    overflow: hidden;
}

.twilight-bridge-media {
    position: absolute;
    inset: 0;
}

.twilight-bridge-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(14, 7, 20, 0.90),
            transparent 62%
        ),
        linear-gradient(
            90deg,
            rgba(55, 28, 76, 0.42),
            transparent 72%
        );
}

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

    max-width: 920px;
}


/* =================================================
   Look 02 — Reflected city
================================================= */

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

    text-align: center;
}

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

    margin-bottom: 18px;

    color: var(--twilight-violet);
}

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

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

    grid-template-columns: 1.18fr 0.68fr;

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

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

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

    max-width: 560px;
}

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

    justify-self: end;
}


/* =================================================
   Reflection quote
================================================= */

.twilight-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(155, 123, 189, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 78% 70%,
            rgba(91, 50, 135, 0.22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #08050c,
            #23132f
        );
}

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

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

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

    color: var(--twilight-lilac);

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


/* =================================================
   Look 03 — Prague after dark
================================================= */

.twilight-night-section {
    color: #ffffff;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(91, 50, 135, 0.16),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #09050d,
            #17101d
        );
}

.twilight-night-grid {
    display: grid;

    grid-template-columns: 0.92fr 1.08fr;

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

.twilight-night-main {
    grid-row: span 2;
}

.twilight-night-wide {
    width: min(100%, 780px);

    justify-self: end;
}


/* =================================================
   Detail study
================================================= */

.twilight-detail-grid {
    display: grid;

    grid-template-columns: 0.72fr 1.28fr;

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

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


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

.twilight-closing {
    position: relative;

    display: grid;
    align-items: end;

    min-height: 94svh;

    overflow: hidden;
}

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

    background:
        linear-gradient(
            to top,
            rgba(12, 6, 18, 0.97),
            rgba(12, 6, 18, 0.10) 68%
        ),
        linear-gradient(
            90deg,
            rgba(28, 13, 40, 0.82),
            transparent 68%
        );
}

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

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

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


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

.twilight-credits {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(155, 123, 189, 0.10),
            transparent 25%
        ),
        #050307;
}

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


/* =================================================
   Twilight global component overrides
================================================= */

.twilight-page .eyebrow,
.twilight-page .look-number {
    color: var(--twilight-lilac);
}

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

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

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

.twilight-page .mobile-members-link i {
    color: var(--twilight-lilac);
}

.twilight-page .newsletter-form {
    border-bottom-color:
        rgba(91, 50, 135, 0.62);
}


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

@media (max-width: 1100px) {

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

}


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

@media (max-width: 992px) {

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

    .twilight-arrival-main,
    .twilight-night-main {
        grid-row: auto;
    }

    .twilight-arrival-small,
    .twilight-night-wide,
    .twilight-look-two-portrait {
        width: 100%;

        justify-self: stretch;
    }

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

}


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

@media (max-width: 600px) {

    /* Hero */

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

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

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

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

    .twilight-page .editorial-hero h1 {
        font-size:
            clamp(62px, 17vw, 100px);
    }

    .twilight-page .hero-meta {
        display: grid;
    }


    /* Opening */

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


    /* Section markers */

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

        gap: 10px 18px;

        text-align: center;
    }

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

        text-align: center;
    }

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


    /* Look headings */

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

        gap: 12px;
    }

    .twilight-centred-heading .editorial-title {
        font-size:
            clamp(52px, 14vw, 76px);
    }


    /* Full-screen editorial moment */

    .twilight-bridge-transition {
        min-height: 72svh;
    }
    
    .twilight-arrival-small {
        width: 100%;
        margin: 0;
        padding: 0;

        justify-self: stretch;
    }

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

        justify-self: stretch;
    }

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

        justify-self: stretch;
    }

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

        justify-self: stretch;
    }

    .twilight-night-wide .editorial-media {
        width: 100%;
        margin: 0;
    }


    /* Closing image */

    .twilight-placeholder--closing img {
        object-position: 58% center;
    }

}


/* =================================================
   AIVELLE TWILIGHT — 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) {

    /* -------------------------------------------------
       Hero
       Lift and tighten the opening composition so the
       collection title/deck/meta sit confidently over
       the image on portrait iPad.
    -------------------------------------------------- */

    .twilight-page .editorial-hero {
        min-height: 100svh;
        align-items: end;
    }

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

    .twilight-page .editorial-hero-content {
        padding-bottom: clamp(150px, 16vh, 210px);
    }

    .twilight-page .hero-copy {
        max-width: 840px;
    }

    .twilight-page .editorial-hero h1 {
        font-size: clamp(74px, 9.4vw, 102px);
        line-height: .84;
    }

    .twilight-page .hero-deck {
        max-width: 680px;
        margin-top: 22px;
        font-size: clamp(20px, 2.3vw, 24px);
        line-height: 1.45;
    }

    .twilight-page .hero-meta {
        margin-top: 26px;
        gap: 14px 28px;
    }


    /* -------------------------------------------------
       Opening Note
       Expand across the tablet width and reduce excess
       vertical space.
    -------------------------------------------------- */

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

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

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

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


    /* -------------------------------------------------
       Arrival
       Centre the copy and imagery and prevent the smaller
       image from drifting to the right.
    -------------------------------------------------- */

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

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

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

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

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

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

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


    /* -------------------------------------------------
       Look 01 — Quiet tailoring
       Centre the look marker/title, then stack the copy,
       wardrobe and imagery in one considered sequence.
    -------------------------------------------------- */

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

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

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

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

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

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

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

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

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

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

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

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


    /* -------------------------------------------------
       Bridge transition
       Keep the copy floating over the image and ensure
       the image crop remains centred on portrait iPad.
    -------------------------------------------------- */

    .twilight-bridge-transition {
        min-height: 80svh;
    }

    .twilight-bridge-media img {
        object-position: 58% center;
    }

    .twilight-bridge-copy {
        left: var(--page-gutter);
        right: var(--page-gutter);
        bottom: clamp(48px, 6vh, 74px);
        max-width: 900px;
    }

    .twilight-bridge-copy .section-heading {
        max-width: 880px;
        font-size: clamp(48px, 6vw, 64px);
        line-height: .96;
    }


    /* -------------------------------------------------
       Look 02 — Reflected city
       Centre the heading, copy, wardrobe and both images.
    -------------------------------------------------- */

    .twilight-centred-heading {
        max-width: 900px;
        margin-bottom: clamp(54px, 7vw, 82px);
    }

    .twilight-centred-heading .editorial-title {
        font-size: clamp(52px, 6.5vw, 72px);
        line-height: .94;
    }

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

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

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

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

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

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

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

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

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


    /* -------------------------------------------------
       Reflection quote
       Use the full portrait-tablet composition.
    -------------------------------------------------- */

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

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

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

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

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


    /* -------------------------------------------------
       Look 03 — Prague after dark
       Centre copy, wardrobe and imagery and remove any
       right-side drift from the wide image.
    -------------------------------------------------- */

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

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

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

    .twilight-night-copy .eyebrow,
    .twilight-night-copy .editorial-title,
    .twilight-night-copy .body-copy {
        text-align: center;
    }

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

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

    .twilight-night-copy .twilight-gradient-rule {
        margin-inline: auto;
    }

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

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

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


    /* -------------------------------------------------
       Detail study
       Keep both detail images centred and balanced.
    -------------------------------------------------- */

    .twilight-detail-grid {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: clamp(36px, 5vw, 60px);
    }

    .twilight-detail-grid > * {
        width: min(100%, 820px);
        max-width: 820px;
        margin-inline: auto;
    }

    .twilight-detail-offset {
        margin-top: 0;
    }


    /* -------------------------------------------------
       Closing
       Keep the closing copy over the image and inside
       a comfortable portrait-tablet measure.
    -------------------------------------------------- */

    .twilight-closing {
        min-height: 88svh;
    }

    .twilight-placeholder--closing img {
        object-position: 58% center;
    }

    .twilight-closing-content {
        padding-bottom: clamp(54px, 7vh, 86px);
    }

    .twilight-closing-content .aivelle-grid {
        display: block;
    }

    .twilight-closing-content .aivelle-grid > .span-8 {
        width: 100%;
        max-width: 820px;
    }

    .twilight-closing .section-heading {
        max-width: 820px;
        font-size: clamp(50px, 6.4vw, 68px);
        line-height: .97;
    }


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

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

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

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

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

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

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

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


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

    @media (max-height: 1080px) {

        .twilight-page .editorial-hero-content {
            padding-bottom: clamp(125px, 13vh, 170px);
        }

        .twilight-page .editorial-hero h1 {
            font-size: clamp(68px, 8.8vw, 92px);
        }

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

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

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

        .twilight-look-one-grid,
        .twilight-look-two-grid,
        .twilight-night-grid {
            gap: 42px;
        }

    }

}