body.scenarioPage{
  position: relative;
  background: transparent;
}
body.scenarioPage::before{
  position: fixed;
  inset: 0;
  z-index: -1;
  height: 100dvh;
  content: "";
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper) 35%, #e4dfd2 100%);
  pointer-events: none;
}
.scenarioDetail{
  background: transparent;
}
.scenarioFloatingCta{
  position: fixed;
  right: 0;
  bottom: 1.6vw;
  z-index: 20;
  display: grid;
  gap: 0;
  width: 4.6vw;
}
.scenarioFloatingCta a{
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: auto auto;
  row-gap: 0.42vw;
  column-gap: 0.18vw;
  align-items: center;
  justify-content: center;
  padding: 1.25vw 0.28vw;
  color: var(--color-white);
  font-family: var(--font-display);
  text-decoration: none;
  background: var(--color-button-dark);
  border: 0.07vw solid var(--color-button-dark);
  border-radius: 0;
}
.scenarioFloatingCta img{
  grid-column: 1 / 3;
  grid-row: 1;
  width: 1.75vw;
  height: auto;
  margin: 0 auto;
}
.scenarioFloatingCta span{
  grid-column: 1;
  grid-row: 2;
  display: block;
  font-size: 0.95vw;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
}
.scenarioFloatingCta small{
  grid-column: 2;
  grid-row: 2;
  display: block;
  margin-top: 0;
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.5vw;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}
.scenarioFloatingCta span,
.scenarioFloatingCta small{
  text-align: center;
}
.scenarioFloatingCta a:hover{
  background: var(--color-button-brown);
  border-color: var(--color-button-brown);
}
.scenarioFloatingCta a:first-child{
  background: var(--color-bronze);
  border-color: var(--color-bronze);
}
.scenarioFloatingCta a:first-child:hover{
  background: var(--color-gold);
  border-color: var(--color-gold);
}
.scenarioArchiveApp{
  display: grid;
  grid-template-columns: 22.6vw 1fr;
  gap: 1.5vw;
  align-items: start;
  width: 95vw;
  max-width: 86.4rem;
  margin: 0 auto;
  padding: 0 0 8vw;
}
/* filters */

