.showcase-page main { background:var(--paper); color:var(--ink); }
.showcase-intro { padding-block:48px 68px; }
.showcase-intro .breadcrumbs { margin-bottom:58px; }
.showcase-intro-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:10%; align-items:end; }
.showcase-intro h1 { font-size:clamp(63px,6vw,100px); line-height:.98; letter-spacing:-.04em; margin:0; }
.showcase-intro .eyebrow { color:#626b5c; }
.showcase-lede { max-width:450px; }
.showcase-lede > p { font-size:15px; line-height:1.9; color:#535d4c; margin-bottom:20px; }
.showcase-disclosure { display:block; font-size:10px; color:#58614f; padding-top:18px; border-top:1px solid var(--dark-line); }
.showcase-collection { padding-bottom:100px; }
.showcase-filter-row { display:flex; align-items:center; justify-content:space-between; gap:25px; border-block:1px solid var(--dark-line); padding-block:22px; margin-bottom:45px; }
.showcase-filters { display:flex; flex-wrap:wrap; gap:8px; }
.showcase-filters button { padding:11px 16px; min-height:44px; color:#35412e; background:transparent; border:1px solid #b9bfae; font:500 11px/1.5 var(--sans); }
.showcase-filters button span { margin-left:13px; font-size:9px; }
.showcase-filters button[aria-pressed=true] { background:#283526; color:#f4f0e7; border-color:#283526; }
.showcase-count { font-size:10px; color:#58614f; white-space:nowrap; }
.showcase-grid { display:grid; grid-template-columns:1fr 1fr; gap:55px 32px; }
.showcase-card { position:relative; min-width:0; }
.showcase-preview { aspect-ratio:1280/860; position:relative; overflow:hidden; border:1px solid #cbc8ba; background:#d7d9cb; --preview-scale:.45; }
.showcase-preview > img { width:100%; height:100%; object-fit:cover; }
.showcase-preview .live-preview { position:absolute; inset:0; width:1280px; height:860px; border:0; transform:scale(var(--preview-scale)); transform-origin:0 0; pointer-events:none; }
.showcase-caption { position:relative; padding-top:24px; }
.showcase-caption .eyebrow { color:#626b5c; margin-bottom:12px; font-size:9px; }
.showcase-caption h2 { font-size:42px; letter-spacing:-.025em; line-height:1.1; margin-bottom:9px; }
.showcase-caption > p:not(.eyebrow) { font-size:13px; color:#535d4c; padding-right:160px; }
.showcase-open { position:absolute; right:0; bottom:0; display:flex; gap:20px; align-items:center; font-size:9px; text-transform:uppercase; letter-spacing:.1em; padding-block:5px; border-bottom:1px solid #8f947f; }
.showcase-open > span { font-size:18px; }
.showcase-card-link::after { content:""; position:absolute; inset:0; z-index:2; }
.showcase-caption { position:static; }
.showcase-card-link:focus-visible { outline:none; }
.showcase-card:has(.showcase-card-link:focus-visible) { outline:2px solid #61774d; outline-offset:8px; }
.showcase-card:hover .showcase-open { color:#365928; border-color:#365928; }
.showcase-card:hover .showcase-preview { border-color:#61774d; }
.showcase-card .showcase-open { bottom:0; }
.showcase-cta { border-top:1px solid var(--dark-line); padding-block:80px; background:#e2e3d6; }
.showcase-cta .eyebrow { color:#626b5c; }
.showcase-cta h2 { font-size:clamp(48px,5vw,78px); }
.showcase-cta p:not(.eyebrow) { max-width:630px; font-size:15px; color:#535d4c; margin-top:27px; }
.showcase-cta .button { margin-top:30px; }
.showcase-cta .wrap > span { display:block; font-size:11px; color:#58614f; margin-top:20px; }
@media (max-width:1100px) {
  .showcase-intro-grid { gap:7%; }
  .showcase-filter-row { flex-wrap:wrap; gap:15px; }
  .showcase-count { width:100%; }
  .showcase-caption > p:not(.eyebrow) { padding-right:0; }
  .showcase-open { position:static; margin-top:15px; display:inline-flex; }
}
@media (max-width:760px) {
  .showcase-intro { padding-block:30px 40px; }
  .showcase-intro .breadcrumbs { margin-bottom:35px; }
  .showcase-intro-grid { grid-template-columns:1fr; gap:30px; }
  .showcase-intro h1 { font-size:60px; }
  .showcase-lede > p { font-size:14px; }
  .showcase-filter-row { margin-bottom:30px; padding-block:17px; gap:15px; }
  .showcase-filters { gap:7px; }
  .showcase-filters button { padding:10px 13px; font-size:10px; }
  .showcase-filters button span { margin-left:8px; }
  .showcase-grid { grid-template-columns:1fr; gap:38px; }
  .showcase-caption { padding-top:19px; }
  .showcase-caption h2 { font-size:39px; }
  .showcase-open { margin-top:10px; }
  .showcase-collection { padding-bottom:55px; }
  .showcase-cta { padding-block:60px; }
  .showcase-cta h2 { font-size:50px; }
  .showcase-cta .wrap > span { font-size:10px; max-width:270px; }
}
@media (max-width:370px) { .showcase-intro h1 { font-size:52px; } }
