:root {
  --bg: #ffffff;
  --ink: #010101;
  --pad: clamp(16px, 3vw, 40px);
  --gap: clamp(16px, 2vw, 32px);
  --col: calc((100vw - 2 * var(--pad) - 2 * var(--gap)) / 3);
  --green: #03b171;
  --ease: cubic-bezier(.65, 0, .35, 1);
  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Impostati da main.js */
  --logo-h: 0px;    /* altezza iniziale del logo */
}

/* Secondo tema (switch): sfondo verde, testi sempre neri */
:root.dark {
  --bg: #03b171;
  --ink: #010101;
}

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

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}

/* Logo: fisso in alto a sinistra, largo il 70% di una colonna, si rimpicciolisce con lo scroll fino a 40px di altezza */
.logo {
  position: fixed;
  top: var(--pad);
  left: var(--pad);
  z-index: 10;
  display: block;
  width: calc(var(--col) * 0.7);
  height: auto;
  transform-origin: 0 0;
  will-change: transform;
}
/* Due versioni del logo: nera su sfondo bianco, bianca su sfondo nero */
.logo img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .5s var(--ease);
}
.logo__dark {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: contain;
  object-position: left top;
  opacity: 0;
}

/* Switch chiaro/scuro in alto a destra */
.switch {
  position: fixed;
  top: var(--pad);
  right: var(--pad);
  z-index: 10;
  width: 36px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: border-color .5s var(--ease);
}
.switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform .4s var(--ease), background-color .5s var(--ease);
}
.dark .switch__knob { transform: translateX(16px); }
.switch:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* Griglia a 3 colonne: il testo occupa le colonne 2 e 3 */
.page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gap);
  align-content: start;
  /* la prima schermata è tutta occupata: il footer grande resta sotto, nascosto */
  min-height: 100svh;
  padding: var(--pad);
}

.text {
  grid-column: 2 / span 2;
  max-width: calc(var(--col) * 1.7 + var(--gap)); /* colonna centrale + 70% della destra */
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.025em; /* -1px a 40px, si riduce in proporzione su schermi piccoli */
  margin-top: -0.18em; /* allinea la prima riga al bordo superiore del logo */
}

.text p { text-wrap: pretty; } /* righe più bilanciate, niente parole sole a fine paragrafo */
.text p + p { margin-top: 1.1em; } /* una riga vuota tra i paragrafi */
.text br.m { display: none; }       /* a capo prima di "Oggi" solo su telefono */

/* Email: verde al passaggio del mouse */
.mail:hover { color: var(--green); }
.dark .mail:hover { color: #fff; } /* sul verde: email bianca al passaggio del mouse */

/* Riga in basso: sempre attaccata al fondo dello schermo */
.bar {
  position: sticky;
  bottom: var(--pad);
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gap);
  padding: 0 var(--pad);
  font-size: 12px;
  line-height: 1.3;
}
.bar__left { grid-column: 1; text-align: left; }
.bar__right { grid-column: 3; justify-self: end; display: flex; gap: 18px; } /* lingua + Instagram */

/* Footer: compare solo scorrendo fino in fondo */
.footer {
  padding: 0 var(--pad) var(--pad);
  margin-top: 15px; /* 15px dalla riga sopra */
}

/* Nastro che scorre: frase + illustrazione, ripetute. Da bordo a bordo, senza margini */
.marquee { overflow-x: clip; overflow-y: visible; margin: 0 calc(-1 * var(--pad)); } /* taglia solo ai lati, non le discendenti (y, p) */
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -4px;          /* ricalcolato da main.js in proporzione alla larghezza */
  font-size: 10vw;               /* ricalcolato da main.js: la frase è larga quanto la pagina */
  animation: marquee var(--marquee-dur, 30s) linear infinite;
  will-change: transform;
}
.marquee__item { padding: 0 0.28em; }
.marquee__ill {
  flex: none;
  height: 0.95em;
  width: calc(0.95em * 759.7 / 508.0);
  fill: currentColor;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

a { color: inherit; text-decoration: none; }
.link { position: relative; }
.link::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.link:hover::after { transform: scaleX(1); }

/* Mobile: logo più grande, testo su tutta la larghezza sotto il logo */
@media (max-width: 720px) {
  .logo { width: 40vw; }
  /* A design studio / Instagram: più grandi su telefono, con fascia di sfondo sotto cui scorre il testo */
  .bar {
    font-size: 14px;
    bottom: 0;
    padding: 14px var(--pad) var(--pad);
    background: var(--bg);
    transition: background-color .5s var(--ease);
  }
  /* fascia dello stesso colore dello sfondo dietro logo e switch: il testo ci scorre sotto */
  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9;
    height: calc(var(--pad) * 2 + 40px);
    background: var(--bg);
    transition: background-color .5s var(--ease);
  }
  /* il testo sta al centro, a metà tra il logo e la riga A design studio / Instagram */
  .page {
    display: flex;
    flex-direction: column;
    justify-content: safe center; /* se il testo non entra, parte sotto il logo e la pagina scorre */
    padding-top: calc(var(--pad) + var(--logo-h) + 30px);
    padding-bottom: calc(var(--pad) + 14px * 1.3 + 30px);
  }
  .text {
    max-width: none;
    font-size: 30px;
    margin-top: 0;
  }
  .text br.m { display: inline; }
}