.showcase-hero{
  background:var(--ops-ink);
  color:var(--ops-surface)
}

.showcase-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center;
  gap:var(--ops-space-5)
}

.showcase-hero-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem
}

.showcase-hero-copy h1,
.showcase-hero-copy p{
  margin:0
}

.showcase-hero-copy h1{
  max-width:12ch;
  color:var(--ops-surface)
}

.showcase-hero-copy>p{
  max-width:38rem;
  color:var(--ops-muted-2)
}

.showcase-filter-block{
  width:100%;
  margin-top:var(--ops-space-2);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem
}

.showcase-filter-label{
  color:var(--ops-muted-2);
  font-size:var(--ops-fs-1);
  font-weight:700
}

.showcase-hero .c-filter button{
  background:var(--ops-ink-2);
  border-color:var(--ops-line-dark);
  color:var(--ops-surface)
}

.showcase-hero .c-filter button:hover{
  background:var(--ops-ink-3);
  border-color:var(--ops-muted)
}

.showcase-hero .c-filter button[aria-pressed="true"]{
  background:var(--ops-yellow);
  border-color:var(--ops-yellow);
  color:var(--ops-ink)
}

.showcase-result{
  color:var(--ops-muted-2);
  font:var(--ops-fs-1)/1.5 var(--ops-mono);
  font-variant-numeric:tabular-nums
}

.showcase-index-plate{
  min-width:0;
  overflow:hidden;
  border-radius:var(--ops-radius-lg);
  background:var(--ops-surface);
  color:var(--ops-ink);
  box-shadow:var(--ops-shadow)
}

.showcase-index-art{
  height:clamp(12rem,22vw,16rem);
  overflow:hidden;
  display:block;
  padding:0;
  background:var(--ops-yellow-soft);
  color:var(--ops-ink)
}

.showcase-index-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 62%
}

.showcase-index-head,
.showcase-index-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ops-space-2);
  padding:var(--ops-space-2) var(--ops-space-3);
  background:var(--ops-surface);
  color:var(--ops-ink);
  font-size:var(--ops-fs-1)
}

.showcase-index-head{
  border-bottom:1px solid var(--ops-line);
  font-weight:700;
  letter-spacing:.04em
}

.showcase-index-route{
  display:grid;
  background:var(--ops-paper);
  color:var(--ops-ink)
}

.showcase-route-row{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(max-content,.55fr) minmax(0,1fr);
  align-items:center;
  gap:var(--ops-space-1);
  padding:.8rem var(--ops-space-3);
  border-bottom:1px solid var(--ops-line);
  font-size:var(--ops-fs-2)
}

.showcase-route-row:last-child{
  border-bottom:0
}

.showcase-route-row span:last-child{
  min-width:0;
  color:var(--ops-muted)
}

.showcase-index-foot span{
  color:var(--ops-muted)
}

.showcase-stream{
  display:grid;
  gap:var(--ops-space-3)
}

.showcase-heading-group{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem
}

.showcase-heading-group h2,
.showcase-heading-group p{
  margin:0
}

.showcase-heading-group p{
  max-width:44rem
}

.showcase-masonry{
  columns:2;
  column-gap:var(--ops-space-3)
}

.showcase-card{
  min-width:0;
  padding-inline:var(--ops-space-4);
  margin:0 0 var(--ops-space-3);
  break-inside:avoid;
  overflow:hidden;
  border-radius:var(--ops-radius-lg);
  background:var(--ops-surface);
  color:var(--ops-ink);
  box-shadow:var(--ops-shadow)
}

.showcase-card[hidden]{
  display:none
}

.showcase-card>a{
  min-width:0;
  padding:var(--ops-space-4);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem
}

.showcase-card h3,
.showcase-card p{
  margin:0
}

.showcase-card h3{
  max-width:22ch
}

.showcase-card p{
  color:var(--ops-muted)
}

.showcase-card-top{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem
}

.showcase-card-top time{
  color:var(--ops-muted);
  font:var(--ops-fs-1)/1.4 var(--ops-mono);
  font-variant-numeric:tabular-nums
}

