/* Print-derived output layouts. Device adjustments never alter the print grid. */
.composer-item .newsletter-block.kind-photo > .block-image,
.composer-item .newsletter-block.kind-photo .block-media-item img,
.publication-page-item .newsletter-block.kind-photo > .block-image,
.publication-page-item .newsletter-block.kind-photo .block-media-item img,
.web-publication-item .newsletter-block.kind-photo > .block-image,
.web-publication-item .newsletter-block.kind-photo .block-media-item img,
.web-publication-group-item .newsletter-block.kind-photo > .block-image,
.web-publication-group-item .newsletter-block.kind-photo .block-media-item img,
.layout-wrap-media .block-media-item img {
  scale: calc(var(--output-image-scale-x, var(--item-image-scale-x, 1)) * var(--media-image-scale-x, 100) / 100) calc(var(--output-image-scale-y, var(--item-image-scale-y, 1)) * var(--media-image-scale-y, 100) / 100);
}

.block-media-item img,
.in-story-media > img {
  scale: calc(var(--media-image-scale-x, 100) / 100) calc(var(--media-image-scale-y, 100) / 100);
}

.composer-pages.flow-view .composer-page-canvas {
  --output-header-rows: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.composer-pages.flow-view .composer-page-canvas.has-masthead { --output-header-rows: 1; }
.page-composer .composer-pages.flow-view .composer-page-canvas .composer-item {
  grid-column: var(--output-column, 1) / span var(--output-width, 12) !important;
  grid-row: calc(var(--output-row, 1) + var(--output-header-rows)) / span var(--output-row-span, 1) !important;
  order: var(--output-order, 0);
  margin: var(--output-margin-top, 0px) var(--output-margin-right, 0px) var(--output-margin-bottom, 0px) var(--output-margin-left, 0px);
  transform: rotate(var(--output-rotation, 0deg));
}
.composer-pages.web-view .composer-item {
  --output-column: var(--web-column, 1);
  --output-width: var(--web-width, 12);
  --output-row: var(--web-row, 1);
  --output-row-span: var(--web-row-span, 1);
  --output-order: var(--web-order, 0);
  --output-margin-top: var(--web-margin-top, 0px);
  --output-margin-right: var(--web-margin-right, 0px);
  --output-margin-bottom: var(--web-margin-bottom, 0px);
  --output-margin-left: var(--web-margin-left, 0px);
  --output-rotation: var(--web-rotation, 0deg);
  --output-image-scale-x: var(--web-image-scale-x, 1);
  --output-image-scale-y: var(--web-image-scale-y, 1);
}
.composer-pages.tablet-view .composer-item {
  --output-column: var(--tablet-column, 1);
  --output-width: var(--tablet-width, 12);
  --output-row: var(--tablet-row, 1);
  --output-row-span: var(--tablet-row-span, 1);
  --output-order: var(--tablet-order, 0);
  --output-margin-top: var(--tablet-margin-top, 0px);
  --output-margin-right: var(--tablet-margin-right, 0px);
  --output-margin-bottom: var(--tablet-margin-bottom, 0px);
  --output-margin-left: var(--tablet-margin-left, 0px);
  --output-rotation: var(--tablet-rotation, 0deg);
  --output-image-scale-x: var(--tablet-image-scale-x, 1);
  --output-image-scale-y: var(--tablet-image-scale-y, 1);
}
.composer-pages.mobile-view .composer-item {
  --output-column: var(--mobile-column, 1);
  --output-width: var(--mobile-width, 12);
  --output-row: var(--mobile-row, 1);
  --output-row-span: var(--mobile-row-span, 1);
  --output-order: var(--mobile-order, 0);
  --output-margin-top: var(--mobile-margin-top, 0px);
  --output-margin-right: var(--mobile-margin-right, 0px);
  --output-margin-bottom: var(--mobile-margin-bottom, 0px);
  --output-margin-left: var(--mobile-margin-left, 0px);
  --output-rotation: var(--mobile-rotation, 0deg);
  --output-image-scale-x: var(--mobile-image-scale-x, 1);
  --output-image-scale-y: var(--mobile-image-scale-y, 1);
}

@media screen {
  .web-publication-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .web-publication-item {
    grid-column: var(--output-column, 1) / span var(--output-width, 12);
    grid-row: var(--output-row, 1) / span var(--output-row-span, 1);
    order: var(--output-order, 0);
    margin: var(--output-margin-top, 0px) var(--output-margin-right, 0px) var(--output-margin-bottom, 0px) var(--output-margin-left, 0px);
    transform: rotate(var(--output-rotation, 0deg));
  }
}
@media screen and (min-width: 1025px) {
  .web-publication-item {
    --output-column: var(--web-column, 1);
    --output-width: var(--web-width, 12);
    --output-row: var(--web-row, 1);
    --output-row-span: var(--web-row-span, 1);
    --output-order: var(--web-order, 0);
    --output-margin-top: var(--web-margin-top, 0px);
    --output-margin-right: var(--web-margin-right, 0px);
    --output-margin-bottom: var(--web-margin-bottom, 0px);
    --output-margin-left: var(--web-margin-left, 0px);
    --output-rotation: var(--web-rotation, 0deg);
  }
  .web-publication-item,
  .web-publication-item .layout-wrap-media {
    --output-image-scale-x: var(--web-image-scale-x, 1);
    --output-image-scale-y: var(--web-image-scale-y, 1);
  }
}
@media screen and (min-width: 761px) and (max-width: 1024px) {
  .web-publication-item {
    --output-column: var(--tablet-column, 1);
    --output-width: var(--tablet-width, 12);
    --output-row: var(--tablet-row, 1);
    --output-row-span: var(--tablet-row-span, 1);
    --output-order: var(--tablet-order, 0);
    --output-margin-top: var(--tablet-margin-top, 0px);
    --output-margin-right: var(--tablet-margin-right, 0px);
    --output-margin-bottom: var(--tablet-margin-bottom, 0px);
    --output-margin-left: var(--tablet-margin-left, 0px);
    --output-rotation: var(--tablet-rotation, 0deg);
  }
  .web-publication-item,
  .web-publication-item .layout-wrap-media {
    --output-image-scale-x: var(--tablet-image-scale-x, 1);
    --output-image-scale-y: var(--tablet-image-scale-y, 1);
  }
}
@media screen and (max-width: 760px) {
  .web-publication-item {
    --output-column: var(--mobile-column, 1);
    --output-width: var(--mobile-width, 12);
    --output-row: var(--mobile-row, 1);
    --output-row-span: var(--mobile-row-span, 1);
    --output-order: var(--mobile-order, 0);
    --output-margin-top: var(--mobile-margin-top, 0px);
    --output-margin-right: var(--mobile-margin-right, 0px);
    --output-margin-bottom: var(--mobile-margin-bottom, 0px);
    --output-margin-left: var(--mobile-margin-left, 0px);
    --output-rotation: var(--mobile-rotation, 0deg);
  }
  .web-publication-item,
  .web-publication-item .layout-wrap-media {
    --output-image-scale-x: var(--mobile-image-scale-x, 1);
    --output-image-scale-y: var(--mobile-image-scale-y, 1);
  }
  .web-publication-item.mobile-width-half { grid-column: var(--output-column, 1) / span var(--output-width, 6); }
}

/* Grouped print elements remain one proportional composite on every screen. */
@media screen {
  .web-publication-group {
    position: relative;
    min-width: 0;
    grid-column: var(--output-column, 1) / span var(--output-width, 12);
    grid-row: var(--output-row, 1) / span var(--output-row-span, 1);
    order: var(--output-order, 0);
    aspect-ratio: var(--group-aspect, 16 / 9);
    margin: var(--output-margin-top, 0px) var(--output-margin-right, 0px) var(--output-margin-bottom, 0px) var(--output-margin-left, 0px);
    transform: rotate(var(--output-rotation, 0deg));
    container-type: inline-size;
  }
  .web-publication-group-canvas {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--group-columns, 12), minmax(0, 1fr));
    grid-template-rows: repeat(var(--group-rows, 12), minmax(0, 1fr));
    gap: clamp(2px, .3cqw, 5px);
  }
  .web-publication-group-item {
    position: relative;
    min-width: 0;
    min-height: 0;
    grid-column: var(--group-x, 1) / span var(--group-w, 1);
    grid-row: var(--group-y, 1) / span var(--group-h, 1);
    overflow: hidden;
    isolation: isolate;
  }
  .web-publication-group-item > .newsletter-block { width: 100%; height: 100%; min-height: 0; }
  .web-publication-group-item .block-content { height: 100%; padding: clamp(.45rem, 1.4cqw, 1.35rem); overflow: hidden; }
  .web-publication-group-item .newsletter-block h2 { font-size: clamp(.8rem, 3.2cqw, 2.35rem); }
  .web-publication-group-item .block-body { font-size: clamp(.56rem, 1.55cqw, 1rem); line-height: 1.35; }
  .web-publication-group-item.profile-web-hidden { display: none; }
}
@media screen and (min-width: 1025px) {
  .web-publication-group {
    --output-column: var(--web-column, 1); --output-width: var(--web-width, 12);
    --output-row: var(--web-row, 1); --output-row-span: var(--web-row-span, 1);
    --output-order: var(--web-order, 0);
    --output-margin-top: var(--web-margin-top, 0px); --output-margin-right: var(--web-margin-right, 0px);
    --output-margin-bottom: var(--web-margin-bottom, 0px); --output-margin-left: var(--web-margin-left, 0px);
    --output-rotation: var(--web-rotation, 0deg);
  }
  .web-publication-group-item,
  .web-publication-group-item .layout-wrap-media {
    --output-image-scale-x: var(--web-image-scale-x, var(--item-image-scale-x, 1));
    --output-image-scale-y: var(--web-image-scale-y, var(--item-image-scale-y, 1));
  }
}
@media screen and (min-width: 761px) and (max-width: 1024px) {
  .web-publication-group {
    --output-column: var(--tablet-column, 1); --output-width: var(--tablet-width, 12);
    --output-row: var(--tablet-row, 1); --output-row-span: var(--tablet-row-span, 1);
    --output-order: var(--tablet-order, 0);
    --output-margin-top: var(--tablet-margin-top, 0px); --output-margin-right: var(--tablet-margin-right, 0px);
    --output-margin-bottom: var(--tablet-margin-bottom, 0px); --output-margin-left: var(--tablet-margin-left, 0px);
    --output-rotation: var(--tablet-rotation, 0deg);
  }
  .web-publication-group-item,
  .web-publication-group-item .layout-wrap-media {
    --output-image-scale-x: var(--tablet-image-scale-x, var(--item-image-scale-x, 1));
    --output-image-scale-y: var(--tablet-image-scale-y, var(--item-image-scale-y, 1));
  }
}
@media screen and (max-width: 760px) {
  .web-publication-group {
    display: block;
    grid-column: 1 / -1;
    --output-order: var(--mobile-order, 0);
    --output-margin-top: var(--mobile-margin-top, 0px); --output-margin-right: var(--mobile-margin-right, 0px);
    --output-margin-bottom: var(--mobile-margin-bottom, 0px); --output-margin-left: var(--mobile-margin-left, 0px);
    --output-rotation: var(--mobile-rotation, 0deg);
  }
  .web-publication-group-item,
  .web-publication-group-item .layout-wrap-media {
    --output-image-scale-x: var(--mobile-image-scale-x, var(--item-image-scale-x, 1));
    --output-image-scale-y: var(--mobile-image-scale-y, var(--item-image-scale-y, 1));
  }
  .web-publication-group.profile-web-hidden.profile-mobile-visible { display: block; }
  .web-publication-group.profile-mobile-hidden,
  .web-publication-group-item.profile-mobile-hidden { display: none !important; }
}

