.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.filters .sep{width:1px;align-self:stretch;margin:0 var(--gap-xs);
  background:var(--ink-hairline)}
.chip .swatch{width:9px;height:9px;border-radius:var(--r-pill);background:var(--accent)}
.tile{display:block;width:100%;min-width:0;padding:0;border:0;margin:0;cursor:pointer;
  text-align:left;font:inherit;color:inherit;background:transparent;
  position:relative;border-radius:var(--r-card);
  transition:transform var(--d-base) var(--e-enter)}
.tile:hover{transform:translateY(-3px)}
.ph{display:block;position:relative;width:100%;overflow:hidden;border-radius:var(--r-card);
  background:linear-gradient(var(--ang,150deg),
    color-mix(in oklab, var(--accent) 22%, var(--navy-700)),
    var(--navy) 58%, var(--navy-950));
  box-shadow:inset 0 0 0 1px var(--ink-hairline)}
.ph::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 44% at var(--fx,26%) var(--fy,22%),
      color-mix(in oklab, var(--accent) 26%, transparent), transparent 72%),
    radial-gradient(40% 52% at var(--bx,82%) var(--by,86%),
      color-mix(in oklab, var(--navy-950) 70%, transparent), transparent 76%)}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg, color-mix(in oklab, var(--cream) 8%, transparent), transparent 44%)}
.tile:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.ar-w{aspect-ratio:16 / 9}
.ar-l{aspect-ratio:4 / 3}
.ar-s{aspect-ratio:1 / 1}
.ar-p{aspect-ratio:3 / 4}
.v0 .ph{--ang:150deg;--fx:24%;--fy:20%;--bx:84%;--by:88%}
.v1 .ph{--ang:118deg;--fx:70%;--fy:16%;--bx:20%;--by:84%}
.v2 .ph{--ang:196deg;--fx:38%;--fy:74%;--bx:88%;--by:18%}
.v3 .ph{--ang:164deg;--fx:82%;--fy:58%;--bx:16%;--by:22%}
.v4 .ph{--ang:132deg;--fx:16%;--fy:64%;--bx:74%;--by:24%}
.ph .veil{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:var(--gap-xs);padding:var(--gap-md);opacity:0;
  background:linear-gradient(180deg, transparent 34%, color-mix(in oklab, var(--navy-950) 88%, transparent));
  transition:opacity var(--d-base) var(--e-enter)}
.tile:hover .ph .veil,.tile:focus-visible .ph .veil{opacity:1}
.ph .veil p{display:block;margin:0;font-size:13.5px;line-height:1.42;color:var(--ink-94)}
.ph .veil .zn{display:inline-flex;align-items:center;gap:var(--gap-xs);
  font-size:var(--t-label);letter-spacing:var(--ls-tag);text-transform:uppercase;
  font-weight:700;color:var(--ink-84)}
.ph .veil .zn i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--accent);flex:none}
.ph .zoom{display:grid;position:absolute;top:var(--gap-sm);right:var(--gap-sm);
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-pill);
  color:var(--ink-94);background:color-mix(in oklab, var(--navy-950) 66%, transparent);
  opacity:0;transition:opacity var(--d-base) var(--e-enter)}
.tile:hover .ph .zoom,.tile:focus-visible .ph .zoom{opacity:1}
.ph .zoom .ico{--ico:16px}
.more{max-width:var(--maxw);margin:var(--gap-lg) auto 0;display:flex;
  flex-direction:column;align-items:center;gap:var(--gap-sm)}
.more .note{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--ink-56)}
.more .bar{width:180px;height:3px;border-radius:var(--r-pill);overflow:hidden;
  background:var(--ink-hairline)}
.more .bar span{display:block;width:34%;height:100%;border-radius:var(--r-pill);
  background:var(--ink-rim)}
