/* =========================
   ROOT / VARIABLES
========================= */

:root{
  --black:#0b0b0c;
  --ink:#111;
  --bone:#f2f2f2;
  --muted:rgba(255,255,255,.6);
  --accent:#c49a6c;
}

/* =========================
   RESET + BASE
========================= */

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

html{
  scroll-behavior:smooth;
  background:var(--black);

}

body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont;
  background:var(--black);
  color:var(--bone);
  -webkit-font-smoothing:antialiased;
}

img,
video{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

::selection{
  background:var(--accent);
  color:#000;
}

/* =========================
   SECTIONS ANIMATION
========================= */

section{
  opacity:0;
  transform:translateY(40px);
  transition:1s ease;
}

section.visible{
  opacity:1;
  transform:none;
}

/* =========================
   HERO
========================= */

.hero{
  position:relative;
  height:100vh;
  overflow:hidden;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(1.05) saturate(.9);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
	to bottom,
	rgba(0,0,0,.25),
	rgba(0,0,0,.75)
  );
}

.hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:8vh 8vw;
}

.hero h1{
  font-size:clamp(42px,6vw,96px);
  line-height:1;
  margin:0 0 20px;
}

.hero h1 span{
  color:var(--accent);
}

.hero p{
  font-size:14px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--muted);
}

/* =========================
   BUTTONS
========================= */

.btn-primary{
  margin-top:40px;
  align-self:flex-start;
  padding:14px 34px;
  border:1px solid var(--bone);
  color:var(--bone);
  transition:.3s;
}

.btn-primary:hover{
  background:var(--bone);
  color:var(--black);
}

/* =========================
   MANIFESTO
========================= */

.manifesto{
  padding:18vh 10vw;
  font-size:clamp(26px,3vw,42px);
  line-height:1.25;
}

.manifesto p{
  margin:0 0 1.2em;
  max-width:900px;
}

.manifesto .accent{
  color:var(--accent);
}

/* =========================
   WORK — SCROLL EDITORIAL
========================= */

.work-scroll{
  display:flex;
  flex-direction:column;
  gap:18vh;
  padding:14vh 8vw;
}

.work-row{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:6vw;
  align-items:center;
}

.work-row.reverse{
  grid-template-columns:.8fr 1.2fr;
}

.work-row.reverse .work-image{
  order:2;
}

.work-image{
  position:relative;
  width:100%;
  aspect-ratio:4 / 5;   /* CLAVE */
  max-height:65vh;
  overflow:hidden;
  background:#000;
}

.work-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.work-text{
  max-width:420px;
}

.work-text h3{
  font-size:12px;
  letter-spacing:.35em;
  text-transform:uppercase;
  margin:0 0 20px;
  color:var(--accent);
}

.work-text p{
  font-size:18px;
  line-height:1.6;
  color:var(--muted);
}

/* =========================
   STREAM
========================= */

.stream{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  align-items:center;
  padding:16vh 8vw;
}

.stream h2{
  font-size:clamp(36px,4vw,72px);
  line-height:1.05;
  margin:0 0 20px;
}

.stream p{
  color:var(--muted);
  max-width:420px;
}

.stream a{
  display:inline-block;
  margin-top:40px;
  padding:14px 30px;
  border:1px solid var(--accent);
  color:var(--accent);
  transition:.3s;
}

.stream a:hover{
  background:var(--accent);
  color:#000;
}

.stream iframe{
  width:100%;
  height:420px;
  border:none;
  filter:contrast(1.05);
}

/* =========================
   YOUTUBE
========================= */

.youtube{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:8vw;
  align-items:center;
  padding:20vh 8vw;
  background:
    radial-gradient(
      800px 400px at 20% 20%,
      rgba(196,154,108,.12),
      rgba(0,0,0,0)
    );
}

.youtube h2{
  font-size:clamp(38px,4.5vw,82px);
  line-height:1.05;
  margin:0 0 24px;
}

.youtube p{
  color:var(--muted);
  max-width:460px;
}

.youtube a{
  display:inline-block;
  margin-top:42px;
  padding:14px 32px;
  border:1px solid var(--bone);
  color:var(--bone);
  transition:.3s;
}

.youtube a:hover{
  background:var(--bone);
  color:var(--black);
}

/* YOUTUBE PLAYER */

.yt-player{
  width:100%;
  aspect-ratio:16 / 9;
  margin-bottom:30px;
}

.yt-player iframe{
  width:100%;
  height:100%;
  border:none;
}

/* THUMBNAILS */

.yt-thumbs{
  display:flex;
  gap:16px;
}

