/* =================================================
   AIVELLE COLLECTION — AUTUMN
================================================= */


/* =================================================
   Autumn colour system
================================================= */

.autumn-page {
    --burnt: #b85c2f;
    --rust: #8f3f2f;
    --terracotta: #c86f52;
    --ochre: #b8892f;
    --mustard: #c49a2c;
    --olive: #6f7440;
    --moss: #4f5a38;
    --camel: #b68a5b;
    --chocolate: #4a2d22;

    --autumn-hot:
        linear-gradient(
            90deg,
            var(--rust),
            var(--terracotta) 34%,
            var(--ochre) 68%,
            var(--mustard)
        );

    --autumn-soft:
        linear-gradient(
            115deg,
            var(--camel),
            var(--terracotta) 34%,
            var(--ochre) 64%,
            var(--olive)
        );

    --accent: var(--terracotta);
}


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

.autumn-page ::selection {
    color: #ffffff;
    background: var(--rust);
}


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

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

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

    overflow: hidden;
}

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

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

    pointer-events: none;
}

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

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

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

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


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

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

.autumn-page .hero-deck {
    max-width: 680px;
    margin: 36px 0 0;

    color: var(--paper);

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

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

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


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

.autumn-placeholder--hero,
.autumn-placeholder--full-bleed,
.autumn-placeholder--closing {
    position: absolute;
    inset: 0;
}

.autumn-placeholder--hero img,
.autumn-placeholder--full-bleed img,
.autumn-placeholder--closing img,
.editorial-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


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

.autumn-hero-shade {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.92),
            rgba(0, 0, 0, 0.78) 19%,
            rgba(0, 0, 0, 0.48) 40%,
            rgba(0, 0, 0, 0.18) 64%,
            transparent 100%
        ),
        linear-gradient(
            to top,
            rgba(22, 12, 8, 0.84),
            rgba(20, 12, 7, 0.22) 38%,
            transparent 67%
        );
}

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

    display: block;

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

    background: var(--autumn-hot);
}


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

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

    display: grid;
    justify-items: center;

    gap: 10px;

    transform: translateY(-50%);
}

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

    width: 2px;
    height: 170px;

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

    overflow: hidden;
}

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

    width: 2px;
    height: 0;

    background:
        linear-gradient(
            to bottom,
            var(--rust),
            var(--terracotta),
            var(--ochre),
            var(--moss)
        );
}


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

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

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

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

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

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


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

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

    background:
        radial-gradient(
            circle at 16% 20%,
            rgba(143, 63, 47, 0.16),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #050505,
            #120b08
        );
}

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

    color: #ffffff;

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

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

    font-style: normal;

    background: var(--autumn-soft);
    background-clip: text;

    -webkit-background-clip: text;
}


/* =================================================
   Shared editorial sections
================================================= */

.autumn-section,
.autumn-portrait-section,
.autumn-look-section,
.autumn-filmstrip-section,
.autumn-hearth,
.autumn-emotional-centre,
.autumn-credits {
    padding-block: clamp(100px, 13vw, 200px);

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

.autumn-section--dark {
    background:
        linear-gradient(
            180deg,
            #080605,
            #130c08
        );
}


/* =================================================
   Light paper sections
================================================= */

.autumn-section--paper,
.autumn-look-section--paper {
    color: #111111;

    background:
        linear-gradient(
            135deg,
            #fffdf8,
            #f4eee4 56%,
            #eee4d5
        );
}

.autumn-section--paper .editorial-title,
.autumn-look-section--paper .editorial-title {
    color: #111111;
}

.autumn-section--paper .body-copy,
.autumn-look-section--paper .body-copy {
    color: #4d4842;
}

.autumn-section--paper .image-caption,
.autumn-look-section--paper .image-caption {
    color: #6d665e;
}


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

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

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

    color: var(--ochre);

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

.autumn-section-rule {
    flex: 1;

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

    background: var(--autumn-hot);
}

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

    background: var(--autumn-hot);
}


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

.autumn-arrival-grid {
    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    gap: clamp(28px, 5vw, 90px);
}

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

.autumn-arrival-copy {
    align-self: center;
}

.autumn-arrival-small {
    width: min(88%, 560px);

    justify-self: end;
}


/* =================================================
   Individual portrait section
================================================= */

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

    text-align: center;
}

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

    margin-bottom: 18px;

    color: var(--rust);
}

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

