@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Mulish:wght@300;400;600&family=Oswald:wght@500&family=Playfair+Display&display=swap');

:root{
  --dark:#2e2e2e;
  --band:#505050;
  --purple:#9b51a0;
  --gold:#e5b53a;
  --teal:#2ba89c;
  --mauve:rgba(128,108,114,.78);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Mulish',Helvetica,Arial,sans-serif;color:#fff;background:#fff;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* HERO */
.hero{
  position:relative;
  min-height:640px;
  background:#d9c3b8 url('https://static.wixstatic.com/media/11062b_bb70a172b2764be882b270d90458cb18~mv2_d_4000_6000_s_4_2.jpg/v1/fill/w_1600,h_1000,al_c,q_85/sfondo.jpg') center/cover no-repeat;
}
.hero-inner{max-width:920px;margin:0 auto;padding:0 20px;position:relative}
.email{
  display:inline-block;margin-top:50px;
  font-family:'Oswald',sans-serif;font-size:1.25rem;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}

/* menu */
.menu{margin-top:34px}
.menu > ul{list-style:none;display:flex;flex-wrap:wrap}
.menu li{position:relative}
.menu > ul > li > a{
  display:block;padding:0 12px;
  font:700 13px/16px Arial,Helvetica,sans-serif;color:#fff;
  border-left:1px solid rgba(255,255,255,.9);
}
.menu > ul > li:first-child > a{border-left:0;padding-left:0;color:#222}
.menu a:hover{text-decoration:underline}
.menu ul ul{
  display:none;position:absolute;top:100%;left:0;z-index:20;
  list-style:none;min-width:150px;padding:8px 0;margin-top:6px;
  background:rgba(50,50,50,.92);
}
.menu li:hover > ul{display:block}
.menu ul ul a{display:block;padding:6px 14px;font:700 13px Arial,sans-serif;color:#fff}

.social{display:flex;gap:9px;align-items:center;margin-top:14px}
.social img{width:20px;height:20px}
.social .etsy{color:#e8642c;font-family:'Playfair Display',serif;font-size:.85rem}

.portfolio{
  position:absolute;right:20px;top:112px;
  background:var(--teal);color:#222;
  font:600 12px Arial,sans-serif;padding:3px 8px;
}

.hero-box{
  max-width:740px;margin:120px auto 0;
  background:var(--mauve);padding:20px 26px 34px;
  box-shadow:0 18px 22px -14px rgba(0,0,0,.45);
}
.hero-box h1{
  font:700 2rem/1.25 'Montserrat',sans-serif;
  letter-spacing:.2em;text-decoration:underline;
  text-underline-offset:5px;color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.35);
}

/* CAROUSEL */
.carousel-wrap{
  position:relative;max-width:900px;margin:-34px auto 0;padding:0 40px;
  background:transparent;
}
.carousel{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:20px;
}
.carousel::-webkit-scrollbar{display:none}
.carousel img{
  flex:0 0 210px;width:210px;height:210px;border-radius:50%;
  object-fit:cover;scroll-snap-align:start;
}
.arrow{
  position:absolute;top:95px;width:36px;height:36px;border:0;
  background:none;color:#bbb;font-size:2.4rem;cursor:pointer;line-height:1;
}
.arrow:hover{color:#777}
.arrow.prev{left:0}.arrow.next{right:0}

/* WELCOME STRIP */
.strip{
  position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  height:470px;margin-top:20px;
}
.strip img{width:100%;height:100%;object-fit:cover}
.strip .txt{background:#2f2f2f;display:flex;align-items:flex-start;padding:55px 18px}
.strip h2{font:700 1.7rem/1.3 'Mulish',sans-serif;color:#fff}
.strip .go{
  position:absolute;left:15.3%;top:41%;width:24.5%;height:14%;
  display:flex;align-items:center;justify-content:space-between;padding:0 14px;
  background:linear-gradient(120deg,#1f4a58,#2c6471 50%,#1f4a58);
  font:700 .75rem 'Mulish',sans-serif;letter-spacing:.18em;color:#fff;
}
.strip .go b{font-size:1.8rem;font-weight:300}

/* BAND */
.band{background:var(--band);padding:14px 20px 12px}
.band p{max-width:620px;margin:0 auto;text-align:center;color:#eee;font-size:.98rem}
.band em{font-style:normal;color:var(--gold)}

/* TILES */
.tiles{max-width:980px;margin:50px auto 30px;padding:0 20px}
.tiles h2{color:var(--purple);font:300 3.4rem/1 'Mulish',sans-serif;margin-bottom:26px}
.tile-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px}
.tile img{width:100%;aspect-ratio:326/566;object-fit:cover}
.tile span{display:block;margin-top:8px;color:var(--purple);font-size:1.25rem;font-weight:400}

/* CONTATTI */
.cta{text-align:center;margin:40px 0 24px}
.cta a{
  display:inline-block;background:var(--dark);border:3px double #8d8d8d;
  padding:10px 90px;color:#fff;font:1rem 'Playfair Display',serif;
  letter-spacing:.12em;text-decoration:underline;text-underline-offset:3px;
}

/* BOTTOM STRIP */
.photos{max-width:980px;margin:0 auto 40px;padding:0 20px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin}
.photos img{height:199px;width:auto;flex:0 0 auto}

footer{background:var(--dark);padding:34px 20px 120px}
footer p{max-width:920px;margin:0 auto;font-size:.7rem;color:#bbb}

@media (max-width:760px){
  .hero-box h1{font-size:1.35rem}
  .strip{grid-template-columns:repeat(2,1fr);height:auto}
  .strip img{height:260px}
  .strip .txt{padding:30px 18px}
  .strip .go{display:none}
  .portfolio{top:20px}
  .email{margin-top:60px}
  .cta a{padding:10px 40px}
}