/* ═══════════════════════════════════════════════════════════
   FRANCESCO TISANO — "Il filo e lo spazio"
   Bebas Neue · Newsreader italic · General Sans · Space Mono
   paper / ink / evergreen / clay — nothing else

   THEMING: the whole page lives on --bg / --text / --accent.
   body.theme-dark flips them (set by JS as you scroll into a
   dark zone) and background/color cross-fade page-wide.
   ═══════════════════════════════════════════════════════════ */

/* ---------- 1. TOKENS ---------- */
:root{
  --paper:#F5F4EF;
  --ink:#14231F;
  --green:#06342D;
  --green-2:#04241F;
  --clay:#B0623B;
  --clay-light:#E0A06B;

  /* Semantic — components use ONLY these */
  --bg:var(--paper);
  --text:var(--ink);
  --accent:var(--clay);
  --btn-bg:var(--green);
  --btn-fg:var(--paper);

  --font-display:'Bebas Neue','Arial Narrow',sans-serif;
  --font-serif:'Newsreader',Georgia,serif;
  --font-body:'General Sans',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;

  --fs-hero:  clamp(3rem, 10.5vw, 10rem);
  --fs-xl:    clamp(3rem, 9.5vw, 9.5rem);
  --fs-h2:    clamp(2.6rem, 6.5vw, 6.2rem);
  --fs-h3:    clamp(1.7rem, 3.2vw, 2.6rem);
  --fs-word:  clamp(2.8rem, 8vw, 7.5rem);
  --fs-lead:  clamp(1.3rem, 2.1vw, 1.8rem);
  --fs-body:  clamp(1.05rem, 1.15vw, 1.2rem);
  --fs-label: clamp(0.9rem, 1vw, 0.95rem);

  --lh-tight:0.86;
  --lh-body:1.65;

  --sp-sm:clamp(0.75rem,1.5vw,1.25rem);
  --sp-md:clamp(1.25rem,3vw,2rem);
  --sp-lg:clamp(2rem,5vw,4rem);
  --sp-xl:clamp(3.5rem,8vw,7rem);
  --section-y:clamp(7rem,16vw,16rem);

  --gutter:clamp(1.4rem,5vw,5.5rem);

  --ease:cubic-bezier(0.16,1,0.3,1);
  --dur:0.5s;
  --theme-dur:0.7s;
  --rule:1px solid color-mix(in srgb, var(--text) 16%, transparent);
}

body.theme-dark{
  --bg:var(--green);
  --text:var(--paper);
  --accent:var(--clay-light);
  --btn-bg:var(--paper);
  --btn-fg:var(--green);
}

/* No-JS / no-GSAP fallback: sections paint themselves statically */
html:not(.theme-dynamic) [data-theme="dark"]{
  --bg:var(--green);
  --text:var(--paper);
  --accent:var(--clay-light);
  --btn-bg:var(--paper);
  --btn-fg:var(--green);
  background:var(--bg);
  color:var(--text);
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  position:relative;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--bg);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background var(--theme-dur) var(--ease),color var(--theme-dur) var(--ease);
}
ul[role="list"],ol[role="list"]{list-style:none;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;background:none;border:0;}
input,textarea,select,button{font-family:var(--font-body);font-size:var(--fs-body);}
::selection{background:var(--green);color:var(--paper);}
body.theme-dark ::selection{background:var(--paper);color:var(--green);}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--green);color:var(--paper);padding:var(--sp-sm) var(--sp-md);}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

main{position:relative;z-index:1;}
section{position:relative;padding:var(--section-y) var(--gutter);}

/* ---------- 3. TYPE ROLES ---------- */
.display,h1,h2{
  font-family:var(--font-display);
  font-weight:400;
  line-height:var(--lh-tight);
  letter-spacing:0.008em;
  text-transform:uppercase;
  color:var(--text);
  transition:color var(--theme-dur) var(--ease);
}
h2.display{font-size:var(--fs-h2);}
h2.display--xl{font-size:var(--fs-xl);}
.display em,h1 em,h2 em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:-0.01em;
  color:var(--accent);
  transition:color var(--theme-dur) var(--ease);
}
h3{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h3);text-transform:uppercase;line-height:0.95;letter-spacing:0.01em;}
p{max-width:58ch;}
.lead{font-size:var(--fs-lead);font-weight:400;line-height:1.45;color:color-mix(in srgb,var(--text) 88%,transparent);max-width:36ch;}