.autumn-portrait-pair {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: clamp(28px, 7vw, 120px);
}

.autumn-portrait-card--second {
    margin-top: 16%;
}


/* =================================================
   Full-width movement image
================================================= */

.autumn-full-bleed {
    position: relative;

    min-height: 88svh;

    overflow: hidden;
}

.autumn-full-bleed-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(24, 13, 8, 0.9),
            transparent 62%
        ),
        linear-gradient(
            90deg,
            rgba(60, 30, 18, 0.54),
            transparent 70%
        );
}

.autumn-full-bleed-caption {
    position: absolute;
    left: var(--page-gutter);
    bottom: clamp(36px, 6vw, 90px);
    z-index: 3;

    max-width: 920px;
}


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

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

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

    background:
        linear-gradient(
            135deg,
            #0a0705,
            #1b0f09
        );
}

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

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

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

    color: var(--mustard);

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


/* =================================================
   Look 01
================================================= */

.autumn-look-section {
    background:
        linear-gradient(
            180deg,
            #080706,
            #15100c
        );
}

.autumn-look-header {
    display: grid;

    grid-template-columns: 150px 1fr;

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

.autumn-look-grid {
    display: grid;
    align-items: center;

    grid-template-columns:
        0.82fr
        1.25fr
        0.62fr;

    gap: var(--grid-gap);
}

.autumn-look-detail {
    align-self: end;

    margin-bottom: 10%;
}

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

    background: var(--autumn-soft);
    background-clip: text;

    -webkit-background-clip: text;
}


/* =================================================
   Texture filmstrip
================================================= */

.autumn-filmstrip {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: clamp(18px, 2.4vw, 36px);
}

.autumn-filmstrip figure:nth-child(2) {
    margin-top: 8%;
}


/* =================================================
   Hearth section
================================================= */

.autumn-hearth {
    background:
        linear-gradient(
            135deg,
            #0b0806,
            #24150d
        );
}

.autumn-hearth-grid {
    display: grid;
    align-items: end;

    grid-template-columns: 1.25fr 0.75fr;

    gap: clamp(36px, 7vw, 120px);
}


/* =================================================
   Look 02 — individual looks
================================================= */

.autumn-individual-grid {
    display: grid;
    align-items: center;

    grid-template-columns:
        1fr
        0.72fr
        1fr;

    gap: clamp(28px, 4vw, 70px);
}

.autumn-individual-copy {
    text-align: center;
}

.autumn-individual-copy
.autumn-gradient-rule {
    margin-inline: auto;
}

.autumn-individual-card--lower {
    margin-top: 16%;
}


/* =================================================
   Emotional centre
================================================= */

.autumn-emotional-centre {
    background:
        linear-gradient(
            135deg,
            #0b0907,
            #1a130d 55%,
            #10120b
        );
}

.autumn-emotional-grid {
    display: grid;
    align-items: center;

    grid-template-columns:
        0.72fr
        1.28fr;

    gap: clamp(38px, 6vw, 100px);
}


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

.autumn-closing {
    position: relative;

    display: grid;
    align-items: end;

    min-height: 94svh;

    overflow: hidden;
}

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

    background:
        linear-gradient(
            to top,
            rgba(18, 10, 6, 0.96),
            rgba(18, 10, 6, 0.1) 68%
        ),
        linear-gradient(
            90deg,
            rgba(34, 17, 9, 0.76),
            transparent 68%
        );
}

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

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

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


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

.autumn-credits {
    background: #050505;
}

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


/* =================================================
   Autumn global component overrides
================================================= */

.autumn-page .eyebrow,
.autumn-page .look-number {
    color: var(--ochre);
}

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

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

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

.autumn-page .mobile-members-link i {
    color: var(--ochre);
}

.autumn-page .newsletter-form {
    border-bottom-color:
        rgba(184, 92, 47, 0.58);
}


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

@media (max-width: 1100px) {

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

}


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

@media (max-width: 992px) {

    .autumn-arrival-grid,
    .autumn-look-grid,
    .autumn-hearth-grid,
    .autumn-individual-grid,
    .autumn-emotional-grid {
        grid-template-columns: 1fr;
    }

    .autumn-arrival-main {
        grid-row: auto;
    }

    .autumn-arrival-small {
        width: 100%;
    }

    .autumn-look-detail,
    .autumn-individual-card--lower {
        margin: 0;
    }

    .autumn-filmstrip {
        grid-template-columns: 1fr 1fr;
    }

}


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