.showcase-card-link{
  margin-top:var(--ops-space-2);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--ops-ink);
  font-size:var(--ops-fs-2);
  font-weight:700
}

.showcase-card-link svg{
  width:1rem;
  height:1rem;
  transition:transform var(--ops-duration) var(--ops-ease)
}

.showcase-card>a:hover .showcase-card-link svg{
  transform:translateX(.25rem)
}

.showcase-card>a:focus-visible{
  outline-offset:-3px
}

.showcase-topic{
  color:var(--ops-ink)
}

.showcase-topic-layout{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  align-items:start;
  gap:var(--ops-space-5)
}

.showcase-topic-layout-reverse{
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)
}

.showcase-topic-layout-reverse .showcase-topic-intro{
  grid-column:2;
  grid-row:1
}

.showcase-topic-layout-reverse .showcase-remote-board{
  grid-column:1;
  grid-row:1
}

.showcase-topic-intro{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem
}

.showcase-topic-intro h2,
.showcase-topic-intro p{
  margin:0
}

.showcase-topic-intro .c-btn{
  margin-top:var(--ops-space-2)
}

.showcase-topic-number{
  width:fit-content;
  align-self:flex-start;
  color:var(--ops-muted);
  font-size:var(--ops-fs-1);
  font-weight:700;
  letter-spacing:.05em
}

.showcase-topic-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:var(--ops-space-2)
}

.showcase-detail{
  min-width:0;
  padding:var(--ops-space-3);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem;
  border-radius:var(--ops-radius-md);
  background:var(--ops-paper);
  color:var(--ops-ink)
}

.showcase-detail h3,
.showcase-detail p{
  margin:0
}

.showcase-detail p{
  color:var(--ops-muted)
}

.showcase-topic-dark{
  background:var(--ops-ink);
  color:var(--ops-surface)
}

.showcase-topic-dark .showcase-topic-intro h2{
  color:var(--ops-surface)
}

.showcase-topic-dark .showcase-topic-intro p,
.showcase-topic-dark .showcase-topic-number{
  color:var(--ops-muted-2)
}

.showcase-remote-board{
  min-width:0;
  display:grid;
  border-radius:var(--ops-radius-lg);
  overflow:hidden;
  background:var(--ops-ink-2);
  color:var(--ops-surface)
}

.showcase-remote-row{
  min-width:0;
  padding:var(--ops-space-3);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:var(--ops-space-2);
  border-bottom:1px solid var(--ops-line-dark)
}

.showcase-remote-row:last-child{
  border-bottom:0
}

.showcase-remote-row h3,
.showcase-remote-row p{
  margin:0
}

.showcase-remote-row p{
  margin-top:.5rem;
  color:var(--ops-muted-2)
}

.showcase-remote-icon{
  width:2.5rem;
  height:2.5rem;
  display:grid;
  place-items:center;
  border-radius:var(--ops-radius-sm);
  background:var(--ops-yellow);
  color:var(--ops-ink)
}

.showcase-remote-icon svg{
  width:1.2rem;
  height:1.2rem
}

.showcase-maintenance-grid{
  margin-top:var(--ops-space-3);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  gap:var(--ops-space-2)
}

.showcase-maintenance-step{
  min-width:0;
  padding:var(--ops-space-3);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem;
  border-radius:var(--ops-radius-md);
  background:var(--ops-surface);
  color:var(--ops-ink)
}

.showcase-maintenance-step h3,
.showcase-maintenance-step p{
  margin:0
}

.showcase-maintenance-step p{
  color:var(--ops-muted)
}

.showcase-step-label{
  width:fit-content;
  align-self:flex-start;
  color:var(--ops-muted);
  font-size:var(--ops-fs-1);
  font-weight:700
}

.showcase-comparison{
  display:grid;
  gap:var(--ops-space-3)
}

.showcase-comparison>.showcase-topic-intro{
  max-width:48rem
}

.showcase-comparison-table caption{
  padding:var(--ops-space-2);
  text-align:left;
  background:var(--ops-surface);
  color:var(--ops-ink);
  font-weight:700
}

