.showcase-page h1,
.showcase-page h2{
  font-family:var(--am-font-body);
  font-style:normal;
}

.showcase-page h1,
.showcase-page h2,
.showcase-page h3,
.showcase-page p,
.showcase-page strong{
  overflow-wrap:break-word;
}

.showcase-page [hidden]{
  display:none!important;
}

.showcase-hero{
  padding-block:var(--am-hero-pad);
  background:
    radial-gradient(circle at 86% 8%,#f4eee9 0,transparent 31%),
    radial-gradient(circle at 16% 88%,#edf1ee 0,transparent 28%),
    var(--am-paper);
  color:#171a24;
}

.showcase-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(20rem,.92fr);
  align-items:start;
  gap:clamp(2rem,6vw,5rem);
}

.showcase-hero-copy,
.showcase-recipe,
.showcase-recipe-main,
.showcase-recipe-side{
  min-width:0;
}

.showcase-hero-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.showcase-hero-copy h1{
  max-width:13ch;
  font-size:clamp(2.85rem,5vw,4rem);
  line-height:1.16;
}

.showcase-hero-copy>p{
  max-width:42rem;
  margin-top:var(--am-space-3);
  color:#000;
  font-size:var(--am-text-lg);
}

.showcase-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:var(--am-space-2);
  margin-top:var(--am-space-3);
}

.showcase-hero-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  margin-top:var(--am-space-4);
  margin-bottom:var(--am-space-3);
  padding-top:var(--am-space-3);
  border-top:1px solid var(--am-line);
}

.showcase-hero-facts div{
  min-width:0;
}

.showcase-hero-facts dt{
  color:#000;
  font-size:var(--am-text-sm);
}

.showcase-hero-facts dd{
  margin-top:var(--am-space-1);
  color:#171a24;
  font-size:var(--am-text-xl);
  font-weight:700;
}

.showcase-hero .hero-art.showcase-recipe>*{
  min-height:0;
}

.showcase-hero .hero-art.showcase-recipe{
  display:block;
  grid-template-columns:minmax(0,1fr);
  overflow:hidden;
  width:100%;
  height:auto;
  border-radius:var(--am-radius-lg);
  background:#191c27;
  color:#f8f7f4;
  box-shadow:var(--am-shadow);
  text-align:left;
}

.showcase-recipe-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--am-space-2);
  padding:var(--am-space-3);
  background:#f2eaf4;
  color:#2b2030;
}

.showcase-recipe-head>div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:var(--am-space-1);
}

.showcase-recipe-head span{
  font-size:var(--am-text-xs);
  font-weight:700;
  letter-spacing:.06em;
}

.showcase-recipe-head strong{
  font-size:var(--am-text-xl);
}

.showcase-recipe-head .c-badge{
  flex:none;
  margin:0;
  background:#e8f1ec;
  color:#173128;
}

.showcase-recipe-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(10rem,.42fr);
  align-items:stretch;
}

.showcase-recipe-main{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--am-space-2);
  padding:var(--am-space-3);
  background:#20232e;
  color:#f8f7f4;
}

.showcase-recipe-field{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:var(--am-space-1);
  padding:var(--am-space-2);
  border-radius:var(--am-radius-sm);
  background:#2a2e3a;
  color:#f8f7f4;
}

.showcase-recipe-field span,
.showcase-recipe-field small{
  color:#c7cad3;
}

.showcase-recipe-field strong{
  color:#ffffff;
  font-size:var(--am-text-lg);
}

.showcase-resource{
  grid-column:1/-1;
  padding:var(--am-space-2);
  border-radius:var(--am-radius-sm);
  background:#e8f1ec;
  color:#173128;
}

.showcase-resource>div:first-child{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--am-space-2);
}

.showcase-resource span,
.showcase-resource strong{
  min-width:0;
  font-size:var(--am-text-sm);
}

.showcase-resource-bar{
  height:.6rem;
  margin-top:var(--am-space-1);
  overflow:hidden;
  border-radius:var(--am-radius-pill);
  background:#cbded3;
  color:#173128;
}

