/* Showcase */
.page-hero-sm{padding-block:clamp(40px,7vw,84px) clamp(20px,3vw,40px)}
.page-hero-sm h1{max-width:20ch}

.sc-toolbar{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-bottom:16px}
.sc-filters{display:flex;flex-wrap:wrap;gap:8px}
.sc-right{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip .sw{width:9px;height:9px;border-radius:50%;background:var(--c)}
.sc-family select{padding:.5em .8em;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);font-size:.84rem;color:var(--ink)}
.sc-count{color:var(--muted);margin-bottom:16px}
.sc-empty{color:var(--muted);padding:60px 0;text-align:center}

.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr));gap:clamp(10px,1.4vw,18px)}
@media (max-width:520px){.sc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sc-card{display:grid;gap:8px;text-align:left;border-radius:var(--r-m)}
.sc-card .post{aspect-ratio:4/5;box-shadow:var(--shadow-1);transition:transform .35s var(--ease),box-shadow .35s}
.sc-card:hover .post,.sc-card:focus-visible .post{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.sc-card img{transition:transform .5s var(--ease)}
.sc-card:hover img{transform:scale(1.04)}
.sc-fest{position:absolute;right:8px;top:8px;left:auto}
.sc-cardmeta{display:grid;gap:2px;padding:0 2px}
.sc-cardmeta .mono{font-size:.7rem;color:var(--muted)}
.sc-h{font-size:.84rem;font-weight:600;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(12px,3vw,40px)}
.lb-backdrop{position:absolute;inset:0;background:oklch(0.05 0.01 265/.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:lb-fade .25s var(--ease)}
.lb-frame{position:relative;z-index:1;width:min(1100px,100%);max-height:min(88vh,900px);background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-2);overflow:hidden;animation:lb-in .3s var(--ease)}
@keyframes lb-fade{from{opacity:0}}
@keyframes lb-in{from{opacity:0;transform:scale(.96) translateY(10px)}}
.lb-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);max-height:min(88vh,900px)}
.lb-img{background:var(--bg-sunk);display:grid;place-items:center;overflow:hidden}
.lb-img img{max-height:min(88vh,900px);width:100%;height:100%;object-fit:cover}
.lb-info{padding:clamp(18px,2.4vw,32px);overflow-y:auto;display:grid;align-content:start;gap:4px}
.lb-meta{color:var(--muted);margin-bottom:8px}
.lb-info h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);margin-bottom:6px}
.lb-sub{color:var(--accent-text);font-size:.86rem;font-weight:600;margin-bottom:18px}
.lb-tabs{margin-bottom:10px}
.lb-close{position:absolute;top:14px;right:14px;z-index:3;background:oklch(.1 0 0/.5);color:#fff;border-color:transparent}
.lb-close:hover{background:oklch(.1 0 0/.7)}
.lb-nav{position:absolute;top:50%;translate:0 -50%;z-index:3;width:46px;height:46px;border-radius:50%;background:oklch(.1 0 0/.45);color:#fff;display:grid;place-items:center;transition:background .2s,transform .2s}
.lb-nav:hover{background:oklch(.1 0 0/.7);transform:translateY(-50%) scale(1.06)}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-nav svg{width:22px;height:22px}
@media (max-width:760px){
  .lb-body{grid-template-columns:1fr;max-height:none;overflow-y:auto}
  .lb-img img{max-height:52vh}
  .lb-nav{top:26vh}
  .lightbox{padding:0}
  .lb-frame{max-height:96vh;border-radius:0}
}