/* Device previews use the same grouped-composite contract as public output. */
.composer-pages.flow-view .composer-responsive-group {
  position: relative;
  min-width: 0;
  min-height: 0;
  grid-column: var(--output-column, 1) / span var(--output-width, 12);
  grid-row: calc(var(--output-row, 1) + var(--output-header-rows, 0)) / span var(--output-row-span, 1);
  order: var(--output-order, 0);
  aspect-ratio: var(--group-aspect, 16 / 9);
  margin: var(--output-margin-top, 0px) var(--output-margin-right, 0px) var(--output-margin-bottom, 0px) var(--output-margin-left, 0px);
  transform: rotate(var(--output-rotation, 0deg));
  container-type: inline-size;
}
.composer-pages.flow-view .composer-responsive-group-canvas {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--group-columns, 12), minmax(0, 1fr));
  grid-template-rows: repeat(var(--group-rows, 12), minmax(0, 1fr));
  gap: clamp(2px, .3cqw, 5px);
}
.page-composer .composer-pages.flow-view .composer-responsive-group .composer-item {
  position: relative;
  inset: auto;
  min-width: 0;
  min-height: 0;
  grid-column: var(--group-x, 1) / span var(--group-w, 1) !important;
  grid-row: var(--group-y, 1) / span var(--group-h, 1) !important;
  order: 0;
  margin: 0 !important;
  transform: none;
  overflow: hidden;
}
.composer-pages.flow-view .composer-responsive-group .composer-item-preview,
.composer-pages.flow-view .composer-responsive-group .composer-item-preview > .newsletter-block {
  height: 100%;
  min-height: 0;
}
.composer-pages.flow-view .composer-responsive-group .block-content {
  height: 100%;
  padding: clamp(.4rem, 1.35cqw, 1.25rem);
  overflow: hidden;
}
.composer-pages.flow-view .composer-responsive-group .newsletter-block h2 { font-size: clamp(.8rem, 3.1cqw, 2.25rem); }
.composer-pages.flow-view .composer-responsive-group .block-body { font-size: clamp(.54rem, 1.5cqw, 1rem); line-height: 1.35; }