.scenarioFilters{
  position: sticky;
  top: calc(var(--header-height) + 1.7vw);
  padding: 1.5vw 1.35vw 1.65vw;
  background: var(--color-paper);
  border: 0.07vw solid var(--color-button-dark);
  border-left-width: 0.34vw;
  border-radius: 0;
}
.scenarioFilters > div:first-child{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8vw;
  margin-bottom: 1.25vw;
}
.scenarioFilters h2{
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.48vw;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.1em;
}
.scenarioFilters button,
.scenarioResults > button{
  border: 0;
  cursor: pointer;
  font: inherit;
}
.scenarioFilters button{
  padding: 0;
  color: var(--color-rust-dark);
  font-size: 0.94vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  background: transparent;
}
.scenarioFilters [data-filter-close]{
  display: none;
}
.scenarioFilters > div + div{
  margin-top: 0.62vw;
  padding-top: 0.62vw;
}
.scenarioFilters > div:nth-child(2){
  padding-bottom: 0.35vw;
}
.scenarioFilters label,
.scenarioFilters > div > span,
.scenarioFilters [data-online-info-head] > span{
  display: block;
  color: var(--color-gold);
  font-family: Georgia, serif;
  font-size: 0.96vw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
}
.scenarioFilters > div > span{
  margin-bottom: 0.38vw;
}
.scenarioFilters [data-online-info-group]{
  --scenario-info-link-color: #1f6fb2;
  --scenario-info-link-hover: #14558c;
  position: relative;
}
.scenarioFilters [data-online-info-head]{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  gap: 0.8vw;
  margin-bottom: 0.62vw;
}
.scenarioFilters [data-online-info-head] > span{
  margin-bottom: 0;
}
.scenarioFilters [data-online-info-toggle]{
  display: inline-flex;
  align-items: center;
  gap: 0.12vw;
  min-height: 0;
  padding: 0 0.16vw 0.18vw;
  color: var(--scenario-info-link-color);
  font-family: var(--font-sans);
  font-size: 0.77vw;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  background: transparent;
  border: 0;
  border-bottom: 0.07vw solid currentColor;
}
.scenarioFilters [data-online-info-toggle] span{
  display: block;
  width: 1.15vw;
  height: 1.15vw;
  font-size: 0;
  line-height: 0;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M9.7 9.4a2.55 2.55 0 0 1 4.95.85c0 1.85-2.65 2.15-2.65 4.05'/%3E%3Cpath d='M12 17.25h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M9.7 9.4a2.55 2.55 0 0 1 4.95.85c0 1.85-2.65 2.15-2.65 4.05'/%3E%3Cpath d='M12 17.25h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.scenarioFilters [data-online-info-toggle]:hover,
.scenarioFilters [data-online-info-toggle][aria-expanded="true"]{
  color: var(--scenario-info-link-hover);
}
.scenarioFilters [data-online-info-popover]{
  position: absolute;
  bottom: calc(100% + 0.95vw);
  left: 1.15vw;
  z-index: 4;
  width: 22vw;
  padding: 1.25vw 1.3vw;
  color: var(--color-muted);
  font-size: 0.96vw;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
  background: var(--color-paper);
  border: 0;
  border-radius: 0.56vw;
  box-shadow: 0 0.35vw 0.9vw color-mix(in srgb, var(--color-ink) 12%, transparent);
}
.scenarioFilters [data-online-info-popover] p{
  margin: 0;
}
.scenarioFilters [data-online-info-popover] a{
  display: inline-flex;
  align-items: center;
  gap: 0.18vw;
  margin-right: 0.28vw;
  color: var(--color-rust-dark);
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
  border-bottom: 0.08vw solid currentColor;
}
.scenarioFilters [data-online-info-popover] a::after{
  display: inline-block;
  flex: 0 0 auto;
  width: 0.77vw;
  height: 0.77vw;
  content: "";
  background: currentColor;
  transform: translateY(0.08em);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.scenarioFilters input[type="search"]{
  width: 100%;
  min-height: 3.2vw;
  padding: 0 1.05vw;
  color: var(--color-ink);
  font-size: 1.05vw;
  font-weight: 700;
  line-height: 3.2vw;
  background: var(--color-paper);
  border: 0.07vw solid color-mix(in srgb, var(--color-button-dark) 24%, transparent);
  border-radius: 0.55vw;
}
.scenarioFilters input[type="search"]::placeholder{
  color: color-mix(in srgb, var(--color-muted) 58%, transparent);
}
.scenarioFilters input[type="search"]:focus{
  outline: 0;
  border-color: var(--color-button-dark);
}
.scenarioChipGrid{
  display: flex;
  flex-wrap: wrap;
  gap: 0.28vw;
}
.scenarioChip{
  position: relative;
  display: inline-flex;
  line-height: 1;
}
.scenarioChip input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.scenarioChip span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.32vw;
  padding: 0 0.92vw;
  color: var(--color-button-dark);
  font-family: var(--font-sans);
  font-size: 0.9vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--color-button-dark) 4%, var(--color-paper));
  border: 0.07vw solid color-mix(in srgb, var(--color-button-dark) 22%, transparent);
  border-radius: 0.24vw;
  cursor: pointer;
}
.scenarioChip span:hover{
  border-color: var(--color-button-dark);
  background: color-mix(in srgb, var(--color-button-dark) 7%, var(--color-paper));
}
.scenarioChip input:checked + span{
  color: var(--color-white);
  background: var(--color-button-dark);
  border-color: var(--color-button-dark);
}
.scenarioFilters > div:has([data-venue-filters]) .scenarioChip input:checked + span{
  background: var(--color-button-dark);
  border-color: var(--color-button-dark);
}
.scenarioFilters > div:has([data-venue-filters]) .scenarioChip.isOnline input:checked + span,
.scenarioFilters > div:has([data-venue-filters]) .scenarioChip.isOnlineOnly input:checked + span{
  color: var(--color-white);
  background: #2e7d72;
  border-color: #2e7d72;
}
.scenarioFilters > div:has([data-venue-filters]) .scenarioChip.isCafe input:checked + span{
  color: var(--color-ink);
  background: #e8b47c;
  border-color: #e8b47c;
}
.scenarioChip.isCategoryChip.isTheater input:checked + span{
  background: var(--color-theater-navy);
  border-color: var(--color-theater-navy);
}
.scenarioChip.isCategoryChip.isMadamise input:checked + span{
  background: var(--color-rust);
  border-color: var(--color-rust);
}
.scenarioChip.isCategoryChip.isLimited input:checked + span{
  background: #8f3f64;
  border-color: #8f3f64;
}
.scenarioChip.isCategoryChip.isNew input:checked + span{
  color: var(--color-ink);
  background: var(--color-gold-soft);
  border-color: var(--color-gold-soft);
}

