/*
 * Bureau
 * Website-specific styles
 */

 main a{
  text-decoration: underline;
 }

.font-size-l, 
.font-size-l button,
.font-size-ml{
  -webkit-font-smoothing: antialiased!important;
  line-height: 1.3!important;
  letter-spacing: -.01em!important;
}

.font-size-l{
  margin-top: -.3em;
}

body{
  text-underline-offset: .15em;
}

.pure-blocks-wrapper > *{
  padding-inline: var(--size-m);
}



#site-header, #site-footer{
  padding: var(--size-m);
}

#site-footer{
  font-size: var(--size-xs);
}

#site-header .pure-navigation .active{
  text-decoration: underline;
}

.meta-tags{
  text-transform: uppercase;
}

.work .pure-organizer .meta-tags .tag{
  background: var(--color-secondary);
}

.pure-navigation{
  font-size: var(--size-sm);
}

.pure-navigation a{
  color: var(--color-primary);
}

body.work .thumbnail-block figure a {
  position: relative;
  display: block;
  overflow: hidden;
}

body.work .thumbnail-block figure a:has(img.corners-rounded),
body.work .thumbnail-block figure a:has(video.corners-rounded) {
  border-radius: var(--size-xxs);
}

body.work .thumbnail-block figure a img.corners-rounded,
body.work .thumbnail-block figure a video.corners-rounded {
  border-radius: 0;
}

/* body.work .thumbnail-block figure a video {
  aspect-ratio: 16/9!important;
  object-fit: cover!important;
} */

body.work .thumbnail-block figure a img,
body.work .thumbnail-block figure a video {
  transition: border-radius 0.3s ease;
}

/* body.work .thumbnail-block figure a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-tertiary);
  mix-blend-mode: color;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

body.work .thumbnail-block:hover figure a::after {
  opacity: 1;
} */

body.work .thumbnail-block:hover ~ .meta-wrapper .tag {
  background-color: var(--btn-hover-background-color);
  color: var(--btn-hover-color);
}



body.home #site-header {
  mix-blend-mode: difference;
}

/* Project header: use difference only while it is transparent at the top.
 * Exclude the open navigation so the mobile menu keeps its normal colors. */
body.work-subpage #site-header:not(.is-scrolled):not(.has-open-navigation) {
  mix-blend-mode: difference;
  color: var(--color-secondary);
}

body.work-subpage #site-header:not(.is-scrolled):not(.has-open-navigation) a {
  color: var(--color-secondary);
}

body.home #site-header.has-open-navigation {
  mix-blend-mode: normal;
  color: var(--color-primary);
}

body.home #site-header.has-open-navigation a {
  color: var(--color-primary);
}

body.home .pure-navigation a{
  color: var(--color-secondary);
}

body.work .pure-organizer-item .block-type-pure-image, 
body.work .pure-organizer-item .block-type-pure-video {
  margin-bottom: var(--size-xs);
}

body.work .pure-organizer-item .block-type-pure-image + .block-type-pure-flexible-text{
  margin-bottom: 5px;
}


/* body.labor .pure-organizer .tag{
  background: #ebeced;
} */

body.labor .pure-organizer-item .block-type-pure-flexible-text{
    margin-bottom: var(--size-s);
margin-top: var(--size-xxs);

}

figure.pure-image figcaption, figure.pure-video figcaption, .parvus__caption{
  font-size: var(--size-xs);
}


@media (max-width: 768px) {
  .font-size-m, .font-size-ml{
    font-size: var(--size-sm)!important;
  }
  .font-size-l{
    font-size: var(--size-m)!important;
  }

  .pure-navigation__pages li{
    font-size: var(--size-ml)!important;
  }

}
/* Keep the mobile menu icon legible inside the difference-blended transparent
 * project header. Using the primary source color lets the parent blend mode
 * invert the toggle lines together with the image underneath. */
body.work-subpage #site-header:not(.is-scrolled):not(.has-open-navigation) .pure-navigation__toggle-line {
  background: var(--color-primary);
}