/* ===== about.html ===== */
:root {
    /* Typography scale: 1rem = 16px by default; sizes remain visually equivalent. */
    --text-xs: 0.6875rem;
    --text-sm: 0.75rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.5rem;
    --text-xl: 2rem;
    --gdr-red: #f30b30;
    --gdr-black: #0a0a0a;
    --gdr-ink: #212529;
    --gdr-grey: #8b8b8b;
    --gdr-hair: #e7e7e7;
}

.page-content {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 60px 100px 120px;
    overflow: hidden;
}

/* Eyebrow + statement hero, in continuità con il video hero della home */

.about-hero {
    position: relative;
    min-height: 46vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0 60px;
}

.eyebrow {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: .3em;
    color: var(--gdr-red);
    margin-bottom: 28px;
}

.about-statement {
    margin: 0;
    max-width: 16ch;
    font-weight: 200;
    font-size: clamp(2.375rem, 6vw, 5.125rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--gdr-ink);
}

/* Parola-firma: estende il motivo del testo ruotato già presente nell'header
   (link-about / link-contatti) come elemento decorativo di sfondo */

.about-signature {
    position: absolute;
    top: 50%;
    right: 0.5vw;
    transform: translateY(-50%);
    font-size: clamp(5.625rem, 16vw, 16.25rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1px var(--gdr-red);
    text-stroke: 1px var(--gdr-red);
    opacity: .35;
    line-height: 1;
    pointer-events: none;
    z-index: -1;
    white-space: nowrap;
}

/* Corpo: colonna testo + colonna dati, separate da un hairline come i divider dei link nav */

.about-body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 90px;
    padding-top: 60px;
    border-top: 1px solid var(--gdr-hair);
}

.about-col--intro p {
    font-weight: 300;
    font-size: 1.1875rem;
    line-height: 1.7;
    color: var(--gdr-ink);
    max-width: 52ch;
}

.about-quote {
    margin: 40px 0;
    padding-left: 28px;
    border-left: 2px solid var(--gdr-red);
}

.about-quote p {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.55;
    color: var(--gdr-ink);
    max-width: 40ch;
}

.about-block + .about-block {
    margin-top: 48px;
}

.about-block h2 {
    margin: 0 0 18px;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: .25em;
    color: var(--gdr-grey);
}

.about-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-list li {
    position: relative;
    display: inline-block;
    width: fit-content;
    font-weight: 300;
    font-size: 1.375rem;
    color: var(--gdr-ink);
    letter-spacing: -.01em;
}

.about-list li::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: var(--gdr-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease-in-out;
}

.about-list li:hover::after {
    transform: scaleX(1);
}

.about-list--tags li {
    font-size: 1rem;
    font-weight: 400;
    color: var(--gdr-grey);
}

/* Responsive, sugli stessi breakpoint di header.css */

@media (max-width: 991.98px) {
    .page-content {
        padding: 40px 40px 100px;
    }

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

    .about-signature {
        font-size: clamp(4.375rem, 22vw, 10rem);
        opacity: .22;
    }
}

@media (max-width: 768px) {
    .page-content {
        padding: 30px 25px 80px;
    }

    .about-hero {
        min-height: 34vh;
    }

    .about-statement {
        font-size: clamp(2rem, 9vw, 3.375rem);
        max-width: 14ch;
    }

    .about-quote p {
        font-size: 1.1875rem;
    }
}

@media (max-width: 480px) {
    .about-signature {
        display: none;
    }

    .about-col--intro p {
        font-size: 1.0625rem;
    }

    .about-list li {
        font-size: 1.1875rem;
    }
}


/* ===== portfolio.html ===== */
:root {
    --gdr-red: #f30b30;
    --gdr-black: #0a0a0a;
    --gdr-ink: #212529;
    --gdr-grey: #8b8b8b;
    --gdr-hair: #e7e7e7;
}

.page-content {
    position: relative;
    padding: 60px 100px 140px;
    overflow: hidden;
}

.portfolio-hero {
    position: relative;
    min-height: 38vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0 60px;
}

.eyebrow {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: .3em;
    color: var(--gdr-red);
    margin-bottom: 28px;
}

.portfolio-statement {
    margin: 0;
    max-width: 13ch;
    font-weight: 200;
    font-size: clamp(2.375rem, 6vw, 5.125rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--gdr-ink);
}

.portfolio-signature {
    position: absolute;
    top: 50%;
    right: 0.5vw;
    transform: translateY(-50%);
    font-size: clamp(5.625rem, 16vw, 16rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1px var(--gdr-red);
    text-stroke: 1px var(--gdr-red);
    opacity: .35;
    line-height: 1;
    pointer-events: none;
    z-index: -1;
    white-space: nowrap;
}

.portfolio-toolbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 30px;
    padding: 24px 0 22px;
    border-top: 1px solid var(--gdr-hair);
    border-bottom: 1px solid var(--gdr-hair);
}

.portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 30px;
}

.portfolio-filter {
    position: relative;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--gdr-grey);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: .18em;
    cursor: pointer;
}

.portfolio-filter::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 1px;
    background: var(--gdr-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease-in-out;
}

.portfolio-filter:hover::after,
.portfolio-filter.is-active::after {
    transform: scaleX(1);
}

.portfolio-filter.is-active {
    color: var(--gdr-red);
}

.portfolio-card.is-filtering {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.portfolio-card {
    transition: opacity .28s ease, transform .28s ease;
}

.portfolio-count {
    flex: 0 0 auto;
    color: var(--gdr-grey);
    font-size: 0.75rem;
    letter-spacing: .18em;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 35px;
    row-gap: 65px;
    padding-top: 45px;
}

.portfolio-card {
    min-width: 0;
}

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

.portfolio-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f2f2f2;
}

.portfolio-media::before,
.portfolio-media::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.portfolio-media::before {
    inset: 0;
    border: 1px solid rgba(10, 10, 10, .08);
    z-index: 2;
}

.portfolio-media::after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gdr-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease-in-out;
    z-index: 3;
}

.portfolio-art {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #111;
    background: #ededed;
    transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .45s ease;
    filter: grayscale(1);
}

.portfolio-art span {
    position: absolute;
    font-weight: 700;
    letter-spacing: -.07em;
    line-height: .8;
}

.art-web {
    background: linear-gradient(135deg, #ededed 0%, #fafafa 48%, #d8d8d8 100%);
}

.art-web span {
    font-size: clamp(2.8125rem, 7vw, 5.625rem);
    transform: rotate(-8deg);
}

.art-brand {
    background: #101010;
    color: #fff;
}

.art-brand span {
    font-size: clamp(2.5rem, 6vw, 4.875rem);
    letter-spacing: -.1em;
}

.art-brand span::first-letter {
    color: var(--gdr-red);
}

.art-ecommerce {
    background: #dedede;
}

.art-ecommerce span {
    width: 62%;
    height: 62%;
    border: 1px solid #111;
    transform: rotate(7deg);
}

.art-ecommerce span::before {
    content: "";
    position: absolute;
    width: 45%;
    height: 45%;
    left: 27%;
    top: 27%;
    border: 1px solid var(--gdr-red);
}

.art-3d {
    background: #f1f1f1;
}

.art-3d span {
    font-size: clamp(3.25rem, 7vw, 5.5rem);
    transform: skewY(-12deg);
}

.art-graphic {
    background: #d2d2d2;
}

.art-graphic span {
    width: 48%;
    height: 70%;
    background: #111;
    transform: rotate(-13deg);
}

.art-graphic span::after {
    content: "";
    position: absolute;
    width: 65%;
    height: 1px;
    background: var(--gdr-red);
    top: 48%;
    left: 18%;
    transform: rotate(26deg);
}

.art-motion {
    background: #ececec;
}

.art-motion span {
    width: 70%;
    height: 1px;
    background: #111;
    box-shadow: 0 -28px 0 #111, 0 28px 0 #111;
    transform: rotate(-9deg);
}

.portfolio-card:hover .portfolio-art,
.portfolio-card:hover .portfolio-art-image {
    transform: scale(1.035);
    filter: grayscale(0);
}

.portfolio-card:hover .portfolio-media::after {
    transform: scaleX(1);
}

.portfolio-meta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    padding-top: 17px;
}

.portfolio-category {
    display: block;
    margin-bottom: 7px;
    color: var(--gdr-red);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: .2em;
}

.portfolio-title {
    margin: 0;
    color: var(--gdr-ink);
    font-size: 1.3125rem;
    font-weight: 300;
    letter-spacing: -.01em;
}

.portfolio-year {
    padding-top: 2px;
    color: var(--gdr-grey);
    font-size: 0.75rem;
    letter-spacing: .12em;
}

.portfolio-view {
    display: inline-block;
    margin-top: 13px;
    color: var(--gdr-grey);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: .18em;
    transition: color .35s ease-in-out;
}

.portfolio-card:hover .portfolio-view {
    color: var(--gdr-red);
}

@media (max-width: 991.98px) {
    .page-content {
        padding: 40px 40px 110px;
    }

    .portfolio-signature {
        font-size: clamp(4.375rem, 22vw, 10rem);
        opacity: .22;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
        row-gap: 55px;
    }
}

@media (max-width: 768px) {
    .page-content {
        padding: 30px 25px 90px;
    }

    .portfolio-hero {
        min-height: 34vh;
    }

    .portfolio-statement {
        font-size: clamp(2rem, 9vw, 3.375rem);
        max-width: 14ch;
    }

    .portfolio-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        row-gap: 48px;
        padding-top: 35px;
    }
}

