/* =========================================================
   BELLOMO ARCHITETTI
   STYLE.CSS
   ========================================================= */


/* =========================================================
   VARIABILI
   ========================================================= */

:root {

    --background: #f7f7f5;

    --text: #171717;

    --muted: #77736d;

    --line: #d9d8d3;

    --padding: 42px;

    --serif:
        Arial,
        Helvetica,
        sans-serif;

    --sans:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        var(--sans);

    font-size:
        14px;

    line-height:
        1.5;

    -webkit-font-smoothing:
        antialiased;
}

img {
    max-width: 100%;
}

a {

    color:
        inherit;

    text-decoration:
        none;
}

button {
    font-family:
        inherit;
}


/* =========================================================
   HEADER
   ========================================================= */

.header {

    position:
        relative;

    width:
        100%;

    padding:
        28px var(--padding);

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    z-index:
        100;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo {

    font-size:
        32px;

    line-height:
        .86;

    letter-spacing:
        -1.35px;

    font-weight:
        600;

    transition:
        opacity .25s ease;
}

.logo:hover {
    opacity:
        .55;
}


/* =========================================================
   NAVIGAZIONE
   ========================================================= */

nav {

    display:
        flex;

    gap:
        30px;

    align-items:
        center;
}

nav a {

    position:
        relative;

    font-family:
        var(--sans);

    font-size:
        10px;

    font-weight:
        400;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

    color:
        var(--text);

    transition:
        opacity .25s ease;
}

nav a:hover {
    opacity:
        .45;
}


/* =========================================================
   TIPOGRAFIA
   ========================================================= */

h1,
h2,
h3,
p {
    margin-top:
        0;
}

h1 {

    margin-bottom:
        0;

    font-family:
        var(--serif);

    font-weight:
        400;

    font-size:
        clamp(
            48px,
            6.5vw,
            108px
        );

    line-height:
        .9;

    letter-spacing:
        -.055em;
}

h2 {

    font-family:
        var(--serif);

    font-weight:
        400;

    font-size:
        clamp(
            32px,
            4vw,
            62px
        );

    line-height:
        .98;

    letter-spacing:
        -.04em;
}

.label {

    margin-bottom:
        22px;

    font-size:
        10px;

    font-weight:
        400;

    text-transform:
        uppercase;

    letter-spacing:
        .16em;

    color:
        var(--muted);
}


/* =========================================================
   HOME
   ========================================================= */

.hero {

    min-height:
        calc(100vh - 90px);

    padding:
        90px var(--padding) 70px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;
}

.hero-content {
    max-width:
        1050px;
}

.hero-content p {

    max-width:
        520px;

    margin-top:
        42px;

    font-size:
        17px;

    line-height:
        1.55;

    color:
        var(--muted);
}

.hero-bottom {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

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

    padding-top:
        18px;
}

.hero-title span {

    display:
        inline-block;

    margin-top:
        .18em;
}


/* =========================================================
   PROGETTO IN EVIDENZA
   ========================================================= */

.featured-project {

    padding:
        100px var(--padding);

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

.featured-project a {
    display:
        block;
}

.featured-project-image {
    overflow:
        hidden;
}

.featured-project-image img {

    width:
        100%;

    display:
        block;

    transition:
        transform .8s cubic-bezier(.2,.6,.2,1);
}

.featured-project:hover
.featured-project-image img {

    transform:
        scale(1.025);
}

.featured-project-info {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

    padding-top:
        18px;
}

.featured-project-info h2 {

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        30px;

    line-height:
        1;
}

.featured-project-info p {

    margin:
        0;

    color:
        var(--muted);
}


/* =========================================================
   NOTE
   ========================================================= */

.notes {

    padding:
        100px var(--padding);

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

.notes-header {

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        60px;
}

.notes-grid {

    display:
        grid;

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

    gap:
        28px;
}

.note {
    display:
        block;
}

.note-image {

    overflow:
        hidden;

    margin-bottom:
        16px;
}

.note-image img {

    width:
        100%;

    display:
        block;

    transition:
        transform .6s ease;
}

.note:hover .note-image img {

    transform:
        scale(1.03);
}

.note-date {

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

    color:
        var(--muted);

    margin-bottom:
        7px;
}

.note-title {

    font-family:
        var(--serif);

    font-size:
        23px;

    line-height:
        1.05;
}


/* =========================================================
   PAGINA PROGETTI
   ========================================================= */

.projects-page {

    padding:
        80px var(--padding) 120px;
}

.projects-intro {

    max-width:
        850px;

    margin-bottom:
        100px;
}

.projects-intro h1 {
    margin-bottom:
        35px;
}

.projects-intro p {

    max-width:
        570px;

    font-size:
        16px;

    color:
        var(--muted);
}

.project-filters {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        24px;

    margin-bottom:
        40px;

    border-bottom:
        1px solid var(--line);

    padding-bottom:
        14px;
}

.filter-button {

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--muted);

    cursor:
        pointer;

    font-size:
        12px;

    transition:
        color .25s ease;
}

.filter-button:hover,
.filter-button.active {

    color:
        var(--text);
}

.projects-grid {

    display:
        grid;

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

    gap:
        70px 28px;
}

.project-card {
    display:
        block;
}

.project-card-image {

    overflow:
        hidden;

    margin-bottom:
        17px;

    background:
        #e9e8e3;
}

.project-card-image img {

    width:
        100%;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover;

    display:
        block;

    transition:
        transform .8s cubic-bezier(.2,.6,.2,1);
}

.project-card:hover
.project-card-image img {

    transform:
        scale(1.025);
}

.project-card-info {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;
}

.project-card-title {

    font-family:
        var(--serif);

    font-size:
        25px;

    line-height:
        1;
}

.project-card-meta {

    color:
        var(--muted);

    font-size:
        11px;

    text-align:
        right;
}


/* =========================================================
   PAGINA PROGETTO
   ========================================================= */

.project-detail {

    padding-bottom:
        120px;
}

.project-hero {

    padding:
        100px var(--padding) 90px;

    display:
        grid;

    grid-template-columns:
        1fr 300px;

    gap:
        80px;

    align-items:
        end;
}

.project-hero h1 {
    margin-bottom:
        0;
}

.project-subtitle {

    margin:
        18px 0 0;

    font-family:
        var(--serif);

    font-size:
        22px;

    color:
        var(--muted);
}

.project-meta {

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;

    padding-bottom:
        8px;
}

.project-meta div {

    display:
        grid;

    grid-template-columns:
        90px 1fr;

    gap:
        15px;

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

    padding-top:
        9px;
}

.project-meta span {

    color:
        var(--muted);

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;
}

.project-meta strong {

    font-weight:
        400;

    font-size:
        12px;
}


/* =========================================================
   IMMAGINE PRINCIPALE
   ========================================================= */

.project-main-image {

    margin:
        0 var(--padding);

    overflow:
        hidden;

    background:
        transparent;
}

.project-main-image img {

    width:
        100%;

    height:
        auto;

    display:
        block;

    object-fit:
        contain;
}


/* =========================================================
   IMMAGINI A TUTTA LARGHEZZA
   ========================================================= */

.project-full-image {

    padding:
        0 var(--padding);

    margin:
        0 0 30px;
}

.project-full-image img {

    width:
        100%;

    height:
        auto;

    max-height:
        none;

    display:
        block;

    object-fit:
        contain;
}


/* =========================================================
   DUE IMMAGINI
   ========================================================= */

.project-gallery-two {

    padding:
        0 var(--padding);

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        28px;

    margin-bottom:
        30px;
}

.project-gallery-two > div {

    width:
        100%;

    aspect-ratio:
        4 / 3;

    overflow:
        hidden;

    background:
        transparent;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.project-gallery-two img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;
}


/* =========================================================
   SLIDE FOTOGRAFICHE DI CANTIERE
   ========================================================= */

.project-gallery-slides {

    display:
        flex;

    gap:
        28px;

    padding:
        0 var(--padding);

    margin:
        0 0 110px;

    overflow-x:
        auto;

    scroll-snap-type:
        x mandatory;

    scroll-behavior:
        smooth;

    scrollbar-width:
        thin;

    scrollbar-color:
        var(--line) transparent;
}

.project-gallery-slides figure {

    flex:
        0 0 min(100%, 1080px);

    margin:
        0;

    scroll-snap-align:
        start;
}

.project-gallery-slides img {

    display:
        block;

    width:
        100%;

    height:
        auto;
}

.project-gallery-slides figcaption {

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        10px;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}

/* Pagine progetto - archivio */
.case-page{background:var(--background);color:var(--text)}.case-header{padding:28px var(--padding) 42px}.case-logo{color:var(--text);font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:-.7px;line-height:.95;text-decoration:none}.case-hero{padding:0 var(--padding)}.case-hero img,.case-slide img{display:block;width:100%;height:auto}.case-intro,.case-data,.case-section-inner,.case-end{max-width:1180px;margin:0 auto}.case-intro{padding:110px var(--padding) 120px}.case-kicker,.case-number,.case-caption,.case-label{color:var(--muted);font:10px var(--sans);letter-spacing:.14em;text-transform:uppercase}.case-kicker{margin:0 0 24px}.case-title{max-width:960px;margin:0;font:400 clamp(42px,6vw,86px)/.94 var(--sans);letter-spacing:-.055em}.case-description{max-width:820px;margin:42px 0 0;font-size:16px;line-height:1.55}.case-data{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:0 var(--padding) 100px}.case-data>div{border-top:1px solid var(--line);padding-top:14px}.case-label{display:block;margin-bottom:9px;font-size:9px}.case-value{font-size:14px;line-height:1.35}.case-divider{height:1px;background:var(--line)}.case-section{padding:100px var(--padding) 130px}.case-heading{display:grid;grid-template-columns:180px 1fr;gap:50px;margin-bottom:70px}.case-number{padding-top:8px}.case-heading h2,.case-end h2{max-width:820px;margin:0;font:400 clamp(30px,4vw,54px)/1 var(--sans);letter-spacing:-.045em}.case-heading p,.case-end p{max-width:720px;margin:28px 0 0;font-size:16px;line-height:1.55}.case-slides{display:flex;gap:24px;margin-top:70px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.case-slide{flex:0 0 100%;margin:0;scroll-snap-align:start}.case-caption{margin-top:12px;font-size:9px}.case-end{padding:120px var(--padding) 160px}.case-footer{border-top:1px solid var(--line);padding:30px var(--padding) 50px}.case-footer a{color:var(--text);font:10px var(--sans);letter-spacing:.13em;text-decoration:none;text-transform:uppercase}@media(max-width:800px){.case-intro{padding:75px var(--padding) 90px}.case-data{grid-template-columns:1fr 1fr;padding-bottom:75px}.case-section{padding:75px var(--padding) 90px}.case-heading{display:block;margin-bottom:50px}.case-number{margin-bottom:18px}.case-slides{margin-top:50px;gap:18px}}


/* =========================================================
   TESTO PROGETTO
   ========================================================= */

.project-description {

    display:
        grid;

    grid-template-columns:
        1fr 2fr;

    gap:
        60px;

    padding:
        130px var(--padding);

    max-width:
        1200px;
}

.project-description h2 {

    margin:
        0 0 45px;
}

.project-description p {

    max-width:
        650px;

    margin:
        0 0 22px;

    font-size:
        15px;

    line-height:
        1.65;

    color:
        #4f4c47;
}

.project-description-small {

    padding-top:
        100px;

    padding-bottom:
        100px;
}


/* =========================================================
   DISEGNI TECNICI
   ========================================================= */

.project-drawing {

    padding:
        0 var(--padding);

    margin-bottom:
        70px;
}

.project-drawing img {

    width:
        100%;

    height:
        auto;

    display:
        block;

    object-fit:
        contain;
}


/* =========================================================
   COLLABORAZIONI
   ========================================================= */

.project-credits {

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

    margin-top:
        40px;
}

.project-credits strong {
    font-weight:
        500;
}


/* =========================================================
   LINK INDIETRO
   ========================================================= */

.back-projects {

    padding:
        70px var(--padding) 0;

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

.link {

    font-size:
        12px;

    border-bottom:
        1px solid var(--text);

    padding-bottom:
        4px;

    transition:
        opacity .25s ease;
}

.link:hover {
    opacity:
        .5;
}


/* =========================================================
   STUDIO
   ========================================================= */

.studio-page {

    padding:
        80px var(--padding) 120px;
}

.studio-intro {

    max-width:
        1050px;

    padding:
        40px 0 120px;
}

.studio-intro h1 {
    margin-bottom:
        50px;
}

.studio-intro p {

    max-width:
        700px;

    font-size:
        18px;

    line-height:
        1.55;

    color:
        var(--muted);
}

.studio-section {

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

    padding:
        60px 0 100px;

    display:
        grid;

    grid-template-columns:
        1fr 2fr;

    gap:
        60px;
}

.studio-section h2 {

    margin:
        0;

    font-size:
        38px;
}

.studio-section p {

    max-width:
        650px;

    font-size:
        15px;

    line-height:
        1.65;

    color:
        #4f4c47;
}


/* =========================================================
   PAGINA STUDIO
   ========================================================= */

.studio-reworked { padding: 55px var(--padding) 145px; }
.studio-hero { max-width: 1120px; padding: 0 0 110px; }
.studio-hero h1 { max-width: 1000px; margin: 58px 0 36px; font-family: var(--sans); font-size: clamp(48px, 6.3vw, 104px); font-weight: 400; letter-spacing: -.07em; line-height: .9; }
.studio-lead { max-width: 570px; margin: 0; font-size: 18px; line-height: 1.45; }
.studio-photo { overflow: hidden; }
.studio-photo img, .studio-photo-pair img { display: block; width: 100%; height: 100%; object-fit: cover; }
.studio-photo-wide { height: min(58vw, 760px); }
.studio-story, .studio-contact { display: grid; grid-template-columns: 1fr 2fr; gap: 52px; padding: 23px 0 120px; border-top: 1px solid var(--line); }
.studio-story { margin-top: 115px; }
.studio-story h2, .studio-contact h2 { max-width: 720px; margin: 0 0 32px; font-family: var(--sans); font-size: clamp(30px, 3.6vw, 52px); font-weight: 400; letter-spacing: -.055em; line-height: .98; }
.studio-story p, .studio-contact p { max-width: 670px; margin: 0 0 20px; font-size: 16px; line-height: 1.55; }
.studio-slider { margin-top: 0; }
.studio-slider-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.studio-slider-track::-webkit-scrollbar { display: none; }
.studio-slider-track figure { flex: 0 0 min(43vw, 590px); height: min(42vw, 560px); margin: 0; overflow: hidden; scroll-snap-align: start; }
.studio-slider-track img { display: block; width: 100%; height: 100%; object-fit: cover; }
.studio-slider-controls { display: flex; justify-content: flex-end; gap: 5px; margin-top: 14px; }
.studio-slider-button { width: 37px; height: 28px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; font-size: 15px; }
.studio-slider-button:hover { border-color: var(--text); }
.studio-tags { display: flex; flex-wrap: wrap; gap: 8px; max-width: 720px; margin-top: 34px; }
.studio-tags span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.studio-services { margin-top: 115px; padding-bottom: 110px; }
.studio-contact { padding-bottom: 0; }
.studio-contact a { display: inline-block; margin-top: 13px; border-bottom: 1px solid var(--text); font-size: 17px; line-height: 1.4; }
.studio-contact a:hover { opacity: .5; }
.studio-contact b { font-weight: 400; }


/* =========================================================
   CONTATTI
   ========================================================= */

.contact-page {

    padding:
        100px var(--padding) 140px;
}

.contact-page h1 {

    max-width:
        1000px;

    margin-bottom:
        100px;
}

.contact-grid {

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

    padding-top:
        25px;

    display:
        grid;

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

    gap:
        40px;
}

.contact-column span {

    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--muted);

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;
}

.contact-column a,
.contact-column p {

    margin:
        0;

    font-size:
        14px;

    line-height:
        1.6;
}


/* =========================================================
   CONTATTI HOME
   ========================================================= */

.contact-preview {

    padding:
        130px var(--padding);

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

.contact-preview h2 {

    margin-bottom:
        45px;

    max-width:
        800px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {

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

    padding:
        22px var(--padding) 28px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        var(--muted);

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}


/* =========================================================
   CASA NEL CASTELLO — ASSORO
   ========================================================= */

.casa-assoro .project-main-image {

    display:
        flex;

    justify-content:
        center;

    background:
        transparent;
}

.casa-assoro .project-main-image img {

    width:
        65%;

    height:
        auto;

    display:
        block;

    object-fit:
        contain;
}

.casa-assoro .project-full-image {

    display:
        flex;

    justify-content:
        center;

    background:
        transparent;
}

.casa-assoro .project-full-image img {

    width:
        60%;

    height:
        auto;

    display:
        block;

    object-fit:
        contain;
}

.casa-assoro-details {

    padding:
        0 var(--padding);

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        28px;

    margin-bottom:
        60px;
}

.casa-assoro-details > div {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    overflow:
        visible;
}

.casa-assoro-details img {

    width:
        100%;

    height:
        auto;

    display:
        block;

    object-fit:
        contain;
}

.casa-assoro-plans {

    padding:
        0 var(--padding);

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        28px;

    margin-bottom:
        70px;
}

.casa-assoro-plans > div {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    overflow:
        visible;
}

.casa-assoro-plans img {

    width:
        100%;

    height:
        auto;

    display:
        block;

    object-fit:
        contain;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    :root {
        --padding:
            22px;
    }

    .header {

        padding:
            22px var(--padding);
    }

    nav {

        gap:
            17px;
    }

    nav a {

        font-size:
            9px;

        letter-spacing:
            .1em;
    }

    .hero {

        min-height:
            calc(100vh - 70px);

        padding:
            70px var(--padding) 45px;
    }

    .hero-content p {
        font-size:
            15px;
    }

    .projects-page {

        padding:
            60px var(--padding) 90px;
    }

    .projects-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;
    }

    .project-hero {

        padding:
            70px var(--padding);

        grid-template-columns:
            1fr;

        gap:
            55px;
    }

    .project-main-image {

        margin:
            0 var(--padding);
    }

    .project-description {

        grid-template-columns:
            1fr;

        gap:
            35px;

        padding:
            90px var(--padding);
    }

    .project-description h2 {
        margin-bottom:
            35px;
    }

    .project-gallery-two {

        grid-template-columns:
            1fr;

        gap:
            20px;
    }

    .project-gallery-two > div {

        aspect-ratio:
            4 / 3;
    }

    .project-drawing {

        padding:
            0 var(--padding);

        margin-bottom:
            45px;
    }

    .notes {

        padding:
            80px var(--padding);
    }

    .notes-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }

    .studio-page {

        padding:
            60px var(--padding) 90px;
    }

    .studio-intro {

        padding-bottom:
            90px;
    }

    .studio-section {

        grid-template-columns:
            1fr;

        gap:
            25px;
    }

    .contact-page {

        padding:
            70px var(--padding) 100px;
    }

    .contact-page h1 {
        margin-bottom:
            70px;
    }

    .contact-grid {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }

    footer {

        flex-direction:
            column;

        gap:
            8px;

        padding:
            22px var(--padding);
    }

    .casa-assoro-details,
    .casa-assoro-plans {

        grid-template-columns:
            1fr;

        gap:
            25px;
    }

    .casa-assoro .project-main-image img,
    .casa-assoro .project-full-image img {

        width:
            90%;
    }
}


/* =========================================================
   HOME EDITORIALE / ARCHIVIO
   ========================================================= */

.editorial-home {
    overflow-x: hidden;
}

.editorial-home .editorial-header {
    position: absolute;
    z-index: 20;
}

.editorial-home .editorial-header .logo {
    color: #fff;
}

.editorial-header {
    width: 100%;
    padding: 28px var(--padding);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.editorial-intro {
    min-height: 62vh;
    padding: 90px var(--padding) 42px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.eyebrow {
    margin: 0;
    font-size: 10px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--muted);
}

.editorial-intro h1,
.archive-intro h1 {
    max-width: 1150px;
    margin: 32px 0;
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(50px, 6.5vw, 112px);
    line-height: .9;
    letter-spacing: -.075em;
}

.editorial-intro-bottom {
    display: grid;
    grid-template-columns: minmax(260px, 420px) minmax(310px, 500px);
    justify-content: space-between;
    align-items: end;
    gap: 50px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.editorial-intro-bottom > p {
    margin: 0;
    font-size: 16px;
    line-height: 1.42;
}

.home-sections {
    display: grid;
    border-top: 1px solid var(--line);
}

.home-sections a {
    padding: 12px 0;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
    transition: padding .25s ease, color .25s ease;
}

.home-sections a:hover {
    padding-left: 10px;
    color: #a14b3c;
}

.home-sections span,
.material-caption p,
.material-card > p,
.archive-card-info span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--muted);
}

.home-sections b,
.material-caption b {
    font-weight: 400;
}

.home-material {
    padding: 0 var(--padding) 110px;
}

.material-image {
    display: block;
    overflow: hidden;
    background: #e5e4df;
}

.material-image img {
    display: block;
    width: 100%;
    height: min(67vw, 860px);
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.6,.2,1);
}

a:hover .material-image img,
.material-image:hover img {
    transform: scale(1.018);
}

.material-caption {
    padding-top: 13px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.material-caption p,
.material-caption a {
    margin: 0;
}

.material-caption a {
    font-size: 18px;
}

.material-caption a span {
    margin-left: 18px;
    color: var(--muted);
    font-size: 11px;
}

.home-material-grid {
    padding: 0 var(--padding) 150px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 8vw, 150px);
    align-items: start;
}

.home-recent-projects {
    padding: 0 var(--padding) 150px;
}

.home-recent-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.home-recent-heading p,
.home-recent-heading a {
    margin: 0;
}

.home-recent-heading a {
    font-size: 13px;
}

.home-recent-heading b {
    font-weight: 400;
}

.home-recent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.home-recent-grid .material-card .material-image img {
    height: auto;
    aspect-ratio: 1.25 / 1;
    object-fit: cover;
}

.home-recent-grid .material-card > p {
    margin: 12px 0 22px;
}

.home-recent-grid .material-card h2 {
    font-size: clamp(22px, 2.4vw, 34px);
}

.material-card {
    display: block;
}

.material-card-offset {
    margin-top: 18vw;
}

.material-card .material-image img {
    height: min(49vw, 650px);
}

.material-card > p {
    margin: 14px 0 36px;
}

.material-card h2 {
    margin: 0 0 4px;
    font-family: var(--sans);
    font-size: clamp(25px, 3vw, 44px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .98;
}

.material-card > span {
    color: var(--muted);
    font-size: 12px;
}

.home-note {
    margin: 0 var(--padding) 150px;
    padding: 20px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    border-top: 1px solid var(--line);
}

.home-note h2 {
    margin: 82px 0 0;
    font-family: var(--sans);
    font-size: clamp(33px, 3.8vw, 60px);
    font-weight: 400;
    letter-spacing: -.065em;
    line-height: .92;
}

.home-note-text {
    max-width: 420px;
    margin: 100px 0 0 auto;
    font-size: 18px;
    line-height: 1.42;
}

.notes-slider {
    grid-column: 1 / -1;
    margin-top: 42px;
}

.notes-slider-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.notes-slider-track::-webkit-scrollbar {
    display: none;
}

.notes-slider figure {
    flex: 0 0 min(38vw, 520px);
    margin: 0;
    scroll-snap-align: start;
}

.notes-slider img {
    display: block;
    width: 100%;
    aspect-ratio: 1.28 / 1;
    object-fit: cover;
}

.notes-slider figcaption {
    margin-top: 8px;
    font-size: 9px;
    color: var(--muted);
    letter-spacing: .13em;
}

.notes-slider-controls {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    margin-top: 14px;
}

.notes-slider-button {
    width: 37px;
    height: 28px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 15px;
}

.notes-slider-button:hover {
    border-color: var(--text);
}

/* Sequenza fotografica e Note nella home */
.editorial-intro {
    min-height: auto;
    padding: 0 0 120px;
}

.home-photo-film {
    position: relative;
    width: 100%;
    height: min(68vw, 840px);
    min-height: 540px;
    overflow: hidden;
    background: #e5e4df;
}

.home-photo-film::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .08) 18%, transparent 38%);
}