.yt-thumbs button{
  padding:0;
  border:none;
  background:none;
  cursor:pointer;
  opacity:.6;
  transition:.3s;
}

.yt-thumbs button:hover,
.yt-thumbs button.active{
  opacity:1;
}

.yt-thumbs img{
  width:120px;
  aspect-ratio:16 / 9;
  object-fit:cover;
}

/* =========================
   ABOUT
========================= */

.about{
  padding:14vh 10vw;
  max-width:900px;
}

.about h2{
  font-size:clamp(42px,5vw,82px);
  margin:0 0 20px;
}

.about p{
  font-size:18px;
  line-height:1.6;
}

.about .muted{
  color:var(--muted);
  margin-top:40px;
}

/* =========================
   CONTACT
========================= */

.contact{
  padding:18vh 8vw;
  border-top:1px solid rgba(255,255,255,.1);
}

.contact h2{
  font-size:clamp(36px,4vw,64px);
  margin:0 0 30px;
}

.contact a{
  font-size:20px;
  border-bottom:1px solid var(--accent);
  padding-bottom:4px;
}

.contact .social{
  margin-top:60px;
  display:flex;
  gap:30px;
}

.contact .social a{
  font-size:12px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--muted);
}

.contact .social a:hover{
  color:var(--bone);
}

/* =========================
   FOOTER
========================= */

.site-footer{
  padding:40px 8vw;
  font-size:12px;
  color:var(--muted);
}

/* =========================
   SCROLL
========================= */

.scroll-cue{
  position:absolute;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  width:20px;
  height:36px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:12px;
  opacity:.7;
}

.scroll-cue span{
  position:absolute;
  left:50%;
  top:6px;
  width:4px;
  height:4px;
  background:var(--bone);
  border-radius:50%;
  transform:translateX(-50%);
  animation:scroll-dot 2s infinite;
}

@keyframes scroll-dot{
  0%{ opacity:0; transform:translate(-50%,0); }
  30%{ opacity:1; }
  60%{ opacity:1; transform:translate(-50%,14px); }
  100%{ opacity:0; }
}

/* =========================
   RESPONSIVE — TABLET
========================= */

@media (max-width: 1200px){

  .hero h1{
	font-size:clamp(38px,7vw,72px);
  }

  .manifesto{
	padding:14vh 8vw;
  }

  .work-grid{
	gap:8vw;
  }

  .stream{
	gap:6vw;
  }
}

/* =========================
   RESPONSIVE — MOBILE
========================= */

@media (max-width: 900px){

  /* HERO */
  .hero-content{
	padding:12vh 6vw;
  }

  .hero p{
	letter-spacing:.18em;
  }

  .btn-primary{
	margin-top:28px;
  }

  /* MANIFESTO */
  .manifesto{
	padding:12vh 6vw;
	font-size:clamp(22px,5vw,32px);
  }
  
  /* YOUTUBE */
  .youtube{
    grid-template-columns:1fr;
    padding:14vh 6vw;
  }

@media (max-width:900px){
  
  .work-scroll{
    gap:12vh;
    padding:10vh 6vw;
  }
  
  .work-row{
    grid-template-columns:1fr;
  }
  
  .work-row.reverse .work-image{
    order:0;
  }
  
  .work-image{
    max-height:50vh;
  }
  
  .work-text{
    max-width:none;
  }

  /* STREAM */
  .stream{
	grid-template-columns:1fr;
	padding:12vh 6vw;
  }

  .stream iframe{
	height:260px;
  }

  .stream h2{
	font-size:clamp(30px,8vw,48px);
  }

  /* ABOUT */
  .about{
	padding:12vh 6vw;
  }

  .about h2{
	font-size:clamp(36px,9vw,56px);
  }

  /* CONTACT */
  .contact{
	padding:14vh 6vw;
  }

  .contact .social{
	flex-direction:column;
	gap:20px;
  }
}

/* =========================
   RESPONSIVE — SMALL MOBILE
========================= */

@media (max-width: 480px){

  .hero h1{
	font-size:clamp(32px,9vw,48px);
  }

  .hero p{
	font-size:12px;
  }

  .btn-primary{
	padding:12px 26px;
	font-size:13px;
  }

  .manifesto{
	font-size:clamp(20px,6vw,28px);
  }

  .stream iframe{
	height:220px;
  }

  .contact a{
	font-size:18px;
  }
}

/* =========================
   TOUCH DEVICES (IMPORTANTE)
========================= */

@media (hover: none){

  .work-item:hover img,
  .work-item:hover video{
	opacity:1;
  }
}