.frontpage-offer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin-top: 1.15rem;
  font: 500 1rem/1.5 Quicksand, "Webbit Sans", sans-serif;
}

.frontpage-offer a,
.featured-designs a,
.design-preview {
  color: #244f3d;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.frontpage-offer strong { font-weight: 700; }
.frontpage-offer span { color: #40584c; }
.studio-intro + .gallery { margin-top: clamp(2rem, 4vw, 3rem); }

.studio-intro + .gallery .rack-head {
  grid-area: 1 / 1 / 2 / 3;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: 0 0 .6rem;
}

.studio-intro + .gallery .rack-head h2,
.branch-gallery .edition-heading {
  position: static;
  clip-path: none;
  overflow: visible;
  width: auto;
  height: auto;
  white-space: normal;
  font: 600 clamp(1.3rem, 2.3vw, 1.8rem)/1.25 Quicksand, "Webbit Sans", sans-serif;
  letter-spacing: -.035em;
}

.studio-intro + .gallery .tools { grid-area: 2 / 1 / 3 / 3; }
.studio-intro + .gallery .track { grid-area: 3 / 1 / 4 / 3; }
.studio-intro + .gallery .dots { grid-area: 4 / 1 / 5 / 3; }
.branch-intro { --opening: clamp(3.9rem, 6vw, 5.4rem); }
.branch-intro .back-catalog { top: calc(var(--opening) - 2.5rem); }
.branch-gallery { margin-top: clamp(1.4rem, 3vw, 2.3rem); }
.branch-gallery .demo-caption { margin: .45rem 0 .7rem; }

.featured-designs {
  list-style: none;
  max-width: 33rem;
  margin: .6rem 0 .75rem;
  padding: 0;
  font-family: Quicksand, "Webbit Sans", sans-serif;
}

.featured-designs li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: .7rem;
  border-top: 1px solid var(--studio-line);
}
.featured-designs li:last-child { border-bottom: 1px solid var(--studio-line); }
.featured-designs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.35;
  padding-block: .25rem;
}
.featured-designs .featured-demo {
  font-weight: 600;
}
@media (max-width: 380px) {
  .featured-designs li { grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); }
}

.branch-gallery .design-choice {
  flex: 0 0 clamp(280px, 32vw, 350px);
  scroll-snap-align: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.branch-gallery .design-choice .example {
  flex: none;
  display: block;
  width: 100%;
}

.design-preview {
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: .45em;
  min-height: 44px;
  margin-top: auto;
  font: 600 .95rem/1.4 Quicksand, "Webbit Sans", sans-serif;
}

.design-choice:target .gallery-frame { outline: 2px solid #426b55; }
.design-choice a:focus-visible { outline: 2px solid #244f3d; outline-offset: -2px; }

@media (max-width: 650px) {
  .wrap { width: calc(100% - 36px); }
  .studio-intro { margin-top: 1.35rem; }
  .frontpage-offer { gap: 0 .65rem; margin-top: .75rem; }
  .studio-intro + .gallery { margin-top: 1.5rem; }
  .gallery:not(.branch-gallery) .track .example,
  .branch-gallery .design-choice { flex-basis: min(80%, 280px); }
  .studio-intro + .gallery .track .example,
  .branch-gallery .design-choice .example { display: flex; flex-direction: column; }
  .gallery .track .itemtitle { order: -1; margin: 0 0 .5rem; }
  .gallery .tools button { width: 44px; height: 44px; }
  .gallery .tools { margin-bottom: .3rem; }
  .branch-intro { --opening: 3.3rem; }
  .branch-gallery .design-choice .gallery-frame img { aspect-ratio: 4 / 4; }
}