.skel .ph{box-shadow:inset 0 0 0 1px var(--ink-hairline)}
.skel .ph::before{background:linear-gradient(90deg,
  transparent, color-mix(in oklab, var(--ink) 9%, transparent), transparent);
  animation:sheen var(--d-slow) var(--e-enter) infinite}
.lb{width:100%;max-width:none;max-height:none;height:100%;margin:0;padding:0;border:0;
  background:transparent;color:var(--ink);overflow:hidden}
.lb::backdrop{background:color-mix(in oklab, var(--navy-950) 88%, transparent)}
dialog.lb[open]{position:fixed;inset:0;z-index:80;display:flex}
.lb .shell{position:relative;flex:1;min-height:0;display:grid;
  grid-template-rows:auto 1fr auto;gap:var(--gap-md);
  padding:var(--gap-md) var(--gut);
  background:color-mix(in oklab, var(--navy-950) 88%, transparent);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright))}
.lb .top{display:flex;align-items:center;gap:var(--gap-md);max-width:var(--maxw);
  width:100%;margin:0 auto}
.lb .counter{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-84)}
.lb .top .ztag{margin-left:var(--gap-xs)}
.lb .close{margin-left:auto;width:42px;height:42px;padding:0;justify-content:center}
.lb .stage{position:relative;min-height:0;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--gap-md);
  max-width:var(--maxw);width:100%;margin:0 auto}
.lb .frame{position:relative;height:100%;min-height:0;display:flex;
  align-items:center;justify-content:center}
.lb .frame .ph{height:100%;max-height:100%;aspect-ratio:16 / 10;width:auto;
  box-shadow:inset 0 0 0 1px var(--ink-hairline), var(--sh-lg)}
.lb .nav-btn{width:52px;height:52px;padding:0;justify-content:center;flex:none}
.lb .meta{max-width:var(--maxw-text);margin:0 auto;width:100%;text-align:center}
.lb .meta p{margin:0 0 var(--gap-xs);font-size:var(--t-body-lg);color:var(--ink-94)}
.lb .meta .sub{margin:0;font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-56)}
.mgrid{max-width:var(--maxw);margin:0 auto;display:grid;gap:var(--gap-md);
  grid-template-columns:repeat(12,1fr);grid-auto-flow:row dense}
.mgrid .tile{grid-column:span 3}
.mgrid .tile.w4{grid-column:span 4}
.mgrid .tile.w6{grid-column:span 6}
.mgrid .tile.feat .ph{box-shadow:inset 0 0 0 1px var(--ink-rim)}
.mgrid .tile.feat .ph .veil{opacity:1;
  background:linear-gradient(180deg, transparent 46%, color-mix(in oklab, var(--navy-950) 82%, transparent))}
.mgrid .tile.feat .ph .veil p{font-size:var(--t-body-lg);max-width:44ch}
@media (max-width:760px){
  .lb .shell{padding:var(--gap-sm) var(--gut)}
  .lb .stage{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .lb .frame .ph{width:100%;height:auto;aspect-ratio:4 / 3}
  .lb .nav-btn{width:44px;height:44px}
  .lb .prev,.lb .next{grid-row:2}
  .lb .prev{justify-self:start}
  .lb .next{justify-self:end;margin-top:calc(0px - 44px)}
}
@media (max-width:1100px){
  .mgrid{grid-template-columns:repeat(8,1fr)}
  .mgrid .tile{grid-column:span 4}
  .mgrid .tile.w4{grid-column:span 4}
  .mgrid .tile.w6{grid-column:span 8}
}
@media (max-width:640px){
  .mgrid{grid-template-columns:repeat(2,1fr);gap:var(--gap-sm)}
  .mgrid .tile,.mgrid .tile.w4{grid-column:span 1}
  .mgrid .tile.w6{grid-column:span 2}
  .mgrid .tile .ph .veil{opacity:1;padding:var(--gap-sm)}
  .mgrid .tile .ph .veil p{font-size:12px}
}