.home-film-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.035);
    transition: opacity 1.1s ease-in-out, transform 5.2s ease-out;
}

.home-film-frame.is-active {
    opacity: 1;
    transform: scale(1.01);
}

.editorial-intro-bottom {
    margin-top: 22px;
}

.home-primary-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 22px var(--padding) 0;
}

.home-primary-nav a,
.home-primary-nav button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 74px;
    padding: 0 3px;
    border: 0;
    border-bottom: 2px solid var(--text);
    background: transparent;
    color: var(--text);
    font-family: var(--sans);
    font-size: clamp(20px, 2vw, 29px);
    font-weight: 500;
    letter-spacing: -.045em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease;
}

.home-primary-nav a:hover,
.home-primary-nav button:hover {
    color: #a14b3c;
    border-color: #a14b3c;
}

.home-primary-nav b {
    font-size: .72em;
    font-weight: 400;
}

.home-primary-nav button span {
    margin-right: 10px;
    font-size: 1.35em;
    line-height: 0;
}

.project-search[hidden] { display: none; }

.project-search {
    position: fixed;
    z-index: 300;
    inset: 0;
    display: grid;
    overflow-y: auto;
    background: rgba(247, 247, 244, .96);
    padding: 28px var(--padding);
}

.project-search-panel {
    width: min(100%, 1140px);
    margin: 0 auto;
    align-self: start;
}

