:root {
  --ink: #171c24;
  --paper: #f5f4f0;
  --line: rgba(23, 28, 36, 0.15);
  --acid: #d9e1e6;
  --orange: #526b7c;
  --muted: #626970;
}

body { background: var(--paper); }
.nav-wrap { background: linear-gradient(var(--paper) 35%, transparent); }
.nav { background: rgba(245, 244, 240, 0.86); }
.nav-cta { background: var(--ink); color: #fff; }
.brand span { background: #273746; color: #fff; }
.status-dot { background: #758c7e; box-shadow: 0 0 0 5px rgba(117, 140, 126, 0.13); }
h1 span, h2 em { color: #526b7c; }
.button.primary { background: #273746; }
.floating-card span { background: #d9e1e6; }
.projects { background: #171c24; }
.project-index { color: #aebdc7; }
.circle-link { background: #d9e1e6; }
.contact { background: #dce3e7; }
.section-kicker,
.skill-grid article > span,
.timeline span { color: #526b7c; }
.projects .section-kicker { color: #aebdc7; }
.project-stage { border: 1px solid rgba(255, 255, 255, 0.1); }

h1 {
  font-size: clamp(50px, 5.8vw, 84px);
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.hero-intro { max-width: 690px; }
.eyebrow { letter-spacing: 0.12em; }
.metrics strong { color: #273746; }
.project-head h3 { letter-spacing: -0.045em; }
.contact h2 em { color: #405a6a; }

::selection { background: #c5d1d8; color: #171c24; }
.scroll-progress { position: fixed; inset: 0 auto auto 0; width: 0; height: 2px; z-index: 50; background: #6d8797; }
.cursor-glow { position: fixed; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; z-index: -1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(113, 141, 158, .11), transparent 68%); transition: opacity .25s; }
.hero { position: relative; }
.hero:before { content: ""; position: absolute; width: 560px; height: 560px; left: -340px; top: 20%; border-radius: 50%; background: radial-gradient(circle, rgba(82,107,124,.1), transparent 67%); }
.hero-copy { position: relative; z-index: 5; }
.hero-credentials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 700px; margin: 54px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.hero-credentials div { min-width: 0; }
.hero-credentials dt { margin-bottom: 9px; font: 700 9px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: #73808a; }
.hero-credentials dd { margin: 0; font-size: 12px; line-height: 1.5; color: #303942; }
.portrait-frame { box-shadow: 0 35px 90px rgba(23,28,36,.16); border: 1px solid rgba(255,255,255,.55); }
.portrait-frame img { filter: saturate(.72) contrast(1.03); transition: filter .8s ease, transform 1.2s ease; }
.portrait-frame:hover img { filter: saturate(1) contrast(1.02); transform: scale(1.025); }
.floating-card { border: 1px solid rgba(255,255,255,.7); box-shadow: 0 20px 60px rgba(23,28,36,.12); }
.section-title, .manifesto h2, .skills-intro h2, .contact h2 { text-wrap: balance; }
.project-stage { transition: transform .25s ease-out, box-shadow .25s ease-out; box-shadow: 0 24px 70px rgba(0,0,0,.24); }
.project-stage:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.13), transparent 35%, rgba(0,0,0,.1)); }
.main-shot, .side-shot { z-index: 1; }
.project-label { z-index: 2; backdrop-filter: blur(10px); background: rgba(23,28,36,.86); }
.gallery button { position: relative; }
.gallery button:after { content: "Apri immagine  ↗"; position: absolute; right: 12px; bottom: 12px; padding: 9px 12px; border-radius: 40px; background: rgba(23,28,36,.85); color: #fff; font: 600 9px var(--font-head); letter-spacing: .08em; opacity: 0; transform: translateY(8px); transition: .3s; }
.gallery button:hover:after { opacity: 1; transform: none; }
.skill-grid article { transition: background .35s ease, transform .35s ease; }
.skill-grid article:hover { background: rgba(255,255,255,.56); transform: translateY(-5px); }
.timeline article { transition: padding .3s ease, background .3s ease; }
.timeline article:hover { padding-left: 18px; padding-right: 18px; background: rgba(255,255,255,.46); }
.contact { position: relative; overflow: hidden; }
.contact-inner { position: relative; z-index: 2; }
.footer-monogram { width: max-content; margin: 100px 0 -4vw -1vw; font: 800 clamp(72px, 14vw, 220px)/.7 var(--font-head); letter-spacing: -.08em; color: rgba(23,28,36,.075); white-space: nowrap; }

@media (max-width: 900px) {
  .cursor-glow { display: none; }
  .hero-credentials { margin-top: 38px; }
}

@media (max-width: 600px) {
  .hero-credentials { grid-template-columns: 1fr 1fr; gap: 20px; }
  .hero-credentials div:last-child { grid-column: 1 / -1; }
  .footer-monogram { margin-top: 70px; }
  .gallery button:after { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}