.index{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  text-transform:uppercase;
  letter-spacing:0.22em;
  color:var(--accent);
  margin-bottom:var(--sp-md);
  transition:color var(--theme-dur) var(--ease);
}
.section-head{margin-bottom:var(--sp-xl);max-width:100%;}
.placeholder-text{opacity:0.75;font-style:italic;}

/* Ghost typography — editorial texture */
.ghost-num{
  position:absolute;top:-0.12em;left:calc(var(--gutter)*0.4);z-index:0;
  font-family:var(--font-display);font-size:clamp(10rem,32vw,30rem);
  line-height:1;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--text) 10%,transparent);
  pointer-events:none;user-select:none;
}
.ghost-num--right{left:auto;right:calc(var(--gutter)*0.4);}

/* Links & buttons */
.link-arrow{
  display:inline-flex;align-items:center;gap:0.5em;
  font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:0.08em;color:var(--accent);
  transition:color var(--theme-dur) var(--ease);
}
.link-arrow span{transition:transform var(--dur) var(--ease);}
.link-arrow:hover span{transform:translate(4px,0);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5em;
  padding:1em 2.2em;
  font-weight:600;font-size:var(--fs-label);
  letter-spacing:0.05em;text-transform:uppercase;
  border:1.5px solid transparent;border-radius:2px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform 0.2s var(--ease);
}
.btn--sm{padding:0.6em 1.2em;}
.btn--block{width:100%;}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--btn-bg);color:var(--btn-fg);}
.btn--primary:hover{background:color-mix(in srgb,var(--btn-bg) 82%,var(--bg));}
.btn--ghost{border-color:color-mix(in srgb,var(--text) 30%,transparent);color:var(--text);}
.btn--ghost:hover{background:var(--text);color:var(--bg);border-color:var(--text);}

/* ---------- 4. IMAGERY ----------
   Photos in natural colour; hero only gets the evergreen duotone. */
.duo{position:relative;isolation:isolate;overflow:hidden;}
.duo img{width:100%;height:100%;object-fit:cover;}
#hero .duo{background:var(--green);}
#hero .duo img{filter:grayscale(1) contrast(1.07) brightness(1.04);}
#hero .duo::after{content:'';position:absolute;inset:0;z-index:1;background:var(--green);mix-blend-mode:color;pointer-events:none;}
#hero .duo::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--green) 45%,transparent));mix-blend-mode:multiply;}

/* ---------- 5. HAND-DRAWN MARKS ---------- */
.mark{overflow:visible;pointer-events:none;}
.mark path{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--theme-dur) var(--ease);}
.mark--underline{position:absolute;left:-0.03em;bottom:-0.22em;width:104%;height:0.42em;}
.circled{position:relative;white-space:nowrap;font-style:inherit;}
.mark--circle{position:absolute;inset:-0.32em -0.5em -0.38em -0.5em;width:calc(100% + 1em);height:calc(100% + 0.7em);}
.mark--circle path{stroke-width:2.2;}

/* ---------- 6. THE THREAD ---------- */
#thread{position:absolute;top:0;left:0;width:100%;z-index:5;pointer-events:none;overflow:visible;}
#thread-path{stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:0.6;transition:stroke var(--theme-dur) var(--ease);}