.project-search-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.project-search-heading .eyebrow { margin: 0; }

.home-search-close {
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
}

.project-search-label {
    display: block;
    margin-top: 72px;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
}

#project-search-input {
    width: 100%;
    margin-top: 14px;
    padding: 0 0 18px;
    border: 0;
    border-bottom: 2px solid var(--text);
    outline: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--sans);
    font-size: clamp(34px, 5vw, 72px);
    font-weight: 400;
    letter-spacing: -.065em;
}

#project-search-input::placeholder { color: #b7b4ad; }

.project-search-results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 42px;
    background: var(--line);
}

.project-search-results a,
.project-search-results > p {
    min-height: 128px;
    margin: 0;
    padding: 18px;
    background: var(--background);
    color: var(--text);
    text-decoration: none;
}

.project-search-results a:hover { background: #efeee9; }

.project-search-results span,
.project-search-results small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .1em;
    line-height: 1.35;
    text-transform: uppercase;
}

.project-search-results strong {
    display: block;
    margin: 16px 0 4px;
    font-family: var(--sans);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1;
}

.search-is-open { overflow: hidden; }

.notes-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 42px;
}

.notes-grid figure {
    margin: 0;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s ease;
    transition-delay: calc((var(--reveal-order) % 4) * 75ms);
}

