/* STUDIO 1506 — project pages
   Canonical layout, taken from charlottenburg.html. */

:root { color: #1a1a1a; background: #fff; font-family: "Minion Pro", "Times New Roman", serif; font-size: 15px; line-height: 20px; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-decoration: none; }

/* Left information rail */
.sidebar { position: fixed; z-index: 1; top: 110px; left: 20px; width: 179px; }
.identity { display: block; text-align: center; }
.index-button { display: block; width: 90px; height: 18px; margin: 75px 0 0 43px; padding: 0; border: 0; background: transparent; color: #1a1a1a; font: inherit; line-height: 20px; text-align: left; cursor: pointer; }
.project-index { margin-top: 13px; margin-left: 50px; }
.project-index a, .project-index span { display: block; height: 20px; }
.project-index .active { color: #1a1a1a; }
.project-index a { color: rgba(26, 26, 26, .55); transition: color .15s ease; }
.project-index a:hover { color: #1a1a1a; }

/* Tender Observer sound control */
.sound-toggle { position: fixed; z-index: 2; top: 423px; left: 63px; display: flex; align-items: center; width: 79px; height: 14px; margin: 0; padding: 3px 2px 0px 2px; overflow: hidden; border: .3px solid #000; background: transparent; color: #1a1a1a; font: 12px/12px "Minion Pro", "Times New Roman", serif; cursor: pointer; }
.sound-toggle span { display: block; width: 74px; height: 14px; overflow: hidden; white-space: nowrap; word-break: normal; }

/* Gallery */
.gallery { width: min(980px, calc(100vw - 460px)); margin: 110px auto 0; display: flex; flex-direction: column; align-items: center; gap: 130px; padding-bottom: 90px; }
.gallery figure { height: auto; margin: 0; }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery .contain img { object-fit: contain; }

/* Per-photograph widths at the 700px desktop height */
.w-437 { width: 437px; max-width: 100%; aspect-ratio: 437 / 700; }
.w-455 { width: 455px; max-width: 100%; aspect-ratio: 455 / 700; }
.w-456 { width: 455.729px; max-width: 100%; aspect-ratio: 455.729 / 700; }
.w-467 { width: 466.667px; max-width: 100%; aspect-ratio: 466.667 / 700; }
.w-473 { width: 473px; max-width: 100%; aspect-ratio: 473 / 700; }
.w-525 { width: 525px; max-width: 100%; aspect-ratio: 525 / 700; }
.w-839 { width: 839px; max-width: 100%; aspect-ratio: 839 / 700; }
.w-908 { width: 908px; max-width: 100%; aspect-ratio: 908 / 700; }
.w-933 { width: 933px; max-width: 100%; aspect-ratio: 933 / 700; }
.w-958 { width: 958px; max-width: 100%; aspect-ratio: 958 / 700; }
.w-967 { width: 966px; max-width: 100%; aspect-ratio: 966 / 700; }
.w-980 { width: 980px; max-width: 100%; aspect-ratio: 980 / 700; }
.w-989 { width: 989px; max-width: 100%; aspect-ratio: 989 / 700; }
.w-1050 { width: 1050px; max-width: 100%; aspect-ratio: 1050 / 700; }
.w-1055 { width: 1055px; max-width: 100%; aspect-ratio: 1055 / 700; }
.w-1118 { width: 1118px; max-width: 100%; aspect-ratio: 1118 / 700; }

/* Closing text block */
.project-copy { width: 780px; min-height: 283px; padding-top: 63px; text-align: center; }
.project-copy p { margin: 0; }
.project-copy .spacer { height: 20px; }

.mobile-project-title { display: none; }

/* Home */
.home-sidebar .identity { cursor: pointer; }
.home-main { width: min(980px, calc(100vw - 460px)); margin: 85px auto 0; }
.home-hero { display: grid; place-items: center; width: 980px; max-width: 100%; height: auto; aspect-ratio: 980 / 730; margin: 0; }
.home-hero img { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-introduction { width: min(614px, 100%); margin: 283px auto 0; text-align: center; }
.home-introduction p { margin: 0; }
.home-introduction p + p { margin-top: 40px; }
.home-contact { width: 100%; margin-top: 60px; padding: 60px 0 90px; }
.home-contact-content { width: min(614px, 100%); margin: 0 auto; text-align: center; }
.home-contact p { margin: 0; }
.contact-details { margin-top: 40px !important; }
.home-card { width: min(430px, 100%); margin: 40px auto 0; }
.home-card img { display: block; width: 100%; height: auto; }

@media (max-width: 1024px) {
  .sidebar { position: absolute; z-index: 1; inset: 0; width: auto; margin: 0; pointer-events: none; }
  .sidebar .identity, .sidebar .index-button, .sidebar .project-index { pointer-events: auto; }
  .identity { position: absolute; top: 30px; left: 24px; width: 84px; font-size: 13px; line-height: 17px; }
  .project-index { position: absolute; top: 53px; right: 24px; margin: 0; font-size: 12px; line-height: 17px; text-align: right; }
  .project-index a, .project-index span { display: block; height: 17px; line-height: 17px; }
  .index-button { position: absolute; top: 28px; right: 24px; z-index: 2; width: auto; margin: 0; font-size: 12px; line-height: 20px; }
  .sound-toggle { position: absolute; top: 150px; right: 24px; left: auto; }

  .mobile-project-title { display: block; position: absolute; z-index: 1; top: 150px; left: 24px; width: 140px; margin: 0; font-size: 12px; font-weight: 500; line-height: 20px; text-align: left; }

  .gallery { width: auto; max-width: none; margin: 179px 24px 0; gap: 130px; padding-bottom: 90px; }
  .gallery figure, .gallery .contain { width: 100%; height: auto; aspect-ratio: auto; }
  .gallery img, .gallery .contain img { width: 100%; height: auto; object-fit: contain; }

  .project-copy { width: 100%; min-height: 339px; padding: 11px 0 0; text-align: center; }
  .project-copy .intro-title, .project-copy .intro-spacer { display: none; }

  /* Home */
  .home-sidebar { width: 100vw; }
  .home-main { width: 100vw; margin: 0; padding-top: 198px; }
  .home-hero { width: calc(100vw - 48px); height: auto; margin: 0 auto; }
  .home-hero img { height: auto; }
  .home-introduction { width: calc(100vw - 48px); margin-top: 127px; }
  .home-introduction p + p { margin-top: 40px; }
  .home-contact { width: calc(100vw - 48px); margin: 148px auto 0; padding: 68px 0 80px; }
  .home-contact-content { width: 100%; }
  .contact-details { margin-top: 10px !important; }
  .home-card { width: 100%; max-width: 430px; margin-top: 112px; }
}

/* Fullscreen overlay */
#fullscreen-view{
  --fullscreen-slide-gap:clamp(40px,8vw,120px);
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2000;
  background:#fff;
  display:none;
  align-items:center;
  justify-content:center;
}

#fullscreen-view.visible{
  display:flex;
}

.fullscreen-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.fullscreen-strip{
  display:flex;
  height:100%;
  column-gap:var(--fullscreen-slide-gap);
  will-change:transform;
}

.fullscreen-slide{
  flex:0 0 100vw;
  width:100vw;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.fullscreen-image{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.fullscreen-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:auto;
  height:auto;
  border:0;
  background:transparent;
  color:#000;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  padding:0;
}

.fullscreen-nav:hover{
  text-decoration:none;
}

.fullscreen-nav.prev{left:12px}
.fullscreen-nav.next{right:24px}

.fullscreen-close{
  position:absolute;
  top:20px;
  right:24px;
  z-index:10;
  border:0;
  background:transparent;
  color:#000;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:0;
}

.fullscreen-close:hover{
  text-decoration:none;
}