/* ---------- 7. NAV ---------- */
#site-header{position:fixed;inset:0 0 auto 0;z-index:100;transition:transform 0.6s var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
#site-header.header--scrolled{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);box-shadow:0 1px 0 color-mix(in srgb,var(--text) 10%,transparent);}
#site-header.header--hidden{transform:translateY(-100%);}
.nav-inner{display:flex;align-items:center;gap:var(--sp-md);padding:clamp(0.9rem,1.6vw,1.2rem) var(--gutter);}
.nav-logo{display:flex;flex-direction:column;line-height:1.15;font-weight:600;font-size:clamp(1.05rem,1.5vw,1.2rem);letter-spacing:-0.01em;margin-right:auto;}
.nav-logo__sub{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.14em;color:color-mix(in srgb,var(--text) 55%,transparent);}
.nav-links{display:none;gap:clamp(1.2rem,2.2vw,2.6rem);}
.nav-link{position:relative;font-size:var(--fs-label);font-weight:500;text-transform:uppercase;letter-spacing:0.12em;}
.nav-link sup{font-family:var(--font-mono);font-size:0.9rem;color:var(--accent);margin-right:0.35em;}
.nav-link::after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease);}
.nav-link:hover::after,.nav-link--active::after{transform:scaleX(1);}
.nav-cta{display:none;}
.nav-hamburger{display:inline-flex;flex-direction:column;gap:6px;width:30px;padding:6px 0;margin-left:auto;}
.hamburger-line{height:2px;width:100%;background:var(--text);border-radius:2px;transition:transform var(--dur) var(--ease),background var(--theme-dur) var(--ease);}
body.nav-open .hamburger-line:nth-child(1){transform:translateY(8px) rotate(45deg);}
body.nav-open .hamburger-line:nth-child(2){transform:rotate(-45deg);}
.nav-overlay{position:fixed;inset:0;z-index:90;background:var(--green);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur);}
.nav-overlay.is-open{opacity:1;visibility:visible;}
.nav-overlay__links{display:grid;gap:var(--sp-md);text-align:center;}
.nav-overlay__link{font-family:var(--font-display);font-size:clamp(2.2rem,9vw,3.8rem);color:var(--paper);text-transform:uppercase;}
.nav-overlay__link sup{font-family:var(--font-mono);font-size:0.9rem;color:var(--clay-light);}
.nav-overlay__link:hover{color:var(--clay-light);}
.nav-overlay__foot{position:absolute;bottom:var(--sp-lg);left:0;width:100%;text-align:center;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:0.14em;text-transform:uppercase;color:color-mix(in srgb,var(--paper) 55%,transparent);}

/* ---------- 8. HERO ---------- */
#hero{padding:0 var(--gutter);min-height:100svh;display:flex;flex-direction:column;}
.hero-layout{
  /* Mobile-first: simple stack — image, then title, then subtext/actions.
     The overlapping asymmetric composition is restored at 960px+ (see RESPONSIVE). */
  flex:1;display:flex;flex-direction:column;
  padding-top:clamp(4.5rem,9vh,6.5rem);
  padding-bottom:clamp(3.5rem,8vh,5rem);
  position:relative;
}
.hero-title{
  order:2;margin-top:var(--sp-lg);
  font-size:var(--fs-hero);position:relative;z-index:2;
}
.ht-line{display:block;overflow:hidden;padding-bottom:0.06em;margin-bottom:-0.06em;}
.ht-inner{display:inline-block;}
.ht-word{position:relative;display:inline-block;}
.hero-title em{font-family:var(--font-serif);font-style:italic;text-transform:none;color:var(--accent);letter-spacing:-0.01em;}
.kinetic{display:inline-block;}
.hero-figure{
  order:1;
  width:100%;height:min(42vh,340px);z-index:1;
  margin-top:0;
}
.hero-figure img{object-position:72% 40%;}
.hero-foot{
  order:3;z-index:2;
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-md) var(--sp-lg);
  margin-top:var(--sp-lg);
}
.hero-sub{font-size:var(--fs-lead);font-weight:400;line-height:1.4;color:color-mix(in srgb,var(--text) 80%,transparent);max-width:38ch;}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-md);}
.scroll-cue{
  display:none; /* re-enabled at 960px+ — removed on mobile so it can't overlap the hero buttons */
  position:absolute;left:50%;bottom:clamp(1.2rem,3.5vh,2.2rem);transform:translateX(-50%);
  flex-direction:column;align-items:center;gap:0.6rem;
  font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.22em;
  color:color-mix(in srgb,var(--text) 55%,transparent);
}
.scroll-cue__line{width:1px;height:44px;background:var(--accent);transform-origin:top;}
@media (prefers-reduced-motion:no-preference){.scroll-cue__line{animation:cue 2.2s cubic-bezier(0.45,0,0.55,1) infinite;}}
@keyframes cue{0%,100%{transform:scaleY(0.35);opacity:0.4;}50%{transform:scaleY(1);opacity:1;}}