/* results */

.scenarioResults{
  min-width: 0;
}
.scenarioResults > button{
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.6vw;
  margin-bottom: 1.6vw;
  color: var(--color-button-dark);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.1em;
  background: transparent;
  border: 0.07vw solid currentColor;
  border-radius: 0;
}
.scenarioResults > button::before,
.scenarioResults > button::after{
  position: absolute;
  top: 50%;
  right: 1.4vw;
  width: 0.9vw;
  height: 0.09vw;
  content: "";
  background: currentColor;
}
.scenarioResults > button::before{
  transform: translateY(-50%);
}
.scenarioResults > button::after{
  transform: translateY(-50%) rotate(90deg);
}
.scenarioResults > button[aria-expanded="true"]::after{
  content: none;
}
.scenarioGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85vw;
}
[data-empty]{
  display: none;
  padding: 2.8vw 1.7vw;
  color: var(--color-muted);
  font-size: 1.08vw;
  font-weight: 400;
  line-height: 1.9;
  text-align: center;
  background: color-mix(in srgb, var(--color-button-dark) 4%, var(--color-paper));
  border: 0.07vw solid color-mix(in srgb, var(--color-button-dark) 18%, transparent);
  border-radius: 0.56vw;
}
[data-empty].isVisible{
  display: block;
}

/* cards */

