/* Carmen Palumbo — UI photobook, riferimento sixnfive.com
   Font unico: Neue Haas Unica (self-hosted, vedi assets/fonts/LEGGIMI.md;
   fallback Helvetica Neue). Tema dark (nero) di default + light, con switch. */

@font-face {
    font-family: 'Neue Haas Unica';
    src: url('../fonts/NeueHaasUnica-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Unica';
    src: url('../fonts/NeueHaasUnica-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Unica';
    src: url('../fonts/NeueHaasUnica-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------- Temi: dark (default) e light ---------- */

:root {
    --gutter: 40px;
    --pad: 40px;
    --bg: #000;
    --fg: #fff;
    --muted: #999;
    --line: #444;
    --ph: #111;
    --ok: #5fd38d;
    --err: #ff7676;
}
html[data-theme="light"] {
    --bg: #fff;
    --fg: #000;
    --muted: #555;
    --line: #ccc;
    --ph: #f2f2f2;
    --ok: #0a7a3d;
    --err: #b00020;
}

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Neue Haas Unica', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background .4s ease, color .4s ease;
}

/* Il "serif" del riferimento diventa il corsivo dello stesso font */
.serif { font-style: italic; color: var(--muted); }

::selection { background: var(--fg); color: var(--bg); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

a { color: inherit; text-decoration: none; transition: opacity .25s ease; }
a:hover { opacity: .55; }
img, video { display: block; width: 100%; height: auto; background: var(--ph); }
button { transition: opacity .25s ease; }

/* ---------- Header ---------- */

.site-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--pad);
    gap: 20px;
    animation: fade-down .7s ease both;
}

.logo { display: flex; flex-direction: column; gap: 2px; }
.logo:hover { opacity: 1; }
.logo-name { font-size: 22px; font-weight: 500; letter-spacing: .02em; }
.logo-tagline { font-size: 16px; }

.site-nav { display: flex; gap: 28px; align-items: baseline; }
.site-nav a { font-size: 18px; }
.lang-switch { font-size: 14px; letter-spacing: .08em; border-bottom: 1px solid var(--fg); padding-bottom: 1px; }

.theme-toggle {
    background: none;
    border: none;
    color: var(--fg);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    align-self: center;
}
.theme-toggle:hover { opacity: .55; }

.hamburger { display: none; cursor: pointer; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--fg); margin: 5px 0; transition: transform .3s ease, opacity .3s ease; }
#nav-toggle:checked ~ .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-toggle:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
#nav-toggle:checked ~ .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Main ---------- */

.site-main { flex: 1; padding: 0 var(--pad) var(--pad); }

/* ---------- Animazioni di ingresso ---------- */

@keyframes fade-down {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* Elementi osservati da JS: entrano quando raggiungono il viewport */
.tile, .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.tile.in, .reveal.in { opacity: 1; transform: none; }
/* Senza JS tutto resta visibile */
html.no-js .tile, html.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .tile, .reveal { opacity: 1; transform: none; }
}

/* ---------- Griglia mosaico ---------- */

.masonry { position: relative; }
.masonry .tile { width: 100%; margin-bottom: 40px; }
.masonry[data-ready] .tile { position: absolute; margin-bottom: 0; }

.tile-link { display: block; }
.tile-link:hover { opacity: 1; }
.tile-media { display: block; overflow: hidden; }
.tile-media img, .tile-media video { transition: transform .8s ease, opacity .3s ease; }
.tile:hover .tile-media img, .tile:hover .tile-media video { transform: scale(1.04); }

.tile-caption { display: block; }
.tile-title { display: block; font-size: 20px; font-weight: 400; margin-top: 22px; line-height: 1.1; }
.tile-subtitle { display: block; font-size: 19px; margin-top: 4px; line-height: 1.1; }
figure.tile { margin-bottom: 40px; }

.empty-state { padding: 80px 0; font-size: 22px; }

/* ---------- Pagina progetto ---------- */

.project-header { max-width: 760px; margin: 20px 0 60px; }
.project-title { font-size: 34px; font-weight: 400; line-height: 1.05; }
.project-subtitle { font-size: 24px; margin-top: 8px; }
.project-description { margin-top: 28px; }
.project-description p { margin-bottom: 14px; }

.back-link { margin-top: 40px; font-size: 16px; }

/* ---------- Pagine statiche ---------- */

.static-page, .contact { max-width: 860px; margin: 20px 0 60px; }
.page-title { font-size: 34px; font-weight: 400; margin-bottom: 36px; }
.page-body { font-size: 21px; line-height: 1.45; }
.page-body p { margin-bottom: 18px; }

/* ---------- Contatti ---------- */

.contact-columns { display: flex; gap: 80px; align-items: flex-start; }
.contact-info { font-size: 20px; line-height: 1.4; min-width: 260px; }
.contact-info p { margin-bottom: 22px; }
.contact-info a { border-bottom: 1px solid var(--line); }

.contact-form { flex: 1; max-width: 480px; display: flex; flex-direction: column; gap: 18px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.contact-form input, .contact-form textarea {
    font: inherit;
    font-size: 17px;
    color: var(--fg);
    border: none;
    border-bottom: 1px solid var(--fg);
    padding: 8px 0;
    background: transparent;
    outline: none;
    resize: vertical;
    transition: border-color .25s ease;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--muted); }
.contact-form button {
    font: inherit;
    font-size: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--fg);
    color: var(--bg);
    border: none;
    padding: 14px 36px;
    cursor: pointer;
    align-self: flex-start;
}
.contact-form button:hover { opacity: .7; }
.hp { position: absolute; left: -9999px; top: -9999px; }
.flash { font-size: 16px; }
.flash-ok { color: var(--ok); }
.flash-err { color: var(--err); }

