/* =========================================================================
   OTTOBIT — tipografia
   Un solo carattere "grotesk" pulito, pesi leggeri, molto respiro.
   Caratteri ospitati sul sito (niente Google Fonts): più veloci e senza
   passare dati a terzi. Licenza SIL Open Font License.

   Carattere scelto: Hanken Grotesk (300 · 400 · 500).
   ========================================================================= */
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-grotesk-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
    --font: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html, body,
.page, .subtitle, .action-button, .menu li a, .overlay-content ul li a,
.page-info h1, .page-info h2, .page-info p,
.shade h2, .project-info, .project-info h1, .description, .project-bottom, .footer {
    font-family: var(--font);
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- HOME: titolo grande leggero, sottotitolo spaziato ------------- */
.page .title {
    font-weight: 300;
    letter-spacing: .01em;
    line-height: 1;
}
.page .subtitle {
    font-weight: 400;
    letter-spacing: .22em;
    margin-top: 1.2em;
}
@media screen and (min-width: 1026px) { .page .subtitle { font-size: .4em; } }
.action-button {
    font-weight: 500;
    letter-spacing: .24em;
}

/* ---------- MENU ---------------------------------------------------------- */
.menu li a { font-weight: 400; font-size: .92em; letter-spacing: .04em; }
.menu li a:hover { scale: 1; font-weight: 400; }
.overlay-content ul li a { font-weight: 300; letter-spacing: .12em; }

/* ---------- INFO ---------------------------------------------------------- */
.page-info h1 { font-weight: 500; font-size: .8em; letter-spacing: .22em; text-transform: uppercase; }
.page-info h2 { font-weight: 300; line-height: 1.35; letter-spacing: -.005em; }
.page-info h2 strong { font-weight: 400; }

/* ---------- WORK ---------------------------------------------------------- */
.shade h2 { font-weight: 400; letter-spacing: .16em; }

/* ---------- PROGETTO ------------------------------------------------------ */
.project-info h1 { font-weight: 500; letter-spacing: .02em; }
.project-meta dt { letter-spacing: .16em; }
.description { font-weight: 300; line-height: 1.7; }
.project-bottom { letter-spacing: .08em; }

@media screen and (max-width: 768px) {
    .page .subtitle { letter-spacing: .14em; }
}