/* =========================================================================
   OTTOBIT — palette chiara "Atelier"
   Bianco, nero al 90% e avorio per i dettagli: le immagini restano protagoniste.
   Caricare per ULTIMO in ogni pagina: sovrascrive i colori dei vecchi fogli
   di stile senza toccarne il layout. Per cambiare tinta basta modificare
   le variabili qui sotto.
   ========================================================================= */
:root {
    --paper:  #ffffff;   /* fondo di tutte le pagine */
    --ink:    #1a1a1a;   /* testo, logo, linee forti (nero al 90%) */
    --ivory:  #f4f1ea;   /* dettagli: solo le card con il logo */
    --stone:  #6f6b64;   /* testo secondario, etichette */
    --line:   rgba(26, 26, 26, .14);   /* filetti sottili */

    /* icone social (PNG grigie) → nero al 90% */
    --icon-ink: brightness(0) opacity(.9);
}

html, body {
    background-color: var(--paper);
    color: var(--ink);
}

::selection { background: var(--ink); color: var(--paper); }

a { color: inherit; }

/* ---------- HOME: testi bianchi sopra i video ------------------------------ */
.page { color: #ffffff; background-color: var(--paper); }
.page .title,
.page .subtitle { color: #ffffff; }
.action-button { color: #ffffff; box-shadow: 0 0 0 1px #ffffff; }
.action-button:hover { box-shadow: 0 0 0 4px #ffffff; }
.page .footer, .page .footer p { color: rgba(255, 255, 255, .8); }

/* ---------- MENU DESKTOP -------------------------------------------------- */
.nav.dropdown.smaller {
    background-color: rgba(255, 255, 255, .96);
    border: 1px solid var(--line);
}
.menu li a { color: var(--stone); }
.menu li a:hover { color: var(--ink); }

/* ---------- MENU MOBILE --------------------------------------------------- */
.navbar,
.navbar.open { background-color: var(--paper); border-bottom: 1px solid var(--line); }
.bar,
.burger-menu.open .bar1,
.burger-menu.open .bar3 { background-color: var(--ink); }
.overlay-menu { background-color: var(--paper); }
.overlay-content ul li a { color: var(--ink); }
.overlay-content li a:hover { color: var(--stone); }
.burger-menu:focus-visible { outline-color: var(--ink); }

/* icone social */
.social-links-menu img,
.social-links img { filter: var(--icon-ink); }

/* ---------- INFO ---------------------------------------------------------- */
.page-info { background-color: var(--paper); }
.left-column, .right-column { color: var(--ink); }
.left-column { border-right-color: var(--line); border-bottom-color: var(--line); }
.page-info h1 { color: var(--ink); }
.page-info h2 { color: var(--ink); }
.page-info h2 strong { color: var(--stone); font-weight: 400; }
.page-info p { color: var(--stone); }
@media screen and (max-width: 1025px) {
    .left-column { border-bottom-color: var(--line); }
}

/* ---------- WORK (griglia) ------------------------------------------------ */
.footer { color: var(--stone); }
.card { background: var(--paper); }
.logo-card { background: var(--ivory); }            /* avorio solo per la card col logo */
.shade { background: rgba(20, 20, 20, .45); }
.shade h2 { color: #ffffff; }
.card:focus-visible { outline-color: var(--ink); }
.card.will-enter::after,
.grid.is-leaving .card::after { background: var(--paper); }
@media (hover: none) {
    .shade { background: linear-gradient(transparent 45%, rgba(20, 20, 20, .6)); }
}
#status { color: var(--stone); }

/* ---------- PROGETTO ------------------------------------------------------ */
.project-hero,
.project-hero.has-teaser { background: var(--paper); }
.project-info { background: rgba(255, 255, 255, .95); color: var(--ink); }
.project-hero.has-teaser .project-info { background: var(--paper); color: var(--ink); }
.project-info h1 { color: var(--ink); }
.project-meta dt { color: var(--stone); }
.project-meta dd, .description { color: var(--ink); }
.project-note { color: var(--stone); border-top-color: var(--line); }
.project-shot { background: var(--paper); }
.reveal::after { background: var(--paper); }
.project-bottom { color: var(--stone); }
.project-bottom a:hover { color: var(--ink); }
.demo-note { background: var(--paper); color: var(--ink); }
.project-logo-shot { background: var(--ivory); }
.has-film video,
.project-hero.has-teaser > .visual { background: var(--paper); }
@media (width < 1024px) {
    .project-hero { background: var(--paper); }
    .project-info { background: var(--paper); }
}

/* pulsante play dei filmati: bianco sopra il video */
.film-play { border-color: rgba(255, 255, 255, .9); background: rgba(20, 20, 20, .25); }
.film-play::before { background: #ffffff; }
.film-play:hover,
.film-play:focus-visible { background: rgba(20, 20, 20, .45); }
.film-play:focus-visible { outline-color: #ffffff; }