/* Each room has the same doorway and clear routes back to the directory. */
.module-frame {
  min-height: 100svh;
}
.module-intro {
  position: relative;
  padding-block: 127px 42px;
  border-bottom: 1px solid var(--line);
}
.module-back {
  display: inline-flex;
  align-items: center;
  min-height: 35px;
  color: #b2a18a;
  font-size: 10px;
  margin-bottom: 25px;
}
.module-label {
  margin-bottom: 12px;
  color: var(--signal);
  font-size: 10px;
  letter-spacing: 0.18em;
}
.module-intro h1 {
  margin: 0 0 16px;
  font: 600 clamp(35px, 4.5vw, 65px) / 1.3 var(--font-serif);
  letter-spacing: -0.025em;
}
.module-description {
  color: var(--muted);
  font-size: 14px;
  max-width: 650px;
  margin-bottom: 0;
}
.module-frame .section {
  padding-block: 45px 65px;
}
.module-frame .section:empty {
  display: none;
}
.module-frame .profile {
  border-bottom: 0;
}
.module-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  align-items: center;
  padding-block: 35px 70px;
  border-top: 1px solid var(--line);
}
.module-home-link {
  color: #baa58a;
  font-size: 12px;
}
.module-next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.module-next .mono {
  font-size: 9px;
  color: #9d8e7a;
}
.module-next strong {
  font: 500 22px var(--font-serif);
}
.module-copyright {
  width: 100%;
  font-size: 9px;
  color: #83796e;
}
.contact-module {
  padding-top: 44px;
}
.contact-module h2 {
  font-size: clamp(26px, 4vw, 45px);
  margin-top: 20px;
}
.contact-module .contact-kicker {
  display: none;
}
.contact-module .contact-meta {
  padding-bottom: 25px;
}
.contact-module .contact-email {
  margin-top: 20px;
}
.module-frame .ai-console,
.module-frame .account-console,
.module-frame .studio-brief {
  border-radius: 8px;
}

/* A project wall rather than a stack of full-width case studies. */
.wall-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.wall-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wall-filters button {
  padding: 9px 17px;
  min-height: 44px;
  border-radius: 22px;
  font-size: 12px;
  color: #bcb1a2;
}
.wall-filters button span {
  margin-left: 6px;
  color: #a38e6b;
  font-size: 9px;
}
.wall-filters button.is-active {
  background: #e3b977;
  border-color: #e3b977;
  color: #21170d;
}
.wall-filters button.is-active span {
  color: #6f5028;
}
#wall-count {
  margin: 0;
  color: #a28f71;
  font-size: 9px;
}
.project-wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 27px;
  align-items: start;
}
.project-wall > .project-card {
  display: flex;
  flex-direction: column;
  grid-column: span 6;
  border-radius: 10px;
  overflow: hidden;
}
.project-wall > .project-card:nth-child(2),
.project-wall > .project-card:nth-child(5) {
  grid-column: span 7;
}
.project-wall > .project-card:nth-child(3),
.project-wall > .project-card:nth-child(4) {
  grid-column: span 5;
}
.project-wall.is-filtered > .project-card {
  grid-column: span 7;
}
.project-wall .project-visual {
  width: 100%;
  height: 290px;
  min-height: 0;
  border-bottom: 1px solid var(--line);
}
.project-wall .project-visual img {
  width: 88%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}
.project-wall .project-info {
  padding: 27px 30px 22px;
  width: 100%;
}
.project-wall .project-meta {
  margin-bottom: 14px;
}
.project-wall .project-info h3 {
  font-size: clamp(27px, 2.7vw, 38px);
  margin-bottom: 15px;
}
.project-wall .project-description {
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.9;
}
.project-wall .project-links {
  margin-top: 13px;
}
.project-wall .tag-block {
  padding-bottom: 8px;
}
.project-wall .project-facts {
  border-bottom: 0;
  margin-bottom: 0;
}
.project-details {
  border-top: 1px solid var(--line);
  margin-top: 15px;
}
.project-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  font-size: 11px;
  color: #c9b494;
  cursor: pointer;
  list-style: none;
}
.project-details summary::-webkit-details-marker {
  display: none;
}
.project-details summary span {
  transition: transform 0.25s;
}
.project-details[open] summary span {
  transform: rotate(45deg);
}
.project-details[open] .project-facts {
  margin-top: 0;
}
.work-wall > .shell:first-child:empty {
  display: none;
}

.module-intro {
  isolation: isolate;
}
.module-intro-art {
  position: absolute;
  z-index: -1;
  right: 3%;
  bottom: 0;
  height: 250px;
  width: 270px;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0.42;
  filter: drop-shadow(0 12px 18px #0009);
  mask-image: linear-gradient(#000 70%, transparent);
  pointer-events: none;
}
.module-intro .module-description {
  max-width: min(650px, 72%);
}

@media (max-width: 1100px) {
  .project-wall {
    gap: 20px;
  }
  .project-wall .project-visual {
    height: 240px;
  }
  .project-wall .project-info {
    padding: 23px;
  }
}
@media (max-width: 768px) {
  .module-intro {
    padding-block: 105px 29px;
  }
  .module-back {
    margin-bottom: 17px;
  }
  .module-intro h1 {
    font-size: 37px;
  }
  .module-description {
    font-size: 13px;
  }
  .module-label {
    font-size: 9px;
  }
  .module-frame .section {
    padding-block: 30px 45px;
  }
  .module-frame .profile-aside {
    flex-direction: column;
  }
  .module-footer {
    padding-block: 28px 75px;
  }
  .module-next strong {
    font-size: 21px;
  }
  .project-wall {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .project-wall > .project-card,
  .project-wall > .project-card:nth-child(n),
  .project-wall.is-filtered > .project-card {
    grid-column: 1;
  }
  .project-wall .project-visual {
    height: 240px;
  }
  .project-wall .project-info {
    padding: 22px;
  }
  .wall-filters {
    gap: 7px;
  }
  .wall-filters button {
    padding: 8px 13px;
    font-size: 11px;
  }
  .wall-toolbar {
    gap: 14px;
  }
  .contact-module .contact-email {
    margin-top: 10px;
  }
  .module-intro-art {
    right: -18px;
    width: 150px;
    height: 190px;
    opacity: 0.2;
  }
  .module-intro .module-description {
    max-width: 87%;
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}