/* Leave the existing tablet/mobile disclosure untouched. */
.intro-card-visual{display:contents}
.intro-card-photo,.intro-card-preview{display:none}
@media(min-width:1025px){
  .intro-cards{container-type:inline-size}
  .intro-card{--intro-card-inset:clamp(24px,3vw,48px);--intro-card-reading-width:calc((100cqw - 2 * var(--intro-card-gap)) * 1.15 / 3.15 - 2 * var(--intro-card-inset));height:clamp(740px,54vw,820px)}
  .intro-card[open]{flex-grow:1.15}
  .intro-card>summary{position:relative}
  .intro-card-visual{position:relative;display:grid;place-items:center;flex:none;width:100%;height:clamp(320px,25vw,400px);margin:24px 0 48px;isolation:isolate;border-radius:16px;overflow:hidden}
  .intro-card-visual .intro-card-art{grid-area:1 / 1;margin:0;transition:opacity .3s ease}
  .intro-card-visual .intro-card-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:16px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
  .intro-card[open] .intro-card-visual .intro-card-art{opacity:0}
  .intro-card[open] .intro-card-visual .intro-card-photo{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
  /* Preview begins immediately below the title/artwork/control area. Keeping
     its reading width equal to an expanded card produces a true clipped edge. */
  .intro-card:not([open]) .intro-card-preview{position:absolute;top:100%;left:0;display:block;width:100%;padding:24px var(--intro-card-inset) 40px;box-sizing:border-box;pointer-events:none}
  .intro-card-preview-window{display:block;overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent 100%)}
  .intro-card-preview-text,.intro-card .intro-card-copy p{display:block;width:max(100%,var(--intro-card-reading-width));max-width:none;margin:0;font-size:var(--spa-type-body,1.125rem);font-weight:400;line-height:1.25;letter-spacing:0;overflow-wrap:anywhere}
  .intro-card .intro-card-copy{overflow-x:hidden;padding-top:24px}
  .intro-card .intro-card-toggle{width:28px;height:28px}
  .intro-card .intro-card-toggle::before,.intro-card .intro-card-toggle::after{left:8px;right:8px}
  /* The editor uses the same one-open-card proportions as the public page. */
}
@media(prefers-reduced-motion:reduce){
  .intro-card-visual .intro-card-art,.intro-card-visual .intro-card-photo{transition:none!important}
}