/* The host fills its grid cell or list item: a code component's host is otherwise inline and can be sized by the card's own content. */
:host {
  display: block;
  height: 100%;
  min-width: 0;
}

/* A code component's Shadow DOM doesn't inherit the prototype's global box-sizing reset. */
.pS8m7dzsekPsRwnLrMQs,
.pS8m7dzsekPsRwnLrMQs *,
.pS8m7dzsekPsRwnLrMQs *::before,
.pS8m7dzsekPsRwnLrMQs *::after {
  box-sizing: border-box;
}

/*
 * The featured block's cards (prototype InsightsPage "Featured"). The band, its columns and the
 * lists are native Webflow. The band's padding and gap reach the lead's art through three optional
 * custom properties set on any ancestor: --featured-bleed-top, --featured-bleed-left,
 * --featured-bleed-right (lengths, default 0), so the art can run out to the band's edges.
 */
.pS8m7dzsekPsRwnLrMQs {
  --rule: var(--border-default, #595959) 0 2px, transparent 2px 4px;
  display: flex;
  flex-direction: column;
  /* A grid column's minimum is its content, so let the card shrink and break a long unbroken word (a long slug-like title) instead of widening the band. */
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary, #171717);
  text-decoration: none;
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.Pl00ZrgbXgzUn_umnHv3:focus-visible {
  border-radius: 16px;
  outline: 2px solid var(--action-primary-default, #0073e6);
  outline-offset: 6px;
}

.Z4P07UG0DHm6iAAUL7G8 {
  gap: max(20px, 1.85vw);
}

/*
 * The art box: no frame, its foot cut straight on a solid line, out to the band's edges when the bleed
 * properties are set. The pattern (an SVG, a crop of the post's one board) covers it, held to the lower right where the fan and the person are.
 */
.B808Nfu4faf6x6uAwTw7 {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 2000 / 952;
  margin: calc(-1 * var(--featured-bleed-top, 0px)) calc(-1 * var(--featured-bleed-right, 0px)) 0
    calc(-1 * var(--featured-bleed-left, 0px));
  border-bottom: 1px solid var(--border-lightest, #cfc7d4);
  background: #fff;
}

.onkVjFkVjnUUBLS3ftbx {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 100% 100%;
  transition: scale 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * A custom image (the Banner Image, 4000 × 1360, the author at the lower right): the right half's lower 70%
 * (2000 × 952), the whole picture twice the frame's width held to its lower right; it grows from there on hover.
 */
.OS8DLu_xMMDZesOEAil2 {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: 200%;
  max-width: none;
  height: auto;
  transform-origin: 100% 100%;
  transition: scale 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* A custom image with Wide art off: the framed 16:9 look (a white frame, a 1px Border / Lightest border, rounded), the image filling it. */
.B808Nfu4faf6x6uAwTw7.XLFsaeWWMqO4bkPRdJTy {
  aspect-ratio: 16 / 9;
  margin: 0;
  border: 1px solid var(--border-lightest, #cfc7d4);
  border-radius: 16px;
}

.OS8DLu_xMMDZesOEAil2.yc5mqyBKrRhRdATII2De {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Z4P07UG0DHm6iAAUL7G8.Pl00ZrgbXgzUn_umnHv3:is(:hover, :focus-visible) :is(.onkVjFkVjnUUBLS3ftbx, .OS8DLu_xMMDZesOEAil2) {
  scale: 1.03;
}

.UmjxvGQHY5TDtVcbCuig {
  display: flex;
  flex-direction: column;
  gap: max(10px, 0.93vw);
}

/* The topic: Eyebrow Small in a 1px soft-black outline, only as wide as its words. */
.sABe5qPgpSK4hlJuCrT9 {
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px solid var(--text-primary, #171717);
  font-size: var(--type-eyebrow-small-size, 12px);
  font-weight: var(--type-eyebrow-small-weight, 700);
  line-height: var(--type-eyebrow-small-lh, 17px);
  letter-spacing: var(--type-eyebrow-small-ls, 4.06px);
  text-transform: uppercase;
}

.mqgVhtRTM6LhPnbwrBmZ {
  margin: 0;
  font-weight: 400;
  text-wrap: pretty;
  transition: color 300ms ease;
}

/* The lead's title: Heading L. */
.Z4P07UG0DHm6iAAUL7G8 .mqgVhtRTM6LhPnbwrBmZ {
  font-size: var(--type-heading-l-size, 54px);
  line-height: var(--type-heading-l-lh, 59px);
  letter-spacing: var(--type-heading-l-ls, 0);
}

/* The side titles: Heading M, a size down. */
.deuKgV8yrH3pnq3AwaFY .mqgVhtRTM6LhPnbwrBmZ {
  font-size: var(--type-heading-m-size, 42px);
  line-height: var(--type-heading-m-lh, 50px);
  letter-spacing: var(--type-heading-m-ls, 0);
}

.Pl00ZrgbXgzUn_umnHv3:is(:hover, :focus-visible) .mqgVhtRTM6LhPnbwrBmZ {
  color: var(--action-primary-default, #0073e6);
}

.mqgVhtRTM6LhPnbwrBmZ strong {
  font-weight: 500;
}

.NIFsgDs2wN_LnhY7cdN3 {
  color: var(--neutral-700, #353535);
  font-size: var(--type-large-size, 22px);
  line-height: var(--type-large-lh, 32px);
  text-wrap: pretty;
}

.ONqIFqVm4jFsGuGiGSJX {
  color: var(--neutral-700, #353535);
  font-size: var(--type-default-size, 16px);
  line-height: var(--type-default-lh, 24px);
}

.ONqIFqVm4jFsGuGiGSJX strong {
  color: var(--text-primary, #171717);
  font-weight: 600;
}

/*
 * A Side item: its text centered in the item's height. Its dotted rule across the top (.rule) is
 * only drawn where the card says so: between Side items, never above the first one beside the
 * Lead, which draws it only when stacked (.ruleStacked, 1100px and below).
 */
.deuKgV8yrH3pnq3AwaFY {
  position: relative;
  justify-content: center;
  height: 100%;
  padding: max(20px, 1.85vw) 0;
}

.x8y9K44T0rSM0vkfQO15::before,
.i28c5qoZetP1VD1ClnfX::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--rule));
}

.i28c5qoZetP1VD1ClnfX::before {
  display: none;
}

/* Stacked: the art wider than tall (16:7), cut at its left and top so more of the author shows. */
@media (max-width: 1100px) {
  .i28c5qoZetP1VD1ClnfX::before {
    display: block;
  }

  .B808Nfu4faf6x6uAwTw7:not(.XLFsaeWWMqO4bkPRdJTy) {
    --crop-x: 320px;
    --crop-y: 240px;
    aspect-ratio: 16 / 7;
    /* Full width: out to the band's gutter on the right too, as on the left. */
    margin-right: calc(-1 * var(--featured-bleed-left, 0px));
  }

  .OS8DLu_xMMDZesOEAil2:not(.yc5mqyBKrRhRdATII2De) {
    position: static;
    width: calc(100% + var(--crop-x));
    height: calc(100% + var(--crop-y));
    object-position: 100% 100%;
    margin: calc(-1 * var(--crop-y)) 0 0 calc(-1 * var(--crop-x));
  }
}

@media (max-width: 767px) {
  .B808Nfu4faf6x6uAwTw7:not(.XLFsaeWWMqO4bkPRdJTy) {
    --crop-x: 200px;
    --crop-y: 150px;
    aspect-ratio: 2000 / 1360;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onkVjFkVjnUUBLS3ftbx,
  .OS8DLu_xMMDZesOEAil2,
  .mqgVhtRTM6LhPnbwrBmZ {
    transition: none;
  }
}