/* ============================================================
   tariratta — HOME
   playful / colorful / handmade editorial
============================================================ */

/* HERO */
.play-hero{
  position:relative;
  min-height:76svh;
  overflow:hidden;
  background:#f3efdf;
}
.play-hero-image{
  width:100%;
  height:76svh;
  object-fit:cover;
  filter:saturate(.9) contrast(.96);
}
.play-hero-copy{
  position:absolute;
  left:var(--page-pad);
  bottom:34px;
  color:#fffaf0;
  text-shadow:0 1px 12px rgba(0,0,0,.14);
}
.play-logo{
  margin-bottom:4px;
  font-family:var(--sans);
  font-size:clamp(24px,3.4vw,46px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.06em;
}
.play-hero-copy h1{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(54px,9vw,126px);
  font-weight:700;
  line-height:.78;
  letter-spacing:-.07em;
}
.play-hero-copy p{
  margin:18px 0 0;
  font:600 11px/1.4 var(--sans);
  letter-spacing:.15em;
  text-transform:uppercase;
}

/* NEW PIECES */
.play-new{
  padding:70px 0 78px;
  overflow:hidden;
  background:var(--paper);
}
.play-section-title{
  display:flex;
  align-items:flex-end;
    gap:20px;
  padding:0 var(--page-pad) 24px;
}
.play-section-title h2,
.play-shop-head h2{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(42px,7vw,92px);
  line-height:.8;
  letter-spacing:-.065em;
}
.play-section-title span,
.play-shop-head span{
  font:600 10px/1.4 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.new-pieces-single{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:0 0 8px var(--page-pad);
  scroll-padding-left:var(--page-pad);
  scrollbar-width:none;
}
.new-pieces-single::-webkit-scrollbar{display:none}
.new-pieces-single .card{
  flex:0 0 180px;
  width:180px;
}
.new-pieces-single .card img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}
.new-pieces-single .card-info{padding-top:7px}
.new-pieces-single .card-title{
  margin:0;
  font:600 11px/1.25 var(--sans);
}
.new-pieces-single .card-status{
  margin-top:2px;
  font-size:9px;
}

/* ABOUT */
.play-about{
  padding:76px var(--page-pad) 96px;
  background:#cf4e46;
  color:#fff8e9;
}
.about-copy{
  max-width:650px;
}
.about-copy h2{
  margin:0 0 24px;
  font-family:var(--sans);
  font-size:clamp(30px,4.4vw,58px);
  font-weight:500;
  line-height:1.45;
}
.about-copy p{
  font-family:var(--sans);
  font-size:15px;
  line-height:2;
}
.about-copy .about-en{
  margin-top:34px;
  font:700 clamp(18px,2.4vw,28px)/1 var(--sans);
  letter-spacing:-.025em;
}

/* SHOP */
.play-shop{
  padding:76px var(--page-pad) 96px;
  background:#f3c842;
}
.play-shop-head{
  margin-bottom:30px;
}
.play-shop-head h2{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(42px,7vw,92px);
  font-weight:700;
  line-height:.82;
  letter-spacing:-.065em;
}
.play-shop-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.play-shop-text a{
  display:inline-block;
  font-family:var(--sans);
  font-size:clamp(26px,3.8vw,48px);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.055em;
  text-align:left;
}
.play-shop-text a:hover{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:5px;
}

/* ARCHIVE */
.play-archive{
  display:flex;
    align-items:flex-end;
  gap:30px;
  padding:82px var(--page-pad);
  background:#386aa6;
  color:#fff8e9;
}
.play-archive h2{
  margin:8px 0 0;
  font:700 clamp(56px,10vw,138px)/.78 var(--sans);
  letter-spacing:-.07em;
}
.play-archive a{
  padding-bottom:5px;
  border-bottom:1px solid currentColor;
  font:600 10px/1.4 var(--sans);
  letter-spacing:.12em;
}


/* INSTAGRAM */
.play-instagram{
  padding:78px var(--page-pad) 86px;
  background:var(--paper);
}
.play-instagram-head{
  display:flex;
  align-items:flex-end;
    gap:20px;
  margin-bottom:24px;
}
.play-instagram-head h2{
  margin:0;
  font:700 clamp(42px,7vw,92px)/.82 var(--sans);
  letter-spacing:-.065em;
}
.play-instagram-head a{
  padding-bottom:3px;
  border-bottom:1px solid currentColor;
  font:700 10px/1.3 var(--sans);
  letter-spacing:.1em;
}
.play-instagram-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.play-instagram-grid a{
  display:block;
  overflow:hidden;
}
.play-instagram-grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  transition:transform .3s ease;
}
.play-instagram-grid a:hover img{transform:scale(1.02)}

/* MOBILE */
@media(max-width:760px){
  .play-hero,
  .play-hero-image{height:72svh;min-height:0}
  .play-hero-copy{left:var(--mobile-pad);bottom:24px}
  .play-hero-copy h1{font-size:18vw}
  .play-logo{font-size:21px}
  
  .play-new{padding:48px 0 55px}
  .play-section-title{padding:0 var(--mobile-pad) 18px}
  .play-section-title h2{font-size:12vw}
  .new-pieces-single{padding:0 0 7px var(--mobile-pad);gap:8px;scroll-padding-left:var(--mobile-pad)}
  .new-pieces-single .card{flex:0 0 29vw;width:29vw}

  .play-about{
    grid-template-columns:1fr;
    min-height:0;
    padding:52px var(--mobile-pad) 62px;
  }
    .about-copy h2{font-size:8vw;margin:12px 0 20px}
  .about-copy p{font-size:13px}
  .about-copy .about-en{font-size:18px;margin-top:28px}

  .play-shop{padding:54px var(--mobile-pad) 66px}
  .play-shop-head{margin-bottom:24px}
  .play-shop-head h2{font-size:16vw}
  .play-shop-text{gap:5px}
  .play-shop-text a{
    font-size:7vw;
    line-height:1;
  }

  .play-archive{
    display:block;
    padding:58px var(--mobile-pad) 64px;
  }
  .play-archive h2{font-size:18vw}
  .play-archive a{display:inline-block;margin-top:38px;font-size:9px}

  .play-instagram{
    padding:54px var(--mobile-pad) 62px;
  }
  .play-instagram-head{
    align-items:flex-end;
    margin-bottom:18px;
  }
  .play-instagram-head h2{font-size:13vw}
  .play-instagram-head a{font-size:8px}
  .play-instagram-grid{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
}