/* Layout parity: grouped desktop and tablet output uses one print-sized canvas
   and scales the complete composition. This preserves line breaks, internal
   gaps, and element proportions instead of recalculating each child fluidly. */
@media screen {
  .web-publication-group,
  .composer-pages.flow-view .composer-responsive-group {
    overflow: hidden;
  }
  .web-publication-group-canvas,
  .composer-pages.flow-view .composer-responsive-group-canvas {
    position: absolute;
    inset: auto;
    top: 0;
    left: 0;
    width: var(--group-logical-width);
    height: var(--group-logical-height);
    grid-template-columns: repeat(var(--group-columns, 12), minmax(0, 1fr));
    grid-template-rows: repeat(var(--group-rows, 12), minmax(0, 1fr));
    gap: 4.8px;
    transform: scale(var(--group-scale, 1));
    transform-origin: top left;
  }
  .web-publication-group-item > .newsletter-block,
  .composer-pages.flow-view .composer-responsive-group .composer-item-preview > .newsletter-block {
    height: 100%;
    margin: 0;
    border-radius: 6px;
    box-shadow: none;
  }
  .web-publication-group-item .block-content,
  .composer-pages.flow-view .composer-responsive-group .block-content {
    height: auto;
    padding: 9.6px;
    overflow: hidden;
  }
  .web-publication-group-item .newsletter-block h2,
  .composer-pages.flow-view .composer-responsive-group .newsletter-block h2 {
    margin-bottom: 3.84px;
    font-size: var(--block-heading-size, 11pt);
  }
  .web-publication-group-item .block-body,
  .composer-pages.flow-view .composer-responsive-group .block-body {
    font-size: var(--block-body-size, 7pt);
    line-height: 1.25;
  }
  .web-publication-group-item .rich-content p,
  .composer-pages.flow-view .composer-responsive-group .rich-content p {
    margin-bottom: min(var(--block-paragraph-spacing, 1rem), 5.28px);
  }
  .web-publication-group-item .block-action,
  .composer-pages.flow-view .composer-responsive-group .block-action {
    margin-top: 3.84px;
    padding: 2.88px 5.76px;
    font-size: 6pt;
  }
  .web-publication-group-item .kind-contact .block-content,
  .composer-pages.flow-view .composer-responsive-group .kind-contact .block-content { padding: 5.76px; }
  .web-publication-group-item .kind-contact .block-body,
  .composer-pages.flow-view .composer-responsive-group .kind-contact .block-body { gap: 5.28px; }
  .web-publication-group-item .kind-contact .block-body > p > a,
  .composer-pages.flow-view .composer-responsive-group .kind-contact .block-body > p > a {
    min-height: 24px;
    grid-template-columns: 19.2px minmax(0, 1fr);
    gap: 4.8px;
    padding: 2.4px 3.84px;
    border-radius: 3.36px;
    white-space: nowrap;
  }
  .web-publication-group-item .kind-contact .block-body > p > a::before,
  .composer-pages.flow-view .composer-responsive-group .kind-contact .block-body > p > a::before {
    width: 17.28px;
    height: 17.28px;
    border-radius: 2.88px;
    font-size: 7pt;
  }
  .composer-pages.flow-view .composer-responsive-group .composer-item-top {
    position: absolute;
    z-index: 11;
    top: 0;
    right: 0;
    left: 0;
    opacity: .82;
  }
  .composer-pages.flow-view .composer-responsive-group .composer-item-preview { inset: 0; }
}