.showcase-resource-bar span{
  display:block;
  width:68%;
  height:100%;
  border-radius:inherit;
  background:var(--am-primary);
}

.showcase-recipe-side{
  display:flex;
  flex-direction:column;
  background:#f7e9e1;
  color:#34221d;
}

.showcase-node-slip{
  display:flex;
  min-width:0;
  flex:1;
  flex-direction:column;
  gap:var(--am-space-1);
  padding:var(--am-space-3);
  color:#34221d;
}

.showcase-node-slip+.showcase-node-slip{
  border-top:1px solid rgba(52,34,29,.14);
}

.showcase-node-slip span,
.showcase-node-slip small{
  color:#685148;
}

.showcase-node-slip strong{
  color:#34221d;
}

.showcase-recipe-foot{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--am-space-1);
  padding:var(--am-space-2) var(--am-space-3);
  background:#171a24;
  color:#f8f7f4;
}

.showcase-recipe-foot span{
  min-width:0;
  color:#d7d9df;
  font-size:var(--am-text-xs);
  text-align:center;
}

.showcase-principles>.c-card{
  min-width:0;
  padding:var(--am-space-4);
}

.showcase-principles h3{
  margin-top:var(--am-space-2);
  font-size:var(--am-text-xl);
}

.showcase-principles p{
  margin-top:var(--am-space-1);
}

.showcase-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  border-radius:var(--am-radius-pill);
  background:#243d8f;
  color:#ffffff;
  font-size:var(--am-text-sm);
  line-height:1;
}

.showcase-card-foot{
  width:100%;
  padding-top:var(--am-space-3);
  color:inherit;
  font-size:var(--am-text-sm);
  font-weight:650;
}

.showcase-articles{
  background:#f2eaf4;
  color:#2b2030;
}

.showcase-articles .am-section-head p{
  color:#635369;
}

.showcase-featured{
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
  border-radius:var(--am-radius-lg);
  background:#ffffff;
  color:#171a24;
  transition:transform .2s var(--am-ease),box-shadow .2s var(--am-ease);
}

.showcase-featured:hover,
.showcase-featured:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--am-shadow);
}

.showcase-featured-media{
  position:relative;
  width:100%;
  height:clamp(16rem,35vw,25rem);
  overflow:hidden;
  background:#191c27;
  color:#f8f7f4;
}

.showcase-featured-media>time{
  position:absolute;
  top:var(--am-space-3);
  left:var(--am-space-3);
  z-index:2;
  max-width:58%;
  overflow:hidden;
  padding:.5rem .8rem;
  border-radius:var(--am-radius-pill);
  background:#f2edd8;
  color:#302a17;
  font-family:var(--am-font-mono);
  font-size:var(--am-text-xs);
  font-weight:700;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.showcase-version-board{
  display:flex;
  height:100%;
  flex-direction:column;
  justify-content:center;
  gap:var(--am-space-3);
  padding:clamp(4.5rem,10vw,7rem) clamp(1.5rem,6vw,5rem) var(--am-space-4);
  background:
    linear-gradient(125deg,rgba(36,61,143,.82),rgba(0,107,143,.24)),
    #191c27;
  color:#f8f7f4;
}

.showcase-version-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--am-space-3);
}

.showcase-version-head span{
  color:#d8dbe4;
  font-size:var(--am-text-sm);
}

.showcase-version-head strong{
  color:#ffffff;
  font-size:var(--am-text-sm);
}

.showcase-version-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--am-space-2);
}

.showcase-version-grid div{
  min-width:0;
  padding:var(--am-space-3);
  border-radius:var(--am-radius-md);
  background:#faf9f7;
  color:#171a24;
}

.showcase-version-grid span,
.showcase-version-grid strong{
  display:block;
  min-width:0;
}

.showcase-version-grid span{
  color:#5b5a62;
  font-size:var(--am-text-xs);
}

.showcase-version-grid strong{
  margin-top:var(--am-space-1);
  color:#171a24;
  font-size:var(--am-text-md);
}

.showcase-version-flow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--am-space-1);
}

