/*
 * Versioned replacement for the site's former WordPress Additional CSS.
 * These rules preserve established article, image, emoji and video behavior.
 */

.wp-block-post-content {
  font-size: 20px;
  line-height: 1.8;
}

.wp-block-post-title {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.3;
  font-weight: 700;
}

.wp-block-post-date {
  font-size: 14px;
  color: #666;
}

.wp-block-post-content div[style*="white-space"][style*="pre-wrap"] {
  white-space: normal !important;
  line-height: 1.4 !important;
}

.wp-block-post-content img:not(.emoji):not(.wp-smiley) {
  display: block;
  width: auto;
  max-width: min(100%, 720px);
  height: auto;
  margin: 20px auto;
}

.wp-block-query .wp-block-post-content img:not(.emoji):not(.wp-smiley) {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 600px) !important;
  height: auto !important;
  margin: 20px auto !important;
}

html body .wp-block-post-content img.emoji,
html body .wp-block-post-content img.wp-smiley {
  display: inline !important;
  position: static !important;
  width: 1em !important;
  height: 1em !important;
  min-width: 0 !important;
  max-width: 1em !important;
  margin: 0 0.07em !important;
  padding: 0 !important;
  vertical-align: -0.1em !important;
  border: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

.wp-block-query .wp-block-post-title,
.wp-block-query .wp-block-post-title a,
body.single .wp-block-post-title,
body.single .wp-block-post-title a {
  font-size: 32px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.wp-block-query .wp-block-post-content {
  font-size: 20px;
  line-height: 1.8;
}

.wp-block-query .wp-block-post {
  display: flow-root;
  clear: both;
  margin-bottom: 60px !important;
}

.wp-block-post-content iframe[src*="youtube.com/embed"],
.wp-block-post-content iframe[src*="youtube-nocookie.com/embed"] {
  position: static !important;
  inset: auto !important;
  display: block !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 800px !important;
  height: 450px !important;
  aspect-ratio: auto !important;
  margin: 24px auto 40px !important;
  border: 0 !important;
  float: none !important;
  clear: both !important;
}

.studio-profile-image-1,
#studio-profile-image-1 {
  float: left !important;
  clear: both !important;
  width: 260px !important;
  max-width: 260px !important;
  margin: 0 40px 30px 0 !important;
}

.studio-profile-image-1 img:not(.emoji):not(.wp-smiley),
#studio-profile-image-1 img:not(.emoji):not(.wp-smiley) {
  display: block !important;
  width: 100% !important;
  max-width: 260px !important;
  height: auto !important;
  margin: 0 !important;
}

body.single .wp-block-post-title,
body.single .wp-block-post-date,
body.single .wp-block-post-terms,
body.single .wp-block-post-content,
.wp-block-query .wp-block-post-title,
.wp-block-query .wp-block-post-date,
.wp-block-query .wp-block-post-terms,
.wp-block-query .wp-block-post-content {
  width: calc(100% - 40px) !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.single .wp-block-post-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  width: 100% !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 900px) {
  .wp-block-post-content iframe[src*="youtube.com/embed"],
  .wp-block-post-content iframe[src*="youtube-nocookie.com/embed"] {
    width: 100% !important;
    max-width: 100% !important;
    height: calc((100vw - 40px) * 0.5625) !important;
    max-height: 450px !important;
    margin: 20px auto 30px !important;
  }
}

@media (max-width: 820px) {
  .wp-block-post-content,
  .wp-block-query .wp-block-post-content {
    font-size: 19px;
  }
}

@media (max-width: 600px) {
  body.single .wp-block-post-title,
  body.single .wp-block-post-title a,
  .wp-block-query .wp-block-post-title,
  .wp-block-query .wp-block-post-title a {
    font-size: 26px !important;
  }

  .studio-profile-image-1,
  #studio-profile-image-1 {
    float: none !important;
    width: min(100%, 260px) !important;
    margin: 0 auto 20px !important;
  }
}
