/**
 * Narhval — Manifesto homepage
 *
 * Come un foglio composto a mano: blocchi centrati,
 * righe leggermente sfalsate e storte, parole chiave
 * in grassetto, tanto spazio fra un blocco e l'altro.
 */


/* ==========================================================
   SEZIONE
   ========================================================== */

.narhval-manifesto {
    position: relative;

    width: 100vw;
    margin-left: calc(50% - 50vw);

    padding:
        clamp(48px, 6vw, 96px)
        clamp(20px, 6vw, 108px)
        clamp(120px, 14vw, 220px);

    box-sizing: border-box;

    color: #f2f0e8;
    background: #020202;
}

.narhval-manifesto a {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================
   INTESTAZIONE (come Catalogo e Collane)
   ========================================================== */

.narhval-manifesto__header {
    max-width: 1180px;
    margin: 0 auto clamp(80px, 11vw, 160px);
    padding-bottom: 18px;

    border-bottom: 1px solid rgba(242, 240, 232, 0.14);
}

.narhval-manifesto .narhval-manifesto__title {
    margin: 0;

    font-family: "Josefin Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.42em;
    text-transform: uppercase;

    color: rgba(242, 240, 232, 0.86);
}


/* ==========================================================
   FOGLIO
   ========================================================== */

.narhval-manifesto__sheet {
    max-width: 900px;
    margin: 0 auto;

    text-align: center;
}

.narhval-manifesto__text {
    margin: 0;

    font-family: "Libre Baskerville", serif;
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 400;
    line-height: 1.16;

    color: rgba(242, 240, 232, 0.88);
}

.narhval-manifesto__text + .narhval-manifesto__text {
    margin-top: clamp(90px, 12vw, 180px);
}

/* Ogni riga, leggermente sfalsata e storta */

.narhval-manifesto__line {
    display: block;

    transform:
        translateX(var(--dx, 0px))
        rotate(var(--rot, 0deg));
}

.narhval-manifesto__text strong {
    font-weight: 700;

    color: #f2f0e8;
}

/* Chiusura: tutta in grassetto */

.narhval-manifesto__text--closing {
    font-weight: 700;

    color: #f2f0e8;
}


/* ==========================================================
   MOTTO
   ========================================================== */

.narhval-manifesto__motto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;

    max-width: 1180px;
    margin: clamp(110px, 14vw, 200px) auto 0;
    padding-top: 28px;

    border-top: 1px solid rgba(242, 240, 232, 0.14);
}

.narhval-manifesto__motto-text {
    margin: 0;

    font-family: "Josefin Sans", sans-serif;
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.34em;
    text-transform: uppercase;

    color: #f2f0e8;
}

.narhval-manifesto__link {
    padding-bottom: 6px;

    border-bottom: 1px solid rgba(242, 240, 232, 0.32);

    font-family: "Josefin Sans", sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;

    color: #f2f0e8;

    transition:
        border-color 400ms ease,
        letter-spacing 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.narhval-manifesto__link:hover,
.narhval-manifesto__link:focus-visible {
    border-color: #f2f0e8;
    letter-spacing: 0.38em;
}


/* ==========================================================
   MOBILE
   Sfalsamenti più piccoli, per non uscire dallo schermo.
   ========================================================== */

@media screen and (max-width: 767px) {

    .narhval-manifesto__line {
        transform:
            translateX(calc(var(--dx, 0px) * 0.4))
            rotate(var(--rot, 0deg));
    }
}


/* ==========================================================
   MOVIMENTO RIDOTTO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .narhval-manifesto__link {
        transition: none;
    }
}