/* ---------- 9. SISTEMA + CONSTELLATION ---------- */
.sistema-layout{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:var(--sp-xl);align-items:center;}
.sistema-copy .lead{margin-block:var(--sp-md);}
.sistema-copy h2{margin-top:var(--sp-sm);}
.constellation{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:1;}
.constellation__svg{width:100%;height:100%;overflow:visible;}
.constellation__links line{stroke:color-mix(in srgb,var(--accent) 55%,transparent);stroke-width:1.4;stroke-dasharray:1 7;stroke-linecap:round;}
.cnode__ring{fill:var(--bg);stroke:color-mix(in srgb,var(--text) 45%,transparent);stroke-width:1.6;stroke-linecap:round;transition:fill var(--theme-dur) var(--ease),stroke var(--theme-dur) var(--ease);}
.cnode text{fill:var(--text);font-family:var(--font-mono);font-size:14px;letter-spacing:0.06em;text-anchor:middle;dominant-baseline:middle;transition:fill var(--theme-dur) var(--ease);}
.cnode--center .cnode__ring{fill:var(--text);stroke:var(--text);}
.cnode--center text{fill:var(--bg);font-family:var(--font-serif);font-style:italic;font-size:26px;letter-spacing:0;}

/* ---------- 10. CHI SONO ---------- */
#chi-sono{padding-top:calc(var(--section-y) * 1.15);}
.chi-layout{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:var(--sp-xl);align-items:center;}
.chi-figure{max-width:min(72vw,420px);margin-inline:auto;aspect-ratio:3/4;}
.chi-copy h2{margin-block:var(--sp-sm) var(--sp-md);}
.pull-quote{
  font-family:var(--font-serif);font-style:italic;font-size:var(--fs-lead);line-height:1.4;
  color:color-mix(in srgb,var(--text) 92%,transparent);max-width:26ch;
  margin-block:var(--sp-lg);padding-left:var(--sp-md);
  border-left:2px solid var(--accent);
}
.chi-copy .link-arrow{margin-top:var(--sp-md);}

/* ---------- 11. PERCORSI ---------- */
#percorsi{padding-inline:0;}
#percorsi .section-head{padding-inline:var(--gutter);}
.percorsi-list{border-top:var(--rule);}
.percorso{position:relative;border-bottom:var(--rule);}
.percorso-link{
  display:grid;grid-template-columns:1fr;gap:var(--sp-sm);
  padding:clamp(2.5rem,7vw,5.5rem) var(--gutter);
  transition:background var(--dur) var(--ease);
}
.percorso-num{
  font-family:var(--font-display);font-size:clamp(3.5rem,8.5vw,8.5rem);line-height:0.8;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--text) 40%,transparent);
  transition:color var(--dur) var(--ease),-webkit-text-stroke var(--dur) var(--ease);
}
.percorso-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-md);}
.percorso-title{font-size:clamp(2.4rem,6vw,5.6rem);transition:transform var(--dur) var(--ease);}
.percorso-tag{
  font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.12em;
  color:color-mix(in srgb,var(--text) 80%,transparent);border:1px solid color-mix(in srgb,var(--text) 28%,transparent);
  border-radius:100px;padding:0.3em 0.9em;white-space:nowrap;
}
.percorso-body{color:color-mix(in srgb,var(--text) 76%,transparent);max-width:52ch;}
.percorso-arrow{font-size:clamp(1.6rem,2.5vw,2.2rem);color:var(--accent);justify-self:end;transition:transform var(--dur) var(--ease);}
.percorso-link:hover{background:color-mix(in srgb,var(--text) 5%,transparent);}
.percorso-link:hover .percorso-num{color:var(--accent);-webkit-text-stroke:1.5px var(--accent);}
.percorso-link:hover .percorso-title{transform:translateX(0.2em);}
.percorso-link:hover .percorso-arrow{transform:translateX(8px);}

