:root{
  /* colori */
  --paper:#ACA59C;      /* sfondo */
  --paper-2:#A39B91;    /* sfondo leggermente più scuro: hover, riquadri immagini */
  --ink:#FFFFFF;        /* testo principale e logo */
  --ink-soft:#4A443E;   /* testo secondario: etichette, date, voci di menu */
  --line:#C9C4BD;       /* linee di separazione */
  --accent:#FFFFFF;     /* voce attiva, hover, focus */

  /* misure e animazioni */
  --rail-w:272px;
  --bar-h:62px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  box-sizing:border-box;
}
*{box-sizing:inherit;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--bar-h) + env(safe-area-inset-top, 0px));}
@media (min-width:900px){ html{scroll-padding-top:0;} }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit;}
img{max-width:100%; height:auto; display:block;}
picture{display:contents;}
figure{margin:0;}
h1,h2,h3,.kicker{font-family:"Fraunces", Georgia, "Times New Roman", serif; font-weight:480; margin:0;}
.serif-italic{font-style:italic; font-weight:420;}

.layout{max-width:1400px; margin:0 auto; position:relative;}

/* =========================================================
   Rail / nav — sempre visibile, entra da sinistra al caricamento
   ========================================================= */
.rail{
  position:fixed; z-index:20;
  top:0; left:0; right:0;
  padding:10px 20px;
  padding-top:calc(10px + env(safe-area-inset-top, 0px));
  background:var(--paper);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:18px;

  /* stato nascosto: tagliata a sinistra */
  clip-path:inset(0 100% 0 0);
  visibility:hidden;
  transition:
    clip-path .5s var(--ease-in),
    visibility 0s linear .5s;
}
.rail.is-visible{
  clip-path:inset(0 0 0 0);
  visibility:visible;
  transition:
    clip-path .9s var(--ease-out),
    visibility 0s linear 0s;
}

/* elementi interni: scivolano da sinistra, a cascata */
.rail-name, nav.primary a, .rail-foot{
  opacity:0;
  transform:translateX(-28px);
  transition:opacity .3s ease, transform .4s var(--ease-in);
}
.rail.is-visible .rail-name,
.rail.is-visible nav.primary a,
.rail.is-visible .rail-foot{
  opacity:1;
  transform:none;
  transition:opacity .6s ease, transform .8s var(--ease-out);
  transition-delay:calc(.12s + var(--i, 0) * .06s);
}
.rail-name{--i:1;}
nav.primary a:nth-child(1){--i:2;}
nav.primary a:nth-child(2){--i:3;}
nav.primary a:nth-child(3){--i:4;}
nav.primary a:nth-child(4){--i:5;}
nav.primary a:nth-child(5){--i:6;}
.rail-foot{--i:7;}