@media (max-width: 480px) {
    .portfolio-signature {
        display: none;
    }

    .portfolio-filters {
        gap: 18px 24px;
    }

    .portfolio-filter {
        font-size: 0.75rem;
    }
}


/* ===== progetti.html ===== */
:root {
    --gdr-red: #f30b30;
    --gdr-black: #0a0a0a;
    --gdr-ink: #212529;
    --gdr-grey: #8b8b8b;
    --gdr-hair: #e7e7e7;
}

.page-content {
    position: relative;
    padding: 60px 100px 140px;
    overflow: hidden;
}

.projects-hero {
    position: relative;
    min-height: 38vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0 60px;
}

.eyebrow {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: .3em;
    color: var(--gdr-red);
    margin-bottom: 28px;
}

.projects-statement {
    margin: 0;
    max-width: 15ch;
    font-weight: 200;
    font-size: clamp(2.375rem, 6vw, 5.125rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--gdr-ink);
}

/* La signature riprende esattamente il linguaggio decorativo di about-signature. */
.projects-signature {
    position: absolute;
    top: 50%;
    right: 0.5vw;
    transform: translateY(-50%);
    font-size: clamp(5.625rem, 15vw, 16rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1px var(--gdr-red);
    text-stroke: 1px var(--gdr-red);
    opacity: .35;
    line-height: 1;
    pointer-events: none;
    z-index: -1;
    white-space: nowrap;
}

.projects-intro {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 90px;
    padding: 30px 0 65px;
    border-top: 1px solid var(--gdr-hair);
}

.projects-intro p {
    margin: 0;
    max-width: 52ch;
    font-weight: 300;
    font-size: 1.1875rem;
    line-height: 1.7;
    color: var(--gdr-ink);
}

.projects-intro-label {
    padding-top: 5px;
    color: var(--gdr-grey);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: .25em;
}

.projects-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--gdr-hair);
}

.project-item {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) minmax(260px, .85fr);
    gap: 45px;
    align-items: center;
    padding: 55px 0;
    border-bottom: 1px solid var(--gdr-hair);
}

.project-number {
    align-self: start;
    padding-top: 5px;
    color: var(--gdr-red);
    font-size: 0.8125rem;
    letter-spacing: .18em;
}

.project-copy {
    min-width: 0;
}

.project-category {
    display: block;
    margin-bottom: 13px;
    color: var(--gdr-grey);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: .2em;
}

.project-title {
    margin: 0;
    color: var(--gdr-ink);
    font-size: clamp(1.75rem, 3.1vw, 3rem);
    font-weight: 200;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.project-description {
    max-width: 48ch;
    margin: 22px 0 0;
    color: var(--gdr-ink);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.7;
}

.project-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 25px;
}

.project-year {
    color: var(--gdr-grey);
    font-size: 0.6875rem;
    letter-spacing: .16em;
}

.project-link {
    position: relative;
    display: inline-block;
    color: var(--gdr-ink);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: .18em;
    text-decoration: none;
}

.project-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 1px;
    background: var(--gdr-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease-in-out;
}

.project-link:hover::after,
.project-link:focus-visible::after {
    transform: scaleX(1);
}

.project-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #ededed;
}

.project-media::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(10, 10, 10, .08);
    z-index: 2;
    pointer-events: none;
}

.project-art {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    align-items: center;
    justify-position: center;
    overflow: hidden;
    color: #111;
    background: #ededed;
    filter: grayscale(1);
    transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}

.project-art span {
    position: absolute;
    font-weight: 700;
    letter-spacing: -.08em;
    line-height: .8;
}

.project-art--web {
    background: linear-gradient(135deg, #eeeeee 0%, #fafafa 48%, #d8d8d8 100%);
}

.project-art--web span {
    font-size: clamp(2.625rem, 5vw, 4.5rem);
    transform: rotate(-8deg);
}

.project-art--identity {
    background: #101010;
    color: #fff;
}

.project-art--identity span {
    font-size: clamp(2.375rem, 5vw, 4.25rem);
}

.project-art--identity span::first-letter {
    color: var(--gdr-red);
}

.project-art--space {
    background: #dedede;
}

.project-art--space span {
    width: 58%;
    height: 58%;
    border: 1px solid #111;
    transform: rotate(7deg);
}

.project-art--space span::before {
    content: "";
    position: absolute;
    width: 45%;
    height: 45%;
    left: 27%;
    top: 27%;
    border: 1px solid var(--gdr-red);
}

.project-art--editorial {
    background: #d2d2d2;
}

.project-art--editorial span {
    width: 47%;
    height: 70%;
    background: #111;
    transform: rotate(-13deg);
}

.project-art--editorial span::after {
    content: "";
    position: absolute;
    width: 65%;
    height: 1px;
    background: var(--gdr-red);
    top: 48%;
    left: 18%;
    transform: rotate(26deg);
}

.project-item:hover .project-art {
    transform: scale(1.035);
    filter: grayscale(0);
}

/* Un'alternanza editoriale: il contenuto cambia lato, la grammatica visiva resta la stessa. */
.project-item:nth-child(even) {
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1fr) 70px;
}