/* ---------- 12. A CHI / PUBBLICO — descending cascade ---------- */
.a-chi-figure{width:min(70vw,320px);aspect-ratio:3/4;margin-bottom:var(--sp-lg);}
.pubblico{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(3rem,8vw,6.5rem);}
.pub-item{max-width:44ch;}
.pub-word{font-size:var(--fs-word);line-height:0.9;margin-bottom:var(--sp-sm);}
.pub-num{
  font-family:var(--font-mono);font-size:var(--fs-label);
  color:var(--accent);letter-spacing:0.08em;
  margin-right:0.9em;vertical-align:super;
  transition:color var(--theme-dur) var(--ease);
}
.pub-text{color:color-mix(in srgb,var(--text) 75%,transparent);max-width:36ch;}

/* ---------- 13. COME INIZIARE / STEPS — four clean columns ---------- */
.steps-head{display:grid;grid-template-columns:1fr;gap:var(--sp-lg);align-items:end;}
.steps-figure{width:min(70vw,300px);aspect-ratio:3/4;}
.steps{
  display:grid;grid-template-columns:1fr;gap:var(--sp-lg);
  position:relative;z-index:1;
  border-top:var(--rule);padding-top:var(--sp-lg);
}
.step-num{
  display:inline-block;
  font-family:var(--font-mono);font-size:var(--fs-label);
  color:var(--accent);letter-spacing:0.12em;
  margin-bottom:var(--sp-sm);
  transition:color var(--theme-dur) var(--ease);
}
.step h3{margin-bottom:var(--sp-sm);font-size:clamp(1.4rem,2.2vw,1.9rem);}
.step p{color:color-mix(in srgb,var(--text) 75%,transparent);}

/* ---------- 14. DARK ZONE SECTIONS (bg comes from body) ---------- */
.sport-layout{position:relative;z-index:1;max-width:62ch;margin-left:clamp(0rem,10vw,12rem);}
.sport-layout h2{margin-block:var(--sp-sm) var(--sp-md);}
.sport-layout .lead{margin-bottom:var(--sp-lg);max-width:44ch;}

/* Voci */
.voci{display:grid;grid-template-columns:1fr;gap:var(--sp-xl);align-items:start;}
.voce{position:relative;padding-top:var(--sp-lg);border-top:1px solid color-mix(in srgb,var(--text) 20%,transparent);}
.voce-mark{
  position:absolute;top:0.1em;left:-0.08em;z-index:0;
  font-family:var(--font-serif);font-size:clamp(4.5rem,7vw,7rem);line-height:1;
  color:color-mix(in srgb,var(--accent) 38%,transparent);
}
.voce-text{position:relative;z-index:1;font-family:var(--font-serif);font-style:italic;font-size:var(--fs-lead);line-height:1.4;color:var(--text);margin-bottom:var(--sp-md);}
.voce-author{font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.14em;color:var(--accent);font-style:normal;}