/* Narrow output favors readable stacked cards. The DOM order follows the
   print reading order supplied by ResponsiveLayoutUnitView.member_views. */
@media screen and (max-width: 760px) {
  .web-publication-group {
    aspect-ratio: auto;
    overflow: visible;
  }
  .web-publication-group-canvas {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transform: none;
  }
  .web-publication-group-item {
    display: block;
    grid-column: auto !important;
    grid-row: auto !important;
    overflow: visible;
  }
  .web-publication-group-item > .newsletter-block,
  .web-publication-group-item .block-content { height: auto; overflow: visible; }
  .web-publication-group-item .block-content { padding: clamp(1.35rem, 3vw, 2.35rem); }
  .web-publication-group-item .newsletter-block h2 { font-size: var(--block-heading-size, clamp(1.65rem, 3vw, 2.6rem)); }
  .web-publication-group-item .block-body { font-size: var(--block-body-size, inherit); }
}

.composer-pages.mobile-view .composer-responsive-group {
  aspect-ratio: auto;
  overflow: visible;
}
.composer-pages.mobile-view .composer-responsive-group-canvas {
  position: static;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: none;
}
.page-composer .composer-pages.mobile-view .composer-responsive-group .composer-item {
  display: block;
  min-height: 100px;
  grid-column: auto !important;
  grid-row: auto !important;
  overflow: hidden;
}
.composer-pages.mobile-view .composer-responsive-group .composer-item-top { position: relative; opacity: 1; }
.composer-pages.mobile-view .composer-responsive-group .composer-item-preview { position: relative; inset: auto; min-height: 100px; }
.composer-pages.mobile-view .composer-responsive-group .composer-item-preview > .newsletter-block,
.composer-pages.mobile-view .composer-responsive-group .block-content { height: auto; }

