/* Craft-specific hardening for dynamic article blocks. */
.article-access {
  display: flex;
  max-width: 60rem;
  min-height: 55vh;
  padding-top: 5rem;
  padding-bottom: 7rem;
  flex-direction: column;
  gap: 1.5rem;
}

.article-access__form {
  display: flex;
  max-width: 32rem;
  margin-top: 1rem;
  flex-direction: column;
  gap: 1rem;
}

.article-access__form input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.875rem 0;
  border: 0;
  border-bottom: 1px solid var(--primary);
  border-radius: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
}

.article-access__form .cta-button {
  width: fit-content;
  margin-top: 1rem;
}

.article-access__error {
  color: #a12622;
}

button.blog-footer-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.blog-head-image picture,
.blog-head-image-portrait picture {
  display: block;
  width: 100%;
  height: 100%;
}

.blog-image-section picture {
  display: block;
  width: 100%;
  height: auto;
}

.blog-head-image-portrait-img {
  object-fit: cover;
}

article.blog-post-article.portrait .blog-head-image-portrait {
  transform: translate3d(0, var(--rail-shift, 0), 0);
}

.blog-head-content-category a,
.blog-head-content-meta a,
.tag-article-title a,
.tag-article-meta a,
.blog-also-interesting-text a {
  color: inherit;
}

.tag-article-image-container > a,
.tag-article-image-container picture,
.blog-also-interesting-image-link,
.blog-also-interesting-image-link picture {
  display: block;
  width: 100%;
}

.tag-article-image-caption :is(a, span),
.blog-also-interesting-image-caption :is(a, span) {
  padding: 0.3125rem 0.5rem;
  background: var(--white-100);
  color: inherit;
}

.tag-article-image-caption,
.blog-also-interesting-image-caption {
  pointer-events: auto;
}

.blog-also-interesting-image {
  object-fit: cover;
}

.blog-also-interesting-items > li,
.blog-also-interesting-item {
  min-width: 0;
}

.blog-also-interesting-image-credit.slider-image-credit {
  position: relative;
  min-width: 0;
}

.blog-also-interesting-image-credit .slider-image-credit-button {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  font-family: var(--primary-font);
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: help;
}

.blog-also-interesting-image-credit .slider-image-credit-button span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.blog-also-interesting-image-credit .slider-image-credit-button:focus-visible {
  outline: 0.125rem solid currentcolor;
  outline-offset: 0.125rem;
}

.blog-also-interesting-image-credit .slider-image-credit-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  display: none;
  width: max-content;
  max-width: min(24rem, calc(100vw - 1.875rem));
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--grey-217);
  background: var(--white-100);
  box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 12%);
  line-height: 1.35;
  white-space: normal;
}

.blog-also-interesting-image-credit.slider-image-credit:focus-within:not(.is-escape-closed) .slider-image-credit-popover,
.blog-also-interesting-image-credit.slider-image-credit.is-open .slider-image-credit-popover {
  display: block;
}

.blog-text > :first-child {
  margin-top: 0;
}

.blog-text > :last-child {
  margin-bottom: 0;
}

.blog-text > p + p,
.blog-text > ul + p,
.blog-text > ol + p {
  margin-top: 0.5rem;
}

.blog-text :is(h2, h3, h4, h5, h6) {
  margin: 1.5em 0 0.5em;
  text-align: left !important;
}

