/* The collection uses the site's own ink, type, and restrained navigation. */
.showcase-page { background: var(--bg); }
.showcase-page::before { content: none; }
.showcase-page .mix-nav { background: #1b1917; box-shadow: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; animation: showcase-nav 550ms var(--spring); }
.showcase-page a:hover { text-decoration: none; color: var(--text-dark); }
.showcase-page .mix-nav a:hover { color: var(--text-dark); }
.showcase-main { width: min(calc(100% - 3rem), 980px); padding-block: 8rem 3rem; }
.showcase-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 3rem; }
.showcase-heading h1 { color: var(--text-dark); font: 620 clamp(2.8rem, 6vw, 4.3rem)/1.15 var(--font-system); letter-spacing: -.035em; margin: 0; }
.showcase-heading h1 span { color: var(--text-light); }
.showcase-heading p { margin: 0 0 .25rem; color: var(--text-light); max-width: 28rem; line-height: 1.6; }
.showcase-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.project-controls { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: -.65rem; }
.project-controls button { display: inline-flex; align-items: center; gap: .5rem; font: 500 .93rem/1.5 var(--font-system); padding: .55rem .65rem; min-height: 44px; border: 0; border-radius: 5px; background: transparent; color: var(--text-light); cursor: pointer; transition: color 180ms ease, background 180ms ease; }
.project-controls button:hover { background: #24211e; color: var(--text-dark); }
.project-controls button[aria-pressed="true"] { color: var(--text-dark); background: #24211e; }
.project-controls button span { color: var(--text-light); font-size: .8rem; font-variant-numeric: tabular-nums; }
.project-count { margin: 0; color: var(--text-light); font-size: .87rem; font-variant-numeric: tabular-nums; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.25rem 2rem; }
.project-entry { min-width: 0; }
.project-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.project-image { overflow: hidden; border-radius: 7px; background: #1e1c1a; aspect-ratio: 8 / 5; }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: filter 220ms ease; }
.project-link:hover .project-image img { filter: brightness(1.08); }
.project-title { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 1rem; }
.project-title h2 { font: 600 1.18rem/1.4 var(--font-system); color: var(--text-dark); margin: 0; }
.project-arrow { width: 21px; height: 21px; flex: none; color: var(--text-light); transition: transform 220ms var(--spring), color 180ms ease; }
.project-link:hover .project-arrow { transform: translate(2px, -2px); color: var(--text-dark); }
.project-description { margin: .45rem 0 1rem; color: var(--text-light); font-size: .94rem; line-height: 1.6; flex: 1; }
.project-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .35rem .75rem; color: var(--text-light); font-size: .77rem; line-height: 1.6; }
.project-access { display: inline-flex; align-items: center; gap: .4rem; }
.project-lock { width: 13px; height: 15px; flex: none; }
.showcase-note { color: var(--text-light); max-width: 40rem; margin: 3.5rem 0 0; font-size: .9rem; }
.showcase-page .mix-footer { color: var(--text-light); padding-bottom: 2.5rem; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes showcase-nav { from { transform: translate(-50%, -.4rem); } to { transform: translate(-50%, 0); } }
@media (max-width: 640px) { .showcase-main { width: calc(100% - 2rem); padding-top: 7rem; } .showcase-heading { grid-template-columns: 1fr; gap: .8rem; margin-bottom: 2rem; } .project-grid { grid-template-columns: 1fr; gap: 2.75rem; } .showcase-toolbar { align-items: flex-start; flex-wrap: wrap; gap: .5rem; } .project-count { align-self: center; } .showcase-heading h1 { font-size: 2.8rem; letter-spacing: -.025em; } }
@media (prefers-reduced-motion: reduce) { .showcase-page .mix-nav { animation: none; } .showcase-page *, .showcase-page *::before, .showcase-page *::after { transition: none !important; } }
/* Show the entire captured UI; only photographic covers may crop. */
.project-image img[src*="/previews/"], .project-image img[src$="/slack.png"] { object-fit: contain; }