.project-item:nth-child(even) .project-number {
    grid-column: 3;
    grid-row: 1;
}

.project-item:nth-child(even) .project-copy {
    grid-column: 2;
    grid-row: 1;
}

.project-item:nth-child(even) .project-media {
    grid-column: 1;
    grid-row: 1;
}

@media (max-width: 991.98px) {
    .page-content {
        padding: 40px 40px 110px;
    }

    .projects-signature {
        font-size: clamp(4.375rem, 22vw, 10rem);
        opacity: .22;
    }

    .projects-intro {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .project-item,
    .project-item:nth-child(even) {
        grid-template-columns: 55px minmax(0, 1fr);
        gap: 28px;
    }

    .project-number,
    .project-item:nth-child(even) .project-number {
        grid-column: 1;
        grid-row: 1;
    }

    .project-copy,
    .project-item:nth-child(even) .project-copy {
        grid-column: 2;
        grid-row: 1;
    }

    .project-media,
    .project-item:nth-child(even) .project-media {
        grid-column: 2;
        grid-row: 2;
        max-width: 620px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .page-content {
        padding: 30px 25px 90px;
    }

    .projects-hero {
        min-height: 34vh;
    }

    .projects-statement {
        font-size: clamp(2rem, 9vw, 3.375rem);
        max-width: 14ch;
    }

    .projects-intro {
        padding: 25px 0 50px;
    }

    .projects-intro p {
        font-size: 1.0625rem;
    }

    .project-item,
    .project-item:nth-child(even) {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 18px;
        padding: 42px 0;
    }

    .project-title {
        font-size: clamp(1.75rem, 8vw, 2.625rem);
    }

    .project-description {
        font-size: 0.9375rem;
    }

    .project-media,
    .project-item:nth-child(even) .project-media {
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    .projects-signature {
        display: none;
    }

    .project-item,
    .project-item:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .project-number,
    .project-item:nth-child(even) .project-number,
    .project-copy,
    .project-item:nth-child(even) .project-copy,
    .project-media,
    .project-item:nth-child(even) .project-media {
        grid-column: 1;
        grid-row: auto;
    }

    .project-number {
        padding-top: 0;
    }
}


/* ===== tutorial.html ===== */
:root {
    --gdr-red: #f30b30;
    --gdr-black: #0a0a0a;
    --gdr-ink: #212529;
    --gdr-grey: #8b8b8b;
    --gdr-hair: #e7e7e7;
}

.page-content {
    position: relative;
    padding: 60px 100px 140px;
    overflow: hidden;
}

.tutorial-hero {
    position: relative;
    min-height: 38vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0 60px;
}

.eyebrow {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: .3em;
    color: var(--gdr-red);
    margin-bottom: 28px;
}

.tutorial-statement {
    margin: 0;
    max-width: 15ch;
    font-weight: 200;
    font-size: clamp(2.375rem, 6vw, 5.125rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--gdr-ink);
}

.tutorial-signature {
    position: absolute;
    top: 50%;
    right: 0.5vw;
    transform: translateY(-50%);
    font-size: clamp(5.625rem, 16vw, 16rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1px var(--gdr-red);
    text-stroke: 1px var(--gdr-red);
    opacity: .35;
    line-height: 1;
    pointer-events: none;
    z-index: -1;
    white-space: nowrap;
}

.tutorial-intro {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 90px;
    padding: 30px 0 65px;
    border-top: 1px solid var(--gdr-hair);
}

.tutorial-intro p {
    margin: 0;
    max-width: 52ch;
    font-weight: 300;
    font-size: 1.1875rem;
    line-height: 1.7;
    color: var(--gdr-ink);
}

.tutorial-intro-label {
    padding-top: 5px;
    color: var(--gdr-grey);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: .25em;
}

 .tutorial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 35px;
    row-gap: 65px;
    padding-top: 45px;
}

.tutorial-card {
    min-width: 0;
}

.tutorial-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f2f2f2;
    display: block;
}

.tutorial-media::before,
.tutorial-media::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.tutorial-media::before {
    inset: 0;
    border: 1px solid rgba(10, 10, 10, .08);
    z-index: 2;
}

.tutorial-media::after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gdr-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease-in-out;
    z-index: 3;
}

.tutorial-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    overflow: hidden;
    transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .45s ease;
    filter: grayscale(1);
}

.tutorial-card:hover .tutorial-art {
    transform: scale(1.035);
    filter: grayscale(0);
}

.tutorial-card:hover .tutorial-media::after {
    transform: scaleX(1);
}

.tutorial-meta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    padding-top: 17px;
}

