/*
 * Alessio Davì — sistema visivo
 *
 * Un solo accento: il blu del logo AD (#1D87EC), sempre come fondo pieno con testo
 * inchiostro sopra (4,75:1), mai come testo piccolo su carta. Per i link si usa
 * una variante più scura. Il carattere Anybody lavora sull'asse della larghezza:
 * stretto nei titoli di sezione, normale nell'interfaccia, largo nel nome in apertura.
 * Source Serif 4 porta i testi da leggere.
 */

@layer reset, tokens, base, layout, components, sections, pages, utilities;

/* ---------- Font ---------- */

@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody-normal-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/sourceserif4-normal-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/sourceserif4-italic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Reset ---------- */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  [hidden] { display: none !important; }
}

/* ---------- Token ---------- */

@layer tokens {
  :root {
    /* primitive */
    --blue-500: #1D87EC;   /* blu del logo */
    --blue-400: #45A0F0;
    --blue-700: #0B63C4;
    --blue-300: #5AAAF5;

    /* ruoli, tema chiaro */
    --bg: #EEF1F4;
    --surface: #E3E8EE;
    --ink: #0D1B2A;
    --muted: #4A5868;
    --rule: #C5CED8;
    --field-border: #6B7A8C;
    --accent: var(--blue-500);
    --accent-hover: var(--blue-400);
    --on-accent: #0D1B2A;
    --link: var(--blue-700);
    --focus: var(--blue-700);
    --danger: #B3261E;
    --grid-line: rgb(13 27 42 / 0.06);

    /* tipografia */
    --font-display: "Anybody", "Arial Narrow", Arial, sans-serif;
    --font-text: "Source Serif 4", Georgia, "Times New Roman", serif;

    --fs-caption: 0.8125rem;
    --fs-ui: 0.9375rem;
    --fs-body: 1.0625rem;
    --fs-read: 1.1875rem;
    --fs-lead: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
    --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    --fs-section: clamp(3.25rem, 1.5rem + 8vw, 9rem);

    /* spazi */
    --gutter: clamp(1.125rem, 4vw, 3.5rem);
    --max: 90rem;
    --space-section: clamp(5rem, 3rem + 8vw, 10rem);
    --header-h: 4.25rem;

    --radius: 4px;
    --radius-media: 8px;

    --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);

    --z-header: 50;
    --z-skip: 100;

    color-scheme: light;
  }

  :root[data-theme="dark"] {
    --bg: #0A1420;
    --surface: #111E2D;
    --ink: #E6ECF2;
    --muted: #9AA8B8;
    --rule: #22324A;
    --field-border: #7C8DA2;
    --on-accent: #04101C;
    --link: var(--blue-300);
    --focus: var(--blue-300);
    --danger: #FF8A80;
    --grid-line: rgb(230 236 242 / 0.05);
    color-scheme: dark;
  }

  /* Senza JavaScript vale la preferenza di sistema. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --bg: #0A1420;
      --surface: #111E2D;
      --ink: #E6ECF2;
      --muted: #9AA8B8;
      --rule: #22324A;
      --field-border: #7C8DA2;
      --on-accent: #04101C;
      --link: var(--blue-300);
      --focus: var(--blue-300);
      --danger: #FF8A80;
      --grid-line: rgb(230 236 242 / 0.05);
      color-scheme: dark;
    }
  }
}

/* ---------- Base ---------- */

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-padding-block-start: calc(var(--header-h) + 1rem);
  }

  /* Movimento: con JavaScript decide data-motion (scelta dell'utente), senza decide il sistema. */
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion]) { scroll-behavior: smooth; }
  }
  html[data-motion="on"] { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: 1.6;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  main { flex: 1; }
  main:focus { outline: none; }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.15;
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  a {
    color: var(--link);
    text-underline-offset: 0.18em;
    text-decoration-thickness: from-font;
  }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
  }

  ::selection { background: var(--accent); color: var(--on-accent); }

  strong { font-weight: 650; }
}

/* ---------- Layout ---------- */

@layer layout {
  .section {
    padding: var(--space-section) max(var(--gutter), (100% - var(--max)) / 2);
  }

  .section-head {
    display: grid;
    gap: 1.25rem 2rem;
    margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
  }

  @media (min-width: 60rem) {
    .section-head {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      align-items: end;
    }
    .section-head .section-title { grid-column: 1 / 8; }
    .section-head .section-lede { grid-column: 8 / -1; padding-block-end: 0.6em; }
  }
}

/* ---------- Componenti ---------- */

