/* About Section */
.about {
    padding: 40px 0;
    background: #080909;
    display: flex;
    align-items: center;
    gap: 48px;
}

.about__content {
    display: flex;
    gap: 48px;
    align-items: center;
}

.about__media {
    flex: 0 0 50%; /* media takes up to half */
    position: relative;
    aspect-ratio: 16 / 9; /* default, but we can override */
    /* We'll let the media determine the size, but we want it to be large */
}

.about__media img,
.about__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.about__text {
    flex: 0 0 50%; /* text takes up to half */
    color: #F2EFE8; /* --text-primary */
}

.about__title {
    font-family: 'Canela', 'Editorial New', 'Cormorant', 'Instrument Serif', 'PP Editorial', serif;
    font-size: 2.25rem;
    line-height: 1.2;
    margin: 0 0 24px 0;
}

.about__bio {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 40ch; /* keep bio short as per spec: 50-80 words */
    margin: 0 0 24px 0;
}

.about__manifesto {
    font-size: 1.5rem;
    line-height: 1.2;
    text-align: center;
    /* Tipografia molto grande: we can make it even larger */
    font-family: 'Canela', 'Editorial New', 'Cormorant', 'Instrument Serif', 'PP Editorial', serif;
    /* We'll make the manifesto text uppercase and letter-spaced */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #B89A6A; /* --accent */
    margin: 0;
    /* We want the photography or video to pass behind the text: we can use a mix-blend-mode or position absolute */
    /* For simplicity, we'll just style the text and let the background be visible via transparency? */
    /* But the spec says: "La fotografia o il video passa dietro il testo." */
    /* We can achieve this by having the text over a transparent background and the media behind. */
    /* We'll adjust the structure: the manifesto could be overlaid on the media. */
    /* However, for now, we'll leave it as is and note that we need to adjust the HTML structure. */
}

/* Responsive */
@media (max-width: 768px) {
    .about {
        flex-direction: column;
        text-align: center;
    }
    .about__content {
        flex-direction: column;
    }
    .about__media {
        flex: 0 0 60%;
        order: 1;
    }
    .about__text {
        order: 2;
    }
    .about__title {
        font-size: 2rem;
    }
    .about__bio {
        font-size: 0.95rem;
    }
    .about__manifesto {
        font-size: 1.25rem;
    }
}