/* From the lab: Zwischen in its own colours (CJ's mock-up, 20261029).
   zwischen.ai's rally photograph runs full-bleed under the wordmark, and a
   band in Zwischen's red rises across its foot on a slant, carrying the copy.
   The photograph runs down behind the band's slant (--head-h + --rise). */
.lab {
  --head-h: min(35vw, 54svh);
  --rise: min(13.5vw, 20svh);
  --shade: linear-gradient(160deg, rgba(8, 6, 4, 0.55) 0%, rgba(8, 6, 4, 0) 45%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--zw-red);
  color: #fbf7f0;
}

/* The photograph and, over it, a shade where the lockup sits. Both cover the
   frame down to the foot of the band's slant. */
.lab__photo,
.lab::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--head-h) + var(--rise));
}

.lab__photo {
  z-index: -2;
  object-fit: cover;
  object-position: 50% 22%;
}

.lab::before {
  content: "";
  z-index: -1;
  background: var(--shade);
}

.lab__head {
  min-height: var(--head-h);
  padding: clamp(56px, 9svh, 96px) var(--gutter) 0;
}

/* The section's name on zwischen.ai's red tag, a blunt fragment out of the
   page edge with its foot cut back (zwischen.ai's .reality__tag). */
.lab__tag {
  width: fit-content;
  height: 2.4rem;
  margin: 0 0 clamp(18px, 2.6svh, 28px) calc(-1 * var(--gutter));
  padding: 0 2.75rem 0 var(--gutter);
  background: var(--zw-knight);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.15rem) 100%, 0 100%);
  color: #fff;
}

.lab__tag::after {
  content: none;
}

/* Zwischen's lockup, set as zwischen.ai sets its own: the knight and the
   name in Inter 700. A wordmark, so it sits outside the shared heading size. */
.lab__name {
  display: flex;
  align-items: baseline;
  gap: 0.14em;
  font-family: var(--zw-sans);
  font-weight: 700;
  font-size: clamp(2.6rem, 4.2vw, 5.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.28);
}

/* The knight spans what the letters span: its base on the baseline (an empty
   flex item's baseline is its bottom edge), its ears level with the top of
   the Z and h (Inter's cap height and ascender are one, 0.734em, measured).
   Width from the mask, 150:214. */
.lab__knight {
  flex: none;
  width: calc(0.734em * 150 / 214);
  height: 0.734em;
  background: var(--zw-knight);
  -webkit-mask: url("../img/knight-mask.png") center / contain no-repeat;
  mask: url("../img/knight-mask.png") center / contain no-repeat;
}

.lab__band {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: 34px;
  padding: calc(var(--rise) + clamp(28px, 4.5svh, 52px)) var(--gutter) clamp(64px, 8svh, 96px);
}

.lab__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--zw-red);
  clip-path: polygon(0 var(--rise), 100% 0, 100% 100%, 0 100%);
}

.lab__body {
  grid-column: 1 / span 5;
  color: rgba(251, 247, 240, 0.92);
}

.lab__body--second {
  grid-column: 7 / span 5;
  grid-row: 1;
}

/* As zwischen.ai closes on its own red: a paper button, its arrow white in a
   bay of the knight's brighter red, and a text link beside it. */
.lab__links {
  --btn-accent: var(--zw-knight);
  grid-column: 1 / span 6;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px clamp(24px, 2.4vw, 36px);
}

.lab__links .link-arrow {
  color: #fff;
}

.lab :focus-visible {
  outline-color: #fff;
}

@media (max-width: 1100px) {
  .lab__body {
    grid-column: 1 / span 6;
  }
  .lab__body--second {
    grid-column: 7 / span 6;
  }
}

/* Portrait tablets and phones: a squarer frame that holds both the car and
   the knight. The car fills the frame's upper half there, so the lockup moves
   down to the dark trees at the lower left, just above the band. */
@media (max-width: 900px) {
  .lab {
    --head-h: min(62vw, 56svh);
    --shade: linear-gradient(to top, rgba(8, 6, 4, 0.55) 0%, rgba(8, 6, 4, 0) 50%);
  }
  .lab__photo {
    object-position: 50% 50%;
  }
  .lab__head {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px var(--gutter) 6px;
  }
  .lab__body,
  .lab__body--second,
  .lab__links {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .lab__body--second {
    margin-top: calc(1.1em - 34px);
  }
}

/* Phones: a shallower rise. */
@media (max-width: 767px) {
  .lab {
    --head-h: clamp(340px, 96vw, 460px);
    --rise: clamp(28px, 9vw, 48px);
  }
  .lab__band {
    padding-bottom: 80px;
  }
}