/* =========================================================
   ABRAMO ROSSI — "In registro"
   Il sito come un foglio in macchina: quattro lastre CMYK.
   Colori e font: modificare solo le variabili qui sotto.
   ========================================================= */
:root{
  --paper:#EEF0EC;      /* carta patinata, freddo */
  --paper-2:#E3E6E0;    /* carta in ombra */
  --c:#00A0E0;          /* ciano di processo */
  --m:#E6007E;          /* magenta di processo */
  --y:#FFE100;          /* giallo di processo */
  --k:#141416;          /* nero */
  --grey:#7C807A;       /* grigio 50% K */
  --ink:var(--k);

  --f-display:"Archivo", "Arial Narrow", sans-serif;
  --f-body:"Instrument Sans", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, monospace;

  --gutter:clamp(16px, 3.2vw, 48px);
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{
  background:var(--paper);color:var(--k);
  font-family:var(--f-body);font-size:clamp(15px,1.05vw,17px);line-height:1.55;
  overflow-x:hidden;overflow-x:clip;
}
body.is-loading{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.mono{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
:focus-visible{outline:2px solid var(--m);outline-offset:4px}
::selection{background:var(--y);color:var(--k)}

/* -------- LOADER -------- */
.loader{
  position:fixed;inset:0;z-index:100;background:var(--paper);
  display:grid;place-items:center;align-content:center;gap:28px;
}
.loader__mark{width:84px;height:84px}
.loader__mark svg{width:100%;height:100%;fill:none;stroke:var(--k);stroke-width:1.4}
.loader__bars{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:min(320px,70vw)}
.bar{height:10px;background:var(--paper-2);overflow:hidden}
.bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left}
.bar--c i{background:var(--c)}.bar--m i{background:var(--m)}.bar--y i{background:var(--y)}.bar--k i{background:var(--k)}
.loader__label{display:flex;justify-content:space-between;width:min(320px,70vw);color:var(--grey)}
.loader__count{color:var(--k)}

/* -------- CURSORE -------- */
.cursor{
  position:fixed;left:0;top:0;z-index:90;pointer-events:none;
  width:44px;height:44px;margin:-22px 0 0 -22px;
  display:none;
}
.cursor svg{width:100%;height:100%;fill:none;stroke:var(--k);stroke-width:1.3;transition:transform .35s var(--ease)}
.cursor__label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.4);opacity:0;
  background:var(--k);color:var(--paper);padding:6px 10px;white-space:nowrap;
  transition:opacity .25s, transform .35s var(--ease);
}
.has-cursor .cursor{display:block}
.has-cursor, .has-cursor a, .has-cursor button{cursor:none}
.cursor.is-view svg{transform:scale(2.2) rotate(45deg)}
.cursor.is-view .cursor__label{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor.is-link svg{transform:scale(.55)}

/* -------- PROGRESSO CMYK -------- */
.progress{position:fixed;left:0;right:0;top:0;height:4px;z-index:60;display:grid;grid-template-columns:repeat(4,1fr)}
.progress i{transform:scaleX(0);transform-origin:left}
.progress .c{background:var(--c)}.progress .m{background:var(--m)}.progress .y{background:var(--y)}.progress .k{background:var(--k)}

/* -------- HEADER -------- */
.head{
  position:fixed;left:0;right:0;top:4px;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px var(--gutter);
  mix-blend-mode:multiply;
}
.head{transition:color .3s}
.head--dark{mix-blend-mode:normal;color:var(--paper)}
.head--dark .regmark i{mix-blend-mode:screen}
.head--dark .regmark .k{color:var(--paper)}
.head--dark .head__cta{color:var(--k)}
.head__brand{display:flex;align-items:center;gap:12px;font-weight:600}
.regmark{position:relative;width:26px;height:26px}
.regmark i{
  position:absolute;inset:0;border-radius:50%;border:1.6px solid;mix-blend-mode:multiply;
}
.regmark i::before,.regmark i::after{content:"";position:absolute;background:currentColor}
.regmark i::before{left:50%;top:-5px;bottom:-5px;width:1.6px;margin-left:-.8px}
.regmark i::after{top:50%;left:-5px;right:-5px;height:1.6px;margin-top:-.8px}
.regmark .c{color:var(--c)}.regmark .m{color:var(--m)}.regmark .y{color:var(--y)}.regmark .k{color:var(--k)}
.head__name{font-size:.95rem;letter-spacing:-.01em}
.head__nav{display:flex;gap:clamp(14px,2.4vw,34px);font-size:.9rem;font-weight:500}
.head__nav a{position:relative}
.head__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--m);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.head__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.head__cta{padding:0 2px;background:linear-gradient(var(--y),var(--y)) 0 85%/100% 40% no-repeat}

