/* A nine-slice outline keeps the hand-drawn corners at their original scale. */
.flyer-edition :is(
  .flyer-home .hero, .flyer-home .feature, .home-layout .business-grid > .story,
  .home-layout .catalogue .story-grid > .story, .hero-grid .hero-article,
  .home-layout .business-sidebar .business-banner, .home-layout .catalogue-controls,
  .catalogue .subfilters, .catalogue #empty, .recommendation-settings, .business-nav
) {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  border-radius: 13px 16px 12px 15px / 14px 11px 15px 12px;
}
.flyer-edition :is(
  .flyer-home .hero, .flyer-home .feature, .home-layout .business-grid > .story,
  .home-layout .catalogue .story-grid > .story, .hero-grid .hero-article,
  .home-layout .business-sidebar .business-banner, .home-layout .catalogue-controls,
  .catalogue .subfilters, .catalogue #empty, .recommendation-settings, .business-nav
)::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: var(--frame-layer, 1);
  pointer-events: none;
  border: var(--frame-border, 21px solid transparent);
  border-image: var(--frame-image, url("frame.svg") 25 stretch);
  background: var(--frame-fill, none);
}
.flyer-edition .flyer-home .hero { border-width: 4px; }
.flyer-edition .flyer-home .hero::after { inset: -4px; border-width: 28px; }
.flyer-edition .hero-grid .hero-article { overflow: visible; }
.flyer-edition .hero-grid .hero-article > img { border-radius: 10px 12px 0 0; }
.flyer-edition .hero-grid .hero-primary {
  --frame-layer: -1;
  --frame-border: 0;
  --frame-image: none;
  --frame-fill: url("cloud-frame.svg") center / 100% 100% no-repeat;
  padding: 19px 24px;
  background: transparent;
}
.flyer-edition .hero-grid .hero-primary > img {
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--card);
}
.flyer-edition .hero-grid .hero-primary .hero-caption { border-left: 0; padding: 9px 0 9px 14px; }
.flyer-edition .hero-grid .hero-primary .hero-caption h2 {
  text-wrap: balance;
  font-size: 21px;
}
.flyer-edition :is(.flyer-home .section-head, .flyer-band.section-title) {
  border-radius: 14px 10px 16px 11px / 11px 15px 10px 14px;
}
.flyer-edition .catalogue .flyer-band #result-count {
  display: grid;
  place-items: center;
  min-width: 123px;
  min-height: 39px;
  padding: 7px 13px;
  background: url("cloud.svg") center / 100% 100% no-repeat;
  color: var(--ink);
}
.flyer-edition .catalogue :is(.filters, .subfilters) button,
.flyer-edition .catalogue-controls #search,
.flyer-edition .flyer-home .hero-link {
  border-radius: 7px 5px 8px 6px / 5px 8px 6px 7px;
}
.flyer-edition .home-layout .story > img,
.flyer-edition .flyer-home .feature-main img {
  border-radius: 5px 8px 6px 7px / 7px 6px 8px 5px;
}
.flyer-edition .home-layout .catalogue .story-grid > .story[hidden] { display: none !important; }

