/* Shared collection: real website screenshots, compact tabs, direct selection. */
.design-showcase { margin-block: 2rem 5rem; }
.showcase-heading { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.showcase-heading h2 { font:500 1.25rem/1.3 var(--font-body); letter-spacing:-.025em; }
.showcase-heading p { margin:0; color:var(--color-ink-3); font-size:.8125rem; }
.design-switcher { display:flex; gap:2rem; margin-bottom:1.5rem; border-bottom:1px solid var(--color-rule); }
.design-switcher a { display:flex; align-items:center; min-height:48px; padding:.5rem 0; color:var(--color-ink-3); font:400 .875rem/1.3 var(--font-body); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.design-switcher a:hover { color:var(--color-ink); }
.design-switcher a[aria-selected="true"] { color:var(--color-ink); border-color:var(--color-accent); }
.showcase-collection { list-style:none; padding:0; margin:0; display:block; }
.showcase-collection > li { margin:0 0 3rem; padding:0; border:0; background:none; }
.showcase-collection > li[hidden] { display:none; }
.is-enhanced .showcase-collection > li { margin-bottom:0; }
.design-stage { margin:0; display:grid; grid-template-columns:minmax(0,1fr) 14rem; gap:2rem; align-items:center; }
.design-stage__image { overflow:hidden; border:1px solid var(--color-rule); border-radius:10px; background:var(--color-paper-2); }
.design-stage__image a { display:block; }
.design-stage__image a:focus-visible { outline-offset:-4px; }
.design-stage__image img { display:block; width:100%; height:auto; aspect-ratio:1189/792; object-fit:cover; }
.design-stage__caption { display:flex; flex-direction:column; align-items:stretch; align-self:start; justify-content:center; gap:1.25rem; padding:1.5rem 0; }
.design-stage__identity > p:first-child { font-size:.6875rem; letter-spacing:.09em; margin:0 0 .625rem; }
.design-stage__identity > p:first-child span { letter-spacing:0; color:var(--color-ink-3); margin-left:.25rem; }
.design-stage__identity h3 { font:400 clamp(1.25rem,2.5vw,1.75rem)/1.2 var(--font-body); letter-spacing:-.035em; margin:0; }
.design-stage__description { color:var(--color-ink-2); font-size:.875rem; line-height:1.6; max-width:35rem; margin:.625rem 0 0; }
.design-stage__actions { display:flex; flex-direction:column; align-items:stretch; gap:.5rem; flex-shrink:0; }
.showcase-select,.showcase-preview { display:flex; justify-content:space-between; align-items:center; gap:2rem; min-height:44px; font:400 .875rem/1.3 var(--font-body); text-decoration:none; white-space:nowrap; }
.design-switcher a:active,.showcase-select:active,.showcase-preview:active { opacity:.7; }
.showcase-select { background:var(--color-ink); color:var(--color-paper); padding:.875rem 1.25rem; border-radius:6px; }
.showcase-select:hover { background:var(--color-accent); color:var(--color-accent-ink); }
.showcase-preview { color:var(--color-ink-2); padding:.25rem 0; }
.showcase-preview:hover { color:var(--color-ink); text-decoration:underline; }
.showcase-footnote { color:var(--color-ink-3); margin:0; font-size:.75rem; }
.design-stage__contents { margin:1rem 0 0; padding:0; list-style:none; display:grid; gap:.4rem; color:var(--color-ink-2); font-size:.75rem; }
.design-stage__contents li { padding-left:.875rem; position:relative; }
.design-stage__contents li::before { content:'—'; color:var(--color-accent); position:absolute; left:0; }
.showcase-order { color:var(--color-ink-3); font-size:.75rem; min-height:44px; display:flex; align-items:center; white-space:nowrap; }
@media(max-width:48rem) {
  .design-showcase { margin-block:1.5rem 3.5rem; }
  .showcase-heading { align-items:start; flex-direction:column; gap:.5rem; margin-bottom:.75rem; }
  .design-switcher { gap:0; justify-content:space-between; flex-wrap:wrap; }
  .design-switcher a { font-size:.75rem; padding-inline:.25rem; }
  .design-stage { display:block; }
  .design-stage__caption { align-items:stretch; flex-direction:column; gap:1rem; padding-top:1.25rem; }
  .design-stage__actions { flex-direction:row; flex-wrap:wrap; align-items:center; gap:1rem; }
  .showcase-select,.showcase-preview { gap:1rem; }
}
@media(max-width:24rem) { .design-switcher { justify-content:start; column-gap:1rem; } }