/* ---------- 15. CONTATTI ---------- */
.contatti-layout{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:var(--sp-xl);}
.contatti-info h2{margin-block:var(--sp-sm) var(--sp-lg);}
.contatti-address{font-style:normal;margin-block:var(--sp-md);}
.contatti-studio{font-family:var(--font-display);font-size:var(--fs-h3);text-transform:uppercase;}
.contatti-links{display:flex;flex-direction:column;gap:0.4em;margin-top:var(--sp-md);}
.contatti-figure{width:min(60vw,280px);aspect-ratio:3/4;margin-top:var(--sp-lg);}
.contatti-link{
  font-weight:600;font-size:var(--fs-body);width:fit-content;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--dur) var(--ease);
}
.contatti-link:hover{background-size:100% 1.5px;}
.contact-form{display:grid;gap:var(--sp-md);}
.form-group{display:grid;gap:0.4em;}
.form-group label,.form-group legend{font-size:var(--fs-label);font-weight:500;color:color-mix(in srgb,var(--text) 75%,transparent);}
.contact-form input[type="text"],.contact-form input[type="email"],.contact-form textarea{
  width:100%;padding:0.85em 1em;background:transparent;color:var(--text);
  border:1.5px solid color-mix(in srgb,var(--text) 22%,transparent);border-radius:2px;
  transition:border-color var(--dur) var(--ease);
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:color-mix(in srgb,var(--text) 40%,transparent);}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--text);}
.contact-form textarea{resize:vertical;min-height:7em;}
.form-group--radio{border:0;}
.form-group--radio legend{margin-bottom:0.5em;}
.radio-label,.checkbox-label{display:flex;align-items:baseline;gap:0.6em;font-size:var(--fs-body);font-weight:400;color:var(--text);cursor:pointer;}
.radio-label{margin-bottom:0.4em;}
.radio-label input,.checkbox-label input{accent-color:var(--green);}
.inline-link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.form-error{font-size:var(--fs-label);color:var(--accent);font-weight:500;}
.form-group input[aria-invalid="true"],.form-group textarea[aria-invalid="true"]{border-color:var(--accent);}
.form-success{font-family:var(--font-serif);font-style:italic;font-size:var(--fs-lead);color:var(--text);padding:var(--sp-lg) 0;}

/* ---------- 15b. TO TOP ---------- */
.to-top{
  position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:80;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  font-size:1.1rem;line-height:1;
  color:var(--text);background:var(--bg);
  border:1.5px solid color-mix(in srgb,var(--text) 30%,transparent);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),
             background var(--theme-dur) var(--ease),color var(--theme-dur) var(--ease),
             border-color var(--theme-dur) var(--ease);
}
.to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.to-top:hover{background:var(--text);color:var(--bg);border-color:var(--text);}

/* ---------- 16. FOOTER — tall, closes on the name ---------- */
footer{padding:clamp(4rem,9vw,8rem) var(--gutter) var(--sp-md);border-top:var(--rule);overflow:hidden;}
.footer-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-lg) var(--sp-md);
  margin-bottom:clamp(5rem,14vw,13rem);
}
.footer-head{
  font-family:var(--font-mono);font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:0.16em;
  color:color-mix(in srgb,var(--text) 55%,transparent);
  margin-bottom:0.9em;
}
.footer-item{display:block;width:fit-content;font-size:var(--fs-body);margin-bottom:0.35em;max-width:none;}
a.footer-item{transition:color var(--dur) var(--ease);}
a.footer-item:hover{color:var(--accent);}
.footer-giant{
  font-family:var(--font-display);
  font-size:clamp(3rem,12.2vw,13.5rem);
  line-height:0.82;letter-spacing:0.01em;
  text-transform:uppercase;white-space:nowrap;
  color:var(--text);max-width:none;
  margin-left:-0.03em;
}
.footer-base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-sm);
  border-top:var(--rule);margin-top:var(--sp-md);padding-top:var(--sp-sm);
}
.footer-base p{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:0.08em;text-transform:uppercase;
  color:color-mix(in srgb,var(--text) 55%,transparent);
}

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width:959px){
  #thread{opacity:0.45;}
  /* That bottom-darkening gradient existed to keep the staircase headline
     readable when it sat on top of the photo. On mobile the photo is its
     own block above the text now, so the dark band is no longer needed. */
  #hero .duo::before{display:none;}
}