/* Opt-in photo fitting follows the saved content box in editor and output. */
.image-fit-contain { --photo-box-fit:contain; }
.image-fit-cover { --photo-box-fit:cover; }
:is(.image-fit-contain,.image-fit-cover) .newsletter-block.kind-photo {
  display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden;
}
:is(.image-fit-contain,.image-fit-cover) .kind-photo > .block-media-zone:has(> .block-media-item) {
  flex:1 1 0; min-height:0; overflow:hidden;
}
:is(.image-fit-contain,.image-fit-cover) .kind-photo > .block-media-zone > .block-media-item {
  display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden;
}
:is(.image-fit-contain,.image-fit-cover) .kind-photo > .block-main {
  flex:0 0 auto;
}
:is(.image-fit-contain,.image-fit-cover) .kind-photo > .block-main:not(:has(h2:not(.sr-only),.block-body,.block-eyebrow,.block-action,.event-meta)),
:is(.image-fit-contain,.image-fit-cover) .kind-photo > .media-zone-gallery:not(:has(.block-media-item)) { display:none; }
:is(.image-fit-contain,.image-fit-cover) .newsletter-block.kind-photo > .block-image,
:is(.image-fit-contain,.image-fit-cover) .newsletter-block.kind-photo .block-media-item > img {
  flex:1 1 0; width:100%; height:0; min-height:0; max-width:100%; aspect-ratio:auto;
  object-fit:var(--photo-box-fit); scale:1; transform:none;
}
:is(.image-fit-contain,.image-fit-cover) .kind-photo figcaption { flex:0 0 auto; }
/* Reading layouts have automatic row heights; retain intrinsic image height
   there so fitting cannot collapse an otherwise empty row. */