/* -------- HERO -------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  padding:110px var(--gutter) 40px;
  display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);
  overflow:hidden;
}
.crop{position:absolute;width:40px;height:40px;fill:none;stroke:var(--k);stroke-width:1}
.crop--tl{left:calc(var(--gutter) - 12px);top:70px}
.crop--tr{right:calc(var(--gutter) - 12px);top:70px}
.crop--bl{left:calc(var(--gutter) - 12px);bottom:10px}
.crop--br{right:calc(var(--gutter) - 12px);bottom:10px}
.hero__slug{display:flex;justify-content:space-between;color:var(--grey);padding-top:4px}
.hero__name{position:relative;align-self:center;display:grid;min-width:0}
.plate{
  grid-area:1/1;
  font-family:var(--f-display);font-weight:900;font-variation-settings:"wdth" 125;
  font-size:var(--name-size, 14vw);line-height:.8;letter-spacing:-.035em;text-transform:uppercase;
  display:flex;flex-direction:column;
  mix-blend-mode:multiply;will-change:transform;
}
.plate span{display:block;width:max-content}
.plate span:nth-child(2){align-self:flex-end}
/* il nero del nome è fatto dalle tre lastre sovrapposte (C×M×Y in multiply = nero) */
.plate--c{color:var(--c)}.plate--m{color:var(--m)}.plate--y{color:var(--y)}.plate--k{color:transparent;mix-blend-mode:normal}
.hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.hero__intro{max-width:34ch;font-size:clamp(16px,1.35vw,21px);line-height:1.45}
.hero__intro em{font-style:normal;background:linear-gradient(var(--y),var(--y)) 0 88%/100% 38% no-repeat}
.hero__scroll{display:flex;align-items:center;gap:10px;white-space:nowrap}
.hero__scroll-mark{display:inline-block;font-size:1.4rem;line-height:1}

/* -------- MANIFESTO -------- */
.manifesto{padding:clamp(100px,18vh,200px) var(--gutter) clamp(90px,14vh,160px);max-width:1500px}
.manifesto__eyebrow{color:var(--grey);margin-bottom:28px}
.manifesto__text{
  font-family:var(--f-display);font-variation-settings:"wdth" 100;font-weight:500;
  font-size:clamp(28px,4.3vw,72px);line-height:1.06;letter-spacing:-.025em;
}
.manifesto__text .word{display:inline-block;opacity:.14}
.hl{font-weight:800;position:relative}
.hl--c{color:var(--c)}.hl--m{color:var(--m)}
.hl--y{background:linear-gradient(var(--y),var(--y)) 0 82%/100% 32% no-repeat}