.scenarioCardArchive{
  --scenario-card-radius: 0.72vw;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: var(--color-paper);
  padding: 0 0 0.82vw;
  border: 0;
  border-radius: var(--scenario-card-radius);
  box-shadow: 0 0.45vw 1.25vw rgba(126, 111, 89, 0.1);
}
.scenarioCardVisual{
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-ink);
  border-radius: var(--scenario-card-radius) var(--scenario-card-radius) 0 0;
  cursor: pointer;
}
.scenarioCardVisual::before{
  position: absolute;
  inset: -1.4vw;
  content: "";
  background-image: var(--scenario-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(1.25vw) brightness(1.1) saturate(0.88);
  opacity: 0.5;
  transform: scale(1.07);
}
.scenarioCardImage{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--scenario-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  clip-path: inset(0 round var(--scenario-card-radius) var(--scenario-card-radius) 0 0);
}
.scenarioBadges{
  position: absolute;
  left: 0.9vw;
  right: 0.9vw;
  bottom: 0.9vw;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42vw;
}
.scenarioRibbons{
  position: absolute;
  top: 0.85vw;
  left: -0.55vw;
  z-index: 3;
  display: grid;
  gap: 0.48vw;
}
.scenarioRibbon{
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 1.85vw;
  padding: 0 0.42vw 0 0.78vw;
  color: var(--color-white);
  font-size: 0.76vw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: var(--color-bluegreen);
}
.scenarioRibbon::before{
  position: absolute;
  left: 0;
  bottom: -0.48vw;
  width: 0.55vw;
  height: 0.48vw;
  content: "";
  background: var(--color-ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.scenarioRibbon::after{
  position: absolute;
  top: 0;
  right: -0.82vw;
  width: 0.82vw;
  height: 100%;
  content: "";
  background: inherit;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.scenarioBadge,
.scenarioTagPill{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--color-button-dark);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: transparent;
}
.scenarioBadge{
  padding: 0.35vw 0.55vw;
  font-size: 0.72vw;
  border-radius: 0.28vw;
}
.scenarioCardBody{
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.38vw 0.75vw 0;
  text-align: center;
}
.scenarioCardBody h3{
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25vw;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.09em;
}
.scenarioCardBody h3 small{
  display: inline;
  font-size: 0.72em;
  line-height: 1.45;
}
.scenarioCardBody h3 small::before{
  content: " ";
}
.scenarioCardFacts{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.34vw;
  padding: 0.28vw 0 1.62vw;
}
.scenarioCardFact{
  display: grid;
  gap: 0.2vw;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.scenarioCardFact + .scenarioCardFact{
  border-left: 0.07vw solid color-mix(in srgb, var(--color-gold) 62%, transparent);
}
.scenarioCardMetaLabel{
  display: block;
  color: var(--color-gold);
  font-family: Georgia, serif;
  font-size: 0.78vw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scenarioCardFact span:last-child{
  display: block;
  color: var(--color-ink);
  font-size: 1.06vw;
  font-weight: 500;
  line-height: 1.45;
}
.scenarioCardFact.isPrice span:last-child{
  white-space: nowrap;
}
.scenarioCardFact.isPrice small{
  margin-left: 0.18vw;
  font-size: 0.8em;
}
.scenarioCardTags{
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 0.35vw;
  margin-bottom: 1.5vw;
}
.scenarioTagPill{
  padding: 0.35vw 0.8vw;
  font-size: 0.82vw;
  border-radius: 0;
}
.scenarioCardActions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7vw;
  margin-top: auto;
}
.scenarioCardActions .commonBtn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.45vw;
  padding: 0 0.9vw;
  font-size: 0.94vw;
  text-indent: 0;
  white-space: nowrap;
  border: 0.07vw solid var(--color-button-dark);
  cursor: pointer;
}
.scenarioCardActions .commonBtn span{
  font-size: 1em;
}
.scenarioCardButton::after{
  content: none;
}
.scenarioCardButton img{
  position: absolute;
  right: 1.1vw;
  display: block;
  width: 1.34vw;
  height: auto;
  transform: translateY(0.08vw);
}
.scenarioCardButton{
  color: var(--color-button-dark);
  background: transparent;
}
.scenarioCardButton:hover{
  color: var(--color-button-dark);
  background: color-mix(in srgb, var(--color-button-dark) 7%, var(--color-paper));
  border-color: var(--color-button-dark);
}

/* tag colors */

.scenarioRibbon.isMadamise,
.scenarioBadge.isMadamise,
.scenarioTagPill.isMadamise{
  color: var(--color-white);
  background: var(--color-rust);
}
.scenarioRibbon.isTheater,
.scenarioBadge.isTheater,
.scenarioTagPill.isTheater{
  color: var(--color-white);
  background: var(--color-theater-navy);
}
.scenarioBadge.isLimited,
.scenarioTagPill.isLimited{
  color: var(--color-white);
  background: #8f3f64;
}
.scenarioTagPill.isPeriod{
  color: #5b4325;
  background: rgba(217, 149, 47, 0.13);
  border-radius: 999vw;
}
.scenarioBadge.isNew,
.scenarioTagPill.isNew{
  color: var(--color-ink);
  background: var(--color-gold-soft);
}
.scenarioBadge.isOnline,
.scenarioBadge.isOnlineOnly,
.scenarioTagPill.isOnline,
.scenarioTagPill.isOnlineOnly{
  color: var(--color-white);
  background: #2e7d72;
}
.scenarioBadge.isCafe,
.scenarioTagPill.isCafe{
  color: var(--color-ink);
  background: #e8b47c;
}
.scenarioBadge.isHidden,
.scenarioTagPill.isHidden{
  color: var(--color-white);
  background: #695d50;
}
.scenarioTagPill.isAuthor{
  color: #344216;
  background: #e7ecd8;
  border-radius: 999vw;
}

@media screen and (min-width: 1480px){
  .scenarioFloatingCta{
    right: 0;
    bottom: 1.48rem;
    gap: 0;
    width: 4.255rem;
  }
  .scenarioFloatingCta a{
    row-gap: 0.3885rem;
    column-gap: 0.1665rem;
    padding: 1.1563rem 0.259rem;
    border-width: 0.0648rem;
    border-radius: 0;
  }
  .scenarioFloatingCta img{
    width: 1.6188rem;
  }
  .scenarioFloatingCta span{
    font-size: 0.8788rem;
  }
  .scenarioFloatingCta small{
    margin-top: 0;
    font-size: 0.4625rem;
  }
  .scenarioArchiveApp{
    grid-template-columns: 20.905rem 1fr;
    gap: 1.3875rem;
    max-width: 86.4rem;
    padding-bottom: 7.4rem;
  }
  .scenarioFilters{
    top: calc(var(--header-height) + 1.5725rem);
    padding: 1.3875rem 1.2488rem 1.5263rem;
    border-width: 0.0648rem;
    border-left-width: 0.3145rem;
  }
  .scenarioFilters > div:first-child{
    gap: 0.74rem;
    margin-bottom: 1.1563rem;
  }
  .scenarioFilters h2{
    font-size: 1.369rem;
  }
  .scenarioFilters button{
    font-size: 0.8695rem;
  }
  .scenarioFilters > div + div{
    margin-top: 0.5735rem;
    padding-top: 0.5735rem;
  }
  .scenarioFilters > div:nth-child(2){
    padding-bottom: 0.3238rem;
  }
  .scenarioFilters label,
  .scenarioFilters > div > span,
  .scenarioFilters [data-online-info-head] > span{
    font-size: 0.888rem;
  }
  .scenarioFilters > div > span{
    margin-bottom: 0.3515rem;
  }
  .scenarioFilters [data-online-info-head]{
    gap: 0.74rem;
    margin-bottom: 0.5735rem;
  }
  .scenarioFilters [data-online-info-toggle]{
    gap: 0.111rem;
    padding: 0 0.148rem 0.1665rem;
    font-size: 0.7123rem;
    border-bottom-width: 0.0648rem;
  }
  .scenarioFilters [data-online-info-toggle] span{
    width: 1.0638rem;
    height: 1.0638rem;
  }
  .scenarioFilters [data-online-info-popover]{
    bottom: calc(100% + 0.8788rem);
    left: 1.0638rem;
    width: 20.35rem;
    padding: 1.1563rem 1.2025rem;
    font-size: 0.888rem;
    border-radius: 0.518rem;
    box-shadow: 0 0.3238rem 0.8325rem color-mix(in srgb, var(--color-ink) 12%, transparent);
  }
  .scenarioFilters [data-online-info-popover] a{
    gap: 0.1665rem;
    margin-right: 0.259rem;
    border-bottom-width: 0.074rem;
  }
  .scenarioFilters [data-online-info-popover] a::after{
    width: 0.7123rem;
    height: 0.7123rem;
  }
  .scenarioFilters input[type="search"]{
    min-height: 2.96rem;
    padding: 0 0.9713rem;
    font-size: 0.9713rem;
    line-height: 2.96rem;
    border-width: 0.0648rem;
    border-radius: 0.5088rem;
  }
  .scenarioChipGrid{
    gap: 0.259rem;
  }
  .scenarioChip span{
    min-height: 2.146rem;
    padding: 0 0.851rem;
    font-size: 0.8325rem;
    border-width: 0.0648rem;
    border-radius: 0.222rem;
  }
  .scenarioGrid{
    gap: 0.7863rem;
  }
  [data-empty]{
    padding: 2.59rem 1.5725rem;
    font-size: 0.999rem;
    border-width: 0.0648rem;
    border-radius: 0.518rem;
  }
  .scenarioCardArchive{
    --scenario-card-radius: 0.666rem;
    padding: 0 0 0.7585rem;
    box-shadow: 0 0.4163rem 1.1563rem rgba(126, 111, 89, 0.1);
  }
  .scenarioCardVisual::before{
    inset: -1.295rem;
    filter: blur(1.1563rem) brightness(1.1) saturate(0.88);
  }
  .scenarioBadges{
    left: 0.8325rem;
    right: 0.8325rem;
    bottom: 0.8325rem;
    gap: 0.3885rem;
  }
  .scenarioRibbons{
    top: 0.7863rem;
    left: -0.5088rem;
    gap: 0.444rem;
  }
  .scenarioRibbon{
    min-height: 1.7113rem;
    padding: 0 0.3885rem 0 0.7215rem;
    font-size: 0.703rem;
  }
  .scenarioRibbon::before{
    bottom: -0.444rem;
    width: 0.5088rem;
    height: 0.444rem;
  }
  .scenarioRibbon::after{
    right: -0.7585rem;
    width: 0.7585rem;
  }
  .scenarioBadge,
  .scenarioTagPill{
    padding: 0.3238rem 0.74rem;
  }
  .scenarioBadge{
    font-size: 0.666rem;
    border-radius: 0.259rem;
  }
  .scenarioCardBody{
    padding: 1.2765rem 0.6938rem 0;
  }
  .scenarioCardBody h3{
    font-size: 1.1563rem;
    line-height: 1.45;
  }
  .scenarioCardFacts{
    margin-top: 1.2395rem;
    padding: 0.259rem 0 1.4985rem;
  }
  .scenarioCardFact{
    gap: 0.185rem;
  }
  .scenarioCardFact + .scenarioCardFact{
    border-left-width: 0.0648rem;
  }
  .scenarioCardMetaLabel{
    font-size: 0.7215rem;
  }
  .scenarioCardFact span:last-child{
    font-size: 0.9805rem;
  }
  .scenarioCardFact.isPrice small{
    margin-left: 0.1665rem;
  }
  .scenarioCardTags{
    gap: 0.3238rem;
    margin-bottom: 1.3875rem;
  }
  .scenarioTagPill{
    font-size: 0.7585rem;
  }
  .scenarioCardActions{
    gap: 0.6475rem;
  }
  .scenarioCardActions .commonBtn{
    min-height: 3.1913rem;
    font-size: 0.8695rem;
    border-width: 0.0648rem;
  }
  .scenarioCardButton img{
    right: 1.0175rem;
    width: 1.2395rem;
    transform: translateY(0.074rem);
  }
}

@media screen and (max-width: 768px){
  .scenarioPage{
    padding-bottom: 21vw;
  }
  .scenarioFloatingCta{
    right: 0;
    bottom: 0;
    left: 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    width: 100vw;
    padding: 0;
    background: transparent;
  }
  .scenarioFloatingCta a{
    grid-template-columns: 6.8vw max-content;
    grid-template-rows: auto auto;
    column-gap: 1.4vw;
    justify-content: center;
    padding: 3vw 2.4vw 3.5vw;
    border-width: 0.2vw;
    border-radius: 0;
  }
  .scenarioFloatingCta a + a{
    border-left-width: 0;
  }
  .scenarioFloatingCta img{
    grid-column: 1;
    grid-row: 1 / 3;
    width: 6.8vw;
  }
  .scenarioFloatingCta span{
    grid-column: 2;
    grid-row: 1;
    font-size: 3.5vw;
    line-height: 1.15;
    writing-mode: horizontal-tb;
  }
  .scenarioFloatingCta small{
    grid-column: 2;
    grid-row: 2;
    margin-top: 0.8vw;
    font-size: 2vw;
    line-height: 1.15;
    letter-spacing: 0.02em;
    writing-mode: horizontal-tb;
  }
  .scenarioArchiveApp{
    grid-template-columns: 1fr;
    gap: 6vw;
    width: 97vw;
    padding-bottom: 14vw;
  }
  .scenarioFilters{
    position: static;
    display: none;
    padding: 5vw 2.6vw 5.8vw 3vw;
    border-width: 0.2vw;
    border-left-width: 1vw;
  }
  .scenarioFilters.isOpen{
    display: block;
  }
  .scenarioFilters [data-filter-close]{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding-top: 6vw;
    color: var(--color-button-dark);
    font-family: var(--font-display);
    font-size: 3.4vw;
    font-weight: 800;
    letter-spacing: 0.08em;
    border: 0;
  }
  .scenarioResults > button[aria-expanded="true"]{
    display: none;
  }
  .scenarioFilters > div:first-child{
    gap: 2vw;
    margin-bottom: 3.4vw;
  }
  .scenarioFilters h2{
    font-size: 4.4vw;
  }
  .scenarioFilters button{
    font-size: 2.8vw;
  }
  .scenarioFilters > div + div{
    margin-top: 2vw;
    padding-top: 2vw;
  }
  .scenarioFilters > div:nth-child(2){
    padding-bottom: 1vw;
  }
  .scenarioFilters label,
  .scenarioFilters > div > span,
  .scenarioFilters [data-online-info-head] > span{
    font-size: 2.7vw;
  }
  .scenarioFilters > div > span{
    margin-bottom: 1.3vw;
  }
  .scenarioFilters [data-online-info-head]{
    gap: 2.2vw;
    margin-bottom: 2.1vw;
  }
  .scenarioFilters [data-online-info-toggle]{
    gap: 0.35vw;
    padding: 0 0.5vw 0.55vw;
    font-size: 2.35vw;
    border-bottom-width: 0.2vw;
  }
  .scenarioFilters [data-online-info-toggle] span{
    width: 3.2vw;
    height: 3.2vw;
  }
  .scenarioFilters [data-online-info-popover]{
    bottom: calc(100% + 3vw);
    left: 3vw;
    width: 62vw;
    padding: 4vw 4.2vw;
    font-size: 2.8vw;
    border-radius: 1.6vw;
    box-shadow: 0 1.2vw 3vw color-mix(in srgb, var(--color-ink) 12%, transparent);
  }
  .scenarioFilters [data-online-info-popover] a{
    gap: 0.55vw;
    margin-right: 0.8vw;
    border-bottom-width: 0.24vw;
  }
  .scenarioFilters [data-online-info-popover] a::after{
    width: 2.4vw;
    height: 2.4vw;
  }
  .scenarioFilters input[type="search"]{
    min-height: 11vw;
    padding: 0 3.2vw;
    font-size: 16px;
    font-weight: 500;
    line-height: 11vw;
    border-width: 0.2vw;
    border-radius: 1vw;
  }
  .scenarioChipGrid{
    gap: 0.75vw;
  }
  .scenarioChip span{
    min-height: 7.6vw;
    padding: 0 2.7vw;
    font-size: 2.65vw;
    border-width: 0.2vw;
    border-radius: 0.9vw;
  }
  .scenarioResults > button{
    display: flex;
    min-height: 12vw;
    margin-bottom: 5vw;
    font-size: 3.4vw;
    border-width: 0.24vw;
  }
  .scenarioResults > button::before,
  .scenarioResults > button::after{
    right: 3.5vw;
    width: 3vw;
    height: 0.28vw;
  }
  .scenarioGrid{
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8vw;
  }
  [data-empty]{
    padding: 9vw 5vw;
    font-size: 3.1vw;
    border-width: 0.2vw;
    border-radius: 1.6vw;
  }
  .scenarioCardArchive{
    --scenario-card-radius: 1.8vw;
    padding: 0 0 1.9vw;
    box-shadow: 0 1.2vw 3vw rgba(126, 111, 89, 0.12);
  }
  .scenarioCardVisual{
    aspect-ratio: 5 / 4;
  }
  .scenarioCardVisual::before{
    inset: -4vw;
    filter: blur(4vw) brightness(1.1) saturate(0.88);
  }
  .scenarioBadges{
    left: 1.8vw;
    right: 1.8vw;
    bottom: 1.8vw;
    gap: 1vw;
  }
  .scenarioRibbons{
    top: 1.8vw;
    left: -1.4vw;
    gap: 1.2vw;
  }
  .scenarioRibbon{
    min-height: 5.6vw;
    padding: 0 1.1vw 0 2.1vw;
    font-size: 2.3vw;
    letter-spacing: 0.03em;
  }
  .scenarioRibbon::before{
    bottom: -1.4vw;
    width: 1.4vw;
    height: 1.4vw;
  }
  .scenarioRibbon::after{
    right: -2.1vw;
    width: 2.1vw;
  }
  .scenarioBadge{
    padding: 1vw 1.4vw;
    font-size: 2.2vw;
    border-radius: 0.8vw;
  }
  .scenarioCardBody{
    padding: 3vw 1.3vw 0;
    text-align: center;
  }
  .scenarioCardBody h3{
    display: -webkit-box;
    overflow: hidden;
    margin: 0.6vw 0 0.4vw;
    font-size: 3.5vw;
    line-height: 1.38;
    letter-spacing: 0.05em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .scenarioCardFacts{
    margin-top: 2.8vw;
    padding: 0.7vw 0 4vw;
  }
  .scenarioCardFact{
    gap: 0.8vw;
  }
  .scenarioCardFact + .scenarioCardFact{
    border-left-width: 0.18vw;
  }
  .scenarioCardMetaLabel{
    font-size: 2.2vw;
    letter-spacing: 0.04em;
  }
  .scenarioCardFact span:last-child{
    font-size: 2.6vw;
    line-height: 1.35;
  }
  .scenarioCardFact.isPrice span:last-child{
    font-size: 2.45vw;
  }
  .scenarioCardTags{
    gap: 0.55vw;
    margin-bottom: 3.8vw;
  }
  .scenarioTagPill{
    padding: 1vw 1.8vw;
    font-size: 2.3vw;
    line-height: 1.15;
  }
  .scenarioCardActions{
    gap: 1.6vw;
  }
  .scenarioCardActions .commonBtn{
    min-height: 8.8vw;
    padding: 0 1.4vw;
    font-size: 2.6vw;
    letter-spacing: 0.02em;
    border-width: 0.2vw;
  }
  .scenarioCardButton img{
    right: 2.6vw;
    width: 3.8vw;
    transform: translateY(0.22vw);
  }
}