.mark[data-astro-cid-4pt2nqzy] {
  position: absolute;
  inset-block-start: clamp(1.5rem, 4dvh, 3rem);
  inset-inline-start: clamp(1.5rem, 5vw, 6rem);
  inline-size: clamp(72px, 7vw, 116px);
  z-index: 2;
  color: var(--fg);
  display: block;
  padding: .75rem;
  margin: -.75rem;
  min-block-size: 44px;
  border-radius: 2px;
  opacity: 0;
  animation: 1s cubic-bezier(.16, 1, .3, 1) 80ms forwards corsa;
}

.mark[data-astro-cid-4pt2nqzy] svg[data-astro-cid-4pt2nqzy] {
  display: block;
  inline-size: 100%;
  block-size: auto;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.mark--back[data-astro-cid-4pt2nqzy] svg[data-astro-cid-4pt2nqzy] {
  transform: scaleX(-1);
}

.mark[data-astro-cid-4pt2nqzy]:hover svg[data-astro-cid-4pt2nqzy], .mark[data-astro-cid-4pt2nqzy]:focus-visible svg[data-astro-cid-4pt2nqzy] {
  transform: translateX(.35em);
}

.mark--back[data-astro-cid-4pt2nqzy]:hover svg[data-astro-cid-4pt2nqzy], .mark--back[data-astro-cid-4pt2nqzy]:focus-visible svg[data-astro-cid-4pt2nqzy] {
  transform: scaleX(-1) translateX(.35em);
}

.mark[data-astro-cid-4pt2nqzy]:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}

@keyframes corsa {
  from {
    opacity: 0;
    transform: translateX(-1.4em);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .mark[data-astro-cid-4pt2nqzy] {
      animation: 1s cubic-bezier(.16, 1, .3, 1) 80ms forwards corsa, linear both mark-hold;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 38% 48%;
    }

    .mark--back[data-astro-cid-4pt2nqzy] {
      animation-name: corsa, mark-hold-back;
      animation-range: normal, 52% 62%;
    }
  }
}

@keyframes mark-hold {
  to {
    translate: 0 4dvh;
  }
}

