:root{--ink:#11121a;--paper:#f5f2e9;--acid:#e5ff76;--blue:#253bd1;--pad:clamp(1.35rem,6vw,7rem);font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--ink)}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-underline-offset:.22em}
a:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.skip{position:absolute;z-index:5;top:1rem;left:1rem;background:var(--acid);color:var(--ink);padding:.75rem;transform:translateY(-200%)}
.skip:focus{transform:none}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem var(--pad);color:var(--paper)}
header{border-bottom:1px solid #ffffff30}
nav{display:flex;gap:clamp(.75rem,3vw,2.5rem);flex-wrap:wrap}
nav a,.brand{text-decoration:none}
nav a:hover{text-decoration:underline}
.brand{font-weight:900;font-size:1.8rem;letter-spacing:-.08em}
.dark{background:var(--ink);color:var(--paper)}
.paper{background:var(--paper)}
.blue{background:var(--blue);color:white}
.hero,.chapter{padding:clamp(3rem,8vw,8rem) var(--pad)}
.hero{min-height:80svh;position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:center}
.hero span,.brand span,.blue span{color:var(--acid)}
.label{font: .76rem/1.5 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;margin:0 0 1.7rem}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(4.2rem,15vw,15rem);line-height:.76;letter-spacing:-.093em;margin-bottom:3rem}
h2{font-size:clamp(2.7rem,8vw,8rem);line-height:.92;letter-spacing:-.075em;margin-bottom:2rem}
h2 em{font-family:Georgia,serif;font-weight:400;color:#2738b6}
h3{font-size:clamp(1.5rem,3vw,2.7rem);letter-spacing:-.045em;margin-bottom:.75rem}
p,dd{line-height:1.55}
.lead,.herobottom p{font-size:clamp(1.15rem,2.3vw,1.8rem);max-width:36ch}
.herobottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.herobottom p{margin:0}
.pill{display:inline-block;border:1px solid currentColor;border-radius:99px;padding:.8rem 1.1rem;text-decoration:none;margin:.25rem .25rem .25rem 0}
.pill:hover{background:var(--acid);color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,5vw,5rem)}
article,.steps li,.skills div{border-top:1px solid currentColor;padding:1.4rem 0}
article p{max-width:48ch}
.steps,.skills{max-width:65rem;margin:2rem 0;padding:0}
.steps{list-style-position:inside}
.skills div{display:grid;grid-template-columns:minmax(8rem,1fr) 2fr;gap:1rem}
dt{font-weight:bold}dd{margin:0}
#formazione,#contatti{border-top:1px solid #11121a33}
@media(max-width:620px){.grid{grid-template-columns:1fr}.hero{min-height:70svh}nav{font-size:.85rem}}


.art {
  position: absolute;
  z-index: -1;
  width: min(77vw, 69rem);
  aspect-ratio: 1;
  top: 50%;
  right: -8%;
  translate: 0 -50%;
  mix-blend-mode: screen;
  pointer-events: none;
  mask-image: radial-gradient(ellipse, #000 42%, transparent 71%);
}
.art video { display: block; width: 100%; height: 100%; }
@media (max-width: 620px) {
  .art { width: 124vw; right: -36%; opacity: .62; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--ink);
  min-height: 4.5rem;
}
main, main [id] { scroll-margin-top: 4.5rem; }
.skip { position: fixed; }
.site-header nav { align-items: center; gap: clamp(1rem, 3vw, 2.8rem); }
.site-header nav a { font-weight: 600; }
.site-header nav a:hover { color: var(--acid); text-decoration: none; }
.nav-index, .nav-arrow, .menu-toggle { display: none; }
@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; }
  .site-header nav { font-size: 1rem; }
  .site-header.menu-ready .menu-toggle {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 44px;
    padding: 0 .85rem 0 1rem;
    border: 1px solid #ffffff59;
    border-radius: 99px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .menu-toggle:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
  .menu-toggle span { font-size: 1.4rem; color: var(--acid); }
  .site-header.menu-ready nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    padding: .75rem var(--pad) 1.5rem;
    background: var(--ink);
    box-shadow: 0 1.5rem 3rem #0007;
  }
  .site-header.menu-ready .menu-toggle[aria-expanded="true"] + nav { display: block; }
  .menu-ready nav a {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    border-bottom: 1px solid #ffffff38;
    padding: .75rem .15rem;
    font-size: clamp(1.65rem, 6.2vw, 3rem);
    letter-spacing: -.055em;
  }
  .menu-ready .nav-index, .menu-ready .nav-arrow { display: inline; color: var(--acid); }
  .nav-index { font: .72rem ui-monospace, monospace; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .menu-ready .menu-toggle[aria-expanded="true"] + nav { animation: menu-in .22s ease-out both; }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-.5rem); }
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 7vw, 8rem);
}
.profile-copy { max-width: 52ch; }
.profile-copy p:not(.lead) { font-size: 1.06rem; }
.profile-portrait { margin: 0; max-width: 29rem; }
.profile-portrait img { display: block; width: 100%; height: auto; }
.profile-portrait figcaption { margin: .9rem 0 0; }
@media (max-width: 660px) {
  .profile-layout { grid-template-columns: 1fr; }
}