@media screen {
  .web-publication-item:is(.image-fit-contain,.image-fit-cover) .newsletter-block.kind-photo,
  .web-publication-item:is(.image-fit-contain,.image-fit-cover) .kind-photo > .block-media-zone,
  .web-publication-item:is(.image-fit-contain,.image-fit-cover) .kind-photo .block-media-item,
  .web-publication-item:is(.image-fit-contain,.image-fit-cover) .kind-photo > .block-image,
  .web-publication-item:is(.image-fit-contain,.image-fit-cover) .kind-photo .block-media-item > img {
    height:auto; flex:0 0 auto;
  }
}
@media screen and (max-width:760px) {
  .web-publication-group-item:is(.image-fit-contain,.image-fit-cover) .newsletter-block.kind-photo,
  .web-publication-group-item:is(.image-fit-contain,.image-fit-cover) .kind-photo > .block-media-zone,
  .web-publication-group-item:is(.image-fit-contain,.image-fit-cover) .kind-photo .block-media-item,
  .web-publication-group-item:is(.image-fit-contain,.image-fit-cover) .kind-photo > .block-image,
  .web-publication-group-item:is(.image-fit-contain,.image-fit-cover) .kind-photo .block-media-item > img {
    height:auto; flex:0 0 auto;
  }
}

/* Fluid PowerPoint groups. Print continues to use the exact 12-by-24 source
   geometry; Web, Tablet, and Mobile use content-sized responsive rows. */
