/* Reset */ 
body, html{ font-family: 'Surt', Arial, Helvetica, sans-serif; line-height: 1; font-size: 16px; letter-spacing: -0.02em; box-sizing: border-box;margin: 0;padding: 0;}*,*:before,*:after{ box-sizing: border-box; }h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0 0 1rem 0;padding: 0;}ol,ul{padding-left: 20px;line-height: 1.5;}img{height: auto;}h1{font-size: 4rem;} h2{font-size: 3rem;} h3{font-size: 2rem;} h4{font-size: 1rem;} h5{font-size: 0.8rem;} h6{font-size: 0.6rem;}a{text-decoration:none} h1,h2,h3,h4,h5,h6{font-weight:700}

body{background: #1c1c1b;color:#f4eeea;font-size: 12px;font-weight: 400;padding-top: 60px;}

.container{overflow: hidden;}

p{font-size: 16px;line-height: 0.9;text-align: justify;}

@font-face {
    font-family: 'Surt';
    src: url('fonts/Surt-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block;
  }
@font-face {
    font-family: 'Surt';
    src: url('fonts/Surt-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: block;
  }


/*button*/

.button{
    border-radius: 20px;
    background: transparent;
    border: 1px solid #f4eeea;
    display: inline-block;
    padding: 3px 12px 1px 12px;
    color: #f4eeea;
    transition: background .2s ease, color .2s ease;
}

.button:hover{
    background: #f4eeea;
    color: #1c1c1b;
}

/*header*/

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    z-index: 1000;
    background: transparent;
}

.logo{margin-right: auto;display: inline-block;}

/*menu*/

.menu ul{padding: 0;margin: 0;}
.menu li{display: inline-block;}
.menu a{padding: 0px 10px;display: block;line-height: 2;color: #f4eeea;}
.menu a:hover {color: #8b8681;}

.hamburger{display: none;}


@media (max-width: 768px) {

  .header{padding-left: 10px;padding-right: 10px;position: relative;}
  .menu{position: absolute;top: 36px;right: 60px;width: 100%;text-align: right;}
  .menu li{width: 100%;}
  .hamburger {
    display: none;
  }
  
  @media (max-width: 768px) {
    .hamburger {
      display: block;
      position: absolute;
      top: 40px;
      right: 3px;
      width: 20px;
      height: 20px;
      cursor: pointer;
      z-index: 1100;
    }
  
    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #f4eeea;
      position: relative;
      transition: background-color 0.3s ease;
    }
  
    .hamburger.open .dot {
      background-color: transparent;
    }
  
    .hamburger.open .dot::before,
    .hamburger.open .dot::after {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 2px;
      background-color: #f4eeea;
      transform-origin: center;
    }
  
    .hamburger.open .dot::before {
      transform: translateY(-1px) rotate(45deg);
    }
  
    .hamburger.open .dot::after {
      transform: translateY(-1px) rotate(-45deg);
    }
  }

}

/*hero*/

.hero{
    display: flex;
}

.hero__text{width: 100%;padding: 10px 10px 200px;}
.hero__img{width: 100%;display: block;width: calc(100% - 20px); margin: 0 auto;}
.hero__img{width: 100%;padding: 10px 10px 0px 10px;box-sizing: border-box;}
.hero__img img {width: 100%;display: block;}


@media (max-width: 768px) {
    .hero{flex-wrap: wrap;}
    .hero__text,
    .hero__img{width: 100%;}
}

/*cover*/

.cover-1{height: 60vh;width: calc(100% - 20px);display: flex;justify-content: left;
background:#1c1c1b;
background-size: cover;margin: 10px 10px 10px 10px;}

.cover-2{height: 60vh;width: calc(100% - 20px);display: flex;justify-content: left;
background: linear-gradient(0deg, rgba(28,28,27,0) 0%, rgba(28,28,27,0) 100%), url(img-4.jpg) no-repeat center center;
background-size: cover;margin: 10px 10px 10px 10px;}

.cover-3{height: 60vh;width: calc(100% - 20px);display: flex;justify-content: left;
background: linear-gradient(0deg, rgba(28,28,27,0) 0%, rgba(28,28,27,0) 100%), url(img-5.jpg) no-repeat center center;
background-size: cover;margin: 10px 10px 10px 10px;}

.cover-4{height: 60vh;width: calc(100% - 20px);display: flex;justify-content: left;
background:#1c1c1b;
background-size: cover;margin: 10px 10px 10px 10px;}

.cover-5{height: 60vh;width: calc(100% - 20px);display: flex;justify-content: left;
    background: linear-gradient(0deg, rgba(28,28,27,0) 0%, rgba(28,28,27,0) 100%), url(img-11.jpg) no-repeat center center;
    background-size: cover;margin: 10px 10px 10px 10px;}

.cover-1, .cover-2, .cover-3, .cover-4, .cover-5 {
    position: relative; /* Necessario per il posizionamento assoluto del link */
}

.cover-click {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Assicura che il link sia cliccabile */
}

.cover__text{text-align: left;max-width: 900px;color: #F4EEEA;}


/*utilities*/

.img_res{height: auto;width: 100%;}
.text-center{text-align: center;margin-left: 50px;}

.color-1 {color: #F4EEEA;}
.color-2 {color: #f4eeea;}

.pt-1 {padding-top: 10px;}
.pt-2 {padding-top: 20px;}
.pt-3 {padding-top: 80px;}
.pt-4 {padding-top: 120px;}

.pl-1 {padding-left: 10px;}
.pr-1 {padding-right: 10px;}

.pb-1 {padding-bottom: 10px;}
.pb-2 {padding-bottom: 20px;}
.pb-3 {padding-bottom: 80px;}
.pb-4 {padding-bottom: 6px;}

.grid {display: flex;flex-wrap: wrap;gap: 10px;margin-left: 10px;margin-right: 10px;}
.grid-1 {display: flex;flex-wrap: wrap;gap: 10px;margin-left: 10px;margin-right: 10px;}

.col-25 {width: calc(25% - 7.5px);padding: 10px 0 0 0;box-sizing: border-box;}
.col-50 {width: calc(50% - 5px);box-sizing:border-box;padding-bottom: 3px;}
.col-40 {width: 40%;}
.col-33 {width: calc(33.33% - 6.66px);padding-top: 50px;padding-bottom: 50px;box-sizing: border-box;}
.col-100 {width: 100%;text-align: center;padding-top: 10px;padding-bottom: 10px;}

.img-small {max-width: 100%;height: auto;display: block;margin: 10px 0px 10px 0px;}
.margined-text {margin-top: 10px;margin-right: 0px;margin-bottom: 10px;margin-left: 0px}
.centered-text {text-align: center;}


*,
*:before,
*:after {
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .col-25,
    .col-50,
    .col-40,
    .col-33,
    .col-100{width: 100%;}

    .reverse{flex-direction: column-reverse;}
}

@media (max-width: 768px) {
  .header {
    padding-left: 10px;
    padding-right: 10px;
    position: fixed; /* Mantieni l'header fisso */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
  }

  .menu {
    position: fixed; /* Cambia da absolute a fixed */
    top: 100px; /* Regola per stare sotto l'header */
    right: -60px; /*Sposta il menu fuori dalla porzione visibile dello schermo*/
    width: auto; /* Evita che occupi tutta la larghezza */
    text-align: right;
    padding: -5px;
    transition: all 1s cubic-bezier(.215, .61, .355, 1);
  }

  .open .menu{right: 0;}

  .menu li {
    width: 100%;
    display: inline-block;
  }
}

/**footer**/

.footer{background: #111111;}

.footer p {
    line-height: 0.7; /* Riduce lo spazio tra i paragrafi */
    margin-bottom: 5px; /* Diminuisce il margine inferiore */
}


/* Sticky footer SOLO nella pagina contatti */
.contact-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  .contact-page .container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .contact-page .footer {
    margin-top: auto;
  }



  .contact-link {
  color: #f4eeea;
  transition: color 0.3s ease;
}

.contact-link:hover {
  color: #f4eeea;
}

.contact-link-footer {
    color: #f4eeea;
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
  }
  
  .contact-link-footer:hover {
    text-decoration: underline;
  }

/* video covers */
.cover-1, .cover-4 { overflow: hidden; }
.cover-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
}
.cover__text{ position:relative; z-index:5; }

/* big hero claim */
.hero__text--home h1{
  font-size: clamp(80px, 16vw, 240px);
  line-height: 0.81;
  letter-spacing: -0.03em;
  max-width: 15ch;
}
.hero__text{ padding-bottom: 120px; }
@media (max-width: 768px){
  .hero__text--home h1{ font-size: clamp(52px, 15vw, 120px); }
}


/* about page: hero on top, content block anchored to bottom */
.about-page{ display:flex; flex-direction:column; min-height:100vh; }
.about-page .container{ flex:1; display:flex; flex-direction:column; }
.about-page .grid{ margin-top:auto; }

/* dark minimal footer hierarchy */
.footer{ padding: 10px 10px 2px; }
.footer p{ color:#f4eeea; font-size:12px; letter-spacing:-0.02em; line-height:1.1; margin-bottom:2px; }
.footer a.contact-link-footer{ color:#f4eeea; }
.footer a.contact-link-footer:hover{ color:#f4eeea; text-decoration:underline; }
/* marquee spacing on dark */
.scroll-container{ padding-top:20px; padding-bottom:20px; }

/* home: hero claim top, logo marquee pinned to bottom of first screen */
.home-first{
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 10px;
}
.hero__text--home{ padding-bottom: 0; }
.home-first .scroll-container{ padding-top: 0; padding-bottom: 0; }

/* footer: text 10px inside the box */
.footer .grid-1{ margin-left:0; margin-right:0; }
.footer .col-25{ padding-top:0; }

/* anchor page end: no rubber-band past the footer */
html{ background:#1c1c1b; }
html, body{ overscroll-behavior-y: none; }

/* The Cape logo: 20% smaller in marquee */
.scroll-content img[src="logo-cape.svg"]{ height:80%; }

/* contact: scatter letters on hover */
.contact-link .ch{ display:inline-block; transition: transform .4s cubic-bezier(.2,.85,.25,1); will-change: transform; }

/* project meta line */
.proj-meta{ font-size:12px; letter-spacing:-0.02em; text-transform:uppercase; color:#8b8681; margin:-4px 0 18px; }

.footer{ text-transform:uppercase; } /*footer-caps*/

.proj-year{ font-size:12px; letter-spacing:-0.02em; text-transform:uppercase; color:#8b8681; margin:10px 0 12px; }

/* header: complementary (difference) blend over any backdrop */
.header{ mix-blend-mode: difference; }
.header .menu a{ color:#fff; }
.header .menu a:hover{ color:#c8c8c8; }
.header .button{ color:#fff; border-color:#fff; }
.header .button:hover{ background:#fff; color:#000; }
.header .dot{ background-color:#fff; }

/* trailing cursor dot (difference blend) */
.cursor-dot{ position:fixed; top:0; left:0; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%; background:#fff; pointer-events:none; z-index:9999; mix-blend-mode:difference; opacity:0; transition:opacity .3s ease; }

/* project pages: text sticky, tall image scrolls */
.project-page .container{ overflow: visible; }
.project-page .grid{ align-items: flex-start; }
.project-page .grid.reverse > .col-50:last-child{
  position: sticky;
  top: 60px;
  align-self: flex-start;
}
@media (max-width:768px){
  .project-page .grid.reverse > .col-50:last-child{ position: static; top:auto; }
}

/* project pages: fixed footer only on desktop */
@media (min-width:769px){
  .project-page .footer{ position: fixed; left:0; right:0; bottom:0; z-index:900; }
}

/* project pages: exact 10px between last media and fixed footer */
.project-page .grid.reverse > .col-50:first-child{ padding-bottom:0; }
.project-page .img-small:last-child{ margin-bottom:0; }

.cover-6{height: 60vh;width: calc(100% - 20px);display: flex;justify-content: left;background:#171519 url(jmod-cover.jpg) no-repeat center center;background-size: cover;margin: 10px 10px 10px 10px;}
.cover-7{height: 60vh;width: calc(100% - 20px);display: flex;justify-content: left;background:#141310;overflow:hidden;margin: 10px 10px 10px 10px;}
.cover-6, .cover-7{ position: relative; }

.contact-page .col-100{ padding-top:14px; padding-bottom:14px; }

/* contact: responsive value sizing (no wrap on mobile) */
.contact-page h2{ font-size: clamp(15px, 5.4vw, 48px); }
@media (max-width:600px){
  .contact-page .col-100{ padding-top:8px; padding-bottom:8px; }
}

/* responsive cover titles (work list) */
.cover__text h2{ font-size: clamp(20px, 4.6vw, 44px); line-height:1.05; }
@media (max-width:600px){
  .cover__text h2{ font-size: clamp(18px, 6vw, 30px); }
}

/* mobile: disable header blend (fixes tap on iOS) + tappable menu only when open */
@media (max-width:768px){
  .menu{ pointer-events: none; }
  .open .menu{ pointer-events: auto; }
}

/* footer mobile 2x2 */
@media (max-width:768px){
  .footer .col-25{ width: calc(50% - 5px); }
  .footer p{ font-size:10px; white-space:nowrap; }
}


/* mobile final fixes v3 */
@media (max-width:768px){
  .project-page .img-small:last-child{ margin-bottom:10px; }
  /* contact: bottom-align info next to the footer (no big gap, no scroll) */
  .contact-page .footer{ margin-top:0; }
  .contact-page .grid.pt-2{ margin-top:auto; padding-top:12px; }
  .contact-page .grid.pb-3{ padding-bottom:16px; }
  .contact-page .col-100{ padding-top:3px; padding-bottom:3px; }
  .contact-page p.centered-text{ font-size:13px; }
}