/* -------- INDICE LAVORI -------- */
.index{position:relative;padding:40px var(--gutter) clamp(90px,14vh,170px)}
.index__head{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.index__title{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(40px,6.6vw,112px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase}
.w-anim{display:inline-block;font-variation-settings:"wdth" 62}
.index__note{max-width:38ch;color:#3c3f3b}
.index__list{border-top:1.5px solid var(--k)}
.index__row{
  position:relative;display:grid;grid-template-columns:48px 52px 1fr auto;align-items:center;gap:16px;
  padding:22px 0;border-bottom:1.5px solid var(--k);overflow:hidden;isolation:isolate;
}
.index__row::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);
}
.index__row:hover::before,.index__row:focus-visible::before{transform:scaleY(1)}
.index__row:hover, .index__row:focus-visible{color:var(--paper)}
.index__row[href="#marchi"]:hover, .index__row[href="#marchi"]:focus-visible{color:var(--k)}
.index__chip{width:38px;height:38px;border-radius:50%;background:var(--ink);transition:transform .5s var(--ease)}
.index__row:hover .index__chip{transform:scale(.4)}
.index__row:hover .index__chip{background:currentColor}
.index__name{font-family:var(--f-display);font-weight:700;font-variation-settings:"wdth" 100;font-size:clamp(26px,4vw,64px);line-height:1;letter-spacing:-.02em;transition:font-variation-settings .5s var(--ease), letter-spacing .5s var(--ease)}
.index__row:hover .index__name{font-variation-settings:"wdth" 125;letter-spacing:-.04em}
.index__meta{color:inherit;opacity:.7;text-align:right}
.index__preview{
  position:fixed;left:0;top:0;z-index:40;width:260px;aspect-ratio:4/5;pointer-events:none;
  opacity:0;transform:scale(.6);overflow:hidden;
  box-shadow:-6px 0 0 var(--c), 6px 0 0 var(--m), 0 6px 0 var(--y);
}
.index__preview img{width:100%;height:100%;object-fit:cover}

/* -------- CAPITOLI: elementi comuni -------- */
.plate-letter{
  display:block;font-family:var(--f-display);font-weight:900;font-variation-settings:"wdth" 125;
  font-size:clamp(90px,13vw,220px);line-height:.75;color:var(--ink);mix-blend-mode:multiply;
  margin-bottom:18px;
}
.chapter-title{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 80;font-size:clamp(38px,5vw,84px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase}
.chapter-text{max-width:36ch;margin-top:22px;color:#33362f}

/* -------- C: CORSA ORIZZONTALE -------- */
.run{position:relative;overflow:hidden;background:var(--paper)}
.run__track{
  display:flex;align-items:center;gap:clamp(36px,5vw,90px);
  height:100vh;height:100svh;padding:90px var(--gutter) 40px;width:max-content;
}
.run__intro{width:min(420px,78vw);flex:none}
.run__hint{margin-top:34px;color:var(--grey)}
.sheet{flex:none;position:relative;cursor:zoom-in}
.sheet img{
  width:100%;height:auto;
  transition:box-shadow .45s var(--ease), transform .45s var(--ease);
}
.sheet:hover img{box-shadow:-9px -4px 0 var(--c), 9px 4px 0 var(--m), 0 10px 0 var(--y);transform:translateY(-4px)}
.sheet--lg{width:clamp(260px,34vw,560px)}
.sheet--md{width:clamp(220px,25vw,420px)}
.sheet--sm{width:clamp(180px,18vw,300px)}
.sheet--tall{width:clamp(180px,19vw,330px)}
.sheet--wide{width:clamp(320px,44vw,760px)}
.sheet--high{align-self:flex-start;margin-top:4vh}
.sheet--low{align-self:flex-end;margin-bottom:4vh}
/* crocini di taglio attorno ai fogli */
.sheet::before,.sheet::after{
  content:"";position:absolute;width:18px;height:18px;pointer-events:none;
  border:solid var(--k);opacity:.6;
}
.sheet::before{left:-12px;top:-12px;border-width:0 1px 1px 0}
.sheet::after{right:-12px;top:-12px;border-width:0 0 1px 1px}
figcaption{display:flex;flex-direction:column;gap:2px;margin-top:12px;font-size:.84rem;line-height:1.3}
figcaption b{font-weight:600}
figcaption span{font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--grey)}
.run__end{flex:none;width:30vw;display:grid;gap:10px;align-content:center}
.run__end span{font-family:var(--f-display);font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(60px,9vw,160px);line-height:.8;color:var(--m);mix-blend-mode:multiply}

/* -------- M: IL MURO -------- */
.wall{position:relative;background:var(--paper-2)}
.wall__inner{
  height:100vh;height:100svh;display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;gap:var(--gutter);
  padding:90px var(--gutter) 40px;align-items:center;
}
.wall__count{margin-top:34px;display:flex;gap:8px;flex-wrap:wrap}
.wall__num{color:var(--m)}
.wall__board{position:relative;height:min(78vh,760px);display:grid;place-items:center}
.poster{
  grid-area:1/1;position:relative;width:auto;height:min(72vh,720px);cursor:zoom-in;
  box-shadow:0 1px 0 rgba(0,0,0,.08), 0 22px 40px -18px rgba(20,20,22,.45);
}
.poster img{height:100%;width:auto}
.poster--land{height:auto;width:min(100%,680px)}
.poster--land img{width:100%;height:auto}

/* -------- Y: MARCHI -------- */
.brands{padding:clamp(100px,16vh,180px) 0 clamp(80px,12vh,140px)}
.brands__head{padding:0 var(--gutter);margin-bottom:clamp(70px,12vh,140px)}
.plate-letter{}
.case{padding:0 var(--gutter);margin-bottom:clamp(90px,16vh,180px)}
.case__head{display:grid;grid-template-columns:1fr 1.2fr;column-gap:var(--gutter);align-items:end;margin-bottom:48px}
.case__head .mono{grid-column:1/-1;color:var(--grey);margin-bottom:10px}
.case__title{font-family:var(--f-display);font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(56px,10vw,180px);line-height:.82;letter-spacing:-.04em}
.case__sub{max-width:44ch;font-size:clamp(16px,1.3vw,20px)}
.case__fans{display:flex;justify-content:center;gap:clamp(10px,2vw,28px);margin:20px 0 70px;perspective:900px}
.fan{width:clamp(110px,22vw,340px);cursor:zoom-in;box-shadow:0 26px 40px -22px rgba(0,0,0,.45)}
.case__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,6vw,110px);max-width:1100px;margin:0 auto}
.sheet-static{cursor:zoom-in}
.sheet-static--down{margin-top:18vh}
.case__banner{cursor:zoom-in;margin-bottom:20px}
.case__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.case__grid figure{cursor:zoom-in;overflow:hidden}
.case__grid img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .7s var(--ease)}
.case__grid figure:hover img{transform:scale(1.06)}
.case__wide{cursor:zoom-in;overflow:hidden}
.case__wide img{width:100%}
.marquee{overflow:hidden;padding:26px 0;margin:-30px 0 clamp(80px,12vh,130px);background:var(--y);transform:rotate(-2deg) scale(1.04)}
.marquee__row{display:flex;width:max-content}
.marquee__row span{
  font-family:var(--f-display);font-weight:900;font-variation-settings:"wdth" 110;
  font-size:clamp(40px,6vw,100px);line-height:1;text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;padding-right:.3em;
}
.logos{padding:0 var(--gutter)}
.logos__label{color:var(--grey);margin-bottom:18px}
.logos__sheet{cursor:zoom-in;max-width:1200px;margin:0 auto;outline:1.5px solid var(--k);outline-offset:18px}