.rail-mid{min-width:0; flex:1;}
.rail-name{display:none; font-family:"Fraunces", serif; font-size:1.05rem; font-weight:520;}
.rail-name span{display:block; font-family:"Space Grotesk",sans-serif; font-size:0.7rem; color:var(--ink-soft); font-weight:400; margin-top:2px;}
nav.primary{
  display:flex; gap:18px;
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
nav.primary::-webkit-scrollbar{display:none;}
nav.primary a{
  flex:none;
  text-decoration:none; color:var(--ink-soft); font-size:0.92rem;
  padding:4px 0; border-bottom:1px solid transparent;
}
nav.primary a.active, nav.primary a:hover{color:var(--ink); border-color:var(--accent);}
nav.primary a:focus-visible, .rail-foot a:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
@media (max-width:899px){ nav.primary a[href="#top"]{display:none;} }
.rail-foot{display:none; font-size:0.82rem; color:var(--ink-soft);}
.rail-foot a{text-decoration:underline; text-underline-offset:3px;}

@media (min-width:900px){
  .rail{
    right:auto; bottom:0;
    left:max(0px, calc((100vw - 1400px) / 2));
    width:var(--rail-w); height:100vh; height:100dvh;
    padding:34px 30px 30px;
    border-bottom:none; border-right:1px solid var(--line);
    flex-direction:column; align-items:stretch; justify-content:space-between; gap:0;
  }
  .rail-mid{flex:none; margin-top:auto; margin-bottom:auto;}
  .rail-name{display:block;}
  nav.primary{flex-direction:column; gap:11px; margin-top:34px; overflow:visible;}
  nav.primary a{width:fit-content; transition-property:opacity, transform, color, border-color;}
  .rail-foot{display:block; margin-top:22px;}
}

/* =========================================================
   Contenuto
   ========================================================= */
main{min-width:0;}
section{padding:76px 28px; border-bottom:1px solid var(--line);}
@media (min-width:900px){
  section{padding:96px 64px; margin-left:var(--rail-w);}
  footer{margin-left:var(--rail-w);}
}

.kicker{font-size:0.82rem; color:var(--ink-soft); margin:0 0 14px;}

/* ---- Hero: logo al centro, "portfolio" in alto a sinistra, accanto al menu ---- */
.hero{
  min-height:100vh; min-height:100svh;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding-top:calc(var(--bar-h) + 64px + env(safe-area-inset-top, 0px));
  padding-bottom:64px;
}
@keyframes heroFade{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
.hero-logo{
  width:min(1500px, 90%); height:auto;
  filter:brightness(0) invert(1);   /* logo bianco */
  animation:heroFade 1.3s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:.05s;
}
.hero-tl{
  position:absolute; margin:0;
  top:calc(var(--bar-h) + 24px + env(safe-area-inset-top, 0px)); left:28px;
  font-size:0.86rem; color:var(--ink-soft);
  animation:heroFade 1.3s cubic-bezier(.2,.7,.2,1) both; animation-delay:.3s;
}
@media (min-width:900px){
  .hero{padding-top:96px; padding-bottom:96px;}
  .hero-tl{top:36px; left:64px; font-size:0.92rem;}
}

/* ---- Chi sono ---- */
.about-grid{display:grid; gap:34px;}
@media (min-width:700px){
  .about-grid{grid-template-columns:220px 1fr; gap:52px; align-items:start;}
}
.about-photo{width:100%; max-width:220px; border-radius:3000px; overflow:hidden; background:var(--paper-2);}
.about-photo img{width:100%;}
.about-text p{font-size:1.12rem; max-width:56ch; margin:0 0 18px; color:#4A443E}
.about-text p:last-child{margin-bottom:0;}

/* ---- Percorso ---- */
.timeline{margin-top:36px; display:flex; flex-direction:column;}
.t-row{
  display:grid; grid-template-columns:96px 1fr; gap:20px;
  padding:22px 0; border-top:1px solid var(--line);
}
.t-row:last-child{border-bottom:1px solid var(--line);}
.t-date{font-size:0.86rem; color:var(--ink-soft); padding-top:3px;}
.t-body h3{font-size:1.14rem; font-weight:520;}
.t-body p{margin:6px 0 0; color:var(--ink-soft); font-size:0.96rem; max-width:60ch;}

/* ---- Progetti (accordion) ---- */
.project-item{border-top:1px solid var(--line);}
.project-item:last-child{border-bottom:1px solid var(--line);}
.project-header{
  all:unset; box-sizing:border-box; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  width:100%; padding:26px 2px;
}
.project-header:focus-visible{outline:2px solid var(--accent); outline-offset:4px;}
.ph-name{font-family:"Fraunces", serif; font-size:1.28rem; font-weight:500; display:block;}
.ph-meta{display:flex; gap:14px; margin-top:8px;}
.project-year{font-size:0.82rem; color:var(--ink-soft);}
.ph-icon{
  flex:none; width:30px; height:30px; border:1px solid var(--line); border-radius:50%;
  position:relative;
}
.ph-icon::before, .ph-icon::after{
  content:""; position:absolute; background:var(--ink); left:50%; top:50%;
  transform:translate(-50%,-50%);
}
.ph-icon::before{width:11px; height:1px;}
.ph-icon::after{width:1px; height:11px; transition:transform .35s ease;}
.project-header[aria-expanded="true"] .ph-icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0);}

.project-panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.65,0,.35,1);
}
.project-panel.open{grid-template-rows:1fr;}
.panel-inner{overflow:hidden; min-height:0;}
.work{padding:4px 2px 8px;}
.work:last-child{padding-bottom:30px;}
.work + .work{margin-top:32px; padding-top:32px; border-top:1px solid var(--line);}
.work-title{font-size:1rem; color:var(--ink-soft); margin:0 0 16px;}