@media screen {
  .composer-pages.flow-view .composer-page-canvas { min-height: 0; }
  .web-publication-group,
  .composer-pages.flow-view .composer-responsive-group {
    aspect-ratio: auto;
    min-height: 0;
    overflow: visible;
  }
  .web-publication-group-canvas,
  .composer-pages.flow-view .composer-responsive-group-canvas {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: clamp(.65rem, 1.5vw, 1.15rem);
    transform: none;
  }
  .web-publication-group-item,
  .page-composer .composer-pages.flow-view .composer-responsive-group .composer-item {
    position: relative;
    inset: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: visible;
    margin: 0 !important;
    transform: none;
  }
  .web-publication-group-item > .newsletter-block,
  .composer-pages.flow-view .composer-responsive-group .composer-item-preview,
  .composer-pages.flow-view .composer-responsive-group .composer-item-preview > .newsletter-block {
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .web-publication-group-item .block-content,
  .composer-pages.flow-view .composer-responsive-group .block-content {
    height: auto;
    padding: clamp(.9rem, 2vw, 1.5rem);
    overflow: visible;
  }
  .web-publication-group-item .newsletter-block h2,
  .composer-pages.flow-view .composer-responsive-group .newsletter-block h2 {
    margin-bottom: .65rem;
    font-size: var(--block-heading-size, clamp(1.35rem, 2.6vw, 2.2rem));
  }
  .web-publication-group-item .block-body,
  .composer-pages.flow-view .composer-responsive-group .block-body {
    font-size: var(--block-body-size, 1rem);
    line-height: 1.5;
  }
  /* PowerPoint print keeps its exact paragraph metrics in the rasterized page.
     Responsive output uses a deliberately independent editorial scale. Source
     emphasis, compatible font families, paragraph alignment, and explicit
     Pulse title roles remain intact while Web, Tablet, and Mobile may change
     their geometry in the device editor. */
  .web-publication-item.layer-role-body .block-body,
  .web-publication-group[data-layout-group^="ppt-"] .block-body,
  .composer-item.layer-role-body .block-body,
  .composer-responsive-group[data-responsive-group-id^="ppt-"] .block-body {
    font-size: max(var(--block-body-size, 1rem), clamp(1.05rem, 1.15vw, 1.22rem));
    line-height: 1.58;
    letter-spacing: normal;
    word-spacing: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .web-publication-item.layer-role-body
    .block-body.rich-content span[style*="font-size"],
  .web-publication-group[data-layout-group^="ppt-"]
    .block-body.rich-content span[style*="font-size"],
  .composer-item.layer-role-body
    .block-body.rich-content span[style*="font-size"],
  .composer-responsive-group[data-responsive-group-id^="ppt-"]
    .block-body.rich-content span[style*="font-size"] {
    font-size: inherit !important;
  }
  .web-publication-item.layer-role-body
    .newsletter-block.align-justify .block-content,
  .web-publication-item.layer-role-body
    .block-body.rich-content p[style*="text-align: justify"],
  .web-publication-group[data-layout-group^="ppt-"]
    .newsletter-block.align-justify .block-content,
  .web-publication-group[data-layout-group^="ppt-"]
    .block-body.rich-content p[style*="text-align: justify"],
  .composer-item.layer-role-body
    .newsletter-block.align-justify .block-content,
  .composer-item.layer-role-body
    .block-body.rich-content p[style*="text-align: justify"],
  .composer-responsive-group[data-responsive-group-id^="ppt-"]
    .newsletter-block.align-justify .block-content,
  .composer-responsive-group[data-responsive-group-id^="ppt-"]
    .block-body.rich-content p[style*="text-align: justify"] {
    text-align: justify !important;
    text-align-last: left;
    text-justify: inter-word;
  }
  .web-publication-item.layer-role-title .newsletter-block h2,
  .web-publication-group[data-layout-group^="ppt-"]
    .web-publication-group-item.layer-role-title .newsletter-block h2,
  .composer-item.layer-role-title .newsletter-block h2,
  .composer-responsive-group[data-responsive-group-id^="ppt-"]
    .composer-item.layer-role-title .newsletter-block h2 {
    margin: 0;
    font-family: Cambria, Georgia, "Times New Roman", serif;
    font-size: max(
      var(--block-heading-size, 0px),
      clamp(1.55rem, 2.6vw, 2.5rem)
    ) !important;
    font-weight: 700;
    line-height: 1.16;
    text-align: center;
    text-wrap: balance;
  }
  /* Older imported drafts can contain a PULSE:TITLE layer stored as body
     content. Give it the same responsive heading treatment without mutating
     the exact Print layer or requiring the editor to re-import the deck. */
  .web-publication-item.layer-role-title .block-body,
  .web-publication-group[data-layout-group^="ppt-"]
    .web-publication-group-item.layer-role-title .block-body,
  .composer-item.layer-role-title .block-body,
  .composer-responsive-group[data-responsive-group-id^="ppt-"]
    .composer-item.layer-role-title .block-body {
    font-family: Cambria, Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 2.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.16;
    text-align: center !important;
    text-wrap: balance;
  }
  .web-publication-item.layer-role-title .block-body :is(p, span),
  .web-publication-group[data-layout-group^="ppt-"]
    .web-publication-group-item.layer-role-title .block-body :is(p, span),
  .composer-item.layer-role-title .block-body :is(p, span),
  .composer-responsive-group[data-responsive-group-id^="ppt-"]
    .composer-item.layer-role-title .block-body :is(p, span) {
    margin: 0;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit;
    text-align: inherit !important;
  }
  .web-publication-group-item:is(.image-fit-contain,.image-fit-cover) .newsletter-block.kind-photo,
  .web-publication-group-item:is(.image-fit-contain,.image-fit-cover) .kind-photo > .block-media-zone,
  .web-publication-group-item:is(.image-fit-contain,.image-fit-cover) .kind-photo .block-media-item,
  .web-publication-group-item:is(.image-fit-contain,.image-fit-cover) .kind-photo > .block-image,
  .web-publication-group-item:is(.image-fit-contain,.image-fit-cover) .kind-photo .block-media-item > img {
    height: auto;
    flex: 0 0 auto;
  }
}

@media screen and (min-width: 1025px) {
  .web-publication-group-item {
    grid-column: var(--group-web-grid-column, 1 / span 12);
    grid-row: var(--group-web-grid-row, auto);
  }
}
@media screen and (min-width: 761px) and (max-width: 1024px) {
  .web-publication-group-item {
    grid-column: var(--group-tablet-grid-column, 1 / span 12);
    grid-row: var(--group-tablet-grid-row, auto);
  }
}
@media screen and (max-width: 760px) {
  .web-publication-group-canvas {
    display: flex;
    flex-direction: column;
  }
  .web-publication-group-item { order: var(--group-mobile-order, 0); }
}

.page-composer .composer-pages.web-view .composer-responsive-group .composer-item {
  grid-column: var(--group-web-grid-column, 1 / span 12) !important;
  grid-row: var(--group-web-grid-row, auto) !important;
}
.page-composer .composer-pages.tablet-view .composer-responsive-group .composer-item {
  grid-column: var(--group-tablet-grid-column, 1 / span 12) !important;
  grid-row: var(--group-tablet-grid-row, auto) !important;
}
.composer-pages.mobile-view .composer-responsive-group-canvas {
  display: flex;
  flex-direction: column;
}
.page-composer .composer-pages.mobile-view .composer-responsive-group .composer-item {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: var(--group-mobile-order, 0);
}

/* Tablet and Mobile place photos in their own content-sized rows. Restore the
   picture's intrinsic height there instead of inheriting the fixed print-box
   height contract, which otherwise collapses a standalone photo row. */
.page-composer .composer-pages:is(.tablet-view,.mobile-view)
  .composer-responsive-group .newsletter-block.kind-photo,
.page-composer .composer-pages:is(.tablet-view,.mobile-view)
  .composer-responsive-group .kind-photo > .block-media-zone,
.page-composer .composer-pages:is(.tablet-view,.mobile-view)
  .composer-responsive-group .kind-photo .block-media-item,
.page-composer .composer-pages:is(.tablet-view,.mobile-view)
  .composer-responsive-group .kind-photo .block-media-item > img {
  height: auto;
  flex: 0 0 auto;
}
.page-composer .composer-pages:is(.tablet-view,.mobile-view)
  .composer-responsive-group .kind-photo .block-media-item > img {
  aspect-ratio: auto;
}

@media screen and (max-width: 1024px) {
  .web-publication-group-item .newsletter-block.kind-photo,
  .web-publication-group-item .kind-photo > .block-media-zone,
  .web-publication-group-item .kind-photo .block-media-item,
  .web-publication-group-item .kind-photo .block-media-item > img {
    height: auto;
    flex: 0 0 auto;
  }
  .web-publication-group-item .kind-photo .block-media-item > img {
    aspect-ratio: auto;
  }
}

/* A photo that begins beside a heading and spans the story rows should fill
   that article column without contributing its intrinsic height to the row
   sizing algorithm. This keeps the heading and story content-sized. */
@media screen and (min-width: 1025px) {
  .web-publication-group-item.group-web-parallel-span:has(.newsletter-block.kind-photo) {
    align-self: stretch;
    height: 100%;
    min-height: 0;
    contain: size layout;
    overflow: hidden;
  }
  .web-publication-group-item.group-web-parallel-span .newsletter-block.kind-photo,
  .web-publication-group-item.group-web-parallel-span .kind-photo > .block-media-zone,
  .web-publication-group-item.group-web-parallel-span .kind-photo .block-media-item,
  .web-publication-group-item.group-web-parallel-span .kind-photo .block-media-item > img {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
  }
  .web-publication-group-item.group-web-parallel-span .kind-photo .block-media-item > img {
    object-fit: contain;
  }
}
.page-composer .composer-pages.web-view .composer-responsive-group
  .composer-item.group-web-parallel-span:has(.newsletter-block.kind-photo) {
  align-self: stretch;
  height: 100%;
  min-height: 0;
  contain: size layout;
  overflow: hidden;
}
.page-composer .composer-pages.web-view .composer-responsive-group
  .composer-item.group-web-parallel-span .composer-item-preview,
.page-composer .composer-pages.web-view .composer-responsive-group
  .composer-item.group-web-parallel-span .newsletter-block.kind-photo,
.page-composer .composer-pages.web-view .composer-responsive-group
  .composer-item.group-web-parallel-span .kind-photo > .block-media-zone,
.page-composer .composer-pages.web-view .composer-responsive-group
  .composer-item.group-web-parallel-span .kind-photo .block-media-item,
.page-composer .composer-pages.web-view .composer-responsive-group
  .composer-item.group-web-parallel-span .kind-photo .block-media-item > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

/* Standalone responsive pictures retain their complete image but cannot turn
   one newsletter story into a viewport-tall blank row. */
.web-publication-item .newsletter-block.kind-photo img,
.web-publication-group-item.group-web-flow-row .newsletter-block.kind-photo img,
.page-composer .composer-pages.flow-view .composer-item.group-web-flow-row
  .newsletter-block.kind-photo img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: min(72vh, 42rem);
  object-fit: contain;
}
@media screen and (min-width: 1025px) {
  .web-publication-group-item.group-web-flow-row:has(.newsletter-block.kind-photo) {
    align-self: start;
  }
}