@layer components {
  .skip-link {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: var(--z-skip);
    padding: 0.75rem 1rem;
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font-display);
    font-weight: 600;
    border-radius: var(--radius);
  }
  .skip-link:not(:focus) {
    clip-path: inset(50%);
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    padding: 0;
  }

  /* Titoli di sezione: stretti e pesanti, l'altro capo dell'asse rispetto al nome. */
  .section-title {
    font-size: var(--fs-section);
    font-weight: 800;
    font-stretch: 62%;
    line-height: 0.88;
    letter-spacing: -0.02em;
  }

  .section-lede {
    font-size: var(--fs-read);
    color: var(--muted);
    max-width: 38ch;
  }

  .minor-title {
    font-size: var(--fs-ui);
    font-weight: 600;
    color: var(--muted);
    margin-block-end: 1.25rem;
  }

  .prose { max-width: 62ch; }
  .prose p + p { margin-block-start: 1em; }
  .prose p { font-size: var(--fs-read); line-height: 1.62; }
  .prose--large p { font-size: var(--fs-lead); line-height: 1.5; }

  /* Pulsanti */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0 1.375rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
  }
  .button--primary { background: var(--accent); color: var(--on-accent); }
  .button--primary:hover { background: var(--accent-hover); }
  .button--quiet { border-color: var(--ink); color: var(--ink); }
  .button--quiet:hover { background: var(--ink); color: var(--bg); }
  .button--ink { background: var(--on-accent); color: var(--accent); }
  .button--ink:hover { background: var(--bg); color: var(--ink); }
  .button[aria-busy="true"] { cursor: progress; opacity: 0.7; }

  .text-link {
    font-family: var(--font-display);
    font-weight: 650;
    font-size: 1rem;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
  }
  .text-link:hover { color: var(--link); }

  /* Etichette */
  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .tags li {
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    font-weight: 500;
    line-height: 1.2;
    padding: 0.3125rem 0.5rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
    color: var(--muted);
    white-space: nowrap;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
  }
  .badge::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
  }
  .badge--live::before { background: var(--accent); border-color: var(--accent); }

  .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 500;
    color: var(--muted);
  }

  /* Copertine SVG: colori dal tema */
  .cover { inline-size: 100%; block-size: 100%; }
  .shot { inline-size: 100%; block-size: auto; }

  .cover .c-bg { fill: var(--surface); }
  .cover .c-tile { fill: none; stroke: var(--rule); stroke-width: 2; }
  .cover .c-accent { fill: var(--accent); }
  .cover .c-accent-stroke { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
  .cover .c-on-accent { fill: var(--on-accent); }
  .cover .c-on-accent-fill { fill: var(--on-accent); opacity: 0.85; }
  .cover .c-muted { fill: var(--muted); opacity: 0.35; }
  .cover .c-line { fill: none; stroke: var(--muted); stroke-width: 2; opacity: 0.5; }
  .cover .c-ink { fill: #0D1B2A; }
  .cover .c-ink-fill { fill: var(--ink); }
  .cover .c-dim { fill: #2A3B52; }
  .cover .c-paper { fill: #E6ECF2; }
  .cover .c-ink-line { fill: none; stroke: #E6ECF2; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
  .cover .c-line-box { fill: none; stroke: var(--muted); stroke-width: 2; opacity: 0.55; }
  .cover .c-bg-dot { fill: var(--surface); stroke: var(--muted); stroke-width: 3; }
  .cover .c-wave { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; }
  .cover-text { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; }
  .cover-mono { font-family: var(--font-display); font-weight: 700; }
  :root[data-theme="dark"] .cover .c-ink { fill: #050B13; }

  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ---------- Intestazione e navigazione ---------- */

@layer components {
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    gap: 1rem;
    min-block-size: var(--header-h);
    padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
    padding-block: 0.5rem;
    background: var(--bg);
    border-block-end: 1px solid transparent;
    transition: border-color 200ms ease-out;
  }
  .site-header[data-scrolled] { border-block-end-color: var(--rule); }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    margin-inline-end: auto;
  }
  .brand img { inline-size: 2rem; block-size: 2rem; }

  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.5rem;
  }

  .site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-block-size: 2.75rem;
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-position: 0 calc(100% - 0.55rem);
    background-size: 0 2px;
    transition: color 160ms ease-out, background-size 220ms var(--ease-out);
  }
  .site-nav__link:hover { color: var(--ink); }
  .site-nav__link[aria-current] { color: var(--ink); background-size: 100% 2px; }

  .site-nav__link--client {
    min-block-size: 2.5rem;
    padding-inline: 0.875rem;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    color: var(--ink);
    background-image: none;
  }
  .site-nav__link--client:hover { background: var(--ink); color: var(--bg); }

  .theme-toggle,
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    color: var(--ink);
    border-radius: var(--radius);
  }
  .theme-toggle:hover { color: var(--link); }

  /* Selettore di lingua: la sigla dell'altra lingua, nello stesso spazio del pulsante del tema. */
  .lang-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--radius);
  }
  .lang-switch:hover { color: var(--link); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
  .theme-toggle svg { transition: transform 400ms var(--ease-out); }
  :root[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); }

  /* Interruttore della modalità recruiter */
  .mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding-inline: 0.25rem;
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
  }
  .mode-toggle__switch {
    position: relative;
    inline-size: 2.125rem;
    block-size: 1.25rem;
    border-radius: 999px;
    border: 1.5px solid var(--field-border);
    transition: background-color 200ms ease-out, border-color 200ms ease-out;
  }
  .mode-toggle__switch::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.1875rem;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: 50%;
    background: var(--ink);
    transform: translateY(-50%);
    transition: transform 220ms var(--ease-out);
  }
  .mode-toggle[aria-pressed="true"] .mode-toggle__switch { background: var(--accent); border-color: var(--accent); }
  .mode-toggle[aria-pressed="true"] .mode-toggle__switch::after { background: var(--on-accent); transform: translate(0.875rem, -50%); }
  .mode-toggle:hover .mode-toggle__switch { border-color: var(--ink); }
  .mode-toggle__short { display: none; }
  @media (max-width: 40rem) { .mode-toggle__long { display: none; } .mode-toggle__short { display: inline; } }
  .brand { flex: none; }
  @media (max-width: 30rem) {
    .site-header { gap: 0.625rem; }
    .menu-toggle { gap: 0.5rem; }
  }
  /* Sotto i 380px resta solo l'interruttore: l'etichetta è nascosta alla vista ma non ai lettori di schermo. */
  @media (max-width: 23.74rem) {
    .mode-toggle__short {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }
  html:not(.js) .mode-toggle { display: none; }

  .menu-toggle { display: none; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-ui); }
  .menu-toggle__icon { display: grid; gap: 5px; inline-size: 1.25rem; }
  .menu-toggle__icon span { block-size: 2px; background: currentColor; transition: transform 220ms var(--ease-out); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

  /* Sotto i 72rem la navigazione diventa un pannello a tutto schermo (solo con JS). */
  @media (max-width: 71.99rem) {
    .js .menu-toggle { display: inline-flex; }
    .js .site-nav {
      position: fixed;
      inset: var(--header-h) 0 0 0;
      background: var(--bg);
      padding: 1.5rem var(--gutter) max(2rem, env(safe-area-inset-bottom));
      overflow-y: auto;
      overscroll-behavior: contain;
      visibility: hidden;
      opacity: 0;
      transform: translateY(-0.75rem);
      transition: opacity 200ms ease-out, transform 260ms var(--ease-out), visibility 0s linear 260ms;
    }
    .js .site-header[data-open] .site-nav {
      visibility: visible;
      opacity: 1;
      transform: none;
      transition: opacity 200ms ease-out, transform 260ms var(--ease-out), visibility 0s;
    }
    .js .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .js .site-nav__list > li { border-block-end: 1px solid var(--rule); }
    .js .site-nav__link {
      inline-size: 100%;
      min-block-size: 3.75rem;
      font-size: clamp(2rem, 9vw, 3.25rem);
      font-weight: 750;
      font-stretch: 68%;
      color: var(--ink);
      background: none;
    }
    .js .site-nav__link[aria-current] { color: var(--link); }
    .js .site-nav__client { border: 0 !important; margin-block-start: 2rem; }
    .js .site-nav__link--client {
      justify-content: space-between;
      min-block-size: 3.5rem;
      font-size: 1.25rem;
      font-stretch: 100%;
      padding-inline: 1rem;
      border: 1.5px solid var(--ink);
    }
    .js .site-header[data-open] { border-block-end-color: var(--rule); }
  }

  @media (max-width: 29.99rem) {
    .brand__name { display: none; }
  }
}