/* tendine interne (dentro Identità visiva) */
.sub-list{padding:0 0 26px;}
.project-item.sub .project-header{padding:18px 2px;}
.project-item.sub .ph-name{font-size:1.05rem;}
.project-item.sub .ph-icon{width:24px; height:24px;}
.project-item.sub .ph-icon::before{width:9px;}
.project-item.sub .ph-icon::after{height:9px;}
.project-item.sub .work{padding-bottom:22px;}

/* Galleria a righe giustificate:
   ogni immagine prende una quota di larghezza proporzionale al suo
   rapporto d'aspetto (--ar), così tutte le immagini di una riga hanno
   la stessa altezza e la riga è piena — niente spazi vuoti né ritagli. */
.gallery{display:flex; flex-direction:column; gap:14px;}
.g-row{display:flex; flex-direction:column; gap:14px;}
.g-item{border-radius:3px; overflow:hidden; background:var(--paper-2); min-width:0;}
.g-item img{width:100%; height:auto; aspect-ratio:var(--ar);}
@media (min-width:700px){
  .gallery, .g-row{gap:18px;}
  .g-row{flex-direction:row;}
  .g-row > .g-item{flex:var(--ar) 1 0%;}
  .g-narrow{width:66%; margin:0 auto;}
}

/* ---- Pagina progetti ---- */
.page-head{padding-bottom:40px; border-bottom:none;}
.page-title{font-size:clamp(2.4rem, 7vw, 4.6rem); line-height:1.02;}
.page-note{margin:18px 0 0; color:var(--ink-soft);}
section.projects{padding-top:0;}
.project-item{scroll-margin-top:12px;} /* la barra in alto è già compensata da scroll-padding */
@media (min-width:900px){
  .page-progetti .page-head{padding-top:96px;}
  .project-item{scroll-margin-top:24px;}
}
footer a{text-decoration:underline; text-underline-offset:3px;}

/* ---- Contatti: frase a sinistra, recapiti con etichetta a destra ---- */
.contact-grid{display:grid; gap:40px; margin-top:8px;}
@media (min-width:900px){
  .contact-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:64px; align-items:start;}
}
.contact-title{font-size:clamp(1.6rem,3.6vw,2rem); max-width:20ch;}
.contact-list{margin:0; display:flex; flex-direction:column;}
.contact-row{
  display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:baseline;
  padding:14px 0; border-top:1px solid var(--line);
}
.contact-row:last-child{border-bottom:1px solid var(--line);}
.contact-row dt{margin:0; font-size:0.78rem;}
.contact-row dd{margin:0; font-size:1rem; overflow-wrap:anywhere;}
.contact-row a{text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s ease;}
.contact-row a:hover{border-color:var(--accent);}

/* ---- Footer ---- */
footer{padding:12px 28px 14px; font-size:0.78rem; color:var(--ink-soft);}
@media (min-width:900px){ footer{padding:12px 64px 16px;} }

/* ---- Movimento ridotto ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .hero-logo, .hero-tl{animation:none;}
  .rail, .rail.is-visible{transition:opacity .2s ease, visibility 0s linear .2s; clip-path:none; opacity:0;}
  .rail.is-visible{opacity:1; transition:opacity .2s ease, visibility 0s;}
  .rail-name, nav.primary a, .rail-foot{transform:none !important; opacity:1 !important; transition:none !important;}
  .ph-icon::after, .project-panel{transition:none;}
}