/*---------------- hero ----------------*/
.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 132px 0 72px;
    color: var(--ivory);
    background: var(--black);
    overflow: hidden;
}

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

    .hero-media img {
        opacity: .52;
        object-position: center 30%;
        filter: grayscale(12%);
        animation: hero-settle 2.4s ease-out both;
    }

@keyframes hero-settle {
    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1);
    }
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(41,42,46,.92), rgba(41,42,46,.30), rgba(41,42,46,.62));
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(820px, 100%);
}

.eyebrow {
    display: block;
    margin-bottom: 18px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
}

h1, h2, h3 {
    font-weight: var(--fw-headline);
}

.hero h1 {
    font-size: clamp(46px, 7vw, 100px);
    line-height: .95;
    letter-spacing: -.035em;
    margin-bottom: 26px;
}

.hero p {
    max-width: 570px;
    font-size: 17px;
    font-weight: var(--fw-light);
    line-height: 1.9;
    color: rgba(251,247,240,.82);
    margin-bottom: 34px;
}

.link-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid currentColor;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: opacity .25s ease;
}

    .link-btn:hover {
        opacity: .64;
    }

/*---------------- shared ----------------*/
.section {
    padding: 118px 0;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 48px;
}

    .section-head h2 {
        color: var(--black);
        font-size: clamp(34px, 4.4vw, 64px);
        line-height: .98;
        letter-spacing: -.035em;
    }

    .section-head p {
        max-width: 420px;
        color: var(--muted);
        line-height: 1.9;
    }

    .section-head .link-btn {
        flex-shrink: 0;
        color: var(--black);
    }

.copy h2 {
    color: var(--black);
    font-size: clamp(34px, 4.2vw, 60px);
    line-height: 1;
    letter-spacing: -.035em;
    margin-bottom: 24px;
}

.copy p {
    max-width: 560px;
    margin-bottom: 24px;
    color: var(--muted);
    line-height: 1.95;
}

/*---------------- manifesto ----------------*/
.manifesto {
    text-align: center;
}

.manifesto-inner {
    max-width: 900px;
}

    .manifesto-inner::before {
        content: "";
        display: block;
        width: 1px;
        height: 64px;
        margin: 0 auto 40px;
        background: currentColor;
        opacity: .24;
    }

.manifesto h2 {
    color: var(--black);
    font-size: clamp(34px, 4.6vw, 68px);
    line-height: .98;
    letter-spacing: -.035em;
    margin-bottom: 28px;
}

.manifesto p {
    max-width: 620px;
    margin: 0 auto 34px;
    color: var(--muted);
    line-height: 1.95;
}

.manifesto .link-btn {
    color: var(--black);
}

/*---------------- categories ----------------*/
.categories-section {
    padding-top: 0;
}

.categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.category {
    display: block;
}

.category-photo {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--tint);
}

    .category-photo img {
        transition: transform 1.2s ease;
    }

.category:hover .category-photo img {
    transform: scale(1.04);
}

.category-caption {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-top: 18px;
}

.category-index {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
}

.category h3 {
    color: var(--black);
    font-size: 20px;
    letter-spacing: -.02em;
}

/*---------------- the edit (women / men) ----------------*/
.edit {
    border-top: 1px solid var(--line);
}

.edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.edit-tile {
    display: block;
    color: var(--black);
}

.edit-photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--tint);
}

    .edit-photo img {
        transition: transform 1.2s ease;
    }

.edit-tile:hover .edit-photo img {
    transform: scale(1.04);
}

.edit-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 22px;
}

    .edit-caption h3 {
        font-size: clamp(24px, 2.4vw, 34px);
        letter-spacing: -.03em;
    }

/*---------------- new arrivals ----------------*/
.arrivals {
    background: var(--white);
}

.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.product {
    display: block;
}

.product-image {
    aspect-ratio: 3 / 4;
    background: var(--tint);
    overflow: hidden;
    margin-bottom: 18px;
}

    .product-image img {
        transition: transform 1.2s ease;
    }

.product:hover .product-image img {
    transform: scale(1.04);
}

.product-category {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.product h3 {
    color: var(--black);
    font-size: 17px;
    letter-spacing: -.02em;
    margin-bottom: 6px;
}

.product strong {
    color: var(--black);
    font-size: 14px;
    font-weight: 600;
}

/*---------------- craft ----------------*/
.craft {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 88px;
    align-items: center;
}

.craft-image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 999px 999px 0 0;
    background: var(--tint);
}

.materials {
    list-style: none;
    padding-left: 0;
    margin-top: 36px;
    border-top: 1px solid var(--line);
}

    .materials li {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 20px;
        padding: 17px 0;
        border-bottom: 1px solid var(--line);
    }

    .materials span {
        color: var(--black);
        font-size: 15px;
        font-weight: 600;
    }

    .materials small {
        color: var(--muted);
        font-size: 13px;
        text-align: right;
    }

/*---------------- services ----------------*/
.services {
    padding: 72px 0;
    border-top: 1px solid var(--line);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.service h3 {
    margin-bottom: 14px;
    color: var(--black);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.service p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    transition: color .25s ease;
}

.service:hover p {
    color: var(--text);
}

/*---------------- newsletter ----------------*/
.newsletter {
    background: var(--black);
    color: var(--ivory);
    padding: 106px 0;
    text-align: center;
}

    .newsletter h2 {
        font-size: clamp(34px, 4.2vw, 60px);
        line-height: 1;
        letter-spacing: -.035em;
        margin-bottom: 18px;
    }

    .newsletter p {
        max-width: 560px;
        margin: 0 auto 34px;
        color: rgba(251,247,240,.76);
        line-height: 1.9;
    }

.newsletter-form {
    width: min(520px, 100%);
    margin: 0 auto;
    display: flex;
    border-bottom: 1px solid rgba(251,247,240,.72);
}

    .newsletter-form input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--ivory);
        padding: 16px 0;
    }

        .newsletter-form input::placeholder {
            color: rgba(251,247,240,.58);
        }

    .newsletter-form button {
        border: 0;
        background: transparent;
        color: var(--ivory);
        cursor: pointer;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

/*---------------- responsive ----------------*/
@media (max-width: 1040px) {
    .categories,
    .products,
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .craft {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .craft-image {
        width: min(520px, 100%);
    }
}

@media (max-width: 640px) {
    .hero {
        padding: 112px 0 52px;
    }

        .hero h1 {
            font-size: 44px;
        }

    .section {
        padding: 78px 0;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 36px;
    }

    .categories {
        gap: 28px 14px;
    }

    .category h3 {
        font-size: 17px;
    }

    .edit-grid,
    .products,
    .services-grid {
        grid-template-columns: 1fr;
    }

    .edit-grid {
        gap: 40px;
    }

    .services {
        padding: 56px 0;
    }

    .services-grid {
        gap: 30px;
    }

    .newsletter {
        padding: 78px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-media img {
        animation: none;
    }

    .category-photo img,
    .edit-photo img,
    .product-image img {
        transition: none;
    }
}