.notes-grid figure.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.notes-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 1.18 / 1;
    object-fit: cover;
    filter: saturate(.86);
    transition: filter .35s ease, transform .45s ease;
}

.notes-grid figure:hover img {
    filter: saturate(1);
    transform: scale(1.012);
}

.notes-grid figcaption {
    margin-top: 7px;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .13em;
}

@media (max-width: 800px) {
    .editorial-intro {
        min-height: auto;
        padding: 0 0 78px;
    }

    .home-photo-film {
        height: 112vw;
        min-height: 450px;
    }

    .editorial-intro-bottom {
        margin-top: 16px;
    }

    .home-primary-nav {
        grid-template-columns: 1fr;
        gap: 0;
        margin: 16px var(--padding) 0;
    }

    .home-primary-nav a,
    .home-primary-nav button {
        min-height: 59px;
        font-size: 22px;
    }

    .project-search { padding-top: 22px; }

    .project-search-label { margin-top: 52px; }

    .project-search-results { grid-template-columns: 1fr; }

    .notes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-film-frame { transition-duration: .01ms; }
    .notes-grid figure { opacity: 1; transform: none; transition: none; }
}

.home-material-last .material-image img {
    object-position: center;
}

.archive-page {
    padding: 48px var(--padding) 145px;
}