.showcase-version-flow span{
  min-width:0;
  padding:.65rem .8rem;
  border-radius:var(--am-radius-pill);
  background:#e8f1ec;
  color:#173128;
  font-size:var(--am-text-xs);
  font-weight:700;
  text-align:center;
}

.showcase-featured-body{
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:var(--am-space-4);
}

.showcase-featured-body h3{
  margin-top:var(--am-space-2);
  color:#171a24;
  font-size:var(--am-text-xl);
}

.showcase-featured-body p{
  max-width:58rem;
  margin-top:var(--am-space-1);
  color:#5b5a62;
}

.showcase-article-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--am-space-1);
  color:#5b5a62;
  font-size:var(--am-text-xs);
}

.showcase-conclusion{
  margin-top:var(--am-space-2);
  color:#30323b;
  font-size:var(--am-text-sm);
}

.showcase-read-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  width:fit-content;
  margin-top:var(--am-space-3);
  color:#1d3278;
  font-weight:700;
}

.showcase-read-link svg{
  width:1.15rem;
  height:1.15rem;
}

.showcase-article-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:var(--am-space-3);
  margin-top:var(--am-space-3);
}

.showcase-article-card{
  display:flex;
  min-width:0;
  height:100%;
  flex-direction:column;
  overflow:hidden;
  border-radius:var(--am-radius-md);
  background:#ffffff;
  color:#171a24;
  transition:transform .2s var(--am-ease),box-shadow .2s var(--am-ease);
}

.showcase-article-card:hover,
.showcase-article-card:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--am-shadow);
}

.showcase-card-media{
  display:flex;
  min-height:10rem;
  flex-direction:column;
  justify-content:space-between;
  padding:var(--am-space-3);
}

.showcase-card-media>span{
  font-size:var(--am-text-sm);
  font-weight:700;
}

.showcase-media-peach{
  background:#f7e9e1;
  color:#34221d;
}

.showcase-media-mint{
  background:#e8f1ec;
  color:#173128;
}

.showcase-media-sand{
  background:#f2edd8;
  color:#302a17;
}

.showcase-media-plum{
  background:#f2eaf4;
  color:#2b2030;
}

.showcase-media-dark{
  background:#191c27;
  color:#f8f7f4;
}

.showcase-mini-flow,
.showcase-handoff,
.showcase-build-stages{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.4rem;
}

.showcase-handoff{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.showcase-mini-flow i,
.showcase-handoff i,
.showcase-build-stages i{
  min-width:0;
  padding:.55rem .35rem;
  border-radius:var(--am-radius-pill);
  background:rgba(255,255,255,.66);
  color:inherit;
  font-size:var(--am-text-xs);
  font-style:normal;
  font-weight:700;
  text-align:center;
}

.showcase-media-dark .showcase-build-stages i{
  background:#303543;
  color:#f3f4f7;
}

.showcase-load-bars{
  display:flex;
  align-items:flex-end;
  gap:.5rem;
  height:4rem;
}

.showcase-load-bars i{
  display:block;
  flex:1;
  border-radius:var(--am-radius-sm) var(--am-radius-sm) 0 0;
  background:#243d8f;
}

.showcase-load-bars i:nth-child(1){height:38%}
.showcase-load-bars i:nth-child(2){height:58%}
.showcase-load-bars i:nth-child(3){height:76%}
.showcase-load-bars i:nth-child(4){height:94%}

.showcase-compare-bars{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}

.showcase-compare-bars i{
  display:block;
  height:.7rem;
  border-radius:var(--am-radius-pill);
  background:#243d8f;
}

.showcase-compare-bars i:nth-child(1){width:100%}
.showcase-compare-bars i:nth-child(2){width:73%}
.showcase-compare-bars i:nth-child(3){width:48%}

.showcase-article-body{
  display:flex;
  min-width:0;
  flex:1;
  flex-direction:column;
  padding:var(--am-space-3);
}

.showcase-article-body h3{
  margin-top:var(--am-space-2);
  color:#171a24;
  font-size:var(--am-text-xl);
}

.showcase-article-body p{
  margin-top:var(--am-space-1);
  margin-bottom:var(--am-space-3);
  color:#5b5a62;
}

.showcase-article-body>strong{
  margin-top:auto;
  padding-top:var(--am-space-2);
  border-top:1px solid var(--am-line);
  color:#30323b;
  font-size:var(--am-text-sm);
}

.showcase-workflows>.am-container{
  display:flex;
  flex-direction:column;
  gap:var(--am-space-4);
}

.showcase-workflows .am-section-head{
  margin-bottom:var(--am-space-2);
}

.showcase-workflow{
  min-width:0;
  padding:var(--am-space-4);
  transition:box-shadow .25s var(--am-ease),transform .25s var(--am-ease);
}

.showcase-workflow.is-topic-match,
.showcase-article-card.is-topic-match,
.showcase-featured.is-topic-match{
  box-shadow:0 0 0 3px rgba(36,61,143,.28),var(--am-shadow);
  transform:translateY(-3px);
}

.showcase-workflow-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(17rem,28rem);
  align-items:start;
  gap:var(--am-space-4);
}