@keyframes mark-hold-back {
  from {
    translate: 0 -6dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark[data-astro-cid-4pt2nqzy] {
    animation: none;
    opacity: 1;
  }
}
.hero[data-astro-cid-ge2uvauf] {
  position: relative;
  block-size: 100dvh;
  overflow: clip;
  isolation: isolate;
  background: var(--bg);
  --photo-scale: 1;
}

.hero[data-astro-cid-ge2uvauf] picture[data-astro-cid-ge2uvauf] {
  position: absolute;
  inset: 0;
}

.hero__photo[data-astro-cid-ge2uvauf] {
  display: block;
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  translate: -50%;
  block-size: calc(100% * var(--photo-scale));
  inline-size: auto;
  max-inline-size: none;
}

.hero__name[data-astro-cid-ge2uvauf] {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  inset-block-end: clamp(1rem, 5dvh, 4rem);
  margin: 0;
  text-align: center;
  font-family: var(--font-display, Archivo), var(--font-display-fallback, system-ui, sans-serif);
  font-weight: var(--font-display-weight, 900);
  font-size: min(15.8vw, 26vh);
  line-height: .9;
  letter-spacing: var(--font-display-tracking, -.03em);
  color: #f4f4f4;
  mix-blend-mode: difference;
  white-space: nowrap;
}

.hero__slot[data-astro-cid-ge2uvauf] {
  display: inline-block;
  overflow: hidden;
  padding-block: .34em .3em;
  margin-block: -.34em -.3em;
}

.hero__letter[data-astro-cid-ge2uvauf] {
  display: inline-block;
  font-variation-settings: "wght" var(--type-wght),
      "wdth" calc(var(--type-wdth) * var(--type-sprint));
}

@media (aspect-ratio <= 1) {
  .hero__name[data-astro-cid-ge2uvauf] {
    font-size: min(14.5vw, 12vh);
    inset-block-end: clamp(1rem, 4dvh, 3rem);
  }
}

.hero__letter[data-astro-cid-ge2uvauf] {
  opacity: 0;
}

.hero__photo[data-astro-cid-ge2uvauf] {
  animation: .9s cubic-bezier(.22, .61, .36, 1) both fade;
}

.is-ready .hero__letter[data-astro-cid-ge2uvauf] {
  animation: .9s cubic-bezier(.16, 1, .3, 1) forwards build;
  animation-delay: calc(.26s + var(--i) * 48ms);
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes build {
  from {
    opacity: 0;
    transform: translateY(140%);
    --type-wght: var(--font-display-wght-from, 400);
  }

  35% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translateY(0);
    --type-wght: var(--font-display-wght, 900);
  }
}

.is-ready .hero__name[data-astro-cid-ge2uvauf] {
  animation: 1.2s cubic-bezier(.16, 1, .3, 1) .26s both widen;
}

@keyframes widen {
  from {
    --type-wdth: var(--font-display-wdth-from, 62);
  }

  to {
    --type-wdth: var(--font-display-wdth, 125);
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .is-ready .hero__name[data-astro-cid-ge2uvauf] {
      animation: 1.2s cubic-bezier(.16, 1, .3, 1) .26s both widen, cubic-bezier(.55, 0, .9, .35) both sprint;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 18% 38%;
    }
  }
}

@keyframes sprint {
  from {
    --type-sprint: 1;
    opacity: 1;
  }

  55% {
    opacity: 1;
  }

  to {
    --type-sprint: .5;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__photo[data-astro-cid-ge2uvauf], .is-ready .hero__name[data-astro-cid-ge2uvauf], .is-ready .hero__letter[data-astro-cid-ge2uvauf] {
    animation: none;
    opacity: 1;
  }
}
.chair[data-astro-cid-3z7zmv55] {
  position: relative;
  min-height: 100dvh;
  background: var(--bg);
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 1fr);
  align-items: end;
  overflow: clip;
}

.chair__fig[data-astro-cid-3z7zmv55] {
  grid-row: 1;
  grid-column: 1;
  margin: 0;
  block-size: 100dvh;
  display: grid;
  align-items: end;
  justify-items: center;
}

.chair__photo[data-astro-cid-3z7zmv55] {
  display: block;
  inline-size: min(100%, 1024px);
  block-size: 100dvh;
  object-fit: cover;
  object-position: center bottom;
}

.chair__col[data-astro-cid-3z7zmv55] {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  container-type: inline-size;
  padding-inline: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 5vw, 6rem);
}

.chair__claim[data-astro-cid-3z7zmv55] {
  margin: 0;
  font-family: var(--font-display, Archivo), var(--font-display-fallback, system-ui, sans-serif);
  font-weight: var(--font-display-weight, 900);
  font-variation-settings: var(--font-display-var, "wght" 900, "wdth" 125);
  font-size: min(29cqw, 22vh);
  line-height: .88;
  letter-spacing: var(--font-display-tracking, -.03em);
  color: var(--fg);
  display: grid;
}

.chair__line[data-astro-cid-3z7zmv55] {
  white-space: nowrap;
}

.chair__fig[data-astro-cid-3z7zmv55] {
  container-type: size;
}

@container (aspect-ratio >= 5 / 4) {
  .chair__photo[data-astro-cid-3z7zmv55] {
    object-fit: contain;
  }
}