/* ---------- Footer ---------- */

.site-footer {
    display: flex;
    justify-content: space-between;
    padding: 30px var(--pad);
    font-size: 14px;
    color: var(--muted);
}
.footer-links a { margin-left: 18px; }

/* ---------- Responsive ---------- */

@media (max-width: 1300px) {
    :root { --gutter: 30px; --pad: 30px; }
    body { font-size: 16px; }
    .tile-title { font-size: 18px; }
    .tile-subtitle { font-size: 17px; }
}

@media (max-width: 820px) {
    :root { --pad: 20px; }
    body { font-size: 15px; }

    .site-header { flex-wrap: wrap; align-items: center; }
    .hamburger { display: block; }
    .site-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 14px;
        padding-top: 24px;
    }
    #nav-toggle:checked ~ .site-nav { display: flex; animation: fade-down .4s ease both; }

    /* Copertine full-bleed: nessun margine né bordo tra le immagini */
    .site-main { padding: 0; }
    .masonry .tile, figure.tile { margin-bottom: 0; }

    /* I testi delle altre sezioni riprendono il respiro laterale */
    .project-header, .back-link, .static-page, .contact, .empty-state {
        padding-left: var(--pad);
        padding-right: var(--pad);
    }

    /* Titoli al centro dell'immagine, visibili al primo tap
       (il tap opacizza l'immagine al 50%, il secondo tap apre il progetto) */
    .tile { position: relative; }
    .tile-caption {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 6px;
        padding: 0 16px;
        opacity: 0;
        transition: opacity .3s ease;
        pointer-events: none;
    }
    .tile-caption .tile-subtitle { color: var(--fg); }
    .tile-title, .tile-subtitle { margin-top: 0; }
    .tile.tapped .tile-caption { opacity: 1; }
    .tile.tapped .tile-media img,
    .tile.tapped .tile-media video { opacity: .5; transform: none; }
    .tile:hover .tile-media img, .tile:hover .tile-media video { transform: none; }

    .project-title, .page-title { font-size: 26px; }
    .project-header { margin-top: 10px; }
    .back-link { padding-bottom: 20px; }
    .contact-columns { flex-direction: column; gap: 40px; }
    .site-footer { flex-direction: column; gap: 10px; }
}