.showcase-comparison-table tbody th{
  background:var(--ops-yellow-pale);
  color:var(--ops-ink);
  white-space:nowrap
}

.showcase-comparison .c-callout h3,
.showcase-comparison .c-callout p{
  margin:0
}

.showcase-comparison .c-callout p{
  margin-top:.5rem;
  color:var(--ops-muted)
}

.showcase-media-topic{
  background:var(--ops-yellow);
  color:var(--ops-ink)
}

.showcase-media-topic .showcase-topic-number,
.showcase-media-topic .showcase-topic-intro p{
  color:var(--ops-ink-3)
}

.showcase-media-layout{
  display:grid;
  grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);
  align-items:start;
  gap:var(--ops-space-5)
}

.showcase-media-pipeline{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:var(--ops-space-2)
}

.showcase-media-pipeline article{
  min-width:0;
  padding:var(--ops-space-3);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem;
  border-radius:var(--ops-radius-md);
  background:var(--ops-surface);
  color:var(--ops-ink)
}

.showcase-media-pipeline h3,
.showcase-media-pipeline p{
  margin:0
}

.showcase-media-pipeline p{
  color:var(--ops-muted)
}

.showcase-pipeline-index{
  width:fit-content;
  align-self:flex-start;
  color:var(--ops-muted);
  font-size:var(--ops-fs-1);
  font-weight:700
}

.showcase-standard{
  padding:var(--ops-space-4);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:var(--ops-space-4);
  border-radius:var(--ops-radius-lg);
  background:var(--ops-surface);
  color:var(--ops-ink)
}

.showcase-standard-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem
}

.showcase-standard-copy h2,
.showcase-standard-copy p{
  margin:0
}

.showcase-standard-list{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:.5rem
}

.showcase-standard-list span{
  min-width:0;
  padding:.75rem;
  border-radius:var(--ops-radius-sm);
  background:var(--ops-paper);
  color:var(--ops-ink-3);
  font-size:var(--ops-fs-2);
  font-weight:700
}

.showcase-standard-list span:last-child{
  grid-column:1/-1
}

.showcase-cta-actions{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.5rem
}

.showcase-cta-actions .c-btn{
  width:100%
}

.c-cta .showcase-cta-actions .c-btn-ghost{
  border-color:var(--ops-muted);
  background:transparent;
  color:var(--ops-surface)
}

.c-cta .showcase-cta-actions .c-btn-ghost:hover{
  border-color:var(--ops-surface);
  background:var(--ops-ink-3)
}

@media(max-width:1000px){
  .showcase-hero-layout,
  .showcase-topic-layout,
  .showcase-topic-layout-reverse,
  .showcase-media-layout{
    grid-template-columns:1fr
  }

  .showcase-topic-layout-reverse .showcase-topic-intro,
  .showcase-topic-layout-reverse .showcase-remote-board{
    grid-column:auto;
    grid-row:auto
  }

  .showcase-topic-layout-reverse .showcase-topic-intro{
    order:1
  }

  .showcase-topic-layout-reverse .showcase-remote-board{
    order:2
  }

  .showcase-topic-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .showcase-maintenance-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:768px){
  .showcase-masonry{
    columns:1
  }

  .showcase-card>a{
    padding:var(--ops-space-3)
  }

  .showcase-topic-grid,
  .showcase-media-pipeline,
  .showcase-standard{
    grid-template-columns:1fr
  }

  .showcase-standard{
    gap:var(--ops-space-3)
  }
}

@media(max-width:520px){
  .showcase-route-row{
    grid-template-columns:auto minmax(0,1fr)
  }

  .showcase-route-row span:last-child{
    grid-column:2
  }

  .showcase-index-head,
  .showcase-index-foot{
    align-items:flex-start;
    flex-direction:column
  }

  .showcase-maintenance-grid,
  .showcase-standard-list{
    grid-template-columns:1fr
  }

  .showcase-standard-list span:last-child{
    grid-column:auto
  }

  .showcase-standard{
    padding:var(--ops-space-3)
  }

  .showcase-card-top{
    align-items:flex-start;
    flex-direction:column
  }

  .showcase-remote-row{
    grid-template-columns:1fr
  }
}