.showcase-workflow-head>div{
  min-width:0;
}

.showcase-workflow-head h3{
  margin-top:var(--am-space-2);
  font-size:var(--am-text-xl);
}

.showcase-workflow-head>p{
  color:inherit;
  opacity:.78;
}

.showcase-step-list{
  position:relative;
  display:flex;
  flex-direction:column;
  margin-top:var(--am-space-4);
  list-style:none;
}

.showcase-step-row{
  display:grid;
  grid-template-columns:2.5rem minmax(7.5rem,11rem) minmax(0,1fr);
  align-items:start;
  gap:var(--am-space-3);
  min-width:0;
  padding-block:var(--am-space-2);
  border-top:1px solid rgba(23,26,36,.12);
}

.showcase-step-row:last-child{
  border-bottom:1px solid rgba(23,26,36,.12);
}

.showcase-step-row strong,
.showcase-step-row p{
  min-width:0;
}

.showcase-step-row p{
  color:inherit;
  opacity:.78;
}

.showcase-step-no{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  border-radius:var(--am-radius-pill);
  background:#243d8f;
  color:#ffffff;
  font-size:var(--am-text-xs);
  line-height:1;
}

.showcase-output{
  display:grid;
  grid-template-columns:minmax(7.5rem,11rem) minmax(0,1fr);
  gap:var(--am-space-3);
  margin-top:var(--am-space-3);
  padding:var(--am-space-3);
  border-radius:var(--am-radius-md);
  background:#191c27;
  color:#f8f7f4;
}

.showcase-output span{
  color:#c7cad3;
  font-size:var(--am-text-sm);
}

.showcase-output strong{
  color:#ffffff;
}

.showcase-discovery{
  background:#f7e9e1;
  color:#34221d;
}

.showcase-discovery-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:58rem;
  margin-inline:auto;
  text-align:center;
}

.showcase-discovery-head .am-kicker{
  margin-inline:auto;
}

.showcase-discovery-head>p{
  max-width:46rem;
  margin-top:var(--am-space-2);
  color:#685148;
}

.showcase-filter{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--am-space-1);
  margin-top:var(--am-space-3);
}

.showcase-filter button{
  min-height:2.75rem;
  padding:.6rem 1rem;
  border:1px solid rgba(52,34,29,.3);
  border-radius:var(--am-radius-pill);
  background:#fff;
  color:#34221d;
  font-weight:650;
  cursor:pointer;
}

.showcase-filter button[aria-pressed="true"]{
  border-color:#1d3278;
  background:#1d3278;
  color:#ffffff;
}

.showcase-filter-status{
  min-height:1.6rem;
  margin-top:var(--am-space-2)!important;
  color:#685148!important;
  font-size:var(--am-text-sm);
}

.showcase-reading{
  margin-top:var(--am-space-5);
}

.showcase-reading>.c-card{
  padding:var(--am-space-4);
  background:#ffffff;
  color:#171a24;
}