.tutorial-category {
    display: block;
    margin-bottom: 7px;
    color: var(--gdr-red);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: .2em;
}

.tutorial-title {
    margin: 0;
    color: var(--gdr-ink);
    font-size: 1.3125rem;
    font-weight: 300;
    letter-spacing: -.01em;
}

.tutorial-year {
    padding-top: 2px;
    color: var(--gdr-grey);
    font-size: 0.75rem;
    letter-spacing: .12em;
}

.tutorial-link {
    display: inline-block;
    margin-top: 13px;
    color: var(--gdr-grey);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: .18em;
    text-decoration: none;
    transition: color .35s ease-in-out;
}

.tutorial-card:hover .tutorial-link {
    color: var(--gdr-red);
}

.tutorial-topics {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    padding: 30px 0 35px;
    border-bottom: 1px solid var(--gdr-hair);
}

.topic-link {
    position: relative;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--gdr-grey);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: .18em;
    text-decoration: none;
    cursor: pointer;
}

.topic-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 1px;
    background: var(--gdr-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease-in-out;
}

.topic-link:hover::after,
.topic-link:focus-visible::after,
.topic-link.is-active::after {
    transform: scaleX(1);
}

.topic-link.is-active {
    color: var(--gdr-red);
}

.tutorial-card.is-filtering {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.tutorial-card {
    transition: opacity .28s ease, transform .28s ease;
}

@media (max-width: 991.98px) {
    .page-content { padding: 40px 40px 110px; }
    .tutorial-signature { font-size: clamp(4.375rem, 22vw, 10rem); opacity: .22; }
    .tutorial-intro { grid-template-columns: 1fr; gap: 25px; }
    .tutorial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
        row-gap: 55px;
    }
}

@media (max-width: 768px) {
    .page-content { padding: 30px 25px 90px; }
    .tutorial-hero { min-height: 34vh; }
    .tutorial-statement { font-size: clamp(2rem, 9vw, 3.375rem); max-width: 14ch; }
    .tutorial-intro { padding: 25px 0 45px; }
    .tutorial-intro p { font-size: 1.0625rem; }
    .tutorial-topics { gap: 22px; }
    .tutorial-grid {
        grid-template-columns: 1fr;
        row-gap: 48px;
        padding-top: 35px;
    }
}

@media (max-width: 480px) {
    .tutorial-signature { display: none; }

}


/* ===== articoli.html ===== */
:root {
    --gdr-red: #f30b30;
    --gdr-black: #0a0a0a;
    --gdr-ink: #212529;
    --gdr-grey: #8b8b8b;
    --gdr-hair: #e7e7e7;
}

.page-content {
    position: relative;
    padding: 60px 100px 140px;
    overflow: hidden;
}

.articles-hero {
    position: relative;
    min-height: 38vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0 60px;
}

.eyebrow {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: .3em;
    color: var(--gdr-red);
    margin-bottom: 28px;
}

.articles-statement {
    margin: 0;
    max-width: 14ch;
    font-weight: 200;
    font-size: clamp(2.375rem, 6vw, 5.125rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--gdr-ink);
}

.articles-signature {
    position: absolute;
    top: 50%;
    right: 0.5vw;
    transform: translateY(-50%);
    font-size: clamp(5.625rem, 16vw, 16rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1px var(--gdr-red);
    text-stroke: 1px var(--gdr-red);
    opacity: .35;
    line-height: 1;
    pointer-events: none;
    z-index: -1;
    white-space: nowrap;
}

.articles-intro {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 90px;
    padding: 30px 0 65px;
    border-top: 1px solid var(--gdr-hair);
}

.articles-intro p {
    margin: 0;
    max-width: 52ch;
    font-weight: 300;
    font-size: 1.1875rem;
    line-height: 1.7;
    color: var(--gdr-ink);
}

.articles-intro-label {
    padding-top: 5px;
    color: var(--gdr-grey);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: .25em;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 35px;
    row-gap: 65px;
    padding-top: 45px;
}

.article-card {
    min-width: 0;
}

.article-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f2f2f2;
}

.article-media::before,
.article-media::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.article-media::before {
    inset: 0;
    border: 1px solid rgba(10, 10, 10, .08);
    z-index: 2;
}

.article-media::after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gdr-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease-in-out;
    z-index: 3;
}

.article-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    overflow: hidden;
    transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .45s ease;
    filter: grayscale(1);
}

.article-card:hover .article-art {
    transform: scale(1.035);
    filter: grayscale(0);
}

.article-card:hover .article-media::after {
    transform: scaleX(1);
}

.article-meta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    padding-top: 17px;
}

.article-category {
    display: block;
    margin-bottom: 7px;
    color: var(--gdr-red);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: .2em;
}

.article-title {
    margin: 0;
    color: var(--gdr-ink);
    font-size: 1.3125rem;
    font-weight: 300;
    letter-spacing: -.01em;
}

