/* Temporary 2026-10-05 preview override: match the 56px Figma bar while
   retaining the provider's generated content. Remove when its height aligns. */
#texmetals-fob {
  --fob-preview-height: 56px;
  height: var(--fob-preview-height);
  min-height: var(--fob-preview-height);
  background: #242424;
}
#texmetals-fob .fob-banner {
  height: var(--fob-preview-height) !important;
  min-height: var(--fob-preview-height);
  animation: none !important;
}
.site-header {
  position: sticky;
  top: 0;
  transition: background-color 180ms ease;
}
.site-header.is-sticky {
  background-color: var(--header);
}
html {
  scroll-padding-top: calc(var(--site-header-height, 104px) + 24px);
}
.contents-panel {
  top: calc(var(--site-header-height, 104px) + 24px);
}
.mobile-search-panel {
  position: fixed;
  top: var(--site-header-bottom, 104px);
  left: 0;
  right: 0;
  z-index: 21;
}
.icon--chevron-right {
  transition: translate 180ms ease;
}
:is(a, button):not(:disabled):not([aria-disabled="true"]):is(
    :hover,
    :focus-visible
  )
  .icon--chevron-right {
  translate: 4px 0;
}
@media (min-width: 2200px) {
  /* Share the article's centered 1360px + 80px + 400px layout with guides. */
  .article-layout,
  .guide-layout {
    justify-content: center;
  }
  .article-layout > .reading-main,
  .guide-layout > .reading-main {
    flex: 0 1 1360px;
  }
  .article-layout .guide-promo h2 {
    font-size: 16px;
    line-height: 24px;
  }
}
.video-poster {
  overflow: hidden;
}
.video-poster > button {
  top: 50%;
  transform: translate(-50%, -50%);
}
.video-poster > button:not(:disabled) {
  cursor: pointer;
}
.video-poster > :is(video, iframe) {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .icon--chevron-right {
    transition: none;
  }
}