
/* Rebuild of kalinpetrov.com — original look, no WordPress */
@font-face{
  font-family:'Mont-HeavyDEMO';
  src:url('../assets/fonts/Mont-HeavyDEMO.otf') format('opentype');
  font-display:swap;
}
:root{ --gray:#f1f1f2; --black:#000; }
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Roboto',sans-serif;background:#fff;color:#000;display:flex;flex-direction:column;min-height:100vh}
a{color:#000;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1140px;margin:0 auto;padding:0 16px;width:100%}

/* ---------- Header ---------- */
.site-header{background:#fff;display:flex;align-items:center;justify-content:space-between;padding:14px 18px 14px 8px;position:relative;z-index:50}
.site-title{font-family:'Mont-HeavyDEMO','Arial Black',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(40px,4vw,102px);line-height:1;letter-spacing:0;display:block}
.site-sub{font-weight:800;text-transform:uppercase;font-size:clamp(11px,0.8vw,20px);line-height:1;margin:2px 0 0 4px}
.main-nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,66px)}
.menu{list-style:none;display:flex;align-items:center;gap:clamp(18px,1.6vw,42px)}
.menu > .menu-item > a{font-weight:800;text-transform:uppercase;font-size:clamp(16px,1.5vw,38px);line-height:1.5;color:#000;white-space:nowrap}
.menu > .menu-item > a:hover{color:#444}
.caret{font-size:.45em;vertical-align:middle;margin-left:4px}
.has-sub{position:relative}
.sub-menu{list-style:none;display:none;position:absolute;top:100%;left:0;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.15);min-width:280px;padding:6px 0;z-index:60}
.has-sub:hover .sub-menu,.has-sub.open .sub-menu{display:block}
.sub-menu a{display:block;font-weight:800;text-transform:uppercase;font-size:clamp(13px,0.9vw,22px);padding:12px 22px;white-space:nowrap}
.sub-menu a:hover{background:var(--gray)}
.social-icons{display:flex;align-items:center;gap:10px}
.soc-icon{width:clamp(20px,1.15vw,30px);height:clamp(20px,1.15vw,30px);display:block}
.social-icons a:hover .soc-icon{opacity:.75}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.nav-toggle span{display:block;width:26px;height:3px;background:#000}

/* ---------- Main ---------- */
.site-content{flex:1 0 auto;background:var(--gray)}
body.home .site-content{background:#fff}

/* ---------- Home carousel (light gray mat, white chevrons) ---------- */
.carousel-section{position:relative;background:var(--gray);padding:0}
.carousel{width:75%;margin:0 auto;overflow:hidden;position:relative}
.track{display:flex;transition:transform .5s ease}
.slide{flex:0 0 100%}
.slide img{width:100%;height:auto;aspect-ratio:1920/870;object-fit:cover}
.slide img.pos-up{object-position:50% 22%;transform:scale(1.04)}
.slide{position:relative;overflow:hidden}
.slide-grad{position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}
.slide-cap{position:absolute;left:4%;bottom:7%;color:#fff;text-align:left}
.cap-awards{font-family:'Mont-HeavyDEMO','Arial Black',sans-serif;font-weight:900;font-size:clamp(18px,2.08vw,42px);line-height:1;text-transform:uppercase;margin-bottom:.28em}
.cap-awards span{opacity:.85}
.cap-title{font-size:clamp(9px,0.92vw,18px);font-weight:800;letter-spacing:.22em;text-transform:uppercase;margin-bottom:.35em}
.cap-line{font-size:clamp(7px,0.68vw,14px);font-weight:500;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.car-arrow{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;cursor:pointer;padding:0;z-index:5;width:40px;height:34px;display:flex;align-items:center;justify-content:center}
.car-arrow .chevron{height:34px;width:auto;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.25))}
.car-arrow:hover{opacity:.8}
.car-arrow.prev{left:10px}
.car-arrow.next{right:10px}
.scroll-down{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:40px;height:24px;display:flex;align-items:center;justify-content:center;z-index:5}
.scroll-svg{width:40px;height:auto;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.scroll-down:hover{opacity:.8}

/* ---------- Category links ---------- */
.cat-links{background:#fff;display:flex;justify-content:center;align-items:center;gap:clamp(48px,11vw,300px);padding:clamp(34px,3.5vw,90px) 16px}
.cat-links a{font-weight:800;text-transform:uppercase;font-size:clamp(12px,0.85vw,22px);letter-spacing:.02em}
.cat-links a:hover{color:#555}

/* ---------- Work grid ---------- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:100%}
.tile{display:block;overflow:hidden;position:relative}
.tile img{width:100%;height:auto;aspect-ratio:848/360;object-fit:cover;transition:transform .3s ease-out}
.tile img.pos-up{object-position:50% 22%;transform:scale(1.04)}
.tile:hover img.pos-up{transform:scale3d(1.12,1.12,1)}
.tile::after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .3s ease-out;pointer-events:none}
.tile:hover img{transform:scale3d(1.1,1.1,1)}
.tile:hover::after{opacity:.4}

/* ---------- Project page ---------- */
.project{padding:clamp(24px,3vw,48px) 16px clamp(40px,4vw,80px)}
.video-frame{width:min(1120px,92vw);aspect-ratio:16/9;margin:0 auto;background:#000}
.video-frame iframe{width:100%;height:100%;display:block}
.project-info{text-align:center;text-transform:uppercase;font-size:clamp(13px,0.85vw,22px);line-height:1.5;margin-top:clamp(18px,1.6vw,40px)}
.proj-title{margin-bottom:1.5em}
.credit-line{margin:0}

/* ---------- Filmography ---------- */
.filmography{padding:clamp(24px,2vw,50px) 16px clamp(50px,4vw,100px);text-transform:uppercase;font-size:clamp(13px,0.8vw,20px);line-height:1.55}
.filmo-heading{margin:2em 0 1em}
.filmography .filmo-heading:first-child{margin-top:0}
.filmo-entry{margin-bottom:1em}
.imdb-badge{display:inline-block;height:1.15em;width:auto;vertical-align:text-bottom;margin-left:6px}

/* ---------- About ---------- */
.gray-band{background:var(--gray)}
body.band-page .site-content{background:#fff}
.about-text{padding:clamp(20px,1.8vw,45px) 16px;text-transform:uppercase;font-size:clamp(13px,0.8vw,20px);line-height:1.55}
.about-text p{margin-bottom:1em}
.about-text p:last-child{margin-bottom:0}
.about-text a{font-weight:400}
.about-text a:hover{text-decoration:underline}

/* ---------- Contact ---------- */
.contact-band{padding:clamp(90px,10vw,260px) 16px clamp(110px,12vw,300px)}
.contact-text{text-align:center;text-transform:uppercase;font-size:clamp(14px,0.85vw,22px);line-height:1.5}
.contact-text p{margin-bottom:1.5em}
.contact-text p:last-child{margin-bottom:0}
.contact-text a:hover{text-decoration:underline}

/* ---------- Footer ---------- */
.site-footer{flex-shrink:0;background:#fff;text-align:center;padding:clamp(18px,1.8vw,45px) 16px}
.copyright{font-size:clamp(12px,0.75vw,19px);margin-bottom:1.4em}
.disclaimer{font-size:clamp(11px,0.7vw,18px)}

/* ---------- Responsive ---------- */
@media(max-width:991px){
  .site-header{padding:10px 14px 10px 10px}
  .nav-toggle{display:flex;padding:12px}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:12px 20px 26px;box-shadow:0 8px 16px rgba(0,0,0,.12);gap:12px}
  .main-nav.open{display:flex}
  .menu{flex-direction:column;align-items:flex-start;gap:2px;width:100%}
  .menu > .menu-item{width:100%;border-bottom:1px solid var(--gray)}
  .menu > .menu-item > a{display:block;font-size:19px;line-height:1.4;padding:13px 0}
  .sub-menu{position:static;box-shadow:none;display:none;padding:0 0 8px 20px;min-width:0}
  .has-sub.open .sub-menu{display:block}
  .sub-menu a{font-size:15px;padding:10px 0}
  .social-icons{padding-top:6px}
  .social-icons .soc-icon{width:30px;height:30px}
  .site-title{font-size:clamp(34px,8vw,58px)}
  .site-sub{font-size:12px}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .carousel{width:86%}
  .cat-links{flex-wrap:wrap;gap:26px;padding:30px 16px}
  .cat-links a{font-size:13px}
  .project{padding:20px 12px 48px}
  .project-info{font-size:13px}
  .filmography{font-size:13px;padding:22px 16px 48px}
  .about-text{font-size:13px;padding:22px 16px}
  .contact-band{padding:80px 16px 100px}
  .contact-text{font-size:14px}
  .copyright{font-size:12px}
  .disclaimer{font-size:11px}
}
@media(max-width:575px){
  .site-title{font-size:clamp(30px,10.5vw,40px)}
  .work-grid{grid-template-columns:1fr}
  .video-frame{width:100%}
  .carousel{width:100%}
  .car-arrow{width:32px;height:26px}
  .car-arrow .chevron{height:26px}
  .car-arrow.prev{left:4px}
  .car-arrow.next{right:4px}
  .scroll-down{bottom:8px}
  .scroll-svg{width:30px}
  .slide-cap{left:5%;bottom:9%}
  .cap-awards{font-size:17px}
  .cap-title{font-size:10px;letter-spacing:.18em}
  .cap-line{font-size:8px}
  .slide-grad{height:70%}
  .cat-links{gap:18px 26px;padding:26px 14px}
  .contact-band{padding:64px 16px 80px}
}
