@charset "UTF-8";

#nav2 a.active,
#nav2 a.active:visited { color:#f00 !important; }

.composite-main {
  width:min(1120px, calc(100% - 48px));
  margin:38px auto 90px;
  font-family:Arial, Helvetica, sans-serif;
  color:#222;
}

.composite-intro {
  border-top:1px solid #d7d7d7;
  padding-top:34px;
  margin-bottom:54px;
}

.eyebrow, .project-kicker {
  margin:0 0 11px;
  color:#c41230;
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:.17em;
}

.composite-intro h1 {
  max-width:900px;
  margin:0 0 18px;
  font-size:clamp(32px,4vw,58px);
  line-height:1.03;
  letter-spacing:-.035em;
}

.intro-copy {
  max-width:760px;
  margin:0;
  color:#555;
  font-size:16px;
  line-height:1.6;
}

.slider-note {
  margin:22px 0 0;
  font-size:13px;
  color:#777;
}

.project {
  padding:52px 0 62px;
  border-top:1px solid #ddd;
}

.project-copy {
  max-width:760px;
  margin-bottom:24px;
}

.project h2 {
  margin:0 0 12px;
  font-size:25px;
  line-height:1.15;
  letter-spacing:-.02em;
}

.project-copy > p:not(.project-kicker):not(.skills) {
  margin:0;
  color:#555;
  font-size:15px;
  line-height:1.6;
}

.skills {
  margin:12px 0 0;
  color:#777;
  font-size:12px;
  line-height:1.5;
  letter-spacing:.025em;
}

.slider-wrap {
  margin-left:auto;
  margin-right:auto;
}

.portrait-slider { max-width:760px; }
.landscape-slider { max-width:1040px; }

.slider-wrap .twentytwenty-container {
  width:100% !important;
  max-width:100% !important;
  margin:0 auto;
}

.slider-wrap .twentytwenty-container img {
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
}

.panorama-project {
  padding-bottom:0;
}

.panorama-link {
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
  line-height:0;
}

.panorama-link img {
  display:block;
  width:100%;
  height:auto;
}

.lightbox {
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  box-sizing:border-box;
  background:rgba(0,0,0,.95);
}

.lightbox.open { display:flex; }

.lightbox img {
  max-width:96vw;
  max-height:92vh;
  width:auto;
  height:auto;
}

.lightbox-close {
  position:fixed;
  top:14px;
  right:24px;
  z-index:10000;
  border:0;
  padding:0;
  background:transparent;
  color:#fff;
  font:300 42px/1 Arial, sans-serif;
  cursor:pointer;
}

@media (max-width:760px) {
  .composite-main {
    width:calc(100% - 28px);
    margin-top:26px;
  }
  .composite-intro {
    padding-top:26px;
    margin-bottom:38px;
  }
  .composite-intro h1 { font-size:34px; }
  .project { padding:38px 0 44px; }
  .project h2 { font-size:22px; }
  .portrait-slider,
  .landscape-slider { max-width:100%; }
}