.article-excerpt {
    margin: 9px 0 0;
    max-width: 60ch;
    color: var(--gdr-grey);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.55;
}

.article-date {
    padding-top: 2px;
    color: var(--gdr-grey);
    font-size: 0.75rem;
    letter-spacing: .12em;
}

.article-link {
    display: inline-block;
    margin-top: 13px;
    color: var(--gdr-grey);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: .18em;
    text-decoration: none;
    transition: color .35s ease-in-out;
}

.article-card:hover .article-link {
    color: var(--gdr-red);
}

@media (max-width: 991.98px) {
    .page-content { padding: 40px 40px 110px; }
    .articles-signature { font-size: clamp(4.375rem, 22vw, 10rem); opacity: .22; }
    .articles-intro { grid-template-columns: 1fr; gap: 25px; }
    .articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
        row-gap: 55px;
    }
}

@media (max-width: 768px) {
    .page-content { padding: 30px 25px 90px; }
    .articles-hero { min-height: 34vh; }
    .articles-statement { font-size: clamp(2rem, 9vw, 3.375rem); max-width: 14ch; }
    .articles-intro { padding: 25px 0 45px; }
    .articles-intro p { font-size: 1.0625rem; }
    .articles-grid {
        grid-template-columns: 1fr;
        row-gap: 48px;
        padding-top: 35px;
    }
}

@media (max-width: 480px) {
    .articles-signature { display: none; }
}


/* ===== contatti.html ===== */
:root {
    --gdr-red: #f30b30;
    --gdr-black: #0a0a0a;
    --gdr-ink: #212529;
    --gdr-grey: #8b8b8b;
    --gdr-hair: #e7e7e7;
}

.page-content {
    position: relative;
    padding: 60px 100px 140px;
    overflow: hidden;
}

.contact-hero {
    position: relative;
    min-height: 38vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0 60px;
}

.eyebrow {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: .3em;
    color: var(--gdr-red);
    margin-bottom: 28px;
}

.contact-statement {
    margin: 0;
    max-width: 14ch;
    font-weight: 200;
    font-size: clamp(2.375rem, 6vw, 5.125rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--gdr-ink);
}

.contact-signature {
    position: absolute;
    top: 50%;
    right: 0.5vw;
    transform: translateY(-50%);
    font-size: clamp(5.625rem, 16vw, 16.25rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1px var(--gdr-red);
    text-stroke: 1px var(--gdr-red);
    opacity: .35;
    line-height: 1;
    pointer-events: none;
    z-index: -1;
    white-space: nowrap;
}

.contact-body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 90px;
    padding-top: 60px;
    border-top: 1px solid var(--gdr-hair);
}

.contact-copy p {
    margin: 0;
    max-width: 52ch;
    font-weight: 300;
    font-size: 1.1875rem;
    line-height: 1.7;
    color: var(--gdr-ink);
}

.contact-copy p + p {
    margin-top: 24px;
}

.contact-form {
    display: grid;
    gap: 30px;
}

.contact-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.contact-field {
    display: flex;
    flex-direction: column;
}

.contact-field--full {
    grid-column: 1 / -1;
}

.contact-field label {
    margin-bottom: 9px;
    color: var(--gdr-grey);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: .2em;
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid var(--gdr-hair);
    border-radius: 0;
    outline: 0;
    padding: 7px 0 12px;
    background: transparent;
    color: var(--gdr-ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 300;
    transition: border-color .35s ease-in-out;
}

.contact-field textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.55;
}

.contact-field input:focus,
.contact-field textarea:focus {
    border-bottom-color: var(--gdr-red);
    box-shadow: 0 1px 0 0 var(--gdr-red);
}

.contact-field input[aria-invalid="true"],
.contact-field textarea[aria-invalid="true"] {
    border-bottom-color: var(--gdr-red);
}

.contact-error {
    min-height: 0;
    margin-top: 8px;
    color: var(--gdr-red);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: .04em;
    line-height: 1.4;
}

.contact-status {
    display: none;
    margin: 0;
    padding-top: 4px;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1.5;
}

.contact-status.is-error,
.contact-status.is-success {
    display: block;
}

.contact-status.is-error {
    color: var(--gdr-red);
}

.contact-status.is-success {
    color: var(--gdr-ink);
}

.contact-submit {
    justify-self: start;
    border: 0;
    border-bottom: 1px solid var(--gdr-red);
    padding: 0 0 7px;
    background: transparent;
    color: var(--gdr-grey);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: .18em;
    cursor: pointer;
    transition: color .35s ease-in-out;
}

.contact-submit:hover {
    color: var(--gdr-red);
}

.contact-details {
    display: grid;
    gap: 42px;
    padding-top: 3px;
}

.contact-block h2 {
    margin: 0 0 14px;
    color: var(--gdr-grey);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: .25em;
}