.blog-text :is(h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

.blog-image-section-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.blog-head-image-credit,
.blog .blog-image-credit,
.blog figure figcaption {
  color: var(--grey-117);
  font-family: var(--primary-font);
  font-size: clamp(0.625rem, 0.56rem + 0.26vw, 0.875rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: none;
}

.blog-head-image-credit b,
.blog .blog-image-credit b,
.blog figure figcaption b {
  color: var(--secondary);
  font-weight: 500;
}

.blog-gallery-overlay__close {
  z-index: 2004;
  cursor: pointer;
}

.blog-gallery-overlay__close svg {
  display: block;
  color: var(--white);
  pointer-events: none;
}

.blog-gallery-overlay__nav--prev svg {
  transform: rotate(180deg);
}

.blog-gallery-overlay .blog-image-credit,
.blog-gallery-overlay .blog-image-credit b {
  color: var(--white);
}

/* Match the current source markup: media dimensions live on the inner figure. */
article.blog-post-article:not(.portrait) .blog .blog-image-section {
  display: block;
  margin: 0;
}

article.blog-post-article:not(.portrait) .blog .blog-image-section-container {
  display: flex;
  margin: 0.625rem 0;
  flex-direction: column;
  gap: 0.5rem;
}

article.blog-post-article:not(.portrait) .blog .blog-video-section,
article.blog-post-article:not(.portrait) .blog .blog-audio-section {
  height: auto;
  aspect-ratio: auto;
}

article.blog-post-article:not(.portrait) .blog .blog-video-section-container {
  display: flex;
  width: 100%;
  height: calc(13.4375rem + (51.875 - 13.4375) * (100vw - 24.5625rem) / (120 - 24.5625));
  margin: 0.625rem 0;
  flex-direction: column;
  gap: 0.5rem;
  aspect-ratio: 16 / 9;
}

article.blog-post-article:not(.portrait) .blog .blog-audio-section-container {
  display: flex;
  width: 100%;
  margin: 0.625rem 0;
  flex-direction: column;
  gap: 0.5rem;
}

article.blog-post-article.portrait .blog .blog-video-section,
article.blog-post-article.portrait .blog .blog-audio-section {
  display: contents;
  height: auto;
  aspect-ratio: auto;
}

article.blog-post-article.portrait .blog .blog-video-section-container {
  display: flex;
  width: 100%;
  margin: 0.25rem 0 0;
  padding: 0 0.9375rem;
  flex-direction: column;
  gap: 0.5rem;
  aspect-ratio: 16 / 9;
}

article.blog-post-article.portrait .blog .blog-audio-section-container {
  display: flex;
  width: 100%;
  margin: 0.25rem 0 0;
  padding: 0 0.9375rem;
  flex-direction: column;
  gap: 0.5rem;
}

article.blog-post-article.portrait .blog .blog-image-section {
  display: block;
  margin: 0;
}

article.blog-post-article.portrait .blog .blog-image-section-container {
  display: flex;
  margin: 0.25rem 0 0;
  flex-direction: column;
  gap: 0.5rem;
}

article.blog-post-article.portrait .blog .blog-image-section .blog-image-section-img {
  height: auto;
}

article.blog-post-article .blog .blog-video-section iframe,
article.blog-post-article .blog .blog-video-section video,
article.blog-post-article .blog .blog-audio-section iframe {
  display: block;
  border: none;
}

article.blog-post-article .blog .consent-embed {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 12rem;
  overflow: hidden;
  background: var(--primary);
  color: white;
  place-items: stretch;
}

article.blog-post-article .blog .consent-embed--video {
  aspect-ratio: 16 / 9;
}

article.blog-post-article .blog .consent-embed iframe,
article.blog-post-article .blog .consent-embed__placeholder,
article.blog-post-article .blog .consent-embed__poster {
  width: 100%;
  height: 100%;
}

article.blog-post-article .blog .consent-embed iframe,
article.blog-post-article .blog .consent-embed__placeholder {
  grid-area: 1 / 1;
}

article.blog-post-article .blog .consent-embed__placeholder {
  position: relative;
  display: grid;
  min-height: inherit;
  place-items: center;
}

article.blog-post-article .blog .consent-embed__placeholder[hidden] {
  display: none;
}

article.blog-post-article .blog .consent-embed__poster {
  position: absolute;
  inset: 0;
  object-fit: cover;
  opacity: 0.45;
}

article.blog-post-article .blog .consent-embed__message {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  padding: 2rem;
  text-align: center;
}

article.blog-post-article .blog .consent-embed__button {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid currentcolor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

article.blog-post-article .blog-head .blog-head-image {
  gap: 0.5rem;
}

article.blog-post-article .blog .blog-image-section-credit,
article.blog-post-article .blog .blog-video-section-credit,
article.blog-post-article .blog .blog-audio-section-credit,
article.blog-post-article .blog .blog-gallery-section > .blog-image-credit {
  font-size: clamp(0.625rem, 0.56rem + 0.26vw, 0.875rem);
}

article.blog-post-article .blog .blog-image-section-credit b,
article.blog-post-article .blog .blog-video-section-credit b,
article.blog-post-article .blog .blog-audio-section-credit b,
article.blog-post-article .blog .blog-gallery-section > .blog-image-credit b {
  font-weight: 500;
}

article.blog-post-article.portrait .blog .blog-image-section-credit,
article.blog-post-article.portrait .blog .blog-video-section-credit,
article.blog-post-article.portrait .blog .blog-audio-section-credit,
article.blog-post-article.portrait .blog .blog-gallery-section > .blog-image-credit {
  padding-left: 0;
}

article.blog-post-article.portrait .blog-head-image-portrait-credit.blog-head-image-credit b {
  color: var(--secondary);
}

@media screen and (width >= 48rem) {
  article.blog-post-article:not(.portrait) .blog .blog-image-section,
  article.blog-post-article:not(.portrait) .blog .blog-video-section,
  article.blog-post-article:not(.portrait) .blog .blog-audio-section {
    width: calc(85% + 1rem);
    margin: 0 auto;
  }

  article.blog-post-article:not(.portrait) .blog .blog-image-section-container,
  article.blog-post-article:not(.portrait) .blog .blog-video-section-container,
  article.blog-post-article:not(.portrait) .blog .blog-audio-section-container {
    margin: 3.125rem 0;
    gap: 0.625rem;
  }

  article.blog-post-article:not(.portrait) .blog .blog-image-section-credit,
  article.blog-post-article:not(.portrait) .blog .blog-video-section-credit,
  article.blog-post-article:not(.portrait) .blog .blog-audio-section-credit {
    padding-left: calc(2.5rem + (5 - 2.5) * (100vw - 48rem) / (120 - 48));
  }

  article.blog-post-article.portrait .blog .blog-gallery-section {
    gap: 1.875rem;
  }

  article.blog-post-article.portrait .blog .blog-video-section-container {
    margin: 0.625rem 0;
    padding: 0;
    gap: 0.625rem;
  }

  article.blog-post-article.portrait .blog .blog-audio-section-container {
    margin: 0.625rem 0;
    padding: 0;
    gap: 0.625rem;
  }

  article.blog-post-article.portrait .blog .blog-image-section .blog-image-section-img {
    min-height: 20rem;
  }

  article.blog-post-article.portrait .blog .blog-image-section-container {
    margin: 0.625rem 0;
    gap: 0.625rem;
  }

  article.blog-post-article.portrait .blog .blog-image-section-credit,
  article.blog-post-article.portrait .blog .blog-video-section-credit,
  article.blog-post-article.portrait .blog .blog-audio-section-credit,
  article.blog-post-article.portrait .blog .blog-gallery-section > .blog-image-credit {
    padding-left: 1.5rem;
  }

  article.blog-post-article.portrait .blog-head-image-portrait-credit.blog-head-image-credit {
    font-size: clamp(0.625rem, 0.56rem + 0.26vw, 0.875rem);
  }

  article.blog-post-article .blog-head .blog-head-image {
    gap: 0.625rem;
  }
}

.blog-post-page.portrait .blog-also-interesting {
  position: relative;
  z-index: 2;
  background-color: var(--white);
}

.section-category-article-image-container picture {
  display: block;
  width: 100%;
}

.section-category-article-image-container picture,
.section-category-article-image-container picture img {
  height: 100%;
}

.section-category-article-separator {
  margin-right: 0.35em;
}

.search-result-image-container picture {
  display: block;
  width: 100%;
}

.search-result-image-container picture,
.search-result-image-container picture img {
  height: 100%;
}

.category-empty {
  padding-top: 2rem;
  padding-bottom: 6rem;
  border-top: 1px solid var(--grey-217);
}

@media screen and (width >= 48rem) {
  article.blog-post-article.blog-head-auto-height:not(.portrait) .blog-head-image picture {
    height: auto;
  }

  article.blog-post-article.blog-head-auto-height:not(.portrait) .blog-head-image-img {
    height: auto;
    object-fit: contain;
  }

  .tag-article-image-caption :is(a, span),
  .blog-also-interesting-image-caption :is(a, span) {
    padding: 0.375rem 0.625rem;
  }

  article.blog-post-article.portrait {
    display: grid;
    min-width: 0;
    overflow: hidden;
    align-items: start;
    grid-template-columns: minmax(0, 2.05fr) minmax(0, 3fr);
    grid-template-rows: auto auto auto;
    column-gap: 1.25rem;
  }

  article.blog-post-article.portrait > .blog-portrait-rail {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
  }

  article.blog-post-article.portrait > .blog-head,
  article.blog-post-article.portrait > .blog {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    color: var(--primary);
    visibility: visible;
    opacity: 1;
    background: var(--white);
    grid-column: 2;
  }

  article.blog-post-article.portrait > .blog-head {
    grid-row: 1;
  }

  article.blog-post-article.portrait > .blog {
    overflow: visible;
    grid-row: 2;
  }

  article.blog-post-article.portrait .blog-section,
  article.blog-post-article.portrait .blog-quote-section,
  article.blog-post-article.portrait .blog-image-section,
  article.blog-post-article.portrait .blog-gallery-section {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  article.blog-post-article.portrait .blog-image-section {
    width: 100%;
  }

  article.blog-post-article.portrait .blog-image-section-img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }
}

@media screen and (width >= 70rem) {
  .blog-also-interesting-items > li {
    flex: 1 1 0;
  }
}