/* ---------- Sezioni della home ---------- */

@layer sections {
  /* Apertura: il nome occupa la pagina, l'introduzione si appoggia accanto a "Davì". */
  .hero {
    --name-size: clamp(4rem, 22.5vw, 25rem);
    position: relative;
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 2rem);
    align-content: start;
    padding: clamp(1rem, 3vw, 2.5rem) max(var(--gutter), (100% - var(--max)) / 2) 0;
    isolation: isolate;
  }

  /* La griglia del logo, ingrandita: sono le stesse 12 colonne su cui è composta la pagina. */
  .hero::before {
    --cell: calc((100cqi - 2 * max(var(--gutter), (100cqi - var(--max)) / 2)) / 12);
    content: "";
    position: absolute;
    inset: 0 max(var(--gutter), (100% - var(--max)) / 2);
    z-index: -1;
    background-image:
      linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: var(--cell) var(--cell);
    border-inline-end: 1px solid var(--grid-line);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 95%);
  }

  .hero__name {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: var(--name-size);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.04em;
    margin-inline-start: -0.04em;
    text-wrap: nowrap;
  }

  .hero__line { display: block; white-space: nowrap; }
  .hero__line--last { margin-block-start: 0.04em; }

  .ch {
    display: inline-block;
    font-stretch: 100%;
  }

  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion]) .ch { animation: unfold 1100ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 55ms + 80ms); }
  }
  html[data-motion="on"] .ch { animation: unfold 1100ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 55ms + 80ms); }

  @keyframes unfold {
    from { font-stretch: 50%; opacity: 0; }
    40% { opacity: 1; }
  }

  .hero__intro {
    grid-column: 1 / -1;
    margin-block-start: 2rem;
    max-inline-size: 34rem;
  }

  .hero__lede {
    font-size: var(--fs-lead);
    line-height: 1.42;
  }

  .hero__note {
    margin-block-start: 0.75rem;
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 500;
    color: var(--muted);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 1.75rem;
  }

  .hero__areas {
    grid-column: 1 / -1;
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    border-block-start: 1.5px solid var(--ink);
  }
  .hero__areas ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero__areas li {
    padding: 0.875rem 1rem 1.125rem 0;
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 600;
    line-height: 1.3;
  }

  @media (min-width: 48rem) {
    .hero__areas ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hero__areas li { font-size: 1.0625rem; }
    .hero__areas li + li { padding-inline-start: 1rem; border-inline-start: 1px solid var(--rule); }
  }

  @media (min-width: 60rem) {
    .hero { --name-size: clamp(5rem, 23.6vw, 21rem); align-content: space-between; min-block-size: calc(100dvh - var(--header-h)); }
    /* l'introduzione occupa lo spazio a destra della seconda riga del nome */
    .hero__intro {
      grid-row: 1;
      grid-column: 8 / -1;
      /* parte sempre dall'altezza della seconda riga del nome, anche se il testo è più alto di quella riga */
      align-self: start;
      margin: calc(var(--name-size) * 0.84 + 0.75rem) 0 0;
      max-inline-size: 36rem;
    }
  }

  @media (min-width: 60rem) and (max-height: 50rem) {
    .hero { --name-size: clamp(5rem, 19vw, 17rem); }
    .hero__intro { grid-column: 7 / -1; }
  }

  /* Chi sono */
  .about {
    display: grid;
    gap: 2.5rem clamp(1rem, 2vw, 2rem);
  }
  .about__photo {
    margin-block-start: 2rem;
    max-inline-size: 26rem;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-media);
    background: var(--surface);
  }
  .about__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 32%; }

  .about__statement {
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
    line-height: 1.18;
    letter-spacing: -0.012em;
    text-wrap: balance;
    max-inline-size: 24ch;
    margin-block-end: 2.5rem;
  }


  @media (min-width: 60rem) {
    .about { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .about__aside {
      grid-column: 1 / 6;
      align-self: start;
      position: sticky;
      inset-block-start: calc(var(--header-h) + 2rem);
    }
    .about__photo { max-inline-size: 22rem; margin-block-start: 2.5rem; }
    .about__body { grid-column: 6 / -1; }
  }

  /* Percorso */
  .experience { border-block-start: 1px solid var(--rule); }

  .filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 2rem;
  }
  .filter__option {
    min-block-size: 2.5rem;
    padding: 0 0.875rem;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 550;
    transition: background-color 160ms ease-out, color 160ms ease-out;
  }
  .filter__option:hover { border-color: var(--ink); }
  .filter__option[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  .timeline {
    position: relative;
    border-block-start: 1.5px solid var(--ink);
  }
  /* La linea verticale che unisce le voci; si disegna scorrendo dove il browser lo consente. */
  .timeline::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0.3125rem;
    inline-size: 2px;
    background: var(--accent);
    transform-origin: top;
  }
  @supports (animation-timeline: view()) {
    html[data-motion="on"] .timeline::before {
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 55%;
    }
  }
  @keyframes draw { from { transform: scaleY(0); } }

  .timeline__more {
    display: inline-flex;
    align-items: center;
    min-block-size: 3rem;
    margin-block-start: 1.75rem;
    padding: 0 1.375rem;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 650;
    transition: background-color 160ms ease-out, color 160ms ease-out;
  }
  .timeline__more:hover { background: var(--ink); color: var(--bg); }

  .timeline__item {
    position: relative;
    display: grid;
    gap: 0.5rem 2rem;
    padding: 1.75rem 0 2rem 2rem;
    border-block-end: 1px solid var(--rule);
  }
  .timeline__item::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 2.1rem;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--accent);
  }
  .timeline__type {
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 600;
    color: var(--muted);
  }
  .timeline__role {
    font-size: var(--fs-h3);
    font-weight: 750;
    font-stretch: 85%;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
  .timeline__org { font-style: italic; color: var(--muted); margin-block-start: 0.25rem; }
  .timeline__text { max-inline-size: 58ch; margin-block-start: 0.875rem; }
  .timeline__body .tags { margin-block-start: 1rem; }
  .timeline__when {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  @media (min-width: 60rem) {
    .timeline__item {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      padding-inline-start: 0;
    }
    .timeline__item::before { inset-inline-start: 0; }
    .timeline__type { grid-column: 1 / 4; padding-inline-start: 2rem; padding-block-start: 0.5rem; }
    .timeline__body { grid-column: 4 / 10; }
    .timeline__when { grid-column: 10 / -1; justify-content: flex-end; align-self: start; padding-block-start: 0.5rem; }
  }

  /* Competenze */
  .skills { border-block-start: 1px solid var(--rule); }

  .skills__layout { display: grid; gap: 2.5rem clamp(1rem, 2vw, 2rem); }
  .skills__areas { display: grid; gap: 3rem 2.5rem; }

  .skill-area { border-block-start: 1.5px solid var(--ink); padding-block-start: 1rem; }
  .skill-area__title { font-size: 1.625rem; font-weight: 750; font-stretch: 80%; letter-spacing: -0.01em; }
  .skill-area__text { color: var(--muted); font-size: 1rem; margin-block: 0.375rem 1.25rem; max-inline-size: 40ch; }

  .tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .tool {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding: 0 0.875rem;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 550;
    color: var(--ink);
    text-align: start;
    transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
  }
  .tool:hover { border-color: var(--ink); }
  .tool[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .tool__count {
    font-size: var(--fs-caption);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    min-inline-size: 1.375rem;
    padding: 0.0625rem 0.3125rem;
    border-radius: 3px;
    background: var(--surface);
    color: var(--ink);
    text-align: center;
  }
  .tool[aria-pressed="true"] .tool__count { background: var(--on-accent); color: var(--accent); }

  .inspector {
    align-self: start;
    background: var(--surface);
    border-radius: var(--radius-media);
    padding: 1.5rem;
    min-block-size: 11rem;
  }
  .inspector__empty { color: var(--muted); font-family: var(--font-display); font-weight: 500; }
  .inspector__tool { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; font-stretch: 65%; line-height: 1; }
  .inspector__count { color: var(--muted); margin-block: 0.5rem 1rem; font-family: var(--font-display); font-size: var(--fs-ui); font-weight: 500; }
  .inspector__list li + li { border-block-start: 1px solid var(--rule); }
  .inspector__list a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.75rem;
    font-family: var(--font-display);
    font-weight: 650;
    font-size: 1.125rem;
    color: var(--ink);
    text-decoration: none;
  }
  .inspector__list a span { color: var(--muted); font-weight: 500; font-size: var(--fs-caption); align-self: center; text-align: end; }
  .inspector__list a:hover { color: var(--link); }

  @media (min-width: 48rem) {
    .skills__areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 64rem) {
    .skills__layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .skills__areas { grid-column: 1 / 9; }
    .inspector { grid-column: 9 / -1; position: sticky; inset-block-start: calc(var(--header-h) + 2rem); }
  }

  /* Progetti */
  .projects { border-block-start: 1px solid var(--rule); }

  .features { display: grid; gap: clamp(4rem, 8vw, 7rem); }

  .feature { display: grid; gap: 1.5rem clamp(1rem, 2vw, 2rem); align-items: end; }
  .feature__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-media);
    background: var(--surface);
  }
  .feature__media .cover, .feature__media .shot { transition: transform 700ms var(--ease-out); }
  .feature:hover .feature__media .cover, .feature:hover .feature__media .shot { transform: scale(1.025); }

  .feature__title {
    font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem);
    font-weight: 800;
    font-stretch: 72%;
    line-height: 0.92;
    letter-spacing: -0.02em;
    margin-block: 0.75rem 0.5rem;
  }
  .feature__title a { color: var(--ink); text-decoration: none; }
  .feature__title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
  .feature__client { font-style: italic; color: var(--muted); }
  .feature__summary { font-size: var(--fs-read); margin-block: 1rem 1.25rem; max-inline-size: 40ch; }
  .feature__text .text-link { display: inline-block; margin-block-start: 1.5rem; }

  @media (min-width: 60rem) {
    .feature { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .feature__media { grid-column: 1 / 8; grid-row: 1; }
    .feature__text { grid-column: 8 / -1; grid-row: 1; padding-block-end: 0.5rem; }
    .feature--flip .feature__media { grid-column: 6 / -1; }
    .feature--flip .feature__text { grid-column: 1 / 6; }
  }

  .projects__index-title { margin-block: clamp(4rem, 8vw, 7rem) 1rem; }

  .project-index { border-block-start: 1.5px solid var(--ink); }
  .project-index > li { border-block-end: 1px solid var(--rule); }

  .project-row {
    display: grid;
    gap: 0.5rem 2rem;
    padding-block: 1.5rem;
    color: var(--ink);
    text-decoration: none;
  }
  .project-row__name {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
    font-weight: 750;
    font-stretch: 78%;
    line-height: 1;
    letter-spacing: -0.015em;
    transition: transform 300ms var(--ease-out), color 160ms ease-out;
  }
  .project-row__summary { color: var(--muted); max-inline-size: 48ch; }
  .project-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 500;
    color: var(--muted);
  }
  .project-row:hover .project-row__name,
  .project-row:focus-visible .project-row__name { color: var(--link); }

  @media (min-width: 60rem) {
    .project-row { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; }
    .project-row__name { grid-column: 1 / 6; }
    .project-row__summary { grid-column: 6 / 10; }
    .project-row__meta { grid-column: 10 / -1; justify-content: flex-end; }
  }

  @media (hover: hover) and (pointer: fine) and (min-width: 60rem) {
    .project-row:hover .project-row__name { transform: translateX(0.75rem); }
  }

  /* Servizi: l'unica fascia piena di blu del sito */
  .services {
    background: var(--accent);
    color: var(--on-accent);
    --focus: var(--on-accent);
  }
  .services .section-lede { color: var(--on-accent); }
  .services__list { display: grid; gap: 0 3rem; }
  .service {
    border-block-start: 1.5px solid var(--on-accent);
    padding-block: 1.25rem 2.25rem;
  }
  .service__title { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); font-weight: 780; font-stretch: 80%; letter-spacing: -0.01em; line-height: 1.05; }
  .service__text { margin-block: 0.625rem 1rem; max-inline-size: 44ch; }
  .service__includes { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; }
  .service__includes li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 550;
  }
  .service__includes li::before { content: ""; inline-size: 0.375rem; block-size: 0.375rem; background: currentColor; }

  .services__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-block-start: 2rem;
    padding-block-start: 2rem;
    border-block-start: 1.5px solid var(--on-accent);
  }
  .services__cta p { font-size: var(--fs-read); max-inline-size: 48ch; }

  .services__legal { margin-block-start: 2.5rem; max-inline-size: 68ch; }
  .services__legal h3 { font-size: var(--fs-ui); font-weight: 700; margin-block-end: 0.375rem; }
  .services__legal p { font-size: 0.9375rem; line-height: 1.55; }

  @media (min-width: 56rem) {
    .services__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Contatti */
  .contact { display: grid; gap: 2.5rem clamp(1rem, 2vw, 2rem); }
  .contact__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
    font-weight: 750;
    font-stretch: 78%;
    line-height: 1;
    letter-spacing: -0.015em;
    text-wrap: balance;
    max-inline-size: 16ch;
  }
  .contact__text { color: var(--muted); font-size: var(--fs-read); margin-block: 1.25rem 2.5rem; max-inline-size: 44ch; }
  .contact__label { font-family: var(--font-display); font-size: var(--fs-ui); font-weight: 600; color: var(--muted); }
  .contact__email {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-block-start: 0.25rem;
  }
  .contact__email a {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
    font-weight: 650;
    color: var(--ink);
    text-decoration-color: var(--accent);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.22em;
    overflow-wrap: anywhere;
  }
  .contact__email a:hover { color: var(--link); }
  .copy {
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 600;
    color: var(--link);
    min-block-size: 2.75rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .contact__socials { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-block-start: 1.5rem; }
  .contact__socials a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
  }
  .contact__socials a:hover { color: var(--link); }
  .contact__socials a:hover span { text-decoration: underline; text-underline-offset: 0.2em; }

  @media (min-width: 60rem) {
    .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .contact .section-title { grid-column: 1 / -1; }
    .contact__intro { grid-column: 1 / 6; }
    .form { grid-column: 7 / -1; }
  }

  /* Modulo */
  .form { display: grid; gap: 1.5rem; align-content: start; }
  .form__row { display: grid; gap: 1.5rem; }
  @media (min-width: 40rem) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  .field { display: grid; gap: 0.5rem; }
  .field label {
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 600;
  }
  .field__optional { font-weight: 450; color: var(--muted); }
  .field input:not([type="checkbox"]),
  .field select,
  .field textarea {
    inline-size: 100%;
    min-block-size: 3rem;
    padding: 0.75rem 0.875rem;
    font-family: var(--font-display);
    font-size: 1rem;
    background: var(--bg);
    border: 1.5px solid var(--field-border);
    border-radius: var(--radius);
    transition: border-color 160ms ease-out;
  }
  .field textarea { resize: vertical; line-height: 1.5; min-block-size: 9rem; }
  .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-inline-end: 2.5rem; }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--focus); outline-offset: 1px; }
  .field [aria-invalid="true"] { border-color: var(--danger) !important; }
  .field__hint { font-size: 0.9375rem; color: var(--muted); }
  .field__error { font-family: var(--font-display); font-size: var(--fs-ui); font-weight: 550; color: var(--danger); }
  .field__error:empty { display: none; }

  .field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: 0.75rem; }
  .field--check input { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.15rem; accent-color: var(--accent); }
  .field--check label { font-family: var(--font-text); font-weight: 400; font-size: 1rem; line-height: 1.45; }
  .field--check .field__error { grid-column: 2; }

  .field--trap { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

  .form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
  .form__status { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
  .form__status.is-ok { color: var(--ink); }
  .form__status.is-ok::before { content: "✓ "; color: var(--link); }
  .form__status.is-error { color: var(--danger); }
}

/* ---------- Piè di pagina ---------- */

@layer components {
  /* Chiusura della pagina: una fascia scura compatta, in entrambi i temi. */
  .site-footer {
    --ink: #E6ECF2;
    --muted: #9AA8B8;
    --link: var(--blue-300);
    --focus: var(--blue-300);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    padding: 1.75rem max(var(--gutter), (100% - var(--max)) / 2) max(1.75rem, env(safe-area-inset-bottom));
    background: #0A1420;
    color: var(--ink);
  }
  :root[data-theme="dark"] .site-footer { background: #050B13; border-block-start: 1px solid var(--rule); }

  .site-footer a { color: var(--ink); text-decoration: none; }
  .site-footer a:hover { color: var(--link); }

  .site-footer__sign {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-display);
    font-weight: 700;
  }
  .site-footer__sign img { inline-size: 2rem; block-size: 2rem; }

  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin-inline-start: auto;
    list-style: none;
    padding: 0;
  }
  .site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 550;
    overflow-wrap: anywhere;
  }

  .site-footer__icons { display: flex; gap: 0.125rem; margin-inline: -0.75rem; }
  .site-footer .site-footer__social { justify-content: center; min-inline-size: 2.75rem; }
  .site-footer__social svg { inline-size: 1.25rem; block-size: 1.25rem; }

  .site-footer__prefs {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 550;
    color: var(--ink);
  }
  .site-footer__prefs:hover { color: var(--link); }
  html:not(.js) .site-footer__prefs { display: none; }

  .site-footer__legal {
    flex-basis: 100%;
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    color: var(--muted);
  }

  @media (max-width: 47.99rem) {
    .site-footer__links { margin-inline-start: 0; }
  }
}