@media (max-width:767px){
  /* Constellation felt cramped and tiny on phones — reclaim the section's
     side gutter and scale the whole drawing (rings + labels together) up. */
  #sistema{--gutter:clamp(0.6rem,3vw,1.1rem);}
  .constellation{margin-block:var(--sp-md);}
  .constellation__svg{transform:scale(1.22);}
  .cnode text{font-size:17px;}
}

@media (min-width:600px){
  .voci{grid-template-columns:repeat(3,1fr);gap:var(--sp-lg);}
  .voce--push{margin-top:var(--sp-xl);}
  .steps{grid-template-columns:repeat(2,1fr);}
}

@media (min-width:768px){
  .nav-hamburger{display:none;}
  .nav-links{display:flex;}
  .nav-cta{display:inline-flex;}
  .percorso-link{
    grid-template-columns:clamp(6rem,12vw,12rem) 1.1fr 1fr auto;
    column-gap:var(--sp-lg);align-items:center;
  }
  .percorso-head{flex-direction:column;align-items:flex-start;gap:var(--sp-sm);}
}

@media (min-width:960px){
  /* hero becomes the asymmetric composition — title and image overlap by design */
  .hero-layout{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:1fr auto;
    padding-top:clamp(5.5rem,11vh,7.5rem);
  }
  .hero-title{grid-row:1;grid-column:1;align-self:center;order:initial;margin-top:0;}
  .hero-figure{
    grid-row:1 / span 2;grid-column:1;justify-self:end;align-self:start;order:initial;
    width:min(30vw,440px);height:min(72vh,700px);margin-top:clamp(1rem,6vh,4rem);
  }
  .hero-foot{grid-row:2;grid-column:1;order:initial;margin-top:var(--sp-md);}
  .ht-line--step .ht-inner{margin-left:clamp(3rem,13vw,15rem);}
  .ht-line--end .ht-inner{margin-left:clamp(2rem,26vw,30rem);}
  .hero-foot{padding-right:min(32vw,470px);}
  .scroll-cue{display:inline-flex;}

  .sistema-layout{grid-template-columns:0.95fr 1.05fr;gap:var(--sp-lg);}
  .constellation{transform:translateY(clamp(1rem,4vw,3.5rem));}

  .chi-layout{grid-template-columns:0.8fr 1.2fr;gap:clamp(3rem,8vw,8rem);}
  .chi-figure{max-width:min(32vw,440px);margin-inline:0 auto;}
  .chi-copy{padding-right:clamp(0rem,6vw,7rem);}

  /* pubblico cascade — each subject steps toward the right, following the thread down */
  .pub-item:nth-child(2){margin-left:clamp(4rem,16vw,18rem);}
  .pub-item:nth-child(3){margin-left:clamp(8rem,32vw,36rem);}
  .pub-item:nth-child(4){margin-left:clamp(12rem,48vw,54rem);}
  /* the road portrait fills the empty top-right of the cascade */
  .a-chi-figure{
    position:absolute;top:var(--section-y);right:var(--gutter);
    width:min(24vw,360px);margin-bottom:0;z-index:0;
  }

  .steps-head{grid-template-columns:1fr auto;}
  .steps-figure{width:min(22vw,300px);}
  .steps{grid-template-columns:repeat(4,1fr);column-gap:var(--sp-lg);}

  .contatti-layout{grid-template-columns:1.05fr 0.95fr;gap:clamp(4rem,9vw,9rem);align-items:start;}
}

@media (min-width:1280px){
  section{padding-inline:max(var(--gutter),calc((100vw - 1560px)/2));}
  #percorsi{padding-inline:0;}
  #percorsi .section-head{padding-inline:max(var(--gutter),calc((100vw - 1560px)/2));}
  .percorso-link{padding-inline:max(var(--gutter),calc((100vw - 1560px)/2));}
  .a-chi-figure{right:max(var(--gutter),calc((100vw - 1560px)/2));}
  footer{padding-inline:max(var(--gutter),calc((100vw - 1560px)/2));}
}

/* ---------- 18. REDUCED MOTION — always last ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  body{transition:none;}
  .scroll-cue__line{animation:none;}
  #thread-path{opacity:0.45;}
}