@media (aspect-ratio <= 1) {
  .chair[data-astro-cid-3z7zmv55] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
  }

  .chair__fig[data-astro-cid-3z7zmv55] {
    grid-column: 1;
    grid-row: 1 / -1;
    block-size: 100dvh;
  }

  .chair__photo[data-astro-cid-3z7zmv55] {
    inline-size: 100%;
    block-size: 100dvh;
    object-fit: cover;
    object-position: center bottom;
  }

  .chair__col[data-astro-cid-3z7zmv55] {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    container-type: normal;
    padding-inline: clamp(1rem, 5vw, 2rem);
    padding-block-start: 10dvh;
  }

  .chair__claim[data-astro-cid-3z7zmv55] {
    font-size: min(22vw, 11vh);
  }
}
@font-face {
        font-family: Archivo;
        /* Un solo file variabile con i due assi (peso e larghezza), subset
           latino, 90 KB: il peso si anima all'ingresso e la larghezza 125 è
           la voce del sito. */
        src: url('/fonts/archivo-var.woff2') format('woff2-variations');
        font-weight: 100 900;
        font-stretch: 62% 125%;
        font-style: normal;
        font-display: swap;
      }

      /* Il ripiego mentre Archivo non c'è — o non arriva mai. Senza, il nome
         cadeva su un sans di sistema a peso 400, e alla comparsa di Archivo
         saltava di larghezza sotto gli occhi: esattamente quello che il
         timeout di 2 s qui sotto vorrebbe evitare. Archivo 900/125 rende
         «whipppet» a 1319,7 px dove Arial in grassetto lo rende a 949:
         `size-adjust: 139%` pareggia le due larghezze, quindi il ripiego
         occupa lo stesso spazio e lo scambio non muove niente.
         Liberation Sans è la metrica di Arial su Linux, Roboto il ripiego di
         Android. */
      @font-face {
        font-family: 'Archivo ripiego';
        src:
          local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'),
          local('Roboto Bold'), local('Arial'), local('Helvetica'), local('Liberation Sans'),
          local('Roboto');
        /* Senza questo la faccia vale 400 e il browser sceglie Arial
           regolare anche dove il testo è a 900: misurato, 1038 px contro i
           1320 di Archivo. Dichiarata l'intera scala, il grassetto entra. */
        font-weight: 100 900;
        size-adjust: 139%;
        /* `size-adjust` pareggia la larghezza ma ingrandisce tutto, comprese
           le discendenti: senza queste due, le tre p del ripiego uscivano
           dal bordo basso della hero (misurato: inchiostro a y=899 su una
           finestra alta 900, contro y=845 con Archivo).
           I valori non sono le metriche di Arial: sono quelli che, con
           `line-height: .9`, fanno cadere la baseline del ripiego esattamente
           dove cade quella di Archivo — 0,69em sotto il bordo alto della riga.
           Ricavati da 0,45 + (ascent − descent) / 2 = 0,69. */
        ascent-override: 63%;
        descent-override: 28.5%;
        line-gap-override: 0%;
      }

      :root {
        /* #fefefe e non #fff: è il bianco misurato del fondo delle foto.
           Con #fff la foto disegnava il proprio rettangolo sulla pagina —
           un livello di differenza, ma abbastanza da sembrare incollata. */
        --bg: #fefefe;
        --fg: #0a0a0a;
        /* Il carattere di tutto il testo in pagina: Archivo 900, larghezza
           125. Scelto da Davide su sette provini a schermo il 2026-08-28. */
        --font-display: Archivo;
        --font-display-fallback: 'Archivo ripiego', system-ui, sans-serif;
        /* Il peso dichiarato, non solo chiesto all'asse variabile:
           `font-variation-settings` non tocca il font di ripiego, che senza
           questo restava a 400. */
        --font-display-weight: 900;
        --font-display-var: 'wght' 900, 'wdth' 125;
        --font-display-tracking: -0.03em;
        /* I due assi di Archivo come numeri, non come stringa: gli estremi
           della voce del sito (900/125) e quelli da cui il nome arriva.
           62 è il fondo dell'asse di larghezza dichiarato nel @font-face. */
        --font-display-wght: 900;
        --font-display-wdth: 125;
        --font-display-wght-from: 400;
        --font-display-wdth-from: 62;
        color-scheme: light;
      }

      /* `font-variation-settings` non si interpola: fra due stringhe il
         browser salta. Registrate come numeri, le due variabili si animano
         invece con continuità, e il nome può ingrossarsi e allargarsi invece
         di comparire. `--type-sprint` è ereditata perché la corsa allo scroll
         la comanda il nome intero, non la singola lettera. */
      @property --type-wght {
        syntax: '<number>';
        inherits: false;
        initial-value: 900;
      }
      /* Ereditata: la larghezza è della parola, non della lettera. Sfalsata
         per lettera faceva slittare di lato quelle già posate, perché ogni
         glifo che si allarga sposta il centro di tutti gli altri. */
      @property --type-wdth {
        syntax: '<number>';
        inherits: true;
        initial-value: 125;
      }
      @property --type-sprint {
        syntax: '<number>';
        inherits: true;
        initial-value: 1;
      }

      @supports (animation-timeline: scroll()) {
        @media (prefers-reduced-motion: no-preference) {
          .scenes {
            block-size: 200dvh;
          }
          .scenes > .hero,
          .scenes > .chair {
            position: sticky;
            inset-block-start: 0;
            block-size: 100dvh;
            animation: linear both;
            animation-timeline: scroll(root);
          }
          /* La dissolvenza sta in un quarto di corsa, in mezzo, e ai due lati
             ogni scena è ferma e piena. Senza `animation-range` durava tutto
             lo scroll: l'80 % della corsa mostrava le due scene sovrapposte —
             due cani, due marchi, e i due testi intrecciati sugli stessi
             pixel a metà contrasto.
             I due tratti non si toccano: fra il 48 % e il 52 % nessuna delle
             due scene è in pagina e si vede la carta. Non è un buco — è il
             colore del sito, ed è l'unico modo di non avere mai due cani a
             schermo insieme (il claim finiva sul muso della hero, e i due
             marchi sommati davano una figura simmetrica a due musi e due
             code invece di un cane che si volta).
             Attenzione a non sovrapporli *parzialmente*: con i tratti
             sfasati ma incrociati le due opacità non sommano a 1 e a metà le
             scene sbiadiscono insieme, lasciando una schiarita sporca al
             posto dello scambio (provato: 0,14 e 0,14). O si toccano, o si
             lasciano il vuoto in mezzo. */
          .scenes > .hero {
            animation-name: scene-out;
            animation-range: 38% 48%;
          }
          .scenes > .chair {
            margin-block-start: -100dvh;
            animation-name: scene-in;
            animation-range: 52% 62%;
          }
        }
      }

      /* Lo z-index nelle keyframes passa il fronte alla scena visibile a
         metà corsa: senza, la poltrona — sopra nel DOM, e invisibile —
         intercettava ogni clic sulla hero, marchio compreso.
         La `visibility` fa per la tastiera quello che lo z-index fa per il
         clic: senza, il secondo Tab a pagina ferma cadeva sul marchio della
         poltrona, invisibile a opacità 0, e l'anello di fuoco spariva. Sta
         al 99 % e all'1 % perché i valori discreti scattano a metà del loro
         intervallo: così la scena resta visibile per tutta la dissolvenza e
         si spegne solo dopo. */
      @keyframes scene-out {
        from { z-index: 1; visibility: visible; }
        99% { visibility: visible; }
        to { opacity: 0; translate: 0 -4dvh; z-index: 0; visibility: hidden; }
      }
      @keyframes scene-in {
        from { opacity: 0; translate: 0 6dvh; z-index: 0; visibility: hidden; }
        1% { visibility: visible; }
        to { opacity: 1; translate: 0 0; z-index: 1; visibility: visible; }
      }

      * {
        box-sizing: border-box;
      }

      /* Anche il salto all'ancora rispetta chi ha chiesto di non muovere
         niente: fuori dalla guardia lo scorrimento restava animato mentre lo
         script qui sopra si era già tirato indietro. */
      @media (prefers-reduced-motion: no-preference) {
        html {
          scroll-behavior: smooth;
        }
      }

      html,
      body {
        margin: 0;
        background: var(--bg);
        color: var(--fg);
        font-family: var(--font-display), var(--font-display-fallback);
      }

      /* La selezione è l'unica superficie che il browser disegna al posto
         nostro, e di default la disegna blu: qui prende i due colori della
         pagina, invertiti. */
      ::selection {
        background: var(--fg);
        color: var(--bg);
      }