.archive-intro {
    max-width: 920px;
    margin-bottom: 44px;
}

.archive-intro h1 {
    margin: 0;
    font-size: clamp(38px, 3.2vw, 56px);
}

.archive-intro > p:last-child {
    max-width: 440px;
    margin: 0 0 100px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--muted);
}

.archive-filters {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 46px;
}

.archive-subfilters {
    margin: -20px 0 52px;
}

.archive-subfilters[hidden],
.archive-subfilter-group[hidden] {
    display: none !important;
}

.archive-count {
    margin: -30px 0 42px;
    font-size: 18px;
    letter-spacing: -.03em;
}

.archive-count[hidden] {
    display: none !important;
}

.archive-subfilter-group {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.archive-subfilter-group button,
.archive-subfilter-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 2px;
    border: 0;
    border-bottom: 2px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .035em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease;
}

.archive-subfilter-group button:hover,
.archive-subfilter-group button.active,
.archive-subfilter-link:hover {
    border-bottom-color: var(--text);
    color: var(--text);
}

.archive-filter {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 2px;
    border: 0;
    border-bottom: 2px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: clamp(12px, 1.15vw, 16px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .035em;
    text-align: left;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease;
}

.archive-filter.active,
.archive-filter:hover {
    color: var(--text);
    border-color: var(--text);
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px 22px;
}

.archive-grid[hidden] {
    display: none !important;
}

.archive-page.archive-selecting .archive-grid {
    display: none !important;
}

.project-map[hidden] {
    display: none !important;
}

.project-map {
    margin: -27px 0 0;
}

.project-map-intro {
    margin: 0 0 24px;
}

.project-map-intro p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.project-map-scroll {
    overflow-x: auto;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.project-map-canvas {
    position: relative;
    min-width: 1200px;
    height: 720px;
}

.project-map-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.project-map-lines path {
    stroke: #b75844;
    stroke-width: 1.1;
    fill: none;
    stroke-linecap: round;
    opacity: .5;
    animation: map-line-in .55s ease both;
}

.project-map-nodes {
    position: absolute;
    inset: 0;
}

.project-map-node,
.project-map-project {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transform: translateY(-50%);
    transform-origin: 6px 50%;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .1em;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .35s ease, opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

.project-map-node { cursor: pointer; }

.project-map-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.project-map-node-category { color: #b75844; }
.project-map-node-category .project-map-dot { background: currentColor; }
.project-map-node-place { color: #78746f; }
.project-map-node-city { color: #78746f; }
.project-map-node-city .project-map-dot { border: 1px solid currentColor; background: var(--background); }
.project-map-project { color: var(--text); font-size: 10px; letter-spacing: .08em; }
.project-map-project .project-map-dot { background: var(--background); }
.project-map-node:hover,
.project-map-node.active { color: var(--text); transform: translateY(-50%) scale(1.22); }
.project-map-node.active .project-map-dot { background: currentColor; }
.project-map-node.muted { opacity: .18; transform: translateY(-50%) scale(.9); }
.project-map-project { animation: map-project-in .52s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--project-delay, 0ms); }

@keyframes map-line-in {
    from { opacity: 0; stroke-dasharray: 2 18; }
    to { opacity: .5; stroke-dasharray: 0; }
}

@keyframes map-project-in {
    from { opacity: 0; transform: translateY(-50%) scale(.28); }
    to { opacity: 1; transform: translateY(-50%) scale(1); }
}

.archive-map-open .archive-grid { display: none !important; }

.archive-card[hidden] {
    display: none;
}

.archive-card {
    display: block;
}

.project-detail {
    margin-top: 2px;
    padding-bottom: 0;
}

.project-detail[hidden] {
    display: none !important;
}

.project-detail-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 24px 0 28px;
    border-bottom: 1px solid var(--line);
}

.project-detail-return {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    cursor: pointer;
}

.project-detail-return:hover {
    opacity: .5;
}

.project-detail-loading,
.project-detail-error {
    padding: 90px 0;
    color: var(--muted);
    font-size: 16px;
}

.project-detail-error a {
    color: var(--text);
}

.project-detail-frame {
    display: block;
    width: 100%;
    min-height: 100vh;
    border: 0;
    opacity: 0;
    transition: opacity .2s ease;
}

.project-detail-frame.is-ready { opacity: 1; }

.archive-image {
    overflow: hidden;
    background: #e5e4df;
}

.archive-image img {
    display: block;
    width: 100%;
    aspect-ratio: 1.25 / 1;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.6,.2,1);
}

.archive-card:hover .archive-image img {
    transform: scale(1.02);
}

.archive-card-info {
    padding-top: 14px;
}

.archive-card-info h2 {
    margin: 0;
    font-family: var(--sans);
    font-size: clamp(23px, 2.3vw, 35px);
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: .98;
}

.archive-card-info p {
    margin: 9px 0 20px;
    color: var(--muted);
    font-size: 13px;
}

.archive-card-info span {
    display: block;
}

.places-view .archive-card-info h2::before {
    content: attr(data-place);
    display: block;
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

@media (max-width: 800px) {
    .editorial-header {
        padding: 22px var(--padding);
    }

    .logo {
        font-size: 26px;
        letter-spacing: -1.1px;
    }

    .editorial-header nav {
        gap: 14px;
    }

    .editorial-header nav a:nth-child(3),
    .editorial-header nav a:nth-child(4) {
        display: none;
    }

    .editorial-intro {
        min-height: 720px;
        padding-top: 56px;
    }

    .editorial-intro h1 {
        margin: 75px 0;
        font-size: clamp(48px, 13vw, 78px);
    }

    .editorial-intro-bottom,
    .home-note {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .home-material,
    .home-material-grid {
        padding-bottom: 78px;
    }

    .home-recent-projects {
        padding-bottom: 78px;
    }

    .home-recent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 38px 14px;
    }

    .material-image img,
    .material-card .material-image img {
        height: 82vw;
    }

    .home-material-grid {
        grid-template-columns: 1fr;
        gap: 66px;
    }

    .material-card-offset {
        margin-top: 0;
    }

    .home-note {
        margin-bottom: 80px;
    }

    .home-note h2,
    .home-note-text {
        margin-top: 0;
    }

    .home-note-text {
        font-size: 16px;
    }

    .notes-slider {
        margin-top: 0;
    }

    .notes-slider figure {
        flex-basis: 78vw;
    }

    .archive-page {
        padding-top: 30px;
    }

    .archive-intro h1 {
        font-size: clamp(36px, 9vw, 48px);
    }

    .archive-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .archive-subfilter-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .archive-subfilter-group button,
    .archive-subfilter-link {
        min-height: 42px;
        font-size: 9px;
    }

    .archive-filter {
        min-height: 48px;
        font-size: 9px;
    }

    .project-map {
        margin-top: -23px;
    }

    .archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 42px 14px;
    }

    .archive-card-info h2 {
        font-size: 22px;
    }

    .archive-card-info p {
        margin-bottom: 12px;
        font-size: 11px;
    }

    .archive-card-info span {
        font-size: 8px;
    }
}

@media (max-width: 520px) {
    .home-recent-grid {
        grid-template-columns: 1fr;
    }

    .archive-grid {
        grid-template-columns: 1fr;
    }

    .archive-subfilters {
        margin-bottom: 40px;
    }
}

@media (max-width: 800px) {
    .studio-reworked { padding-top: 32px; padding-bottom: 80px; }
    .studio-hero { padding-bottom: 70px; }
    .studio-hero h1 { margin: 48px 0 28px; font-size: clamp(46px, 12.5vw, 76px); }
    .studio-lead { font-size: 16px; }
    .studio-photo-wide { height: 90vw; }
    .studio-story, .studio-contact { grid-template-columns: 1fr; gap: 34px; padding-bottom: 75px; }
    .studio-story { margin-top: 75px; }
    .studio-story h2, .studio-contact h2 { font-size: 34px; }
    .studio-story p, .studio-contact p { font-size: 15px; }
    .studio-slider-track { gap: 12px; }
    .studio-slider-track figure { flex-basis: 78vw; height: 80vw; }
    .studio-services { margin-top: 75px; }
}


/* =========================================================
   SCHERMI MOLTO PICCOLI
   ========================================================= */

@media (max-width: 500px) {

    h1 {
        font-size:
            58px;
    }

    h2 {
        font-size:
            34px;
    }

    .header {
        align-items:
            center;
    }

    nav {
        gap:
            12px;
    }

    nav a {
        font-size:
            8px;
    }

    .project-meta div {

        grid-template-columns:
            80px 1fr;
    }
}
/* =========================================================
   FILTRO TEMATICO DELLA MAPPA
   ========================================================= */

.network.filtering .node {
    opacity: .08;
    pointer-events: none;
}

.network.filtering .node.theme {
    opacity: .18;
}

.network.filtering .node.theme.selected {
    opacity: 1;
    pointer-events: auto;
}

.network.filtering .node.theme.selected .node-label {
    color: var(--text);
}

.network.filtering .node.related {
    opacity: 1;
    pointer-events: auto;
}

.network.filtering .node.related:hover {
    transform:
        translate(-50%, -50%)
        scale(1.45);
}

.network.filtering .connection {
    opacity: .04;
}

.network.filtering .connection.related {
    opacity: .75;
}

.network.filtering .connection.active {
    opacity: 1;
    stroke: #a14b3c;
    stroke-width: 1.5;
}


/* Luoghi collegati al tema */

.network.filtering .place.related {
    opacity: .8;
}


/* Transizione generale */

.network .node,
.network .connection {
    transition:
        opacity .55s ease,
        transform .35s ease,
        background .35s ease,
        stroke .45s ease,
        stroke-width .45s ease;
}

/* Home: intestazione e sequenza fotografica su telefono */
@media (max-width: 800px) {
    .editorial-home .editorial-header {
        position: relative;
        padding: 22px var(--padding);
        background: var(--background);
    }

    .editorial-home .editorial-header .logo {
        color: var(--text);
    }

    .editorial-home .editorial-intro {
        min-height: auto;
        padding: 0 0 78px;
    }

    .editorial-home .home-photo-film {
        min-height: 0;
        height: 112vw;
    }
}