/* ---------- Privacy: banner del consenso e preferenze ---------- */

@layer components {
  .consent {
    position: fixed;
    inset-inline: max(1rem, env(safe-area-inset-left));
    inset-block-end: max(1rem, env(safe-area-inset-bottom));
    z-index: var(--z-header);
    display: grid;
    gap: 1rem 2rem;
    max-inline-size: 46rem;
    margin-inline: auto;
    padding: 1.25rem 1.375rem;
    background: var(--bg);
    color: var(--ink);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-media);
    box-shadow: 0 1rem 2.5rem -1rem rgb(13 27 42 / 0.35);
  }
  .consent__cookie { inline-size: 3.5rem; block-size: 3.5rem; flex: none; }
  .consent__cookie-tile { fill: var(--accent); }
  .consent__cookie-grid { stroke: rgb(255 255 255 / 0.18); }
  .consent__cookie-chip { fill: var(--on-accent); }
  .consent__cookie-crumb { fill: var(--accent); }
  /* Al passaggio del mouse il biscotto dondola un attimo, solo con le animazioni attive. */
  html[data-motion="on"] .consent:hover .consent__cookie { animation: cookie-wobble 600ms var(--ease-out); }
  @keyframes cookie-wobble {
    30% { transform: rotate(-8deg); }
    60% { transform: rotate(5deg); }
  }
  .consent__title { font-size: 1.125rem; font-weight: 750; margin-block-end: 0.375rem; }
  .consent__text p { font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
  .consent__text a { color: var(--link); }
  .consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
  .consent__actions .button { min-block-size: 2.75rem; padding-inline: 1.125rem; }
  .consent__more {
    min-block-size: 2.75rem;
    padding-inline: 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .consent { grid-template-columns: auto 1fr; }
  .consent__cookie { grid-row: 1; inline-size: 3.5rem; block-size: 3.5rem; }
  .consent__actions { grid-column: 1 / -1; }
  @media (min-width: 48rem) {
    .consent { grid-template-columns: auto 1fr auto; align-items: center; }
    .consent__cookie { inline-size: 4.5rem; block-size: 4.5rem; }
    .consent__actions { grid-column: auto; }
    .consent__actions { flex-direction: column; align-items: stretch; }
  }

  .prefs {
    inline-size: min(34rem, calc(100% - 2rem));
    max-block-size: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-media);
  }
  .prefs::backdrop { background: rgb(5 11 19 / 0.55); }
  .prefs__form { display: grid; gap: 0; padding: 1.5rem; }
  .prefs__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 1rem; }
  .prefs__title { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 800; font-stretch: 65%; line-height: 1; }
  .prefs__close { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius); color: var(--ink); }
  .prefs__close:hover { background: var(--surface); }

  .prefs__group, .prefs__row { border: 0; border-block-start: 1px solid var(--rule); padding: 1rem 0; margin: 0; }
  .prefs__group legend, .prefs__label { font-family: var(--font-display); font-weight: 650; font-size: 1rem; }
  .prefs__group legend { float: left; inline-size: 100%; margin-block-end: 0.625rem; }
  .prefs__row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
  .prefs__hint { font-size: 0.9375rem; line-height: 1.45; color: var(--muted); margin-block-start: 0.25rem; }
  .prefs__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: var(--fs-ui);
  }
  .prefs__foot a { color: var(--link); }

  /* Selettore a segmenti per il tema */
  .segmented { display: flex; clear: both; border: 1.5px solid var(--field-border); border-radius: var(--radius); overflow: hidden; }
  .segmented label { flex: 1; position: relative; }
  .segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .segmented span {
    display: grid;
    place-items: center;
    min-block-size: 2.75rem;
    padding-inline: 0.5rem;
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
  }
  .segmented label + label span { border-inline-start: 1px solid var(--field-border); }
  .segmented input:checked + span { background: var(--accent); color: var(--on-accent); }
  .segmented input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -4px; }

  /* Interruttore: un checkbox nativo ridisegnato */
  .switch {
    appearance: none;
    flex: none;
    position: relative;
    inline-size: 3rem;
    block-size: 1.75rem;
    margin: 0;
    border-radius: 999px;
    border: 1.5px solid var(--field-border);
    background: var(--bg);
    cursor: pointer;
    transition: background-color 200ms ease-out, border-color 200ms ease-out;
  }
  .switch::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.25rem;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border-radius: 50%;
    background: var(--ink);
    transform: translateY(-50%);
    transition: transform 220ms var(--ease-out);
  }
  .switch:checked { background: var(--accent); border-color: var(--accent); }
  .switch:checked::after { background: var(--on-accent); transform: translate(1.1875rem, -50%); }
  .switch:disabled { opacity: 0.6; cursor: not-allowed; }
  .switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

  /* Captcha */
  .captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
  .captcha__image {
    inline-size: 15rem;
    block-size: auto;
    aspect-ratio: 240 / 72;
    border-radius: var(--radius);
    border: 1.5px solid var(--field-border);
    background: var(--surface);
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: none;
  }
  .captcha__refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-block-size: 2.75rem;
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 600;
    color: var(--link);
  }
  .captcha__refresh:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .field--captcha input { max-inline-size: 15rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 650; }
  .field--captcha .field__hint a { color: var(--link); }
}