@media (min-width: 1001px) {
  .flyer-edition .recommendation-area .hero-grid,
  .flyer-edition .home-layout .business-grid,
  .flyer-edition .home-layout .catalogue .story-grid {
    grid-template-columns: repeat(20, minmax(0, 1fr));
  }
  .flyer-edition .hero-grid .hero-article { grid-column: span 5; }
  .flyer-edition .hero-grid .hero-primary { grid-column: span 10; }

  /* The three rows break at tracks 10/15, 4/12, and 7/13, respectively. */
  .flyer-edition .home-layout :is(.business-grid, .catalogue .story-grid) >
    .story:nth-child(n of .story:not([hidden])) {
    grid-column: span 5;
  }
  .flyer-edition .home-layout :is(.business-grid, .catalogue .story-grid) >
    .story:nth-child(9n+1 of .story:not([hidden])) {
    grid-column: span 10;
  }
  .flyer-edition .home-layout :is(.business-grid, .catalogue .story-grid) >
    .story:nth-child(9n+4 of .story:not([hidden])) {
    grid-column: span 4;
  }
  .flyer-edition .home-layout :is(.business-grid, .catalogue .story-grid) >
    .story:is(:nth-child(9n+5 of .story:not([hidden])), :nth-child(9n+6 of .story:not([hidden]))) {
    grid-column: span 8;
  }
  .flyer-edition .home-layout :is(.business-grid, .catalogue .story-grid) >
    .story:is(:nth-child(9n+7 of .story:not([hidden])), :nth-child(9n+9 of .story:not([hidden]))) {
    grid-column: span 7;
  }
  .flyer-edition .home-layout :is(.business-grid, .catalogue .story-grid) >
    .story:nth-child(9n+8 of .story:not([hidden])) {
    grid-column: span 6;
  }
  .flyer-edition .home-layout .catalogue .story-grid > .story:nth-child(n of .story:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    background: var(--card);
  }
  .flyer-edition .home-layout .catalogue .story-grid >
    .story:nth-child(9n+1 of .story:not([hidden])) {
    grid-template-columns: minmax(0, 43%) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 7px 12px;
    background: var(--peach);
  }
  .flyer-edition .home-layout .catalogue .story-grid > .story >
    :is(img, .typographic-cover) { grid-row: auto; min-height: 0; aspect-ratio: 2 / 1; }
  .flyer-edition .home-layout .catalogue .story-grid >
    .story:nth-child(9n+1 of .story:not([hidden])) >
    :is(img, .typographic-cover) { grid-row: 1 / 4; aspect-ratio: 4 / 3; }
  .flyer-edition .home-layout .catalogue .story-grid > .story > h3 { font-size: 17px; }
  .flyer-edition .home-layout .catalogue .story-grid >
    .story:nth-child(9n+1 of .story:not([hidden])) >
    h3 { font-size: 23px; }
  .flyer-edition .home-layout .catalogue .story-grid >
    .story:nth-child(3n+1 of .story:not([hidden])):nth-last-child(1 of .story:not([hidden])) {
    grid-column: span 20;
  }
  .flyer-edition .home-layout .catalogue .story-grid >
    .story:is(:nth-child(3n+1 of .story:not([hidden])):nth-last-child(2 of .story:not([hidden])),
      :nth-child(3n+2 of .story:not([hidden])):nth-last-child(1 of .story:not([hidden]))) {
    grid-column: span 10;
  }
}

@media (max-width: 700px) {
  .flyer-edition .hero-grid .hero-primary { padding: 14px 15px; }
  .flyer-edition .hero-grid .hero-primary .hero-caption { padding: 8px; }
  .flyer-edition .hero-grid .hero-primary .hero-caption h2 { font-size: 16px; }
  .flyer-edition .catalogue .flyer-band #result-count { min-width: 103px; min-height: 34px; }
}

@media (max-width: 520px) {
  .flyer-edition {
    --stagger-near: 8px;
    --stagger-left: 22px;
    --stagger-right: 26px;
  }
  .flyer-edition :is(.flyer-grid, .hero-grid, .business-grid, .story-grid, .business-banners) {
    row-gap: 10px;
  }
  .flyer-edition .recommendation-area .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .flyer-edition .hero-grid .hero-article {
    grid-column: auto;
    grid-template-columns: minmax(0, 37%) minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
  }
  .flyer-edition .hero-grid .hero-primary { grid-template-columns: minmax(0, 39%) minmax(0, 1fr); }
  .flyer-edition .hero-grid .hero-article > img {
    height: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px 0 0 11px;
  }
  .flyer-edition .hero-grid .hero-article:not(.hero-primary) .hero-caption { border-top: 0; }
  .flyer-edition .hero-grid .hero-primary > img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
  }

  /* Vary the outside edges, not the alignment of the copy within a frame. */
  .flyer-edition :is(.flyer-grid, .hero-grid, .business-grid, .story-grid, .business-banners) >
    :nth-child(3n+1 of :not([hidden])) {
    margin-inline: 0 var(--stagger-left);
  }
  .flyer-edition :is(.flyer-grid, .hero-grid, .business-grid, .story-grid, .business-banners) >
    :nth-child(3n+2 of :not([hidden])) {
    margin-inline: var(--stagger-right) 0;
  }
  .flyer-edition :is(.flyer-grid, .hero-grid, .business-grid, .story-grid, .business-banners) >
    :nth-child(3n of :not([hidden])) {
    margin-inline: var(--stagger-near);
  }
}

@media (max-width: 350px) {
  .flyer-edition {
    --stagger-near: 6px;
    --stagger-left: 14px;
    --stagger-right: 17px;
  }
}