.contact-block a,
.contact-block p {
    position: relative;
    display: inline-block;
    margin: 0;
    color: var(--gdr-ink);
    font-size: 1.3125rem;
    font-weight: 300;
    letter-spacing: -.01em;
    text-decoration: none;
}

.contact-block a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: var(--gdr-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease-in-out;
}

.contact-block a:hover::after {
    transform: scaleX(1);
}

.contact-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 25px;
}

.contact-socials a {
    font-size: 1rem;
    color: var(--gdr-grey);
}

@media (max-width: 991.98px) {
    .page-content {
        padding: 40px 40px 110px;
    }

    .contact-signature {
        font-size: clamp(4.375rem, 22vw, 10rem);
        opacity: .22;
    }

    .contact-body {
        grid-template-columns: 1fr;
        gap: 65px;
    }
}

@media (max-width: 768px) {
    .page-content {
        padding: 30px 25px 90px;
    }

    .contact-hero {
        min-height: 34vh;
    }

    .contact-statement {
        font-size: clamp(2rem, 9vw, 3.375rem);
        max-width: 14ch;
    }

    .contact-fields {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .contact-field--full {
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .contact-signature {
        display: none;
    }

    .contact-copy p {
        font-size: 1.0625rem;
    }

    .contact-block a,
    .contact-block p {
        font-size: 1.1875rem;
    }
}


/* ===== privacy.html ===== */
.page-placeholder {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 30px;
    text-align: center;
}
.page-placeholder h1 {
    margin: 0;
    color: #f30b30;
    font-size: clamp(3rem, 8vw, 6.875rem);
    font-weight: 200;
    letter-spacing: -.04em;
}

/* Detail pages — uses the same visual language as the existing pages. */
.detail-hero{position:relative;min-height:42vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0 60px}.detail-title{margin:0;max-width:14ch;font-weight:200;font-size:clamp(2.625rem,6vw,5.375rem);line-height:1.06;letter-spacing:-.025em;color:var(--gdr-ink)}.detail-meta{display:flex;gap:30px;margin-top:30px;color:var(--gdr-grey);font-size:0.75rem;letter-spacing:.18em}.detail-body{border-top:1px solid var(--gdr-hair);padding-top:60px;max-width:1100px}.detail-image{display:block;width:100%;max-height:70vh;object-fit:cover;filter:grayscale(1)}.detail-content{max-width:760px;padding:55px 0 100px;font-size:1.1875rem;line-height:1.75;font-weight:300}.detail-content h2{font-size:0.8125rem;letter-spacing:.25em;font-weight:400;color:var(--gdr-grey);margin:0 0 20px}.detail-content p{margin:0 0 28px}@media(max-width:768px){.detail-hero{min-height:34vh}.detail-content{font-size:1.0625rem;padding-top:40px}}

.portfolio-art-image,.project-art-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;margin:0;transition:transform .55s cubic-bezier(.2,.7,.2,1), filter .45s ease;filter:grayscale(1);}

/* ===== PHP migration fixes — preserve the original visual system ===== */
/* Media wrappers are links in the PHP version; they must retain the same
   block sizing as the original div wrappers. */
.portfolio-media,
.project-media,
.article-media {
    display: block;
}

/* Keep the fixed side navigation clear of the 100px page-content edge. */
.link-contatti {
    right: 16px;
}

/* ===== Detail pages — refined editorial layout ===== */
.detail-page { overflow: visible; }
.detail-hero {
    min-height: 44vh;
    padding: 36px 0 64px;
    justify-content: flex-end;
}
.detail-back {
    display: inline-block;
    width: fit-content;
    margin-bottom: 52px;
    color: var(--gdr-grey);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: .18em;
    text-decoration: none;
    transition: color .25s ease, transform .25s ease;
}
.detail-back:hover { color: var(--gdr-red); transform: translateX(4px); }
.detail-title {
    max-width: 12ch;
    font-weight: 200;
    font-size: clamp(3rem, 7.2vw, 6.5rem);
    line-height: .98;
    letter-spacing: -.045em;
}
.detail-meta {
    align-items: center;
    gap: 24px;
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--gdr-hair);
    width: min(100%, 760px);
    font-size: 0.6875rem;
    letter-spacing: .2em;
}
.detail-meta span:first-child { color: var(--gdr-red); }
.detail-cover {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #f5f5f5;
}
.detail-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0,0,0,.04);
    pointer-events: none;
}
.detail-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    filter: grayscale(1);
    transition: filter .55s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.detail-cover:hover .detail-image { filter: grayscale(0); transform: scale(1.012); }
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 100px;
    padding: 72px 0 100px;
    border-top: 1px solid var(--gdr-hair);
    margin-top: 0;
}
.detail-content {
    max-width: 760px;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1.8;
    font-weight: 300;
}
.detail-lead {
    margin: 0 0 52px;
    font-size: 1.4375rem;
    line-height: 1.55;
    font-weight: 300;
    color: var(--gdr-ink);
}
.detail-content h1 { font-size: 2.625rem; font-weight: 200; line-height: 1.1; margin: 70px 0 24px; letter-spacing: -.025em; }
.detail-content h2 { font-size: 1.5rem; font-weight: 300; line-height: 1.2; margin: 62px 0 20px; letter-spacing: -.01em; color: var(--gdr-ink); }
.detail-content h3 { font-size: 0.9375rem; font-weight: 400; line-height: 1.4; margin: 45px 0 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--gdr-grey); }
.detail-content p { margin: 0 0 28px; }
.detail-content a { color: inherit; text-decoration-color: var(--gdr-red); text-underline-offset: 4px; }
.detail-content a:hover { color: var(--gdr-red); }
.detail-content ul, .detail-content ol { margin: 0 0 30px; padding-left: 24px; }
.detail-content li { margin-bottom: 8px; padding-left: 5px; }
.detail-content blockquote { margin: 46px 0; padding: 8px 0 8px 24px; border-left: 1px solid var(--gdr-red); font-size: 1.3125rem; line-height: 1.55; font-weight: 300; }
.detail-content blockquote p { margin: 0; }
.detail-content pre { margin: 38px 0; padding: 24px; overflow: auto; background: #f7f7f7; border: 1px solid var(--gdr-hair); font-size: 0.875rem; line-height: 1.65; }
.detail-content code { font-size: .9em; background: #f7f7f7; padding: 2px 5px; }
.detail-content pre code { background: transparent; padding: 0; }
.detail-content img { display: block; width: auto; max-width: 100%; height: auto; margin: 42px 0; }
.detail-sidebar { padding-top: 4px; }
.detail-side-block { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--gdr-hair); }
.detail-side-label { display: block; margin-bottom: 22px; color: var(--gdr-grey); font-size: 1.2rem; letter-spacing: .25em; font-weight: 400;color: #f30b30; }
.detail-sidebar dl { margin: 0; }
.detail-sidebar dl > div { display: grid; grid-template-columns: 1fr; gap: 5px; margin-bottom: 20px; }
.detail-sidebar dt { color: var(--gdr-grey); font-size: 1rem; letter-spacing: .2em; color: #f30b30; }
.detail-sidebar dd { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 300;}
.detail-download-list { border-top: 1px solid var(--gdr-hair); }
.detail-attachment { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--gdr-hair); color: inherit; text-decoration: none; }
.detail-attachment strong { display: block; font-size: 0.75rem; line-height: 1.35; font-weight: 400; }
.detail-attachment small { display: block; margin-top: 5px; color: var(--gdr-grey); font-size: 0.5625rem; letter-spacing: .1em; }
.detail-attachment > span:last-child { flex: 0 0 auto; color: var(--gdr-grey); font-size: 0.5625rem; letter-spacing: .12em; transition: color .25s ease, transform .25s ease; }
.detail-attachment:hover > span:last-child { color: var(--gdr-red); transform: translateX(3px); }
.detail-footer-link { padding: 26px 0 40px; border-top: 1px solid var(--gdr-hair); }
.detail-footer-link a { color: var(--gdr-ink); text-decoration: none; font-size: 0.625rem; letter-spacing: .18em; transition: color .25s ease, transform .25s ease; display: inline-block; }
.detail-footer-link a:hover { color: var(--gdr-red); transform: translateX(4px); }
.detail-not-found { padding: 15vh 0; }
.detail-not-found h1 { margin: 0 0 35px; font-size: clamp(3rem, 7vw, 6rem); font-weight: 200; letter-spacing: -.04em; }
.detail-not-found a { color: var(--gdr-ink); text-decoration: none; font-size: 0.625rem; letter-spacing: .18em; }
.detail-not-found a:hover { color: var(--gdr-red); }

@media (max-width: 991px) {
    .detail-layout { grid-template-columns: minmax(0, 1fr) 210px; gap: 60px; }
}
@media (max-width: 768px) {
    .detail-hero { min-height: 38vh; padding-bottom: 48px; }
    .detail-back { margin-bottom: 38px; }
    .detail-title { max-width: 100%; font-size: clamp(2.875rem, 12vw, 4.75rem); }
    .detail-layout { display: block; padding-top: 50px; }
    .detail-content { font-size: 1.0625rem; }
    .detail-lead { font-size: 1.25rem; margin-bottom: 42px; }
    .detail-sidebar { margin-top: 60px; }
}


.content-video{display:block;width:100%;max-width:100%;height:auto;margin:2rem 0;background:#111;}

.content-youtube{position:relative;width:100%;aspect-ratio:16/9;margin:2rem 0;overflow:hidden;background:#111}.content-youtube iframe{position:absolute;inset:0;width:100%;height:100%;border:0}