/* ---------- Pagine progetto ---------- */

@layer pages {
  .case { padding: clamp(1.5rem, 4vw, 3rem) max(var(--gutter), (100% - var(--max)) / 2) 0; }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 500;
    color: var(--muted);
    margin-block-end: clamp(1.5rem, 4vw, 3rem);
  }
  .breadcrumb a { color: var(--ink); }

  .case__title {
    font-size: clamp(3.25rem, 1rem + 10vw, 11rem);
    font-weight: 800;
    font-stretch: 68%;
    line-height: 0.86;
    letter-spacing: -0.025em;
    overflow-wrap: break-word;
    hyphens: manual;
  }
  .case__summary { font-size: var(--fs-lead); line-height: 1.4; max-inline-size: 40ch; margin-block-start: 1.5rem; }
  .case__draft {
    margin-block-start: 1.5rem;
    padding-inline-start: 0.875rem;
    border-inline-start: 3px solid var(--accent);
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 500;
    color: var(--muted);
  }

  .case__cover {
    margin-block: clamp(2.5rem, 5vw, 4.5rem);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-media);
    background: var(--surface);
  }
  .case__cover img:not(.shot) { inline-size: 100%; block-size: 100%; object-fit: cover; }

  .case__grid { display: grid; gap: 3rem clamp(1rem, 2vw, 2rem); }
  .case__story { display: grid; gap: 3.5rem; align-content: start; }

  .facts > div { display: grid; gap: 0.25rem; padding-block: 0.875rem; border-block-start: 1px solid var(--rule); }
  .facts > div:first-child { border-block-start: 1.5px solid var(--ink); }
  .facts dt { font-family: var(--font-display); font-size: var(--fs-caption); font-weight: 600; color: var(--muted); }
  .facts dd { font-family: var(--font-display); font-size: 1rem; font-weight: 550; }
  .facts .tags { margin-block-start: 0.25rem; }
  .facts__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

  .feature-list { display: grid; gap: 0.875rem; max-inline-size: 60ch; }
  .feature-list li { position: relative; padding-inline-start: 1.5rem; font-size: var(--fs-read); line-height: 1.5; }
  .feature-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.6em;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--accent);
  }

  .gallery { display: grid; gap: 2rem; margin-block-start: clamp(4rem, 8vw, 6rem); }
  .gallery img { border-radius: var(--radius-media); inline-size: 100%; block-size: auto; }
  .gallery figcaption { font-family: var(--font-display); font-size: var(--fs-ui); color: var(--muted); margin-block-start: 0.5rem; }

  .next { margin-block-start: clamp(5rem, 10vw, 8rem); border-block-start: 1.5px solid var(--ink); }
  .next a { display: grid; gap: 0.5rem; padding-block: clamp(2rem, 5vw, 3.5rem); color: var(--ink); text-decoration: none; }
  .next__label { font-family: var(--font-display); font-size: var(--fs-ui); font-weight: 600; color: var(--muted); }
  .next__name {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1rem + 6vw, 6.5rem);
    font-weight: 800;
    font-stretch: 70%;
    line-height: 0.9;
    letter-spacing: -0.02em;
    transition: font-stretch 500ms var(--ease-out), color 160ms ease-out;
  }
  .next a:hover .next__name, .next a:focus-visible .next__name { font-stretch: 105%; color: var(--link); }

  @media (min-width: 60rem) {
    .case__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .facts { grid-column: 1 / 5; position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); align-self: start; }
    .case__story { grid-column: 6 / -1; }
  }

  /* Layout "system": copertina panoramica, scheda tecnica distesa in riga. */
  .case--system .case__title { font-stretch: 56%; letter-spacing: 0; }
  .case--system .case__cover { aspect-ratio: 21 / 9; }
  @media (min-width: 60rem) {
    .case--system .case__grid { grid-template-columns: 1fr; }
    .case--system .facts {
      grid-column: 1;
      position: static;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
      column-gap: 2rem;
      border-block-start: 1.5px solid var(--ink);
    }
    .case--system .facts > div { border-block-start: 0; }
    .case--system .facts > div:has(.tags) { grid-column: span 2; }
    .case--system .case__story { grid-column: 1; max-inline-size: 62rem; }
  }

  /* Layout "editorial": testata nella fascia blu, nome largo invece che stretto. */
  .case--editorial .case__head {
    margin-inline: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2));
    margin-block-start: calc(-1 * clamp(1.5rem, 4vw, 3rem));
    padding: clamp(1.5rem, 4vw, 3rem) max(var(--gutter), (100vw - var(--max)) / 2) clamp(3rem, 7vw, 6rem);
    background: var(--accent);
    color: var(--on-accent);
    --focus: var(--on-accent);
  }
  .case--editorial .breadcrumb, .case--editorial .breadcrumb a, .case--editorial .case__draft { color: var(--on-accent); }
  .case--editorial .case__draft { border-color: var(--on-accent); }
  .case--editorial .case__title { font-stretch: 125%; font-size: clamp(1.75rem, 0.2rem + 6.4vw, 8rem); }
  @media (min-width: 60rem) {
    .case--editorial .case__cover { inline-size: 75%; margin-inline-start: auto; margin-block-start: calc(-1 * clamp(1.5rem, 3vw, 3rem)); position: relative; }
  }

  /* Gli screenshot veri non si ritagliano: il riquadro prende le proporzioni dell'immagine. */
  .feature__media:has(.shot),
  .case__cover:has(.shot),
  .case--system .case__cover:has(.shot) { aspect-ratio: auto; }

  /* Telefono: stesse sezioni e stessi contenuti, con meno aria fra un blocco e l'altro. */
  @media (max-width: 47.99rem) {
    .section { padding-block: 3.5rem; }
    .section-head { margin-block-end: 1.75rem; gap: 0.75rem; }
    .section-title { font-size: clamp(2.75rem, 13vw, 3.5rem); }
    .section-lede { font-size: 1.0625rem; }

    .hero__areas { margin-block-start: 2rem; }
    .hero__areas li { padding-block: 0.625rem 0.75rem; }

    .about { gap: 1.5rem; }
    /* titolo e foto sulla stessa riga: la foto resta verticale come su desktop, senza allungare la pagina */
    .about__aside {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 8.5rem;
      align-items: end;
      gap: 1rem;
    }
    .about__photo { aspect-ratio: 4 / 5; max-inline-size: none; margin: 0; }
    .about__photo img { object-position: 50% 30%; }
    .about__statement { margin-block-end: 1.5rem; }
    .prose p { font-size: 1.0625rem; }

    /* filtri su una riga sola che scorre di lato; l'ultimo spunta dal bordo per far capire che c'è altro */
    .filter {
      flex-wrap: nowrap;
      gap: 0.375rem;
      margin-block-end: 1.25rem;
      margin-inline: calc(-1 * var(--gutter));
      padding-inline: var(--gutter);
      overflow-x: auto;
      scrollbar-width: none;
      overscroll-behavior-x: contain;
    }
    .filter::-webkit-scrollbar { display: none; }
    .filter__option { flex: none; }
    .timeline__body .tags { display: none; }
    .timeline__item { padding-block: 1.125rem 1.25rem; gap: 0.25rem; }
    .timeline__item::before { inset-block-start: 1.45rem; }
    .timeline__text { margin-block-start: 0.5rem; }

    .skills__layout { gap: 1.5rem; }
    .skills__areas { gap: 1.75rem; }
    .skill-area__text { margin-block: 0.25rem 0.75rem; }
    .tools { gap: 0.375rem; }

    .features { gap: 3rem; }
    .feature { gap: 1rem; }
    .feature__summary { margin-block: 0.625rem 0.875rem; }
    .feature__text .text-link { margin-block-start: 0.875rem; }
    .projects__index-title { margin-block: 3rem 0.5rem; }
    .project-row { padding-block: 1.125rem; gap: 0.375rem; }

    .services__list .service { padding-block: 1rem 1.375rem; }
    .service__text { margin-block: 0.375rem 0.625rem; }
    .services__cta { margin-block-start: 1rem; padding-block-start: 1.25rem; }
    .services__legal { margin-block-start: 1.5rem; }

    .contact { gap: 1.5rem; }
    .contact__text { margin-block: 0.875rem 1.5rem; }
    .form { gap: 1.125rem; }
    .form__row { gap: 1.125rem; }
  }

  /* ---------- Modalità recruiter: stesso sito, solo l'essenziale ---------- */
  .recruiter-bar { display: none; }
  [data-mode="recruiter"] .recruiter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 0.75rem max(var(--gutter), (100% - var(--max)) / 2);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    font-weight: 500;
    --focus: var(--on-accent);
  }
  .recruiter-bar strong { font-weight: 700; }
  .recruiter-bar__exit {
    min-block-size: 2.5rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  [data-mode="recruiter"] .hero { min-block-size: 0; align-content: start; padding-block-end: 0; }
  [data-mode="recruiter"] .hero { --name-size: clamp(3.5rem, 15vw, 14rem); }
  [data-mode="recruiter"] .hero__areas { margin-block-start: 2rem; }

  [data-mode="recruiter"] .section { padding-block: clamp(3rem, 5vw, 4.5rem); }
  [data-mode="recruiter"] .section-head { margin-block-end: 1.5rem; }
  [data-mode="recruiter"] .section-title { font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
  [data-mode="recruiter"] .section-lede { display: none; }

  [data-mode="recruiter"] .about__photo { max-inline-size: 11rem; }
  [data-mode="recruiter"] .about__statement { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-block-end: 1rem; }
  [data-mode="recruiter"] .about .prose p:not(:first-child) { display: none; }

  [data-mode="recruiter"] .filter,
  [data-mode="recruiter"] .timeline__more,
  [data-mode="recruiter"] .timeline__text,
  [data-mode="recruiter"] .timeline__body .tags { display: none; }
  [data-mode="recruiter"] .timeline__item { padding-block: 0.875rem 1rem; }
  [data-mode="recruiter"] .timeline__item::before { inset-block-start: 1.25rem; }
  [data-mode="recruiter"] .timeline__role { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); }

  [data-mode="recruiter"] .skill-area__text,
  [data-mode="recruiter"] .inspector,
  [data-mode="recruiter"] .tool__count { display: none; }
  [data-mode="recruiter"] .tool { pointer-events: none; min-block-size: 2.25rem; }
  @media (min-width: 64rem) {
    [data-mode="recruiter"] .skills__areas { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  [data-mode="recruiter"] .features { gap: 2.5rem; }
  [data-mode="recruiter"] .feature__title { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
  [data-mode="recruiter"] .feature .tags { display: none; }
  [data-mode="recruiter"] .projects__index-title { margin-block-start: 3rem; }
  [data-mode="recruiter"] .project-row { padding-block: 0.875rem; }
  [data-mode="recruiter"] .project-row__name { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }

  /* I servizi parlano ai clienti, non a chi seleziona: spariscono, anche dal menu. */
  [data-mode="recruiter"] .services,
  [data-mode="recruiter"] .site-nav__list > li:has([data-section-link="servizi"]) { display: none; }

  [data-mode="recruiter"] .form,
  [data-mode="recruiter"] .contact__text { display: none; }
  [data-mode="recruiter"] .contact__intro { grid-column: 1 / -1; }
  [data-mode="recruiter"] .contact__headline { display: none; }

  /* Changelog: un registro come il percorso, dalla versione più recente */
  .changelog__head { display: grid; gap: 1rem; margin-block-end: clamp(2rem, 5vw, 3.5rem); }
  .changelog .section-title { margin-block-end: 0; }
  .releases { list-style: none; padding: 0; border-block-start: 1.5px solid var(--ink); }
  .release {
    display: grid;
    gap: 0.75rem 2rem;
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    border-block-end: 1px solid var(--rule);
    scroll-margin-block-start: calc(var(--header-h) + 1rem);
  }
  .release__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; font-family: var(--font-display); }
  .release__version { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 800; font-stretch: 62%; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
  .release__version a { color: var(--ink); text-decoration: none; }
  .release__version a:hover { color: var(--link); }
  .release__date { font-size: var(--fs-ui); font-weight: 550; color: var(--muted); }
  .release__title { font-size: var(--fs-h3); font-weight: 750; font-stretch: 85%; line-height: 1.1; margin-block-end: 0.875rem; }
  .release__changes { display: grid; gap: 0.5rem; padding: 0; list-style: none; max-inline-size: 62ch; }
  .release__changes li { position: relative; padding-inline-start: 1.25rem; font-size: var(--fs-read); line-height: 1.5; }
  .release__changes li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em; inline-size: 0.4375rem; block-size: 0.4375rem; background: var(--accent); }
  .release--fix .release__title { font-size: 1.375rem; }
  @media (min-width: 60rem) {
    .release { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .release__meta { grid-column: 1 / 4; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .release__body { grid-column: 4 / -1; }
  }

  /* Pagina di errore */
  .error {
    display: grid;
    align-content: center;
    gap: 1.25rem;
    min-block-size: calc(100dvh - var(--header-h) - 10rem);
    padding: 2rem max(var(--gutter), (100% - var(--max)) / 2) 4rem;
  }
  .error__code {
    font-family: var(--font-display);
    font-size: clamp(8rem, 38vw, 30rem);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: var(--accent);
  }
  .error__title { font-size: var(--fs-h3); font-weight: 750; }
  .error__text { color: var(--muted); font-size: var(--fs-read); max-inline-size: 46ch; }
  .error__links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 0.5rem; }

  /* Pagine di testo */
  .text-page { padding: clamp(2rem, 5vw, 4rem) max(var(--gutter), (100% - var(--max)) / 2) var(--space-section); }
  .text-page .section-title { margin-block-end: 2.5rem; }
  .text-page h2 { font-size: 1.5rem; font-weight: 700; margin-block: 2.5rem 0.75rem; }
  .text-page__note { color: var(--muted); }
  .text-page h3 { font-size: 1.1875rem; font-weight: 700; margin-block: 1.75rem 0.5rem; }
  .legal ul { padding-inline-start: 1.25rem; display: grid; gap: 0.375rem; margin-block: 0.75rem; }
  .legal li { font-size: var(--fs-read); line-height: 1.55; }
  .legal li::marker { color: var(--accent); }
  .legal code { font-family: var(--font-display); font-size: 0.9em; font-weight: 600; padding: 0.0625rem 0.3125rem; border-radius: 3px; background: var(--surface); }
  .legal p + p { margin-block-start: 1em; }
  .legal .button { margin-block: 0.5rem; }
  .table-wrap { overflow-x: auto; margin-block: 1rem; border: 1px solid var(--rule); border-radius: var(--radius); }
  .legal table { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
  .legal th, .legal td { text-align: start; vertical-align: top; padding: 0.75rem 0.875rem; border-block-end: 1px solid var(--rule); }
  .legal tr:last-child td { border-block-end: 0; }
  .legal th { font-family: var(--font-display); font-size: var(--fs-caption); font-weight: 650; color: var(--muted); background: var(--surface); }
  .legal td:first-child { white-space: nowrap; }
  .legal td:last-child { min-inline-size: 9rem; color: var(--muted); }
}

/* ---------- Movimento ---------- */

@layer utilities {
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }
  }

  @media (prefers-reduced-motion: reduce) {
    html:not([data-motion]) *, html:not([data-motion]) *::before, html:not([data-motion]) *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  @media (forced-colors: active) {
    .button, .tool, .filter__option { border: 1px solid ButtonText; }
    .badge::before { forced-color-adjust: none; }
  }
}