@media (max-width: 600px) {

    /* Hero */

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

    .autumn-page
    .autumn-placeholder--hero
    img {
        object-position: 38% center;
    }

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

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

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

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


    /* Opening statement */

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


    /* Section markers */

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


    /* Centred section heading */

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


    /* Portraits and filmstrip */

    .autumn-portrait-pair,
    .autumn-filmstrip {
        grid-template-columns: 1fr;
    }

    .autumn-portrait-card--second,
    .autumn-filmstrip
    figure:nth-child(2) {
        margin-top: 0;
    }


    /* Look heading */

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

        gap: 12px;
    }


    /* Full bleed image */

    .autumn-full-bleed {
        min-height: 70svh;
    }
    
    .autumn-arrival-small {
        width: 100%;
        margin: 0;
        padding: 0;

        justify-self: stretch;
    }

    .autumn-arrival-small .editorial-media {
        width: 100%;
        margin: 0;
    }
   
    .autumn-emotional-image {
        width: 100%;
        margin: 0;
        padding: 0;

        justify-self: stretch;
    }

    . autumn-emotional-image .editorial-media {
        width: 100%;
        margin: 0;
    }
    
    /* Centre the Texture Study marker on mobile */
    .autumn-filmstrip-section .autumn-section-marker {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
        gap: 10px 18px;
    }

    .autumn-filmstrip-section .autumn-section-marker .meta {
        width: 100%;
        text-align: center;
    }
    
    /* =================================================
       Mobile — Closing image
    ================================================= */

    .autumn-placeholder--closing img {
        object-position: 78% center;
    }

}


/* =================================================
   AIVELLE AUTUMN — 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 statement the full editorial measure
       rather than leaving it in a half-width tablet column.
    -------------------------------------------------- */

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

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

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

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


    /* -------------------------------------------------
       Comfort quote
       Expand the quote across the tablet composition
       while retaining the existing left alignment.
    -------------------------------------------------- */

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

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

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

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

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


    /* -------------------------------------------------
       Look 01 heading
       Stack and centre the look marker above the title.
    -------------------------------------------------- */

    .autumn-look-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 14px;
        margin-bottom: clamp(54px, 7vw, 78px);

        text-align: center;
    }

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

    .autumn-look-header .look-title {
        max-width: 760px;
        margin: 0 auto;

        font-size: clamp(48px, 6.2vw, 66px);
        line-height: .96;

        text-align: center;
    }


    /* -------------------------------------------------
       Shared Silhouette
       Centre the copy and wardrobe block above the main
       image instead of leaving the text as a side column.
    -------------------------------------------------- */

    .autumn-look-grid {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;

        gap: clamp(44px, 6vw, 72px);
    }

    .autumn-look-copy {
        width: min(100%, 900px);
        max-width: 900px;

        margin-inline: auto;

        text-align: center;
    }

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

    .autumn-look-copy .editorial-title {
        max-width: 820px;
        margin-inline: auto;

        font-size: clamp(40px, 5vw, 54px);
        line-height: 1.02;
    }

    .autumn-look-copy .body-copy {
        max-width: 820px;
        margin-inline: auto;

        font-size: clamp(16px, 1.9vw, 19px);
        line-height: 1.7;
    }

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

    .autumn-look-copy .wardrobe-list {
        width: min(100%, 620px);
        max-width: 620px;

        margin:
            34px
            auto
            0;

        text-align: left;
    }

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

    .autumn-look-detail {
        width: min(100%, 520px);
        max-width: 520px;

        margin: 0 auto;
    }


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

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

    .autumn-credits .aivelle-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: start;

        row-gap: clamp(38px, 5vw, 56px);
    }

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

    .autumn-credits .aivelle-grid > .span-3 {
        grid-column: 1 / span 6;
        grid-row: 2;

        padding-right: clamp(18px, 3vw, 36px);
    }

    .autumn-credits .aivelle-grid > .span-4 {
        grid-column: 7 / -1;
        grid-row: 2;

        padding-left: clamp(18px, 3vw, 36px);

        border-left: 1px solid rgba(184, 92, 47, .34);
    }

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

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


    /* -------------------------------------------------
       Shorter portrait-tablet viewports
       Keep spacing elegant on iPad Mini / browser chrome.
    -------------------------------------------------- */

    @media (max-height: 1080px) {

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

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

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

        .autumn-look-grid {
            gap: 42px;
        }

    }

}