.profile-intro { background: #121212; }
.profile-page {
  position: relative;
  isolation: isolate;
  min-height: max(48rem, calc(100svh - 4.5rem));
  padding-block: clamp(4rem, 8vw, 8rem);
  background: #121212;
  color: var(--paper);
  overflow: hidden;
}
.profile-page h2 { font-size: clamp(4rem, 10vw, 10rem); }
.profile-page h2 span, .site-header [aria-current="page"] { color: var(--acid); }
.profile-page .profile-layout { display: block; }
.profile-page .profile-copy { position: relative; }
.profile-page .profile-portrait {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(62%, 58rem);
  max-width: none;
  z-index: -1;
}
.profile-page .profile-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  mask-image: linear-gradient(to right, transparent, #000 43%);
}
.profile-page figcaption { display: none; }
@media (max-width: 760px) {
  .profile-page {
    min-height: 0;
    padding-top: clamp(20rem, 95vw, 38rem);
  }
  .profile-page .profile-portrait {
    width: 100%;
    height: clamp(24rem, 115vw, 46rem);
  }
  .profile-page .profile-portrait img {
    mask-image: linear-gradient(to bottom, #000 62%, transparent);
  }
  .profile-page h2 { font-size: clamp(3.75rem, 15vw, 7rem); }
}

@media (min-width: 761px) {
  .profile-page .profile-portrait { max-height: 58rem; }
  .profile-page .profile-portrait img {
    mask-image: linear-gradient(to right, transparent, #000 43%),
      linear-gradient(to bottom, #000 84%, transparent);
    mask-composite: intersect;
  }
}

/* Keep the portrait and biography together on wide displays. */
@media (min-width: 112rem) {
  .profile-page {
    --profile-gutter: max(var(--pad), calc((100% - 86rem) / 2));
    padding-inline: var(--profile-gutter);
  }
  .profile-page .profile-portrait {
    right: calc(var(--profile-gutter) / 2);
    width: clamp(58rem, 45vw, 63rem);
    max-height: clamp(58rem, 49vw, 66rem);
  }
  .profile-page .profile-portrait img {
    mask-image: linear-gradient(to right, transparent, #000 43%, #000 91%, transparent),
      linear-gradient(to bottom, #000 84%, transparent);
  }
}

.contact-page { background: radial-gradient(ellipse at top right, #25336d, var(--ink) 65%); color: var(--paper); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 35rem); gap: clamp(2rem, 7vw, 8rem); max-width: 90rem; margin-inline: auto; }
.contact-page h1 { font-size: clamp(3.3rem, 8vw, 9rem); }
.contact-page h1 span { color: var(--acid); }
.contact-guide { max-width: 30rem; margin: 2.5rem 0 0; }
.contact-guide div { border-top: 1px solid #ffffff40; padding: 1rem 0; }
.contact-guide dt { color: var(--acid); margin-bottom: .35rem; }
.contact-guide dd { color: #dedfe5; }
.contact-form { display: grid; gap: .65rem; align-content: start; padding-block: .75rem; }
.contact-form h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: .2rem; }
.contact-form label { font-weight: 600; margin-top: .85rem; }
.contact-form :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: .55rem .2rem;
  border: 0;
  border-bottom: 1px solid #ffffff80;
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 1rem;
  color-scheme: dark;
}
.contact-form :is(input, textarea)::placeholder { color: #c4c6cf; }
.contact-form :is(input, select, textarea):focus { border-bottom-color: var(--acid); }
.contact-form textarea { resize: vertical; }
.contact-form :focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.contact-form button { min-height: 48px; border: 0; border-radius: 99px; padding: .75rem 1rem; background: var(--acid); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.contact-note { margin: .25rem 0; font-size: .9rem; }
.contact-status { border-left: 3px solid var(--acid); padding-left: .75rem; }
@media (max-width: 960px) { .contact-layout { grid-template-columns: 1fr; } }

.arrow-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; }
.arrow-icon.nav-arrow { display: none; }
@media (max-width: 760px) { .menu-ready .arrow-icon.nav-arrow { display: inline-block; } }
.legal-footer { flex-wrap: wrap; font-size: .9rem; line-height: 1.6; }
.legal-links { display: flex; gap: 1.25rem; }
.policy-copy { max-width: 72ch; margin-inline: auto; }
.policy-copy h1 { font-size: clamp(2.65rem, 7vw, 5rem); line-height: 1; letter-spacing: -.065em; margin-bottom: 1.5rem; }
.policy-copy h2 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; letter-spacing: -.035em; margin: 2.3rem 0 .75rem; }

.art { background: center / cover no-repeat url("atom.jpg"); }
.art video { opacity: 0; }
.art.atom-playing video { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .art.atom-fallback { background-image: url("atom-motion.webp"); }
}

.cookie-float {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .55rem .85rem;
  border: 1px solid #ffffff50;
  border-radius: 99px;
  background: #11121a;
  color: var(--paper);
  box-shadow: 0 .35rem 1.4rem #0005;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
}
.cookie-float svg { color: var(--acid); }
.cookie-float:hover, .cookie-float:focus-visible { border-color: var(--acid); }
.legal-footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }

.back-top {
  left: auto;
  right: max(1rem, env(safe-area-inset-right));
}
.back-top[hidden] { display: none; }

@media (max-width: 760px) {
  .site-header.menu-ready .menu-toggle {
    justify-content: center;
    min-width: 44px;
    padding: 0 .65rem;
  }
  .menu-toggle .menu-icon { width: 24px; height: 24px; color: var(--acid); }
  .menu-icon path { transform-origin: center; transform-box: view-box; }
  .menu-toggle[aria-expanded="true"] .menu-icon path:first-child { transform: translateY(5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-icon path:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .menu-icon path:last-child { transform: translateY(-5px) rotate(-45deg); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .menu-icon path { transition: transform .2s ease, opacity .15s ease; }
  .menu-ready .menu-toggle[aria-expanded="true"] + nav a {
    animation: menu-item-in .34s ease-out both;
  }
  .menu-ready .menu-toggle[aria-expanded="true"] + nav a:nth-child(2) { animation-delay: .06s; }
  .menu-ready .menu-toggle[aria-expanded="true"] + nav a:nth-child(3) { animation-delay: .12s; }
  .menu-ready .menu-toggle[aria-expanded="true"] + nav a:nth-child(4) { animation-delay: .18s; }
  .menu-ready .menu-toggle[aria-expanded="true"] + nav a:nth-child(5) { animation-delay: .24s; }
}
@keyframes menu-item-in {
  from { opacity: 0; transform: translateX(-1.6rem); }
}

.cookie-panel {
  position: fixed;
  inset: auto 0 0;
  width: min(100%, 62rem);
  max-width: none;
  max-height: 90dvh;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  padding-bottom: max(1.4rem, env(safe-area-inset-bottom));
  border: 1px solid #ffffff42;
  border-radius: 1.35rem 1.35rem 0 0;
  background: #171923;
  color: var(--paper);
  box-shadow: 0 -1rem 4rem #0007;
}
.cookie-panel::backdrop { background: #090a1180; }
.cookie-panel .label { color: var(--acid); margin-bottom: .75rem; }
.cookie-panel h2 { font-size: clamp(2rem, 6vw, 3.4rem); margin-bottom: 1rem; }
.cookie-panel p { max-width: 65ch; }
.cookie-panel .cookie-setting {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  border-block: 1px solid #ffffff40;
  padding: 1rem 0;
}
.cookie-setting span { color: var(--acid); }
.cookie-actions { display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; margin: 1.25rem 0 0; }
.cookie-actions button {
  min-height: 44px;
  padding: .65rem 1rem;
  border: 1px solid currentColor;
  border-radius: 99px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.cookie-actions [value="save"] { background: var(--acid); color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .cookie-panel[open] { animation: cookie-panel-in .24s ease-out both; }
}
@keyframes cookie-panel-in {
  from { opacity: 0; transform: translateY(1.5rem); }
}