.showcase-reading>.c-card p{
  margin-top:var(--am-space-1);
  color:#5b5a62;
}

.showcase-reading h3{
  margin-top:var(--am-space-2);
  font-size:var(--am-text-xl);
}

.showcase-card-mark{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--am-space-1);
}

.showcase-card-mark .c-icon-well{
  background:#f2eaf4;
  color:#243d8f;
}

.showcase-reading .showcase-actions{
  margin-top:auto;
  padding-top:var(--am-space-3);
}

.showcase-closing{
  padding-bottom:var(--am-section-space);
}

.showcase-closing .c-cta-panel{
  padding:clamp(2rem,5vw,4rem);
  background:#191c27;
  color:#f8f7f4;
}

.showcase-closing .c-cta-panel h2{
  color:#ffffff;
  font-size:clamp(2rem,4vw,3.2rem);
}

.showcase-closing .c-cta-panel p{
  max-width:44rem;
  margin-top:var(--am-space-2);
  color:#c5c8d1;
}

.showcase-closing .am-kicker{
  background:#f2edd8;
  color:#302a17;
}

.showcase-closing .am-kicker::before{
  background:#171a24;
}

.showcase-closing-actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--am-space-2);
  min-width:13rem;
}

.showcase-closing-actions .c-btn-secondary{
  background:#ffffff;
  color:#171a24;
}

.showcase-closing-actions .c-btn-ghost{
  border-color:rgba(248,247,244,.42);
  background:transparent;
  color:#f8f7f4;
}

@media (max-width:64rem){
  .showcase-hero-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .showcase-hero-copy h1{
    max-width:18ch;
  }

  .showcase-recipe{
    width:100%;
  }

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

  .showcase-workflow-head{
    grid-template-columns:minmax(0,1fr);
    gap:var(--am-space-2);
  }

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

@media (max-width:42rem){
  .showcase-hero{
    padding-block:var(--am-hero-pad);
  }

  .showcase-hero-grid{
    gap:var(--am-space-4);
  }

  .showcase-hero-copy h1{
    max-width:none;
    font-size:clamp(2.55rem,13vw,4rem);
  }

  .showcase-actions{
    width:100%;
  }

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

  .showcase-hero-facts{
    grid-template-columns:minmax(0,1fr);
    gap:var(--am-space-2);
  }

  .hero-art.showcase-recipe{
    width:min(calc(100% - var(--am-gutter)*2),100%);
    height:auto;
    margin-inline:auto;
    overflow:hidden;
    transform:none;
  }

  .showcase-recipe-body,
  .showcase-recipe-main{
    grid-template-columns:minmax(0,1fr);
  }

  .showcase-resource{
    grid-column:1;
  }

  .showcase-recipe-side{
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }

  .showcase-recipe-foot{
    grid-template-columns:minmax(0,1fr);
  }

  .showcase-featured-media{
    height:23rem;
  }

  .showcase-version-board{
    justify-content:flex-end;
    padding:4.5rem var(--am-space-3) var(--am-space-3);
  }

  .showcase-version-head{
    align-items:flex-start;
    flex-direction:column;
    gap:var(--am-space-1);
  }

  .showcase-version-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--am-space-1);
  }

  .showcase-version-grid div{
    padding:var(--am-space-2);
  }

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

  .showcase-article-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .showcase-step-row{
    grid-template-columns:2.25rem minmax(0,1fr);
    gap:var(--am-space-2);
  }

  .showcase-step-row>:nth-child(3){
    grid-column:2;
  }

  .showcase-output{
    grid-template-columns:minmax(0,1fr);
    gap:var(--am-space-1);
  }

  .showcase-filter{
    align-items:stretch;
    flex-direction:column;
    width:100%;
  }

  .showcase-filter button{
    width:100%;
  }

  .showcase-closing-actions{
    width:100%;
  }
}

@media (max-width:24.375rem){
  .showcase-recipe-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .showcase-version-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .showcase-featured-media{
    height:auto;
    min-height:34rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .showcase-featured,
  .showcase-article-card,
  .showcase-workflow{
    transition:none;
  }
}