/* The mast and section links share one height on the studio and project pages. */
:root {
  --mast-height: clamp(3.5rem, 6vw, 4rem);
  --mast-mark: clamp(48px, 5.5vw, 62px);
  --mast-lockup: calc(var(--mast-mark) * 286 / 87);
  scroll-padding-top: calc(var(--mast-height) + 8px);
}

:is(.studio-front, .studio-case) :is(#main, #work, #studio, #services, #contact) {
  scroll-margin-top: 0;
}

:is(.studio-front, .studio-case) .mast {
  --mast-edge: max(var(--press-edge), calc((100% - 1920px) / 2 + var(--press-edge)));
  position: sticky;
  top: 0;
  z-index: 7;
  width: 100%;
  max-width: none;
  min-height: var(--mast-height);
  padding-inline: var(--mast-edge);
  flex-wrap: nowrap;
  gap: 8px;
  background: #f6f4ec;
  color: #24221f;
}

.mast::after {
  inset-inline: var(--mast-edge);
  pointer-events: none;
}

.mast .brand {
  flex: none;
  min-height: 44px;
}

.studio-front .mast .brand > .brand-seat {
  width: var(--mast-mark);
}

.mast .brand.is-docked, .studio-case .mast .brand img {
  width: var(--mast-lockup);
}

.mast .brand picture { display: block; }

:is(.studio-front, .studio-case) .mast nav {
  position: relative;
  z-index: 1;
  flex-wrap: nowrap;
  gap: clamp(6px, 1.9vw, 32px);
  margin-left: auto;
  white-space: nowrap;
  background: inherit;
  font-size: clamp(.875rem, 1.6vw, .9375rem);
}

.mast nav a, .mast nav a.enquire {
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.mast nav a.enquire .arrow { color: #ae381c; }
.mast a:focus-visible { outline: 2px solid #ae381c; outline-offset: 2px; }

.mast nav a:not(.enquire):hover, .mast .enquire:hover span {
  text-decoration: underline;
  text-decoration-color: #ae381c;
  text-underline-offset: .27em;
}

.mast .wordmark-art.in-masthead { z-index: 0; }

@media (max-width: 640px) {
  .studio-case .mast .brand img { width: var(--mast-mark); }
}