/* -------- K: SPAZI -------- */
.space{position:relative;background:var(--k);color:var(--paper)}
.space__pin{position:relative;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.space__head{position:absolute;left:var(--gutter);top:90px;z-index:2}
.space .plate-letter{color:var(--paper);mix-blend-mode:normal}
.space__frame{position:absolute;inset:0;clip-path:inset(30% 34% 30% 34%);cursor:zoom-in}
.space__frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.35)}
.space__caption{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:40px;z-index:2;
  display:grid;grid-template-columns:1fr 1.4fr;gap:var(--gutter);align-items:end;
  text-shadow:0 1px 18px rgba(0,0,0,.5);
}
.space__big{font-family:var(--f-display);font-weight:700;font-variation-settings:"wdth" 90;font-size:clamp(22px,2.6vw,42px);line-height:1.05;letter-spacing:-.015em}

.rooms{
  background:var(--k);color:var(--paper);
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  padding:clamp(90px,14vh,160px) var(--gutter);
}
.rooms figcaption span{color:#9da19b}
.room{cursor:zoom-in;overflow:hidden}
.room img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .8s var(--ease)}
.room:hover img{transform:scale(1.05)}
.room--a{grid-column:1/8}
.room--b{grid-column:8/13;margin-top:22vh}
.room--c{grid-column:2/6;margin-top:-8vh}
.room--c img{aspect-ratio:1}
.room--d{grid-column:7/13;margin-top:6vh}

