/* Studio Bon — start page */

/* Fonts */
@font-face {
  font-family: 'Circular Std';
  src: url('../fonts/CircularStd-Book.woff2') format('woff2'),
       url('../fonts/CircularStd-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Circular Std';
  src: url('../fonts/CircularStd-Bold.woff2') format('woff2'),
       url('../fonts/CircularStd-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#f7f7f7;
  --fg:#0b0b0b;
  --muted:#7a7a7a;
  --line:#e5e5e5;
  --max:1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 16px/1.5 'Circular Std', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  letter-spacing:0;
}

/* layout helpers */
.container{max-width:var(--max); margin:80px auto; padding:0 20px}
.section-title{
  font-family:'Circular Std', sans-serif;
  font-size:40px;
  font-weight:400;
  line-height:110%;
  letter-spacing:-0.03em;
  margin:0 0 24px;
  padding-bottom:8px;
  border-bottom:11px solid #000;
  display:inline-block;
  width: calc(50% - 13px);
}

h1,h2,h3,h4{font-weight:700; margin:0 0 12px}
h3{font-size:18px}
p{margin:0 0 12px; color:#222}
a{color:inherit; text-decoration:none; border-bottom:1px solid transparent}
a:hover{border-bottom-color:currentColor}

/* header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px;
  margin: 0 auto;
}
.logo{
  display:block;
  line-height:0;
}
.logo img{
  height:40px;
  width:auto;
  display:block;
}
.zap{
  display:block;
  line-height:0;
}
.zap img{
  height:60px;
  width:auto;
  display:block;
}

/* hero */
.hero{overflow:hidden}
.hero-copy{margin-bottom:40px; overflow:hidden}
.hero-copy h1{
  font-size:140px;
  line-height:140px;
  font-weight:400;
  letter-spacing:-0.05em;
  margin-bottom:24px;
  position:relative;
}
.hero-copy h1 .underline{
  position:relative;
}
.hero-copy h1 .underline::after{
  content:'';
  position:absolute;
  left:100%;
  bottom:32px;
  width:9999px;
  height:4px;
  background:#000;
}
.hero-copy p{
  max-width:90ch;
  color:#0b0b0b;
  font-size:40px;
  line-height:110%;
  font-weight:400;
  letter-spacing:-0.04em;
}
.hero-media{position:relative; display:block; width:100%; overflow:hidden; margin-bottom:80px}
.hero-media img{width:100%; height:auto; object-fit:cover; display:block}
.hero-media .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  background:rgba(255,255,255,.95); color:#000; border-radius:50%; width:64px; height:64px;
  display:grid; place-items:center; font-size:20px; box-shadow:0 4px 20px rgba(0,0,0,.15);
}

/* cases grid */
.grid-cases{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
}
.card{
  display:block;
  position:relative;
  overflow:hidden;
}
.card img{display:block; width:100%; height:100%; object-fit:cover}
.caption{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:24px;
  color:#fff;
  font-family:'Circular Std', sans-serif;
  font-size:20px;
  line-height:100%;
  letter-spacing:-0.04em;
  font-weight:400;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.caption span,
.caption strong{
  font-size:20px;
  line-height:100%;
  letter-spacing:-0.04em;
  font-weight:400;
  color:#fff;
}
.caption::after{
  content:'';
  display:block;
  width:100%;
  height:11px;
  background:#fff;
  margin-top:12px;
}

/* two-column sections */
.two-col{
  display:grid; gap:24px;
  grid-template-columns: 2fr 1fr;
}
.section-block .rule{margin:8px 0 14px}
.text-link{font-weight:500}

/* magazine section */
.magazine-section{
  display:grid;
  grid-template-columns: 1fr 33%;
  gap: 8px;
  align-items:start;
}
.magazine-headers{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:calc(100% - 8px);
}
.magazine-header-item h3{
  margin:0 0 8px;
  font-family:'Circular Std', sans-serif;
  font-size:40px;
  font-weight:400;
  line-height:110%;
  letter-spacing:-0.03em;
}
.magazine-header-item .rule{
  width:100%;
  height: 11px;
  background:#000;
  margin:0;
}
.magazine-content{
  width:100%;
}
.magazine-content p{
  font-family:'Circular Std', sans-serif;
  font-size:40px;
  font-weight:400;
  line-height:110%;
  letter-spacing:-0.03em;
  color:#0b0b0b;
  margin:0;
}

/* instagram section */
.instagram-section{
  display:grid;
  grid-template-columns: 1fr 66.67%;
  gap: 8px;
  align-items:start;
}
.instagram-labels{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}
.instagram-label-item h3{
  margin:0 0 8px;
  font-family:'Circular Std', sans-serif;
  font-size:40px;
  font-weight:400;
  line-height:110%;
  letter-spacing:-0.03em;
}
.instagram-label-item p{
  margin:0 0 8px;
  font-family:'Circular Std', sans-serif;
  font-size:40px;
  font-weight:400;
  line-height:110%;
  letter-spacing:-0.03em;
}
.instagram-label-item .rule{
  width:100%;
  height: 11px;
  background:#000;
  margin:0;
}

/* instagram grid */
.grid-ig{
  display:grid;
  gap:8px;
  grid-template-columns: repeat(4, 1fr);
}
.ig-post{
  display:block;
  overflow:hidden;
  border-radius:6px;
}
.grid-ig img,
.ig-post img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  border-radius:6px;
}

/* clients */
.clients .section-block h3{
  font-family:'Circular Std', sans-serif;
  font-size:40px;
  font-weight:400;
  line-height:110%;
  letter-spacing:-0.03em;
  margin:0 0 8px;
}
.clients .section-block .rule{
  width:100%;
  height: 11px;
  background:#000;
  margin:0;
}
.clients .client-list{
  columns:1;
  list-style:none;
  padding:0;
  margin:0;
}
.client-list li{
  font-family:'Circular Std', sans-serif;
  font-size:40px;
  font-weight:400;
  line-height:110%;
  letter-spacing:-0.03em;
  margin:0 0 6px;
}

/* footer */
.site-footer{
  background:#000;
  color:#fff;
  margin-top:80px;
  padding:0;
}
.footer-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px solid #fff;
  max-width:var(--max);
  margin:0 auto;
}
.footer-cell{
  border: 1px solid #fff;
  padding:32px 24px;
  display:flex;
  align-items:center;
}
.footer-cell p{
  margin:0;
  font-family:'Circular Std', sans-serif;
  font-size:40px;
  font-weight:400;
  line-height:110%;
  letter-spacing:-0.03em;
  color:#fff;
}
.footer-cell a{
  color:#fff;
  text-decoration:none;
  border:none;
}
.footer-cell a:hover{
  opacity:0.7;
}
.footer-title{
  font-weight:400;
  margin-bottom:8px;
}
.footer-address{
  grid-column: 1 / 3;
  flex-direction:column;
  align-items:flex-start;
}
.footer-social-icons{
  grid-column: 3 / 4;
  justify-content:center;
}
.social-icon{
  width:60px;
  height:60px;
  border:2px solid #fff;
  border-radius:50%;
}
.footer-email{
  grid-column: 1 / 3;
}
.footer-empty{
  grid-column: span 1;
}
.footer-empty-grid{
  grid-column: 1 / 2;
}
.footer-link{
  grid-column: span 2;
}
.footer-lyvia{
  grid-column: 2 / 4;
  justify-content:flex-end;
}
.lyvia{
  font-weight:400;
  letter-spacing:0.05em;
}

/* case page */
.case-page{
  padding:40px 0 80px;
}
.case-header{
  margin-bottom:40px;
}
.case-header-line{
  width:50%;
  height:11px;
  background:#000;
  margin-bottom:32px;
}
.case-title{
  font-family:'Circular Std', sans-serif;
  font-size:40px;
  font-weight:400;
  line-height:110%;
  letter-spacing:-0.03em;
  margin:0 0 8px;
}
.case-client{
  font-family:'Circular Std', sans-serif;
  font-size:40px;
  font-weight:400;
  line-height:110%;
  letter-spacing:-0.03em;
  margin:0;
}
.case-description{
  margin-bottom:48px;
}
.case-description p{
  font-family:'Circular Std', sans-serif;
  font-size:40px;
  font-weight:400;
  line-height:110%;
  letter-spacing:-0.03em;
  color:#0b0b0b;
  max-width:90ch;
  margin:0;
}
.case-images{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.case-row{
  display:grid;
  gap:24px;
}
.case-row-1{
  grid-template-columns:1fr;
}
.case-row-2{
  grid-template-columns:repeat(2, 1fr);
}
.case-image{
  overflow:hidden;
  background:#f0f0f0;
}
.case-image img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* responsive tweaks */
@media (max-width: 800px){
  .grid-cases{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .grid-ig{grid-template-columns: repeat(2, 1fr)}
  .clients .client-list{columns:1}
  .hero-copy h1{font-size:48px; line-height:48px}
  .hero-copy p{font-size:20px; line-height:110%}
  .logo img{height:30px}
  .zap{font-size:20px}
  .case-row-2{grid-template-columns:1fr}
  .case-title,
  .case-client{font-size:20px}
  .case-description p{font-size:16px}
  .magazine-section{
    grid-template-columns:1fr;
    gap:32px;
  }
  .magazine-content{
    width:100%;
  }
  .instagram-section{
    grid-template-columns:1fr;
    gap:32px;
  }
  .footer-grid{
    grid-template-columns:1fr;
  }
  .footer-address{
    grid-column:1;
  }
  .footer-social-icons{
    grid-column:1;
  }
  .footer-email{
    grid-column:1;
  }
  .footer-link{
    grid-column:1;
  }
  .footer-lyvia{
    grid-column:1;
    justify-content:flex-start;
  }
  .footer-cell p{
    font-size:16px;
  }
}