/* -------- WEB -------- */
.web{background:var(--k);color:var(--paper);padding:0 var(--gutter) clamp(100px,16vh,180px)}
.web__head{margin-bottom:60px}
.web__head .mono{color:#9da19b;margin-bottom:14px}
.web__title{font-family:var(--f-display);font-weight:900;font-variation-settings:"wdth" 110;font-size:clamp(48px,9vw,160px);line-height:.85;letter-spacing:-.035em;text-transform:uppercase}
.web__title .w-anim{color:var(--c)}
.web__stack{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:clamp(20px,3vw,48px)}
.browser{display:block;background:#202024;border-radius:10px;overflow:hidden;transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.browser:nth-child(even){margin-top:12vh}
.browser:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - clamp(10px,1.5vw,24px));margin-top:6vh}
.browser__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;color:#9da19b;font-size:.68rem}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:#3a3a40}
.browser__bar i:nth-child(1){background:var(--m)}.browser__bar i:nth-child(2){background:var(--y)}.browser__bar i:nth-child(3){background:var(--c);margin-right:10px}
.browser img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top}
.browser:hover{transform:translateY(-8px);box-shadow:-8px 0 0 var(--c), 8px 0 0 var(--m), 0 10px 0 var(--y)}

/* -------- CURRICULUM: foglio di stampa -------- */
.cv{padding:clamp(110px,16vh,180px) var(--gutter) clamp(110px,16vh,180px);background:var(--paper-2)}
.cv__top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;max-width:1240px;margin:0 auto 56px}
.cv__eyebrow{color:var(--grey);margin-bottom:14px}
.cv__title{font-family:var(--f-display);font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(48px,8.4vw,150px);line-height:.85;letter-spacing:-.045em;text-transform:uppercase}
.cv__dl{display:inline-flex;align-items:center;gap:12px;background:var(--k);color:var(--paper);padding:14px 22px;font-weight:600;transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.cv__dl .mono{background:var(--y);color:var(--k);padding:3px 7px}
.cv__dl:hover{transform:translateY(-3px);box-shadow:-6px 0 0 var(--c), 6px 0 0 var(--m), 0 6px 0 var(--y)}

.cv__stage{max-width:1240px;margin:0 auto;perspective:1600px}
.cv__sheet{
  position:relative;background:#FCFCFA;color:var(--k);
  padding:clamp(28px,5vw,72px) clamp(22px,5vw,76px) clamp(28px,4vw,56px);
  box-shadow:0 2px 0 rgba(0,0,0,.04), 0 40px 80px -40px rgba(20,20,22,.45);
}
.cv__crop{position:absolute;width:34px;height:34px;fill:none;stroke:var(--k);stroke-width:1;opacity:.55}
.cv__crop--tl{left:-26px;top:-26px}.cv__crop--tr{right:-26px;top:-26px}
.cv__crop--bl{left:-26px;bottom:-26px}.cv__crop--br{right:-26px;bottom:-26px}
.cv__bars{position:absolute;right:14px;top:40px;display:grid;gap:3px;width:10px}
.cv__bars i{height:22px;background:var(--v)}
.cv__roller{position:absolute;left:-10px;right:-10px;top:0;height:14px;display:grid;grid-template-rows:repeat(4,1fr);z-index:3;pointer-events:none;opacity:0}
.cv__roller i:nth-child(1){background:var(--c)}.cv__roller i:nth-child(2){background:var(--m)}.cv__roller i:nth-child(3){background:var(--y)}.cv__roller i:nth-child(4){background:var(--k)}

.cv__head{display:grid;grid-template-columns:minmax(150px,230px) 1fr auto;gap:clamp(20px,3.5vw,48px);align-items:center;padding-bottom:clamp(28px,4vw,48px);border-bottom:1.5px solid var(--k)}
.cv__head .halftone{width:100%;max-width:none}
.cv__name{font-family:var(--f-display);font-weight:900;font-variation-settings:"wdth" 110;font-size:clamp(44px,6vw,96px);line-height:.88;letter-spacing:-.035em}
.cv__role{margin-top:18px;font-family:var(--f-mono);font-size:.95rem;letter-spacing:.32em;text-transform:uppercase}
.cv__role2{margin-top:4px;font-size:.92rem;text-transform:uppercase;letter-spacing:.06em;color:#3c3f3b}
.cv__contacts{display:grid;gap:4px;margin-top:18px;padding-left:14px;border-left:2px solid var(--k);font-weight:500}
.cv__contacts a:hover{color:var(--m)}
.cv__spec{background:var(--k);color:var(--paper);align-self:end;min-width:190px}
.cv__spec li{padding:14px 20px;font-weight:600;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.cv__spec li+li{border-top:1px solid rgba(238,240,236,.4)}

.cv__cols{display:grid;grid-template-columns:minmax(220px,.82fr) 1.6fr;gap:clamp(24px,4vw,64px);padding-top:clamp(28px,4vw,48px)}
.cv__aside{border-right:1.5px solid rgba(20,20,22,.18);padding-right:clamp(20px,3vw,44px)}
.cv__block+.cv__block{margin-top:26px;padding-top:24px;border-top:1px solid rgba(20,20,22,.18)}
.cv__label{font-family:var(--f-mono);font-size:.78rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;margin-bottom:12px}
.cv__aside p,.cv__aside li{font-size:.93rem;line-height:1.5;color:#2c2e2a}
.cv__aside b{color:var(--k);font-weight:600}
.cv__mt{margin-top:12px}
.cv__small{font-size:.7rem;color:var(--m)}
.cv__dots{display:grid;gap:4px}
.cv__dots li{position:relative;padding-left:18px}
.cv__dots li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--m)}
.cv__dots li:nth-child(4n+1)::before{background:var(--c)}.cv__dots li:nth-child(4n+3)::before{background:var(--y)}.cv__dots li:nth-child(4n+4)::before{background:var(--k)}
.cv__soft{display:grid;gap:3px;font-weight:500}
.cv__lang{width:100%;border-collapse:collapse;margin-top:6px;font-size:.88rem}
.cv__lang th{text-align:left;font-weight:400;padding:6px 0;border-top:1px solid rgba(20,20,22,.15)}
.cv__lang td{text-align:right;font-family:var(--f-mono);font-weight:500;color:var(--m);border-top:1px solid rgba(20,20,22,.15)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cv__jobs{position:relative;display:grid;gap:34px;padding-left:28px}
.cv__jobs::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1.5px;background:rgba(20,20,22,.3)}
.job{position:relative}
.job::before{content:"";position:absolute;left:-28px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px #FCFCFA}
.job__date{color:#5a5d58}
.job__title{margin-top:8px;font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 100;font-size:clamp(19px,1.7vw,25px);line-height:1.12;letter-spacing:-.01em;text-transform:uppercase}
.job__company{margin-top:4px;font-weight:500;color:#3c3f3b}
.job__intro{margin-top:10px;max-width:62ch;color:#262823}
.job__list{display:grid;gap:6px;margin-top:12px;max-width:64ch}
.job__list li{position:relative;padding-left:20px;font-size:.94rem;line-height:1.5;color:#33362f}
.job__list li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;background:var(--ink)}
.job__list b{font-weight:600;background:linear-gradient(var(--y),var(--y)) 0 88%/100% 35% no-repeat}

.cv__foot{margin-top:clamp(34px,5vw,60px);padding-top:20px;border-top:1.5px solid var(--k);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.cv__foot p{font-size:.72rem;line-height:1.5;color:#5a5d58;max-width:90ch}

/* -------- CONTATTI -------- */
.contact{background:var(--k);color:var(--paper);padding:clamp(110px,18vh,200px) var(--gutter) 30px;overflow:hidden}
.contact__eyebrow{color:#9da19b;margin-bottom:24px}
.contact__title{font-family:var(--f-display);font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(48px,11vw,210px);line-height:.82;letter-spacing:-.045em;text-transform:uppercase}
.contact__title span{display:block}
.contact__title span:nth-child(2){color:var(--y);padding-left:8vw}
.contact__mail{
  display:inline-block;margin-top:clamp(50px,9vh,100px);
  font-family:var(--f-display);font-weight:600;font-variation-settings:"wdth" 90;font-size:clamp(24px,4.4vw,74px);letter-spacing:-.02em;
  border-bottom:3px solid var(--m);padding-bottom:6px;word-break:break-all;
}
.contact__mail:hover{color:var(--c)}
.contact__row{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:40px}
.contact__link{font-weight:500;border-bottom:1px solid rgba(238,240,236,.35);padding-bottom:2px;transition:border-color .3s}
.contact__link:hover{border-color:var(--y)}
.foot{margin-top:clamp(90px,14vh,150px);display:grid;gap:16px}
.colorbar{display:grid;grid-template-columns:repeat(12,1fr);height:22px}
.colorbar i{background:var(--v)}
.foot .mono{color:#9da19b}

/* -------- LIGHTBOX -------- */
.lightbox{position:fixed;inset:0;z-index:95;background:rgba(20,20,22,.94);display:grid;place-items:center;padding:60px var(--gutter) 40px}
.lightbox[hidden]{display:none}
.lightbox figure{max-width:min(1200px,100%);max-height:100%;display:grid;gap:14px;justify-items:center}
.lightbox img{max-height:calc(100vh - 150px);width:auto;max-width:100%;object-fit:contain}
.lightbox figcaption{color:var(--paper);margin:0}
.lightbox__close{position:absolute;top:18px;right:var(--gutter);background:none;border:0;color:var(--paper);cursor:pointer;padding:8px}

/* -------- RESPONSIVE -------- */
@media (max-width: 900px){
  .index__head,.case__head{grid-template-columns:1fr}
  .case__sub{margin-top:16px}
  .index__row{grid-template-columns:28px 30px 1fr;gap:10px}
  .index__chip{width:22px;height:22px}
  .index__meta{grid-column:3;text-align:left}
  .index__preview{display:none}
  /* --- mobile: tutto in verticale --- */
  .run__track{flex-direction:column;align-items:stretch;width:auto;height:auto;gap:44px;padding:80px var(--gutter) 70px}
  .run__intro{width:auto}
  .run__hint,.run__end{display:none}
  .sheet,.sheet--lg,.sheet--md,.sheet--sm,.sheet--tall,.sheet--wide{width:100%;margin:0}
  .sheet--sm,.sheet--tall{width:72%}
  .sheet:nth-of-type(even){align-self:flex-end}
  .sheet--high,.sheet--low{align-self:auto}
  .sheet::before,.sheet::after{display:none}
  .wall__inner{height:auto;grid-template-columns:1fr;padding:80px var(--gutter) 70px;gap:36px}
  .wall__count{display:none}
  .wall__board{display:flex;flex-direction:column;gap:34px;height:auto}
  .poster,.poster--land{height:auto;width:100%}
  .poster img,.poster--land img{width:100%;height:auto}
  .poster:nth-child(even){width:88%;align-self:flex-end}
  .poster--land{height:auto;width:100%}
  .case__grid{grid-template-columns:1fr 1fr}
  .sheet-static--down{margin-top:8vh}
  .rooms{grid-template-columns:1fr}
  .room--a,.room--b,.room--c,.room--d{grid-column:1;margin-top:0}
  .web__stack{grid-template-columns:1fr}
  .browser:nth-child(even), .browser:last-child:nth-child(odd){margin-top:0}
  .browser:last-child:nth-child(odd){width:auto;justify-self:stretch}
  .cv__head{grid-template-columns:120px 1fr}
  .cv__spec{grid-column:1/-1;display:flex;min-width:0}
  .cv__spec li{flex:1}
  .cv__spec li+li{border-top:0;border-left:1px solid rgba(238,240,236,.4)}
  .cv__cols{grid-template-columns:1fr}
  .cv__aside{border-right:0;padding-right:0}
  .cv__main{border-top:1.5px solid var(--k);padding-top:28px}
  .cv__foot{grid-template-columns:1fr}
  .cv__bars{display:none}
  .cv__head{grid-template-columns:1fr;gap:18px}
  .cv__head .halftone{max-width:150px}
  .cv__name{font-size:clamp(40px,13vw,64px)}
  .cv__contacts a{overflow-wrap:anywhere}
  .space__pin{height:auto;display:block;padding:80px 0 50px}
  .space__head{position:static;padding:0 var(--gutter);margin-bottom:28px}
  .space__frame{position:relative;inset:auto;aspect-ratio:4/5;margin:0 var(--gutter)}
  .space__caption{position:static;grid-template-columns:1fr;gap:10px;padding:24px var(--gutter) 0;text-shadow:none}
  .rooms{padding-top:40px;gap:34px}
  .head__nav a:not(.head__cta){display:none}
  .hero__foot{flex-direction:column;align-items:flex-start}
  .run__end{width:60vw}
}
@media (max-width: 560px){
  .hero__slug{flex-direction:column;gap:4px}
  .plate{font-variation-settings:"wdth" 68;line-height:.84}
  .hero__name{align-self:center}
  .manifesto{padding-top:80px;padding-bottom:70px}
  .brands{padding-top:80px}
  .case{margin-bottom:80px}
  .case__head{margin-bottom:28px}
  .case__pair{gap:14px}
  .sheet-static--down{margin-top:40px}
  .case__grid{gap:10px}
  .marquee{margin-bottom:70px}
  .logos__sheet{outline-offset:8px}
  .index__row{padding:18px 0}
  .head{padding:12px var(--gutter)}
  .cv{padding-top:80px;padding-bottom:80px}
  .contact{padding-top:90px}
  .contact__title{font-variation-settings:"wdth" 75;font-size:13.5vw}
  .contact__title span:nth-child(2){padding-left:0}
  .case__fans{gap:6px}
  .fan{width:31vw}
  .space__caption .space__big{font-size:20px}
}

@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) *{transition:none !important;animation:none !important}
  html:not(.force-motion) .manifesto__text .word{opacity:1}
  html:not(.force-motion) .space__frame{clip-path:none}
  html:not(.force-motion) .space__frame img{transform:none}
}

/* niente scorrimento laterale: ciò che sporge (manifesti inclinati, nastro, crocini) viene tagliato al bordo */
main{overflow-x:clip}
.wall,.brands,.space,.rooms,.web,.cv{overflow-x:clip}
